Design Tokens

I Design Tokens rappresentano un approccio ormai diffuso per gestire i sistemi di design.

Trasformano valori riutilizzabili come colori, caratteri e spaziatura in variabili che possono essere utilizzate in modo coerente in tutto un sistema di design.

mdui utilizza Proprietà CSS personalizzate globali per implementare i Design Tokens, mantenendo gli stili coerenti in tutti i componenti. Modificando queste Proprietà, puoi regolare globalmente gli stili di tutti i componenti mdui. Per i tuoi stili, dai la priorità all'utilizzo di queste Proprietà CSS personalizzate per mantenere la coerenza con gli stili dei componenti mdui. Ciò garantisce anche che i tuoi stili si aggiornino in modo sincrono quando si modificano gli schemi cromatici dinamici.

Colore

mdui fornisce Proprietà CSS personalizzate sia per la Modalità chiara che per quella scura. In Modalità chiara, la proprietà è denominata --mdui-color-{name}-light e in Modalità scura è --mdui-color-{name}-dark.

Inoltre, mdui fornisce Proprietà CSS personalizzate denominate --mdui-color-{name}. Questa Proprietà fa riferimento a --mdui-color-{name}-light in Modalità chiara e a --mdui-color-{name}-dark in Modalità scura, consentendo il cambio automatico del colore in base alla modalità corrente.

Per modificare colori specifici, regola sia --mdui-color-{name}-light che --mdui-color-{name}-dark. Quando leggi le proprietà CSS personalizzate, usa la proprietà --mdui-color-{name}.

Queste Proprietà CSS personalizzate memorizzano tre valori di canale RGB separati da virgole. Ecco un esempio di come utilizzare le proprietà CSS personalizzate del colore:

/* Modifica il valore del colore primario */
:root {
  --mdui-color-primary-light: 103, 80, 164;
  --mdui-color-primary-dark: 208, 188, 255;
}

/* Imposta il colore di sfondo dell'elemento foo su primario */
.foo {
  background-color: rgb(var(--mdui-color-primary));
}

/* Imposta il colore di sfondo dell'elemento bar su primario con opacità 0.8 */
.bar {
  background-color: rgba(var(--mdui-color-primary), 0.8);
}

Per generare un nuovo Schema Cromatico, usa la funzione setColorScheme. Questa funzione genera uno Schema Cromatico completo in base al colore fornito.

Raggio d'angolo

mdui fornisce 7 dimensioni di raggio d'angolo. Queste Proprietà CSS personalizzate consentono di regolare il raggio d'angolo:

/* Modifica la dimensione del raggio d'angolo extra-piccolo */
:root {
  --mdui-shape-corner-extra-small: 0.3rem;
}

/* Imposta il raggio d'angolo dell'elemento foo su extra-piccolo */
.foo {
  border-radius: var(--mdui-shape-corner-extra-small);
}

Tipografia

mdui fornisce 15 stili tipografici. Ogni stile include Proprietà per l'altezza della linea, la dimensione del carattere, la spaziatura delle lettere e il peso del carattere.

Ecco un esempio di come utilizzare queste Proprietà:

/* Modifica lo stile del testo Body large */
:root {
  --mdui-typescale-body-large-line-height: 1.6rem;
  --mdui-typescale-body-large-size: 1.2rem;
  --mdui-typescale-body-large-tracking: 0.01rem;
  --mdui-typescale-body-large-weight: 400;
}

/* Imposta lo stile del testo dell'elemento foo su Body large */
.foo {
  line-height: var(--mdui-typescale-body-large-line-height);
  font-size: var(--mdui-typescale-body-large-size);
  letter-spacing: var(--mdui-typescale-body-large-tracking);
  font-weight: var(--mdui-typescale-body-large-weight);
}

Opacità del Livello di Stato

I componenti mdui, come <mdui-button>, utilizzano uno strato overlay semi-trasparente durante gli stati di interazione come hover, focus, pressione e trascinamento. L'opacità di questo strato può essere regolata modificando le seguenti Proprietà CSS personalizzate:

/* Modifica l'opacità del livello di stato */
:root {
  --mdui-state-layer-hover: 0.08;
  --mdui-state-layer-focus: 0.12;
  --mdui-state-layer-pressed: 0.12;
  --mdui-state-layer-dragged: 0.16;
}

Elevazione

I componenti mdui utilizzano l'elevazione per creare profondità con le ombre. Puoi regolare queste ombre modificando le proprietà CSS personalizzate:

/* Modifica l'elevazione di livello1 */
:root {
  --mdui-elevation-level1:
    0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%),
    0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%);
}

/* Imposta l'elevazione dell'elemento foo su livello1 */
.foo {
  box-shadow: var(--mdui-elevation-level1);
}

Animazione

I componenti mdui incorporano animazioni, con curve di easing e durate personalizzabili. Queste Proprietà possono essere modificate utilizzando le proprietà CSS personalizzate:

/* Modifica la curva di easing standard e la durata short1 */
:root {
  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mdui-motion-duration-short1: 40ms;
}

/* Applica la curva di easing standard e la durata short1 all'effetto di transizione dell'elemento foo */
.foo {
  transition: all var(--mdui-motion-duration-short1)
    var(--mdui-motion-easing-standard);
}

Breakpoint

I componenti mdui adattano il loro layout in base a vari breakpoint, che vengono forniti tramite Proprietà CSS personalizzate. Ecco un esempio di come modificare un breakpoint:

/* Modifica il valore del breakpoint per sm */
:root {
  --mdui-breakpoint-sm: 560px;
}

Tieni presente che le proprietà CSS personalizzate non possono essere utilizzate nelle media query CSS. Ad esempio, il seguente utilizzo non è corretto:

/* Utilizzo errato. Le proprietà CSS personalizzate non possono essere utilizzate nelle media query */
@media (min-width: var(--mdui-breakpoint-sm)) {
}

Per determinare i breakpoint in JavaScript, utilizza la funzione breakpoint.