@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,
    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: 0 32px 32px,
    accordion-light-mobile-body-padding: 0 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,
    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,
    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,
    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,
);