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