Berry CSS 4.2 Модуль colors (настройка)
Файлы модуля располагаются в каталоге modules/colors. Это достаточно сложные файлы, которые не следует редактировать.
Все настройки классов типографики следует делать в секции @use with в файлах:
-
config/_colors1.scss- для замены modules/colors/_default1.scss -
config/_colors2.scss- для замены modules/colors/_default2.scss -
config/_colors3.scss- для замены modules/colors/_default3.scss
Файл config/_colors1.scss следует использовать когда нужно переопределить переменные любого одиночного цвета, например $color1 или $colorHS-red.
Файл config/_colors2.scss используется для переменных групп одиночных цветов. Например здесь можно переопределить $colors-group-my — основую группу фиксированных цветов.
В файле config/_colors3.scss в переменных (это список) $generation1 и $generation2 задаются группы, которые будут использоваться непосредственно для генерации css-классов. Если какая-то группа цветов не используется в проекте, то достаточно удалить её из этих переменных, без правки остальных файлов.
В Bery CSS генерация классов цветов осуществляется на основе групп, поэтому и используется три этапа: объявление фиксированных цветов, их группировка, а потом генерация css-классов.
Такой подход позволяет использовать переменные модуля colors в других модулях (см. модуль demo).
Полный список доступных цветов можно посмотреть на отдельной странице.
CSS-классы цветов
Berry создаёт цвета для текста (префикс t-), фона (префикс bg-), а также их hover-состояний (префиксы hover-t- и hover-bg-).
Генерируются классы для дочерних ссылок блоков (префиксы links-hover-t- и links-hover-bg-).
Также генерируются классы для border: префиксы bor- и hover-bor-.
Основные принципы настройки цветов
Berry CSS позволяет работать с классами цветов в трёх вариантах.
- Фиксированные цвета, например
t-color1,t-black,t-while - Цвета с градацией яркости:
t-red600,t-gray200 - Material Design с цветами primary, secondary и tertiary
Порядок настройки цветов
В начале указываются sass-переменные цветов (config/_colors1.scss). На их основе формируются группы (config/_colors2.scss). А группы уже участвуют в непосредственной генерации css-классов (config/_colors3.scss).
Фиксированные цвета
Фиксированные цвета указываются в любом удобном css-формате.
$white: #FFFFFF, $black: #000000, $color1: #0D6EFD, $color2: #6C757D, $color3: #28A745, $color4: #DC3545, $color5: #FFC107, $color6: #17A2B8, $color7: #A300D9,
При желании можно добавить другие цвета, например:
$color-info: #ffff26,
Цвета с градацией яркости
Для этих цветов формируется яркостная градация, где оттенок каждого цвета формируется в виде яркости от 50 до 950 (от светлого до тёмного).
Такие цвета рассчитываются автоматически на основе значения Hue (оттенок) и Saturation (насыщенность) цветовой модели HSL.
Каждый цвет задаётся в переменной $colorHS-ЦВЕТ
$colorHS-gray: (210, 5%), // Hue, Saturation $colorHS-red: ( 4, 95%), $colorHS-brown: ( 15, 47%), $colorHS-orange: ( 35, 99%), $colorHS-yellow: ( 53, 99%), $colorHS-lime: ( 64, 85%), $colorHS-green: (122, 68%), $colorHS-teal: (175, 58%), $colorHS-cyan: (186, 82%), $colorHS-blue: (206, 86%), $colorHS-indigo: (231, 70%), $colorHS-violet: (270, 91%), $colorHS-purple: (290, 68%), $colorHS-pink: (330, 82%),
Например для красного (red) это будет соответствовать выражению hsl(4, 95%, ЯРКОСТЬ).
Яркость (Lightness) рассчитывается автоматически как равномерная градация между оттенкам 100 и 900. Для яркостей 50 и 950 указываются отдельные значения, поскольку они отличаются от «стандартной» равномерной градации. Таким способом можно указать максимальную и минимальную яркость для всех оттенков.
$color-L50: 97%, $color-L100: 93%, $color-L900: 18%, $color-L950: 14%,
Например для $red100 это будет соответствовать выражению hsl(4, 95%, 93%), а для $red900 — hsl(4, 95%, 18%)
При необходимости можно переопределить любой цвет.
// свои цвета $colorHS-red: (2, 93%), // оттенок и насыщенность для красного $red450: #ff2626, // явное значение для оттенка 450
Переменные «чистого» цвета равны 500-степени и формируется автоматически: $red = $red500. Соответственно и классы t-red и t-red500 будут указывать на один цвет.
Инверсная шкала яркости
При необходимости можно инвертировать яркостную шкалу. Это может пригодится для сайтов с тёмным фоном. Обычная шкала строится от светлого к тёмному оттенку. Инверсная наоборот: от темного до светлого.
Инверсная шкала включается с помощью sass-переменной $colorHS-inverse-light:
$colorHS-inverse-light: true,
После компиляции цвета будут следовать от тёмного к светлому:
Material Design
Основной принцип Google Material Design заключается в том, что в дизайне определяется основной цвет (primary), вторичный (secondary) и может быть дополнительный (tertiary). Соответственно формируются классы: t-primary, t-secondary, t-tertiary и т.д. Каждый из этих цветов имеет светлые и тёмные оттенки.
Основу цвета составляет Hue (оттенок) и Saturation (насыщенность) цветовой модели HSL. Это совпадает с форматом цветов с градацией яркости:
$colorHS-primary: (206, 86%), $colorHS-secondary: (231, 70%), $colorHS-tertiary: (186, 82%),
Для каждого из этих цветов будет рассчитана яркостная градация от 50 до 950, поэтому будут доступны классы: t-primary400, t-secondary750, bg-tertiary400 и т.д.
Более подробно о настройке цветов Material Design см. на отдельной странице.
Группировка цветов
Основные цвета (red, blue и т.д.) группируются по оттенкам (автоматически). На их основе будут сформированы css-классы всех цветов. По умолчанию используются все оттенки.
Например, если используется красный цвет, но достаточно шага 100:
// шаг 100
$colors-group-red: (
"red100": $red100,
"red200": $red200,
"red300": $red300,
"red400": $red400,
"red500": $red500,
"red600": $red600,
"red700": $red700,
"red800": $red800,
"red900": $red900,
),
Собственная группа в $colors-group-my
Можно составить произвольную группу цветов в переменной $colors-group-my.
$colors-group-my: (
"color1": $color1,
"color2": $color2,
"color3": $color3,
"color4": $color4,
"color5": $color5,
"color6": $color6,
"color7": $color7,
"info": $color-info, // новый цвет
"white": $white,
"black": $black,
"gray": $gray,
"red": $red,
"pink": $pink,
"purple": $purple,
"violet": $violet,
"indigo": $indigo,
"blue": $blue,
"cyan": $cyan,
"teal": $teal,
"green": $green,
"lime": $lime,
"yellow": $yellow,
"orange": $orange,
"brown": $brown,
),
Генерация
Переменная $generation1 содержит группы, для которых будут созданы css-переменные каждого цвета (см. ниже).
$generation1: ( $colors-group-my, ),
Аналогичная переменная $generation2 содержит группы, для которых css-переменные создаваться не будут.
$generation2: (
$colors-group-primary,
$colors-group-secondary,
$colors-group-tertiary,
$colors-group-gray,
$colors-group-red,
$colors-group-pink,
$colors-group-purple,
$colors-group-violet,
$colors-group-indigo,
$colors-group-blue,
$colors-group-cyan,
$colors-group-teal,
$colors-group-green,
$colors-group-lime,
$colors-group-yellow,
$colors-group-orange,
$colors-group-brown,
),
Можно указать только те оттенки, которые реально востребованы в проекте.
$generation1: (
// если не нужны css-переменные, оставляем пустой список
),
$generation2: (
$colors-group-my,
$colors-group-gray,
$colors-group-primary,
$colors-group-secondary,
),
При этом цвета с других групп будут недоступны. Однако всё-также будут доступны их sass-переменные, которые можно использовать в других частях проекта.
Желательно использовать только те оттенки, которые будут реально востребованы, поскольку лишние увеличивают размер итогового css-файла.
По умолчанию в Berry CSS включены все цвета и оттенки.
CSS-переменные
Для группы $generation1, а также классов border и links автоматически формируются css-переменные, которые можно изменить без использования Sass.
Для этого достаточно указать их в :root
<style>
:root {
--color1: red;
--color2: green;
--color3: blue;
--red: maroon;
}
</style>
Изменить цвета можно и в пределах одного блока:
<div class="bg-color1">color1</div>
<div style="--color1: red">
<div class="bg-color1">изменённый color1</div>
</div>
или
<div class="bg-color1" style="--color1: red">изменённый color1</div>
Классы links
Эти классы отвечают за ссылки внутри блока. В этом примере цвета ссылок при наведении будут зелёного цвета (green).
<div class="links-hover-t-green">
<a href="#">ссылка</a>
<a href="#">ссылка</a>
<a href="#">ссылка</a>
</div>
Такая возможность нужна при вёрстке некоторых блоков, где нет возможности переопределить каждую ссылку. Чтобы не создавать излишний код, классы links формируются на основе цветов, указанных в $color_links_list.
$color_links_list: (
"color1": $color1,
"color2": $color2,
"color3": $color3,
"color4": $color4,
"color5": $color5,
"color6": $color6,
"color7": $color7,
"primary": $primary,
"secondary": $secondary,
... и т.д.
),
Для проекта можно задать свой вариант $color_links_list.
// свой список для цветов links
$color_links_list: (
"color1": $color1,
"color6": #a300d9,
'red': $red,
'red800': $red800,
'primary': $primary,
),
Классы цветов для border
Аналогичным образом настраиваются цвета для бордюров в переменной $color_border_list.
<div class="bor2 bor-red bor-solid hover-bor-blue">hover me</div>
В своём проекте можно переопределить список цветов в $color_border_list.
// свой список для цветов border
$color_border_list: (
'red': $red,
'red500': $red500,
'primary': $primary,
),