@synergy-design-system/mcp 1.38.5 → 1.40.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 1.40.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.
+
+## 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

package/metadata/checksum.txt

@@ -1 +1 @@
-f3d1570f48a5e4ab32df16eeee906a50
+b5c9690dc359d540101b8ccb74086919

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-checkbox/component.custom.styles.ts

@@ -17,6 +17,13 @@ export default css`
     margin: 0.1em 0;
   }
 
+  /* Checked/indeterminate */
+  .checkbox--checked .checkbox__control,
+  .checkbox--indeterminate .checkbox__control {
+    background-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));  
+    border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));  
+  }
+
   :host([data-user-invalid]) .checkbox__control {
     background: var(--syn-input-border-color-focus-error);
     border-color: var(--syn-input-border-color-focus-error);
@@ -49,8 +56,26 @@ export default css`
    */
   .checkbox.checkbox--checked:not(.checkbox--disabled):hover .checkbox__control,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled):hover .checkbox__control {
-    background-color: var(--syn-color-primary-900);
-    border-color: var(--syn-color-primary-900);
+    background-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+  }
+
+  /*
+   * #443: Add active styles
+   * The checked and unchecked states have different active colors
+   * Note the fallback is defined to match the hover color.
+   * This is done to make sure no active state is shown at all if no active color is defined.
+   * Still better than showing one for the unchecked state but not for the checked state.
+   */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):active .checkbox__control {
+    border-color: var(--syn-input-border-color-active);
+  }
+
+  /* Checked/indeterminate */
+  .checkbox.checkbox--checked:not(.checkbox--disabled):active .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):active .checkbox__control {
+    background: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-900));
+    border-color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-900));
   }
 
   .checkbox__label {

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

@@ -123,6 +123,14 @@ export default css`
     opacity: 1;
   }
 
+  /**
+   * #443: Add support for active state
+   */
+  .nav-item:not(.nav-item--disabled):active::before {
+    background: var(--syn-interactive-background-color-active, var(--syn-color-neutral-50));
+    opacity: 1;
+  }
+
   /**
    * When using horizontal, the background should extend the element
    * on the left and right so the animation for the indicator can be seen

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

@@ -22,26 +22,32 @@ export default css`
     border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
   }
 
+  /* Reset original hover */
+  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
+    background: inherit;
+    border-color: inherit;
+  }
+
   /* Checked + hover */
-  .radio.radio--checked:not(.radio--disabled) .radio__control:hover  {
+  .radio.radio--checked:not(.radio--disabled):hover .radio__control  {
     background-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-950));
     border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-950));
   }
 
   /* Checked + active */
-  .radio.radio--checked:not(.radio--disabled) .radio__control:active  {
+  .radio.radio--checked:not(.radio--disabled):active .radio__control  {
     background-color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
     border-color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
   }
 
   /* Not-Checked + Hover */
-  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
+  .radio:not(.radio--checked):not(.radio--disabled):hover .radio__control {
     border-color: var(--syn-input-border-color-hover);
   }
 
   /* Not-Checked + active */
-  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:active {
-    border-color: var(--syn-color-neutral-1000);
+  .radio:not(.radio--checked):not(.radio--disabled):active .radio__control {
+    border-color: var(--syn-input-border-color-active, var(--syn-color-neutral-1000));
   }
 
   /* Fix#456: Multi line radio fixes */

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

@@ -61,27 +61,44 @@ export default css`
     background-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
     border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
   }
-
+  
   /* Hover */
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
+  .switch:not(.switch--checked):not(.switch--disabled):hover .switch__control {
     background-color: var(--syn-input-icon-icon-clearable-color-hover);
     border-color: var(--syn-input-icon-icon-clearable-color-hover);
   }
 
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
+  .switch:not(.switch--checked):not(.switch--disabled):hover .switch__control:hover .switch__thumb {
     background-color: var(--syn-color-neutral-0);
   }
 
   /* Checked + hover */
-  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
+  .switch.switch--checked:not(.switch--disabled):hover .switch__control {
     background-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
     border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
   }
 
-  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
+  .switch.switch--checked:not(.switch--disabled):hover .switch__control:hover .switch__thumb {
     background-color: var(--syn-color-neutral-0);
   }
 
+  /*
+   * #443: Add active styles
+   * The checked and unchecked states have different active colors
+   * Note the fallback is defined to match the hover color.
+   * This is done to make sure no active state is shown at all if no active color is defined.
+   * Still better than showing one for the unchecked state but not for the checked state.
+   */
+  .switch:not(.switch--checked):not(.switch--disabled):active .switch__control {
+    background: var(--syn-input-icon-icon-clearable-color-active);
+    border-color: var(--syn-input-icon-icon-clearable-color-active);
+  }
+
+  .switch.switch--checked:not(.switch--disabled):active .switch__control {
+    background: var(--syn-interactive-emphasis-color-active);
+    border-color: var(--syn-interactive-emphasis-color-active);
+  }
+
   /* Focus */
   .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
     background-color: var(--syn-input-icon-icon-clearable-color);
@@ -117,7 +134,7 @@ export default css`
     border-color: var(--syn-input-border-color-focus-error, var(--syn-color-error-700));
   }
 
-  :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
+  :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled):hover .switch__control {
     background-color: var(--syn-input-border-color-hover, var(--syn-color-error-900));
     border-color: var(--syn-input-border-color-hover, var(--syn-color-error-900));
   }

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,38 @@
 # Changelog
 
+## 2.76.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.
+
+### Patch Changes
+
+- Updated dependencies [[`dc56e6f`](https://github.com/synergy-design-system/synergy-design-system/commit/dc56e6f0ebc08e44b23bdbdaa6fffa03abc26e9e)]:
+  - @synergy-design-system/tokens@2.48.0
+
+## 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
@@ -29,7 +62,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,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/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.46.0
+ * @synergy-design-system/tokens version 2.47.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;
@@ -170,6 +198,7 @@
   --syn-input-background-color-focus: var(--syn-input-background-color);
   --syn-input-background-color-hover: var(--syn-input-background-color);
   --syn-input-border-color: var(--syn-color-neutral-700);
+  --syn-input-border-color-active: var(--syn-color-neutral-1000);
   --syn-input-border-color-disabled: var(--syn-color-neutral-700);
   --syn-input-border-color-focus: var(--syn-color-neutral-950);
   --syn-input-border-color-focus-error: var(--syn-color-error-700);
@@ -203,6 +232,7 @@
   --syn-input-icon-color: var(--syn-color-neutral-800);
   --syn-input-icon-color-hover: var(--syn-color-neutral-800);
   --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
+  --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
   --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
   --syn-input-label-color: var(--syn-color-neutral-950);
   --syn-input-label-font-size-large: var(--syn-font-size-large);
@@ -223,6 +253,7 @@
   --syn-input-spacing-medium: var(--syn-spacing-medium);
   --syn-input-spacing-small: var(--syn-spacing-small);
   --syn-input-width: var(--syn-border-width-small);
+  --syn-interactive-background-color-active: var(--syn-color-neutral-300);
   --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
   --syn-interactive-emphasis-color: var(--syn-color-primary-600);
   --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
@@ -248,6 +279,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);