@synergy-design-system/mcp 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
+# [@synergy-design-system/mcp-v1.2.1](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.2.0...mcp/1.2.1) (2025-08-21)
+
+
+### Bug Fixes
+
+* 🐛  Placeholder is clipped for syn-select multiple ([#992](https://github.com/synergy-design-system/synergy-design-system/issues/992)) ([973933e](https://github.com/synergy-design-system/synergy-design-system/commit/973933e477a2cba1611c2f73f77e4e79d755c8a1))
+
 # Changelog
 
+# [@synergy-design-system/mcp-v1.2.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.1.0...mcp/1.2.0) (2025-08-19)
+
+### Features
+
+* ✨ export new sick2025 themes ([#985](https://github.com/synergy-design-system/synergy-design-system/issues/985)) ([148730d](https://github.com/synergy-design-system/synergy-design-system/commit/148730d68037ea74dc241ca6627aa6a32af876ab))
+
+
 # [@synergy-design-system/mcp-v1.1.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.0.0...mcp/1.1.0) (2025-08-08)
 
 

package/metadata/checksum.txt

@@ -1 +1 @@
-8100ce028a0fb7f45f1ca769f98c0007
+2020f706c051179afe10d645a03c27a4

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

@@ -381,8 +381,9 @@ export default css`
    * #850: Allow to measure the size of the combobox.
    * This is needed so we can automatically size and truncate the tags in the <syn-combobox multiple> component.
    * Scoped to multiple to not break the single combobox per accident.
+   * Scoped to when placeholder is not visible to not break the placeholder visualization
    */
-  :host([multiple]) .combobox__tags {
+  :host([multiple]) :not(.combobox--placeholder-visible) > .combobox__inputs > .combobox__tags {
     min-width: 100px;
     overflow: hidden;
   }

package/metadata/packages/components/components/syn-menu-label/component.angular.ts

@@ -22,14 +22,14 @@ import '@synergy-design-system/components/components/menu-label/menu-label.js';
  * @status stable
  * @since 2.0
  *
- * @dependency syn-divider
- *
  * @slot - The menu label's content.
  *
  * @csspart base - The component's base wrapper.
  * @csspart divider - The divider that is displayed above the content
  * @csspart label - The label that is displayed below the divider
  *
+ * @dependency syn-divider
+ *
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */
 @Component({

package/metadata/packages/components/components/syn-menu-label/component.react.ts

@@ -16,14 +16,14 @@ Component.define('syn-menu-label');
  * @status stable
  * @since 2.0
  *
- * @dependency syn-divider
- *
  * @slot - The menu label's content.
  *
  * @csspart base - The component's base wrapper.
  * @csspart divider - The divider that is displayed above the content
  * @csspart label - The label that is displayed below the divider
  *
+ * @dependency syn-divider
+ *
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */
 export const SynMenuLabel = createComponent({

package/metadata/packages/components/components/syn-menu-label/component.ts

@@ -20,14 +20,14 @@ import type { CSSResultGroup } from 'lit';
  * @status stable
  * @since 2.0
  *
- * @dependency syn-divider
- *
  * @slot - The menu label's content.
  *
  * @csspart base - The component's base wrapper.
  * @csspart divider - The divider that is displayed above the content
  * @csspart label - The label that is displayed below the divider
  *
+ * @dependency syn-divider
+ *
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */
 export default class SynMenuLabel extends SynergyElement {

package/metadata/packages/components/components/syn-menu-label/component.vue

@@ -11,14 +11,14 @@
  * @status stable
  * @since 2.0
  *
- * @dependency syn-divider
- *
  * @slot - The menu label's content.
  *
  * @csspart base - The component's base wrapper.
  * @csspart divider - The divider that is displayed above the content
  * @csspart label - The label that is displayed below the divider
  *
+ * @dependency syn-divider
+ *
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */
 import { computed, ref } from 'vue';

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

@@ -149,8 +149,9 @@ export default css`
    * #850: Allow to measure the size of the combobox.
    * This is needed so we can automatically size and truncate the tags in the <syn-select multiple> component.
    * Scoped to multiple to not break the single select per accident.
+   * Scoped to when placeholder is not visible to not break the placeholder visualization
    */
-  :host([multiple]) .select__tags {
+  :host([multiple]) :not(.select--placeholder-visible) > .select__combobox > .select__tags {
     min-width: 100px;
     overflow: hidden;
   }

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

@@ -42,9 +42,9 @@ import '@synergy-design-system/components/components/tab-group/tab-group.js';
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */
 @Component({
   selector: 'syn-tab-group',

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

@@ -39,9 +39,9 @@ Component.define('syn-tab-group');
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */
 export const SynTabGroup = createComponent({
   displayName: 'SynTabGroup',

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

@@ -48,9 +48,9 @@ import type SynTabPanel from '../tab-panel/tab-panel.js';
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */
 export default class SynTabGroup extends SynergyElement {
   static styles: CSSResultGroup = [componentStyles, styles, customStyles];

package/metadata/packages/components/components/syn-tab-group/component.vue

@@ -30,9 +30,9 @@
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/tab-group/tab-group.js';

package/metadata/packages/components/migration/migration-synergy-v3.md

@@ -9,7 +9,7 @@ This document outlines the changes and migration steps required to upgrade from
 We are currently working on the migration to Synergy 3.0, which includes significant updates to the brand appearance, fonts and icon library.
 This migration will ensure that your application remains up-to-date with the latest design standards and functionality improvements.
 
-It is currently not adviced to use the new version in production, as we are still finalizing the migration process.
+It is currently not advised to use the new version in production, as we are still finalizing the migration process.
 However, you can start preparing your codebase for the upcoming changes.
 
 A roadmap and current status of the migration can be found in our [GitHub repository](https://github.com/orgs/synergy-design-system/projects/2/views/37).
@@ -41,6 +41,98 @@ import { setSystemIconLibrary } from "@synergy-design-system/icons";
 setSystemIconLibrary("sick2025");
 ```
 
+#### New SICK 2025 icons
+
+The new SICK 2025 theme comes with an updated icon library that includes both outline and filled versions of icons. These icons are available in the `@synergy-design-system/assets` package and can be used with the `<syn-icon>` or `<syn-icon-button>` component.
+
+The new icon library provides two main styles:
+
+- **Outline icons**: These are the standard outlined icons, which are the default
+- **Filled icons**: These are filled versions of the same icons. The icons have the same name as the outline icons but with a suffix of `_fill`
+
+To use the new SICK 2025 icons in your application, you have several options:
+
+The outline and fill version can be used simultaneously.
+
+```html
+<!-- Outline version -->
+<syn-icon name="home"></syn-icon>
+
+<!-- Filled version -->
+<syn-icon name="home_fill"></syn-icon>
+```
+
+```javascript
+// Example vite config
+import { defineConfig } from "vite";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+
+export default defineConfig({
+  plugins: [
+    viteStaticCopy({
+      targets: [
+        {
+          src: "node_modules/@synergy-design-system/assets/src/sick2025/outline/*",
+          dest: "./assets/icons/",
+        },
+        {
+          src: "node_modules/@synergy-design-system/assets/src/sick2025/fill/*",
+          dest: "./assets/icons/",
+        },
+      ],
+    }),
+  ],
+});
+```
+
+### Tokens
+
+Synergy 3.0 introduces new CSS theme files that implement the updated SICK brand appearance:
+
+- **`sick2025_light.css`**: The new light theme featuring the SICK 2025 brand identity
+- **`sick2025_dark.css`**: The new dark theme featuring the SICK 2025 brand identity
+
+These new themes include significant visual changes compared to the existing themes e.g. changed colors and new color palettes, components with roundings, new font etc.
+
+We added new css class selectors, so it is easy to switch between different themes.
+
+- SICK 2018 light theme: `.syn-sick2018-light`
+- SICK 2018 dark theme: `.syn-sick2018-dark`
+- SICK 2025 light theme: `.syn-sick2025-light`
+- SICK 2025 dark theme: `.syn-sick2025-dark`
+
+To use the new themes in your application:
+
+1. **Replace theme imports** in your HTML or CSS:
+
+   ```javascript
+   // New Synergy 3.0 themes
+   import "@synergy-design-system/tokens/themes/sick2025_light.css";
+   import "@synergy-design-system/tokens/themes/sick2025_dark.css";
+   ```
+
+2. **Update theme switching logic** if you support runtime theme changes:
+
+   ```javascript
+   // Rename the class names for theme switching
+   const switchTheme = () => {
+     const { body } = document;
+     const currentTheme = body.classList.contains("syn-sick2025-dark")
+       ? "dark"
+       : "light";
+
+     if (currentTheme === "light") {
+       // Light theme
+       body.classList.remove("syn-sick2025-light");
+       body.classList.add("syn-sick2025-dark");
+     } else {
+       // Dark theme
+       body.classList.remove("syn-sick2025-dark");
+       body.classList.add("syn-sick2025-light");
+     }
+   };
+   ```
+
 ## Migration Steps
 
 These steps are only needed when switching to the new Synergy 3.0 layout.
@@ -48,3 +140,5 @@ These steps are only needed when switching to the new Synergy 3.0 layout.
 1. Always make sure to use the latest versions of the Synergy packages. You can check for updates using your package manager.
 2. Call `setSystemIconLibrary` with `sick2025` to enable the new system icons.
 3. Adjust your bundler to copy the new icons to your build output. This is necessary to ensure that the new icons are available in your application.
+4. **Update CSS theme imports** to use the new `sick2025_light.css` and `sick2025_dark.css` files instead of the legacy theme files.
+5. **Update theme class names** in your JavaScript theme switching logic to use `syn-sick2025-light` and `syn-sick2025-dark`.

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

@@ -1,3 +1,10 @@
+# [@synergy-design-system/components-v2.40.1](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.40.0...components/2.40.1) (2025-08-21)
+
+
+### Bug Fixes
+
+* 🐛  Placeholder is clipped for syn-select multiple ([#992](https://github.com/synergy-design-system/synergy-design-system/issues/992)) ([973933e](https://github.com/synergy-design-system/synergy-design-system/commit/973933e477a2cba1611c2f73f77e4e79d755c8a1))
+
 # [@synergy-design-system/components-v2.40.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.39.2...components/2.40.0) (2025-08-08)
 
 

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

@@ -246,3 +246,47 @@ All shoelace files are per default readonly and are disabled from being changed.
 ### Adding events to the output
 
 To add events to the component output, make sure to add them to `src/scripts/vendorism.js` into the `events` array that is defined there. After a new build run `via pnpm build`, you will see the new event files and the `events/events.ts` file will be regenerated.
+
+### Adding metadata to components
+
+Components can be enriched with metadata that automatically generates JSDoc annotations during the build process. The `add-metadata-to-components.js` script processes `*.component.ts` files and looks for corresponding `metadata.json` files to inject JSDoc tags.
+
+#### Supported metadata types
+
+- `@animation` - Component animations
+- `@event` - Custom events
+- `@slot` - Content slots
+- `@dependency` - Dependencies
+- `@csspart` - CSS parts for styling
+- `@cssproperty` - CSS custom properties
+
+#### Usage
+
+Create a `metadata.json` file in your component directory:
+
+```json
+{
+  "@event": [
+    { "name": "syn-change", "description": "Emitted when value changes" }
+  ],
+  "@slot": [{ "name": "default", "description": "Main content" }],
+  "@csspart": [{ "name": "base", "description": "Base wrapper" }]
+}
+```
+
+This will generate the following JSDoc annotations in your component:
+
+```typescript
+/**
+ * @summary Your component description
+ *
+ * @event syn-change - Emitted when value changes
+ * @slot default - Main content
+ * @csspart base - Base wrapper
+ */
+export default class YourComponent extends SynergyElement {
+  // Component implementation...
+}
+```
+
+Each metadata object requires a `name` property and optionally accepts a `description`. Run `pnpm vendor.set` to process the metadata and automatically add JSDoc annotations to your component's class comment.

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@synergy-design-system/tokens-v2.23.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.22.0...tokens/2.23.0) (2025-08-19)
+
+
+### Features
+
+* ✨ export new sick2025 themes ([#985](https://github.com/synergy-design-system/synergy-design-system/issues/985)) ([148730d](https://github.com/synergy-design-system/synergy-design-system/commit/148730d68037ea74dc241ca6627aa6a32af876ab))
+
 # [@synergy-design-system/tokens-v2.22.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.21.0...tokens/2.22.0) (2025-08-07)
 
 

package/metadata/packages/tokens/README.md

@@ -23,8 +23,8 @@ As projects may use various forms of applying styles, we provide different ways
 
 ### Using CSS themes
 
-Provides the css variables that are used in synergy components as css variables and is **required** if you are using `@synergy-design-system/components` or a derived package like `@synergy-design-system/react`.
-The tokens package ships with two themes: 🌞 light and 🌛 dark.
+Provides the css variables that are used in synergy components as css variables and is **required** if you are using `@synergy-design-system/components` or one of the framework packages like `@synergy-design-system/react`.
+The tokens package ships two **themes** (sick2018 and sick2025), with each providing two **modes**: 🌞 light and 🌛 dark.
 
 > The css styles are used as a single source of truth, also when working with the provided JavaScript or SASS exports!
 > Always make sure to load one of the css themes!
@@ -34,9 +34,11 @@ The tokens package ships with two themes: 🌞 light and 🌛 dark.
   <head>
     <!-- Example 1: Referencing directly in a HTML document -->
     <!-- Make sure to add the stylesheet before using any components -->
+    <!-- Note that "light.css" will point to the default theme of the tokens package. See table below for defaults -->
     <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/themes/light.css" />
 
     <!-- Alternative: Use the dark theme -->
+    <!-- Note that "dark.css" will point to the default theme of the tokens package. See table below for defaults -->
     <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/themes/dark.css" />
   </head>
   <body>
@@ -51,10 +53,12 @@ The tokens package ships with two themes: 🌞 light and 🌛 dark.
 
 You are also able to switch themes during the runtime. For the time being, we do not ship a utility function for this, as it is easy to implement. Each theme applies the variables via a `:root` selector, as well as a `className` that may be added to the `document.body`.
 
-| Theme | Stylesheet to use         | Body className    |
-| :---- | :------------------------ | :---------------- |
-| light | `tokens/themes/light.css` | `syn-theme-light` |
-| dark  | `tokens/themes/dark.css`  | `syn-theme-dark`  |
+| Theme    | Mode  | Stylesheet to use                  | Corresponding classNames                | Default for Version |
+| :------- | :---- | :--------------------------------- | :-------------------------------------- | :-----------------: |
+| sick2018 | light | `tokens/themes/sick2018_light.css` | `syn-theme-light`, `syn-sick2018-light` |       `2.0.0`       |
+| sick2018 | dark  | `tokens/themes/sick2018_dark.css`  | `syn-theme-dark`, `syn-sick2018-dark`   |                     |
+| sick2025 | light | `tokens/themes/sick2025_light.css` | `syn-sick2025-light`                    |       `3.0.0`       |
+| sick2025 | dark  | `tokens/themes/sick2025_dark.css`  | `syn-sick2025-dark`                     |                     |
 
 To switch the theme, proceed in the following way:
 
@@ -103,7 +107,12 @@ To switch the theme, proceed in the following way:
 // Use this way when you already use a build system like webpack or vite
 // to make it part of your bundle.
 // Note this import should happen BEFORE you render any components!
+
+// Light theme
 import "@synergy-design-system/tokens/themes/light.css";
+
+// Dark theme
+import "@synergy-design-system/tokens/themes/dark.css";
 ```
 
 ---
@@ -200,13 +209,13 @@ Figma
     ↓
 Figma REST API
     ↓
-Raw JSON Files (src/figma-variables/)
+Raw JSON Files (src/figma-variables/variableTokens.json + styleTokens.json)
     ↓
 Transform Scripts (scripts/figma/)
     ↓
-Style Dictionary compliant JSON Files (src/figma-variables/output)
+Style Dictionary compliant JSON Files (src/figma-variables/output/)
     ↓
-Style Dictionary Processing
+Style Dictionary Processing (scripts/build.js)
     ↓
 Build Output (dist/)
 ```
@@ -233,8 +242,17 @@ pnpm fetch:figma
 # Only fetch variables and transform into Style Dictionary format
 pnpm fetch:variables
 
-# Only fetch styles
+# Only fetch styles and transform into Style Dictionary format
 pnpm fetch:styles
+
+# Transform already fetched variables into Style Dictionary format
+pnpm build:variables
+
+# Transform already fetched styles into Style Dictionary format
+pnpm build:styles
+
+# Process transformed tokens with Style Dictionary (build final output)
+pnpm build
 ```
 
 #### Figma variables
@@ -244,6 +262,8 @@ Currently supported modes are:
 
 - **sick2018-light**
 - **sick2018-dark**
+- **sick2025-light**
+- **sick2025-dark**
 
 For each mode a json file is created, with the corresponding tokens and values.
 
@@ -254,7 +274,7 @@ For the styles a separate `styles.json` is created.
 #### Output
 
 Outputs of the tokens are created using [Style Dictionary](https://amzn.github.io/style-dictionary/).
-You can trigger a build using `pnpm build` in the `tokens` package root. This will create the css themes (located in `dist/themes/light.css` and `dist/themes/dark.css`), as well as the JavaScript exports (located at `dist/js/index.js`) and scss variables (`dist/scss/_tokens.scss`).
+You can trigger a build using `pnpm build` in the `tokens` package root. This will create the css themes (located in `dist/themes/` with files like `light.css`, `dark.css`, `sick2018_light.css`, `sick2018_dark.css`, `sick2025_light.css`, and `sick2025_dark.css`), as well as the JavaScript exports (located at `dist/js/index.js`) and scss variables (`dist/scss/_tokens.scss`).
 
 ---
 
@@ -262,17 +282,20 @@ You can trigger a build using `pnpm build` in the `tokens` package root. This wi
 
 #### `/src/figma-variables/`
 
-- **`tokens.json`**: Raw data of Figma Variables and Collections, directly fetched from the Figma API
+- **`variableTokens.json`**: Raw data of Figma Variables and Collections, directly fetched from the Figma API
+- **`styleTokens.json`**: Raw data of Figma Styles, directly fetched from the Figma API
 - **`output/`**: Transformed token files in Style Dictionary-compatible formats
-  - `sick2018-light.json`: Light Theme Tokens
-  - `sick2018-dark.json`: Dark Theme Tokens
-  - `styles.json`: Figma Styles (Typography, Shadows, etc.)
+  - `sick2018-light.json`: Light Theme Tokens for SICK 2018
+  - `sick2018-dark.json`: Dark Theme Tokens for SICK 2018
+  - `sick2025-light.json`: Light Theme Tokens for SICK 2025
+  - `sick2025-dark.json`: Dark Theme Tokens for SICK 2025
 
 #### `/scripts/figma/`
 
 - **`fetch-variables.js`**: Downloads Figma Variables via the REST API
-- **`transform-tokens.js`**: Transforms Figma Variables into Style Dictionary format
 - **`style-dict-outputter.js`**: Custom outputter for Figma Styles export
+- **`transform-tokens.js`**: Transforms Figma Variables into Style Dictionary format
+- **`transform-styles.js`**: Transforms Figma Styles into Style Dictionary format
 - **`helpers.js`**: Utility functions
 
 #### `/scripts/add-missing-tokens.js`
@@ -314,7 +337,7 @@ The workflow is manually triggered using `workflow_dispatch` with configurable i
 
 1. **Repository Setup**: Checks out the repository with full history
 2. **Environment Setup**: Installs pnpm, Node.js 22, and project dependencies
-3. **Token Synchronization**: Runs `pnpm -C ./packages/tokens fetch:figma` to fetch and transform Figma data
+3. **Token Synchronization**: Runs `pnpm -C ./packages/tokens fetch:figma && pnpm -C ./packages/tokens build:figma` to fetch and transform Figma data
 4. **Quality Assurance**: Builds and tests the updated tokens to ensure integrity
 5. **Pull Request Creation**: Creates a new branch and pull request with the changes
 

package/metadata/packages/tokens/dark.css

@@ -1,10 +1,10 @@
 /**
- * @synergy-design-system/tokens version 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
 
-:root, .syn-theme-dark {
+:root, .syn-sick2018-dark, .syn-theme-dark {
   color-scheme: dark;
 
   --syn-border-radius-circle: 9999px;
@@ -242,10 +242,10 @@
   --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); /** Overflow Down */
-  --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); /** Overflow Up */
-  --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); /** Overflow Left */
-  --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); /** Overflow Right */
+  --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';

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * SICK Global UX Foundation
  */
 

package/metadata/packages/tokens/light.css

@@ -1,10 +1,10 @@
 /**
- * @synergy-design-system/tokens version 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
 
-:root, .syn-theme-light {
+:root, .syn-sick2018-light, .syn-theme-light {
   color-scheme: light;
 
   --syn-border-radius-circle: 9999px;
@@ -242,10 +242,10 @@
   --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); /** Overflow Down */
-  --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); /** Overflow Up */
-  --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); /** Overflow Left */
-  --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); /** Overflow Right */
+  --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';