@synergy-design-system/mcp 1.41.2 → 2.1.0

package/metadata/packages/components/components/syn-button-group/component.angular.ts

@@ -52,4 +52,28 @@ devices when interacting with the control and is strongly recommended.
   get label(): SynButtonGroup['label'] {
     return this.nativeElement.label;
   }
+
+  /**
+   * The button-groups size.
+   * This affects all buttons within the group.
+   */
+  @Input()
+  set size(v: SynButtonGroup['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynButtonGroup['size'] {
+    return this.nativeElement.size;
+  }
+
+  /**
+   * The button-group's theme variant.
+   * This affects all buttons within the group.
+   */
+  @Input()
+  set variant(v: SynButtonGroup['variant']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
+  }
+  get variant(): SynButtonGroup['variant'] {
+    return this.nativeElement.variant;
+  }
 }

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

@@ -0,0 +1,5 @@
+import { css } from 'lit';
+
+export default css`
+  /* Write custom CSS here */
+`;

package/metadata/packages/components/components/syn-button-group/component.ts

@@ -11,7 +11,11 @@ import { property, query, state } from 'lit/decorators.js';
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './button-group.styles.js';
+import customStyles from './button-group.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
+import type SynButton from '../button/button.component.js';
+import type SynRadioButton from '../radio-button/radio-button.component.js';
+import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 
 /**
  * @summary Button groups can be used to group related buttons into sections.
@@ -23,8 +27,9 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart base - The component's base wrapper.
  */
+@enableDefaultSettings('SynButtonGroup')
 export default class SynButtonGroup extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
 
   @query('slot') defaultSlot: HTMLSlotElement;
 
@@ -36,6 +41,14 @@ export default class SynButtonGroup extends SynergyElement {
    */
   @property() label = '';
 
+  /** The button-groups size. This affects all buttons within the group. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** The button-group's theme variant. This affects all buttons within the group. */
+  @property({ reflect: true }) variant: 'filled' | 'outline' = 'outline';
+
+  private mutationObserver: MutationObserver;
+
   private handleFocus(event: Event) {
     const button = findButton(event.target as HTMLElement);
     button?.toggleAttribute('data-syn-button-group__button--focus', true);
@@ -61,9 +74,15 @@ export default class SynButtonGroup extends SynergyElement {
 
     slottedElements.forEach(el => {
       const index = slottedElements.indexOf(el);
-      const button = findButton(el);
+      const button = findButton(el) as SynButton | SynRadioButton;
 
       if (button) {
+        button.size = this.size;
+
+        if (button.tagName.toLowerCase() === 'syn-button') {
+          (button as SynButton).variant = this.variant;
+        }
+
         button.toggleAttribute('data-syn-button-group__button', true);
         button.toggleAttribute('data-syn-button-group__button--first', index === 0);
         button.toggleAttribute('data-syn-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
@@ -76,6 +95,62 @@ export default class SynButtonGroup extends SynergyElement {
     });
   }
 
+  firstUpdated() {
+    const startObserving = () => {
+      this.mutationObserver.observe(this, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['size', 'variant'],
+      });
+    };
+
+    this.mutationObserver = new MutationObserver((entries) => {
+      // Temporarily disconnect to prevent infinite loop
+      this.mutationObserver.disconnect();
+
+      // Check if the button-group itself changed or its children
+      const buttonGroupChanged = entries.some(entry => entry.target === this);
+      const childrenChanged = entries.some(entry => entry.target !== this);
+
+      if (childrenChanged) {
+        // Handle child button changes (existing logic)
+        entries
+          .filter(entry => entry.target !== this)
+          .forEach(entry => {
+            const target = entry.target as HTMLElement;
+            const button = findButton(target) as SynButton | SynRadioButton;
+
+            if (button) {
+              // Unset the size property to allow button-group to control it
+              button.size = undefined as any;
+
+              // Also unset variant for syn-buttons
+              if (button.tagName.toLowerCase() === 'syn-button') {
+                (button as SynButton).variant = undefined as any;
+              }
+            }
+          });
+      }
+
+      // Handle both cases: button-group changes and child changes
+      if (buttonGroupChanged || childrenChanged) {
+        this.handleSlotChange();
+      }
+      
+      // Reconnect observer after changes are done
+      this.updateComplete.then(() => {
+        startObserving();
+      });
+    });
+
+    startObserving();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
+  }
+
   render() {
     // eslint-disable-next-line lit-a11y/mouse-events-have-key-events
     return html`

package/metadata/packages/components/components/syn-button-group/component.vue

@@ -35,6 +35,18 @@ const props = defineProps<{
 devices when interacting with the control and is strongly recommended.
  */
   label?: SynButtonGroup['label'];
+
+  /**
+   * The button-groups size.
+   * This affects all buttons within the group.
+   */
+  size?: SynButtonGroup['size'];
+
+  /**
+   * The button-group's theme variant.
+   * This affects all buttons within the group.
+   */
+  variant?: SynButtonGroup['variant'];
 }>();
 
 // Make sure prop binding only forwards the props that are actually there.

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

@@ -11,7 +11,7 @@ export default css`
   }
 
   .checkbox__control {
-    border-radius: var(--syn-checkbox-border-radius, var(--syn-input-border-radius-small));
+    border-radius: var(--syn-checkbox-border-radius);
 
     /* #1083: This adds spacing around multi-line labels */
     margin: 0.1em 0;
@@ -20,8 +20,8 @@ export default css`
   /* 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));  
+    background-color: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
   }
 
   :host([data-user-invalid]) .checkbox__control {
@@ -56,8 +56,8 @@ 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-interactive-emphasis-color-hover, var(--syn-color-primary-900));
-    border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    background-color: var(--syn-interactive-emphasis-color-hover);
+    border-color: var(--syn-interactive-emphasis-color-hover);
   }
 
   /*
@@ -74,8 +74,8 @@ export default css`
   /* 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));
+    background: var(--syn-interactive-emphasis-color-active);
+    border-color: var(--syn-interactive-emphasis-color-active);
   }
 
   .checkbox__label {

package/metadata/packages/components/components/syn-combobox/component.angular.ts

@@ -242,23 +242,6 @@ and `hide()` methods and this attribute will reflect the combobox's open state.
     return this.nativeElement.open;
   }
 
-  /**
-* Enable this option to prevent the listbox from being clipped,
-when the component is placed inside a container with `overflow: auto|scroll`.
-Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-
-@deprecated This property is deprecated and will be removed in the next major version.
- */
-  @Input()
-  set hoist(v: '' | SynCombobox['hoist']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.hoist = v === '' || v),
-    );
-  }
-  get hoist(): SynCombobox['hoist'] {
-    return this.nativeElement.hoist;
-  }
-
   /**
    * The combobox's label.
    * If you need to display HTML, use the `label` slot instead.

package/metadata/packages/components/components/syn-combobox/component.ts

@@ -169,14 +169,6 @@ export default class SynCombobox extends SynergyElement implements SynergyFormCo
    */
   @property({ reflect: true, type: Boolean }) open = false;
 
-  /**
-   * Enable this option to prevent the listbox from being clipped,
-   * when the component is placed inside a container with `overflow: auto|scroll`.
-   * Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-   * @deprecated This property is deprecated and will be removed in the next major version.
-   */
-  @property({ type: Boolean }) hoist = false;
-
   /** The combobox's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
@@ -1002,7 +994,6 @@ export default class SynCombobox extends SynergyElement implements SynergyFormCo
               'combobox--top': this.placement === 'top',
             })}
             placement=${`${this.placement}-start`}
-            strategy=${this.hoist ? 'fixed' : 'absolute'}
             flip
             shift
             sync="width"

package/metadata/packages/components/components/syn-combobox/component.vue

@@ -120,15 +120,6 @@ and `hide()` methods and this attribute will reflect the combobox's open state.
  */
   open?: SynCombobox['open'];
 
-  /**
-* Enable this option to prevent the listbox from being clipped,
-when the component is placed inside a container with `overflow: auto|scroll`.
-Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-
-@deprecated This property is deprecated and will be removed in the next major version.
- */
-  hoist?: SynCombobox['hoist'];
-
   /**
    * The combobox's label.
    * If you need to display HTML, use the `label` slot instead.

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

@@ -39,7 +39,7 @@ export default css`
    * we have to adjust the rotation of the icon when the details is open.
    */
   .details--open .details__summary-icon {
-    rotate: var(--syn-details-open-rotation, 360deg);
+    rotate: var(--syn-details-open-rotation);
   }
 
   /**

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

@@ -33,7 +33,7 @@ export default css`
   /* Overlay Background */
   .dialog__overlay {
     /* #946: Add background blur for sick 2025 */
-    backdrop-filter: blur(var(--syn-overlay-background-blur, 0));
+    backdrop-filter: blur(var(--syn-overlay-background-blur));
   }
 
   /**

package/metadata/packages/components/components/syn-dropdown/component.angular.ts

@@ -154,23 +154,6 @@ dropdowns that allow for multiple interactions.
     return this.nativeElement.skidding;
   }
 
-  /**
-* Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-`overflow: auto|scroll`.
-* Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-
-@deprecated This property is deprecated and will be removed in the next major version.
- */
-  @Input()
-  set hoist(v: '' | SynDropdown['hoist']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.hoist = v === '' || v),
-    );
-  }
-  get hoist(): SynDropdown['hoist'] {
-    return this.nativeElement.hoist;
-  }
-
   /**
    * Syncs the popup width or height to that of the trigger element.
    */

package/metadata/packages/components/components/syn-dropdown/component.ts

@@ -108,13 +108,6 @@ export default class SynDropdown extends SynergyElement {
   /** The distance in pixels from which to offset the panel along its trigger. */
   @property({ type: Number }) skidding = 0;
 
-  /**
-   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-    * @deprecated This property is deprecated and will be removed in the next major version.
-   */
-  @property({ type: Boolean }) hoist = false;
-
   /**
    * Syncs the popup width or height to that of the trigger element.
    */
@@ -438,7 +431,6 @@ export default class SynDropdown extends SynergyElement {
         placement=${this.placement}
         distance=${this.distance}
         skidding=${this.skidding}
-        strategy=${this.hoist ? 'fixed' : 'absolute'}
         flip
         shift
         auto-size="vertical"

package/metadata/packages/components/components/syn-dropdown/component.vue

@@ -84,15 +84,6 @@ dropdowns that allow for multiple interactions.
    */
   skidding?: SynDropdown['skidding'];
 
-  /**
-* Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-`overflow: auto|scroll`.
-* Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-
-@deprecated This property is deprecated and will be removed in the next major version.
- */
-  hoist?: SynDropdown['hoist'];
-
   /**
    * Syncs the popup width or height to that of the trigger element.
    */

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

@@ -77,13 +77,13 @@ export default css`
    */
   .form-control--user-dragging:not([disabled]) .button::part(base) {
     background: none;
-    border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
-    color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    border-color: var(--syn-interactive-emphasis-color-hover);
+    color: var(--syn-interactive-emphasis-color-hover);
   }
 
   /* Drop Area */
   .droparea {
-    --highlight-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    --highlight-color: var(--syn-interactive-emphasis-color);
 
     border: var(--syn-input-border-width) dashed var(--syn-input-border-color);
     border-radius: var(--syn-input-border-radius-medium);
@@ -93,7 +93,7 @@ export default css`
   }
 
   .droparea:focus-visible {
-    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color);
     outline: var(--syn-focus-ring);
     outline-offset: var(--syn-focus-ring-offset);
   }
@@ -161,12 +161,12 @@ export default css`
 
   :host(:not([disabled])) .form-control--user-dragging .droparea {
     background: var(--syn-color-primary-50);
-    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color);
     cursor: pointer;
   }
 
   :host(:not([disabled])) .droparea:not(:focus-visible):hover {
-    --highlight-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    --highlight-color: var(--syn-interactive-emphasis-color-hover);
 
     border: var(--syn-input-border-width) dashed var(--syn-input-border-color-hover);
     cursor: pointer;

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

@@ -7,7 +7,7 @@ export default css`
 
   .header {
     background: var(--syn-panel-background-color);
-    box-shadow: inset 0 -1px 0 0 var(--syn-header-border-color, var(--syn-color-neutral-400));
+    box-shadow: inset 0 -1px 0 0 var(--syn-header-border-color);
   }
 
   /**
@@ -39,7 +39,7 @@ export default css`
    */
   .header__logo ::slotted(a),
   .header__logo ::slotted(a:hover) {
-    color: var(--syn-logo-color, var(--syn-color-primary-600));
+    color: var(--syn-logo-color);
   }
 
   .header__logo ::slotted(a:is(:focus-visible)) {
@@ -52,7 +52,7 @@ export default css`
    */
   .header__logo syn-icon,
   .header__logo syn-icon::part(svg) {
-    color: var(--syn-logo-color, var(--syn-color-primary-600));
+    color: var(--syn-logo-color);
     height: 32px;
     width: auto;
   }
@@ -78,7 +78,7 @@ export default css`
   }
 
   .header__meta-navigation ::slotted(*) {
-    color: var(--syn-interactive-quiet-color, var(--syn-color-neutral-950));
+    color: var(--syn-interactive-quiet-color);
     display: contents;
     font-size: var(--syn-font-size-x-large);
   }
@@ -97,7 +97,7 @@ export default css`
     align-items: center;
     background: none;
     border: none;
-    color: var(--syn-interactive-quiet-color, var(--syn-color-neutral-950));
+    color: var(--syn-interactive-quiet-color);
     cursor: pointer;
     display: flex;
     font-size: var(--syn-font-size-x-large);
@@ -107,11 +107,11 @@ export default css`
   }
 
   .header__burger-menu-toggle:hover {
-    color: var(--syn-interactive-quiet-color-hover, var(--syn-color-primary-600));
+    color: var(--syn-interactive-quiet-color-hover);
   }
 
   .header__burger-menu-toggle:active {
-    color: var(--syn-interactive-quiet-color-active, var(--syn-color-primary-700));
+    color: var(--syn-interactive-quiet-color-active);
   }
 
   .header__burger-menu-toggle:focus-visible {

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

@@ -16,7 +16,7 @@ export default css`
 
   /* Remove round borders */
   .icon-button:focus-visible {
-    border-radius: var(--syn-icon-button-focus-ring-border-radius, var(--syn-border-radius-none));
+    border-radius: var(--syn-icon-button-focus-ring-border-radius);
   }
 
   /* Colors */
@@ -26,31 +26,31 @@ export default css`
 
   :host([color="primary"]),
   :host([color="primary"]) .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    color: var(--syn-interactive-emphasis-color);
   }
 
   :host([color="primary"]) .icon-button:hover:not(.icon-button--disabled) {
-    color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    color: var(--syn-interactive-emphasis-color-hover);
   }
 
   :host([color="primary"]) .icon-button:active:not(.icon-button--disabled) {
-    color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
+    color: var(--syn-interactive-emphasis-color-active);
   }
 
   :host([color="neutral"]) {
-    color: var(--syn-interactive-quiet-color, var(--syn-typography-color-text));
+    color: var(--syn-interactive-quiet-color);
   }
 
   :host([color="neutral"]) .icon-button:hover:not(.icon-button--disabled) {
-    color: var(--syn-interactive-quiet-color-hover, var(--syn-color-primary-600));
+    color: var(--syn-interactive-quiet-color-hover);
   }
 
   :host([color="neutral"]) .icon-button:active:not(.icon-button--disabled) {
-    color: var(--syn-interactive-quiet-color-active, var(--syn-color-primary-700));
+    color: var(--syn-interactive-quiet-color-active);
   }
 
   :host([color="neutral"]) .icon-button:focus-visible:not(.icon-button--disabled):not(:hover) {
-    color: var(--syn-interactive-quiet-color, var(--syn-typography-color-text));
+    color: var(--syn-interactive-quiet-color);
   }
 
   /* Sizes */

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

@@ -225,7 +225,7 @@ export default css`
     align-items: center;
     background: none;
     border: none;
-    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    color: var(--syn-interactive-emphasis-color);
     cursor: pointer;
     display: flex;
     padding: var(--syn-spacing-x-small);
@@ -245,11 +245,11 @@ export default css`
   }
 
   .input__number-stepper-button:hover:not([disabled]) {
-    color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    color: var(--syn-interactive-emphasis-color-hover);
   }
 
   .input__number-stepper-button:active:not([disabled]) {
-    color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
+    color: var(--syn-interactive-emphasis-color-active);
   }
 
   .input__number-stepper-button[disabled] {

package/metadata/packages/components/components/syn-input/component.ts

@@ -264,7 +264,7 @@ export default class SynInput extends SynergyElement implements SynergyFormContr
     type: Number,
   }) maxFractionDigits: number;
 
-  #numericStrategy: NumericStrategy = nativeNumericStrategy;
+  #numericStrategy: NumericStrategy = modernNumericStrategy;
 
   /**
    * Defines the strategy for handling numbers in the numeric input.
@@ -305,8 +305,7 @@ export default class SynInput extends SynergyElement implements SynergyFormContr
   }
 
   /**
-   * @default nativeNumericStrategy
-   * @todo: This must be changed to "modern" in Synergy@3
+   * @default modernNumericStrategy
    */
   get numericStrategy(): 'native' | 'modern' | Partial<NumericStrategy> {
     return this.#numericStrategy;

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

@@ -31,7 +31,7 @@ export default css`
     /* 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));
+    color: var(--syn-option-color);
     font-size: var(--menuitem-font-size);
 
     /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
@@ -40,7 +40,7 @@ export default css`
   }
 
   :host(:focus-visible) .menu-item {
-    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
+    background-color: var(--syn-option-background-color-active);
   }
 
   /** #429: Use token for opacity */
@@ -64,26 +64,26 @@ export default css`
    */
   .menu-item .menu-item__prefix::slotted(syn-icon),
   .menu-item .menu-item__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color, var(--syn-typography-color-text));
+    color: var(--syn-option-icon-color);
     font-size: var(--syn-font-size-x-large);
   }
 
   :host(:hover) .menu-item .menu-item__prefix::slotted(syn-icon),
   :host(:hover) .menu-item__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-hover, var(--syn-typography-color-text-inverted));
+    color: var(--syn-option-icon-color-hover);
   }
 
   :host(:focus-visible) .menu-item .menu-item__prefix::slotted(syn-icon),
   :host(:focus-visible) .menu-item .menu-item__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-active, var(--syn-typography-color-text-inverted));
+    color: var(--syn-option-icon-color-active);
   }
 
   /* Adjust background and text color for focused elements */
   /* stylelint-disable selector-not-notation, plugin/no-unsupported-browser-features */
   :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
   .menu-item--submenu-expanded {
-    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-hover);
+    color: var(--syn-option-color-hover);
   }
   /* stylelint-enable selector-not-notation, plugin/no-unsupported-browser-features */
 
@@ -106,7 +106,7 @@ export default css`
   }
 
   .menu-item .menu-item__check {
-    color: var(--syn-option-check-color, var(--syn-color-primary-600));
+    color: var(--syn-option-check-color);
     margin-inline-end: var(--syn-spacing-small);
   }
 
@@ -121,11 +121,11 @@ export default css`
    * Make sure the checkbox is also visible when the item is active
    */
   :host(:focus-visible) .menu-item--checked .menu-item__check {
-    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-active);
   }
 
   :host(:hover) .menu-item--checked .menu-item__check {
-    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-hover);
   }
 
   /**
@@ -159,7 +159,7 @@ export default css`
   .menu-item--loading syn-spinner {
     --track-width: 2px;
 
-    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));
+    color: var(--syn-interactive-emphasis-color);
     font-size: var(--syn-font-size-medium);
     left: calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
   }

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

@@ -103,7 +103,7 @@ export default css`
    * Basic set up for the nav item prefix.
    */
   .nav-item:not(.nav-item--disabled)::before {
-    background: var(--syn-interactive-background-color-hover, var(--syn-color-neutral-50));
+    background: var(--syn-interactive-background-color-hover);
     content: '';
     display: block;
     height: 100%;
@@ -127,7 +127,7 @@ export default css`
    * #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));
+    background: var(--syn-interactive-background-color-active);
     opacity: 1;
   }
 
@@ -267,7 +267,7 @@ export default css`
   }
 
   .current-indicator--visible {
-    background: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    background: var(--syn-interactive-emphasis-color);
   }
 
   .nav-item--horizontal .current-indicator {