@dataimago/tokens-neutral 0.1.0-alpha.15 → 0.1.0-alpha.17

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/colors.json CHANGED
@@ -96,7 +96,7 @@
96
96
  },
97
97
  "200": {
98
98
  "value": "#faf2e3",
99
- "description": "Paper scale — code-block and pull-quote background"
99
+ "description": "Paper scale — pull-quote background"
100
100
  },
101
101
  "300": {
102
102
  "value": "#f5e8cf",
@@ -114,20 +114,20 @@
114
114
  },
115
115
  "functional": {
116
116
  "success": {
117
- "value": "#27AE60",
118
- "description": "Success states and positive actions"
117
+ "value": "#009E73",
118
+ "description": "Success hue (Okabe-Ito bluish-green, 2026-11-02; was Flat-UI #27AE60). For text use the mode-aware color.state.success"
119
119
  },
120
120
  "warning": {
121
- "value": "#F39C12",
122
- "description": "Warning states and caution"
121
+ "value": "#E69F00",
122
+ "description": "Warning hue (Okabe-Ito orange, 2026-11-02; was Flat-UI #F39C12). For text use the mode-aware color.state.warning"
123
123
  },
124
124
  "error": {
125
- "value": "#E74C3C",
126
- "description": "Error states and critical issues"
125
+ "value": "#ef5350",
126
+ "description": "Error hue (red, 2026-11-02; was Flat-UI #E74C3C). For text use the mode-aware color.state.error"
127
127
  },
128
128
  "info": {
129
- "value": "#3498DB",
130
- "description": "Informational content"
129
+ "value": "#d6d3d1",
130
+ "description": "Info hue (the neutral accent, ink-200, 2026-11-02; was the house #3498DB, which css-neutral does not carry). For text use the mode-aware color.state.info"
131
131
  }
132
132
  }
133
133
  }
package/dist/index.cjs CHANGED
@@ -18,9 +18,9 @@ const tokens = {
18
18
  "description": "Cards, modals, dropdowns — one step above page (stone-50 / ink-800)"
19
19
  },
20
20
  "sunken": {
21
- "light": "#faf2e3",
21
+ "light": "#f7f7f6",
22
22
  "dark": "#0c0a09",
23
- "description": "Input fields, code blocks — below page level (paper-200 light / ink-900 dark)"
23
+ "description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
24
24
  },
25
25
  "navbar": {
26
26
  "light": "#ededeb",
@@ -33,9 +33,9 @@ const tokens = {
33
33
  "description": "Navbar when scrolled/shrunk — matches page-scrolled"
34
34
  },
35
35
  "code": {
36
- "light": "#faf2e3",
36
+ "light": "#f7f7f6",
37
37
  "dark": "#1c1917",
38
- "description": "Code block and inline code background"
38
+ "description": "Code block and inline code background: the card colour in both modes (2026-11-02; light mode was paper-200 #faf2e3)"
39
39
  }
40
40
  },
41
41
  "border": {
@@ -109,6 +109,28 @@ const tokens = {
109
109
  "description": "Focus indicators — mirrors interactive.primary"
110
110
  }
111
111
  },
112
+ "state": {
113
+ "success": {
114
+ "light": "#007a58",
115
+ "dark": "#009E73",
116
+ "description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
117
+ },
118
+ "warning": {
119
+ "light": "#906306",
120
+ "dark": "#E69F00",
121
+ "description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
122
+ },
123
+ "error": {
124
+ "light": "#a4262c",
125
+ "dark": "#ef5350",
126
+ "description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
127
+ },
128
+ "info": {
129
+ "light": "#292524",
130
+ "dark": "#d6d3d1",
131
+ "description": "State: info. The neutral accent (ink-700 / ink-200), since css-neutral ships no brand accent. 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
132
+ }
133
+ },
112
134
  "dataviz": {
113
135
  "okabe-ito": {
114
136
  "orange": {
@@ -389,11 +411,11 @@ const tokens = {
389
411
  "description": "Alias of display-editorial. Preserved for naming-parity with @dataimago/tokens; consumers writing `var(--font-family-display)` get sensible neutral output."
390
412
  },
391
413
  "display-editorial": {
392
- "value": "Noto Sans, system-ui, sans-serif",
414
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
393
415
  "description": "Editorial display family — neutral default. @dataimago/tokens uses Josefin Sans here; @dataimago/tokens-neutral substitutes Noto Sans so externally-owned consumers (Level-3 user apps, third-party Level-2 hubs) ship without inheriting the dataimago house typographic identity. Owners may override by extending the Tailwind preset or redeclaring the CSS variable."
394
416
  },
395
417
  "display-documentation": {
396
- "value": "Noto Sans, system-ui, sans-serif",
418
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
397
419
  "description": "Documentation display family — Noto Sans. Identical to @dataimago/tokens (this family was already Noto Sans in the house package)."
398
420
  },
399
421
  "brand": {
package/dist/index.mjs CHANGED
@@ -18,9 +18,9 @@ const tokens = {
18
18
  "description": "Cards, modals, dropdowns — one step above page (stone-50 / ink-800)"
19
19
  },
20
20
  "sunken": {
21
- "light": "#faf2e3",
21
+ "light": "#f7f7f6",
22
22
  "dark": "#0c0a09",
23
- "description": "Input fields, code blocks — below page level (paper-200 light / ink-900 dark)"
23
+ "description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
24
24
  },
25
25
  "navbar": {
26
26
  "light": "#ededeb",
@@ -33,9 +33,9 @@ const tokens = {
33
33
  "description": "Navbar when scrolled/shrunk — matches page-scrolled"
34
34
  },
35
35
  "code": {
36
- "light": "#faf2e3",
36
+ "light": "#f7f7f6",
37
37
  "dark": "#1c1917",
38
- "description": "Code block and inline code background"
38
+ "description": "Code block and inline code background: the card colour in both modes (2026-11-02; light mode was paper-200 #faf2e3)"
39
39
  }
40
40
  },
41
41
  "border": {
@@ -109,6 +109,28 @@ const tokens = {
109
109
  "description": "Focus indicators — mirrors interactive.primary"
110
110
  }
111
111
  },
112
+ "state": {
113
+ "success": {
114
+ "light": "#007a58",
115
+ "dark": "#009E73",
116
+ "description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
117
+ },
118
+ "warning": {
119
+ "light": "#906306",
120
+ "dark": "#E69F00",
121
+ "description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
122
+ },
123
+ "error": {
124
+ "light": "#a4262c",
125
+ "dark": "#ef5350",
126
+ "description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
127
+ },
128
+ "info": {
129
+ "light": "#292524",
130
+ "dark": "#d6d3d1",
131
+ "description": "State: info. The neutral accent (ink-700 / ink-200), since css-neutral ships no brand accent. 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
132
+ }
133
+ },
112
134
  "dataviz": {
113
135
  "okabe-ito": {
114
136
  "orange": {
@@ -389,11 +411,11 @@ const tokens = {
389
411
  "description": "Alias of display-editorial. Preserved for naming-parity with @dataimago/tokens; consumers writing `var(--font-family-display)` get sensible neutral output."
390
412
  },
391
413
  "display-editorial": {
392
- "value": "Noto Sans, system-ui, sans-serif",
414
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
393
415
  "description": "Editorial display family — neutral default. @dataimago/tokens uses Josefin Sans here; @dataimago/tokens-neutral substitutes Noto Sans so externally-owned consumers (Level-3 user apps, third-party Level-2 hubs) ship without inheriting the dataimago house typographic identity. Owners may override by extending the Tailwind preset or redeclaring the CSS variable."
394
416
  },
395
417
  "display-documentation": {
396
- "value": "Noto Sans, system-ui, sans-serif",
418
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
397
419
  "description": "Documentation display family — Noto Sans. Identical to @dataimago/tokens (this family was already Noto Sans in the house package)."
398
420
  },
399
421
  "brand": {
@@ -17,9 +17,9 @@
17
17
  "description": "Cards, modals, dropdowns — one step above page (stone-50 / ink-800)"
18
18
  },
19
19
  "sunken": {
20
- "light": "#faf2e3",
20
+ "light": "#f7f7f6",
21
21
  "dark": "#0c0a09",
22
- "description": "Input fields, code blocks — below page level (paper-200 light / ink-900 dark)"
22
+ "description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
23
23
  },
24
24
  "navbar": {
25
25
  "light": "#ededeb",
@@ -32,9 +32,9 @@
32
32
  "description": "Navbar when scrolled/shrunk — matches page-scrolled"
33
33
  },
34
34
  "code": {
35
- "light": "#faf2e3",
35
+ "light": "#f7f7f6",
36
36
  "dark": "#1c1917",
37
- "description": "Code block and inline code background"
37
+ "description": "Code block and inline code background: the card colour in both modes (2026-11-02; light mode was paper-200 #faf2e3)"
38
38
  }
39
39
  },
40
40
  "border": {
@@ -107,6 +107,28 @@
107
107
  "dark": "#d6d3d1",
108
108
  "description": "Focus indicators — mirrors interactive.primary"
109
109
  }
110
+ },
111
+ "state": {
112
+ "success": {
113
+ "light": "#007a58",
114
+ "dark": "#009E73",
115
+ "description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
116
+ },
117
+ "warning": {
118
+ "light": "#906306",
119
+ "dark": "#E69F00",
120
+ "description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
121
+ },
122
+ "error": {
123
+ "light": "#a4262c",
124
+ "dark": "#ef5350",
125
+ "description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
126
+ },
127
+ "info": {
128
+ "light": "#292524",
129
+ "dark": "#d6d3d1",
130
+ "description": "State: info. The neutral accent (ink-700 / ink-200), since css-neutral ships no brand accent. 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
131
+ }
110
132
  }
111
133
  }
112
134
  }
package/dist/tokens.css CHANGED
@@ -25,10 +25,10 @@
25
25
  --color-palette-paper-300: #f5e8cf;
26
26
  --color-palette-paper-400: #edd9b3;
27
27
  --color-palette-paper-500: #e0c088;
28
- --color-functional-success: #27AE60;
29
- --color-functional-warning: #F39C12;
30
- --color-functional-error: #E74C3C;
31
- --color-functional-info: #3498DB;
28
+ --color-functional-success: #009E73;
29
+ --color-functional-warning: #E69F00;
30
+ --color-functional-error: #ef5350;
31
+ --color-functional-info: #d6d3d1;
32
32
  --transition-quick: 0.15s ease;
33
33
  --transition-standard: 0.25s ease-in-out;
34
34
  --transition-smooth: 0.35s ease;
@@ -36,8 +36,8 @@
36
36
  --font-family-sans: Noto Sans, Noto Sans Math, system-ui, sans-serif;
37
37
  --font-family-mono: Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace;
38
38
  --font-family-display: var(--font-family-display-editorial);
39
- --font-family-display-editorial: Noto Sans, system-ui, sans-serif;
40
- --font-family-display-documentation: Noto Sans, system-ui, sans-serif;
39
+ --font-family-display-editorial: Noto Sans, Noto Sans Math, system-ui, sans-serif;
40
+ --font-family-display-documentation: Noto Sans, Noto Sans Math, system-ui, sans-serif;
41
41
  --font-family-brand: Noto Sans, system-ui, sans-serif;
42
42
  --font-family-math: Noto Sans Math, math;
43
43
  --font-size-micro: 0.75rem;
@@ -111,10 +111,10 @@
111
111
  --color-surface-page: #ededeb;
112
112
  --color-surface-page-scrolled: #ededeb;
113
113
  --color-surface-elevated: #f7f7f6;
114
- --color-surface-sunken: #faf2e3;
114
+ --color-surface-sunken: #f7f7f6;
115
115
  --color-surface-navbar: #ededeb;
116
116
  --color-surface-navbar-scrolled: #ededeb;
117
- --color-surface-code: #faf2e3;
117
+ --color-surface-code: #f7f7f6;
118
118
  --color-border-subtle: rgba(12, 10, 9, 0.45);
119
119
  --color-border-moderate: rgba(12, 10, 9, 0.60);
120
120
  --color-border-strong: rgba(12, 10, 9, 0.75);
@@ -128,6 +128,10 @@
128
128
  --color-interactive-hover: #1c1917;
129
129
  --color-interactive-accent: #292524;
130
130
  --color-interactive-focus: #292524;
131
+ --color-state-success: #007a58;
132
+ --color-state-warning: #906306;
133
+ --color-state-error: #a4262c;
134
+ --color-state-info: #292524;
131
135
  --contrast-high: rgb(20, 20, 16);
132
136
  --contrast-readable: rgb(20, 20, 16);
133
137
  --contrast-medium: #7c7c7c;
@@ -168,6 +172,10 @@
168
172
  --color-interactive-hover: #a8a29e;
169
173
  --color-interactive-accent: #d6d3d1;
170
174
  --color-interactive-focus: #d6d3d1;
175
+ --color-state-success: #009E73;
176
+ --color-state-warning: #E69F00;
177
+ --color-state-error: #ef5350;
178
+ --color-state-info: #d6d3d1;
171
179
  --contrast-high: rgb(237, 237, 235);
172
180
  --contrast-readable: rgb(237, 237, 235);
173
181
  --contrast-medium: #83838f;
@@ -209,6 +217,10 @@
209
217
  --color-interactive-hover: #a8a29e;
210
218
  --color-interactive-accent: #d6d3d1;
211
219
  --color-interactive-focus: #d6d3d1;
220
+ --color-state-success: #009E73;
221
+ --color-state-warning: #E69F00;
222
+ --color-state-error: #ef5350;
223
+ --color-state-info: #d6d3d1;
212
224
  --contrast-high: rgb(237, 237, 235);
213
225
  --contrast-readable: rgb(237, 237, 235);
214
226
  --contrast-medium: #83838f;
@@ -27,11 +27,11 @@
27
27
  },
28
28
  "sunken": {
29
29
  "$value": {
30
- "light": "#faf2e3",
30
+ "light": "#f7f7f6",
31
31
  "dark": "#0c0a09"
32
32
  },
33
33
  "$type": "color",
34
- "$description": "Input fields, code blocks — below page level (paper-200 light / ink-900 dark)"
34
+ "$description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
35
35
  },
36
36
  "navbar": {
37
37
  "$value": {
@@ -51,11 +51,11 @@
51
51
  },
52
52
  "code": {
53
53
  "$value": {
54
- "light": "#faf2e3",
54
+ "light": "#f7f7f6",
55
55
  "dark": "#1c1917"
56
56
  },
57
57
  "$type": "color",
58
- "$description": "Code block and inline code background"
58
+ "$description": "Code block and inline code background: the card colour in both modes (2026-11-02; light mode was paper-200 #faf2e3)"
59
59
  }
60
60
  },
61
61
  "border": {
@@ -167,6 +167,40 @@
167
167
  "$type": "color",
168
168
  "$description": "Focus indicators — mirrors interactive.primary"
169
169
  }
170
+ },
171
+ "state": {
172
+ "success": {
173
+ "$value": {
174
+ "light": "#007a58",
175
+ "dark": "#009E73"
176
+ },
177
+ "$type": "color",
178
+ "$description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
179
+ },
180
+ "warning": {
181
+ "$value": {
182
+ "light": "#906306",
183
+ "dark": "#E69F00"
184
+ },
185
+ "$type": "color",
186
+ "$description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
187
+ },
188
+ "error": {
189
+ "$value": {
190
+ "light": "#a4262c",
191
+ "dark": "#ef5350"
192
+ },
193
+ "$type": "color",
194
+ "$description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
195
+ },
196
+ "info": {
197
+ "$value": {
198
+ "light": "#292524",
199
+ "dark": "#d6d3d1"
200
+ },
201
+ "$type": "color",
202
+ "$description": "State: info. The neutral accent (ink-700 / ink-200), since css-neutral ships no brand accent. 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
203
+ }
170
204
  }
171
205
  },
172
206
  "spacing": {
@@ -450,12 +484,12 @@
450
484
  "$description": "Alias of display-editorial. Preserved for naming-parity with @dataimago/tokens; consumers writing `var(--font-family-display)` get sensible neutral output."
451
485
  },
452
486
  "display-editorial": {
453
- "$value": "Noto Sans, system-ui, sans-serif",
487
+ "$value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
454
488
  "$type": "other",
455
489
  "$description": "Editorial display family — neutral default. @dataimago/tokens uses Josefin Sans here; @dataimago/tokens-neutral substitutes Noto Sans so externally-owned consumers (Level-3 user apps, third-party Level-2 hubs) ship without inheriting the dataimago house typographic identity. Owners may override by extending the Tailwind preset or redeclaring the CSS variable."
456
490
  },
457
491
  "display-documentation": {
458
- "$value": "Noto Sans, system-ui, sans-serif",
492
+ "$value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
459
493
  "$type": "other",
460
494
  "$description": "Documentation display family — Noto Sans. Identical to @dataimago/tokens (this family was already Noto Sans in the house package)."
461
495
  },
package/dist/tokens.scss CHANGED
@@ -25,10 +25,10 @@
25
25
  --color-palette-paper-300: #f5e8cf;
26
26
  --color-palette-paper-400: #edd9b3;
27
27
  --color-palette-paper-500: #e0c088;
28
- --color-functional-success: #27AE60;
29
- --color-functional-warning: #F39C12;
30
- --color-functional-error: #E74C3C;
31
- --color-functional-info: #3498DB;
28
+ --color-functional-success: #009E73;
29
+ --color-functional-warning: #E69F00;
30
+ --color-functional-error: #ef5350;
31
+ --color-functional-info: #d6d3d1;
32
32
  --transition-quick: 0.15s ease;
33
33
  --transition-standard: 0.25s ease-in-out;
34
34
  --transition-smooth: 0.35s ease;
@@ -36,8 +36,8 @@
36
36
  --font-family-sans: Noto Sans, Noto Sans Math, system-ui, sans-serif;
37
37
  --font-family-mono: Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace;
38
38
  --font-family-display: var(--font-family-display-editorial);
39
- --font-family-display-editorial: Noto Sans, system-ui, sans-serif;
40
- --font-family-display-documentation: Noto Sans, system-ui, sans-serif;
39
+ --font-family-display-editorial: Noto Sans, Noto Sans Math, system-ui, sans-serif;
40
+ --font-family-display-documentation: Noto Sans, Noto Sans Math, system-ui, sans-serif;
41
41
  --font-family-brand: Noto Sans, system-ui, sans-serif;
42
42
  --font-family-math: Noto Sans Math, math;
43
43
  --font-size-micro: 0.75rem;
@@ -111,10 +111,10 @@
111
111
  --color-surface-page: #ededeb;
112
112
  --color-surface-page-scrolled: #ededeb;
113
113
  --color-surface-elevated: #f7f7f6;
114
- --color-surface-sunken: #faf2e3;
114
+ --color-surface-sunken: #f7f7f6;
115
115
  --color-surface-navbar: #ededeb;
116
116
  --color-surface-navbar-scrolled: #ededeb;
117
- --color-surface-code: #faf2e3;
117
+ --color-surface-code: #f7f7f6;
118
118
  --color-border-subtle: rgba(12, 10, 9, 0.45);
119
119
  --color-border-moderate: rgba(12, 10, 9, 0.60);
120
120
  --color-border-strong: rgba(12, 10, 9, 0.75);
@@ -128,6 +128,10 @@
128
128
  --color-interactive-hover: #1c1917;
129
129
  --color-interactive-accent: #292524;
130
130
  --color-interactive-focus: #292524;
131
+ --color-state-success: #007a58;
132
+ --color-state-warning: #906306;
133
+ --color-state-error: #a4262c;
134
+ --color-state-info: #292524;
131
135
  --contrast-high: rgb(20, 20, 16);
132
136
  --contrast-readable: rgb(20, 20, 16);
133
137
  --contrast-medium: #7c7c7c;
@@ -168,6 +172,10 @@
168
172
  --color-interactive-hover: #a8a29e;
169
173
  --color-interactive-accent: #d6d3d1;
170
174
  --color-interactive-focus: #d6d3d1;
175
+ --color-state-success: #009E73;
176
+ --color-state-warning: #E69F00;
177
+ --color-state-error: #ef5350;
178
+ --color-state-info: #d6d3d1;
171
179
  --contrast-high: rgb(237, 237, 235);
172
180
  --contrast-readable: rgb(237, 237, 235);
173
181
  --contrast-medium: #83838f;
@@ -209,6 +217,10 @@
209
217
  --color-interactive-hover: #a8a29e;
210
218
  --color-interactive-accent: #d6d3d1;
211
219
  --color-interactive-focus: #d6d3d1;
220
+ --color-state-success: #009E73;
221
+ --color-state-warning: #E69F00;
222
+ --color-state-error: #ef5350;
223
+ --color-state-info: #d6d3d1;
212
224
  --contrast-high: rgb(237, 237, 235);
213
225
  --contrast-readable: rgb(237, 237, 235);
214
226
  --contrast-medium: #83838f;
@@ -15,7 +15,7 @@
15
15
  "type": "color"
16
16
  },
17
17
  "sunken": {
18
- "value": "#faf2e3",
18
+ "value": "#f7f7f6",
19
19
  "type": "color"
20
20
  },
21
21
  "navbar": {
@@ -27,7 +27,7 @@
27
27
  "type": "color"
28
28
  },
29
29
  "code": {
30
- "value": "#faf2e3",
30
+ "value": "#f7f7f6",
31
31
  "type": "color"
32
32
  }
33
33
  },
@@ -89,6 +89,24 @@
89
89
  "type": "color"
90
90
  }
91
91
  },
92
+ "state": {
93
+ "success": {
94
+ "value": "#007a58",
95
+ "type": "color"
96
+ },
97
+ "warning": {
98
+ "value": "#906306",
99
+ "type": "color"
100
+ },
101
+ "error": {
102
+ "value": "#a4262c",
103
+ "type": "color"
104
+ },
105
+ "info": {
106
+ "value": "#292524",
107
+ "type": "color"
108
+ }
109
+ },
92
110
  "dataviz": {
93
111
  "okabe-ito": {
94
112
  "orange": {
@@ -261,11 +279,11 @@
261
279
  "type": "other"
262
280
  },
263
281
  "display-editorial": {
264
- "value": "Noto Sans, system-ui, sans-serif",
282
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
265
283
  "type": "other"
266
284
  },
267
285
  "display-documentation": {
268
- "value": "Noto Sans, system-ui, sans-serif",
286
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
269
287
  "type": "other"
270
288
  },
271
289
  "brand": {
@@ -561,6 +579,24 @@
561
579
  "type": "color"
562
580
  }
563
581
  },
582
+ "state": {
583
+ "success": {
584
+ "value": "#009E73",
585
+ "type": "color"
586
+ },
587
+ "warning": {
588
+ "value": "#E69F00",
589
+ "type": "color"
590
+ },
591
+ "error": {
592
+ "value": "#ef5350",
593
+ "type": "color"
594
+ },
595
+ "info": {
596
+ "value": "#d6d3d1",
597
+ "type": "color"
598
+ }
599
+ },
564
600
  "dataviz": {
565
601
  "okabe-ito": {
566
602
  "black": {
@@ -32,14 +32,14 @@
32
32
  "$description": "Cards, modals, dropdowns — one step above page (stone-50 / ink-800)"
33
33
  },
34
34
  "sunken": {
35
- "$value": "#faf2e3",
35
+ "$value": "#f7f7f6",
36
36
  "$type": "color",
37
37
  "$extensions": {
38
38
  "com.dataimago.theme": {
39
39
  "dark": "#0c0a09"
40
40
  }
41
41
  },
42
- "$description": "Input fields, code blocks — below page level (paper-200 light / ink-900 dark)"
42
+ "$description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
43
43
  },
44
44
  "navbar": {
45
45
  "$value": "#ededeb",
@@ -62,14 +62,14 @@
62
62
  "$description": "Navbar when scrolled/shrunk — matches page-scrolled"
63
63
  },
64
64
  "code": {
65
- "$value": "#faf2e3",
65
+ "$value": "#f7f7f6",
66
66
  "$type": "color",
67
67
  "$extensions": {
68
68
  "com.dataimago.theme": {
69
69
  "dark": "#1c1917"
70
70
  }
71
71
  },
72
- "$description": "Code block and inline code background"
72
+ "$description": "Code block and inline code background: the card colour in both modes (2026-11-02; light mode was paper-200 #faf2e3)"
73
73
  }
74
74
  },
75
75
  "border": {
@@ -208,6 +208,48 @@
208
208
  "$description": "Focus indicators — mirrors interactive.primary"
209
209
  }
210
210
  },
211
+ "state": {
212
+ "success": {
213
+ "$value": "#007a58",
214
+ "$type": "color",
215
+ "$extensions": {
216
+ "com.dataimago.theme": {
217
+ "dark": "#009E73"
218
+ }
219
+ },
220
+ "$description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
221
+ },
222
+ "warning": {
223
+ "$value": "#906306",
224
+ "$type": "color",
225
+ "$extensions": {
226
+ "com.dataimago.theme": {
227
+ "dark": "#E69F00"
228
+ }
229
+ },
230
+ "$description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
231
+ },
232
+ "error": {
233
+ "$value": "#a4262c",
234
+ "$type": "color",
235
+ "$extensions": {
236
+ "com.dataimago.theme": {
237
+ "dark": "#ef5350"
238
+ }
239
+ },
240
+ "$description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
241
+ },
242
+ "info": {
243
+ "$value": "#292524",
244
+ "$type": "color",
245
+ "$extensions": {
246
+ "com.dataimago.theme": {
247
+ "dark": "#d6d3d1"
248
+ }
249
+ },
250
+ "$description": "State: info. The neutral accent (ink-700 / ink-200), since css-neutral ships no brand accent. 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
251
+ }
252
+ },
211
253
  "dataviz": {
212
254
  "okabe-ito": {
213
255
  "orange": {
@@ -447,11 +489,11 @@
447
489
  "$description": "Alias of display-editorial. Preserved for naming-parity with @dataimago/tokens; consumers writing `var(--font-family-display)` get sensible neutral output."
448
490
  },
449
491
  "display-editorial": {
450
- "$value": "Noto Sans, system-ui, sans-serif",
492
+ "$value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
451
493
  "$description": "Editorial display family — neutral default. @dataimago/tokens uses Josefin Sans here; @dataimago/tokens-neutral substitutes Noto Sans so externally-owned consumers (Level-3 user apps, third-party Level-2 hubs) ship without inheriting the dataimago house typographic identity. Owners may override by extending the Tailwind preset or redeclaring the CSS variable."
452
494
  },
453
495
  "display-documentation": {
454
- "$value": "Noto Sans, system-ui, sans-serif",
496
+ "$value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
455
497
  "$description": "Documentation display family — Noto Sans. Identical to @dataimago/tokens (this family was already Noto Sans in the house package)."
456
498
  },
457
499
  "brand": {
@@ -14,11 +14,11 @@
14
14
  "description": "Alias of display-editorial. Preserved for naming-parity with @dataimago/tokens; consumers writing `var(--font-family-display)` get sensible neutral output."
15
15
  },
16
16
  "display-editorial": {
17
- "value": "Noto Sans, system-ui, sans-serif",
17
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
18
18
  "description": "Editorial display family — neutral default. @dataimago/tokens uses Josefin Sans here; @dataimago/tokens-neutral substitutes Noto Sans so externally-owned consumers (Level-3 user apps, third-party Level-2 hubs) ship without inheriting the dataimago house typographic identity. Owners may override by extending the Tailwind preset or redeclaring the CSS variable."
19
19
  },
20
20
  "display-documentation": {
21
- "value": "Noto Sans, system-ui, sans-serif",
21
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
22
22
  "description": "Documentation display family — Noto Sans. Identical to @dataimago/tokens (this family was already Noto Sans in the house package)."
23
23
  },
24
24
  "brand": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataimago/tokens-neutral",
3
- "version": "0.1.0-alpha.15",
3
+ "version": "0.1.0-alpha.17",
4
4
  "description": "dataimago neutral-identity design tokens — Noto Sans throughout, neutral palette; sensible defaults for externally-owned consumers (Level-3 user apps, third-party Level-2 verticals). Non-identity tokens (spacing, radius, motion, effects, components) are read from @dataimago/tokens at build time so the two packages stay in lockstep.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/colors.json CHANGED
@@ -28,17 +28,17 @@
28
28
  "paper": {
29
29
  "50": { "value": "#fefdfb", "description": "Paper scale — lightest warm surface; elevated cards/modals when warm tint is desired" },
30
30
  "100": { "value": "#fdf9f2", "description": "Paper scale — warm page-background option" },
31
- "200": { "value": "#faf2e3", "description": "Paper scale — code-block and pull-quote background" },
31
+ "200": { "value": "#faf2e3", "description": "Paper scale — pull-quote background" },
32
32
  "300": { "value": "#f5e8cf", "description": "Paper scale — call-out / emphasised panel background" },
33
33
  "400": { "value": "#edd9b3", "description": "Paper scale — muted warm accent" },
34
34
  "500": { "value": "#e0c088", "description": "Paper scale — strong warm accent; wheat" }
35
35
  }
36
36
  },
37
37
  "functional": {
38
- "success": { "value": "#27AE60", "description": "Success states and positive actions" },
39
- "warning": { "value": "#F39C12", "description": "Warning states and caution" },
40
- "error": { "value": "#E74C3C", "description": "Error states and critical issues" },
41
- "info": { "value": "#3498DB", "description": "Informational content" }
38
+ "success": { "value": "#009E73", "description": "Success hue (Okabe-Ito bluish-green, 2026-11-02; was Flat-UI #27AE60). For text use the mode-aware color.state.success" },
39
+ "warning": { "value": "#E69F00", "description": "Warning hue (Okabe-Ito orange, 2026-11-02; was Flat-UI #F39C12). For text use the mode-aware color.state.warning" },
40
+ "error": { "value": "#ef5350", "description": "Error hue (red, 2026-11-02; was Flat-UI #E74C3C). For text use the mode-aware color.state.error" },
41
+ "info": { "value": "#d6d3d1", "description": "Info hue (the neutral accent, ink-200, 2026-11-02; was the house #3498DB, which css-neutral does not carry). For text use the mode-aware color.state.info" }
42
42
  }
43
43
  }
44
44
  }
@@ -17,9 +17,9 @@
17
17
  "description": "Cards, modals, dropdowns — one step above page (stone-50 / ink-800)"
18
18
  },
19
19
  "sunken": {
20
- "light": "#faf2e3",
20
+ "light": "#f7f7f6",
21
21
  "dark": "#0c0a09",
22
- "description": "Input fields, code blocks — below page level (paper-200 light / ink-900 dark)"
22
+ "description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
23
23
  },
24
24
  "navbar": {
25
25
  "light": "#ededeb",
@@ -32,9 +32,9 @@
32
32
  "description": "Navbar when scrolled/shrunk — matches page-scrolled"
33
33
  },
34
34
  "code": {
35
- "light": "#faf2e3",
35
+ "light": "#f7f7f6",
36
36
  "dark": "#1c1917",
37
- "description": "Code block and inline code background"
37
+ "description": "Code block and inline code background: the card colour in both modes (2026-11-02; light mode was paper-200 #faf2e3)"
38
38
  }
39
39
  },
40
40
  "border": {
@@ -71,6 +71,28 @@
71
71
  "dark": "#d6d3d1",
72
72
  "description": "Focus indicators — mirrors interactive.primary"
73
73
  }
74
+ },
75
+ "state": {
76
+ "success": {
77
+ "light": "#007a58",
78
+ "dark": "#009E73",
79
+ "description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
80
+ },
81
+ "warning": {
82
+ "light": "#906306",
83
+ "dark": "#E69F00",
84
+ "description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
85
+ },
86
+ "error": {
87
+ "light": "#a4262c",
88
+ "dark": "#ef5350",
89
+ "description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
90
+ },
91
+ "info": {
92
+ "light": "#292524",
93
+ "dark": "#d6d3d1",
94
+ "description": "State: info. The neutral accent (ink-700 / ink-200), since css-neutral ships no brand accent. 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
95
+ }
74
96
  }
75
97
  }
76
98
  }
@@ -14,11 +14,11 @@
14
14
  "description": "Alias of display-editorial. Preserved for naming-parity with @dataimago/tokens; consumers writing `var(--font-family-display)` get sensible neutral output."
15
15
  },
16
16
  "display-editorial": {
17
- "value": "Noto Sans, system-ui, sans-serif",
17
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
18
18
  "description": "Editorial display family — neutral default. @dataimago/tokens uses Josefin Sans here; @dataimago/tokens-neutral substitutes Noto Sans so externally-owned consumers (Level-3 user apps, third-party Level-2 hubs) ship without inheriting the dataimago house typographic identity. Owners may override by extending the Tailwind preset or redeclaring the CSS variable."
19
19
  },
20
20
  "display-documentation": {
21
- "value": "Noto Sans, system-ui, sans-serif",
21
+ "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
22
22
  "description": "Documentation display family — Noto Sans. Identical to @dataimago/tokens (this family was already Noto Sans in the house package)."
23
23
  },
24
24
  "brand": {