@dataimago/tokens-neutral 0.1.0-alpha.16 → 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 +9 -9
- package/dist/index.cjs +26 -4
- package/dist/index.mjs +26 -4
- package/dist/theme-colors.json +26 -4
- package/dist/tokens.css +18 -6
- package/dist/tokens.dtcg.json +38 -4
- package/dist/tokens.scss +18 -6
- package/dist/tokens.studio.json +38 -2
- package/dist/tokens.w3c.dtcg.json +46 -4
- package/package.json +1 -1
- package/src/colors.json +5 -5
- package/src/theme-colors.json +26 -4
package/dist/colors.json
CHANGED
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
},
|
|
97
97
|
"200": {
|
|
98
98
|
"value": "#faf2e3",
|
|
99
|
-
"description": "Paper scale —
|
|
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": "#
|
|
118
|
-
"description": "Success
|
|
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": "#
|
|
122
|
-
"description": "Warning
|
|
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": "#
|
|
126
|
-
"description": "Error
|
|
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": "#
|
|
130
|
-
"description": "
|
|
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": "#
|
|
21
|
+
"light": "#f7f7f6",
|
|
22
22
|
"dark": "#0c0a09",
|
|
23
|
-
"description": "Input fields,
|
|
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": "#
|
|
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": {
|
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": "#
|
|
21
|
+
"light": "#f7f7f6",
|
|
22
22
|
"dark": "#0c0a09",
|
|
23
|
-
"description": "Input fields,
|
|
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": "#
|
|
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": {
|
package/dist/theme-colors.json
CHANGED
|
@@ -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": "#
|
|
20
|
+
"light": "#f7f7f6",
|
|
21
21
|
"dark": "#0c0a09",
|
|
22
|
-
"description": "Input fields,
|
|
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": "#
|
|
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: #
|
|
29
|
-
--color-functional-warning: #
|
|
30
|
-
--color-functional-error: #
|
|
31
|
-
--color-functional-info: #
|
|
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;
|
|
@@ -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: #
|
|
114
|
+
--color-surface-sunken: #f7f7f6;
|
|
115
115
|
--color-surface-navbar: #ededeb;
|
|
116
116
|
--color-surface-navbar-scrolled: #ededeb;
|
|
117
|
-
--color-surface-code: #
|
|
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;
|
package/dist/tokens.dtcg.json
CHANGED
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
},
|
|
28
28
|
"sunken": {
|
|
29
29
|
"$value": {
|
|
30
|
-
"light": "#
|
|
30
|
+
"light": "#f7f7f6",
|
|
31
31
|
"dark": "#0c0a09"
|
|
32
32
|
},
|
|
33
33
|
"$type": "color",
|
|
34
|
-
"$description": "Input fields,
|
|
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": "#
|
|
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": {
|
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: #
|
|
29
|
-
--color-functional-warning: #
|
|
30
|
-
--color-functional-error: #
|
|
31
|
-
--color-functional-info: #
|
|
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;
|
|
@@ -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: #
|
|
114
|
+
--color-surface-sunken: #f7f7f6;
|
|
115
115
|
--color-surface-navbar: #ededeb;
|
|
116
116
|
--color-surface-navbar-scrolled: #ededeb;
|
|
117
|
-
--color-surface-code: #
|
|
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;
|
package/dist/tokens.studio.json
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"type": "color"
|
|
16
16
|
},
|
|
17
17
|
"sunken": {
|
|
18
|
-
"value": "#
|
|
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": "#
|
|
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": {
|
|
@@ -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": "#
|
|
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,
|
|
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": "#
|
|
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": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dataimago/tokens-neutral",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
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 —
|
|
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": "#
|
|
39
|
-
"warning": { "value": "#
|
|
40
|
-
"error": { "value": "#
|
|
41
|
-
"info": { "value": "#
|
|
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
|
}
|
package/src/theme-colors.json
CHANGED
|
@@ -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": "#
|
|
20
|
+
"light": "#f7f7f6",
|
|
21
21
|
"dark": "#0c0a09",
|
|
22
|
-
"description": "Input fields,
|
|
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": "#
|
|
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
|
}
|