Модуль colors
В Berry CSS цвета делятся на фиксированные и яркостные палитры. Они основаны на css-переменных.
Фиксированный цвета задаются в виде css-переменных:
:root { --white: #FFFFFF; --black: #000000; --color1: #1B542C; --color2: #026A52; --color3: #21888F; --color4: #296478; --color5: #4D668E; --color6: #2B2C7C; --color7: #992572; --color8: #933D50; --color9: #AC323B; }
Палитры образуются из опорного цвета, который задаётся в виде Hue и Saturation в модели HSL.
:root { --primary-hue: 216deg; /* For Material Design */ --primary-sat: 33%; --gray-hue: var(--primary-hue); --gray-sat: 7%; --red-hue: 5deg; --red-sat: 60%; --brown-hue: 16deg; --brown-sat: 31%; --orange-hue: 31deg; --orange-sat: 75%; --yellow-hue: 48deg; --yellow-sat: 88%; --lime-hue: 57deg; --lime-sat: 80%; --green-hue: 102deg; --green-sat: 34%; --teal-hue: 172deg; --teal-sat: 30%; --cyan-hue: 200deg; --cyan-sat: 45%; --blue-hue: 218deg; --blue-sat: 50%; --indigo-hue: 238deg; --indigo-sat: 35%; --violet-hue: 264deg; --violet-sat: 36%; --purple-hue: 304deg; --purple-sat: 29%; --pink-hue: 334deg; --pink-sat: 46%; }
Исходные (опорные) цвета всех палитр Berry CSS — это цвета каталога RAL.
Создаваемые цвета палитры будут иметь те же значения, но разную яркость (Lightness). Палитра представляет собой градацию от яркости 50 до 950 с шагом 50. Каждый цвет создаётся следующим образом («яркостная шкала»):
:root { --ЦВЕТ950: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 9%); --ЦВЕТ900: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 13%); --ЦВЕТ850: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 17%); --ЦВЕТ800: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 21%); --ЦВЕТ750: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 26%); --ЦВЕТ700: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 31%); --ЦВЕТ650: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 36%); --ЦВЕТ600: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 41%); --ЦВЕТ550: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 46%); --ЦВЕТ500: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 50%); --ЦВЕТ450: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 54%); --ЦВЕТ400: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 59%); --ЦВЕТ350: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 65%); --ЦВЕТ300: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 70%); --ЦВЕТ250: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 75%); --ЦВЕТ200: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 81%); --ЦВЕТ150: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 86%); --ЦВЕТ100: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 91%); --ЦВЕТ50: hsl(var(--ЦВЕТ-hue) var(--ЦВЕТ-sat) 96%); --ЦВЕТ: var(--ЦВЕТ500); }
- где ЦВЕТ
это один из вариантов: "primary", "gray", "red", "brown", "orange", "yellow", "lime", "green", "teal", "cyan", "blue", "indigo", "violet", "purple", "pink".
Все эти css-переменные используются в многочисленных классах цветов. Для того, чтобы переопределить цветовую палитру, достаточно переопределить соответствующие css-переменные --{цвет}-hue
и --{цвет}-sat
, например для красной палитры:
:root { --red-hue: 8deg; --red-sat: 42%; }
Это автоматически переопределит всю яркостную палитру red
под цветовой тон пользователя.
Точно также можно переопределить любую другую css-переменную любого цвета.
Контраст цветов
При верстке нужно следить за степенью яркостной контрастности. Предполагается, что цвета, которые имеют разницу в 100 единиц, например primary300
и primary400
, имеют примерно 10% разность в яркости. С точки зрения читабельности текста (рекомендация WCAG), текст должен иметь разницу примерно 40-50%, что соответствует разности в 400..500 единиц Berry CSS, например primary300
и primary700
будут иметь хороший контраст.
- Разница в 100-200 по Berry CSS (10%-20% lightness) — слабый контраст.
- Разница в 300-400 (30%-40%) — хороший контраст.
- Разница 500 и больше — высокая читаемость.
<div class="t-primary100 bg-primary200 pad15 rounded5"> Контрастность +100 (близкие цвета) </div> <div class="t-primary100 bg-primary600 pad15 rounded5"> Контрастность +500 (высокий контраст) </div>
Верстка Material Design
Концепция Material Design предполагает использование палитры primary
при верстке. В Berry CSS в качестве основной палитры используется только primary
, но нет secondary
(акцентная палитра, см. ниже), поскольку в её качестве можно использовать любую другую, например red
, blue
, gray
и т.д. Всё это есть в Berry CSS.
При выполнении верстки лучше использовать именно цвета primary
, поскольку многие классы и переменные Berry CSS уже адаптированы к ней. Например кнопка <button class="button">
настроена на цвета primary
. То же самое касается цветов теней, градаций, элементов форм и т.д. Поэтому когда верстка в палитре primary
, то достаточно только соблюдать яркостную градацию, не задумываясь о том, какие это реально цвета.
Например вместо <div class="t-red500 bg-red100">текст</div>
, лучше использовать <div class="t-primary500 bg-primary100">текст</div>
. Таким образом цвета будут автоматически подстроены под текущий цвет палитры primary
.
Цветовые палитры в Berry CSS настраиваются в виде оттенка vue и насыщенности saturation модели HSL. Поэтому, если верстка выполнена в палитре primary, то всегда можно сменить её цветовой тон.
Делается это с помощью css-переменных. Для всего сайта это можно сделать в секции :root
, либо в конкретном блоке индивидуально. В этом примере явно указывается значение hue
и saturation
.
:root { --primary-hue: 123deg; // hue --primary-sat: 41%; // saturation }
В этом примере можно изменить цвет primary
на уже существующую палитру red
:
:root { --primary-hue: var(--red-hue); --primary-sat: var(--red-sat); }
Преимущество верстки в палитре primary
в том, что для смены цвета не требуется менять html-код.
Использование акцентного оттенка
В Berry CSS возможно задание акцентного цвета в виде нескольких css-переменных. Акцентный цвет строится на основе оттенка primary с произвольным смещением:
--accent-hue-offset: -30deg; --accent-sat-offset: 0%; --accent-hue: calc(var(--primary-hue) + var(--accent-hue-offset)); --accent-sat: calc(var(--primary-sat) + var(--accent-sat-offset));
Обратите внимание, что у accent
нет собственных классов, поэтому он предназначен только для использования в определении цвета через hsl()
. Например:
--var-background-color: hsl(var(--accent-hue) var(--accent-sat) 40%); --var-text-color: hsl(var(--accent-hue) var(--accent-sat) 90%);
Использование смещений позволяет создавать динамические цвета, которые будут сами подстраиваться под primary-палитру.