Цвет

Цвета темы

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

$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, добавленных в версии 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/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}утилиты для каждого цвета и уровня. Вы можете сделать то же самое для любой другой утилиты и свойства.