Corner radius

Magma draws its corners as squircles by default, and a squircle cuts a much smaller corner than a round one at the same radius. So the corner shape and the radius scale move together, as one axis: data-corner-shape="round" or "squircle", on <html> or on any element for its subtree. In your own CSS take radii from the Magma scale, which follows the axis:

.card {
  border-radius: var(--magma-radius-lg);
  corner-shape: var(--magma-corner-shape);
}

--magma-radius-nonerounded-(--magma-radius-none)0pxalias of --radius-none

--magma-radius-3xsrounded-(--magma-radius-3xs)6pxalias of --radius-squircle-3xs

--magma-radius-2xsrounded-(--magma-radius-2xs)10pxalias of --radius-squircle-2xs

--magma-radius-xsrounded-(--magma-radius-xs)14pxalias of --radius-squircle-xs

--magma-radius-smrounded-(--magma-radius-sm)16pxalias of --radius-squircle-sm

--magma-radius-mdrounded-(--magma-radius-md)20pxalias of --radius-squircle-md

--magma-radius-lgrounded-(--magma-radius-lg)28pxalias of --radius-squircle-lg

--magma-radius-xlrounded-(--magma-radius-xl)36pxalias of --radius-squircle-xl

--magma-radius-2xlrounded-(--magma-radius-2xl)40pxalias of --radius-squircle-2xl

--magma-radius-3xlrounded-(--magma-radius-3xl)56pxalias of --radius-squircle-3xl

--magma-radius-4xlrounded-(--magma-radius-4xl)80pxalias of --radius-squircle-4xl

--magma-radius-5xlrounded-(--magma-radius-5xl)112pxalias of --radius-squircle-5xl

--magma-radius-fullrounded-(--magma-radius-full)1000pxalias of --radius-full

Tailwind’s rounded-* classes read the primitives below, which stay the same under every shape: rounded-md is always the round 12px. For the axis write rounded-(--magma-radius-md). The squircle-* steps are the ones tuned for the squircle. --radius-nonerounded-none0px

--radius-3xsrounded-3xs4px

--radius-2xsrounded-2xs6px

--radius-xsrounded-xs8px

--radius-smrounded-sm10px

--radius-mdrounded-md12px

--radius-lgrounded-lg16px

--radius-xlrounded-xl20px

--radius-2xlrounded-2xl24px

--radius-3xlrounded-3xl32px

--radius-4xlrounded-4xl48px

--radius-5xlrounded-5xl64px

--radius-fullrounded-full1000px

--radius-squircle-3xsrounded-squircle-3xs6px

--radius-squircle-2xsrounded-squircle-2xs10px

--radius-squircle-xsrounded-squircle-xs14px

--radius-squircle-smrounded-squircle-sm16px

--radius-squircle-mdrounded-squircle-md20px

--radius-squircle-lgrounded-squircle-lg28px

--radius-squircle-xlrounded-squircle-xl36px

--radius-squircle-2xlrounded-squircle-2xl40px

--radius-squircle-3xlrounded-squircle-3xl56px

--radius-squircle-4xlrounded-squircle-4xl80px

--radius-squircle-5xlrounded-squircle-5xl112px

Borders

Border widths. Tailwind 4 has no namespace for them, so border-xs does not exist: write border-(length:--border-xs). --border-noneborder-(length:--border-none)0px

--border-xsborder-(length:--border-xs)1px

--border-smborder-(length:--border-sm)2px

--border-mdborder-(length:--border-md)3px

--border-lgborder-(length:--border-lg)4px

--border-xlborder-(length:--border-xl)5px

Shadows

In light mode the surfaces above the page are close to it, so a raised element needs a shadow to stand off: mds-card uses shadow-md-sharp, mds-modal shadow-2xl. The ring shadows are drawn with the darkest neutral and change in dark mode. --shadow-xsshadow-xs0px 1px 2px 0px rgb(0 0 0 / 0.05)

--shadow-xs-sharpshadow-xs-sharp0px 0px 1px 1px rgb(0 0 0 / 0.06), 0px 1px 2px 0px rgb(0 0 0 / 0.05)

--shadow-smshadow-sm0px 1px 3px 0px rgb(0 0 0 / 0.1), 0px 1px 2px -1px rgb(0 0 0 / 0.1)

--shadow-sm-sharpshadow-sm-sharp0px 0px 1px 1px rgb(0 0 0 / 0.06), 0px 1px 3px 0px rgb(0 0 0 / 0.1)

--shadow-sharpshadow-sharp0px 0px 1px 1px rgb(0 0 0 / 0.06), 0px 1px 3px 0px rgb(0 0 0 / 0.1)alias of --shadow-sm-sharpFor tailwind 3 compatibility

--shadow-mdshadow-md0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1)

--shadow-md-sharpshadow-md-sharp0px 0px 1px 1px rgb(0 0 0 / 0.06), 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -1px rgb(0 0 0 / 0.06)

--shadow-lgshadow-lg0px 10px 15px -3px rgb(0 0 0 / 0.1), 0px 4px 6px -4px rgb(0 0 0 / 0.1)

--shadow-lg-sharpshadow-lg-sharp0px 0px 1px 1px rgb(0 0 0 / 0.06), 0px 10px 15px -3px rgb(0 0 0 / 0.1), 0px 4px 6px -2px rgb(0 0 0 / 0.05)

--shadow-xlshadow-xl0px 20px 25px -5px rgb(0 0 0 / 0.1), 0px 8px 10px -6px rgb(0 0 0 / 0.1)

--shadow-xl-sharpshadow-xl-sharp0px 0px 1px 1px rgb(0 0 0 / 0.06), 0px 20px 25px -5px rgb(0 0 0 / 0.1), 0px 8px 10px -6px rgb(0 0 0 / 0.1)

--shadow-2xlshadow-2xl0px 25px 50px -12px rgb(0 0 0 / 0.25)

--shadow-2xl-sharpshadow-2xl-sharp0px 0px 1px 1px rgb(0 0 0 / 0.06), 0px 25px 50px -12px rgb(0 0 0 / 0.25)

--shadow-inset-smshadow-inset-sminset 0px 2px 4px 0px rgb(0 0 0 / 0.05), inset 0px 0px 0px 1px rgb(0 0 0 / 0.01)

--shadow-inset-mdshadow-inset-mdinset 0px 4px 6px -1px rgb(0 0 0 / 0.1), inset 0px 0px 0px 1px rgb(0 0 0 / 0.02)

--shadow-inset-lgshadow-inset-lginset 0px 10px 15px -3px rgb(0 0 0 / 0.1), inset 0px 0px 0px 1px rgb(0 0 0 / 0.04)

--shadow-inset-xlshadow-inset-xlinset 0px 20px 25px -5px rgb(0 0 0 / 0.1), inset 0px 0px 0px 1px rgb(0 0 0 / 0.04)

--shadow-glow-near-strongshadow-glow-near-strong0px 12px 28px 0px rgb(0 0 0 / 0.2), 0px 2px 4px 0px rgb(0 0 0 / 0.1)

--shadow-glow-distant-weakshadow-glow-distant-weak0px 60px 40px -7px rgb(0 0 0 / 0.2)

--shadow-glow-distant-strongshadow-glow-distant-strong0px 50px 100px -20px rgb(0 0 0 / 0.25), 0px 30px 60px -30px rgb(0 0 0 / 0.3)

--shadow-box-mdshadow-box-md0px 0px 0px 1px rgb(0 0 0 / 0.06), 0px 1px 1px -0.5px rgb(0 0 0 / 0.03), 0px 2px 2px -1px rgb(0 0 0 / 0.04), 0px 3px 3px -1.5px rgb(0 0 0 / 0.04), 0px 5px 5px -2.5px rgb(0 0 0 / 0.03), 0px 10px 10px -5px rgb(0 0 0 / 0.03), 0px 24px 24px -8px rgb(0 0 0 / 0.03)

--shadow-box-lgshadow-box-lg0px 4px 8px -2px rgb(0 0 0 / 0.25), 0px 0px 0px 1px rgb(0 0 0 / 0.08)

--shadow-box-xlshadow-box-xl0px 0px 0px 1px rgb(0 0 0 / 0.05), 0px 1px 1px -0.5px rgb(0 0 0 / 0.1), 0px 3px 3px -1.5px rgb(0 0 0 / 0.1), 0px 6px 6px -3px rgb(0 0 0 / 0.1), 0px 12px 12px -6px rgb(0 0 0 / 0.1), 0px 24px 24px -12px rgb(0 0 0 / 0.1)

--shadow-box-solid-weakshadow-box-solid-weak0px 2px 4px 0px rgb(0 0 0 / 0.3), 0px 0px 0px 1px rgb(0 0 0 / 0.03), 0px 7px 13px -3px rgb(0 0 0 / 0.1), inset 0px -3px 0px 0px rgb(0 0 0 / 0.2), inset 0px -8px 10px 0px rgb(255 255 255 / 0.1), inset 0px -4px 0px 0px rgb(255 255 255 / 0.15)

--shadow-box-solid-strongshadow-box-solid-strong0px 2px 4px 0px rgb(0 0 0 / 0.4), 0px 7px 13px -3px rgb(0 0 0 / 0.3), inset 0px -3px 0px 0px rgb(0 0 0 / 0.35), inset 0px -8px 10px 0px rgb(255 255 255 / 0.1), inset 0px -4px 0px 0px rgb(255 255 255 / 0.15)

--shadow-outline-weakshadow-outline-weak0px 0px 0px 1px rgb(0 0 0 / 0.05), 0px 1px 2px 0px rgb(0 0 0 / 0.05)

--shadow-outline-mdshadow-outline-md0px 0px 0px 1px rgb(0 0 0 / 0.1)

--shadow-outline-glow-weakshadow-outline-glow-weak0px 6px 24px 0px rgb(0 0 0 / 0.05), 0px 0px 0px 1px rgb(0 0 0 / 0.08)

--shadow-outline-glow-strongshadow-outline-glow-strong0px 10px 36px 0px rgb(0 0 0 / 0.16), 0px 0px 0px 1px rgb(0 0 0 / 0.06)

--shadow-outline-strongshadow-outline-strong0px 1px 1px 0px rgb(0 0 0 / 0.25), 0px 0px 1px 1px rgb(0 0 0 / 0.13)

--shadow-highlight-weakshadow-highlight-weak0px 0px 0px 1px rgb(0 0 0 / 0.3)

--shadow-highlight-mdshadow-highlight-md0px 0px 0px 1px rgb(0 0 0 / 0.5), 0px 4px 6px -1px rgb(0 0 0 / 0.3)

--shadow-highlight-strongshadow-highlight-strong0px 0px 0px 2px rgb(0 0 0 / 0.4), 0px 4px 6px -1px rgb(0 0 0 / 0.65)

--shadow-ringshadow-ring0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)1px ring, base intensity - a border drawn with box-shadow, not a shadow

--shadow-ring-2shadow-ring-20 0 0 2px rgb(var(--tone-neutral-01) / 0.3)2px ring, base intensity

--shadow-ring-weakshadow-ring-weak0 0 0 1px rgb(var(--tone-neutral-01) / 0.15)1px ring, faint

--shadow-ring-weak-2shadow-ring-weak-20 0 0 2px rgb(var(--tone-neutral-01) / 0.15)2px ring, faint

--shadow-ring-strong-2shadow-ring-strong-20 0 0 2px rgb(var(--tone-neutral-01) / 0.6)2px ring, marked - the high-contrast affordance

--shadow-ring-strong-4shadow-ring-strong-40 0 0 4px rgb(var(--tone-neutral-01) / 0.6)4px ring, marked

Elevation and depth

Two elevation shadows whose offsets, blur and opacity are multiplied by --depth. They come from styles/dist/css/theme.css, which the documented setup does not import, and no component reads them yet: they exist only in a project that imports that file. There, data-theme-depth="flat" on <html> sets the depth to 0 and takes the shadows away. N/A--depth - 1

--mds-elevation-raisedshadow-(--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-overlayshadow-(--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)))

Layers

The stacking order of what floats above the page, from the header up. --magma-backdrop-z-indexz-(--magma-backdrop-z-index)4000

--magma-header-z-indexz-(--magma-header-z-index)1000

--magma-notification-z-indexz-(--magma-notification-z-index)2000

--magma-modal-z-indexz-(--magma-modal-z-index)3000

--magma-dropdown-z-indexz-(--magma-dropdown-z-index)5000

--magma-tooltip-z-indexz-(--magma-tooltip-z-index)6000

--magma-theme-overlay-z-indexz-(--magma-theme-overlay-z-index)7000

--magma-context-menu-z-indexz-(--magma-context-menu-z-index)8000

Global decisions

The scrim under modals, the opacity of disabled elements and the focus outline. Override them only inside the overrides cascade layer:

@layer overrides {
  :root {
    --magma-disabled-opacity: 0.35;
  }
}

--magma-backdrop-animation-duration - 300ms -

--magma-backdrop-opacity - 0.1 -

N/A--magma-backdrop-blurbackdrop-blur-(--magma-backdrop-blur)4px -

--magma-backdrop-color - #000000 -

--magma-backdrop - rgb(var(--magma-backdrop-color) / var(--magma-backdrop-opacity)) -

--magma-outline-animation-duration - 1.5s -

N/A--magma-outline-blur-offset - 6px -

N/A--magma-outline-focus-offset - 2px -

--magma-outline-blur-color - rgb(0 0 0 / 0) -

--magma-outline-focus-color - #777777alias of --tone-neutral-05#c4c4c4

--magma-outline-blur - 2px solid rgb(0 0 0 / 0) -

--magma-outline-focus - 2px solid #7777772px solid #c4c4c4

--magma-disabled-opacityopacity-(--magma-disabled-opacity)0.5 -

--magma-overlay-opacity - 0.5 -

--magma-overlay-color - #000000alias of --magma-backdrop-color -

N/A--magma-overlay-blur - 4pxalias of --magma-backdrop-blur -

--magma-overlay - rgb(var(--magma-overlay-color) / var(--magma-overlay-opacity)) -