Модуль colors

В Berry CSS цвета делятся на фиксированные и палитры.

Фиксированный цвета задаются произвольным образом в виде Sass-переменных: $color1 ... $color9, что эквивалентно css-переменным --color1 ... --color9.

Также есть цвета white (#fff) и black (#000).

Палитры образуются из опорного цвета, который задаётся в виде Hue и Saturation в модели HSL. Создаваемые цвета палитры будут иметь те же значения, но разную яркость (Lightness). Палитра представляет собой градацию от яркости 50 до 950 с шагом 50.

Для яркости 50 и 950 задаются отдельные значения Lightness. А яркость между 100 и 900 рассчитывается как равномерный диапазон. Если для яркости 100 значение Lightness равно 93% и для яркости 900 Lightness равен 18%, то шаг Lightness для остальных цветов будет равен 4,6875 $color-step: math.div($color-L100 - $color-L900, 16);.

Важно отметить, что хотя расчёт цветов выполняется в модели HSL, итоговое значение цвета получается как HEX-значение.

Исходные (опорные) цвета всех палитр Berry CSS — это цвета каталога RAL.

Sass variables

$white: #FFFFFF;
$black: #000000;

// https://en.wikipedia.org/wiki/List_of_RAL_colours

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

// цвета с градацией яркости — задаётся только Hue и Saturation
$colorHS-gray:      216,  5%; // оттенок совпадает с $colorHS-primary

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

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

// Значения Lightness для ступеней яркости: 50, 100, 900 и 950
$color-L50:  97%; // Lightness for color50
$color-L100: 93%; // Lightness for color100
$color-L900: 18%; // Lightness for color900
$color-L950: 14%; // Lightness for color950

// COLOR: gray, red, brown, orange, yellow, lime, green, teal, cyan, blue, indigo, violet, purple, pink, primary, secondary
$COLOR50, $COLOR100, $COLOR150 ... $COLOR950

CSS variables

// итоговый цвет генерируется на основе Sass-переменных
:root {
    --color1: #1B542C;
    --color2: #026A52;
    --color3: #21888F;
    --color4: #296478;
    --color5: #4D668E;
    --color6: #2B2C7C;
    --color7: #992572;
    --color8: #933D50;
    --color9: #AC323B;
    
    --white:  #FFFFFF;
    --black:  #000000;
    
    --gray:   #888c93;
    --red:    #d25549;
    --brown:  #b17d6a;
    --orange: #e39038;
    --yellow: #f1c92a;
    --lime:   #e8df33;
    --green:  #7eb467;
    --teal:   #6bb0a6;
    --cyan:   #5a9fc1;
    --blue:   #557ec6;
    --indigo: #6668b5;
    --violet: #8565b6;
    --purple: #ae6daa;
    --pink:   #c25987;
    
    --primary: #6886b3;
    --secondary: #73a8a6
    
    // COLOR: gray, red, brown, orange, yellow, lime, green, teal, cyan, blue, indigo, violet, purple, pink, primary, secondary
    --COLOR50: ...;
    --COLOR100: ...;
    --COLOR150: ...;
    --COLOR200: ...;
    --COLOR250: ...;
    --COLOR300: ...;
    --COLOR350: ...;
    --COLOR400: ...;
    --COLOR450: ...;
    --COLOR500: ...;
    --COLOR550: ...;
    --COLOR600: ...;
    --COLOR650: ...;
    --COLOR700: ...;
    --COLOR750: ...;
    --COLOR800: ...;
    --COLOR850: ...;
    --COLOR900: ...;
    --COLOR950: ...;
}

CSS classes

 // COLOR: gray, red, brown, orange, yellow, lime, green, teal, cyan, blue, indigo, violet, purple, pink, primary, secondary - step 50..950
 // color1, color2, color3, color4, color5, color6, color7, color8, color9 
 
.t-COLOR
.bg-COLOR
.hover-t-COLOR
.hover-bg-COLOR


// COLOR: gray, red, brown, orange, yellow, lime, green, teal, cyan, blue, indigo, violet, purple, pink, primary, secondary, color1, color2, color3, color4, color5, color6, color7, color8, color9 - not step
.links-hover-t-COLOR
.links-hover-bg-COLOR


// COLOR: gray, red, brown, orange, yellow, lime, green, teal, cyan, blue, indigo, violet, purple, pink, primary, secondary, color1, color2, color3, color4, color5, color6, color7, color8, color9 - not step
.bor-COLOR
.hover-bor-COLOR

Sample

: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%);
}