Skip to content

Commit 16ffd18

Browse files
allixenderallixender
committed
style testing to adjust more to lab colors
1 parent 8311364 commit 16ffd18

4 files changed

Lines changed: 628 additions & 0 deletions

File tree

‎styles_test/STYLE_EXPERIMENT.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# IGEO7 Style Experimentation Workflow
2+
3+
This document outlines how to propose and review design experiments for the IGEO7 project, including color palettes, logos, and UI accents.
4+
5+
## 1. The JSON Spec
6+
All experiments should be defined in a JSON format to ensure consistency across review pages.
7+
8+
### Schema
9+
```json
10+
{
11+
"id": "unique-slug",
12+
"name": "Human Readable Name",
13+
"description": "Short explanation of the design goal.",
14+
"mode": "light" | "dark",
15+
"palette": {
16+
"primary": "#hex",
17+
"primary_dark": "#hex",
18+
"primary_darker": "#hex",
19+
"primary_darkest": "#hex",
20+
"primary_light": "#hex",
21+
"primary_lighter": "#hex",
22+
"primary_lightest": "#hex",
23+
"hero_bg": "#hex",
24+
"hero_border": "#hex",
25+
"feature_icon_bg": "#hex"
26+
},
27+
"logo": {
28+
"svg_path": "optional/path/to/logo.svg",
29+
"fill_color": "#hex",
30+
"stroke_color": "#hex",
31+
"inner_stroke": "#hex"
32+
}
33+
}
34+
```
35+
36+
## 2. Review Process
37+
1. **Propose:** Provide a JSON block following the schema above.
38+
2. **Generate:** A standalone HTML page will be generated at `style_work/exp_[id].html` using the standard `experiment_template.html`.
39+
3. **Compare:** Use the generated pages to compare "vibe", accessibility, and brand alignment.
40+
41+
## 3. Handling Logo Changes
42+
- **Existing SVG Re-coloring:** Specify `fill_color`, `stroke_color`, and `inner_stroke` in the JSON to automatically re-render the standard hexagon logo.
43+
- **New Logo Files:** Place new SVG or PNG files in `style_work/assets/` and reference them via `svg_path`.
44+
45+
## 4. Current Baselines
46+
The file `style_work/themes.json` contains the current "official" specs for both Light and Dark modes.
47+
48+
## Running it
49+
50+
It needs "CORS" to work, otherwise the experiment html page will not be allowes to load the themes.json file. One way to test locally is with Python:
51+
52+
```bash
53+
# be in the repo root folder
54+
python3 -m http.server 8080
55+
```
56+
57+
This should server the current folder as web server, with the styles_test being a subfolder.
58+
59+
Open browser at [http://localhost:8080/styles_test/experiment_template.html?id=current-light](http://localhost:8080/styles_test/experiment_template.html?id=current-light)
60+

‎styles_test/experiment_template.html‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>IGEO7 Experiment Preview</title>
7+
<style id="theme-variables">
8+
/* Default placeholders, will be overridden by JS */
9+
:root {
10+
--primary: #2e7d32;
11+
--primary-darker: #1b5e20;
12+
--hero-bg: #f0f7f0;
13+
--hero-border: #c8e6c9;
14+
--feature-icon-bg: #e8f5e9;
15+
--text-color: #1c1e21;
16+
--bg-color: #ffffff;
17+
}
18+
</style>
19+
<style>
20+
body {
21+
font-family: system-ui, -apple-system, sans-serif;
22+
margin: 0;
23+
padding: 0;
24+
color: var(--text-color);
25+
background-color: var(--bg-color);
26+
line-height: 1.5;
27+
}
28+
29+
.container { max-width: 1000px; margin: 0 auto; padding: 2rem; }
30+
31+
header {
32+
background: var(--hero-bg);
33+
border-bottom: 2px solid var(--hero-border);
34+
padding: 4rem 2rem;
35+
text-align: center;
36+
}
37+
38+
.hero-title {
39+
font-size: 3rem;
40+
font-weight: 800;
41+
color: var(--primary-darker);
42+
margin: 1rem 0;
43+
}
44+
45+
.btn {
46+
display: inline-block;
47+
background: var(--primary);
48+
color: white;
49+
padding: 0.75rem 2rem;
50+
border-radius: 2rem;
51+
text-decoration: none;
52+
font-weight: 600;
53+
margin-top: 1rem;
54+
}
55+
56+
.section { margin: 4rem 0; }
57+
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
58+
59+
.card {
60+
background: var(--bg-color);
61+
border: 1px solid var(--hero-border);
62+
border-radius: 12px;
63+
padding: 1.5rem;
64+
text-align: center;
65+
}
66+
67+
.icon-box {
68+
width: 64px;
69+
height: 64px;
70+
background: var(--feature-icon-bg);
71+
border-radius: 50%;
72+
margin: 0 auto 1rem;
73+
display: flex;
74+
align-items: center;
75+
justify-content: center;
76+
font-size: 1.5rem;
77+
}
78+
79+
/* Experiment Metadata overlay */
80+
#exp-info {
81+
position: fixed;
82+
bottom: 1rem;
83+
right: 1rem;
84+
background: rgba(0,0,0,0.8);
85+
color: white;
86+
padding: 1rem;
87+
border-radius: 8px;
88+
font-size: 0.8rem;
89+
max-width: 300px;
90+
z-index: 100;
91+
}
92+
</style>
93+
</head>
94+
<body>
95+
96+
<header id="hero">
97+
<div class="logo-preview">
98+
<svg id="main-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="80" height="80">
99+
<polygon id="logo-hex" points="50,8 88,29 88,71 50,92 12,71 12,29" fill="var(--primary)" stroke="var(--primary-darker)" stroke-width="2" />
100+
<polygon id="logo-inner" points="50,20 78,35 78,65 50,80 22,65 22,35" fill="none" stroke="white" stroke-width="1.5" opacity="0.6" />
101+
<text x="50" y="60" text-anchor="middle" font-family="sans-serif" font-size="32" font-weight="800" fill="white">i7</text>
102+
</svg>
103+
</div>
104+
<h1 class="hero-title" id="display-name">IGEO7 Experiment</h1>
105+
<p id="display-desc">This is a preview of a style experiment.</p>
106+
<a href="#" class="btn">Explore Docs</a>
107+
</header>
108+
109+
<div class="container">
110+
<div class="section">
111+
<h2>Feature Grid Preview</h2>
112+
<div class="grid">
113+
<div class="card">
114+
<div class="icon-box">⬡</div>
115+
<h3>Equal Area</h3>
116+
<p>Mathematical consistency across the globe.</p>
117+
</div>
118+
<div class="card">
119+
<div class="icon-box">🔢</div>
120+
<h3>Z7 Index</h3>
121+
<p>Hierarchical 64-bit integer addressing.</p>
122+
</div>
123+
<div class="card">
124+
<div class="icon-box">🌍</div>
125+
<h3>Global</h3>
126+
<p>Seamless coverage of the entire sphere.</p>
127+
</div>
128+
</div>
129+
</div>
130+
</div>
131+
132+
<div id="exp-info">
133+
<strong>Experiment ID:</strong> <span id="info-id">none</span><br>
134+
<strong>Mode:</strong> <span id="info-mode">none</span>
135+
</div>
136+
137+
<script>
138+
// In a real usage, we would load the ID from the URL or a specific file
139+
// For testing, we look for 'themes.json' and a URL param ?id=...
140+
async function loadExperiment() {
141+
const params = new URLSearchParams(window.location.search);
142+
const expId = params.get('id') || 'current-light';
143+
144+
try {
145+
const response = await fetch('themes.json');
146+
const themes = await response.json();
147+
const config = themes[expId];
148+
149+
if (!config) {
150+
console.error("Experiment not found:", expId);
151+
return;
152+
}
153+
154+
// Apply palette to CSS variables
155+
const root = document.documentElement;
156+
for (const [key, value] of Object.entries(config.palette)) {
157+
root.style.setProperty(`--${key.replace(/_/g, '-')}`, value);
158+
}
159+
160+
// Update text
161+
document.getElementById('display-name').textContent = config.name;
162+
document.getElementById('display-desc').textContent = config.description;
163+
document.getElementById('info-id').textContent = config.id;
164+
document.getElementById('info-mode').textContent = config.mode;
165+
166+
// Adjust body for dark mode
167+
if (config.mode === 'dark') {
168+
root.style.setProperty('--bg-color', '#1b1b1d');
169+
root.style.setProperty('--text-color', '#f5f6f7');
170+
} else {
171+
root.style.setProperty('--bg-color', '#ffffff');
172+
root.style.setProperty('--text-color', '#1c1e21');
173+
}
174+
175+
// Apply Logo colors if specified
176+
if (config.logo) {
177+
if (config.logo.fill_color) document.getElementById('logo-hex').setAttribute('fill', config.logo.fill_color);
178+
if (config.logo.stroke_color) document.getElementById('logo-hex').setAttribute('stroke', config.logo.stroke_color);
179+
if (config.logo.inner_stroke) document.getElementById('logo-inner').setAttribute('stroke', config.logo.inner_stroke);
180+
}
181+
182+
} catch (e) {
183+
console.error("Failed to load themes.json", e);
184+
}
185+
}
186+
187+
loadExperiment();
188+
</script>
189+
</body>
190+
</html>

0 commit comments

Comments
 (0)