Цвет

Цвета

Цветовая палитра Bootstrap продолжила расширяться и становиться более нюансированной в v5.3.0. Мы добавили новые переменные для secondary и tertiary цветов текста и фона, плюс {color}-bg-subtle, {color}-border-subtle и {color}-text-emphasis для наших цветов темы. Эти новые цвета доступны через переменные 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 переменными цвета, и поскольку мы настраиваем эти CSS переменные для темного режима, они также адаптивны к цветовому режиму по умолчанию.

<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
  Example element with utilities
</div>

Цвета темы

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

Все эти цвета доступны как карта 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) и используем пользовательские цветовые функции для тонирования (осветления) или затенения (затемнения) наших цветов через цветовую функцию mix() Sass.

Использование 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 для каждой цветовой переменной, но вы можете сгенерировать их самостоятельно с помощью нашего 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/variables-dark";
@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} для каждого цвета и уровня. Вы можете сделать то же самое для любой другой утилиты и свойства.