@navecss/tokens 0.1.0 → 0.2.0

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.
Files changed (31) hide show
  1. package/README.md +1 -1
  2. package/dist/core-contract.json +1 -1
  3. package/dist/lib/bin.js +35 -6
  4. package/dist/lib/core-version.d.ts +5 -1
  5. package/dist/lib/core-version.js +7 -1
  6. package/dist/lib/facade.d.ts +5 -0
  7. package/dist/lib/facade.js +17 -11
  8. package/dist/lib/formats.js +27 -6
  9. package/dist/lib/out-path-conflict.d.ts +3 -0
  10. package/dist/lib/out-path-conflict.js +7 -0
  11. package/dist/lib/read-manifest.d.ts +2 -0
  12. package/dist/lib/read-manifest.js +17 -0
  13. package/dist/lib/reader.d.ts +6 -0
  14. package/dist/lib/reader.js +41 -41
  15. package/dist/lib/reserved-keys.d.ts +1 -0
  16. package/dist/lib/reserved-keys.js +18 -0
  17. package/dist/lib/resolve-value.d.ts +8 -0
  18. package/dist/lib/resolve-value.js +56 -0
  19. package/dist/lib/theming/comment-open-tracker.js +230 -9
  20. package/dist/lib/theming/core-contract.js +127 -4
  21. package/dist/lib/theming/guard-message-probes.js +18 -1
  22. package/dist/lib/theming/neutral.js +1 -1
  23. package/dist/lib/theming/seed-channel-split.js +8 -3
  24. package/dist/lib/validate-report.d.ts +1 -0
  25. package/dist/lib/validate-report.js +7 -3
  26. package/dist/lib/validate.js +17 -3
  27. package/dist/palette-record.json +52 -52
  28. package/dist/tokens.css +33 -33
  29. package/dist/tokens.d.ts +46 -2
  30. package/dist/tokens.js +5 -2
  31. package/package.json +2 -2
package/dist/palette-record.json CHANGED
@@ -2,88 +2,88 @@
2
2
  "aboutThisFile": "This file is a resolved palette record: what this build produced for every semantic colour slot, in both schemes. It is not a DTCG 2025.10 document, and it is not meant to be read by a DTCG 2025.10 tool, because its keys are flat dotted names and most of its values are relative-colour-syntax strings, neither of which that format expresses. The token document is tokens.json, shipped beside it.",
3
3
  "color.surface.base.light": {
4
4
  "$type": "color",
5
- "$value": "oklch(from var(--nave-color-tint) 1 0 h)"
5
+ "$value": "oklch(from var(--nave-color-tint) 1 0 h / 1)"
6
6
  },
7
7
  "color.surface.base.dark": {
8
8
  "$type": "color",
9
- "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h)"
9
+ "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1)"
10
10
  },
11
11
  "color.surface.raised.light": {
12
12
  "$type": "color",
13
- "$value": "oklch(from var(--nave-color-tint) 1 0 h)"
13
+ "$value": "oklch(from var(--nave-color-tint) 1 0 h / 1)"
14
14
  },
15
15
  "color.surface.raised.dark": {
16
16
  "$type": "color",
17
- "$value": "oklch(from var(--nave-color-tint) 0.225 0.0067 h)"
17
+ "$value": "oklch(from var(--nave-color-tint) 0.225 0.0067 h / 1)"
18
18
  },
19
19
  "color.surface.overlay.light": {
20
20
  "$type": "color",
21
- "$value": "oklch(from var(--nave-color-tint) 1 0 h)"
21
+ "$value": "oklch(from var(--nave-color-tint) 1 0 h / 1)"
22
22
  },
23
23
  "color.surface.overlay.dark": {
24
24
  "$type": "color",
25
- "$value": "oklch(from var(--nave-color-tint) 0.27 0.0067 h)"
25
+ "$value": "oklch(from var(--nave-color-tint) 0.27 0.0067 h / 1)"
26
26
  },
27
27
  "color.surface.sunken.light": {
28
28
  "$type": "color",
29
- "$value": "oklch(from var(--nave-color-tint) 0.985 0.0067 h)"
29
+ "$value": "oklch(from var(--nave-color-tint) 0.985 0.0067 h / 1)"
30
30
  },
31
31
  "color.surface.sunken.dark": {
32
32
  "$type": "color",
33
- "$value": "oklch(from var(--nave-color-tint) 0.12 0.0067 h)"
33
+ "$value": "oklch(from var(--nave-color-tint) 0.12 0.0067 h / 1)"
34
34
  },
35
35
  "color.surface.inverse.light": {
36
36
  "$type": "color",
37
- "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h)"
37
+ "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1)"
38
38
  },
39
39
  "color.surface.inverse.dark": {
40
40
  "$type": "color",
41
- "$value": "oklch(from var(--nave-color-tint) 0.965 0.0067 h)"
41
+ "$value": "oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1)"
42
42
  },
43
43
  "color.content.primary.light": {
44
44
  "$type": "color",
45
- "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h)"
45
+ "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1)"
46
46
  },
47
47
  "color.content.primary.dark": {
48
48
  "$type": "color",
49
- "$value": "oklch(from var(--nave-color-tint) 0.965 0.0067 h)"
49
+ "$value": "oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1)"
50
50
  },
51
51
  "color.content.secondary.light": {
52
52
  "$type": "color",
53
- "$value": "oklch(from var(--nave-color-tint) 0.37 0.0067 h)"
53
+ "$value": "oklch(from var(--nave-color-tint) 0.37 0.0067 h / 1)"
54
54
  },
55
55
  "color.content.secondary.dark": {
56
56
  "$type": "color",
57
- "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h)"
57
+ "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1)"
58
58
  },
59
59
  "color.content.tertiary.light": {
60
60
  "$type": "color",
61
- "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h)",
61
+ "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1)",
62
62
  "$description": "Placeholder and hint text only."
63
63
  },
64
64
  "color.content.tertiary.dark": {
65
65
  "$type": "color",
66
- "$value": "oklch(from var(--nave-color-tint) 0.72 0.0067 h)",
66
+ "$value": "oklch(from var(--nave-color-tint) 0.72 0.0067 h / 1)",
67
67
  "$description": "Placeholder and hint text only."
68
68
  },
69
69
  "color.content.disabled.light": {
70
70
  "$type": "color",
71
- "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h)",
71
+ "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1)",
72
72
  "$description": "Text inside a disabled interactive component."
73
73
  },
74
74
  "color.content.disabled.dark": {
75
75
  "$type": "color",
76
- "$value": "oklch(from var(--nave-color-tint) 0.37 0.0067 h)",
76
+ "$value": "oklch(from var(--nave-color-tint) 0.37 0.0067 h / 1)",
77
77
  "$description": "Text inside a disabled interactive component."
78
78
  },
79
79
  "color.content.inverse.light": {
80
80
  "$type": "color",
81
- "$value": "oklch(from var(--nave-color-tint) 0.965 0.0067 h)",
81
+ "$value": "oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1)",
82
82
  "$description": "Declared foreground for surface.inverse."
83
83
  },
84
84
  "color.content.inverse.dark": {
85
85
  "$type": "color",
86
- "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h)",
86
+ "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1)",
87
87
  "$description": "Declared foreground for surface.inverse."
88
88
  },
89
89
  "color.content.link.light": {
@@ -98,39 +98,39 @@
98
98
  },
99
99
  "color.border.default.light": {
100
100
  "$type": "color",
101
- "$value": "oklch(from var(--nave-color-tint) 0.905 0.0067 h)",
101
+ "$value": "oklch(from var(--nave-color-tint) 0.905 0.0067 h / 1)",
102
102
  "$description": "Decorative dividers and card edges."
103
103
  },
104
104
  "color.border.default.dark": {
105
105
  "$type": "color",
106
- "$value": "oklch(from var(--nave-color-tint) 0.37 0.0067 h)",
106
+ "$value": "oklch(from var(--nave-color-tint) 0.37 0.0067 h / 1)",
107
107
  "$description": "Decorative dividers and card edges."
108
108
  },
109
109
  "color.border.strong.light": {
110
110
  "$type": "color",
111
- "$value": "oklch(from var(--nave-color-tint) 0.72 0.0067 h)"
111
+ "$value": "oklch(from var(--nave-color-tint) 0.72 0.0067 h / 1)"
112
112
  },
113
113
  "color.border.strong.dark": {
114
114
  "$type": "color",
115
- "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h)"
115
+ "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1)"
116
116
  },
117
117
  "color.border.control.light": {
118
118
  "$type": "color",
119
- "$value": "oklch(from var(--nave-color-tint) 0.59 0.0067 h)",
119
+ "$value": "oklch(from var(--nave-color-tint) 0.59 0.0067 h / 1)",
120
120
  "$description": "Identifying boundary for a control (inputs, form boundaries, and the secondary action control)."
121
121
  },
122
122
  "color.border.control.dark": {
123
123
  "$type": "color",
124
- "$value": "oklch(from var(--nave-color-tint) 0.59 0.0067 h)",
124
+ "$value": "oklch(from var(--nave-color-tint) 0.59 0.0067 h / 1)",
125
125
  "$description": "Identifying boundary for a control (inputs, form boundaries, and the secondary action control)."
126
126
  },
127
127
  "color.border.disabled.light": {
128
128
  "$type": "color",
129
- "$value": "oklch(from var(--nave-color-tint) 0.94 0.0067 h)"
129
+ "$value": "oklch(from var(--nave-color-tint) 0.94 0.0067 h / 1)"
130
130
  },
131
131
  "color.border.disabled.dark": {
132
132
  "$type": "color",
133
- "$value": "oklch(from var(--nave-color-tint) 0.27 0.0067 h)"
133
+ "$value": "oklch(from var(--nave-color-tint) 0.27 0.0067 h / 1)"
134
134
  },
135
135
  "color.border.focus.light": {
136
136
  "$type": "color",
@@ -166,19 +166,19 @@
166
166
  },
167
167
  "color.on-action.primary.light": {
168
168
  "$type": "color",
169
- "$value": "oklch(from var(--nave-color-tint) 1 0 h)"
169
+ "$value": "oklch(from var(--nave-color-tint) 1 0 h / 1)"
170
170
  },
171
171
  "color.on-action.primary.dark": {
172
172
  "$type": "color",
173
- "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h)"
173
+ "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1)"
174
174
  },
175
175
  "color.action.secondary.light": {
176
176
  "$type": "color",
177
- "$value": "oklch(from var(--nave-color-tint) 0.965 0.0067 h)"
177
+ "$value": "oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1)"
178
178
  },
179
179
  "color.action.secondary.dark": {
180
180
  "$type": "color",
181
- "$value": "oklch(from var(--nave-color-tint) 0.27 0.0067 h)"
181
+ "$value": "oklch(from var(--nave-color-tint) 0.27 0.0067 h / 1)"
182
182
  },
183
183
  "color.feedback.danger.light": {
184
184
  "$type": "color",
@@ -202,92 +202,92 @@
202
202
  },
203
203
  "color.on-feedback.danger.light": {
204
204
  "$type": "color",
205
- "$value": "oklch(from var(--nave-color-tint) 1 0 h)",
205
+ "$value": "oklch(from var(--nave-color-tint) 1 0 h / 1)",
206
206
  "$description": "Declared foreground for the solid feedback.danger background."
207
207
  },
208
208
  "color.on-feedback.danger.dark": {
209
209
  "$type": "color",
210
- "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h)",
210
+ "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1)",
211
211
  "$description": "Declared foreground for the solid feedback.danger background."
212
212
  },
213
213
  "color.feedback.warning.light": {
214
214
  "$type": "color",
215
- "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h)",
215
+ "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1)",
216
216
  "$description": "Solid-background role for a warning state (shared tinted-neutral family)."
217
217
  },
218
218
  "color.feedback.warning.dark": {
219
219
  "$type": "color",
220
- "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h)",
220
+ "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1)",
221
221
  "$description": "Solid-background role for a warning state (shared tinted-neutral family)."
222
222
  },
223
223
  "color.feedback.warning.foreground.light": {
224
224
  "$type": "color",
225
- "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h)",
225
+ "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1)",
226
226
  "$description": "Foreground role for warning text and icons."
227
227
  },
228
228
  "color.feedback.warning.foreground.dark": {
229
229
  "$type": "color",
230
- "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h)",
230
+ "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1)",
231
231
  "$description": "Foreground role for warning text and icons."
232
232
  },
233
233
  "color.on-feedback.warning.light": {
234
234
  "$type": "color",
235
- "$value": "oklch(from var(--nave-color-tint) 1 0 h)"
235
+ "$value": "oklch(from var(--nave-color-tint) 1 0 h / 1)"
236
236
  },
237
237
  "color.on-feedback.warning.dark": {
238
238
  "$type": "color",
239
- "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h)"
239
+ "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1)"
240
240
  },
241
241
  "color.feedback.success.light": {
242
242
  "$type": "color",
243
- "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h)",
243
+ "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1)",
244
244
  "$description": "Alias of feedback.warning (shared tinted-neutral family)."
245
245
  },
246
246
  "color.feedback.success.dark": {
247
247
  "$type": "color",
248
- "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h)",
248
+ "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1)",
249
249
  "$description": "Alias of feedback.warning (shared tinted-neutral family)."
250
250
  },
251
251
  "color.feedback.success.foreground.light": {
252
252
  "$type": "color",
253
- "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h)"
253
+ "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1)"
254
254
  },
255
255
  "color.feedback.success.foreground.dark": {
256
256
  "$type": "color",
257
- "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h)"
257
+ "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1)"
258
258
  },
259
259
  "color.on-feedback.success.light": {
260
260
  "$type": "color",
261
- "$value": "oklch(from var(--nave-color-tint) 1 0 h)"
261
+ "$value": "oklch(from var(--nave-color-tint) 1 0 h / 1)"
262
262
  },
263
263
  "color.on-feedback.success.dark": {
264
264
  "$type": "color",
265
- "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h)"
265
+ "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1)"
266
266
  },
267
267
  "color.feedback.info.light": {
268
268
  "$type": "color",
269
- "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h)",
269
+ "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1)",
270
270
  "$description": "Alias of feedback.warning (shared tinted-neutral family)."
271
271
  },
272
272
  "color.feedback.info.dark": {
273
273
  "$type": "color",
274
- "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h)",
274
+ "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1)",
275
275
  "$description": "Alias of feedback.warning (shared tinted-neutral family)."
276
276
  },
277
277
  "color.feedback.info.foreground.light": {
278
278
  "$type": "color",
279
- "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h)"
279
+ "$value": "oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1)"
280
280
  },
281
281
  "color.feedback.info.foreground.dark": {
282
282
  "$type": "color",
283
- "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h)"
283
+ "$value": "oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1)"
284
284
  },
285
285
  "color.on-feedback.info.light": {
286
286
  "$type": "color",
287
- "$value": "oklch(from var(--nave-color-tint) 1 0 h)"
287
+ "$value": "oklch(from var(--nave-color-tint) 1 0 h / 1)"
288
288
  },
289
289
  "color.on-feedback.info.dark": {
290
290
  "$type": "color",
291
- "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h)"
291
+ "$value": "oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1)"
292
292
  }
293
293
  }
package/dist/tokens.css CHANGED
@@ -216,43 +216,43 @@
216
216
  }
217
217
 
218
218
  @property --nave-layer-base {
219
- syntax: '<number>';
219
+ syntax: '<integer>';
220
220
  inherits: true;
221
221
  initial-value: 0;
222
222
  }
223
223
 
224
224
  @property --nave-layer-dropdown {
225
- syntax: '<number>';
225
+ syntax: '<integer>';
226
226
  inherits: true;
227
227
  initial-value: 100;
228
228
  }
229
229
 
230
230
  @property --nave-layer-sticky {
231
- syntax: '<number>';
231
+ syntax: '<integer>';
232
232
  inherits: true;
233
233
  initial-value: 200;
234
234
  }
235
235
 
236
236
  @property --nave-layer-overlay {
237
- syntax: '<number>';
237
+ syntax: '<integer>';
238
238
  inherits: true;
239
239
  initial-value: 300;
240
240
  }
241
241
 
242
242
  @property --nave-layer-modal {
243
- syntax: '<number>';
243
+ syntax: '<integer>';
244
244
  inherits: true;
245
245
  initial-value: 400;
246
246
  }
247
247
 
248
248
  @property --nave-layer-toast {
249
- syntax: '<number>';
249
+ syntax: '<integer>';
250
250
  inherits: true;
251
251
  initial-value: 500;
252
252
  }
253
253
 
254
254
  @property --nave-layer-tooltip {
255
- syntax: '<number>';
255
+ syntax: '<integer>';
256
256
  inherits: true;
257
257
  initial-value: 600;
258
258
  }
@@ -395,39 +395,39 @@
395
395
  color-scheme: light dark;
396
396
  /* Tint seed: Changing this changes everything Nave derives from it. The contrast of the resulting palette follows from what you set, and checking it is yours. */
397
397
  --nave-color-tint: oklch(0.7859 0.1316 186.17);
398
- --nave-color-surface-base: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
399
- --nave-color-surface-raised: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.225 0.0067 h));
400
- --nave-color-surface-overlay: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.27 0.0067 h));
401
- --nave-color-surface-sunken: light-dark(oklch(from var(--nave-color-tint) 0.985 0.0067 h), oklch(from var(--nave-color-tint) 0.12 0.0067 h));
402
- --nave-color-surface-inverse: light-dark(oklch(from var(--nave-color-tint) 0.18 0.0067 h), oklch(from var(--nave-color-tint) 0.965 0.0067 h));
403
- --nave-color-content-primary: light-dark(oklch(from var(--nave-color-tint) 0.18 0.0067 h), oklch(from var(--nave-color-tint) 0.965 0.0067 h));
404
- --nave-color-content-secondary: light-dark(oklch(from var(--nave-color-tint) 0.37 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
405
- --nave-color-content-tertiary: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.72 0.0067 h));
406
- --nave-color-content-disabled: light-dark(oklch(from var(--nave-color-tint) 0.835 0.0067 h), oklch(from var(--nave-color-tint) 0.37 0.0067 h));
407
- --nave-color-content-inverse: light-dark(oklch(from var(--nave-color-tint) 0.965 0.0067 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
398
+ --nave-color-surface-base: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
399
+ --nave-color-surface-raised: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.225 0.0067 h / 1));
400
+ --nave-color-surface-overlay: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.27 0.0067 h / 1));
401
+ --nave-color-surface-sunken: light-dark(oklch(from var(--nave-color-tint) 0.985 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.12 0.0067 h / 1));
402
+ --nave-color-surface-inverse: light-dark(oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1));
403
+ --nave-color-content-primary: light-dark(oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1));
404
+ --nave-color-content-secondary: light-dark(oklch(from var(--nave-color-tint) 0.37 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
405
+ --nave-color-content-tertiary: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.72 0.0067 h / 1));
406
+ --nave-color-content-disabled: light-dark(oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.37 0.0067 h / 1));
407
+ --nave-color-content-inverse: light-dark(oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
408
408
  --nave-color-content-link: light-dark(oklch(0.47 0.0748 186.17), oklch(0.835 0.123 186.17));
409
- --nave-color-border-default: light-dark(oklch(from var(--nave-color-tint) 0.905 0.0067 h), oklch(from var(--nave-color-tint) 0.37 0.0067 h));
410
- --nave-color-border-strong: light-dark(oklch(from var(--nave-color-tint) 0.72 0.0067 h), oklch(from var(--nave-color-tint) 0.47 0.0067 h));
411
- --nave-color-border-control: light-dark(oklch(from var(--nave-color-tint) 0.59 0.0067 h), oklch(from var(--nave-color-tint) 0.59 0.0067 h));
412
- --nave-color-border-disabled: light-dark(oklch(from var(--nave-color-tint) 0.94 0.0067 h), oklch(from var(--nave-color-tint) 0.27 0.0067 h));
409
+ --nave-color-border-default: light-dark(oklch(from var(--nave-color-tint) 0.905 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.37 0.0067 h / 1));
410
+ --nave-color-border-strong: light-dark(oklch(from var(--nave-color-tint) 0.72 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1));
411
+ --nave-color-border-control: light-dark(oklch(from var(--nave-color-tint) 0.59 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.59 0.0067 h / 1));
412
+ --nave-color-border-disabled: light-dark(oklch(from var(--nave-color-tint) 0.94 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.27 0.0067 h / 1));
413
413
  --nave-color-border-focus: light-dark(oklch(0.59 0.0939 186.17), oklch(0.59 0.0939 186.17));
414
414
  --nave-color-action-primary: light-dark(oklch(0.47 0.0748 186.17), oklch(0.835 0.123 186.17));
415
415
  --nave-color-action-primary-hover: light-dark(oklch(0.37 0.0589 186.17), oklch(0.905 0.1106 186.17));
416
416
  --nave-color-action-primary-active: light-dark(oklch(0.27 0.0398 186.17), oklch(0.94 0.0574 186.17));
417
- --nave-color-on-action-primary: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
418
- --nave-color-action-secondary: light-dark(oklch(from var(--nave-color-tint) 0.965 0.0067 h), oklch(from var(--nave-color-tint) 0.27 0.0067 h));
417
+ --nave-color-on-action-primary: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
418
+ --nave-color-action-secondary: light-dark(oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.27 0.0067 h / 1));
419
419
  --nave-color-feedback-danger: light-dark(oklch(0.47 0.1455 15.02), oklch(0.835 0.0661 15.02));
420
420
  --nave-color-feedback-danger-foreground: light-dark(oklch(0.47 0.1455 15.02), oklch(0.835 0.0661 15.02));
421
- --nave-color-on-feedback-danger: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
421
+ --nave-color-on-feedback-danger: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
422
422
  /* Feedback tokens: warning, success and info, and their -foreground variants, resolve to one shared value here; only danger differs. Colour alone therefore cannot tell those three states apart, so wherever a feedback token carries meaning, give it a text label naming the state and a distinct icon or shape that differs per state. */
423
- --nave-color-feedback-warning: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
424
- --nave-color-feedback-warning-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
425
- --nave-color-on-feedback-warning: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
426
- --nave-color-feedback-success: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
427
- --nave-color-feedback-success-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
428
- --nave-color-on-feedback-success: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
429
- --nave-color-feedback-info: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
430
- --nave-color-feedback-info-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h), oklch(from var(--nave-color-tint) 0.835 0.0067 h));
431
- --nave-color-on-feedback-info: light-dark(oklch(from var(--nave-color-tint) 1 0 h), oklch(from var(--nave-color-tint) 0.18 0.0067 h));
423
+ --nave-color-feedback-warning: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
424
+ --nave-color-feedback-warning-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
425
+ --nave-color-on-feedback-warning: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
426
+ --nave-color-feedback-success: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
427
+ --nave-color-feedback-success-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
428
+ --nave-color-on-feedback-success: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
429
+ --nave-color-feedback-info: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
430
+ --nave-color-feedback-info-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
431
+ --nave-color-on-feedback-info: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
432
432
  }
433
433
  }
package/dist/tokens.d.ts CHANGED
@@ -2,8 +2,11 @@
2
2
 
3
3
  /** The DTCG 2025.10 token set as a typed const object (e.g. `--nave-font-size-md`).
4
4
  * Keys are CSS custom property names. The semantic colour layer
5
- * (`--nave-color-*`) ships as CSS custom properties in `dist/tokens.css`
6
- * and is not part of this export.
5
+ * (`--nave-color-*`) ships as CSS custom properties in `dist/tokens.css` and is
6
+ * not part of this object; its property NAMES are typed separately as
7
+ * `ColorPropertyName`, and its VALUES are reachable only through CSS (e.g.
8
+ * `var(--nave-color-action-primary)`): the browser resolves each one for the
9
+ * active colour scheme, and the neutral-derived ones also follow the tint.
7
10
  */
8
11
  export declare const tokens: {
9
12
  '--nave-font-family-base': string
@@ -88,3 +91,44 @@ export declare const tokens: {
88
91
 
89
92
  export declare type TokenName = keyof typeof tokens
90
93
  export declare type TokenValue = typeof tokens[TokenName]
94
+
95
+ /** Every `--nave-color-*` custom property the semantic colour layer emits: names
96
+ * only, no value (see the doc comment above `tokens` for where the values live).
97
+ * Disjoint from `TokenName` — a consumer who wants both writes
98
+ * `TokenName | ColorPropertyName`.
99
+ */
100
+ export declare type ColorPropertyName =
101
+ | '--nave-color-action-primary'
102
+ | '--nave-color-action-primary-active'
103
+ | '--nave-color-action-primary-hover'
104
+ | '--nave-color-action-secondary'
105
+ | '--nave-color-border-control'
106
+ | '--nave-color-border-default'
107
+ | '--nave-color-border-disabled'
108
+ | '--nave-color-border-focus'
109
+ | '--nave-color-border-strong'
110
+ | '--nave-color-content-disabled'
111
+ | '--nave-color-content-inverse'
112
+ | '--nave-color-content-link'
113
+ | '--nave-color-content-primary'
114
+ | '--nave-color-content-secondary'
115
+ | '--nave-color-content-tertiary'
116
+ | '--nave-color-feedback-danger'
117
+ | '--nave-color-feedback-danger-foreground'
118
+ | '--nave-color-feedback-info'
119
+ | '--nave-color-feedback-info-foreground'
120
+ | '--nave-color-feedback-success'
121
+ | '--nave-color-feedback-success-foreground'
122
+ | '--nave-color-feedback-warning'
123
+ | '--nave-color-feedback-warning-foreground'
124
+ | '--nave-color-on-action-primary'
125
+ | '--nave-color-on-feedback-danger'
126
+ | '--nave-color-on-feedback-info'
127
+ | '--nave-color-on-feedback-success'
128
+ | '--nave-color-on-feedback-warning'
129
+ | '--nave-color-surface-base'
130
+ | '--nave-color-surface-inverse'
131
+ | '--nave-color-surface-overlay'
132
+ | '--nave-color-surface-raised'
133
+ | '--nave-color-surface-sunken'
134
+ | '--nave-color-tint'
package/dist/tokens.js CHANGED
@@ -3,8 +3,11 @@
3
3
 
4
4
  /** The DTCG 2025.10 token set as a typed const object (e.g. `--nave-font-size-md`).
5
5
  * Keys are CSS custom property names. The semantic colour layer
6
- * (`--nave-color-*`) ships as CSS custom properties in `dist/tokens.css`
7
- * and is not part of this export.
6
+ * (`--nave-color-*`) ships as CSS custom properties in `dist/tokens.css` and is
7
+ * not part of this object; its property NAMES are typed separately as
8
+ * `ColorPropertyName`, and its VALUES are reachable only through CSS (e.g.
9
+ * `var(--nave-color-action-primary)`): the browser resolves each one for the
10
+ * active colour scheme, and the neutral-derived ones also follow the tint.
8
11
  */
9
12
  export const tokens = {
10
13
  '--nave-font-family-base': "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navecss/tokens",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "DTCG 2025.10 design tokens for Nave: seed-derived semantic colours, typography, spacing, and the rest of the token layer, built by a first-party DTCG 2025.10 reader.",
5
5
  "keywords": [
6
6
  "css",
@@ -53,7 +53,7 @@
53
53
  "devDependencies": {
54
54
  "@types/node": "^26.6.2",
55
55
  "@vitest/coverage-v8": "5.0.1",
56
- "prettier": "3.9.8",
56
+ "prettier": "3.9.9",
57
57
  "typescript": "6.0.3",
58
58
  "vitest": "5.0.1"
59
59
  },