@maggioli-design-system/styles 16.0.1 → 17.0.1

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` |
 
 ---
 
@@ -27,7 +28,7 @@ npm i @maggioli-design-system/styles
 
 ### Integration
 
-The layer order is thinked to be used with tailwindcss, so the first layer is the reset, then the vendor, then the theme, then the base, then the components, and finally the utilities.
+The cascade layers are ordered for Tailwind: reset, vendor, theme, base, components, utilities, and your overrides last. Import the files in this order in your global CSS entry point:
 
 ```css
 @layer reset, vendor, theme, base, components, utilities, overrides;
@@ -42,55 +43,76 @@ The layer order is thinked to be used with tailwindcss, so the first layer is th
 @import '@fontsource/roboto/500.css' layer(vendor);
 @import '@fontsource/roboto/700.css' layer(vendor);
 @import '@fontsource/roboto/900.css' layer(vendor);
-@import './iconsauce.css' layer(vendor);
 @import '@maggioli-design-system/styles/dist/css/reset.css' layer(reset);
 @import '@maggioli-design-system/styles/dist/css/globals.css' layer(theme);
 @import '@maggioli-design-system/styles/dist/css/colors-rgb.css' layer(theme);
+@import '@maggioli-design-system/styles/dist/css/typography.css' layer(theme);
+@import '@maggioli-design-system/styles/dist/css/semantic.css' layer(theme);
+@import '@maggioli-design-system/styles/dist/css/themes.css' layer(theme);
 @import '@maggioli-design-system/styles/dist/css/hydrated.css' layer(base);
+@import '@maggioli-design-system/styles/dist/css/transitions.css' layer(base);
 @import '@maggioli-design-system/styles/dist/css/animations.css' layer(base);
 @import '@maggioli-design-system/styles/dist/css/base.css' layer(base);
+
+/* your Tailwind entry point, if any (see Tailwind below) */
 @import './tailwind.css';
 
 @layer overrides {
-  body {
-    @apply
-    bg-tone-neutral
-    text-tone-neutral-03
-      transition-colors
-      duration-300
-      ease-in-out;
-  }
-
-  mds-button {
-    border-radius: var(--radius-2xl);
-  }
+  /* your own overrides of the --magma-* globals and --mds-* component tokens */
 }
 ```
 
-### Imports
+`base.css` already paints the `body` with the semantic roles (`--magma-surface-default`
+and `--magma-text-default`), which is why `semantic.css` is required.
 
-```ts
+### Semantic colors
+
+Color your UI with the semantic roles, not with raw palette steps: a role follows the
+mode, the named theme (`data-theme-name`) and the high-contrast preference, a palette
+step only follows the mode.
+
+```html
+<section class="bg-surface-raised text-fg-default border border-border-muted">
+  <p class="text-fg-muted">Secondary text</p>
+</section>
+```
 
+```css
+.panel {
+  background: rgb(var(--magma-surface-raised));
+  color: rgb(var(--magma-text-default));
+}
 ```
 
+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
+in the color guide shipped with the components package
+(`@maggioli-design-system/magma/agents/color.md`).
+
+### Palette
+
 #### Colors with tailwind or web components
 
-If you use tailwind or web components, you need to import **rgb format** of colors:
+If you use tailwind or web components, you need the **rgb format** of the palette, the one
+imported above:
 
 ```ts
-import '@maggioli-design-system/styles/dist/css/colors-rgb-tones.css';
-import '@maggioli-design-system/styles/dist/css/colors-rgb-status.css';
-import '@maggioli-design-system/styles/dist/css/colors-rgb-label.css';
-import '@maggioli-design-system/styles/dist/css/colors-rgb-brand.css';
+import '@maggioli-design-system/styles/dist/css/colors-rgb.css';
 ```
 
-You need to import colors because web components and our tailwind config works with our palette, which are custom properties in rgb format (rr, gg, bb).
+The web components, the Tailwind utilities and the semantic layer read the palette as
+custom properties in rgb channel format (`rr gg bb`). `colors-rgb.css` holds every group;
+the per-group files (`colors-rgb-{tones,status,label,brand,default,theme}.css`) exist for
+a custom setup, and the semantic roles need at least `default` (the `--variant-*` accents)
+and `theme` (the `--surface-*`, `--border-*` and `--text-*` families) besides `tones` and
+`status`.
 
-If for some reason you need to use colors outside tailwind:
+A raw palette step is right only for a colour that encodes data rather than an
+interface role (a `label-*` category, a `brand-*` identity). Outside tailwind:
 
 ```css
 .selector {
-  color: rgb(var(--tone-neutral-01));
+  color: rgb(var(--label-sky-04));
 }
 ```
 
@@ -113,48 +135,52 @@ Then you can use them like this:
 }
 ```
 
----
-
-### Dark mode format
-
-our color palette already supports dark mode, either according to your computer settings, or with manual support:
-
-#### Manual mode
-
-Just add the `dark-mode` class to the `html` tag:
+The hex files are for plain CSS only: they cannot take an alpha, and neither the
+components nor the semantic roles can read them.
 
-```html
-<html class="dark-mode">
-```
+---
 
-#### OS settings mode
+### Dark mode
 
-Just add the `system-mode` class to the `html` tag:
+The palette and the semantic roles already flip between light and dark. Pick the mode with a
+class on the `html` tag:
 
 ```html
-<html class="system-mode">
+<html class="pref-mode-system"><!-- follows the OS --></html>
+<html class="pref-mode-light"><!-- always light --></html>
+<html class="pref-mode-dark"><!-- always dark --></html>
 ```
 
-There are other practices to handle dark mode, check [how tailwind handle dark mode][tailwindcss-dark], or [how is handled by next-themes][next-themes].
+To let the user choose, use the `mds-pref-mode` component of
+`@maggioli-design-system/magma`: it writes the class and remembers the choice. Tailwind's
+`dark:` variant follows only the OS (`prefers-color-scheme`), not these classes; the
+semantic roles need no `dark:`.
 
 ---
 
-### Tailwindcss config
+### Tailwind
 
-You can use styles with [tailwindcss config][tailwindcss-config], palette colors and the rest of it's Design Tokens.
-There are various ways to use it, check out [tailwindcss documentation][tailwindcss-doc].
+With Tailwind 4, import Magma's theme (palette, typography tokens, semantic colors), its
+typography utilities and its helpers in your Tailwind entry point, after Tailwind's own
+theme and utilities (Magma ships its own reset, so Tailwind's preflight is left out):
 
-To extend the default tailwind config:
+```css
+/* tailwind.css */
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+@import '@maggioli-design-system/styles/dist/tailwind/theme.css';
+@import '@maggioli-design-system/styles/dist/tailwind/typography.css';
+@import '@maggioli-design-system/styles/dist/tailwind/utilities.css';
+```
+
+With Tailwind 3, extend the [JS preset][tailwindcss-config] (the package `main`) and use
+the layers in `dist/tailwind3/`. The preset does not work with Tailwind 4: its colors are
+Tailwind 3 color functions.
 
 ```js
 module.exports = {
-  content: [
-    './src/**/*.{ts,tsx}',
-  ],
-  important: false,
-  presets: [
-    require('@maggioli-design-system/styles'),
-  ],
+  content: ['./src/**/*.{ts,tsx}'],
+  presets: [require('@maggioli-design-system/styles')],
 }
 ```
 
@@ -162,17 +188,17 @@ module.exports = {
 
 ### Fonts
 
-Use `@fontsource` fonts, which are up to date with Google fonts, styles used in [Magma Design System][mds] are:
+Magma does not bundle webfonts: the type scale uses **Roboto** (titles and actions: 500,
+700, 900), **Karla** (UI text: 400, 700), **Merriweather** (reading text: 300, 400, plus 700
+for bold) and **Roboto Mono** (code: 400). Load them with `@fontsource`; the weights are
+the ones of the scale.
 
 #### TypeScript
 
-Importing fonts in TypeScript:
-
-```ts
-
 ```ts
 import '@fontsource/karla/400.css'
 import '@fontsource/karla/700.css'
+import '@fontsource/merriweather/300.css'
 import '@fontsource/merriweather/400.css'
 import '@fontsource/merriweather/700.css'
 import '@fontsource/roboto-mono/400.css'
@@ -183,42 +209,73 @@ import '@fontsource/roboto/900.css'
 
 #### CSS
 
-Importing fonts in CSS:
+In CSS use the `layer(vendor)` imports of the Integration block above.
 
-```css
-@import '@fontsource/karla/400.css';
-@import '@fontsource/karla/700.css';
-@import '@fontsource/merriweather/400.css';
-@import '@fontsource/merriweather/700.css';
-@import '@fontsource/roboto-mono/400.css';
-@import '@fontsource/roboto/500.css';
-@import '@fontsource/roboto/700.css';
-@import '@fontsource/roboto/900.css';
+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
+}
 ```
 
-Fontsource supports [variable fonts][fontsource-var-fonts].
+`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:
-
-| Folder | For | File name |
-| --------- | ----------- | ----------- |
-| `css` | both | `globals.css` |
-| `css` | both | `reset.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` |
+| Folder | For | Files |
+| --- | --- | --- |
+| `css` | everyone | `layer.css` (the cascade layer order), `reset.css`, `globals.css` (the `--magma-*` globals and the corner axis), `colors-rgb.css` (+ one `colors-rgb-<group>.css` per group), `typography.css` (the non-color tokens: fonts, type sizes, spacing, radius, shadows), `semantic.css` (the semantic color roles), `themes.css` (the named themes), `hydrated.css`, `transitions.css`, `animations.css`, `base.css` |
+| `css` | plain css | `colors-hex.css` (+ per group), `utility-typography.css` (the `typography-*` classes), `theme.css` (the `--depth` axis) |
+| `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` |
+| `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
 [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
-[tailwindcss-dark]: https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection
-[next-themes]: https://github.com/pacocoursey/next-themes#use
+[tailwindcss-config]: https://github.com/magma-design-system/magma/blob/main/projects/styles/tailwind.config.js

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.3 | 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.1.0
+@magma-design-system/design-tokens v15.0.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Mon, 08 Jun 2026 14:52:21 GMT
+Generated at Sat, 10 Oct 2026 11:46:08 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.1.0
+@magma-design-system/design-tokens v15.0.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Mon, 08 Jun 2026 14:52:21 GMT
+Generated at Sat, 10 Oct 2026 11:46:08 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;
   }
 }