@maggioli-design-system/styles 16.0.1 → 17.0.0

package/dist/css/transitions.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v14.1.0
+@magma-design-system/design-tokens v15.0.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Mon, 08 Jun 2026 14:52:21 GMT
+Generated at Wed, 30 Sep 2026 14:38:45 GMT
 */
 
 :root {

package/dist/css/typography.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v14.1.0
+@magma-design-system/design-tokens v15.0.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Mon, 08 Jun 2026 14:52:21 GMT
+Generated at Wed, 30 Sep 2026 14:38:45 GMT
 */
 
 :root {
@@ -184,6 +184,17 @@ Generated at Mon, 08 Jun 2026 14:52:21 GMT
   --radius-4xl: 48px;
   --radius-5xl: 64px;
   --radius-full: 1000px;
+  --radius-squircle-3xs: 6px;
+  --radius-squircle-2xs: 10px;
+  --radius-squircle-xs: 14px;
+  --radius-squircle-sm: 16px;
+  --radius-squircle-md: 20px;
+  --radius-squircle-lg: 28px;
+  --radius-squircle-xl: 36px;
+  --radius-squircle-2xl: 40px;
+  --radius-squircle-3xl: 56px;
+  --radius-squircle-4xl: 80px;
+  --radius-squircle-5xl: 112px;
 
   --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-xs-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -218,4 +229,10 @@ Generated at Mon, 08 Jun 2026 14:52:21 GMT
   --shadow-highlight-weak: rgb(0 0 0 / 0.3) 0px 0px 0px 1px;
   --shadow-highlight-md: rgb(0 0 0 / 0.5) 0px 0px 0px 1px, rgb(0 0 0 / 0.3) 0px 4px 6px -1px;
   --shadow-highlight-strong: rgb(0 0 0 / 0.4) 0px 0px 0px 2px, rgb(0 0 0 / 0.65) 0px 4px 6px -1px;
+  --shadow-ring: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);
+  --shadow-ring-2: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);
+  --shadow-ring-weak: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.15);
+  --shadow-ring-weak-2: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.15);
+  --shadow-ring-strong-2: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);
+  --shadow-ring-strong-4: 0 0 0 4px rgb(var(--tone-neutral-01) / 0.6);
 }

package/dist/css/utility-typography.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 utilities {
   .focus-zoom {
@@ -17,7 +17,7 @@
   }
   .focus-zoom--light.focus-zoom--focused,
   .focus-zoom--light:focus-visible {
-    --magma-outline-blur: 2px solid rgb(var(--tone-neutral));
+    --magma-outline-blur: 2px solid rgb(var(--magma-text-on-emphasis));
   }
 }
 .typography-title-h1 {

package/dist/tailwind/base.css

@@ -2,6 +2,7 @@
 @reference "@maggioli-design-system/design-tokens/dist/css/tailwind-theme-typography.css";
 
 @layer base {
+
   @view-transition {
     navigation: var(--magma-view-transition-navigation, auto);
   }
@@ -11,44 +12,45 @@
     transition-timing-function: var(--ease-out);
   }
 
+  /* No contrast twin: `text-default` is already the strongest step of the family,
+   * and the two rules that used to sit here keyed off `pref-contrast-high`, a
+   * class no controller writes, and off a hardcoded `--tone-neutral-01` that
+   * resolves to the very same value in both modes. */
+
   body {
     @apply font-info
       text-info-detail;
 
-    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));
+  /* color-scheme follows the palette, so the browser's own UI (scrollbars, form
+   * controls, autofill) matches the theme. The MODE comes first; a theme that
+   * only exists in one scheme (`pref-theme-scheme-light|dark`) comes after and
+   * wins, exactly as it overrides the mode in the palette. All the selectors have
+   * the same specificity, so the source order is the rule. */
+
+  /* no controller: the palette follows the OS, and so does the browser */
+  :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;
+  :root.pref-theme-scheme-dark {
+    color-scheme: only dark;
   }
 
   ::selection {
@@ -69,7 +71,12 @@
   }
 
   a {
-    color: rgb(var(--theme-default-02-primary-text));
+
+    /* `--theme-default-02-primary-text` was defined nowhere, so the declaration
+     * was invalid at computed-value time and a link inherited the body colour.
+     * `accent-emphasis`, not `accent-fg`: 5.04:1 on white and 4.50:1 on the page
+     * surface, where fg sits at 3.92 and 3.51. */
+    color: rgb(var(--magma-accent-emphasis));
   }
 
   h1,
@@ -86,6 +93,7 @@
   }
 
   .hydrated {
+
     /*
       Revert all styles for hydrated web components
       to avoid tailwind base unwanted overrides

package/dist/tailwind/semantic.css

@@ -0,0 +1,119 @@
+/*
+  Tailwind bridge for the semantic color layer.
+  GENERATED by scripts/semantic.ts from semantic.config.ts - do NOT edit by hand.
+  Contract + rationale: semantic.config.ts and SEMANTIC_COLOR_SPEC.md.
+*/
+
+@theme {
+  --color-surface-sunken: rgb(var(--magma-surface-sunken));
+  --color-surface-muted: rgb(var(--magma-surface-muted));
+  --color-surface-default: rgb(var(--magma-surface-default));
+  --color-surface-raised: rgb(var(--magma-surface-raised));
+  --color-surface-overlay: rgb(var(--magma-surface-overlay));
+  --color-wash-soft: rgb(var(--magma-wash-soft));
+  --color-wash-base: rgb(var(--magma-wash-base));
+  --color-wash-strong: rgb(var(--magma-wash-strong));
+  --color-shadow-ink: rgb(var(--magma-shadow-ink));
+  --color-fg-default: rgb(var(--magma-text-default));
+  --color-fg-muted: rgb(var(--magma-text-muted));
+  --color-fg-subtle: rgb(var(--magma-text-subtle));
+  --color-fg-disabled: rgb(var(--magma-text-disabled));
+  --color-fg-on-emphasis: rgb(var(--magma-text-on-emphasis));
+  --color-border-muted: rgb(var(--magma-border-muted));
+  --color-border-default: rgb(var(--magma-border-default));
+  --color-border-strong: rgb(var(--magma-border-strong));
+  --color-border-focus: rgb(var(--magma-border-focus));
+  --color-info-wash-soft: rgb(var(--magma-info-wash-soft));
+  --color-info-wash-base: rgb(var(--magma-info-wash-base));
+  --color-info-wash-strong: rgb(var(--magma-info-wash-strong));
+  --color-info-fg-default: rgb(var(--magma-info-text-default));
+  --color-info-fg-muted: rgb(var(--magma-info-text-muted));
+  --color-info-fg-subtle: rgb(var(--magma-info-text-subtle));
+  --color-info-fg-disabled: rgb(var(--magma-info-text-disabled));
+  --color-info-border-muted: rgb(var(--magma-info-border-muted));
+  --color-info-border-default: rgb(var(--magma-info-border-default));
+  --color-info-border-strong: rgb(var(--magma-info-border-strong));
+  --color-info-emphasis: rgb(var(--magma-info-emphasis));
+  --color-info-emphasis-hover: rgb(var(--magma-info-emphasis-hover));
+  --color-info-emphasis-active: rgb(var(--magma-info-emphasis-active));
+  --color-info-on-emphasis: rgb(var(--magma-info-on-emphasis));
+  --color-info-surface: rgb(var(--magma-info-surface));
+  --color-info-fg: rgb(var(--magma-info-fg));
+  --color-info-border: rgb(var(--magma-info-border));
+  --color-success-wash-soft: rgb(var(--magma-success-wash-soft));
+  --color-success-wash-base: rgb(var(--magma-success-wash-base));
+  --color-success-wash-strong: rgb(var(--magma-success-wash-strong));
+  --color-success-fg-default: rgb(var(--magma-success-text-default));
+  --color-success-fg-muted: rgb(var(--magma-success-text-muted));
+  --color-success-fg-subtle: rgb(var(--magma-success-text-subtle));
+  --color-success-fg-disabled: rgb(var(--magma-success-text-disabled));
+  --color-success-border-muted: rgb(var(--magma-success-border-muted));
+  --color-success-border-default: rgb(var(--magma-success-border-default));
+  --color-success-border-strong: rgb(var(--magma-success-border-strong));
+  --color-success-emphasis: rgb(var(--magma-success-emphasis));
+  --color-success-emphasis-hover: rgb(var(--magma-success-emphasis-hover));
+  --color-success-emphasis-active: rgb(var(--magma-success-emphasis-active));
+  --color-success-on-emphasis: rgb(var(--magma-success-on-emphasis));
+  --color-success-surface: rgb(var(--magma-success-surface));
+  --color-success-fg: rgb(var(--magma-success-fg));
+  --color-success-border: rgb(var(--magma-success-border));
+  --color-warning-wash-soft: rgb(var(--magma-warning-wash-soft));
+  --color-warning-wash-base: rgb(var(--magma-warning-wash-base));
+  --color-warning-wash-strong: rgb(var(--magma-warning-wash-strong));
+  --color-warning-fg-default: rgb(var(--magma-warning-text-default));
+  --color-warning-fg-muted: rgb(var(--magma-warning-text-muted));
+  --color-warning-fg-subtle: rgb(var(--magma-warning-text-subtle));
+  --color-warning-fg-disabled: rgb(var(--magma-warning-text-disabled));
+  --color-warning-border-muted: rgb(var(--magma-warning-border-muted));
+  --color-warning-border-default: rgb(var(--magma-warning-border-default));
+  --color-warning-border-strong: rgb(var(--magma-warning-border-strong));
+  --color-warning-emphasis: rgb(var(--magma-warning-emphasis));
+  --color-warning-emphasis-hover: rgb(var(--magma-warning-emphasis-hover));
+  --color-warning-emphasis-active: rgb(var(--magma-warning-emphasis-active));
+  --color-warning-on-emphasis: rgb(var(--magma-warning-on-emphasis));
+  --color-warning-surface: rgb(var(--magma-warning-surface));
+  --color-warning-fg: rgb(var(--magma-warning-fg));
+  --color-warning-border: rgb(var(--magma-warning-border));
+  --color-danger-wash-soft: rgb(var(--magma-danger-wash-soft));
+  --color-danger-wash-base: rgb(var(--magma-danger-wash-base));
+  --color-danger-wash-strong: rgb(var(--magma-danger-wash-strong));
+  --color-danger-fg-default: rgb(var(--magma-danger-text-default));
+  --color-danger-fg-muted: rgb(var(--magma-danger-text-muted));
+  --color-danger-fg-subtle: rgb(var(--magma-danger-text-subtle));
+  --color-danger-fg-disabled: rgb(var(--magma-danger-text-disabled));
+  --color-danger-border-muted: rgb(var(--magma-danger-border-muted));
+  --color-danger-border-default: rgb(var(--magma-danger-border-default));
+  --color-danger-border-strong: rgb(var(--magma-danger-border-strong));
+  --color-danger-emphasis: rgb(var(--magma-danger-emphasis));
+  --color-danger-emphasis-hover: rgb(var(--magma-danger-emphasis-hover));
+  --color-danger-emphasis-active: rgb(var(--magma-danger-emphasis-active));
+  --color-danger-on-emphasis: rgb(var(--magma-danger-on-emphasis));
+  --color-danger-surface: rgb(var(--magma-danger-surface));
+  --color-danger-fg: rgb(var(--magma-danger-fg));
+  --color-danger-border: rgb(var(--magma-danger-border));
+  --color-neutral-fg: rgb(var(--magma-neutral-fg));
+  --color-neutral-border: rgb(var(--magma-neutral-border));
+  --color-surface-inverse: rgb(var(--magma-surface-inverse));
+  --color-surface-inverse-muted: rgb(var(--magma-surface-inverse-muted));
+  --color-on-inverse: rgb(var(--magma-on-inverse));
+  --color-neutral-emphasis: rgb(var(--magma-neutral-emphasis));
+  --color-neutral-on-emphasis: rgb(var(--magma-neutral-on-emphasis));
+  --color-accent-surface: rgb(var(--magma-accent-surface));
+  --color-accent-fg: rgb(var(--magma-accent-fg));
+  --color-accent-border: rgb(var(--magma-accent-border));
+  --color-accent-emphasis: rgb(var(--magma-accent-emphasis));
+  --color-accent-emphasis-hover: rgb(var(--magma-accent-emphasis-hover));
+  --color-accent-emphasis-active: rgb(var(--magma-accent-emphasis-active));
+  --color-accent-surface-hover: rgb(var(--magma-accent-surface-hover));
+  --color-accent-surface-subtle: rgb(var(--magma-accent-surface-subtle));
+  --color-accent-on-emphasis: rgb(var(--magma-accent-on-emphasis));
+  --color-accent-ai-surface: rgb(var(--magma-accent-ai-surface));
+  --color-accent-ai-fg: rgb(var(--magma-accent-ai-fg));
+  --color-accent-ai-border: rgb(var(--magma-accent-ai-border));
+  --color-accent-ai-emphasis: rgb(var(--magma-accent-ai-emphasis));
+  --color-accent-ai-emphasis-hover: rgb(var(--magma-accent-ai-emphasis-hover));
+  --color-accent-ai-emphasis-active: rgb(var(--magma-accent-ai-emphasis-active));
+  --color-accent-ai-surface-hover: rgb(var(--magma-accent-ai-surface-hover));
+  --color-accent-ai-surface-subtle: rgb(var(--magma-accent-ai-surface-subtle));
+  --color-accent-ai-on-emphasis: rgb(var(--magma-accent-ai-on-emphasis));
+}

package/dist/tailwind/theme.css

@@ -3,3 +3,6 @@
 /* @import "./dark-mode.css"; */
 @import '@maggioli-design-system/design-tokens/dist/css/tailwind-theme-color.css' layer(theme);
 @import '@maggioli-design-system/design-tokens/dist/css/tailwind-theme-typography.css';
+
+/* semantic color layer bridge (--mds-* -> Tailwind --color-*) */
+@import './semantic.css';

package/dist/tailwind/utilities.css

@@ -84,7 +84,7 @@
 
   .focus-zoom--light.focus-zoom--focused,
   .focus-zoom--light:focus-visible {
-    --magma-outline-blur: 2px solid rgb(var(--tone-neutral));
+    --magma-outline-blur: 2px solid rgb(var(--magma-text-on-emphasis));
   }
 
   /* .not-hydrated {

package/dist/tailwind3/base.css

@@ -1,19 +1,12 @@
+/* See ../tailwind/base.css for the why: the page is the semantic surface, the
+ * text role needs no contrast twin, and the fallbacks name the raw family the
+ * default theme aliases. */
 body {
   @apply font-info
     text-info-detail;
 
-  background-color: rgb(var(--tone-neutral, theme('colors.tone-neutral')));
-  color: rgb(var(--tone-neutral-03, theme('colors.tone-neutral-03')));
-}
-
-:root.pref-contrast-high body {
-  color: rgb(var(--tone-neutral-01, theme('colors.tone-neutral-01')));
-}
-
-@media (prefers-contrast: more) {
-  :root.pref-contrast-system body {
-    color: rgb(var(--tone-neutral-01, theme('colors.tone-neutral-01')));
-  }
+  background-color: rgb(var(--magma-surface-default, theme('colors.surface-neutral-default')));
+  color: rgb(var(--magma-text-default, theme('colors.text-neutral-default')));
 }
 
 ::selection {
@@ -34,7 +27,10 @@ strong {
 }
 
 a {
-  color: rgb(var(--theme-default-02-primary-text, theme('colors.theme-default-02-primary-text')));
+  /* no theme() fallback: the accent roles are theme aliases with no raw twin in
+   * the palette, and `colors.theme-default-02-primary-text` never existed there
+   * either - the fallback was as dead as the custom property. */
+  color: rgb(var(--magma-accent-emphasis));
 }
 
 h1,

package/dist/tailwind3/components.css

@@ -40,7 +40,7 @@
 
   .focus-zoom--light.focus-zoom--focused,
   .focus-zoom--light:focus-visible {
-    --magma-outline-blur: 2px solid rgb(var(--tone-neutral));
+    --magma-outline-blur: 2px solid rgb(var(--tone-neutral-seed));
   }
 
   .hide-scrollbar {

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@maggioli-design-system/styles",
-  "version": "16.0.1",
+  "version": "17.0.0",
   "description": "This module contains SCSS and CSS styles used by Maggioli Design System, it also makes available a Tailwind config based on Maggioli design tokens.",
   "main": "./tailwind.config.js",
   "scripts": {
-    "build": "npm run clean && npm run copy && npm run hydrated && npm run tailwind.build",
+    "build": "npm run clean && npm run semantic && npm run corner && npm run properties && npm run editor.tokens && npm run copy && npm run hydrated && npm run tailwind.build",
     "clean": "tsx scripts/clean.ts",
+    "semantic": "tsx scripts/semantic.ts",
+    "properties": "tsx scripts/properties.ts",
+    "corner": "tsx scripts/corner.ts",
+    "editor.tokens": "tsx scripts/editor-tokens.ts",
     "hydrated": "tsx scripts/hydrated.ts",
     "copy": "tsx scripts/copy.ts",
     "tailwind.base": "postcss ./postcss/base.css -o ./dist/css/base.css",
@@ -55,14 +59,16 @@
     "@fontsource/merriweather": "5.1.0",
     "@fontsource/roboto": "5.1.0",
     "@fontsource/roboto-mono": "5.1.0",
-    "@maggioli-design-system/design-tokens": "14.1.0",
+    "@maggioli-design-system/design-tokens": "15.0.0",
     "normalize.css": "8.0.1"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "4.3.0",
     "autoprefixer": "10.4.27",
+    "handlebars": "4.7.9",
     "postcss-cli": "11.0.1",
-    "postcss": "8.5.8",
+    "postcss": "8.5.28",
     "postcss-import": "16.1.1",
-    "tailwindcss": "4.2.2"
+    "tailwindcss": "4.3.0"
   }
 }

package/tailwind.config.js

@@ -31,8 +31,8 @@ module.exports = {
   darkMode: [
     'variant',
     [
-      '@media (prefers-color-scheme: dark) { &:is(.pref-theme-system *) }',
-      '&:is(.pref-theme-dark *)',
+      '@media (prefers-color-scheme: dark) { &:is(.pref-mode-system *) }',
+      '&:is(.pref-mode-dark *)',
     ],
   ],
   corePlugins: {