lvl-io-ui v1.4.2

LVL.io UI

Storybook (with VPN)

Дизайн-система и UI Kit

Все возможные значения вынесены в переменные, что позволяет настраивать их извне и адаптировать под нужды каждого проекта

Палитра

Переменные палитры могут быть представлены одним из двух типов значений: rgb (альфа-канал задается при использовании) или gradient. Названия переменных должны быть семантичными и отражать их назначение. Обычно они описываются в :root

Для извлечения значения цвета из rgb-переменной используется Sass-функция color-get. Первый параметр — название переменной, второй (необязательный) — альфа-канал

Типографика

Для установки значений текстовых свойств используется Sass-примесь typo-get. Единственный параметр — название типографской единицы

Компоненты

При разработке компонентов очень важно выносить все изменяемые значения в переменные, чтобы можно было конфигурировать их извне

Сначала описываются переменные по умолчанию, которые задают базовый вид компонента. Затем с помощью модификаторов, например таких как size или theme, можно переопределить значения нужных свойств

Добавление новых тем и размеров реализуется исключительно через отдельные миксины, в которых необходимо объявить новые переменные и сопоставить их с переменными из :root. Для извлечения значения из новых переменных используется Sass-функция var-default. Единственный параметр — название переменной (НЕ МОЖЕТ НАЧИНАТЬСЯ С --root)

Схема именования переменных в :root

--root → Element → State → El... → Property

Иконки

Рекомендованная схема именования иконок

Icon → Shape → filled

Статья по теме сборки такого рода пакета