CSS Custom Properties実践ガイド ―
デザイントークンとして使いこなす

// SASS: コンパイル後は値が直接埋め込まれる
$primary: #059669;
$spacing-md: 16px;

.button {
  background: $primary;    // → background: #059669; に置換
  padding: $spacing-md;   // → padding: 16px; に置換
}
// JavaScriptから後から変更する方法がない

/* CSS: ブラウザが実行時に評価するライブな値 */
:root {
  --color-primary: #059669;
  --spacing-md: 16px;
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
}
/* JavaScriptから変更可能 */
/* document.documentElement.style.setProperty('--color-primary', '#0891b2') */

/* グローバル定義 */
:root {
  --color-accent: #059669;
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
}

/* .card コンポーネントのスコープで上書き */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 20px;
}

/* バリアント：.card--featured スコープだけ変数を上書き */
.card--featured {
  --card-bg: #ecfdf5;
  --card-border: #6ee7b7;
  /* .card のスタイルは一切書き換えない。変数だけ変える。 */
}

/* .card--danger バリアント */
.card--danger {
  --card-bg: #fef2f2;
  --card-border: #fca5a5;
}

/* ライトモード（デフォルト） */
:root {
  --bg-base: #ffffff;
  --bg-surface: #f9fafb;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
  --accent: #059669;
}

/* ダークモード：変数の値だけを入れ替える */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-base: #0f172a;
    --bg-surface: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border: #334155;
    --accent: #34d399;
  }
}

/* コンポーネント側：var()で参照するだけ。ダーク対応は自動。 */
body {
  background: var(--bg-base);
  color: var(--text-primary);
}
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
}

/* CSS: data-theme属性でテーマ切り替え */
[data-theme="dark"] {
  --bg-base: #0f172a;
  --text-primary: #f1f5f9;
  /* ... */
}

// JavaScript: ボタンクリックでテーマ切り替え
const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
  const html = document.documentElement;
  const isDark = html.getAttribute('data-theme') === 'dark';
  html.setAttribute('data-theme', isDark ? 'light' : 'dark');
});

:root {
  --green: #059669;
  --dark-green: #047857;
  --light-green: #6ee7b7;
}
/* 問題：ダークモードにすると --green が明るくなることがある。
   変数名と値が乖離して混乱を招く。 */

:root {
  /* プリミティブトークン（パレット。直接使わない） */
  --palette-green-500: #059669;
  --palette-green-700: #047857;
  --palette-green-200: #6ee7b7;

  /* セマンティックトークン（役割ベース。これをコンポーネントで使う） */
  --color-accent: var(--palette-green-500);
  --color-accent-hover: var(--palette-green-700);
  --color-accent-subtle: var(--palette-green-200);

  /* スペーシングトークン */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

// 変数の値を取得
const value = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-accent').trim();
// → "#059669"

// 変数の値を設定（グローバル）
document.documentElement.style.setProperty(
  '--color-accent', '#2563eb'
);

// 特定の要素スコープで変数を設定
const card = document.querySelector('.card');
card.style.setProperty('--card-bg', '#eff6ff');