@maggioli-design-system/styles 17.1.0 → 17.2.1

package/dist/css/tokens.editor.css

@@ -240,7 +240,7 @@
     --shadow-ring-strong-4: 0 0 0 4px rgb(var(--tone-neutral-01) / 0.6);
 
     /* motion */
-    --transition-property-cosmetic: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+    --transition-property-cosmetic: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, rotate, scale, transform, translate, width;
     --transition-property-size: height, margin, padding, width;
 
     /* palette */
@@ -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;
@@ -907,7 +908,7 @@
     --mds-badge-border-color: rgb(47 182 243);
     --mds-badge-border-width: 1px;
     --mds-badge-color: rgb(255 255 255);
-    --mds-badge-radius: 16px;
+    --mds-badge-radius: 1000px;
     --mds-badge-transition-duration: var(--duration-200);
 
     /* component: mds-banner */
@@ -920,7 +921,7 @@
     --mds-banner-icon-color: rgb(7 76 204);
     --mds-banner-radius: 40px;
     --mds-banner-transition-duration: 300ms;
-    --mds-banner-shadow: var(--shadow-lg-sharp);
+    --mds-banner-shadow: none;
     --mds-banner-transition-timing-function: var(--ease-in-out-expo, cubic-bezier(1, 0, 0, 1));
 
     /* component: mds-bibliography */
@@ -930,13 +931,14 @@
 
     /* component: mds-breadcrumb */
     --mds-breadcrumb-button-background-disabled: transparent;
-    --mds-breadcrumb-button-color-current: rgb(5 5 5);
-    --mds-breadcrumb-current-button-color: rgb(119 119 119);
     --mds-breadcrumb-arrow-depth-color: rgb(var(--magma-text-subtle));
     --mds-breadcrumb-button-background-hover: rgb(var(--magma-wash-soft));
+    --mds-breadcrumb-button-background-selected: rgb(var(--magma-wash-base));
     --mds-breadcrumb-button-background: transparent;
     --mds-breadcrumb-button-color-hover: rgb(var(--magma-text-default));
+    --mds-breadcrumb-button-color-selected: var( --mds-breadcrumb-button-color-current, var(--mds-breadcrumb-current-button-color, rgb(var(--magma-text-default))) );
     --mds-breadcrumb-button-color: rgb(var(--magma-text-default));
+    --mds-button-background: var(--mds-breadcrumb-button-background-disabled);
 
     /* component: mds-breadcrumb-item */
     --mds-breadcrumb-item-arrow-depth-color: rgb(99 99 99);
@@ -950,7 +952,6 @@
     --mds-breadcrumb-item-button-border-color-rgb-selected: var(--magma-wash-base);
     --mds-breadcrumb-item-button-border-color-rgb-hover: var(--magma-wash-soft);
     --mds-breadcrumb-item-button-border-color-rgb: var( --mds-breadcrumb-item-button-border-color-rgb-hover );
-    --mds-button-background: var(--mds-breadcrumb-item-button-background);
     --mds-button-border-color-rgb: var(--mds-breadcrumb-item-button-border-color-rgb);
     --mds-button-color: var(--mds-breadcrumb-item-button-color);
     --mds-button-radius: var(--mds-breadcrumb-item-button-border-radius);
@@ -958,8 +959,6 @@
     /* component: mds-button */
     --mds-button-await-duration: 0.725s;
     --mds-button-border-default-opacity: 0;
-    --mds-button-border-high-contrast-hover-width: 3px;
-    --mds-button-border-high-contrast-width: 2px;
     --mds-button-border-hover-opacity: 0.75;
     --mds-button-border-opacity: 0;
     --mds-button-border-tone-outline-hover-width: 3px;
@@ -967,6 +966,7 @@
     --mds-button-border-tone-weak-hover-width: 2px;
     --mds-button-border-width: 2px;
     --mds-button-gap: 8px;
+    --mds-button-label-transform: uppercase;
     --mds-button-line-clamp: 1;
     --mds-spinner-duration: var(--mds-button-await-duration);
     --mds-button-border-hover-width: --spacing(50);
@@ -975,66 +975,27 @@
     --mds-text-line-clamp: var(--mds-button-line-clamp);
 
     /* component: mds-button-dropdown */
-    --mds-button-dropdown-radius: 24px;
-    --mds-button-dropdown-window-radius: 24px;
+    --mds-button-dropdown-radius: 40px;
+    --mds-button-dropdown-window-radius: 40px;
 
     /* component: mds-calendar */
     --mds-calendar-background: rgb(248 248 248);
-    --mds-calendar-border-radius: 16px;
-    --mds-calendar-day-number-color: rgb(5 5 5);
+    --mds-calendar-border-radius: 28px;
     --mds-calendar-max-width: 480px;
     --mds-calendar-padding: 16px;
     --mds-calendar-select-month-or-year-height: 36px;
     --mds-calendar-select-month-or-year-width: 224px;
+    --mds-calendar-day-number-color: rgb(var(--magma-text-default));
     --mds-calendar-cell-gap: --spacing(50);
     --mds-calendar-cell-other-month-visibility: visible;
 
-    /* component: mds-calendar-cell */
-    --mds-calendar-cell-background: transparent;
-    --mds-calendar-cell-boundaries-background: transparent;
-    --mds-calendar-cell-boundaries-color: rgb(5 5 5);
-    --mds-calendar-cell-boundaries-padding: 4px;
-    --mds-calendar-cell-color: rgb(5 5 5);
-    --mds-calendar-cell-disabled-background: transparent;
-    --mds-calendar-cell-disabled-color: rgb(119 119 119);
-    --mds-calendar-cell-other-month-background: transparent;
-    --mds-calendar-cell-other-month-color: rgb(119 119 119);
-    --mds-calendar-cell-preselection-current-month-background: rgb(204 212 226);
-    --mds-calendar-cell-preselection-current-month-boundaries-background: rgb( 236 237 240 );
-    --mds-calendar-cell-preselection-current-month-boundaries-color: rgb(119 119 119);
-    --mds-calendar-cell-preselection-current-month-color: rgb(119 119 119);
-    --mds-calendar-cell-preselection-other-month-background: rgb(220 224 231);
-    --mds-calendar-cell-preselection-other-month-boundaries-background: rgb(248 248 248);
-    --mds-calendar-cell-preselection-other-month-boundaries-color: rgb(119 119 119);
-    --mds-calendar-cell-preselection-other-month-color: rgb(119 119 119);
-    --mds-calendar-cell-preselection-today-background: rgb(220 224 231);
-    --mds-calendar-cell-preselection-today-color: rgb(7 76 204);
-    --mds-calendar-cell-selection-boundaries-border-radius: 200px;
-    --mds-calendar-cell-selection-current-month-background: rgb(36 103 231);
-    --mds-calendar-cell-selection-current-month-boundaries-background: rgb(248 248 248);
-    --mds-calendar-cell-selection-current-month-boundaries-color: rgb(73 73 73);
-    --mds-calendar-cell-selection-current-month-color: rgb(255 255 255);
-    --mds-calendar-cell-selection-current-month-weekend-background: rgb(7 76 204);
-    --mds-calendar-cell-selection-current-month-weekend-boundaries-background: rgb( 7 76 204 );
-    --mds-calendar-cell-selection-current-month-weekend-boundaries-color: rgb(73 73 73);
-    --mds-calendar-cell-selection-current-month-weekend-color: rgb(148 172 218);
-    --mds-calendar-cell-selection-other-month-background: rgb(204 212 226);
-    --mds-calendar-cell-selection-other-month-boundaries-background: rgb(236 237 240);
-    --mds-calendar-cell-selection-other-month-boundaries-color: rgb(119 119 119);
-    --mds-calendar-cell-selection-other-month-color: rgb(99 99 99);
-    --mds-calendar-cell-selection-week-boundaries-border-radius: 200px;
-    --mds-calendar-cell-size: 48px;
-    --mds-calendar-cell-weekend-background: transparent;
-    --mds-calendar-cell-weekend-color: rgb(99 99 99);
-    --mds-calendar-cell-inner-background: var(--mds-calendar-cell-preselection-today-background);
-
     /* component: mds-card */
     --mds-card-gap: 0;
     --mds-card-padding: 0;
     --mds-card-background: rgb(var(--magma-surface-raised));
 
     /* component: mds-chip */
-    --mds-chip-background: rgb(225 225 225);
+    --mds-chip-background: rgb(255 255 255);
     --mds-chip-border: transparent;
     --mds-chip-color: rgb(73 73 73);
     --mds-chip-icon-background: rgb(7 76 204);
@@ -1043,7 +1004,7 @@
     --mds-chip-color-selected: rgb(var(--magma-text-default));
     --mds-chip-icon-background-selected: rgb(var(--magma-accent-emphasis-hover));
     --mds-chip-icon-color-selected: rgb(var(--magma-text-on-emphasis));
-    --mds-chip-background-selected: rgb(var(--magma-wash-base));
+    --mds-chip-background-selected: rgb(var(--magma-surface-overlay));
     --mds-chip-border-selected: transparent;
     --mds-chip-shadow: var(--shadow-sm-sharp);
     --mds-chip-shadow-selected: var(--shadow-sm-sharp);
@@ -1057,7 +1018,7 @@
 
     /* component: mds-dropdown */
     --mds-dropdown-arrow-background: rgb(255 255 255);
-    --mds-dropdown-backdrop-duration: 200ms;
+    --mds-dropdown-backdrop-duration: 300ms;
     --mds-dropdown-backdrop-z-index: 4000;
     --mds-dropdown-background: rgb(255 255 255);
     --mds-dropdown-drop-shadow-color-rgb: rgb(5 5 5);
@@ -1066,7 +1027,7 @@
     --mds-dropdown-transform-from: scale(0.9) translateY(-3%);
     --mds-dropdown-transform-to: scale(1) translate(0, 0);
     --mds-dropdown-z-index: 5000;
-    --mds-dropdown-drop-shadow: drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.075)) drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.45)) drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.45));
+    --mds-dropdown-drop-shadow: drop-shadow(0 0 4px rgb(var(--magma-text-default) / 0.075)) drop-shadow(0 0 4px rgb(var(--magma-text-default) / 0.45)) drop-shadow(0 0 4px rgb(var(--magma-text-default) / 0.45));
     --mds-dropdown-ease: var(--ease-out-expo);
 
     /* component: mds-emoji */
@@ -1107,7 +1068,7 @@
     --mds-entity-detail-color: rgb(73 73 73);
     --mds-entity-icon-background: rgb(216 222 254);
     --mds-entity-icon-color: rgb(63 94 248);
-    --mds-entity-icon-radius: 12px;
+    --mds-entity-icon-radius: 20px;
 
     /* component: mds-file */
     --mds-file-preview-icon-color: rgb(var(--label-amaranth-04));
@@ -1144,8 +1105,6 @@
     --mds-header-backdrop-blur-strength: 2px;
     --mds-header-backdrop-height: 64px;
     --mds-header-backdrop-show: true;
-    --mds-header-color: rgb(5 5 5);
-    --mds-header-icon-color: rgb(5 5 5);
     --mds-header-inline-margin: 24px;
     --mds-header-inline-margin-mobile: 16px;
     --mds-header-modal-icon-color: rgb(255 255 255);
@@ -1210,7 +1169,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));
@@ -1220,7 +1179,6 @@
     --mds-input-date-field-background-empty: rgb(255 232 230);
     --mds-input-date-field-color-empty: rgb(89 0 0);
     --mds-input-date-icon-color: rgb(36 103 231);
-    --mds-input-date-icon-color-rgb: rgb(0 0 0);
     --mds-input-date-variant-color-rgb: rgb(0 0 0);
     --mds-input-date-ring: var(--shadow-ring-strong-2);
     --mds-input-date-shadow: 0 1px 3px 0 rgb(var(--mds-input-date-variant-color-rgb) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-date-variant-color-rgb) / 0.06);
@@ -1328,8 +1286,8 @@
     --mds-input-upload-drag-area-border: 3px dashed rgb(var(--magma-border-default));
 
     /* component: mds-keyboard */
-    --mds-keyboard-background: rgb(201 208 219);
-    --mds-keyboard-background-default: rgb(201 208 219);
+    --mds-keyboard-background: rgb(208 208 208);
+    --mds-keyboard-background-default: rgb(208 208 208);
     --mds-keyboard-background-fail: rgb(255 214 211);
     --mds-keyboard-background-pass: rgb(191 233 205);
     --mds-keyboard-color: rgb(99 99 99);
@@ -1342,7 +1300,7 @@
     --mds-keyboard-padding: 8px;
     --mds-keyboard-spinner-duration: 1s;
     --mds-keyboard-illumination-shadow: 0 0 3px 0 rgb(255 255 255 / 0.5);
-    --mds-keyboard-key-background: rgb(var(--tone-porcelain-06));
+    --mds-keyboard-key-background: rgb(var(--magma-wash-strong));
     --mds-keyboard-key-illumination-dark-opacity: 0.5;
     --mds-keyboard-key-illumination-light-opacity: 0.15;
     --mds-keyboard-key-illumination-shadow: 0 0 1px 0 rgb(255 255 255 / 0.5);
@@ -1404,7 +1362,7 @@
     --mds-modal-window-height: auto;
     --mds-modal-window-max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
     --mds-modal-window-shadow: var(--shadow-ring-strong-2), var(--shadow-2xl);
-    --mds-modal-transition-timing-funciton: var(--ease-in-out-quint);
+    --mds-modal-transition-timing-function: var( --mds-modal-transition-timing-funciton, var(--ease-in-out-quint) );
 
     /* component: mds-note */
     --mds-note-background: rgb(253 236 186);
@@ -1440,16 +1398,6 @@
     --mds-paginator-transition-duration: var(--duration-200);
 
     /* component: mds-paginator-item */
-    --mds-paginator-item-background: transparent;
-    --mds-paginator-item-background-disabled: rgb(225 225 225);
-    --mds-paginator-item-background-selected: rgb(7 76 204);
-    --mds-paginator-item-color: rgb(5 5 5);
-    --mds-paginator-item-color-disabled: rgb(119 119 119);
-    --mds-paginator-item-color-hover: rgb(5 5 5);
-    --mds-paginator-item-color-selected: rgb(255 255 255);
-    --mds-paginator-item-size: 36px;
-    --mds-paginator-item-radius: 200px;
-    --mds-paginator-item-shadow-selected: var(--shadow-md-sharp);
     --mds-paginator-item-transition-duration: var(--duration-200);
 
     /* component: mds-pref-animation */
@@ -1470,7 +1418,7 @@
     --mds-pref-theme-item-color-variant-primary: rgb(36 103 231);
 
     /* component: mds-price-table-features */
-    --mds-price-table-features-border-color: rgb(219 219 219);
+    --mds-price-table-features-border-color: rgb(var(--magma-border-muted));
     --mds-price-table-features-padding: --spacing(300);
     --mds-price-table-features-transition-duration: var(--duration-200);
 
@@ -1501,7 +1449,7 @@
 
     /* component: mds-progress */
     --mds-progress-duration: 750ms;
-    --mds-progress-radius: 28px;
+    --mds-progress-radius: 40px;
     --mds-progress-transition-duration: var(--duration-300);
 
     /* component: mds-push-notification */
@@ -1540,8 +1488,8 @@
     --mds-radial-menu-transition-timing-function: var(--ease-out-expo);
     --mds-radial-menu-nth-siblings: 0;
     --mds-radial-menu-radius-current: 0;
-    --mds-radial-menu-is-full-circle: 1;
-    --mds-radial-menu-is-start-greater-than-end: 1;
+    --mds-radial-menu-is-full-circle: cos( clamp( 0deg, max(var(--private-radial-menu-sweep) - 360deg, 360deg - var(--private-radial-menu-sweep)) * 1000, 90deg ) );
+    --mds-radial-menu-is-start-greater-than-end: sin( clamp(-90deg, var(--private-radial-menu-sweep) * 1000, 90deg) );
     --mds-radial-menu-item-offset-per-child: calc( (var(--mds-radial-menu-angle-end) - var(--mds-radial-menu-angle-start)) / (var(--mds-radial-menu-nth-siblings) + var(--mds-radial-menu-is-full-circle)) );
     --mds-radial-menu-item-angle-offset: calc( var(--mds-radial-menu-direction) * var(--mds-radial-menu-item-index) * var(--mds-radial-menu-item-offset-per-child) );
     --mds-radial-menu-item-delay: calc( (var(--mds-radial-menu-item-index) + 1) * var(--mds-radial-menu-delay) );
@@ -1619,15 +1567,15 @@
     --mds-tab-tabs-wrapper-shadow: 0 0 0 --spacing(50) var(--mds-tab-tabs-wrapper-shadow-color) inset;
     --mds-tab-item-selected-background: rgb(var(--magma-wash-strong));
     --mds-tab-item-default-background: transparent;
-    --mds-tab-item-default-shadow: transparent;
+    --mds-tab-item-default-shadow: none;
     --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);
     --mds-tab-corner-shape: var(--magma-corner-shape);
+    --mds-tab-item-hover-shadow: none;
     --mds-tab-contents-height: auto;
 
     /* component: mds-tab-bar */
@@ -1644,7 +1592,8 @@
     --mds-button-corner-shape: var(--mds-tab-item-corner-shape, var(--magma-corner-shape));
 
     /* component: mds-table */
-    --mds-table-border-color: rgb(196 196 196);
+    --mds-table-border-color: rgb(219 219 219);
+    --mds-table-separator-color: rgb(219 219 219);
     --mds-table-background: rgb(var(--magma-wash-strong));
     --mds-table-body-background-hover: rgb(var(--magma-surface-default));
     --mds-table-color: rgb(var(--magma-text-default));
@@ -1668,8 +1617,8 @@
     /* component: mds-table-cell */
     --mds-table-cell-background: var(--mds-table-cell-background-alt);
     --mds-table-cell-color: var(--mds-table-cell-color-alt);
-    --mds-table-cell-background-alt: var(--mds-table-row-background-alt);
-    --mds-table-cell-color-alt: var(--mds-table-row-color-alt);
+    --mds-table-cell-background-alt: var(--mds-table-background);
+    --mds-table-cell-color-alt: var(--mds-table-color);
     --mds-table-cell-transition-duration: var(--duration-200);
 
     /* component: mds-table-footer */
@@ -1701,6 +1650,9 @@
     --mds-toast-width: auto;
     --mds-toast-shadow: var(--shadow-ring-strong-2);
 
+    /* component: mds-toast-region */
+    --mds-toast-region-gap: 8px;
+
     /* component: mds-tooltip */
     --mds-tooltip-arrow-background: rgb(255 255 255);
     --mds-tooltip-background: rgb(255 255 255);
@@ -1709,15 +1661,12 @@
     --mds-tooltip-transform-from: scale(0.9) translateY(calc(16px * -1));
     --mds-tooltip-transform-to: scale(1) translate(0, 0);
     --mds-tooltip-z-index: 6000;
-    --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.075)) drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.45)) drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.45));
+    --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--magma-text-default) / 0.075)) drop-shadow(0 0 4px rgb(var(--magma-text-default) / 0.45)) drop-shadow(0 0 4px rgb(var(--magma-text-default) / 0.45));
     --mds-tooltip-ease: var(--ease-out-expo);
 
     /* component: mds-tree */
     --mds-tree-branch-use-rounded-border: true;
-    --mds-tree-toggle-icon-chevron-expanded-background: rgb(36 103 231);
-    --mds-tree-toggle-icon-chevron-expanded-color: rgb(255 255 255);
-    --mds-tree-toggle-icon-folder-expanded-color: rgb(36 103 231);
-    --mds-tree-actions-border-radius: var(--radius-lg);
+    --mds-tree-actions-border-radius: var(--magma-radius-lg);
     --mds-tree-actions-gap: --spacing(50);
     --mds-tree-label-default-background: transparent;
     --mds-tree-label-hover-background: rgb(var(--magma-wash-soft));
@@ -1728,28 +1677,31 @@
     --mds-tree-branch-border-size: --spacing(50);
     --mds-tree-branch-dot-default-color: rgb(var(--magma-border-default));
     --mds-tree-branch-dot-expanded-color: rgb(var(--magma-border-strong));
-    --mds-tree-toggle-gap: --spacing(150);
+    --mds-tree-toggle-gap: --spacing(100);
     --mds-tree-toggle-icon-async-background: rgb(var(--magma-wash-base));
     --mds-tree-toggle-icon-async-color: rgb(var(--magma-accent-fg));
     --mds-tree-toggle-icon-chevron-default-background: rgb(var(--magma-accent-emphasis));
     --mds-tree-toggle-icon-chevron-default-color: rgb(var(--magma-text-on-emphasis));
+    --mds-tree-toggle-icon-chevron-expanded-background: var( --mds-tree-toggle-icon-chevron-default-background );
+    --mds-tree-toggle-icon-chevron-expanded-color: var(--mds-tree-toggle-icon-chevron-default-color);
     --mds-tree-toggle-icon-folder-default-background: rgb(var(--magma-wash-strong));
     --mds-tree-toggle-icon-folder-default-color: rgb(var(--magma-accent-emphasis));
+    --mds-tree-toggle-icon-folder-expanded-color: var(--mds-tree-toggle-icon-folder-default-color);
     --mds-tree-toggle-icon-position-right-default-background: transparent;
     --mds-tree-toggle-icon-position-right-default-color: rgb(var(--magma-text-subtle));
     --mds-tree-toggle-icon-position-right-expanded-background: transparent;
     --mds-tree-toggle-icon-position-right-expanded-color: rgb(var(--magma-text-subtle));
     --mds-tree-transition-duration: 300ms;
     --mds-tree-transition-timing-function: var(--ease-in-out-expo);
-    --mds-tree-toggle-border-radius: var(--radius-lg);
+    --mds-tree-toggle-border-radius: var(--magma-radius-lg);
     --mds-tree-toggle-size: --spacing(900);
 
     /* component: mds-tree-item */
-    --mds-tree-item-branch-border-radius: 16px;
+    --mds-tree-item-branch-border-radius: 28px;
     --mds-tree-item-children-padding-left: calc( calc(var(--mds-tree-item-toggle-size) - var(--mds-tree-item-branch-border-size)) / 2 );
     --mds-tree-item-icon-background-color: var( --mds-tree-item-toggle-icon-chevron-default-background );
     --mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-chevron-default-color);
-    --mds-tree-branch-border-radius: var(--radius-lg);
+    --mds-tree-branch-border-radius: var(--private-tree-item-branch-border-radius);
     --mds-tree-item-actions-border-radius: var(--mds-tree-actions-border-radius);
     --mds-tree-item-actions-gap: var(--mds-tree-actions-gap);
     --mds-tree-item-branch-border-color: var(--mds-tree-branch-border-color);
@@ -1761,17 +1713,17 @@
     --mds-tree-item-label-icon-default-color: var(--mds-tree-label-icon-default-color);
     --mds-tree-item-label-icon-hover-color: var(--mds-tree-label-icon-hover-color);
     --mds-tree-item-line-clamp: var(--mds-tree-line-clamp);
-    --mds-tree-item-toggle-gap: var(--mds-tree-toggle-gap);
+    --mds-tree-item-toggle-gap: var(--mds-tree-toggle-gap, --spacing(100));
     --mds-tree-item-toggle-icon-async-background: var(--mds-tree-toggle-icon-async-background);
     --mds-tree-item-toggle-icon-async-color: var(--mds-tree-toggle-icon-async-color);
     --mds-tree-item-toggle-icon-chevron-default-background: var( --mds-tree-toggle-icon-chevron-default-background );
     --mds-tree-item-toggle-icon-chevron-default-color: var( --mds-tree-toggle-icon-chevron-default-color );
-    --mds-tree-item-toggle-icon-chevron-expanded-background: var( --mds-tree-item-toggle-icon-chevron-default-background );
-    --mds-tree-item-toggle-icon-chevron-expanded-color: var( --mds-tree-item-toggle-icon-chevron-default-color );
+    --mds-tree-item-toggle-icon-chevron-expanded-background: var( --mds-tree-toggle-icon-chevron-expanded-background, var(--mds-tree-item-toggle-icon-chevron-default-background) );
+    --mds-tree-item-toggle-icon-chevron-expanded-color: var( --mds-tree-toggle-icon-chevron-expanded-color, var(--mds-tree-item-toggle-icon-chevron-default-color) );
     --mds-tree-item-toggle-icon-folder-default-background: var( --mds-tree-toggle-icon-folder-default-background );
     --mds-tree-item-toggle-icon-folder-default-color: var( --mds-tree-toggle-icon-folder-default-color );
     --mds-tree-item-toggle-icon-folder-expanded-background: var( --mds-tree-item-toggle-icon-folder-default-background );
-    --mds-tree-item-toggle-icon-folder-expanded-color: var( --mds-tree-item-toggle-icon-folder-default-color );
+    --mds-tree-item-toggle-icon-folder-expanded-color: var( --mds-tree-toggle-icon-folder-expanded-color, var(--mds-tree-item-toggle-icon-folder-default-color) );
     --mds-tree-item-toggle-icon-position-right-default-background: var( --mds-tree-toggle-icon-position-right-default-background );
     --mds-tree-item-toggle-icon-position-right-default-color: var( --mds-tree-toggle-icon-position-right-default-color );
     --mds-tree-item-toggle-icon-position-right-expanded-background: var( --mds-tree-toggle-icon-position-right-expanded-background );
@@ -1783,7 +1735,7 @@
     /* component: mds-url-view */
     --mds-url-view-background: rgb(237 237 237);
     --mds-url-view-color: rgb(5 5 5);
-    --mds-url-view-radius: 12px;
+    --mds-url-view-radius: 20px;
     --mds-url-view-shadow: var(--shadow-ring-2);
     --mds-url-view-transition-duration: var(--duration-200);
     --mds-url-view-header-shadow: var(--shadow-sm-sharp);