@synergy-design-system/tokens 2.46.0 → 2.47.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.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`
  */

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.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}
  */

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.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;

package/dist/themes/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.0
+ * @synergy-design-system/tokens version 2.46.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -50,9 +50,26 @@
   --syn-border-width-small: 1px; /** Small */
   --syn-border-width-x-large: 4px; /** X Large */
   --syn-breadcrumb-color: var(--syn-color-neutral-500);
+  --syn-button-border-radius-large: var(--syn-input-border-radius-large);
+  --syn-button-border-radius-medium: var(--syn-input-border-radius-medium);
+  --syn-button-border-radius-small: var(--syn-input-border-radius-small);
+  --syn-button-color: var(--syn-interactive-emphasis-color);
+  --syn-button-color-active: var(--syn-interactive-emphasis-color-active);
+  --syn-button-color-hover: var(--syn-interactive-emphasis-color-hover);
+  --syn-button-filled-color-text: inherit;
+  --syn-button-filled-color-text-active: inherit;
+  --syn-button-filled-color-text-hover: inherit;
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-button-outline-color-active: none;
+  --syn-button-outline-color-hover: none;
+  --syn-button-outline-color-text: inherit;
+  --syn-button-outline-color-text-active: var(--syn-color-primary-950);
+  --syn-button-outline-color-text-hover: var(--syn-color-primary-900);
+  --syn-button-text-color-text: var(--syn-button-color);
+  --syn-button-text-color-text-active: var(--syn-button-color-active);
+  --syn-button-text-color-text-hover: var(--syn-button-color-hover);
   --syn-checkbox-border-radius: var(--syn-border-radius-none);
   --syn-color-accent-50: #481700;
   --syn-color-accent-100: #7c310b;
@@ -65,6 +82,17 @@
   --syn-color-accent-800: #ffe685;
   --syn-color-accent-900: #fff2c5;
   --syn-color-accent-950: #fffbea;
+  --syn-color-critical-50: #481700;
+  --syn-color-critical-100: #7c310b;
+  --syn-color-critical-200: #983b08;
+  --syn-color-critical-300: #bb4d02;
+  --syn-color-critical-400: #e27200;
+  --syn-color-critical-500: #f39200;
+  --syn-color-critical-600: #ffbd1b;
+  --syn-color-critical-700: #ffd246;
+  --syn-color-critical-800: #ffe685;
+  --syn-color-critical-900: #fff2c5;
+  --syn-color-critical-950: #fffbea;
   --syn-color-error-50: #4e010a;
   --syn-color-error-100: #8d0f1e;
   --syn-color-error-200: #ab091c;
@@ -248,6 +276,20 @@
   --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
   --syn-link-underline-outline: 7%;
   --syn-logo-color: var(--syn-color-primary-400);
+  --syn-namur-color-border: var(--syn-color-neutral-50);
+  --syn-namur-critical-color: var(--syn-color-critical-600);
+  --syn-namur-critical-color-background: var(--syn-color-critical-100);
+  --syn-namur-error-color: var(--syn-color-error-500);
+  --syn-namur-error-color-background: var(--syn-color-error-100);
+  --syn-namur-icon-color: var(--syn-color-neutral-50);
+  --syn-namur-info-color: var(--syn-color-info-500);
+  --syn-namur-info-color-background: var(--syn-color-info-50);
+  --syn-namur-neutral-color: var(--syn-color-neutral-600);
+  --syn-namur-neutral-color-background: var(--syn-color-neutral-800);
+  --syn-namur-success-color: var(--syn-color-success-500);
+  --syn-namur-success-color-background: var(--syn-color-success-100);
+  --syn-namur-warning-color: var(--syn-color-warning-600);
+  --syn-namur-warning-color-background: var(--syn-color-warning-100);
   --syn-opacity-50: 0.5; /** 50% */
   --syn-option-background-color-active: var(--syn-color-primary-400);
   --syn-option-background-color-hover: var(--syn-color-neutral-100);