@maggioli-design-system/styles 17.1.0 → 17.2.0

package/dist/css/tokens.editor.css

@@ -650,99 +650,99 @@
     --magma-tint-scale-08: var(--tone-neutral-08);
     --magma-tint-scale-09: var(--tone-neutral-09);
     --magma-tint-scale-10: var(--tone-neutral-10);
-    --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);
-    --magma-wash-soft: var(--magma-tint-scale-10);
-    --magma-wash-base: var(--magma-tint-scale-09);
-    --magma-wash-strong: var(--magma-tint-scale-08);
-    --magma-shadow-ink: var(--magma-tint-scale-01);
-    --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);
-    --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);
-    --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);
-    --magma-info-surface: var(--magma-info-wash-base);
-    --magma-info-fg: var(--magma-info-text-default);
-    --magma-info-border: var(--magma-info-border-default);
-    --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);
-    --magma-success-surface: var(--magma-success-wash-base);
-    --magma-success-fg: var(--magma-success-text-default);
-    --magma-success-border: var(--magma-success-border-default);
-    --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);
-    --magma-warning-surface: var(--magma-warning-wash-base);
-    --magma-warning-fg: var(--magma-warning-text-default);
-    --magma-warning-border: var(--magma-warning-border-default);
-    --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);
-    --magma-danger-surface: var(--magma-danger-wash-base);
-    --magma-danger-fg: var(--magma-danger-text-default);
-    --magma-danger-border: var(--magma-danger-border-default);
-    --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);
-    --magma-neutral-emphasis: var(--magma-surface-inverse);
-    --magma-neutral-on-emphasis: var(--magma-on-inverse);
+    --magma-surface-sunken: var(--magma-tint-sunken); /* Below the page: wells, insets, code blocks, tracks. */
+    --magma-surface-muted: var(--magma-tint-muted); /* Same-plane grouping on the page: zebra rows, a subtle section. */
+    --magma-surface-default: var(--magma-tint-default); /* The page canvas, the background of the body. */
+    --magma-surface-raised: var(--magma-tint-raised); /* Above the page: cards, panels, sticky headers. */
+    --magma-surface-overlay: var(--magma-tint-overlay); /* Floating above everything: modal, dropdown, popover, sheet. */
+    --magma-wash-soft: var(--magma-tint-scale-10); /* A neutral pill or chip, the least marked. */
+    --magma-wash-base: var(--magma-tint-scale-09); /* A neutral pill or chip, at its default prominence. */
+    --magma-wash-strong: var(--magma-tint-scale-08); /* A neutral pill or chip, the most marked. */
+    --magma-shadow-ink: var(--magma-tint-scale-01); /* The colour of a projected shadow, to compose with your own geometry and alpha. */
+    --magma-text-default: var(--magma-tint-text-default); /* Body text, titles and primary data. */
+    --magma-text-muted: var(--magma-tint-text-muted); /* Secondary text that is still essential, such as an address or a phone number. */
+    --magma-text-subtle: var(--magma-tint-text-subtle); /* Non-essential text only: captions, units, hints. */
+    --magma-text-disabled: var(--magma-tint-text-disabled); /* The labels of disabled controls. */
+    --magma-text-on-emphasis: var(--magma-tint-text-on-emphasis); /* Text and icons on a solid fill. */
+    --magma-border-muted: var(--magma-tint-border-muted); /* Decorative borders: dividers, the grid of a table. */
+    --magma-border-default: var(--magma-tint-border-default); /* Functional outlines: inputs, cards. */
+    --magma-border-strong: var(--magma-tint-border-strong); /* A border that conveys a state, such as selected. */
+    --magma-border-focus: var(--magma-accent-emphasis); /* Focus indication; follows the accent. */
+    --magma-info-wash-soft: var(--status-info-10); /* The info background, the least marked. */
+    --magma-info-wash-base: var(--status-info-09); /* The info background, at its default prominence. */
+    --magma-info-wash-strong: var(--status-info-08); /* The info background, the most marked: icons only, no essential text. */
+    --magma-info-text-default: var(--text-info-default); /* Info text on the info background. */
+    --magma-info-text-muted: var(--text-info-muted); /* Secondary info text on the info background. */
+    --magma-info-text-subtle: var(--text-info-subtle); /* Non-essential info text on the info background. */
+    --magma-info-text-disabled: var(--text-info-disabled); /* Disabled info text on the info background. */
+    --magma-info-border-muted: var(--border-info-muted); /* The decorative info border. */
+    --magma-info-border-default: var(--border-info-default); /* The functional info border. */
+    --magma-info-border-strong: var(--border-info-strong); /* The info border that conveys a state. */
+    --magma-info-emphasis: var(--status-info-04); /* The solid info fill: a solid badge, a button. */
+    --magma-info-emphasis-hover: var(--status-info-03); /* The solid info fill, hovered. */
+    --magma-info-emphasis-active: var(--status-info-02); /* The solid info fill, pressed. */
+    --magma-info-on-emphasis: var(--magma-tint-text-on-emphasis); /* Text and icons on the solid info fill. */
+    --magma-info-surface: var(--magma-info-wash-base); /* Shortcut for the info background at its default prominence (wash-base). */
+    --magma-info-fg: var(--magma-info-text-default); /* Shortcut for the default info text (text-default). */
+    --magma-info-border: var(--magma-info-border-default); /* Shortcut for the functional info border (border-default). */
+    --magma-success-wash-soft: var(--status-success-10); /* The success background, the least marked. */
+    --magma-success-wash-base: var(--status-success-09); /* The success background, at its default prominence. */
+    --magma-success-wash-strong: var(--status-success-08); /* The success background, the most marked: icons only, no essential text. */
+    --magma-success-text-default: var(--text-success-default); /* Success text on the success background. */
+    --magma-success-text-muted: var(--text-success-muted); /* Secondary success text on the success background. */
+    --magma-success-text-subtle: var(--text-success-subtle); /* Non-essential success text on the success background. */
+    --magma-success-text-disabled: var(--text-success-disabled); /* Disabled success text on the success background. */
+    --magma-success-border-muted: var(--border-success-muted); /* The decorative success border. */
+    --magma-success-border-default: var(--border-success-default); /* The functional success border. */
+    --magma-success-border-strong: var(--border-success-strong); /* The success border that conveys a state. */
+    --magma-success-emphasis: var(--status-success-04); /* The solid success fill: a solid badge, a button. */
+    --magma-success-emphasis-hover: var(--status-success-03); /* The solid success fill, hovered. */
+    --magma-success-emphasis-active: var(--status-success-02); /* The solid success fill, pressed. */
+    --magma-success-on-emphasis: var(--magma-tint-text-on-emphasis); /* Text and icons on the solid success fill. */
+    --magma-success-surface: var(--magma-success-wash-base); /* Shortcut for the success background at its default prominence (wash-base). */
+    --magma-success-fg: var(--magma-success-text-default); /* Shortcut for the default success text (text-default). */
+    --magma-success-border: var(--magma-success-border-default); /* Shortcut for the functional success border (border-default). */
+    --magma-warning-wash-soft: var(--status-warning-10); /* The warning background, the least marked. */
+    --magma-warning-wash-base: var(--status-warning-09); /* The warning background, at its default prominence. */
+    --magma-warning-wash-strong: var(--status-warning-08); /* The warning background, the most marked: icons only, no essential text. */
+    --magma-warning-text-default: var(--text-warning-default); /* Warning text on the warning background. */
+    --magma-warning-text-muted: var(--text-warning-muted); /* Secondary warning text on the warning background. */
+    --magma-warning-text-subtle: var(--text-warning-subtle); /* Non-essential warning text on the warning background. */
+    --magma-warning-text-disabled: var(--text-warning-disabled); /* Disabled warning text on the warning background. */
+    --magma-warning-border-muted: var(--border-warning-muted); /* The decorative warning border. */
+    --magma-warning-border-default: var(--border-warning-default); /* The functional warning border. */
+    --magma-warning-border-strong: var(--border-warning-strong); /* The warning border that conveys a state. */
+    --magma-warning-emphasis: var(--status-warning-04); /* The solid warning fill: a solid badge, a button. */
+    --magma-warning-emphasis-hover: var(--status-warning-03); /* The solid warning fill, hovered. */
+    --magma-warning-emphasis-active: var(--status-warning-02); /* The solid warning fill, pressed. */
+    --magma-warning-on-emphasis: var(--magma-tint-text-on-emphasis); /* Text and icons on the solid warning fill. */
+    --magma-warning-surface: var(--magma-warning-wash-base); /* Shortcut for the warning background at its default prominence (wash-base). */
+    --magma-warning-fg: var(--magma-warning-text-default); /* Shortcut for the default warning text (text-default). */
+    --magma-warning-border: var(--magma-warning-border-default); /* Shortcut for the functional warning border (border-default). */
+    --magma-danger-wash-soft: var(--status-error-10); /* The danger background, the least marked. */
+    --magma-danger-wash-base: var(--status-error-09); /* The danger background, at its default prominence. */
+    --magma-danger-wash-strong: var(--status-error-08); /* The danger background, the most marked: icons only, no essential text. */
+    --magma-danger-text-default: var(--text-error-default); /* Danger text on the danger background. */
+    --magma-danger-text-muted: var(--text-error-muted); /* Secondary danger text on the danger background. */
+    --magma-danger-text-subtle: var(--text-error-subtle); /* Non-essential danger text on the danger background. */
+    --magma-danger-text-disabled: var(--text-error-disabled); /* Disabled danger text on the danger background. */
+    --magma-danger-border-muted: var(--border-error-muted); /* The decorative danger border. */
+    --magma-danger-border-default: var(--border-error-default); /* The functional danger border. */
+    --magma-danger-border-strong: var(--border-error-strong); /* The danger border that conveys a state. */
+    --magma-danger-emphasis: var(--status-error-04); /* The solid danger fill: a solid badge, a button. */
+    --magma-danger-emphasis-hover: var(--status-error-03); /* The solid danger fill, hovered. */
+    --magma-danger-emphasis-active: var(--status-error-02); /* The solid danger fill, pressed. */
+    --magma-danger-on-emphasis: var(--magma-tint-text-on-emphasis); /* Text and icons on the solid danger fill. */
+    --magma-danger-surface: var(--magma-danger-wash-base); /* Shortcut for the danger background at its default prominence (wash-base). */
+    --magma-danger-fg: var(--magma-danger-text-default); /* Shortcut for the default danger text (text-default). */
+    --magma-danger-border: var(--magma-danger-border-default); /* Shortcut for the functional danger border (border-default). */
+    --magma-neutral-fg: var(--magma-tint-scale-03); /* Neutral text and icons on a coloured context. */
+    --magma-neutral-border: var(--magma-tint-scale-06); /* A neutral border on a coloured context. */
+    --magma-surface-inverse: var(--magma-tint-scale-02); /* A chip that flips with the mode: dark on a light page, light on a dark one. */
+    --magma-surface-inverse-muted: var(--magma-tint-scale-03); /* The inverse chip, one step quieter. */
+    --magma-on-inverse: var(--magma-tint-text-on-emphasis); /* Text and icons on either inverse surface. */
+    --magma-neutral-emphasis: var(--magma-surface-inverse); /* Deprecated: the inverse surface under its old name. */
+    --magma-neutral-on-emphasis: var(--magma-on-inverse); /* Deprecated: the ink on the inverse surface under its old name. */
     --magma-tint-accent-surface: var(--variant-primary-09);
     --magma-tint-accent-fg: var(--variant-primary-03);
     --magma-tint-accent-border: var(--variant-primary-06);
@@ -751,15 +751,15 @@
     --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);
+    --magma-accent-surface: var(--magma-tint-accent-surface); /* A background tinted with the brand accent: a selected row or chip. */
+    --magma-accent-fg: var(--magma-tint-accent-fg); /* Text or an icon in the brand accent on a neutral surface, such as a link. */
+    --magma-accent-border: var(--magma-tint-accent-border); /* A border tinted with the brand accent. */
+    --magma-accent-emphasis: var(--magma-tint-accent-emphasis); /* The solid fill of the brand accent: the primary action. */
+    --magma-accent-emphasis-hover: var(--magma-tint-accent-emphasis-hover); /* The solid fill of the brand accent, hovered. */
+    --magma-accent-emphasis-active: var(--magma-tint-accent-emphasis-active); /* The solid fill of the brand accent, pressed. */
+    --magma-accent-surface-hover: var(--magma-tint-accent-surface-hover); /* A background tinted with the brand accent, hovered. */
+    --magma-accent-surface-subtle: var(--magma-tint-accent-surface-subtle); /* A background tinted with the brand accent, lighter. */
+    --magma-accent-on-emphasis: var(--magma-tint-text-on-emphasis); /* Text and icons on the solid fill of the brand accent. */
     --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);
@@ -768,15 +768,15 @@
     --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);
+    --magma-accent-ai-surface: var(--magma-tint-accent-ai-surface); /* A background tinted with the AI accent: a selected row or chip. */
+    --magma-accent-ai-fg: var(--magma-tint-accent-ai-fg); /* Text or an icon in the AI accent on a neutral surface, such as a link. */
+    --magma-accent-ai-border: var(--magma-tint-accent-ai-border); /* A border tinted with the AI accent. */
+    --magma-accent-ai-emphasis: var(--magma-tint-accent-ai-emphasis); /* The solid fill of the AI accent: the primary action. */
+    --magma-accent-ai-emphasis-hover: var(--magma-tint-accent-ai-emphasis-hover); /* The solid fill of the AI accent, hovered. */
+    --magma-accent-ai-emphasis-active: var(--magma-tint-accent-ai-emphasis-active); /* The solid fill of the AI accent, pressed. */
+    --magma-accent-ai-surface-hover: var(--magma-tint-accent-ai-surface-hover); /* A background tinted with the AI accent, hovered. */
+    --magma-accent-ai-surface-subtle: var(--magma-tint-accent-ai-surface-subtle); /* A background tinted with the AI accent, lighter. */
+    --magma-accent-ai-on-emphasis: var(--magma-tint-text-on-emphasis); /* Text and icons on the solid fill of the AI accent. */
 
     /* globals */
     --magma-pref-mode: light;
@@ -801,6 +801,7 @@
     --magma-selection-background: rgb(0 120 255);
     --magma-selection-color: rgb(255 255 255);
     --magma-corner-shape: squircle;
+    --magma-corner-cap: 0.5;
     --magma-header-z-index: 1000;
     --magma-notification-z-index: 2000;
     --magma-modal-z-index: 3000;
@@ -1210,7 +1211,7 @@
     --mds-input-tip-horizontal-offset-focused: --spacing(100);
     --mds-input-tip-horizontal-offset: --spacing(100);
     --mds-input-tip-vertical-offset: --spacing(100);
-    --mds-input-border-radius: var(--magma-radius-xl);
+    --mds-input-border-radius: min( var(--magma-radius-xl), var(--magma-corner-cap) * var(--private-input-height) );
     --mds-input-transition-duration: var(--duration-300);
     --mds-input-controls-border: 2px solid rgb(var(--magma-border-muted));
     --mds-input-controls-color: rgb(var(--magma-text-muted));
@@ -1623,7 +1624,7 @@
     --mds-tab-item-hover-background: transparent;
     --mds-tab-item-hover-color: rgb(var(--magma-text-default));
     --mds-tab-item-hover-shadow: transparent;
-    --mds-tab-item-radius: calc(var(--mds-tab-tabs-radius) - var(--mds-tab-tabs-padding));
+    --mds-tab-item-radius: min( calc(var(--mds-tab-tabs-radius) - var(--mds-tab-tabs-padding)), var(--magma-corner-cap) * var(--private-tab-item-height) );
     --mds-tab-scroll-behavior: smooth;
     --mds-tab-tabs-overflow-shadow: 0 0 var(--mds-tab-tabs-overflow-shadow-size) -2px rgb(0 0 0 / 0.375);
     --mds-tab-transition-timing-function: var(--ease-out-expo);

package/dist/css/transitions.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.1.0
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 14 Oct 2026 12:21:39 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/css/typography.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.1.0
+@magma-design-system/design-tokens v15.2.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 14 Oct 2026 12:21:39 GMT
+Generated at Thu, 15 Oct 2026 16:07:06 GMT
 */
 
 :root {

package/dist/dtcg/globals.tokens.json

@@ -338,6 +338,16 @@
             }
           ]
         }
+      },
+      "cap": {
+        "$type": "number",
+        "$value": 0.5,
+        "$extensions": {
+          "it.maggioli.magma": {
+            "css": "--magma-corner-cap",
+            "tier": "semantic"
+          }
+        }
       }
     },
     "header": {

package/dist/tailwind/base.css

@@ -92,16 +92,7 @@
     @apply max-w-title;
   }
 
-  .hydrated {
-
-    /*
-      Revert all styles for hydrated web components
-      to avoid tailwind base unwanted overrides
-      all: revert-layer;
-    */
-    border: revert-layer;
-    display: revert-layer;
-    margin: revert-layer;
-    padding: revert-layer;
-  }
+  /* The box of the hydrated components (against Tailwind's preflight) is kept by
+   * hydrated.css: imported into `base` with layer(base), this file lands in a
+   * sublayer, and the rules of a sublayer lose to the ones of `base` itself. */
 }