@maggioli-design-system/styles 16.0.0 → 17.0.0

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

@@ -1,8 +1,8 @@
 /*
-@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:21 GMT
+Generated at Wed, 30 Sep 2026 14:38:45 GMT
 */
 
 @theme {
@@ -184,6 +184,17 @@ Generated at Mon, 08 Jun 2026 08:22: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,6 +229,12 @@ Generated at Mon, 08 Jun 2026 08:22: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);
 }
 
 @utility transition-cosmetic {

package/dist/css/theme.css

@@ -0,0 +1,51 @@
+/*
+  Theming axes (issue #574, B2) - layered on top of the semantic layer
+  (css/semantic.css). Three INDEPENDENT axes, all driven by attributes/classes
+  on <html> (cross-browser; no @container style(), which is below the
+  browserslist floor and crashes WebKit with shadow DOM):
+
+    1. mode (light|dark|system)  -> the existing global --tone-* flip; the
+       semantic tokens follow it automatically (nothing to do here).
+    2. data-theme-name           -> a named theme retints the --magma-tint-*
+       block; GENERATED in build/css/themes.css from semantic.config.ts (spec 8),
+       shipped as dist/css/themes.css - NOT defined here.
+    3. --depth (numeric 0..1)    -> shadow/elevation intensity, consumed as a
+       scalar in calc(). NOT a true|false style query.
+
+  Supersedes projects/styles/draft/theme.css.
+*/
+
+/* --------------------------------------------------------------------------
+   Axis 3: depth
+   A plain number multiplied into every elevation term. depth 1 = full
+   elevation, depth 0 collapses offset/blur/alpha to zero = perfectly flat.
+   calc()-based, so it works in every engine (Firefox/Safari included) and
+   inherits across shadow boundaries - no style query, no :host-context.
+   -------------------------------------------------------------------------- */
+
+@property --depth {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 1;
+}
+
+:root {
+  --depth: 1;
+
+  /*
+    Elevation shadows for the raised / overlay surface roles. Consume with
+    `box-shadow: var(--mds-elevation-raised)`. Colour comes from
+    --magma-backdrop-color (channel triplet) so it stays themeable.
+  */
+  --mds-elevation-raised:
+    0 calc(1px * var(--depth)) calc(2px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.06 * var(--depth))),
+    0 calc(2px * var(--depth)) calc(8px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.08 * var(--depth)));
+  --mds-elevation-overlay:
+    0 calc(4px * var(--depth)) calc(12px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.12 * var(--depth))),
+    0 calc(8px * var(--depth)) calc(24px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.16 * var(--depth)));
+}
+
+/* Flat variant of the depth axis (set --depth directly for anything between). */
+:root[data-theme-depth='flat'] {
+  --depth: 0;
+}

package/dist/css/themes.css

@@ -0,0 +1,93 @@
+/*
+  Named themes - retint the --magma-tint-* block per data-theme-name (spec 8).
+  GENERATED by scripts/semantic.ts from semantic.config.ts - do NOT edit by hand.
+  Contract + rationale: semantic.config.ts and SEMANTIC_COLOR_SPEC.md.
+*/
+
+:root[data-theme-name='cool'] {
+  --magma-tint-sunken: var(--surface-porcelain-sunken);
+  --magma-tint-muted: var(--surface-porcelain-muted);
+  --magma-tint-default: var(--surface-porcelain-default);
+  --magma-tint-raised: var(--surface-porcelain-raised);
+  --magma-tint-overlay: var(--surface-porcelain-overlay);
+  --magma-tint-border-muted: var(--border-porcelain-muted);
+  --magma-tint-border-default: var(--border-porcelain-default);
+  --magma-tint-border-strong: var(--border-porcelain-strong);
+  --magma-tint-text-default: var(--text-porcelain-default);
+  --magma-tint-text-muted: var(--text-porcelain-muted);
+  --magma-tint-text-subtle: var(--text-porcelain-subtle);
+  --magma-tint-text-disabled: var(--text-porcelain-disabled);
+  --magma-tint-scale-01: var(--tone-porcelain-01);
+  --magma-tint-scale-02: var(--tone-porcelain-02);
+  --magma-tint-scale-03: var(--tone-porcelain-03);
+  --magma-tint-scale-04: var(--tone-porcelain-04);
+  --magma-tint-scale-05: var(--tone-porcelain-05);
+  --magma-tint-scale-06: var(--tone-porcelain-06);
+  --magma-tint-scale-07: var(--tone-porcelain-07);
+  --magma-tint-scale-08: var(--tone-porcelain-08);
+  --magma-tint-scale-09: var(--tone-porcelain-09);
+  --magma-tint-scale-10: var(--tone-porcelain-10);
+}
+
+:root[data-theme-name='cool'].pref-contrast-more {
+  --magma-tint-text-muted: var(--text-porcelain-default);
+  --magma-tint-text-subtle: var(--text-porcelain-muted);
+  --magma-tint-border-muted: var(--border-porcelain-default);
+  --magma-tint-border-default: var(--border-porcelain-strong);
+  --magma-tint-default: var(--tone-porcelain-seed);
+}
+
+@media (prefers-contrast: more) {
+  :root[data-theme-name='cool'].pref-contrast-system,
+  :root[data-theme-name='cool']:not([data-magma-pref]) {
+    --magma-tint-text-muted: var(--text-porcelain-default);
+    --magma-tint-text-subtle: var(--text-porcelain-muted);
+    --magma-tint-border-muted: var(--border-porcelain-default);
+    --magma-tint-border-default: var(--border-porcelain-strong);
+    --magma-tint-default: var(--tone-porcelain-seed);
+  }
+}
+
+:root[data-theme-name='warm'] {
+  --magma-tint-sunken: var(--surface-bisque-sunken);
+  --magma-tint-muted: var(--surface-bisque-muted);
+  --magma-tint-default: var(--surface-bisque-default);
+  --magma-tint-raised: var(--surface-bisque-raised);
+  --magma-tint-overlay: var(--surface-bisque-overlay);
+  --magma-tint-border-muted: var(--border-bisque-muted);
+  --magma-tint-border-default: var(--border-bisque-default);
+  --magma-tint-border-strong: var(--border-bisque-strong);
+  --magma-tint-text-default: var(--text-bisque-default);
+  --magma-tint-text-muted: var(--text-bisque-muted);
+  --magma-tint-text-subtle: var(--text-bisque-subtle);
+  --magma-tint-text-disabled: var(--text-bisque-disabled);
+  --magma-tint-scale-01: var(--tone-bisque-01);
+  --magma-tint-scale-02: var(--tone-bisque-02);
+  --magma-tint-scale-03: var(--tone-bisque-03);
+  --magma-tint-scale-04: var(--tone-bisque-04);
+  --magma-tint-scale-05: var(--tone-bisque-05);
+  --magma-tint-scale-06: var(--tone-bisque-06);
+  --magma-tint-scale-07: var(--tone-bisque-07);
+  --magma-tint-scale-08: var(--tone-bisque-08);
+  --magma-tint-scale-09: var(--tone-bisque-09);
+  --magma-tint-scale-10: var(--tone-bisque-10);
+}
+
+:root[data-theme-name='warm'].pref-contrast-more {
+  --magma-tint-text-muted: var(--text-bisque-default);
+  --magma-tint-text-subtle: var(--text-bisque-muted);
+  --magma-tint-border-muted: var(--border-bisque-default);
+  --magma-tint-border-default: var(--border-bisque-strong);
+  --magma-tint-default: var(--tone-bisque-seed);
+}
+
+@media (prefers-contrast: more) {
+  :root[data-theme-name='warm'].pref-contrast-system,
+  :root[data-theme-name='warm']:not([data-magma-pref]) {
+    --magma-tint-text-muted: var(--text-bisque-default);
+    --magma-tint-text-subtle: var(--text-bisque-muted);
+    --magma-tint-border-muted: var(--border-bisque-default);
+    --magma-tint-border-default: var(--border-bisque-strong);
+    --magma-tint-default: var(--tone-bisque-seed);
+  }
+}