Цвет

Цвета

Цветовая палитра Bootstrap продолжает расширяться и становится более гибкой в версии 5.3.0. Мы добавили новые переменные для вторичных (secondary) и третичных (tertiary) цветов текста и фона, а также {color}-bg-subtle, {color}-border-subtle и {color}-text для наших тематических цветов. Эти новые цвета доступны через переменные Sass и CSS (но не через наши карты цветов или утилитарные классы) с целью облегчить настройку для различных цветовых режимов, таких как светлый и темный. Эти новые переменные глобально задаются на :root и адаптированы для нового темного режима, в то время как наши исходные тематические цвета остаются без изменений.

Цвета, заканчивающиеся на -rgb, предоставляют значения red, green, blue для использования в цветовых режимах rgb() и rgba(). Например, rgba(var(--bs-secondary-bg-rgb), .5).

Использование новых цветов

Эти новые цвета доступны через CSS-переменные и утилитарные классы — такие как --bs-primary-bg-subtle и .bg-primary-subtle — что позволяет вам создавать собственные CSS-правила с переменными или быстро применять стили с помощью классов. Утилиты построены на основе связанных CSS-переменных цвета, и поскольку мы настраиваем эти переменные для темного режима, они также адаптируются к цветовым режимам по умолчанию.

<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
  Пример элемента с утилитами
</div>

Тематические цвета

Мы используем подмножество всех цветов для создания меньшей цветовой палитры для построения цветовых схем, также доступных как переменные Sass и карта Sass в файле scss/_variables.scss.

Все эти цвета доступны как карта Sass $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Ознакомьтесь с нашей документацией по картам и циклам Sass, чтобы узнать, как изменить эти цвета.

Все цвета

Все цвета Bootstrap доступны как переменные Sass и карта Sass в файле scss/_variables.scss. Чтобы избежать увеличения размеров файлов, мы не создаем классы цвета текста или фона для каждой из этих переменных. Вместо этого мы выбираем подмножество этих цветов для палитры темы.

Обязательно следите за коэффициентом контрастности при настройке цветов. Как показано ниже, мы добавили три коэффициента контрастности к каждому из основных цветов: один для текущих цветов образца, один для белого и один для черного.

Примечания к Sass

Sass не может программно генерировать переменные, поэтому мы вручную создали переменные для каждого оттенка и тона. Мы указываем значение средней точки (например, $blue-500) и используем пользовательские цветовые функции для осветления (tint) или затемнения (shade) наших цветов с помощью функции Sass mix().

Использование mix() — это не то же самое, что lighten() и darken() — первая смешивает указанный цвет с белым или черным, а последние только регулируют значение яркости каждого цвета. В результате получается гораздо более полный набор цветов, как показано в этой демонстрации CodePen.

Наши функции tint-color() и shade-color() используют mix() вместе с нашей переменной $theme-color-interval, которая определяет ступенчатое процентное значение для каждого смешанного цвета, который мы производим. См. полный исходный код в файлах scss/_functions.scss и scss/_variables.scss.

Карты цветов Sass

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

• $colors — список всех наших доступных базовых цветов (500)
• $theme-colors — список всех цветов темы с семантическими именами (показано ниже)
• $grays — список всех оттенков и тонов серого

В scss/_variables.scss вы найдете цветовые переменные Bootstrap и карту Sass. Вот пример карты Sass $colors:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Добавляйте, удаляйте или изменяйте значения на карте, чтобы обновить, как они используются во многих других компонентах. К сожалению, в настоящее время не каждый компонент использует эту карту Sass. В будущих обновлениях мы постараемся улучшить это. А пока планируйте использовать переменные ${color} и эту карту Sass.

Пример

Вот как вы можете использовать их в своем Sass:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Утилиты цвета и фона также доступны для установки color и background-color с использованием значений цвета 500.

Генерация утилит

Bootstrap не включает утилиты color и background-color для каждой цветовой переменной, но вы можете создать их самостоятельно с помощью нашего Utility API и нашей расширенной карты Sass, добавленной в v5.1.0.

1. Для начала убедитесь, что вы импортировали наши функции, переменные, миксины и утилиты.
2. Используйте нашу функцию map-merge-multiple(), чтобы быстро объединить несколько карт Sass в новую карту.
3. Объедините эту новую комбинированную карту, чтобы дополнить любую утилиту с именем класса {color}-{level}.

Вот пример, который генерирует утилиты цвета текста (например, .text-purple-500), используя вышеуказанные шаги.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Это создаст новые утилиты .text-{color}-{level} для каждого цвета и уровня. То же самое можно сделать и с любыми другими утилитами и свойствами.