AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

start a common palette for all apps

Browse source
This commit is contained in:
Stewart Allen 2026-02-19 14:41:52 -05:00
commit f5c0e955e7
6 changed files with 143 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

49
docs/future-palette.md Normal file
View file

@ -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

15
web/kiri/index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-app="kiri">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="author" content="Stewart Allen"> <meta name="author" content="Stewart Allen">
@ -18,21 +18,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Kiri:Moto</title> <title>Kiri:Moto</title>
<script> <script>
if (localStorage['kiri-dark'] === 'true') { const isDark = localStorage['kiri-dark'] === 'true';
document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
if (isDark) {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
document.documentElement.style.background = '#000000'; document.documentElement.style.background = '#000000';
} }
</script> </script>
<link rel="icon" href="/icon/kirimoto.png"> <link rel="icon" href="/icon/kirimoto.png">
<link rel="apple-touch-icon" href="/icon/kirimoto.png"> <link rel="apple-touch-icon" href="/icon/kirimoto.png">
<link rel="stylesheet" type="text/css" href="/moto/palette.css">
<link rel="stylesheet" type="text/css" href="index.css"> <link rel="stylesheet" type="text/css" href="index.css">
<link href="manifest.json" rel="manifest"> <link href="manifest.json" rel="manifest">
<link href="../font/css/all.min.css" rel="stylesheet"> <link href="/font/css/all.min.css" rel="stylesheet">
<!-- <script type="module" src="/lib/kiri/run/worker.js"></script> --> <!-- <script type="module" src="/lib/kiri/run/worker.js"></script> -->
<!-- <script type="module" src="/lib/kiri/run/minion.js"></script> --> <!-- <script type="module" src="/lib/kiri/run/minion.js"></script> -->
<script src="../lib/ext/tween.js"></script> <script src="/lib/ext/tween.js"></script>
<script src="../font/js/all.min.js" crossorigin="anonymous" defer></script> <script src="/font/js/all.min.js" crossorigin="anonymous" defer></script>
<script src="../lib/main/kiri.js" type="module"></script> <script src="/lib/main/kiri.js" type="module"></script>
</head> </head>
<body> <body>
<div id="app" class="f-col"> <div id="app" class="f-col">

8
web/mesh/index.css
View file

@ -230,9 +230,9 @@ button:hover {
display: none; display: none;
position: absolute; position: absolute;
flex-direction: column; flex-direction: column;
border: 1px solid #999; border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
background: #333; background: var(--menu-back);
padding: 4px; padding: 4px;
top: calc(100% + 3px); top: calc(100% + 3px);
left: 0; left: 0;
@ -430,7 +430,7 @@ button:hover {
#modal_frame { #modal_frame {
background-color: rgba(30,30,30,0.9); 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; border-radius: 4px;
color: white; color: white;
flex-direction: column; flex-direction: column;
@ -452,7 +452,7 @@ button:hover {
color: white; color: white;
border-radius: 2px; border-radius: 2px;
border-bottom: 1px solid rgba(0,0,0,0.2); 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-family: 'Russo One', monospace;
font-size: smaller; font-size: smaller;
justify-content: center; justify-content: center;

11
web/mesh/index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-app="mesh" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="author" content="Stewart Allen"> <meta name="author" content="Stewart Allen">
@ -12,14 +12,15 @@
<meta property="og:url" content="https://grid.space/mesh/"> <meta property="og:url" content="https://grid.space/mesh/">
<title>Mesh:Tool</title> <title>Mesh:Tool</title>
<link rel="icon" href="/icon/meshtool.png"> <link rel="icon" href="/icon/meshtool.png">
<link rel="stylesheet" type="text/css" href="/moto/palette.css">
<link rel="stylesheet" type="text/css" href="index.css"> <link rel="stylesheet" type="text/css" href="index.css">
<link href="../font/css/all.min.css" rel="stylesheet"> <link href="../font/css/all.min.css" rel="stylesheet">
<link href="../fon2/bootstrap-icons.min.css" rel="stylesheet"> <link href="../fon2/bootstrap-icons.min.css" rel="stylesheet">
<!-- <script type="module" src="/lib/mesh/work.js"></script> --> <!-- <script type="module" src="/lib/mesh/work.js"></script> -->
<!-- <script src="../lib/ext/earcut.js" type="module"></script> --> <!-- <script src="/lib/ext/earcut.js" type="module"></script> -->
<script src="../lib/ext/tween.js"></script> <script src="/lib/ext/tween.js"></script>
<script src="../font/js/all.min.js" crossorigin="anonymous"></script> <script src="/font/js/all.min.js" crossorigin="anonymous"></script>
<script src="../lib/main/mesh.js" type="module"></script> <script src="/lib/main/mesh.js" type="module"></script>
</head> </head>
<body> <body>
<div id="app"> <div id="app">

71
web/moto/palette.css Normal file
View file

@ -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);
}

7
web/void/index.html
View file

@ -1,13 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-app="void" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Void:Form</title> <title>Void:Form</title>
<link rel="stylesheet" href="/moto/palette.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="/icon/voidform.png"> <link rel="icon" type="image/png" href="/icon/voidform.png">
<script src="../lib/ext/tween.js"></script> <script src="/lib/ext/tween.js"></script>
<script src="../lib/main/void.js" type="module"></script> <script src="/lib/main/void.js" type="module"></script>
</head> </head>
<body> <body>
<div id="app"> <div id="app">