Как стать автором
Обновить

Комментарии 9

Не понял зачем вы используете CSS variables, если вы не хотите отказываться от SCSS. Только потому что CSS variables — новое и «модное»?
Я вот тоже не понял. Если в рантайме цвета не менять, а у них супорт ie11, зачем нужны CSS Custom Properties?

Почти уверен, что это связано со скоупами. Например, есть отдельная страница, если переобъявить css-переменные в ней, то их подхватят все компоненты за раз. С SCSS нужно будет делать отдельный файл для этой страницы/части страницы.

Полифил для IE работает только Ahead-of-Time, это те же sass-переменные которые выглядят как CSS Custom Properties.
Различия зависят от реализации scss темизации.

Мы рассматривали подход из Angular Materials. В material каждому компоненту заводится миксин с темизирующей частью, затем все миксины объединяются в один с помощью объекта темы и инициализируются на корне приложения. Нам не понравились следующие вещи:
— необходимо жертвовать инкапсуляцией стилей
— нужно вносить изменения в каждый компонент, это создаёт много работы для реализации темизации а так же дополнительные работы при создании новых компонентов
— каждая тема доступная на странице раздувает файл стилей одинаковыми селекторами

Подход с хранением всех тем в ui-kit нас не устроил потому что много продуктов, соответственно сильно раздуется библиотека.

Может есть ещё какие-то подходы которые мы упустили?
Мне всегда казалось что для цветовых палит логичнее использовать цвета в hsla. А ещё лутчше в перцепционной цветовые модели (lab, luv и т.д.)
Спасибо, не сталкивался с перцепционными цветовыми моделями, но хотел бы изучить. Можете поделиться примерами реализации в подобных случаях?

Теория есть тут https://programmingdesignsystems.com/


На практике есть тулза в гайде Google Material которая строит палитру по lch (hcl) моделе https://material.io/design/color/the-color-system.html#tools-for-picking-colors


Ещё теории есть у автора chroma.js https://www.vis4.net/blog/2011/12/avoid-equidistant-hsv-colors/

Зарегистрируйтесь на Хабре, чтобы оставить комментарий