Цвета (настройка)
Файлы модуля располагаются в каталоге colors
.
Модуль состоит из несколько настроечных файлов, а также файла _generation.scss
, который запускает непосредственный процесс создания css-классов.
Полный список доступных цветов можно посмотреть на отдельной странице.
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
Цвета настраиваются в файле _variables.scss
. В нём можно задать значения цветов, а также указать группы, которые будут участвовать в генерации css-классов.
Порядок настройки цветов
В начале указываются sass-переменные цветов. На их основе формируются группы. А группы уже участвуют в непосредственной генерации css-классов.
Фиксированные цвета
Фиксированные цвета указываются в любом удобном css-формате.
$white: #FFFFFF; $black: #000000; $color1: #0D6EFD; $color2: #6C757D; $color3: #28A745; $color4: #DC3545; $color5: #FFC107; $color6: #17A2B8; $color7: #A300D9;
При желании можно добавить другие цвета, например:
$color-info: #ffff26;
Можно указать значения цветов перед подключением Berry.
// свой список $color1: #0D6EFD; $color2: #6C757D; $color3: #28A745; $color4: #DC3545; $color5: #FFC107; $color6: #17A2B8; $color7: #A300D9; // подключаем Berry @import 'berry/berry';
Цвета с градацией яркости
Для этих цветов формируется яркостная градация, где оттенок каждого цвета формируется в виде яркости от 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%; // подключаем Berry @import 'berry/berry';
Например для красного (red) это будет соответствовать выражению hsl(4, 95%, ЯРКОСТЬ)
.
Яркость (Lightness) рассчитывается автоматически как равномерная градация между оттенкам 100 и 900. Для яркостей 50 и 950 указываются отдельные значения, поскольку они отличаются от «стандартной» равномерной градации. Таким способом можно указать максимальную и минимальную яркость для всех оттенков.
$color-L50: 97%; $color-L100: 93%; $color-L900: 18%; $color-L950: 14%; // подключаем Berry @import 'berry/berry';
Например для $red100 это будет соответствовать выражению hsl(4, 95%, 93%)
, а для $red900 — hsl(4, 95%, 18%)
При необходимости можно переопределить любой цвет перед подключением Berry.
// свои цвета $colorHS-red: 2, 93%; // оттенок и насыщенность для красного $red450: #ff2626; // явное значение для оттенка 450 // подключаем Berry @import 'berry/berry';
Переменные «чистого» цвета равны 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%; // подключаем Berry @import 'berry/berry';
Для каждого из этих цветов будет рассчитана яркостная градация от 50 до 950, поэтому будут доступны классы: t-primary400
, t-secondary750
, bg-tertiary400
и т.д.
Более подробно о настройке цветов Material Design см. на отдельной странице.
Группировка цветов
Основные цвета (red, blue и т.д.) группируются по оттенкам (автоматически). На их основе будут сформированы css-классы всех цветов. По умолчанию используются все оттенки, но если они не нужны, то следует их переопределить перед подключением Berry CSS.
Например, если используется красный цвет, но достаточно шага 100:
// шаг 100 $colors-group-red: ( "red100": $red100, "red200": $red200, "red300": $red300, "red400": $red400, "red500": $red500, "red600": $red600, "red700": $red700, "red800": $red800, "red900": $red900, ); // подключаем Berry @import 'berry/berry';
Собственная группа в $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, ); // подключаем Berry @import 'berry/berry';
При этом цвета с других групп будут недоступны. Однако всё-также будут доступны их 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, ); // подключаем Berry @import 'berry/berry';
Классы цветов для 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, ); // подключаем Berry @import 'berry/berry';