@synergy-design-system/mcp 1.41.1 → 2.0.0

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

@@ -71,24 +71,24 @@ export default css`
    * Size modifiers
    */
   .button--small {
-    border-radius: var(--syn-button-border-radius-small, var(--syn-input-border-radius-small));
+    border-radius: var(--syn-button-border-radius-small);
   }
 
   .button--medium {
-    border-radius: var(--syn-button-border-radius-medium, var(--syn-input-border-radius-medium));
+    border-radius: var(--syn-button-border-radius-medium);
   }
 
   .button--large {
-    border-radius: var(--syn-button-border-radius-large, var(--syn-input-border-radius-large));
+    border-radius: var(--syn-button-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));
+    background: var(--syn-button-color);
+    border-color: var(--syn-button-color);
+    color: var(--syn-button-filled-color-text);
   }
 
   .button--filled.button--primary.button--disabled {
@@ -98,15 +98,15 @@ export default css`
   }
 
   .button--filled.button--primary:hover:not(.button--disabled) {
-    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));
+    background-color: var(--syn-button-color-hover);
+    border-color: var(--syn-button-color-hover);
+    color: var(--syn-button-filled-color-text-hover);
   }
 
   .button--filled.button--primary:active:not(.button--disabled) {
-    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));
+    background-color: var(--syn-button-color-active);
+    border-color: var(--syn-button-color-active);
+    color: var(--syn-button-filled-color-text-active);
   }
 
   /*
@@ -118,8 +118,8 @@ export default css`
   }
 
   .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));
+    border-color: var(--syn-button-color);
+    color: var(--syn-button-outline-color-text);
   }
 
   .button--outline.button--primary.button--disabled {
@@ -130,34 +130,34 @@ export default css`
 
   .button--outline.button--primary:hover:not(.button--disabled),
   .button--outline.button--primary.button--checked:not(.button--disabled) {
-    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));
+    background-color: var(--syn-button-outline-color-hover);
+    border-color: var(--syn-button-outline-color-hover);
+    color: var(--syn-button-outline-color-text-hover);
   }
 
   .button--outline.button--primary:active:not(.button--disabled) {
-    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));
+    background-color: var(--syn-button-outline-color-active);
+    border-color: var(--syn-button-outline-color-active);
+    color: var(--syn-button-outline-color-text-active);
   }
 
   /*
    * Text buttons
    */
   .button--text {
-    color: var(--syn-button-text-color-text, var(--syn-color-primary-600));
+    color: var(--syn-button-text-color-text);
   }
 
   .button--text:hover:not(.button--disabled) {
-    color: var(--syn-button-text-color-text-hover, var(--syn-color-primary-900));
+    color: var(--syn-button-text-color-text-hover);
   }
 
   .button--text:focus-visible:not(.button--disabled) {
-    color: var(--syn-button-color, var(--syn-color-primary-500));
+    color: var(--syn-button-color);
   }
 
   .button--text.button--primary:active:not(.button--disabled) {
-    color: var(--syn-button-text-color-text-active, var(--syn-color-primary-950));
+    color: var(--syn-button-text-color-text-active);
   }
 
   .button--text.button--primary.button--disabled {

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 {

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

@@ -51,7 +51,7 @@ export default css`
 
   .optgroup__prefix,
   .optgroup__suffix {
-    color: var(--syn-option-icon-color, var(--syn-color-neutral-800));
+    color: var(--syn-option-icon-color);
     font-size: var(--syn-spacing-large);
   }