Design tokens

Les Design Tokens sont une stratégie de gestion des systèmes de design.

Ils transforment tous les éléments réutilisables (couleurs, polices, espacements, etc.) en variables indépendantes pour une gestion et une application unifiées.

mdui utilise des propriétés CSS personnalisées globales pour implémenter les Design Tokens. Cela signifie qu'en modifiant ces propriétés CSS, vous pouvez modifier globalement le style de tous les composants mdui. Pour vos propres styles, il est également recommandé d'utiliser ces propriétés CSS pour assurer la cohérence avec les composants mdui, et pour que vos styles se mettent à jour automatiquement avec la couleur dynamique.

Couleur

mdui fournit un ensemble de propriétés CSS personnalisées pour le mode clair et le mode sombre. En mode clair, le nom de la propriété est --mdui-color-{name}-light ; en mode sombre, c'est --mdui-color-{name}-dark.

mdui fournit également une propriété --mdui-color-{name} qui fait référence à la valeur du mode clair ou sombre selon le thème actuel. Ainsi, elle change automatiquement avec le thème.

Si vous devez modifier la couleur, vous devez modifier à la fois --mdui-color-{name}-light et --mdui-color-{name}-dark. Pour lire la couleur, utilisez directement --mdui-color-{name}.

Les valeurs sont des triplets RVB (rouge, vert, bleu) séparés par des virgules. Exemple :

/* Modifier la valeur de la couleur primaire */
:root {
  --mdui-color-primary-light: 103, 80, 164;
  --mdui-color-primary-dark: 208, 188, 255;
}

/* Définir la couleur de fond de .foo sur la couleur primaire */
.foo {
  background-color: rgb(var(--mdui-color-primary));
}

/* Définir la couleur de fond de .bar sur la couleur primaire avec une opacité de 0.8 */
.bar {
  background-color: rgba(var(--mdui-color-primary), 0.8);
}

Pour créer un schéma de couleurs complet, nous recommandons d'utiliser la fonction setColorScheme, qui génère un schéma de couleurs complet à partir d'une valeur de couleur donnée.

Coins arrondis

mdui propose 7 tailles de coins arrondis. Voici un exemple d'utilisation des propriétés CSS personnalisées pour ces coins arrondis :

/* Modifier la taille du coin arrondi extra-small */
:root {
  --mdui-shape-corner-extra-small: 0.3rem;
}

/* Définir le rayon de bordure de .foo sur extra-small */
.foo {
  border-radius: var(--mdui-shape-corner-extra-small);
}

Typographie

mdui propose 15 styles de texte différents, notamment Display large, Display medium, Display small, Headline large, Headline medium, Headline small, Title large, Title medium, Title small, Label large, Label medium, Label small, Body large, Body medium, Body small.

Voici un exemple d'utilisation :

/* Modifier le style de texte de 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;
}

/* Appliquer le style de texte Body large à .foo */
.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é de la couche d'état

Certains composants mdui affichent un calque semi-transparent lors des interactions (survol, focus, pression, glissement). Par exemple, le composant <mdui-button> affiche un calque semi-transparent lorsque la souris le survole, qu'il reçoit le focus, qu'il est pressé ou glissé. Vous pouvez ajuster l'opacité de ces calques via les propriétés CSS personnalisées.

Voici un exemple d'utilisation :

/* Modifier l'opacité de la couche d'état */
: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;
}

Élévation (ombre)

Certains composants mdui ont des ombres pour simuler une sensation d'élévation du composant sur la page. Vous pouvez ajuster les effets d'ombre via les propriétés CSS personnalisées.

Voici un exemple d'utilisation :

/* Modifier l'ombre de niveau 1 */
: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%);
}

/* Appliquer l'ombre de niveau 1 à .foo */
.foo {
  box-shadow: var(--mdui-elevation-level1);
}

Animation

Les courbes d'accélération et les durées des animations des composants mdui peuvent être configurées via des propriétés CSS personnalisées.

Voici un exemple d'utilisation :

/* Modifier la courbe d'accélération standard et la durée short1 */
:root {
  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mdui-motion-duration-short1: 40ms;
}

/* Appliquer la transition à .foo en utilisant la courbe standard et la durée short1 */
.foo {
  transition: all var(--mdui-motion-duration-short1)
    var(--mdui-motion-easing-standard);
}

Points de rupture réactifs

mdui fournit une série de points de rupture réactifs, qui peuvent être configurés via des propriétés CSS personnalisées. Voici un exemple d'utilisation :

/* Modifier la valeur du point de rupture sm */
:root {
  --mdui-breakpoint-sm: 560px;
}

Il est important de noter que ces propriétés CSS personnalisées ne peuvent pas être utilisées dans les requêtes média CSS. Voici un exemple erroné :

/* Utilisation incorrecte. Les propriétés CSS personnalisées ne peuvent pas être utilisées dans les requêtes média. */
@media (min-width: var(--mdui-breakpoint-sm)) {
}

Si vous avez besoin de vérifier les points de rupture en JavaScript, vous pouvez utiliser la fonction breakpoint.