@synergy-design-system/tokens/dist/js/index.js

Design tokens for Synergy, the SICK Design System

/**
 * @synergy-design-system/tokens version 2.20.0
 * SICK Global UX Foundation
 */

/**
 * @type {string}
 */
export const SynFontSizeXSmall = 'var(--syn-font-size-x-small)';

/**
 * @type {string}
 */
export const SynFontSizeSmall = 'var(--syn-font-size-small)';

/**
 * @type {string}
 */
export const SynFontSizeMedium = 'var(--syn-font-size-medium)';

/**
 * @type {string}
 */
export const SynFontSizeLarge = 'var(--syn-font-size-large)';

/**
 * @type {string}
 */
export const SynFontSizeXLarge = 'var(--syn-font-size-x-large)';

/**
 * @type {string}
 */
export const SynFontSize2xLarge = 'var(--syn-font-size-2x-large)';

/**
 * @type {string}
 */
export const SynFontSize3xLarge = 'var(--syn-font-size-3x-large)';

/**
 * @type {string}
 */
export const SynDurationExtraFast = 'var(--syn-duration-extra-fast)';

/**
 * @type {string}
 */
export const SynDurationFast = 'var(--syn-duration-fast)';

/**
 * @type {string}
 */
export const SynDurationNormal = 'var(--syn-duration-normal)';

/**
 * @type {string}
 */
export const SynDurationSlow = 'var(--syn-duration-slow)';

/**
 * @type {string}
 */
export const SynDurationExtraSlow = 'var(--syn-duration-extra-slow)';

/**
 * @type {string}
 */
export const SynLineHeightDenser = 'var(--syn-line-height-denser)';

/**
 * @type {string}
 */
export const SynLineHeightDense = 'var(--syn-line-height-dense)';

/**
 * @type {string}
 */
export const SynLineHeightNormal = 'var(--syn-line-height-normal)';

/**
 * @type {string}
 */
export const SynLineHeightLoose = 'var(--syn-line-height-loose)';

/**
 * @type {string}
 */
export const SynLineHeightLooser = 'var(--syn-line-height-looser)';

/**
 * @type {string}
 */
export const SynFontWeightNormal = 'var(--syn-font-weight-normal)';

/**
 * @type {string}
 */
export const SynFontWeightSemibold = 'var(--syn-font-weight-semibold)';

/**
 * @type {string}
 */
export const SynFontWeightBold = 'var(--syn-font-weight-bold)';

/**
 * @type {string}
 */
export const SynShadowMedium = 'var(--syn-shadow-medium)';

/**
 * @type {string}
 */
export const SynShadowLarge = 'var(--syn-shadow-large)';

/**
 * @type {string}
 */
export const SynShadowXLarge = 'var(--syn-shadow-x-large)';

/**
 * @type {string}
 */
export const SynShadowOverflowDown = 'var(--syn-shadow-overflow-down)';

/**
 * @type {string}
 */
export const SynShadowOverflowUp = 'var(--syn-shadow-overflow-up)';

/**
 * @type {string}
 */
export const SynShadowOverflowLeft = 'var(--syn-shadow-overflow-left)';

/**
 * @type {string}
 */
export const SynShadowOverflowRight = 'var(--syn-shadow-overflow-right)';

/**
 * @type {string}
 */
export const SynFontSans = 'var(--syn-font-sans)';

/**
 * @type {string}
 */
export const SynFontMono = 'var(--syn-font-mono)';

/**
 * @type {string}
 */
export const SynSpacing4xSmall = 'var(--syn-spacing-4x-small)';

/**
 * @type {string}
 */
export const SynSpacing3xSmall = 'var(--syn-spacing-3x-small)';

/**
 * @type {string}
 */
export const SynSpacing2xSmall = 'var(--syn-spacing-2x-small)';

/**
 * @type {string}
 */
export const SynSpacingXSmall = 'var(--syn-spacing-x-small)';

/**
 * @type {string}
 */
export const SynSpacingSmall = 'var(--syn-spacing-small)';

/**
 * @type {string}
 */
export const SynSpacingMedium = 'var(--syn-spacing-medium)';

/**
 * @type {string}
 */
export const SynSpacingMediumLarge = 'var(--syn-spacing-medium-large)';

/**
 * @type {string}
 */
export const SynSpacingLarge = 'var(--syn-spacing-large)';

/**
 * @type {string}
 */
export const SynSpacingXLarge = 'var(--syn-spacing-x-large)';

/**
 * @type {string}
 */
export const SynSpacing2xLarge = 'var(--syn-spacing-2x-large)';

/**
 * @type {string}
 */
export const SynSpacing3xLarge = 'var(--syn-spacing-3x-large)';

/**
 * @type {string}
 */
export const SynSpacing4xLarge = 'var(--syn-spacing-4x-large)';

/**
 * @type {string}
 */
export const SynSpacing5xLarge = 'var(--syn-spacing-5x-large)';

/**
 * @type {string}
 */
export const SynBorderRadiusNone = 'var(--syn-border-radius-none)';

/**
 * @type {string}
 */
export const SynBorderRadiusPill = 'var(--syn-border-radius-pill)';

/**
 * @type {string}
 */
export const SynBorderRadiusCircle = 'var(--syn-border-radius-circle)';

/**
 * @type {string}
 */
export const SynBorderRadiusSmall = 'var(--syn-border-radius-small)';

/**
 * @type {string}
 */
export const SynBorderRadiusMedium = 'var(--syn-border-radius-medium)';

/**
 * @type {string}
 */
export const SynDimensionBase = 'var(--syn-dimension-base)';

/**
 * @type {string}
 */
export const SynBorderWidthNone = 'var(--syn-border-width-none)';

/**
 * @type {string}
 */
export const SynBorderWidthSmall = 'var(--syn-border-width-small)';

/**
 * @type {string}
 */
export const SynBorderWidthMedium = 'var(--syn-border-width-medium)';

/**
 * @type {string}
 */
export const SynBorderWidthLarge = 'var(--syn-border-width-large)';

/**
 * @type {string}
 */
export const SynBorderWidthXLarge = 'var(--syn-border-width-x-large)';

/**
 * @type {string}
 */
export const SynFontSansFallback = 'var(--syn-font-sans-fallback)';

/**
 * @type {string}
 */
export const SynOpacity50 = 'var(--syn-opacity-50)';

/**
 * @type {string}
 */
export const SynTextDecorationDefault = 'var(--syn-text-decoration-default)';

/**
 * @type {string}
 */
export const SynTextDecorationUnderline = 'var(--syn-text-decoration-underline)';

/**
 * @type {string}
 */
export const SynButtonFontSizeSmall = 'var(--syn-button-font-size-small)';

/**
 * @type {string}
 */
export const SynButtonFontSizeMedium = 'var(--syn-button-font-size-medium)';

/**
 * @type {string}
 */
export const SynButtonFontSizeLarge = 'var(--syn-button-font-size-large)';

/**
 * @type {string}
 */
export const SynFocusRingColor = 'var(--syn-focus-ring-color)';

/**
 * @type {string}
 */
export const SynFocusRingWidth = 'var(--syn-focus-ring-width)';

/**
 * @type {string}
 */
export const SynFocusRingOffset = 'var(--syn-focus-ring-offset)';

/**
 * @type {string}
 */
export const SynInputColor = 'var(--syn-input-color)';

/**
 * @type {string}
 */
export const SynInputColorHover = 'var(--syn-input-color-hover)';

/**
 * @type {string}
 */
export const SynInputColorFocus = 'var(--syn-input-color-focus)';

/**
 * @type {string}
 */
export const SynInputColorDisabled = 'var(--syn-input-color-disabled)';

/**
 * @type {string}
 */
export const SynInputBackgroundColor = 'var(--syn-input-background-color)';

/**
 * @type {string}
 */
export const SynInputBackgroundColorHover = 'var(--syn-input-background-color-hover)';

/**
 * @type {string}
 */
export const SynInputBackgroundColorFocus = 'var(--syn-input-background-color-focus)';

/**
 * @type {string}
 */
export const SynInputBackgroundColorDisabled = 'var(--syn-input-background-color-disabled)';

/**
 * @type {string}
 */
export const SynInputBorderColor = 'var(--syn-input-border-color)';

/**
 * @type {string}
 */
export const SynInputBorderColorHover = 'var(--syn-input-border-color-hover)';

/**
 * @type {string}
 */
export const SynInputBorderColorFocus = 'var(--syn-input-border-color-focus)';

/**
 * @type {string}
 */
export const SynInputBorderColorDisables = 'var(--syn-input-border-color-disables)';

/**
 * @type {string}
 */
export const SynInputBorderRadiusSmall = 'var(--syn-input-border-radius-small)';

/**
 * @type {string}
 */
export const SynInputBorderRadiusMedium = 'var(--syn-input-border-radius-medium)';

/**
 * @type {string}
 */
export const SynInputBorderRadiusLarge = 'var(--syn-input-border-radius-large)';

/**
 * @type {string}
 */
export const SynInputBorderColorFocusError = 'var(--syn-input-border-color-focus-error)';

/**
 * @type {string}
 */
export const SynInputWidth = 'var(--syn-input-width)';

/**
 * @type {string}
 */
export const SynInputIconColor = 'var(--syn-input-icon-color)';

/**
 * @type {string}
 */
export const SynInputIconColorHover = 'var(--syn-input-icon-color-hover)';

/**
 * @type {string}
 */
export const SynInputIconColorFocus = 'var(--syn-input-icon-color-focus)';

/**
 * @type {string}
 */
export const SynInputIconIconClearableColor = 'var(--syn-input-icon-icon-clearable-color)';

/**
 * @type {string}
 */
export const SynInputIconIconClearableColorHover = 'var(--syn-input-icon-icon-clearable-color-hover)';

/**
 * @type {string}
 */
export const SynInputIconIconClearableColorFocus = 'var(--syn-input-icon-icon-clearable-color-focus)';

/**
 * @type {string}
 */
export const SynInputPlaceholderColor = 'var(--syn-input-placeholder-color)';

/**
 * @type {string}
 */
export const SynInputPlaceholderColorDisabled = 'var(--syn-input-placeholder-color-disabled)';

/**
 * @type {string}
 */
export const SynInputRequiredContent = 'var(--syn-input-required-content)';

/**
 * @type {string}
 */
export const SynInputRequiredContentColor = 'var(--syn-input-required-content-color)';

/**
 * @type {string}
 */
export const SynInputRequiredContentOffset = 'var(--syn-input-required-content-offset)';

/**
 * @type {string}
 */
export const SynInputLabelColor = 'var(--syn-input-label-color)';

/**
 * @type {string}
 */
export const SynInputLabelFontSizeSmall = 'var(--syn-input-label-font-size-small)';

/**
 * @type {string}
 */
export const SynInputLabelFontSizeMedium = 'var(--syn-input-label-font-size-medium)';

/**
 * @type {string}
 */
export const SynInputLabelFontSizeLarge = 'var(--syn-input-label-font-size-large)';

/**
 * @type {string}
 */
export const SynInputSpacingSmall = 'var(--syn-input-spacing-small)';

/**
 * @type {string}
 */
export const SynInputSpacingMedium = 'var(--syn-input-spacing-medium)';

/**
 * @type {string}
 */
export const SynInputSpacingLarge = 'var(--syn-input-spacing-large)';

/**
 * @type {string}
 */
export const SynInputFocusRingColor = 'var(--syn-input-focus-ring-color)';

/**
 * @type {string}
 */
export const SynInputFocusRingOffset = 'var(--syn-input-focus-ring-offset)';

/**
 * @type {string}
 */
export const SynInputFocusRingError = 'var(--syn-input-focus-ring-error)';

/**
 * @type {string}
 */
export const SynInputDisabledOpacity = 'var(--syn-input-disabled-opacity)';

/**
 * @type {string}
 */
export const SynInputReadonlyBackgroundColor = 'var(--syn-input-readonly-background-color)';

/**
 * @type {string}
 */
export const SynInputReadonlyBackgroundColorHover = 'var(--syn-input-readonly-background-color-hover)';

/**
 * @type {string}
 */
export const SynInputReadonlyBackgroundColorFocus = 'var(--syn-input-readonly-background-color-focus)';

/**
 * @type {string}
 */
export const SynInputReadonlyBackgroundColorDisabled = 'var(--syn-input-readonly-background-color-disabled)';

/**
 * @type {string}
 */
export const SynInputHelpTextColor = 'var(--syn-input-help-text-color)';

/**
 * @type {string}
 */
export const SynInputHelpTextColorError = 'var(--syn-input-help-text-color-error)';

/**
 * @type {string}
 */
export const SynInputHelpTextFontSizeSmall = 'var(--syn-input-help-text-font-size-small)';

/**
 * @type {string}
 */
export const SynInputHelpTextFontSizeMedium = 'var(--syn-input-help-text-font-size-medium)';

/**
 * @type {string}
 */
export const SynInputHelpTextFontSizeLarge = 'var(--syn-input-help-text-font-size-large)';

/**
 * @type {string}
 */
export const SynInputHeightSmall = 'var(--syn-input-height-small)';

/**
 * @type {string}
 */
export const SynInputHeightMedium = 'var(--syn-input-height-medium)';

/**
 * @type {string}
 */
export const SynInputHeightLarge = 'var(--syn-input-height-large)';

/**
 * @type {string}
 */
export const SynInputReadonlyColor = 'var(--syn-input-readonly-color)';

/**
 * @type {string}
 */
export const SynInputReadonlyColorDisabled = 'var(--syn-input-readonly-color-disabled)';

/**
 * @type {string}
 */
export const SynInputReadonlyColorHover = 'var(--syn-input-readonly-color-hover)';

/**
 * @type {string}
 */
export const SynInputReadonlyColorFocus = 'var(--syn-input-readonly-color-focus)';

/**
 * @type {string}
 */
export const SynInputFontSizeSmall = 'var(--syn-input-font-size-small)';

/**
 * @type {string}
 */
export const SynInputFontSizeMedium = 'var(--syn-input-font-size-medium)';

/**
 * @type {string}
 */
export const SynInputFontSizeLarge = 'var(--syn-input-font-size-large)';

/**
 * @type {string}
 */
export const SynLinkColor = 'var(--syn-link-color)';

/**
 * @type {string}
 */
export const SynLinkColorHover = 'var(--syn-link-color-hover)';

/**
 * @type {string}
 */
export const SynLinkColorActive = 'var(--syn-link-color-active)';

/**
 * @type {string}
 */
export const SynLinkQuietColor = 'var(--syn-link-quiet-color)';

/**
 * @type {string}
 */
export const SynLinkQuietColorHover = 'var(--syn-link-quiet-color-hover)';

/**
 * @type {string}
 */
export const SynLinkQuietColorActive = 'var(--syn-link-quiet-color-active)';

/**
 * @type {string}
 */
export const SynOverlayBackgroundColor = 'var(--syn-overlay-background-color)';

/**
 * @type {string}
 */
export const SynPanelBackgroundColor = 'var(--syn-panel-background-color)';

/**
 * @type {string}
 */
export const SynPanelBorderColor = 'var(--syn-panel-border-color)';

/**
 * @type {string}
 */
export const SynPanelBorderWidth = 'var(--syn-panel-border-width)';

/**
 * @type {string}
 */
export const SynToggleSizeSmall = 'var(--syn-toggle-size-small)';

/**
 * @type {string}
 */
export const SynToggleSizeMedium = 'var(--syn-toggle-size-medium)';

/**
 * @type {string}
 */
export const SynToggleSizeLarge = 'var(--syn-toggle-size-large)';

/**
 * @type {string}
 */
export const SynTooltipBorderRadius = 'var(--syn-tooltip-border-radius)';

/**
 * @type {string}
 */
export const SynTooltipBackgroundColor = 'var(--syn-tooltip-background-color)';

/**
 * @type {string}
 */
export const SynTooltipColor = 'var(--syn-tooltip-color)';

/**
 * @type {string}
 */
export const SynTooltipFontFamily = 'var(--syn-tooltip-font-family)';

/**
 * @type {string}
 */
export const SynTooltipFontWeight = 'var(--syn-tooltip-font-weight)';

/**
 * @type {string}
 */
export const SynTooltipFontSize = 'var(--syn-tooltip-font-size)';

/**
 * @type {string}
 */
export const SynTooltipLineHeight = 'var(--syn-tooltip-line-height)';

/**
 * @type {string}
 */
export const SynTooltipPadding = 'var(--syn-tooltip-padding)';

/**
 * @type {string}
 */
export const SynTooltipArrowSize = 'var(--syn-tooltip-arrow-size)';

/**
 * @type {string}
 */
export const SynBodyXSmallRegular = 'var(--syn-body-x-small-regular)';

/**
 * @type {string}
 */
export const SynBodyXSmallSemibold = 'var(--syn-body-x-small-semibold)';

/**
 * @type {string}
 */
export const SynBodyXSmallBold = 'var(--syn-body-x-small-bold)';

/**
 * @type {string}
 */
export const SynBodySmallRegular = 'var(--syn-body-small-regular)';

/**
 * @type {string}
 */
export const SynBodySmallSemibold = 'var(--syn-body-small-semibold)';

/**
 * @type {string}
 */
export const SynBodySmallBold = 'var(--syn-body-small-bold)';

/**
 * @type {string}
 */
export const SynBodyMediumRegular = 'var(--syn-body-medium-regular)';

/**
 * @type {string}
 */
export const SynBodyMediumSemibold = 'var(--syn-body-medium-semibold)';

/**
 * @type {string}
 */
export const SynBodyMediumBold = 'var(--syn-body-medium-bold)';

/**
 * @type {string}
 */
export const SynBodyLargeRegular = 'var(--syn-body-large-regular)';

/**
 * @type {string}
 */
export const SynBodyLargeSemibold = 'var(--syn-body-large-semibold)';

/**
 * @type {string}
 */
export const SynBodyLargeBold = 'var(--syn-body-large-bold)';

/**
 * @type {string}
 */
export const SynHeadingLarge = 'var(--syn-heading-large)';

/**
 * @type {string}
 */
export const SynHeadingXLarge = 'var(--syn-heading-x-large)';

/**
 * @type {string}
 */
export const SynHeading2xLarge = 'var(--syn-heading-2x-large)';

/**
 * @type {string}
 */
export const SynHeading3xLarge = 'var(--syn-heading-3x-large)';

/**
 * @type {string}
 */
export const SynTypographyColorText = 'var(--syn-typography-color-text)';

/**
 * @type {string}
 */
export const SynTypographyColorTextInverted = 'var(--syn-typography-color-text-inverted)';

/**
 * @type {string}
 */
export const SynColorPrimary50 = 'var(--syn-color-primary-50)';

/**
 * @type {string}
 */
export const SynColorPrimary100 = 'var(--syn-color-primary-100)';

/**
 * @type {string}
 */
export const SynColorPrimary200 = 'var(--syn-color-primary-200)';

/**
 * @type {string}
 */
export const SynColorPrimary300 = 'var(--syn-color-primary-300)';

/**
 * @type {string}
 */
export const SynColorPrimary400 = 'var(--syn-color-primary-400)';

/**
 * @type {string}
 */
export const SynColorPrimary500 = 'var(--syn-color-primary-500)';

/**
 * @type {string}
 */
export const SynColorPrimary600 = 'var(--syn-color-primary-600)';

/**
 * @type {string}
 */
export const SynColorPrimary700 = 'var(--syn-color-primary-700)';

/**
 * @type {string}
 */
export const SynColorPrimary800 = 'var(--syn-color-primary-800)';

/**
 * @type {string}
 */
export const SynColorPrimary900 = 'var(--syn-color-primary-900)';

/**
 * @type {string}
 */
export const SynColorPrimary950 = 'var(--syn-color-primary-950)';

/**
 * @type {string}
 */
export const SynColorSuccess50 = 'var(--syn-color-success-50)';

/**
 * @type {string}
 */
export const SynColorSuccess100 = 'var(--syn-color-success-100)';

/**
 * @type {string}
 */
export const SynColorSuccess200 = 'var(--syn-color-success-200)';

/**
 * @type {string}
 */
export const SynColorSuccess300 = 'var(--syn-color-success-300)';

/**
 * @type {string}
 */
export const SynColorSuccess400 = 'var(--syn-color-success-400)';

/**
 * @type {string}
 */
export const SynColorSuccess500 = 'var(--syn-color-success-500)';

/**
 * @type {string}
 */
export const SynColorSuccess600 = 'var(--syn-color-success-600)';

/**
 * @type {string}
 */
export const SynColorSuccess700 = 'var(--syn-color-success-700)';

/**
 * @type {string}
 */
export const SynColorSuccess800 = 'var(--syn-color-success-800)';

/**
 * @type {string}
 */
export const SynColorSuccess900 = 'var(--syn-color-success-900)';

/**
 * @type {string}
 */
export const SynColorSuccess950 = 'var(--syn-color-success-950)';

/**
 * @type {string}
 */
export const SynColorWarning50 = 'var(--syn-color-warning-50)';

/**
 * @type {string}
 */
export const SynColorWarning100 = 'var(--syn-color-warning-100)';

/**
 * @type {string}
 */
export const SynColorWarning200 = 'var(--syn-color-warning-200)';

/**
 * @type {string}
 */
export const SynColorWarning300 = 'var(--syn-color-warning-300)';

/**
 * @type {string}
 */
export const SynColorWarning400 = 'var(--syn-color-warning-400)';

/**
 * @type {string}
 */
export const SynColorWarning500 = 'var(--syn-color-warning-500)';

/**
 * @type {string}
 */
export const SynColorWarning600 = 'var(--syn-color-warning-600)';

/**
 * @type {string}
 */
export const SynColorWarning700 = 'var(--syn-color-warning-700)';

/**
 * @type {string}
 */
export const SynColorWarning800 = 'var(--syn-color-warning-800)';

/**
 * @type {string}
 */
export const SynColorWarning900 = 'var(--syn-color-warning-900)';

/**
 * @type {string}
 */
export const SynColorWarning950 = 'var(--syn-color-warning-950)';

/**
 * @type {string}
 */
export const SynColorError50 = 'var(--syn-color-error-50)';

/**
 * @type {string}
 */
export const SynColorError100 = 'var(--syn-color-error-100)';

/**
 * @type {string}
 */
export const SynColorError200 = 'var(--syn-color-error-200)';

/**
 * @type {string}
 */
export const SynColorError300 = 'var(--syn-color-error-300)';

/**
 * @type {string}
 */
export const SynColorError400 = 'var(--syn-color-error-400)';

/**
 * @type {string}
 */
export const SynColorError500 = 'var(--syn-color-error-500)';

/**
 * @type {string}
 */
export const SynColorError600 = 'var(--syn-color-error-600)';

/**
 * @type {string}
 */
export const SynColorError700 = 'var(--syn-color-error-700)';

/**
 * @type {string}
 */
export const SynColorError800 = 'var(--syn-color-error-800)';

/**
 * @type {string}
 */
export const SynColorError900 = 'var(--syn-color-error-900)';

/**
 * @type {string}
 */
export const SynColorError950 = 'var(--syn-color-error-950)';

/**
 * @type {string}
 */
export const SynColorAccent50 = 'var(--syn-color-accent-50)';

/**
 * @type {string}
 */
export const SynColorAccent100 = 'var(--syn-color-accent-100)';

/**
 * @type {string}
 */
export const SynColorAccent200 = 'var(--syn-color-accent-200)';

/**
 * @type {string}
 */
export const SynColorAccent300 = 'var(--syn-color-accent-300)';

/**
 * @type {string}
 */
export const SynColorAccent400 = 'var(--syn-color-accent-400)';

/**
 * @type {string}
 */
export const SynColorAccent500 = 'var(--syn-color-accent-500)';

/**
 * @type {string}
 */
export const SynColorAccent600 = 'var(--syn-color-accent-600)';

/**
 * @type {string}
 */
export const SynColorAccent700 = 'var(--syn-color-accent-700)';

/**
 * @type {string}
 */
export const SynColorAccent800 = 'var(--syn-color-accent-800)';

/**
 * @type {string}
 */
export const SynColorAccent900 = 'var(--syn-color-accent-900)';

/**
 * @type {string}
 */
export const SynColorAccent950 = 'var(--syn-color-accent-950)';

/**
 * @type {string}
 */
export const SynColorNeutral0 = 'var(--syn-color-neutral-0)';

/**
 * @type {string}
 */
export const SynColorNeutral50 = 'var(--syn-color-neutral-50)';

/**
 * @type {string}
 */
export const SynColorNeutral100 = 'var(--syn-color-neutral-100)';

/**
 * @type {string}
 */
export const SynColorNeutral200 = 'var(--syn-color-neutral-200)';

/**
 * @type {string}
 */
export const SynColorNeutral300 = 'var(--syn-color-neutral-300)';

/**
 * @type {string}
 */
export const SynColorNeutral400 = 'var(--syn-color-neutral-400)';

/**
 * @type {string}
 */
export const SynColorNeutral500 = 'var(--syn-color-neutral-500)';

/**
 * @type {string}
 */
export const SynColorNeutral600 = 'var(--syn-color-neutral-600)';

/**
 * @type {string}
 */
export const SynColorNeutral700 = 'var(--syn-color-neutral-700)';

/**
 * @type {string}
 */
export const SynColorNeutral800 = 'var(--syn-color-neutral-800)';

/**
 * @type {string}
 */
export const SynColorNeutral900 = 'var(--syn-color-neutral-900)';

/**
 * @type {string}
 */
export const SynColorNeutral950 = 'var(--syn-color-neutral-950)';

/**
 * @type {string}
 */
export const SynColorNeutral1000 = 'var(--syn-color-neutral-1000)';

/**
 * @type {string}
 */
export const SynBorderRadiusLarge = 'var(--syn-border-radius-large)';

/**
 * @type {string}
 */
export const SynBorderRadiusXLarge = 'var(--syn-border-radius-x-large)';

/**
 * @type {string}
 */
export const SynShadowXSmall = 'var(--syn-shadow-x-small)';

/**
 * @type {string}
 */
export const SynShadowSmall = 'var(--syn-shadow-small)';

/**
 * @type {string}
 */
export const SynTransitionXSlow = 'var(--syn-transition-x-slow)';

/**
 * @type {string}
 */
export const SynTransitionSlow = 'var(--syn-transition-slow)';

/**
 * @type {string}
 */
export const SynTransitionMedium = 'var(--syn-transition-medium)';

/**
 * @type {string}
 */
export const SynTransitionFast = 'var(--syn-transition-fast)';

/**
 * @type {string}
 */
export const SynTransitionXFast = 'var(--syn-transition-x-fast)';

/**
 * @type {string}
 */
export const SynFontSerif = 'var(--syn-font-serif)';

/**
 * @type {string}
 */
export const SynFontSize2xSmall = 'var(--syn-font-size-2x-small)';

/**
 * @type {string}
 */
export const SynFontSize4xLarge = 'var(--syn-font-size-4x-large)';

/**
 * @type {string}
 */
export const SynFontWeightLight = 'var(--syn-font-weight-light)';

/**
 * @type {string}
 */
export const SynLetterSpacingDenser = 'var(--syn-letter-spacing-denser)';

/**
 * @type {string}
 */
export const SynLetterSpacingDense = 'var(--syn-letter-spacing-dense)';

/**
 * @type {string}
 */
export const SynLetterSpacingNormal = 'var(--syn-letter-spacing-normal)';

/**
 * @type {string}
 */
export const SynLetterSpacingLoose = 'var(--syn-letter-spacing-loose)';

/**
 * @type {string}
 */
export const SynLetterSpacingLooser = 'var(--syn-letter-spacing-looser)';

/**
 * @type {string}
 */
export const SynFocusRingStyle = 'var(--syn-focus-ring-style)';

/**
 * @type {string}
 */
export const SynFocusRing = 'var(--syn-focus-ring)';

/**
 * @type {string}
 */
export const SynInputBorderColorDisabled = 'var(--syn-input-border-color-disabled)';

/**
 * @type {string}
 */
export const SynInputBorderWidth = 'var(--syn-input-border-width)';

/**
 * @type {string}
 */
export const SynInputFontFamily = 'var(--syn-input-font-family)';

/**
 * @type {string}
 */
export const SynInputFontWeight = 'var(--syn-input-font-weight)';

/**
 * @type {string}
 */
export const SynInputLetterSpacing = 'var(--syn-input-letter-spacing)';

/**
 * @type {string}
 */
export const SynZIndexDrawer = 'var(--syn-z-index-drawer)';

/**
 * @type {string}
 */
export const SynZIndexDialog = 'var(--syn-z-index-dialog)';

/**
 * @type {string}
 */
export const SynZIndexDropdown = 'var(--syn-z-index-dropdown)';

/**
 * @type {string}
 */
export const SynZIndexToast = 'var(--syn-z-index-toast)';

/**
 * @type {string}
 */
export const SynZIndexTooltip = 'var(--syn-z-index-tooltip)';