@synergy-design-system/tokens 1.0.0-main.4 → 1.0.0-main.6

package/dist/js/index.js

@@ -0,0 +1,934 @@
+/**
+ * @synergy-design-system/tokens version 1.0.0-main.5
+ * SICK Global UX Foundation
+ */
+
+/**
+ * @type {string}
+ */
+export const SynFontSize2xSmall = 'var(--syn-font-size-2x-small)';
+
+/**
+ * @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 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 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 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 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 SynSizeSmall = 'var(--syn-size-small)';
+
+/**
+ * @type {string}
+ */
+export const SynSizeMedium = 'var(--syn-size-medium)';
+
+/**
+ * @type {string}
+ */
+export const SynSizeLarge = 'var(--syn-size-large)';
+
+/**
+ * @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)';