Цвета в Berry CSS
30-06-2024Reading time ~ 6 min.Berry CSS 484
В последнее время я озадачился приведением 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 более привлекательными. Уверен, что такой подход лучше, чем субъективный подбор цветов.
Слава Украине! Смерть рашистам!