@design-token-kit/core 0.2.0 → 0.3.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.
- package/LICENSE +159 -159
- package/README.md +57 -57
- package/lib/index.d.ts +132 -17
- package/lib/index.js +724 -624
- package/lib/schemas/2025.10/format/group.json +55 -55
- package/lib/schemas/2025.10/format/groupOrToken.json +15 -15
- package/lib/schemas/2025.10/format/token.json +425 -425
- package/lib/schemas/2025.10/format/tokenType.json +23 -23
- package/lib/schemas/2025.10/format/values/border.json +45 -45
- package/lib/schemas/2025.10/format/values/color.json +515 -515
- package/lib/schemas/2025.10/format/values/cubicBezier.json +57 -57
- package/lib/schemas/2025.10/format/values/dimension.json +35 -35
- package/lib/schemas/2025.10/format/values/duration.json +35 -35
- package/lib/schemas/2025.10/format/values/fontFamily.json +34 -34
- package/lib/schemas/2025.10/format/values/fontWeight.json +39 -39
- package/lib/schemas/2025.10/format/values/gradient.json +53 -53
- package/lib/schemas/2025.10/format/values/number.json +8 -8
- package/lib/schemas/2025.10/format/values/shadow.json +103 -103
- package/lib/schemas/2025.10/format/values/strokeStyle.json +64 -64
- package/lib/schemas/2025.10/format/values/transition.json +45 -45
- package/lib/schemas/2025.10/format/values/typography.json +73 -73
- package/lib/schemas/2025.10/format.json +106 -106
- package/lib/schemas/2025.10/resolver/modifier.json +85 -85
- package/lib/schemas/2025.10/resolver/resolutionOrder.json +117 -117
- package/lib/schemas/2025.10/resolver/set.json +71 -71
- package/lib/schemas/2025.10/resolver.json +62 -62
- package/lib/schemas/hrdt-tokens.json +533 -533
- package/package.json +3 -2
|
@@ -1,515 +1,515 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
-
"$id": "https://www.designtokens.org/schemas/2025.10/format/values/color.json",
|
|
4
|
-
"title": "Color Value",
|
|
5
|
-
"description": "Value schema for color type tokens. Represents a color in a specific color space.",
|
|
6
|
-
"type": "object",
|
|
7
|
-
"properties": {
|
|
8
|
-
"colorSpace": {
|
|
9
|
-
"description": "The color space or color model used to represent the color",
|
|
10
|
-
"oneOf": [
|
|
11
|
-
{
|
|
12
|
-
"type": "string",
|
|
13
|
-
"enum": [
|
|
14
|
-
"srgb",
|
|
15
|
-
"srgb-linear",
|
|
16
|
-
"hsl",
|
|
17
|
-
"hwb",
|
|
18
|
-
"lab",
|
|
19
|
-
"lch",
|
|
20
|
-
"oklab",
|
|
21
|
-
"oklch",
|
|
22
|
-
"display-p3",
|
|
23
|
-
"a98-rgb",
|
|
24
|
-
"prophoto-rgb",
|
|
25
|
-
"rec2020",
|
|
26
|
-
"xyz-d65",
|
|
27
|
-
"xyz-d50"
|
|
28
|
-
]
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
32
|
-
}
|
|
33
|
-
]
|
|
34
|
-
},
|
|
35
|
-
"components": {
|
|
36
|
-
"description": "Array of color components. The number and meaning of components depend on the color space. Each component can be a number or the 'none' keyword.",
|
|
37
|
-
"oneOf": [
|
|
38
|
-
{
|
|
39
|
-
"type": "array"
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
43
|
-
}
|
|
44
|
-
]
|
|
45
|
-
},
|
|
46
|
-
"alpha": {
|
|
47
|
-
"description": "The alpha (transparency) value of the color. 0 is fully transparent, 1 is fully opaque. If omitted, defaults to 1.",
|
|
48
|
-
"oneOf": [
|
|
49
|
-
{
|
|
50
|
-
"type": "number",
|
|
51
|
-
"minimum": 0,
|
|
52
|
-
"maximum": 1
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
56
|
-
}
|
|
57
|
-
]
|
|
58
|
-
},
|
|
59
|
-
"hex": {
|
|
60
|
-
"description": "Optional fallback value in 6-digit CSS hex color notation (e.g., '#ff00ff'). Must be 6 digits to avoid conflicts with the alpha value.",
|
|
61
|
-
"$comment": "Only JSON Pointer references (not curly brace references) are allowed for hex because no string token type exists in the specification that could be referenced with curly braces.",
|
|
62
|
-
"oneOf": [
|
|
63
|
-
{
|
|
64
|
-
"type": "string",
|
|
65
|
-
"pattern": "^#[0-9a-fA-F]{6}$"
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
69
|
-
}
|
|
70
|
-
]
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
"required": ["colorSpace", "components"],
|
|
74
|
-
"additionalProperties": false,
|
|
75
|
-
"definitions": {
|
|
76
|
-
"zeroToOneComponent": {
|
|
77
|
-
"title": "Zero to One Component",
|
|
78
|
-
"description": "A color component normalized to the range [0-1] (e.g., RGB values, XYZ values)",
|
|
79
|
-
"oneOf": [
|
|
80
|
-
{
|
|
81
|
-
"type": "number",
|
|
82
|
-
"minimum": 0,
|
|
83
|
-
"maximum": 1
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
"type": "string",
|
|
87
|
-
"const": "none"
|
|
88
|
-
},
|
|
89
|
-
{
|
|
90
|
-
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
91
|
-
}
|
|
92
|
-
]
|
|
93
|
-
},
|
|
94
|
-
"hueComponent": {
|
|
95
|
-
"title": "Hue Component",
|
|
96
|
-
"description": "Hue angle from 0 up to (but not including) 360 degrees",
|
|
97
|
-
"oneOf": [
|
|
98
|
-
{
|
|
99
|
-
"type": "number",
|
|
100
|
-
"minimum": 0,
|
|
101
|
-
"exclusiveMaximum": 360
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
"type": "string",
|
|
105
|
-
"const": "none"
|
|
106
|
-
},
|
|
107
|
-
{
|
|
108
|
-
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
109
|
-
}
|
|
110
|
-
]
|
|
111
|
-
},
|
|
112
|
-
"percentageComponent": {
|
|
113
|
-
"title": "Percentage Component",
|
|
114
|
-
"description": "Percentage value from 0 to 100",
|
|
115
|
-
"oneOf": [
|
|
116
|
-
{
|
|
117
|
-
"type": "number",
|
|
118
|
-
"minimum": 0,
|
|
119
|
-
"maximum": 100
|
|
120
|
-
},
|
|
121
|
-
{
|
|
122
|
-
"type": "string",
|
|
123
|
-
"const": "none"
|
|
124
|
-
},
|
|
125
|
-
{
|
|
126
|
-
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
127
|
-
}
|
|
128
|
-
]
|
|
129
|
-
},
|
|
130
|
-
"chromaComponent": {
|
|
131
|
-
"title": "Chroma Component",
|
|
132
|
-
"description": "Chroma value from 0 to infinity",
|
|
133
|
-
"oneOf": [
|
|
134
|
-
{
|
|
135
|
-
"type": "number",
|
|
136
|
-
"minimum": 0
|
|
137
|
-
},
|
|
138
|
-
{
|
|
139
|
-
"type": "string",
|
|
140
|
-
"const": "none"
|
|
141
|
-
},
|
|
142
|
-
{
|
|
143
|
-
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
144
|
-
}
|
|
145
|
-
]
|
|
146
|
-
},
|
|
147
|
-
"unboundedComponent": {
|
|
148
|
-
"title": "Unbounded Component",
|
|
149
|
-
"description": "A color component with no numeric bounds (e.g., A and B in LAB/OKLAB color spaces)",
|
|
150
|
-
"oneOf": [
|
|
151
|
-
{
|
|
152
|
-
"type": "number"
|
|
153
|
-
},
|
|
154
|
-
{
|
|
155
|
-
"type": "string",
|
|
156
|
-
"const": "none"
|
|
157
|
-
},
|
|
158
|
-
{
|
|
159
|
-
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
160
|
-
}
|
|
161
|
-
]
|
|
162
|
-
},
|
|
163
|
-
"rgbComponents": {
|
|
164
|
-
"title": "RGB Components",
|
|
165
|
-
"description": "Array of RGB color components [Red, Green, Blue], each normalized to the range [0-1]",
|
|
166
|
-
"type": "array",
|
|
167
|
-
"minItems": 3,
|
|
168
|
-
"maxItems": 3,
|
|
169
|
-
"items": [
|
|
170
|
-
{
|
|
171
|
-
"description": "Red: A number between 0 and 1 representing the red component of the color",
|
|
172
|
-
"$ref": "#/definitions/zeroToOneComponent"
|
|
173
|
-
},
|
|
174
|
-
{
|
|
175
|
-
"description": "Green: A number between 0 and 1 representing the green component of the color",
|
|
176
|
-
"$ref": "#/definitions/zeroToOneComponent"
|
|
177
|
-
},
|
|
178
|
-
{
|
|
179
|
-
"description": "Blue: A number between 0 and 1 representing the blue component of the color",
|
|
180
|
-
"$ref": "#/definitions/zeroToOneComponent"
|
|
181
|
-
}
|
|
182
|
-
]
|
|
183
|
-
},
|
|
184
|
-
"xyzComponents": {
|
|
185
|
-
"title": "XYZ Components",
|
|
186
|
-
"description": "Array of XYZ color components [X, Y, Z], each normalized to the range [0-1]",
|
|
187
|
-
"type": "array",
|
|
188
|
-
"minItems": 3,
|
|
189
|
-
"maxItems": 3,
|
|
190
|
-
"items": [
|
|
191
|
-
{
|
|
192
|
-
"description": "X: A number between 0 and 1 representing the X component of the color",
|
|
193
|
-
"$ref": "#/definitions/zeroToOneComponent"
|
|
194
|
-
},
|
|
195
|
-
{
|
|
196
|
-
"description": "Y: A number between 0 and 1 representing the Y component of the color",
|
|
197
|
-
"$ref": "#/definitions/zeroToOneComponent"
|
|
198
|
-
},
|
|
199
|
-
{
|
|
200
|
-
"description": "Z: A number between 0 and 1 representing the Z component of the color",
|
|
201
|
-
"$ref": "#/definitions/zeroToOneComponent"
|
|
202
|
-
}
|
|
203
|
-
]
|
|
204
|
-
}
|
|
205
|
-
},
|
|
206
|
-
"allOf": [
|
|
207
|
-
{
|
|
208
|
-
"if": {
|
|
209
|
-
"properties": {
|
|
210
|
-
"colorSpace": { "const": "srgb" },
|
|
211
|
-
"components": { "type": "array" }
|
|
212
|
-
}
|
|
213
|
-
},
|
|
214
|
-
"then": {
|
|
215
|
-
"properties": {
|
|
216
|
-
"components": {
|
|
217
|
-
"$ref": "#/definitions/rgbComponents"
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
},
|
|
222
|
-
{
|
|
223
|
-
"if": {
|
|
224
|
-
"properties": {
|
|
225
|
-
"colorSpace": { "const": "srgb-linear" },
|
|
226
|
-
"components": { "type": "array" }
|
|
227
|
-
}
|
|
228
|
-
},
|
|
229
|
-
"then": {
|
|
230
|
-
"properties": {
|
|
231
|
-
"components": {
|
|
232
|
-
"$ref": "#/definitions/rgbComponents"
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
}
|
|
236
|
-
},
|
|
237
|
-
{
|
|
238
|
-
"if": {
|
|
239
|
-
"properties": {
|
|
240
|
-
"colorSpace": { "const": "display-p3" },
|
|
241
|
-
"components": { "type": "array" }
|
|
242
|
-
}
|
|
243
|
-
},
|
|
244
|
-
"then": {
|
|
245
|
-
"properties": {
|
|
246
|
-
"components": {
|
|
247
|
-
"$ref": "#/definitions/rgbComponents"
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
},
|
|
252
|
-
{
|
|
253
|
-
"if": {
|
|
254
|
-
"properties": {
|
|
255
|
-
"colorSpace": { "const": "a98-rgb" },
|
|
256
|
-
"components": { "type": "array" }
|
|
257
|
-
}
|
|
258
|
-
},
|
|
259
|
-
"then": {
|
|
260
|
-
"properties": {
|
|
261
|
-
"components": {
|
|
262
|
-
"$ref": "#/definitions/rgbComponents"
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
},
|
|
267
|
-
{
|
|
268
|
-
"if": {
|
|
269
|
-
"properties": {
|
|
270
|
-
"colorSpace": { "const": "prophoto-rgb" },
|
|
271
|
-
"components": { "type": "array" }
|
|
272
|
-
}
|
|
273
|
-
},
|
|
274
|
-
"then": {
|
|
275
|
-
"properties": {
|
|
276
|
-
"components": {
|
|
277
|
-
"$ref": "#/definitions/rgbComponents"
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
},
|
|
282
|
-
{
|
|
283
|
-
"if": {
|
|
284
|
-
"properties": {
|
|
285
|
-
"colorSpace": { "const": "rec2020" },
|
|
286
|
-
"components": { "type": "array" }
|
|
287
|
-
}
|
|
288
|
-
},
|
|
289
|
-
"then": {
|
|
290
|
-
"properties": {
|
|
291
|
-
"components": {
|
|
292
|
-
"$ref": "#/definitions/rgbComponents"
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
}
|
|
296
|
-
},
|
|
297
|
-
{
|
|
298
|
-
"if": {
|
|
299
|
-
"properties": {
|
|
300
|
-
"colorSpace": { "const": "xyz-d65" },
|
|
301
|
-
"components": { "type": "array" }
|
|
302
|
-
}
|
|
303
|
-
},
|
|
304
|
-
"then": {
|
|
305
|
-
"properties": {
|
|
306
|
-
"components": {
|
|
307
|
-
"$ref": "#/definitions/xyzComponents"
|
|
308
|
-
}
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
},
|
|
312
|
-
{
|
|
313
|
-
"if": {
|
|
314
|
-
"properties": {
|
|
315
|
-
"colorSpace": { "const": "xyz-d50" },
|
|
316
|
-
"components": { "type": "array" }
|
|
317
|
-
}
|
|
318
|
-
},
|
|
319
|
-
"then": {
|
|
320
|
-
"properties": {
|
|
321
|
-
"components": {
|
|
322
|
-
"$ref": "#/definitions/xyzComponents"
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
},
|
|
327
|
-
{
|
|
328
|
-
"if": {
|
|
329
|
-
"properties": {
|
|
330
|
-
"colorSpace": { "const": "hsl" },
|
|
331
|
-
"components": { "type": "array" }
|
|
332
|
-
}
|
|
333
|
-
},
|
|
334
|
-
"then": {
|
|
335
|
-
"properties": {
|
|
336
|
-
"components": {
|
|
337
|
-
"type": "array",
|
|
338
|
-
"minItems": 3,
|
|
339
|
-
"maxItems": 3,
|
|
340
|
-
"items": [
|
|
341
|
-
{
|
|
342
|
-
"description": "Hue: A number from 0 up to (but not including) 360 representing the hue angle of the color on the color wheel",
|
|
343
|
-
"$ref": "#/definitions/hueComponent"
|
|
344
|
-
},
|
|
345
|
-
{
|
|
346
|
-
"description": "Saturation: A number between 0 and 100 representing the percentage of color saturation",
|
|
347
|
-
"$ref": "#/definitions/percentageComponent"
|
|
348
|
-
},
|
|
349
|
-
{
|
|
350
|
-
"description": "Lightness: A number between 0 and 100 representing the percentage of lightness",
|
|
351
|
-
"$ref": "#/definitions/percentageComponent"
|
|
352
|
-
}
|
|
353
|
-
]
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
|
-
},
|
|
358
|
-
{
|
|
359
|
-
"if": {
|
|
360
|
-
"properties": {
|
|
361
|
-
"colorSpace": { "const": "hwb" },
|
|
362
|
-
"components": { "type": "array" }
|
|
363
|
-
}
|
|
364
|
-
},
|
|
365
|
-
"then": {
|
|
366
|
-
"properties": {
|
|
367
|
-
"components": {
|
|
368
|
-
"type": "array",
|
|
369
|
-
"minItems": 3,
|
|
370
|
-
"maxItems": 3,
|
|
371
|
-
"items": [
|
|
372
|
-
{
|
|
373
|
-
"description": "Hue: A number from 0 up to (but not including) 360 representing the angle of the color on the color wheel",
|
|
374
|
-
"$ref": "#/definitions/hueComponent"
|
|
375
|
-
},
|
|
376
|
-
{
|
|
377
|
-
"description": "Whiteness: A number between 0 and 100 representing the percentage of white in the color",
|
|
378
|
-
"$ref": "#/definitions/percentageComponent"
|
|
379
|
-
},
|
|
380
|
-
{
|
|
381
|
-
"description": "Blackness: A number between 0 and 100 representing the percentage of black in the color",
|
|
382
|
-
"$ref": "#/definitions/percentageComponent"
|
|
383
|
-
}
|
|
384
|
-
]
|
|
385
|
-
}
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
},
|
|
389
|
-
{
|
|
390
|
-
"if": {
|
|
391
|
-
"properties": {
|
|
392
|
-
"colorSpace": { "const": "lab" },
|
|
393
|
-
"components": { "type": "array" }
|
|
394
|
-
}
|
|
395
|
-
},
|
|
396
|
-
"then": {
|
|
397
|
-
"properties": {
|
|
398
|
-
"components": {
|
|
399
|
-
"type": "array",
|
|
400
|
-
"minItems": 3,
|
|
401
|
-
"maxItems": 3,
|
|
402
|
-
"items": [
|
|
403
|
-
{
|
|
404
|
-
"description": "Lightness: A number between 0 and 100 representing the percentage of lightness of the color",
|
|
405
|
-
"$ref": "#/definitions/percentageComponent"
|
|
406
|
-
},
|
|
407
|
-
{
|
|
408
|
-
"description": "A: A signed number representing the green-red axis of the color. Unbounded but in practice doesn't exceed -160 to 160",
|
|
409
|
-
"$ref": "#/definitions/unboundedComponent"
|
|
410
|
-
},
|
|
411
|
-
{
|
|
412
|
-
"description": "B: A signed number representing the blue-yellow axis of the color. Unbounded but in practice doesn't exceed -160 to 160",
|
|
413
|
-
"$ref": "#/definitions/unboundedComponent"
|
|
414
|
-
}
|
|
415
|
-
]
|
|
416
|
-
}
|
|
417
|
-
}
|
|
418
|
-
}
|
|
419
|
-
},
|
|
420
|
-
{
|
|
421
|
-
"if": {
|
|
422
|
-
"properties": {
|
|
423
|
-
"colorSpace": { "const": "lch" },
|
|
424
|
-
"components": { "type": "array" }
|
|
425
|
-
}
|
|
426
|
-
},
|
|
427
|
-
"then": {
|
|
428
|
-
"properties": {
|
|
429
|
-
"components": {
|
|
430
|
-
"type": "array",
|
|
431
|
-
"minItems": 3,
|
|
432
|
-
"maxItems": 3,
|
|
433
|
-
"items": [
|
|
434
|
-
{
|
|
435
|
-
"description": "Lightness: A number between 0 and 100 representing the percentage of lightness of the color",
|
|
436
|
-
"$ref": "#/definitions/percentageComponent"
|
|
437
|
-
},
|
|
438
|
-
{
|
|
439
|
-
"description": "Chroma: A number representing the chroma of the color. Unbounded but in practice doesn't exceed 230",
|
|
440
|
-
"$ref": "#/definitions/chromaComponent"
|
|
441
|
-
},
|
|
442
|
-
{
|
|
443
|
-
"description": "Hue: A number from 0 up to (but not including) 360 representing the angle of the color on the color wheel",
|
|
444
|
-
"$ref": "#/definitions/hueComponent"
|
|
445
|
-
}
|
|
446
|
-
]
|
|
447
|
-
}
|
|
448
|
-
}
|
|
449
|
-
}
|
|
450
|
-
},
|
|
451
|
-
{
|
|
452
|
-
"if": {
|
|
453
|
-
"properties": {
|
|
454
|
-
"colorSpace": { "const": "oklab" },
|
|
455
|
-
"components": { "type": "array" }
|
|
456
|
-
}
|
|
457
|
-
},
|
|
458
|
-
"then": {
|
|
459
|
-
"properties": {
|
|
460
|
-
"components": {
|
|
461
|
-
"type": "array",
|
|
462
|
-
"minItems": 3,
|
|
463
|
-
"maxItems": 3,
|
|
464
|
-
"items": [
|
|
465
|
-
{
|
|
466
|
-
"description": "Lightness: A number between 0 and 1 representing the lightness of the color",
|
|
467
|
-
"$ref": "#/definitions/zeroToOneComponent"
|
|
468
|
-
},
|
|
469
|
-
{
|
|
470
|
-
"description": "A: A signed number representing the green-red axis of the color. Unbounded but in practice doesn't exceed -0.5 to 0.5",
|
|
471
|
-
"$ref": "#/definitions/unboundedComponent"
|
|
472
|
-
},
|
|
473
|
-
{
|
|
474
|
-
"description": "B: A signed number representing the blue-yellow axis of the color. Unbounded but in practice doesn't exceed -0.5 to 0.5",
|
|
475
|
-
"$ref": "#/definitions/unboundedComponent"
|
|
476
|
-
}
|
|
477
|
-
]
|
|
478
|
-
}
|
|
479
|
-
}
|
|
480
|
-
}
|
|
481
|
-
},
|
|
482
|
-
{
|
|
483
|
-
"if": {
|
|
484
|
-
"properties": {
|
|
485
|
-
"colorSpace": { "const": "oklch" },
|
|
486
|
-
"components": { "type": "array" }
|
|
487
|
-
}
|
|
488
|
-
},
|
|
489
|
-
"then": {
|
|
490
|
-
"properties": {
|
|
491
|
-
"components": {
|
|
492
|
-
"type": "array",
|
|
493
|
-
"minItems": 3,
|
|
494
|
-
"maxItems": 3,
|
|
495
|
-
"items": [
|
|
496
|
-
{
|
|
497
|
-
"description": "Lightness: A number between 0 and 1 representing the lightness of the color",
|
|
498
|
-
"$ref": "#/definitions/zeroToOneComponent"
|
|
499
|
-
},
|
|
500
|
-
{
|
|
501
|
-
"description": "Chroma: A number representing the chroma of the color. Unbounded but in practice doesn't exceed 0.5",
|
|
502
|
-
"$ref": "#/definitions/chromaComponent"
|
|
503
|
-
},
|
|
504
|
-
{
|
|
505
|
-
"description": "Hue: A number from 0 up to (but not including) 360 representing the angle of the color on the color wheel",
|
|
506
|
-
"$ref": "#/definitions/hueComponent"
|
|
507
|
-
}
|
|
508
|
-
]
|
|
509
|
-
}
|
|
510
|
-
}
|
|
511
|
-
}
|
|
512
|
-
}
|
|
513
|
-
]
|
|
514
|
-
}
|
|
515
|
-
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "https://www.designtokens.org/schemas/2025.10/format/values/color.json",
|
|
4
|
+
"title": "Color Value",
|
|
5
|
+
"description": "Value schema for color type tokens. Represents a color in a specific color space.",
|
|
6
|
+
"type": "object",
|
|
7
|
+
"properties": {
|
|
8
|
+
"colorSpace": {
|
|
9
|
+
"description": "The color space or color model used to represent the color",
|
|
10
|
+
"oneOf": [
|
|
11
|
+
{
|
|
12
|
+
"type": "string",
|
|
13
|
+
"enum": [
|
|
14
|
+
"srgb",
|
|
15
|
+
"srgb-linear",
|
|
16
|
+
"hsl",
|
|
17
|
+
"hwb",
|
|
18
|
+
"lab",
|
|
19
|
+
"lch",
|
|
20
|
+
"oklab",
|
|
21
|
+
"oklch",
|
|
22
|
+
"display-p3",
|
|
23
|
+
"a98-rgb",
|
|
24
|
+
"prophoto-rgb",
|
|
25
|
+
"rec2020",
|
|
26
|
+
"xyz-d65",
|
|
27
|
+
"xyz-d50"
|
|
28
|
+
]
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
32
|
+
}
|
|
33
|
+
]
|
|
34
|
+
},
|
|
35
|
+
"components": {
|
|
36
|
+
"description": "Array of color components. The number and meaning of components depend on the color space. Each component can be a number or the 'none' keyword.",
|
|
37
|
+
"oneOf": [
|
|
38
|
+
{
|
|
39
|
+
"type": "array"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
43
|
+
}
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
"alpha": {
|
|
47
|
+
"description": "The alpha (transparency) value of the color. 0 is fully transparent, 1 is fully opaque. If omitted, defaults to 1.",
|
|
48
|
+
"oneOf": [
|
|
49
|
+
{
|
|
50
|
+
"type": "number",
|
|
51
|
+
"minimum": 0,
|
|
52
|
+
"maximum": 1
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
|
+
},
|
|
59
|
+
"hex": {
|
|
60
|
+
"description": "Optional fallback value in 6-digit CSS hex color notation (e.g., '#ff00ff'). Must be 6 digits to avoid conflicts with the alpha value.",
|
|
61
|
+
"$comment": "Only JSON Pointer references (not curly brace references) are allowed for hex because no string token type exists in the specification that could be referenced with curly braces.",
|
|
62
|
+
"oneOf": [
|
|
63
|
+
{
|
|
64
|
+
"type": "string",
|
|
65
|
+
"pattern": "^#[0-9a-fA-F]{6}$"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
69
|
+
}
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
"required": ["colorSpace", "components"],
|
|
74
|
+
"additionalProperties": false,
|
|
75
|
+
"definitions": {
|
|
76
|
+
"zeroToOneComponent": {
|
|
77
|
+
"title": "Zero to One Component",
|
|
78
|
+
"description": "A color component normalized to the range [0-1] (e.g., RGB values, XYZ values)",
|
|
79
|
+
"oneOf": [
|
|
80
|
+
{
|
|
81
|
+
"type": "number",
|
|
82
|
+
"minimum": 0,
|
|
83
|
+
"maximum": 1
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"type": "string",
|
|
87
|
+
"const": "none"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
91
|
+
}
|
|
92
|
+
]
|
|
93
|
+
},
|
|
94
|
+
"hueComponent": {
|
|
95
|
+
"title": "Hue Component",
|
|
96
|
+
"description": "Hue angle from 0 up to (but not including) 360 degrees",
|
|
97
|
+
"oneOf": [
|
|
98
|
+
{
|
|
99
|
+
"type": "number",
|
|
100
|
+
"minimum": 0,
|
|
101
|
+
"exclusiveMaximum": 360
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"type": "string",
|
|
105
|
+
"const": "none"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
109
|
+
}
|
|
110
|
+
]
|
|
111
|
+
},
|
|
112
|
+
"percentageComponent": {
|
|
113
|
+
"title": "Percentage Component",
|
|
114
|
+
"description": "Percentage value from 0 to 100",
|
|
115
|
+
"oneOf": [
|
|
116
|
+
{
|
|
117
|
+
"type": "number",
|
|
118
|
+
"minimum": 0,
|
|
119
|
+
"maximum": 100
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"type": "string",
|
|
123
|
+
"const": "none"
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
"chromaComponent": {
|
|
131
|
+
"title": "Chroma Component",
|
|
132
|
+
"description": "Chroma value from 0 to infinity",
|
|
133
|
+
"oneOf": [
|
|
134
|
+
{
|
|
135
|
+
"type": "number",
|
|
136
|
+
"minimum": 0
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"type": "string",
|
|
140
|
+
"const": "none"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
144
|
+
}
|
|
145
|
+
]
|
|
146
|
+
},
|
|
147
|
+
"unboundedComponent": {
|
|
148
|
+
"title": "Unbounded Component",
|
|
149
|
+
"description": "A color component with no numeric bounds (e.g., A and B in LAB/OKLAB color spaces)",
|
|
150
|
+
"oneOf": [
|
|
151
|
+
{
|
|
152
|
+
"type": "number"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"type": "string",
|
|
156
|
+
"const": "none"
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"$ref": "../../format.json#/definitions/jsonPointerReferenceObject"
|
|
160
|
+
}
|
|
161
|
+
]
|
|
162
|
+
},
|
|
163
|
+
"rgbComponents": {
|
|
164
|
+
"title": "RGB Components",
|
|
165
|
+
"description": "Array of RGB color components [Red, Green, Blue], each normalized to the range [0-1]",
|
|
166
|
+
"type": "array",
|
|
167
|
+
"minItems": 3,
|
|
168
|
+
"maxItems": 3,
|
|
169
|
+
"items": [
|
|
170
|
+
{
|
|
171
|
+
"description": "Red: A number between 0 and 1 representing the red component of the color",
|
|
172
|
+
"$ref": "#/definitions/zeroToOneComponent"
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"description": "Green: A number between 0 and 1 representing the green component of the color",
|
|
176
|
+
"$ref": "#/definitions/zeroToOneComponent"
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"description": "Blue: A number between 0 and 1 representing the blue component of the color",
|
|
180
|
+
"$ref": "#/definitions/zeroToOneComponent"
|
|
181
|
+
}
|
|
182
|
+
]
|
|
183
|
+
},
|
|
184
|
+
"xyzComponents": {
|
|
185
|
+
"title": "XYZ Components",
|
|
186
|
+
"description": "Array of XYZ color components [X, Y, Z], each normalized to the range [0-1]",
|
|
187
|
+
"type": "array",
|
|
188
|
+
"minItems": 3,
|
|
189
|
+
"maxItems": 3,
|
|
190
|
+
"items": [
|
|
191
|
+
{
|
|
192
|
+
"description": "X: A number between 0 and 1 representing the X component of the color",
|
|
193
|
+
"$ref": "#/definitions/zeroToOneComponent"
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"description": "Y: A number between 0 and 1 representing the Y component of the color",
|
|
197
|
+
"$ref": "#/definitions/zeroToOneComponent"
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
"description": "Z: A number between 0 and 1 representing the Z component of the color",
|
|
201
|
+
"$ref": "#/definitions/zeroToOneComponent"
|
|
202
|
+
}
|
|
203
|
+
]
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
"allOf": [
|
|
207
|
+
{
|
|
208
|
+
"if": {
|
|
209
|
+
"properties": {
|
|
210
|
+
"colorSpace": { "const": "srgb" },
|
|
211
|
+
"components": { "type": "array" }
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
"then": {
|
|
215
|
+
"properties": {
|
|
216
|
+
"components": {
|
|
217
|
+
"$ref": "#/definitions/rgbComponents"
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"if": {
|
|
224
|
+
"properties": {
|
|
225
|
+
"colorSpace": { "const": "srgb-linear" },
|
|
226
|
+
"components": { "type": "array" }
|
|
227
|
+
}
|
|
228
|
+
},
|
|
229
|
+
"then": {
|
|
230
|
+
"properties": {
|
|
231
|
+
"components": {
|
|
232
|
+
"$ref": "#/definitions/rgbComponents"
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"if": {
|
|
239
|
+
"properties": {
|
|
240
|
+
"colorSpace": { "const": "display-p3" },
|
|
241
|
+
"components": { "type": "array" }
|
|
242
|
+
}
|
|
243
|
+
},
|
|
244
|
+
"then": {
|
|
245
|
+
"properties": {
|
|
246
|
+
"components": {
|
|
247
|
+
"$ref": "#/definitions/rgbComponents"
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
},
|
|
252
|
+
{
|
|
253
|
+
"if": {
|
|
254
|
+
"properties": {
|
|
255
|
+
"colorSpace": { "const": "a98-rgb" },
|
|
256
|
+
"components": { "type": "array" }
|
|
257
|
+
}
|
|
258
|
+
},
|
|
259
|
+
"then": {
|
|
260
|
+
"properties": {
|
|
261
|
+
"components": {
|
|
262
|
+
"$ref": "#/definitions/rgbComponents"
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"if": {
|
|
269
|
+
"properties": {
|
|
270
|
+
"colorSpace": { "const": "prophoto-rgb" },
|
|
271
|
+
"components": { "type": "array" }
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
"then": {
|
|
275
|
+
"properties": {
|
|
276
|
+
"components": {
|
|
277
|
+
"$ref": "#/definitions/rgbComponents"
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
},
|
|
282
|
+
{
|
|
283
|
+
"if": {
|
|
284
|
+
"properties": {
|
|
285
|
+
"colorSpace": { "const": "rec2020" },
|
|
286
|
+
"components": { "type": "array" }
|
|
287
|
+
}
|
|
288
|
+
},
|
|
289
|
+
"then": {
|
|
290
|
+
"properties": {
|
|
291
|
+
"components": {
|
|
292
|
+
"$ref": "#/definitions/rgbComponents"
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
"if": {
|
|
299
|
+
"properties": {
|
|
300
|
+
"colorSpace": { "const": "xyz-d65" },
|
|
301
|
+
"components": { "type": "array" }
|
|
302
|
+
}
|
|
303
|
+
},
|
|
304
|
+
"then": {
|
|
305
|
+
"properties": {
|
|
306
|
+
"components": {
|
|
307
|
+
"$ref": "#/definitions/xyzComponents"
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
},
|
|
312
|
+
{
|
|
313
|
+
"if": {
|
|
314
|
+
"properties": {
|
|
315
|
+
"colorSpace": { "const": "xyz-d50" },
|
|
316
|
+
"components": { "type": "array" }
|
|
317
|
+
}
|
|
318
|
+
},
|
|
319
|
+
"then": {
|
|
320
|
+
"properties": {
|
|
321
|
+
"components": {
|
|
322
|
+
"$ref": "#/definitions/xyzComponents"
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"if": {
|
|
329
|
+
"properties": {
|
|
330
|
+
"colorSpace": { "const": "hsl" },
|
|
331
|
+
"components": { "type": "array" }
|
|
332
|
+
}
|
|
333
|
+
},
|
|
334
|
+
"then": {
|
|
335
|
+
"properties": {
|
|
336
|
+
"components": {
|
|
337
|
+
"type": "array",
|
|
338
|
+
"minItems": 3,
|
|
339
|
+
"maxItems": 3,
|
|
340
|
+
"items": [
|
|
341
|
+
{
|
|
342
|
+
"description": "Hue: A number from 0 up to (but not including) 360 representing the hue angle of the color on the color wheel",
|
|
343
|
+
"$ref": "#/definitions/hueComponent"
|
|
344
|
+
},
|
|
345
|
+
{
|
|
346
|
+
"description": "Saturation: A number between 0 and 100 representing the percentage of color saturation",
|
|
347
|
+
"$ref": "#/definitions/percentageComponent"
|
|
348
|
+
},
|
|
349
|
+
{
|
|
350
|
+
"description": "Lightness: A number between 0 and 100 representing the percentage of lightness",
|
|
351
|
+
"$ref": "#/definitions/percentageComponent"
|
|
352
|
+
}
|
|
353
|
+
]
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"if": {
|
|
360
|
+
"properties": {
|
|
361
|
+
"colorSpace": { "const": "hwb" },
|
|
362
|
+
"components": { "type": "array" }
|
|
363
|
+
}
|
|
364
|
+
},
|
|
365
|
+
"then": {
|
|
366
|
+
"properties": {
|
|
367
|
+
"components": {
|
|
368
|
+
"type": "array",
|
|
369
|
+
"minItems": 3,
|
|
370
|
+
"maxItems": 3,
|
|
371
|
+
"items": [
|
|
372
|
+
{
|
|
373
|
+
"description": "Hue: A number from 0 up to (but not including) 360 representing the angle of the color on the color wheel",
|
|
374
|
+
"$ref": "#/definitions/hueComponent"
|
|
375
|
+
},
|
|
376
|
+
{
|
|
377
|
+
"description": "Whiteness: A number between 0 and 100 representing the percentage of white in the color",
|
|
378
|
+
"$ref": "#/definitions/percentageComponent"
|
|
379
|
+
},
|
|
380
|
+
{
|
|
381
|
+
"description": "Blackness: A number between 0 and 100 representing the percentage of black in the color",
|
|
382
|
+
"$ref": "#/definitions/percentageComponent"
|
|
383
|
+
}
|
|
384
|
+
]
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"if": {
|
|
391
|
+
"properties": {
|
|
392
|
+
"colorSpace": { "const": "lab" },
|
|
393
|
+
"components": { "type": "array" }
|
|
394
|
+
}
|
|
395
|
+
},
|
|
396
|
+
"then": {
|
|
397
|
+
"properties": {
|
|
398
|
+
"components": {
|
|
399
|
+
"type": "array",
|
|
400
|
+
"minItems": 3,
|
|
401
|
+
"maxItems": 3,
|
|
402
|
+
"items": [
|
|
403
|
+
{
|
|
404
|
+
"description": "Lightness: A number between 0 and 100 representing the percentage of lightness of the color",
|
|
405
|
+
"$ref": "#/definitions/percentageComponent"
|
|
406
|
+
},
|
|
407
|
+
{
|
|
408
|
+
"description": "A: A signed number representing the green-red axis of the color. Unbounded but in practice doesn't exceed -160 to 160",
|
|
409
|
+
"$ref": "#/definitions/unboundedComponent"
|
|
410
|
+
},
|
|
411
|
+
{
|
|
412
|
+
"description": "B: A signed number representing the blue-yellow axis of the color. Unbounded but in practice doesn't exceed -160 to 160",
|
|
413
|
+
"$ref": "#/definitions/unboundedComponent"
|
|
414
|
+
}
|
|
415
|
+
]
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
},
|
|
420
|
+
{
|
|
421
|
+
"if": {
|
|
422
|
+
"properties": {
|
|
423
|
+
"colorSpace": { "const": "lch" },
|
|
424
|
+
"components": { "type": "array" }
|
|
425
|
+
}
|
|
426
|
+
},
|
|
427
|
+
"then": {
|
|
428
|
+
"properties": {
|
|
429
|
+
"components": {
|
|
430
|
+
"type": "array",
|
|
431
|
+
"minItems": 3,
|
|
432
|
+
"maxItems": 3,
|
|
433
|
+
"items": [
|
|
434
|
+
{
|
|
435
|
+
"description": "Lightness: A number between 0 and 100 representing the percentage of lightness of the color",
|
|
436
|
+
"$ref": "#/definitions/percentageComponent"
|
|
437
|
+
},
|
|
438
|
+
{
|
|
439
|
+
"description": "Chroma: A number representing the chroma of the color. Unbounded but in practice doesn't exceed 230",
|
|
440
|
+
"$ref": "#/definitions/chromaComponent"
|
|
441
|
+
},
|
|
442
|
+
{
|
|
443
|
+
"description": "Hue: A number from 0 up to (but not including) 360 representing the angle of the color on the color wheel",
|
|
444
|
+
"$ref": "#/definitions/hueComponent"
|
|
445
|
+
}
|
|
446
|
+
]
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
},
|
|
451
|
+
{
|
|
452
|
+
"if": {
|
|
453
|
+
"properties": {
|
|
454
|
+
"colorSpace": { "const": "oklab" },
|
|
455
|
+
"components": { "type": "array" }
|
|
456
|
+
}
|
|
457
|
+
},
|
|
458
|
+
"then": {
|
|
459
|
+
"properties": {
|
|
460
|
+
"components": {
|
|
461
|
+
"type": "array",
|
|
462
|
+
"minItems": 3,
|
|
463
|
+
"maxItems": 3,
|
|
464
|
+
"items": [
|
|
465
|
+
{
|
|
466
|
+
"description": "Lightness: A number between 0 and 1 representing the lightness of the color",
|
|
467
|
+
"$ref": "#/definitions/zeroToOneComponent"
|
|
468
|
+
},
|
|
469
|
+
{
|
|
470
|
+
"description": "A: A signed number representing the green-red axis of the color. Unbounded but in practice doesn't exceed -0.5 to 0.5",
|
|
471
|
+
"$ref": "#/definitions/unboundedComponent"
|
|
472
|
+
},
|
|
473
|
+
{
|
|
474
|
+
"description": "B: A signed number representing the blue-yellow axis of the color. Unbounded but in practice doesn't exceed -0.5 to 0.5",
|
|
475
|
+
"$ref": "#/definitions/unboundedComponent"
|
|
476
|
+
}
|
|
477
|
+
]
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
},
|
|
482
|
+
{
|
|
483
|
+
"if": {
|
|
484
|
+
"properties": {
|
|
485
|
+
"colorSpace": { "const": "oklch" },
|
|
486
|
+
"components": { "type": "array" }
|
|
487
|
+
}
|
|
488
|
+
},
|
|
489
|
+
"then": {
|
|
490
|
+
"properties": {
|
|
491
|
+
"components": {
|
|
492
|
+
"type": "array",
|
|
493
|
+
"minItems": 3,
|
|
494
|
+
"maxItems": 3,
|
|
495
|
+
"items": [
|
|
496
|
+
{
|
|
497
|
+
"description": "Lightness: A number between 0 and 1 representing the lightness of the color",
|
|
498
|
+
"$ref": "#/definitions/zeroToOneComponent"
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
"description": "Chroma: A number representing the chroma of the color. Unbounded but in practice doesn't exceed 0.5",
|
|
502
|
+
"$ref": "#/definitions/chromaComponent"
|
|
503
|
+
},
|
|
504
|
+
{
|
|
505
|
+
"description": "Hue: A number from 0 up to (but not including) 360 representing the angle of the color on the color wheel",
|
|
506
|
+
"$ref": "#/definitions/hueComponent"
|
|
507
|
+
}
|
|
508
|
+
]
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
}
|
|
512
|
+
}
|
|
513
|
+
]
|
|
514
|
+
}
|
|
515
|
+
|