Temi e preferenze

Lo stesso token può avere valori diversi: la condizione della pagina ne sceglie uno. Ogni condizione è una classe o un attributo su <html>, scritto dai componenti mds-pref-*, che ricordano anche la scelta dell’utente; mds-pref li raccoglie in un solo pannello. Il tuo codice non cambia: dipinge con i ruoli, e sono i ruoli a muoversi.

Modalità

pref-mode-light, pref-mode-dark, pref-mode-system

mds-pref-mode

Tema

data-theme-name="cool" o "warm"

mds-pref-theme

Contrasto

pref-contrast-more

mds-pref-contrast

Forma degli angoli

data-corner-shape="round" o "squircle"

mds-pref-theme

Profondità

data-theme-depth="flat"

Le tabelle qui sotto sono calcolate dai dati dei token, una condizione per colonna, ed elencano solo i token che cambiano; per questo i loro campioni sono colori fissi, non quelli di questa pagina.

Modalità scura

La palette si inverte e i ruoli con lei: il valore scuro di ogni ruolo è nella sua tabella in Colore. Non scrivere mai varianti dark: o media query per la modalità scura. Il dark: di Tailwind segue solo il sistema, non le classi pref-mode-*.

Temi e contrasto

Un tema ricolora i ruoli neutri tutti insieme: superfici, wash, bordi, testo, il chip invertito, sulla famiglia porcelain per cool e su bisque per warm. I ruoli di stato non cambiano mai con il tema. La preferenza di contrasto rafforza testo e bordi, e fa della pagina la carta della modalità. Sotto un tema i rafforzamenti sono ripetuti nella famiglia del tema, per questo i due vanno insieme.

In modalità chiara

--magma-surface-sunken

#e8e8e8

#e4e8ee

#ebe7e5

--magma-surface-muted

#ebebeb

#e8ebf1

#eeeae9

--magma-surface-default

#f2f2f2

#ffffff

#eff2f5

#ffffff

#f4f1f0

#ffffff

--magma-surface-raised

#f8f8f8

#f7f8fa

#f9f8f8

--magma-surface-inverse

#2a2a2a

#232b35

#302927

--magma-surface-inverse-muted

#494949

#3d495b

#524542

--magma-wash-soft

#ededed

#ebedf1

#efecec

--magma-wash-base

#e1e1e1

#dde2e8

#e5e0df

--magma-wash-strong

#d0d0d0

#c9d0db

#d6cecc

--magma-shadow-ink

#050505

#040506

#060505

--magma-text-default

#050505

#040506

#060505

--magma-text-muted

#494949

#050505

#3d495b

#040506

#524542

#060505

--magma-text-subtle

#636363

#494949

#53647d

#3d495b

#71605a

#524542

--magma-text-disabled

#777777

#637896

#87736c

--magma-border-muted

#dbdbdb

#c4c4c4

#d5dbe4

#bcc5d2

#e0d9d7

#cbc2bf

--magma-border-default

#c4c4c4

#8c8c8c

#bcc5d2

#808da0

#cbc2bf

#978984

--magma-border-strong

#8c8c8c

#808da0

#978984

--magma-info-text-muted

#004772

#002d56

#004772

#002d56

#004772

#002d56

--magma-info-text-subtle

#005e89

#004772

#005e89

#004772

#005e89

#004772

--magma-info-border-muted

#b8e2f5

#8dcfeb

#b8e2f5

#8dcfeb

#b8e2f5

#8dcfeb

--magma-info-border-default

#8dcfeb

#129ac4

#8dcfeb

#129ac4

#8dcfeb

#129ac4

--magma-info-border

#8dcfeb

#129ac4

#8dcfeb

#129ac4

#8dcfeb

#129ac4

--magma-success-text-muted

#005007

#003500

#005007

#003500

#005007

#003500

--magma-success-text-subtle

#006620

#005007

#006620

#005007

#006620

#005007

--magma-success-border-muted

#b9e8c9

#8fd7a9

#b9e8c9

#8fd7a9

#b9e8c9

#8fd7a9

--magma-success-border-default

#8fd7a9

#11a662

#8fd7a9

#11a662

#8fd7a9

#11a662

--magma-success-border

#8fd7a9

#11a662

#8fd7a9

#11a662

#8fd7a9

#11a662

--magma-warning-text-muted

#584200

#3a2c00

#584200

#3a2c00

#584200

#3a2c00

--magma-warning-text-subtle

#715500

#584200

#715500

#584200

#715500

#584200

--magma-warning-border-muted

#efd8a8

#e2bf75

#efd8a8

#e2bf75

#efd8a8

#e2bf75

--magma-warning-border-default

#e2bf75

#b88200

#e2bf75

#b88200

#e2bf75

#b88200

--magma-warning-border

#e2bf75

#b88200

#e2bf75

#b88200

#e2bf75

#b88200

--magma-danger-text-muted

#84000b

#590000

#84000b

#590000

#84000b

#590000

--magma-danger-text-subtle

#a52128

#84000b

#a52128

#84000b

#a52128

#84000b

--magma-danger-border-muted

#ffcbc6

#feaba5

#ffcbc6

#feaba5

#ffcbc6

#feaba5

--magma-danger-border-default

#feaba5

#da605d

#feaba5

#da605d

#feaba5

#da605d

--magma-danger-border

#feaba5

#da605d

#feaba5

#da605d

#feaba5

#da605d

--magma-neutral-fg

#494949

#3d495b

#524542

--magma-neutral-border

#a5a5a5

#99a8bb

#b2a39e

--magma-neutral-emphasis

#2a2a2a

#232b35

#302927

In modalità scura

--magma-surface-sunken

#020202

#010205

#040202

--magma-surface-muted

#0d0d0d

#080e15

#120c0a

--magma-surface-default

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-surface-raised

#303030

#273140

#382d2a

--magma-surface-overlay

#4a4a4a

#3f4b5d

#544743

--magma-surface-inverse

#f4f4f4

#f3f4f7

#f6f5f4

--magma-surface-inverse-muted

#e4e4e4

#e1e5eb

#e8e4e3

--magma-wash-soft

#3e3e3e

#343f4f

#473c39

--magma-wash-base

#535353

#455367

#5e4f4b

--magma-wash-strong

#6b6b6b

#596b86

#796761

--magma-shadow-ink

#fcfcfc

#fcfcfd

#fcfcfc

--magma-text-default

#fcfcfc

#fcfcfd

#fcfcfc

--magma-text-muted

#e4e4e4

#fcfcfc

#e1e5eb

#fcfcfd

#e8e4e3

#fcfcfc

--magma-text-subtle

#d3d3d3

#e4e4e4

#cdd4dd

#e1e5eb

#d9d2cf

#e8e4e3

--magma-text-disabled

#c4c4c4

#bbc5d2

#ccc2bf

--magma-text-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-border-muted

#404040

#6f6f6f

#354151

#627083

#493c39

#7a6b66

--magma-border-default

#6f6f6f

#ababab

#627083

#a0acbc

#7a6b66

#b4a8a4

--magma-border-strong

#ababab

#a0acbc

#b4a8a4

--magma-info-text-muted

#cfebf8

#e8f5fc

#cfebf8

#e8f5fc

#cfebf8

#e8f5fc

--magma-info-text-subtle

#b4e0f4

#cfebf8

#b4e0f4

#cfebf8

#b4e0f4

#cfebf8

--magma-info-border-muted

#004970

#007ca8

#004970

#007ca8

#004970

#007ca8

--magma-info-border-default

#007ca8

#5eb8dc

#007ca8

#5eb8dc

#007ca8

#5eb8dc

--magma-info-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-info-border

#007ca8

#5eb8dc

#007ca8

#5eb8dc

#007ca8

#5eb8dc

--magma-success-text-muted

#ceeed8

#e7f7ec

#ceeed8

#e7f7ec

#ceeed8

#e7f7ec

--magma-success-text-subtle

#b3e6c4

#ceeed8

#b3e6c4

#ceeed8

#b3e6c4

#ceeed8

--magma-success-border-muted

#005514

#008941

#005514

#008941

#005514

#008941

--magma-success-border-default

#008941

#5fc388

#008941

#5fc388

#008941

#5fc388

--magma-success-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-success-border

#008941

#5fc388

#008941

#5fc388

#008941

#5fc388

--magma-warning-text-muted

#ffe595

#fff2cd

#ffe595

#fff2cd

#ffe595

#fff2cd

--magma-warning-text-subtle

#ffd559

#ffe595

#ffd559

#ffe595

#ffd559

#ffe595

--magma-warning-border-muted

#653100

#9b6200

#653100

#9b6200

#653100

#9b6200

--magma-warning-border-default

#9b6200

#d1a337

#9b6200

#d1a337

#9b6200

#d1a337

--magma-warning-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-warning-border

#9b6200

#d1a337

#9b6200

#d1a337

#9b6200

#d1a337

--magma-danger-text-muted

#ffdfdd

#ffefee

#ffdfdd

#ffefee

#ffdfdd

#ffefee

--magma-danger-text-subtle

#ffceca

#ffdfdd

#ffceca

#ffdfdd

#ffceca

#ffdfdd

--magma-danger-border-muted

#7e000f

#bc3a3c

#7e000f

#bc3a3c

#7e000f

#bc3a3c

--magma-danger-border-default

#bc3a3c

#f18883

#bc3a3c

#f18883

#bc3a3c

#f18883

--magma-danger-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-danger-border

#bc3a3c

#f18883

#bc3a3c

#f18883

#bc3a3c

#f18883

--magma-neutral-fg

#e4e4e4

#e1e5eb

#e8e4e3

--magma-neutral-border

#9a9a9a

#8c9cb2

#a89792

--magma-neutral-emphasis

#f4f4f4

#f3f4f7

#f6f5f4

--magma-neutral-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-on-inverse

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-accent-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-accent-ai-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

Forma degli angoli

La forma e la scala dei raggi calibrata per lei si muovono insieme. --magma-radius-full, la pillola, è uguale con ogni forma.

--magma-radius-3xs

6px

4px

--magma-radius-2xs

10px

6px

--magma-radius-xs

14px

8px

--magma-radius-sm

16px

10px

--magma-radius-md

20px

12px

--magma-radius-lg

28px

16px

--magma-radius-xl

36px

20px

--magma-radius-2xl

40px

24px

--magma-radius-3xl

56px

32px

--magma-radius-4xl

80px

48px

--magma-radius-5xl

112px

64px

Profondità

Un tema piatto porta la profondità a 0, e questo toglie le ombre delle elevazioni. L’asse della profondità è in styles/dist/css/theme.css, fuori dalla configurazione documentata: funziona solo dove un progetto importa quel file.

--depth

--mds-elevation-raised

0px 1px 2px 0px rgb(0 0 0 / 0.06), 0px 2px 8px 0px rgb(0 0 0 / 0.08)

0px 0px 0px 0px rgb(0 0 0 / 0), 0px 0px 0px 0px rgb(0 0 0 / 0)

--mds-elevation-overlay

0px 4px 12px 0px rgb(0 0 0 / 0.12), 0px 8px 24px 0px rgb(0 0 0 / 0.16)

0px 0px 0px 0px rgb(0 0 0 / 0), 0px 0px 0px 0px rgb(0 0 0 / 0)