Сайт вебмастера

Цвета в Berry CSS

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

В последнее время я озадачился приведением 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 более привлекательными. Уверен, что такой подход лучше, чем субъективный подбор цветов.


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

Похожие записи

Оставьте комментарий!