Tokeny projektowe

Tokeny projektowe (Design Tokens) to sposób na zarządzanie systemem projektowym.

Dzięki nim można wyodrębnić wszystkie powtarzalne elementy (kolory, czcionki, odstępy itp.) jako niezależne zmienne, aby ujednolicić zarządzanie nimi w całym systemie projektu.

mdui używa globalnych niestandardowych właściwości CSS do implementacji tokenów projektowych. Oznacza to, że wystarczy zmodyfikować właściwości CSS, aby globalnie zmienić style wszystkich komponentów mdui. Dla własnych stylów również zaleca się korzystanie z tych właściwości CSS, aby zachować spójność z komponentami mdui, a także aby style te automatycznie aktualizowały się przy zmianie koloru dynamicznego.

Kolory

mdui udostępnia osobne zestawy niestandardowych właściwości CSS dla trybu jasnego i ciemnego. W trybie jasnym nazwy właściwości mają postać --mdui-color-{name}-light, w trybie ciemnym --mdui-color-{name}-dark.

Ponadto mdui udostępnia właściwości --mdui-color-{name}, które w trybie jasnym odnoszą się do --mdui-color-{name}-light, a w ciemnym do --mdui-color-{name}-dark, dzięki czemu automatycznie dostosowują się do aktualnego trybu.

Jeśli chcesz zmodyfikować niektóre kolory, musisz zmienić zarówno --mdui-color-{name}-light, jak i --mdui-color-{name}-dark. Podczas odczytu używaj --mdui-color-{name}.

Wartości właściwości to trzy składowe RGB oddzielone przecinkami. Przykład użycia:

/* Modyfikacja koloru primary */
:root {
  --mdui-color-primary-light: 103, 80, 164;
  --mdui-color-primary-dark: 208, 188, 255;
}

/* Ustawienie tła elementu .foo na kolor primary */
.foo {
  background-color: rgb(var(--mdui-color-primary));
}

/* Ustawienie tła elementu .bar na kolor primary z przezroczystością 0.8 */
.bar {
  background-color: rgba(var(--mdui-color-primary), 0.8);
}

Jeśli potrzebujesz utworzyć całkowicie nowy schemat kolorów, zalecamy użycie funkcji setColorScheme, która na podstawie podanego koloru wygeneruje cały schemat.

Zaokrąglenia

mdui oferuje 7 różnych rozmiarów zaokrągleń. Przykład użycia:

/* Modyfikacja rozmiaru zaokrąglenia extra-small */
:root {
  --mdui-shape-corner-extra-small: 0.3rem;
}

/* Ustawienie zaokrąglenia elementu .foo na extra-small */
.foo {
  border-radius: var(--mdui-shape-corner-extra-small);
}

Typografia

mdui oferuje 15 różnych stylów tekstu, w tym 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.

Przykład użycia:

/* Modyfikacja stylu 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;
}

/* Ustawienie stylu elementu .foo na 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);
}

Nieprzezroczystość warstwy stanu

Niektóre komponenty mdui w trakcie interakcji nakładają na siebie półprzezroczystą warstwę. Na przykład komponent <mdui-button> wyświetla półprzezroczystą warstwę, gdy najedziesz na niego myszą, skupisz się na nim, naciśniesz go lub przeciągniesz. Możesz modyfikować nieprzezroczystość tej warstwy poprzez modyfikowanie właściwości CSS.

Poniżej znajduje się przykład użycia:

/* Modyfikacja nieprzezroczystości warstwy stanu */
: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;
}

Wysokość (cień)

Niektóre komponenty mdui mają cień, aby symulować uniesienie. Możesz go modyfikować za pomocą właściwości CSS.

Poniżej znajduje się przykład użycia:

/* Modyfikacja cienia dla 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%);
}

/* Ustawienie cienia dla elementu foo na level1 */
.foo {
  box-shadow: var(--mdui-elevation-level1);
}

Animacja

Krzywe przyspieszenia i czasy trwania animacji w komponentach mdui można konfigurować za pomocą właściwości CSS.

Poniżej znajduje się przykład użycia:

/* Modyfikacja krzywej przyspieszenia standard i czasu trwania short1 */
:root {
  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mdui-motion-duration-short1: 40ms;
}

/* Ustawienie przejścia dla elementu foo z użyciem krzywej standard i czasu short1 */
.foo {
  transition: all var(--mdui-motion-duration-short1)
    var(--mdui-motion-easing-standard);
}

Breakpointy responsywne

mdui udostępnia serię responsywnych breakpointów, które można konfigurować za pomocą niestandardowych właściwości CSS. Poniżej znajduje się przykład użycia:

/* Modyfikacja wartości breakpoint sm */
:root {
  --mdui-breakpoint-sm: 560px;
}

Należy pamiętać, że te niestandardowe właściwości CSS nie mogą być używane w media queries CSS. Poniżej znajduje się przykład błędnego użycia:

/* Błędne użycie. W media queries nie można używać niestandardowych właściwości CSS */
@media (min-width: var(--mdui-breakpoint-sm)) {
}

Jeśli chcesz sprawdzić breakpoint w JavaScript, możesz użyć funkcji breakpoint.