デザイントークン 04 実装(CSS 変数・Tailwind・shadcn・Style Dictionary)

:root {
  /* プリミティブ */
  --blue-500: oklch(0.55 0.2 260);
  --gray-900: oklch(0.2 0 0);
  --space-4: 1rem;
  /* セマンティック(プリミティブを参照) */
  --primary: var(--blue-500);
  --foreground: var(--gray-900);
}
.dark {
  --primary: oklch(0.7 0.15 260);   /* 役割は同じ、値だけ変える */
  --foreground: oklch(0.95 0 0);
}
.button {
  background: var(--primary);
  padding: var(--space-4);
}

@import "tailwindcss";
 
@theme {
  --color-brand-500: oklch(0.55 0.2 260);   /* → bg-brand-500 text-brand-500 */
  --spacing: 0.25rem;                        /* → p-4 = 1rem(4 × 0.25rem)*/
  --font-sans: "Noto Sans JP", system-ui, sans-serif;
  --radius-lg: 0.75rem;                      /* → rounded-lg */
  --breakpoint-md: 48rem;                    /* → md: */
}

:root { --primary: oklch(0.205 0 0); }
.dark { --primary: oklch(0.922 0 0); }
@theme inline { --color-primary: var(--primary); }   /* → bg-primary(モードで自動切替)*/

npm install -D style-dictionary
npx style-dictionary init basic      # 雛形

// config.json
{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "build/css/",
      "files": [{ "destination": "variables.css", "format": "css/variables" }]
    },
    "js": {
      "transformGroup": "js",
      "buildPath": "build/js/",
      "files": [{ "destination": "tokens.js", "format": "javascript/es6" }]
    }
  }
}

npx style-dictionary build

// Node から
import StyleDictionary from 'style-dictionary'
const sd = new StyleDictionary('config.json')
await sd.buildAllPlatforms()