@maggioli-design-system/styles 17.2.1 → 17.4.0

package/dist/css/tokens.editor.css

@@ -779,70 +779,70 @@
     --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;
-    --magma-pref-theme-scheme: light;
-    --magma-pref-theme: default;
-    --magma-pref-consumption: high;
-    --magma-pref-animation: no-preference;
-    --magma-pref-contrast: no-preference;
-    --magma-backdrop-animation-duration: 300ms;
-    --magma-outline-animation-duration: 1.5s;
-    --magma-backdrop-opacity: 0.1;
-    --magma-disabled-opacity: 0.5;
-    --magma-overlay-opacity: 0.5;
-    --magma-backdrop-blur: 4px;
-    --magma-outline-blur-offset: 6px;
-    --magma-outline-focus-offset: 2px;
-    --magma-backdrop-color: rgb(0 0 0);
-    --magma-on-backdrop: rgb(252 252 252);
-    --magma-outline-blur-color: transparent;
-    --magma-outline-focus-color: rgb(0 0 0);
-    --magma-overlay-color: rgb(0 0 0);
-    --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;
-    --magma-backdrop-z-index: 4000;
-    --magma-dropdown-z-index: 5000;
-    --magma-tooltip-z-index: 6000;
-    --magma-theme-overlay-z-index: 7000;
-    --magma-context-menu-z-index: 8000;
-    --magma-view-transition-navigation: auto;
-    --magma-backdrop: rgb(var(--magma-backdrop-color) / var(--magma-backdrop-opacity));
-    --magma-outline-blur: 2px solid var(--magma-outline-blur-color);
-    --magma-outline-focus: 2px solid var(--magma-outline-focus-color);
-    --magma-overlay-blur: var(--magma-backdrop-blur);
-    --magma-overlay: rgb(var(--magma-overlay-color) / var(--magma-overlay-opacity));
+    --magma-pref-mode: light; /* The active mode preference, as the mds-pref components write it: read it, never set it. */
+    --magma-pref-theme-scheme: light; /* The active theme-scheme preference, as the mds-pref components write it: read it, never set it. */
+    --magma-pref-theme: default; /* The active theme preference, as the mds-pref components write it: read it, never set it. */
+    --magma-pref-consumption: high; /* The active consumption preference, as the mds-pref components write it: read it, never set it. */
+    --magma-pref-animation: no-preference; /* The active animation preference, as the mds-pref components write it: read it, never set it. */
+    --magma-pref-contrast: no-preference; /* The active contrast preference, as the mds-pref components write it: read it, never set it. */
+    --magma-backdrop-animation-duration: 300ms; /* How long the scrim takes to fade in. */
+    --magma-outline-animation-duration: 1.5s; /* How long one pulse of the focus ring takes. */
+    --magma-backdrop-opacity: 0.1; /* How much the scrim darkens the page. */
+    --magma-disabled-opacity: 0.5; /* The opacity of disabled components. */
+    --magma-overlay-opacity: 0.5; /* How much the modal scrim darkens the page. */
+    --magma-backdrop-blur: 4px; /* How much the scrim blurs the page behind it. */
+    --magma-outline-blur-offset: 6px; /* The gap of the ring without focus, wider than the focus one: the focus ring closes in from it, or pulses out to it. */
+    --magma-outline-focus-offset: 2px; /* The gap between the focus ring and the element. */
+    --magma-backdrop-color: rgb(0 0 0); /* The colour of the scrim, black in both modes; the elevation shadows draw with it too. */
+    --magma-on-backdrop: rgb(252 252 252); /* Text and icons on the scrim, such as the close icon of a modal: light in both modes, as the scrim is black in both. */
+    --magma-outline-blur-color: transparent; /* The colour of the ring without focus: transparent. */
+    --magma-outline-focus-color: rgb(0 0 0); /* The colour of the focus ring. */
+    --magma-overlay-color: rgb(0 0 0); /* The colour of the modal scrim: the backdrop colour. */
+    --magma-selection-background: rgb(0 120 255); /* The background of selected text. */
+    --magma-selection-color: rgb(255 255 255); /* The colour of selected text. */
+    --magma-corner-shape: squircle; /* The shape of the corners: set it through data-corner-shape, which changes the radius scale with it. */
+    --magma-corner-cap: 0.5; /* The part of its height a corner may take, for the controls whose radius is past half their height. */
+    --magma-header-z-index: 1000; /* The z-index of the header, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-notification-z-index: 2000; /* The z-index of notifications, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-modal-z-index: 3000; /* The z-index of modals, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-backdrop-z-index: 4000; /* The stacking level of the scrim, between modals and dropdowns. */
+    --magma-dropdown-z-index: 5000; /* The z-index of dropdowns, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-tooltip-z-index: 6000; /* The z-index of tooltips, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-theme-overlay-z-index: 7000; /* The z-index of the theme overlay, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-context-menu-z-index: 8000; /* The z-index of context menus, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-view-transition-navigation: auto; /* Whether a navigation between pages animates as a view transition. */
+    --magma-backdrop: rgb(var(--magma-backdrop-color) / var(--magma-backdrop-opacity)); /* The scrim as one colour, with its opacity. */
+    --magma-outline-blur: 2px solid var(--magma-outline-blur-color); /* The ring of an element without focus: transparent. */
+    --magma-outline-focus: 2px solid var(--magma-outline-focus-color); /* The focus ring: width, style and colour. */
+    --magma-overlay-blur: var(--magma-backdrop-blur); /* How much the modal scrim blurs the page: the backdrop blur. */
+    --magma-overlay: rgb(var(--magma-overlay-color) / var(--magma-overlay-opacity)); /* The scrim of mds-modal as one colour, with its opacity. */
 
     /* globals: corner */
-    --magma-radius-none: var(--radius-none);
-    --magma-radius-3xs: var(--radius-squircle-3xs);
-    --magma-radius-2xs: var(--radius-squircle-2xs);
-    --magma-radius-xs: var(--radius-squircle-xs);
-    --magma-radius-sm: var(--radius-squircle-sm);
-    --magma-radius-md: var(--radius-squircle-md);
-    --magma-radius-lg: var(--radius-squircle-lg);
-    --magma-radius-xl: var(--radius-squircle-xl);
-    --magma-radius-2xl: var(--radius-squircle-2xl);
-    --magma-radius-3xl: var(--radius-squircle-3xl);
-    --magma-radius-4xl: var(--radius-squircle-4xl);
-    --magma-radius-5xl: var(--radius-squircle-5xl);
-    --magma-radius-full: var(--radius-full);
+    --magma-radius-none: var(--radius-none); /* No rounding. */
+    --magma-radius-3xs: var(--radius-squircle-3xs); /* The 3xs corner radius, on the scale of the active corner shape. */
+    --magma-radius-2xs: var(--radius-squircle-2xs); /* The 2xs corner radius, on the scale of the active corner shape. */
+    --magma-radius-xs: var(--radius-squircle-xs); /* The xs corner radius, on the scale of the active corner shape. */
+    --magma-radius-sm: var(--radius-squircle-sm); /* The sm corner radius, on the scale of the active corner shape. */
+    --magma-radius-md: var(--radius-squircle-md); /* The md corner radius, on the scale of the active corner shape. */
+    --magma-radius-lg: var(--radius-squircle-lg); /* The lg corner radius, on the scale of the active corner shape. */
+    --magma-radius-xl: var(--radius-squircle-xl); /* The xl corner radius, on the scale of the active corner shape. */
+    --magma-radius-2xl: var(--radius-squircle-2xl); /* The 2xl corner radius, on the scale of the active corner shape. */
+    --magma-radius-3xl: var(--radius-squircle-3xl); /* The 3xl corner radius, on the scale of the active corner shape. */
+    --magma-radius-4xl: var(--radius-squircle-4xl); /* The 4xl corner radius, on the scale of the active corner shape. */
+    --magma-radius-5xl: var(--radius-squircle-5xl); /* The 5xl corner radius, on the scale of the active corner shape. */
+    --magma-radius-full: var(--radius-full); /* The pill, the same under every corner shape. */
 
     /* globals: theme */
-    --depth: 1;
-    --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)));
+    --depth: 1; /* The depth axis, from 0 to 1: how strong the elevation shadows are. data-theme-depth="flat" sets it to 0. */
+    --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))); /* The shadow of a raised surface, such as a card. */
+    --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))); /* The shadow of an overlay surface, such as a dropdown or a popover. */
 
     /* component: mds-accordion */
     --mds-accordion-color: rgb(var(--magma-text-default));
     --mds-accordion-border-color: rgb(var(--magma-border-default));
-    --mds-accordion-border-width: 2px;
+    --mds-accordion-border-width: --spacing(50);
     --mds-accordion-description-color: rgb(var(--magma-text-default));
-    --mds-accordion-duration: 300ms;
+    --mds-accordion-duration: var(--duration-300);
     --mds-accordion-padding-selected: --spacing(400) 0 --spacing(800) 0;
     --mds-accordion-padding-unselected: --spacing(400) 0;
 
@@ -860,7 +860,7 @@
     --mds-accordion-timer-progress-bar-color: rgb(var(--magma-text-muted));
     --mds-accordion-timer-progress-bar-background: rgb(var(--magma-wash-strong));
     --mds-accordion-timer-progress-bar-thickness: --spacing(100);
-    --mds-accordion-timer-duration: 500ms;
+    --mds-accordion-timer-duration: var(--duration-500);
 
     /* component: mds-accordion-timer-item */
     --mds-accordion-timer-item-color: rgb(5 5 5);
@@ -929,6 +929,13 @@
     --mds-bibliography-text-decoration: rgb(140 140 140);
     --mds-bibliography-text-decoration-hover: rgb(5 5 5);
 
+    /* component: mds-book */
+    --mds-book-color: rgb(36 103 231);
+    --mds-book-paper-color: rgb(250 248 242);
+    --mds-book-text-color: rgb(255 255 255);
+    --mds-book-page-weight-max: 0.05;
+    --mds-book-page-weight-min: 0.1;
+
     /* component: mds-breadcrumb */
     --mds-breadcrumb-button-background-disabled: transparent;
     --mds-breadcrumb-arrow-depth-color: rgb(var(--magma-text-subtle));
@@ -1022,12 +1029,12 @@
     --mds-dropdown-backdrop-z-index: 4000;
     --mds-dropdown-background: rgb(255 255 255);
     --mds-dropdown-drop-shadow-color-rgb: rgb(5 5 5);
-    --mds-dropdown-duration: 0.5s;
-    --mds-dropdown-mouseover-delay: 0.5s;
+    --mds-dropdown-duration: 500ms;
+    --mds-dropdown-mouseover-delay: 500ms;
     --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-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-drop-shadow: drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.075)) drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.45)) drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.45));
     --mds-dropdown-ease: var(--ease-out-expo);
 
     /* component: mds-emoji */
@@ -1117,7 +1124,7 @@
 
     /* component: mds-header-bar */
     --mds-header-bar-hamburger-color: rgb(73 73 73);
-    --mds-header-bar-transition-duration: 500ms;
+    --mds-header-bar-transition-duration: var(--duration-500);
 
     /* component: mds-help */
     --mds-help-tooltip-delay: 0.25s;
@@ -1165,13 +1172,13 @@
     --mds-input-variant-color-rgb: rgb(0 0 0);
     --mds-input-ring: var(--shadow-ring-strong-2);
     --mds-input-tip-background: rgb(var(--magma-accent-ai-fg));
-    --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color-rgb) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color-rgb) / 0.06);
+    --mds-input-shadow: 0 1px --spacing(75) 0 rgb(var(--mds-input-variant-color-rgb) / 0.1), 0 1px --spacing(50) 0 rgb(var(--mds-input-variant-color-rgb) / 0.06);
     --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: 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-border: --spacing(50) solid rgb(var(--magma-border-muted));
     --mds-input-controls-color: rgb(var(--magma-text-muted));
 
     /* component: mds-input-date */
@@ -1181,7 +1188,7 @@
     --mds-input-date-icon-color: rgb(36 103 231);
     --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);
+    --mds-input-date-shadow: 0 1px --spacing(75) 0 rgb(var(--mds-input-date-variant-color-rgb) / 0.1), 0 1px --spacing(50) 0 rgb(var(--mds-input-date-variant-color-rgb) / 0.06);
     --mds-input-date-transition-duration: var(--duration-300);
 
     /* component: mds-input-date-range */
@@ -1192,7 +1199,7 @@
     --mds-input-date-range-icon-color: rgb(36 103 231);
     --mds-input-date-range-variant-color-rgb: rgb(0 0 0);
     --mds-input-date-range-ring: var(--shadow-ring-strong-2);
-    --mds-input-date-range-shadow: 0 1px 3px 0 rgb(var(--mds-input-date-range-variant-color-rgb) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-date-range-variant-color-rgb) / 0.06);
+    --mds-input-date-range-shadow: 0 1px --spacing(75) 0 rgb(var(--mds-input-date-range-variant-color-rgb) / 0.1), 0 1px --spacing(50) 0 rgb(var(--mds-input-date-range-variant-color-rgb) / 0.06);
     --mds-input-date-range-transition-duration: var(--duration-300);
 
     /* component: mds-input-date-range-preselection */
@@ -1234,7 +1241,7 @@
     --mds-input-select-arrow-icon-hover-color: rgb(7 76 204);
     --mds-input-select-variant-color-rgb: rgb(0 0 0);
     --mds-input-select-ring: var(--shadow-ring-strong-2);
-    --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color-rgb) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color-rgb) / 0.06);
+    --mds-input-select-shadow: 0 1px --spacing(75) 0 rgb(var(--mds-input-select-variant-color-rgb) / 0.1), 0 1px --spacing(50) 0 rgb(var(--mds-input-select-variant-color-rgb) / 0.06);
     --mds-input-select-transition-duration: var(--duration-300);
     --mds-input-select-icon-transition-duration: var(--duration-200);
 
@@ -1282,8 +1289,8 @@
     --mds-input-upload-drag-area-background-color: rgb(255 255 255);
     --mds-input-upload-drag-area-background-color-on-drag: rgb(237 237 237);
     --mds-input-upload-min-cols: 3;
-    --mds-input-upload-drag-area-border-on-drag: 3px dashed rgb(var(--magma-border-strong));
-    --mds-input-upload-drag-area-border: 3px dashed rgb(var(--magma-border-default));
+    --mds-input-upload-drag-area-border-on-drag: --spacing(75) dashed rgb(var(--magma-border-strong));
+    --mds-input-upload-drag-area-border: --spacing(75) dashed rgb(var(--magma-border-default));
 
     /* component: mds-keyboard */
     --mds-keyboard-background: rgb(208 208 208);
@@ -1298,13 +1305,13 @@
     --mds-keyboard-illumination-light-opacity: 0.075;
     --mds-keyboard-illumination-light-size: 1px;
     --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-spinner-duration: 1000ms;
+    --mds-keyboard-illumination-shadow: 0 0 --spacing(75) 0 rgb(255 255 255 / 0.5);
     --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);
-    --mds-keyboard-illumination-dark: 0 calc(var(--mds-keyboard-illumination-dark-size) * -1) 0 0 rgb(0 0 0 / var(--mds-keyboard-illumination-dark-opacity)) inset;
+    --mds-keyboard-illumination-dark: 0 calc(var(--mds-keyboard-illumination-dark-size) * -1) 0 0 rgb(var(--magma-shadow-ink) / var(--mds-keyboard-illumination-dark-opacity)) inset;
     --mds-keyboard-illumination-light: 0 var(--mds-keyboard-illumination-light-size) 0 0 rgb(255 255 255 / var(--mds-keyboard-illumination-light-opacity)) inset;
 
     /* component: mds-keyboard-key */
@@ -1312,7 +1319,7 @@
     --mds-keyboard-key-illumination-light-size: 2px;
     --mds-keyboard-key-padding: 4px;
     --mds-keyboard-key-transition-duration: 300ms;
-    --mds-keyboard-key-illumination-dark: 0 calc(var(--mds-keyboard-key-illumination-dark-size) * -1) 0 0 rgb(0 0 0 / var(--mds-keyboard-key-illumination-dark-opacity, 0.05)) inset;
+    --mds-keyboard-key-illumination-dark: 0 calc(var(--mds-keyboard-key-illumination-dark-size) * -1) 0 0 rgb(var(--magma-shadow-ink) / var(--mds-keyboard-key-illumination-dark-opacity, 0.05)) inset;
     --mds-keyboard-key-illumination-light: 0 var(--mds-keyboard-key-illumination-light-size) 0 0 rgb(255 255 255 / var(--mds-keyboard-key-illumination-light-opacity, 0.5)) inset;
 
     /* component: mds-kpi */
@@ -1340,6 +1347,19 @@
     --mds-text-selection-background: var(--mds-label-selection-background);
     --mds-text-selection-color: var(--mds-label-selection-color);
 
+    /* component: mds-link */
+    --private-link-band: 0px;
+    --private-link-fill: 0px;
+    --private-link-ink: 100%;
+    --mds-link-underline-thickness: --spacing(50);
+    --mds-link-underline-color: color-mix(in srgb, currentcolor 30%, transparent);
+    --mds-link-background-hover: color-mix(in srgb, currentcolor 12%, transparent);
+    --mds-link-color: rgb(var(--magma-accent-fg));
+    --mds-link-icon-gap: --spacing(100);
+    --mds-link-icon-size: --spacing(400);
+    --mds-link-transition-duration: var(--duration-500);
+    --mds-link-underline-offset: --spacing(100);
+
     /* component: mds-list-item */
     --mds-list-item-icon-margin: 0 8px 0 0;
 
@@ -1458,7 +1478,7 @@
     --mds-push-notification-items-duration: 300ms;
     --mds-push-notification-items-intro-delay: 300ms;
     --mds-push-notification-items-outro-delay: 0ms;
-    --mds-push-notification-background: linear-gradient( to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.5) 20%, rgb(0 0 0 / 0.85) 100% );
+    --mds-push-notification-background: linear-gradient( to right, rgb(var(--magma-backdrop-color) / 0) 0%, rgb(var(--magma-backdrop-color) / 0.5) 20%, rgb(var(--magma-backdrop-color) / 0.85) 100% );
     --mds-push-notification-items-gap: var(--mds-push-notification-gap);
     --mds-push-notification-items-timing-function: var(--ease-in-out-quint);
     --mds-push-notification-item-duration: var(--mds-push-notification-items-duration);
@@ -1482,9 +1502,9 @@
     --mds-radial-menu-radius: 80px;
     --mds-radial-menu-disc-scale: 0;
     --mds-radial-menu-disc-delay: calc( (var(--mds-radial-menu-nth-siblings) + 1) * var(--mds-radial-menu-delay) );
-    --mds-radial-menu-disc-filter: blur(8px);
+    --mds-radial-menu-disc-filter: blur(--spacing(200));
     --mds-radial-menu-disc-shadow: var(--shadow-lg-sharp);
-    --mds-radial-menu-transition-duration: 500ms;
+    --mds-radial-menu-transition-duration: var(--duration-500);
     --mds-radial-menu-transition-timing-function: var(--ease-out-expo);
     --mds-radial-menu-nth-siblings: 0;
     --mds-radial-menu-radius-current: 0;
@@ -1558,7 +1578,7 @@
     --mds-tab-tabs-wrapper-margin: 0;
     --mds-tab-tabs-wrapper-outline-opacity: 0.7;
     --mds-tab-tabs-wrapper-shadow-color: rgb(237 237 237);
-    --mds-tab-transition-duration: 0.5s;
+    --mds-tab-transition-duration: 500ms;
     --mds-tab-slider-offset-x: 0;
     --mds-tab-slider-offset-y: 0;
     --mds-tab-slider-width: 0;
@@ -1572,7 +1592,7 @@
     --mds-tab-item-hover-color: rgb(var(--magma-text-default));
     --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-tabs-overflow-shadow: 0 0 var(--mds-tab-tabs-overflow-shadow-size) --spacing(-50) rgb(var(--magma-shadow-ink) / 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;
@@ -1601,7 +1621,7 @@
     --mds-table-transition-duration: var(--duration-300);
     --mds-table-actions-gap: --spacing(200);
     --mds-table-background-alt: rgb(var(--magma-surface-raised));
-    --mds-table-border-width: 2px;
+    --mds-table-border-width: --spacing(50);
     --mds-table-cell-padding: --spacing(400);
     --mds-table-color-alt: rgb(var(--magma-text-muted));
     --mds-table-batch-actions-width: --spacing(4800);
@@ -1657,11 +1677,11 @@
     --mds-tooltip-arrow-background: rgb(255 255 255);
     --mds-tooltip-background: rgb(255 255 255);
     --mds-tooltip-dot-padding: 4px;
-    --mds-tooltip-duration: 0.5s;
+    --mds-tooltip-duration: 500ms;
     --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-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-drop-shadow: drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.075)) drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.45)) drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.45));
     --mds-tooltip-ease: var(--ease-out-expo);
 
     /* component: mds-tree */
@@ -1691,7 +1711,7 @@
     --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-duration: var(--duration-300);
     --mds-tree-transition-timing-function: var(--ease-in-out-expo);
     --mds-tree-toggle-border-radius: var(--magma-radius-lg);
     --mds-tree-toggle-size: --spacing(900);

package/dist/css/transitions.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.1
+@magma-design-system/design-tokens v15.3.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Tue, 20 Oct 2026 14:18:30 GMT
+Generated at Sat, 24 Oct 2026 12:12:55 GMT
 */
 
 :root {

package/dist/css/typography.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.1
+@magma-design-system/design-tokens v15.3.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Tue, 20 Oct 2026 14:18:30 GMT
+Generated at Sat, 24 Oct 2026 12:12:55 GMT
 */
 
 :root {