カラー

カラー

Bootstrapの色パレットは、v5.3.0でさらに拡張され、よりニュアンスが増しました。セカンダリとターシャリのテキストと背景の色、さらにテーマカラーの`{color}-bg-subtle`、`{color}-border-subtle`、`{color}-text-emphasis` の新しい変数を追加しました。これらの新しいカラーは、SassとCSS変数を通して利用可能ですが（カラーマップやユーティリティクラスではありません）、ライトとダークのような複数のカラーモードでのカスタマイズを容易にすることを目的としています。これらの新しい変数はグローバルに`:root`に設定され、新しいダークカラーモードに合わせて調整されますが、元のテーマカラーは変更されません。

`-rgb`で終わるカラーは、`rgb()`と`rgba()`カラーモードで使用するための`red, green, blue`の値を提供します。たとえば、`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>

テーマカラー

すべてのカラーのサブセットを使用して、カラースキームを作成するためのより小さなカラーパレットを作成します。これは、Bootstrapの`scss/_variables.scss`ファイル内のSass変数とSassマップとしても利用できます。

これらのカラーはすべて、Sassマップ`$theme-colors`として利用できます。

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

これらのカラーの変更方法については、Sassマップとループに関するドキュメントを参照してください。

すべてのカラー

すべてのBootstrapカラーは、`scss/_variables.scss`ファイル内のSass変数とSassマップとして利用できます。ファイルサイズを大きくしないように、これらの変数のそれぞれに対してテキストまたは背景色のクラスを作成していません。代わりに、これらのカラーのサブセットをテーマパレットとして選択しています。

カラーをカスタマイズする際には、コントラスト比を必ず監視してください。以下に示すように、主要なカラーそれぞれに3つのコントラスト比を追加しました。1つは見本の現在のカラー用、1つは白に対するもの、1つは黒に対するものです。

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マップ

BootstrapのソースSassファイルには、カラーのリストとその16進値をすばやく簡単にループ処理するための3つのマップが含まれています。

• `$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;
}

カラーおよび背景ユーティリティクラスは、`500`カラー値を使用して`color`および`background-color`を設定するためにも使用できます。

ユーティリティの生成

Bootstrapには、すべてのカラー変数に対する`color`および`background-color`ユーティリティは含まれていませんが、ユーティリティAPIとv5.1.0で追加された拡張Sassマップを使用して、自分で生成することができます。

1. まず、関数、変数、mixin、およびユーティリティをインポートしていることを確認してください。
2. 複数のSassマップを新しいマップに迅速にマージするには、`map-merge-multiple()`関数を使用します。
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}`ユーティリティが生成されます。他のユーティリティやプロパティについても同様に実行できます。