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

Это третья часть серии о том, как использовать 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().

Заключение

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

1. Файл _palette.scss, содержащий все цветовые переменные.

2. Набор функциональных цветовых переменных и их оттенков, сгенерированных по правилам вашей цветовой системы.

3. Возможность переиспользовать все цветовые переменные по всему проекту.

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