@maggioli-design-system/styles 16.0.0 → 17.0.0

package/dist/css/hydrated.css

@@ -70,9 +70,9 @@ mds-pref-consumption:not(:is([hydrated], .hydrated)),
 mds-pref-contrast:not(:is([hydrated], .hydrated)),
 mds-pref-language:not(:is([hydrated], .hydrated)),
 mds-pref-language-item:not(:is([hydrated], .hydrated)),
+mds-pref-mode:not(:is([hydrated], .hydrated)),
 mds-pref-theme:not(:is([hydrated], .hydrated)),
-mds-pref-theme-variant:not(:is([hydrated], .hydrated)),
-mds-pref-theme-variant-item:not(:is([hydrated], .hydrated)),
+mds-pref-theme-item:not(:is([hydrated], .hydrated)),
 mds-price-table:not(:is([hydrated], .hydrated)),
 mds-price-table-features:not(:is([hydrated], .hydrated)),
 mds-price-table-features-cell:not(:is([hydrated], .hydrated)),

package/dist/css/reset.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 reset {
   :root {
@@ -36,9 +36,7 @@
   }
   input,
   textarea {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
+    appearance: none;
     font-family: inherit;
   }
   a {

package/dist/css/semantic.css

@@ -0,0 +1,253 @@
+/*
+  Semantic color layer (--magma-*) - the contract components consume.
+  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 {
+  /* Active tint = the theme (spec 8): a named theme retints surface + border + text by repointing --magma-tint-*. */
+  --magma-tint-sunken: var(--surface-neutral-sunken);
+  --magma-tint-muted: var(--surface-neutral-muted);
+  --magma-tint-default: var(--surface-neutral-default);
+  --magma-tint-raised: var(--surface-neutral-raised);
+  --magma-tint-overlay: var(--surface-neutral-overlay);
+  --magma-tint-border-muted: var(--border-neutral-muted);
+  --magma-tint-border-default: var(--border-neutral-default);
+  --magma-tint-border-strong: var(--border-neutral-strong);
+  --magma-tint-text-default: var(--text-neutral-default);
+  --magma-tint-text-muted: var(--text-neutral-muted);
+  --magma-tint-text-subtle: var(--text-neutral-subtle);
+  --magma-tint-text-disabled: var(--text-neutral-disabled);
+  --magma-tint-text-on-emphasis: var(--tone-neutral-seed);
+  --magma-tint-scale-01: var(--tone-neutral-01);
+  --magma-tint-scale-02: var(--tone-neutral-02);
+  --magma-tint-scale-03: var(--tone-neutral-03);
+  --magma-tint-scale-04: var(--tone-neutral-04);
+  --magma-tint-scale-05: var(--tone-neutral-05);
+  --magma-tint-scale-06: var(--tone-neutral-06);
+  --magma-tint-scale-07: var(--tone-neutral-07);
+  --magma-tint-scale-08: var(--tone-neutral-08);
+  --magma-tint-scale-09: var(--tone-neutral-09);
+  --magma-tint-scale-10: var(--tone-neutral-10);
+
+  /* Surfaces - elevation + same-plane prominence (spec 6.1) */
+  --magma-surface-sunken: var(--magma-tint-sunken);
+  --magma-surface-muted: var(--magma-tint-muted);
+  --magma-surface-default: var(--magma-tint-default);
+  --magma-surface-raised: var(--magma-tint-raised);
+  --magma-surface-overlay: var(--magma-tint-overlay);
+
+  /* Wash - neutral pills, by how marked they are (spec 6.1b); follows the theme via --magma-tint-scale-* */
+  --magma-wash-soft: var(--magma-tint-scale-10);
+  --magma-wash-base: var(--magma-tint-scale-09);
+  --magma-wash-strong: var(--magma-tint-scale-08);
+
+  /* Shadow ink - the colour of a projected shadow (spec 6.1c) */
+  --magma-shadow-ink: var(--magma-tint-scale-01);
+
+  /* Text - prominence, by APCA target (spec 6.2 / 9, A7); retints via --magma-tint-text-* */
+  --magma-text-default: var(--magma-tint-text-default);
+  --magma-text-muted: var(--magma-tint-text-muted);
+  --magma-text-subtle: var(--magma-tint-text-subtle);
+  --magma-text-disabled: var(--magma-tint-text-disabled);
+  --magma-text-on-emphasis: var(--magma-tint-text-on-emphasis);
+
+  /* Border - prominence (spec 6.3); focus follows the accent it is named after */
+  --magma-border-muted: var(--magma-tint-border-muted);
+  --magma-border-default: var(--magma-tint-border-default);
+  --magma-border-strong: var(--magma-tint-border-strong);
+  --magma-border-focus: var(--magma-accent-emphasis);
+
+  /* info (status-info) */
+  --magma-info-wash-soft: var(--status-info-10);
+  --magma-info-wash-base: var(--status-info-09);
+  --magma-info-wash-strong: var(--status-info-08);
+  --magma-info-text-default: var(--text-info-default);
+  --magma-info-text-muted: var(--text-info-muted);
+  --magma-info-text-subtle: var(--text-info-subtle);
+  --magma-info-text-disabled: var(--text-info-disabled);
+  --magma-info-border-muted: var(--border-info-muted);
+  --magma-info-border-default: var(--border-info-default);
+  --magma-info-border-strong: var(--border-info-strong);
+  --magma-info-emphasis: var(--status-info-04);
+  --magma-info-emphasis-hover: var(--status-info-03);
+  --magma-info-emphasis-active: var(--status-info-02);
+  --magma-info-on-emphasis: var(--magma-tint-text-on-emphasis);
+  /* shortcuts: the roles above at their default prominence */
+  --magma-info-surface: var(--magma-info-wash-base);
+  --magma-info-fg: var(--magma-info-text-default);
+  --magma-info-border: var(--magma-info-border-default);
+
+  /* success (status-success) */
+  --magma-success-wash-soft: var(--status-success-10);
+  --magma-success-wash-base: var(--status-success-09);
+  --magma-success-wash-strong: var(--status-success-08);
+  --magma-success-text-default: var(--text-success-default);
+  --magma-success-text-muted: var(--text-success-muted);
+  --magma-success-text-subtle: var(--text-success-subtle);
+  --magma-success-text-disabled: var(--text-success-disabled);
+  --magma-success-border-muted: var(--border-success-muted);
+  --magma-success-border-default: var(--border-success-default);
+  --magma-success-border-strong: var(--border-success-strong);
+  --magma-success-emphasis: var(--status-success-04);
+  --magma-success-emphasis-hover: var(--status-success-03);
+  --magma-success-emphasis-active: var(--status-success-02);
+  --magma-success-on-emphasis: var(--magma-tint-text-on-emphasis);
+  /* shortcuts: the roles above at their default prominence */
+  --magma-success-surface: var(--magma-success-wash-base);
+  --magma-success-fg: var(--magma-success-text-default);
+  --magma-success-border: var(--magma-success-border-default);
+
+  /* warning (status-warning) */
+  --magma-warning-wash-soft: var(--status-warning-10);
+  --magma-warning-wash-base: var(--status-warning-09);
+  --magma-warning-wash-strong: var(--status-warning-08);
+  --magma-warning-text-default: var(--text-warning-default);
+  --magma-warning-text-muted: var(--text-warning-muted);
+  --magma-warning-text-subtle: var(--text-warning-subtle);
+  --magma-warning-text-disabled: var(--text-warning-disabled);
+  --magma-warning-border-muted: var(--border-warning-muted);
+  --magma-warning-border-default: var(--border-warning-default);
+  --magma-warning-border-strong: var(--border-warning-strong);
+  --magma-warning-emphasis: var(--status-warning-04);
+  --magma-warning-emphasis-hover: var(--status-warning-03);
+  --magma-warning-emphasis-active: var(--status-warning-02);
+  --magma-warning-on-emphasis: var(--magma-tint-text-on-emphasis);
+  /* shortcuts: the roles above at their default prominence */
+  --magma-warning-surface: var(--magma-warning-wash-base);
+  --magma-warning-fg: var(--magma-warning-text-default);
+  --magma-warning-border: var(--magma-warning-border-default);
+
+  /* danger (status-error) */
+  --magma-danger-wash-soft: var(--status-error-10);
+  --magma-danger-wash-base: var(--status-error-09);
+  --magma-danger-wash-strong: var(--status-error-08);
+  --magma-danger-text-default: var(--text-error-default);
+  --magma-danger-text-muted: var(--text-error-muted);
+  --magma-danger-text-subtle: var(--text-error-subtle);
+  --magma-danger-text-disabled: var(--text-error-disabled);
+  --magma-danger-border-muted: var(--border-error-muted);
+  --magma-danger-border-default: var(--border-error-default);
+  --magma-danger-border-strong: var(--border-error-strong);
+  --magma-danger-emphasis: var(--status-error-04);
+  --magma-danger-emphasis-hover: var(--status-error-03);
+  --magma-danger-emphasis-active: var(--status-error-02);
+  --magma-danger-on-emphasis: var(--magma-tint-text-on-emphasis);
+  /* shortcuts: the roles above at their default prominence */
+  --magma-danger-surface: var(--magma-danger-wash-base);
+  --magma-danger-fg: var(--magma-danger-text-default);
+  --magma-danger-border: var(--magma-danger-border-default);
+
+  /* neutral (tone-neutral) */
+  --magma-neutral-fg: var(--magma-tint-scale-03);
+  --magma-neutral-border: var(--magma-tint-scale-06);
+  --magma-surface-inverse: var(--magma-tint-scale-02);
+  --magma-surface-inverse-muted: var(--magma-tint-scale-03);
+  --magma-on-inverse: var(--magma-tint-text-on-emphasis);
+  /* deprecated: renamed to --magma-surface-inverse / --magma-on-inverse */
+  --magma-neutral-emphasis: var(--magma-surface-inverse);
+  --magma-neutral-on-emphasis: var(--magma-on-inverse);
+
+  /* accent accent (variant-primary) */
+  --magma-tint-accent-surface: var(--variant-primary-09);
+  --magma-tint-accent-fg: var(--variant-primary-03);
+  --magma-tint-accent-border: var(--variant-primary-06);
+  --magma-tint-accent-emphasis: var(--variant-primary-04);
+  --magma-tint-accent-emphasis-hover: var(--variant-primary-03);
+  --magma-tint-accent-emphasis-active: var(--variant-primary-02);
+  --magma-tint-accent-surface-hover: var(--variant-primary-08);
+  --magma-tint-accent-surface-subtle: var(--variant-primary-10);
+  --magma-accent-surface: var(--magma-tint-accent-surface);
+  --magma-accent-fg: var(--magma-tint-accent-fg);
+  --magma-accent-border: var(--magma-tint-accent-border);
+  --magma-accent-emphasis: var(--magma-tint-accent-emphasis);
+  --magma-accent-emphasis-hover: var(--magma-tint-accent-emphasis-hover);
+  --magma-accent-emphasis-active: var(--magma-tint-accent-emphasis-active);
+  --magma-accent-surface-hover: var(--magma-tint-accent-surface-hover);
+  --magma-accent-surface-subtle: var(--magma-tint-accent-surface-subtle);
+  --magma-accent-on-emphasis: var(--magma-tint-text-on-emphasis);
+
+  /* accent ai (variant-ai) */
+  --magma-tint-accent-ai-surface: var(--variant-ai-09);
+  --magma-tint-accent-ai-fg: var(--variant-ai-03);
+  --magma-tint-accent-ai-border: var(--variant-ai-06);
+  --magma-tint-accent-ai-emphasis: var(--variant-ai-04);
+  --magma-tint-accent-ai-emphasis-hover: var(--variant-ai-03);
+  --magma-tint-accent-ai-emphasis-active: var(--variant-ai-02);
+  --magma-tint-accent-ai-surface-hover: var(--variant-ai-08);
+  --magma-tint-accent-ai-surface-subtle: var(--variant-ai-10);
+  --magma-accent-ai-surface: var(--magma-tint-accent-ai-surface);
+  --magma-accent-ai-fg: var(--magma-tint-accent-ai-fg);
+  --magma-accent-ai-border: var(--magma-tint-accent-ai-border);
+  --magma-accent-ai-emphasis: var(--magma-tint-accent-ai-emphasis);
+  --magma-accent-ai-emphasis-hover: var(--magma-tint-accent-ai-emphasis-hover);
+  --magma-accent-ai-emphasis-active: var(--magma-tint-accent-ai-emphasis-active);
+  --magma-accent-ai-surface-hover: var(--magma-tint-accent-ai-surface-hover);
+  --magma-accent-ai-surface-subtle: var(--magma-tint-accent-ai-surface-subtle);
+  --magma-accent-ai-on-emphasis: var(--magma-tint-text-on-emphasis);
+}
+
+/* Dark ink: the canvas, not pure black (spec 6.5) */
+:root:not(.pref-theme-scheme-light).pref-mode-dark,
+:root.pref-theme-scheme-dark {
+  --magma-tint-text-on-emphasis: var(--magma-tint-default);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.pref-theme-scheme-light).pref-mode-system,
+  :root:not([data-magma-pref]) {
+    --magma-tint-text-on-emphasis: var(--magma-tint-default);
+  }
+}
+
+/* Contrast (spec 9.3): pref-contrast-more promotes text + border to stronger same-family steps (tint block and every hue) and the page surface to the paper of the mode. */
+:root.pref-contrast-more {
+  --magma-tint-text-muted: var(--text-neutral-default);
+  --magma-tint-text-subtle: var(--text-neutral-muted);
+  --magma-tint-border-muted: var(--border-neutral-default);
+  --magma-tint-border-default: var(--border-neutral-strong);
+  --magma-tint-default: var(--tone-neutral-seed);
+  --magma-info-text-muted: var(--text-info-default);
+  --magma-info-text-subtle: var(--text-info-muted);
+  --magma-info-border-muted: var(--border-info-default);
+  --magma-info-border-default: var(--border-info-strong);
+  --magma-success-text-muted: var(--text-success-default);
+  --magma-success-text-subtle: var(--text-success-muted);
+  --magma-success-border-muted: var(--border-success-default);
+  --magma-success-border-default: var(--border-success-strong);
+  --magma-warning-text-muted: var(--text-warning-default);
+  --magma-warning-text-subtle: var(--text-warning-muted);
+  --magma-warning-border-muted: var(--border-warning-default);
+  --magma-warning-border-default: var(--border-warning-strong);
+  --magma-danger-text-muted: var(--text-error-default);
+  --magma-danger-text-subtle: var(--text-error-muted);
+  --magma-danger-border-muted: var(--border-error-default);
+  --magma-danger-border-default: var(--border-error-strong);
+}
+
+@media (prefers-contrast: more) {
+  :root.pref-contrast-system,
+  :root:not([data-magma-pref]) {
+    --magma-tint-text-muted: var(--text-neutral-default);
+    --magma-tint-text-subtle: var(--text-neutral-muted);
+    --magma-tint-border-muted: var(--border-neutral-default);
+    --magma-tint-border-default: var(--border-neutral-strong);
+    --magma-tint-default: var(--tone-neutral-seed);
+    --magma-info-text-muted: var(--text-info-default);
+    --magma-info-text-subtle: var(--text-info-muted);
+    --magma-info-border-muted: var(--border-info-default);
+    --magma-info-border-default: var(--border-info-strong);
+    --magma-success-text-muted: var(--text-success-default);
+    --magma-success-text-subtle: var(--text-success-muted);
+    --magma-success-border-muted: var(--border-success-default);
+    --magma-success-border-default: var(--border-success-strong);
+    --magma-warning-text-muted: var(--text-warning-default);
+    --magma-warning-text-subtle: var(--text-warning-muted);
+    --magma-warning-border-muted: var(--border-warning-default);
+    --magma-warning-border-default: var(--border-warning-strong);
+    --magma-danger-text-muted: var(--text-error-default);
+    --magma-danger-text-subtle: var(--text-error-muted);
+    --magma-danger-border-muted: var(--border-error-default);
+    --magma-danger-border-default: var(--border-error-strong);
+  }
+}