@synergy-design-system/tokens 2.46.0 → 2.48.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 2.48.0
+
+### Minor Changes
+
+- [#1138](https://github.com/synergy-design-system/synergy-design-system/pull/1138) [`dc56e6f`](https://github.com/synergy-design-system/synergy-design-system/commit/dc56e6f0ebc08e44b23bdbdaa6fffa03abc26e9e) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-18
+
+  feat: ✨ form element active states (#433)
+
+  This release adds adjustments for `:active` states for various form elements.
+  - `<syn-checkbox>` now has new active states, dependent on if it is checked and unchecked.
+  - `<syn-nav-item>` now has a new active state
+  - `<syn-radio>` will show its active indicator when pressing the associated label, too.
+  - `<syn-switch>` now has new active states, dependent on if it is checked and unchecked.
+
+## 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

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.0
+ * @synergy-design-system/tokens version 2.47.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`
  */
@@ -818,6 +958,11 @@ export const SynInputBackgroundColorHover: string;
  */
 export const SynInputBorderColor: string;
 
+/**
+ * Maps to the css variable `--syn-input-border-color-active`
+ */
+export const SynInputBorderColorActive: string;
+
 /**
  * Maps to the css variable `--syn-input-border-color-disabled`
  */
@@ -983,6 +1128,11 @@ export const SynInputIconColorHover: string;
  */
 export const SynInputIconIconClearableColor: string;
 
+/**
+ * Maps to the css variable `--syn-input-icon-icon-clearable-color-active`
+ */
+export const SynInputIconIconClearableColorActive: string;
+
 /**
  * Maps to the css variable `--syn-input-icon-icon-clearable-color-hover`
  */
@@ -1083,6 +1233,11 @@ export const SynInputSpacingSmall: string;
  */
 export const SynInputWidth: string;
 
+/**
+ * Maps to the css variable `--syn-interactive-background-color-active`
+ */
+export const SynInteractiveBackgroundColorActive: string;
+
 /**
  * Maps to the css variable `--syn-interactive-background-color-hover`
  */
@@ -1208,6 +1363,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`
  */

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.0
+ * @synergy-design-system/tokens version 2.47.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}
  */
@@ -818,6 +958,11 @@ export const SynInputBackgroundColorHover = 'var(--syn-input-background-color-ho
  */
 export const SynInputBorderColor = 'var(--syn-input-border-color)';
 
+/**
+ * @type {string}
+ */
+export const SynInputBorderColorActive = 'var(--syn-input-border-color-active)';
+
 /**
  * @type {string}
  */
@@ -983,6 +1128,11 @@ export const SynInputIconColorHover = 'var(--syn-input-icon-color-hover)';
  */
 export const SynInputIconIconClearableColor = 'var(--syn-input-icon-icon-clearable-color)';
 
+/**
+ * @type {string}
+ */
+export const SynInputIconIconClearableColorActive = 'var(--syn-input-icon-icon-clearable-color-active)';
+
 /**
  * @type {string}
  */
@@ -1083,6 +1233,11 @@ export const SynInputSpacingSmall = 'var(--syn-input-spacing-small)';
  */
 export const SynInputWidth = 'var(--syn-input-width)';
 
+/**
+ * @type {string}
+ */
+export const SynInteractiveBackgroundColorActive = 'var(--syn-interactive-background-color-active)';
+
 /**
  * @type {string}
  */
@@ -1208,6 +1363,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}
  */

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.0
+ * @synergy-design-system/tokens version 2.47.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;
@@ -165,6 +193,7 @@ $SynInputBackgroundColorDisabled: var(--syn-input-background-color-disabled) !de
 $SynInputBackgroundColorFocus: var(--syn-input-background-color-focus) !default;
 $SynInputBackgroundColorHover: var(--syn-input-background-color-hover) !default;
 $SynInputBorderColor: var(--syn-input-border-color) !default;
+$SynInputBorderColorActive: var(--syn-input-border-color-active) !default;
 $SynInputBorderColorDisabled: var(--syn-input-border-color-disabled) !default;
 $SynInputBorderColorFocus: var(--syn-input-border-color-focus) !default;
 $SynInputBorderColorFocusError: var(--syn-input-border-color-focus-error) !default;
@@ -198,6 +227,7 @@ $SynInputHelpTextFontSizeSmall: var(--syn-input-help-text-font-size-small) !defa
 $SynInputIconColor: var(--syn-input-icon-color) !default;
 $SynInputIconColorHover: var(--syn-input-icon-color-hover) !default;
 $SynInputIconIconClearableColor: var(--syn-input-icon-icon-clearable-color) !default;
+$SynInputIconIconClearableColorActive: var(--syn-input-icon-icon-clearable-color-active) !default;
 $SynInputIconIconClearableColorHover: var(--syn-input-icon-icon-clearable-color-hover) !default;
 $SynInputLabelColor: var(--syn-input-label-color) !default;
 $SynInputLabelFontSizeLarge: var(--syn-input-label-font-size-large) !default;
@@ -218,6 +248,7 @@ $SynInputSpacingLarge: var(--syn-input-spacing-large) !default;
 $SynInputSpacingMedium: var(--syn-input-spacing-medium) !default;
 $SynInputSpacingSmall: var(--syn-input-spacing-small) !default;
 $SynInputWidth: var(--syn-input-width) !default;
+$SynInteractiveBackgroundColorActive: var(--syn-interactive-background-color-active) !default;
 $SynInteractiveBackgroundColorHover: var(--syn-interactive-background-color-hover) !default;
 $SynInteractiveEmphasisColor: var(--syn-interactive-emphasis-color) !default;
 $SynInteractiveEmphasisColorActive: var(--syn-interactive-emphasis-color-active) !default;
@@ -243,6 +274,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;