@synergy-design-system/mcp 1.41.2 → 2.1.0

package/metadata/static/migration/v2-2018-to-v3-2018.md

@@ -0,0 +1,147 @@
+# Migrating from Synergy 2.x (SICK 2018) → Synergy 3.x (SICK 2018)
+
+This guide describes how to migrate an application from **Synergy 2.x with the SICK 2018 theme** to **Synergy 3.x while staying on the SICK 2018 theme**.
+
+Use this path if you want to benefit from Synergy 3 (APIs, fixes, and features) but **must keep the legacy SICK 2018 theme** for the time being.
+
+> The SICK 2018 theme is planned for future deprecation.
+> Use this path when you need more time before switching to SICK 2025.
+
+---
+
+## Migration Checklist: Quick Overview
+
+- [ ] Confirm that your application is using the SICK 2018 theme on Synergy 2.
+- [ ] Update all `@synergy-design-system/*` packages to their compatible Synergy 3 versions.
+- [ ] Keep using the SICK 2018 theme files and classes where necessary.
+- [ ] Apply all relevant breaking changes for:
+  - [ ] `@synergy-design-system/components` ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
+  - [ ] `@synergy-design-system/tokens` ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
+  - [ ] `@synergy-design-system/assets` ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs))
+  - [ ] `@synergy-design-system/styles` ([BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
+- [ ] Explicitly configure SICK 2018 theme imports to avoid accidentally switching to SICK 2025.
+- [ ] Document that you plan to migrate to SICK 2025 later (Path B or C).
+
+---
+
+## Important Notes About SICK 2018 in Synergy 3
+
+- The default theme behavior in Synergy 3 is oriented around SICK 2025.
+- SICK 2018 remains available but is considered **legacy** and may be removed in a future major release.
+- When using SICK 2018 on Synergy 3, you must:
+  - Import the explicit SICK 2018 theme files.
+  - Use the SICK 2018 theme classes in your theme switching logic.
+
+See the tokens breaking change guide for details:
+
+- Tokens: [BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
+
+---
+
+## Migration Steps: Detailed Guide
+
+### 1. Prepare and review current setup
+
+- Confirm your current Synergy 2 versions for all `@synergy-design-system/*` packages.
+- Confirm that your application uses SICK 2018:
+  - SICK 2018 theme files are imported.
+  - Theme switching uses `.syn-sick2018-light` and `.syn-sick2018-dark`.
+- Skim the package-level breaking changes for Synergy 3.
+
+---
+
+### 2. Update Synergy packages to version 3
+
+Update your dependencies to the compatible Synergy 3 versions:
+
+- `@synergy-design-system/components` → latest **3.x**
+- `@synergy-design-system/tokens` → latest **3.x**
+- `@synergy-design-system/assets` → latest **2.x** (or the version recommended in the release notes)
+- `@synergy-design-system/styles` → latest **2.x** (or the version recommended in the release notes)
+
+Update all packages together to avoid version mismatches.
+
+---
+
+### 3. Keep using SICK 2018 theme files
+
+On Synergy 3, some generic theme entry points may now point to SICK 2025.
+To **stay on SICK 2018**, make sure you:
+
+- Import the explicit SICK 2018 theme files instead of any generic or default theme files.
+- Continue to use the SICK 2018 theme classes for your theme switching logic.
+
+For example (conceptually):
+
+- Light theme: use a SICK 2018-specific light theme file and `.syn-sick2018-light`.
+- Dark theme: use a SICK 2018-specific dark theme file and `.syn-sick2018-dark`.
+
+See the tokens breaking change guide for the exact file names and recommendations:
+
+- Tokens: [BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
+
+---
+
+### 4. Apply package-level breaking changes
+
+Even though you keep SICK 2018, you still need to migrate to the Synergy 3 APIs and behaviors:
+
+-- **Components** ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
+
+- Remove attributes that have been removed in Synergy 3.
+- Adjust to changed defaults (e.g. numeric input strategies, popup behavior).
+- Review any changes to default settings or configuration utilities.
+
+-- **Tokens** ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
+
+- Confirm that your SICK 2018 theme imports are valid in Synergy 3.
+- Check for deprecated or renamed tokens that may still be used in your CSS.
+
+-- **Assets & Styles** ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs), [BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
+
+- Align asset paths and CSS utilities with Synergy 3.
+
+Apply these changes systematically, running tests as you go.
+
+---
+
+### 5. Test and verify SICK 2018 on Synergy 3
+
+- Test your application in both light and dark mode using SICK 2018.
+- Pay attention to:
+  - Any unintended switch to SICK 2025 assets or themes.
+  - Components whose behavior changed between Synergy 2 and 3.
+  - Layout changes that may result from new spacing or typography defaults.
+- Run your automated tests and, if available, visual regression tests.
+
+---
+
+## Planning the Future Migration to SICK 2025
+
+Staying on SICK 2018 on Synergy 3 is intended as a **temporary** solution.
+To complete the brand migration later:
+
+- Plan a follow-up migration from SICK 2018 to SICK 2025 on Synergy 3.
+- When you are ready, you can:
+  - Follow the same conceptual steps as in the SICK 2025 guide, but applied to your Synergy 3 setup.
+  - Or, if you skipped the SICK 2025 migration on Synergy 2, follow the recommended **Path B** directly in a Synergy 3-compatible way.
+
+---
+
+## Migration: Breaking Changes & Details
+
+This path focuses on **staying on the legacy SICK 2018 theme** while upgrading to Synergy 3.
+For full details, use the technical package guides:
+
+- Components: [@synergy-design-system/components BREAKING CHANGES](?path=/docs/packages-components-breaking-changes--docs)
+- Tokens: [@synergy-design-system/tokens BREAKING CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
+- Assets: [@synergy-design-system/assets BREAKING CHANGES](?path=/docs/packages-assets-breaking-changes--docs)
+- Styles: [@synergy-design-system/styles BREAKING CHANGES](?path=/docs/packages-styles-breaking-changes--docs)
+
+---
+
+## References & Further Reading
+
+- Overall migration paths overview: [Synergy Migration Overview](?path=/docs/migration--docs)
+- SICK 2025 theme migration for Synergy 2: [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs)
+- Additional Synergy documentation: [Synergy Docs](?path=/docs/welcome--docs)

package/metadata/static/migration/v2-2018-to-v3-2025.md

@@ -0,0 +1,150 @@
+# Migrating from Synergy 2.x (SICK 2018) → Synergy 3.x (SICK 2025)
+
+This guide describes how to migrate an application from **Synergy 2.x with the SICK 2018 theme** to **Synergy 3.x with the SICK 2025 theme**.
+
+This is the **recommended** end state for new and actively maintained applications.
+
+> This guide focuses on the _user perspective_ and high-level sequence.
+> For low-level, package-specific changes, always consult the respective `BREAKING_CHANGES.md` documents.
+
+---
+
+## Migration Checklist: Quick Overview
+
+- [ ] Review the [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs) to understand the theme and icon changes.
+- [ ] Decide whether you want to migrate the theme **before** or **together with** the Synergy 3 upgrade.
+- [ ] Update all `@synergy-design-system/*` packages to their compatible Synergy 3 versions.
+- [ ] Apply all relevant breaking changes for:
+  - [ ] `@synergy-design-system/components` ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
+  - [ ] `@synergy-design-system/tokens` ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
+  - [ ] `@synergy-design-system/assets` ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs))
+  - [ ] `@synergy-design-system/styles` ([BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
+- [ ] Enable the SICK 2025 theme (tokens, theme classes, icons, font).
+- [ ] Test your application visually and functionally in both light and dark mode.
+
+---
+
+## Recommended Strategy
+
+There are two practical ways to perform this migration:
+
+1. **Two-step migration** (less risk, more control)
+   - Step 1: Stay on Synergy 2 but migrate to SICK 2025 using the existing theme migration guide.
+   - Step 2: Upgrade from Synergy 2 to Synergy 3 while already using SICK 2025.
+
+2. **One-step migration** (fewer intermediate states, more changes at once)
+   - Update all packages directly to Synergy 3.
+   - Apply package breaking changes and enable SICK 2025 in one go.
+
+This guide is written so it works for both strategies. When in doubt, prefer the **two-step** approach.
+
+---
+
+## Migration Steps: Detailed Guide
+
+### 1. Prepare and review current setup
+
+- Confirm your current versions of all `@synergy-design-system/*` packages.
+- Confirm that your application is currently using the **SICK 2018** theme (legacy theme files and theme classes).
+- Skim through the package-specific breaking change guides to understand the scope of changes:
+  - Components: [BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs)
+  - Tokens: [BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
+
+---
+
+### 2. (Optional but recommended) First migrate SICK 2018 → SICK 2025 on Synergy 2
+
+If you prefer a **safer**, staged migration, first migrate your theme while staying on Synergy 2:
+
+- Follow the guide [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs).
+- Verify:
+  - New SICK 2025 icon assets are available and copied by your build.
+  - `setSystemIconLibrary('sick2025')` (or `setupIcons('sick2025')`) is called as appropriate.
+  - `sick2025_light.css` and `sick2025_dark.css` are imported.
+  - Theme switching uses `.syn-sick2025-light` and `.syn-sick2025-dark`.
+  - The **SICK Intl** font is loaded.
+
+Once this is working, you are effectively in the same state as **Path C** and can continue as in that path when upgrading to Synergy 3.
+
+---
+
+### 3. Update Synergy packages to version 3
+
+Update your dependencies to the compatible Synergy 3 versions:
+
+- `@synergy-design-system/components` → latest **3.x**
+- `@synergy-design-system/tokens` → latest **3.x**
+- `@synergy-design-system/assets` → latest **2.x** (or the version recommended in the release notes)
+- `@synergy-design-system/styles` → latest **2.x** (or the version recommended in the release notes)
+
+Make sure all `@synergy-design-system/*` packages are updated together to avoid version mismatches.
+
+---
+
+### 4. Apply package-level breaking changes
+
+Go through the breaking change guides and adjust your code accordingly.
+Focus especially on:
+
+-- **Components** ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
+
+- Removed or renamed attributes (e.g. deprecated attributes on dropdowns, tooltips, popups, etc.).
+- Changes in defaults (e.g. numeric input behavior).
+- Updated settings utilities.
+
+-- **Tokens** ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
+
+- New default theme behavior (SICK 2025 becoming the default for certain theme imports).
+- The planned deprecation of legacy tokens (e.g. page background tokens).
+
+-- **Assets & Styles** ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs), [BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
+
+- Any changes in asset paths, build configuration, or CSS utility classes.
+
+Handle these changes package by package so that your code compiles and your tests pass.
+
+---
+
+### 5. Ensure SICK 2025 is active on Synergy 3
+
+On Synergy 3, SICK 2025 becomes the **primary** theme. To ensure your application is correctly configured:
+
+- Confirm that your theme imports reference the SICK 2025 theme files.
+- Confirm that your runtime theme switching uses `.syn-sick2025-light` and `.syn-sick2025-dark`.
+- Confirm that your icon setup uses the SICK 2025 icon library.
+- Confirm that the SICK Intl font is loaded (via fonts package, CDN, or local hosting).
+
+If you used the two-step strategy and already migrated the theme on Synergy 2, this step should mostly be a verification.
+
+---
+
+### 6. Test and verify
+
+- Manually test key user flows in your application in both light and dark mode.
+- Pay special attention to:
+  - Layout changes due to new spacing, radii, and typography.
+  - Numeric inputs and other controls with changed defaults.
+  - Popovers, tooltips, dropdowns, and navigation components after API cleanups.
+- Run your automated tests and visual regression tests (if available).
+
+---
+
+## Migration: Breaking Changes & Details
+
+This path-level guide is intentionally high level.
+For exact API changes, always work with the package-specific documents:
+
+- Components: [@synergy-design-system/components BREAKING CHANGES](?path=/docs/packages-components-breaking-changes--docs)
+- Tokens: [@synergy-design-system/tokens BREAKING CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
+- Assets: [@synergy-design-system/assets BREAKING CHANGES](?path=/docs/packages-assets-breaking-changes--docs)
+- Styles: [@synergy-design-system/styles BREAKING CHANGES](?path=/docs/packages-styles-breaking-changes--docs)
+
+You can combine this path guide with those documents to form a project-specific migration plan.
+
+---
+
+## References & Further Reading
+
+- Overall migration paths overview: [Synergy Migration Overview](?path=/docs/migration--docs)
+- SICK 2025 theme migration for Synergy 2: [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs)
+- Additional Synergy documentation: [Synergy Docs](?path=/docs/welcome--docs)

package/metadata/static/migration/v2-2025-to-v3-2025.md

@@ -0,0 +1,133 @@
+# Migrating from Synergy 2.x (SICK 2025) → Synergy 3.x (SICK 2025)
+
+This guide describes how to migrate an application from **Synergy 2.x with the SICK 2025 theme** to **Synergy 3.x with the SICK 2025 theme**.
+
+Use this path if you already migrated your application to the SICK 2025 theme while staying on Synergy 2 (using the dedicated SICK 2025 migration guide) and now want to upgrade to Synergy 3.
+
+> This guide assumes that SICK 2025 is already correctly configured in your Synergy 2 setup.
+> If you are still on SICK 2018, use **Path B** instead.
+
+---
+
+## Migration Checklist: Quick Overview
+
+- [ ] Confirm that your Synergy 2 application already follows the SICK 2025 migration guide.
+- [ ] Update all `@synergy-design-system/*` packages to their compatible Synergy 3 versions.
+- [ ] Apply all relevant breaking changes for:
+  - [ ] `@synergy-design-system/components` ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
+  - [ ] `@synergy-design-system/tokens` ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
+  - [ ] `@synergy-design-system/assets` ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs))
+  - [ ] `@synergy-design-system/styles` ([BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
+- [ ] Verify that SICK 2025 remains active after the upgrade (themes, icons, font).
+- [ ] Test your application visually and functionally in both light and dark mode.
+
+---
+
+## Starting Point: Already on SICK 2025
+
+Before you start, you should already have completed:
+
+- The theme migration from SICK 2018 to SICK 2025 on Synergy 2, following
+  [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs).
+- Your application:
+  - Uses the `sick2025_light.css` and `sick2025_dark.css` theme files.
+  - Uses the `.syn-sick2025-light` and `.syn-sick2025-dark` classes for theme switching.
+  - Loads the SICK Intl font.
+  - Has SICK 2025 icons configured (via direct setup or `setupIcons('sick2025')`).
+
+If any of these are not yet true, complete the SICK 2025 migration first.
+
+---
+
+## Migration Steps: Detailed Guide
+
+### 1. Prepare and review current setup
+
+- Confirm your current Synergy versions (2.x) for all `@synergy-design-system/*` packages.
+- Confirm that SICK 2025 is visually working as expected.
+- Skim the package-level breaking change guides to understand the scope of the Synergy 3 upgrade:
+  - Components: [BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs)
+  - Tokens: [BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
+
+---
+
+### 2. Update Synergy packages to version 3
+
+Update your dependencies to the compatible Synergy 3 versions:
+
+- `@synergy-design-system/components` → latest **3.x**
+- `@synergy-design-system/tokens` → latest **3.x**
+- `@synergy-design-system/assets` → latest **2.x** (or the version recommended in the release notes)
+- `@synergy-design-system/styles` → latest **2.x** (or the version recommended in the release notes)
+
+Make sure you update all packages together to avoid version drift.
+
+---
+
+### 3. Apply package-level breaking changes
+
+With SICK 2025 already in place, your main work for this path is to align with the Synergy 3 API and behavioral changes.
+
+-- **Components** ([BREAKING_CHANGES](?path=/docs/packages-components-breaking-changes--docs))
+
+- Remove deprecated attributes and properties that were dropped in Synergy 3.
+- Adjust to new defaults (e.g., numeric input strategies, popup behavior, navigation variants).
+- Review any changes in configuration utilities or default settings.
+
+-- **Tokens** ([BREAKING_CHANGES](?path=/docs/packages-tokens-breaking-changes--docs))
+
+- Verify that your theme imports still point to the correct SICK 2025 theme files.
+- Check for deprecated or renamed tokens and adjust usages accordingly.
+
+-- **Assets & Styles** ([BREAKING_CHANGES](?path=/docs/packages-assets-breaking-changes--docs), [BREAKING_CHANGES](?path=/docs/packages-styles-breaking-changes--docs))
+
+- Confirm that asset paths and CSS utilities still match your build setup.
+- Apply any required changes to your bundler configuration.
+
+Work through these changes systematically to keep the codebase compiling and tests passing.
+
+---
+
+### 4. Verify SICK 2025 configuration on Synergy 3
+
+Because SICK 2025 is the primary theme in Synergy 3, your existing SICK 2025 setup should mostly carry over, but verify the following:
+
+- **Theme files**: Your imports reference SICK 2025 theme files compatible with Synergy 3.
+- **Theme classes**: You still use `.syn-sick2025-light` and `.syn-sick2025-dark` consistently.
+- **Icons**: Any utilities you used on Synergy 2 (such as `setupIcons('sick2025')` or `setSystemIconLibrary`) are still called at the right time.
+- **Fonts**: The SICK Intl font is loaded through your preferred method.
+
+Adjust only if the breaking change documentation suggests changes.
+
+---
+
+### 5. Test and verify
+
+- Test the application in all key scenarios and supported browsers.
+- Pay attention to:
+  - Controls with changed defaults or removed attributes.
+  - Components that rely on the Popover API or similar platform features.
+  - Visual differences due to adjustments in spacing, radii, and typography.
+- Run your automated test suite and any visual regression checks.
+
+---
+
+## Migration: Breaking Changes & Details
+
+This path is intentionally focused on the **upgrade from Synergy 2 to Synergy 3** with SICK 2025 already in place.
+For detailed, package-specific changes, consult:
+
+- Components: [@synergy-design-system/components BREAKING CHANGES](?path=/docs/packages-components-breaking-changes--docs)
+- Tokens: [@synergy-design-system/tokens BREAKING CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
+- Assets: [@synergy-design-system/assets BREAKING CHANGES](?path=/docs/packages-assets-breaking-changes--docs)
+- Styles: [@synergy-design-system/styles BREAKING CHANGES](?path=/docs/packages-styles-breaking-changes--docs)
+
+Combine this path guide with those references to implement and review changes in your codebase.
+
+---
+
+## References & Further Reading
+
+- Overall migration paths overview: [Synergy Migration Overview](?path=/docs/migration--docs)
+- SICK 2025 theme migration for Synergy 2: [Migration to SICK 2025 on Synergy 2](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs)
+- Additional Synergy documentation: [Synergy Docs](?path=/docs/welcome--docs)

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);
+    background: var(--syn-page-background-color);
     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);
+    background: var(--syn-page-background-color);
     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);
+    background: var(--syn-page-background-color);
     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);
+    background: var(--syn-page-background-color);
     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);
+    background: var(--syn-page-background-color);
     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);
+    background: var(--syn-page-background-color);
     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);
+    background: var(--syn-page-background-color);
     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);
+    background: var(--syn-page-background-color);
     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);
+    background: var(--syn-page-background-color);
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;

package/package.json

@@ -10,7 +10,7 @@
     "@modelcontextprotocol/sdk": "^1.25.2",
     "globby": "^16.1.0",
     "zod": "^3.25.76",
-    "@synergy-design-system/assets": "1.25.1"
+    "@synergy-design-system/assets": "2.0.0"
   },
   "description": "MCP Server for the Synergy Design System",
   "devDependencies": {
@@ -28,12 +28,12 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "2.77.1",
     "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/components": "3.1.0",
     "@synergy-design-system/fonts": "1.0.2",
-    "@synergy-design-system/styles": "1.9.1",
-    "@synergy-design-system/tokens": "^2.48.2"
+    "@synergy-design-system/styles": "2.0.0",
+    "@synergy-design-system/tokens": "^3.1.0"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.41.2",
+  "version": "2.1.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",