@synergy-design-system/mcp 1.9.0 → 1.11.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/mcp-v1.11.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.10.0...mcp/1.11.0) (2025-10-23)
+
+
+### Features
+
+* ✨ CD update for syn-breadcrumb ([#1045](https://github.com/synergy-design-system/synergy-design-system/issues/1045)) ([46383b2](https://github.com/synergy-design-system/synergy-design-system/commit/46383b2557d284328cfb49d476a052986cb47d75))
+
+# [@synergy-design-system/mcp-v1.10.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.9.0...mcp/1.10.0) (2025-10-22)
+
+
+### Features
+
+* ✨ CD update for syn-header ([#1047](https://github.com/synergy-design-system/synergy-design-system/issues/1047)) ([6841148](https://github.com/synergy-design-system/synergy-design-system/commit/684114811f939b91a13302cc85300fd1b9b1670e))
+
 # [@synergy-design-system/mcp-v1.9.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.8.2...mcp/1.9.0) (2025-10-20)
 
 

package/metadata/checksum.txt

@@ -1 +1 @@
-a78070777e61a2b7a45cab5b604035dc
+d1a9ae3630171aa2cbb2fd92eaac7827

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

@@ -2,9 +2,9 @@ import { css } from 'lit';
 
 export default css`
   .breadcrumb-item {
-    color: var(--syn-color-neutral-500);
+    color: var(--syn-breadcrumb-color, var(--syn-color-neutral-500));
     font-size: var(--syn-font-size-x-small);
-    font-weight: var(--syn-font-weight-normal);
+    font-weight: var(--syn-font-weight-semibold);
   }
 
   /**
@@ -15,6 +15,10 @@ export default css`
     border-radius: var(--syn-border-radius-none);
   }
 
+  :host(:not(:last-of-type)) .breadcrumb-item {
+    font-weight: var(--syn-font-weight-normal);
+  }
+
   :host(:not(:last-of-type)) .breadcrumb-item__label {
     color: var(--syn-typography-color-text);
   }
@@ -49,7 +53,7 @@ export default css`
    */
   :host(:last-of-type) .breadcrumb-item--has-prefix .breadcrumb-item__prefix,
   :host(:last-of-type) .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
-    color: var(--syn-color-neutral-500);
+    color: inherit;
   }
 
   .breadcrumb-item__separator {

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

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

package/metadata/packages/components/static/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/components-v2.50.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.49.0...components/2.50.0) (2025-10-23)
+
+
+### Features
+
+* ✨ CD update for syn-breadcrumb ([#1045](https://github.com/synergy-design-system/synergy-design-system/issues/1045)) ([46383b2](https://github.com/synergy-design-system/synergy-design-system/commit/46383b2557d284328cfb49d476a052986cb47d75))
+
+# [@synergy-design-system/components-v2.49.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.48.0...components/2.49.0) (2025-10-22)
+
+
+### Features
+
+* ✨ CD update for syn-header ([#1047](https://github.com/synergy-design-system/synergy-design-system/issues/1047)) ([6841148](https://github.com/synergy-design-system/synergy-design-system/commit/684114811f939b91a13302cc85300fd1b9b1670e))
+
 # [@synergy-design-system/components-v2.48.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.47.2...components/2.48.0) (2025-10-20)
 
 

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v2.31.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.30.0...tokens/2.31.0) (2025-10-23)
+
+
+### Features
+
+* ✨ CD update for syn-breadcrumb ([#1045](https://github.com/synergy-design-system/synergy-design-system/issues/1045)) ([46383b2](https://github.com/synergy-design-system/synergy-design-system/commit/46383b2557d284328cfb49d476a052986cb47d75))
+
+# [@synergy-design-system/tokens-v2.30.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.29.0...tokens/2.30.0) (2025-10-22)
+
+
+### Features
+
+* ✨ CD update for syn-header ([#1047](https://github.com/synergy-design-system/synergy-design-system/issues/1047)) ([6841148](https://github.com/synergy-design-system/synergy-design-system/commit/684114811f939b91a13302cc85300fd1b9b1670e))
+
 # [@synergy-design-system/tokens-v2.29.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.28.0...tokens/2.29.0) (2025-10-20)
 
 

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.28.0
+ * @synergy-design-system/tokens version 2.30.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -19,6 +19,7 @@
   --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-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);
@@ -119,6 +120,7 @@
   --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-input-background-color: var(--syn-color-neutral-0);
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -203,9 +205,11 @@
   --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-opacity-50: 0.5; /** 50% */
   --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-panel-border-color: var(--syn-color-neutral-300);
   --syn-panel-border-radius: var(--syn-border-radius-medium);

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.28.0
+ * @synergy-design-system/tokens version 2.30.0
  * SICK Global UX Foundation
  */
 
@@ -63,6 +63,11 @@ export const SynBorderWidthSmall = 'var(--syn-border-width-small)';
  */
 export const SynBorderWidthXLarge = 'var(--syn-border-width-x-large)';
 
+/**
+ * @type {string}
+ */
+export const SynBreadcrumbColor = 'var(--syn-breadcrumb-color)';
+
 /**
  * @type {string}
  */
@@ -563,6 +568,11 @@ export const SynFontWeightNormal = 'var(--syn-font-weight-normal)';
  */
 export const SynFontWeightSemibold = 'var(--syn-font-weight-semibold)';
 
+/**
+ * @type {string}
+ */
+export const SynHeaderBorderColor = 'var(--syn-header-border-color)';
+
 /**
  * @type {string}
  */
@@ -983,6 +993,11 @@ export const SynLinkQuietColorHover = 'var(--syn-link-quiet-color-hover)';
  */
 export const SynLinkUnderlineOutline = 'var(--syn-link-underline-outline)';
 
+/**
+ * @type {string}
+ */
+export const SynLogoColor = 'var(--syn-logo-color)';
+
 /**
  * @type {string}
  */
@@ -998,6 +1013,11 @@ export const SynOverlayBackgroundBlur = 'var(--syn-overlay-background-blur)';
  */
 export const SynOverlayBackgroundColor = 'var(--syn-overlay-background-color)';
 
+/**
+ * @type {string}
+ */
+export const SynPageBackground = 'var(--syn-page-background)';
+
 /**
  * @type {string}
  */

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.28.0
+ * @synergy-design-system/tokens version 2.30.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -19,6 +19,7 @@
   --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-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);
@@ -119,6 +120,7 @@
   --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-input-background-color: var(--syn-color-neutral-0);
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -203,9 +205,11 @@
   --syn-link-quiet-color-active: var(--syn-interactive-emphasis-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-600);
   --syn-opacity-50: 0.5; /** 50% */
   --syn-overlay-background-blur: 0px;
   --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
+  --syn-page-background: 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);

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.28.0
+ * @synergy-design-system/tokens version 2.30.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -19,6 +19,7 @@
   --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-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);
@@ -119,6 +120,7 @@
   --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-input-background-color: var(--syn-color-neutral-0);
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -203,9 +205,11 @@
   --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-opacity-50: 0.5; /** 50% */
   --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-panel-border-color: var(--syn-color-neutral-300);
   --syn-panel-border-radius: var(--syn-border-radius-medium);

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.28.0
+ * @synergy-design-system/tokens version 2.30.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -19,6 +19,7 @@
   --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-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);
@@ -119,6 +120,7 @@
   --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-input-background-color: var(--syn-color-neutral-0);
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -203,9 +205,11 @@
   --syn-link-quiet-color-active: var(--syn-interactive-emphasis-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-600);
   --syn-opacity-50: 0.5; /** 50% */
   --syn-overlay-background-blur: 0px;
   --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
+  --syn-page-background: 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);

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.28.0
+ * @synergy-design-system/tokens version 2.30.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -19,6 +19,7 @@
   --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-typography-color-text);
   --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);
@@ -98,7 +99,7 @@
   --syn-duration-normal: 250ms;
   --syn-duration-slow: 500ms;
   --syn-focus-ring-border-radius: var(--syn-border-radius-small);
-  --syn-focus-ring-color: var(--syn-color-primary-500);
+  --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);
@@ -119,6 +120,7 @@
   --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-300);
   --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);
@@ -168,10 +170,10 @@
   --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
   --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
   --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
-  --syn-input-readonly-background-color: var(--syn-color-neutral-100);
-  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-100);
-  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-100);
-  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-100);
+  --syn-input-readonly-background-color: var(--syn-color-neutral-200);
+  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-200);
+  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-200);
+  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-200);
   --syn-input-required-content: "*";
   --syn-input-required-content-color: var(--syn-input-label-color);
   --syn-input-required-content-offset: -2px;
@@ -203,9 +205,11 @@
   --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: 25%;
+  --syn-logo-color: var(--syn-color-primary-300);
   --syn-opacity-50: 0.5; /** 50% */
   --syn-overlay-background-blur: 16px;
   --syn-overlay-background-color: rgba(0, 10, 55, 0.6);
+  --syn-page-background: 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);

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.28.0
+ * @synergy-design-system/tokens version 2.30.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -19,6 +19,7 @@
   --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-typography-color-text);
   --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);
@@ -98,7 +99,7 @@
   --syn-duration-normal: 250ms;
   --syn-duration-slow: 500ms;
   --syn-focus-ring-border-radius: var(--syn-border-radius-small);
-  --syn-focus-ring-color: var(--syn-color-primary-700);
+  --syn-focus-ring-color: var(--syn-color-primary-500);
   --syn-focus-ring-offset: var(--syn-spacing-3x-small);
   --syn-focus-ring-style: solid;
   --syn-focus-ring-width: var(--syn-border-width-medium);
@@ -119,6 +120,7 @@
   --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
   --syn-font-weight-normal: 400;
   --syn-font-weight-semibold: 600;
+  --syn-header-border-color: #e6e1dc;
   --syn-input-background-color: var(--syn-color-neutral-0);
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -168,10 +170,10 @@
   --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
   --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
   --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
-  --syn-input-readonly-background-color: #f8f7f6;
-  --syn-input-readonly-background-color-disabled: #f8f7f6;
-  --syn-input-readonly-background-color-focus: #f8f7f6;
-  --syn-input-readonly-background-color-hover: #f8f7f6;
+  --syn-input-readonly-background-color: #f2f0ed;
+  --syn-input-readonly-background-color-disabled: #f2f0ed;
+  --syn-input-readonly-background-color-focus: #f2f0ed;
+  --syn-input-readonly-background-color-hover: #f2f0ed;
   --syn-input-required-content: "*";
   --syn-input-required-content-color: var(--syn-input-label-color);
   --syn-input-required-content-offset: -2px;
@@ -203,9 +205,11 @@
   --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: 25%;
+  --syn-logo-color: var(--syn-color-primary-700);
   --syn-opacity-50: 0.5; /** 50% */
   --syn-overlay-background-blur: 16px;
   --syn-overlay-background-color: rgba(0, 10, 55, 0.3);
+  --syn-page-background: #f8f7f6;
   --syn-panel-background-color: var(--syn-color-neutral-0);
   --syn-panel-border-color: #e6e1dc;
   --syn-panel-border-radius: var(--syn-border-radius-medium);

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

@@ -31,7 +31,7 @@ Use the logo slot to change the app logo. Usually this is only needed in whitela
       width: 32px;
       height: 32px;
       border-radius: 32px;
-      background: var(--syn-color-primary-500);
+      background: var(--syn-color-neutral-1000);
       display: block;
     "
     slot="logo"
@@ -48,7 +48,7 @@ The focus event gives the user feedback that a link in the logo has been focused
 ```html
 <style>
   .custom-header-link-with-logo {
-    color: var(--syn-color-primary-600) !important;
+    color: var(--syn-logo-color) !important;
   }
   .custom-header-link-with-logo syn-icon {
     display: block;

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-color-neutral-100);
+    background: var(--syn-page-background);
     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-color-neutral-100);
+    background: var(--syn-page-background);
     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-color-neutral-100);
+    background: var(--syn-page-background);
     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-color-neutral-100);
+    background: var(--syn-page-background);
     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-color-neutral-100);
+    background: var(--syn-page-background);
     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-color-neutral-100);
+    background: var(--syn-page-background);
     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-color-neutral-100);
+    background: var(--syn-page-background);
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
@@ -1842,9 +1842,9 @@ The top navigation can be combined with a light grey background.This variant is
 
 ---
 
-## White Background
+## Alternative Background
 
-Additionally the top navigation can be combined with a white background.
+Additionally the top navigation can be combined with an alternative background.
 
 ```html
 <!-- .synergy-demo-application -->
@@ -2002,7 +2002,7 @@ Additionally the top navigation can be combined with a white background.
   }
 
   .synergy-demo-content {
-    background: var(--syn-color-neutral-100);
+    background: var(--syn-page-background);
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
@@ -2047,7 +2047,7 @@ Additionally the top navigation can be combined with a white background.
 
 <style>
   #appshell-white-background .synergy-demo-content {
-    background: var(--syn-color-neutral-0);
+    background: var(--syn-panel-background-color);
   }
 </style>
 ```

package/metadata/static/templates/footer.md

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

package/package.json

@@ -33,11 +33,11 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.4",
     "typescript": "^5.9.3",
+    "@synergy-design-system/components": "2.50.0",
+    "@synergy-design-system/tokens": "^2.31.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/styles": "1.8.1",
-    "@synergy-design-system/components": "2.48.0",
-    "@synergy-design-system/tokens": "^2.29.0"
+    "@synergy-design-system/styles": "1.8.1"
   },
   "exports": {
     ".": {
@@ -122,7 +122,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",