Raggi degli angoli

Magma disegna gli angoli come squircle, e uno squircle taglia un angolo molto più piccolo di uno tondo a parità di raggio. Per questo la forma degli angoli e la scala dei raggi si muovono insieme, come un solo asse: data-corner-shape="round" o "squircle", su <html> o su qualsiasi elemento per il suo sottoalbero. Nel tuo CSS prendi i raggi dalla scala di Magma, che segue l’asse:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Le classi rounded-* di Tailwind leggono i primitivi qui sotto, che restano uguali con ogni forma: rounded-md è sempre il tondo da 12px. Per seguire l’asse scrivi rounded-(--magma-radius-md). I passi squircle-* sono quelli calibrati per lo 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

Bordi

Gli spessori dei bordi. Tailwind 4 non ha un namespace per loro, quindi border-xs non esiste: scrivi 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

Ombre

In modalità chiara le superfici sopra la pagina le sono vicine, quindi un elemento rialzato ha bisogno di un’ombra per staccarsi: mds-card usa shadow-md-sharp, mds-modal shadow-2xl. Le ombre ad anello sono disegnate con il neutro più scuro e cambiano in modalità scura. --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 di --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

Elevazione e profondità

Due ombre di elevazione con spostamenti, sfocatura e opacità moltiplicati per --depth. Vengono da styles/dist/css/theme.css, che la configurazione documentata non importa, e nessun componente le legge ancora: esistono solo in un progetto che importa quel file. Lì data-theme-depth="flat" su <html> porta la profondità a 0 e toglie le ombre. 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)))

Livelli

L’ordine di sovrapposizione di ciò che galleggia sopra la pagina, dall’intestazione in su. --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

Decisioni globali

Il velo sotto le modali, l’opacità degli elementi disabilitati e il contorno del focus. Sovrascrivili solo dentro il cascade layer overrides:

@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 di --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 di --magma-backdrop-color -

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

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