@synergy-design-system/mcp 1.41.1 → 2.0.0

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

@@ -36,18 +36,18 @@ export default css`
   }
 
   .option:not(.option--current) {
-    color: var(--syn-option-color, var(--syn-typography-color-text));
+    color: var(--syn-option-color);
   }
 
   .option--current,
   .option--current.option--hover:not(.option--disabled) {
-    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-active, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-active);
+    color: var(--syn-option-color-active);
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    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);
   }
 
   /** #429: Use token for opacity */
@@ -56,8 +56,8 @@ export default css`
   }
 
   .option--current.option--disabled {
-    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);
   }
 
   .option__label {
@@ -65,7 +65,7 @@ export default css`
   }
 
   .option__check {
-    color: var(--syn-option-check-color, var(--syn-color-primary-600));
+    color: var(--syn-option-check-color);
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
@@ -75,11 +75,11 @@ export default css`
 
   /* Invert the check mark when keyboard navigation is used */
   .option--current .option__check {
-    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-active);
   }
 
   .option--hover:not(.option--current) .option__check {
-    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-hover);
   }
 
   /* Use larger spacing between icons and content */
@@ -94,18 +94,18 @@ export default css`
   /* Set correct icon size when someone uses syn-icon in the slots */
   .option__prefix::slotted(syn-icon),
   .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color, var(--syn-typography-color-text));
+    color: var(--syn-option-icon-color);
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
   .option--hover .option__prefix::slotted(syn-icon),
   .option--hover .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-hover, var(--syn-color-neutral-800));
+    color: var(--syn-option-icon-color-hover);
   }
 
   .option--current .option__prefix::slotted(syn-icon),
   .option--current .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-active, var(--syn-color-neutral-800));
+    color: var(--syn-option-icon-color-active);
   }
 
   /* This is needed for the highlight styling of the options in syn-combobox */

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

@@ -108,22 +108,6 @@ panel inside of the viewport.
     return this.nativeElement.placement;
   }
 
-  /**
-* Determines how the popup is positioned.
-* The `absolute` strategy works well in most cases, but if overflow is
-clipped, using a `fixed` position strategy can often workaround it.
-
-@deprecated The strategy property is deprecated and will be removed in future versions.
-* Modern browsers support the popover element which is used internally instead.
- */
-  @Input()
-  set strategy(v: SynPopup['strategy']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.strategy = v));
-  }
-  get strategy(): SynPopup['strategy'] {
-    return this.nativeElement.strategy;
-  }
-
   /**
    * The distance in pixels from which to offset the panel away from its anchor.
    */

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

@@ -106,13 +106,6 @@ export default class SynPopup extends SynergyElement {
     | 'left-start'
     | 'left-end' = 'top';
 
-  /**
-   * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is
-   * clipped, using a `fixed` position strategy can often workaround it.
-   * @deprecated The strategy property is deprecated and will be removed in future versions. Modern browsers support the popover element which is used internally instead.
-   */
-  @property({ reflect: true }) strategy: 'absolute' | 'fixed' = 'absolute';
-
   /** The distance in pixels from which to offset the panel away from its anchor. */
   @property({ type: Number }) distance = 0;
 
@@ -417,14 +410,14 @@ export default class SynPopup extends SynergyElement {
     // More info: https://github.com/shoelace-style/shoelace/issues/1135
     //
     const getOffsetParent =
-      SUPPORTS_POPOVER || this.strategy === 'absolute'
+      SUPPORTS_POPOVER
         ? (element: Element) => platform.getOffsetParent(element, offsetParent)
         : platform.getOffsetParent;
 
     computePosition(this.anchorEl, this.popup, {
       placement: this.placement,
       middleware,
-      strategy: SUPPORTS_POPOVER ? 'absolute' : this.strategy,
+      strategy: SUPPORTS_POPOVER ? 'absolute' : 'fixed',
       platform: {
         ...platform,
         getOffsetParent
@@ -585,7 +578,7 @@ export default class SynPopup extends SynergyElement {
         class=${classMap({
           popup: true,
           'popup--active': this.active,
-          'popup--fixed': !SUPPORTS_POPOVER && this.strategy === 'fixed',
+          'popup--fixed': !SUPPORTS_POPOVER,
           'popup--has-arrow': this.arrow
         })}
       >

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

@@ -72,16 +72,6 @@ panel inside of the viewport.
  */
   placement?: SynPopup['placement'];
 
-  /**
-* Determines how the popup is positioned.
-* The `absolute` strategy works well in most cases, but if overflow is
-clipped, using a `fixed` position strategy can often workaround it.
-
-@deprecated The strategy property is deprecated and will be removed in future versions.
-* Modern browsers support the popover element which is used internally instead.
- */
-  strategy?: SynPopup['strategy'];
-
   /**
    * The distance in pixels from which to offset the panel away from its anchor.
    */

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

@@ -4,8 +4,8 @@ export default css`
   :host {
     --height: var(--syn-font-size-medium);
     --speed: 2.5s;
-    --indicator-color: var(--syn-progress-indicator-color, var(--syn-color-primary-600));
-    --track-color: var(--syn-progress-track-color, var(--syn-color-neutral-200));
+    --indicator-color: var(--syn-progress-indicator-color);
+    --track-color: var(--syn-progress-track-color);
   }
 
   .progress-bar {

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

@@ -4,8 +4,8 @@ export default css`
   :host {
     --size: 120px;
     --track-width: var(--syn-spacing-x-small);
-    --track-color: var(--syn-progress-track-color, var(--syn-color-neutral-200));
-    --indicator-color: var(--syn-progress-indicator-color, var(--syn-color-primary-600));
+    --track-color: var(--syn-progress-track-color);
+    --indicator-color: var(--syn-progress-indicator-color);
   }
 
   .progress-ring__indicator {

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

@@ -18,8 +18,8 @@ export default css`
   /* Checked */
   /* stylelint-disable-next-line no-descending-specificity */
   .radio--checked .radio__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);
   }
 
   /* Reset original hover */
@@ -30,14 +30,14 @@ export default css`
 
   /* Checked + 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));
+    background-color: var(--syn-interactive-emphasis-color-hover);
+    border-color: var(--syn-interactive-emphasis-color-hover);
   }
 
   /* Checked + 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));
+    background-color: var(--syn-interactive-emphasis-color-active);
+    border-color: var(--syn-interactive-emphasis-color-active);
   }
 
   /* Not-Checked + Hover */
@@ -47,7 +47,7 @@ export default css`
 
   /* Not-Checked + active */
   .radio:not(.radio--checked):not(.radio--disabled):active .radio__control {
-    border-color: var(--syn-input-border-color-active, var(--syn-color-neutral-1000));
+    border-color: var(--syn-input-border-color-active);
   }
 
   /* Fix#456: Multi line radio fixes */

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

@@ -10,8 +10,8 @@ export default css`
     --thumb-hit-area-size: 1.4;
     --track-hit-area-size: var(--syn-spacing-medium);
     --track-active-offset: 0px;
-    --track-color-active: var(--syn-range-track-color-active,var(--syn-color-primary-600));
-    --track-color-inactive: var(--syn-range-color-inactive, var(--syn-color-neutral-200));
+    --track-color-active: var(--syn-range-track-color-active);
+    --track-color-inactive: var(--syn-range-color-inactive);
     --track-height: var(--syn-spacing-2x-small);
 
     /* This is needed to get the full with of the element, including the border */
@@ -155,8 +155,8 @@ export default css`
   }
 
   .thumb {
-    background-color: var(--syn-interactive-emphasis-color,var(--syn-color-primary-600));
-    border: var(--syn-focus-ring-width) solid var(--syn-input-border-color-offset, var(--syn-color-neutral-0));
+    background-color: var(--syn-interactive-emphasis-color);
+    border: var(--syn-focus-ring-width) solid var(--syn-input-border-color-offset);
     border-radius: var(--syn-border-radius-circle);
     cursor: pointer;
     display: block;
@@ -192,7 +192,7 @@ export default css`
   }
 
   .thumb.grabbed {
-    background: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
+    background: var(--syn-interactive-emphasis-color-active);
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     cursor: grabbing;
   }
@@ -202,7 +202,7 @@ export default css`
   }
 
   .thumb:not(.grabbed):focus-visible {
-    background: var(--syn-interactive-emphasis-color-hover,var(--syn-color-primary-900));
+    background: var(--syn-interactive-emphasis-color-hover);
     outline: var(--syn-focus-ring);
     outline-offset: 0;
   }
@@ -223,7 +223,7 @@ export default css`
     }
 
     :host(:not([disabled])) .thumb:not(.grabbed):hover  {
-      background: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+      background: var(--syn-interactive-emphasis-color-hover);
     }
     
     :host(:not([disabled])) .thumb:hover::after  {
@@ -255,6 +255,7 @@ export default css`
    */
   .visually-hidden {
     border: 0;
+    /* stylelint-disable-next-line property-no-deprecated */
     clip: rect(0, 0, 0, 0);
     height: 1px;
     margin: -1px;
@@ -275,10 +276,10 @@ export default css`
   
 
   :host([data-user-invalid]) .active-track {
-    --track-color-active: var(--syn-range-error-color ,var(--syn-input-border-color-focus-error));
+    --track-color-active: var(--syn-range-error-color);
   }
 
   :host([data-user-invalid]) .thumb {
-    background-color: var(--syn-range-error-color ,var(--syn-input-border-color-focus-error));
+    background-color: var(--syn-range-error-color);
   }
 `;

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

@@ -751,7 +751,6 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
       return html`
         <syn-tooltip
           exportparts="base:tooltip__base, base__arrow:tooltip__arrow, base__popup:tooltip__popup, body:tooltip__body"
-          hoist
           .disabled=${this.tooltipPlacement === 'none' || this.disabled}
           .placement=${this.tooltipPlacement as 'top' | 'bottom'}
           trigger="focus"

package/metadata/packages/components/components/syn-range-tick/component.styles.ts

@@ -15,7 +15,7 @@ export default css`
   }
 
   .tick-line {
-    background: var(--syn-range-tick-color, var(--syn-color-neutral-400));
+    background: var(--syn-range-tick-color);
     height: var(--tick-height);
   }
 

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

@@ -263,23 +263,6 @@ use the `show()` and `hide()` methods and this attribute will reflect the select
     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: '' | SynSelect['hoist']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.hoist = v === '' || v),
-    );
-  }
-  get hoist(): SynSelect['hoist'] {
-    return this.nativeElement.hoist;
-  }
-
   /**
    * The select's label.
    * If you need to display HTML, use the `label` slot instead.

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

@@ -184,13 +184,6 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
    */
   @property({ type: Boolean, reflect: true }) 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 select's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
@@ -930,7 +923,6 @@ protected override willUpdate(changedProperties: PropertyValues) {
               'select--large': this.size === 'large'
             })}
             placement=${this.placement + '-start'}
-            strategy=${this.hoist ? 'fixed' : 'absolute'}
             flip
             shift
             sync="width"

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

@@ -128,15 +128,6 @@ use the `show()` and `hide()` methods and this attribute will reflect the select
  */
   open?: SynSelect['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?: SynSelect['hoist'];
-
   /**
    * The select's label.
    * If you need to display HTML, use the `label` slot instead.

package/metadata/packages/components/components/syn-side-nav/component.angular.ts

@@ -142,27 +142,6 @@ Without `open`, the side-nav will only show the prefix of nav-item's.
     return this.nativeElement.open;
   }
 
-  /**
-* Use the rail attribute to only show the prefix of navigation items in closed state.
-This will open on hover on the rail navigation.
-On touch devices the navigation opens on click and shows an overlay.
-
-Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
-If this is not the case you should use a burger navigation.
-
-@deprecated Use the `variant` attribute with `rail` instead.
-Will be removed in synergy version 3.0
- */
-  @Input()
-  set rail(v: '' | SynSideNav['rail']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.rail = v === '' || v),
-    );
-  }
-  get rail(): SynSideNav['rail'] {
-    return this.nativeElement.rail;
-  }
-
   /**
 * The variant that should be used to show the side navigation.
 

package/metadata/packages/components/components/syn-side-nav/component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 import { classMap } from 'lit/directives/class-map.js';
-import type { CSSResultGroup, PropertyValues } from 'lit';
+import type { CSSResultGroup } from 'lit';
 import { html } from 'lit/static-html.js';
 import { property, query, state } from 'lit/decorators.js';
 import { HasSlotController } from '../../internal/slot.js';
@@ -129,19 +129,6 @@ export default class SynSideNav extends SynergyElement {
    */
   @property({ reflect: true, type: Boolean }) open = false;
 
-  /**
-   * Use the rail attribute to only show the prefix of navigation items in closed state.
-   * This will open on hover on the rail navigation.
-   * On touch devices the navigation opens on click and shows an overlay.
-   *
-   * Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
-   * If this is not the case you should use a burger navigation.
-   *
-   * @deprecated Use the `variant` attribute with `rail` instead.
-   * Will be removed in synergy version 3.0
-   */
-  @property({ reflect: true, type: Boolean }) rail = false;
-
   /**
    * The variant that should be used to show the side navigation.
    *
@@ -289,7 +276,7 @@ export default class SynSideNav extends SynergyElement {
 
         // The originalTrigger needs to be removed, otherwise when closing the drawer,
         // the first focused nav-item is focused again...
-        // eslint-disable-next-line @typescript-eslint/dot-notation
+        // eslint-disable-next-line dot-notation
         this.drawer['originalTrigger'] = null;
       }
     });
@@ -356,27 +343,6 @@ export default class SynSideNav extends SynergyElement {
     }
   }
 
-  // eslint-disable-next-line complexity
-  protected override willUpdate(changedProperties: PropertyValues) {
-    super.willUpdate(changedProperties);
-
-    // TODO: this can be removed in synergy version 3.0
-    if (changedProperties.has('rail')) {
-      if (this.rail) {
-        // Add deprecation console warning for stakeholder, which do not use linting
-        // to get their attention
-        console.warn('<syn-side-nav/>: The `rail` attribute is deprecated. Please use the `variant` attribute with `rail` instead. It will be removed in synergy version 3.0');
-      }
-
-      // The `variant` should be adapted to the `rail` attribute,
-      // if it was explicitly set or unset by the user.
-      // This is needed to be backwards compatible with the `rail` attribute
-      if (!changedProperties.has('variant') || this.rail) {
-        this.variant = this.rail ? 'rail' : 'default';
-      }
-    }
-  }
-
   private toggleOpenState() {
     this.open = !this.open;
   }

package/metadata/packages/components/components/syn-side-nav/component.vue

@@ -106,19 +106,6 @@ Without `open`, the side-nav will only show the prefix of nav-item's.
  */
   open?: SynSideNav['open'];
 
-  /**
-* Use the rail attribute to only show the prefix of navigation items in closed state.
-This will open on hover on the rail navigation.
-On touch devices the navigation opens on click and shows an overlay.
-
-Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
-If this is not the case you should use a burger navigation.
-
-@deprecated Use the `variant` attribute with `rail` instead.
-Will be removed in synergy version 3.0
- */
-  rail?: SynSideNav['rail'];
-
   /**
 * The variant that should be used to show the side navigation.
 

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

@@ -3,7 +3,7 @@ import { css } from 'lit';
 export default css`
   :host {
     --speed: var(--syn-transition-x-slow);
-    --indicator-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    --indicator-color: var(--syn-interactive-emphasis-color);
   }
 
   .spinner__indicator {
@@ -16,7 +16,7 @@ export default css`
    */
   .spinner__track {
     filter: saturate(0);
-    opacity: var(--syn-spinner-opacity, 0.16);
+    opacity: var(--syn-spinner-opacity);
     stroke: var(--indicator-color);
   }
 

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

@@ -2,25 +2,25 @@ import { css } from 'lit';
 
 export default css`
   :host([size='small']) {
-   --height: var(--syn-switch-height-small, calc(var(--syn-toggle-size-medium) + 2px));
+   --height: var(--syn-switch-height-small);
    --thumb-size: var(--syn-toggle-size-small);
-   --width: var(--syn-switch-width-small, calc((var(--height) * 2) - 6px));
+   --width: var(--syn-switch-width-small);
 
     font-size: var(--syn-input-font-size-small);
   }
 
   :host([size='medium']) {
-    --height: var(--syn-switch-height-medium, calc(var(--syn-toggle-size-medium) + 4px));
+    --height: var(--syn-switch-height-medium);
     --thumb-size: var(--syn-toggle-size-medium);
-    --width: var(--syn-switch-width-medium, calc((var(--height) * 2) - 6px));
+    --width: var(--syn-switch-width-medium);
 
     font-size: var(--syn-input-font-size-medium);
   }
 
   :host([size='large']) {
-    --height: var(--syn-switch-height-large, calc(var(--syn-toggle-size-large) + 4px));
+    --height: var(--syn-switch-height-large);
     --thumb-size: var(--syn-toggle-size-large);
-    --width: var(--syn-switch-width-large, calc((var(--height) * 2) - 6px));
+    --width: var(--syn-switch-width-large);
 
     font-size: var(--syn-input-font-size-large);
   }
@@ -58,8 +58,8 @@ export default css`
 
   /* Checked */
   .switch--checked .switch__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);
   }
   
   /* Hover */
@@ -74,8 +74,8 @@ export default css`
 
   /* Checked + 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));
+    background-color: var(--syn-interactive-emphasis-color-hover);
+    border-color: var(--syn-interactive-emphasis-color-hover);
   }
 
   .switch.switch--checked:not(.switch--disabled):hover .switch__control:hover .switch__thumb {
@@ -114,8 +114,8 @@ export default css`
 
   /* Checked + focus */
   .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__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);
     outline: var(--syn-focus-ring);
     outline-offset: var(--syn-focus-ring-offset);
   }
@@ -130,12 +130,12 @@ export default css`
   }
   
   :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control {
-    background-color: var(--syn-input-border-color-focus-error, var(--syn-color-error-700));
-    border-color: var(--syn-input-border-color-focus-error, var(--syn-color-error-700));
+    background-color: var(--syn-input-border-color-focus-error);
+    border-color: var(--syn-input-border-color-focus-error);
   }
 
   :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));
+    background-color: var(--syn-input-border-color-hover);
+    border-color: var(--syn-input-border-color-hover);
   }
   `;

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

@@ -46,7 +46,7 @@ export default css`
   }
 
   .tab:hover:not(.tab--disabled) {
-    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));
+    color: var(--syn-interactive-emphasis-color);
   }
 
   .tab.tab--active:not(:hover):not(.tab--disabled) {
@@ -61,7 +61,7 @@ export default css`
   }
 
   .tab__close-button {
-    color: var(--syn-input-icon-icon-clearable-color, var(--syn-color-neutral-500));
+    color: var(--syn-input-icon-icon-clearable-color);
     font-size: var(--syn-font-size-x-large);
     margin-inline-start: var(--syn-spacing-2x-small);
   }
@@ -71,7 +71,7 @@ export default css`
   }
 
   .tab__close-button::part(base):hover {
-    color: var(--syn-input-icon-icon-clearable-color-hover, var(--syn-color-primary-700));
+    color: var(--syn-input-icon-icon-clearable-color-hover);
   }
 
   .tab--active {

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

@@ -7,7 +7,7 @@ export default css`
     --track-width: var(--syn-border-width-small);
     --track-color: var(--syn-panel-border-color);
     --indicator-width: var(--syn-border-width-x-large);
-    --indicator-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    --indicator-color: var(--syn-interactive-emphasis-color);
   }
 
   /* we need to augment the size of the height of the tab-group__nav to make the focus outline and the hiding white border visible of the tab because of overflow-x value  */
@@ -185,7 +185,7 @@ export default css`
   .tab-group__scroll-button {
     /* we need to move the scroll buttons to the top, to align the borders with the border of the tab-group--nav  */
     bottom: var(--syn-panel-border-width);
-    color: var(--syn-interactive-quiet-color, var(--syn-color-neutral-950));
+    color: var(--syn-interactive-quiet-color);
     font-size: var(--syn-font-size-medium);
     width: calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));
   }

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

@@ -68,7 +68,7 @@ export default css`
 
   /* Hover */
   .tag.tag--removable:hover {
-    background-color: var(--syn-interactive-background-color-hover, var(--syn-color-neutral-100));
+    background-color: var(--syn-interactive-background-color-hover);
   }
   
   .tag .tag__remove:hover {