Модуль 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,

После компиляции цвета будут следовать от тёмного к светлому:

50100200300400500600700800900950

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>

color1

изменённый color1

Классы 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>

hover me

В своём проекте можно переопределить список цветов в $color_border_list.

// свой список для цветов border
$color_border_list: (
    'red':     $red,
    'red500':  $red500,
    'primary': $primary,
),