@maggioli-design-system/styles 16.0.0 → 17.0.0

package/README.md

@@ -11,7 +11,8 @@ Use the version of this package matching the major version of [`@maggioli-design
 | magma | design-tokens | styles |
 | :--- | :--- | :--- |
 | `1.x` (before Magma 2) | `13.x` (latest `13.7.2`) | `15.x` (latest `15.11.1`) |
-| `2.x` and later | `>= 14` | `>= 16` |
+| `2.0.0-alpha.0` to `2.0.0-beta.3` (prereleases) | `14.x` | `16.x` |
+| `2.x` and later | `>= 15` | `>= 17` |
 
 ---
 
@@ -54,7 +55,7 @@ The layer order is thinked to be used with tailwindcss, so the first layer is th
 @layer overrides {
   body {
     @apply
-    bg-tone-neutral
+    bg-tone-neutral-seed
     text-tone-neutral-03
       transition-colors
       duration-300
@@ -200,6 +201,55 @@ Fontsource supports [variable fonts][fontsource-var-fonts].
 
 ---
 
+### Editor autocomplete
+
+`dist/css/tokens.editor.css` is the single file to point an editor at. It is generated,
+holds every public token exactly once - the scales, motion, palette, semantic layer,
+globals and the tokens of every component - with each default resolved to a literal, and
+it is ordered: a scale runs from its smallest step up, a palette keeps its ramp order.
+
+One deliberate difference from the real stylesheets: a palette token whose value is a bare
+rgb triplet is written as `rgb(<triplet>)`, so an editor can show its actual color. No
+editor can preview `rgb(var(--label-yellow-03))` - a triplet is not a color, and VS Code's
+own color support returns nothing for that shape even when the token is in the same file.
+The token itself still holds the triplet, to be read as `rgb(var(--label-yellow-03))`.
+
+Why a generated file rather than the real stylesheets. Editors discover custom properties
+by walking declarations, so the `@property` registrations that publish the `--mds-*`
+component tokens and the `--magma-pref-*` switches are invisible to them. And the token
+layer ships the same names several times over (the design-tokens output is copied into
+this package, and every scale exists both as `:root` and as an `@theme` bridge), while
+editors dedupe per file rather than across files: pointing at the sources yields four to
+eight completion entries per token. One file makes that impossible.
+
+With [CSS Var Complete][css-variable-autocomplete], in `.vscode/settings.json`:
+
+```json
+{
+  "cssvar.files": [
+    "node_modules/@maggioli-design-system/styles/dist/css/tokens.editor.css"
+  ],
+  "cssvar.ignore": [],
+  "cssvar.disableSort": true
+}
+```
+
+`cssvar.ignore` defaults to `["**/node_modules/**"]` and is applied as an ignore list over
+`cssvar.files`, so the path above is dropped unless you empty it. `cssvar.disableSort`
+turns off the editor's own alphabetical sort and keeps the file's order, which is the
+point of generating it.
+
+Two things stay outside the file: `--private-*`, a component's internal wiring, declared
+in the file that uses it where same-document completion already covers it; and the
+handful of tokens Tailwind's own theme publishes (`--blur-*`, `--drop-shadow-*`, the
+`--radius` steps we do not override), which Tailwind IntelliSense completes.
+
+Never import this file. It only holds light-theme defaults, so loading it would pin every
+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.
+
+---
+
 ### Dist folder
 
 The `dist` folder contains the following files:
@@ -208,15 +258,17 @@ The `dist` folder contains the following files:
 | --------- | ----------- | ----------- |
 | `css` | both | `globals.css` |
 | `css` | both | `reset.css` |
+| `css` | editors only, never import | `tokens.editor.css` |
 | `css` | plain css | `base.css` |
 | `css` | plain css | `colors-hex-*.css` |
+| `css` | plain css | `utility-typography.css` |
 | `css` | plain css | `typography.css` |
 | `css` | tailwind or web components | `colors-rgb-*.css` |
 | `tailwind` | tailwind | `base.css` |
 | `tailwind` | tailwind components | `components.css` |
-| `tailwind` | tailwind typography components | `typography.css` |
 
 [mds]: https://magma.maggiolicloud.it/
+[css-variable-autocomplete]: https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables
 [fontsource-var-fonts]: https://fontsource.org/docs/variable-fonts
 [tailwindcss-config]: https://gitlab.com/maggiolispa/ricerca-sviluppo-new-media/magma/design-system/-/blob/dev/projects/styles/tailwind.config.js
 [tailwindcss-doc]: https://tailwindcss.com/docs/installation

package/dist/css/animations.css

@@ -2,10 +2,10 @@
   0%,
   75%,
   100% {
-    outline-offset: var(--magma-outline-focus-offset, 6px);
+    outline-offset: var(--magma-outline-focus-offset, 2px);
   }
 
   50% {
-    outline-offset: var(--magma-outline-blur-offset, 2px);
+    outline-offset: var(--magma-outline-blur-offset, 6px);
   }
 }

package/dist/css/base.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer base {
   @view-transition {
@@ -11,44 +11,30 @@
   body {
     min-height: auto;
     text-box: trim-both text;
-    font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
     font-size: var(--text-size-info-detail, 1rem);
     line-height: var(--tw-leading, var(--text-size-info-detail--line-height, 1.5rem));
     font-weight: var(--tw-font-weight, var(--text-size-info-detail--font-weight, 400));
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-    background-color: rgb(var(--tone-neutral));
-    color: rgb(var(--tone-neutral-03));
+    background-color: rgb(var(--magma-surface-default));
+    color: rgb(var(--magma-text-default));
   }
-  :root.pref-contrast-high body {
-    color: rgb(var(--tone-neutral-01));
+  :root:not([data-magma-pref]),
+  :root.pref-mode-system {
+    color-scheme: light dark;
   }
-  @media (prefers-contrast: more) {
-    :root.pref-contrast-system body {
-      color: rgb(var(--tone-neutral-01));
-    }
+  :root.pref-mode-light {
+    color-scheme: light;
   }
-  :root.pref-theme-scheme-dark {
-    color-scheme: only dark;
+  :root.pref-mode-dark {
+    color-scheme: dark;
   }
   :root.pref-theme-scheme-light {
     color-scheme: only light;
   }
-  :root.pref-theme-scheme-all {
-    color-scheme: light dark;
-  }
-  @media (prefers-color-scheme: dark) {
-    :root.pref-theme-system {
-      color-scheme: dark;
-    }
-  }
-  :root.pref-theme-scheme-all.pref-theme-dark {
-    color-scheme: dark;
-  }
-  ::-moz-selection {
-    background-color: var(--magma-selection-background);
-    color: var(--magma-selection-color);
+  :root.pref-theme-scheme-dark {
+    color-scheme: only dark;
   }
   ::selection {
     background-color: var(--magma-selection-background);
@@ -76,7 +62,7 @@
     letter-spacing: var(--tracking-tight, -0.025em);
   }
   a {
-    color: rgb(var(--theme-default-02-primary-text));
+    color: rgb(var(--magma-accent-emphasis));
   }
   h1,
   h2,

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

@@ -1,52 +1,52 @@
 /*
-@magma-design-system/design-tokens v14.0.0
+@magma-design-system/design-tokens v15.0.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Mon, 08 Jun 2026 08:22:20 GMT
+Generated at Wed, 30 Sep 2026 14:38:45 GMT
 */
 
 :root {
-  --hex-brand-rnd-01: #2a2520;
-  --hex-brand-rnd-02: #40362a;
-  --hex-brand-rnd-03: #5b4a34;
-  --hex-brand-rnd-04: #7e633d;
+  --hex-brand-rnd-01: #342d25;
+  --hex-brand-rnd-02: #514331;
+  --hex-brand-rnd-03: #6b5639;
+  --hex-brand-rnd-04: #8b6a40;
   --hex-brand-rnd-05: #a37a44;
-  --hex-brand-rnd-06: #cba26c;
+  --hex-brand-rnd-06: #cca56f;
   --hex-brand-rnd-07: #d6bc9a;
   --hex-brand-rnd-08: #ded2c1;
-  --hex-brand-rnd-09: #ebe7e3;
-  --hex-brand-rnd-10: #f0eeec;
+  --hex-brand-rnd-09: #e5dfd6;
+  --hex-brand-rnd-10: #efedea;
   --hex-brand-rnd: #cba26b;
 }
 
-:root:not(.pref-theme-scheme-light).pref-theme-dark,
+:root:not(.pref-theme-scheme-light).pref-mode-dark,
 :root.pref-theme-scheme-dark {
-  --hex-brand-rnd-01: #f6f6f5;
-  --hex-brand-rnd-02: #f0eeec;
-  --hex-brand-rnd-03: #e6e1d9;
-  --hex-brand-rnd-04: #ddcdb9;
+  --hex-brand-rnd-01: #f3f3f1;
+  --hex-brand-rnd-02: #eae6e1;
+  --hex-brand-rnd-03: #e2d8cc;
+  --hex-brand-rnd-04: #dac6ad;
   --hex-brand-rnd-05: #d4b791;
-  --hex-brand-rnd-06: #bd8d4e;
+  --hex-brand-rnd-06: #bb8b4b;
   --hex-brand-rnd-07: #9e7743;
   --hex-brand-rnd-08: #7c613d;
-  --hex-brand-rnd-09: #534532;
-  --hex-brand-rnd-10: #453b2d;
+  --hex-brand-rnd-09: #655137;
+  --hex-brand-rnd-10: #483c2e;
   --hex-brand-rnd: #cba26b;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root:not(.pref-theme-scheme-light).pref-theme-system,
+  :root:not(.pref-theme-scheme-light).pref-mode-system,
   :root:not([data-magma-pref]) {
-    --hex-brand-rnd-01: #f6f6f5;
-    --hex-brand-rnd-02: #f0eeec;
-    --hex-brand-rnd-03: #e6e1d9;
-    --hex-brand-rnd-04: #ddcdb9;
+    --hex-brand-rnd-01: #f3f3f1;
+    --hex-brand-rnd-02: #eae6e1;
+    --hex-brand-rnd-03: #e2d8cc;
+    --hex-brand-rnd-04: #dac6ad;
     --hex-brand-rnd-05: #d4b791;
-    --hex-brand-rnd-06: #bd8d4e;
+    --hex-brand-rnd-06: #bb8b4b;
     --hex-brand-rnd-07: #9e7743;
     --hex-brand-rnd-08: #7c613d;
-    --hex-brand-rnd-09: #534532;
-    --hex-brand-rnd-10: #453b2d;
+    --hex-brand-rnd-09: #655137;
+    --hex-brand-rnd-10: #483c2e;
     --hex-brand-rnd: #cba26b;
   }
 }

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

@@ -1,85 +1,85 @@
 /*
-@magma-design-system/design-tokens v14.0.0
+@magma-design-system/design-tokens v15.0.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Mon, 08 Jun 2026 08:22:20 GMT
+Generated at Wed, 30 Sep 2026 14:38:45 GMT
 */
 
 :root {
-  --hex-brand-maggioli-01: #092252;
-  --hex-brand-maggioli-02: #022e82;
-  --hex-brand-maggioli-03: #013fb4;
-  --hex-brand-maggioli-04: #125be3;
+  --hex-brand-maggioli-01: #052867;
+  --hex-brand-maggioli-02: #0039a3;
+  --hex-brand-maggioli-03: #074ccc;
+  --hex-brand-maggioli-04: #2467e7;
   --hex-brand-maggioli-05: #4a7ee0;
-  --hex-brand-maggioli-06: #91aada;
+  --hex-brand-maggioli-06: #94acda;
   --hex-brand-maggioli-07: #b2c0dc;
   --hex-brand-maggioli-08: #ccd4e2;
-  --hex-brand-maggioli-09: #e6e8ec;
-  --hex-brand-maggioli-10: #edeef1;
+  --hex-brand-maggioli-09: #dce0e7;
+  --hex-brand-maggioli-10: #ecedf0;
   --hex-brand-maggioli: #00379e;
-  --hex-brand-maggioli-editore-01: #182542;
-  --hex-brand-maggioli-editore-02: #173274;
-  --hex-brand-maggioli-editore-03: #1040b3;
-  --hex-brand-maggioli-editore-04: #1957eb;
+  --hex-brand-maggioli-editore-01: #192b58;
+  --hex-brand-maggioli-editore-02: #123b9c;
+  --hex-brand-maggioli-editore-03: #0f49d2;
+  --hex-brand-maggioli-editore-04: #2e65e9;
   --hex-brand-maggioli-editore-05: #517de4;
-  --hex-brand-maggioli-editore-06: #93a9df;
+  --hex-brand-maggioli-editore-06: #96abdf;
   --hex-brand-maggioli-editore-07: #b3c0e0;
   --hex-brand-maggioli-editore-08: #cdd3e4;
-  --hex-brand-maggioli-editore-09: #e6e8ed;
-  --hex-brand-maggioli-editore-10: #edeef1;
+  --hex-brand-maggioli-editore-09: #dcdfe8;
+  --hex-brand-maggioli-editore-10: #ecedf0;
   --hex-brand-maggioli-editore: #0f4ad5;
 }
 
-:root:not(.pref-theme-scheme-light).pref-theme-dark,
+:root:not(.pref-theme-scheme-light).pref-mode-dark,
 :root.pref-theme-scheme-dark {
-  --hex-brand-maggioli-01: #f6f6f7;
-  --hex-brand-maggioli-02: #edeef1;
-  --hex-brand-maggioli-03: #dee2e8;
-  --hex-brand-maggioli-04: #c8d0e1;
+  --hex-brand-maggioli-01: #f2f3f4;
+  --hex-brand-maggioli-02: #e4e6eb;
+  --hex-brand-maggioli-03: #d5dae4;
+  --hex-brand-maggioli-04: #becade;
   --hex-brand-maggioli-05: #acbcdc;
-  --hex-brand-maggioli-06: #7296db;
+  --hex-brand-maggioli-06: #6e94dc;
   --hex-brand-maggioli-07: #447ae1;
   --hex-brand-maggioli-08: #1058e0;
-  --hex-brand-maggioli-09: #003aa7;
-  --hex-brand-maggioli-10: #01318d;
+  --hex-brand-maggioli-09: #0446c3;
+  --hex-brand-maggioli-10: #003393;
   --hex-brand-maggioli: #00379e;
-  --hex-brand-maggioli-editore-01: #f6f6f7;
-  --hex-brand-maggioli-editore-02: #edeef1;
-  --hex-brand-maggioli-editore-03: #dee2ea;
-  --hex-brand-maggioli-editore-04: #c8d0e3;
+  --hex-brand-maggioli-editore-01: #f2f3f4;
+  --hex-brand-maggioli-editore-02: #e4e6ec;
+  --hex-brand-maggioli-editore-03: #d4dae6;
+  --hex-brand-maggioli-editore-04: #bfc9e1;
   --hex-brand-maggioli-editore-05: #acbbdf;
-  --hex-brand-maggioli-editore-06: #7595e0;
+  --hex-brand-maggioli-editore-06: #7293e0;
   --hex-brand-maggioli-editore-07: #4a78e5;
   --hex-brand-maggioli-editore-08: #1454ec;
-  --hex-brand-maggioli-editore-09: #123ca1;
-  --hex-brand-maggioli-editore-10: #153581;
+  --hex-brand-maggioli-editore-09: #0f45c6;
+  --hex-brand-maggioli-editore-10: #153787;
   --hex-brand-maggioli-editore: #0f4ad5;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root:not(.pref-theme-scheme-light).pref-theme-system,
+  :root:not(.pref-theme-scheme-light).pref-mode-system,
   :root:not([data-magma-pref]) {
-    --hex-brand-maggioli-01: #f6f6f7;
-    --hex-brand-maggioli-02: #edeef1;
-    --hex-brand-maggioli-03: #dee2e8;
-    --hex-brand-maggioli-04: #c8d0e1;
+    --hex-brand-maggioli-01: #f2f3f4;
+    --hex-brand-maggioli-02: #e4e6eb;
+    --hex-brand-maggioli-03: #d5dae4;
+    --hex-brand-maggioli-04: #becade;
     --hex-brand-maggioli-05: #acbcdc;
-    --hex-brand-maggioli-06: #7296db;
+    --hex-brand-maggioli-06: #6e94dc;
     --hex-brand-maggioli-07: #447ae1;
     --hex-brand-maggioli-08: #1058e0;
-    --hex-brand-maggioli-09: #003aa7;
-    --hex-brand-maggioli-10: #01318d;
+    --hex-brand-maggioli-09: #0446c3;
+    --hex-brand-maggioli-10: #003393;
     --hex-brand-maggioli: #00379e;
-    --hex-brand-maggioli-editore-01: #f6f6f7;
-    --hex-brand-maggioli-editore-02: #edeef1;
-    --hex-brand-maggioli-editore-03: #dee2ea;
-    --hex-brand-maggioli-editore-04: #c8d0e3;
+    --hex-brand-maggioli-editore-01: #f2f3f4;
+    --hex-brand-maggioli-editore-02: #e4e6ec;
+    --hex-brand-maggioli-editore-03: #d4dae6;
+    --hex-brand-maggioli-editore-04: #bfc9e1;
     --hex-brand-maggioli-editore-05: #acbbdf;
-    --hex-brand-maggioli-editore-06: #7595e0;
+    --hex-brand-maggioli-editore-06: #7293e0;
     --hex-brand-maggioli-editore-07: #4a78e5;
     --hex-brand-maggioli-editore-08: #1454ec;
-    --hex-brand-maggioli-editore-09: #123ca1;
-    --hex-brand-maggioli-editore-10: #153581;
+    --hex-brand-maggioli-editore-09: #0f45c6;
+    --hex-brand-maggioli-editore-10: #153787;
     --hex-brand-maggioli-editore: #0f4ad5;
   }
 }