Цвета

Цвета

Добавлено в версии 5.3.0

Цветовая палитра Bootstrap продолжала расширяться и стала более детализированной в версии 5.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">
  Пример элемента с утилитами
</div>

Цвета темы

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

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

scss/_variables.scss:

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

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

Все цвета

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

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

Примечания по Sass

Sass не может программно генерировать переменные, поэтому мы вручную создали переменные для каждого оттенка самостоятельно. Мы указываем среднее значение (например, $blue-500) и используем пользовательские функции цвета, чтобы подкрасить (осветлить) или затемнить (затемнить затемнение) наши цвета с помощью функции цвета 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. Вот пример $colors карты Sass:

scss/_variables.scss:

$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 background500.

Утилиты для создания

Добавлено в версии 5.1.0

Bootstrap не включает в себя утилиты color и background-color для каждой переменной цвета, но вы можете сгенерировать их самостоятельно с помощью нашего utility API и наших расширенных карт Sass, добавленных в версии 5.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 } утилиты для каждого цвета и уровня. То же самое можно сделать и для любой другой утилиты и свойства.