/**
* Design Tokens Extended — Senastra Design System
* =================================================
* Version: 1.0.0
*
* 既存 design-tokens.css を壊さずに追加する拡張レイヤー。
* design-tokens.css の後に読み込むこと。
*
*
*
*
* 追加カテゴリ:
* 8. Opacity — 不透明度スケール
* 9. Stroke — 線幅スケール
* 10. Container — コンテナ最大幅
* 11. Density — compact / comfortable / spacious 切替
* 12. Typography Extended — leading-display, font-variant
* 13. State Colors — selected, dragging, highlight
* 13b. Interactive State Layer — hover / pressed / focus / disabled
* 14. Component Tokens — panel, toolbar, tab, statusbar, splitter, badge
* 15. Data Visualization Palette — chart 12 colors (伝統色ベース)
*
* 参照ドキュメント: docs/06-multi-app-tokens.md
*/
/* ─────────────────────────────────────────────
8. OPACITY
───────────────────────────────────────────── */
:root {
--opacity-0: 0;
--opacity-5: 0.05;
--opacity-10: 0.10;
--opacity-20: 0.20;
--opacity-30: 0.30;
--opacity-50: 0.50;
--opacity-70: 0.70;
--opacity-90: 0.90;
--opacity-100: 1;
}
/* ─────────────────────────────────────────────
9. STROKE (線幅)
───────────────────────────────────────────── */
:root {
--stroke-hairline: 0.5px;
--stroke-thin: 1px;
--stroke-base: 1.5px;
--stroke-medium: 2px;
--stroke-thick: 3px;
--stroke-heavy: 4px;
}
/* ─────────────────────────────────────────────
10. CONTAINER (最大幅)
───────────────────────────────────────────── */
:root {
--container-xs: 480px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
}
/* ─────────────────────────────────────────────
11. DENSITY
─────────────────────────────────────────────
data-density 属性でUIの疎密を切り替える。
使い方: padding: calc(var(--space-2) * var(--density-spacing-scale));
───────────────────────────────────────────── */
:root,
[data-density="comfortable"] {
--density-spacing-scale: 1;
--density-text-offset: 0px;
--density-row-height: 40px;
--density-icon-size: 20px;
}
[data-density="compact"] {
--density-spacing-scale: 0.75;
--density-text-offset: -1px;
--density-row-height: 32px;
--density-icon-size: 16px;
}
[data-density="spacious"] {
--density-spacing-scale: 1.5;
--density-text-offset: 1px;
--density-row-height: 60px;
--density-icon-size: 30px;
/* タッチ・プレゼン向け: compact/comfortable の --toolbar-height / --tab-height は :root 固定のまま */
--toolbar-height: var(--density-row-height);
--tab-height: calc(var(--density-row-height) * 0.9);
}
/* ─────────────────────────────────────────────
12. TYPOGRAPHY EXTENDED
───────────────────────────────────────────── */
:root {
--leading-display: 1.05; /* 48px+ ヒーロー文字用 */
--font-variant-tabular: tabular-nums;
--font-variant-mono-digits: tabular-nums lining-nums;
}
/* ─────────────────────────────────────────────
13. STATE COLORS
─────────────────────────────────────────────
選択・ドラッグ・ハイライトなど、
5アプリ横断で共通利用する状態色。
───────────────────────────────────────────── */
/* ── Light Mode ── */
:root,
[data-theme="light"] {
--color-selected: var(--primitive-accent-100);
--color-selected-strong: var(--primitive-accent-200);
--color-dragging: var(--primitive-accent-50);
--color-drop-target: var(--color-accent-subtle);
--color-highlight: #FEFCE8;
--color-highlight-strong: #FEF08A;
}
/* ── Dark Mode ── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-selected: var(--primitive-accent-900);
--color-selected-strong: var(--primitive-accent-800);
--color-dragging: var(--primitive-accent-950);
--color-drop-target: var(--color-accent-subtle);
--color-highlight: #422006;
--color-highlight-strong: #854D0E;
}
}
[data-theme="dark"] {
--color-selected: var(--primitive-accent-900);
--color-selected-strong: var(--primitive-accent-800);
--color-dragging: var(--primitive-accent-950);
--color-drop-target: var(--color-accent-subtle);
--color-highlight: #422006;
--color-highlight-strong: #854D0E;
}
/* ─────────────────────────────────────────────
13b. INTERACTIVE STATE LAYER
─────────────────────────────────────────────
hover / pressed / focus / disabled の
グローバルな操作状態トークン。
テーマ側で上書き可能（C方式）。
───────────────────────────────────────────── */
/* ── Light Mode ── */
:root,
[data-theme="light"] {
/* Hover — 要素にポインタが乗った状態 */
--state-hover-bg: rgba(0, 0, 0, 0.04);
--state-hover-border: rgba(0, 0, 0, 0.08);
/* Pressed — クリック/タップ中 */
--state-pressed-bg: rgba(0, 0, 0, 0.08);
--state-pressed-scale: 0.98;
/* Focus — キーボードフォーカス */
--state-focus-ring-color: var(--color-accent);
--state-focus-ring-width: 2px;
--state-focus-ring-offset: 2px;
--state-focus-ring: 0 0 0 var(--state-focus-ring-offset) var(--color-bg),
0 0 0 calc(var(--state-focus-ring-offset) + var(--state-focus-ring-width)) var(--state-focus-ring-color);
/* Disabled — 操作不能 */
--state-disabled-opacity: 0.4;
--state-disabled-cursor: not-allowed;
--state-disabled-bg: var(--color-bg-inset);
--state-disabled-color: var(--color-text-tertiary);
}
/* ── Dark Mode ── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--state-hover-bg: rgba(255, 255, 255, 0.06);
--state-hover-border: rgba(255, 255, 255, 0.10);
--state-pressed-bg: rgba(255, 255, 255, 0.10);
}
}
[data-theme="dark"] {
--state-hover-bg: rgba(255, 255, 255, 0.06);
--state-hover-border: rgba(255, 255, 255, 0.10);
--state-pressed-bg: rgba(255, 255, 255, 0.10);
}
/* ─────────────────────────────────────────────
14. COMPONENT TOKENS
─────────────────────────────────────────────
5アプリで共通的に使われるレイアウト部品。
既存の --panel-bg, --panel-border はここで
正式に定義する（以前は各テーマ内で暗黙定義）。
───────────────────────────────────────────── */
:root {
/* Panel */
--panel-bg: var(--color-bg-subtle);
--panel-border: var(--color-border);
--panel-width-sm: 240px;
--panel-width-md: 320px;
--panel-width-lg: 420px;
/* Toolbar */
--toolbar-height: 40px;
--toolbar-bg: var(--color-surface);
/* Tab */
--tab-height: 36px;
--tab-active-border: var(--color-accent);
--tab-active-bg: var(--color-surface);
/* Status Bar */
--statusbar-height: 28px;
--statusbar-bg: var(--color-bg-inset);
/* Splitter (resizable boundary) */
--splitter-width: 4px;
--splitter-color: var(--color-border);
--splitter-hover: var(--color-accent);
/* Badge */
--badge-height: 20px;
--badge-radius: var(--radius-badge);
/* Form (DADS-03 — 状態表示標準化) */
--form-label-gap: var(--space-1-5); /* ラベル↔入力の隙間 6px */
--form-message-gap: var(--space-1); /* 入力↔補助文の隙間 4px */
--form-label-color: var(--color-text-primary);
--form-help-color: var(--color-text-tertiary);
--form-error-color: var(--color-error);
--form-success-color: var(--color-success);
/* Form Disabled / Readonly (DADS-11 — 規約分離) */
--form-disabled-bg: var(--state-disabled-bg); /* フォーム送信に含まれない */
--form-disabled-color: var(--state-disabled-color);
--form-disabled-opacity: var(--state-disabled-opacity);
--form-disabled-cursor: var(--state-disabled-cursor);
--form-readonly-bg: var(--color-bg-subtle); /* フォーム送信に含まれる */
--form-readonly-color: var(--color-text-secondary);
--form-readonly-border-style: dashed;
--form-readonly-cursor: default;
/* Form Layout (DADS-10 — 余白・並び規格化) */
--form-field-gap: var(--space-5); /* 縦方向フィールド間 20px */
--form-row-gap: var(--space-4); /* 横並びフィールド間 16px */
--form-section-gap: var(--space-8); /* フォームセクション間 32px */
--form-inline-label-width: 140px; /* 左ラベル幅（インライン配置） */
--form-max-width: 480px; /* 単カラムフォームの推奨最大幅 */
/* Form Counter (DADS-04 — 文字数カウンター) */
--form-counter-color: var(--color-text-tertiary); /* 通常 */
--form-counter-warn-color: var(--color-warning); /* 警告 */
--form-counter-over-color: var(--color-error); /* 超過 */
--form-counter-warn-threshold: 0.8; /* 80% から警告 — JS で参照可能 */
/* Status (DADS-09 — 非色依存化ルール: icon + label + color の 3 点セット) */
--status-icon-size: 16px; /* アイコン基本サイズ */
--status-gap: var(--space-1-5); /* アイコン↔テキスト間隔 */
--status-font: var(--text-sm);
--status-weight: 500;
--status-success-color: var(--color-success);
--status-success-bg: var(--color-success-subtle);
--status-warning-color: var(--color-warning);
--status-warning-bg: var(--color-warning-subtle);
--status-error-color: var(--color-error);
--status-error-bg: var(--color-error-subtle);
--status-info-color: var(--color-info);
--status-info-bg: var(--color-info-subtle);
--status-neutral-color: var(--color-text-secondary);
--status-neutral-bg: var(--color-bg-subtle);
/* Heading (DADS-08 — h1-h4 + セクションラベル規約) */
--heading-1-size: var(--text-4xl); /* 32px ページタイトル */
--heading-2-size: var(--text-3xl); /* 24px セクション */
--heading-3-size: var(--text-xl); /* 20px サブセクション */
--heading-4-size: var(--text-lg); /* 18px コンポーネント見出し */
--heading-weight-display: 700; /* h1 のみ bold */
--heading-weight: 600; /* h2-h4 semibold */
--heading-line-height: var(--leading-tight); /* 1.25 */
--heading-color: var(--color-text-primary);
--heading-gap-below: var(--space-4); /* 見出し↔直後コンテンツ */
--heading-gap-above: var(--space-8); /* セクション間マージン */
/* Section label (eyebrow / セクションラベル) */
--heading-label-size: var(--text-xs); /* 12px */
--heading-label-weight: 600;
--heading-label-color: var(--color-text-secondary);
--heading-label-tracking: var(--tracking-widest); /* 0.1em */
--heading-label-gap: var(--space-2); /* ラベル↔見出しの隙間 */
--heading-label-transform: uppercase;
/* Progress (DADS-07 — determinate / indeterminate / spinner) */
--progress-height: var(--space-2); /* 8px 標準トラック高 */
--progress-height-sm: var(--space-1-5); /* 6px 細め */
--progress-height-lg: var(--space-3); /* 12px 太め */
--progress-track-bg: var(--color-bg-inset);
--progress-fill-color: var(--color-accent);
--progress-fill-success: var(--color-success);
--progress-fill-warning: var(--color-warning);
--progress-fill-danger: var(--color-error);
--progress-radius: var(--radius-full);
--progress-duration: 300ms; /* fill transition */
--progress-indeterminate-ease: cubic-bezier(0.65, 0, 0.35, 1);
--progress-spinner-size: 40px;
--progress-spinner-size-sm: 24px;
--progress-spinner-size-lg: 56px;
--progress-spinner-width: var(--stroke-medium); /* 2px */
--progress-spinner-color: var(--color-accent);
--progress-spinner-track: var(--color-bg-inset);
--progress-spinner-duration: 700ms;
/* Combobox (DADS-06 — WAI-ARIA Combobox Pattern 1.2) */
--combobox-height: var(--density-row-height); /* 40px comfortable */
--combobox-padding-x: var(--space-3); /* 12px */
--combobox-bg: var(--color-surface);
--combobox-border: var(--color-border);
--combobox-border-focus: var(--state-focus-ring-color);
--combobox-radius: var(--radius-md);
--combobox-font: var(--text-sm);
--combobox-icon-size: var(--density-icon-size); /* 20px */
--combobox-listbox-shadow: var(--shadow-md);
--combobox-listbox-radius: var(--radius-md);
--combobox-option-height: var(--density-row-height); /* 40px */
--combobox-option-padding-x: var(--space-3);
--combobox-option-hover-bg: var(--state-hover-bg);
--combobox-option-active-bg: var(--color-selected);
--combobox-option-active-color: var(--color-text-primary);
--combobox-option-selected-bg: var(--color-selected-strong);
--combobox-option-check-color: var(--color-accent);
/* Search Box (DADS-05 — sm / md / lg サイズ規格) */
/* Height */
--search-sm-height: 32px;
--search-md-height: 40px;
--search-lg-height: 52px;
/* Horizontal padding */
--search-sm-padding-x: var(--space-2); /* 8px */
--search-md-padding-x: var(--space-3); /* 12px */
--search-lg-padding-x: var(--space-4); /* 16px */
/* Font */
--search-sm-font: var(--text-xs); /* 12px */
--search-md-font: var(--text-sm); /* 13px */
--search-lg-font: var(--text-base); /* 15px */
/* Icon size */
--search-sm-icon: 14px;
--search-md-icon: 16px;
--search-lg-icon: 20px;
/* Border radius */
--search-sm-radius: var(--radius-md); /* 8px */
--search-md-radius: var(--radius-md); /* 8px */
--search-lg-radius: var(--radius-xl); /* 16px */
/* Semantic */
--search-icon-color: var(--color-text-tertiary);
--search-bg: var(--color-bg-subtle);
--search-border: var(--color-border);
--search-border-focus: var(--state-focus-ring-color);
--search-shortcut-bg: var(--color-bg-inset);
}
/* ─────────────────────────────────────────────
15. DATA VISUALIZATION PALETTE
─────────────────────────────────────────────
チャート・グラフ用カラーパレット（12色）。
src/color-dictionary.json の和名に基づき選定し、
背景 #FAFAFA（ライト）/ #111118（ダーク）に対して 3:1 以上になるよう調整済み。
テーマ CSS で上書き可能（C方式）。
───────────────────────────────────────────── */
/* ── Light Mode ── */
:root,
[data-theme="light"] {
--palette-chart-1: #8F7FAF; /* 藤紫 */
--palette-chart-2: #4E7894; /* 花浅葱（浅葱系） */
--palette-chart-3: #A67C0F; /* 山吹色 */
--palette-chart-4: #D85A5A; /* 珊瑚色 */
--palette-chart-5: #5F8C6B; /* 若竹色 */
--palette-chart-6: #7B3FA3; /* 菫色 */
--palette-chart-7: #9E6E6E; /* 桜鼠 */
--palette-chart-8: #1F3E54; /* 鉄紺 */
--palette-chart-9: #B21F36; /* 紅系 */
--palette-chart-10: #5A7A1A; /* 鶯色 */
--palette-chart-11: #2E7DB8; /* 露草色 */
--palette-chart-12: #7A6548; /* 朽葉色 */
}
/* ── Dark Mode（明度を上げて視認性確保） ── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--palette-chart-1: #B8A6D4;
--palette-chart-2: #8FB4D4;
--palette-chart-3: #E4C14A;
--palette-chart-4: #FF9B9B;
--palette-chart-5: #7EB89A;
--palette-chart-6: #C9A3E8;
--palette-chart-7: #D4B0B0;
--palette-chart-8: #5A7FA3;
--palette-chart-9: #E85A72;
--palette-chart-10: #9BC44A;
--palette-chart-11: #7EC8F5;
--palette-chart-12: #B5A286;
}
}
[data-theme="dark"] {
--palette-chart-1: #B8A6D4;
--palette-chart-2: #8FB4D4;
--palette-chart-3: #E4C14A;
--palette-chart-4: #FF9B9B;
--palette-chart-5: #7EB89A;
--palette-chart-6: #C9A3E8;
--palette-chart-7: #D4B0B0;
--palette-chart-8: #5A7FA3;
--palette-chart-9: #E85A72;
--palette-chart-10: #9BC44A;
--palette-chart-11: #7EC8F5;
--palette-chart-12: #B5A286;
}