@synergy-design-system/tokens 1.0.0-main.11 → 1.0.0-main.13

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v1.0.0-main.13](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.12...tokens/1.0.0-main.13) (2023-11-30)
+
+
+### Features
+
+* ✨ add syn-radio ([#170](https://github.com/SickDesignSystem/synergy/issues/170)) ([4eb4228](https://github.com/SickDesignSystem/synergy/commit/4eb4228fc814da910662fd85745ccb1717efc2d6))
+
+# [@synergy-design-system/tokens-v1.0.0-main.12](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.11...tokens/1.0.0-main.12) (2023-11-29)
+
+
+### Features
+
+* ✨ Add types for @synergy-design-system/tokens ([#187](https://github.com/SickDesignSystem/synergy/issues/187)) ([894b09b](https://github.com/SickDesignSystem/synergy/commit/894b09b13ab68f95f7dbc8b9d91c1f0c7b45163c))
+
 # [@synergy-design-system/tokens-v1.0.0-main.11](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.10...tokens/1.0.0-main.11) (2023-11-20)
 
 

package/dist/js/index.d.ts

@@ -0,0 +1,935 @@
+/**
+ * @synergy-design-system/tokens version 1.0.0-main.12
+ * SICK Global UX Foundation
+ */
+
+
+/**
+ * Maps to the css variable `--syn-font-size-2x-small`
+ */
+export const SynFontSize2xSmall: string;
+
+/**
+ * Maps to the css variable `--syn-font-size-x-small`
+ */
+export const SynFontSizeXSmall: string;
+
+/**
+ * Maps to the css variable `--syn-font-size-small`
+ */
+export const SynFontSizeSmall: string;
+
+/**
+ * Maps to the css variable `--syn-font-size-medium`
+ */
+export const SynFontSizeMedium: string;
+
+/**
+ * Maps to the css variable `--syn-font-size-large`
+ */
+export const SynFontSizeLarge: string;
+
+/**
+ * Maps to the css variable `--syn-font-size-x-large`
+ */
+export const SynFontSizeXLarge: string;
+
+/**
+ * Maps to the css variable `--syn-font-size-2x-large`
+ */
+export const SynFontSize2xLarge: string;
+
+/**
+ * Maps to the css variable `--syn-font-size-3x-large`
+ */
+export const SynFontSize3xLarge: string;
+
+/**
+ * Maps to the css variable `--syn-duration-extra-fast`
+ */
+export const SynDurationExtraFast: string;
+
+/**
+ * Maps to the css variable `--syn-duration-fast`
+ */
+export const SynDurationFast: string;
+
+/**
+ * Maps to the css variable `--syn-duration-normal`
+ */
+export const SynDurationNormal: string;
+
+/**
+ * Maps to the css variable `--syn-duration-slow`
+ */
+export const SynDurationSlow: string;
+
+/**
+ * Maps to the css variable `--syn-duration-extra-slow`
+ */
+export const SynDurationExtraSlow: string;
+
+/**
+ * Maps to the css variable `--syn-line-height-denser`
+ */
+export const SynLineHeightDenser: string;
+
+/**
+ * Maps to the css variable `--syn-line-height-dense`
+ */
+export const SynLineHeightDense: string;
+
+/**
+ * Maps to the css variable `--syn-line-height-normal`
+ */
+export const SynLineHeightNormal: string;
+
+/**
+ * Maps to the css variable `--syn-line-height-loose`
+ */
+export const SynLineHeightLoose: string;
+
+/**
+ * Maps to the css variable `--syn-line-height-looser`
+ */
+export const SynLineHeightLooser: string;
+
+/**
+ * Maps to the css variable `--syn-font-weight-normal`
+ */
+export const SynFontWeightNormal: string;
+
+/**
+ * Maps to the css variable `--syn-font-weight-semibold`
+ */
+export const SynFontWeightSemibold: string;
+
+/**
+ * Maps to the css variable `--syn-font-weight-bold`
+ */
+export const SynFontWeightBold: string;
+
+/**
+ * Maps to the css variable `--syn-shadow-medium`
+ */
+export const SynShadowMedium: string;
+
+/**
+ * Maps to the css variable `--syn-shadow-large`
+ */
+export const SynShadowLarge: string;
+
+/**
+ * Maps to the css variable `--syn-shadow-x-large`
+ */
+export const SynShadowXLarge: string;
+
+/**
+ * Maps to the css variable `--syn-shadow-overflow-down`
+ */
+export const SynShadowOverflowDown: string;
+
+/**
+ * Maps to the css variable `--syn-shadow-overflow-up`
+ */
+export const SynShadowOverflowUp: string;
+
+/**
+ * Maps to the css variable `--syn-shadow-overflow-left`
+ */
+export const SynShadowOverflowLeft: string;
+
+/**
+ * Maps to the css variable `--syn-shadow-overflow-right`
+ */
+export const SynShadowOverflowRight: string;
+
+/**
+ * Maps to the css variable `--syn-font-sans`
+ */
+export const SynFontSans: string;
+
+/**
+ * Maps to the css variable `--syn-font-mono`
+ */
+export const SynFontMono: string;
+
+/**
+ * Maps to the css variable `--syn-spacing-4x-small`
+ */
+export const SynSpacing4xSmall: string;
+
+/**
+ * Maps to the css variable `--syn-spacing-3x-small`
+ */
+export const SynSpacing3xSmall: string;
+
+/**
+ * Maps to the css variable `--syn-spacing-2x-small`
+ */
+export const SynSpacing2xSmall: string;
+
+/**
+ * Maps to the css variable `--syn-spacing-x-small`
+ */
+export const SynSpacingXSmall: string;
+
+/**
+ * Maps to the css variable `--syn-spacing-small`
+ */
+export const SynSpacingSmall: string;
+
+/**
+ * Maps to the css variable `--syn-spacing-medium`
+ */
+export const SynSpacingMedium: string;
+
+/**
+ * Maps to the css variable `--syn-spacing-large`
+ */
+export const SynSpacingLarge: string;
+
+/**
+ * Maps to the css variable `--syn-spacing-x-large`
+ */
+export const SynSpacingXLarge: string;
+
+/**
+ * Maps to the css variable `--syn-spacing-2x-large`
+ */
+export const SynSpacing2xLarge: string;
+
+/**
+ * Maps to the css variable `--syn-spacing-3x-large`
+ */
+export const SynSpacing3xLarge: string;
+
+/**
+ * Maps to the css variable `--syn-spacing-4x-large`
+ */
+export const SynSpacing4xLarge: string;
+
+/**
+ * Maps to the css variable `--syn-spacing-5x-large`
+ */
+export const SynSpacing5xLarge: string;
+
+/**
+ * Maps to the css variable `--syn-border-radius-none`
+ */
+export const SynBorderRadiusNone: string;
+
+/**
+ * Maps to the css variable `--syn-border-radius-pill`
+ */
+export const SynBorderRadiusPill: string;
+
+/**
+ * Maps to the css variable `--syn-border-radius-circle`
+ */
+export const SynBorderRadiusCircle: string;
+
+/**
+ * Maps to the css variable `--syn-dimension-base`
+ */
+export const SynDimensionBase: string;
+
+/**
+ * Maps to the css variable `--syn-border-width-none`
+ */
+export const SynBorderWidthNone: string;
+
+/**
+ * Maps to the css variable `--syn-border-width-small`
+ */
+export const SynBorderWidthSmall: string;
+
+/**
+ * Maps to the css variable `--syn-border-width-medium`
+ */
+export const SynBorderWidthMedium: string;
+
+/**
+ * Maps to the css variable `--syn-border-width-large`
+ */
+export const SynBorderWidthLarge: string;
+
+/**
+ * Maps to the css variable `--syn-border-width-x-large`
+ */
+export const SynBorderWidthXLarge: string;
+
+/**
+ * Maps to the css variable `--syn-font-sans-fallback`
+ */
+export const SynFontSansFallback: string;
+
+/**
+ * Maps to the css variable `--syn-button-font-size-small`
+ */
+export const SynButtonFontSizeSmall: string;
+
+/**
+ * Maps to the css variable `--syn-button-font-size-medium`
+ */
+export const SynButtonFontSizeMedium: string;
+
+/**
+ * Maps to the css variable `--syn-button-font-size-large`
+ */
+export const SynButtonFontSizeLarge: string;
+
+/**
+ * Maps to the css variable `--syn-focus-ring-color`
+ */
+export const SynFocusRingColor: string;
+
+/**
+ * Maps to the css variable `--syn-focus-ring-width`
+ */
+export const SynFocusRingWidth: string;
+
+/**
+ * Maps to the css variable `--syn-focus-ring-offset`
+ */
+export const SynFocusRingOffset: string;
+
+/**
+ * Maps to the css variable `--syn-input-color`
+ */
+export const SynInputColor: string;
+
+/**
+ * Maps to the css variable `--syn-input-color-hover`
+ */
+export const SynInputColorHover: string;
+
+/**
+ * Maps to the css variable `--syn-input-color-focus`
+ */
+export const SynInputColorFocus: string;
+
+/**
+ * Maps to the css variable `--syn-input-color-disabled`
+ */
+export const SynInputColorDisabled: string;
+
+/**
+ * Maps to the css variable `--syn-input-background-color`
+ */
+export const SynInputBackgroundColor: string;
+
+/**
+ * Maps to the css variable `--syn-input-background-color-hover`
+ */
+export const SynInputBackgroundColorHover: string;
+
+/**
+ * Maps to the css variable `--syn-input-background-color-focus`
+ */
+export const SynInputBackgroundColorFocus: string;
+
+/**
+ * Maps to the css variable `--syn-input-background-color-disabled`
+ */
+export const SynInputBackgroundColorDisabled: string;
+
+/**
+ * Maps to the css variable `--syn-input-border-color`
+ */
+export const SynInputBorderColor: string;
+
+/**
+ * Maps to the css variable `--syn-input-border-color-hover`
+ */
+export const SynInputBorderColorHover: string;
+
+/**
+ * Maps to the css variable `--syn-input-border-color-focus`
+ */
+export const SynInputBorderColorFocus: string;
+
+/**
+ * Maps to the css variable `--syn-input-border-color-disables`
+ */
+export const SynInputBorderColorDisables: string;
+
+/**
+ * Maps to the css variable `--syn-input-border-radius-small`
+ */
+export const SynInputBorderRadiusSmall: string;
+
+/**
+ * Maps to the css variable `--syn-input-border-radius-medium`
+ */
+export const SynInputBorderRadiusMedium: string;
+
+/**
+ * Maps to the css variable `--syn-input-border-radius-large`
+ */
+export const SynInputBorderRadiusLarge: string;
+
+/**
+ * Maps to the css variable `--syn-input-border-color-focus-error`
+ */
+export const SynInputBorderColorFocusError: string;
+
+/**
+ * Maps to the css variable `--syn-input-width`
+ */
+export const SynInputWidth: string;
+
+/**
+ * Maps to the css variable `--syn-input-icon-color`
+ */
+export const SynInputIconColor: string;
+
+/**
+ * Maps to the css variable `--syn-input-icon-color-hover`
+ */
+export const SynInputIconColorHover: string;
+
+/**
+ * Maps to the css variable `--syn-input-icon-color-focus`
+ */
+export const SynInputIconColorFocus: string;
+
+/**
+ * Maps to the css variable `--syn-input-icon-icon-clearable-color`
+ */
+export const SynInputIconIconClearableColor: string;
+
+/**
+ * Maps to the css variable `--syn-input-icon-icon-clearable-color-hover`
+ */
+export const SynInputIconIconClearableColorHover: string;
+
+/**
+ * Maps to the css variable `--syn-input-icon-icon-clearable-color-focus`
+ */
+export const SynInputIconIconClearableColorFocus: string;
+
+/**
+ * Maps to the css variable `--syn-input-placeholder-color`
+ */
+export const SynInputPlaceholderColor: string;
+
+/**
+ * Maps to the css variable `--syn-input-placeholder-color-disabled`
+ */
+export const SynInputPlaceholderColorDisabled: string;
+
+/**
+ * Maps to the css variable `--syn-input-required-content`
+ */
+export const SynInputRequiredContent: string;
+
+/**
+ * Maps to the css variable `--syn-input-required-content-offset`
+ */
+export const SynInputRequiredContentOffset: string;
+
+/**
+ * Maps to the css variable `--syn-input-label-color`
+ */
+export const SynInputLabelColor: string;
+
+/**
+ * Maps to the css variable `--syn-input-label-font-size-small`
+ */
+export const SynInputLabelFontSizeSmall: string;
+
+/**
+ * Maps to the css variable `--syn-input-label-font-size-medium`
+ */
+export const SynInputLabelFontSizeMedium: string;
+
+/**
+ * Maps to the css variable `--syn-input-label-font-size-large`
+ */
+export const SynInputLabelFontSizeLarge: string;
+
+/**
+ * Maps to the css variable `--syn-input-spacing-small`
+ */
+export const SynInputSpacingSmall: string;
+
+/**
+ * Maps to the css variable `--syn-input-spacing-medium`
+ */
+export const SynInputSpacingMedium: string;
+
+/**
+ * Maps to the css variable `--syn-input-spacing-large`
+ */
+export const SynInputSpacingLarge: string;
+
+/**
+ * Maps to the css variable `--syn-input-focus-ring-color`
+ */
+export const SynInputFocusRingColor: string;
+
+/**
+ * Maps to the css variable `--syn-input-focus-ring-offset`
+ */
+export const SynInputFocusRingOffset: string;
+
+/**
+ * Maps to the css variable `--syn-input-focus-ring-error`
+ */
+export const SynInputFocusRingError: string;
+
+/**
+ * Maps to the css variable `--syn-input-disabled-opacity`
+ */
+export const SynInputDisabledOpacity: string;
+
+/**
+ * Maps to the css variable `--syn-input-readonly-background-color`
+ */
+export const SynInputReadonlyBackgroundColor: string;
+
+/**
+ * Maps to the css variable `--syn-input-readonly-background-color-hover`
+ */
+export const SynInputReadonlyBackgroundColorHover: string;
+
+/**
+ * Maps to the css variable `--syn-input-readonly-background-color-focus`
+ */
+export const SynInputReadonlyBackgroundColorFocus: string;
+
+/**
+ * Maps to the css variable `--syn-input-readonly-background-color-disabled`
+ */
+export const SynInputReadonlyBackgroundColorDisabled: string;
+
+/**
+ * Maps to the css variable `--syn-input-help-text-color`
+ */
+export const SynInputHelpTextColor: string;
+
+/**
+ * Maps to the css variable `--syn-input-help-text-color-error`
+ */
+export const SynInputHelpTextColorError: string;
+
+/**
+ * Maps to the css variable `--syn-input-help-text-font-size-small`
+ */
+export const SynInputHelpTextFontSizeSmall: string;
+
+/**
+ * Maps to the css variable `--syn-input-help-text-font-size-medium`
+ */
+export const SynInputHelpTextFontSizeMedium: string;
+
+/**
+ * Maps to the css variable `--syn-input-help-text-font-size-large`
+ */
+export const SynInputHelpTextFontSizeLarge: string;
+
+/**
+ * Maps to the css variable `--syn-input-height-small`
+ */
+export const SynInputHeightSmall: string;
+
+/**
+ * Maps to the css variable `--syn-input-height-medium`
+ */
+export const SynInputHeightMedium: string;
+
+/**
+ * Maps to the css variable `--syn-input-height-large`
+ */
+export const SynInputHeightLarge: string;
+
+/**
+ * Maps to the css variable `--syn-input-readonly-color`
+ */
+export const SynInputReadonlyColor: string;
+
+/**
+ * Maps to the css variable `--syn-input-readonly-color-disabled`
+ */
+export const SynInputReadonlyColorDisabled: string;
+
+/**
+ * Maps to the css variable `--syn-input-readonly-color-hover`
+ */
+export const SynInputReadonlyColorHover: string;
+
+/**
+ * Maps to the css variable `--syn-input-readonly-color-focus`
+ */
+export const SynInputReadonlyColorFocus: string;
+
+/**
+ * Maps to the css variable `--syn-input-font-size-small`
+ */
+export const SynInputFontSizeSmall: string;
+
+/**
+ * Maps to the css variable `--syn-input-font-size-medium`
+ */
+export const SynInputFontSizeMedium: string;
+
+/**
+ * Maps to the css variable `--syn-input-font-size-large`
+ */
+export const SynInputFontSizeLarge: string;
+
+/**
+ * Maps to the css variable `--syn-toggle-size-small`
+ */
+export const SynToggleSizeSmall: string;
+
+/**
+ * Maps to the css variable `--syn-toggle-size-medium`
+ */
+export const SynToggleSizeMedium: string;
+
+/**
+ * Maps to the css variable `--syn-toggle-size-large`
+ */
+export const SynToggleSizeLarge: string;
+
+/**
+ * Maps to the css variable `--syn-color-primary-50`
+ */
+export const SynColorPrimary50: string;
+
+/**
+ * Maps to the css variable `--syn-color-primary-100`
+ */
+export const SynColorPrimary100: string;
+
+/**
+ * Maps to the css variable `--syn-color-primary-200`
+ */
+export const SynColorPrimary200: string;
+
+/**
+ * Maps to the css variable `--syn-color-primary-300`
+ */
+export const SynColorPrimary300: string;
+
+/**
+ * Maps to the css variable `--syn-color-primary-400`
+ */
+export const SynColorPrimary400: string;
+
+/**
+ * Maps to the css variable `--syn-color-primary-500`
+ */
+export const SynColorPrimary500: string;
+
+/**
+ * Maps to the css variable `--syn-color-primary-600`
+ */
+export const SynColorPrimary600: string;
+
+/**
+ * Maps to the css variable `--syn-color-primary-700`
+ */
+export const SynColorPrimary700: string;
+
+/**
+ * Maps to the css variable `--syn-color-primary-800`
+ */
+export const SynColorPrimary800: string;
+
+/**
+ * Maps to the css variable `--syn-color-primary-900`
+ */
+export const SynColorPrimary900: string;
+
+/**
+ * Maps to the css variable `--syn-color-primary-950`
+ */
+export const SynColorPrimary950: string;
+
+/**
+ * Maps to the css variable `--syn-color-success-50`
+ */
+export const SynColorSuccess50: string;
+
+/**
+ * Maps to the css variable `--syn-color-success-100`
+ */
+export const SynColorSuccess100: string;
+
+/**
+ * Maps to the css variable `--syn-color-success-200`
+ */
+export const SynColorSuccess200: string;
+
+/**
+ * Maps to the css variable `--syn-color-success-300`
+ */
+export const SynColorSuccess300: string;
+
+/**
+ * Maps to the css variable `--syn-color-success-400`
+ */
+export const SynColorSuccess400: string;
+
+/**
+ * Maps to the css variable `--syn-color-success-500`
+ */
+export const SynColorSuccess500: string;
+
+/**
+ * Maps to the css variable `--syn-color-success-600`
+ */
+export const SynColorSuccess600: string;
+
+/**
+ * Maps to the css variable `--syn-color-success-700`
+ */
+export const SynColorSuccess700: string;
+
+/**
+ * Maps to the css variable `--syn-color-success-800`
+ */
+export const SynColorSuccess800: string;
+
+/**
+ * Maps to the css variable `--syn-color-success-900`
+ */
+export const SynColorSuccess900: string;
+
+/**
+ * Maps to the css variable `--syn-color-success-950`
+ */
+export const SynColorSuccess950: string;
+
+/**
+ * Maps to the css variable `--syn-color-warning-50`
+ */
+export const SynColorWarning50: string;
+
+/**
+ * Maps to the css variable `--syn-color-warning-100`
+ */
+export const SynColorWarning100: string;
+
+/**
+ * Maps to the css variable `--syn-color-warning-200`
+ */
+export const SynColorWarning200: string;
+
+/**
+ * Maps to the css variable `--syn-color-warning-300`
+ */
+export const SynColorWarning300: string;
+
+/**
+ * Maps to the css variable `--syn-color-warning-400`
+ */
+export const SynColorWarning400: string;
+
+/**
+ * Maps to the css variable `--syn-color-warning-500`
+ */
+export const SynColorWarning500: string;
+
+/**
+ * Maps to the css variable `--syn-color-warning-600`
+ */
+export const SynColorWarning600: string;
+
+/**
+ * Maps to the css variable `--syn-color-warning-700`
+ */
+export const SynColorWarning700: string;
+
+/**
+ * Maps to the css variable `--syn-color-warning-800`
+ */
+export const SynColorWarning800: string;
+
+/**
+ * Maps to the css variable `--syn-color-warning-900`
+ */
+export const SynColorWarning900: string;
+
+/**
+ * Maps to the css variable `--syn-color-warning-950`
+ */
+export const SynColorWarning950: string;
+
+/**
+ * Maps to the css variable `--syn-color-error-50`
+ */
+export const SynColorError50: string;
+
+/**
+ * Maps to the css variable `--syn-color-error-100`
+ */
+export const SynColorError100: string;
+
+/**
+ * Maps to the css variable `--syn-color-error-200`
+ */
+export const SynColorError200: string;
+
+/**
+ * Maps to the css variable `--syn-color-error-300`
+ */
+export const SynColorError300: string;
+
+/**
+ * Maps to the css variable `--syn-color-error-400`
+ */
+export const SynColorError400: string;
+
+/**
+ * Maps to the css variable `--syn-color-error-500`
+ */
+export const SynColorError500: string;
+
+/**
+ * Maps to the css variable `--syn-color-error-600`
+ */
+export const SynColorError600: string;
+
+/**
+ * Maps to the css variable `--syn-color-error-700`
+ */
+export const SynColorError700: string;
+
+/**
+ * Maps to the css variable `--syn-color-error-800`
+ */
+export const SynColorError800: string;
+
+/**
+ * Maps to the css variable `--syn-color-error-900`
+ */
+export const SynColorError900: string;
+
+/**
+ * Maps to the css variable `--syn-color-error-950`
+ */
+export const SynColorError950: string;
+
+/**
+ * Maps to the css variable `--syn-color-accent-50`
+ */
+export const SynColorAccent50: string;
+
+/**
+ * Maps to the css variable `--syn-color-accent-100`
+ */
+export const SynColorAccent100: string;
+
+/**
+ * Maps to the css variable `--syn-color-accent-200`
+ */
+export const SynColorAccent200: string;
+
+/**
+ * Maps to the css variable `--syn-color-accent-300`
+ */
+export const SynColorAccent300: string;
+
+/**
+ * Maps to the css variable `--syn-color-accent-400`
+ */
+export const SynColorAccent400: string;
+
+/**
+ * Maps to the css variable `--syn-color-accent-500`
+ */
+export const SynColorAccent500: string;
+
+/**
+ * Maps to the css variable `--syn-color-accent-600`
+ */
+export const SynColorAccent600: string;
+
+/**
+ * Maps to the css variable `--syn-color-accent-700`
+ */
+export const SynColorAccent700: string;
+
+/**
+ * Maps to the css variable `--syn-color-accent-800`
+ */
+export const SynColorAccent800: string;
+
+/**
+ * Maps to the css variable `--syn-color-accent-900`
+ */
+export const SynColorAccent900: string;
+
+/**
+ * Maps to the css variable `--syn-color-accent-950`
+ */
+export const SynColorAccent950: string;
+
+/**
+ * Maps to the css variable `--syn-color-neutral-0`
+ */
+export const SynColorNeutral0: string;
+
+/**
+ * Maps to the css variable `--syn-color-neutral-50`
+ */
+export const SynColorNeutral50: string;
+
+/**
+ * Maps to the css variable `--syn-color-neutral-100`
+ */
+export const SynColorNeutral100: string;
+
+/**
+ * Maps to the css variable `--syn-color-neutral-200`
+ */
+export const SynColorNeutral200: string;
+
+/**
+ * Maps to the css variable `--syn-color-neutral-300`
+ */
+export const SynColorNeutral300: string;
+
+/**
+ * Maps to the css variable `--syn-color-neutral-400`
+ */
+export const SynColorNeutral400: string;
+
+/**
+ * Maps to the css variable `--syn-color-neutral-500`
+ */
+export const SynColorNeutral500: string;
+
+/**
+ * Maps to the css variable `--syn-color-neutral-600`
+ */
+export const SynColorNeutral600: string;
+
+/**
+ * Maps to the css variable `--syn-color-neutral-700`
+ */
+export const SynColorNeutral700: string;
+
+/**
+ * Maps to the css variable `--syn-color-neutral-800`
+ */
+export const SynColorNeutral800: string;
+
+/**
+ * Maps to the css variable `--syn-color-neutral-900`
+ */
+export const SynColorNeutral900: string;
+
+/**
+ * Maps to the css variable `--syn-color-neutral-950`
+ */
+export const SynColorNeutral950: string;
+
+/**
+ * Maps to the css variable `--syn-color-neutral-1000`
+ */
+export const SynColorNeutral1000: string;

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.0.0-main.10
+ * @synergy-design-system/tokens version 1.0.0-main.12
  * SICK Global UX Foundation
  */
 

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.0.0-main.10
+ * @synergy-design-system/tokens version 1.0.0-main.12
  * SICK Global UX Foundation
  */
 $SynFontSize2xSmall: var(--syn-font-size-2x-small) !default;

package/dist/themes/dark.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.0.0-main.10
+ * @synergy-design-system/tokens version 1.0.0-main.12
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 20 Nov 2023 09:19:04 GMT
+ * Generated on Thu, 30 Nov 2023 15:31:24 GMT
  */
 
 :root {

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.0.0-main.10
+ * @synergy-design-system/tokens version 1.0.0-main.12
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 20 Nov 2023 09:19:04 GMT
+ * Generated on Thu, 30 Nov 2023 15:31:24 GMT
  */
 
 :root {

package/package.json

@@ -20,7 +20,10 @@
     "@synergy-design-system/eslint-config-syn": "0.1.0"
   },
   "exports": {
-    ".": "./dist/js/index.js",
+    ".": {
+      "types": "./dist/js/index.d.ts",
+      "import": "./dist/js/index.js"
+    },
     "./themes/*": "./dist/themes/*",
     "./scss": "./dist/scss/_tokens.scss"
   },
@@ -100,7 +103,8 @@
     ]
   },
   "type": "module",
-  "version": "1.0.0-main.11",
+  "types": "./dist/js/index.d.ts",
+  "version": "1.0.0-main.13",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

package/src/figma-tokens/$themes.json

@@ -5,8 +5,7 @@
     "group": "Theme",
     "selectedTokenSets": {
       "color/light": "enabled",
-      "color/primitives": "source",
-      "semantic/toggle": "disabled"
+      "color/primitives": "source"
     },
     "$figmaStyleReferences": {
       "primary.50": "S:eb21790c7e19e4a2f70b605f29d45573656ac66e,",
@@ -157,8 +156,7 @@
     "group": "Theme",
     "selectedTokenSets": {
       "color/dark": "enabled",
-      "color/primitives": "source",
-      "semantic/toggle": "disabled"
+      "color/primitives": "source"
     },
     "$figmaStyleReferences": {},
     "$figmaVariableReferences": {
@@ -238,8 +236,7 @@
     "id": "bc6b869612b2783f5cf45d3783bee47bdf9e2e27",
     "name": "Default",
     "selectedTokenSets": {
-      "globals": "enabled",
-      "semantic/toggle": "disabled"
+      "globals": "enabled"
     },
     "$figmaStyleReferences": {
       "shadow.overflow-down": "S:83a7cfa6ab292f413e064c58b850a3931c575de8,",

package/src/figma-tokens/_docs.json

@@ -213,13 +213,85 @@
       }
     },
     "checkbox": {
-      "description": {
-        "value": "Checkboxes allow the user to toggle an option on or off.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Checkboxes allow the user to toggle an option on or off.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Checkbox",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Checkbox",
-        "type": "text"
+      "checked": {
+        "title": {
+          "value": "Checked",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the checked attribute to activate the checkbox.",
+          "type": "text"
+        }
+      },
+      "indeterminate": {
+        "title": {
+          "value": "Indeterminate",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the indeterminate attribute to make the checkbox indeterminate.",
+          "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus event gives the user feedback that the Checkbox has been focused by the keyboard interaction.",
+          "type": "text"
+        }
+      },
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disabled attribute to disable the checkbox.",
+          "type": "text"
+        }
+      },
+      "sizes": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change a checkbox’s size.",
+          "type": "text"
+        }
+      },
+      "invalid": {
+        "title": {
+          "value": "Invalid",
+          "type": "text"
+        },
+        "description": {
+          "value": "The invalid status is used to warn the user that the Checkbox is invalid. For example, if the check is mandatory and nothing has been checked.",
+          "type": "text"
+        }
+      },
+      "validity": {
+        "title": {
+          "value": "Custom Validity",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.",
+          "type": "text"
+        }
       }
     },
     "color-picker": {
@@ -323,13 +395,65 @@
       }
     },
     "icon-button": {
-      "description": {
-        "value": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n\nFor a full list of icons that come bundled with Synergy, refer to the Assets.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Icon Button",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Icon Button",
-        "type": "text"
+      "sizes": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change a icon-button size.",
+          "type": "text"
+        }
+      },
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disabled attribute to disable the icon button.",
+          "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus event gives the user feedback that the icon-button has been focused by the keyboard interaction.",
+          "type": "text"
+        }
+      },
+      "color": {
+        "title": {
+          "value": "Color",
+          "type": "text"
+        },
+        "description": {
+          "value": "The Icon button can have two color variants, Primary or Neutral Color.",
+          "type": "text"
+        }
+      },
+      "label": {
+        "titel": {
+          "value": "Accessibility Label",
+          "type": "text"
+        },
+        "description": {
+          "value": "A description that gets read by assistive devices. For optimal accessibility, you have to include a label that describes what the icon button does.",
+          "type": "text"
+        }
       }
     },
     "icon": {
@@ -595,6 +719,16 @@
           "type": "text"
         }
       },
+      "labels": {
+        "title": {
+          "value": "Labels",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the label attribute to give the radio-group an accessible label. For labels that contain HTML, use the label slot instead.",
+          "type": "text"
+        }
+      },
       "help-text": {
         "title": {
           "value": "Help Text",
@@ -644,6 +778,26 @@
           "value": "Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.",
           "type": "text"
         }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus event gives the user feedback that one of the Checkboxes has been focused by the keyboard interaction.",
+          "type": "text"
+        }
+      },
+      "invalid": {
+        "title": {
+          "value": "Invalid",
+          "type": "text"
+        },
+        "description": {
+          "value": "The invalid status is used to warn the user that the Radio Group is invalid. For example, if the radio is mandatory and nothing has been checked.",
+          "type": "text"
+        }
       }
     },
     "range": {
@@ -809,13 +963,35 @@
       }
     },
     "tag": {
-      "description": {
-        "value": "Tags are used as labels to organize things or to indicate a selection.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Tags are used as labels to organize things or to indicate a selection.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Tag",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Tag",
-        "type": "text"
+      "size": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change a tab’s size.",
+          "type": "text"
+        }
+      },
+      "removable": {
+        "title": {
+          "value": "Removable",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the removable attribute to add a remove button to the tag.",
+          "type": "text"
+        }
       }
     },
     "textarea": {
@@ -982,15 +1158,66 @@
     },
     "radio": {
       "default": {
+        "description": {
+          "value": "Radios allow the user to select a single option from a group. \\nRadios are designed to be used with radio groups.",
+          "type": "text"
+        },
         "title": {
           "value": "Radio",
           "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
         },
         "description": {
-          "value": "Radios allow the user to select a single option from a group. \nRadios are designed to be used with radio groups.",
+          "value": "The focus event gives the user feedback that the Radio has been focused by the keyboard interaction.",
           "type": "text"
         }
-      }
+      },
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disabled attribute to disable a radio.",
+          "type": "text"
+        }
+      },
+      "sizes": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Add the size attribute to the Radio Group to change the radios’ size.",
+          "type": "text"
+        }
+      },
+      "invalid": {
+        "title": {
+          "value": "Invalid",
+          "type": "text"
+        },
+        "description": {
+          "value": "The invalid status is used to warn the user that the Radio is invalid. For example, if the radio is mandatory and nothing has been checked.",
+          "type": "text"
+        }
+      },
+      "value": {
+        "title": {
+          "value": "Initial Value",
+          "type": "text"
+        },
+        "description": {
+          "value": "To set the initial value and checked state, use the value attribute on the containing radio group.",
+          "type": "text"
+        }
+      },
+      "type": "other"
     }
   },
   "frameworks": {
@@ -1253,4 +1480,4 @@
       }
     }
   }
-}
+}

package/src/figma-tokens/semantic/input.json

@@ -263,4 +263,4 @@
       }
     }
   }
-}
+}