jp-ui Foundations
使いどころ
- •コンポーネント実装時に Foundation トークン（色/タイポ/アイコン/形状/影）を参照する
- •Tokens/roles/tones の更新があった場合に内容を追随
参照先（Source of Truth）
- •色トーン生成:
scripts/generate-tones.mjs - •Role抽出:
scripts/extract-roles.mjs - •Role CSS生成:
scripts/generate-roles-css.mjs - •色入力:
tokens/source.json - •色トーン出力:
tokens/tones.json,tokens/tones.css - •Role出力:
tokens/roles.light.json,tokens/roles.dark.json,tokens/roles.css - •基本CSSトークン:
src/index.css
Foundation トークン
Typography
- •ベースフォント:
"Hiragino Sans", sans-serif - •
typesetting-body/typesetting-betagumi/typesetting-tsumegumi - •見出し:
typesetting-display,typesetting-headline,typesetting-title - •ラベル:
typesetting-label(tsumegumi),typesetting-editable-label(betagumi) - •キャプション:
typesetting-caption(betagumi)
Color
- •役割色:
tokens/roles.cssから--surface,--on-surface,--primary,--on-primaryなど - •パレット色:
--red,--on-red,--red-container,--on-red-container,--inverse-redなど - •Fixed:
--true-white,--true-black - •テーマクラス:
.theme-light,.theme-dark
Shape
- •
--radius-none: 0 - •
--radius-xs: 4px - •
--radius-s: 8px - •
--radius-m: 12px - •
--radius-l: 16px - •
--radius-xl: 28px - •
--radius-full: 8192px
Shadow
- •
--shadow-rgb: 0 0 0 - •
--elevation-0..5 - •
--elevation-1:0 0 8px 0 rgb(var(--shadow-rgb) / 0.2), 1px 1px 4px 0 rgb(var(--shadow-rgb) / 0.1) - •
--elevation-2:0 0 12px 0 rgb(var(--shadow-rgb) / 0.2), 1px 1px 6px 0 rgb(var(--shadow-rgb) / 0.15) - •
--elevation-3:0 0 16px 0 rgb(var(--shadow-rgb) / 0.2), 2px 2px 8px 0 rgb(var(--shadow-rgb) / 0.2) - •
--elevation-4:0 0 20px 0 rgb(var(--shadow-rgb) / 0.2), 3px 3px 12px 0 rgb(var(--shadow-rgb) / 0.2) - •
--elevation-5:0 0 24px 0 rgb(var(--shadow-rgb) / 0.2), 4px 4px 16px 0 rgb(var(--shadow-rgb) / 0.3)
Icons
- •アイコン:
src/assets/icons/Icon.tsx - •生成マップ:
src/assets/icons/iconMap.generated.ts - •アイコン一覧:
src/pages/IconsPage.tsx
更新時のルール
- •Foundation トークンを更新したら、このスキルの記載も更新する
- •新しい参照先ファイルを追加したら
参照先セクションに追加
スクリプト実行コマンド
- •
pnpm gen:tones - •
pnpm gen:roles - •
pnpm gen:roles-css