Цвета в Berry CSS

30-06-2024Время чтения ~ 6 мин.Berry CSS 340

В последнее время я озадачился приведением Berry CSS к своим задумкам. За пару лет их накопилось предостаточно. Я их оформлял как отдельные стили и конфигурации в Berry CSS, но сейчас решил их внести как основной код фреймворка. В будущем это будет новая 5-я версия.

Часть переделок затрагивает классы, которые использовали только Sass-переменные. Теперь многие из них используют CSS-переменные. Например, раньше стили задавались примерно так:

$pre-bg-color: $primary50 !default;
$pre-text-color: $gray800 !default;

pre {
    background: $pre-bg-color;
    color: $pre-text-color;
}

Сейчас это будет так:

$pre-bg-color: var(--primary50) !default;
$pre-text-color: var(--gray800) !default;

:root {
    --pre-bg-color: $pre-bg-color;
    --pre-text-color:  $pre-text-color;
}

pre {
    background: var(--pre-bg-color);
    color: var(--pre-text-color);
}

Соответственно --pre-bg-color будет задан либо в :root (как в примере), либо в дефолтном параметре css-функции var().

Что это даёт в итоге?

Первое — это сохраняется возможность использовать Berry CSS с привычной sass-компиляцией. Если стоит задача сгенерировать полностью готовый css-файл, то прописываем sass-переменные в конфигурации Berry и получаем ровно то, что нужно.

Второе — это появляется возможность редактировать стили через css-переменные. То есть подключаем дефолтный berry.css, а потом отдельный css-файл или STYLE где меняем только то, что нужно.

Формально можно просто переписать css-классы, но с помощью css-переменных мы достигаем большей чистоты кода. К тому же появляется возможность кастомизировать не все элементы класса, а только конкретного блока. Например так выглядит стандартная цитата BLOCKQUOTE:

Пример блока blockquote.

А это кастомизированный BLOCKQUOTE.

<blockquote style="--blockquote-background: #e0f0f0; --blockquote-border-left: 3px dotted #80a0a0; --blockquote-border-radius: 0">А это кастомизированный.</blockquote>

Следующее важное изменение касается работы с цветом. По такому же принципу все цвета теперь можно изменить через css-переменные. То есть теперь нет необходимости в sass-компиляции для формирования собственной палитры. Просто пишем небольшой код для :root.

Важно ещё и то, что такой подход позволил создавать «перекрёстные» переменные. Например цвет блока задаётся не как hex-значение, а как css-переменная. В этом случае получается такой css-код:

.некий-класс {
    color: var(--text-color, var(--primary600));
}

Класс будет использовать переменную --text-color, но если её нет, то переменную --primary600. Таким образом, если класс изначально завязан на дефолтную палитру, то, изменив её, автоматом получим и измененный цвет класса.

На обновлённой странице тестирования дизайна сайта есть кнопки Sample design, которые меняют css-переменные основных палитр. Обратите внимание, как сразу же меняются все остальные элементы, которые их используют.

В Berry CSS 5.0 я решил отказаться от третьей палитры tertiary, поскольку реальная её потребность почти нулевая. Поэтому оставил только primary и secondary. Но стал вопрос о том, какие именно использовать цвета.

У разработчика всегда есть проблема выбора цвета, поскольку угадать пожелания клиента невозможно. Поэтому, я, как и все остальные, использовал палитры, которые просто точно отображали цвет. Предполагалось, что если не нравится, то делай свои цвета. Но, сейчас я уже не хочу следовать такой практике, а предоставить пользователю сразу «красивые» цвета. Потому что у клиента тоже может быть проблема выбора цвета и если ему предложить симпатичный цвет, то это упростит ему жизнь.

Поэтому стал вопрос: откуда именно взять «красивые» цвета?

Конечно, же я смотрел и другие фреймворки, но там цвета в массе своей «неестественные».

Насколько вообще можно судить субъективно.

Я не художник или дизайнер, поэтому всегда использовал цвета с уже готовых палитр, например с адобовского сервиса по работе с цветами. Но, такой подход, также слишком субъективен (там каждый дизайнер придумывает свои варианты), поэтому я решил обратиться к профессиональным готовым цветам. Первое, что приходит на ум — это Pantone.

Ещё в бытность работы с типографиями, я помню, как мы пытались использовать пантоновские цвета, но это всегда был кошмар... Да и сам по себе Pantone — это всё-таки CMYK. Чтобы его получить при печати — это ещё тот квест. Ну и CMYK сильно зависит от массы параметров и так просто на RGB не ложится.

После этого я вспомнил, что пару месяцев назад подбирал краску, и там был каталог RAL. Так вот RAL — это Reichs-Ausschuß für Lieferbedingungen — немецкая группа, которая в 1927 году изобрела группу из 40 фиксированных цветов, каждый из которых имел цифровой номер. Постепенно каталог RAL расширялся и сейчас, если я верно понял, то он состоит из 1825 цветов.

Интересно, что, хотя изначально RAL-цвета также были только как печатные карточки, то сейчас они переведены в привычный нам sRGB, HEX, sRGB HSL и даже CIELAB.

См. список цветов RAL

Таким образом, можно использовать профессиональные цвета RAL и в Berry CSS. Понятно, что все их добавить не получится, да и нет смысла, но можно подобрать RAL-цвета так, чтобы они максимально охватывали весь цветовой круг. Википедия даёт точные значения HSL, поэтому Berry CSS сама построит яркостные градации на основе оттенка и насыщенности.

Текущий вариант получился такой:

$colorHS-red:         5, 60% !default; // RAL 3013 Tomato red
$colorHS-brown:      16, 31% !default; // RAL 8002 Signal brown
$colorHS-orange:     31, 75% !default; // RAL 1034 Pastel yellow
$colorHS-yellow:     48, 88% !default; // RAL 1018 Zinc yellow
$colorHS-lime:       57, 80% !default; // RAL 1016 Sulfur yellow
$colorHS-green:     102, 34% !default; // RAL 6017 May green
$colorHS-teal:      172, 30% !default; // RAL 6033 Mint turquoise
$colorHS-cyan:      200, 45% !default; // RAL 5009 Azure blue
$colorHS-blue:      218, 50% !default; // RAL 5026 Pearl night blue
$colorHS-indigo:    238, 35% !default; // RAL 5022 Night blue
$colorHS-violet:    264, 36% !default; // RAL 4005 Blue lilac
$colorHS-purple:    304, 29% !default; // RAL 4008 Signal violet
$colorHS-pink:      334, 46% !default; // RAL 4003 Heather violet

На странице дизайна сайта внизу есть плашки с этими цветами — по ним можно судить о примерном RAL-цвете.

Хотя точного hex-соответствия не получится, поскольку итоговый цвет рассчитывается автоматом по яркости.

Фиксированные цвета color1..9 я взял из точных hex-значений RAL-цветов так, чтобы они не повторяли по оттенкам остальные палитры.

$color1: #1B542C !default; // RAL 6035 Pearl green 138
$color2: #026A52 !default; // RAL 6016 Turquoise green 163
$color3: #21888F !default; // RAL 5018 Turquoise blue 181
$color4: #296478 !default; // RAL 5025 Pearl Gentian blue 194
$color5: #4D668E !default; // RAL 5023 Distant blue 213
$color6: #2B2C7C !default; // RAL 5002 Ultramarine blue 225
$color7: #992572 !default; // RAL 4006 Traffic purple 319
$color8: #933D50 !default; // RAL 4002 Red violet 349
$color9: #AC323B !default; // RAL 3031 Orient red 357

Сами цвета располагаются от зелёного до красного так, чтобы два соседних цвета могли комбинироваться как смежные, а если нужен контраст, то между ними будет несколько цветов. Это что-то вроде разных цветовых гармоний. Либо их можно использовать как триады:

• color1, color2, color3
• color4, color5, color6
• color7, color8, color9

Ну и в качестве основных палитр primary и secondary:

$colorHS-primary:   216, 33% !default; // RAL 5000 Violet blue
$colorHS-secondary: 178, 23% !default; // RAL 6034 Pastel turquoise

Раньше в Berry CSS primary совпадал с blue, но я решил отойти от этой схемы, чтобы primary и secondary были отдельными палитрами. В сумме получается уникальных 16 палитр и 9 фиксированных цветов (+ черный и белый).

Поскольку все цвета приведены из одного каталога, то между ними можно строить цветовые отношения. Например если мы хотим получить контраст к blue, то используем orange или yellow. Это гармоничное сочетание. Если хотим более резкое, то это будет lime или green. Поскольку всё базируется на оттенке цвета, то несложно посчитать разницу и решить подходит это сочетание или нет.

Тут ещё есть возможность оперировать primary, но в сочетании с другой палитрой (не secondary). Когда дизайнер определился с primary, то он может сразу посчитать какие (готовые) палитры будут к ней работать контрастом, а какие близкие по оттенку.

Использование профессиональных оттенков RAL делает цвета Berry CSS более привлекательными. Уверен, что такой подход лучше, чем субъективный подбор цветов.

Слава Украине! Смерть рашистам!