@synergy-design-system/tokens 2.21.0 → 2.23.0

package/dist/js/index.d.ts

@@ -1,1299 +1,1294 @@
 /**
- * @synergy-design-system/tokens version 2.20.1
+ * @synergy-design-system/tokens version 2.22.0
  * SICK Global UX Foundation
  */
 
 /**
- * Maps to the css variable `--syn-font-size-x-small`
- */
-export const SynFontSizeXSmall: string;
-
-/**
- * Maps to the css variable `--syn-font-size-small`
+ * Maps to the css variable `--syn-border-radius-circle`
  */
-export const SynFontSizeSmall: string;
+export const SynBorderRadiusCircle: string;
 
 /**
- * Maps to the css variable `--syn-font-size-medium`
+ * Maps to the css variable `--syn-border-radius-large`
  */
-export const SynFontSizeMedium: string;
+export const SynBorderRadiusLarge: string;
 
 /**
- * Maps to the css variable `--syn-font-size-large`
+ * Maps to the css variable `--syn-border-radius-medium`
  */
-export const SynFontSizeLarge: string;
+export const SynBorderRadiusMedium: string;
 
 /**
- * Maps to the css variable `--syn-font-size-x-large`
+ * Maps to the css variable `--syn-border-radius-none`
  */
-export const SynFontSizeXLarge: string;
+export const SynBorderRadiusNone: string;
 
 /**
- * Maps to the css variable `--syn-font-size-2x-large`
+ * Maps to the css variable `--syn-border-radius-pill`
  */
-export const SynFontSize2xLarge: string;
+export const SynBorderRadiusPill: string;
 
 /**
- * Maps to the css variable `--syn-font-size-3x-large`
+ * Maps to the css variable `--syn-border-radius-small`
  */
-export const SynFontSize3xLarge: string;
+export const SynBorderRadiusSmall: string;
 
 /**
- * Maps to the css variable `--syn-duration-extra-fast`
+ * Maps to the css variable `--syn-border-radius-x-large`
  */
-export const SynDurationExtraFast: string;
+export const SynBorderRadiusXLarge: string;
 
 /**
- * Maps to the css variable `--syn-duration-fast`
+ * Maps to the css variable `--syn-border-width-large`
  */
-export const SynDurationFast: string;
+export const SynBorderWidthLarge: string;
 
 /**
- * Maps to the css variable `--syn-duration-normal`
+ * Maps to the css variable `--syn-border-width-medium`
  */
-export const SynDurationNormal: string;
+export const SynBorderWidthMedium: string;
 
 /**
- * Maps to the css variable `--syn-duration-slow`
+ * Maps to the css variable `--syn-border-width-none`
  */
-export const SynDurationSlow: string;
+export const SynBorderWidthNone: string;
 
 /**
- * Maps to the css variable `--syn-duration-extra-slow`
+ * Maps to the css variable `--syn-border-width-small`
  */
-export const SynDurationExtraSlow: string;
+export const SynBorderWidthSmall: string;
 
 /**
- * Maps to the css variable `--syn-line-height-denser`
+ * Maps to the css variable `--syn-border-width-x-large`
  */
-export const SynLineHeightDenser: string;
+export const SynBorderWidthXLarge: string;
 
 /**
- * Maps to the css variable `--syn-line-height-dense`
+ * Maps to the css variable `--syn-button-font-size-large`
  */
-export const SynLineHeightDense: string;
+export const SynButtonFontSizeLarge: string;
 
 /**
- * Maps to the css variable `--syn-line-height-normal`
+ * Maps to the css variable `--syn-button-font-size-medium`
  */
-export const SynLineHeightNormal: string;
+export const SynButtonFontSizeMedium: string;
 
 /**
- * Maps to the css variable `--syn-line-height-loose`
+ * Maps to the css variable `--syn-button-font-size-small`
  */
-export const SynLineHeightLoose: string;
+export const SynButtonFontSizeSmall: string;
 
 /**
- * Maps to the css variable `--syn-line-height-looser`
+ * Maps to the css variable `--syn-color-accent-50`
  */
-export const SynLineHeightLooser: string;
+export const SynColorAccent50: string;
 
 /**
- * Maps to the css variable `--syn-font-weight-normal`
+ * Maps to the css variable `--syn-color-accent-100`
  */
-export const SynFontWeightNormal: string;
+export const SynColorAccent100: string;
 
 /**
- * Maps to the css variable `--syn-font-weight-semibold`
+ * Maps to the css variable `--syn-color-accent-200`
  */
-export const SynFontWeightSemibold: string;
+export const SynColorAccent200: string;
 
 /**
- * Maps to the css variable `--syn-font-weight-bold`
+ * Maps to the css variable `--syn-color-accent-300`
  */
-export const SynFontWeightBold: string;
+export const SynColorAccent300: string;
 
 /**
- * Maps to the css variable `--syn-shadow-medium`
+ * Maps to the css variable `--syn-color-accent-400`
  */
-export const SynShadowMedium: string;
+export const SynColorAccent400: string;
 
 /**
- * Maps to the css variable `--syn-shadow-large`
+ * Maps to the css variable `--syn-color-accent-500`
  */
-export const SynShadowLarge: string;
+export const SynColorAccent500: string;
 
 /**
- * Maps to the css variable `--syn-shadow-x-large`
+ * Maps to the css variable `--syn-color-accent-600`
  */
-export const SynShadowXLarge: string;
+export const SynColorAccent600: string;
 
 /**
- * Maps to the css variable `--syn-shadow-overflow-down`
+ * Maps to the css variable `--syn-color-accent-700`
  */
-export const SynShadowOverflowDown: string;
+export const SynColorAccent700: string;
 
 /**
- * Maps to the css variable `--syn-shadow-overflow-up`
+ * Maps to the css variable `--syn-color-accent-800`
  */
-export const SynShadowOverflowUp: string;
+export const SynColorAccent800: string;
 
 /**
- * Maps to the css variable `--syn-shadow-overflow-left`
+ * Maps to the css variable `--syn-color-accent-900`
  */
-export const SynShadowOverflowLeft: string;
+export const SynColorAccent900: string;
 
 /**
- * Maps to the css variable `--syn-shadow-overflow-right`
+ * Maps to the css variable `--syn-color-accent-950`
  */
-export const SynShadowOverflowRight: string;
+export const SynColorAccent950: string;
 
 /**
- * Maps to the css variable `--syn-font-sans`
+ * Maps to the css variable `--syn-color-error-50`
  */
-export const SynFontSans: string;
+export const SynColorError50: string;
 
 /**
- * Maps to the css variable `--syn-font-mono`
+ * Maps to the css variable `--syn-color-error-100`
  */
-export const SynFontMono: string;
+export const SynColorError100: string;
 
 /**
- * Maps to the css variable `--syn-spacing-4x-small`
+ * Maps to the css variable `--syn-color-error-200`
  */
-export const SynSpacing4xSmall: string;
+export const SynColorError200: string;
 
 /**
- * Maps to the css variable `--syn-spacing-3x-small`
+ * Maps to the css variable `--syn-color-error-300`
  */
-export const SynSpacing3xSmall: string;
+export const SynColorError300: string;
 
 /**
- * Maps to the css variable `--syn-spacing-2x-small`
+ * Maps to the css variable `--syn-color-error-400`
  */
-export const SynSpacing2xSmall: string;
+export const SynColorError400: string;
 
 /**
- * Maps to the css variable `--syn-spacing-x-small`
+ * Maps to the css variable `--syn-color-error-500`
  */
-export const SynSpacingXSmall: string;
+export const SynColorError500: string;
 
 /**
- * Maps to the css variable `--syn-spacing-small`
+ * Maps to the css variable `--syn-color-error-600`
  */
-export const SynSpacingSmall: string;
+export const SynColorError600: string;
 
 /**
- * Maps to the css variable `--syn-spacing-medium`
+ * Maps to the css variable `--syn-color-error-700`
  */
-export const SynSpacingMedium: string;
+export const SynColorError700: string;
 
 /**
- * Maps to the css variable `--syn-spacing-medium-large`
+ * Maps to the css variable `--syn-color-error-800`
  */
-export const SynSpacingMediumLarge: string;
+export const SynColorError800: string;
 
 /**
- * Maps to the css variable `--syn-spacing-large`
+ * Maps to the css variable `--syn-color-error-900`
  */
-export const SynSpacingLarge: string;
+export const SynColorError900: string;
 
 /**
- * Maps to the css variable `--syn-spacing-x-large`
+ * Maps to the css variable `--syn-color-error-950`
  */
-export const SynSpacingXLarge: string;
+export const SynColorError950: string;
 
 /**
- * Maps to the css variable `--syn-spacing-2x-large`
+ * Maps to the css variable `--syn-color-neutral-0`
  */
-export const SynSpacing2xLarge: string;
+export const SynColorNeutral0: string;
 
 /**
- * Maps to the css variable `--syn-spacing-3x-large`
+ * Maps to the css variable `--syn-color-neutral-50`
  */
-export const SynSpacing3xLarge: string;
+export const SynColorNeutral50: string;
 
 /**
- * Maps to the css variable `--syn-spacing-4x-large`
+ * Maps to the css variable `--syn-color-neutral-100`
  */
-export const SynSpacing4xLarge: string;
+export const SynColorNeutral100: string;
 
 /**
- * Maps to the css variable `--syn-spacing-5x-large`
+ * Maps to the css variable `--syn-color-neutral-200`
  */
-export const SynSpacing5xLarge: string;
+export const SynColorNeutral200: string;
 
 /**
- * Maps to the css variable `--syn-border-radius-none`
+ * Maps to the css variable `--syn-color-neutral-300`
  */
-export const SynBorderRadiusNone: string;
+export const SynColorNeutral300: string;
 
 /**
- * Maps to the css variable `--syn-border-radius-pill`
+ * Maps to the css variable `--syn-color-neutral-400`
  */
-export const SynBorderRadiusPill: string;
+export const SynColorNeutral400: string;
 
 /**
- * Maps to the css variable `--syn-border-radius-circle`
+ * Maps to the css variable `--syn-color-neutral-500`
  */
-export const SynBorderRadiusCircle: string;
+export const SynColorNeutral500: string;
 
 /**
- * Maps to the css variable `--syn-border-radius-small`
+ * Maps to the css variable `--syn-color-neutral-600`
  */
-export const SynBorderRadiusSmall: string;
+export const SynColorNeutral600: string;
 
 /**
- * Maps to the css variable `--syn-border-radius-medium`
+ * Maps to the css variable `--syn-color-neutral-700`
  */
-export const SynBorderRadiusMedium: string;
+export const SynColorNeutral700: string;
 
 /**
- * Maps to the css variable `--syn-dimension-base`
+ * Maps to the css variable `--syn-color-neutral-800`
  */
-export const SynDimensionBase: string;
+export const SynColorNeutral800: string;
 
 /**
- * Maps to the css variable `--syn-border-width-none`
+ * Maps to the css variable `--syn-color-neutral-900`
  */
-export const SynBorderWidthNone: string;
+export const SynColorNeutral900: string;
 
 /**
- * Maps to the css variable `--syn-border-width-small`
+ * Maps to the css variable `--syn-color-neutral-950`
  */
-export const SynBorderWidthSmall: string;
+export const SynColorNeutral950: string;
 
 /**
- * Maps to the css variable `--syn-border-width-medium`
+ * Maps to the css variable `--syn-color-neutral-1000`
  */
-export const SynBorderWidthMedium: string;
+export const SynColorNeutral1000: string;
 
 /**
- * Maps to the css variable `--syn-border-width-large`
+ * Maps to the css variable `--syn-color-primary-50`
  */
-export const SynBorderWidthLarge: string;
+export const SynColorPrimary50: string;
 
 /**
- * Maps to the css variable `--syn-border-width-x-large`
+ * Maps to the css variable `--syn-color-primary-100`
  */
-export const SynBorderWidthXLarge: string;
+export const SynColorPrimary100: string;
 
 /**
- * Maps to the css variable `--syn-font-sans-fallback`
+ * Maps to the css variable `--syn-color-primary-200`
  */
-export const SynFontSansFallback: string;
+export const SynColorPrimary200: string;
 
 /**
- * Maps to the css variable `--syn-opacity-50`
+ * Maps to the css variable `--syn-color-primary-300`
  */
-export const SynOpacity50: string;
+export const SynColorPrimary300: string;
 
 /**
- * Maps to the css variable `--syn-text-decoration-default`
+ * Maps to the css variable `--syn-color-primary-400`
  */
-export const SynTextDecorationDefault: string;
+export const SynColorPrimary400: string;
 
 /**
- * Maps to the css variable `--syn-text-decoration-underline`
+ * Maps to the css variable `--syn-color-primary-500`
  */
-export const SynTextDecorationUnderline: string;
+export const SynColorPrimary500: string;
 
 /**
- * Maps to the css variable `--syn-button-font-size-small`
+ * Maps to the css variable `--syn-color-primary-600`
  */
-export const SynButtonFontSizeSmall: string;
+export const SynColorPrimary600: string;
 
 /**
- * Maps to the css variable `--syn-button-font-size-medium`
+ * Maps to the css variable `--syn-color-primary-700`
  */
-export const SynButtonFontSizeMedium: string;
+export const SynColorPrimary700: string;
 
 /**
- * Maps to the css variable `--syn-button-font-size-large`
+ * Maps to the css variable `--syn-color-primary-800`
  */
-export const SynButtonFontSizeLarge: string;
+export const SynColorPrimary800: string;
 
 /**
- * Maps to the css variable `--syn-focus-ring-color`
+ * Maps to the css variable `--syn-color-primary-900`
  */
-export const SynFocusRingColor: string;
+export const SynColorPrimary900: string;
 
 /**
- * Maps to the css variable `--syn-focus-ring-width`
+ * Maps to the css variable `--syn-color-primary-950`
  */
-export const SynFocusRingWidth: string;
+export const SynColorPrimary950: string;
 
 /**
- * Maps to the css variable `--syn-focus-ring-offset`
+ * Maps to the css variable `--syn-color-success-50`
  */
-export const SynFocusRingOffset: string;
+export const SynColorSuccess50: string;
 
 /**
- * Maps to the css variable `--syn-input-color`
+ * Maps to the css variable `--syn-color-success-100`
  */
-export const SynInputColor: string;
+export const SynColorSuccess100: string;
 
 /**
- * Maps to the css variable `--syn-input-color-hover`
+ * Maps to the css variable `--syn-color-success-200`
  */
-export const SynInputColorHover: string;
+export const SynColorSuccess200: string;
 
 /**
- * Maps to the css variable `--syn-input-color-focus`
+ * Maps to the css variable `--syn-color-success-300`
  */
-export const SynInputColorFocus: string;
+export const SynColorSuccess300: string;
 
 /**
- * Maps to the css variable `--syn-input-color-disabled`
+ * Maps to the css variable `--syn-color-success-400`
  */
-export const SynInputColorDisabled: string;
+export const SynColorSuccess400: string;
 
 /**
- * Maps to the css variable `--syn-input-background-color`
+ * Maps to the css variable `--syn-color-success-500`
  */
-export const SynInputBackgroundColor: string;
+export const SynColorSuccess500: string;
 
 /**
- * Maps to the css variable `--syn-input-background-color-hover`
+ * Maps to the css variable `--syn-color-success-600`
  */
-export const SynInputBackgroundColorHover: string;
+export const SynColorSuccess600: string;
 
 /**
- * Maps to the css variable `--syn-input-background-color-focus`
+ * Maps to the css variable `--syn-color-success-700`
  */
-export const SynInputBackgroundColorFocus: string;
+export const SynColorSuccess700: string;
 
 /**
- * Maps to the css variable `--syn-input-background-color-disabled`
+ * Maps to the css variable `--syn-color-success-800`
  */
-export const SynInputBackgroundColorDisabled: string;
+export const SynColorSuccess800: string;
 
 /**
- * Maps to the css variable `--syn-input-border-color`
+ * Maps to the css variable `--syn-color-success-900`
  */
-export const SynInputBorderColor: string;
+export const SynColorSuccess900: string;
 
 /**
- * Maps to the css variable `--syn-input-border-color-hover`
+ * Maps to the css variable `--syn-color-success-950`
  */
-export const SynInputBorderColorHover: string;
+export const SynColorSuccess950: string;
 
 /**
- * Maps to the css variable `--syn-input-border-color-focus`
+ * Maps to the css variable `--syn-color-warning-50`
  */
-export const SynInputBorderColorFocus: string;
+export const SynColorWarning50: string;
 
 /**
- * Maps to the css variable `--syn-input-border-color-disables`
+ * Maps to the css variable `--syn-color-warning-100`
  */
-export const SynInputBorderColorDisables: string;
+export const SynColorWarning100: string;
 
 /**
- * Maps to the css variable `--syn-input-border-radius-small`
+ * Maps to the css variable `--syn-color-warning-200`
  */
-export const SynInputBorderRadiusSmall: string;
+export const SynColorWarning200: string;
 
 /**
- * Maps to the css variable `--syn-input-border-radius-medium`
+ * Maps to the css variable `--syn-color-warning-300`
  */
-export const SynInputBorderRadiusMedium: string;
+export const SynColorWarning300: string;
 
 /**
- * Maps to the css variable `--syn-input-border-radius-large`
+ * Maps to the css variable `--syn-color-warning-400`
  */
-export const SynInputBorderRadiusLarge: string;
+export const SynColorWarning400: string;
 
 /**
- * Maps to the css variable `--syn-input-border-color-focus-error`
+ * Maps to the css variable `--syn-color-warning-500`
  */
-export const SynInputBorderColorFocusError: string;
+export const SynColorWarning500: string;
 
 /**
- * Maps to the css variable `--syn-input-width`
+ * Maps to the css variable `--syn-color-warning-600`
  */
-export const SynInputWidth: string;
+export const SynColorWarning600: string;
 
 /**
- * Maps to the css variable `--syn-input-icon-color`
+ * Maps to the css variable `--syn-color-warning-700`
  */
-export const SynInputIconColor: string;
+export const SynColorWarning700: string;
 
 /**
- * Maps to the css variable `--syn-input-icon-color-hover`
+ * Maps to the css variable `--syn-color-warning-800`
  */
-export const SynInputIconColorHover: string;
+export const SynColorWarning800: string;
 
 /**
- * Maps to the css variable `--syn-input-icon-color-focus`
+ * Maps to the css variable `--syn-color-warning-900`
  */
-export const SynInputIconColorFocus: string;
+export const SynColorWarning900: string;
 
 /**
- * Maps to the css variable `--syn-input-icon-icon-clearable-color`
+ * Maps to the css variable `--syn-color-warning-950`
  */
-export const SynInputIconIconClearableColor: string;
+export const SynColorWarning950: string;
 
 /**
- * Maps to the css variable `--syn-input-icon-icon-clearable-color-hover`
+ * Maps to the css variable `--syn-dimension-base`
  */
-export const SynInputIconIconClearableColorHover: string;
+export const SynDimensionBase: string;
 
 /**
- * Maps to the css variable `--syn-input-icon-icon-clearable-color-focus`
+ * Maps to the css variable `--syn-duration-extra-fast`
  */
-export const SynInputIconIconClearableColorFocus: string;
+export const SynDurationExtraFast: string;
 
 /**
- * Maps to the css variable `--syn-input-placeholder-color`
+ * Maps to the css variable `--syn-duration-extra-slow`
  */
-export const SynInputPlaceholderColor: string;
+export const SynDurationExtraSlow: string;
 
 /**
- * Maps to the css variable `--syn-input-placeholder-color-disabled`
+ * Maps to the css variable `--syn-duration-fast`
  */
-export const SynInputPlaceholderColorDisabled: string;
+export const SynDurationFast: string;
 
 /**
- * Maps to the css variable `--syn-input-required-content`
+ * Maps to the css variable `--syn-duration-normal`
  */
-export const SynInputRequiredContent: string;
+export const SynDurationNormal: string;
 
 /**
- * Maps to the css variable `--syn-input-required-content-color`
+ * Maps to the css variable `--syn-duration-slow`
  */
-export const SynInputRequiredContentColor: string;
+export const SynDurationSlow: string;
 
 /**
- * Maps to the css variable `--syn-input-required-content-offset`
+ * Maps to the css variable `--syn-focus-ring-color`
  */
-export const SynInputRequiredContentOffset: string;
+export const SynFocusRingColor: string;
 
 /**
- * Maps to the css variable `--syn-input-label-color`
+ * Maps to the css variable `--syn-focus-ring-offset`
  */
-export const SynInputLabelColor: string;
+export const SynFocusRingOffset: string;
 
 /**
- * Maps to the css variable `--syn-input-label-font-size-small`
+ * Maps to the css variable `--syn-focus-ring-style`
  */
-export const SynInputLabelFontSizeSmall: string;
+export const SynFocusRingStyle: string;
 
 /**
- * Maps to the css variable `--syn-input-label-font-size-medium`
+ * Maps to the css variable `--syn-focus-ring-width`
  */
-export const SynInputLabelFontSizeMedium: string;
+export const SynFocusRingWidth: string;
 
 /**
- * Maps to the css variable `--syn-input-label-font-size-large`
+ * Maps to the css variable `--syn-font-mono`
  */
-export const SynInputLabelFontSizeLarge: string;
+export const SynFontMono: string;
 
 /**
- * Maps to the css variable `--syn-input-spacing-small`
+ * Maps to the css variable `--syn-font-sans`
  */
-export const SynInputSpacingSmall: string;
+export const SynFontSans: string;
 
 /**
- * Maps to the css variable `--syn-input-spacing-medium`
+ * Maps to the css variable `--syn-font-sans-fallback`
  */
-export const SynInputSpacingMedium: string;
+export const SynFontSansFallback: string;
 
 /**
- * Maps to the css variable `--syn-input-spacing-large`
+ * Maps to the css variable `--syn-font-serif`
  */
-export const SynInputSpacingLarge: string;
+export const SynFontSerif: string;
 
 /**
- * Maps to the css variable `--syn-input-focus-ring-color`
+ * Maps to the css variable `--syn-font-size-2x-large`
  */
-export const SynInputFocusRingColor: string;
+export const SynFontSize2xLarge: string;
 
 /**
- * Maps to the css variable `--syn-input-focus-ring-offset`
+ * Maps to the css variable `--syn-font-size-2x-small`
  */
-export const SynInputFocusRingOffset: string;
+export const SynFontSize2xSmall: string;
 
 /**
- * Maps to the css variable `--syn-input-focus-ring-error`
+ * Maps to the css variable `--syn-font-size-3x-large`
  */
-export const SynInputFocusRingError: string;
+export const SynFontSize3xLarge: string;
 
 /**
- * Maps to the css variable `--syn-input-disabled-opacity`
+ * Maps to the css variable `--syn-font-size-4x-large`
  */
-export const SynInputDisabledOpacity: string;
+export const SynFontSize4xLarge: string;
 
 /**
- * Maps to the css variable `--syn-input-readonly-background-color`
+ * Maps to the css variable `--syn-font-size-large`
  */
-export const SynInputReadonlyBackgroundColor: string;
+export const SynFontSizeLarge: string;
 
 /**
- * Maps to the css variable `--syn-input-readonly-background-color-hover`
+ * Maps to the css variable `--syn-font-size-medium`
  */
-export const SynInputReadonlyBackgroundColorHover: string;
+export const SynFontSizeMedium: string;
 
 /**
- * Maps to the css variable `--syn-input-readonly-background-color-focus`
+ * Maps to the css variable `--syn-font-size-small`
  */
-export const SynInputReadonlyBackgroundColorFocus: string;
+export const SynFontSizeSmall: string;
 
 /**
- * Maps to the css variable `--syn-input-readonly-background-color-disabled`
+ * Maps to the css variable `--syn-font-size-x-large`
  */
-export const SynInputReadonlyBackgroundColorDisabled: string;
+export const SynFontSizeXLarge: string;
 
 /**
- * Maps to the css variable `--syn-input-help-text-color`
+ * Maps to the css variable `--syn-font-size-x-small`
  */
-export const SynInputHelpTextColor: string;
+export const SynFontSizeXSmall: string;
 
 /**
- * Maps to the css variable `--syn-input-help-text-color-error`
+ * Maps to the css variable `--syn-font-weight-bold`
  */
-export const SynInputHelpTextColorError: string;
+export const SynFontWeightBold: string;
 
 /**
- * Maps to the css variable `--syn-input-help-text-font-size-small`
+ * Maps to the css variable `--syn-font-weight-light`
  */
-export const SynInputHelpTextFontSizeSmall: string;
+export const SynFontWeightLight: string;
 
 /**
- * Maps to the css variable `--syn-input-help-text-font-size-medium`
+ * Maps to the css variable `--syn-font-weight-normal`
  */
-export const SynInputHelpTextFontSizeMedium: string;
+export const SynFontWeightNormal: string;
 
 /**
- * Maps to the css variable `--syn-input-help-text-font-size-large`
+ * Maps to the css variable `--syn-font-weight-semibold`
  */
-export const SynInputHelpTextFontSizeLarge: string;
+export const SynFontWeightSemibold: string;
 
 /**
- * Maps to the css variable `--syn-input-height-small`
+ * Maps to the css variable `--syn-input-background-color`
  */
-export const SynInputHeightSmall: string;
+export const SynInputBackgroundColor: string;
 
 /**
- * Maps to the css variable `--syn-input-height-medium`
+ * Maps to the css variable `--syn-input-background-color-disabled`
  */
-export const SynInputHeightMedium: string;
+export const SynInputBackgroundColorDisabled: string;
 
 /**
- * Maps to the css variable `--syn-input-height-large`
+ * Maps to the css variable `--syn-input-background-color-focus`
  */
-export const SynInputHeightLarge: string;
+export const SynInputBackgroundColorFocus: string;
 
 /**
- * Maps to the css variable `--syn-input-readonly-color`
+ * Maps to the css variable `--syn-input-background-color-hover`
  */
-export const SynInputReadonlyColor: string;
+export const SynInputBackgroundColorHover: string;
 
 /**
- * Maps to the css variable `--syn-input-readonly-color-disabled`
+ * Maps to the css variable `--syn-input-border-color`
  */
-export const SynInputReadonlyColorDisabled: string;
+export const SynInputBorderColor: string;
 
 /**
- * Maps to the css variable `--syn-input-readonly-color-hover`
+ * Maps to the css variable `--syn-input-border-color-disabled`
  */
-export const SynInputReadonlyColorHover: string;
+export const SynInputBorderColorDisabled: string;
 
 /**
- * Maps to the css variable `--syn-input-readonly-color-focus`
+ * Maps to the css variable `--syn-input-border-color-focus`
  */
-export const SynInputReadonlyColorFocus: string;
+export const SynInputBorderColorFocus: string;
 
 /**
- * Maps to the css variable `--syn-input-font-size-small`
+ * Maps to the css variable `--syn-input-border-color-focus-error`
  */
-export const SynInputFontSizeSmall: string;
+export const SynInputBorderColorFocusError: string;
 
 /**
- * Maps to the css variable `--syn-input-font-size-medium`
+ * Maps to the css variable `--syn-input-border-color-hover`
  */
-export const SynInputFontSizeMedium: string;
+export const SynInputBorderColorHover: string;
 
 /**
- * Maps to the css variable `--syn-input-font-size-large`
+ * Maps to the css variable `--syn-input-border-radius-large`
  */
-export const SynInputFontSizeLarge: string;
+export const SynInputBorderRadiusLarge: string;
 
 /**
- * Maps to the css variable `--syn-link-color`
+ * Maps to the css variable `--syn-input-border-radius-medium`
  */
-export const SynLinkColor: string;
+export const SynInputBorderRadiusMedium: string;
 
 /**
- * Maps to the css variable `--syn-link-color-hover`
+ * Maps to the css variable `--syn-input-border-radius-small`
  */
-export const SynLinkColorHover: string;
+export const SynInputBorderRadiusSmall: string;
 
 /**
- * Maps to the css variable `--syn-link-color-active`
+ * Maps to the css variable `--syn-input-border-width`
  */
-export const SynLinkColorActive: string;
+export const SynInputBorderWidth: string;
 
 /**
- * Maps to the css variable `--syn-link-quiet-color`
+ * Maps to the css variable `--syn-input-color`
  */
-export const SynLinkQuietColor: string;
+export const SynInputColor: string;
 
 /**
- * Maps to the css variable `--syn-link-quiet-color-hover`
+ * Maps to the css variable `--syn-input-color-disabled`
  */
-export const SynLinkQuietColorHover: string;
+export const SynInputColorDisabled: string;
 
 /**
- * Maps to the css variable `--syn-link-quiet-color-active`
+ * Maps to the css variable `--syn-input-color-focus`
  */
-export const SynLinkQuietColorActive: string;
+export const SynInputColorFocus: string;
 
 /**
- * Maps to the css variable `--syn-overlay-background-color`
+ * Maps to the css variable `--syn-input-color-hover`
  */
-export const SynOverlayBackgroundColor: string;
+export const SynInputColorHover: string;
 
 /**
- * Maps to the css variable `--syn-panel-background-color`
+ * Maps to the css variable `--syn-input-disabled-opacity`
  */
-export const SynPanelBackgroundColor: string;
+export const SynInputDisabledOpacity: string;
 
 /**
- * Maps to the css variable `--syn-panel-border-color`
+ * Maps to the css variable `--syn-input-focus-ring-color`
  */
-export const SynPanelBorderColor: string;
+export const SynInputFocusRingColor: string;
 
 /**
- * Maps to the css variable `--syn-panel-border-width`
+ * Maps to the css variable `--syn-input-focus-ring-error`
  */
-export const SynPanelBorderWidth: string;
+export const SynInputFocusRingError: string;
 
 /**
- * Maps to the css variable `--syn-toggle-size-small`
+ * Maps to the css variable `--syn-input-focus-ring-offset`
  */
-export const SynToggleSizeSmall: string;
+export const SynInputFocusRingOffset: string;
 
 /**
- * Maps to the css variable `--syn-toggle-size-medium`
+ * Maps to the css variable `--syn-input-font-family`
  */
-export const SynToggleSizeMedium: string;
+export const SynInputFontFamily: string;
 
 /**
- * Maps to the css variable `--syn-toggle-size-large`
+ * Maps to the css variable `--syn-input-font-size-large`
  */
-export const SynToggleSizeLarge: string;
+export const SynInputFontSizeLarge: string;
 
 /**
- * Maps to the css variable `--syn-tooltip-border-radius`
+ * Maps to the css variable `--syn-input-font-size-medium`
  */
-export const SynTooltipBorderRadius: string;
+export const SynInputFontSizeMedium: string;
 
 /**
- * Maps to the css variable `--syn-tooltip-background-color`
+ * Maps to the css variable `--syn-input-font-size-small`
  */
-export const SynTooltipBackgroundColor: string;
+export const SynInputFontSizeSmall: string;
 
 /**
- * Maps to the css variable `--syn-tooltip-color`
+ * Maps to the css variable `--syn-input-font-weight`
  */
-export const SynTooltipColor: string;
+export const SynInputFontWeight: string;
 
 /**
- * Maps to the css variable `--syn-tooltip-font-family`
+ * Maps to the css variable `--syn-input-height-large`
  */
-export const SynTooltipFontFamily: string;
+export const SynInputHeightLarge: string;
 
 /**
- * Maps to the css variable `--syn-tooltip-font-weight`
+ * Maps to the css variable `--syn-input-height-medium`
  */
-export const SynTooltipFontWeight: string;
+export const SynInputHeightMedium: string;
 
 /**
- * Maps to the css variable `--syn-tooltip-font-size`
+ * Maps to the css variable `--syn-input-height-small`
  */
-export const SynTooltipFontSize: string;
+export const SynInputHeightSmall: string;
 
 /**
- * Maps to the css variable `--syn-tooltip-line-height`
+ * Maps to the css variable `--syn-input-help-text-color`
  */
-export const SynTooltipLineHeight: string;
+export const SynInputHelpTextColor: string;
 
 /**
- * Maps to the css variable `--syn-tooltip-padding`
+ * Maps to the css variable `--syn-input-help-text-color-error`
  */
-export const SynTooltipPadding: string;
+export const SynInputHelpTextColorError: string;
 
 /**
- * Maps to the css variable `--syn-tooltip-arrow-size`
+ * Maps to the css variable `--syn-input-help-text-font-size-large`
  */
-export const SynTooltipArrowSize: string;
+export const SynInputHelpTextFontSizeLarge: string;
 
 /**
- * Maps to the css variable `--syn-body-x-small-regular`
+ * Maps to the css variable `--syn-input-help-text-font-size-medium`
  */
-export const SynBodyXSmallRegular: string;
+export const SynInputHelpTextFontSizeMedium: string;
 
 /**
- * Maps to the css variable `--syn-body-x-small-semibold`
+ * Maps to the css variable `--syn-input-help-text-font-size-small`
  */
-export const SynBodyXSmallSemibold: string;
+export const SynInputHelpTextFontSizeSmall: string;
 
 /**
- * Maps to the css variable `--syn-body-x-small-bold`
+ * Maps to the css variable `--syn-input-icon-color`
  */
-export const SynBodyXSmallBold: string;
+export const SynInputIconColor: string;
 
 /**
- * Maps to the css variable `--syn-body-small-regular`
+ * Maps to the css variable `--syn-input-icon-color-focus`
  */
-export const SynBodySmallRegular: string;
+export const SynInputIconColorFocus: string;
 
 /**
- * Maps to the css variable `--syn-body-small-semibold`
+ * Maps to the css variable `--syn-input-icon-color-hover`
  */
-export const SynBodySmallSemibold: string;
+export const SynInputIconColorHover: string;
 
 /**
- * Maps to the css variable `--syn-body-small-bold`
+ * Maps to the css variable `--syn-input-icon-icon-clearable-color`
  */
-export const SynBodySmallBold: string;
+export const SynInputIconIconClearableColor: string;
 
 /**
- * Maps to the css variable `--syn-body-medium-regular`
+ * Maps to the css variable `--syn-input-icon-icon-clearable-color-focus`
  */
-export const SynBodyMediumRegular: string;
+export const SynInputIconIconClearableColorFocus: string;
 
 /**
- * Maps to the css variable `--syn-body-medium-semibold`
+ * Maps to the css variable `--syn-input-icon-icon-clearable-color-hover`
  */
-export const SynBodyMediumSemibold: string;
+export const SynInputIconIconClearableColorHover: string;
 
 /**
- * Maps to the css variable `--syn-body-medium-bold`
+ * Maps to the css variable `--syn-input-label-color`
  */
-export const SynBodyMediumBold: string;
+export const SynInputLabelColor: string;
 
 /**
- * Maps to the css variable `--syn-body-large-regular`
+ * Maps to the css variable `--syn-input-label-font-size-large`
  */
-export const SynBodyLargeRegular: string;
+export const SynInputLabelFontSizeLarge: string;
 
 /**
- * Maps to the css variable `--syn-body-large-semibold`
+ * Maps to the css variable `--syn-input-label-font-size-medium`
  */
-export const SynBodyLargeSemibold: string;
+export const SynInputLabelFontSizeMedium: string;
 
 /**
- * Maps to the css variable `--syn-body-large-bold`
+ * Maps to the css variable `--syn-input-label-font-size-small`
  */
-export const SynBodyLargeBold: string;
+export const SynInputLabelFontSizeSmall: string;
 
 /**
- * Maps to the css variable `--syn-heading-large`
+ * Maps to the css variable `--syn-input-letter-spacing`
  */
-export const SynHeadingLarge: string;
+export const SynInputLetterSpacing: string;
 
 /**
- * Maps to the css variable `--syn-heading-x-large`
+ * Maps to the css variable `--syn-input-placeholder-color`
  */
-export const SynHeadingXLarge: string;
+export const SynInputPlaceholderColor: string;
 
 /**
- * Maps to the css variable `--syn-heading-2x-large`
+ * Maps to the css variable `--syn-input-placeholder-color-disabled`
  */
-export const SynHeading2xLarge: string;
+export const SynInputPlaceholderColorDisabled: string;
 
 /**
- * Maps to the css variable `--syn-heading-3x-large`
+ * Maps to the css variable `--syn-input-readonly-color`
  */
-export const SynHeading3xLarge: string;
+export const SynInputReadonlyColor: string;
 
 /**
- * Maps to the css variable `--syn-typography-color-text`
+ * Maps to the css variable `--syn-input-readonly-color-disabled`
  */
-export const SynTypographyColorText: string;
+export const SynInputReadonlyColorDisabled: string;
 
 /**
- * Maps to the css variable `--syn-typography-color-text-inverted`
+ * Maps to the css variable `--syn-input-readonly-color-focus`
  */
-export const SynTypographyColorTextInverted: string;
+export const SynInputReadonlyColorFocus: string;
 
 /**
- * Maps to the css variable `--syn-color-primary-50`
+ * Maps to the css variable `--syn-input-readonly-color-hover`
  */
-export const SynColorPrimary50: string;
+export const SynInputReadonlyColorHover: string;
 
 /**
- * Maps to the css variable `--syn-color-primary-100`
+ * Maps to the css variable `--syn-input-readonly-background-color`
  */
-export const SynColorPrimary100: string;
+export const SynInputReadonlyBackgroundColor: string;
 
 /**
- * Maps to the css variable `--syn-color-primary-200`
+ * Maps to the css variable `--syn-input-readonly-background-color-disabled`
  */
-export const SynColorPrimary200: string;
+export const SynInputReadonlyBackgroundColorDisabled: string;
 
 /**
- * Maps to the css variable `--syn-color-primary-300`
+ * Maps to the css variable `--syn-input-readonly-background-color-focus`
  */
-export const SynColorPrimary300: string;
+export const SynInputReadonlyBackgroundColorFocus: string;
 
 /**
- * Maps to the css variable `--syn-color-primary-400`
+ * Maps to the css variable `--syn-input-readonly-background-color-hover`
  */
-export const SynColorPrimary400: string;
+export const SynInputReadonlyBackgroundColorHover: string;
 
 /**
- * Maps to the css variable `--syn-color-primary-500`
+ * Maps to the css variable `--syn-input-required-content`
  */
-export const SynColorPrimary500: string;
+export const SynInputRequiredContent: string;
 
 /**
- * Maps to the css variable `--syn-color-primary-600`
+ * Maps to the css variable `--syn-input-required-content-color`
  */
-export const SynColorPrimary600: string;
+export const SynInputRequiredContentColor: string;
 
 /**
- * Maps to the css variable `--syn-color-primary-700`
+ * Maps to the css variable `--syn-input-required-content-offset`
  */
-export const SynColorPrimary700: string;
+export const SynInputRequiredContentOffset: string;
 
 /**
- * Maps to the css variable `--syn-color-primary-800`
+ * Maps to the css variable `--syn-input-spacing-large`
  */
-export const SynColorPrimary800: string;
+export const SynInputSpacingLarge: string;
 
 /**
- * Maps to the css variable `--syn-color-primary-900`
+ * Maps to the css variable `--syn-input-spacing-medium`
  */
-export const SynColorPrimary900: string;
+export const SynInputSpacingMedium: string;
 
 /**
- * Maps to the css variable `--syn-color-primary-950`
+ * Maps to the css variable `--syn-input-spacing-small`
  */
-export const SynColorPrimary950: string;
+export const SynInputSpacingSmall: string;
 
 /**
- * Maps to the css variable `--syn-color-success-50`
+ * Maps to the css variable `--syn-input-width`
  */
-export const SynColorSuccess50: string;
+export const SynInputWidth: string;
 
 /**
- * Maps to the css variable `--syn-color-success-100`
+ * Maps to the css variable `--syn-letter-spacing-dense`
  */
-export const SynColorSuccess100: string;
+export const SynLetterSpacingDense: string;
 
 /**
- * Maps to the css variable `--syn-color-success-200`
+ * Maps to the css variable `--syn-letter-spacing-denser`
  */
-export const SynColorSuccess200: string;
+export const SynLetterSpacingDenser: string;
 
 /**
- * Maps to the css variable `--syn-color-success-300`
+ * Maps to the css variable `--syn-letter-spacing-loose`
  */
-export const SynColorSuccess300: string;
+export const SynLetterSpacingLoose: string;
 
 /**
- * Maps to the css variable `--syn-color-success-400`
+ * Maps to the css variable `--syn-letter-spacing-looser`
  */
-export const SynColorSuccess400: string;
+export const SynLetterSpacingLooser: string;
 
 /**
- * Maps to the css variable `--syn-color-success-500`
+ * Maps to the css variable `--syn-letter-spacing-normal`
  */
-export const SynColorSuccess500: string;
+export const SynLetterSpacingNormal: string;
 
 /**
- * Maps to the css variable `--syn-color-success-600`
+ * Maps to the css variable `--syn-line-height-dense`
  */
-export const SynColorSuccess600: string;
+export const SynLineHeightDense: string;
 
 /**
- * Maps to the css variable `--syn-color-success-700`
+ * Maps to the css variable `--syn-line-height-denser`
  */
-export const SynColorSuccess700: string;
+export const SynLineHeightDenser: string;
 
 /**
- * Maps to the css variable `--syn-color-success-800`
+ * Maps to the css variable `--syn-line-height-loose`
  */
-export const SynColorSuccess800: string;
+export const SynLineHeightLoose: string;
 
 /**
- * Maps to the css variable `--syn-color-success-900`
+ * Maps to the css variable `--syn-line-height-looser`
  */
-export const SynColorSuccess900: string;
+export const SynLineHeightLooser: string;
 
 /**
- * Maps to the css variable `--syn-color-success-950`
+ * Maps to the css variable `--syn-line-height-normal`
  */
-export const SynColorSuccess950: string;
+export const SynLineHeightNormal: string;
 
 /**
- * Maps to the css variable `--syn-color-warning-50`
+ * Maps to the css variable `--syn-link-color`
  */
-export const SynColorWarning50: string;
+export const SynLinkColor: string;
 
 /**
- * Maps to the css variable `--syn-color-warning-100`
+ * Maps to the css variable `--syn-link-color-active`
  */
-export const SynColorWarning100: string;
+export const SynLinkColorActive: string;
 
 /**
- * Maps to the css variable `--syn-color-warning-200`
+ * Maps to the css variable `--syn-link-color-hover`
  */
-export const SynColorWarning200: string;
+export const SynLinkColorHover: string;
 
 /**
- * Maps to the css variable `--syn-color-warning-300`
+ * Maps to the css variable `--syn-link-quiet-color`
  */
-export const SynColorWarning300: string;
+export const SynLinkQuietColor: string;
 
 /**
- * Maps to the css variable `--syn-color-warning-400`
+ * Maps to the css variable `--syn-link-quiet-color-active`
  */
-export const SynColorWarning400: string;
+export const SynLinkQuietColorActive: string;
 
 /**
- * Maps to the css variable `--syn-color-warning-500`
+ * Maps to the css variable `--syn-link-quiet-color-hover`
  */
-export const SynColorWarning500: string;
+export const SynLinkQuietColorHover: string;
 
 /**
- * Maps to the css variable `--syn-color-warning-600`
+ * Maps to the css variable `--syn-opacity-50`
  */
-export const SynColorWarning600: string;
+export const SynOpacity50: string;
 
 /**
- * Maps to the css variable `--syn-color-warning-700`
+ * Maps to the css variable `--syn-overlay-background-color`
  */
-export const SynColorWarning700: string;
+export const SynOverlayBackgroundColor: string;
 
 /**
- * Maps to the css variable `--syn-color-warning-800`
+ * Maps to the css variable `--syn-panel-background-color`
  */
-export const SynColorWarning800: string;
+export const SynPanelBackgroundColor: string;
 
 /**
- * Maps to the css variable `--syn-color-warning-900`
+ * Maps to the css variable `--syn-panel-border-color`
  */
-export const SynColorWarning900: string;
+export const SynPanelBorderColor: string;
 
 /**
- * Maps to the css variable `--syn-color-warning-950`
+ * Maps to the css variable `--syn-panel-border-width`
  */
-export const SynColorWarning950: string;
+export const SynPanelBorderWidth: string;
 
 /**
- * Maps to the css variable `--syn-color-error-50`
+ * Maps to the css variable `--syn-spacing-2x-large`
  */
-export const SynColorError50: string;
+export const SynSpacing2xLarge: string;
 
 /**
- * Maps to the css variable `--syn-color-error-100`
+ * Maps to the css variable `--syn-spacing-2x-small`
  */
-export const SynColorError100: string;
+export const SynSpacing2xSmall: string;
 
 /**
- * Maps to the css variable `--syn-color-error-200`
+ * Maps to the css variable `--syn-spacing-3x-large`
  */
-export const SynColorError200: string;
+export const SynSpacing3xLarge: string;
 
 /**
- * Maps to the css variable `--syn-color-error-300`
+ * Maps to the css variable `--syn-spacing-3x-small`
  */
-export const SynColorError300: string;
+export const SynSpacing3xSmall: string;
 
 /**
- * Maps to the css variable `--syn-color-error-400`
+ * Maps to the css variable `--syn-spacing-4x-large`
  */
-export const SynColorError400: string;
+export const SynSpacing4xLarge: string;
 
 /**
- * Maps to the css variable `--syn-color-error-500`
+ * Maps to the css variable `--syn-spacing-4x-small`
  */
-export const SynColorError500: string;
+export const SynSpacing4xSmall: string;
 
 /**
- * Maps to the css variable `--syn-color-error-600`
+ * Maps to the css variable `--syn-spacing-5x-large`
  */
-export const SynColorError600: string;
+export const SynSpacing5xLarge: string;
 
 /**
- * Maps to the css variable `--syn-color-error-700`
+ * Maps to the css variable `--syn-spacing-large`
  */
-export const SynColorError700: string;
+export const SynSpacingLarge: string;
 
 /**
- * Maps to the css variable `--syn-color-error-800`
+ * Maps to the css variable `--syn-spacing-medium`
  */
-export const SynColorError800: string;
+export const SynSpacingMedium: string;
 
 /**
- * Maps to the css variable `--syn-color-error-900`
+ * Maps to the css variable `--syn-spacing-medium-large`
  */
-export const SynColorError900: string;
+export const SynSpacingMediumLarge: string;
 
 /**
- * Maps to the css variable `--syn-color-error-950`
+ * Maps to the css variable `--syn-spacing-small`
  */
-export const SynColorError950: string;
+export const SynSpacingSmall: string;
 
 /**
- * Maps to the css variable `--syn-color-accent-50`
+ * Maps to the css variable `--syn-spacing-x-large`
  */
-export const SynColorAccent50: string;
+export const SynSpacingXLarge: string;
 
 /**
- * Maps to the css variable `--syn-color-accent-100`
+ * Maps to the css variable `--syn-spacing-x-small`
  */
-export const SynColorAccent100: string;
+export const SynSpacingXSmall: string;
 
 /**
- * Maps to the css variable `--syn-color-accent-200`
+ * Maps to the css variable `--syn-text-decoration-default`
  */
-export const SynColorAccent200: string;
+export const SynTextDecorationDefault: string;
 
 /**
- * Maps to the css variable `--syn-color-accent-300`
+ * Maps to the css variable `--syn-text-decoration-underline`
  */
-export const SynColorAccent300: string;
+export const SynTextDecorationUnderline: string;
 
 /**
- * Maps to the css variable `--syn-color-accent-400`
+ * Maps to the css variable `--syn-toggle-size-large`
  */
-export const SynColorAccent400: string;
+export const SynToggleSizeLarge: string;
 
 /**
- * Maps to the css variable `--syn-color-accent-500`
+ * Maps to the css variable `--syn-toggle-size-medium`
  */
-export const SynColorAccent500: string;
+export const SynToggleSizeMedium: string;
 
 /**
- * Maps to the css variable `--syn-color-accent-600`
+ * Maps to the css variable `--syn-toggle-size-small`
  */
-export const SynColorAccent600: string;
+export const SynToggleSizeSmall: string;
 
 /**
- * Maps to the css variable `--syn-color-accent-700`
+ * Maps to the css variable `--syn-tooltip-arrow-size`
  */
-export const SynColorAccent700: string;
+export const SynTooltipArrowSize: string;
 
 /**
- * Maps to the css variable `--syn-color-accent-800`
+ * Maps to the css variable `--syn-tooltip-background-color`
  */
-export const SynColorAccent800: string;
+export const SynTooltipBackgroundColor: string;
 
 /**
- * Maps to the css variable `--syn-color-accent-900`
+ * Maps to the css variable `--syn-tooltip-border-radius`
  */
-export const SynColorAccent900: string;
+export const SynTooltipBorderRadius: string;
 
 /**
- * Maps to the css variable `--syn-color-accent-950`
+ * Maps to the css variable `--syn-tooltip-color`
  */
-export const SynColorAccent950: string;
+export const SynTooltipColor: string;
 
 /**
- * Maps to the css variable `--syn-color-neutral-0`
+ * Maps to the css variable `--syn-tooltip-font-family`
  */
-export const SynColorNeutral0: string;
+export const SynTooltipFontFamily: string;
 
 /**
- * Maps to the css variable `--syn-color-neutral-50`
+ * Maps to the css variable `--syn-tooltip-font-size`
  */
-export const SynColorNeutral50: string;
+export const SynTooltipFontSize: string;
 
 /**
- * Maps to the css variable `--syn-color-neutral-100`
+ * Maps to the css variable `--syn-tooltip-font-weight`
  */
-export const SynColorNeutral100: string;
+export const SynTooltipFontWeight: string;
 
 /**
- * Maps to the css variable `--syn-color-neutral-200`
+ * Maps to the css variable `--syn-tooltip-line-height`
  */
-export const SynColorNeutral200: string;
+export const SynTooltipLineHeight: string;
 
 /**
- * Maps to the css variable `--syn-color-neutral-300`
+ * Maps to the css variable `--syn-tooltip-padding`
  */
-export const SynColorNeutral300: string;
+export const SynTooltipPadding: string;
 
 /**
- * Maps to the css variable `--syn-color-neutral-400`
+ * Maps to the css variable `--syn-transition-fast`
  */
-export const SynColorNeutral400: string;
+export const SynTransitionFast: string;
 
 /**
- * Maps to the css variable `--syn-color-neutral-500`
+ * Maps to the css variable `--syn-transition-medium`
  */
-export const SynColorNeutral500: string;
+export const SynTransitionMedium: string;
 
 /**
- * Maps to the css variable `--syn-color-neutral-600`
+ * Maps to the css variable `--syn-transition-slow`
  */
-export const SynColorNeutral600: string;
+export const SynTransitionSlow: string;
 
 /**
- * Maps to the css variable `--syn-color-neutral-700`
+ * Maps to the css variable `--syn-transition-x-fast`
  */
-export const SynColorNeutral700: string;
+export const SynTransitionXFast: string;
 
 /**
- * Maps to the css variable `--syn-color-neutral-800`
+ * Maps to the css variable `--syn-transition-x-slow`
  */
-export const SynColorNeutral800: string;
+export const SynTransitionXSlow: string;
 
 /**
- * Maps to the css variable `--syn-color-neutral-900`
+ * Maps to the css variable `--syn-typography-color-text`
  */
-export const SynColorNeutral900: string;
+export const SynTypographyColorText: string;
 
 /**
- * Maps to the css variable `--syn-color-neutral-950`
+ * Maps to the css variable `--syn-typography-color-text-inverted`
  */
-export const SynColorNeutral950: string;
+export const SynTypographyColorTextInverted: string;
 
 /**
- * Maps to the css variable `--syn-color-neutral-1000`
+ * Maps to the css variable `--syn-z-index-dialog`
  */
-export const SynColorNeutral1000: string;
+export const SynZIndexDialog: string;
 
 /**
- * Maps to the css variable `--syn-border-radius-large`
+ * Maps to the css variable `--syn-z-index-drawer`
  */
-export const SynBorderRadiusLarge: string;
+export const SynZIndexDrawer: string;
 
 /**
- * Maps to the css variable `--syn-border-radius-x-large`
+ * Maps to the css variable `--syn-z-index-dropdown`
  */
-export const SynBorderRadiusXLarge: string;
+export const SynZIndexDropdown: string;
 
 /**
- * Maps to the css variable `--syn-shadow-x-small`
+ * Maps to the css variable `--syn-z-index-toast`
  */
-export const SynShadowXSmall: string;
+export const SynZIndexToast: string;
 
 /**
- * Maps to the css variable `--syn-shadow-small`
+ * Maps to the css variable `--syn-z-index-tooltip`
  */
-export const SynShadowSmall: string;
+export const SynZIndexTooltip: string;
 
 /**
- * Maps to the css variable `--syn-transition-x-slow`
+ * Maps to the css variable `--syn-shadow-medium`
  */
-export const SynTransitionXSlow: string;
+export const SynShadowMedium: string;
 
 /**
- * Maps to the css variable `--syn-transition-slow`
+ * Maps to the css variable `--syn-shadow-large`
  */
-export const SynTransitionSlow: string;
+export const SynShadowLarge: string;
 
 /**
- * Maps to the css variable `--syn-transition-medium`
+ * Maps to the css variable `--syn-shadow-x-large`
  */
-export const SynTransitionMedium: string;
+export const SynShadowXLarge: string;
 
 /**
- * Maps to the css variable `--syn-transition-fast`
+ * Maps to the css variable `--syn-shadow-overflow-down`
  */
-export const SynTransitionFast: string;
+export const SynShadowOverflowDown: string;
 
 /**
- * Maps to the css variable `--syn-transition-x-fast`
+ * Maps to the css variable `--syn-shadow-overflow-up`
  */
-export const SynTransitionXFast: string;
+export const SynShadowOverflowUp: string;
 
 /**
- * Maps to the css variable `--syn-font-serif`
+ * Maps to the css variable `--syn-shadow-overflow-left`
  */
-export const SynFontSerif: string;
+export const SynShadowOverflowLeft: string;
 
 /**
- * Maps to the css variable `--syn-font-size-2x-small`
+ * Maps to the css variable `--syn-shadow-overflow-right`
  */
-export const SynFontSize2xSmall: string;
+export const SynShadowOverflowRight: string;
 
 /**
- * Maps to the css variable `--syn-font-size-4x-large`
+ * Maps to the css variable `--syn-shadow-x-small`
  */
-export const SynFontSize4xLarge: string;
+export const SynShadowXSmall: string;
 
 /**
- * Maps to the css variable `--syn-font-weight-light`
+ * Maps to the css variable `--syn-shadow-small`
  */
-export const SynFontWeightLight: string;
+export const SynShadowSmall: string;
 
 /**
- * Maps to the css variable `--syn-letter-spacing-denser`
+ * Maps to the css variable `--syn-body-x-small-regular`
  */
-export const SynLetterSpacingDenser: string;
+export const SynBodyXSmallRegular: string;
 
 /**
- * Maps to the css variable `--syn-letter-spacing-dense`
+ * Maps to the css variable `--syn-body-x-small-semibold`
  */
-export const SynLetterSpacingDense: string;
+export const SynBodyXSmallSemibold: string;
 
 /**
- * Maps to the css variable `--syn-letter-spacing-normal`
+ * Maps to the css variable `--syn-body-x-small-bold`
  */
-export const SynLetterSpacingNormal: string;
+export const SynBodyXSmallBold: string;
 
 /**
- * Maps to the css variable `--syn-letter-spacing-loose`
+ * Maps to the css variable `--syn-body-small-regular`
  */
-export const SynLetterSpacingLoose: string;
+export const SynBodySmallRegular: string;
 
 /**
- * Maps to the css variable `--syn-letter-spacing-looser`
+ * Maps to the css variable `--syn-body-small-semibold`
  */
-export const SynLetterSpacingLooser: string;
+export const SynBodySmallSemibold: string;
 
 /**
- * Maps to the css variable `--syn-focus-ring-style`
+ * Maps to the css variable `--syn-body-small-bold`
  */
-export const SynFocusRingStyle: string;
+export const SynBodySmallBold: string;
 
 /**
- * Maps to the css variable `--syn-focus-ring`
+ * Maps to the css variable `--syn-body-medium-regular`
  */
-export const SynFocusRing: string;
+export const SynBodyMediumRegular: string;
 
 /**
- * Maps to the css variable `--syn-input-border-color-disabled`
+ * Maps to the css variable `--syn-body-medium-semibold`
  */
-export const SynInputBorderColorDisabled: string;
+export const SynBodyMediumSemibold: string;
 
 /**
- * Maps to the css variable `--syn-input-border-width`
+ * Maps to the css variable `--syn-body-medium-bold`
  */
-export const SynInputBorderWidth: string;
+export const SynBodyMediumBold: string;
 
 /**
- * Maps to the css variable `--syn-input-font-family`
+ * Maps to the css variable `--syn-body-large-regular`
  */
-export const SynInputFontFamily: string;
+export const SynBodyLargeRegular: string;
 
 /**
- * Maps to the css variable `--syn-input-font-weight`
+ * Maps to the css variable `--syn-body-large-semibold`
  */
-export const SynInputFontWeight: string;
+export const SynBodyLargeSemibold: string;
 
 /**
- * Maps to the css variable `--syn-input-letter-spacing`
+ * Maps to the css variable `--syn-body-large-bold`
  */
-export const SynInputLetterSpacing: string;
+export const SynBodyLargeBold: string;
 
 /**
- * Maps to the css variable `--syn-z-index-drawer`
+ * Maps to the css variable `--syn-heading-large`
  */
-export const SynZIndexDrawer: string;
+export const SynHeadingLarge: string;
 
 /**
- * Maps to the css variable `--syn-z-index-dialog`
+ * Maps to the css variable `--syn-heading-x-large`
  */
-export const SynZIndexDialog: string;
+export const SynHeadingXLarge: string;
 
 /**
- * Maps to the css variable `--syn-z-index-dropdown`
+ * Maps to the css variable `--syn-heading-2x-large`
  */
-export const SynZIndexDropdown: string;
+export const SynHeading2xLarge: string;
 
 /**
- * Maps to the css variable `--syn-z-index-toast`
+ * Maps to the css variable `--syn-heading-3x-large`
  */
-export const SynZIndexToast: string;
+export const SynHeading3xLarge: string;
 
 /**
- * Maps to the css variable `--syn-z-index-tooltip`
+ * Maps to the css variable `--syn-focus-ring`
  */
-export const SynZIndexTooltip: string;
+export const SynFocusRing: string;