@synergy-design-system/mcp 1.38.4 → 1.39.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 1.39.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)
+
+## 1.38.5
+
+### Patch Changes
+
+- [#1134](https://github.com/synergy-design-system/synergy-design-system/pull/1134) [`53bd655`](https://github.com/synergy-design-system/synergy-design-system/commit/53bd655f465b76c2aa7d57449750b99e8fcfb500) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-16
+
+  fix: 🐛 Adjust `<syn-option>` and `<syn-menu-item>` interactive background (#1127)
+
+  Minor adjustments for `<syn-option>` and `<syn-menu-item>` hover and focus states to better mimic the effects as detailed in Figma for the SICK 2025 themes.
+  Both components now use a combination of `background` and `border-radius` to show the `<syn-option>` with an inset highlight color, allowing to better match the wanted spacings.
+
 ## 1.38.4
 
 ### Patch Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-6a2396efaec02a827d527a41ab32d3e0
+7487440271c227c317e857fa8014c08f

package/metadata/packages/components/components/syn-button/component.custom.styles.ts

@@ -10,6 +10,11 @@ export default css`
     outline-offset: var(--syn-focus-ring-width);
   }
 
+  /** #429: Use token for opacity */
+  .button--disabled {
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
   /*
    * Adjustments for button label paddings
    * @see https://github.com/synergy-design-system/synergy-design-system/issues/243
@@ -62,42 +67,61 @@ export default css`
     vertical-align: -8px;
   }
 
-
   /**
    * Size modifiers
    */
-  .button.button--medium.button--has-label .button__label {
-    font-size: var(--syn-font-size-medium);
-  } 
+  .button--small {
+    border-radius: var(--syn-button-border-radius-small, var(--syn-input-border-radius-small));
+  }
+
+  .button--medium {
+    border-radius: var(--syn-button-border-radius-medium, var(--syn-input-border-radius-medium));
+  }
 
-  .button.button--large.button--has-label .button__label {
-    font-size: var(--syn-font-size-large);
+  .button--large {
+    border-radius: var(--syn-button-border-radius-large, var(--syn-input-border-radius-large));
   }
 
   /*
    * Standard buttons
    */
+  .button--filled.button--primary {
+    background: var(--syn-button-color, var(--syn-color-primary-600));
+    border-color: var(--syn-button-color, var(--syn-color-primary-600));
+    color: var(--syn-button-filled-color-text, var(--syn-color-neutral-0));
+  }
+
   .button--filled.button--primary.button--disabled {
     background-color: var(--syn-color-neutral-600);
     border-color: var(--syn-color-neutral-600);
-    color: var(--syn-color-neutral-0);
+    color: var(--syn-typography-color-text-inverted);
   }
 
   .button--filled.button--primary:hover:not(.button--disabled) {
-    background-color: var(--syn-color-primary-900);
-    border-color: var(--syn-color-primary-900);
-    color: var(--syn-color-neutral-0);
+    background-color: var(--syn-button-color-hover, var(--syn-color-primary-900));
+    border-color: var(--syn-button-color-hover, var(--syn-color-primary-900));
+    color: var(--syn-button-filled-color-text-hover, var(--syn-color-neutral-0));
   }
 
   .button--filled.button--primary:active:not(.button--disabled) {
-    background-color: var(--syn-color-primary-950);
-    border-color: var(--syn-color-primary-950);
-    color: var(--syn-color-neutral-0);
+    background-color: var(--syn-button-color-active, var(--syn-color-primary-900));
+    border-color: var(--syn-button-color-active, var(--syn-color-primary-900));
+    color: var(--syn-button-filled-color-text-active, var(--syn-color-neutral-0));
   }
 
   /*
    * Outline buttons
    */
+  .button--outline {
+    /** #901: Use token for border width */
+    border-width: var(--syn-input-border-width);
+  }
+
+  .button--outline.button--primary {
+    border-color: var(--syn-button-color, var(--syn-color-primary-600));
+    color: var(--syn-button-outline-color-text, var(--syn-color-primary-600));
+  }
+
   .button--outline.button--primary.button--disabled {
     background: none;
     border-color: var(--syn-color-neutral-600);
@@ -106,28 +130,34 @@ export default css`
 
   .button--outline.button--primary:hover:not(.button--disabled),
   .button--outline.button--primary.button--checked:not(.button--disabled) {
-    background: none;
-    border-color: var(--syn-color-primary-900);
-    color: var(--syn-color-primary-900);
+    background-color: var(--syn-button-outline-color-hover, var(--syn-color-primary-900));
+    border-color: var(--syn-button-outline-color-hover, var(--syn-color-primary-900));
+    color: var(--syn-button-outline-color-text-hover, var(--syn-color-neutral-0));
   }
 
   .button--outline.button--primary:active:not(.button--disabled) {
-    background: inherit;
-    border-color:  var(--syn-color-primary-950);
-    color:  var(--syn-color-primary-950);
+    background-color: var(--syn-button-outline-color-active, var(--syn-color-primary-950));
+    border-color: var(--syn-button-outline-color-active, var(--syn-color-primary-950));
+    color: var(--syn-button-outline-color-text-active, var(--syn-color-neutral-0));
   }
 
   /*
    * Text buttons
    */
+  .button--text {
+    color: var(--syn-button-text-color-text, var(--syn-color-primary-600));
+  }
+
   .button--text:hover:not(.button--disabled) {
-    color: var(--syn-color-primary-900);
+    color: var(--syn-button-text-color-text-hover, var(--syn-color-primary-900));
+  }
+
+  .button--text:focus-visible:not(.button--disabled) {
+    color: var(--syn-button-color, var(--syn-color-primary-500));
   }
 
   .button--text.button--primary:active:not(.button--disabled) {
-    background: inherit;
-    border-color: transparent;
-    color:  var(--syn-color-primary-950);
+    color: var(--syn-button-text-color-text-active, var(--syn-color-primary-950));
   }
 
   .button--text.button--primary.button--disabled {
@@ -184,11 +214,6 @@ export default css`
     font-size: var(--syn-font-size-2x-large);
   }
 
-  /** #429: Use token for opacity */
-  .button--disabled { 
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
   /*
    * Caret modifier
    */

package/metadata/packages/components/components/syn-menu-item/component.custom.styles.ts

@@ -4,28 +4,43 @@ export default css`
   :host {
     /* Custom override for hiding the checkmark in menus it is not needed */
     --display-checkmark: flex;
+
+    /**
+     * Default size settings for menu-item
+     * This prepares the custom sizes that we will add later on
+     * @see https://github.com/synergy-design-system/design/issues/277
+     */
+    --menuitem-inset-border-horizontal: var(--syn-spacing-2x-small);
+    --menuitem-inset-border-vertical: calc(var(--syn-spacing-x-small) - 1px);
+    --menuitem-min-height: var(--syn-input-height-medium);
+    --menuitem-padding: var(--syn-input-spacing-medium);
+    --menuitem-font-size: var(--syn-input-font-size-medium);
+    --menuitem-icon-size: var(--syn-spacing-large);
   }
 
   .menu-item {
+    align-items: center;
+
     /*
-     * #958: Brand2025 defines a small gap between menu items
-     * and rounded corners. We achieve that using an outline
+     * #1127: Brand2025 defines a small gap between options
+     * and rounded corners. We achieve that using an border
      * that simulates the gap using the menu background color.
      */
-    --outline: calc(var(--syn-focus-ring-border-radius) * 1.5);
-    
-    border-radius: calc(var(--outline) * 1.5);
+    border: solid var(--syn-panel-background-color);
+
+    /* Border Radius needs to be increased to cover the outline */
+    border-radius: calc(var(--syn-focus-ring-border-radius) + var(--menuitem-inset-border-vertical));
+    border-width: var(--menuitem-inset-border-horizontal) var(--menuitem-inset-border-vertical);
     color: var(--syn-option-color, var(--syn-typography-color-text));
-    font-size: var(--syn-font-size-medium);
-    outline: var(--outline) solid var(--syn-panel-background-color);
-    outline-offset: calc(var(--outline) * -1 + 1px);
-    padding: var(--syn-spacing-small) var(--syn-spacing-medium);
+    font-size: var(--menuitem-font-size);
+
+    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
+    min-height: var(--menuitem-min-height, var(--syn-input-height-medium));
+    padding: 0 calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
   }
 
   :host(:focus-visible) .menu-item {
     background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
-    outline: var(--outline) solid var(--syn-panel-background-color);
-    outline-offset: calc(var(--outline) * -1 + 1px);
   }
 
   /** #429: Use token for opacity */
@@ -146,7 +161,7 @@ export default css`
 
     color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));
     font-size: var(--syn-font-size-medium);
-    left: var(--syn-spacing-medium);
+    left: calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
   }
 
   /**

package/metadata/packages/components/components/syn-optgroup/component.styles.ts

@@ -13,6 +13,8 @@ export default css`
 
   .optgroup__label-container {
     align-items: center;
+    border: solid transparent;
+    border-width: 0 var(--option-inset-border-vertical);
     box-sizing: border-box;
     color: var(--syn-input-color);
     display: flex;
@@ -26,7 +28,7 @@ export default css`
   .optgroup--has-prefix .optgroup__label-container,
   .optgroup--has-label .optgroup__label-container,
   .optgroup--has-suffix .optgroup__label-container {
-    padding: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));
+    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));
   }
 
   /**

package/metadata/packages/components/components/syn-option/component.custom.styles.ts

@@ -15,19 +15,24 @@ export default css`
   .option {
     /*
      * #988: Brand2025 defines a small gap between options
-     * and rounded corners. We achieve that using an outline
+     * and rounded corners. We achieve that using an border
      * that simulates the gap using the menu background color.
      */
-    --outline: calc(var(--syn-focus-ring-border-radius) * 1.5);
+    border: solid var(--syn-panel-background-color);
 
-    border-radius: calc(var(--outline) * 1.5);
+    /**
+     * Border Radius needs to be increased to cover the outline
+     * Note this also needs to take the following into account:
+     * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to "0"
+     * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring
+     */
+    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 1px);
+    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);
     font-size: var(--option-font-size, var(--syn-font-size-medium));
 
     /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
     min-height: var(--option-min-height, var(--syn-input-height-medium));
-    outline: var(--outline) solid var(--syn-panel-background-color);
-    outline-offset: calc(var(--outline) * -1 + 1px);
-    padding: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));    
+    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));
   }
 
   .option:not(.option--current) {

package/metadata/packages/components/migration/migration-synergy-v3.md

@@ -1,10 +1,5 @@
 # Migration to SICK 2025
 
-> ⚠️ **Update in progress:** Some features may not be fully implemented yet. See the [GitHub SICK 2025 theme update board](https://github.com/orgs/synergy-design-system/projects/2/views/37) for updates.
->
-> It is currently not advised to use the new version in production, as we are still finalizing the update process.
-> However, you can start preparing your codebase for the upcoming changes.
-
 This guide details all steps that are needed to migrate from the SICK 2018 to the new SICK 2025 theme.
 This guide assumes you are using Synergy version 2.
 Synergy version 3 will apply most manual steps outlined in this guide automatically.

package/metadata/packages/components/static/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 2.75.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)
+
+### Patch Changes
+
+- Updated dependencies [[`6b4b7e2`](https://github.com/synergy-design-system/synergy-design-system/commit/6b4b7e2940b5c87e44d5da6030354ec0e21f2f38)]:
+  - @synergy-design-system/tokens@2.47.0
+
+## 2.74.4
+
+### Patch Changes
+
+- [#1134](https://github.com/synergy-design-system/synergy-design-system/pull/1134) [`53bd655`](https://github.com/synergy-design-system/synergy-design-system/commit/53bd655f465b76c2aa7d57449750b99e8fcfb500) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-16
+
+  fix: 🐛 Adjust `<syn-option>` and `<syn-menu-item>` interactive background (#1127)
+
+  Minor adjustments for `<syn-option>` and `<syn-menu-item>` hover and focus states to better mimic the effects as detailed in Figma for the SICK 2025 themes.
+  Both components now use a combination of `background` and `border-radius` to show the `<syn-option>` with an inset highlight color, allowing to better match the wanted spacings.
+
 ## 2.74.3
 
 ### Patch Changes
@@ -18,7 +43,7 @@
 
   fix: 🐛 `<syn-alert>` close icon should be aligned to top (#1135)
 
-  Fixes an issue that was introduces in version `2.74.0`.
+  Fixes an issue that was introduced in version `2.74.0`.
   The close icons is now always aligned to the top of the `<syn-alert>` again.
 
 ## 2.74.1

package/metadata/packages/tokens/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/metadata/packages/tokens/dark.css

@@ -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);

package/metadata/packages/tokens/index.js

@@ -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}
  */