/** * Design Tokens — Senastra Design System * ========================================= * Version: 1.0.0 * * 使い方: * HTML: * CSS: color: var(--color-text-primary); * JS: getComputedStyle(el).getPropertyValue('--color-accent') * * 構成: * 1. Color — ライト / ダークモード * 2. Typography — フォント・サイズ・ウェイト・行間 * 3. Spacing — 余白・グリッド * 4. Border Radius — 角丸 * 5. Shadow — 影 * 6. Motion — アニメーション速度・イージング * 7. Z-index — 重なり順 */ /* ───────────────────────────────────────────── 1. COLOR SYSTEM ───────────────────────────────────────────── ライトモードをデフォルトとして定義し、 [data-theme="dark"] または prefers-color-scheme でダークモードに切り替わります。 ───────────────────────────────────────────── */ :root { /* --- Primitive (固定カラー・変えない) --- */ /* Neutral */ --primitive-neutral-0: #FFFFFF; --primitive-neutral-50: #FAFAFA; --primitive-neutral-100: #F4F4F6; --primitive-neutral-200: #E8E8EC; --primitive-neutral-300: #D0D0D8; --primitive-neutral-400: #A8A8B4; --primitive-neutral-500: #787888; --primitive-neutral-600: #525260; --primitive-neutral-700: #363644; --primitive-neutral-800: #1E1E28; --primitive-neutral-900: #111118; --primitive-neutral-950: #0C0C10; /* Accent — Indigo (ブランドカラー) */ --primitive-accent-50: #EDEDFB; --primitive-accent-100: #D8D8F6; --primitive-accent-200: #B4B4EE; --primitive-accent-300: #8A8AE4; --primitive-accent-400: #6E6EE0; --primitive-accent-500: #5B5BD6; /* Primary accent */ --primitive-accent-600: #4848C4; --primitive-accent-700: #3636A0; --primitive-accent-800: #27277A; --primitive-accent-900: #1A1A50; --primitive-accent-950: #10103A; /* Semantic — Status */ --primitive-success: #3DD68C; --primitive-warning: #F5A623; --primitive-error: #E54D2E; --primitive-info: #3B82F6; } /* ── Light Mode (default) ── */ :root, [data-theme="light"] { /* Background */ --color-bg: var(--primitive-neutral-50); --color-bg-subtle: var(--primitive-neutral-100); --color-bg-inset: var(--primitive-neutral-200); /* Surface (card / panel) */ --color-surface: var(--primitive-neutral-0); --color-surface-hover: var(--primitive-neutral-50); --color-surface-active: var(--primitive-neutral-100); --color-surface-overlay: rgba(255, 255, 255, 0.85); /* Border */ --color-border: var(--primitive-neutral-200); --color-border-strong: var(--primitive-neutral-300); --color-border-focus: var(--primitive-accent-500); /* Text */ --color-text-primary: #0C0C10; --color-text-secondary: #52526A; --color-text-tertiary: #9898A8; --color-text-disabled: #BBBBC8; --color-text-inverse: #FAFAFA; --color-text-on-accent: #FFFFFF; /* Accent */ --color-accent: var(--primitive-accent-500); --color-accent-hover: var(--primitive-accent-600); --color-accent-active: var(--primitive-accent-700); --color-accent-subtle: var(--primitive-accent-50); --color-accent-muted: var(--primitive-accent-100); /* Status */ --color-success: #2BB87A; --color-success-subtle: #EDFBF4; --color-warning: #D4891E; --color-warning-subtle: #FEF6E7; --color-error: #C93B1A; --color-error-subtle: #FEF0EC; --color-info: #2563EB; --color-info-subtle: #EFF6FF; /* Shadow base (light mode) */ --shadow-color: 0deg 0% 0%; } /* ── Dark Mode ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0C0C10; --color-bg-subtle: #111118; --color-bg-inset: #0A0A0D; --color-surface: #18181F; --color-surface-hover: #1E1E27; --color-surface-active: #25252F; --color-surface-overlay: rgba(18, 18, 24, 0.90); --color-border: #25252F; --color-border-strong: #35353F; --color-border-focus: var(--primitive-accent-400); --color-text-primary: #EEEEF2; --color-text-secondary: #9898A8; --color-text-tertiary: #5A5A6A; --color-text-disabled: #38383C; --color-text-inverse: #0C0C10; --color-text-on-accent: #FFFFFF; --color-accent: var(--primitive-accent-400); --color-accent-hover: var(--primitive-accent-300); --color-accent-active: var(--primitive-accent-200); --color-accent-subtle: var(--primitive-accent-950); --color-accent-muted: var(--primitive-accent-900); --color-success: #3DD68C; --color-success-subtle: #0D2A1E; --color-warning: #F5A623; --color-warning-subtle: #2A1E08; --color-error: #E54D2E; --color-error-subtle: #2A100A; --color-info: #60A5FA; --color-info-subtle: #0D1A2E; --shadow-color: 0deg 0% 0%; } } [data-theme="dark"] { --color-bg: #0C0C10; --color-bg-subtle: #111118; --color-bg-inset: #0A0A0D; --color-surface: #18181F; --color-surface-hover: #1E1E27; --color-surface-active: #25252F; --color-surface-overlay: rgba(18, 18, 24, 0.90); --color-border: #25252F; --color-border-strong: #35353F; --color-border-focus: var(--primitive-accent-400); --color-text-primary: #EEEEF2; --color-text-secondary: #9898A8; --color-text-tertiary: #5A5A6A; --color-text-disabled: #38383C; --color-text-inverse: #0C0C10; --color-text-on-accent: #FFFFFF; --color-accent: var(--primitive-accent-400); --color-accent-hover: var(--primitive-accent-300); --color-accent-active: var(--primitive-accent-200); --color-accent-subtle: var(--primitive-accent-950); --color-accent-muted: var(--primitive-accent-900); --color-success: #3DD68C; --color-success-subtle: #0D2A1E; --color-warning: #F5A623; --color-warning-subtle: #2A1E08; --color-error: #E54D2E; --color-error-subtle: #2A100A; --color-info: #60A5FA; --color-info-subtle: #0D1A2E; --shadow-color: 0deg 0% 0%; } /* ───────────────────────────────────────────── 2. TYPOGRAPHY ───────────────────────────────────────────── */ :root { /* Font Family */ --font-sans: 'Inter', 'Hiragino Sans', 'Yu Gothic UI', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; /* Font Size Scale (px / rem) */ --text-2xs: 10px; /* 0.625rem — ラベル・バッジ */ --text-xs: 12px; /* 0.75rem — キャプション */ --text-sm: 13px; /* 0.8125rem — サブテキスト */ --text-base: 15px; /* 0.9375rem — 本文 */ --text-md: 16px; /* 1rem — 本文(大) */ --text-lg: 18px; /* 1.125rem — 小見出し */ --text-xl: 20px; /* 1.25rem — 見出しS */ --text-2xl: 24px; /* 1.5rem — 見出しM */ --text-3xl: 30px; /* 1.875rem — 見出しL */ --text-4xl: 36px; /* 2.25rem — 見出しXL */ --text-5xl: 48px; /* 3rem — ヒーローS */ --text-hero: 64px; /* 4rem — ヒーローL */ --text-display: 80px; /* 5rem — ディスプレイ */ /* Font Weight */ --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line Height */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.75; --leading-loose: 2; /* Letter Spacing */ --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.16em; } /* ───────────────────────────────────────────── 3. SPACING 4px ベースグリッド ───────────────────────────────────────────── */ :root { --space-px: 1px; --space-0: 0px; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-28: 112px; --space-32: 128px; --space-40: 160px; --space-48: 192px; --space-64: 256px; /* Component-specific shortcuts */ --page-padding-x: var(--space-6); /* 24px */ --page-padding-x-lg: var(--space-16); /* 64px */ --section-gap: var(--space-20); /* 80px */ --card-padding: var(--space-6); /* 24px */ --form-gap: var(--space-4); /* 16px */ } /* ───────────────────────────────────────────── 4. BORDER RADIUS ───────────────────────────────────────────── */ :root { --radius-none: 0px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* Component defaults */ --radius-button: var(--radius-md); /* 8px */ --radius-input: var(--radius-md); /* 8px */ --radius-card: var(--radius-lg); /* 12px */ --radius-modal: var(--radius-xl); /* 16px */ --radius-tooltip: var(--radius-sm); /* 4px */ --radius-badge: var(--radius-full); /* pill */ } /* ───────────────────────────────────────────── 5. SHADOW ───────────────────────────────────────────── */ :root { --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.05); --shadow-sm: 0 1px 3px hsl(var(--shadow-color) / 0.07), 0 1px 2px hsl(var(--shadow-color) / 0.04); --shadow-md: 0 4px 8px hsl(var(--shadow-color) / 0.08), 0 2px 4px hsl(var(--shadow-color) / 0.04); --shadow-lg: 0 8px 24px hsl(var(--shadow-color) / 0.10), 0 4px 8px hsl(var(--shadow-color) / 0.06); --shadow-xl: 0 16px 48px hsl(var(--shadow-color) / 0.12), 0 8px 16px hsl(var(--shadow-color) / 0.06); --shadow-2xl: 0 32px 64px hsl(var(--shadow-color) / 0.16), 0 16px 32px hsl(var(--shadow-color) / 0.08); /* Inset / inner */ --shadow-inset: inset 0 1px 2px hsl(var(--shadow-color) / 0.08); /* Focus Ring (DADS-01 — outline-based, :focus-visible) */ --ring-focus-color: var(--color-border-focus); --ring-focus-width: 2px; --ring-focus-offset: 2px; /* Focus ring (box-shadow 版 — 後方互換) */ --ring-focus: 0 0 0 3px hsl(var(--shadow-color) / 0.04), 0 0 0 var(--ring-focus-width) var(--ring-focus-color); /* Glow (accent highlight) */ --glow-accent: 0 0 24px hsl(248deg 70% 65% / 0.20); } /* ───────────────────────────────────────────── 6. MOTION ───────────────────────────────────────────── */ :root { /* Duration */ --duration-instant: 0ms; --duration-fast: 100ms; --duration-base: 150ms; --duration-slow: 250ms; --duration-slower: 400ms; /* Easing */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Composite transitions */ --transition-fast: var(--duration-fast) var(--ease-out); --transition-base: var(--duration-base) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); --transition-spring: var(--duration-slower) var(--ease-spring); /* Semantic Motion — 意味付きアニメーション */ /* Enter — 要素の登場（メニュー展開、モーダル表示、ドロワー出現） */ --motion-enter-duration: var(--duration-base); --motion-enter-easing: var(--ease-out); --motion-enter: var(--motion-enter-duration) var(--motion-enter-easing); /* Exit — 要素の退場（メニュー閉じ、トースト消去） */ --motion-exit-duration: var(--duration-fast); --motion-exit-easing: var(--ease-in); --motion-exit: var(--motion-exit-duration) var(--motion-exit-easing); /* Move — 空間的な移動（パネルリサイズ、ドラッグ移動、スライド） */ --motion-move-duration: var(--duration-slow); --motion-move-easing: var(--ease-in-out); --motion-move: var(--motion-move-duration) var(--motion-move-easing); /* Emphasis — 注意喚起（バッジ点滅、エラーシェイク、パルス） */ --motion-emphasis-duration: var(--duration-slower); --motion-emphasis-easing: var(--ease-spring); --motion-emphasis: var(--motion-emphasis-duration) var(--motion-emphasis-easing); /* Fade — 控えめなフェード（ツールチップ、ステータス遷移） */ --motion-fade-duration: var(--duration-fast); --motion-fade-easing: var(--ease-linear); --motion-fade: var(--motion-fade-duration) var(--motion-fade-easing); /* Reduce level: partial (default) / full */ --motion-reduce-level: partial; /* Spring parameters — Flutter / Rust ネイティブ用（CSS では参照しない、SSOT 共有用） */ --spring-enter-damping: 0.8; --spring-enter-stiffness: 300; --spring-emphasis-damping: 0.5; --spring-emphasis-stiffness: 200; --spring-move-damping: 0.9; --spring-move-stiffness: 250; } /* アクセシビリティ: モーション低減（段階的） */ @media (prefers-reduced-motion: reduce) { :root { /* partial: emphasis と move はゼロ、fade は残す */ --motion-enter-duration: 0ms; --motion-exit-duration: 0ms; --motion-move-duration: 0ms; --motion-emphasis-duration: 0ms; /* fade は残す（opacity のみの穏やかなアニメーション） */ --motion-fade-duration: var(--duration-fast); /* 既存 transition-* との後方互換 */ --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; --motion-reduce-level: partial; } } /* full reduction: ユーザーが明示的に全アニメーション無効化 */ [data-motion-reduce="full"] { --motion-enter-duration: 0ms; --motion-exit-duration: 0ms; --motion-move-duration: 0ms; --motion-emphasis-duration: 0ms; --motion-fade-duration: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; --motion-reduce-level: full; } /* ───────────────────────────────────────────── 7. Z-INDEX ───────────────────────────────────────────── */ :root { --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 20; --z-sticky: 30; --z-overlay: 40; --z-modal: 50; --z-toast: 60; --z-tooltip: 70; } /* ───────────────────────────────────────────── LAYER 3: 機能名前空間 (--senastra-{feature}-*) ───────────────────────────────────────────── 2026-05-10 新設。アプリ非依存の機能ファミリ専用トークン。 詳細: docs/01-tokens.md §6 ───────────────────────────────────────────── */ /* ── markdown 機能 (HrdayaFlow MD-* + Senastra 5/12 markdown skeleton 経由) ── */ :root { --markdown-code-bg: var(--color-bg-subtle); --markdown-quote-border: var(--color-accent); --markdown-quote-bg: var(--color-bg-subtle); --markdown-link-color: var(--color-accent); --markdown-table-header-bg: var(--color-bg-inset); --markdown-table-border: var(--color-border); --markdown-hrule: var(--color-border); --markdown-mark-bg: var(--color-warning-subtle); --markdown-monospace-font: "Fira Code", "JetBrains Mono", "Consolas", monospace; } /* ── zoom 機能 (Senastra 全アプリ共通 Ctrl± / Ctrl+wheel ズーム、2026-05-11) ── */ :root { --zoom-min: 0.5; /* 最小倍率 (50%) */ --zoom-max: 2.0; /* 最大倍率 (200%) */ --zoom-step: 0.1; /* Ctrl± 1 ステップ (10%) */ --zoom-wheel-sensitivity: 0.001; /* Ctrl+wheel 連続ズーム感度 */ --zoom-default: 1.0; /* 起動時デフォルト (100%) */ } /* ── live-theming 機能 (Senastra Live Theming, 2026-05-11) ── */ :root { --live-theming-picker-bg: var(--color-bg); --live-theming-picker-surface: var(--color-surface); --live-theming-picker-border: var(--color-border); --live-theming-picker-highlight: var(--color-accent); --live-theming-picker-text: var(--color-text-primary); --live-theming-picker-muted: var(--color-text-secondary); } /* ── file-browser 機能 (Senastra File Browser 標準化, 2026-05-24) ── 「ユーザー指定のファイルマネージャでフォルダを開く」共通 UI 用。 詳細仕様: data/file-browsers-spec.md §7。 各アプリは --app-*-file-browser-* で上書きしてテーマに馴染ませてよい。 */ :root { --file-browser-card-bg: var(--color-surface); --file-browser-card-bg-current: var(--color-bg-subtle); --file-browser-detected-badge: var(--color-accent); --file-browser-missing-badge: var(--color-border); } /* dark mode は --color-* が semantic 切替するので Layer 3 側の再定義不要 (継承) */ /* ───────────────────────────────────────────── 8. BREAKPOINTS (参考: CSS では直接使用不可) ───────────────────────────────────────────── --breakpoint-sm: 640px (スマホ横) --breakpoint-md: 768px (タブレット) --breakpoint-lg: 1024px (ラップトップ) --breakpoint-xl: 1280px (デスクトップ) --breakpoint-2xl: 1536px (大画面) ───────────────────────────────────────────── */ /* ───────────────────────────────────────────── UTILITY: Reset & Base Styles (オプション) ───────────────────────────────────────────── */ /* このセクションは任意です。 既存の reset.css がある場合は不要です。 *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text-primary); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } */