@dataimago/tokens 0.1.0-alpha.1 → 0.1.0-alpha.3
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 +66 -35
- package/dist/index.mjs +66 -35
- package/dist/tokens.css +62 -34
- package/dist/tokens.scss +62 -34
- package/package.json +1 -1
- package/src/colors.json +37 -13
- package/src/effects.json +16 -5
- package/src/theme-colors.json +24 -24
- package/src/typography.json +26 -6
package/dist/index.cjs
CHANGED
|
@@ -3,19 +3,19 @@ const tokens = {
|
|
|
3
3
|
"color": {
|
|
4
4
|
"surface": {
|
|
5
5
|
"page": {
|
|
6
|
-
"light": "#
|
|
7
|
-
"dark": "#
|
|
8
|
-
"description": "Main page background —
|
|
6
|
+
"light": "#ededeb",
|
|
7
|
+
"dark": "#141410",
|
|
8
|
+
"description": "Main page background — warm-grey (light) / ink-900 (dark)"
|
|
9
9
|
},
|
|
10
10
|
"page-scrolled": {
|
|
11
|
-
"light": "#
|
|
12
|
-
"dark": "#
|
|
11
|
+
"light": "#ededeb",
|
|
12
|
+
"dark": "#141410",
|
|
13
13
|
"description": "Page background when navbar shrinks — matches page"
|
|
14
14
|
},
|
|
15
15
|
"elevated": {
|
|
16
|
-
"light": "#
|
|
16
|
+
"light": "#f7f7f6",
|
|
17
17
|
"dark": "#1c1917",
|
|
18
|
-
"description": "Cards, modals, dropdowns — one step above page"
|
|
18
|
+
"description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
|
|
19
19
|
},
|
|
20
20
|
"sunken": {
|
|
21
21
|
"light": "#faf2e3",
|
|
@@ -23,13 +23,13 @@ const tokens = {
|
|
|
23
23
|
"description": "Input fields, code blocks — below page level"
|
|
24
24
|
},
|
|
25
25
|
"navbar": {
|
|
26
|
-
"light": "#
|
|
27
|
-
"dark": "#
|
|
26
|
+
"light": "#ededeb",
|
|
27
|
+
"dark": "#141410",
|
|
28
28
|
"description": "Navbar background — matches page in both themes"
|
|
29
29
|
},
|
|
30
30
|
"navbar-scrolled": {
|
|
31
|
-
"light": "#
|
|
32
|
-
"dark": "#
|
|
31
|
+
"light": "#ededeb",
|
|
32
|
+
"dark": "#141410",
|
|
33
33
|
"description": "Navbar when scrolled/shrunk — matches page-scrolled"
|
|
34
34
|
},
|
|
35
35
|
"code": {
|
|
@@ -67,14 +67,14 @@ const tokens = {
|
|
|
67
67
|
},
|
|
68
68
|
"content": {
|
|
69
69
|
"primary": {
|
|
70
|
-
"light": "#
|
|
70
|
+
"light": "#14140f",
|
|
71
71
|
"dark": "#fdf9f2",
|
|
72
|
-
"description": "Primary text —
|
|
72
|
+
"description": "Primary text — stone-900 on stone-100 (light, matches presentation-theme.scss exactly) / paper-100 on dark surface"
|
|
73
73
|
},
|
|
74
74
|
"secondary": {
|
|
75
|
-
"light": "#
|
|
75
|
+
"light": "#7c7c7c",
|
|
76
76
|
"dark": "#a8a29e",
|
|
77
|
-
"description": "Secondary text —
|
|
77
|
+
"description": "Secondary text — stone-500 (light, matches presentation-theme.scss --color-secondary) / ink-300 on dark"
|
|
78
78
|
},
|
|
79
79
|
"muted": {
|
|
80
80
|
"light": "#78716c",
|
|
@@ -89,23 +89,23 @@ const tokens = {
|
|
|
89
89
|
},
|
|
90
90
|
"interactive": {
|
|
91
91
|
"primary": {
|
|
92
|
-
"light": "#
|
|
93
|
-
"dark": "#
|
|
94
|
-
"description": "Primary interactive —
|
|
92
|
+
"light": "#434739",
|
|
93
|
+
"dark": "#98a384",
|
|
94
|
+
"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"
|
|
95
95
|
},
|
|
96
96
|
"hover": {
|
|
97
|
-
"light": "#
|
|
98
|
-
"dark": "#
|
|
99
|
-
"description": "Hover state —
|
|
97
|
+
"light": "#363a2e",
|
|
98
|
+
"dark": "#7e8a6b",
|
|
99
|
+
"description": "Hover state — forest-800 on light (slightly darker than canonical) / forest-400 on dark"
|
|
100
100
|
},
|
|
101
101
|
"accent": {
|
|
102
102
|
"light": "#b54a27",
|
|
103
103
|
"dark": "#b54a27",
|
|
104
|
-
"description": "Accent — emancipation copper-red; moral-weight color"
|
|
104
|
+
"description": "Accent — emancipation copper-red; moral-weight color (preserved from copper era as deliberate non-interactive emphasis)"
|
|
105
105
|
},
|
|
106
106
|
"focus": {
|
|
107
|
-
"light": "#
|
|
108
|
-
"dark": "#
|
|
107
|
+
"light": "#434739",
|
|
108
|
+
"dark": "#98a384",
|
|
109
109
|
"description": "Focus indicators — mirrors interactive.primary"
|
|
110
110
|
}
|
|
111
111
|
},
|
|
@@ -216,11 +216,22 @@ const tokens = {
|
|
|
216
216
|
}
|
|
217
217
|
},
|
|
218
218
|
"transition": {
|
|
219
|
-
"quick":
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
"
|
|
219
|
+
"quick": {
|
|
220
|
+
"value": "0.15s ease",
|
|
221
|
+
"description": "Snap-fast micro-interactions — hover lifts, focus rings, immediate-feedback affordances"
|
|
222
|
+
},
|
|
223
|
+
"standard": {
|
|
224
|
+
"value": "0.25s ease-in-out",
|
|
225
|
+
"description": "Default for most state changes — toggles, button states, card hovers"
|
|
226
|
+
},
|
|
227
|
+
"smooth": {
|
|
228
|
+
"value": "0.35s ease",
|
|
229
|
+
"description": "Theme transitions, navbar collapse/expand, layout shifts that should feel deliberate"
|
|
230
|
+
},
|
|
231
|
+
"logo": {
|
|
232
|
+
"value": "0.3s",
|
|
233
|
+
"description": "Reserved for the dataimago wordmark / brand-mark transitions; do not borrow for general UI"
|
|
234
|
+
}
|
|
224
235
|
},
|
|
225
236
|
"card": {
|
|
226
237
|
"background": "surface.elevated",
|
|
@@ -267,7 +278,7 @@ const tokens = {
|
|
|
267
278
|
"font": {
|
|
268
279
|
"family": {
|
|
269
280
|
"sans": {
|
|
270
|
-
"value": "Fira Sans, system-ui, sans-serif",
|
|
281
|
+
"value": "Noto Sans, Fira Sans, system-ui, sans-serif",
|
|
271
282
|
"description": "Primary sans-serif font - body text"
|
|
272
283
|
},
|
|
273
284
|
"mono": {
|
|
@@ -275,16 +286,24 @@ const tokens = {
|
|
|
275
286
|
"description": "Monospace font - code blocks and technical content"
|
|
276
287
|
},
|
|
277
288
|
"display": {
|
|
289
|
+
"value": "var(--font-family-display-editorial)",
|
|
290
|
+
"description": "DEPRECATED alias of display-editorial; preserved through 0.2.x and removed in 0.3.0. New code should reference --font-family-display-editorial or --font-family-display-documentation directly. See wiki/decisions/display-family-split.md."
|
|
291
|
+
},
|
|
292
|
+
"display-editorial": {
|
|
278
293
|
"value": "Josefin Sans, system-ui, sans-serif",
|
|
279
|
-
"description": "
|
|
294
|
+
"description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
|
|
295
|
+
},
|
|
296
|
+
"display-documentation": {
|
|
297
|
+
"value": "Noto Sans, system-ui, sans-serif",
|
|
298
|
+
"description": "Documentation display family — Noto Sans, the wayfinding voice. Used on surfaces where the heading does structural work: API docs, foundation Section h2s, KNOWLEDGE.md/CLAUDE.md headings, long-form research subheadings. Activated by wrapping content in .di-prose; pair with weight 600 (semibold). See wiki/decisions/display-family-split.md."
|
|
280
299
|
},
|
|
281
300
|
"brand": {
|
|
282
301
|
"value": "Futura, system-ui, sans-serif",
|
|
283
302
|
"description": "Brand font - dataimago navbar and branding elements"
|
|
284
303
|
},
|
|
285
304
|
"math": {
|
|
286
|
-
"value": "
|
|
287
|
-
"description": "Mathematical notation font"
|
|
305
|
+
"value": "Noto Sans Math, Noto Sans, system-ui, sans-serif",
|
|
306
|
+
"description": "Mathematical notation font — Noto Sans Math for broad Unicode math coverage; harmonises with the Noto Sans body stack"
|
|
288
307
|
}
|
|
289
308
|
},
|
|
290
309
|
"size": {
|
|
@@ -351,9 +370,10 @@ const tokens = {
|
|
|
351
370
|
"description": "Bold — h1, strong emphasis"
|
|
352
371
|
},
|
|
353
372
|
"heading": {
|
|
373
|
+
"_invariant": "Heading-weight cluster — 400 floor for all Josefin Sans headings (see wiki/decisions/josefin-weight-floor.md). Sub-400 weights (200, 300) are bound to the opt-in .di-numeric-display utility class, never the default for prose-tier headings. Per wiki/decisions/h1-weight-medium.md the prose-correct band for editorial headings is 400–500.",
|
|
354
374
|
"h1": {
|
|
355
|
-
"value": "var(--font-weight-
|
|
356
|
-
"description": "Heading h1 weight —
|
|
375
|
+
"value": "var(--font-weight-medium)",
|
|
376
|
+
"description": "Heading h1 weight — medium (500). Top-level editorial voice; preserves Josefin Sans's geometric character at hero scale (was bold/700 before iteration-1; see wiki/decisions/h1-weight-medium.md)."
|
|
357
377
|
},
|
|
358
378
|
"h2": {
|
|
359
379
|
"value": "var(--font-weight-medium)",
|
|
@@ -408,6 +428,17 @@ const tokens = {
|
|
|
408
428
|
"value": "1.625",
|
|
409
429
|
"description": "Relaxed line height - long-form content"
|
|
410
430
|
}
|
|
431
|
+
},
|
|
432
|
+
"feature-settings": {
|
|
433
|
+
"_invariant": "OpenType feature settings cluster — display rules apply lining figures (lnum) so numerals render uniform-baseline at heading scale; body rules retain old-style figures where they belong (in-line numerical mentions in prose). See wiki/decisions/display-lining-figures.md.",
|
|
434
|
+
"display": {
|
|
435
|
+
"value": "\"lnum\"",
|
|
436
|
+
"description": "Lining figures (lnum) for display headings — uniform baseline, uniform height; corrects Josefin Sans's old-style default figures that read as casual at editorial/title scale. Consumed by every CSS rule whose font-family resolves to --font-family-display, --font-family-display-editorial, or --font-family-display-documentation."
|
|
437
|
+
},
|
|
438
|
+
"body": {
|
|
439
|
+
"value": "\"normal\"",
|
|
440
|
+
"description": "Default figure style for body text — preserves Josefin's old-style figures where they harmonize with lowercase letterforms in continuous prose."
|
|
441
|
+
}
|
|
411
442
|
}
|
|
412
443
|
}
|
|
413
444
|
};
|
package/dist/index.mjs
CHANGED
|
@@ -3,19 +3,19 @@ const tokens = {
|
|
|
3
3
|
"color": {
|
|
4
4
|
"surface": {
|
|
5
5
|
"page": {
|
|
6
|
-
"light": "#
|
|
7
|
-
"dark": "#
|
|
8
|
-
"description": "Main page background —
|
|
6
|
+
"light": "#ededeb",
|
|
7
|
+
"dark": "#141410",
|
|
8
|
+
"description": "Main page background — warm-grey (light) / ink-900 (dark)"
|
|
9
9
|
},
|
|
10
10
|
"page-scrolled": {
|
|
11
|
-
"light": "#
|
|
12
|
-
"dark": "#
|
|
11
|
+
"light": "#ededeb",
|
|
12
|
+
"dark": "#141410",
|
|
13
13
|
"description": "Page background when navbar shrinks — matches page"
|
|
14
14
|
},
|
|
15
15
|
"elevated": {
|
|
16
|
-
"light": "#
|
|
16
|
+
"light": "#f7f7f6",
|
|
17
17
|
"dark": "#1c1917",
|
|
18
|
-
"description": "Cards, modals, dropdowns — one step above page"
|
|
18
|
+
"description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
|
|
19
19
|
},
|
|
20
20
|
"sunken": {
|
|
21
21
|
"light": "#faf2e3",
|
|
@@ -23,13 +23,13 @@ const tokens = {
|
|
|
23
23
|
"description": "Input fields, code blocks — below page level"
|
|
24
24
|
},
|
|
25
25
|
"navbar": {
|
|
26
|
-
"light": "#
|
|
27
|
-
"dark": "#
|
|
26
|
+
"light": "#ededeb",
|
|
27
|
+
"dark": "#141410",
|
|
28
28
|
"description": "Navbar background — matches page in both themes"
|
|
29
29
|
},
|
|
30
30
|
"navbar-scrolled": {
|
|
31
|
-
"light": "#
|
|
32
|
-
"dark": "#
|
|
31
|
+
"light": "#ededeb",
|
|
32
|
+
"dark": "#141410",
|
|
33
33
|
"description": "Navbar when scrolled/shrunk — matches page-scrolled"
|
|
34
34
|
},
|
|
35
35
|
"code": {
|
|
@@ -67,14 +67,14 @@ const tokens = {
|
|
|
67
67
|
},
|
|
68
68
|
"content": {
|
|
69
69
|
"primary": {
|
|
70
|
-
"light": "#
|
|
70
|
+
"light": "#14140f",
|
|
71
71
|
"dark": "#fdf9f2",
|
|
72
|
-
"description": "Primary text —
|
|
72
|
+
"description": "Primary text — stone-900 on stone-100 (light, matches presentation-theme.scss exactly) / paper-100 on dark surface"
|
|
73
73
|
},
|
|
74
74
|
"secondary": {
|
|
75
|
-
"light": "#
|
|
75
|
+
"light": "#7c7c7c",
|
|
76
76
|
"dark": "#a8a29e",
|
|
77
|
-
"description": "Secondary text —
|
|
77
|
+
"description": "Secondary text — stone-500 (light, matches presentation-theme.scss --color-secondary) / ink-300 on dark"
|
|
78
78
|
},
|
|
79
79
|
"muted": {
|
|
80
80
|
"light": "#78716c",
|
|
@@ -89,23 +89,23 @@ const tokens = {
|
|
|
89
89
|
},
|
|
90
90
|
"interactive": {
|
|
91
91
|
"primary": {
|
|
92
|
-
"light": "#
|
|
93
|
-
"dark": "#
|
|
94
|
-
"description": "Primary interactive —
|
|
92
|
+
"light": "#434739",
|
|
93
|
+
"dark": "#98a384",
|
|
94
|
+
"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"
|
|
95
95
|
},
|
|
96
96
|
"hover": {
|
|
97
|
-
"light": "#
|
|
98
|
-
"dark": "#
|
|
99
|
-
"description": "Hover state —
|
|
97
|
+
"light": "#363a2e",
|
|
98
|
+
"dark": "#7e8a6b",
|
|
99
|
+
"description": "Hover state — forest-800 on light (slightly darker than canonical) / forest-400 on dark"
|
|
100
100
|
},
|
|
101
101
|
"accent": {
|
|
102
102
|
"light": "#b54a27",
|
|
103
103
|
"dark": "#b54a27",
|
|
104
|
-
"description": "Accent — emancipation copper-red; moral-weight color"
|
|
104
|
+
"description": "Accent — emancipation copper-red; moral-weight color (preserved from copper era as deliberate non-interactive emphasis)"
|
|
105
105
|
},
|
|
106
106
|
"focus": {
|
|
107
|
-
"light": "#
|
|
108
|
-
"dark": "#
|
|
107
|
+
"light": "#434739",
|
|
108
|
+
"dark": "#98a384",
|
|
109
109
|
"description": "Focus indicators — mirrors interactive.primary"
|
|
110
110
|
}
|
|
111
111
|
},
|
|
@@ -216,11 +216,22 @@ const tokens = {
|
|
|
216
216
|
}
|
|
217
217
|
},
|
|
218
218
|
"transition": {
|
|
219
|
-
"quick":
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
"
|
|
219
|
+
"quick": {
|
|
220
|
+
"value": "0.15s ease",
|
|
221
|
+
"description": "Snap-fast micro-interactions — hover lifts, focus rings, immediate-feedback affordances"
|
|
222
|
+
},
|
|
223
|
+
"standard": {
|
|
224
|
+
"value": "0.25s ease-in-out",
|
|
225
|
+
"description": "Default for most state changes — toggles, button states, card hovers"
|
|
226
|
+
},
|
|
227
|
+
"smooth": {
|
|
228
|
+
"value": "0.35s ease",
|
|
229
|
+
"description": "Theme transitions, navbar collapse/expand, layout shifts that should feel deliberate"
|
|
230
|
+
},
|
|
231
|
+
"logo": {
|
|
232
|
+
"value": "0.3s",
|
|
233
|
+
"description": "Reserved for the dataimago wordmark / brand-mark transitions; do not borrow for general UI"
|
|
234
|
+
}
|
|
224
235
|
},
|
|
225
236
|
"card": {
|
|
226
237
|
"background": "surface.elevated",
|
|
@@ -267,7 +278,7 @@ const tokens = {
|
|
|
267
278
|
"font": {
|
|
268
279
|
"family": {
|
|
269
280
|
"sans": {
|
|
270
|
-
"value": "Fira Sans, system-ui, sans-serif",
|
|
281
|
+
"value": "Noto Sans, Fira Sans, system-ui, sans-serif",
|
|
271
282
|
"description": "Primary sans-serif font - body text"
|
|
272
283
|
},
|
|
273
284
|
"mono": {
|
|
@@ -275,16 +286,24 @@ const tokens = {
|
|
|
275
286
|
"description": "Monospace font - code blocks and technical content"
|
|
276
287
|
},
|
|
277
288
|
"display": {
|
|
289
|
+
"value": "var(--font-family-display-editorial)",
|
|
290
|
+
"description": "DEPRECATED alias of display-editorial; preserved through 0.2.x and removed in 0.3.0. New code should reference --font-family-display-editorial or --font-family-display-documentation directly. See wiki/decisions/display-family-split.md."
|
|
291
|
+
},
|
|
292
|
+
"display-editorial": {
|
|
278
293
|
"value": "Josefin Sans, system-ui, sans-serif",
|
|
279
|
-
"description": "
|
|
294
|
+
"description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
|
|
295
|
+
},
|
|
296
|
+
"display-documentation": {
|
|
297
|
+
"value": "Noto Sans, system-ui, sans-serif",
|
|
298
|
+
"description": "Documentation display family — Noto Sans, the wayfinding voice. Used on surfaces where the heading does structural work: API docs, foundation Section h2s, KNOWLEDGE.md/CLAUDE.md headings, long-form research subheadings. Activated by wrapping content in .di-prose; pair with weight 600 (semibold). See wiki/decisions/display-family-split.md."
|
|
280
299
|
},
|
|
281
300
|
"brand": {
|
|
282
301
|
"value": "Futura, system-ui, sans-serif",
|
|
283
302
|
"description": "Brand font - dataimago navbar and branding elements"
|
|
284
303
|
},
|
|
285
304
|
"math": {
|
|
286
|
-
"value": "
|
|
287
|
-
"description": "Mathematical notation font"
|
|
305
|
+
"value": "Noto Sans Math, Noto Sans, system-ui, sans-serif",
|
|
306
|
+
"description": "Mathematical notation font — Noto Sans Math for broad Unicode math coverage; harmonises with the Noto Sans body stack"
|
|
288
307
|
}
|
|
289
308
|
},
|
|
290
309
|
"size": {
|
|
@@ -351,9 +370,10 @@ const tokens = {
|
|
|
351
370
|
"description": "Bold — h1, strong emphasis"
|
|
352
371
|
},
|
|
353
372
|
"heading": {
|
|
373
|
+
"_invariant": "Heading-weight cluster — 400 floor for all Josefin Sans headings (see wiki/decisions/josefin-weight-floor.md). Sub-400 weights (200, 300) are bound to the opt-in .di-numeric-display utility class, never the default for prose-tier headings. Per wiki/decisions/h1-weight-medium.md the prose-correct band for editorial headings is 400–500.",
|
|
354
374
|
"h1": {
|
|
355
|
-
"value": "var(--font-weight-
|
|
356
|
-
"description": "Heading h1 weight —
|
|
375
|
+
"value": "var(--font-weight-medium)",
|
|
376
|
+
"description": "Heading h1 weight — medium (500). Top-level editorial voice; preserves Josefin Sans's geometric character at hero scale (was bold/700 before iteration-1; see wiki/decisions/h1-weight-medium.md)."
|
|
357
377
|
},
|
|
358
378
|
"h2": {
|
|
359
379
|
"value": "var(--font-weight-medium)",
|
|
@@ -408,6 +428,17 @@ const tokens = {
|
|
|
408
428
|
"value": "1.625",
|
|
409
429
|
"description": "Relaxed line height - long-form content"
|
|
410
430
|
}
|
|
431
|
+
},
|
|
432
|
+
"feature-settings": {
|
|
433
|
+
"_invariant": "OpenType feature settings cluster — display rules apply lining figures (lnum) so numerals render uniform-baseline at heading scale; body rules retain old-style figures where they belong (in-line numerical mentions in prose). See wiki/decisions/display-lining-figures.md.",
|
|
434
|
+
"display": {
|
|
435
|
+
"value": "\"lnum\"",
|
|
436
|
+
"description": "Lining figures (lnum) for display headings — uniform baseline, uniform height; corrects Josefin Sans's old-style default figures that read as casual at editorial/title scale. Consumed by every CSS rule whose font-family resolves to --font-family-display, --font-family-display-editorial, or --font-family-display-documentation."
|
|
437
|
+
},
|
|
438
|
+
"body": {
|
|
439
|
+
"value": "\"normal\"",
|
|
440
|
+
"description": "Default figure style for body text — preserves Josefin's old-style figures where they harmonize with lowercase letterforms in continuous prose."
|
|
441
|
+
}
|
|
411
442
|
}
|
|
412
443
|
}
|
|
413
444
|
};
|
package/dist/tokens.css
CHANGED
|
@@ -9,12 +9,32 @@
|
|
|
9
9
|
--color-palette-ink-700: #292524;
|
|
10
10
|
--color-palette-ink-800: #1c1917;
|
|
11
11
|
--color-palette-ink-900: #0c0a09;
|
|
12
|
-
--color-palette-
|
|
13
|
-
--color-palette-
|
|
14
|
-
--color-palette-
|
|
15
|
-
--color-palette-
|
|
16
|
-
--color-palette-
|
|
17
|
-
--color-palette-
|
|
12
|
+
--color-palette-stone-50: #f7f7f6;
|
|
13
|
+
--color-palette-stone-100: #ededeb;
|
|
14
|
+
--color-palette-stone-200: #dcdcda;
|
|
15
|
+
--color-palette-stone-300: #c1c1bf;
|
|
16
|
+
--color-palette-stone-400: #a0a0a0;
|
|
17
|
+
--color-palette-stone-500: #7c7c7c;
|
|
18
|
+
--color-palette-stone-600: #5e5e5c;
|
|
19
|
+
--color-palette-stone-700: #424240;
|
|
20
|
+
--color-palette-stone-800: #292927;
|
|
21
|
+
--color-palette-stone-900: #14140f;
|
|
22
|
+
--color-palette-forest-50: #f0f1ed;
|
|
23
|
+
--color-palette-forest-100: #dde0d4;
|
|
24
|
+
--color-palette-forest-200: #bdc4ad;
|
|
25
|
+
--color-palette-forest-300: #98a384;
|
|
26
|
+
--color-palette-forest-400: #7e8a6b;
|
|
27
|
+
--color-palette-forest-500: #5e6749;
|
|
28
|
+
--color-palette-forest-600: #4d5640;
|
|
29
|
+
--color-palette-forest-700: #434739;
|
|
30
|
+
--color-palette-forest-800: #363a2e;
|
|
31
|
+
--color-palette-forest-900: #1f2218;
|
|
32
|
+
--color-palette-paper-50: #fefdfb;
|
|
33
|
+
--color-palette-paper-100: #fdf9f2;
|
|
34
|
+
--color-palette-paper-200: #faf2e3;
|
|
35
|
+
--color-palette-paper-300: #f5e8cf;
|
|
36
|
+
--color-palette-paper-400: #edd9b3;
|
|
37
|
+
--color-palette-paper-500: #e0c088;
|
|
18
38
|
--color-palette-copper-50: #fdf4ee;
|
|
19
39
|
--color-palette-copper-100: #fbe5d1;
|
|
20
40
|
--color-palette-copper-200: #f6c79c;
|
|
@@ -37,11 +57,17 @@
|
|
|
37
57
|
--color-functional-warning: #F39C12;
|
|
38
58
|
--color-functional-error: #E74C3C;
|
|
39
59
|
--color-functional-info: #3498DB;
|
|
40
|
-
--
|
|
60
|
+
--transition-quick: 0.15s ease;
|
|
61
|
+
--transition-standard: 0.25s ease-in-out;
|
|
62
|
+
--transition-smooth: 0.35s ease;
|
|
63
|
+
--transition-logo: 0.3s;
|
|
64
|
+
--font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
|
|
41
65
|
--font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
|
|
42
|
-
--font-family-display:
|
|
66
|
+
--font-family-display: var(--font-family-display-editorial);
|
|
67
|
+
--font-family-display-editorial: Josefin Sans, system-ui, sans-serif;
|
|
68
|
+
--font-family-display-documentation: Noto Sans, system-ui, sans-serif;
|
|
43
69
|
--font-family-brand: Futura, system-ui, sans-serif;
|
|
44
|
-
--font-family-math:
|
|
70
|
+
--font-family-math: Noto Sans Math, Noto Sans, system-ui, sans-serif;
|
|
45
71
|
--font-size-micro: 0.75rem;
|
|
46
72
|
--font-size-small: 0.875rem;
|
|
47
73
|
--font-size-base: 1rem;
|
|
@@ -57,7 +83,7 @@
|
|
|
57
83
|
--font-weight-medium: 500;
|
|
58
84
|
--font-weight-semibold: 600;
|
|
59
85
|
--font-weight-bold: 700;
|
|
60
|
-
--font-weight-heading-h1: var(--font-weight-
|
|
86
|
+
--font-weight-heading-h1: var(--font-weight-medium);
|
|
61
87
|
--font-weight-heading-h2: var(--font-weight-medium);
|
|
62
88
|
--font-weight-heading-h3: var(--font-weight-normal);
|
|
63
89
|
--font-weight-heading-h4: var(--font-weight-light);
|
|
@@ -70,6 +96,8 @@
|
|
|
70
96
|
--font-lineHeight-tight: 1.25;
|
|
71
97
|
--font-lineHeight-normal: 1.5;
|
|
72
98
|
--font-lineHeight-relaxed: 1.625;
|
|
99
|
+
--font-feature-settings-display: "lnum";
|
|
100
|
+
--font-feature-settings-body: "normal";
|
|
73
101
|
--spacing-xs: 0.25rem;
|
|
74
102
|
--spacing-sm: 0.5rem;
|
|
75
103
|
--spacing-md: 1rem;
|
|
@@ -89,26 +117,26 @@
|
|
|
89
117
|
}
|
|
90
118
|
|
|
91
119
|
:root, [data-bs-theme="light"] {
|
|
92
|
-
--color-surface-page: #
|
|
93
|
-
--color-surface-page-scrolled: #
|
|
94
|
-
--color-surface-elevated: #
|
|
120
|
+
--color-surface-page: #ededeb;
|
|
121
|
+
--color-surface-page-scrolled: #ededeb;
|
|
122
|
+
--color-surface-elevated: #f7f7f6;
|
|
95
123
|
--color-surface-sunken: #faf2e3;
|
|
96
|
-
--color-surface-navbar: #
|
|
97
|
-
--color-surface-navbar-scrolled: #
|
|
124
|
+
--color-surface-navbar: #ededeb;
|
|
125
|
+
--color-surface-navbar-scrolled: #ededeb;
|
|
98
126
|
--color-surface-code: #faf2e3;
|
|
99
127
|
--color-border-subtle: rgba(12, 10, 9, 0.08);
|
|
100
128
|
--color-border-moderate: rgba(12, 10, 9, 0.15);
|
|
101
129
|
--color-border-strong: rgba(12, 10, 9, 0.25);
|
|
102
130
|
--color-border-card: rgba(12, 10, 9, 0.15);
|
|
103
131
|
--color-border-code: #d6d3d1;
|
|
104
|
-
--color-content-primary: #
|
|
105
|
-
--color-content-secondary: #
|
|
132
|
+
--color-content-primary: #14140f;
|
|
133
|
+
--color-content-secondary: #7c7c7c;
|
|
106
134
|
--color-content-muted: #78716c;
|
|
107
135
|
--color-content-inverse: #fdf9f2;
|
|
108
|
-
--color-interactive-primary: #
|
|
109
|
-
--color-interactive-hover: #
|
|
136
|
+
--color-interactive-primary: #434739;
|
|
137
|
+
--color-interactive-hover: #363a2e;
|
|
110
138
|
--color-interactive-accent: #b54a27;
|
|
111
|
-
--color-interactive-focus: #
|
|
139
|
+
--color-interactive-focus: #434739;
|
|
112
140
|
--color-presentation-accent: #3498DB;
|
|
113
141
|
--color-presentation-accent-hover: #2980B9;
|
|
114
142
|
--contrast-high: rgb(20, 20, 16);
|
|
@@ -126,12 +154,12 @@
|
|
|
126
154
|
}
|
|
127
155
|
|
|
128
156
|
[data-bs-theme="dark"] {
|
|
129
|
-
--color-surface-page: #
|
|
130
|
-
--color-surface-page-scrolled: #
|
|
157
|
+
--color-surface-page: #141410;
|
|
158
|
+
--color-surface-page-scrolled: #141410;
|
|
131
159
|
--color-surface-elevated: #1c1917;
|
|
132
160
|
--color-surface-sunken: #0c0a09;
|
|
133
|
-
--color-surface-navbar: #
|
|
134
|
-
--color-surface-navbar-scrolled: #
|
|
161
|
+
--color-surface-navbar: #141410;
|
|
162
|
+
--color-surface-navbar-scrolled: #141410;
|
|
135
163
|
--color-surface-code: #1c1917;
|
|
136
164
|
--color-border-subtle: rgba(253, 249, 242, 0.08);
|
|
137
165
|
--color-border-moderate: rgba(253, 249, 242, 0.15);
|
|
@@ -142,10 +170,10 @@
|
|
|
142
170
|
--color-content-secondary: #a8a29e;
|
|
143
171
|
--color-content-muted: #78716c;
|
|
144
172
|
--color-content-inverse: #0c0a09;
|
|
145
|
-
--color-interactive-primary: #
|
|
146
|
-
--color-interactive-hover: #
|
|
173
|
+
--color-interactive-primary: #98a384;
|
|
174
|
+
--color-interactive-hover: #7e8a6b;
|
|
147
175
|
--color-interactive-accent: #b54a27;
|
|
148
|
-
--color-interactive-focus: #
|
|
176
|
+
--color-interactive-focus: #98a384;
|
|
149
177
|
--color-presentation-accent: #3498DB;
|
|
150
178
|
--color-presentation-accent-hover: #2980B9;
|
|
151
179
|
--contrast-high: rgb(237, 237, 235);
|
|
@@ -164,12 +192,12 @@
|
|
|
164
192
|
|
|
165
193
|
@media (prefers-color-scheme: dark) {
|
|
166
194
|
:root {
|
|
167
|
-
--color-surface-page: #
|
|
168
|
-
--color-surface-page-scrolled: #
|
|
195
|
+
--color-surface-page: #141410;
|
|
196
|
+
--color-surface-page-scrolled: #141410;
|
|
169
197
|
--color-surface-elevated: #1c1917;
|
|
170
198
|
--color-surface-sunken: #0c0a09;
|
|
171
|
-
--color-surface-navbar: #
|
|
172
|
-
--color-surface-navbar-scrolled: #
|
|
199
|
+
--color-surface-navbar: #141410;
|
|
200
|
+
--color-surface-navbar-scrolled: #141410;
|
|
173
201
|
--color-surface-code: #1c1917;
|
|
174
202
|
--color-border-subtle: rgba(253, 249, 242, 0.08);
|
|
175
203
|
--color-border-moderate: rgba(253, 249, 242, 0.15);
|
|
@@ -180,10 +208,10 @@
|
|
|
180
208
|
--color-content-secondary: #a8a29e;
|
|
181
209
|
--color-content-muted: #78716c;
|
|
182
210
|
--color-content-inverse: #0c0a09;
|
|
183
|
-
--color-interactive-primary: #
|
|
184
|
-
--color-interactive-hover: #
|
|
211
|
+
--color-interactive-primary: #98a384;
|
|
212
|
+
--color-interactive-hover: #7e8a6b;
|
|
185
213
|
--color-interactive-accent: #b54a27;
|
|
186
|
-
--color-interactive-focus: #
|
|
214
|
+
--color-interactive-focus: #98a384;
|
|
187
215
|
--color-presentation-accent: #3498DB;
|
|
188
216
|
--color-presentation-accent-hover: #2980B9;
|
|
189
217
|
--contrast-high: rgb(237, 237, 235);
|
package/dist/tokens.scss
CHANGED
|
@@ -9,12 +9,32 @@
|
|
|
9
9
|
--color-palette-ink-700: #292524;
|
|
10
10
|
--color-palette-ink-800: #1c1917;
|
|
11
11
|
--color-palette-ink-900: #0c0a09;
|
|
12
|
-
--color-palette-
|
|
13
|
-
--color-palette-
|
|
14
|
-
--color-palette-
|
|
15
|
-
--color-palette-
|
|
16
|
-
--color-palette-
|
|
17
|
-
--color-palette-
|
|
12
|
+
--color-palette-stone-50: #f7f7f6;
|
|
13
|
+
--color-palette-stone-100: #ededeb;
|
|
14
|
+
--color-palette-stone-200: #dcdcda;
|
|
15
|
+
--color-palette-stone-300: #c1c1bf;
|
|
16
|
+
--color-palette-stone-400: #a0a0a0;
|
|
17
|
+
--color-palette-stone-500: #7c7c7c;
|
|
18
|
+
--color-palette-stone-600: #5e5e5c;
|
|
19
|
+
--color-palette-stone-700: #424240;
|
|
20
|
+
--color-palette-stone-800: #292927;
|
|
21
|
+
--color-palette-stone-900: #14140f;
|
|
22
|
+
--color-palette-forest-50: #f0f1ed;
|
|
23
|
+
--color-palette-forest-100: #dde0d4;
|
|
24
|
+
--color-palette-forest-200: #bdc4ad;
|
|
25
|
+
--color-palette-forest-300: #98a384;
|
|
26
|
+
--color-palette-forest-400: #7e8a6b;
|
|
27
|
+
--color-palette-forest-500: #5e6749;
|
|
28
|
+
--color-palette-forest-600: #4d5640;
|
|
29
|
+
--color-palette-forest-700: #434739;
|
|
30
|
+
--color-palette-forest-800: #363a2e;
|
|
31
|
+
--color-palette-forest-900: #1f2218;
|
|
32
|
+
--color-palette-paper-50: #fefdfb;
|
|
33
|
+
--color-palette-paper-100: #fdf9f2;
|
|
34
|
+
--color-palette-paper-200: #faf2e3;
|
|
35
|
+
--color-palette-paper-300: #f5e8cf;
|
|
36
|
+
--color-palette-paper-400: #edd9b3;
|
|
37
|
+
--color-palette-paper-500: #e0c088;
|
|
18
38
|
--color-palette-copper-50: #fdf4ee;
|
|
19
39
|
--color-palette-copper-100: #fbe5d1;
|
|
20
40
|
--color-palette-copper-200: #f6c79c;
|
|
@@ -37,11 +57,17 @@
|
|
|
37
57
|
--color-functional-warning: #F39C12;
|
|
38
58
|
--color-functional-error: #E74C3C;
|
|
39
59
|
--color-functional-info: #3498DB;
|
|
40
|
-
--
|
|
60
|
+
--transition-quick: 0.15s ease;
|
|
61
|
+
--transition-standard: 0.25s ease-in-out;
|
|
62
|
+
--transition-smooth: 0.35s ease;
|
|
63
|
+
--transition-logo: 0.3s;
|
|
64
|
+
--font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
|
|
41
65
|
--font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
|
|
42
|
-
--font-family-display:
|
|
66
|
+
--font-family-display: var(--font-family-display-editorial);
|
|
67
|
+
--font-family-display-editorial: Josefin Sans, system-ui, sans-serif;
|
|
68
|
+
--font-family-display-documentation: Noto Sans, system-ui, sans-serif;
|
|
43
69
|
--font-family-brand: Futura, system-ui, sans-serif;
|
|
44
|
-
--font-family-math:
|
|
70
|
+
--font-family-math: Noto Sans Math, Noto Sans, system-ui, sans-serif;
|
|
45
71
|
--font-size-micro: 0.75rem;
|
|
46
72
|
--font-size-small: 0.875rem;
|
|
47
73
|
--font-size-base: 1rem;
|
|
@@ -57,7 +83,7 @@
|
|
|
57
83
|
--font-weight-medium: 500;
|
|
58
84
|
--font-weight-semibold: 600;
|
|
59
85
|
--font-weight-bold: 700;
|
|
60
|
-
--font-weight-heading-h1: var(--font-weight-
|
|
86
|
+
--font-weight-heading-h1: var(--font-weight-medium);
|
|
61
87
|
--font-weight-heading-h2: var(--font-weight-medium);
|
|
62
88
|
--font-weight-heading-h3: var(--font-weight-normal);
|
|
63
89
|
--font-weight-heading-h4: var(--font-weight-light);
|
|
@@ -70,6 +96,8 @@
|
|
|
70
96
|
--font-lineHeight-tight: 1.25;
|
|
71
97
|
--font-lineHeight-normal: 1.5;
|
|
72
98
|
--font-lineHeight-relaxed: 1.625;
|
|
99
|
+
--font-feature-settings-display: "lnum";
|
|
100
|
+
--font-feature-settings-body: "normal";
|
|
73
101
|
--spacing-xs: 0.25rem;
|
|
74
102
|
--spacing-sm: 0.5rem;
|
|
75
103
|
--spacing-md: 1rem;
|
|
@@ -89,26 +117,26 @@
|
|
|
89
117
|
}
|
|
90
118
|
|
|
91
119
|
:root, [data-bs-theme="light"] {
|
|
92
|
-
--color-surface-page: #
|
|
93
|
-
--color-surface-page-scrolled: #
|
|
94
|
-
--color-surface-elevated: #
|
|
120
|
+
--color-surface-page: #ededeb;
|
|
121
|
+
--color-surface-page-scrolled: #ededeb;
|
|
122
|
+
--color-surface-elevated: #f7f7f6;
|
|
95
123
|
--color-surface-sunken: #faf2e3;
|
|
96
|
-
--color-surface-navbar: #
|
|
97
|
-
--color-surface-navbar-scrolled: #
|
|
124
|
+
--color-surface-navbar: #ededeb;
|
|
125
|
+
--color-surface-navbar-scrolled: #ededeb;
|
|
98
126
|
--color-surface-code: #faf2e3;
|
|
99
127
|
--color-border-subtle: rgba(12, 10, 9, 0.08);
|
|
100
128
|
--color-border-moderate: rgba(12, 10, 9, 0.15);
|
|
101
129
|
--color-border-strong: rgba(12, 10, 9, 0.25);
|
|
102
130
|
--color-border-card: rgba(12, 10, 9, 0.15);
|
|
103
131
|
--color-border-code: #d6d3d1;
|
|
104
|
-
--color-content-primary: #
|
|
105
|
-
--color-content-secondary: #
|
|
132
|
+
--color-content-primary: #14140f;
|
|
133
|
+
--color-content-secondary: #7c7c7c;
|
|
106
134
|
--color-content-muted: #78716c;
|
|
107
135
|
--color-content-inverse: #fdf9f2;
|
|
108
|
-
--color-interactive-primary: #
|
|
109
|
-
--color-interactive-hover: #
|
|
136
|
+
--color-interactive-primary: #434739;
|
|
137
|
+
--color-interactive-hover: #363a2e;
|
|
110
138
|
--color-interactive-accent: #b54a27;
|
|
111
|
-
--color-interactive-focus: #
|
|
139
|
+
--color-interactive-focus: #434739;
|
|
112
140
|
--color-presentation-accent: #3498DB;
|
|
113
141
|
--color-presentation-accent-hover: #2980B9;
|
|
114
142
|
--contrast-high: rgb(20, 20, 16);
|
|
@@ -126,12 +154,12 @@
|
|
|
126
154
|
}
|
|
127
155
|
|
|
128
156
|
[data-bs-theme="dark"] {
|
|
129
|
-
--color-surface-page: #
|
|
130
|
-
--color-surface-page-scrolled: #
|
|
157
|
+
--color-surface-page: #141410;
|
|
158
|
+
--color-surface-page-scrolled: #141410;
|
|
131
159
|
--color-surface-elevated: #1c1917;
|
|
132
160
|
--color-surface-sunken: #0c0a09;
|
|
133
|
-
--color-surface-navbar: #
|
|
134
|
-
--color-surface-navbar-scrolled: #
|
|
161
|
+
--color-surface-navbar: #141410;
|
|
162
|
+
--color-surface-navbar-scrolled: #141410;
|
|
135
163
|
--color-surface-code: #1c1917;
|
|
136
164
|
--color-border-subtle: rgba(253, 249, 242, 0.08);
|
|
137
165
|
--color-border-moderate: rgba(253, 249, 242, 0.15);
|
|
@@ -142,10 +170,10 @@
|
|
|
142
170
|
--color-content-secondary: #a8a29e;
|
|
143
171
|
--color-content-muted: #78716c;
|
|
144
172
|
--color-content-inverse: #0c0a09;
|
|
145
|
-
--color-interactive-primary: #
|
|
146
|
-
--color-interactive-hover: #
|
|
173
|
+
--color-interactive-primary: #98a384;
|
|
174
|
+
--color-interactive-hover: #7e8a6b;
|
|
147
175
|
--color-interactive-accent: #b54a27;
|
|
148
|
-
--color-interactive-focus: #
|
|
176
|
+
--color-interactive-focus: #98a384;
|
|
149
177
|
--color-presentation-accent: #3498DB;
|
|
150
178
|
--color-presentation-accent-hover: #2980B9;
|
|
151
179
|
--contrast-high: rgb(237, 237, 235);
|
|
@@ -164,12 +192,12 @@
|
|
|
164
192
|
|
|
165
193
|
@media (prefers-color-scheme: dark) {
|
|
166
194
|
:root {
|
|
167
|
-
--color-surface-page: #
|
|
168
|
-
--color-surface-page-scrolled: #
|
|
195
|
+
--color-surface-page: #141410;
|
|
196
|
+
--color-surface-page-scrolled: #141410;
|
|
169
197
|
--color-surface-elevated: #1c1917;
|
|
170
198
|
--color-surface-sunken: #0c0a09;
|
|
171
|
-
--color-surface-navbar: #
|
|
172
|
-
--color-surface-navbar-scrolled: #
|
|
199
|
+
--color-surface-navbar: #141410;
|
|
200
|
+
--color-surface-navbar-scrolled: #141410;
|
|
173
201
|
--color-surface-code: #1c1917;
|
|
174
202
|
--color-border-subtle: rgba(253, 249, 242, 0.08);
|
|
175
203
|
--color-border-moderate: rgba(253, 249, 242, 0.15);
|
|
@@ -180,10 +208,10 @@
|
|
|
180
208
|
--color-content-secondary: #a8a29e;
|
|
181
209
|
--color-content-muted: #78716c;
|
|
182
210
|
--color-content-inverse: #0c0a09;
|
|
183
|
-
--color-interactive-primary: #
|
|
184
|
-
--color-interactive-hover: #
|
|
211
|
+
--color-interactive-primary: #98a384;
|
|
212
|
+
--color-interactive-hover: #7e8a6b;
|
|
185
213
|
--color-interactive-accent: #b54a27;
|
|
186
|
-
--color-interactive-focus: #
|
|
214
|
+
--color-interactive-focus: #98a384;
|
|
187
215
|
--color-presentation-accent: #3498DB;
|
|
188
216
|
--color-presentation-accent-hover: #2980B9;
|
|
189
217
|
--contrast-high: rgb(237, 237, 235);
|
package/package.json
CHANGED
package/src/colors.json
CHANGED
|
@@ -13,22 +13,46 @@
|
|
|
13
13
|
"800": { "value": "#1c1917", "description": "Ink scale — surfaces in dark mode" },
|
|
14
14
|
"900": { "value": "#0c0a09", "description": "Ink scale — near-black; primary dark surface and text color" }
|
|
15
15
|
},
|
|
16
|
-
"
|
|
17
|
-
"50": { "value": "#
|
|
18
|
-
"100": { "value": "#
|
|
19
|
-
"200": { "value": "#
|
|
20
|
-
"300": { "value": "#
|
|
21
|
-
"400": { "value": "#
|
|
22
|
-
"500": { "value": "#
|
|
16
|
+
"stone": {
|
|
17
|
+
"50": { "value": "#f7f7f6", "description": "Stone scale — lightest cool-neutral surface; cards/modals one step above page" },
|
|
18
|
+
"100": { "value": "#ededeb", "description": "Stone scale — canonical page background (light mode); matches Paper_1 presentation surface" },
|
|
19
|
+
"200": { "value": "#dcdcda", "description": "Stone scale — borders, dividers; matches presentation-theme.scss --color-border" },
|
|
20
|
+
"300": { "value": "#c1c1bf", "description": "Stone scale — pressed border / disabled chrome" },
|
|
21
|
+
"400": { "value": "#a0a0a0", "description": "Stone scale — disabled text, muted icons" },
|
|
22
|
+
"500": { "value": "#7c7c7c", "description": "Stone scale — secondary text; matches presentation-theme.scss --color-secondary" },
|
|
23
|
+
"600": { "value": "#5e5e5c", "description": "Stone scale — caption / metadata text on light surfaces" },
|
|
24
|
+
"700": { "value": "#424240", "description": "Stone scale — primary text on cream/paper surfaces" },
|
|
25
|
+
"800": { "value": "#292927", "description": "Stone scale — high-contrast headings on light surfaces" },
|
|
26
|
+
"900": { "value": "#14140f", "description": "Stone scale — body text on light surfaces; matches presentation-theme.scss $body-color rgb(20,20,16)" }
|
|
27
|
+
},
|
|
28
|
+
"forest": {
|
|
29
|
+
"50": { "value": "#f0f1ed", "description": "Forest scale — pale wash; subtle backdrop for forest-coded panels" },
|
|
30
|
+
"100": { "value": "#dde0d4", "description": "Forest scale — light hover-background tint for ghost buttons on light surfaces" },
|
|
31
|
+
"200": { "value": "#bdc4ad", "description": "Forest scale — soft accent panels" },
|
|
32
|
+
"300": { "value": "#98a384", "description": "Forest scale — interactive primary (dark mode); lighter for visibility on dark surfaces" },
|
|
33
|
+
"400": { "value": "#7e8a6b", "description": "Forest scale — interactive hover (dark mode); steps toward canonical" },
|
|
34
|
+
"500": { "value": "#5e6749", "description": "Forest scale — mid-step; charts and decorative emphasis" },
|
|
35
|
+
"600": { "value": "#4d5640", "description": "Forest scale — between mid and canonical" },
|
|
36
|
+
"700": { "value": "#434739", "description": "Forest scale — canonical interactive primary (light mode); 7.75:1 on stone-100, white text 9.0:1 — passes WCAG AAA" },
|
|
37
|
+
"800": { "value": "#363a2e", "description": "Forest scale — interactive hover (light mode); slightly darker than canonical" },
|
|
38
|
+
"900": { "value": "#1f2218", "description": "Forest scale — pressed/active state and deep emphasis" }
|
|
39
|
+
},
|
|
40
|
+
"paper": {
|
|
41
|
+
"50": { "value": "#fefdfb", "description": "Paper scale — lightest warm surface; renamed from cream — reserved for elevated cards/modals when warm tint is desired" },
|
|
42
|
+
"100": { "value": "#fdf9f2", "description": "Paper scale — warm page-background option (legacy cream-100); not the primary surface in this iteration" },
|
|
43
|
+
"200": { "value": "#faf2e3", "description": "Paper scale — code-block and pull-quote background; warm tint reads as 'paper'" },
|
|
44
|
+
"300": { "value": "#f5e8cf", "description": "Paper scale — call-out / emphasised panel background" },
|
|
45
|
+
"400": { "value": "#edd9b3", "description": "Paper scale — muted warm accent" },
|
|
46
|
+
"500": { "value": "#e0c088", "description": "Paper scale — strong warm accent; wheat" }
|
|
23
47
|
},
|
|
24
48
|
"copper": {
|
|
25
49
|
"50": { "value": "#fdf4ee", "description": "Copper scale — warm tint wash" },
|
|
26
50
|
"100": { "value": "#fbe5d1", "description": "Copper scale — soft copper backdrop" },
|
|
27
51
|
"200": { "value": "#f6c79c", "description": "Copper scale — muted copper accent" },
|
|
28
|
-
"300": { "value": "#f0a467", "description": "Copper scale — interactive primary on dark mode" },
|
|
29
|
-
"400": { "value": "#ea8441", "description": "Copper scale — hover on dark mode" },
|
|
30
|
-
"500": { "value": "#d46820", "description": "Copper scale —
|
|
31
|
-
"600": { "value": "#b55017", "description": "Copper scale — hover on light mode" },
|
|
52
|
+
"300": { "value": "#f0a467", "description": "Copper scale — historical interactive primary on dark mode (now superseded by forest)" },
|
|
53
|
+
"400": { "value": "#ea8441", "description": "Copper scale — historical hover on dark mode" },
|
|
54
|
+
"500": { "value": "#d46820", "description": "Copper scale — historical interactive primary (light mode); kept for callouts and chart accents" },
|
|
55
|
+
"600": { "value": "#b55017", "description": "Copper scale — historical hover on light mode" },
|
|
32
56
|
"700": { "value": "#913d15", "description": "Copper scale — active/pressed state" },
|
|
33
57
|
"800": { "value": "#753318", "description": "Copper scale — on dark surfaces" },
|
|
34
58
|
"900": { "value": "#612b16", "description": "Copper scale — deep foundation" }
|
|
@@ -41,9 +65,9 @@
|
|
|
41
65
|
},
|
|
42
66
|
"presentation-blue": {
|
|
43
67
|
"50": { "value": "#f0f8fc", "description": "Presentation-blue scale — pale wash for reveal.js callout backgrounds" },
|
|
44
|
-
"500": { "value": "#3498DB", "description": "Presentation-blue scale — Flat-UI peter-river; reserved presentation accent (
|
|
68
|
+
"500": { "value": "#3498DB", "description": "Presentation-blue scale — Flat-UI peter-river; reserved presentation accent. NOT for body text or button backgrounds (fails WCAG AA on stone-100). Decorative use only: borders, chart series, slide accents." },
|
|
45
69
|
"600": { "value": "#2980B9", "description": "Presentation-blue scale — Flat-UI belize-hole; hover/emphasized on presentation accent" },
|
|
46
|
-
"700": { "value": "#1f618d", "description": "Presentation-blue scale — pressed/deep emphasis on presentation accent" }
|
|
70
|
+
"700": { "value": "#1f618d", "description": "Presentation-blue scale — pressed/deep emphasis on presentation accent; passes AA on stone-100 for text use" }
|
|
47
71
|
}
|
|
48
72
|
},
|
|
49
73
|
"functional": {
|
package/src/effects.json
CHANGED
|
@@ -34,10 +34,21 @@
|
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
"transition": {
|
|
37
|
-
"quick":
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
"
|
|
37
|
+
"quick": {
|
|
38
|
+
"value": "0.15s ease",
|
|
39
|
+
"description": "Snap-fast micro-interactions — hover lifts, focus rings, immediate-feedback affordances"
|
|
40
|
+
},
|
|
41
|
+
"standard": {
|
|
42
|
+
"value": "0.25s ease-in-out",
|
|
43
|
+
"description": "Default for most state changes — toggles, button states, card hovers"
|
|
44
|
+
},
|
|
45
|
+
"smooth": {
|
|
46
|
+
"value": "0.35s ease",
|
|
47
|
+
"description": "Theme transitions, navbar collapse/expand, layout shifts that should feel deliberate"
|
|
48
|
+
},
|
|
49
|
+
"logo": {
|
|
50
|
+
"value": "0.3s",
|
|
51
|
+
"description": "Reserved for the dataimago wordmark / brand-mark transitions; do not borrow for general UI"
|
|
52
|
+
}
|
|
42
53
|
}
|
|
43
54
|
}
|
package/src/theme-colors.json
CHANGED
|
@@ -2,19 +2,19 @@
|
|
|
2
2
|
"color": {
|
|
3
3
|
"surface": {
|
|
4
4
|
"page": {
|
|
5
|
-
"light": "#
|
|
6
|
-
"dark": "#
|
|
7
|
-
"description": "Main page background —
|
|
5
|
+
"light": "#ededeb",
|
|
6
|
+
"dark": "#141410",
|
|
7
|
+
"description": "Main page background — warm-grey (light) / ink-900 (dark)"
|
|
8
8
|
},
|
|
9
9
|
"page-scrolled": {
|
|
10
|
-
"light": "#
|
|
11
|
-
"dark": "#
|
|
10
|
+
"light": "#ededeb",
|
|
11
|
+
"dark": "#141410",
|
|
12
12
|
"description": "Page background when navbar shrinks — matches page"
|
|
13
13
|
},
|
|
14
14
|
"elevated": {
|
|
15
|
-
"light": "#
|
|
15
|
+
"light": "#f7f7f6",
|
|
16
16
|
"dark": "#1c1917",
|
|
17
|
-
"description": "Cards, modals, dropdowns — one step above page"
|
|
17
|
+
"description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
|
|
18
18
|
},
|
|
19
19
|
"sunken": {
|
|
20
20
|
"light": "#faf2e3",
|
|
@@ -22,13 +22,13 @@
|
|
|
22
22
|
"description": "Input fields, code blocks — below page level"
|
|
23
23
|
},
|
|
24
24
|
"navbar": {
|
|
25
|
-
"light": "#
|
|
26
|
-
"dark": "#
|
|
25
|
+
"light": "#ededeb",
|
|
26
|
+
"dark": "#141410",
|
|
27
27
|
"description": "Navbar background — matches page in both themes"
|
|
28
28
|
},
|
|
29
29
|
"navbar-scrolled": {
|
|
30
|
-
"light": "#
|
|
31
|
-
"dark": "#
|
|
30
|
+
"light": "#ededeb",
|
|
31
|
+
"dark": "#141410",
|
|
32
32
|
"description": "Navbar when scrolled/shrunk — matches page-scrolled"
|
|
33
33
|
},
|
|
34
34
|
"code": {
|
|
@@ -66,14 +66,14 @@
|
|
|
66
66
|
},
|
|
67
67
|
"content": {
|
|
68
68
|
"primary": {
|
|
69
|
-
"light": "#
|
|
69
|
+
"light": "#14140f",
|
|
70
70
|
"dark": "#fdf9f2",
|
|
71
|
-
"description": "Primary text —
|
|
71
|
+
"description": "Primary text — stone-900 on stone-100 (light, matches presentation-theme.scss exactly) / paper-100 on dark surface"
|
|
72
72
|
},
|
|
73
73
|
"secondary": {
|
|
74
|
-
"light": "#
|
|
74
|
+
"light": "#7c7c7c",
|
|
75
75
|
"dark": "#a8a29e",
|
|
76
|
-
"description": "Secondary text —
|
|
76
|
+
"description": "Secondary text — stone-500 (light, matches presentation-theme.scss --color-secondary) / ink-300 on dark"
|
|
77
77
|
},
|
|
78
78
|
"muted": {
|
|
79
79
|
"light": "#78716c",
|
|
@@ -88,23 +88,23 @@
|
|
|
88
88
|
},
|
|
89
89
|
"interactive": {
|
|
90
90
|
"primary": {
|
|
91
|
-
"light": "#
|
|
92
|
-
"dark": "#
|
|
93
|
-
"description": "Primary interactive —
|
|
91
|
+
"light": "#434739",
|
|
92
|
+
"dark": "#98a384",
|
|
93
|
+
"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"
|
|
94
94
|
},
|
|
95
95
|
"hover": {
|
|
96
|
-
"light": "#
|
|
97
|
-
"dark": "#
|
|
98
|
-
"description": "Hover state —
|
|
96
|
+
"light": "#363a2e",
|
|
97
|
+
"dark": "#7e8a6b",
|
|
98
|
+
"description": "Hover state — forest-800 on light (slightly darker than canonical) / forest-400 on dark"
|
|
99
99
|
},
|
|
100
100
|
"accent": {
|
|
101
101
|
"light": "#b54a27",
|
|
102
102
|
"dark": "#b54a27",
|
|
103
|
-
"description": "Accent — emancipation copper-red; moral-weight color"
|
|
103
|
+
"description": "Accent — emancipation copper-red; moral-weight color (preserved from copper era as deliberate non-interactive emphasis)"
|
|
104
104
|
},
|
|
105
105
|
"focus": {
|
|
106
|
-
"light": "#
|
|
107
|
-
"dark": "#
|
|
106
|
+
"light": "#434739",
|
|
107
|
+
"dark": "#98a384",
|
|
108
108
|
"description": "Focus indicators — mirrors interactive.primary"
|
|
109
109
|
}
|
|
110
110
|
},
|
package/src/typography.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"font": {
|
|
3
3
|
"family": {
|
|
4
4
|
"sans": {
|
|
5
|
-
"value": "Fira Sans, system-ui, sans-serif",
|
|
5
|
+
"value": "Noto Sans, Fira Sans, system-ui, sans-serif",
|
|
6
6
|
"description": "Primary sans-serif font - body text"
|
|
7
7
|
},
|
|
8
8
|
"mono": {
|
|
@@ -10,16 +10,24 @@
|
|
|
10
10
|
"description": "Monospace font - code blocks and technical content"
|
|
11
11
|
},
|
|
12
12
|
"display": {
|
|
13
|
+
"value": "var(--font-family-display-editorial)",
|
|
14
|
+
"description": "DEPRECATED alias of display-editorial; preserved through 0.2.x and removed in 0.3.0. New code should reference --font-family-display-editorial or --font-family-display-documentation directly. See wiki/decisions/display-family-split.md."
|
|
15
|
+
},
|
|
16
|
+
"display-editorial": {
|
|
13
17
|
"value": "Josefin Sans, system-ui, sans-serif",
|
|
14
|
-
"description": "
|
|
18
|
+
"description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
|
|
19
|
+
},
|
|
20
|
+
"display-documentation": {
|
|
21
|
+
"value": "Noto Sans, system-ui, sans-serif",
|
|
22
|
+
"description": "Documentation display family — Noto Sans, the wayfinding voice. Used on surfaces where the heading does structural work: API docs, foundation Section h2s, KNOWLEDGE.md/CLAUDE.md headings, long-form research subheadings. Activated by wrapping content in .di-prose; pair with weight 600 (semibold). See wiki/decisions/display-family-split.md."
|
|
15
23
|
},
|
|
16
24
|
"brand": {
|
|
17
25
|
"value": "Futura, system-ui, sans-serif",
|
|
18
26
|
"description": "Brand font - dataimago navbar and branding elements"
|
|
19
27
|
},
|
|
20
28
|
"math": {
|
|
21
|
-
"value": "
|
|
22
|
-
"description": "Mathematical notation font"
|
|
29
|
+
"value": "Noto Sans Math, Noto Sans, system-ui, sans-serif",
|
|
30
|
+
"description": "Mathematical notation font — Noto Sans Math for broad Unicode math coverage; harmonises with the Noto Sans body stack"
|
|
23
31
|
}
|
|
24
32
|
},
|
|
25
33
|
"size": {
|
|
@@ -86,9 +94,10 @@
|
|
|
86
94
|
"description": "Bold — h1, strong emphasis"
|
|
87
95
|
},
|
|
88
96
|
"heading": {
|
|
97
|
+
"_invariant": "Heading-weight cluster — 400 floor for all Josefin Sans headings (see wiki/decisions/josefin-weight-floor.md). Sub-400 weights (200, 300) are bound to the opt-in .di-numeric-display utility class, never the default for prose-tier headings. Per wiki/decisions/h1-weight-medium.md the prose-correct band for editorial headings is 400–500.",
|
|
89
98
|
"h1": {
|
|
90
|
-
"value": "var(--font-weight-
|
|
91
|
-
"description": "Heading h1 weight —
|
|
99
|
+
"value": "var(--font-weight-medium)",
|
|
100
|
+
"description": "Heading h1 weight — medium (500). Top-level editorial voice; preserves Josefin Sans's geometric character at hero scale (was bold/700 before iteration-1; see wiki/decisions/h1-weight-medium.md)."
|
|
92
101
|
},
|
|
93
102
|
"h2": {
|
|
94
103
|
"value": "var(--font-weight-medium)",
|
|
@@ -143,6 +152,17 @@
|
|
|
143
152
|
"value": "1.625",
|
|
144
153
|
"description": "Relaxed line height - long-form content"
|
|
145
154
|
}
|
|
155
|
+
},
|
|
156
|
+
"feature-settings": {
|
|
157
|
+
"_invariant": "OpenType feature settings cluster — display rules apply lining figures (lnum) so numerals render uniform-baseline at heading scale; body rules retain old-style figures where they belong (in-line numerical mentions in prose). See wiki/decisions/display-lining-figures.md.",
|
|
158
|
+
"display": {
|
|
159
|
+
"value": "\"lnum\"",
|
|
160
|
+
"description": "Lining figures (lnum) for display headings — uniform baseline, uniform height; corrects Josefin Sans's old-style default figures that read as casual at editorial/title scale. Consumed by every CSS rule whose font-family resolves to --font-family-display, --font-family-display-editorial, or --font-family-display-documentation."
|
|
161
|
+
},
|
|
162
|
+
"body": {
|
|
163
|
+
"value": "\"normal\"",
|
|
164
|
+
"description": "Default figure style for body text — preserves Josefin's old-style figures where they harmonize with lowercase letterforms in continuous prose."
|
|
165
|
+
}
|
|
146
166
|
}
|
|
147
167
|
}
|
|
148
168
|
}
|