jp-ui Foundations

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