@maggioli-design-system/styles 17.0.1 → 17.2.0

package/CHANGELOG.md

@@ -0,0 +1,121 @@
+# Changelog
+
+Every release of `@maggioli-design-system/styles`, newest first. Each section is the body of the GitHub
+release with the same tag, written by git-cliff from the conventional commits of the
+package.
+
+## [styles@17.2.0] - 2026-10-15
+
+### Bug Fixes
+
+- *(styles)* Keep the box of the hydrated components against tailwind's preflight
+- *(styles)* Give every role of the semantic tailwind bridge its light default as fallback
+
+### Build
+
+- *(design-tokens,identity,styles,svg-icons,icons,magma)* Ship CHANGELOG.md in every package
+
+### Documentation
+
+- *(styles)* Add the tailwind half of editor autocomplete to the readme
+
+### Features
+
+- *(styles)* Carry the role descriptions into consumption.json and the editor sheet
+- *(styles)* Fall back to the round scale where corner-shape cannot be drawn
+
+### Refactor
+
+- *(styles)* Move the token resolver of properties.ts into css-resolve.ts
+
+## [styles@17.1.0] - 2026-10-14
+
+### Bug Fixes
+
+- *(styles)* List the corner radius steps in tokens.editor.css
+
+### Documentation
+
+- *(styles)* Say that the semantic layer is expanded by semantic.model.ts
+- *(styles)* Document the globals DTCG and the consumption map
+
+### Features
+
+- *(styles)* Publish the globals as DTCG 2025.10 JSON
+- *(styles)* Export the Tailwind consumption map as JSON
+
+### Refactor
+
+- *(design-tokens,styles)* Build the semantic layer as data in design-tokens
+
+## [styles@17.0.1] - 2026-10-10
+
+### Bug Fixes
+
+- *(styles,magma)* Require internal dependencies as caret ranges
+
+### Documentation
+
+- *(styles)* Point the semantic migration at codemod category L
+- *(magma,styles,design-tokens)* Rewrite the color docs on the semantic layer
+- *(magma,styles,design-tokens)* Align the styles and design-tokens docs with the build
+
+## [styles@17.0.0] - 2026-09-30
+
+### Bug Fixes
+
+- *(stencil,styles)* Close the escape hatch of #624, and repair the registration snapshots
+- *(styles)* Let the corner shape token inherit, and admit functional shapes
+- *(styles)* Put the page on the semantic surface, and give a link a colour that exists
+- *(styles)* Let the global tokens inherit
+- *(styles)* Let color-scheme follow the palette in every mode
+- *(styles)* Retint the inverse surface with the named theme
+
+### Build
+
+- *(styles)* Fix dead Nx targetDefaults block
+
+### Changes
+
+- *(styles)* Space the comments the way stylelint wants them
+
+### Documentation
+
+- *(styles)* Add semantic color system SPEC (S0)
+- *(styles)* Themes derive from any surface-opted family (spec 8)
+- *(styles,magma)* Document the corner axis, and stop recommending the hatch
+- *(styles)* The contrast layer promotes the page surface (spec 9.3)
+- *(styles,magma)* Update the compatibility table for magma 2 stable
+
+### Features
+
+- *(styles)* Semantic color layer (--mds-*) + Tailwind 4 bridge (#573)
+- *(styles)* Theming axes - data-theme-name, tint indirection, --depth (#574)
+- *(styles)* Generate the --magma-* semantic layer from a config (#328)
+- *(styles)* Retint the foreground with the theme via --magma-tint-text-*
+- *(styles)* Ruolo inverse-surface (rename da neutral-emphasis)
+- *(styles)* Generate named-theme overrides, retire the stale tint rules
+- *(styles)* Emit theme-aware accent roles from the accents map
+- *(styles)* Emit accent interaction-state roles from the state-step map
+- *(design-tokens,stencil,styles)* Collapse accent roles to {accent, ai}
+- *(design-tokens,styles,stencil)* Publish the hue role scales and promote them under pref-contrast-more
+- *(styles,stencil)* Register the component custom properties from globals.css
+- *(design-tokens,styles,stencil)* Retint the raw ramp with the theme via --magma-scale-*
+- *(design-tokens,styles,stencil)* Give the colored hues the emphasis band states
+- *(design-tokens,styles)* Give the neutral pills a wash band
+- *(design-tokens,styles,stencil)* A shadow ink role, the ring family back, and a guard
+- *(styles)* Generate a token sheet editors can autocomplete from
+- *(styles,stencil)* Emit the corner axis, shape and scale in one block
+- *(styles)* Publish --magma-surface-inverse-muted
+- *(styles)* Add --magma-on-backdrop, the ink on the modal scrim
+- *(styles)* Dark on-emphasis ink follows the canvas instead of pure black
+
+### Refactor
+
+- *(stencil,styles)* [**breaking**] Migrate --tone-*(bare) usages to --tone-*-seed (#572)
+- *(styles)* Rename semantic layer prefix to --magma-* (#573)
+- *(styles)* Stage generated CSS in a dedicated build dir
+- *(styles)* Emit accent tint overrides via the shared helper
+- *(design-tokens,styles,stencil)* Name the hue background levels wash-*, not surface-*
+- *(styles)* Paint the light focus-zoom outline with text-on-emphasis
+- *(styles)* Retire the --magma-scale-NN bridge from the semantic layer

package/README.md

@@ -85,7 +85,11 @@ step only follows the mode.
 ```
 
 The values come from `dist/css/semantic.css`, the Tailwind utilities from
-`dist/tailwind/theme.css`. The roles, their pairing rules and the Magma 1 -> 2 map are
+`dist/tailwind/theme.css`. Every role of the Tailwind bridge carries its light default as
+the fallback of its `var()` (`rgb(var(--magma-surface-default, 242 242 242))`): Tailwind
+IntelliSense reads a utility's colour only from that literal, so the semantic utilities get
+a swatch in the editor. Without `semantic.css` they paint that light default, in every mode:
+the file is still required. The roles, their pairing rules and the Magma 1 -> 2 map are
 in the color guide shipped with the components package
 (`@maggioli-design-system/magma/agents/color.md`).
 
@@ -262,6 +266,94 @@ Never import this file. It only holds light-theme defaults, so loading it would
 token at the highest-priority origin and freeze theming; it is wrapped in a query that can
 never match, which makes an accidental import a no-op.
 
+Do not install `vunguyentuan.vscode-css-variables` next to it: it sorts alphabetically,
+never opens the list by itself and duplicates every entry. To share the setup with the
+team, recommend the extensions in `.vscode/extensions.json`:
+
+```json
+{
+  "recommendations": ["phoenisx.cssvar", "bradlc.vscode-tailwindcss"],
+  "unwantedRecommendations": ["vunguyentuan.vscode-css-variables"]
+}
+```
+
+#### Tailwind classes
+
+The classes complete through [Tailwind CSS IntelliSense][tailwind-intellisense], which
+reads the CSS entry importing Tailwind and Magma's theme (see Tailwind above). It finds
+that file on its own, split imports included; only if hovering a class shows nothing, add
+`"tailwindCSS.experimental.configFile": "<path of that CSS file>"` to the settings. Classes
+built through functions (`clsx`, `cva`, `cn`) complete once those functions are listed in
+`"tailwindCSS.classFunctions"`.
+
+To check it works: hovering `p-600` shows `1.5rem = 24px`, and `bg-surface-default` gets a
+swatch in the completion list (the semantic utilities carry their light default as a
+fallback for that; see Semantic colors).
+
+Two limits, with nothing to configure:
+
+- the utilities are listed alphabetically, whatever the order of the theme:
+  `bg-surface-bisque-*` comes before `bg-surface-default`;
+- the class list offers Tailwind's stock spacing steps (`p-1` ... `p-96`), not Magma's,
+  and with Magma's theme `p-1` is 0.04px. Write the Magma steps in full (`p-600`,
+  `gap-400`): they work and hover with their value, they are just not suggested.
+
+---
+
+### Token data
+
+Two kinds of generated JSON describe this package for tools that read tokens rather than
+paint with them (a documentation site, a design tool). They complete the DTCG export of
+`@maggioli-design-system/design-tokens` (its README, "Token data (DTCG)"), and use the
+same names: a token is keyed by the custom property it is published as, the
+`$extensions["it.maggioli.magma"].css` of its DTCG entry. To style a page, use the
+stylesheets.
+
+| File | Content |
+| :--- | :--- |
+| `dist/dtcg/globals.tokens.json` | The globals this package declares: the `--magma-*` of `globals.css`, the corner axis, the depth axis of `theme.css`. Same DTCG 2025.10 shape as design-tokens, aliasing its tokens where the CSS names one (`--magma-radius-md` is `{radius.squircle-md}`) |
+| `dist/dtcg/corner-shape-round.tokens.json`, `theme-depth-flat.tokens.json` | What `[data-corner-shape='round']` and `:root[data-theme-depth='flat']` change |
+| `dist/dtcg/magma.resolver.json` | The resolver of design-tokens plus these sets: `base`, `globals`, then the `mode`, `theme`, `corner-shape` and `theme-depth` modifiers |
+| `dist/tailwind/consumption.json` | How each token is consumed through Tailwind 4 |
+
+design-tokens' `base.tokens.json` and `globals.tokens.json` together hold every global
+token of `tokens.editor.css`. The resolver points at the files of design-tokens as
+`../../../design-tokens/dist/dtcg/`: the two packages sit side by side in
+`node_modules/@maggioli-design-system/`, as they do in this repository.
+
+#### consumption.json
+
+```json
+"--magma-text-muted": { "theme": "--color-fg-muted", "namespace": "--color", "key": "fg-muted" }
+```
+
+- **`tokens`**: `theme` is the `@theme` variable that publishes the token; `namespace` and
+  `key` split it the way Tailwind reads it. Its utilities are `<root>-<key>` for every
+  root of `namespaces[namespace].utilities` (`text-fg-muted`, `bg-fg-muted`,
+  `border-fg-muted`, ...), its variants the patterns of `namespaces[namespace].variants`
+  with the key for `*` (`max-tablet:`, `@md:`).
+- **`shadowed`**: the roots (or variant patterns) where that class reads another
+  variable, and which one (`null`: none of the theme). `--container-xs` has
+  `"max-w": "--spacing-xs"`: `max-w-xs` is 4px, the container is `max-w-(--container-xs)`.
+- **`namespace: null`**: no utility reads the variable. Tailwind 4 has no `--border-*`
+  or `--duration-*` namespace, so `border-xs` does not exist and `duration-200` is
+  Tailwind's own 200ms, not the token: write `border-(length:--border-xs)`.
+- **`property`**: a value that comes with another token, Tailwind's
+  `--<variable>--<property>` (`--text-size-title-h1--line-height`).
+- **`spacing`**: `--spacing: 0.0025rem` multiplies every numeric step, so `gap-400` is
+  `400 x 0.0025rem = 1rem`. `utilities` lists the roots that take a step, `keys` the named
+  ones (`xs` ... `4xl`, `phrase`, `prose`, ...), `steps` the numeric keys the theme
+  publishes explicitly.
+- **`utilities`**: every `@utility` of `dist/tailwind/*.css` and of the design-tokens
+  sheets they import, with where it is defined, what it `@apply`s, the tokens and the
+  Tailwind theme variables it reads (`text-title-h1` reads Tailwind's `--font-weight-black`)
+  and its compiled CSS.
+
+The map is generated from Tailwind's own design system (the version is in `tailwind`),
+loaded on the entry point of the [Tailwind](#tailwind) section (`entry`): every class and
+variant Tailwind can generate is compiled, and nothing is listed by hand. It covers
+Tailwind 4 only; the Tailwind 3 preset is legacy.
+
 ---
 
 ### Dist folder
@@ -273,9 +365,12 @@ never match, which makes an accidental import a no-op.
 | `css` | editors only, never import | `tokens.editor.css` |
 | `css` | tailwind (copied from design-tokens) | `tailwind-theme-color.css`, `tailwind-theme-typography.css` |
 | `tailwind` | Tailwind 4 | `theme.css` (palette, typography tokens, semantic colors; imports `semantic.css`), `typography.css` (the `text-title-*`, `text-info-*`, ... utilities), `utilities.css` (`focus-bounce`, `focus-zoom`, ...), `base.css`, `reset.css`, `semantic.css` |
+| `tailwind` | tools that read tokens | `consumption.json` (the Tailwind map, see [Token data](#token-data)) |
+| `dtcg` | tools that read tokens | `globals.tokens.json`, `corner-shape-round.tokens.json`, `theme-depth-flat.tokens.json`, `magma.resolver.json` |
 | `tailwind3` | Tailwind 3 | `base.css`, `components.css`, `reset.css`, `typography.css` |
 
 [mds]: https://magma.maggiolicloud.it/
-[css-variable-autocomplete]: https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables
+[css-variable-autocomplete]: https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar
+[tailwind-intellisense]: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
 [fontsource-var-fonts]: https://fontsource.org/docs/variable-fonts
 [tailwindcss-config]: https://github.com/magma-design-system/magma/blob/main/projects/styles/tailwind.config.js

package/dist/css/base.css

@@ -75,12 +75,6 @@
   p {
     max-width: var(--spacing-title, 30ch);
   }
-  .hydrated {
-    border: revert-layer;
-    display: revert-layer;
-    margin: revert-layer;
-    padding: revert-layer;
-  }
 }
 @property --tw-font-weight {
   syntax: "*";

package/dist/css/colors-hex-brand-rnd.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-hex-brand.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-hex-default.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-hex-label.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-hex-status.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-hex-theme.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-hex-tones.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-hex.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-rgb-brand-rnd.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-rgb-brand.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-rgb-default.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-rgb-label.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-rgb-status.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-rgb-theme.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-rgb-tones.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/colors-rgb.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/globals.css

@@ -180,6 +180,17 @@
   syntax: '*';
 }
 
+/* The part of its height a corner may take, for the components whose radius is
+ * always past half their height: 0.5 where the browser clamps, less where
+ * corner-shape cannot be drawn (corner.ts). `inherits: true` for the same reason
+ * as the shape: the fallback block declares it on :root. */
+
+@property --magma-corner-cap {
+  inherits: true;
+  initial-value: 0.5;
+  syntax: '<number>';
+}
+
 /* z-index */
 
 @property --magma-header-z-index {
@@ -3316,9 +3327,14 @@
 
   --magma-radius-full is the same under every shape on purpose: the pill is out
   of the axis (see corner.ts).
+
+  A browser without corner-shape gets the round scale back from the last block,
+  and --magma-corner-cap, the part of its height a corner may take, drops from
+  0.5 to the round look-alike of a squircle cut to half the height.
 */
 :root {
   --magma-corner-shape: squircle;
+  --magma-corner-cap: 0.5;
 
   --magma-radius-none: var(--radius-none);
   --magma-radius-3xs: var(--radius-squircle-3xs);
@@ -3337,6 +3353,7 @@
 
 [data-corner-shape='round'] {
   --magma-corner-shape: round;
+  --magma-corner-cap: 0.5;
 
   --magma-radius-none: var(--radius-none);
   --magma-radius-3xs: var(--radius-3xs);
@@ -3355,6 +3372,7 @@
 
 [data-corner-shape='squircle'] {
   --magma-corner-shape: squircle;
+  --magma-corner-cap: 0.5;
 
   --magma-radius-none: var(--radius-none);
   --magma-radius-3xs: var(--radius-squircle-3xs);
@@ -3370,3 +3388,25 @@
   --magma-radius-5xl: var(--radius-squircle-5xl);
   --magma-radius-full: var(--radius-full);
 }
+
+@supports not (corner-shape: squircle) {
+  :root:not([data-corner-shape='round']),
+  [data-corner-shape='squircle'] {
+    --magma-corner-shape: round;
+    --magma-corner-cap: 0.2915;
+
+    --magma-radius-none: var(--radius-none);
+    --magma-radius-3xs: var(--radius-3xs);
+    --magma-radius-2xs: var(--radius-2xs);
+    --magma-radius-xs: var(--radius-xs);
+    --magma-radius-sm: var(--radius-sm);
+    --magma-radius-md: var(--radius-md);
+    --magma-radius-lg: var(--radius-lg);
+    --magma-radius-xl: var(--radius-xl);
+    --magma-radius-2xl: var(--radius-2xl);
+    --magma-radius-3xl: var(--radius-3xl);
+    --magma-radius-4xl: var(--radius-4xl);
+    --magma-radius-5xl: var(--radius-5xl);
+    --magma-radius-full: var(--radius-full);
+  }
+}

package/dist/css/hydrated.css

@@ -122,3 +122,133 @@ mds-zero:not(:is([hydrated], .hydrated))
   transition-duration: 0s;
   visibility: hidden;
 }
+
+/*
+  Once hydrated, a component keeps the box it gives itself on :host. A page reset such as
+  Tailwind's preflight (margin, padding and border of every element) is page CSS, and page CSS
+  beats :host whatever its layer: revert-layer hands each property back to the layers before
+  this one, down to the component's own :host rules. This file is imported into `base`, the
+  layer the preflight sits in, so the tag beats its `*`. Both forms of the flag: the browser
+  builds set the attribute, the server-rendered markup the class.
+*/
+
+mds-accordion:is([hydrated], .hydrated),
+mds-accordion-item:is([hydrated], .hydrated),
+mds-accordion-timer:is([hydrated], .hydrated),
+mds-accordion-timer-item:is([hydrated], .hydrated),
+mds-author:is([hydrated], .hydrated),
+mds-avatar:is([hydrated], .hydrated),
+mds-avatar-stack:is([hydrated], .hydrated),
+mds-avatar-stack-item:is([hydrated], .hydrated),
+mds-badge:is([hydrated], .hydrated),
+mds-banner:is([hydrated], .hydrated),
+mds-benchmark-bar:is([hydrated], .hydrated),
+mds-bibliography:is([hydrated], .hydrated),
+mds-breadcrumb:is([hydrated], .hydrated),
+mds-breadcrumb-item:is([hydrated], .hydrated),
+mds-button:is([hydrated], .hydrated),
+mds-button-dropdown:is([hydrated], .hydrated),
+mds-button-group:is([hydrated], .hydrated),
+mds-calendar:is([hydrated], .hydrated),
+mds-calendar-cell:is([hydrated], .hydrated),
+mds-card:is([hydrated], .hydrated),
+mds-card-content:is([hydrated], .hydrated),
+mds-card-footer:is([hydrated], .hydrated),
+mds-card-header:is([hydrated], .hydrated),
+mds-card-media:is([hydrated], .hydrated),
+mds-chip:is([hydrated], .hydrated),
+mds-details:is([hydrated], .hydrated),
+mds-dropdown:is([hydrated], .hydrated),
+mds-emoji:is([hydrated], .hydrated),
+mds-entity:is([hydrated], .hydrated),
+mds-file:is([hydrated], .hydrated),
+mds-file-preview:is([hydrated], .hydrated),
+mds-filter:is([hydrated], .hydrated),
+mds-filter-item:is([hydrated], .hydrated),
+mds-header:is([hydrated], .hydrated),
+mds-header-bar:is([hydrated], .hydrated),
+mds-help:is([hydrated], .hydrated),
+mds-horizontal-scroll:is([hydrated], .hydrated),
+mds-hr:is([hydrated], .hydrated),
+mds-icon:is([hydrated], .hydrated),
+mds-img:is([hydrated], .hydrated),
+mds-input:is([hydrated], .hydrated),
+mds-input-date:is([hydrated], .hydrated),
+mds-input-date-range:is([hydrated], .hydrated),
+mds-input-date-range-preselection:is([hydrated], .hydrated),
+mds-input-field:is([hydrated], .hydrated),
+mds-input-otp:is([hydrated], .hydrated),
+mds-input-range:is([hydrated], .hydrated),
+mds-input-select:is([hydrated], .hydrated),
+mds-input-switch:is([hydrated], .hydrated),
+mds-input-tip:is([hydrated], .hydrated),
+mds-input-tip-item:is([hydrated], .hydrated),
+mds-input-upload:is([hydrated], .hydrated),
+mds-keyboard:is([hydrated], .hydrated),
+mds-keyboard-key:is([hydrated], .hydrated),
+mds-kpi:is([hydrated], .hydrated),
+mds-kpi-item:is([hydrated], .hydrated),
+mds-label:is([hydrated], .hydrated),
+mds-list:is([hydrated], .hydrated),
+mds-list-item:is([hydrated], .hydrated),
+mds-mention:is([hydrated], .hydrated),
+mds-modal:is([hydrated], .hydrated),
+mds-note:is([hydrated], .hydrated),
+mds-notification:is([hydrated], .hydrated),
+mds-paginator:is([hydrated], .hydrated),
+mds-paginator-item:is([hydrated], .hydrated),
+mds-policy-ai:is([hydrated], .hydrated),
+mds-pref:is([hydrated], .hydrated),
+mds-pref-animation:is([hydrated], .hydrated),
+mds-pref-consumption:is([hydrated], .hydrated),
+mds-pref-contrast:is([hydrated], .hydrated),
+mds-pref-language:is([hydrated], .hydrated),
+mds-pref-language-item:is([hydrated], .hydrated),
+mds-pref-mode:is([hydrated], .hydrated),
+mds-pref-theme:is([hydrated], .hydrated),
+mds-pref-theme-item:is([hydrated], .hydrated),
+mds-price-table:is([hydrated], .hydrated),
+mds-price-table-features:is([hydrated], .hydrated),
+mds-price-table-features-cell:is([hydrated], .hydrated),
+mds-price-table-features-row:is([hydrated], .hydrated),
+mds-price-table-header:is([hydrated], .hydrated),
+mds-price-table-list:is([hydrated], .hydrated),
+mds-price-table-list-item:is([hydrated], .hydrated),
+mds-progress:is([hydrated], .hydrated),
+mds-push-notification:is([hydrated], .hydrated),
+mds-push-notification-item:is([hydrated], .hydrated),
+mds-quote:is([hydrated], .hydrated),
+mds-radial-menu:is([hydrated], .hydrated),
+mds-radial-menu-item:is([hydrated], .hydrated),
+mds-radial-progress:is([hydrated], .hydrated),
+mds-separator:is([hydrated], .hydrated),
+mds-spinner:is([hydrated], .hydrated),
+mds-status-bar:is([hydrated], .hydrated),
+mds-stepper-bar:is([hydrated], .hydrated),
+mds-stepper-bar-item:is([hydrated], .hydrated),
+mds-tab:is([hydrated], .hydrated),
+mds-tab-bar:is([hydrated], .hydrated),
+mds-tab-bar-item:is([hydrated], .hydrated),
+mds-tab-item:is([hydrated], .hydrated),
+mds-table:is([hydrated], .hydrated),
+mds-table-body:is([hydrated], .hydrated),
+mds-table-cell:is([hydrated], .hydrated),
+mds-table-footer:is([hydrated], .hydrated),
+mds-table-header:is([hydrated], .hydrated),
+mds-table-header-cell:is([hydrated], .hydrated),
+mds-table-row:is([hydrated], .hydrated),
+mds-text:is([hydrated], .hydrated),
+mds-toast:is([hydrated], .hydrated),
+mds-tooltip:is([hydrated], .hydrated),
+mds-tree:is([hydrated], .hydrated),
+mds-tree-item:is([hydrated], .hydrated),
+mds-url-view:is([hydrated], .hydrated),
+mds-usage:is([hydrated], .hydrated),
+mds-video-wall:is([hydrated], .hydrated),
+mds-zero:is([hydrated], .hydrated)
+{
+  border: revert-layer;
+  display: revert-layer;
+  margin: revert-layer;
+  padding: revert-layer;
+}

package/dist/css/tailwind-theme-color.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.0.1
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 10 Oct 2026 11:46:08 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 @theme {