@synergy-design-system/tokens 2.45.0 → 2.47.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 2.47.0
+
+### Minor Changes
+
+- [#1109](https://github.com/synergy-design-system/synergy-design-system/pull/1109) [`6b4b7e2`](https://github.com/synergy-design-system/synergy-design-system/commit/6b4b7e2940b5c87e44d5da6030354ec0e21f2f38) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-16
+
+  feat: ✨ Brand updates for `<syn-button>` (#871)
+  feat: ✨ Brand updates for `<syn-dropdown>` (#949)
+
+## 2.46.0
+
+### Minor Changes
+
+- [#1122](https://github.com/synergy-design-system/synergy-design-system/pull/1122) [`740816b`](https://github.com/synergy-design-system/synergy-design-system/commit/740816b1a86768e7f2fed5516241bdb3a9df4ef7) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-11
+
+  feat: ✨ adjust sizes of form elements (#1083)
+  - `<syn-checkbox>` Bigger checkbox in small and medium
+  - `<syn-radio>` Bigger radio control in small and medium
+  - `<syn-switch>` Larger label and bigger switch control in all sizes
+
 ## 2.45.0
 
 ### Minor Changes

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.44.0
+ * @synergy-design-system/tokens version 2.46.0
  * SICK Global UX Foundation
  */
 
@@ -218,6 +218,51 @@ export const SynBorderWidthXLarge: string;
  */
 export const SynBreadcrumbColor: string;
 
+/**
+ * Maps to the css variable `--syn-button-border-radius-large`
+ */
+export const SynButtonBorderRadiusLarge: string;
+
+/**
+ * Maps to the css variable `--syn-button-border-radius-medium`
+ */
+export const SynButtonBorderRadiusMedium: string;
+
+/**
+ * Maps to the css variable `--syn-button-border-radius-small`
+ */
+export const SynButtonBorderRadiusSmall: string;
+
+/**
+ * Maps to the css variable `--syn-button-color`
+ */
+export const SynButtonColor: string;
+
+/**
+ * Maps to the css variable `--syn-button-color-active`
+ */
+export const SynButtonColorActive: string;
+
+/**
+ * Maps to the css variable `--syn-button-color-hover`
+ */
+export const SynButtonColorHover: string;
+
+/**
+ * Maps to the css variable `--syn-button-filled-color-text`
+ */
+export const SynButtonFilledColorText: string;
+
+/**
+ * Maps to the css variable `--syn-button-filled-color-text-active`
+ */
+export const SynButtonFilledColorTextActive: string;
+
+/**
+ * Maps to the css variable `--syn-button-filled-color-text-hover`
+ */
+export const SynButtonFilledColorTextHover: string;
+
 /**
  * Maps to the css variable `--syn-button-font-size-large`
  */
@@ -233,6 +278,46 @@ export const SynButtonFontSizeMedium: string;
  */
 export const SynButtonFontSizeSmall: string;
 
+/**
+ * Maps to the css variable `--syn-button-outline-color-active`
+ */
+export const SynButtonOutlineColorActive: string;
+
+/**
+ * Maps to the css variable `--syn-button-outline-color-hover`
+ */
+export const SynButtonOutlineColorHover: string;
+
+/**
+ * Maps to the css variable `--syn-button-outline-color-text`
+ */
+export const SynButtonOutlineColorText: string;
+
+/**
+ * Maps to the css variable `--syn-button-outline-color-text-active`
+ */
+export const SynButtonOutlineColorTextActive: string;
+
+/**
+ * Maps to the css variable `--syn-button-outline-color-text-hover`
+ */
+export const SynButtonOutlineColorTextHover: string;
+
+/**
+ * Maps to the css variable `--syn-button-text-color-text`
+ */
+export const SynButtonTextColorText: string;
+
+/**
+ * Maps to the css variable `--syn-button-text-color-text-active`
+ */
+export const SynButtonTextColorTextActive: string;
+
+/**
+ * Maps to the css variable `--syn-button-text-color-text-hover`
+ */
+export const SynButtonTextColorTextHover: string;
+
 /**
  * Maps to the css variable `--syn-checkbox-border-radius`
  */
@@ -293,6 +378,61 @@ export const SynColorAccent900: string;
  */
 export const SynColorAccent950: string;
 
+/**
+ * Maps to the css variable `--syn-color-critical-50`
+ */
+export const SynColorCritical50: string;
+
+/**
+ * Maps to the css variable `--syn-color-critical-100`
+ */
+export const SynColorCritical100: string;
+
+/**
+ * Maps to the css variable `--syn-color-critical-200`
+ */
+export const SynColorCritical200: string;
+
+/**
+ * Maps to the css variable `--syn-color-critical-300`
+ */
+export const SynColorCritical300: string;
+
+/**
+ * Maps to the css variable `--syn-color-critical-400`
+ */
+export const SynColorCritical400: string;
+
+/**
+ * Maps to the css variable `--syn-color-critical-500`
+ */
+export const SynColorCritical500: string;
+
+/**
+ * Maps to the css variable `--syn-color-critical-600`
+ */
+export const SynColorCritical600: string;
+
+/**
+ * Maps to the css variable `--syn-color-critical-700`
+ */
+export const SynColorCritical700: string;
+
+/**
+ * Maps to the css variable `--syn-color-critical-800`
+ */
+export const SynColorCritical800: string;
+
+/**
+ * Maps to the css variable `--syn-color-critical-900`
+ */
+export const SynColorCritical900: string;
+
+/**
+ * Maps to the css variable `--syn-color-critical-950`
+ */
+export const SynColorCritical950: string;
+
 /**
  * Maps to the css variable `--syn-color-error-50`
  */
@@ -1208,6 +1348,76 @@ export const SynLinkUnderlineOutline: string;
  */
 export const SynLogoColor: string;
 
+/**
+ * Maps to the css variable `--syn-namur-color-border`
+ */
+export const SynNamurColorBorder: string;
+
+/**
+ * Maps to the css variable `--syn-namur-critical-color`
+ */
+export const SynNamurCriticalColor: string;
+
+/**
+ * Maps to the css variable `--syn-namur-critical-color-background`
+ */
+export const SynNamurCriticalColorBackground: string;
+
+/**
+ * Maps to the css variable `--syn-namur-error-color`
+ */
+export const SynNamurErrorColor: string;
+
+/**
+ * Maps to the css variable `--syn-namur-error-color-background`
+ */
+export const SynNamurErrorColorBackground: string;
+
+/**
+ * Maps to the css variable `--syn-namur-icon-color`
+ */
+export const SynNamurIconColor: string;
+
+/**
+ * Maps to the css variable `--syn-namur-info-color`
+ */
+export const SynNamurInfoColor: string;
+
+/**
+ * Maps to the css variable `--syn-namur-info-color-background`
+ */
+export const SynNamurInfoColorBackground: string;
+
+/**
+ * Maps to the css variable `--syn-namur-neutral-color`
+ */
+export const SynNamurNeutralColor: string;
+
+/**
+ * Maps to the css variable `--syn-namur-neutral-color-background`
+ */
+export const SynNamurNeutralColorBackground: string;
+
+/**
+ * Maps to the css variable `--syn-namur-success-color`
+ */
+export const SynNamurSuccessColor: string;
+
+/**
+ * Maps to the css variable `--syn-namur-success-color-background`
+ */
+export const SynNamurSuccessColorBackground: string;
+
+/**
+ * Maps to the css variable `--syn-namur-warning-color`
+ */
+export const SynNamurWarningColor: string;
+
+/**
+ * Maps to the css variable `--syn-namur-warning-color-background`
+ */
+export const SynNamurWarningColorBackground: string;
+
 /**
  * Maps to the css variable `--syn-opacity-50`
  */
@@ -1338,6 +1548,11 @@ export const SynRangeTrackColorActive: string;
  */
 export const SynReadonlyBackgroundColor: string;
 
+/**
+ * Maps to the css variable `--syn-spacing-1-5x-large`
+ */
+export const SynSpacing15xLarge: string;
+
 /**
  * Maps to the css variable `--syn-spacing-2x-large`
  */
@@ -1408,6 +1623,36 @@ export const SynSpacingXSmall: string;
  */
 export const SynSpinnerOpacity: string;
 
+/**
+ * Maps to the css variable `--syn-switch-height-large`
+ */
+export const SynSwitchHeightLarge: string;
+
+/**
+ * Maps to the css variable `--syn-switch-height-medium`
+ */
+export const SynSwitchHeightMedium: string;
+
+/**
+ * Maps to the css variable `--syn-switch-height-small`
+ */
+export const SynSwitchHeightSmall: string;
+
+/**
+ * Maps to the css variable `--syn-switch-width-large`
+ */
+export const SynSwitchWidthLarge: string;
+
+/**
+ * Maps to the css variable `--syn-switch-width-medium`
+ */
+export const SynSwitchWidthMedium: string;
+
+/**
+ * Maps to the css variable `--syn-switch-width-small`
+ */
+export const SynSwitchWidthSmall: string;
+
 /**
  * Maps to the css variable `--syn-table-background-color`
  */

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.44.0
+ * @synergy-design-system/tokens version 2.46.0
  * SICK Global UX Foundation
  */
 
@@ -218,6 +218,51 @@ export const SynBorderWidthXLarge = 'var(--syn-border-width-x-large)';
  */
 export const SynBreadcrumbColor = 'var(--syn-breadcrumb-color)';
 
+/**
+ * @type {string}
+ */
+export const SynButtonBorderRadiusLarge = 'var(--syn-button-border-radius-large)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonBorderRadiusMedium = 'var(--syn-button-border-radius-medium)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonBorderRadiusSmall = 'var(--syn-button-border-radius-small)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonColor = 'var(--syn-button-color)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonColorActive = 'var(--syn-button-color-active)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonColorHover = 'var(--syn-button-color-hover)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonFilledColorText = 'var(--syn-button-filled-color-text)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonFilledColorTextActive = 'var(--syn-button-filled-color-text-active)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonFilledColorTextHover = 'var(--syn-button-filled-color-text-hover)';
+
 /**
  * @type {string}
  */
@@ -233,6 +278,46 @@ export const SynButtonFontSizeMedium = 'var(--syn-button-font-size-medium)';
  */
 export const SynButtonFontSizeSmall = 'var(--syn-button-font-size-small)';
 
+/**
+ * @type {string}
+ */
+export const SynButtonOutlineColorActive = 'var(--syn-button-outline-color-active)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonOutlineColorHover = 'var(--syn-button-outline-color-hover)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonOutlineColorText = 'var(--syn-button-outline-color-text)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonOutlineColorTextActive = 'var(--syn-button-outline-color-text-active)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonOutlineColorTextHover = 'var(--syn-button-outline-color-text-hover)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonTextColorText = 'var(--syn-button-text-color-text)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonTextColorTextActive = 'var(--syn-button-text-color-text-active)';
+
+/**
+ * @type {string}
+ */
+export const SynButtonTextColorTextHover = 'var(--syn-button-text-color-text-hover)';
+
 /**
  * @type {string}
  */
@@ -293,6 +378,61 @@ export const SynColorAccent900 = 'var(--syn-color-accent-900)';
  */
 export const SynColorAccent950 = 'var(--syn-color-accent-950)';
 
+/**
+ * @type {string}
+ */
+export const SynColorCritical50 = 'var(--syn-color-critical-50)';
+
+/**
+ * @type {string}
+ */
+export const SynColorCritical100 = 'var(--syn-color-critical-100)';
+
+/**
+ * @type {string}
+ */
+export const SynColorCritical200 = 'var(--syn-color-critical-200)';
+
+/**
+ * @type {string}
+ */
+export const SynColorCritical300 = 'var(--syn-color-critical-300)';
+
+/**
+ * @type {string}
+ */
+export const SynColorCritical400 = 'var(--syn-color-critical-400)';
+
+/**
+ * @type {string}
+ */
+export const SynColorCritical500 = 'var(--syn-color-critical-500)';
+
+/**
+ * @type {string}
+ */
+export const SynColorCritical600 = 'var(--syn-color-critical-600)';
+
+/**
+ * @type {string}
+ */
+export const SynColorCritical700 = 'var(--syn-color-critical-700)';
+
+/**
+ * @type {string}
+ */
+export const SynColorCritical800 = 'var(--syn-color-critical-800)';
+
+/**
+ * @type {string}
+ */
+export const SynColorCritical900 = 'var(--syn-color-critical-900)';
+
+/**
+ * @type {string}
+ */
+export const SynColorCritical950 = 'var(--syn-color-critical-950)';
+
 /**
  * @type {string}
  */
@@ -1208,6 +1348,76 @@ export const SynLinkUnderlineOutline = 'var(--syn-link-underline-outline)';
  */
 export const SynLogoColor = 'var(--syn-logo-color)';
 
+/**
+ * @type {string}
+ */
+export const SynNamurColorBorder = 'var(--syn-namur-color-border)';
+
+/**
+ * @type {string}
+ */
+export const SynNamurCriticalColor = 'var(--syn-namur-critical-color)';
+
+/**
+ * @type {string}
+ */
+export const SynNamurCriticalColorBackground = 'var(--syn-namur-critical-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynNamurErrorColor = 'var(--syn-namur-error-color)';
+
+/**
+ * @type {string}
+ */
+export const SynNamurErrorColorBackground = 'var(--syn-namur-error-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynNamurIconColor = 'var(--syn-namur-icon-color)';
+
+/**
+ * @type {string}
+ */
+export const SynNamurInfoColor = 'var(--syn-namur-info-color)';
+
+/**
+ * @type {string}
+ */
+export const SynNamurInfoColorBackground = 'var(--syn-namur-info-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynNamurNeutralColor = 'var(--syn-namur-neutral-color)';
+
+/**
+ * @type {string}
+ */
+export const SynNamurNeutralColorBackground = 'var(--syn-namur-neutral-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynNamurSuccessColor = 'var(--syn-namur-success-color)';
+
+/**
+ * @type {string}
+ */
+export const SynNamurSuccessColorBackground = 'var(--syn-namur-success-color-background)';
+
+/**
+ * @type {string}
+ */
+export const SynNamurWarningColor = 'var(--syn-namur-warning-color)';
+
+/**
+ * @type {string}
+ */
+export const SynNamurWarningColorBackground = 'var(--syn-namur-warning-color-background)';
+
 /**
  * @type {string}
  */
@@ -1338,6 +1548,11 @@ export const SynRangeTrackColorActive = 'var(--syn-range-track-color-active)';
  */
 export const SynReadonlyBackgroundColor = 'var(--syn-readonly-background-color)';
 
+/**
+ * @type {string}
+ */
+export const SynSpacing15xLarge = 'var(--syn-spacing-1-5x-large)';
+
 /**
  * @type {string}
  */
@@ -1408,6 +1623,36 @@ export const SynSpacingXSmall = 'var(--syn-spacing-x-small)';
  */
 export const SynSpinnerOpacity = 'var(--syn-spinner-opacity)';
 
+/**
+ * @type {string}
+ */
+export const SynSwitchHeightLarge = 'var(--syn-switch-height-large)';
+
+/**
+ * @type {string}
+ */
+export const SynSwitchHeightMedium = 'var(--syn-switch-height-medium)';
+
+/**
+ * @type {string}
+ */
+export const SynSwitchHeightSmall = 'var(--syn-switch-height-small)';
+
+/**
+ * @type {string}
+ */
+export const SynSwitchWidthLarge = 'var(--syn-switch-width-large)';
+
+/**
+ * @type {string}
+ */
+export const SynSwitchWidthMedium = 'var(--syn-switch-width-medium)';
+
+/**
+ * @type {string}
+ */
+export const SynSwitchWidthSmall = 'var(--syn-switch-width-small)';
+
 /**
  * @type {string}
  */

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.44.0
+ * @synergy-design-system/tokens version 2.46.0
  * SICK Global UX Foundation
  */
 $SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;
@@ -45,9 +45,26 @@ $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;
@@ -60,6 +77,17 @@ $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;
 $SynColorError50: var(--syn-color-error-50) !default;
 $SynColorError100: var(--syn-color-error-100) !default;
 $SynColorError200: var(--syn-color-error-200) !default;
@@ -243,6 +271,20 @@ $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;
@@ -269,6 +311,7 @@ $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;
+$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;
@@ -283,6 +326,12 @@ $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;