Дизайн-токены

Дизайн-токены — это стратегия управления системой дизайна.

Они представляют все повторно используемые элементы системы дизайна (цвета, шрифты, отступы и т.д.) в виде независимых переменных для унифицированного управления и применения во всей системе.

mdui использует глобальные пользовательские CSS-свойства для реализации дизайн-токенов. Это означает, что, изменяя эти CSS-свойства, вы можете глобально менять стили всех компонентов mdui. Кроме того, для ваших собственных стилей также рекомендуется использовать эти CSS-свойства, чтобы они были единообразны со стилями компонентов mdui, и при изменении динамического цвета ваши стили также синхронно обновлялись.

Цвет

mdui предоставляет наборы CSS-свойств для светлого и тёмного режимов. В светлом режиме имена свойств имеют вид --mdui-color-{name}-light, в тёмном — --mdui-color-{name}-dark.

Кроме того, mdui предоставляет свойства вида --mdui-color-{name}, которые в светлом режиме ссылаются на --mdui-color-{name}-light, а в тёмном — на --mdui-color-{name}-dark, что позволяет автоматически переключать цвет в зависимости от текущей темы.

Если вам нужно изменить цветовые свойства, вы должны изменять одновременно --mdui-color-{name}-light и --mdui-color-{name}-dark. При чтении используйте свойство --mdui-color-{name}.

Значения CSS-свойств — это три RGB-компонента, разделённые запятыми. Пример использования:

/* Изменение значения primary */
:root {
  --mdui-color-primary-light: 103, 80, 164;
  --mdui-color-primary-dark: 208, 188, 255;
}

/* Установка фона элемента .foo в цвет primary */
.foo {
  background-color: rgb(var(--mdui-color-primary));
}

/* Установка фона элемента .bar в цвет primary с прозрачностью 0.8 */
.bar {
  background-color: rgba(var(--mdui-color-primary), 0.8);
}

Если вам нужна полностью новая цветовая схема, рекомендуется использовать функцию setColorScheme, которая генерирует полную схему на основе заданного вами цвета.

Скругление углов

mdui предоставляет 7 различных размеров скругления. Пример использования:

/* Изменение размера extra-small */
:root {
  --mdui-shape-corner-extra-small: 0.3rem;
}

/* Установка скругления .foo в extra-small */
.foo {
  border-radius: var(--mdui-shape-corner-extra-small);
}

Типографика

mdui предлагает 15 различных стилей текста: 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.

Пример использования:

/* Изменение стиля 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;
}

/* Применение стиля 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);
}

Непрозрачность слоя состояния

Некоторые компоненты mdui при взаимодействии добавляют поверх себя полупрозрачную маску. Например, компонент <mdui-button> при наведении, фокусе, нажатии или перетаскивании отображает такую маску. Вы можете изменить прозрачность этих масок с помощью CSS-свойств.

Пример использования:

/* Изменение непрозрачности слоя состояния */
: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;
}

Высота подъёма (тени)

Некоторые компоненты mdui имеют тени, чтобы создать ощущение поднятости над страницей. Вы можете изменять тени с помощью CSS-свойств.

Пример использования:

/* Изменение тени уровня 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%);
}

/* Применение тени level1 к элементу .foo */
.foo {
  box-shadow: var(--mdui-elevation-level1);
}

Анимация

Кривые смягчения (easing) и длительность анимации в компонентах mdui можно настраивать через CSS-свойства.

Пример использования:

/* Изменение стандартной кривой и длительности short1 */
:root {
  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mdui-motion-duration-short1: 40ms;
}

/* Применение к .foo: стандартная кривая, длительность short1 */
.foo {
  transition: all var(--mdui-motion-duration-short1)
    var(--mdui-motion-easing-standard);
}

Адаптивные брейкпоинты

mdui предоставляет набор адаптивных брейкпоинтов, которые можно настраивать через CSS-свойства. Пример:

/* Изменение брейкпоинта sm */
:root {
  --mdui-breakpoint-sm: 560px;
}

Важно: эти CSS-свойства нельзя использовать внутри медиа-запросов CSS. Пример неправильного использования:

/* Неправильно: медиа-запросы не поддерживают CSS-переменные */
@media (min-width: var(--mdui-breakpoint-sm)) {
}

Если вам нужно определять брейкпоинты в JavaScript, используйте функцию breakpoint.