@use 'sass:string';
$nx-theme: (
  'font-family': string.unquote("'Public Sans Latin', sans-serif !important"),
  // we have some components with transparent background: checkbox, formfield, code-input, circle-toggle, radio-button e.g
  // right now they all have a hardcoded transparent background; consider using ui-background or a new ui-variable for that in future
  ui-background: #0f2a3d,
  ui-01: ui-background,
  // background of elements having the same background color as the page (message, datefield, header, dropdown)
  ui-02: #143851,
  // background of things on ui-01, expansion panel, menu, table, sidebar
  ui-03: #194666,
  // more darker light grey background, e.g. progressbar, header, table, tag, tertiary button
  ui-04: #2d7fb8,
  // used for borders of white surfaces e.g popover, table, card, datefield panel, modal.
  ui-05: #e9f7fb,
  // grey color of borders of interactive elements: radio, checkbox, filter input of dropdown, formfield border, taglist border
  ui-06: #ffffff,
  // dark borders (formfield) + tooltip background
  interactive-text: interactive-primary,
  interactive-primary: #27abd6,
  hover-primary: #3bb4db,
  hover-secondary: #194666,
  active-primary: #66c4e3,
  hover-link: #51bcdf,
  focus-box-shadow: (
    0 0 0 2px #0f2a3d,
    0 0 0 6px #27abd6,
  ),
  focus-inset-box-shadow: (
    inset 0 0 0 4px #27abd6,
    inset 0 0 0 6px #0f2a3d,
  ),
  // typically used on dark backgrounds
  text-01: #ffffff,
  // typically used on light backgrounds
  text-02: #0f2a3d,
  // text, icon color of buttons, checkbox etc
  info: #7c97d0,
  warning: #efbe25,
  warning-hover: #e7a313,
  warning-active: #e08d05,
  danger: #ed6f7c,
  danger-hover: #dc3149,
  danger-active: #b0050c,
  success: #26ae31,
  success-hover: #1a6120,
  success-active: #17501d,
  accent-01: #00b17f,
  // emphasis
  accent-02: #6b8cff,
  // cta
  accent-03: #c7a7ec,
  // attention
  disabled-01: #969696,
  disabled-02: #dbdbdb,
  disabled-03: #ededed,
  disabled-04: rgba(39, 171, 214, 0.35),
  // developer preview:
  // we are still implementing the new readonly features and we might need to change
  // these tokens, but so far they look promising
  readonly-surface-color: #0f2a3d,
  readonly-on-surface-color: #c2c2c2,
  readonly-surface-active-color: #c2c2c2,
  readonly-on-surface-active-color: text-02,
  negative: ui-01,
  negative-accent: #e5e7e6,
  negative-01: #23628f,
  negative-02: #2d7fb8,
  negative-background: #e5e7e6,
  negative-dimmed: rgba(15, 42, 61, 0.4),
  negative-01-dimmed: negative-01,
  negative-02-dimmed: negative-02,
  negative-background-dimmed: rgba(229, 231, 230, 0.4),
  grid-max-width: 1184px,
  // deprecated use the new readonly-surface and readonly-on-surface tokens
  readonly-01: readonly-surface-color,
  readonly-02: readonly-on-surface-color,
  readonly-03: readonly-on-surface-active-color,
  // new largest headline for A1, we just set it to heading-01 for old implementations
  heading-00-font-size: heading-01-font-size,
  heading-00-line-height: heading-01-line-height,
  heading-00-font-weight: heading-01-font-weight,
  heading-00-letter-spacing: heading-01-letter-spacing,
  heading-00-mobile-font-size: heading-01-mobile-font-size,
  heading-00-mobile-line-height: heading-01-mobile-line-height,
  heading-00-mobile-font-weight: heading-01-mobile-font-weight,
  heading-00-mobile-letter-spacing: heading-01-mobile-letter-spacing,
  heading-01-font-size: 3.375rem,
  heading-01-line-height: 3.75rem,
  heading-01-font-weight: 300,
  heading-01-letter-spacing: 0.01875rem,
  heading-01-mobile-font-size: heading-02-font-size,
  heading-01-mobile-line-height: heading-02-line-height,
  heading-01-mobile-font-weight: heading-02-font-weight,
  heading-01-mobile-letter-spacing: heading-02-letter-spacing,
  heading-02-font-size: 2.5rem,
  heading-02-line-height: 3rem,
  heading-02-font-weight: 300,
  heading-02-letter-spacing: 0.01875rem,
  heading-02-mobile-font-size: 2.1875rem,
  heading-02-mobile-line-height: 2.5rem,
  heading-02-mobile-font-weight: 300,
  heading-02-mobile-letter-spacing: heading-02-letter-spacing,
  heading-03-font-size: 1.875rem,
  heading-03-line-height: 2.25rem,
  heading-03-font-weight: 300,
  heading-03-letter-spacing: 0.01875rem,
  heading-03-mobile-font-size: heading-04-font-size,
  heading-03-mobile-line-height: heading-04-line-height,
  heading-03-mobile-font-weight: heading-04-font-weight,
  heading-03-mobile-letter-spacing: heading-04-letter-spacing,
  heading-04-font-size: 1.625rem,
  heading-04-line-height: 2rem,
  heading-04-font-weight: 300,
  heading-04-letter-spacing: 0.01875rem,
  heading-04-mobile-font-size: heading-05-font-size,
  heading-04-mobile-line-height: heading-05-line-height,
  heading-04-mobile-font-weight: heading-05-font-weight,
  heading-04-mobile-letter-spacing: heading-05-letter-spacing,
  heading-05-font-size: 1.5rem,
  heading-05-line-height: 2rem,
  heading-05-font-weight: 600,
  heading-05-letter-spacing: 0.0125rem,
  heading-05-mobile-font-size: heading-06-font-size,
  heading-05-mobile-line-height: heading-06-line-height,
  heading-05-mobile-font-weight: heading-06-font-weight,
  heading-05-mobile-letter-spacing: heading-06-letter-spacing,
  heading-06-font-size: 1.25rem,
  heading-06-line-height: 1.75rem,
  heading-06-font-weight: 300,
  heading-06-letter-spacing: 0.0125rem,
  heading-06-mobile-font-size: 1.125rem,
  heading-06-mobile-line-height: 1.75rem,
  heading-06-mobile-font-weight: 300,
  heading-06-mobile-letter-spacing: 0.0125rem,
  headline-secondary-color: text-01,
  headline-negative-secondary-color: negative,

  heading-6xl-font-size: heading-01-font-size,
  heading-6xl-line-height: heading-01-line-height,
  heading-6xl-font-weight: heading-01-font-weight,
  heading-6xl-letter-spacing: heading-01-letter-spacing,
  heading-6xl-mobile-font-size: heading-01-mobile-font-size,
  heading-6xl-mobile-line-height: heading-01-mobile-line-height,
  heading-6xl-mobile-font-weight: heading-01-mobile-font-weight,
  heading-6xl-mobile-letter-spacing: heading-01-mobile-letter-spacing,

  heading-5xl-font-size: heading-01-font-size,
  heading-5xl-line-height: heading-01-line-height,
  heading-5xl-font-weight: heading-01-font-weight,
  heading-5xl-letter-spacing: heading-01-letter-spacing,
  heading-5xl-mobile-font-size: heading-01-mobile-font-size,
  heading-5xl-mobile-line-height: heading-01-mobile-line-height,
  heading-5xl-mobile-font-weight: heading-01-mobile-font-weight,
  heading-5xl-mobile-letter-spacing: heading-01-mobile-letter-spacing,

  paragraph-01-font-size: 1.25rem,
  paragraph-01-line-height: 1.75rem,
  paragraph-01-font-weight: 400,
  paragraph-01-letter-spacing: 0.0125rem,
  // copy large
  paragraph-02-font-size: 1.125rem,
  paragraph-02-line-height: 1.5rem,
  paragraph-02-font-weight: 400,
  paragraph-02-letter-spacing: 0.0125rem,
  // copy normal
  paragraph-03-font-size: 1rem,
  paragraph-03-line-height: 1.5rem,
  paragraph-03-font-weight: 400,
  paragraph-03-letter-spacing: 0,
  // copy medium
  paragraph-04-font-size: 0.875rem,
  paragraph-04-line-height: 1.25rem,
  paragraph-04-font-weight: 600,
  paragraph-04-letter-spacing: 0.0125rem,
  paragraph-05-font-size: 0.75rem,
  paragraph-05-line-height: 1rem,
  paragraph-05-font-weight: 600,
  paragraph-05-letter-spacing: 0.03125rem,
  // label typographies used for labels in form controls
  // and for font size in inputs/dropdown
  large-label-font-size: 1.25rem,
  large-label-line-height: 1.75rem,
  large-label-font-weight: 400,
  large-label-letter-spacing: 0.0125rem,
  small-label-font-size: 1rem,
  small-label-line-height: 1.5rem,
  small-label-font-weight: 400,
  small-label-letter-spacing: 0,
  button-small-font-size: 0.875rem,
  button-small-line-height: 1rem,
  button-small-font-weight: 600,
  button-small-letter-spacing: 0.0625rem,
  button-small-medium-font-size: button-medium-font-size,
  button-small-medium-line-height: button-medium-line-height,
  button-small-medium-font-weight: button-medium-font-weight,
  button-small-medium-letter-spacing: button-medium-letter-spacing,
  button-medium-font-size: 1rem,
  button-medium-line-height: 1.5rem,
  button-medium-font-weight: 600,
  button-medium-letter-spacing: 0.0625rem,
  button-large-font-size: 1.25rem,
  button-large-line-height: 1.5rem,
  button-large-font-weight: 600,
  button-large-letter-spacing: 0.0625rem,
  shadow-small-color: rgba(0, 0, 0, 0.8),
  shadow-large-color: rgba(0, 0, 0, 0.8),
  shadow-small: 0 2px 4px var(--shadow-small-color),
  shadow-large: 0 8px 24px var(--shadow-large-color),
  /************* COMPONENT SPECIFIC MAPPINGS *************/
  accordion-regular-font-size: heading-04-font-size,
  accordion-regular-line-height: heading-04-line-height,
  accordion-regular-font-weight: heading-04-font-weight,
  accordion-regular-letter-spacing: heading-04-letter-spacing,
  accordion-regular-mobile-font-size: heading-06-font-size,
  accordion-regular-mobile-line-height: heading-06-line-height,
  accordion-regular-mobile-font-weight: 400,
  accordion-regular-mobile-letter-spacing: heading-06-letter-spacing,
  accordion-light-font-size: paragraph-01-font-size,
  accordion-light-line-height: paragraph-01-line-height,
  accordion-light-font-weight: paragraph-01-font-weight,
  accordion-light-letter-spacing: paragraph-01-letter-spacing,
  accordion-light-mobile-font-size: paragraph-03-font-size,
  accordion-light-mobile-line-height: paragraph-03-line-height,
  accordion-light-mobile-font-weight: paragraph-03-font-weight,
  accordion-light-mobile-letter-spacing: paragraph-03-letter-spacing,
  accordion-body-font-size: paragraph-03-font-size,
  accordion-body-line-height: paragraph-03-line-height,
  accordion-body-font-weight: paragraph-03-font-weight,
  accordion-body-letter-spacing: paragraph-03-letter-spacing,

  accordion-extra-light-body-letter-spacing: accordion-body-letter-spacing,
  accordion-extra-light-body-font-size: accordion-body-font-size,
  accordion-extra-light-body-line-height: accordion-body-line-height,

  accordion-chevron-size: 24px,
  accordion-regular-chevron-color: interactive-text,
  accordion-regular-hover-chevron-color: interactive-text,
  accordion-disabled-color: disabled-01,
  accordion-regular-header-background-color: ui-03,
  accordion-regular-header-text-color: text-01,
  accordion-regular-header-hover-text-color: text-01,
  accordion-regular-header-top-margin: 16px,
  accordion-regular-header-active-font-weight: heading-04-font-weight,
  accordion-light-header-active-font-weight: paragraph-01-font-weight,

  accordion-regular-border-color: transparent,
  accordion-regular-mobile-border-color: ui-04,
  accordion-regular-mobile-separator-color: ui-04,
  accordion-regular-header-padding: 24px 32px,
  accordion-regular-mobile-header-padding: 16px,
  accordion-regular-body-padding: 24px 32px 16px,
  accordion-regular-mobile-body-padding: 24px 16px 32px,
  accordion-light-header-text-color: interactive-text,
  accordion-light-header-hover-text-color: interactive-text,
  accordion-light-chevron-color: interactive-text,
  accordion-light-hover-chevron-color: interactive-text,
  accordion-light-header-padding: 24px 32px,
  accordion-light-mobile-header-padding: 16px 0,
  accordion-light-body-padding: 16px 32px 32px,
  accordion-light-mobile-body-padding: 16px 0 24px,
  accordion-light-border-color: ui-04,
  accordion-light-body-font-size: paragraph-03-font-size,
  accordion-extra-light-header-top-margin: 16px,
  accordion-extra-light-chevron-color: interactive-text,
  accordion-extra-light-header-text-color: interactive-text,
  accordion-extra-light-body-padding: 16px 0 8px,
  accordion-extra-light-font-size: 1rem,
  accordion-extra-light-line-height: 1.5rem,
  accordion-extra-light-font-weight: 600,
  accordion-extra-light-letter-spacing: 0.0625rem,
  accordion-extra-light-header-active-font-weight: 600,
  action-font-size: paragraph-03-font-size,
  action-line-height: paragraph-03-line-height,
  action-font-weight: paragraph-03-font-weight,
  action-letter-spacing: paragraph-03-letter-spacing,
  action-color: text-01,
  action-hover-color: text-01,
  action-background-color: ui-02,
  action-hover-background-color: ui-03,
  action-selected-color: text-02,
  action-selected-background-color: interactive-primary,
  action-icon-size: 20px,
  action-expand-icon-size: 16px,
  avatar-background-color: #688fe2,
  avatar-color: text-02,
  avatar-disabled-opacity: 0.4,
  avatar-xsmall-size: 32px,
  avatar-xsmall-font-size: paragraph-04-font-size,
  avatar-xsmall-line-height: paragraph-04-line-height,
  avatar-xsmall-font-weight: paragraph-04-font-weight,
  avatar-xsmall-letter-spacing: paragraph-04-letter-spacing,
  avatar-xsmall-icon-size: 24px,
  avatar-small-size: 40px,
  avatar-small-font-size: paragraph-03-font-size,
  avatar-small-line-height: paragraph-03-line-height,
  avatar-small-font-weight: 600,
  avatar-small-letter-spacing: paragraph-03-letter-spacing,
  avatar-small-icon-size: 24px,
  avatar-small-medium-size: 64px,
  avatar-small-medium-font-size: heading-04-font-size,
  avatar-small-medium-line-height: heading-04-line-height,
  avatar-small-medium-font-weight: 600,
  avatar-small-medium-letter-spacing: heading-04-letter-spacing,
  avatar-small-medium-icon-size: 40px,
  avatar-medium-size: 80px,
  avatar-medium-font-size: heading-03-font-size,
  avatar-medium-line-height: heading-03-line-height,
  avatar-medium-font-weight: 600,
  avatar-medium-letter-spacing: heading-03-letter-spacing,
  avatar-medium-icon-size: 48px,
  avatar-large-size: 120px,
  avatar-large-font-size: heading-02-font-size,
  avatar-large-line-height: heading-02-line-height,
  avatar-large-font-weight: 600,
  avatar-large-letter-spacing: heading-02-letter-spacing,
  avatar-large-icon-size: 72px,
  avatar-xlarge-size: 160px,
  avatar-xlarge-font-size: heading-01-font-size,
  avatar-xlarge-line-height: heading-01-line-height,
  avatar-xlarge-font-weight: 600,
  avatar-xlarge-letter-spacing: heading-01-letter-spacing,
  avatar-xlarge-icon-size: 96px,
  badge-font-size: paragraph-03-font-size,
  badge-line-height: paragraph-03-line-height,
  badge-font-weight: paragraph-03-font-weight,
  badge-letter-spacing: paragraph-03-letter-spacing,
  badge-background-color: ui-06,
  badge-color: text-02,
  badge-active-background-color: #a2e8f5,
  badge-active-color: badge-color,
  badge-positive-background-color: #b3f998,
  badge-positive-color: badge-color,
  badge-critical-background-color: #f19b94,
  badge-critical-color: badge-color,
  badge-negative-background-color: #f9ee89,
  badge-negative-color: badge-color,
  badge-vibrant-background-color: #969696,
  badge-vibrant-color: text-02,
  badge-vibrant-active-background-color: #688fe2,
  badge-vibrant-active-color: badge-vibrant-color,
  badge-vibrant-positive-background-color: #33ad3d,
  badge-vibrant-positive-color: badge-vibrant-color,
  badge-vibrant-critical-background-color: #fb4f61,
  badge-vibrant-critical-color: badge-vibrant-color,
  badge-vibrant-negative-background-color: #efbe25,
  badge-vibrant-negative-color: badge-vibrant-color,
  base-label-color: text-01,
  base-label-small-font-size: small-label-font-size,
  base-label-small-line-height: small-label-line-height,
  base-label-small-font-weight: 600,
  base-label-small-letter-spacing: small-label-letter-spacing,
  base-label-large-font-size: large-label-font-size,
  base-label-large-line-height: large-label-line-height,
  base-label-large-font-weight: 300,
  base-label-large-letter-spacing: large-label-letter-spacing,
  base-error-color: danger,
  base-error-simple-icon-size: 20px,
  base-error-simple-font-size: paragraph-03-font-size,
  base-error-simple-line-height: 1.25rem,
  base-error-simple-font-weight: paragraph-03-font-weight,
  base-error-simple-letter-spacing: paragraph-03-letter-spacing,
  button-primary-background-color: interactive-primary,
  button-primary-border-color: transparent,
  button-primary-text-color: text-02,
  button-primary-hover-background-color: hover-primary,
  button-primary-hover-border-color: transparent,
  button-primary-hover-text-color: text-02,
  button-primary-active-background-color: active-primary,
  button-primary-active-text-color: text-02,
  button-primary-active-border-color: transparent,
  button-primary-disabled-background-color: rgba(39, 171, 214, 0.4),
  button-primary-disabled-text-color: rgba(0, 0, 0, 0.4),
  button-primary-disabled-border-color: transparent,
  button-secondary-background-color: transparent,
  button-secondary-border-color: interactive-primary,
  button-secondary-text-color: text-01,
  button-secondary-hover-background-color: hover-primary,
  button-secondary-hover-border-color: transparent,
  button-secondary-hover-text-color: text-02,
  button-secondary-active-background-color: active-primary,
  button-secondary-active-text-color: text-02,
  button-secondary-active-border-color: transparent,
  button-secondary-disabled-background-color: transparent,
  button-secondary-disabled-text-color: rgba(39, 171, 214, 0.4),
  button-secondary-disabled-border-color: rgba(39, 171, 214, 0.4),
  button-tertiary-text-decoration: none,
  button-tertiary-background-color: transparent,
  button-tertiary-border-color: transparent,
  button-tertiary-text-color: button-secondary-text-color,
  button-tertiary-hover-background-color: hover-secondary,
  button-tertiary-hover-border-color: hover-secondary,
  button-tertiary-hover-text-color: button-secondary-text-color,
  button-tertiary-active-background-color: ui-04,
  button-tertiary-active-text-color: button-secondary-text-color,
  button-tertiary-active-border-color: transparent,
  button-tertiary-disabled-background-color: button-secondary-background-color,
  button-tertiary-disabled-text-color: button-secondary-disabled-text-color,
  button-tertiary-disabled-border-color: transparent,
  button-emphasis-background-color: accent-01,
  button-emphasis-border-color: transparent,
  button-emphasis-text-color: text-02,
  button-emphasis-hover-background-color: #007e5a,
  button-emphasis-hover-border-color: transparent,
  button-emphasis-hover-text-color: text-02,
  button-emphasis-active-background-color: #006548,
  button-emphasis-active-text-color: text-02,
  button-emphasis-active-border-color: transparent,
  button-emphasis-disabled-background-color: rgba(0, 177, 127, 0.4),
  button-emphasis-disabled-text-color: rgba(255, 255, 255, 0.4),
  button-emphasis-disabled-border-color: transparent,
  button-cta-background-color: accent-02,
  button-cta-border-color: transparent,
  button-cta-text-color: text-02,
  button-cta-hover-background-color: #3864ff,
  button-cta-hover-border-color: transparent,
  button-cta-hover-text-color: text-02,
  button-cta-active-background-color: #1f51ff,
  button-cta-active-text-color: text-02,
  button-cta-active-border-color: transparent,
  button-cta-disabled-background-color: rgba(107, 140, 255, 0.4),
  button-cta-disabled-text-color: rgba(255, 255, 255, 0.4),
  button-cta-disabled-border-color: transparent,
  button-attention-background-color: accent-03,
  button-attention-border-color: transparent,
  button-attention-text-color: text-02,
  button-attention-hover-background-color: #cd9eff,
  button-attention-hover-border-color: transparent,
  button-attention-hover-text-color: text-02,
  button-attention-active-background-color: #dab9fd,
  button-attention-active-text-color: text-02,
  button-attention-active-border-color: transparent,
  button-attention-disabled-background-color: rgba(189, 65, 127, 0.4),
  button-attention-disabled-text-color: rgba(255, 255, 255, 0.4),
  button-attention-disabled-border-color: transparent,
  button-primary-danger-background-color: danger,
  button-primary-danger-border-color: transparent,
  button-primary-danger-text-color: text-02,
  button-primary-danger-hover-background-color: #eb5c6a,
  button-primary-danger-hover-border-color: transparent,
  button-primary-danger-hover-text-color: text-02,
  button-primary-danger-active-background-color: #e94959,
  button-primary-danger-active-text-color: text-02,
  button-primary-danger-active-border-color: transparent,
  button-primary-danger-disabled-background-color: rgba(#ed6f7c, 0.4),
  button-primary-danger-disabled-text-color: rgba(0, 0, 0, 0.4),
  button-primary-danger-disabled-border-color: transparent,
  button-secondary-danger-background-color: transparent,
  button-secondary-danger-border-color: danger,
  button-secondary-danger-text-color: danger,
  button-secondary-danger-hover-background-color: #eb5c6a,
  button-secondary-danger-hover-border-color: transparent,
  button-secondary-danger-hover-text-color: text-02,
  button-secondary-danger-active-background-color: #e94959,
  button-secondary-danger-active-text-color: text-02,
  button-secondary-danger-active-border-color: transparent,
  button-secondary-danger-disabled-background-color: transparent,
  button-secondary-danger-disabled-text-color: rgba(#ed6f7c, 0.4),
  button-secondary-danger-disabled-border-color: rgba(#ed6f7c, 0.4),
  button-tertiary-danger-background-color: transparent,
  button-tertiary-danger-border-color: transparent,
  button-tertiary-danger-text-color: button-secondary-danger-text-color,
  button-tertiary-danger-hover-background-color: #333333,
  button-tertiary-danger-hover-border-color: transparent,
  button-tertiary-danger-hover-text-color: #eb5c6a,
  button-tertiary-danger-active-background-color: #474747,
  button-tertiary-danger-active-text-color: #e94959,
  button-tertiary-danger-active-border-color: transparent,
  button-tertiary-danger-disabled-background-color:
    button-secondary-danger-disabled-background-color,
  button-tertiary-danger-disabled-text-color: button-secondary-danger-disabled-text-color,
  button-tertiary-danger-disabled-border-color: transparent,
  button-text-transform: uppercase,
  button-border-radius: 4px,
  button-border-width: 2px,
  button-small-height: 32px,
  button-small-medium-height: 40px,
  button-medium-height: 48px,
  button-medium-padding: calc(12px - var(--button-border-width))
    calc(32px - var(--button-border-width)),
  button-medium-icon-start-padding: calc(32px - var(--button-border-width)),
  button-medium-icon-end-padding: calc(32px - var(--button-border-width)),
  button-small-icon-start-padding: calc(16px - var(--button-border-width)),
  button-small-icon-end-padding: calc(16px - var(--button-border-width)),
  button-small-padding: calc(8px - var(--button-border-width))
    calc(16px - var(--button-border-width)),
  icon-button-medium-padding: 0,
  button-large-height: 72px,
  button-small-icon-size: 16px,
  button-small-medium-icon-size: 20px,
  button-medium-icon-size: 24px,
  button-large-icon-size: 24px,
  button-gap: 8px,
  plain-button-color: link-color,
  plain-button-hover-color: link-hover-color,
  plain-button-active-color: link-active-color,
  plain-button-disabled-color: link-disabled-color,
  plain-button-danger-color: danger,
  plain-button-danger-hover-color: #eb5c6a,
  plain-button-danger-active-color: #e94959,
  plain-button-danger-disabled-color: rgba(#ed6f7c, 0.4),
  plain-button-font-size: link-small-font-size,
  plain-button-line-height: link-small-line-height,
  plain-button-font-weight: link-small-font-weight,
  plain-button-letter-spacing: link-small-letter-spacing,
  plain-button-icon-size: link-small-icon-size,
  plain-button-text-decoration: none,
  plain-button-gap: 8px,
  plain-button-small-font-size: link-xsmall-font-size,
  plain-button-small-font-weight: link-xsmall-font-weight,
  plain-button-small-line-height: 1rem,
  plain-button-small-letter-spacing: link-xsmall-letter-spacing,
  plain-button-secondary-color: link-black-color,
  plain-button-secondary-hover-color: link-black-hover-color,
  plain-button-secondary-active-color: link-black-active-color,
  plain-button-secondary-disabled-color: link-black-disabled-color,
  plain-button-small-icon-size: 1.25rem,
  breadcrumb-color: text-01,
  breadcrumb-font-size: 1rem,
  breadcrumb-line-height: 1.5rem,
  breadcrumb-letter-spacing: 0,
  breadcrumb-font-weight: 400,
  breadcrumb-chevron-color: text-01,
  breadcrumb-link-color: interactive-text,
  breadcrumb-link-hover-color: hover-link,
  breadcrumb-link-active-color: active-primary,
  icon-button-small-icon-size: 16px,
  icon-button-small-medium-icon-size: 24px,
  icon-button-medium-icon-size: 24px,
  icon-button-large-icon-size: 24px,
  card-text-color: text-01,
  card-background-color: ui-01,
  card-border-color: ui-04,
  card-border-hover-color: #105f95,
  card-border-width: 1px,
  card-border-radius: 4px,
  clickable-card-hover-background-color: ui-02,
  clickable-card-hover-border-color: card-border-hover-color,
  clickable-card-active-background-color: ui-03,
  clickable-card-active-border-color: card-border-hover-color,
  clickable-card-disabled-border-color: negative-01,
  card-highlight-text-color: text-01,
  card-highlight-background-color: ui-03,
  comparison-table-popular-cell-text-color: text-01,
  comparison-table-popular-cell-background-color: #194666,
  comparison-table-selected-column-background-color: ui-03,
  comparison-table-selected-column-text-color: text-01,
  comparison-table-border-color: ui-04,
  comparison-table-header-background-color: ui-01,
  comparison-table-header-text-color: text-01,
  comparison-table-placeholder-cell-background-color: transparent,
  comparison-table-placeholder-cell-border-color: transparent,
  comparison-table-disabled-text-color: disabled-01,
  comparison-table-disabled-column-header-text-color: comparison-table-disabled-text-color,
  comparison-table-cell-background-color: ui-01,
  comparison-table-intersection-cell-background-color: ui-background,
  comparison-table-toggle-section-header-background-color: ui-background,
  comparison-table-toggle-section-chevron-size: accordion-chevron-size,
  comparison-table-toggle-section-chevron-color: accordion-regular-chevron-color,
  comparison-table-toggle-section-header-padding: 24px 32px 24px 16px,
  comparison-table-toggle-section-header-padding-rtl: 24px 16px 24px 32px,
  comparison-table-expansion-cell-color: interactive-text,
  comparison-table-font-size: 1rem,
  comparison-table-line-height: 1.25rem,
  comparison-table-font-weight: 400,
  comparison-table-letter-spacing: 0,
  comparison-table-popular-cell-font-size: 0.875rem,
  comparison-table-popular-cell-line-height: 1rem,
  comparison-table-popular-cell-font-weight: 600,
  comparison-table-popular-cell-letter-spacing: 0.0125rem,
  comparison-table-description-cell-mobile-font-size: 0.875rem,
  comparison-table-description-cell-mobile-line-height: 1rem,
  comparison-table-description-cell-mobile-font-weight: 700,
  comparison-table-description-cell-mobile-letter-spacing: 0.0125rem,
  comparison-table-mobile-section-header-font-size: 0.875rem,
  comparison-table-mobile-section-header-line-height: 1.5rem,
  comparison-table-mobile-section-header-font-weight: 600,
  comparison-table-mobile-section-header-letter-spacing: 0,
  comparison-table-group-label-font-size: 1rem,
  comparison-table-group-label-line-height: 1.5rem,
  comparison-table-group-label-font-weight: 600,
  comparison-table-group-label-letter-spacing: 0.0625rem,
  comparison-table-toggle-section-header-font-size: heading-04-font-size,
  comparison-table-toggle-section-header-line-height: heading-04-line-height,
  comparison-table-toggle-section-header-font-weight: heading-04-font-weight,
  comparison-table-toggle-section-header-letter-spacing: heading-04-letter-spacing,
  data-display-label-font-weight: 600,
  data-display-large-font-size: paragraph-02-font-size,
  data-display-large-line-height: paragraph-02-line-height,
  data-display-large-font-weight: paragraph-02-font-weight,
  data-display-large-letter-spacing: paragraph-02-letter-spacing,
  data-display-large-mobile-font-size: paragraph-03-font-size,
  data-display-large-mobile-line-height: paragraph-03-line-height,
  data-display-large-mobile-font-weight: paragraph-03-font-weight,
  data-display-large-mobile-letter-spacing: paragraph-03-letter-spacing,
  data-display-medium-font-size: paragraph-03-font-size,
  data-display-medium-line-height: paragraph-03-line-height,
  data-display-medium-font-weight: paragraph-03-font-weight,
  data-display-medium-letter-spacing: paragraph-03-letter-spacing,
  data-display-small-font-size: paragraph-04-font-size,
  data-display-small-line-height: paragraph-04-line-height,
  data-display-small-font-weight: 400,
  data-display-small-letter-spacing: paragraph-04-letter-spacing,
  selectable-card-text-color: text-01,
  selectable-card-background-color: ui-01,
  selectable-card-background-hover-color: ui-02,
  selectable-card-background-selected-color: ui-02,
  selectable-card-background-selected-hover-color: ui-03,
  selectable-card-background-disabled-color: ui-01,
  selectable-card-background-disabled-selected-color: ui-02,
  selectable-card-checkbox-border-hover-color: ui-06,
  selectable-card-checkbox-selected-background-hover-color: hover-primary,
  selectable-card-checkbox-selected-border-hover-color: hover-primary,
  selectable-card-checkbox-error-border-color: danger,
  selectable-card-checkbox-error-background-color: danger,
  selectable-card-radio-border-hover-color: hover-primary,
  selectable-card-radio-dot-hover-color: hover-primary,
  selectable-card-radio-error-dot-color: danger,
  selectable-card-radio-error-border-color: danger,
  selectable-card-expert-background-hover-color: ui-05,
  selectable-card-expert-background-selected-color: ui-02,
  selectable-card-expert-background-disabled-selected-color: ui-02,
  selectable-card-expert-background-selected-hover-color: ui-03,
  selectable-card-icon-color: success,
  selectable-card-unchecked-icon-hover-color: #c2c2c2,
  selectable-card-icon-placeholder-border-color: ui-05,
  selectable-card-border-color: #999999,
  selectable-card-border-hover-color: ui-06,
  selectable-card-border-selected-color: ui-06,
  selectable-card-border-disabled-color: ui-03,
  selectable-card-border-disabled-selected-color: #c3c3c3,
  selectable-card-border-error-color: danger,
  selectable-card-border-width: 1px,
  selectable-card-border-radius: 4px,
  checkbox-border-width: 2px,
  checkbox-border-radius: 4px,
  checkbox-control-size: 24px,
  checkbox-transition: none,
  // IE has problems using 24px because of the border
  // it just doesn't want to align the icon into the remaining 20x20
  // space, despite all other browsers just do it correctly
  checkbox-icon-size: 20px,
  checkbox-background-color: transparent,
  checkbox-border-color: ui-05,
  checkbox-icon-color: text-02,
  checkbox-indeterminate-color: interactive-primary,
  checkbox-selected-background-color: interactive-primary,
  checkbox-selected-border-color: interactive-primary,
  checkbox-hover-background-color: hover-primary,
  checkbox-unselected-hover-background-color: transparent,
  checkbox-hover-border-color: hover-primary,
  checkbox-active-background-color: active-primary,
  checkbox-active-border-color: active-primary,
  checkbox-unselected-active-background-color: transparent,
  checkbox-selected-hover-background-color: hover-primary,
  checkbox-disabled-border-color: disabled-01,
  checkbox-disabled-background-color: disabled-04,
  checkbox-disabled-selected-border-color: disabled-01,
  checkbox-disabled-selected-background-color: disabled-01,
  checkbox-disabled-icon-color: text-02,
  checkbox-readonly-background-color: readonly-surface-color,
  checkbox-readonly-border-color: readonly-on-surface-color,
  checkbox-readonly-selected-background-color: readonly-surface-active-color,
  checkbox-readonly-selected-border-color: readonly-surface-active-color,
  checkbox-readonly-icon-color: readonly-on-surface-active-color,
  checkbox-readonly-indeterminate-color: readonly-surface-active-color,
  checkbox-label-color: text-01,
  checkbox-label-disabled-color: disabled-01,
  // the control and the first line of text are supposed to be aligned
  // depending on the height of the control and the line-height of the text
  // you can use these variables to push either the control or the text down to fit
  // 1) if control size is larger than text line height the text needs to be pushed down
  // 2) if the text line height is larger than the control size the control needs to be pushed down
  checkbox-large-label-control-margin-top: 2px,
  checkbox-large-label-text-margin-top: 0,
  checkbox-large-label-text-margin-left: 12px,
  checkbox-small-label-control-margin-top: 0,
  checkbox-small-label-text-margin-top: 0,
  checkbox-small-label-text-margin-left: 12px,
  checkbox-large-label-font-size: large-label-font-size,
  checkbox-large-label-line-height: large-label-line-height,
  checkbox-large-label-font-weight: large-label-font-weight,
  checkbox-large-label-letter-spacing: large-label-letter-spacing,
  checkbox-small-label-font-size: small-label-font-size,
  checkbox-small-label-line-height: small-label-line-height,
  checkbox-small-label-font-weight: small-label-font-weight,
  checkbox-small-label-letter-spacing: small-label-letter-spacing,
  checkbox-disabled-negative-background-color: negative-dimmed,

  // On selection states
  checkbox-on-selection-background-color: ui-01,
  checkbox-on-selection-border-color: interactive-primary,
  checkbox-on-selection-icon-color: text-01,
  checkbox-on-selection-selected-background-color: ui-01,
  checkbox-on-selection-selected-border-color: ui-01,
  checkbox-on-selection-selected-icon-color: text-02,
  checkbox-on-selection-hover-border-color: hover-primary,
  checkbox-on-selection-hover-background-color: hover-primary,
  checkbox-on-selection-active-border-color: active-primary,
  checkbox-on-selection-active-background-color: active-primary,
  checkbox-on-selection-disabled-border-color: interactive-primary,
  checkbox-on-selection-disabled-background-color: transparent,
  checkbox-on-selection-disabled-selected-background-color: ui-01,
  checkbox-on-selection-disabled-selected-border-color: ui-01,
  checkbox-on-selection-disabled-selected-icon-color: interactive-text,
  checkbox-on-selection-readonly-background-color: readonly-surface-color,
  checkbox-on-selection-readonly-border-color: readonly-on-surface-color,
  checkbox-on-selection-readonly-selected-background-color: readonly-surface-color,
  checkbox-on-selection-readonly-selected-border-color: readonly-surface-color,
  checkbox-on-selection-readonly-selected-icon-color: readonly-on-surface-color,

  // On selection states (radio)
  radio-button-on-selection-border-color: ui-05,
  radio-button-on-selection-readonly-border-color: readonly-on-surface-color,
  radio-button-on-selection-disabled-border-color: interactive-primary,
  radio-button-on-selection-critical-border-color: ui-01,
  radio-button-on-selection-critical-background-color: ui-01,
  radio-button-on-selection-selected-border-color: ui-01,
  radio-button-on-selection-selected-dot-color: transparent,
  radio-button-on-selection-disabled-selected-border-color: ui-01,
  radio-button-on-selection-disabled-selected-dot-color: transparent,
  radio-button-on-selection-readonly-selected-border-color: readonly-surface-color,
  radio-button-on-selection-readonly-selected-dot-color: readonly-on-surface-color,

  // Tile tokens
  tile-background-color: ui-01,
  tile-border-color: interactive-primary,
  tile-text-color: text-01,
  tile-border-width: 2px,
  tile-border-radius: 4px,
  tile-vertical-with-icon-padding: 24px 16px 14px 16px,
  tile-vertical-padding: 14px 16px,
  tile-horizontal-padding: 14px 16px,
  tile-spacing: 16px,
  tile-group-spacing: 16px,
  tile-indicator-top: 12px,
  tile-indicator-right: 12px,
  tile-font-size: paragraph-03-font-size,
  tile-font-weight: paragraph-03-font-weight,
  tile-line-height: paragraph-03-line-height,
  tile-letter-spacing: paragraph-03-letter-spacing,

  // Selected state
  tile-selected-color: text-02,
  tile-selected-hint-color: text-02,
  tile-selected-border-color: interactive-primary,
  tile-selected-background-color: interactive-primary,

  // Hover state
  tile-hover-background-color: selectable-card-background-hover-color,
  tile-hover-border-color: hover-primary,
  tile-selected-hover-background-color: hover-primary,
  tile-hover-text-color: hover-primary,
  tile-hover-hint-color: hover-primary,

  // Active state
  tile-active-background-color: ui-03,
  tile-active-border-color: active-primary,
  tile-selected-active-background-color: active-primary,
  tile-active-text-color: active-primary,
  tile-active-hint-color: active-primary,

  // Disabled state
  tile-disabled-opacity: 0.4,
  tile-disabled-background-color: #fff,
  tile-disabled-text-color: interactive-primary,
  tile-disabled-border-color: interactive-primary,
  tile-disabled-hint-color: interactive-primary,
  tile-disabled-selected-background-color: interactive-primary,
  tile-disabled-selected-text-color: text-02,
  tile-disabled-selected-border-color: interactive-primary,
  tile-disabled-selected-hint-color: text-02,

  // Readonly state
  tile-readonly-background-color: readonly-surface-color,
  tile-readonly-text-color: text-01,
  tile-readonly-border-color: readonly-on-surface-color,
  tile-readonly-hint-color: text-01,
  tile-readonly-selected-background-color: readonly-surface-active-color,
  tile-readonly-selected-text-color: text-02,
  tile-readonly-selected-border-color: readonly-surface-active-color,
  tile-readonly-selected-hint-color: text-02,

  // Error state
  tile-error-border-color: danger,
  tile-error-hover-border-color: danger-hover,
  tile-error-active-border-color: danger-active,
  tile-error-selected-background-color: danger,
  tile-error-selected-hover-background-color: danger-hover,
  tile-error-selected-active-background-color: danger-active,

  // Icons and labels
  tile-icon-size: 40px,
  tile-layout-horizontal-icon-size: 32px,
  tile-label-font-weight: 600,
  tile-hint-color: text-01,
  tile-hint-font-size: paragraph-04-font-size,
  tile-hint-line-height: paragraph-04-line-height,
  tile-hint-font-weight: 400,
  tile-hint-letter-spacing: paragraph-04-letter-spacing,

  circle-toggle-checkmark-background-color: accent-01,
  circle-toggle-checkmark-color: #ffffff,
  circle-toggle-checkmark-border-color: ui-background,
  circle-toggle-icon-color: interactive-primary,
  circle-toggle-border-color: interactive-primary,
  circle-toggle-background-color: transparent,
  circle-toggle-selected-icon-color: #ffffff,
  circle-toggle-selected-border-color: interactive-primary,
  circle-toggle-selected-background-color: interactive-primary,
  circle-toggle-readonly-border-color: readonly-on-surface-color,
  circle-toggle-readonly-background-color: readonly-surface-color,
  circle-toggle-readonly-selected-background-color: readonly-surface-active-color,
  circle-toggle-readonly-icon-color: readonly-on-surface-color,
  circle-toggle-readonly-selected-icon-color: readonly-on-surface-active-color,
  circle-toggle-hover-icon-color: #ffffff,
  circle-toggle-hover-border-color: hover-primary,
  circle-toggle-hover-background-color: hover-primary,
  circle-toggle-label-font-size: small-label-font-size,
  circle-toggle-label-line-height: small-label-line-height,
  circle-toggle-label-font-weight: small-label-font-weight,
  circle-toggle-label-letter-spacing: small-label-letter-spacing,
  circle-toggle-label-mobile-font-size: paragraph-04-font-size,
  circle-toggle-label-mobile-line-height: paragraph-04-line-height,
  circle-toggle-label-mobile-font-weight: circle-toggle-label-font-weight,
  circle-toggle-label-mobile-letter-spacing: paragraph-04-letter-spacing,
  circle-toggle-hint-font-size: circle-toggle-label-font-size,
  circle-toggle-hint-line-height: circle-toggle-label-line-height,
  circle-toggle-hint-font-weight: circle-toggle-label-font-weight,
  circle-toggle-hint-letter-spacing: circle-toggle-label-letter-spacing,
  circle-toggle-hint-mobile-font-size: circle-toggle-label-mobile-font-size,
  circle-toggle-hint-mobile-line-height: circle-toggle-label-mobile-line-height,
  circle-toggle-hint-mobile-font-weight: 300,
  circle-toggle-hint-mobile-letter-spacing: circle-toggle-label-mobile-letter-spacing,
  circle-toggle-label-color: text-01,
  circle-toggle-hint-color: text-01,
  circle-toggle-content-text-font-size: heading-05-font-size,
  circle-toggle-content-text-line-height: heading-05-line-height,
  circle-toggle-content-text-font-weight: 400,
  circle-toggle-content-text-letter-spacing: heading-05-letter-spacing,
  circle-toggle-content-text-mobile-font-size: heading-05-mobile-font-size,
  circle-toggle-content-text-mobile-line-height: heading-05-mobile-line-height,
  circle-toggle-content-text-mobile-font-weight: 400,
  circle-toggle-content-text-mobile-letter-spacing: heading-05-mobile-letter-spacing,
  circle-toggle-content-text-color: interactive-text,
  circle-toggle-selected-content-text-color: #ffffff,
  code-input-font-size: heading-04-font-size,
  code-input-line-height: heading-04-line-height,
  code-input-font-weight: 600,
  code-input-letter-spacing: heading-04-letter-spacing,
  code-input-color: text-01,
  code-input-active-color: interactive-primary,
  code-input-error-color: danger,
  code-input-disabled-color: disabled-01,
  context-menu-header-font-size: header-font-size,
  context-menu-header-font-weight: heading-05-font-weight,
  context-menu-font-size: paragraph-03-font-size,
  context-menu-line-height: paragraph-03-line-height,
  context-menu-font-weight: paragraph-03-font-weight,
  context-menu-letter-spacing: paragraph-03-letter-spacing,
  context-menu-background-color: ui-02,
  context-menu-item-text-color: text-01,
  context-menu-item-active-color: interactive-text,
  context-menu-item-disabled-color: disabled-01,
  context-menu-item-icon-size: 20px,
  context-menu-item-expand-icon-size: 20px,
  context-menu-item-horizontal-padding: 32px,
  context-menu-item-vertical-padding: 8px,
  divider-background-color: #d9d9d9,
  datefield-toggle-icon-size: formfield-icon-size,
  datefield-change-view-font-size: small-label-font-size,
  datefield-change-view-line-height: 1,
  datefield-change-view-font-weight: bold,
  datefield-change-view-letter-spacing: small-label-letter-spacing,
  datefield-change-view-color: interactive-text,
  datefield-change-view-hover-color: hover-primary,
  datefield-cell-font-size: paragraph-03-font-size,
  datefield-cell-line-height: paragraph-03-line-height,
  datefield-cell-font-weight: 600,
  datefield-cell-letter-spacing: paragraph-03-letter-spacing,
  datefield-cell-color: text-01,
  datefield-cell-selected-background-color: interactive-primary,
  datefield-cell-selected-hover-background-color: hover-primary,
  datefield-cell-selected-active-background-color: active-primary,
  datefield-cell-selected-color: text-02,
  datefield-cell-active-background-color: ui-04,
  datefield-cell-active-color: interactive-primary,
  datefield-cell-hover-background-color: ui-03,
  datefield-cell-hover-color: text-01,
  datefield-cell-disabled-color: #767676,
  datefield-cell-disabled-today-color: #b6b6b6,
  datefield-cell-disabled-selected-background-color: #b6b6b6,
  datefield-cell-focused-background-color: ui-01,
  datefield-header-cell-color: datefield-cell-disabled-color,
  datefield-header-cell-font-weight: 600,
  datefield-period-label-font-size: large-label-font-size,
  datefield-period-label-line-height: datefield-controls-icon-size,
  datefield-period-label-font-weight: 600,
  datefield-period-label-letter-spacing: large-label-letter-spacing,
  datefield-period-label-color: text-01,
  datefield-controls-color: interactive-text,
  datefield-controls-hover-color: hover-primary,
  datefield-controls-icon-size: 24px,
  datefield-controls-disabled-color: datefield-cell-disabled-color,
  datefield-panel-background-color: ui-01,
  datefield-panel-header-background-color: ui-01,
  datefield-panel-border-color: ui-04,
  datepicker-range-background-color: #1d4f73,
  datepicker-range-hover-background-color: info,
  datepicker-range-active-background-color: active-primary,
  dropdown-panel-background-color: ui-02,
  dropdown-panel-header-background-color: #1d4f73,
  dropdown-panel-text-color: text-01,
  dropdown-panel-header-text-color: text-01,
  dropdown-panel-border-radius: nx-border-radius(s),
  dropdown-panel-filter-border-color: none,
  dropdown-panel-filter-font-weight: nx-font-weight(semibold),
  dropdown-panel-shadow: shadow-small,
  dropdown-panel-padding-top: 4px,
  dropdown-panel-padding-bottom: 16px,
  dropdown-group-label-color: ui-05,
  dropdown-group-label-font-size: small-label-font-size,
  dropdown-group-label-line-height: small-label-line-height,
  dropdown-group-label-font-weight: 300,
  dropdown-group-label-letter-spacing: small-label-letter-spacing,
  dropdown-group-label-height: 16px,
  dropdown-group-section-background-color: ui-03,
  dropdown-item-text-color: ui-05,
  dropdown-item-selected-color: text-01,
  dropdown-item-hover-color: hover-primary,
  dropdown-item-hover-background-color: ui-02,
  dropdown-item-active-background-color: ui-02,
  dropdown-item-checkmark-color: text-01,
  dropdown-item-padding-top: 8px,
  dropdown-item-padding-right: 32px,
  dropdown-item-padding-bottom: 8px,
  dropdown-item-padding-left: 8px,
  dropdown-item-font-size: large-label-font-size,
  dropdown-item-line-height: large-label-line-height,
  dropdown-item-font-weight: large-label-font-weight,
  dropdown-item-letter-spacing: large-label-letter-spacing,
  dropdown-item-outline-font-size: small-label-font-size,
  dropdown-item-outline-line-height: small-label-line-height,
  dropdown-item-outline-font-weight: small-label-font-weight,
  dropdown-item-outline-letter-spacing: small-label-letter-spacing,
  dropdown-item-text-color-disabled: disabled-01,
  dropdown-chevron-size: formfield-icon-size,
  dropdown-filter-input-text-color: text-01,
  dropdown-filter-input-border-color: ui-05,
  dropdown-filter-input-active-text-color: interactive-primary,
  dropdown-filter-input-active-border-color: interactive-primary,
  dropdown-filter-wrap-padding-horizontal: 32px,
  dropdown-filter-wrap-padding-vertical: 16px,
  dropdown-filter-input-padding-horizon: 0,
  dropdown-filter-input-padding-vertical: 0,
  dropdown-filter-gap: 0,
  dropdown-item-divider: #d9d9d9,
  dropdown-group-divider: #d9d9d9,
  multi-select-item-padding-horizon: 32px,
  multi-select-item-padding-vertical: 8px,
  multi-select-action-padding-vertical: 16px,
  multi-select-panel-padding: 12px,

  footer-font-size: paragraph-03-font-size,
  footer-line-height: paragraph-03-line-height,
  footer-font-weight: paragraph-03-font-weight,
  footer-letter-spacing: paragraph-03-letter-spacing,
  footer-color: ui-05,
  footer-copyright-font-weight: 700,
  footer-padding-top: 32px,
  footer-padding-bottom: 32px,
  footer-mobile-padding-top: 48px,
  footer-mobile-padding-bottom: 48px,
  // ------------ formfield tokens shared between all appearances ------------- //
  // -------------------------------------------------------------------------- //
  formfield-bottom-padding: 32px,
  formfield-mobile-bottom-padding: 24px,
  formfield-icon-size: 24px,
  formfield-label-color: text-01,
  formfield-control-color: text-01,
  formfield-border-width: 1px,
  formfield-active-border-width: 4px,
  formfield-active-color: interactive-text,
  formfield-active-border-radius: 2px,
  formfield-active-border-bottom-color: transparent,
  formfield-hover-border-color: ui-06,
  formfield-disabled-text-color: disabled-01,
  formfield-disabled-border-color: disabled-01,
  formfield-disabled-background-color: formfield-outline-background-color,

  formfield-readonly-text-color: formfield-input-color,
  formfield-readonly-border-color: readonly-02,
  formfield-readonly-background-color: readonly-01,
  formfield-input-color: text-01,
  formfield-hint-color: text-01,
  // ------------ formfield tokens only for the default appearance ------------ //
  // -------------------------------------------------------------------------- //
  formfield-control-height: 32px,
  formfield-error-input-font-weight: 700,
  formfield-input-padding: 0 0 3px 0,
  formfield-border-color: ui-06,
  formfield-active-border-color: hover-link,
  formfield-background-color: transparent,
  formfield-message-gap: 4px,
  // The typography for the flexfield container
  // The typography is set here that all controls
  // like dropdown, input, textarea and especially custom controls inherit the typography
  // and don't have to care about it
  formfield-control-font-size: paragraph-01-font-size,
  formfield-control-line-height: paragraph-01-line-height,
  formfield-control-font-weight: 600,
  formfield-control-letter-spacing: paragraph-01-letter-spacing,
  formfield-label-font-size: paragraph-05-font-size,
  formfield-label-line-height: paragraph-05-line-height,
  formfield-label-font-weight: paragraph-05-font-weight,
  formfield-label-letter-spacing: paragraph-05-letter-spacing,
  formfield-label-height: 16px,
  formfield-floating-distance: -16px,
  formfield-placeholder-label-font-size: formfield-control-font-size,
  formfield-placeholder-label-line-height: formfield-control-line-height,
  formfield-placeholder-label-font-weight: 300,
  formfield-placeholder-label-letter-spacing: formfield-control-letter-spacing,
  formfield-input-native-placeholder-font-size: formfield-control-font-size,
  formfield-input-native-placeholder-line-height: formfield-control-line-height,
  formfield-input-native-placeholder-font-weight: 200,
  formfield-input-native-placeholder-letter-spacing: formfield-control-letter-spacing,
  formfield-input-native-placeholder-color: ui-05,
  // the spacing between the flexfield and the hint below it
  formfield-hint-spacing: 8px,
  formfield-hint-font-size: paragraph-05-font-size,
  formfield-hint-line-height: paragraph-05-line-height,
  formfield-hint-font-weight: 400,
  formfield-hint-letter-spacing: paragraph-05-letter-spacing,
  // --------- formfield tokens only for the outline appearance --------------- //
  // -------------------------------------------------------------------------- //
  formfield-outline-control-height: 40px,
  formfield-outline-border-radius: 4px,
  formfield-outline-input-container-padding: 0,
  formfield-outline-spacing: 7px,
  formfield-outline-gap: 0,
  formfield-outline-border-color: ui-05,
  formfield-outline-background-color: ui-03,
  formfield-outline-active-border-color: interactive-text,
  formfield-outline-focus-box-shadow: 0 0 0 2px #27abd6,
  formfield-outline-focus-background-color: ui-01,
  formfield-outline-control-font-size: paragraph-03-font-size,
  formfield-outline-control-line-height: paragraph-03-line-height,
  formfield-outline-control-font-weight: paragraph-03-font-weight,
  formfield-outline-control-letter-spacing: paragraph-03-letter-spacing,
  formfield-outline-label-height: 28px,
  formfield-outline-bottom-padding: 16px,
  formfield-outline-floating-distance: -29px,
  formfield-outline-hint-spacing: 8px 0 0 0,
  formfield-outline-label-font-size: paragraph-03-font-size,
  formfield-outline-label-line-height: paragraph-03-line-height,
  formfield-outline-label-font-weight: 600,
  formfield-outline-label-letter-spacing: paragraph-03-letter-spacing,
  formfield-outline-optional-label-font-size: formfield-outline-label-font-size,
  formfield-outline-optional-label-line-height: formfield-outline-label-line-height,
  formfield-outline-optional-label-font-weight: formfield-outline-label-font-weight,
  formfield-outline-optional-label-letter-spacing: formfield-outline-label-letter-spacing,
  formfield-outline-optional-label-gap: 4px,
  formfield-outline-hint-font-size: paragraph-03-font-size,
  formfield-outline-hint-line-height: 1em,
  formfield-outline-hint-font-weight: paragraph-03-font-weight,
  formfield-outline-hint-letter-spacing: paragraph-03-letter-spacing,
  formfield-outline-input-native-placeholder-font-size: formfield-outline-control-font-size,
  formfield-outline-input-native-placeholder-line-height: formfield-outline-control-line-height,
  formfield-outline-input-native-placeholder-font-weight: 200,
  formfield-outline-input-native-placeholder-letter-spacing:
    formfield-outline-control-letter-spacing,
  formfield-outline-input-native-placeholder-color: ui-05,
  formfield-input-native-placeholder-disabled-color: inherit,
  header-font-size: paragraph-03-font-size,
  header-line-height: paragraph-03-line-height,
  header-font-weight: paragraph-03-font-weight,
  header-letter-spacing: paragraph-03-letter-spacing,
  header-link-active-color: hover-primary,
  header-link-active-font-weight: 700,
  header-background-color: ui-01,
  header-border-color: ui-04,
  headline-color: text-01,
  icon-filled-background-color: text-01,
  icon-filled-color: ui-01,
  indicator-background-color: #f19b94,
  indicator-color: text-02,
  indicator-border-color: ui-01,
  indicator-font-size: paragraph-05-font-size,
  indicator-line-height: 0.6875rem,
  // smaller than the font-size to fix the aligning in browsers
  indicator-font-weight: paragraph-05-font-weight,
  indicator-letter-spacing: 0,
  link-large-font-size: heading-03-font-size,
  link-large-line-height: heading-03-line-height,
  link-large-font-weight: 600,
  link-large-letter-spacing: heading-03-letter-spacing,
  link-large-icon-size: 32px,
  link-small-font-size: 1rem,
  link-small-line-height: 1.5rem,
  link-small-font-weight: 600,
  link-small-letter-spacing: 0.0625rem,
  link-small-icon-size: 24px,
  link-xsmall-font-size: 0.875rem,
  link-xsmall-line-height: 1.25rem,
  link-xsmall-font-weight: 600,
  link-xsmall-letter-spacing: 0.0125rem,
  link-xsmall-icon-size: 20px,
  link-color: interactive-text,
  link-hover-color: hover-link,
  link-active-color: active-primary,
  link-disabled-color: disabled-04,
  link-black-color: text-01,
  link-black-hover-color: #9a9a9a,
  link-black-active-color: #5c5c5c,
  link-black-disabled-color: disabled-01,
  link-transition-duration: 0.2,
  link-transition-timing-function: ease,
  link-active-transform: none,
  link-icon-gap: 8px,
  link-secondary-color: interactive-text,
  link-secondary-hover-color: hover-link,
  link-secondary-active-color: active-primary,
  link-secondary-disabled-color: disabled-04,
  link-subtle-font-weight: 600,
  list-text-color: text-01,
  list-circle-text-color: text-02,
  list-icon-color: white,
  list-icon-size: 24px,
  list-circle-size: 24px,
  list-negative-circle-text-color: negative-background,
  list-normal-item-spacing: 16px,
  list-small-item-spacing: 16px,
  list-xsmall-item-spacing: 16px,
  list-normal-condensed-item-spacing: 16px,
  list-small-condensed-item-spacing: 0px,
  list-xsmall-condensed-item-spacing: 4px,
  menu-background-color: ui-01,
  menu-item-border-color: ui-04,
  menu-button-background-color: ui-01,
  menu-button-hover-background-color: ui-03,
  menu-button-text-color: text-01,
  menu-button-expanded-background-color: interactive-primary,
  menu-button-expanded-border-color: interactive-primary,
  menu-button-expanded-text-color: text-02,
  menu-button-nested-background-color: ui-02,
  menu-button-nested-expanded-background-color: #66c4e3,
  menu-button-nested-expanded-border-color: #66c4e3,
  menu-button-nested-expanded-color: text-02,
  message-text-color: text-01,
  message-close-icon-color: message-text-color,
  message-box-shadow: shadow-small,
  message-border-radius: 4px,
  message-regular-background-color: ui-01,
  message-regular-border-color: text-01,
  message-info-icon-color: info,
  message-info-background-color: ui-01,
  message-info-border-color: info,
  message-error-icon-color: danger,
  message-error-background-color: ui-01,
  message-error-border-color: danger,
  message-success-icon-color: success,
  message-success-background-color: ui-01,
  message-success-border-color: success,
  message-warning-icon-color: warning,
  message-warning-background-color: ui-01,
  message-warning-border-color: warning,
  message-font-size: paragraph-03-font-size,
  message-line-height: paragraph-03-line-height,
  message-font-weight: paragraph-03-font-weight,
  message-letter-spacing: paragraph-03-letter-spacing,
  message-banner-border-radius: 0,
  modal-background-color: ui-03,
  modal-text-color: text-01,
  modal-close-icon-color: text-01,
  modal-actions-background-color: ui-02,
  modal-actions-border-color: ui-04,
  pagination-link-color: interactive-text,
  pagination-link-disabled-color: disabled-04,
  pagination-item-font-weight: 600,
  pagination-text-color: text-01,
  pagination-icon-size: 24px,
  pagination-icon-font-weight: 600,
  pagination-font-size: paragraph-03-font-size,
  pagination-line-height: paragraph-03-line-height,
  pagination-font-weight: paragraph-03-font-weight,
  pagination-letter-spacing: paragraph-03-letter-spacing,
  pagination-compact-direction-font-size: link-small-font-size,
  pagination-compact-direction-line-height: link-small-line-height,
  pagination-compact-direction-font-weight: link-small-font-weight,
  pagination-compact-direction-letter-spacing: link-small-letter-spacing,
  pagination-slider-icon-width: 8px,
  pagination-slider-icon-height: 8px,
  pagination-slider-icon-border-color: ui-06,
  pagination-slider-icon-active-color: ui-06,
  natural-language-form-large-font-size: heading-02-font-size,
  natural-language-form-large-line-height: 3.25rem,
  natural-language-form-large-font-weight: heading-02-font-weight,
  natural-language-form-large-letter-spacing: heading-02-letter-spacing,
  natural-language-form-small-font-size: heading-04-font-size,
  natural-language-form-small-line-height: 2.25rem,
  natural-language-form-small-font-weight: heading-04-font-weight,
  natural-language-form-small-letter-spacing: heading-04-letter-spacing,
  natural-language-form-text-color: text-01,
  natural-language-form-border-color: ui-04,
  natural-language-form-active-color: formfield-active-color,
  natural-language-form-active-border-color: interactive-primary,
  natural-language-form-error-color: danger,
  natural-language-form-error-border-color: danger,
  notification-panel-background-color: ui-01,
  notification-panel-item-unread-background-color: ui-02,
  notification-panel-item-unread-hover-background-color: ui-03,
  notification-panel-item-unread-active-background-color: ui-04,
  notification-panel-item-read-background-color: ui-01,
  notification-panel-item-read-hover-background-color: ui-02,
  notification-panel-item-read-active-background-color: ui-03,
  number-stepper-label-font-size: large-label-font-size,
  number-stepper-label-line-height: large-label-line-height,
  number-stepper-label-font-weight: large-label-font-weight,
  number-stepper-label-letter-spacing: large-label-letter-spacing,
  number-stepper-large-font-size: heading-02-font-size,
  number-stepper-large-line-height: heading-02-line-height,
  number-stepper-large-font-weight: 400,
  number-stepper-large-letter-spacing: heading-02-letter-spacing,
  number-stepper-small-font-size: paragraph-01-font-size,
  number-stepper-small-line-height: paragraph-01-line-height,
  number-stepper-small-font-weight: paragraph-01-font-weight,
  number-stepper-small-letter-spacing: paragraph-01-letter-spacing,
  number-stepper-color: text-01,
  number-stepper-underline-color: text-01,
  number-stepper-disabled-color: formfield-disabled-text-color,
  number-stepper-disabled-underline-color: formfield-disabled-border-color,
  page-search-font-size: heading-03-font-size,
  page-search-line-height: heading-03-line-height,
  page-search-font-weight: 600,
  page-search-letter-spacing: heading-03-letter-spacing,
  page-search-icon-color: interactive-primary,
  page-search-background-color: ui-02,
  page-search-box-shadow: none,
  popover-content-font-size: paragraph-03-font-size,
  popover-content-line-height: paragraph-03-line-height,
  popover-content-font-weight: paragraph-03-font-weight,
  popover-content-letter-spacing: paragraph-03-letter-spacing,
  popover-close-icon-size: 24px,
  popover-text-color: text-01,
  popover-background-color: ui-01,
  popover-border-color: ui-04,
  popover-close-icon-color: ui-04,
  popover-action-gap: 16px,
  progressbar-background-color: ui-03,
  progressbar-indicator-color: interactive-primary,
  // ----- progress-indicator components ----- //
  // mobile label is used in all three indicator components
  progress-indicator-mobile-color: text-01,
  progress-indicator-mobile-font-size: paragraph-03-font-size,
  progress-indicator-mobile-line-height: paragraph-03-line-height,
  progress-indicator-mobile-font-weight: paragraph-03-font-weight,
  progress-indicator-mobile-letter-spacing: paragraph-03-letter-spacing,
  progress-stepper-label-font-size: large-label-font-size,
  progress-stepper-label-line-height: large-label-line-height,
  progress-stepper-label-font-weight: 300,
  progress-stepper-label-letter-spacing: large-label-letter-spacing,
  progress-stepper-step-font-size: paragraph-03-font-size,
  progress-stepper-step-line-height: paragraph-03-line-height,
  progress-stepper-step-font-weight: paragraph-03-font-weight,
  progress-stepper-step-letter-spacing: paragraph-03-letter-spacing,
  progress-stepper-dotnumber-font-size: paragraph-04-font-size,
  progress-stepper-dotnumber-line-height: paragraph-04-line-height,
  progress-stepper-dotnumber-font-weight: 700,
  progress-stepper-dotnumber-letter-spacing: paragraph-04-letter-spacing,
  progress-stepper-step-color: interactive-text,
  progress-stepper-step-disabled-color: text-01,
  progress-stepper-dot-color: text-02,
  progress-stepper-dot-background-color: interactive-primary,
  progress-stepper-dot-disabled-background-color: disabled-01,
  single-stepper-step-color: text-01,
  single-stepper-step-font-size: paragraph-03-font-size,
  single-stepper-step-line-height: paragraph-03-line-height,
  single-stepper-step-font-weight: 300,
  single-stepper-step-letter-spacing: paragraph-03-letter-spacing,
  multi-stepper-line-color: disabled-01,
  multi-stepper-line-filled-color: interactive-primary,
  // later we can split this deeper into completed and uncompleted steps
  multi-stepper-dot-touched-color: interactive-primary,
  multi-stepper-dot-checkmark-color: ui-01,
  multi-stepper-dot-background-color: ui-01,
  multi-stepper-dot-disabled-color: disabled-01,
  multi-stepper-step-color: text-01,
  multi-stepper-step-disabled-color: text-01,
  multi-stepper-step-font-size: paragraph-03-font-size,
  multi-stepper-step-line-height: paragraph-03-line-height,
  multi-stepper-step-font-weight: paragraph-03-font-weight,
  multi-stepper-step-letter-spacing: paragraph-03-letter-spacing,
  multi-stepper-group-color: multi-stepper-step-color,
  multi-stepper-group-disabled-color: multi-stepper-step-disabled-color,
  multi-stepper-group-font-size: paragraph-01-font-size,
  multi-stepper-group-line-height: paragraph-01-line-height,
  multi-stepper-group-font-weight: paragraph-01-font-weight,
  multi-stepper-group-letter-spacing: paragraph-01-letter-spacing,
  // ----- end progress-indicator components ----- //
  radio-button-border-width: 2px,
  radio-button-circle-size: 24px,
  radio-button-circle-color: ui-05,
  radio-button-hover-circle-color: hover-primary,
  radio-button-hover-dot-color: ui-01,
  radio-button-hover-selected-circle-color: hover-primary,
  radio-button-hover-unselected-background-color: transparent,
  radio-button-active-circle-color: active-primary,
  radio-button-active-selected-circle-color: active-primary,
  radio-button-active-unselected-background-color: transparent,
  radio-button-selected-dot-color: ui-01,
  radio-button-selected-circle-color: interactive-primary,
  radio-button-dot-background-color: transparent,
  radio-button-selected-background-color: interactive-primary,
  tab-expert-item-disabled-color: disabled-01,
  radio-button-dot-size: 8px,
  radio-button-background-color: transparent,
  radio-button-border-radius: 50%,
  radio-button-disabled-selected-background-color: disabled-01,
  radio-button-disabled-selected-dot-color: ui-01,
  radio-button-disabled-text-color: disabled-01,
  radio-button-disabled-border-color: disabled-01,
  radio-button-disabled-background-color: transparent,
  radio-button-readonly-background-color: transparent,
  radio-button-readonly-selected-dot-color: readonly-surface-color,
  radio-button-readonly-selected-background-color: readonly-on-surface-color,
  radio-button-readonly-selected-border-color: readonly-on-surface-color,
  radio-button-error-hover-circle-color: danger-hover,
  radio-button-error-active-circle-color: danger-active,
  radio-button-readonly-border-color: readonly-on-surface-color,
  radio-button-label-color: text-01,
  radio-button-large-label-font-size: large-label-font-size,
  radio-button-large-label-line-height: large-label-line-height,
  radio-button-large-label-font-weight: large-label-font-weight,
  radio-button-large-label-letter-spacing: large-label-letter-spacing,
  radio-button-small-label-font-size: small-label-font-size,
  radio-button-small-label-line-height: small-label-line-height,
  radio-button-small-label-font-weight: small-label-font-weight,
  radio-button-small-label-letter-spacing: small-label-letter-spacing,
  radio-button-large-label-margin-left: 12px,
  radio-button-small-label-margin-left: 12px,
  signal-button-error-icon-color: danger,
  signal-button-error-hover-icon-color: danger-hover,
  signal-button-error-active-icon-color: danger-active,
  signal-button-success-icon-color: success,
  signal-button-success-hover-icon-color: success-hover,
  signal-button-success-active-icon-color: success-active,
  signal-button-warning-icon-color: warning,
  signal-button-warning-hover-icon-color: warning-hover,
  signal-button-warning-active-icon-color: warning-active,
  signal-button-warning-icon-background-color: ui-01,
  signal-button-focus-box-shadow: (
    0 0 0 2px #fff,
    0 0 0 6px #27abd6,
  ),
  signal-button-width: 24px,
  signal-button-height: 24px,
  signal-button-font-size: 1.5rem,
  signal-button-border-radius: 4px,
  signal-button-disabled-opacity: 0.4,
  slider-background-color: ui-04,
  slider-disabled-background-color: disabled-01,
  slider-indicator-color: interactive-primary,
  slider-indicator-disabled-color: disabled-04,
  slider-label-color: text-01,
  slider-handle-value-color: interactive-text,
  slider-handle-background-color: ui-05,
  slider-handle-value-disabled-color: text-02,
  slider-handle-value-border-color: ui-02,
  slider-value-label-color: text-01,
  slider-value-background-color: ui-05,
  slider-value-label-disabled-color: disabled-02,
  slider-value-disabled-background-color: disabled-01,
  slider-handle-border-color: ui-02,
  slider-handle-focus-border-color: interactive-primary,
  slider-handle-active-inset-color: rgba(39, 171, 214, 0.2),
  slider-label-font-size: base-label-large-font-size,
  slider-label-line-height: base-label-large-line-height,
  slider-label-letter-spacing: base-label-large-letter-spacing,
  slider-label-font-weight: base-label-large-font-weight,
  slider-value-label-font-size: paragraph-03-font-size,
  slider-value-label-line-height: paragraph-03-line-height,
  slider-value-label-letter-spacing: paragraph-03-letter-spacing,
  slider-value-label-font-weight: 400,
  slider-handle-value-font-size: paragraph-05-font-size,
  slider-handle-value-line-height: paragraph-05-line-height,
  slider-handle-value-font-weight: paragraph-05-font-weight,
  slider-handle-value-letter-spacing: paragraph-05-letter-spacing,
  slider-negative-background-color: negative-dimmed,
  slider-tick-color: text-01,
  slider-icon-size: 24px,
  small-stage-min-height: 208px,
  small-stage-image-min-height: 64px,
  small-stage-image-max-height: 144px,
  small-stage-header-height: 64px,
  small-stage-header-height-tablet: 32px,
  small-stage-header-height-mobile: 32px,
  small-stage-header-padding: 16px 0 24px,
  small-stage-mobile-header-height: 32px,
  small-stage-mobile-header-padding: 16px 0,
  // HINT: base on viewport width, so the image gets smaller the narrower the viewport.
  // Since it's only for mobile screens, maximum it evaluates to is 703px * 15% = 105.45px
  small-stage-image-bottom-height: 15vw,
  small-stage-image-bottom-margin-top: 24px,
  small-stage-image-bottom-max-height: 100px,
  small-stage-content-margin-bottom: 64px,
  small-stage-mobile-content-margin-bottom: 32px,
  small-stage-text-color: text-01,
  small-stage-default-background-color: ui-03,
  small-stage-expert-header-height: 32px,
  small-stage-expert-header-padding: 16px 0 8px,
  small-stage-expert-content-min-height: 0,
  small-stage-expert-content-margin-top: 0,
  small-stage-expert-content-margin-bottom: 32px,
  small-stage-expert-tablet-content-margin-bottom: 24px,
  small-stage-expert-mobile-content-margin-bottom: 16px,
  small-stage-expert-image-min-height: 100px,
  small-stage-expert-image-mobile-height: 15vw,
  small-stage-expert-mobile-header-padding: 8px 0,
  rating-icon-color: interactive-primary,
  rating-icon-size-s: 24px,
  rating-icon-size-m: 32px,
  rating-icon-size-l: 40px,
  rating-label-color: text-01,
  rating-disabled-icon-color: disabled-01,
  rating-disabled-label-color: disabled-01,
  rating-label-font-size: paragraph-03-font-size,
  rating-label-line-height: paragraph-03-line-height,
  rating-label-font-weight: paragraph-03-font-weight,
  rating-label-letter-spacing: paragraph-03-letter-spacing,
  spinner-background-color: ui-03,
  spinner-indicator-color: interactive-primary,
  spinner-negative-background-color: rgba(150, 150, 150, 0.4),
  spinner-negative-indicator-color: negative,
  // the control and the first line of text are supposed to be aligned
  // depending on the height of the control and the line-height of the text
  // you can use these variables to push either the control or the text down to fit
  // 1) if control size is larger than text line height the text needs to be pushed down
  // 2) if the text line height is larger than the control size the control needs to be pushed down
  switcher-dot-size: 20px,
  switcher-dot-padding: 2px,
  switcher-dot-readonly-padding: 1px,
  switcher-dot-size-large: 28px,
  switcher-dot-padding-large: 2px,
  switcher-width: 48px,
  switcher-height: 24px,
  switcher-large-label-control-margin-top: 2px,
  switcher-large-label-text-margin-top: 0,
  switcher-small-label-control-margin-top: 0,
  switcher-small-label-text-margin-top: 0,
  switcher-big-large-label-control-margin-top: 0,
  switcher-big-large-label-text-margin-top: 2px,
  switcher-big-small-label-control-margin-top: 0,
  switcher-big-small-label-text-margin-top: 4px,
  switcher-large-font-size: large-label-font-size,
  switcher-large-line-height: large-label-line-height,
  switcher-large-font-weight: large-label-font-weight,
  switcher-large-letter-spacing: large-label-letter-spacing,
  switcher-small-font-size: small-label-font-size,
  switcher-small-line-height: small-label-line-height,
  switcher-small-font-weight: small-label-font-weight,
  switcher-small-letter-spacing: small-label-letter-spacing,
  switcher-checked-background-color: interactive-primary,
  switcher-checked-icon-color: interactive-text,
  switcher-checked-active-color: interactive-primary,
  switcher-dot-background-color: #ffffff,
  switcher-unchecked-background-color: ui-03,
  switcher-disabled-background-color: disabled-01,
  switcher-disabled-dot-background-color: disabled-02,
  switcher-disabled-icon-color: disabled-01,
  switcher-disabled-text-color: disabled-01,
  switcher-dot-default-color: #ffffff,
  switcher-dot-checked-disabled-color: disabled-02,
  switcher-disabled-border-color: disabled-01,
  switcher-default-border-color: interactive-primary,
  switcher-border-default: 0px,
  switcher-border-radius: 16px,
  switcher-default-hover-color: switcher-unchecked-background-color,
  switcher-default-active-color: switcher-unchecked-background-color,
  switcher-checked-hover-color: interactive-primary,
  switcher-checked-disabled-background-color: disabled-01,
  switcher-icon-opacity: 1,
  switcher-readonly-checked-background-color: readonly-surface-color,
  switcher-translate: 24px,
  switcher-large-width: 56px,
  switcher-large-height: 32px,
  switcher-label-gap: 12px,
  // developer preview: stack values are preparation for a1 tokens and might change
  switcher-stack: 16px,
  switcher-readonly-background-color: readonly-surface-color,
  switcher-readonly-border-color: readonly-on-surface-color,
  switcher-readonly-dot-background-color: readonly-on-surface-color,
  switcher-readonly-text-color: readonly-surface-active-color,
  switcher-readonly-icon-color: readonly-on-surface-active-color,
  tag-font-size: paragraph-04-font-size,
  tag-content-gap: 8px,
  tag-line-height: 16px,
  tag-font-weight: paragraph-04-font-weight,
  tag-letter-spacing: 1px,
  tag-close-icon-size: 1rem,
  tag-border-radius: 16px,
  tag-padding: 6px 14px,
  tag-selected-padding: 6px 14px,
  tag-height: unset,
  tag-selected-color: text-01,
  tag-selected-background-color: ui-03,
  tag-selected-border-color: ui-04,
  tag-selected-hover-color: text-02,
  tag-selected-hover-background-color: ui-04,
  tag-selected-hover-border-color: ui-05,
  tag-selected-active-color: text-02,
  tag-selected-active-background-color: ui-05,
  tag-selected-active-border-color: ui-06,
  tag-background-color: transparent,
  tag-border-color: ui-05,
  tag-color: text-01,
  tag-hover-color: text-02,
  tag-hover-background-color: #c3c3c3,
  tag-hover-border-color: #c3c3c3,
  tag-active-color: text-02,
  tag-active-background-color: ui-03,
  tag-active-border-color: ui-04,
  tag-disabled-color: rgb(from var(--tag-color) r g b / 0.4),
  tag-disabled-background-color: transparent,
  tag-disabled-border-color: disabled-03,
  tag-selected-disabled-color: rgb(from var(--text-02) r g b / 0.4),
  tag-selected-disabled-background-color: disabled-03,
  tag-selected-disabled-border-color: disabled-02,
  tag-readonly-color: readonly-on-surface-color,
  tag-readonly-background-color: readonly-surface-color,
  tag-readonly-border-color: readonly-on-surface-color,
  tag-selected-readonly-color: tag-readonly-color,
  tag-selected-readonly-background-color: tag-readonly-background-color,
  tag-selected-readonly-border-color: tag-readonly-border-color,
  /* taglist tokens are deprecated, use the tag-* tokens instead */
  taglist-font-size: paragraph-04-font-size,
  taglist-line-height: 1rem,
  taglist-font-weight: paragraph-04-font-weight,
  taglist-letter-spacing: 0.0625rem,
  taglist-close-icon-size: 16px,
  taglist-color: white,
  taglist-border-color: #c3c3c3,
  taglist-background-color: transparent,
  taglist-hover-color: text-02,
  taglist-hover-border-color: #c3c3c3,
  taglist-hover-background-color: #c3c3c3,
  tab-item-color: interactive-text,
  tab-item-active-color: active-primary,
  tab-item-hover-color: hover-link,
  tab-item-border-color: ui-05,
  tab-item-border-width: 1px,
  tab-item-active-border-color: interactive-text,
  tab-item-disabled-color: disabled-01,
  tab-item-font-size: paragraph-02-font-size,
  tab-item-line-height: paragraph-02-line-height,
  tab-item-font-weight: paragraph-02-font-weight,
  tab-item-letter-spacing: paragraph-02-letter-spacing,
  tab-item-active-border-width: 4px,
  tab-item-active-font-weight: 700,
  tab-item-margin: 4px 16px 0,
  tab-item-margin-small-screen: 4px 16px 0 16px,
  tab-item-padding: 4px 0 12px 0,
  tab-expert-color: text-01,
  tab-expert-bottom-border-color: #dadada,
  tab-item-disabled-negative-color: negative-dimmed,
  tab-item-disabled-negative-border-color: negative-dimmed,
  tab-header-indicator-display: none,
  tab-item-scroll-color: ui-05,
  tab-scroll-indicator-width: 40px,
  tab-scroll-indicator-width-small-screen: 16px,
  tab-scroll-indicator-fade-width: 0px,
  tab-scroll-indicator-align: center,

  // Base table styles, also for dynamic tables
  table-border-bottom-color: ui-06,
  table-header-cell-font-size: paragraph-03-font-size,
  table-header-cell-line-height: paragraph-03-line-height,
  table-header-cell-font-weight: 600,
  table-header-cell-letter-spacing: paragraph-03-letter-spacing,
  table-header-cell-color: text-01,
  table-header-border-top-color: ui-06,
  table-header-border-bottom-color: ui-06,
  table-cell-font-size: paragraph-03-font-size,
  table-cell-line-height: paragraph-03-line-height,
  table-cell-font-weight: paragraph-03-font-weight,
  table-cell-letter-spacing: paragraph-03-letter-spacing,
  table-cell-border-top-color: ui-06,
  table-cell-color: text-01,
  table-header-cell-background-color: transparent,
  table-row-background-color: transparent,
  table-resize-handle-color: #c2c2c2,
  table-sort-icon-size: 20px,
  // Sticky column can never be transparent
  table-sticky-column-background-color: ui-background,
  // Selectable table
  selectable-table-row-hover-background-color: ui-02,
  selectable-table-row-active-background-color: ui-02,
  selectable-table-row-selected-hover-background-color: ui-02,
  selectable-table-row-selected-border-color: interactive-primary,
  expandable-table-arrow-icon-color: text-01,
  // Zebra table
  zebra-table-even-row-background-color: ui-02,
  zebra-table-odd-row-background-color: transparent,
  zebra-table-row-active-background-color: ui-04,
  zebra-table-row-hover-background-color: ui-03,
  zebra-table-row-selected-background-color: #595959,
  zebra-table-cell-border-top-color: ui-02,
  toggle-button-unselected-border-color: interactive-primary,
  toggle-button-unselected-text-color: interactive-text,
  toggle-button-unselected-background-color: transparent,
  toggle-button-selected-border-color: interactive-primary,
  toggle-button-selected-background-color: interactive-primary,
  toggle-button-selected-text-color: text-02,
  toggle-button-hover-background-color: hover-primary,
  toggle-button-hover-border-color: hover-primary,
  toggle-button-hover-text-color: text-02,
  toggle-button-active-background-color: active-primary,
  toggle-button-active-border-color: active-primary,
  toggle-button-active-text-color: text-02,
  toggle-button-disabled-background-color: ui-01,
  toggle-button-disabled-border-color: rgba(39, 171, 214, 0.4),
  toggle-button-disabled-text-color: rgba(27, 119, 149, 0.4),
  toggle-button-disabled-selected-background-color: rgba(39, 171, 214, 0.4),
  toggle-button-disabled-selected-border-color: transparent,
  toggle-button-disabled-selected-text-color: text-02,
  toggle-button-large-font-size: button-medium-font-size,
  toggle-button-large-line-height: button-medium-line-height,
  toggle-button-large-font-weight: button-medium-font-weight,
  toggle-button-large-letter-spacing: button-medium-letter-spacing,
  toggle-button-small-font-size: button-small-font-size,
  toggle-button-small-line-height: button-small-line-height,
  toggle-button-small-font-weight: button-small-font-weight,
  toggle-button-small-letter-spacing: button-small-letter-spacing,
  toggle-button-readonly-unselected-border-color: readonly-on-surface-color,
  toggle-button-readonly-unselected-text-color: readonly-on-surface-color,
  toggle-button-readonly-unselected-background-color: readonly-surface-color,
  toggle-button-readonly-selected-background-color: readonly-on-surface-color,
  toggle-button-readonly-selected-border-color: readonly-on-surface-color,
  toggle-button-readonly-selected-text-color: readonly-on-surface-active-color,
  toggle-button-border: 1px solid toggle-button-unselected-border-color,
  toggle-button-width: inherit,
  toggle-button-padding: 0px,
  toggle-button-border-radius: 0px,
  toggle-button-disabled-border: none,
  toggle-button-readonly-border: toggle-button-boder,
  toggle-button-error-selected-hover: danger,
  toggle-button-error-selected-active: danger,
  toggle-button-style: solid,
  toggle-radio-button-radius: 0px,
  toggle-radio-border-width: 2px,
  toggle-radio-radius: 4px,
  toggle-border-without-left: 2px 2px 2px 0px,
  toggle-border-without-right: 2px 0px 2px 2px,
  toggle-border-width: 2px,
  toggle-button-vertical-padding: 10px,
  toggle-button-horizontal-padding: 30px,
  toggle-gap: 0px,
  toggle-button-small-gap: 0px,
  toggle-button-small-padding: 6px,
  toggle-button-small-border-radius: 0px,
  toggle-button-small-rounded-border-on-the-left-radius: 4px 0px 0px 4px,
  toggle-button-small-rounded-border-on-the-right-radius: 0px 4px 4px 0px,
  toggle-button-small-min-height: 16px,
  toggle-button-mobile-margin: 8px,
  toggle-button-mobile-height: 24px,
  toggle-button-mobile-border: 1px,
  toggle-radio-button-rounded-on-the-left: 4px 0px 0px 4px,
  toggle-radio-button-rounded-on-the-right: 0px 4px 4px 0px,
  toggle-button-rounded-on-the-top: 4px 4px 0px 0px,
  toggle-button-rounded-on-the-bottom: 0px 0px 4px 4px,
  toggle-button-rounded-mobile: 0px,
  toggle-button-hover-checked-background-color: toggle-button-hover-background-color,
  toggle-button-hover-checked-border-color: toggle-button-hover-background-color,
  toggle-button-hover-checked-text-color: toggle-button-hover-text-color,
  toggle-button-active-checked-background-color: toggle-button-hover-background-color,
  toggle-button-active-checked-border-color: toggle-button-hover-background-color,
  toggle-button-active-checked-text-color: toggle-button-hover-text-color,
  radio-toggle-stack: 16px,
  tooltip-background-color: ui-03,
  tooltip-text-color: text-01,
  tooltip-border-radius: 4px,
  tooltip-font-size: paragraph-04-font-size,
  tooltip-line-height: paragraph-04-line-height,
  tooltip-font-weight: 400,
  tooltip-letter-spacing: paragraph-04-letter-spacing,
  swipebar-background-color: ui-04,
  swipebar-color: interactive-primary,
  swipebar-padding: 32px 0 0,
  sidebar-background-color: ui-02,
  sidebar-handle-color: ui-04,
  sidebar-footer-button-color: text-01,
  sidepanel-background-color: ui-02,
  sidepanel-close-icon-color: text-01,
  sidepanel-floating-shadow: shadow-large,
  sidepanel-light-border-color: ui-04,
  sidepanel-light-background-color: ui-03,
  sidepanel-header-font-size: heading-05-font-size,
  sidepanel-header-line-height: heading-05-line-height,
  sidepanel-header-font-weight: heading-05-font-weight,
  sidepanel-header-letter-spacing: 0,
  file-uploader-file-row-text-color: text-01,
  file-uploader-file-row-border-bottom-color: ui-04,
  file-uploader-file-row-hover-background-color: ui-02,
  file-uploader-file-row-icon-color: success,
  file-uploader-file-row-uploading-file-name-color: #9a9a9a,
  file-uploader-file-name-font-size: paragraph-03-font-size,
  file-uploader-file-name-line-height: 1rem,
  file-uploader-file-name-font-weight: 400,
  file-uploader-file-name-letter-spacing: 0,
  file-uploader-hint-font-size: paragraph-04-font-size,
  file-uploader-hint-line-height: paragraph-05-line-height,
  file-uploader-hint-font-weight: 300,
  file-uploader-hint-letter-spacing: 0,
  file-uploader-drop-zone-border-color: ui-06,
  file-uploader-drop-zone-text-color: text-01,
  toolbar-border-bottom-color: ui-04,
  toolbar-background: ui-02,
  timepicker-layout-background-color: ui-01,
  timepicker-label-color: text-01,
  timepicker-label-hover-color: hover-primary,
  timefield-color: text-01,
  timefield-active-color: interactive-primary,
  timefield-error-color: danger,
  timefield-disabled-color: disabled-01,
  licence-plate-prefix-background: #003399,
  // european union blue
  licence-plate-prefix-color: negative,
);
