【CSS Modules】override-colorsアットルール記述子の使い方

Copy
1/*
2 * CSS Modulesで色を上書き（override）する一般的な方法です。
3 * 直接的に「@override-colors」というアットルールはCSS標準には存在しませんが、
4 * CSSカスタムプロパティ（CSS Variables）を使用することで、
5 * テーマやコンポーネントの文脈に応じて色を効率的に上書きできます。
6 *
7 * この例では、基本となる色のセットを定義し、
8 * 特定のクラス（例: .darkTheme）を適用することで、これらの色を上書きします。
9 */
10
11/*
12 * 1. ベースとなるカスタムプロパティ（色変数）を定義します。
13 *    これらはプロジェクト全体で利用できるデフォルトの色となります。
14 */
15:root {
16  --primary-color: #007bff; /* 主要なアクション色 */
17  --secondary-color: #6c757d; /* 補助的な色 */
18  --text-color: #343a40; /* 通常のテキスト色 */
19  --background-color: #ffffff; /* 背景色 */
20  --border-color: #dee2e6; /* ボーダー色 */
21}
22
23/*
24 * 2. 特定の状況（例: ダークモード、特定のセクション）で色を上書きするクラスを定義します。
25 *    これが「override-colors」のコンセプトに最も近いCSSでの実現方法です。
26 *    CSS Modulesでは、このクラスが自動的にスコープ化されます。
27 */
28.darkTheme {
29  --primary-color: #6610f2; /* ダークテーマの主要な色 */
30  --secondary-color: #6f42c1; /* ダークテーマの補助的な色 */
31  --text-color: #f8f9fa; /* ダークテーマのテキスト色 */
32  --background-color: #212529; /* ダークテーマの背景色 */
33  --border-color: #495057; /* ダークテーマのボーダー色 */
34}
35
36/*
37 * 3. 上記で定義したカスタムプロパティを利用するUIコンポーネントのスタイル例です。
38 *    コンポーネントが`.darkTheme`クラスを持つ要素の子孫である場合、
39 *    色は自動的に上書きされた値に切り替わります。
40 */
41.button {
42  background-color: var(--primary-color);
43  color: var(--text-color); /* 上書きされたテキスト色を使用 */
44  border: 1px solid var(--border-color);
45  padding: 10px 15px;
46  border-radius: 4px;
47  cursor: pointer;
48  font-size: 1rem;
49}
50
51.card {
52  background-color: var(--background-color);
53  color: var(--text-color);
54  border: 1px solid var(--border-color);
55  padding: 20px;
56  margin-bottom: 15px;
57  border-radius: 8px;
58  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
59}
60
61/*
62 * HTMLでの想定される使用例（CSS Modulesのビルド後に適用されるクラス名）:
63 * <div class="card">
64 *   <button class="button">デフォルトテーマのボタン</button>
65 * </div>
66 *
67 * <div class="card darkTheme">
68 *   <button class="button">ダークテーマのボタン</button>
69 * </div>
70 */

override-colorsは、CSS Modulesの文脈で色のテーマやスタイルを動的に上書き（オーバーライド）する概念的なアプローチを指します。これは直接的なCSSのアットルールとして存在するわけではなく、CSSカスタムプロパティ（CSS Variables）とクラスセレクタを組み合わせて実現されます。引数や戻り値は持ちません。

この手法では、まず:rootセレクタを用いて、--primary-colorや--text-colorのようなカスタムプロパティを定義し、これらをプロジェクト全体のベースとなるデフォルトの色セットとして設定します。次に、特定のテーマや状態（例えば.darkThemeクラス）を表すセレクタ内で、同じカスタムプロパティに対して異なる色を再定義します。

これにより、HTML要素にそのテーマクラス（例: <div class="darkTheme">）が適用されると、その要素とその子孫要素に対して、カスタムプロパティの値が上書きされた新しい色が自動的に適用されます。CSS Modulesを使用している場合、クラス名が自動的にスコープ化されるため、異なるコンポーネントやモジュール間での色の衝突を心配することなく、特定の状況に応じた色の調整を効率的に行えます。この方法を用いることで、コンポーネントの見た目を柔軟に変更し、保守性を高めることが可能です。

Copy
1/*
2 * Tailwind CSSのテーマカラーをCSSカスタムプロパティでオーバーライドする例です。
3 * 通常、Tailwind CSSのカラーはtailwind.config.jsで設定しますが、
4 * ここではその概念をCSS変数で表現し、必要に応じて色を上書きしたり、新しい色を追加したりする方法を示します。
5 * これは、システム全体のカラースキームを管理し、特定のテーマやコンポーネントで調整する際に役立ちます。
6 */
7
8/*
9 * 基本となるグローバルテーマカラーの定義。
10 * Tailwind CSSのデフォルトカラーやプロジェクトのベースカラーを模倣します。
11 */
12:root {
13  /* 基本的な灰色スケールの一部 */
14  --color-gray-50: #f9fafb;  /* Tailwindのgray-50 */
15  --color-gray-100: #f3f4f6; /* Tailwindのgray-100 */
16  --color-gray-700: #374151; /* Tailwindのgray-700 */
17
18  /* プライマリーカラー、セカンダリーカラーなどのセマンティックカラー */
19  --color-primary-500: #3b82f6; /* Tailwindのblue-500 */
20  --color-primary-600: #2563eb; /* Tailwindのblue-600 */
21  --color-accent-500: #f59e0b;  /* Tailwindのamber-500 */
22}
23
24/*
25 * 特定のセレクタ（例: ダークテーマや特定のセクション）内で、
26 * 上記のグローバルカラー定義をオーバーライド（上書き）する例。
27 * これにより、Tailwind CSSのテーマ拡張のように、特定の部分で色を変更できます。
28 */
29.dark-theme {
30  --color-gray-50: #111827;   /* ダークテーマ用にgray-50をオーバーライド */
31  --color-gray-100: #1f2937;  /* ダークテーマ用にgray-100をオーバーライド */
32  --color-primary-500: #60a5fa; /* ダークテーマ用にprimaryカラーを調整 */
33  --color-primary-600: #3b82f6; /* ダークテーマ用にprimaryカラーを調整 */
34}
35
36/*
37 * Tailwind CSSの `extend.colors` のように、
38 * 既存の色をオーバーライドしたり、完全に新しいカスタムカラーを追加する例です。
39 * ここでは、新しいブランドカラーを追加します。
40 */
41:root {
42  /* 既存のgray-100をプロジェクト固有の色にオーバーライド（ここでは同じ値を維持） */
43  --color-gray-100: #f3f4f6;
44
45  /* 新しいブランドカラーを追加 */
46  --color-brand-purple-500: #8b5cf6; /* Tailwindのpurple-500 */
47  --color-brand-purple-600: #7c3aed; /* Tailwindのpurple-600 */
48  --color-brand-teal-500: #2dd4bf;   /* Tailwindのteal-500 */
49}
50
51/*
52 * 上記で定義またはオーバーライドされたCSSカスタムプロパティを実際に使用する例です。
53 */
54.my-component {
55  background-color: var(--color-gray-100); /* オーバーライドされたgray-100を使用 */
56  color: var(--color-gray-700);
57  padding: 1rem;
58  border-radius: 0.5rem;
59  margin-bottom: 1rem;
60}
61
62.my-button {
63  background-color: var(--color-primary-500); /* オーバーライドされたprimaryカラーを使用 */
64  color: white;
65  padding: 0.75rem 1.5rem;
66  border-radius: 0.375rem; /* 6px */
67  font-weight: 600;
68  border: none;
69  cursor: pointer;
70}
71
72.my-button:hover {
73  background-color: var(--color-primary-600);
74}
75
76.my-custom-text {
77  color: var(--color-brand-purple-500); /* 新しく定義されたブランドカラーを使用 */
78  font-size: 1.25rem;
79  font-weight: 700;
80}

override-colorsは、CSSにおける色のオーバーライドやテーマ拡張の概念を指す記述子です。現在のCSSには直接の@override-colorsルールはありませんが、CSSカスタムプロパティ（CSS変数）でその機能を実現できます。これは引数や戻り値を持たず、カラースキームの定義と管理に役立ちます。

このサンプルコードは、CSSカスタムプロパティを用いて、Tailwind CSSのようなフレームワークにおけるカラーのオーバーライドや新規追加の方法を示します。:rootセレクタで--color-xxx形式のグローバルカラーを定義し、プロジェクト共通のカラースキームの基盤とします。

次に、.dark-themeのような特定のセレクタ内で同じカスタムプロパティを再定義すると、その範囲で色を上書きできます。これにより、テーマ切り替えのように柔軟な配色変更が可能です。また、:rootセレクタで--color-brand-xxxのような新しいカスタムプロパティを追加し、独自のブランドカラーなども容易に導入できます。

定義または上書きされた色は、var(--color-xxx)でbackground-colorやcolorなどのCSSプロパティに適用されます。この手法は、色の一元管理と迅速な調整を可能にし、メンテナンス性と拡張性の高いスタイル設計を実現します。