lvl-io-ui
v1.2.0
Published
[Storybook (with VPN)](https://storybook.lvl.io)
Downloads
1,001
Readme
LVL.io UI
Дизайн-система и 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
]