@synergy-design-system/metadata 1.0.0 → 3.0.0

package/data/layers/full/tokens/scss/_tokens.scss

@@ -0,0 +1,448 @@
+/**
+ * @synergy-design-system/tokens version 3.12.0
+ * SICK Global UX Foundation
+ */
+$SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;
+$SynAlertErrorColorBorder: var(--syn-alert-error-color-border) !default;
+$SynAlertErrorColorIcon: var(--syn-alert-error-color-icon) !default;
+$SynAlertErrorColorIndicator: var(--syn-alert-error-color-indicator) !default;
+$SynAlertInformativeColorBackground: var(--syn-alert-informative-color-background) !default;
+$SynAlertInformativeColorBorder: var(--syn-alert-informative-color-border) !default;
+$SynAlertInformativeColorIcon: var(--syn-alert-informative-color-icon) !default;
+$SynAlertInformativeColorIndicator: var(--syn-alert-informative-color-indicator) !default;
+$SynAlertNeutralColorBackground: var(--syn-alert-neutral-color-background) !default;
+$SynAlertNeutralColorBorder: var(--syn-alert-neutral-color-border) !default;
+$SynAlertNeutralColorIcon: var(--syn-alert-neutral-color-icon) !default;
+$SynAlertNeutralColorIndicator: var(--syn-alert-neutral-color-indicator) !default;
+$SynAlertSuccessColorBackground: var(--syn-alert-success-color-background) !default;
+$SynAlertSuccessColorBorder: var(--syn-alert-success-color-border) !default;
+$SynAlertSuccessColorIcon: var(--syn-alert-success-color-icon) !default;
+$SynAlertSuccessColorIndicator: var(--syn-alert-success-color-indicator) !default;
+$SynAlertWarningColorBackground: var(--syn-alert-warning-color-background) !default;
+$SynAlertWarningColorBorder: var(--syn-alert-warning-color-border) !default;
+$SynAlertWarningColorIcon: var(--syn-alert-warning-color-icon) !default;
+$SynAlertWarningColorIndicator: var(--syn-alert-warning-color-indicator) !default;
+$SynBadgeErrorColorBackground: var(--syn-badge-error-color-background) !default;
+$SynBadgeErrorColorText: var(--syn-badge-error-color-text) !default;
+$SynBadgeInformativeColorBackground: var(--syn-badge-informative-color-background) !default;
+$SynBadgeInformativeColorText: var(--syn-badge-informative-color-text) !default;
+$SynBadgeNeutralColorBackground: var(--syn-badge-neutral-color-background) !default;
+$SynBadgeNeutralColorText: var(--syn-badge-neutral-color-text) !default;
+$SynBadgeSuccessColorBackground: var(--syn-badge-success-color-background) !default;
+$SynBadgeSuccessColorText: var(--syn-badge-success-color-text) !default;
+$SynBadgeWarningColorBackground: var(--syn-badge-warning-color-background) !default;
+$SynBadgeWarningColorText: var(--syn-badge-warning-color-text) !default;
+$SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
+$SynBorderRadiusLarge: var(--syn-border-radius-large) !default;
+$SynBorderRadiusMedium: var(--syn-border-radius-medium) !default;
+$SynBorderRadiusNone: var(--syn-border-radius-none) !default;
+$SynBorderRadiusPill: var(--syn-border-radius-pill) !default;
+$SynBorderRadiusSmall: var(--syn-border-radius-small) !default;
+$SynBorderRadiusXLarge: var(--syn-border-radius-x-large) !default;
+$SynBorderWidthLarge: var(--syn-border-width-large) !default;
+$SynBorderWidthMedium: var(--syn-border-width-medium) !default;
+$SynBorderWidthNone: var(--syn-border-width-none) !default;
+$SynBorderWidthSmall: var(--syn-border-width-small) !default;
+$SynBorderWidthXLarge: var(--syn-border-width-x-large) !default;
+$SynBreadcrumbColor: var(--syn-breadcrumb-color) !default;
+$SynButtonBorderRadiusLarge: var(--syn-button-border-radius-large) !default;
+$SynButtonBorderRadiusMedium: var(--syn-button-border-radius-medium) !default;
+$SynButtonBorderRadiusSmall: var(--syn-button-border-radius-small) !default;
+$SynButtonColor: var(--syn-button-color) !default;
+$SynButtonColorActive: var(--syn-button-color-active) !default;
+$SynButtonColorHover: var(--syn-button-color-hover) !default;
+$SynButtonFilledColorText: var(--syn-button-filled-color-text) !default;
+$SynButtonFilledColorTextActive: var(--syn-button-filled-color-text-active) !default;
+$SynButtonFilledColorTextHover: var(--syn-button-filled-color-text-hover) !default;
+$SynButtonFontSizeLarge: var(--syn-button-font-size-large) !default;
+$SynButtonFontSizeMedium: var(--syn-button-font-size-medium) !default;
+$SynButtonFontSizeSmall: var(--syn-button-font-size-small) !default;
+$SynButtonOutlineColorActive: var(--syn-button-outline-color-active) !default;
+$SynButtonOutlineColorHover: var(--syn-button-outline-color-hover) !default;
+$SynButtonOutlineColorText: var(--syn-button-outline-color-text) !default;
+$SynButtonOutlineColorTextActive: var(--syn-button-outline-color-text-active) !default;
+$SynButtonOutlineColorTextHover: var(--syn-button-outline-color-text-hover) !default;
+$SynButtonTextColorText: var(--syn-button-text-color-text) !default;
+$SynButtonTextColorTextActive: var(--syn-button-text-color-text-active) !default;
+$SynButtonTextColorTextHover: var(--syn-button-text-color-text-hover) !default;
+$SynCheckboxBorderRadius: var(--syn-checkbox-border-radius) !default;
+$SynColorAccent50: var(--syn-color-accent-50) !default;
+$SynColorAccent100: var(--syn-color-accent-100) !default;
+$SynColorAccent200: var(--syn-color-accent-200) !default;
+$SynColorAccent300: var(--syn-color-accent-300) !default;
+$SynColorAccent400: var(--syn-color-accent-400) !default;
+$SynColorAccent500: var(--syn-color-accent-500) !default;
+$SynColorAccent600: var(--syn-color-accent-600) !default;
+$SynColorAccent700: var(--syn-color-accent-700) !default;
+$SynColorAccent800: var(--syn-color-accent-800) !default;
+$SynColorAccent900: var(--syn-color-accent-900) !default;
+$SynColorAccent950: var(--syn-color-accent-950) !default;
+$SynColorCritical50: var(--syn-color-critical-50) !default;
+$SynColorCritical100: var(--syn-color-critical-100) !default;
+$SynColorCritical200: var(--syn-color-critical-200) !default;
+$SynColorCritical300: var(--syn-color-critical-300) !default;
+$SynColorCritical400: var(--syn-color-critical-400) !default;
+$SynColorCritical500: var(--syn-color-critical-500) !default;
+$SynColorCritical600: var(--syn-color-critical-600) !default;
+$SynColorCritical700: var(--syn-color-critical-700) !default;
+$SynColorCritical800: var(--syn-color-critical-800) !default;
+$SynColorCritical900: var(--syn-color-critical-900) !default;
+$SynColorCritical950: var(--syn-color-critical-950) !default;
+$SynColorDataMagenta50: var(--syn-color-data-magenta-50) !default;
+$SynColorDataMagenta100: var(--syn-color-data-magenta-100) !default;
+$SynColorDataMagenta200: var(--syn-color-data-magenta-200) !default;
+$SynColorDataMagenta300: var(--syn-color-data-magenta-300) !default;
+$SynColorDataMagenta400: var(--syn-color-data-magenta-400) !default;
+$SynColorDataMagenta500: var(--syn-color-data-magenta-500) !default;
+$SynColorDataMagenta600: var(--syn-color-data-magenta-600) !default;
+$SynColorDataMagenta700: var(--syn-color-data-magenta-700) !default;
+$SynColorDataMagenta800: var(--syn-color-data-magenta-800) !default;
+$SynColorDataMagenta900: var(--syn-color-data-magenta-900) !default;
+$SynColorDataMagenta950: var(--syn-color-data-magenta-950) !default;
+$SynColorDataPurple50: var(--syn-color-data-purple-50) !default;
+$SynColorDataPurple100: var(--syn-color-data-purple-100) !default;
+$SynColorDataPurple200: var(--syn-color-data-purple-200) !default;
+$SynColorDataPurple300: var(--syn-color-data-purple-300) !default;
+$SynColorDataPurple400: var(--syn-color-data-purple-400) !default;
+$SynColorDataPurple500: var(--syn-color-data-purple-500) !default;
+$SynColorDataPurple600: var(--syn-color-data-purple-600) !default;
+$SynColorDataPurple700: var(--syn-color-data-purple-700) !default;
+$SynColorDataPurple800: var(--syn-color-data-purple-800) !default;
+$SynColorDataPurple900: var(--syn-color-data-purple-900) !default;
+$SynColorDataPurple950: var(--syn-color-data-purple-950) !default;
+$SynColorDataTeal50: var(--syn-color-data-teal-50) !default;
+$SynColorDataTeal100: var(--syn-color-data-teal-100) !default;
+$SynColorDataTeal200: var(--syn-color-data-teal-200) !default;
+$SynColorDataTeal300: var(--syn-color-data-teal-300) !default;
+$SynColorDataTeal400: var(--syn-color-data-teal-400) !default;
+$SynColorDataTeal500: var(--syn-color-data-teal-500) !default;
+$SynColorDataTeal600: var(--syn-color-data-teal-600) !default;
+$SynColorDataTeal700: var(--syn-color-data-teal-700) !default;
+$SynColorDataTeal800: var(--syn-color-data-teal-800) !default;
+$SynColorDataTeal900: var(--syn-color-data-teal-900) !default;
+$SynColorDataTeal950: var(--syn-color-data-teal-950) !default;
+$SynColorError50: var(--syn-color-error-50) !default;
+$SynColorError100: var(--syn-color-error-100) !default;
+$SynColorError200: var(--syn-color-error-200) !default;
+$SynColorError300: var(--syn-color-error-300) !default;
+$SynColorError400: var(--syn-color-error-400) !default;
+$SynColorError500: var(--syn-color-error-500) !default;
+$SynColorError600: var(--syn-color-error-600) !default;
+$SynColorError700: var(--syn-color-error-700) !default;
+$SynColorError800: var(--syn-color-error-800) !default;
+$SynColorError900: var(--syn-color-error-900) !default;
+$SynColorError950: var(--syn-color-error-950) !default;
+$SynColorInfo50: var(--syn-color-info-50) !default;
+$SynColorInfo100: var(--syn-color-info-100) !default;
+$SynColorInfo200: var(--syn-color-info-200) !default;
+$SynColorInfo300: var(--syn-color-info-300) !default;
+$SynColorInfo400: var(--syn-color-info-400) !default;
+$SynColorInfo500: var(--syn-color-info-500) !default;
+$SynColorInfo600: var(--syn-color-info-600) !default;
+$SynColorInfo700: var(--syn-color-info-700) !default;
+$SynColorInfo800: var(--syn-color-info-800) !default;
+$SynColorInfo900: var(--syn-color-info-900) !default;
+$SynColorInfo950: var(--syn-color-info-950) !default;
+$SynColorMuted50: var(--syn-color-muted-50) !default;
+$SynColorMuted100: var(--syn-color-muted-100) !default;
+$SynColorMuted200: var(--syn-color-muted-200) !default;
+$SynColorMuted300: var(--syn-color-muted-300) !default;
+$SynColorMuted400: var(--syn-color-muted-400) !default;
+$SynColorMuted500: var(--syn-color-muted-500) !default;
+$SynColorMuted600: var(--syn-color-muted-600) !default;
+$SynColorMuted700: var(--syn-color-muted-700) !default;
+$SynColorMuted800: var(--syn-color-muted-800) !default;
+$SynColorMuted900: var(--syn-color-muted-900) !default;
+$SynColorMuted950: var(--syn-color-muted-950) !default;
+$SynColorNeutral0: var(--syn-color-neutral-0) !default;
+$SynColorNeutral50: var(--syn-color-neutral-50) !default;
+$SynColorNeutral100: var(--syn-color-neutral-100) !default;
+$SynColorNeutral200: var(--syn-color-neutral-200) !default;
+$SynColorNeutral300: var(--syn-color-neutral-300) !default;
+$SynColorNeutral400: var(--syn-color-neutral-400) !default;
+$SynColorNeutral500: var(--syn-color-neutral-500) !default;
+$SynColorNeutral600: var(--syn-color-neutral-600) !default;
+$SynColorNeutral700: var(--syn-color-neutral-700) !default;
+$SynColorNeutral800: var(--syn-color-neutral-800) !default;
+$SynColorNeutral900: var(--syn-color-neutral-900) !default;
+$SynColorNeutral950: var(--syn-color-neutral-950) !default;
+$SynColorNeutral1000: var(--syn-color-neutral-1000) !default;
+$SynColorPrimary50: var(--syn-color-primary-50) !default;
+$SynColorPrimary100: var(--syn-color-primary-100) !default;
+$SynColorPrimary200: var(--syn-color-primary-200) !default;
+$SynColorPrimary300: var(--syn-color-primary-300) !default;
+$SynColorPrimary400: var(--syn-color-primary-400) !default;
+$SynColorPrimary500: var(--syn-color-primary-500) !default;
+$SynColorPrimary600: var(--syn-color-primary-600) !default;
+$SynColorPrimary700: var(--syn-color-primary-700) !default;
+$SynColorPrimary800: var(--syn-color-primary-800) !default;
+$SynColorPrimary900: var(--syn-color-primary-900) !default;
+$SynColorPrimary950: var(--syn-color-primary-950) !default;
+$SynColorPrimary1000: var(--syn-color-primary-1000) !default;
+$SynColorSuccess50: var(--syn-color-success-50) !default;
+$SynColorSuccess100: var(--syn-color-success-100) !default;
+$SynColorSuccess200: var(--syn-color-success-200) !default;
+$SynColorSuccess300: var(--syn-color-success-300) !default;
+$SynColorSuccess400: var(--syn-color-success-400) !default;
+$SynColorSuccess500: var(--syn-color-success-500) !default;
+$SynColorSuccess600: var(--syn-color-success-600) !default;
+$SynColorSuccess700: var(--syn-color-success-700) !default;
+$SynColorSuccess800: var(--syn-color-success-800) !default;
+$SynColorSuccess900: var(--syn-color-success-900) !default;
+$SynColorSuccess950: var(--syn-color-success-950) !default;
+$SynColorWarning50: var(--syn-color-warning-50) !default;
+$SynColorWarning100: var(--syn-color-warning-100) !default;
+$SynColorWarning200: var(--syn-color-warning-200) !default;
+$SynColorWarning300: var(--syn-color-warning-300) !default;
+$SynColorWarning400: var(--syn-color-warning-400) !default;
+$SynColorWarning500: var(--syn-color-warning-500) !default;
+$SynColorWarning600: var(--syn-color-warning-600) !default;
+$SynColorWarning700: var(--syn-color-warning-700) !default;
+$SynColorWarning800: var(--syn-color-warning-800) !default;
+$SynColorWarning900: var(--syn-color-warning-900) !default;
+$SynColorWarning950: var(--syn-color-warning-950) !default;
+$SynDetailsOpenRotation: var(--syn-details-open-rotation) !default;
+$SynDimensionBase: var(--syn-dimension-base) !default;
+$SynDurationExtraFast: var(--syn-duration-extra-fast) !default;
+$SynDurationExtraSlow: var(--syn-duration-extra-slow) !default;
+$SynDurationFast: var(--syn-duration-fast) !default;
+$SynDurationNormal: var(--syn-duration-normal) !default;
+$SynDurationSlow: var(--syn-duration-slow) !default;
+$SynFocusRingBorderRadius: var(--syn-focus-ring-border-radius) !default;
+$SynFocusRingColor: var(--syn-focus-ring-color) !default;
+$SynFocusRingOffset: var(--syn-focus-ring-offset) !default;
+$SynFocusRingStyle: var(--syn-focus-ring-style) !default;
+$SynFocusRingWidth: var(--syn-focus-ring-width) !default;
+$SynFontMono: var(--syn-font-mono) !default;
+$SynFontSans: var(--syn-font-sans) !default;
+$SynFontSansFallback: var(--syn-font-sans-fallback) !default;
+$SynFontSerif: var(--syn-font-serif) !default;
+$SynFontSize2xLarge: var(--syn-font-size-2x-large) !default;
+$SynFontSize2xSmall: var(--syn-font-size-2x-small) !default;
+$SynFontSize3xLarge: var(--syn-font-size-3x-large) !default;
+$SynFontSize4xLarge: var(--syn-font-size-4x-large) !default;
+$SynFontSizeLarge: var(--syn-font-size-large) !default;
+$SynFontSizeMedium: var(--syn-font-size-medium) !default;
+$SynFontSizeSmall: var(--syn-font-size-small) !default;
+$SynFontSizeXLarge: var(--syn-font-size-x-large) !default;
+$SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
+$SynFontWeightBold: var(--syn-font-weight-bold) !default;
+$SynFontWeightLight: var(--syn-font-weight-light) !default;
+$SynFontWeightNormal: var(--syn-font-weight-normal) !default;
+$SynFontWeightSemibold: var(--syn-font-weight-semibold) !default;
+$SynHeaderBorderColor: var(--syn-header-border-color) !default;
+$SynIconButtonFocusRingBorderRadius: var(--syn-icon-button-focus-ring-border-radius) !default;
+$SynInputBackgroundColor: var(--syn-input-background-color) !default;
+$SynInputBackgroundColorDisabled: var(--syn-input-background-color-disabled) !default;
+$SynInputBackgroundColorFocus: var(--syn-input-background-color-focus) !default;
+$SynInputBackgroundColorHover: var(--syn-input-background-color-hover) !default;
+$SynInputBorderColor: var(--syn-input-border-color) !default;
+$SynInputBorderColorActive: var(--syn-input-border-color-active) !default;
+$SynInputBorderColorDisabled: var(--syn-input-border-color-disabled) !default;
+$SynInputBorderColorFocus: var(--syn-input-border-color-focus) !default;
+$SynInputBorderColorFocusError: var(--syn-input-border-color-focus-error) !default;
+$SynInputBorderColorHover: var(--syn-input-border-color-hover) !default;
+$SynInputBorderColorOffset: var(--syn-input-border-color-offset) !default;
+$SynInputBorderRadiusLarge: var(--syn-input-border-radius-large) !default;
+$SynInputBorderRadiusMedium: var(--syn-input-border-radius-medium) !default;
+$SynInputBorderRadiusSmall: var(--syn-input-border-radius-small) !default;
+$SynInputBorderWidth: var(--syn-input-border-width) !default;
+$SynInputColor: var(--syn-input-color) !default;
+$SynInputColorDisabled: var(--syn-input-color-disabled) !default;
+$SynInputColorFocus: var(--syn-input-color-focus) !default;
+$SynInputColorHover: var(--syn-input-color-hover) !default;
+$SynInputDisabledOpacity: var(--syn-input-disabled-opacity) !default;
+$SynInputFocusRingColor: var(--syn-input-focus-ring-color) !default;
+$SynInputFocusRingError: var(--syn-input-focus-ring-error) !default;
+$SynInputFocusRingOffset: var(--syn-input-focus-ring-offset) !default;
+$SynInputFontFamily: var(--syn-input-font-family) !default;
+$SynInputFontSizeLarge: var(--syn-input-font-size-large) !default;
+$SynInputFontSizeMedium: var(--syn-input-font-size-medium) !default;
+$SynInputFontSizeSmall: var(--syn-input-font-size-small) !default;
+$SynInputFontWeight: var(--syn-input-font-weight) !default;
+$SynInputHeightLarge: var(--syn-input-height-large) !default;
+$SynInputHeightMedium: var(--syn-input-height-medium) !default;
+$SynInputHeightSmall: var(--syn-input-height-small) !default;
+$SynInputHelpTextColor: var(--syn-input-help-text-color) !default;
+$SynInputHelpTextColorError: var(--syn-input-help-text-color-error) !default;
+$SynInputHelpTextFontSizeLarge: var(--syn-input-help-text-font-size-large) !default;
+$SynInputHelpTextFontSizeMedium: var(--syn-input-help-text-font-size-medium) !default;
+$SynInputHelpTextFontSizeSmall: var(--syn-input-help-text-font-size-small) !default;
+$SynInputIconColor: var(--syn-input-icon-color) !default;
+$SynInputIconColorHover: var(--syn-input-icon-color-hover) !default;
+$SynInputIconIconClearableColor: var(--syn-input-icon-icon-clearable-color) !default;
+$SynInputIconIconClearableColorActive: var(--syn-input-icon-icon-clearable-color-active) !default;
+$SynInputIconIconClearableColorHover: var(--syn-input-icon-icon-clearable-color-hover) !default;
+$SynInputLabelColor: var(--syn-input-label-color) !default;
+$SynInputLabelFontSizeLarge: var(--syn-input-label-font-size-large) !default;
+$SynInputLabelFontSizeMedium: var(--syn-input-label-font-size-medium) !default;
+$SynInputLabelFontSizeSmall: var(--syn-input-label-font-size-small) !default;
+$SynInputLetterSpacing: var(--syn-input-letter-spacing) !default;
+$SynInputPlaceholderColor: var(--syn-input-placeholder-color) !default;
+$SynInputPlaceholderColorDisabled: var(--syn-input-placeholder-color-disabled) !default;
+$SynInputReadonlyColorHover: var(--syn-input-readonly-color-hover) !default;
+$SynInputReadonlyBackgroundColor: var(--syn-input-readonly-background-color) !default;
+$SynInputReadonlyBackgroundColorDisabled: var(--syn-input-readonly-background-color-disabled) !default;
+$SynInputReadonlyBackgroundColorFocus: var(--syn-input-readonly-background-color-focus) !default;
+$SynInputReadonlyBackgroundColorHover: var(--syn-input-readonly-background-color-hover) !default;
+$SynInputRequiredContent: var(--syn-input-required-content) !default;
+$SynInputRequiredContentColor: var(--syn-input-required-content-color) !default;
+$SynInputRequiredContentOffset: var(--syn-input-required-content-offset) !default;
+$SynInputSpacingLarge: var(--syn-input-spacing-large) !default;
+$SynInputSpacingMedium: var(--syn-input-spacing-medium) !default;
+$SynInputSpacingSmall: var(--syn-input-spacing-small) !default;
+$SynInputWidth: var(--syn-input-width) !default;
+$SynInteractiveBackgroundColorActive: var(--syn-interactive-background-color-active) !default;
+$SynInteractiveBackgroundColorHover: var(--syn-interactive-background-color-hover) !default;
+$SynInteractiveEmphasisColor: var(--syn-interactive-emphasis-color) !default;
+$SynInteractiveEmphasisColorActive: var(--syn-interactive-emphasis-color-active) !default;
+$SynInteractiveEmphasisColorHover: var(--syn-interactive-emphasis-color-hover) !default;
+$SynInteractiveQuietColor: var(--syn-interactive-quiet-color) !default;
+$SynInteractiveQuietColorActive: var(--syn-interactive-quiet-color-active) !default;
+$SynInteractiveQuietColorHover: var(--syn-interactive-quiet-color-hover) !default;
+$SynLetterSpacingDense: var(--syn-letter-spacing-dense) !default;
+$SynLetterSpacingDenser: var(--syn-letter-spacing-denser) !default;
+$SynLetterSpacingLoose: var(--syn-letter-spacing-loose) !default;
+$SynLetterSpacingLooser: var(--syn-letter-spacing-looser) !default;
+$SynLetterSpacingNormal: var(--syn-letter-spacing-normal) !default;
+$SynLineHeightDense: var(--syn-line-height-dense) !default;
+$SynLineHeightDenser: var(--syn-line-height-denser) !default;
+$SynLineHeightLoose: var(--syn-line-height-loose) !default;
+$SynLineHeightLooser: var(--syn-line-height-looser) !default;
+$SynLineHeightNormal: var(--syn-line-height-normal) !default;
+$SynLinkColor: var(--syn-link-color) !default;
+$SynLinkColorActive: var(--syn-link-color-active) !default;
+$SynLinkColorHover: var(--syn-link-color-hover) !default;
+$SynLinkQuietColor: var(--syn-link-quiet-color) !default;
+$SynLinkQuietColorActive: var(--syn-link-quiet-color-active) !default;
+$SynLinkQuietColorHover: var(--syn-link-quiet-color-hover) !default;
+$SynLinkUnderlineOutline: var(--syn-link-underline-outline) !default;
+$SynLogoColor: var(--syn-logo-color) !default;
+$SynNamurColorBorder: var(--syn-namur-color-border) !default;
+$SynNamurCriticalColor: var(--syn-namur-critical-color) !default;
+$SynNamurCriticalColorBackground: var(--syn-namur-critical-color-background) !default;
+$SynNamurErrorColor: var(--syn-namur-error-color) !default;
+$SynNamurErrorColorBackground: var(--syn-namur-error-color-background) !default;
+$SynNamurIconColor: var(--syn-namur-icon-color) !default;
+$SynNamurInfoColor: var(--syn-namur-info-color) !default;
+$SynNamurInfoColorBackground: var(--syn-namur-info-color-background) !default;
+$SynNamurNeutralColor: var(--syn-namur-neutral-color) !default;
+$SynNamurNeutralColorBackground: var(--syn-namur-neutral-color-background) !default;
+$SynNamurSuccessColor: var(--syn-namur-success-color) !default;
+$SynNamurSuccessColorBackground: var(--syn-namur-success-color-background) !default;
+$SynNamurWarningColor: var(--syn-namur-warning-color) !default;
+$SynNamurWarningColorBackground: var(--syn-namur-warning-color-background) !default;
+$SynOpacity50: var(--syn-opacity-50) !default;
+$SynOptionBackgroundColorActive: var(--syn-option-background-color-active) !default;
+$SynOptionBackgroundColorHover: var(--syn-option-background-color-hover) !default;
+$SynOptionCheckColor: var(--syn-option-check-color) !default;
+$SynOptionCheckColorActive: var(--syn-option-check-color-active) !default;
+$SynOptionCheckColorHover: var(--syn-option-check-color-hover) !default;
+$SynOptionColor: var(--syn-option-color) !default;
+$SynOptionColorActive: var(--syn-option-color-active) !default;
+$SynOptionColorHover: var(--syn-option-color-hover) !default;
+$SynOptionIconColor: var(--syn-option-icon-color) !default;
+$SynOptionIconColorActive: var(--syn-option-icon-color-active) !default;
+$SynOptionIconColorHover: var(--syn-option-icon-color-hover) !default;
+$SynOverlayBackgroundBlur: var(--syn-overlay-background-blur) !default;
+$SynOverlayBackgroundColor: var(--syn-overlay-background-color) !default;
+$SynPageBackground: var(--syn-page-background) !default;
+$SynPageBackgroundColor: var(--syn-page-background-color) !default;
+$SynPageBackgroundColorMuted: var(--syn-page-background-color-muted) !default;
+$SynPanelBackgroundColor: var(--syn-panel-background-color) !default;
+$SynPanelBorderColor: var(--syn-panel-border-color) !default;
+$SynPanelBorderRadius: var(--syn-panel-border-radius) !default;
+$SynPanelBorderWidth: var(--syn-panel-border-width) !default;
+$SynProgressIndicatorColor: var(--syn-progress-indicator-color) !default;
+$SynProgressTrackColor: var(--syn-progress-track-color) !default;
+$SynRangeColorInactive: var(--syn-range-color-inactive) !default;
+$SynRangeErrorColor: var(--syn-range-error-color) !default;
+$SynRangeTickColor: var(--syn-range-tick-color) !default;
+$SynRangeTrackColorActive: var(--syn-range-track-color-active) !default;
+$SynReadonlyBackgroundColor: var(--syn-readonly-background-color) !default;
+$SynReadonlyBorderColor: var(--syn-readonly-border-color) !default;
+$SynReadonlyColorText: var(--syn-readonly-color-text) !default;
+$SynReadonlyIconColor: var(--syn-readonly-icon-color) !default;
+$SynReadonlyIconColorClearable: var(--syn-readonly-icon-color-clearable) !default;
+$SynReadonlyIconColorExpand: var(--syn-readonly-icon-color-expand) !default;
+$SynReadonlyIndicatorColor: var(--syn-readonly-indicator-color) !default;
+$SynShadowMedium: var(--syn-shadow-medium) !default;
+$SynShadowLarge: var(--syn-shadow-large) !default;
+$SynShadowXLarge: var(--syn-shadow-x-large) !default;
+$SynShadowOverflowDown: var(--syn-shadow-overflow-down) !default;
+$SynShadowOverflowUp: var(--syn-shadow-overflow-up) !default;
+$SynShadowOverflowLeft: var(--syn-shadow-overflow-left) !default;
+$SynShadowOverflowRight: var(--syn-shadow-overflow-right) !default;
+$SynShadowXSmall: var(--syn-shadow-x-small) !default;
+$SynShadowSmall: var(--syn-shadow-small) !default;
+$SynShadowStickyDown: var(--syn-shadow-sticky-down) !default;
+$SynSpacing15xLarge: var(--syn-spacing-1-5x-large) !default;
+$SynSpacing2xLarge: var(--syn-spacing-2x-large) !default;
+$SynSpacing2xSmall: var(--syn-spacing-2x-small) !default;
+$SynSpacing3xLarge: var(--syn-spacing-3x-large) !default;
+$SynSpacing3xSmall: var(--syn-spacing-3x-small) !default;
+$SynSpacing4xLarge: var(--syn-spacing-4x-large) !default;
+$SynSpacing4xSmall: var(--syn-spacing-4x-small) !default;
+$SynSpacing5xLarge: var(--syn-spacing-5x-large) !default;
+$SynSpacingLarge: var(--syn-spacing-large) !default;
+$SynSpacingMedium: var(--syn-spacing-medium) !default;
+$SynSpacingMediumLarge: var(--syn-spacing-medium-large) !default;
+$SynSpacingSmall: var(--syn-spacing-small) !default;
+$SynSpacingXLarge: var(--syn-spacing-x-large) !default;
+$SynSpacingXSmall: var(--syn-spacing-x-small) !default;
+$SynSpinnerOpacity: var(--syn-spinner-opacity) !default;
+$SynSwitchHeightLarge: var(--syn-switch-height-large) !default;
+$SynSwitchHeightMedium: var(--syn-switch-height-medium) !default;
+$SynSwitchHeightSmall: var(--syn-switch-height-small) !default;
+$SynSwitchWidthLarge: var(--syn-switch-width-large) !default;
+$SynSwitchWidthMedium: var(--syn-switch-width-medium) !default;
+$SynSwitchWidthSmall: var(--syn-switch-width-small) !default;
+$SynTableBackgroundColor: var(--syn-table-background-color) !default;
+$SynTableBackgroundColorAlternating: var(--syn-table-background-color-alternating) !default;
+$SynTableBackgroundColorHeader: var(--syn-table-background-color-header) !default;
+$SynTableBorderColor: var(--syn-table-border-color) !default;
+$SynTableShadowEnd: var(--syn-table-shadow-end) !default;
+$SynTableShadowStart: var(--syn-table-shadow-start) !default;
+$SynTextDecorationDefault: var(--syn-text-decoration-default) !default;
+$SynTextDecorationUnderline: var(--syn-text-decoration-underline) !default;
+$SynToggleSizeLarge: var(--syn-toggle-size-large) !default;
+$SynToggleSizeMedium: var(--syn-toggle-size-medium) !default;
+$SynToggleSizeSmall: var(--syn-toggle-size-small) !default;
+$SynTooltipArrowSize: var(--syn-tooltip-arrow-size) !default;
+$SynTooltipBackgroundColor: var(--syn-tooltip-background-color) !default;
+$SynTooltipBorderRadius: var(--syn-tooltip-border-radius) !default;
+$SynTooltipColor: var(--syn-tooltip-color) !default;
+$SynTooltipFontFamily: var(--syn-tooltip-font-family) !default;
+$SynTooltipFontSize: var(--syn-tooltip-font-size) !default;
+$SynTooltipFontWeight: var(--syn-tooltip-font-weight) !default;
+$SynTooltipLineHeight: var(--syn-tooltip-line-height) !default;
+$SynTooltipPadding: var(--syn-tooltip-padding) !default;
+$SynTransitionFast: var(--syn-transition-fast) !default;
+$SynTransitionMedium: var(--syn-transition-medium) !default;
+$SynTransitionSlow: var(--syn-transition-slow) !default;
+$SynTransitionXFast: var(--syn-transition-x-fast) !default;
+$SynTransitionXSlow: var(--syn-transition-x-slow) !default;
+$SynTypographyColorText: var(--syn-typography-color-text) !default;
+$SynTypographyColorTextInverted: var(--syn-typography-color-text-inverted) !default;
+$SynZIndexDialog: var(--syn-z-index-dialog) !default;
+$SynZIndexDrawer: var(--syn-z-index-drawer) !default;
+$SynZIndexDropdown: var(--syn-z-index-dropdown) !default;
+$SynZIndexToast: var(--syn-z-index-toast) !default;
+$SynZIndexTooltip: var(--syn-z-index-tooltip) !default;
+$SynBodyXSmallRegular: var(--syn-body-x-small-regular) !default;
+$SynBodyXSmallSemibold: var(--syn-body-x-small-semibold) !default;
+$SynBodyXSmallBold: var(--syn-body-x-small-bold) !default;
+$SynBodySmallRegular: var(--syn-body-small-regular) !default;
+$SynBodySmallSemibold: var(--syn-body-small-semibold) !default;
+$SynBodySmallBold: var(--syn-body-small-bold) !default;
+$SynBodyMediumRegular: var(--syn-body-medium-regular) !default;
+$SynBodyMediumSemibold: var(--syn-body-medium-semibold) !default;
+$SynBodyMediumBold: var(--syn-body-medium-bold) !default;
+$SynBodyLargeRegular: var(--syn-body-large-regular) !default;
+$SynBodyLargeSemibold: var(--syn-body-large-semibold) !default;
+$SynBodyLargeBold: var(--syn-body-large-bold) !default;
+$SynHeadingLarge: var(--syn-heading-large) !default;
+$SynHeadingXLarge: var(--syn-heading-x-large) !default;
+$SynHeading2xLarge: var(--syn-heading-2x-large) !default;
+$SynHeading3xLarge: var(--syn-heading-3x-large) !default;
+$SynFocusRing: var(--syn-focus-ring) !default;