.theme-brand {
  /* background color */
  --color-background-background-default: var(--color-bg-default);
  --color-background-background-accent-color: var(--color-bg-accent);
  --color-background-background-inverse-default-color: var(--color-bg-inverse-default);
  --color-background-background-inverse-accent: var(--color-bg-inverse-accent);

  /* foreground color */
  --color-foreground-foreground-default: var(--color-fg-default);
  --color-foreground-foreground-light: var(--color-fg-light);
  --color-foreground-foreground-lighter: var(--color-fg-lighter);
  --color-foreground-foreground-lightest: var(--color-fg-lightest);
  --color-foreground-foreground-active: var(--color-fg-active);
  --color-foreground-foreground-hover: var(--color-fg-hover);
  --color-foreground-foreground-disabled: var(--color-fg-disabled);
  --color-foreground-foreground-inactive: var(--color-fg-inactive);
  --color-foreground-foreground-on-active: var(--color-fg-action-active);
  --color-foreground-foreground-on-hover: var(--color-fg-action-hover);
  --color-foreground-foreground-on-disabled: var(--color-fg-action-disabled);
  --color-foreground-foreground-action-inactive: var(--color-fg-action-inactive);
  --color-foreground-foreground-on-inverse-active: var(--color-fg-action-inverse-active);
  --color-foreground-foreground-on-inverse-hover: var(--color-fg-action-inverse-hover);
  --color-foreground-foreground-on-inverse-disabled: var(--color-fg-action-inverse-disabled);
  --color-foreground-foreground-on-inverse-inactive: var(--color-fg-action-inverse-inactive);
  --color-foreground-foreground-brand-default: var(--color-fg-brand-default);
  --color-foreground-foreground-on-error: var(--color-fg-error);
  --color-foreground-foreground-on-success: var(--color-fg-success);
  --color-foreground-foreground-on-warning: var(--color-fg-warning);
  --color-foreground-foreground-on-info: var(--color-fg-info);

  /* surface color */
  --color-surface-surface-default: var(--color-surface-default);
  --color-surface-surface-default-active: var(--color-surface-default-active);
  --color-surface-surface-accent: var(--color-surface-accent);
  --color-surface-surface-active: var(--color-surface-active);
  --color-surface-surface-secondary-active: var(--color-surface-secondary-active);
  --color-surface-surface-hover: var(--color-surface-hover);
  --color-surface-surface-disabled: var(--color-surface-disabled);
  --color-surface-surface-skeleton: var(--color-surface-skeleton);
  --color-surface-surface-on-inverse-active: var(--color-surface-inverse-active);
  --color-surface-surface-on-inverse-hover: var(--color-surface-inverse-hover);
  --color-surface-surface-on-inverse-disabled: var(--color-surface-inverse-disabled);
  --color-surface-surface-on-inverse-skeleton: var(--color-surface-inverse-skeleton);
  --color-surface-surface-error: var(--color-surface-error);
  --color-surface-surface-success: var(--color-surface-success);
  --color-surface-surface-warning: var(--color-surface-warning);
  --color-surface-surface-info: var(--color-surface-info);
  --color-surface-surface-footer: var(--color-surface-footer);
  --color-surface-surface-footer-secondary-color: var(--color-surface-footer-secondary);
  --color-surface-surface-inverse-neutral: var(--color-neutral-110);

  /* border color */
  --color-border-border-default: var(--color-border-default);
  --color-border-width-border-width-strongest: var(--color-border-strong);
  --color-border-width-border-width-hover: var(--color-border-hover);
  --color-border-width-border-width-active: var(--color-border-active);
  --color-border-width-border-width-secondary-active: var(--color-border-secondary-active);
  --color-border-width-border-width-disabled: var(--color-border-disabled);
  --color-border-width-border-width-error: var(--color-border-error);

  /* ------ font size ------ */
  --typography-font-size-display-sm: var(--font-size-display-sm);
  --typography-font-size-display-md: var(--font-size-display-md);
  --typography-font-size-display-lg: var(--font-size-display-lg);
  --typography-font-size-heading1-sm: var(--font-size-h1-sm);
  --typography-font-size-heading1-md: var(--font-size-h1-md);
  --typography-font-size-heading1-lg: var(--font-size-h1-lg);
  --typography-font-size-heading2-sm: var(--font-size-h2-sm);
  --typography-font-size-heading2-md: var(--font-size-h2-md);
  --typography-font-size-heading2-lg: var(--font-size-h2-lg);
  --typography-font-size-heading3-sm: var(--font-size-h3-sm);
  --typography-font-size-heading3-md: var(--font-size-h3-md);
  --typography-font-size-heading3-lg: var(--font-size-h3-lg);
  --typography-font-size-heading4-sm: var(--font-size-h4-sm);
  --typography-font-size-heading4-md: var(--font-size-h4-md);
  --typography-font-size-heading4-lg: var(--font-size-h4-lg);
  --typography-font-size-heading5-sm: var(--font-size-h5-sm);
  --typography-font-size-heading5-md: var(--font-size-h5-md);
  --typography-font-size-heading5-lg: var(--font-size-h5-lg);
  --typography-font-size-body1-sm: var(--font-size-body1-sm);
  --typography-font-size-body1-md: var(--font-size-body1-md);
  --typography-font-size-body1-lg: var(--font-size-body1-lg);
  --typography-font-size-body1-strong-sm: var(--font-size-body1-strong-sm);
  --typography-font-size-body1-strong-md: var(--font-size-body1-strong-md);
  --typography-font-size-body1-strong-lg: var(--font-size-body1-strong-lg);
  --typography-font-size-body2-sm: var(--font-size-body2-sm);
  --typography-font-size-body2-md: var(--font-size-body2-md);
  --typography-font-size-body2-lg: var(--font-size-body2-lg);
  --typography-font-size-body2-strong-sm: var(--font-size-body2-strong-sm);
  --typography-font-size-body2-strong-md: var(--font-size-body2-strong-md);
  --typography-font-size-body2-strong-lg: var(--font-size-body2-strong-lg);
  --typography-font-size-label1-sm: var(--font-size-label1-sm);
  --typography-font-size-label1-md: var(--font-size-label1-md);
  --typography-font-size-label1-lg: var(--font-size-label1-lg);
  --typography-font-size-label2-sm: var(--font-size-label2-sm);
  --typography-font-size-label2-md: var(--font-size-label2-md);
  --typography-font-size-label2-lg: var(--font-size-label2-lg);
  --typography-font-size-label3-sm: var(--font-size-label3-sm);
  --typography-font-size-label3-md: var(--font-size-label3-md);
  --typography-font-size-label3-lg: var(--font-size-label3-lg);
  --typography-font-size-link1-sm: var(--font-size-link1-sm);
  --typography-font-size-link1-md: var(--font-size-link1-md);
  --typography-font-size-link1-lg: var(--font-size-link1-lg);
  --typography-font-size-link2-sm: var(--font-size-link2-sm);
  --typography-font-size-link2-md: var(--font-size-link2-md);
  --typography-font-size-link2-lg: var(--font-size-link2-lg);
  --typography-font-size-footnote-sm: var(--font-size-footnote-sm);
  --typography-font-size-footnote-md: var(--font-size-footnote-md);
  --typography-font-size-footnote-lg: var(--font-size-footnote-lg);
  --typography-font-size-caption-sm: var(--font-size-caption-sm);
  --typography-font-size-caption-md: var(--font-size-caption-md);
  --typography-font-size-caption-lg: var(--font-size-caption-lg);

  /* ----- Line height ----- */
  --typography-line-height-display-sm: var(--line-height-display-sm);
  --typography-line-height-display-md: var(--line-height-display-md);
  --typography-line-height-display-lg: var(--line-height-display-lg);
  --typography-line-height-heading1-sm: var(--line-height-h1-sm);
  --typography-line-height-heading1-md: var(--line-height-h1-md);
  --typography-line-height-heading1-lg: var(--line-height-h1-lg);
  --typography-line-height-heading2-sm: var(--line-height-h2-sm);
  --typography-line-height-heading2-md: var(--line-height-h2-md);
  --typography-line-height-heading2-lg: var(--line-height-h2-lg);
  --typography-line-height-heading3-sm: var(--line-height-h3-sm);
  --typography-line-height-heading3-md: var(--line-height-h3-md);
  --typography-line-height-heading3-lg: var(--line-height-h3-lg);
  --typography-line-height-heading4-sm: var(--line-height-h4-sm);
  --typography-line-height-heading4-md: var(--line-height-h4-md);
  --typography-line-height-heading4-lg: var(--line-height-h4-lg);
  --typography-line-height-heading5-sm: var(--line-height-h5-sm);
  --typography-line-height-heading5-md: var(--line-height-h5-md);
  --typography-line-height-heading5-lg: var(--line-height-h5-lg);
  --typography-line-height-body1-sm: var(--line-height-body1-sm);
  --typography-line-height-body1-md: var(--line-height-body1-md);
  --typography-line-height-body1-lg: var(--line-height-body1-lg);
  --typography-line-height-body1-strong-sm: var(--line-height-body1-strong-sm);
  --typography-line-height-body1-strong-md: var(--line-height-body1-strong-md);
  --typography-line-height-body1-strong-lg: var(--line-height-body1-strong-lg);
  --typography-line-height-body2-sm: var(--line-height-body2-sm);
  --typography-line-height-body2-md: var(--line-height-body2-md);
  --typography-line-height-body2-lg: var(--line-height-body2-lg);
  --typography-line-height-body2-strong-sm: var(--line-height-body2-strong-sm);
  --typography-line-height-body2-strong-md: var(--line-height-body2-strong-md);
  --typography-line-height-body2-strong-lg: var(--line-height-body2-strong-lg);
  --typography-line-height-label1-sm: var(--line-height-label1-sm);
  --typography-line-height-label1-md: var(--line-height-label1-md);
  --typography-line-height-label1-lg: var(--line-height-label1-lg);
  --typography-line-height-label2-sm: var(--line-height-label2-sm);
  --typography-line-height-label2-md: var(--line-height-label2-md);
  --typography-line-height-label2-lg: var(--line-height-label2-lg);
  --typography-line-height-label3-sm: var(--line-height-label3-sm);
  --typography-line-height-label3-md: var(--line-height-label3-md);
  --typography-line-height-label3-lg: var(--line-height-label3-lg);
  --typography-line-height-link1-sm: var(--line-height-link1-sm);
  --typography-line-height-link1-md: var(--line-height-link1-md);
  --typography-line-height-link1-lg: var(--line-height-link1-lg);
  --typography-line-height-link2-sm: var(--line-height-link2-sm);
  --typography-line-height-link2-md: var(--line-height-link2-md);
  --typography-line-height-link2-lg: var(--line-height-link2-lg);
  --typography-line-height-footnote-sm: var(--line-height-footnote-sm);
  --typography-line-height-footnote-md: var(--line-height-footnote-md);
  --typography-line-height-footnote-lg: var(--line-height-footnote-lg);
  --typography-line-height-caption-sm: var(--line-height-caption-sm);
  --typography-line-height-caption-md: var(--line-height-caption-md);
  --typography-line-height-caption-lg: var(--line-height-caption-lg);
}