@solid-design-system/mcp 7.0.0-next.10 → 7.0.0-next.12

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 7.0.0-next.12
+
+## 7.0.0-next.11
+
 ## 7.0.0-next.10
 
 ## 7.0.0-next.9

package/metadata/packages/components/sd-icon/stories/libraries.md

@@ -19,8 +19,8 @@ Solid ships with three public icon libraries, `default`, `sd-status-assets`, and
     <h3 class="sd-headline sd-headline--size-base mb-4">Status Library</h3>
     <div class="flex gap-6">
       <sd-icon color="primary" library="sd-status-assets" name="status-check"></sd-icon>
-      <sd-icon color="primary" library="sd-status-assets" name="status-exclamation"></sd-icon>
       <sd-icon color="primary" library="sd-status-assets" name="status-close"></sd-icon>
+      <sd-icon color="primary" library="sd-status-assets" name="status-exclamation"></sd-icon>
     </div>
   </div>
 

package/metadata/packages/components/sd-menu/stories/grouping.md

@@ -4,7 +4,7 @@ Use dividers to group menu-items in a menu.
 <sd-dropdown distance="4" rounded>
   <sd-button variant="secondary" slot="trigger">
     Menu
-    <sd-icon library="_internal" name="chevron-down" slot="icon-right"></sd-icon>
+    <sd-icon library="_internal" name="chevron-bottom" slot="icon-right"></sd-icon>
   </sd-button>
   <sd-menu>
     <sd-menu-item>Menu item 1</sd-menu-item>

package/metadata/packages/components/sd-menu/stories/icon.md

@@ -44,7 +44,7 @@ return html` <div class="h-[350px]">
 <sd-dropdown distance="4" rounded open>
 <sd-button variant="secondary" slot="trigger">
 Menu
-<sd-icon library="_internal" name="chevron-down" slot="icon-right"></sd-icon>
+<sd-icon library="_internal" name="chevron-bottom" slot="icon-right"></sd-icon>
 </sd-button>
 ${generateTemplate({
 args

package/metadata/packages/templates/menu.md

@@ -64,7 +64,7 @@ version: 1.0.0
 <sd-dropdown distance="4" rounded stay-open-on-select>
   <sd-button variant="secondary" slot="trigger">
     Menu
-    <sd-icon library="_internal" name="chevron-down" slot="icon-right"></sd-icon>
+    <sd-icon library="_internal" name="chevron-bottom" slot="icon-right"></sd-icon>
   </sd-button>
   <sd-menu>
     <sd-menu-item type="checkbox">Account overview</sd-menu-item>

package/metadata/packages/tokens/docs/installation.md

@@ -287,9 +287,22 @@ That's it — your page is now themed. Head over to the <sd-link href="?path=/do
 
 </sd-accordion>
 
-  </sd-tab-panel>
+### CSS Variables deprecation
+
+CSS variables used for custom theming can become deprecated as token versions are updated.
+These changes will always be communicated properly before breaking changes are applied and are currently listed in the
+<sd-link href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/packages-tokens-installation--docs#css-variables-deprecation">Usage</sd-link> page under "Deprecated CSS variables (tokens)"
 
-  <sd-tab-panel name="consumer">
+However, if you manage an environment that still requires the use of these variables, you can import the `legacy-variables.css` stylesheet
+as fallback layer:
+
+```js
+
+```
+
+</sd-tab-panel>
+
+<sd-tab-panel name="consumer">
 
 <sd-notification variant="warning" open>
   **Do not import or bundle theme CSS.** The Theme Host already provides the theme for the entire page. Bundling it
@@ -379,46 +392,9 @@ That's it — you're ready to build. Head over to the <sd-link href="?path=/docs
   </sd-tab-panel>
 </sd-tab-group>
 
-## ⚠️ Upcoming breaking changes
-
-Breaking changes will be introduced in a future release (date to be announced).
-
-### CSS Variables
-
-Some CSS variables used for custom theming will be removed.
-
-- Deprecated variables are still functional for now
-- All deprecated variables are clearly marked in the documentation
-- Recommended replacements are already provided
-
-**Where to find deprecated variables**: You can find this information directly on each component’s documentation page.
-
-Deprecated variables:
-
-- `--sd-button--size-lg-border-radius` replace with `--sd-button-border-radius`
-- `--sd-button--size-md-border-radius` replace with `--sd-button-border-radius`
-- `--sd-button--size-sm-border-radius` replace with `--sd-button-border-radius`
-- `--sd-button--secondary--inverted--color-border` replace with `--sd-button-secondary-inverted-color-border`
-- `--sd-form-control-color-icon` replace with `--sd-form-control-color-icon-fill`
-- `--sd-menu-color-icon` replace with `--sd-menu-item-color-icon-fill`
-- `--sd-menu-color-text` replace with `--sd-menu-item-color-text`
-- `--sd-menu--disabled-color-icon` replace with `--sd-menu-item--disabled-color-icon-fill`
-- `--sd-menu--disabled-color-text` replace with `--sd-menu-item--disabled-color-text`
-- `--sd-tag-font-weight` replace with `--sd-choice-control-font-weight`
-- `--sd-tag--disabled-color-border` replace with `--sd-color-border-neutral-500`
-- `--sd-navigation-item--current-color-text` replace with `--sd-navigation-item-color-text`
-- `--sd-option--disabled-color-border` replace with `--sd-color-border-neutral-500`
-- `--sd-audio__timestamp-color-text` replace with `--sd-color-text-neutral-700`
-- `--sd-accordion__chevron-color-text` replace with `--sd-accordion-color-icon-fill`
-
----
-
-### Minimum dependency requirement
-
-Currently, any version of the **components** and **styles** packages is compatible with any version of the **tokens** package. In a future release:
+## Minimum dependency requirement
 
-- A **minimum dependency requirement** will be introduced
-- The **tokens package version must be equal to or higher than** the components and styles versions
+The installed `@solid-design-system/tokens` version must always be equal to or greater than the versions of the `@solid-design-system/components` and `@solid-design-system/styles` packages.
 
-We recommend reviewing your setup now to ensure that your tokens package is **aligned with (or ahead of)** your components and styles. This will help you avoid compatibility issues once the new requirement is enforced.
+For example, when using version `6.30.0` of components or styles, the minimum supported tokens version is `6.30.0`.
 ```

package/metadata/packages/tokens/docs/usage.md

@@ -105,9 +105,14 @@ This will only affect the primary background color inside `sd-button` components
 
 ### Deprecated CSS variables (tokens)
 
-The following CSS variables (tokens) are deprecated and will be removed in a future release. Update your custom styles to use the recommended replacements.
+The following CSS variables (tokens) are deprecated. Please update your custom styles to use the recommended replacements.
+If you manage an environment that still requires the use of these variables,
+please refer to the <sd-link href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/packages-tokens-installation--docs#css-variables-deprecation">Installation</sd-link>
+section on loading `legacy-variables.css`.
 
-<table>
+#### Deprecated variables:
+
+<table class="sd-table">
   <tr>
     <th>Deprecated variable</th>
     <th>Replacement</th>
@@ -172,13 +177,91 @@ The following CSS variables (tokens) are deprecated and will be removed in a fut
     <td>`--sd-accordion__chevron-color-text`</td>
     <td>`--sd-accordion-color-icon-fill`</td>
   </tr>
+  <tr>
+    <td>`--sd-chip--primary-200-color-background`</td>
+    <td>`--sd-chip--primary-low-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--primary-200-color-border`</td>
+    <td>`--sd-chip--primary-subtle-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--primary-300-color-background`</td>
+    <td>`--sd-chip--primary-medium-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--primary-300-color-border`</td>
+    <td>`--sd-chip--primary-medium-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--primary-500-color-background`</td>
+    <td>`--sd-chip--primary-high-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--primary-500-color-border`</td>
+    <td>`--sd-chip--primary-high-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--primary-500-color-text`</td>
+    <td>`text-black`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip--white-color-border`</td>
+    <td>`--sd-chip--white-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip-font-size`</td>
+    <td>`--sd-marker-font-size`</td>
+  </tr>
+  <tr>
+    <td>`--sd-chip-font-weight`</td>
+    <td>`--sd-marker-font-weight`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag-border-radius`</td>
+    <td>`--sd-chip-border-radius`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag-border-width`</td>
+    <td>`--sd-chip-border-width`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--neutral-200-color-background`</td>
+    <td>`--sd-chip--neutral-low-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--neutral-200-color-border`</td>
+    <td>`--sd-chip--neutral-low-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--neutral-300-color-background`</td>
+    <td>`--sd-chip--neutral-medium-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--neutral-300-color-border`</td>
+    <td>`--sd-chip--neutral-medium-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--neutral-500-color-background`</td>
+    <td>`--sd-chip--neutral-high-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--neutral-500-color-border`</td>
+    <td>`--sd-chip--neutral-high-color-filled-border`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--white-color-background`</td>
+    <td>`--sd-chip--white-color-background`</td>
+  </tr>
+  <tr>
+    <td>`--sd-flag--white-color-border`</td>
+    <td>`--sd-chip--white-color-filled-border`</td>
+  </tr>
 </table>
 
-You can also find deprecated variables directly on each component's documentation page.
-
-  </sd-tab-panel>
+</sd-tab-panel>
 
-  <sd-tab-panel name="consumer">
+<sd-tab-panel name="consumer">
 
 ## Using tokens
 

package/package.json

@@ -20,9 +20,9 @@
     "prettier": "^3.9.5",
     "tsx": "^4.23.1",
     "typescript": "^5.9.3",
-    "@solid-design-system/components": "7.0.0-next.10",
-    "@solid-design-system/styles": "7.0.0-next.10",
-    "@solid-design-system/tokens": "7.0.0-next.10"
+    "@solid-design-system/components": "7.0.0-next.12",
+    "@solid-design-system/styles": "7.0.0-next.12",
+    "@solid-design-system/tokens": "7.0.0-next.12"
   },
   "exports": {
     ".": {
@@ -59,7 +59,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "7.0.0-next.10",
+  "version": "7.0.0-next.12",
   "scripts": {
     "build": "pnpm run build:components && pnpm run build:tokens && pnpm run build:ts && pnpm run build:metadata && cd ../.. && pnpm exec prettier --write --log-level warn packages/mcp/metadata",
     "build:components": "cd ../components && pnpm exec node scripts/make-metadata.js --outdir dist",