色 Color

色

Bootstrapのカラーパレットは、v5.3.0で拡大し、より微妙になり続けています。secondaryおよびtertiaryテキストと背景色、さらにテーマカラーの{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>

テーマカラー

すべての色のサブセットを使用して、カラースキームを生成するための小さなカラーパレットを作成します。これらは、Sass変数およびBootstrapのscss/_variables.scssファイルの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つのコントラスト比を追加しました。スウォッチの現在の色に対するもの、白に対するもの、黒に対するものです。

Sassに関する注意事項

Sassはプログラム的に変数を生成できないため、すべてのティントとシェードの変数を手動で作成しました。中間点の値(例: $blue-500)を指定し、カスタムカラー関数を使用して、Sassのmix()カラー関数を介して色をティント(明るく)またはシェード(暗く)します。

mix()の使用は、lighten()およびdarken()と同じではありません。前者は指定された色を白または黒とブレンドしますが、後者は各色の明度値のみを調整します。その結果、このCodePenデモで示されているように、より完全な色のスイートになります。

tint-color()およびshade-color()関数は、$theme-color-interval変数と一緒にmix()を使用します。この変数は、生成する各混合色のステップ化されたパーセンテージ値を指定します。完全なソースコードについては、scss/_functions.scssおよびscss/_variables.scssファイルをご覧ください。

Color 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;
}

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

ユーティリティの生成

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

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}ユーティリティが生成されます。他のユーティリティとプロパティについても同じことができます。