iCAS Design System v2.1

テーマ切替（Variants）

base token は :root 共通。primary 系 (color.primary.* / focus.ring) と surface.primarySoft のみを [data-theme="cam|fwd"] で上書き。

カラートークン

セマンティック命名で用途別に分離。v2.1 で surface.primarySoft（variant 別の不透明な薄色背景）と alert.softBg（要確認状態カード）を追加。

Text — 文字色 v2.0 維持

Surface — 面（背景）

Border — 罫線 v2.0 維持

Primary — ブランドカラー

Status — 成功 / 警告 / 危険

CF Band — 連結CF精算表 12 色 v2.0 維持

タイポグラフィ v2.0 維持

フォント: Inter + Noto Sans JP/SC。base 16px、line-height 1.5。高密度テーブル用の逃がし token --text-table: 14px。

スペーシング v2.0 維持

Splashtop 8 base スケール。--space-1 ～ --space-8。

Radius — 角丸

用途別に 7 種類。v2.1 で radius.pill (999px) と radius.circle (50%) を追加。pill はアクションボタンで頻用、circle はアバター画像専用。

Shadow — 影

v2.0 の 3 種 (tooltip / popover / modal) に加え、v2.1 で shadow.elevated（pill ボタンの立体感）と shadow.popoverHeavy（重厚 dropdown 用）を追加。

/* elevated: 3 段重ね — pill ボタンの立体感 */
box-shadow:
  0 3px 0 color-mix(in srgb, var(--accent) 22%, var(--color-border)),  /* 下の厚み */
  0 4px 8px rgba(0,0,0,0.10),                                          /* 落ち影 */
  inset 0 1px 0 rgba(255,255,255,0.85);                                /* 上のハイライト */

/* popoverHeavy: 重厚 dropdown */
box-shadow:
  0 12px 32px rgba(15,23,42,0.22),                                     /* 大きな影 */
  0 4px 10px var(--color-primary-shadow),                              /* アクセント色の影 */
  inset 0 1px 0 rgba(255,255,255,0.85);                                /* 内側ハイライト */

Motion v2.0 維持

duration 3 種類、easing 3 種類のみ（一本主義）。

Duration

Easing

Layout & Control Height

寸法基準。v2.1 で grid.cols.5（KPI 5 列レイアウト）を追加。

コンポーネント例

v2.0 既定の角丸 4px に加え、v2.1 で pill 形 (999px) + elevated shadow のバリアントを追加。

Buttons (v2.0 既定)

Pill ボタン NEW v2.1

Button heights (sm / md / lg) v2.0 維持

Status badges

ローディング表示 — 6 パターン v2.0 維持

「いま画面に見えているものは、ロード完了後も同じものか？」で使い分け。

トークン生成パイプライン

design/DESIGN.md (frontmatter YAML)
        │
        ├──▶ build-theme-css.mjs (Node)
        │       │
        │       ├──▶ design/theme-overrides.yaml (CAM/FWD 差分)
        │       │
        │       ▼
        │   src/styles/theme.generated.css
        │       :root { --color-text: ...; --radius-pill: 999px; ... }
        │       [data-theme="cam"] { --color-primary: #206BC4; --color-surface-primary-soft: #EAF1FB; ... }
        │       [data-theme="fwd"] { --color-primary: #0D9488; --color-surface-primary-soft: #EBF7EF; ... }
        │
        ▼
src/styles/globals.css  @import './theme.generated.css';
        │
        ▼
全ページ・全コンポーネント

設計思想 — 5 原則 + v2.1 追補

1. DESIGN.md がトークンの single source of truth — globals.css に token を直書きしない。
2. Variants は post-process で展開 — [data-theme="cam|fwd"] ブロックは build-theme-css.mjs が生成。
3. CAM/FWD の差分は最小限 — primary 系 (color.primary.* / focus.ring) + surface.primarySoft v2.1 追加 のみ。
4. Bootstrap/Tabler との橋渡し — --bs-* / --tblr-* は base token を参照。
5. テーブル系は逃がし token — --text-table: 14px。
6. v2.1 追加 Pill / Elevated は明示的な意図表明 — radius=4 が既定。pill (999px) と elevated shadow は「立体感・アクション喚起」の意図がある場合のみ採用する。
7. v2.1 追加 独自実装より既存 pattern 採用 — linked-accordion / portal-slot / table-row-compact 等のパターンは命名済。新規 page で類似実装が必要なら、まず既存パターンの転用を検討。