@maggioli-design-system/styles 16.0.0 → 17.0.0

package/dist/css/utility-typography.css

@@ -0,0 +1,254 @@
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer utilities {
+  .focus-zoom {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
+    transition-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
+    outline: var(--magma-outline-blur);
+    outline-offset: var(--magma-outline-blur-offset);
+    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
+  }
+  .focus-zoom--focused,
+  .focus-zoom:focus-visible {
+    --magma-outline-blur-offset: var(--magma-outline-focus-offset);
+    --magma-outline-blur: var(--magma-outline-focus);
+  }
+  .focus-zoom--light.focus-zoom--focused,
+  .focus-zoom--light:focus-visible {
+    --magma-outline-blur: 2px solid rgb(var(--magma-text-on-emphasis));
+  }
+}
+.typography-title-h1 {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-h1, 3rem);
+  line-height: var(--tw-leading, var(--text-size-title-h1--line-height, 3rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-h1--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-title-h1--font-weight, 900));
+  --tw-font-weight: var(--font-weight-black, 900);
+  font-weight: var(--font-weight-black, 900);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-h2 {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-h2, 2.25rem);
+  line-height: var(--tw-leading, var(--text-size-title-h2--line-height, 2.5rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-h2--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-title-h2--font-weight, 900));
+  --tw-font-weight: var(--font-weight-black, 900);
+  font-weight: var(--font-weight-black, 900);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-h3 {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-h3, 1.875rem);
+  line-height: var(--tw-leading, var(--text-size-title-h3--line-height, 2.25rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-h3--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-title-h3--font-weight, 900));
+  --tw-font-weight: var(--font-weight-black, 900);
+  font-weight: var(--font-weight-black, 900);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-h4 {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-h4, 1.5rem);
+  line-height: var(--tw-leading, var(--text-size-title-h4--line-height, 2rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-h4--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-title-h4--font-weight, 900));
+  --tw-font-weight: var(--font-weight-black, 900);
+  font-weight: var(--font-weight-black, 900);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-h5 {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-h5, 1.25rem);
+  line-height: var(--tw-leading, var(--text-size-title-h5--line-height, 1.75rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-h5--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-title-h5--font-weight, 900));
+  --tw-font-weight: var(--font-weight-black, 900);
+  font-weight: var(--font-weight-black, 900);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-h6 {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-h6, 1rem);
+  line-height: var(--tw-leading, var(--text-size-title-h6--line-height, 1.5rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-h6--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-title-h6--font-weight, 700));
+  --tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-action {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-action, 0.875rem);
+  line-height: var(--tw-leading, var(--text-size-title-action--line-height, 1.5rem));
+  font-weight: var(--tw-font-weight, var(--text-size-title-action--font-weight, 500));
+  --tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-info-paragraph {
+  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-paragraph, 1.25rem);
+  line-height: var(--tw-leading, var(--text-size-info-paragraph--line-height, 2rem));
+  font-weight: var(--tw-font-weight, var(--text-size-info-paragraph--font-weight, 400));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-info-detail {
+  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;
+}
+.typography-info-caption {
+  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-caption, 0.875rem);
+  line-height: var(--tw-leading, var(--text-size-info-caption--line-height, 1.25rem));
+  font-weight: var(--tw-font-weight, var(--text-size-info-caption--font-weight, 400));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-info-label {
+  min-height: auto;
+  text-box: trim-both cap alphabetic;
+  font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-info-label, 0.75rem);
+  line-height: var(--tw-leading, var(--text-size-info-label--line-height, 1rem));
+  font-weight: var(--tw-font-weight, var(--text-size-info-label--font-weight, 700));
+  --tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  text-transform: uppercase;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-info-option {
+  min-height: auto;
+  text-box: trim-both cap alphabetic;
+  font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-info-option, 0.625rem);
+  line-height: var(--tw-leading, var(--text-size-info-option--line-height, 0.625rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-info-option--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-info-option--font-weight, 700));
+  --tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  text-transform: uppercase;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-info-tip {
+  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-tip, 0.75rem);
+  line-height: var(--tw-leading, var(--text-size-info-tip--line-height, 1rem));
+  font-weight: var(--tw-font-weight, var(--text-size-info-tip--font-weight, 400));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-read-paragraph {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
+  font-size: var(--text-size-read-paragraph, 1.25rem);
+  line-height: var(--tw-leading, var(--text-size-read-paragraph--line-height, 2rem));
+  font-weight: var(--tw-font-weight, var(--text-size-read-paragraph--font-weight, 300));
+  --tw-font-weight: var(--font-weight-light, 300);
+  font-weight: var(--font-weight-light, 300);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-read-detail {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
+  font-size: var(--text-size-read-detail, 1rem);
+  line-height: var(--tw-leading, var(--text-size-read-detail--line-height, 1.5rem));
+  font-weight: var(--tw-font-weight, var(--text-size-read-detail--font-weight, 300));
+  --tw-font-weight: var(--font-weight-light, 300);
+  font-weight: var(--font-weight-light, 300);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-read-caption {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
+  font-size: var(--text-size-read-caption, 0.875rem);
+  line-height: var(--tw-leading, var(--text-size-read-caption--line-height, 1.25rem));
+  font-weight: var(--tw-font-weight, var(--text-size-read-caption--font-weight, 400));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-code-snippet {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
+  font-size: var(--text-size-code-snippet, 1rem);
+  line-height: var(--tw-leading, var(--text-size-code-snippet--line-height, 1.5rem));
+  font-weight: var(--tw-font-weight, var(--text-size-code-snippet--font-weight, 400));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-code-hack {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
+  font-size: var(--text-size-code-hack, 0.875rem);
+  line-height: var(--tw-leading, var(--text-size-code-hack--line-height, 1.25rem));
+  font-weight: var(--tw-font-weight, var(--text-size-code-hack--font-weight, 400));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-font-weight: initial;
+    }
+  }
+}

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,18 +1,22 @@
 {
   "name": "@maggioli-design-system/styles",
-  "version": "16.0.0",
+  "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",
     "tailwind.reset": "postcss ./postcss/reset.css -o ./dist/css/reset.css",
     "tailwind.layer": "postcss ./postcss/layer.css -o ./dist/css/layer.css",
     "tailwind.build": "npm run tailwind.base && npm run tailwind.reset && npm run tailwind.layer && npm run tailwind.typography",
-    "tailwind.typography": "postcss ./postcss/typography.css -o ./dist/css/typography.css",
+    "tailwind.typography": "postcss ./postcss/typography.css -o ./dist/css/utility-typography.css",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
@@ -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.0.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: {