Это третья часть серии о том, как использовать UI-библиотеки и интегрировать их в существующую архитектуру. В этот раз речь пойдёт о работе с цветовыми переменными: как извлечь цветовую палитру, переиспользовать её и упростить дальнейшую разработку и поддержку вашего проекта.

Во второй части мы рассмотрели, как интегрировать переменные Bootstrap в ваш проект, что позволяет легко кастомизировать дизайн без переназначения стилей. К концу той статьи у вас появился единый файл, содержащий все Bootstrap переменные, с возможностью переиспользования их в стилях компонентов Angular.

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

Цветовая палитра — одна из самых важных частей любой дизайн-системы — и также одна из самых сложных. Если обращаться с ней неправильно, это приведёт к путанице и сложностям при разработке в дальнейшем. Чтобы этого избежать, вам нужна чёткая, хорошо структурированная цветовая система, которая остаётся последовательной во всём проекте.

Если всё сделано правильно, вы сможете разрабатывать и поддерживать весь проект, независимо от его размера, используя только 6–8 основных цветов и их оттенков. В Bootstrap такие цвета по умолчанию:

$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;

Названия переменных могут отличаться в других фреймворках, но концепция остаётся той же. Поскольку цветовая палитра играет ключевую роль, я обычно выношу такие переменные в отдельный файл - _palette.scss.

Файл _palette.scss

Создайте этот файл в папке /src/styles/variables, рядом с _bootstrap.scss.

Следующим шагом переместите импорт функций Bootstrap из _bootstrap.scss в _palette.scss, чтобы вы могли их там использовать:

// to support Angular components styles
@import 'bootstrap/scss/functions';

Теперь перенесите из _bootstrap.scss всё, начиная с 9-й строки по 359-ю, и вставьте в _palette.scss. Это включает:

// Color system

// scss-docs-start gray-color-variables
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
...
...
...
$warning-border-subtle: tint-color($warning, 60%);
$danger-border-subtle: tint-color($danger, 60%);
$light-border-subtle: $gray-200;
$dark-border-subtle: $gray-500;
// scss-docs-end theme-border-subtle-variables

Индексный файл для всех переменных

Поскольку теперь вы используете несколько файлов с переменными, вам понадобится индексный файл, чтобы импортировать их все вместе. Создайте новый файл variables.scss в той же папке /src/styles/variables и добавьте следующее:

@import './_palette.scss';
@import './_bootstrap.scss';

Внесите правку в vendor.scss — теперь он должен импортировать variables.scss вместо _bootstrap.scss. Сделайте то же самое в любых стилях компонентов Angular, где вы хотите использовать переменные.

Теперь давайте вернёмся к _palette.scss и рассмотрим, как Bootstrap структурирует свою систему цветов.

Цветовая палитра Bootstrap

Существует два основных способа управления цветами в вашем проекте. Первый — когда все цветовые переменные названы по значению цвета:

...
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
...

и по значению оттенков цвета:

$blue-300: tint-color($blue, 40%);
$blue-400: tint-color($blue, 20%);
$blue-500: $blue;
$blue-600: shade-color($blue, 20%);
$blue-700: shade-color($blue, 40%);

tint-color() и shade-color() - это Bootstrap функции для генерации более светлых или тёмных вариантов цвета. Подробнее об этом можно узнать в официальной документации.

Эта система позволяет вам использовать цветовые переменные, не беспокоясь об их конкретных hex-значениях. Это удобно для больших проектов с устойчивыми цветовыми палитрами.

Однако в Bootstrap также есть функциональные цветовые переменные, такие как $primary, $success, $info и т.д., что может сбивать с толку, когда они используются вместе с цветовыми переменными, приведёнными выше. Рассмотрим следующий пример:

// hero button
.hero__btn {  
  background: $primary;  
  
  &:hover,  
  &:active {    
    background: $blue-600;  
  }
}

Здесь мы устанавливаем primary цвет для кнопки, но чтобы сделать его темнее для состояний при наведении и при клике, нам нужно использовать другой набор цветовых переменных. Это потому, что Bootstrap сначала определяет все цветовые переменные и их оттенки, а уже потом добавляет функциональные цветовые переменные.

Лично я предпочитаю другой подход.

Функциональная цветовая палитра

В качестве альтернативного решения мы можем рассмотреть, какую цветовую палитру использует Ng-Zorro. Они также определяют брендовые и функциональные цвета, но сначала назначают оба типа переменных:

Ng-Zorro использует Less вместо Scss. Примеры далее используют синтаксис Less, который немного отличается.

// ----- Colors ----------- //
@primary-color: @blue-6;
@info-color: @primary-color;
@success-color: @green-6;
@processing-color: @blue-6;
@error-color: @red-5;

И только после этого они генерируют различные оттенки но уже функциональных переменных:

// Color used by default to control hover and active backgrounds and for
// alert info backgrounds
...
@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
@primary-5: color(~`colorPalette('@{primary-color}', 5) `); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
...

colorPalette() — это функция Ng-Zorro, которая создаёт различные оттенки из заданного цвета и выбранного индекса. Подробнее можно узнать в официальной документации.

Давайте перепишем наш предыдущий пример, используя эту систему:

// hero button
.hero__btn {  
  background: @primary-color;  
  
  &:hover,  
  &:active {    
    background: @primary-7;  
  }
}

С такой структурой вы можете использовать только функциональные переменные и их оттенки в своем проекте. Это минимизирует путаницу и упрощает смену всей цветовой схемы — просто измените переменную @primary-color, и все связанные оттенки сгенерируются автоматически.

Вы можете воссоздать такую же систему в Bootstrap, определив набор новых переменных, используя функции tint-color() и shade-color().

Заключение

В этой статье мы рассмотрели, как структурировать вашу цветовую палитру, чтобы проект оставался понятным и легко масштабируемым. К этому моменту у вас должно быть:

Файл _palette.scss, содержащий все цветовые переменные.
Набор функциональных цветовых переменных и их оттенков, сгенерированных по правилам вашей цветовой системы.
Возможность переиспользовать все цветовые переменные по всему проекту.

В следующем посте мы рассмотрим, как модифицировать элементы форм и компоненты Bootstrap, когда изменения нельзя реализовать через Bootstrap переменные. Следите за обновлениями!

Как использовать любой CSS-фреймворк в вашем проекте — Часть 3