Design Tokens

Design-Tokens sind eine Strategie zur Verwaltung von Designsystemen.

Sie abstrahieren alle wiederverwendbaren Elemente in einem Designsystem (wie Farben, Schriftarten, Abstände usw.) in eigenständige Variablen, um eine einheitliche Verwaltung und Anwendung im gesamten Designsystem zu ermöglichen.

mdui verwendet globale CSS-Custom-Properties zur Implementierung von Design-Tokens. Wenn Sie diese CSS-Custom-Properties ändern, passt sich das Erscheinungsbild aller mdui-Komponenten global an. Gleichzeitig wird auch für Ihre eigenen Stile empfohlen, vorrangig CSS-Custom-Properties zu referenzieren, um sicherzustellen, dass Ihre Stile mit denen der mdui-Komponenten übereinstimmen. Darüber hinaus werden Ihre eigenen Stile beim Ändern des dynamischen Farbschemas automatisch aktualisiert.

Farben

mdui bietet eine Reihe von CSS-Custom-Properties für den Light Mode und den Dark Mode. Im Light Mode heißen die CSS-Custom-Properties --mdui-color-{name}-light, wobei {name} der Farbname ist; im Dark Mode heißen sie --mdui-color-{name}-dark.

Darüber hinaus bietet mdui eine Reihe von CSS-Custom-Properties namens --mdui-color-{name}. Diese Eigenschaft referenziert im Light Mode --mdui-color-{name}-light und im Dark Mode --mdui-color-{name}-dark und kann daher die Farbe automatisch basierend auf Light Mode und Dark Mode umschalten.

Wenn Sie die CSS-Custom-Properties einiger Farben ändern möchten, müssen Sie sowohl --mdui-color-{name}-light als auch --mdui-color-{name}-dark ändern. Wenn Sie die CSS-Custom-Properties auslesen, verwenden Sie einfach die Eigenschaft --mdui-color-{name}.

Die Werte der CSS-Custom-Properties sind die drei RGB-Farben, getrennt durch ,. Das folgende Beispiel zeigt die Verwendung der CSS-Custom-Properties für Farben:

/* Ändern des Farbwerts von primary */
:root {
  --mdui-color-primary-light: 103, 80, 164;
  --mdui-color-primary-dark: 208, 188, 255;
}

/* Die Hintergrundfarbe des foo-Elements auf primary setzen */
.foo {
  background-color: rgb(var(--mdui-color-primary));
}

/* Die Hintergrundfarbe des bar-Elements auf primary mit 0.8 Deckkraft setzen */
.bar {
  background-color: rgba(var(--mdui-color-primary), 0.8);
}

Wenn Sie ein völlig neues Farbschema erstellen möchten, wird die Verwendung der Funktion setColorScheme empfohlen. Diese Funktion generiert basierend auf einem von Ihnen angegebenen Farbwert ein vollständiges Farbschema.

Abgerundete Ecken (Shape Corner)

mdui bietet 7 verschiedene Größen für abgerundete Ecken. Das folgende Beispiel zeigt, wie Sie diese CSS-Custom-Properties für abgerundete Ecken verwenden:

/* Ändern der Größe der extra-small-Ecke */
:root {
  --mdui-shape-corner-extra-small: 0.3rem;
}

/* Die Eckenabrundung des foo-Elements auf extra-small setzen */
.foo {
  border-radius: var(--mdui-shape-corner-extra-small);
}

Typografie (Typescale)

mdui bietet 15 verschiedene Textstile, darunter 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.

Hier ist ein Beispiel:

/* Ändern des Textstils 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;
}

/* Den Textstil des foo-Elements auf Body large setzen */
.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);
}

Deckkraft der Zustandsschicht (State Layer)

Einige mdui-Komponenten fügen bei Interaktion eine halbtransparente Überlagerung hinzu. Beispielsweise fügt die <mdui-button>-Komponente beim Hovern, Fokussieren, Drücken oder Ziehen eine halbtransparente Überlagerung hinzu. Sie können die Deckkraft dieser Überlagerungen anpassen, indem Sie die CSS-Custom-Properties ändern.

Hier ist ein Beispiel:

/* Ändern der Deckkraft der Zustandsschicht */
: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;
}

Höhe (Schatten) (Elevation)

Einige mdui-Komponenten haben Schatteneffekte, um ein Gefühl der Höhe auf der Seite zu simulieren. Sie können die Schatteneffekte der Komponenten anpassen, indem Sie die CSS-Custom-Properties ändern.

Hier ist ein Beispiel:

/* Ändern des Schattens der Stufe level1 */
: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%);
}

/* Den Schatten des foo-Elements auf level1 setzen */
.foo {
  box-shadow: var(--mdui-elevation-level1);
}

Animation (Motion)

Die Beschleunigungskurven und Dauern von Animationen in mdui-Komponenten können über CSS-Custom-Properties konfiguriert werden.

Hier ist ein Beispiel:

/* Ändern der standard Beschleunigungskurve und der Dauer short1 */
:root {
  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mdui-motion-duration-short1: 40ms;
}

/* Den Übergangseffekt des foo-Elements auf die standard Beschleunigungskurve und die Dauer short1 setzen */
.foo {
  transition: all var(--mdui-motion-duration-short1)
    var(--mdui-motion-easing-standard);
}

Responsive Breakpoints

mdui bietet eine Reihe von responsiven Breakpoints, die über CSS-Custom-Properties konfiguriert werden können. Hier ist ein Beispiel:

/* Ändern des Breakpoint-Werts von sm */
:root {
  --mdui-breakpoint-sm: 560px;
}

Es ist wichtig zu beachten, dass diese CSS-Custom-Properties nicht in CSS-Medienabfragen verwendet werden können. Das folgende ist ein Beispiel für eine falsche Verwendung:

/* Falsche Verwendung. CSS-Custom-Properties können nicht in Medienabfragen verwendet werden */
@media (min-width: var(--mdui-breakpoint-sm)) {
}

Wenn Sie Breakpoint-Prüfungen in JavaScript durchführen müssen, verwenden Sie die Funktion breakpoint.