@synergy-design-system/mcp 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -1 +1,22 @@
+# [@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))
+
 # Changelog
+
+# [@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)
+
+
+### Features
+
+* ✨ syn-icon: Provide a function to switch the icon set to brand2025 ([#974](https://github.com/synergy-design-system/synergy-design-system/issues/974)) ([1482e34](https://github.com/synergy-design-system/synergy-design-system/commit/1482e34f21ce80b9ad6f25e760f87de13d5f70db))
+
+# @synergy-design-system/mcp-v1.0.0 (2025-08-07)
+
+
+### Features
+
+* ✨ MCP: Initial release ([#931](https://github.com/synergy-design-system/synergy-design-system/pull/931)) ([5f511ca](https://github.com/synergy-design-system/synergy-design-system/commit/5f511ca4305981f90e589a5f634e58d0e4e834ee))

package/dist/build/static.js

@@ -22,6 +22,11 @@ const staticFilesToCopy = [
         getAbsolutePath('../../../../packages/components/BREAKING_CHANGES.md'),
         componentMigrationPath,
     ],
+    // Copy the v3 migration guide
+    [
+        getAbsolutePath('../../../../packages/docs/src/static/migration-synergy-v3.md'),
+        componentMigrationPath,
+    ],
 ];
 /**
  * Sets up all data from the components and framework packages and adds them to the static metadata.

package/dist/tools/asset-info.js

@@ -3,7 +3,7 @@ import { z } from 'zod';
 import * as availableIconsets from '@synergy-design-system/assets';
 import { getAssetsMetaData, getStructuredMetaData, } from '../utilities/index.js';
 const iconsetListAliases = {
-    brand2018Icons: [
+    sick2018Icons: [
         'current',
         'default',
         'legacy',
@@ -12,7 +12,7 @@ const iconsetListAliases = {
         'brand2018',
         'sick2018',
     ],
-    brand2025Icons: [
+    sick2025Icons: [
         'synergy2025',
         'new',
         'next',
@@ -21,6 +21,7 @@ const iconsetListAliases = {
         'v3',
     ],
 };
+const DEFAULT_LIMIT = 5;
 /**
  * Simple tool to list all available assets in the Synergy Design System.
  * This tool fetches the asset data from the Synergy package and formats it for display.
@@ -34,7 +35,7 @@ export const assetInfoTool = (server) => {
             filter: z
                 .string()
                 .optional()
-                .describe('A filter to apply to the icon names. If provided, only icons matching this filter will be returned.'),
+                .describe('A filter to apply to the icon names. If provided, only icons matching this filter will be returned. Supports multiple filters separated by "|" (e.g., "home|search|menu" to find icons containing any of these terms).'),
             iconset: z
                 .enum([
                 'current', // Special key, maps to 2018 currently, should map to 2025 in the next major version
@@ -56,9 +57,9 @@ export const assetInfoTool = (server) => {
                 .describe('The name of the icon set to retrieve icons from.'),
             limit: z
                 .number()
-                .default(5)
+                .default(DEFAULT_LIMIT)
                 .optional()
-                .describe('The maximum number of icons to return. Defaults to 5.'),
+                .describe(`The maximum number of icons to return. Defaults to ${DEFAULT_LIMIT}. When using multiple filters (pipe-separated), this limit applies per filter term.`),
         },
         title: 'Available Icons',
     }, async ({ filter, iconset, limit, }) => {
@@ -66,18 +67,44 @@ export const assetInfoTool = (server) => {
         const setToUse = iconset
             ? Object
                 .entries(iconsetListAliases)
-                .find(([, aliases]) => aliases.includes(iconset))?.[0] || 'brand2018Icons'
-            : 'brand2018Icons';
+                .find(([, aliases]) => aliases.includes(iconset))?.[0] || 'sick2018Icons'
+            : 'sick2018Icons';
         const foundIconSet = typeof availableIconsets[setToUse] !== undefined
             ? availableIconsets[setToUse]
-            : availableIconsets.brand2018Icons;
+            : availableIconsets.sick2018Icons;
         // Filter the icons if a filter is provided
-        const availableIcons = Object
-            .keys(foundIconSet)
-            .filter(iconName => iconName.toLowerCase().includes(filter?.toLowerCase() || ''));
-        // Limit the number of icons returned
-        const limitedIcons = (limit ?? 5) > 0
-            ? availableIcons.slice(0, limit ?? 5)
+        // Support pipe-separated filters (e.g., "icon1|icon2|icon3") for multiple icon matching
+        let availableIcons;
+        if (!filter) {
+            availableIcons = Object.keys(foundIconSet);
+        }
+        else {
+            const lowerFilter = filter.toLowerCase();
+            // Check if filter contains pipe separator for multiple filters
+            if (lowerFilter.includes('|')) {
+                const filterTerms = lowerFilter.split('|').map(term => term.trim());
+                const iconsPerTerm = [];
+                // For each filter term, find matching icons and apply limit per term
+                filterTerms.forEach(term => {
+                    const matchingIcons = Object
+                        .keys(foundIconSet)
+                        .filter(iconName => iconName.toLowerCase().includes(term))
+                        .slice(0, limit ?? DEFAULT_LIMIT); // Apply limit per filter term
+                    iconsPerTerm.push(...matchingIcons);
+                });
+                // Remove duplicates while preserving order
+                availableIcons = [...new Set(iconsPerTerm)];
+            }
+            else {
+                // Original single filter behavior
+                availableIcons = Object
+                    .keys(foundIconSet)
+                    .filter(iconName => iconName.toLowerCase().includes(lowerFilter));
+            }
+        }
+        // For single filters or no filter, apply the limit normally
+        const limitedIcons = (!filter || !filter.includes('|')) && (limit ?? DEFAULT_LIMIT) > 0
+            ? availableIcons.slice(0, limit ?? DEFAULT_LIMIT)
             : availableIcons;
         const icons = limitedIcons.map(icon => `- ${icon}`).join('\n');
         const content = [
@@ -85,12 +112,17 @@ export const assetInfoTool = (server) => {
                 text: `Available icons in iconset "${setToUse}":`,
                 type: 'text',
             },
+            {
+                text: `Showing ${limitedIcons.length} of ${availableIcons.length} icons`,
+                type: 'text',
+            },
             {
                 text: icons,
                 type: 'text',
             },
         ];
         const aiRules = await getStructuredMetaData('../../metadata/static/assets');
+        const assetData = await getAssetsMetaData((fileName) => !fileName.toLowerCase().startsWith('changelog'));
         return {
             content: [
                 {
@@ -98,7 +130,7 @@ export const assetInfoTool = (server) => {
                     type: 'text',
                 },
                 {
-                    text: JSON.stringify(await getAssetsMetaData(), null, 2),
+                    text: JSON.stringify(assetData, null, 2),
                     type: 'text',
                 },
                 ...content,

package/dist/tools/asset-list.js

@@ -23,12 +23,12 @@ export const assetListTool = (server) => {
                         },
                         {
                             description: 'The original set of icons from the Synergy Design System. Use this for projects using Synergy Major Version 2.0.',
-                            iconset: 'brand2018Icons',
+                            iconset: 'sick2018Icons',
                             title: 'Synergy 2018 Icons',
                         },
                         {
                             description: 'New icon set for the brand 2025 refresh. Use this for projects using Synergy Major Version 3.0.',
-                            iconset: 'brand2025Icons',
+                            iconset: 'sick2025Icons',
                             title: 'Synergy 2025 Icons',
                         },
                     ], null, 2),

package/dist/utilities/assets.d.ts

@@ -1 +1,2 @@
-export declare const getAssetsMetaData: () => Promise<(import("./metadata.js").MetadataFile | null)[]>;
+import { type Filter } from './metadata.js';
+export declare const getAssetsMetaData: (filter?: Filter) => Promise<(import("./metadata.js").MetadataFile | null)[]>;

package/dist/utilities/assets.js

@@ -1,3 +1,3 @@
 import { assetsPath, } from './config.js';
 import { getStructuredMetaData, } from './metadata.js';
-export const getAssetsMetaData = async () => getStructuredMetaData(assetsPath);
+export const getAssetsMetaData = async (filter) => getStructuredMetaData(assetsPath, filter);

package/metadata/checksum.txt

@@ -1 +1 @@
-48e9a3c531b7ab3b5986ea7e542258f4
+0eb8e8ab1e1e86521a59e32b35d7e39e

package/metadata/packages/assets/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@synergy-design-system/assets-v1.18.0](https://github.com/synergy-design-system/synergy-design-system/compare/assets/1.17.0...assets/1.18.0) (2025-08-08)
+
+
+### Features
+
+* ✨ syn-icon: Provide a function to switch the icon set to brand2025 ([#974](https://github.com/synergy-design-system/synergy-design-system/issues/974)) ([1482e34](https://github.com/synergy-design-system/synergy-design-system/commit/1482e34f21ce80b9ad6f25e760f87de13d5f70db))
+
 # [@synergy-design-system/assets-v1.17.0](https://github.com/synergy-design-system/synergy-design-system/compare/assets/1.16.1...assets/1.17.0) (2025-07-14)
 
 

package/metadata/packages/assets/README.md

@@ -40,9 +40,10 @@ This package is taking care about getting assets (like logos, system icons and d
 The folder structure of the assets corresponds to the structure of the Figma page.
 
 - **src/component-thumbnails** contains thumbnails from figma components used in Storybook
-- **src/icons:** contains the standard icons based on [Material Icons](https://fonts.google.com/icons)
+- **src/icons:** contains the standard icons based on [Material Icons](https://fonts.google.com/icons) for SICK 2018 brand revision. Use those icons when using Synergy V2
 - **src/logos:** contains the variants of the SICK brand logo
-- **src/system-icons:** contains a small subset of icons, that are internally used by the Synergy components
+- **src/system-icons:** contains a small subset of icons, that are internally used by the Synergy components. Default for Synergy V2.
+- **src/system-icons-sick2025:** contains a small subset of icons, that are internally used by the Synergy components. Used from Synergy V3 onward.
 
 > **Note:** All assets from figma, which should not appear in this package (e.g. documentation), will start with an underscore (e.g. \_my-doc-for-an-asset). This assets are getting filtered and ignored by this package.
 

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

@@ -43,6 +43,15 @@ export default css`
     top: -2px;
   }
 
+  /**
+   * #920: The new icons are instances in figma.
+   * The width of the system icon is 12px x 12px, so there is no inner padding.
+   * To accommodate for this, we need to set the width and height of the icon to 50% to get the same result as before.
+   */
+  .radio__checked-icon {
+    scale: 0.5;
+  }
+
   /* /Fix#456 */
 
   /* Size modifiers */

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

@@ -0,0 +1,144 @@
+# Migration to Synergy 3.0
+
+This document outlines the changes and migration steps required to upgrade from Synergy 2.x to the new Synergy 3.0.
+
+> Please note that this migration is still in progress, and some features may not be fully implemented yet. We recommend reviewing the [GitHub repository](https://github.com/orgs/synergy-design-system/projects/2/views/37) for the latest updates.
+
+## Roadmap
+
+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 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).
+
+## Breaking Changes
+
+### Icons
+
+#### System Icon Library
+
+Some Synergy components depend on a set of icons that must always be available. To make sure those components display correctly, even if the `@synergy-design-system/assets` package is not installed or configured properly, these icons are baked into Synergies core directly.
+
+Components that use those icons include:
+
+- `<syn-header>`: Uses the SICK logo if not told otherwise
+- `<syn-select>`: Shows a caret sign to indicate the possibility to open the select box.
+- `<syn-alert>`: Shows an "x" icon to be able to close the alert dialog.
+
+As Synergy transitions to the new SICK brand, the icon library has been updated to include a new iconset.
+For backwards compatibility, Synergy will ship two system icon libraries during the 2.0 support cycle.
+For applications that plan to continue using Synergy 2.0, there **are no changes needed** to the icon library.
+For applications that want to use the new icon library, we have added a new utility function `setSystemIconLibrary`.
+After calling this function, the system icon library will be set to the new iconset.
+
+> Make sure to call this function before rendering any components that use the system icon library!
+
+```javascript
+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.
+
+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.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.39.2...components/2.40.0) (2025-08-08)
+
+
+### Features
+
+* ✨ syn-icon: Provide a function to switch the icon set to brand2025 ([#974](https://github.com/synergy-design-system/synergy-design-system/issues/974)) ([1482e34](https://github.com/synergy-design-system/synergy-design-system/commit/1482e34f21ce80b9ad6f25e760f87de13d5f70db))
+
 # [@synergy-design-system/components-v2.39.2](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.39.1...components/2.39.2) (2025-08-05)
 
 

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

@@ -4,7 +4,7 @@
  * 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/light.css

@@ -4,7 +4,7 @@
  * 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';