@dataimago/tokens 0.1.0-alpha.4 → 0.1.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +26 -0
- package/dist/index.mjs +26 -0
- package/dist/tokens.css +110 -20
- package/dist/tokens.scss +110 -20
- package/package.json +1 -1
- package/src/theme-colors-p3.json +358 -0
- package/src/theme-colors.json +26 -0
package/dist/index.cjs
CHANGED
|
@@ -120,6 +120,32 @@ const tokens = {
|
|
|
120
120
|
"dark": "#2980B9",
|
|
121
121
|
"description": "Presentation accent hover/emphasized variant — Flat-UI belize-hole"
|
|
122
122
|
}
|
|
123
|
+
},
|
|
124
|
+
"vertical-accent": {
|
|
125
|
+
"$comment": "Per-vertical brand accents — each Level-2 property's identity color, distinct from the house interactive.accent (the L1 sky-blue hub color). Mode-aware (light/dark stops) like interactive.accent. Used for app icons, navbar-logo emphasis, and per-vertical theming. Contrast vs surface.page verified WCAG: light values are the on-light marks, dark values the on-dark marks. dataimago (L1 hub) intentionally has no vertical accent — it uses interactive.accent + ink.",
|
|
126
|
+
"dissertation": {
|
|
127
|
+
"light": "#B87333",
|
|
128
|
+
"dark": "#CE8E5C",
|
|
129
|
+
"description": "dissertation-ai — copper (manuscript / annotation / the human hand in the margin). Re-authored at higher P3 chroma (~+28% light / +27% dark) for a vivid wide-gamut pop; sRGB fallback unchanged so contrast is preserved. Light: 3.23:1 on stone-100 (AA-large; large-mark use). Dark: #CE8E5C 6.72:1 on ink-900 (AA)."
|
|
130
|
+
},
|
|
131
|
+
"rpkg": {
|
|
132
|
+
"light": "#3B82F6",
|
|
133
|
+
"dark": "#60A5FA",
|
|
134
|
+
"description": "rpkg-ai — engineering blue. Light: 3.14:1 on stone-100 (AA-large; large-mark use). Dark: #60A5FA 7.26:1 on ink-900 (AA)."
|
|
135
|
+
},
|
|
136
|
+
"SGPc": {
|
|
137
|
+
"light": "#5A6310",
|
|
138
|
+
"dark": "#B2BF22",
|
|
139
|
+
"description": "SGPc-ai — growth yellow-green (decided 2026-06-26). The brand value is the bright #B2BF22, but it fails contrast on light surfaces (1.73:1), so LIGHT mode uses the darkened companion #5A6310 (5.55:1 on stone-100 — full AA) and DARK mode uses the bright #B2BF22 (9.12:1 on ink-900). See wiki/decisions/sgpc-accent.md."
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
"brand-mark": {
|
|
143
|
+
"$comment": "Brand-MARK colors (the dataimago monogram / wordmark logo treatment) — distinct from the interactive.accent role. The signature monogram red is a wide-gamut PILOT (see wiki/decisions/p3-oklch-color.md). It is mode-aware for AA-normal headroom: a single red cannot clear 4.5:1 on BOTH the light page (#ededeb) and ink-900 — light needs a deep red, dark needs a bright one. LIGHT uses the deepened #cc0000 (faithful P3, contrast-first); DARK keeps the vivid display-P3 primary red (#ff0000 fallback → color(display-p3 1 0 0)), where #ff0000 already passes AA-normal. Vivid override authored in tools/color-converter.mjs (dark-only for the red), emitted as a `#hex → color(display-p3 …)` cascade in the -p3 build.",
|
|
144
|
+
"red": {
|
|
145
|
+
"light": "#cc0000",
|
|
146
|
+
"dark": "#ff0000",
|
|
147
|
+
"description": "Signature monogram red — mode-aware for AA-normal. LIGHT: deepened #cc0000 (5.0:1 on stone-100 #ededeb / 5.5:1 on elevated — full AA-normal, safe at small sizes / as text). DARK: vivid #ff0000 fallback + display-P3 primary red (4.6:1 on ink-900 — AA-normal). Logo-mark color only — NOT the interactive accent (which is iteration-2 blue). Large navbar lift-wash marks keep the vivid display-P3 red (AA-large, large-mark use); this token is the AA-normal value for arbitrary/small mark reuse."
|
|
148
|
+
}
|
|
123
149
|
}
|
|
124
150
|
},
|
|
125
151
|
"spacing": {
|
package/dist/index.mjs
CHANGED
|
@@ -120,6 +120,32 @@ const tokens = {
|
|
|
120
120
|
"dark": "#2980B9",
|
|
121
121
|
"description": "Presentation accent hover/emphasized variant — Flat-UI belize-hole"
|
|
122
122
|
}
|
|
123
|
+
},
|
|
124
|
+
"vertical-accent": {
|
|
125
|
+
"$comment": "Per-vertical brand accents — each Level-2 property's identity color, distinct from the house interactive.accent (the L1 sky-blue hub color). Mode-aware (light/dark stops) like interactive.accent. Used for app icons, navbar-logo emphasis, and per-vertical theming. Contrast vs surface.page verified WCAG: light values are the on-light marks, dark values the on-dark marks. dataimago (L1 hub) intentionally has no vertical accent — it uses interactive.accent + ink.",
|
|
126
|
+
"dissertation": {
|
|
127
|
+
"light": "#B87333",
|
|
128
|
+
"dark": "#CE8E5C",
|
|
129
|
+
"description": "dissertation-ai — copper (manuscript / annotation / the human hand in the margin). Re-authored at higher P3 chroma (~+28% light / +27% dark) for a vivid wide-gamut pop; sRGB fallback unchanged so contrast is preserved. Light: 3.23:1 on stone-100 (AA-large; large-mark use). Dark: #CE8E5C 6.72:1 on ink-900 (AA)."
|
|
130
|
+
},
|
|
131
|
+
"rpkg": {
|
|
132
|
+
"light": "#3B82F6",
|
|
133
|
+
"dark": "#60A5FA",
|
|
134
|
+
"description": "rpkg-ai — engineering blue. Light: 3.14:1 on stone-100 (AA-large; large-mark use). Dark: #60A5FA 7.26:1 on ink-900 (AA)."
|
|
135
|
+
},
|
|
136
|
+
"SGPc": {
|
|
137
|
+
"light": "#5A6310",
|
|
138
|
+
"dark": "#B2BF22",
|
|
139
|
+
"description": "SGPc-ai — growth yellow-green (decided 2026-06-26). The brand value is the bright #B2BF22, but it fails contrast on light surfaces (1.73:1), so LIGHT mode uses the darkened companion #5A6310 (5.55:1 on stone-100 — full AA) and DARK mode uses the bright #B2BF22 (9.12:1 on ink-900). See wiki/decisions/sgpc-accent.md."
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
"brand-mark": {
|
|
143
|
+
"$comment": "Brand-MARK colors (the dataimago monogram / wordmark logo treatment) — distinct from the interactive.accent role. The signature monogram red is a wide-gamut PILOT (see wiki/decisions/p3-oklch-color.md). It is mode-aware for AA-normal headroom: a single red cannot clear 4.5:1 on BOTH the light page (#ededeb) and ink-900 — light needs a deep red, dark needs a bright one. LIGHT uses the deepened #cc0000 (faithful P3, contrast-first); DARK keeps the vivid display-P3 primary red (#ff0000 fallback → color(display-p3 1 0 0)), where #ff0000 already passes AA-normal. Vivid override authored in tools/color-converter.mjs (dark-only for the red), emitted as a `#hex → color(display-p3 …)` cascade in the -p3 build.",
|
|
144
|
+
"red": {
|
|
145
|
+
"light": "#cc0000",
|
|
146
|
+
"dark": "#ff0000",
|
|
147
|
+
"description": "Signature monogram red — mode-aware for AA-normal. LIGHT: deepened #cc0000 (5.0:1 on stone-100 #ededeb / 5.5:1 on elevated — full AA-normal, safe at small sizes / as text). DARK: vivid #ff0000 fallback + display-P3 primary red (4.6:1 on ink-900 — AA-normal). Logo-mark color only — NOT the interactive accent (which is iteration-2 blue). Large navbar lift-wash marks keep the vivid display-P3 red (AA-large, large-mark use); this token is the AA-normal value for arbitrary/small mark reuse."
|
|
148
|
+
}
|
|
123
149
|
}
|
|
124
150
|
},
|
|
125
151
|
"spacing": {
|
package/dist/tokens.css
CHANGED
|
@@ -120,27 +120,57 @@
|
|
|
120
120
|
|
|
121
121
|
:root, [data-bs-theme="light"] {
|
|
122
122
|
--color-surface-page: #ededeb;
|
|
123
|
+
--color-surface-page: color(display-p3 0.9294 0.9294 0.9223);
|
|
123
124
|
--color-surface-page-scrolled: #ededeb;
|
|
125
|
+
--color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
|
|
124
126
|
--color-surface-elevated: #f7f7f6;
|
|
127
|
+
--color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
|
|
125
128
|
--color-surface-sunken: #faf2e3;
|
|
129
|
+
--color-surface-sunken: color(display-p3 0.9749 0.9501 0.8963);
|
|
126
130
|
--color-surface-navbar: #ededeb;
|
|
131
|
+
--color-surface-navbar: color(display-p3 0.9294 0.9294 0.9223);
|
|
127
132
|
--color-surface-navbar-scrolled: #ededeb;
|
|
133
|
+
--color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
|
|
128
134
|
--color-surface-code: #faf2e3;
|
|
129
|
-
--color-
|
|
130
|
-
--color-border-
|
|
131
|
-
--color-border-
|
|
132
|
-
--color-border-
|
|
135
|
+
--color-surface-code: color(display-p3 0.9749 0.9501 0.8963);
|
|
136
|
+
--color-border-subtle: #0c0a09;
|
|
137
|
+
--color-border-subtle: color(display-p3 0.0457 0.0395 0.0358);
|
|
138
|
+
--color-border-moderate: #0c0a09;
|
|
139
|
+
--color-border-moderate: color(display-p3 0.0457 0.0395 0.0358);
|
|
140
|
+
--color-border-strong: #0c0a09;
|
|
141
|
+
--color-border-strong: color(display-p3 0.0457 0.0395 0.0358);
|
|
142
|
+
--color-border-card: #0c0a09;
|
|
143
|
+
--color-border-card: color(display-p3 0.0457 0.0395 0.0358);
|
|
133
144
|
--color-border-code: #d6d3d1;
|
|
145
|
+
--color-border-code: color(display-p3 0.8371 0.8278 0.8205);
|
|
134
146
|
--color-content-primary: #14140f;
|
|
147
|
+
--color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
|
|
135
148
|
--color-content-secondary: #7c7c7c;
|
|
149
|
+
--color-content-secondary: color(display-p3 0.4863 0.4863 0.4863);
|
|
136
150
|
--color-content-muted: #78716c;
|
|
151
|
+
--color-content-muted: color(display-p3 0.4659 0.4441 0.4258);
|
|
137
152
|
--color-content-inverse: #fdf9f2;
|
|
153
|
+
--color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
|
|
138
154
|
--color-interactive-primary: #434739;
|
|
155
|
+
--color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
|
|
139
156
|
--color-interactive-hover: #363a2e;
|
|
157
|
+
--color-interactive-hover: color(display-p3 0.2146 0.2269 0.1848);
|
|
140
158
|
--color-interactive-accent: #1f618d;
|
|
159
|
+
--color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
|
|
141
160
|
--color-interactive-focus: #434739;
|
|
142
|
-
--color-
|
|
143
|
-
--color-presentation-accent
|
|
161
|
+
--color-interactive-focus: color(display-p3 0.2656 0.2779 0.2287);
|
|
162
|
+
--color-presentation-accent: #3498db;
|
|
163
|
+
--color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
164
|
+
--color-presentation-accent-hover: #2980b9;
|
|
165
|
+
--color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
|
|
166
|
+
--color-vertical-accent-dissertation: #b87333;
|
|
167
|
+
--color-vertical-accent-dissertation: color(display-p3 0.7242 0.4389 0.1259);
|
|
168
|
+
--color-vertical-accent-rpkg: #3b82f6;
|
|
169
|
+
--color-vertical-accent-rpkg: color(display-p3 0.3047 0.5035 0.9338);
|
|
170
|
+
--color-vertical-accent-SGPc: #5a6310;
|
|
171
|
+
--color-vertical-accent-SGPc: color(display-p3 0.3595 0.3871 0.1309);
|
|
172
|
+
--color-brand-mark-red: #cc0000;
|
|
173
|
+
--color-brand-mark-red: color(display-p3 0.7331 0.1519 0.1019);
|
|
144
174
|
--contrast-high: rgb(20, 20, 16);
|
|
145
175
|
--contrast-readable: rgb(20, 20, 16);
|
|
146
176
|
--contrast-medium: #7c7c7c;
|
|
@@ -157,27 +187,57 @@
|
|
|
157
187
|
|
|
158
188
|
[data-bs-theme="dark"] {
|
|
159
189
|
--color-surface-page: #141410;
|
|
190
|
+
--color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
|
|
160
191
|
--color-surface-page-scrolled: #141410;
|
|
192
|
+
--color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
|
|
161
193
|
--color-surface-elevated: #1c1917;
|
|
194
|
+
--color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
|
|
162
195
|
--color-surface-sunken: #0c0a09;
|
|
196
|
+
--color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
|
|
163
197
|
--color-surface-navbar: #141410;
|
|
198
|
+
--color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
|
|
164
199
|
--color-surface-navbar-scrolled: #141410;
|
|
200
|
+
--color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
|
|
165
201
|
--color-surface-code: #1c1917;
|
|
166
|
-
--color-
|
|
167
|
-
--color-border-
|
|
168
|
-
--color-border-
|
|
169
|
-
--color-border-
|
|
202
|
+
--color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
|
|
203
|
+
--color-border-subtle: #fdf9f2;
|
|
204
|
+
--color-border-subtle: color(display-p3 0.9894 0.977 0.9518);
|
|
205
|
+
--color-border-moderate: #fdf9f2;
|
|
206
|
+
--color-border-moderate: color(display-p3 0.9894 0.977 0.9518);
|
|
207
|
+
--color-border-strong: #fdf9f2;
|
|
208
|
+
--color-border-strong: color(display-p3 0.9894 0.977 0.9518);
|
|
209
|
+
--color-border-card: #fdf9f2;
|
|
210
|
+
--color-border-card: color(display-p3 0.9894 0.977 0.9518);
|
|
170
211
|
--color-border-code: #292524;
|
|
212
|
+
--color-border-code: color(display-p3 0.1581 0.1456 0.1418);
|
|
171
213
|
--color-content-primary: #fdf9f2;
|
|
214
|
+
--color-content-primary: color(display-p3 0.9894 0.977 0.9518);
|
|
172
215
|
--color-content-secondary: #a8a29e;
|
|
216
|
+
--color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
|
|
173
217
|
--color-content-muted: #78716c;
|
|
218
|
+
--color-content-muted: color(display-p3 0.4659 0.4441 0.4258);
|
|
174
219
|
--color-content-inverse: #0c0a09;
|
|
220
|
+
--color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
|
|
175
221
|
--color-interactive-primary: #98a384;
|
|
222
|
+
--color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
|
|
176
223
|
--color-interactive-hover: #7e8a6b;
|
|
177
|
-
--color-interactive-
|
|
224
|
+
--color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
|
|
225
|
+
--color-interactive-accent: #3498db;
|
|
226
|
+
--color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
178
227
|
--color-interactive-focus: #98a384;
|
|
179
|
-
--color-
|
|
180
|
-
--color-presentation-accent
|
|
228
|
+
--color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
|
|
229
|
+
--color-presentation-accent: #3498db;
|
|
230
|
+
--color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
231
|
+
--color-presentation-accent-hover: #2980b9;
|
|
232
|
+
--color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
|
|
233
|
+
--color-vertical-accent-dissertation: #ce8e5c;
|
|
234
|
+
--color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
|
|
235
|
+
--color-vertical-accent-rpkg: #60a5fa;
|
|
236
|
+
--color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
|
|
237
|
+
--color-vertical-accent-SGPc: #b2bf22;
|
|
238
|
+
--color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
|
|
239
|
+
--color-brand-mark-red: #ff0000;
|
|
240
|
+
--color-brand-mark-red: color(display-p3 1 0 0);
|
|
181
241
|
--contrast-high: rgb(237, 237, 235);
|
|
182
242
|
--contrast-readable: rgb(237, 237, 235);
|
|
183
243
|
--contrast-medium: #83838f;
|
|
@@ -195,27 +255,57 @@
|
|
|
195
255
|
@media (prefers-color-scheme: dark) {
|
|
196
256
|
:root {
|
|
197
257
|
--color-surface-page: #141410;
|
|
258
|
+
--color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
|
|
198
259
|
--color-surface-page-scrolled: #141410;
|
|
260
|
+
--color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
|
|
199
261
|
--color-surface-elevated: #1c1917;
|
|
262
|
+
--color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
|
|
200
263
|
--color-surface-sunken: #0c0a09;
|
|
264
|
+
--color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
|
|
201
265
|
--color-surface-navbar: #141410;
|
|
266
|
+
--color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
|
|
202
267
|
--color-surface-navbar-scrolled: #141410;
|
|
268
|
+
--color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
|
|
203
269
|
--color-surface-code: #1c1917;
|
|
204
|
-
--color-
|
|
205
|
-
--color-border-
|
|
206
|
-
--color-border-
|
|
207
|
-
--color-border-
|
|
270
|
+
--color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
|
|
271
|
+
--color-border-subtle: #fdf9f2;
|
|
272
|
+
--color-border-subtle: color(display-p3 0.9894 0.977 0.9518);
|
|
273
|
+
--color-border-moderate: #fdf9f2;
|
|
274
|
+
--color-border-moderate: color(display-p3 0.9894 0.977 0.9518);
|
|
275
|
+
--color-border-strong: #fdf9f2;
|
|
276
|
+
--color-border-strong: color(display-p3 0.9894 0.977 0.9518);
|
|
277
|
+
--color-border-card: #fdf9f2;
|
|
278
|
+
--color-border-card: color(display-p3 0.9894 0.977 0.9518);
|
|
208
279
|
--color-border-code: #292524;
|
|
280
|
+
--color-border-code: color(display-p3 0.1581 0.1456 0.1418);
|
|
209
281
|
--color-content-primary: #fdf9f2;
|
|
282
|
+
--color-content-primary: color(display-p3 0.9894 0.977 0.9518);
|
|
210
283
|
--color-content-secondary: #a8a29e;
|
|
284
|
+
--color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
|
|
211
285
|
--color-content-muted: #78716c;
|
|
286
|
+
--color-content-muted: color(display-p3 0.4659 0.4441 0.4258);
|
|
212
287
|
--color-content-inverse: #0c0a09;
|
|
288
|
+
--color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
|
|
213
289
|
--color-interactive-primary: #98a384;
|
|
290
|
+
--color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
|
|
214
291
|
--color-interactive-hover: #7e8a6b;
|
|
215
|
-
--color-interactive-
|
|
292
|
+
--color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
|
|
293
|
+
--color-interactive-accent: #3498db;
|
|
294
|
+
--color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
216
295
|
--color-interactive-focus: #98a384;
|
|
217
|
-
--color-
|
|
218
|
-
--color-presentation-accent
|
|
296
|
+
--color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
|
|
297
|
+
--color-presentation-accent: #3498db;
|
|
298
|
+
--color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
299
|
+
--color-presentation-accent-hover: #2980b9;
|
|
300
|
+
--color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
|
|
301
|
+
--color-vertical-accent-dissertation: #ce8e5c;
|
|
302
|
+
--color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
|
|
303
|
+
--color-vertical-accent-rpkg: #60a5fa;
|
|
304
|
+
--color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
|
|
305
|
+
--color-vertical-accent-SGPc: #b2bf22;
|
|
306
|
+
--color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
|
|
307
|
+
--color-brand-mark-red: #ff0000;
|
|
308
|
+
--color-brand-mark-red: color(display-p3 1 0 0);
|
|
219
309
|
--contrast-high: rgb(237, 237, 235);
|
|
220
310
|
--contrast-readable: rgb(237, 237, 235);
|
|
221
311
|
--contrast-medium: #83838f;
|
package/dist/tokens.scss
CHANGED
|
@@ -120,27 +120,57 @@
|
|
|
120
120
|
|
|
121
121
|
:root, [data-bs-theme="light"] {
|
|
122
122
|
--color-surface-page: #ededeb;
|
|
123
|
+
--color-surface-page: color(display-p3 0.9294 0.9294 0.9223);
|
|
123
124
|
--color-surface-page-scrolled: #ededeb;
|
|
125
|
+
--color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
|
|
124
126
|
--color-surface-elevated: #f7f7f6;
|
|
127
|
+
--color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
|
|
125
128
|
--color-surface-sunken: #faf2e3;
|
|
129
|
+
--color-surface-sunken: color(display-p3 0.9749 0.9501 0.8963);
|
|
126
130
|
--color-surface-navbar: #ededeb;
|
|
131
|
+
--color-surface-navbar: color(display-p3 0.9294 0.9294 0.9223);
|
|
127
132
|
--color-surface-navbar-scrolled: #ededeb;
|
|
133
|
+
--color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
|
|
128
134
|
--color-surface-code: #faf2e3;
|
|
129
|
-
--color-
|
|
130
|
-
--color-border-
|
|
131
|
-
--color-border-
|
|
132
|
-
--color-border-
|
|
135
|
+
--color-surface-code: color(display-p3 0.9749 0.9501 0.8963);
|
|
136
|
+
--color-border-subtle: #0c0a09;
|
|
137
|
+
--color-border-subtle: color(display-p3 0.0457 0.0395 0.0358);
|
|
138
|
+
--color-border-moderate: #0c0a09;
|
|
139
|
+
--color-border-moderate: color(display-p3 0.0457 0.0395 0.0358);
|
|
140
|
+
--color-border-strong: #0c0a09;
|
|
141
|
+
--color-border-strong: color(display-p3 0.0457 0.0395 0.0358);
|
|
142
|
+
--color-border-card: #0c0a09;
|
|
143
|
+
--color-border-card: color(display-p3 0.0457 0.0395 0.0358);
|
|
133
144
|
--color-border-code: #d6d3d1;
|
|
145
|
+
--color-border-code: color(display-p3 0.8371 0.8278 0.8205);
|
|
134
146
|
--color-content-primary: #14140f;
|
|
147
|
+
--color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
|
|
135
148
|
--color-content-secondary: #7c7c7c;
|
|
149
|
+
--color-content-secondary: color(display-p3 0.4863 0.4863 0.4863);
|
|
136
150
|
--color-content-muted: #78716c;
|
|
151
|
+
--color-content-muted: color(display-p3 0.4659 0.4441 0.4258);
|
|
137
152
|
--color-content-inverse: #fdf9f2;
|
|
153
|
+
--color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
|
|
138
154
|
--color-interactive-primary: #434739;
|
|
155
|
+
--color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
|
|
139
156
|
--color-interactive-hover: #363a2e;
|
|
157
|
+
--color-interactive-hover: color(display-p3 0.2146 0.2269 0.1848);
|
|
140
158
|
--color-interactive-accent: #1f618d;
|
|
159
|
+
--color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
|
|
141
160
|
--color-interactive-focus: #434739;
|
|
142
|
-
--color-
|
|
143
|
-
--color-presentation-accent
|
|
161
|
+
--color-interactive-focus: color(display-p3 0.2656 0.2779 0.2287);
|
|
162
|
+
--color-presentation-accent: #3498db;
|
|
163
|
+
--color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
164
|
+
--color-presentation-accent-hover: #2980b9;
|
|
165
|
+
--color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
|
|
166
|
+
--color-vertical-accent-dissertation: #b87333;
|
|
167
|
+
--color-vertical-accent-dissertation: color(display-p3 0.7242 0.4389 0.1259);
|
|
168
|
+
--color-vertical-accent-rpkg: #3b82f6;
|
|
169
|
+
--color-vertical-accent-rpkg: color(display-p3 0.3047 0.5035 0.9338);
|
|
170
|
+
--color-vertical-accent-SGPc: #5a6310;
|
|
171
|
+
--color-vertical-accent-SGPc: color(display-p3 0.3595 0.3871 0.1309);
|
|
172
|
+
--color-brand-mark-red: #cc0000;
|
|
173
|
+
--color-brand-mark-red: color(display-p3 0.7331 0.1519 0.1019);
|
|
144
174
|
--contrast-high: rgb(20, 20, 16);
|
|
145
175
|
--contrast-readable: rgb(20, 20, 16);
|
|
146
176
|
--contrast-medium: #7c7c7c;
|
|
@@ -157,27 +187,57 @@
|
|
|
157
187
|
|
|
158
188
|
[data-bs-theme="dark"] {
|
|
159
189
|
--color-surface-page: #141410;
|
|
190
|
+
--color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
|
|
160
191
|
--color-surface-page-scrolled: #141410;
|
|
192
|
+
--color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
|
|
161
193
|
--color-surface-elevated: #1c1917;
|
|
194
|
+
--color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
|
|
162
195
|
--color-surface-sunken: #0c0a09;
|
|
196
|
+
--color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
|
|
163
197
|
--color-surface-navbar: #141410;
|
|
198
|
+
--color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
|
|
164
199
|
--color-surface-navbar-scrolled: #141410;
|
|
200
|
+
--color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
|
|
165
201
|
--color-surface-code: #1c1917;
|
|
166
|
-
--color-
|
|
167
|
-
--color-border-
|
|
168
|
-
--color-border-
|
|
169
|
-
--color-border-
|
|
202
|
+
--color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
|
|
203
|
+
--color-border-subtle: #fdf9f2;
|
|
204
|
+
--color-border-subtle: color(display-p3 0.9894 0.977 0.9518);
|
|
205
|
+
--color-border-moderate: #fdf9f2;
|
|
206
|
+
--color-border-moderate: color(display-p3 0.9894 0.977 0.9518);
|
|
207
|
+
--color-border-strong: #fdf9f2;
|
|
208
|
+
--color-border-strong: color(display-p3 0.9894 0.977 0.9518);
|
|
209
|
+
--color-border-card: #fdf9f2;
|
|
210
|
+
--color-border-card: color(display-p3 0.9894 0.977 0.9518);
|
|
170
211
|
--color-border-code: #292524;
|
|
212
|
+
--color-border-code: color(display-p3 0.1581 0.1456 0.1418);
|
|
171
213
|
--color-content-primary: #fdf9f2;
|
|
214
|
+
--color-content-primary: color(display-p3 0.9894 0.977 0.9518);
|
|
172
215
|
--color-content-secondary: #a8a29e;
|
|
216
|
+
--color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
|
|
173
217
|
--color-content-muted: #78716c;
|
|
218
|
+
--color-content-muted: color(display-p3 0.4659 0.4441 0.4258);
|
|
174
219
|
--color-content-inverse: #0c0a09;
|
|
220
|
+
--color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
|
|
175
221
|
--color-interactive-primary: #98a384;
|
|
222
|
+
--color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
|
|
176
223
|
--color-interactive-hover: #7e8a6b;
|
|
177
|
-
--color-interactive-
|
|
224
|
+
--color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
|
|
225
|
+
--color-interactive-accent: #3498db;
|
|
226
|
+
--color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
178
227
|
--color-interactive-focus: #98a384;
|
|
179
|
-
--color-
|
|
180
|
-
--color-presentation-accent
|
|
228
|
+
--color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
|
|
229
|
+
--color-presentation-accent: #3498db;
|
|
230
|
+
--color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
231
|
+
--color-presentation-accent-hover: #2980b9;
|
|
232
|
+
--color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
|
|
233
|
+
--color-vertical-accent-dissertation: #ce8e5c;
|
|
234
|
+
--color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
|
|
235
|
+
--color-vertical-accent-rpkg: #60a5fa;
|
|
236
|
+
--color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
|
|
237
|
+
--color-vertical-accent-SGPc: #b2bf22;
|
|
238
|
+
--color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
|
|
239
|
+
--color-brand-mark-red: #ff0000;
|
|
240
|
+
--color-brand-mark-red: color(display-p3 1 0 0);
|
|
181
241
|
--contrast-high: rgb(237, 237, 235);
|
|
182
242
|
--contrast-readable: rgb(237, 237, 235);
|
|
183
243
|
--contrast-medium: #83838f;
|
|
@@ -195,27 +255,57 @@
|
|
|
195
255
|
@media (prefers-color-scheme: dark) {
|
|
196
256
|
:root {
|
|
197
257
|
--color-surface-page: #141410;
|
|
258
|
+
--color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
|
|
198
259
|
--color-surface-page-scrolled: #141410;
|
|
260
|
+
--color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
|
|
199
261
|
--color-surface-elevated: #1c1917;
|
|
262
|
+
--color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
|
|
200
263
|
--color-surface-sunken: #0c0a09;
|
|
264
|
+
--color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
|
|
201
265
|
--color-surface-navbar: #141410;
|
|
266
|
+
--color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
|
|
202
267
|
--color-surface-navbar-scrolled: #141410;
|
|
268
|
+
--color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
|
|
203
269
|
--color-surface-code: #1c1917;
|
|
204
|
-
--color-
|
|
205
|
-
--color-border-
|
|
206
|
-
--color-border-
|
|
207
|
-
--color-border-
|
|
270
|
+
--color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
|
|
271
|
+
--color-border-subtle: #fdf9f2;
|
|
272
|
+
--color-border-subtle: color(display-p3 0.9894 0.977 0.9518);
|
|
273
|
+
--color-border-moderate: #fdf9f2;
|
|
274
|
+
--color-border-moderate: color(display-p3 0.9894 0.977 0.9518);
|
|
275
|
+
--color-border-strong: #fdf9f2;
|
|
276
|
+
--color-border-strong: color(display-p3 0.9894 0.977 0.9518);
|
|
277
|
+
--color-border-card: #fdf9f2;
|
|
278
|
+
--color-border-card: color(display-p3 0.9894 0.977 0.9518);
|
|
208
279
|
--color-border-code: #292524;
|
|
280
|
+
--color-border-code: color(display-p3 0.1581 0.1456 0.1418);
|
|
209
281
|
--color-content-primary: #fdf9f2;
|
|
282
|
+
--color-content-primary: color(display-p3 0.9894 0.977 0.9518);
|
|
210
283
|
--color-content-secondary: #a8a29e;
|
|
284
|
+
--color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
|
|
211
285
|
--color-content-muted: #78716c;
|
|
286
|
+
--color-content-muted: color(display-p3 0.4659 0.4441 0.4258);
|
|
212
287
|
--color-content-inverse: #0c0a09;
|
|
288
|
+
--color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
|
|
213
289
|
--color-interactive-primary: #98a384;
|
|
290
|
+
--color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
|
|
214
291
|
--color-interactive-hover: #7e8a6b;
|
|
215
|
-
--color-interactive-
|
|
292
|
+
--color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
|
|
293
|
+
--color-interactive-accent: #3498db;
|
|
294
|
+
--color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
216
295
|
--color-interactive-focus: #98a384;
|
|
217
|
-
--color-
|
|
218
|
-
--color-presentation-accent
|
|
296
|
+
--color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
|
|
297
|
+
--color-presentation-accent: #3498db;
|
|
298
|
+
--color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
|
|
299
|
+
--color-presentation-accent-hover: #2980b9;
|
|
300
|
+
--color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
|
|
301
|
+
--color-vertical-accent-dissertation: #ce8e5c;
|
|
302
|
+
--color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
|
|
303
|
+
--color-vertical-accent-rpkg: #60a5fa;
|
|
304
|
+
--color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
|
|
305
|
+
--color-vertical-accent-SGPc: #b2bf22;
|
|
306
|
+
--color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
|
|
307
|
+
--color-brand-mark-red: #ff0000;
|
|
308
|
+
--color-brand-mark-red: color(display-p3 1 0 0);
|
|
219
309
|
--contrast-high: rgb(237, 237, 235);
|
|
220
310
|
--contrast-readable: rgb(237, 237, 235);
|
|
221
311
|
--contrast-medium: #83838f;
|
package/package.json
CHANGED
|
@@ -0,0 +1,358 @@
|
|
|
1
|
+
{
|
|
2
|
+
"color": {
|
|
3
|
+
"surface": {
|
|
4
|
+
"page": {
|
|
5
|
+
"light": {
|
|
6
|
+
"srgb": "#ededeb",
|
|
7
|
+
"oklch": "oklch(94.55% 0.0027 106.45)",
|
|
8
|
+
"p3": "color(display-p3 0.9294 0.9294 0.9223)"
|
|
9
|
+
},
|
|
10
|
+
"dark": {
|
|
11
|
+
"srgb": "#141410",
|
|
12
|
+
"oklch": "oklch(18.97% 0.0078 107.13)",
|
|
13
|
+
"p3": "color(display-p3 0.0784 0.0784 0.0643)"
|
|
14
|
+
},
|
|
15
|
+
"description": "Main page background — warm-grey (light) / ink-900 (dark)"
|
|
16
|
+
},
|
|
17
|
+
"page-scrolled": {
|
|
18
|
+
"light": {
|
|
19
|
+
"srgb": "#ededeb",
|
|
20
|
+
"oklch": "oklch(94.55% 0.0027 106.45)",
|
|
21
|
+
"p3": "color(display-p3 0.9294 0.9294 0.9223)"
|
|
22
|
+
},
|
|
23
|
+
"dark": {
|
|
24
|
+
"srgb": "#141410",
|
|
25
|
+
"oklch": "oklch(18.97% 0.0078 107.13)",
|
|
26
|
+
"p3": "color(display-p3 0.0784 0.0784 0.0643)"
|
|
27
|
+
},
|
|
28
|
+
"description": "Page background when navbar shrinks — matches page"
|
|
29
|
+
},
|
|
30
|
+
"elevated": {
|
|
31
|
+
"light": {
|
|
32
|
+
"srgb": "#f7f7f6",
|
|
33
|
+
"oklch": "oklch(97.59% 0.0013 106.42)",
|
|
34
|
+
"p3": "color(display-p3 0.9686 0.9686 0.9651)"
|
|
35
|
+
},
|
|
36
|
+
"dark": {
|
|
37
|
+
"srgb": "#1c1917",
|
|
38
|
+
"oklch": "oklch(21.61% 0.0061 56.04)",
|
|
39
|
+
"p3": "color(display-p3 0.1078 0.0985 0.0911)"
|
|
40
|
+
},
|
|
41
|
+
"description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
|
|
42
|
+
},
|
|
43
|
+
"sunken": {
|
|
44
|
+
"light": {
|
|
45
|
+
"srgb": "#faf2e3",
|
|
46
|
+
"oklch": "oklch(96.34% 0.0216 83.26)",
|
|
47
|
+
"p3": "color(display-p3 0.9749 0.9501 0.8963)"
|
|
48
|
+
},
|
|
49
|
+
"dark": {
|
|
50
|
+
"srgb": "#0c0a09",
|
|
51
|
+
"oklch": "oklch(14.69% 0.0041 49.25)",
|
|
52
|
+
"p3": "color(display-p3 0.0457 0.0395 0.0358)"
|
|
53
|
+
},
|
|
54
|
+
"description": "Input fields, code blocks — below page level"
|
|
55
|
+
},
|
|
56
|
+
"navbar": {
|
|
57
|
+
"light": {
|
|
58
|
+
"srgb": "#ededeb",
|
|
59
|
+
"oklch": "oklch(94.55% 0.0027 106.45)",
|
|
60
|
+
"p3": "color(display-p3 0.9294 0.9294 0.9223)"
|
|
61
|
+
},
|
|
62
|
+
"dark": {
|
|
63
|
+
"srgb": "#141410",
|
|
64
|
+
"oklch": "oklch(18.97% 0.0078 107.13)",
|
|
65
|
+
"p3": "color(display-p3 0.0784 0.0784 0.0643)"
|
|
66
|
+
},
|
|
67
|
+
"description": "Navbar background — matches page in both themes"
|
|
68
|
+
},
|
|
69
|
+
"navbar-scrolled": {
|
|
70
|
+
"light": {
|
|
71
|
+
"srgb": "#ededeb",
|
|
72
|
+
"oklch": "oklch(94.55% 0.0027 106.45)",
|
|
73
|
+
"p3": "color(display-p3 0.9294 0.9294 0.9223)"
|
|
74
|
+
},
|
|
75
|
+
"dark": {
|
|
76
|
+
"srgb": "#141410",
|
|
77
|
+
"oklch": "oklch(18.97% 0.0078 107.13)",
|
|
78
|
+
"p3": "color(display-p3 0.0784 0.0784 0.0643)"
|
|
79
|
+
},
|
|
80
|
+
"description": "Navbar when scrolled/shrunk — matches page-scrolled"
|
|
81
|
+
},
|
|
82
|
+
"code": {
|
|
83
|
+
"light": {
|
|
84
|
+
"srgb": "#faf2e3",
|
|
85
|
+
"oklch": "oklch(96.34% 0.0216 83.26)",
|
|
86
|
+
"p3": "color(display-p3 0.9749 0.9501 0.8963)"
|
|
87
|
+
},
|
|
88
|
+
"dark": {
|
|
89
|
+
"srgb": "#1c1917",
|
|
90
|
+
"oklch": "oklch(21.61% 0.0061 56.04)",
|
|
91
|
+
"p3": "color(display-p3 0.1078 0.0985 0.0911)"
|
|
92
|
+
},
|
|
93
|
+
"description": "Code block and inline code background"
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
"border": {
|
|
97
|
+
"subtle": {
|
|
98
|
+
"light": {
|
|
99
|
+
"srgb": "#0c0a09",
|
|
100
|
+
"oklch": "oklch(14.69% 0.0041 49.25)",
|
|
101
|
+
"p3": "color(display-p3 0.0457 0.0395 0.0358)"
|
|
102
|
+
},
|
|
103
|
+
"dark": {
|
|
104
|
+
"srgb": "#fdf9f2",
|
|
105
|
+
"oklch": "oklch(98.33% 0.0102 81.8)",
|
|
106
|
+
"p3": "color(display-p3 0.9894 0.977 0.9518)"
|
|
107
|
+
},
|
|
108
|
+
"description": "Subtle borders — element separation"
|
|
109
|
+
},
|
|
110
|
+
"moderate": {
|
|
111
|
+
"light": {
|
|
112
|
+
"srgb": "#0c0a09",
|
|
113
|
+
"oklch": "oklch(14.69% 0.0041 49.25)",
|
|
114
|
+
"p3": "color(display-p3 0.0457 0.0395 0.0358)"
|
|
115
|
+
},
|
|
116
|
+
"dark": {
|
|
117
|
+
"srgb": "#fdf9f2",
|
|
118
|
+
"oklch": "oklch(98.33% 0.0102 81.8)",
|
|
119
|
+
"p3": "color(display-p3 0.9894 0.977 0.9518)"
|
|
120
|
+
},
|
|
121
|
+
"description": "Moderate borders — defined boundaries"
|
|
122
|
+
},
|
|
123
|
+
"strong": {
|
|
124
|
+
"light": {
|
|
125
|
+
"srgb": "#0c0a09",
|
|
126
|
+
"oklch": "oklch(14.69% 0.0041 49.25)",
|
|
127
|
+
"p3": "color(display-p3 0.0457 0.0395 0.0358)"
|
|
128
|
+
},
|
|
129
|
+
"dark": {
|
|
130
|
+
"srgb": "#fdf9f2",
|
|
131
|
+
"oklch": "oklch(98.33% 0.0102 81.8)",
|
|
132
|
+
"p3": "color(display-p3 0.9894 0.977 0.9518)"
|
|
133
|
+
},
|
|
134
|
+
"description": "Strong borders — prominent separation"
|
|
135
|
+
},
|
|
136
|
+
"card": {
|
|
137
|
+
"light": {
|
|
138
|
+
"srgb": "#0c0a09",
|
|
139
|
+
"oklch": "oklch(14.69% 0.0041 49.25)",
|
|
140
|
+
"p3": "color(display-p3 0.0457 0.0395 0.0358)"
|
|
141
|
+
},
|
|
142
|
+
"dark": {
|
|
143
|
+
"srgb": "#fdf9f2",
|
|
144
|
+
"oklch": "oklch(98.33% 0.0102 81.8)",
|
|
145
|
+
"p3": "color(display-p3 0.9894 0.977 0.9518)"
|
|
146
|
+
},
|
|
147
|
+
"description": "Card border color with transparency for subtle definition"
|
|
148
|
+
},
|
|
149
|
+
"code": {
|
|
150
|
+
"light": {
|
|
151
|
+
"srgb": "#d6d3d1",
|
|
152
|
+
"oklch": "oklch(86.87% 0.0043 56.37)",
|
|
153
|
+
"p3": "color(display-p3 0.8371 0.8278 0.8205)"
|
|
154
|
+
},
|
|
155
|
+
"dark": {
|
|
156
|
+
"srgb": "#292524",
|
|
157
|
+
"oklch": "oklch(26.85% 0.0063 34.3)",
|
|
158
|
+
"p3": "color(display-p3 0.1581 0.1456 0.1418)"
|
|
159
|
+
},
|
|
160
|
+
"description": "Code block border"
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
"content": {
|
|
164
|
+
"primary": {
|
|
165
|
+
"light": {
|
|
166
|
+
"srgb": "#14140f",
|
|
167
|
+
"oklch": "oklch(18.93% 0.0098 107.3)",
|
|
168
|
+
"p3": "color(display-p3 0.0784 0.0784 0.0608)"
|
|
169
|
+
},
|
|
170
|
+
"dark": {
|
|
171
|
+
"srgb": "#fdf9f2",
|
|
172
|
+
"oklch": "oklch(98.33% 0.0102 81.8)",
|
|
173
|
+
"p3": "color(display-p3 0.9894 0.977 0.9518)"
|
|
174
|
+
},
|
|
175
|
+
"description": "Primary text — stone-900 on stone-100 (light, matches presentation-theme.scss exactly) / paper-100 on dark surface"
|
|
176
|
+
},
|
|
177
|
+
"secondary": {
|
|
178
|
+
"light": {
|
|
179
|
+
"srgb": "#7c7c7c",
|
|
180
|
+
"oklch": "oklch(58.63% 0 0)",
|
|
181
|
+
"p3": "color(display-p3 0.4863 0.4863 0.4863)"
|
|
182
|
+
},
|
|
183
|
+
"dark": {
|
|
184
|
+
"srgb": "#a8a29e",
|
|
185
|
+
"oklch": "oklch(71.61% 0.0091 56.26)",
|
|
186
|
+
"p3": "color(display-p3 0.6547 0.6361 0.6215)"
|
|
187
|
+
},
|
|
188
|
+
"description": "Secondary text — stone-500 (light, matches presentation-theme.scss --color-secondary) / ink-300 on dark"
|
|
189
|
+
},
|
|
190
|
+
"muted": {
|
|
191
|
+
"light": {
|
|
192
|
+
"srgb": "#78716c",
|
|
193
|
+
"oklch": "oklch(55.34% 0.0116 58.07)",
|
|
194
|
+
"p3": "color(display-p3 0.4659 0.4441 0.4258)"
|
|
195
|
+
},
|
|
196
|
+
"dark": {
|
|
197
|
+
"srgb": "#78716c",
|
|
198
|
+
"oklch": "oklch(55.34% 0.0116 58.07)",
|
|
199
|
+
"p3": "color(display-p3 0.4659 0.4441 0.4258)"
|
|
200
|
+
},
|
|
201
|
+
"description": "Muted text — captions, meta info"
|
|
202
|
+
},
|
|
203
|
+
"inverse": {
|
|
204
|
+
"light": {
|
|
205
|
+
"srgb": "#fdf9f2",
|
|
206
|
+
"oklch": "oklch(98.33% 0.0102 81.8)",
|
|
207
|
+
"p3": "color(display-p3 0.9894 0.977 0.9518)"
|
|
208
|
+
},
|
|
209
|
+
"dark": {
|
|
210
|
+
"srgb": "#0c0a09",
|
|
211
|
+
"oklch": "oklch(14.69% 0.0041 49.25)",
|
|
212
|
+
"p3": "color(display-p3 0.0457 0.0395 0.0358)"
|
|
213
|
+
},
|
|
214
|
+
"description": "Inverse text — for contrasting backgrounds"
|
|
215
|
+
}
|
|
216
|
+
},
|
|
217
|
+
"interactive": {
|
|
218
|
+
"primary": {
|
|
219
|
+
"light": {
|
|
220
|
+
"srgb": "#434739",
|
|
221
|
+
"oklch": "oklch(38.97% 0.0235 120.45)",
|
|
222
|
+
"p3": "color(display-p3 0.2656 0.2779 0.2287)"
|
|
223
|
+
},
|
|
224
|
+
"dark": {
|
|
225
|
+
"srgb": "#98a384",
|
|
226
|
+
"oklch": "oklch(69.82% 0.0456 123.46)",
|
|
227
|
+
"p3": "color(display-p3 0.604 0.6378 0.5291)"
|
|
228
|
+
},
|
|
229
|
+
"description": "Primary interactive — forest-700 on light (7.75:1 on stone-100, white text 9.0:1 — passes WCAG AAA) / forest-300 on dark"
|
|
230
|
+
},
|
|
231
|
+
"hover": {
|
|
232
|
+
"light": {
|
|
233
|
+
"srgb": "#363a2e",
|
|
234
|
+
"oklch": "oklch(34.07% 0.021 122.5)",
|
|
235
|
+
"p3": "color(display-p3 0.2146 0.2269 0.1848)"
|
|
236
|
+
},
|
|
237
|
+
"dark": {
|
|
238
|
+
"srgb": "#7e8a6b",
|
|
239
|
+
"oklch": "oklch(61.5% 0.0473 124.97)",
|
|
240
|
+
"p3": "color(display-p3 0.5029 0.5397 0.4313)"
|
|
241
|
+
},
|
|
242
|
+
"description": "Hover state — forest-800 on light (slightly darker than canonical) / forest-400 on dark"
|
|
243
|
+
},
|
|
244
|
+
"accent": {
|
|
245
|
+
"light": {
|
|
246
|
+
"srgb": "#1f618d",
|
|
247
|
+
"oklch": "oklch(47.31% 0.0963 242.42)",
|
|
248
|
+
"p3": "color(display-p3 0.198 0.375 0.5385)"
|
|
249
|
+
},
|
|
250
|
+
"dark": {
|
|
251
|
+
"srgb": "#3498db",
|
|
252
|
+
"oklch": "oklch(65.31% 0.1347 242.69)",
|
|
253
|
+
"p3": "color(display-p3 0.3208 0.588 0.8369)"
|
|
254
|
+
},
|
|
255
|
+
"description": "Accent — sky-blue moral-weight color (iteration-2). Light: accent-500 (5.68:1 on stone-100, AA with headroom; 6.66:1 white-on-color for backplates). Dark: accent-300 (5.41:1 on stone-900, AA with headroom — closes the iteration-1 dark-mode AA-large-only contrast gap). FIRST instance of mode-aware role mapping in the system: light and dark point to different palette stops rather than the same hex. The scale-name `accent` is preserved across iteration-1 → iteration-2 (consumer-side text-accent-500 keeps working). See wiki/decisions/iteration-2-blue-accent.md for the dialectical reframe of the iteration-1 emancipation-copper framing (sky/horizon/Enlightenment-blueprint/Reformation-Protestant traditions vs. Western-traffic-coding STOP-red)."
|
|
256
|
+
},
|
|
257
|
+
"focus": {
|
|
258
|
+
"light": {
|
|
259
|
+
"srgb": "#434739",
|
|
260
|
+
"oklch": "oklch(38.97% 0.0235 120.45)",
|
|
261
|
+
"p3": "color(display-p3 0.2656 0.2779 0.2287)"
|
|
262
|
+
},
|
|
263
|
+
"dark": {
|
|
264
|
+
"srgb": "#98a384",
|
|
265
|
+
"oklch": "oklch(69.82% 0.0456 123.46)",
|
|
266
|
+
"p3": "color(display-p3 0.604 0.6378 0.5291)"
|
|
267
|
+
},
|
|
268
|
+
"description": "Focus indicators — mirrors interactive.primary"
|
|
269
|
+
}
|
|
270
|
+
},
|
|
271
|
+
"presentation": {
|
|
272
|
+
"accent": {
|
|
273
|
+
"light": {
|
|
274
|
+
"srgb": "#3498db",
|
|
275
|
+
"oklch": "oklch(65.31% 0.1347 242.69)",
|
|
276
|
+
"p3": "color(display-p3 0.3208 0.588 0.8369)"
|
|
277
|
+
},
|
|
278
|
+
"dark": {
|
|
279
|
+
"srgb": "#3498db",
|
|
280
|
+
"oklch": "oklch(65.31% 0.1347 242.69)",
|
|
281
|
+
"p3": "color(display-p3 0.3208 0.588 0.8369)"
|
|
282
|
+
},
|
|
283
|
+
"description": "Presentation accent — Flat-UI peter-river; reserved for reveal.js 2030s-feel highlights. Not for body prose or interactive primary use. Pairs well with copper on dark slides."
|
|
284
|
+
},
|
|
285
|
+
"accent-hover": {
|
|
286
|
+
"light": {
|
|
287
|
+
"srgb": "#2980b9",
|
|
288
|
+
"oklch": "oklch(57.59% 0.119 242.28)",
|
|
289
|
+
"p3": "color(display-p3 0.2638 0.495 0.7068)"
|
|
290
|
+
},
|
|
291
|
+
"dark": {
|
|
292
|
+
"srgb": "#2980b9",
|
|
293
|
+
"oklch": "oklch(57.59% 0.119 242.28)",
|
|
294
|
+
"p3": "color(display-p3 0.2638 0.495 0.7068)"
|
|
295
|
+
},
|
|
296
|
+
"description": "Presentation accent hover/emphasized variant — Flat-UI belize-hole"
|
|
297
|
+
}
|
|
298
|
+
},
|
|
299
|
+
"vertical-accent": {
|
|
300
|
+
"$comment": "Per-vertical brand accents — each Level-2 property's identity color, distinct from the house interactive.accent (the L1 sky-blue hub color). Mode-aware (light/dark stops) like interactive.accent. Used for app icons, navbar-logo emphasis, and per-vertical theming. Contrast vs surface.page verified WCAG: light values are the on-light marks, dark values the on-dark marks. dataimago (L1 hub) intentionally has no vertical accent — it uses interactive.accent + ink.",
|
|
301
|
+
"dissertation": {
|
|
302
|
+
"light": {
|
|
303
|
+
"srgb": "#b87333",
|
|
304
|
+
"oklch": "oklch(61.8% 0.1171 60.4)",
|
|
305
|
+
"p3": "color(display-p3 0.7242 0.4389 0.1259)"
|
|
306
|
+
},
|
|
307
|
+
"dark": {
|
|
308
|
+
"srgb": "#ce8e5c",
|
|
309
|
+
"oklch": "oklch(69.98% 0.1021 58.08)",
|
|
310
|
+
"p3": "color(display-p3 0.8089 0.5486 0.3177)"
|
|
311
|
+
},
|
|
312
|
+
"description": "dissertation-ai — copper (manuscript / annotation / the human hand in the margin). Light: 3.23:1 on stone-100 (AA-large; large-mark use). Dark: #CE8E5C 6.72:1 on ink-900 (AA)."
|
|
313
|
+
},
|
|
314
|
+
"rpkg": {
|
|
315
|
+
"light": {
|
|
316
|
+
"srgb": "#3b82f6",
|
|
317
|
+
"oklch": "oklch(62.31% 0.188 259.81)",
|
|
318
|
+
"p3": "color(display-p3 0.3047 0.5035 0.9338)"
|
|
319
|
+
},
|
|
320
|
+
"dark": {
|
|
321
|
+
"srgb": "#60a5fa",
|
|
322
|
+
"oklch": "oklch(71.37% 0.1434 254.62)",
|
|
323
|
+
"p3": "color(display-p3 0.4405 0.6403 0.9545)"
|
|
324
|
+
},
|
|
325
|
+
"description": "rpkg-ai — engineering blue. Light: 3.14:1 on stone-100 (AA-large; large-mark use). Dark: #60A5FA 7.26:1 on ink-900 (AA)."
|
|
326
|
+
},
|
|
327
|
+
"SGPc": {
|
|
328
|
+
"light": {
|
|
329
|
+
"srgb": "#5a6310",
|
|
330
|
+
"oklch": "oklch(47.61% 0.1017 115.99)",
|
|
331
|
+
"p3": "color(display-p3 0.3595 0.3871 0.1309)"
|
|
332
|
+
},
|
|
333
|
+
"dark": {
|
|
334
|
+
"srgb": "#b2bf22",
|
|
335
|
+
"oklch": "oklch(76.9% 0.1655 114.7)",
|
|
336
|
+
"p3": "color(display-p3 0.7074 0.7474 0.2714)"
|
|
337
|
+
},
|
|
338
|
+
"description": "SGPc-ai — growth yellow-green (decided 2026-06-26). The brand value is the bright #B2BF22, but it fails contrast on light surfaces (1.73:1), so LIGHT mode uses the darkened companion #5A6310 (5.55:1 on stone-100 — full AA) and DARK mode uses the bright #B2BF22 (9.12:1 on ink-900). See wiki/decisions/sgpc-accent.md."
|
|
339
|
+
}
|
|
340
|
+
},
|
|
341
|
+
"brand-mark": {
|
|
342
|
+
"$comment": "Brand-MARK colors (the dataimago monogram / wordmark logo treatment) — distinct from the interactive.accent role. The signature monogram red is a wide-gamut PILOT (see wiki/decisions/p3-oklch-color.md). It is mode-aware for AA-normal headroom: a single red cannot clear 4.5:1 on BOTH the light page (#ededeb) and ink-900 — light needs a deep red, dark needs a bright one. LIGHT uses the deepened #cc0000 (faithful P3, contrast-first); DARK keeps the vivid display-P3 primary red (#ff0000 fallback → color(display-p3 1 0 0)), where #ff0000 already passes AA-normal. Vivid override authored in tools/color-converter.mjs (dark-only for the red), emitted as a `#hex → color(display-p3 …)` cascade in the -p3 build.",
|
|
343
|
+
"red": {
|
|
344
|
+
"light": {
|
|
345
|
+
"srgb": "#cc0000",
|
|
346
|
+
"oklch": "oklch(53.08% 0.2178 29.23)",
|
|
347
|
+
"p3": "color(display-p3 0.7331 0.1519 0.1019)"
|
|
348
|
+
},
|
|
349
|
+
"dark": {
|
|
350
|
+
"srgb": "#ff0000",
|
|
351
|
+
"oklch": "oklch(62.8% 0.2577 29.23)",
|
|
352
|
+
"p3": "color(display-p3 1 0 0)"
|
|
353
|
+
},
|
|
354
|
+
"description": "Signature monogram red — mode-aware for AA-normal. LIGHT: deepened #cc0000 (5.0:1 on stone-100 #ededeb / 5.5:1 on elevated — full AA-normal, safe at small sizes / as text). DARK: vivid #ff0000 fallback + display-P3 primary red (4.6:1 on ink-900 — AA-normal). Logo-mark color only — NOT the interactive accent (which is iteration-2 blue). Large navbar lift-wash marks keep the vivid display-P3 red (AA-large, large-mark use); this token is the AA-normal value for arbitrary/small mark reuse."
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
}
|
package/src/theme-colors.json
CHANGED
|
@@ -119,6 +119,32 @@
|
|
|
119
119
|
"dark": "#2980B9",
|
|
120
120
|
"description": "Presentation accent hover/emphasized variant — Flat-UI belize-hole"
|
|
121
121
|
}
|
|
122
|
+
},
|
|
123
|
+
"vertical-accent": {
|
|
124
|
+
"$comment": "Per-vertical brand accents — each Level-2 property's identity color, distinct from the house interactive.accent (the L1 sky-blue hub color). Mode-aware (light/dark stops) like interactive.accent. Used for app icons, navbar-logo emphasis, and per-vertical theming. Contrast vs surface.page verified WCAG: light values are the on-light marks, dark values the on-dark marks. dataimago (L1 hub) intentionally has no vertical accent — it uses interactive.accent + ink.",
|
|
125
|
+
"dissertation": {
|
|
126
|
+
"light": "#B87333",
|
|
127
|
+
"dark": "#CE8E5C",
|
|
128
|
+
"description": "dissertation-ai — copper (manuscript / annotation / the human hand in the margin). Re-authored at higher P3 chroma (~+28% light / +27% dark) for a vivid wide-gamut pop; sRGB fallback unchanged so contrast is preserved. Light: 3.23:1 on stone-100 (AA-large; large-mark use). Dark: #CE8E5C 6.72:1 on ink-900 (AA)."
|
|
129
|
+
},
|
|
130
|
+
"rpkg": {
|
|
131
|
+
"light": "#3B82F6",
|
|
132
|
+
"dark": "#60A5FA",
|
|
133
|
+
"description": "rpkg-ai — engineering blue. Light: 3.14:1 on stone-100 (AA-large; large-mark use). Dark: #60A5FA 7.26:1 on ink-900 (AA)."
|
|
134
|
+
},
|
|
135
|
+
"SGPc": {
|
|
136
|
+
"light": "#5A6310",
|
|
137
|
+
"dark": "#B2BF22",
|
|
138
|
+
"description": "SGPc-ai — growth yellow-green (decided 2026-06-26). The brand value is the bright #B2BF22, but it fails contrast on light surfaces (1.73:1), so LIGHT mode uses the darkened companion #5A6310 (5.55:1 on stone-100 — full AA) and DARK mode uses the bright #B2BF22 (9.12:1 on ink-900). See wiki/decisions/sgpc-accent.md."
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
"brand-mark": {
|
|
142
|
+
"$comment": "Brand-MARK colors (the dataimago monogram / wordmark logo treatment) — distinct from the interactive.accent role. The signature monogram red is a wide-gamut PILOT (see wiki/decisions/p3-oklch-color.md). It is mode-aware for AA-normal headroom: a single red cannot clear 4.5:1 on BOTH the light page (#ededeb) and ink-900 — light needs a deep red, dark needs a bright one. LIGHT uses the deepened #cc0000 (faithful P3, contrast-first); DARK keeps the vivid display-P3 primary red (#ff0000 fallback → color(display-p3 1 0 0)), where #ff0000 already passes AA-normal. Vivid override authored in tools/color-converter.mjs (dark-only for the red), emitted as a `#hex → color(display-p3 …)` cascade in the -p3 build.",
|
|
143
|
+
"red": {
|
|
144
|
+
"light": "#cc0000",
|
|
145
|
+
"dark": "#ff0000",
|
|
146
|
+
"description": "Signature monogram red — mode-aware for AA-normal. LIGHT: deepened #cc0000 (5.0:1 on stone-100 #ededeb / 5.5:1 on elevated — full AA-normal, safe at small sizes / as text). DARK: vivid #ff0000 fallback + display-P3 primary red (4.6:1 on ink-900 — AA-normal). Logo-mark color only — NOT the interactive accent (which is iteration-2 blue). Large navbar lift-wash marks keep the vivid display-P3 red (AA-large, large-mark use); this token is the AA-normal value for arbitrary/small mark reuse."
|
|
147
|
+
}
|
|
122
148
|
}
|
|
123
149
|
}
|
|
124
150
|
}
|