Material Design

Berry CSS поддерживает цветовую модель Material Design. Основной принцип Material Design заключается в том, что дизайн имеет основной цвет primary и вторичный цвет secondary.

Цветовые палитры

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

Таким образом формируется яркостная градация от 50 до 950 с шагом 50. Например палитры red, blue и green:

Каждому цвету соответствует css-класс, например: t-red600, bg-blue50, bor-green.

Палитры primary и secondary

В Material Design создаются две отдельные палитры, которые формируются по тем же правилам, что и другие палитры. Палитра primary формируется из оттенка основного в дизайне цвета, а secondary — вторичный оттенок.

По умолчанию в Berry CSS primary формируется из оттенка 216°, насыщенностью 33% (это цвет RAL 5000 Violet blue), а secondary — это 178° и 23% (RAL 6034 Pastel turquoise):

Для этих цветов создаются css-классы, например: t-primary600, bg-secondary50.

Изменение цвета primary и secondary

В Sass за эти оттенки отвечают переменные $colorHS-primary и $colorHS-secondary. Если вы используете sass-компиляцию, то просто укажите оттенок и насыщенность, всё остальное будет сформировано автоматически.

Точно так же можно переопределить цвета с помощью css-переменных.

Посмотреть код

:root {
    --primary-grad: 340deg;
    --primary-saturat: 60%;
    
    --secondary-grad: 25deg;
    --secondary-saturat: 90%;
    
    --primary950: hsl(var(--primary-grad) var(--primary-saturat) 7%);
    --primary900: hsl(var(--primary-grad) var(--primary-saturat) 10%);
    --primary850: hsl(var(--primary-grad) var(--primary-saturat) 15%);
    --primary800: hsl(var(--primary-grad) var(--primary-saturat) 20%);
    --primary750: hsl(var(--primary-grad) var(--primary-saturat) 25%);
    --primary700: hsl(var(--primary-grad) var(--primary-saturat) 30%);
    --primary650: hsl(var(--primary-grad) var(--primary-saturat) 35%);
    --primary600: hsl(var(--primary-grad) var(--primary-saturat) 40%);
    --primary550: hsl(var(--primary-grad) var(--primary-saturat) 45%);
    --primary500: hsl(var(--primary-grad) var(--primary-saturat) 50%);
    --primary450: hsl(var(--primary-grad) var(--primary-saturat) 55%);
    --primary400: hsl(var(--primary-grad) var(--primary-saturat) 60%);
    --primary350: hsl(var(--primary-grad) var(--primary-saturat) 65%);
    --primary300: hsl(var(--primary-grad) var(--primary-saturat) 70%);
    --primary250: hsl(var(--primary-grad) var(--primary-saturat) 75%);
    --primary200: hsl(var(--primary-grad) var(--primary-saturat) 80%);
    --primary150: hsl(var(--primary-grad) var(--primary-saturat) 85%);
    --primary100: hsl(var(--primary-grad) var(--primary-saturat) 90%);
    --primary50:  hsl(var(--primary-grad) var(--primary-saturat) 94%);
    
    --secondary950: hsl(var(--secondary-grad) var(--secondary-saturat) 7%);
    --secondary900: hsl(var(--secondary-grad) var(--secondary-saturat) 10%);
    --secondary850: hsl(var(--secondary-grad) var(--secondary-saturat) 15%);
    --secondary800: hsl(var(--secondary-grad) var(--secondary-saturat) 20%);
    --secondary750: hsl(var(--secondary-grad) var(--secondary-saturat) 25%);
    --secondary700: hsl(var(--secondary-grad) var(--secondary-saturat) 30%);
    --secondary650: hsl(var(--secondary-grad) var(--secondary-saturat) 35%);
    --secondary600: hsl(var(--secondary-grad) var(--secondary-saturat) 40%);
    --secondary550: hsl(var(--secondary-grad) var(--secondary-saturat) 45%);
    --secondary500: hsl(var(--secondary-grad) var(--secondary-saturat) 50%);
    --secondary450: hsl(var(--secondary-grad) var(--secondary-saturat) 55%);
    --secondary400: hsl(var(--secondary-grad) var(--secondary-saturat) 60%);
    --secondary350: hsl(var(--secondary-grad) var(--secondary-saturat) 65%);
    --secondary300: hsl(var(--secondary-grad) var(--secondary-saturat) 70%);
    --secondary250: hsl(var(--secondary-grad) var(--secondary-saturat) 75%);
    --secondary200: hsl(var(--secondary-grad) var(--secondary-saturat) 80%);
    --secondary150: hsl(var(--secondary-grad) var(--secondary-saturat) 85%);
    --secondary100: hsl(var(--secondary-grad) var(--secondary-saturat) 90%);
    --secondary50:  hsl(var(--secondary-grad) var(--secondary-saturat) 94%);
}

Такой подход позволяет менять дизайн без перекомпиляции основного css-файла. При этом не нужно будет менять css-классы цветов в HTML-разметке.

Точно также можно переопределить любую другую цветовую палитру Berry CSS.

Монохромная палитра

Данная палитра подразумевает использование цветов с одним и тем же оттенком — значения Hue и Saturation одинаковые для всех цветов, а меняется только яркость (Lightness). Такая палитра создаётся в Berry CSS автоматически.

Существует несколько цветовых теорий, позволяющих выбрать подходящие цвета. Можно воспользоваться сервисом Adobe Color (лучше в режиме HSB).

Пример для красного цвета.

red

Последовательная (аналоговая или родственная) палитра

В ней, помимо primary, используются ещё два цвета, которые расположены рядом по цветовому кругу.

lime

green

teal

Треугольная палитра (триада)

Строится аналогично последовательной из трёх оттенков, только между оттенками должно быть примерно 120°.

red

indigo

green

Комплиментарная (контрастная) палитра

Эта палитра состоит из двух цветов, диаметрально расположенных на цветовом круге.

blue

brown

Пример цветового решения

Данный дизайн использует primary, secondary в цветах Berry CSS по умолчанию. Наведите указателем на цвет, чтобы получить по нему всплывающую подсказку.

Lorem ipsum dolor

Lorem ipsum dolor sit amet consectetur

Lorem ipsum dolor sit amet consectetur Link