feat(alert,visual): theming with CSS variables (#DS-2679)

[NikGurev]

Summary

Now using components is easier! We are moving towards complete component isolation, which will allow you to easily connect and use them. In addition, we have removed the need to pass tokens for assigning colors to components.

List of notable changes:

• added script for generation css tokens for separate component.
• updated typography and theme colors injection - used in componenst styles instead of general theme.
• removed $theme and $config param from component theme mixins. Only css variables used. In that case, default values are expected to be initialized (via css files from @koobiq/design-tokens or on your own)

Styles for each component

CSS file structure:

// size, fonts
.kbq-<component-name> {
}

// styles for light theme
:where(.kbq-light, .theme-light, .kbq-theme-light) {}
// styles for dark theme
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {}

Q&A

if I want to change something in the alert, how will I do it?

You can change colors, sizes, and fonts by setting appropriate values for the component's CSS variables.

will something need to be changed in order to be applied correctly?

Simply add the class kbq-light to the element of your HTML document for using a light theme and kbq-dark for a dark theme.

Otherwise, you don't need to add anything, css variables are connected together with the component.

What's next?
We plan to apply these improvements to all components and use semantic values for the CSS variables of components, such as var(--kbq-size-m) instead of 12px. This will make the code more readable and maintainable.

Описание на RU

Теперь использование компонентов стало проще! Мы движемся к полной изоляции компонентов, что позволит вам легко подключать и использовать их. Кроме того, мы убрали необходимость пробрасывать токены для задания цветов компонентам.

• добавлен скрипт для генерации css-токенов для отдельного компонента.
• обновлено использование типографики и тематических цветов - используется в стилях компонента вместо общей темы.
• удален параметр $theme и $config из миксинов темы компонента. Использованы только переменные css.

Q&A

если захочу поменять, что-то в алерте, то как это получится сделать?

Изменить цвета, размеры и шрифты можно задав соответствующие значения css-переменным компонента.

нужно ли будет что-то поправить, чтобы применилось корректно?

Просто добавьте класс kbq-light к элементу вашего HTML-документа для использования светлой темы и kbq-dark для темной темы.

В остальном, добавлять ничего не нужно, css-переменные подключатся вместе с компонентом.

Что планируется сделать дальше?
Мы планируем применить эти улучшения ко всем компонентам и использовать семантические значения для CSS-переменных компонентов, такие как var(--kbq-size-m) вместо 12px. Это сделает код более читаемым и поддерживаемым.

[github-actions]

Visit the preview URL for this PR (updated for commit 84d6ac9):

https://koobiq-next--prs-208-fyhv77e8.web.app

_{(expires Tue, 10 Sep 2024 09:54:11 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c}