@synergy-design-system/mcp 2.4.1 → 2.6.0

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.2.0
+ * @synergy-design-system/tokens version 3.3.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -307,8 +307,9 @@
   --syn-option-icon-color-hover: var(--syn-color-neutral-0);
   --syn-overlay-background-blur: 8px;
   --syn-overlay-background-color: rgba(0, 5, 26, 0.3);
-  --syn-page-background: #f8f7f6; /** Will be DEPRECATED */
-  --syn-page-background-color: #f8f7f6;
+  --syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
+  --syn-page-background-color: var(--syn-color-neutral-0);
+  --syn-page-background-color-muted: #f8f7f6;
   --syn-panel-background-color: var(--syn-color-neutral-0);
   --syn-panel-border-color: #e6e1dc;
   --syn-panel-border-radius: var(--syn-border-radius-medium);
@@ -320,6 +321,16 @@
   --syn-range-tick-color: var(--syn-color-neutral-500);
   --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
   --syn-readonly-background-color: #e6e1dc;
+  --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-shadow-sticky-down: 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
   --syn-spacing-1-5x-large: 40px;
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
@@ -373,15 +384,6 @@
   --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(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';

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.2.0
+ * @synergy-design-system/tokens version 3.3.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -307,8 +307,9 @@
   --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); /** Will be DEPRECATED */
-  --syn-page-background-color: var(--syn-color-neutral-50);
+  --syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
+  --syn-page-background-color: var(--syn-color-neutral-0);
+  --syn-page-background-color-muted: var(--syn-color-neutral-50);
   --syn-panel-background-color: var(--syn-color-neutral-0);
   --syn-panel-border-color: var(--syn-color-neutral-300);
   --syn-panel-border-radius: var(--syn-border-radius-medium);
@@ -320,6 +321,16 @@
   --syn-range-tick-color: var(--syn-color-neutral-400);
   --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
   --syn-readonly-background-color: var(--syn-color-neutral-300);
+  --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-shadow-sticky-down: 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
   --syn-spacing-1-5x-large: 40px;
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
@@ -373,15 +384,6 @@
   --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';

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.2.0
+ * @synergy-design-system/tokens version 3.3.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -307,8 +307,9 @@
   --syn-option-icon-color-hover: var(--syn-input-icon-color-hover);
   --syn-overlay-background-blur: 0px;
   --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
-  --syn-page-background: var(--syn-color-neutral-100); /** Will be DEPRECATED */
-  --syn-page-background-color: var(--syn-color-neutral-100);
+  --syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
+  --syn-page-background-color: var(--syn-color-neutral-0);
+  --syn-page-background-color-muted: var(--syn-color-neutral-100);
   --syn-panel-background-color: var(--syn-color-neutral-0);
   --syn-panel-border-color: var(--syn-color-neutral-300);
   --syn-panel-border-radius: var(--syn-border-radius-medium);
@@ -320,6 +321,16 @@
   --syn-range-tick-color: var(--syn-color-neutral-400);
   --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
   --syn-readonly-background-color: var(--syn-color-neutral-300);
+  --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-shadow-sticky-down: 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
   --syn-spacing-1-5x-large: 40px;
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
@@ -373,15 +384,6 @@
   --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';

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.2.0
+ * @synergy-design-system/tokens version 3.3.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -307,8 +307,9 @@
   --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: var(--syn-page-background-color); /** Will be DEPRECATED */
   --syn-page-background-color: var(--syn-color-neutral-0);
+  --syn-page-background-color-muted: 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);
@@ -320,6 +321,16 @@
   --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-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-shadow-sticky-down: 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
   --syn-spacing-1-5x-large: 40px;
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
@@ -373,15 +384,6 @@
   --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(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';

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.2.0
+ * @synergy-design-system/tokens version 3.3.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -307,8 +307,9 @@
   --syn-option-icon-color-hover: var(--syn-color-neutral-0);
   --syn-overlay-background-blur: 8px;
   --syn-overlay-background-color: rgba(0, 5, 26, 0.3);
-  --syn-page-background: #f8f7f6; /** Will be DEPRECATED */
-  --syn-page-background-color: #f8f7f6;
+  --syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
+  --syn-page-background-color: var(--syn-color-neutral-0);
+  --syn-page-background-color-muted: #f8f7f6;
   --syn-panel-background-color: var(--syn-color-neutral-0);
   --syn-panel-border-color: #e6e1dc;
   --syn-panel-border-radius: var(--syn-border-radius-medium);
@@ -320,6 +321,16 @@
   --syn-range-tick-color: var(--syn-color-neutral-500);
   --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
   --syn-readonly-background-color: #e6e1dc;
+  --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-shadow-sticky-down: 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
   --syn-spacing-1-5x-large: 40px;
   --syn-spacing-2x-large: 48px;
   --syn-spacing-2x-small: 4px;
@@ -373,15 +384,6 @@
   --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(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';

package/metadata/static/components/syn-accordion/docs.md

@@ -306,6 +306,51 @@ Use the disable attribute to prevent the details from expanding.
 Use the size attribute to change a detail’s size. The size attribute should not be mixed within an accordion
 
 ```html
+<syn-accordion class="accordion-size" size="small">
+  <syn-details size="small">
+    <span slot="summary">Accordion Element</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details size="small">
+    <span slot="summary">Accordion Element</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details size="small">
+    <span slot="summary">Accordion Element</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+</syn-accordion>
+
 <syn-accordion class="accordion-size" size="medium">
   <syn-details size="medium">
     <span slot="summary">Accordion Element</span>

package/metadata/static/components/syn-details/docs.md

@@ -149,35 +149,52 @@ Use the disable attribute to prevent the details from expanding.
 Use the size attribute to change a detail’s size.
 
 ```html
-<syn-details size="medium" contained="">
-  <span slot="summary">Toggle Me</span>
-  <h3
-    style="
-      margin: 0 0 var(--syn-spacing-x-small);
-      font: var(--syn-body-small-bold);
-    "
-  >
-    Subheadline
-  </h3>
-  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-  voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-</syn-details>
-<br />
-<syn-details size="large" contained="">
-  <span slot="summary">Toggle Me</span>
-  <h3
-    style="
-      margin: 0 0 var(--syn-spacing-x-small);
-      font: var(--syn-body-small-bold);
-    "
-  >
-    Subheadline
-  </h3>
-  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-  voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-</syn-details>
+<div
+  style="display: flex; gap: var(--syn-spacing-x-small); flex-direction: column"
+>
+  <syn-details size="small" contained="">
+    <span slot="summary">Toggle Me</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-x-small-bold);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details size="medium" contained="">
+    <span slot="summary">Toggle Me</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-small-bold);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+  <syn-details size="large" contained="">
+    <span slot="summary">Toggle Me</span>
+    <h3
+      style="
+        margin: 0 0 var(--syn-spacing-x-small);
+        font: var(--syn-body-medium-bold);
+      "
+    >
+      Subheadline
+    </h3>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+  </syn-details>
+</div>
 ```
 
 ---

package/metadata/static/components/syn-header/docs.md

@@ -132,3 +132,13 @@ Use the Burger Menu as trigger to open and close the Navigation. In the open sta
 ```html
 <syn-header burger-menu="closed" label="App Name"> </syn-header>
 ```
+
+---
+
+## Sticky
+
+Use the sticky attribute to add a shadow when the header is fixed at the top and other content scrolls behind it.
+
+```html
+<syn-header label="App Name" sticky="" burger-menu="hidden"></syn-header>
+```

package/metadata/static/templates/appshell.md

@@ -218,7 +218,7 @@ The side navigation opens when the user clicks on the burger menu. As the side n
   }
 
   .synergy-demo-content {
-    background: var(--syn-page-background-color);
+    background: var(--syn-page-background-color-muted);
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
@@ -483,7 +483,7 @@ The side navigation opens when the user clicks on the burger menu. As the side n
   }
 
   .synergy-demo-content {
-    background: var(--syn-page-background-color);
+    background: var(--syn-page-background-color-muted);
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
@@ -779,7 +779,7 @@ The navigation opens when the user hovers over it. As the navigation opens, it o
   }
 
   .synergy-demo-content {
-    background: var(--syn-page-background-color);
+    background: var(--syn-page-background-color-muted);
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
@@ -1056,7 +1056,7 @@ The navigation opens when the user touches it. As the side navigation opens, a t
   }
 
   .synergy-demo-content {
-    background: var(--syn-page-background-color);
+    background: var(--syn-page-background-color-muted);
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
@@ -1317,7 +1317,7 @@ General BehaviourThe navigation maintains its compact width until the user click
   }
 
   .synergy-demo-content {
-    background: var(--syn-page-background-color);
+    background: var(--syn-page-background-color-muted);
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
@@ -1578,7 +1578,7 @@ General BehaviourThe navigation maintains its compact width until the user click
   }
 
   .synergy-demo-content {
-    background: var(--syn-page-background-color);
+    background: var(--syn-page-background-color-muted);
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
@@ -1796,7 +1796,7 @@ The top navigation can be combined with a light grey background.This variant is
   }
 
   .synergy-demo-content {
-    background: var(--syn-page-background-color);
+    background: var(--syn-page-background-color-muted);
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
@@ -2002,7 +2002,7 @@ Additionally the top navigation can be combined with an alternative background.
   }
 
   .synergy-demo-content {
-    background: var(--syn-page-background-color);
+    background: var(--syn-page-background-color-muted);
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;

package/metadata/static/templates/footer.md

@@ -295,7 +295,7 @@
   }
 
   .synergy-demo-content {
-    background: var(--syn-page-background-color);
+    background: var(--syn-page-background-color-muted);
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;

package/package.json

@@ -28,12 +28,12 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "3.2.1",
+    "@synergy-design-system/components": "3.4.0",
+    "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/fonts": "1.0.3",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/styles": "2.0.1",
-    "@synergy-design-system/tokens": "^3.2.1"
+    "@synergy-design-system/tokens": "^3.4.0"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "2.4.1",
+  "version": "2.6.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",

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

@@ -1,133 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .details {
-    background-color: unset;
-    border-color: var(--syn-panel-border-color);
-    border-radius: var(--syn-border-radius-none);
-    border-width: 0 0 var(--syn-border-width-small);
-  }
-
-  /** #429: Use token for opacity */
-  .details--disabled {
-    opacity: var(--syn-opacity-50);
-  }
-
-  .details__summary-icon {
-    align-self: flex-start;
-    color: var(--syn-color-neutral-950);
-    font-size: var(--syn-spacing-large);
-
-    /**
-     * As we are using an alignment of "start"  instead of "center" make sure
-     * the arrow starts on the same visual line as the first line of headline text
-     */
-    position: relative;
-    top: 2px;
-  }
-
-  .details .details__summary {
-    color: var(--syn-typography-color-text);
-  }
-
-  .details__header {
-    gap: var(--syn-spacing-medium);
-  }
-
-  /**
-   * As we are using top/down arrows for the details element,
-   * 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);
-  }
-
-  /**
-   * Adjustments for medium variant
-   */
-  .details--size-medium .details__header {
-    padding: var(--syn-spacing-medium-large) 0;
-  }
-
-  .details--size-medium .details__content {
-    font-size: var(--syn-font-size-small);
-    line-height: var(--syn-line-height-normal);
-    padding: var(--syn-spacing-medium) 0 var(--syn-spacing-large);
-  }
-
-  .details--size-medium .details__summary {
-    font: var(--syn-body-medium-bold);
-  }
-
-  .details--size-medium .details__summary::slotted(syn-icon) {
-    /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */
-    flex-shrink: 0;
-    font-size: var(--syn-spacing-large);
-    margin-right: var(--syn-spacing-small);
-  }
-
-  /**
-   * Adjustment for large variant
-   */
-  .details--size-large .details__header {
-    padding: var(--syn-spacing-large) 0;
-  }
-
-  .details--size-large .details__content {
-    font-size: var(--syn-font-size-medium);
-    line-height: var(--syn-line-height-normal);
-    padding: var(--syn-spacing-medium-large) 0 var(--syn-spacing-large);
-  }
-
-  .details--size-large .details__summary {
-    font: var(--syn-body-large-bold);
-  }
-
-  .details--size-large .details__summary-icon {
-    font-size: var(--syn-spacing-x-large);
-  }
-
-  .details--size-large .details__summary::slotted(syn-icon) {
-    /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */
-    flex-shrink: 0;
-    font-size: var(--syn-spacing-x-large);
-    margin-right: var(--syn-spacing-small);
-  }
-
-  /**
-   * Add a visually visible hover effect to the summary element
-   */
-  .details:not(.details--disabled) .details__header:hover .details__summary,
-  .details:not(.details--disabled) .details__header:hover .details__summary-icon {
-    color: var(--syn-color-primary-700);
-  }
-
-  /**
-   *  Contained style
-   */
-  .details--contained {
-    background-color: var(--syn-panel-background-color);
-    border-radius: var(--syn-border-radius-medium);
-    border-width: var(--syn-panel-border-width);
-  }
-
-  .details--contained .details__header:focus-visible {
-    border-radius: var(--syn-border-radius-medium);
-  }
-
-  .details--size-medium.details--contained .details__header {
-    padding: var(--syn-spacing-medium-large) var(--syn-spacing-large);
-  }
-
-  .details--size-medium.details--contained .details__content {
-    padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);
-  }
-
-  .details--size-large.details--contained .details__header {
-    padding: var(--syn-spacing-large);
-  }
-
-  .details--size-large.details--contained .details__content {
-    padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-large);
-  }
-`;