diff --git a/docs/future-palette.md b/docs/future-palette.md new file mode 100644 index 00000000..e0e2ed4a --- /dev/null +++ b/docs/future-palette.md @@ -0,0 +1,49 @@ +# Shared Palette Audit (Kiri / Mesh / Void) + +## Goal + +Define a shared semantic color system in `web/moto/palette.css` and migrate each app incrementally with low risk. + +## Phase 1 Delivered + +- Added shared file: `web/moto/palette.css` +- Added semantic tokens for `light` and `dark` themes: + - `--color-bg`, `--color-surface`, `--color-text`, `--color-border`, `--color-accent`, etc +- Added compatibility aliases (bridge variables) for Mesh/Void existing CSS vars. +- Wired palette stylesheet into: + - `web/kiri/index.html` + - `web/mesh/index.html` + - `web/void/index.html` +- Added root attributes: + - Kiri: `data-app="kiri"` and early `data-theme="light|dark"` set in head script + - Mesh: `data-app="mesh" data-theme="dark"` + - Void: `data-app="void" data-theme="dark"` + +## Naming Recommendation (semantic first) + +- Surfaces: + - `--color-bg`, `--color-bg-elev`, `--color-bg-subtle` + - `--color-surface`, `--color-surface-2` +- Content: + - `--color-text`, `--color-text-muted` + - `--color-border`, `--color-border-strong` +- Interaction: + - `--color-accent`, `--color-accent-hover`, `--color-focus` + - `--color-selection`, `--color-selection-hover` +- Status: + - `--color-success`, `--color-warning`, `--color-danger` + +## Step-wise Migration Plan + +1. Convert top-level containers/menus/panels in each app to semantic tokens only. +2. Convert controls/interactions (hover/focus/selected) to semantic tokens. +3. Convert specialty overlays (grids, badges, debug panes) last. +4. Remove legacy per-app aliases once selectors are migrated. + +## Validation Checklist Per Step + +- Kiri light unchanged +- Kiri dark unchanged +- Mesh dark unchanged +- Void dark unchanged +- Contrast and hover/focus states still readable diff --git a/web/kiri/index.html b/web/kiri/index.html index e555ba4f..3d42e7c0 100644 --- a/web/kiri/index.html +++ b/web/kiri/index.html @@ -1,5 +1,5 @@ - + @@ -18,21 +18,24 @@ Kiri:Moto + - + - - - + + +
diff --git a/web/mesh/index.css b/web/mesh/index.css index 5b018c00..29a85e2d 100644 --- a/web/mesh/index.css +++ b/web/mesh/index.css @@ -230,9 +230,9 @@ button:hover { display: none; position: absolute; flex-direction: column; - border: 1px solid #999; + border: 1px solid var(--border); border-radius: 6px; - background: #333; + background: var(--menu-back); padding: 4px; top: calc(100% + 3px); left: 0; @@ -430,7 +430,7 @@ button:hover { #modal_frame { background-color: rgba(30,30,30,0.9); - border: 1px solid rgba(200,200,200,0.6); + border: 1px solid var(--border); border-radius: 4px; color: white; flex-direction: column; @@ -452,7 +452,7 @@ button:hover { color: white; border-radius: 2px; border-bottom: 1px solid rgba(0,0,0,0.2); - background-color: rgba(0,0,0,0.7); + background-color: rgba(60,60,60,0.7); font-family: 'Russo One', monospace; font-size: smaller; justify-content: center; diff --git a/web/mesh/index.html b/web/mesh/index.html index 8e5b7389..7b29ffc4 100644 --- a/web/mesh/index.html +++ b/web/mesh/index.html @@ -1,5 +1,5 @@ - + @@ -12,14 +12,15 @@ Mesh:Tool + - - - - + + + +
diff --git a/web/moto/palette.css b/web/moto/palette.css new file mode 100644 index 00000000..ccfd69db --- /dev/null +++ b/web/moto/palette.css @@ -0,0 +1,71 @@ +/* Shared color tokens for Kiri / Mesh / Void. + * Phase 1: define semantic palette + compatibility aliases. + * App CSS keeps final say by overriding locally as migration proceeds. + */ + +:root { + /* semantic core */ + --color-bg: #f6f8fb; + --color-bg-elev: #ffffff; + --color-bg-subtle: #eef2f7; + --color-surface: #ffffff; + --color-surface-2: #f3f6fb; + --color-text: #1b2430; + --color-text-muted: #556173; + --color-border: #a6b3c3; + --color-border-strong: #6a7a90; + --color-accent: #5a9fd4; + --color-accent-hover: #7bb8e8; + --color-focus: rgba(90,159,212,0.35); + --color-selection: rgba(90,159,212,0.45); + --color-selection-hover: rgba(90,159,212,0.8); + --color-success: #4ade80; + --color-warning: #fbbf24; + --color-danger: #f87171; +} + +:root.dark, +:root[data-theme="dark"] { + --color-bg: #0f1116; + --color-bg-elev: #161a22; + --color-bg-subtle: #1b2230; + --color-surface: #1a1f29; + --color-surface-2: #222936; + --color-text: #e2e8f0; + --color-text-muted: #a5b0c0; + --color-border: #444f63; + --color-border-strong: #6d7a93; + --color-accent: #5a9fd4; + --color-accent-hover: #7bb8e8; + --color-focus: rgba(90,159,212,0.4); + --color-selection: rgba(90,159,212,0.5); + --color-selection-hover: rgba(90,159,212,0.95); + --color-success: #4ade80; + --color-warning: #fbbf24; + --color-danger: #f87171; +} + +/* Mesh compatibility aliases */ +:root { + --accent: var(--color-accent); + --menu-blue: var(--color-accent); + --menu-back: rgba(40,40,40,0.75); + --border: var(--color-border); + --selected: var(--color-selection); + --selected-hover: var(--color-selection-hover); +} + +/* Void compatibility aliases */ +:root { + --bg-primary: var(--color-bg); + --bg-secondary: var(--color-surface); + --bg-tertiary: var(--color-surface-2); + --text-primary: var(--color-text); + --text-secondary: var(--color-text-muted); + --accent: var(--color-accent); + --accent-hover: var(--color-accent-hover); + --success: var(--color-success); + --warning: var(--color-warning); + --danger: var(--color-danger); +} + diff --git a/web/void/index.html b/web/void/index.html index 7cb1d7b2..f1d6b933 100644 --- a/web/void/index.html +++ b/web/void/index.html @@ -1,13 +1,14 @@ - + Void:Form + - - + +