@synergy-design-system/mcp 1.41.2 → 2.0.0

package/metadata/packages/tokens/dark.css

@@ -1,42 +1,42 @@
 /**
- * @synergy-design-system/tokens version 2.48.1
+ * @synergy-design-system/tokens version 2.48.2
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
 
-:root, .syn-sick2018-dark, .syn-theme-dark {
+:root, .syn-sick2025-dark, .syn-theme-dark {
   color-scheme: dark;
 
-  --syn-alert-error-color-background: var(--syn-panel-background-color);
-  --syn-alert-error-color-border: var(--syn-panel-border-color);
-  --syn-alert-error-color-icon: var(--syn-color-error-600);
-  --syn-alert-error-color-indicator: var(--syn-color-error-600);
-  --syn-alert-informative-color-background: var(--syn-panel-background-color);
-  --syn-alert-informative-color-border: var(--syn-panel-border-color);
-  --syn-alert-informative-color-icon: var(--syn-color-info-600);
-  --syn-alert-informative-color-indicator: var(--syn-color-info-600);
-  --syn-alert-neutral-color-background: var(--syn-panel-background-color);
-  --syn-alert-neutral-color-border: var(--syn-panel-border-color);
-  --syn-alert-neutral-color-icon: var(--syn-color-neutral-800);
-  --syn-alert-neutral-color-indicator: var(--syn-color-neutral-800);
-  --syn-alert-success-color-background: var(--syn-panel-background-color);
-  --syn-alert-success-color-border: var(--syn-panel-border-color);
-  --syn-alert-success-color-icon: var(--syn-color-success-500);
-  --syn-alert-success-color-indicator: var(--syn-color-success-500);
-  --syn-alert-warning-color-background: var(--syn-panel-background-color);
-  --syn-alert-warning-color-border: var(--syn-panel-border-color);
-  --syn-alert-warning-color-icon: var(--syn-color-warning-400);
-  --syn-alert-warning-color-indicator: var(--syn-color-warning-400);
-  --syn-badge-error-color-background: var(--syn-color-error-600);
+  --syn-alert-error-color-background: var(--syn-namur-error-color-background);
+  --syn-alert-error-color-border: var(--syn-namur-error-color-background);
+  --syn-alert-error-color-icon: var(--syn-typography-color-text);
+  --syn-alert-error-color-indicator: var(--syn-namur-error-color);
+  --syn-alert-informative-color-background: var(--syn-namur-info-color-background);
+  --syn-alert-informative-color-border: var(--syn-namur-info-color-background);
+  --syn-alert-informative-color-icon: var(--syn-typography-color-text);
+  --syn-alert-informative-color-indicator: var(--syn-namur-info-color);
+  --syn-alert-neutral-color-background: var(--syn-namur-neutral-color-background);
+  --syn-alert-neutral-color-border: var(--syn-namur-neutral-color-background);
+  --syn-alert-neutral-color-icon: var(--syn-typography-color-text);
+  --syn-alert-neutral-color-indicator: var(--syn-namur-neutral-color);
+  --syn-alert-success-color-background: var(--syn-namur-success-color-background);
+  --syn-alert-success-color-border: var(--syn-namur-success-color-background);
+  --syn-alert-success-color-icon: var(--syn-typography-color-text);
+  --syn-alert-success-color-indicator: var(--syn-namur-success-color);
+  --syn-alert-warning-color-background: var(--syn-namur-warning-color-background);
+  --syn-alert-warning-color-border: var(--syn-namur-warning-color-background);
+  --syn-alert-warning-color-icon: var(--syn-typography-color-text);
+  --syn-alert-warning-color-indicator: var(--syn-namur-warning-color);
+  --syn-badge-error-color-background: var(--syn-namur-error-color);
   --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
-  --syn-badge-informative-color-background: var(--syn-color-info-600);
+  --syn-badge-informative-color-background: var(--syn-namur-info-color);
   --syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
-  --syn-badge-neutral-color-background: var(--syn-color-neutral-800);
+  --syn-badge-neutral-color-background: var(--syn-namur-neutral-color);
   --syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
-  --syn-badge-success-color-background: var(--syn-color-success-500);
-  --syn-badge-success-color-text: var(--syn-typography-color-text);
-  --syn-badge-warning-color-background: var(--syn-color-warning-400);
-  --syn-badge-warning-color-text: var(--syn-typography-color-text);
+  --syn-badge-success-color-background: var(--syn-namur-success-color);
+  --syn-badge-success-color-text: var(--syn-typography-color-text-inverted);
+  --syn-badge-warning-color-background: var(--syn-namur-warning-color);
+  --syn-badge-warning-color-text: var(--syn-typography-color-text-inverted);
   --syn-border-radius-circle: 9999px;
   --syn-border-radius-large: 8px;
   --syn-border-radius-medium: 8px;
@@ -49,133 +49,133 @@
   --syn-border-width-none: 0px; /** None */
   --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: var(--syn-color-neutral-0);
-  --syn-button-filled-color-text-active: var(--syn-color-neutral-0);
-  --syn-button-filled-color-text-hover: var(--syn-color-neutral-0);
+  --syn-breadcrumb-color: var(--syn-typography-color-text);
+  --syn-button-border-radius-large: var(--syn-border-radius-pill);
+  --syn-button-border-radius-medium: var(--syn-border-radius-pill);
+  --syn-button-border-radius-small: var(--syn-border-radius-pill);
+  --syn-button-color: var(--syn-color-neutral-1000);
+  --syn-button-color-active: var(--syn-color-neutral-950);
+  --syn-button-color-hover: var(--syn-color-neutral-1000);
+  --syn-button-filled-color-text: var(--syn-interactive-emphasis-color);
+  --syn-button-filled-color-text-active: var(--syn-typography-color-text-inverted);
+  --syn-button-filled-color-text-hover: var(--syn-typography-color-text-inverted);
   --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: var(--syn-color-primary-600);
-  --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;
-  --syn-color-accent-200: #983b08;
-  --syn-color-accent-300: #bb4d02;
-  --syn-color-accent-400: #e27200;
-  --syn-color-accent-500: #f39200;
-  --syn-color-accent-600: #ffbd1b;
-  --syn-color-accent-700: #ffd246;
-  --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;
-  --syn-color-error-300: #d0051d;
-  --syn-color-error-400: #ea0823;
-  --syn-color-error-500: #ff2b44;
-  --syn-color-error-600: #ff5d70;
-  --syn-color-error-700: #ff98a4;
-  --syn-color-error-800: #ffc3c9;
-  --syn-color-error-900: #ffdee2;
-  --syn-color-error-950: #fff0f2;
-  --syn-color-info-50: #072e4a;
-  --syn-color-info-100: #0b486f;
-  --syn-color-info-200: #065786;
-  --syn-color-info-300: #0166a3;
-  --syn-color-info-400: #007cc1;
-  --syn-color-info-500: #0ca2eb;
-  --syn-color-info-600: #36bbfa;
-  --syn-color-info-700: #7cd1fd;
-  --syn-color-info-800: #b9e5fe;
-  --syn-color-info-900: #e0f1fe;
-  --syn-color-info-950: #f0f9ff;
-  --syn-color-neutral-0: #000000;
-  --syn-color-neutral-50: #31373a;
-  --syn-color-neutral-100: #4c5357;
-  --syn-color-neutral-200: #5e676b;
-  --syn-color-neutral-300: #737f85;
-  --syn-color-neutral-400: #859298;
-  --syn-color-neutral-500: #9ea9ae;
-  --syn-color-neutral-600: #bac2c6;
-  --syn-color-neutral-700: #d5dbdd;
-  --syn-color-neutral-800: #e8ebec;
-  --syn-color-neutral-900: #f2f3f6;
-  --syn-color-neutral-950: #f9fafb;
-  --syn-color-neutral-1000: #ffffff;
-  --syn-color-primary-50: #072e4a;
-  --syn-color-primary-100: #0b486f;
-  --syn-color-primary-200: #065786;
-  --syn-color-primary-300: #0166a3;
-  --syn-color-primary-400: #007cc1;
-  --syn-color-primary-500: #0ca2eb;
-  --syn-color-primary-600: #36bbfa;
-  --syn-color-primary-700: #7cd1fd;
-  --syn-color-primary-800: #b9e5fe;
-  --syn-color-primary-900: #e0f1fe;
-  --syn-color-primary-950: #f0f9ff;
-  --syn-color-primary-1000: #f0f9ff;
-  --syn-color-success-50: #172c07;
-  --syn-color-success-100: #315017;
-  --syn-color-success-200: #395e16;
-  --syn-color-success-300: #437714;
-  --syn-color-success-400: #63b017;
-  --syn-color-success-500: #73c31f;
-  --syn-color-success-600: #93dd3e;
-  --syn-color-success-700: #b0eb6b;
-  --syn-color-success-800: #d1f4a2;
-  --syn-color-success-900: #e7facd;
-  --syn-color-success-950: #f5fde8;
-  --syn-color-warning-50: #411f07;
-  --syn-color-warning-100: #6f3e14;
-  --syn-color-warning-200: #834b10;
-  --syn-color-warning-300: #9e5f0a;
-  --syn-color-warning-400: #c68608;
-  --syn-color-warning-500: #e5ae0d;
-  --syn-color-warning-600: #f5c413;
-  --syn-color-warning-700: #f9da4b;
-  --syn-color-warning-800: #fcec8c;
-  --syn-color-warning-900: #fdf7c4;
-  --syn-color-warning-950: #fefce8;
-  --syn-details-open-rotation: 360deg;
+  --syn-button-outline-color-active: var(--syn-color-neutral-950);
+  --syn-button-outline-color-hover: var(--syn-color-neutral-1000);
+  --syn-button-outline-color-text: var(--syn-typography-color-text);
+  --syn-button-outline-color-text-active: var(--syn-typography-color-text-inverted);
+  --syn-button-outline-color-text-hover: var(--syn-typography-color-text-inverted);
+  --syn-button-text-color-text: var(--syn-typography-color-text);
+  --syn-button-text-color-text-active: var(--syn-interactive-quiet-color-active);
+  --syn-button-text-color-text-hover: var(--syn-interactive-quiet-color-hover);
+  --syn-checkbox-border-radius: var(--syn-border-radius-small);
+  --syn-color-accent-50: #092518;
+  --syn-color-accent-100: #155033;
+  --syn-color-accent-200: #18643e;
+  --syn-color-accent-300: #1e7d4c;
+  --syn-color-accent-400: #2d9c60;
+  --syn-color-accent-500: #4fb87c;
+  --syn-color-accent-600: #83d2a3;
+  --syn-color-accent-700: #a5e1b9;
+  --syn-color-accent-800: #bbe8c8;
+  --syn-color-accent-900: #d2f0dc;
+  --syn-color-accent-950: #e9f8ed;
+  --syn-color-critical-50: #462104;
+  --syn-color-critical-100: #82450c;
+  --syn-color-critical-200: #a1520b;
+  --syn-color-critical-300: #cc6b02;
+  --syn-color-critical-400: #ff9100;
+  --syn-color-critical-500: #ffa80a;
+  --syn-color-critical-600: #ffbf32;
+  --syn-color-critical-700: #ffdb6d;
+  --syn-color-critical-800: #ffeba5;
+  --syn-color-critical-900: #fff7d3;
+  --syn-color-critical-950: #fffbec;
+  --syn-color-error-50: #450709;
+  --syn-color-error-100: #6c0c0e;
+  --syn-color-error-200: #941013;
+  --syn-color-error-300: #bc1519;
+  --syn-color-error-400: #e6191e;
+  --syn-color-error-500: #f93a3f;
+  --syn-color-error-600: #ff696d;
+  --syn-color-error-700: #ffa0a2;
+  --syn-color-error-800: #ffcfd1;
+  --syn-color-error-900: #ffe3e4;
+  --syn-color-error-950: #fff1f1;
+  --syn-color-info-50: #06334b;
+  --syn-color-info-100: #085172;
+  --syn-color-info-200: #02628a;
+  --syn-color-info-300: #0075a7;
+  --syn-color-info-400: #0092ce;
+  --syn-color-info-500: #06b6f1;
+  --syn-color-info-600: #26c9ff;
+  --syn-color-info-700: #78ddff;
+  --syn-color-info-800: #a6e9ff;
+  --syn-color-info-900: #dff4ff;
+  --syn-color-info-950: #effaff;
+  --syn-color-neutral-0: #000206;
+  --syn-color-neutral-50: #00051a;
+  --syn-color-neutral-100: #000a37;
+  --syn-color-neutral-200: #0e1633;
+  --syn-color-neutral-300: #262f55;
+  --syn-color-neutral-400: #404769;
+  --syn-color-neutral-500: #4d5473;
+  --syn-color-neutral-600: #5f678e;
+  --syn-color-neutral-700: #777ea4;
+  --syn-color-neutral-800: #9298b6;
+  --syn-color-neutral-900: #adb2c8;
+  --syn-color-neutral-950: #c8ccdb;
+  --syn-color-neutral-1000: #e9ebf1;
+  --syn-color-primary-50: #0e275d;
+  --syn-color-primary-100: #0d3f9b;
+  --syn-color-primary-200: #0845c5;
+  --syn-color-primary-300: #005aff;
+  --syn-color-primary-400: #066fff;
+  --syn-color-primary-500: #3183fe;
+  --syn-color-primary-600: #5e97fc;
+  --syn-color-primary-700: #91bbff;
+  --syn-color-primary-800: #ccdeff;
+  --syn-color-primary-900: #dae7ff;
+  --syn-color-primary-950: #eff5ff;
+  --syn-color-primary-1000: #eff5ff;
+  --syn-color-success-50: #003911;
+  --syn-color-success-100: #026524;
+  --syn-color-success-200: #00852c;
+  --syn-color-success-300: #1a9945;
+  --syn-color-success-400: #34ad5c;
+  --syn-color-success-500: #4fc275;
+  --syn-color-success-600: #6ad88f;
+  --syn-color-success-700: #84eca7;
+  --syn-color-success-800: #bcf6cf;
+  --syn-color-success-900: #ddfbe6;
+  --syn-color-success-950: #f0fdf4;
+  --syn-color-warning-50: #442404;
+  --syn-color-warning-100: #74450f;
+  --syn-color-warning-200: #89540a;
+  --syn-color-warning-300: #a66c02;
+  --syn-color-warning-400: #d19800;
+  --syn-color-warning-500: #f2c500;
+  --syn-color-warning-600: #f6d029;
+  --syn-color-warning-700: #fbdb52;
+  --syn-color-warning-800: #ffe67c;
+  --syn-color-warning-900: #fff5c6;
+  --syn-color-warning-950: #fffbeb;
+  --syn-details-open-rotation: 0deg;
   --syn-dimension-base: 4px; /** to be deprecated */
   --syn-duration-extra-fast: 50ms;
   --syn-duration-extra-slow: 1000ms;
   --syn-duration-fast: 150ms;
   --syn-duration-normal: 250ms;
   --syn-duration-slow: 500ms;
-  --syn-focus-ring-border-radius: var(--syn-border-radius-none);
-  --syn-focus-ring-color: var(--syn-color-primary-400);
+  --syn-focus-ring-border-radius: var(--syn-border-radius-small);
+  --syn-focus-ring-color: var(--syn-color-primary-700);
   --syn-focus-ring-offset: var(--syn-spacing-3x-small);
   --syn-focus-ring-style: solid;
   --syn-focus-ring-width: var(--syn-border-width-medium);
   --syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /** Coding font */
-  --syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /** Main font */
+  --syn-font-sans: 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /** Main font */
   --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol'; /** System font */
   --syn-font-serif: Georgia, 'Times New Roman', serif; /** Shoelace compatibility DO NOT USE */
   --syn-font-size-2x-large: 32px;
@@ -187,33 +187,33 @@
   --syn-font-size-small: 14px;
   --syn-font-size-x-large: 24px;
   --syn-font-size-x-small: 12px;
-  --syn-font-weight-bold: 700;
+  --syn-font-weight-bold: 600;
   --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
   --syn-font-weight-normal: 400;
   --syn-font-weight-semibold: 600;
-  --syn-header-border-color: var(--syn-color-neutral-400);
-  --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
-  --syn-input-background-color: var(--syn-color-neutral-0);
+  --syn-header-border-color: var(--syn-color-neutral-300);
+  --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-pill);
+  --syn-input-background-color: var(--syn-color-neutral-50);
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --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);
-  --syn-input-border-color-hover: var(--syn-color-neutral-950);
+  --syn-input-border-color: var(--syn-color-neutral-1000);
+  --syn-input-border-color-active: var(--syn-color-primary-500);
+  --syn-input-border-color-disabled: var(--syn-color-neutral-1000);
+  --syn-input-border-color-focus: var(--syn-color-primary-400);
+  --syn-input-border-color-focus-error: var(--syn-color-error-600);
+  --syn-input-border-color-hover: var(--syn-color-primary-400);
   --syn-input-border-color-offset: var(--syn-panel-background-color);
-  --syn-input-border-radius-large: var(--syn-border-radius-none);
-  --syn-input-border-radius-medium: var(--syn-border-radius-none);
-  --syn-input-border-radius-small: var(--syn-border-radius-none);
+  --syn-input-border-radius-large: var(--syn-border-radius-medium);
+  --syn-input-border-radius-medium: var(--syn-border-radius-medium);
+  --syn-input-border-radius-small: var(--syn-border-radius-medium);
   --syn-input-border-width: 1px;
-  --syn-input-color: var(--syn-color-neutral-950);
-  --syn-input-color-disabled: var(--syn-color-neutral-950);
-  --syn-input-color-focus: var(--syn-color-neutral-950);
-  --syn-input-color-hover: var(--syn-color-neutral-950);
+  --syn-input-color: var(--syn-color-neutral-1000);
+  --syn-input-color-disabled: var(--syn-color-neutral-1000);
+  --syn-input-color-focus: var(--syn-color-neutral-1000);
+  --syn-input-color-hover: var(--syn-color-neutral-1000);
   --syn-input-disabled-opacity: 0.5;
-  --syn-input-focus-ring-color: var(--syn-color-primary-400);
+  --syn-input-focus-ring-color: var(--syn-color-primary-700);
   --syn-input-focus-ring-error: var(--syn-color-error-600);
   --syn-input-focus-ring-offset: 0px;
   --syn-input-font-family: var(--syn-font-sans);
@@ -229,18 +229,18 @@
   --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
   --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
   --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
-  --syn-input-icon-color: var(--syn-color-neutral-800);
-  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
+  --syn-input-icon-color: var(--syn-color-neutral-1000);
+  --syn-input-icon-color-hover: var(--syn-color-neutral-1000);
   --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-color: var(--syn-color-neutral-1000);
   --syn-input-label-font-size-large: var(--syn-font-size-large);
   --syn-input-label-font-size-medium: var(--syn-font-size-medium);
   --syn-input-label-font-size-small: var(--syn-font-size-small);
-  --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
-  --syn-input-placeholder-color: var(--syn-color-neutral-500);
-  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
+  --syn-input-letter-spacing: normal;
+  --syn-input-placeholder-color: var(--syn-color-neutral-800);
+  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
   --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
   --syn-input-readonly-background-color: var(--syn-readonly-background-color);
   --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
@@ -255,16 +255,16 @@
   --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);
-  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
-  --syn-interactive-quiet-color: var(--syn-color-neutral-950);
-  --syn-interactive-quiet-color-active: var(--syn-color-primary-700);
-  --syn-interactive-quiet-color-hover: var(--syn-color-primary-600);
-  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
-  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
-  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
-  --syn-letter-spacing-looser: 2.4px; /** Shoelace compatibility DO NOT USE */
+  --syn-interactive-emphasis-color: var(--syn-color-primary-400);
+  --syn-interactive-emphasis-color-active: var(--syn-color-primary-700);
+  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-600);
+  --syn-interactive-quiet-color: var(--syn-color-neutral-1000);
+  --syn-interactive-quiet-color-active: var(--syn-color-primary-500);
+  --syn-interactive-quiet-color-hover: var(--syn-color-primary-400);
+  --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
+  --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
+  --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
+  --syn-letter-spacing-looser: 2px; /** Shoelace compatibility DO NOT USE */
   --syn-letter-spacing-normal: normal;
   --syn-line-height-dense: 1.2; /** Shoelace compatibility DO NOT USE */
   --syn-line-height-denser: 1; /** Shoelace compatibility DO NOT USE */
@@ -277,46 +277,47 @@
   --syn-link-quiet-color: var(--syn-interactive-quiet-color);
   --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
   --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-link-underline-outline: 25%;
+  --syn-logo-color: var(--syn-color-primary-300);
   --syn-namur-color-border: var(--syn-color-neutral-50);
-  --syn-namur-critical-color: var(--syn-color-critical-600);
+  --syn-namur-critical-color: var(--syn-color-critical-400);
   --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-error-color-background: var(--syn-color-error-50);
   --syn-namur-icon-color: var(--syn-color-neutral-50);
-  --syn-namur-info-color: var(--syn-color-info-500);
+  --syn-namur-info-color: var(--syn-color-info-600);
   --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-neutral-color-background: var(--syn-color-neutral-300);
   --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-namur-success-color-background: var(--syn-color-success-50);
+  --syn-namur-warning-color: var(--syn-color-warning-500);
+  --syn-namur-warning-color-background: var(--syn-color-warning-50);
   --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);
-  --syn-option-check-color: var(--syn-color-primary-600);
+  --syn-option-background-color-active: var(--syn-interactive-emphasis-color-active);
+  --syn-option-background-color-hover: var(--syn-interactive-emphasis-color-hover);
+  --syn-option-check-color: var(--syn-interactive-quiet-color);
   --syn-option-check-color-active: var(--syn-color-neutral-0);
-  --syn-option-check-color-hover: var(--syn-color-primary-600);
+  --syn-option-check-color-hover: var(--syn-color-neutral-0);
   --syn-option-color: var(--syn-typography-color-text);
   --syn-option-color-active: var(--syn-typography-color-text-inverted);
-  --syn-option-color-hover: var(--syn-typography-color-text);
-  --syn-option-icon-color: var(--syn-typography-color-text);
-  --syn-option-icon-color-active: var(--syn-typography-color-text-inverted);
-  --syn-option-icon-color-hover: var(--syn-typography-color-text);
-  --syn-overlay-background-blur: 0px;
-  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
-  --syn-page-background: var(--syn-color-neutral-50);
-  --syn-panel-background-color: var(--syn-color-neutral-0);
+  --syn-option-color-hover: var(--syn-typography-color-text-inverted);
+  --syn-option-icon-color: var(--syn-interactive-quiet-color);
+  --syn-option-icon-color-active: var(--syn-color-neutral-0);
+  --syn-option-icon-color-hover: var(--syn-color-neutral-0);
+  --syn-overlay-background-blur: 8px;
+  --syn-overlay-background-color: rgba(0, 5, 26, 0.6);
+  --syn-page-background: var(--syn-color-neutral-0); /** Will be DEPRECATED */
+  --syn-page-background-color: var(--syn-color-neutral-0);
+  --syn-panel-background-color: var(--syn-color-neutral-50);
   --syn-panel-border-color: var(--syn-color-neutral-300);
   --syn-panel-border-radius: var(--syn-border-radius-medium);
   --syn-panel-border-width: var(--syn-border-width-small);
-  --syn-progress-indicator-color: var(--syn-color-primary-600);
-  --syn-progress-track-color: var(--syn-color-neutral-200);
-  --syn-range-color-inactive: var(--syn-color-neutral-200);
-  --syn-range-error-color: var(--syn-color-error-700);
-  --syn-range-tick-color: var(--syn-color-neutral-400);
+  --syn-progress-indicator-color: var(--syn-color-primary-500);
+  --syn-progress-track-color: var(--syn-color-neutral-300);
+  --syn-range-color-inactive: var(--syn-color-neutral-300);
+  --syn-range-error-color: var(--syn-color-error-600);
+  --syn-range-tick-color: var(--syn-color-neutral-600);
   --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
   --syn-readonly-background-color: var(--syn-color-neutral-300);
   --syn-spacing-1-5x-large: 40px;
@@ -333,7 +334,7 @@
   --syn-spacing-small: 12px;
   --syn-spacing-x-large: 32px;
   --syn-spacing-x-small: 8px;
-  --syn-spinner-opacity: 0.16;
+  --syn-spinner-opacity: 0.4;
   --syn-switch-height-large: 28px;
   --syn-switch-height-medium: var(--syn-spacing-large);
   --syn-switch-height-small: var(--syn-spacing-medium-large);
@@ -341,18 +342,18 @@
   --syn-switch-width-medium: var(--syn-spacing-1-5x-large);
   --syn-switch-width-small: var(--syn-spacing-x-large);
   --syn-table-background-color: var(--syn-panel-background-color);
-  --syn-table-background-color-alternating: var(--syn-color-neutral-50);
-  --syn-table-background-color-header: var(--syn-color-neutral-200);
+  --syn-table-background-color-alternating: var(--syn-color-neutral-200);
+  --syn-table-background-color-header: var(--syn-color-neutral-300);
   --syn-table-border-color: var(--syn-color-neutral-300);
-  --syn-table-shadow-end: rgba(49, 55, 58, 0);
-  --syn-table-shadow-start: rgba(49, 55, 58, 0.16);
+  --syn-table-shadow-end: rgba(13, 13, 13, 0);
+  --syn-table-shadow-start: rgba(13, 13, 13, 0.8);
   --syn-text-decoration-default: none;
   --syn-text-decoration-underline: underline;
   --syn-toggle-size-large: var(--syn-spacing-large);
   --syn-toggle-size-medium: var(--syn-spacing-medium-large);
   --syn-toggle-size-small: var(--syn-spacing-medium);
   --syn-tooltip-arrow-size: 9px;
-  --syn-tooltip-background-color: var(--syn-color-neutral-950);
+  --syn-tooltip-background-color: var(--syn-color-neutral-1000);
   --syn-tooltip-border-radius: var(--syn-border-radius-small);
   --syn-tooltip-color: var(--syn-typography-color-text-inverted);
   --syn-tooltip-font-family: var(--syn-font-sans);
@@ -365,37 +366,37 @@
   --syn-transition-slow: 500ms; /** Shoelace compatibility DO NOT USE */
   --syn-transition-x-fast: 50ms; /** Shoelace compatibility DO NOT USE */
   --syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
-  --syn-typography-color-text: var(--syn-color-neutral-950);
-  --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
+  --syn-typography-color-text: var(--syn-color-neutral-1000);
+  --syn-typography-color-text-inverted: var(--syn-color-neutral-50);
   --syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
   --syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
   --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
   --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
   --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
-  --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
-  --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
-  --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
-  --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16);
-  --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16);
-  --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16);
-  --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16);
-  --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
-  --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
-  --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-body-x-small-semibold: 600 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-body-x-small-bold: 700 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-body-small-regular: 400 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-body-small-semibold: 600 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-body-small-bold: 700 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-body-medium-regular: 400 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-body-medium-semibold: 600 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-body-medium-bold: 700 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-body-large-regular: 400 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-body-large-semibold: 600 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-body-large-bold: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-heading-large: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-heading-x-large: 700 24px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-heading-2x-large: 700 32px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-heading-3x-large: 700 40px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
+  --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
+  --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
+  --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
+  --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
+  --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
+  --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
+  --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
+  --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
+  --syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-small-regular: 400 14px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-small-semibold: 600 14px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-small-bold: 600 14px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-medium-regular: 400 16px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-medium-semibold: 600 16px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-medium-bold: 600 16px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-large-regular: 400 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-large-semibold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-large-bold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-large: 400 22px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-x-large: 400 28px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-2x-large: 400 34px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-3x-large: 400 40px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
 }

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.48.1
+ * @synergy-design-system/tokens version 2.48.2
  * SICK Global UX Foundation
  */
 
@@ -1508,6 +1508,11 @@ export const SynOverlayBackgroundColor = 'var(--syn-overlay-background-color)';
  */
 export const SynPageBackground = 'var(--syn-page-background)';
 
+/**
+ * @type {string}
+ */
+export const SynPageBackgroundColor = 'var(--syn-page-background-color)';
+
 /**
  * @type {string}
  */