@nswds/tokens 4.1.0 → 4.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.
|
@@ -0,0 +1,532 @@
|
|
|
1
|
+
{
|
|
2
|
+
"success": {
|
|
3
|
+
"surface": {
|
|
4
|
+
"$type": "color",
|
|
5
|
+
"$value": "{success.900}",
|
|
6
|
+
"$description": "Success (positive outcomes and confirmations) — tinted background.",
|
|
7
|
+
"$extensions": {
|
|
8
|
+
"com.figma": {
|
|
9
|
+
"hiddenFromPublishing": false,
|
|
10
|
+
"scopes": [
|
|
11
|
+
"ALL_SCOPES"
|
|
12
|
+
],
|
|
13
|
+
"codeSyntax": {
|
|
14
|
+
"WEB": "var(--success-surface)"
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"text": {
|
|
20
|
+
"$type": "color",
|
|
21
|
+
"$value": "{success.300}",
|
|
22
|
+
"$description": "Success (positive outcomes and confirmations) — readable text on the tint.",
|
|
23
|
+
"$extensions": {
|
|
24
|
+
"com.figma": {
|
|
25
|
+
"hiddenFromPublishing": false,
|
|
26
|
+
"scopes": [
|
|
27
|
+
"ALL_SCOPES"
|
|
28
|
+
],
|
|
29
|
+
"codeSyntax": {
|
|
30
|
+
"WEB": "var(--success-text)"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"border": {
|
|
36
|
+
"$type": "color",
|
|
37
|
+
"$value": "{success.700}",
|
|
38
|
+
"$description": "Success (positive outcomes and confirmations) — border and divider.",
|
|
39
|
+
"$extensions": {
|
|
40
|
+
"com.figma": {
|
|
41
|
+
"hiddenFromPublishing": false,
|
|
42
|
+
"scopes": [
|
|
43
|
+
"ALL_SCOPES"
|
|
44
|
+
],
|
|
45
|
+
"codeSyntax": {
|
|
46
|
+
"WEB": "var(--success-border)"
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
"solid": {
|
|
52
|
+
"$type": "color",
|
|
53
|
+
"$value": "{success.500}",
|
|
54
|
+
"$description": "Success (positive outcomes and confirmations) — solid fill for badges and icons.",
|
|
55
|
+
"$extensions": {
|
|
56
|
+
"com.figma": {
|
|
57
|
+
"hiddenFromPublishing": false,
|
|
58
|
+
"scopes": [
|
|
59
|
+
"ALL_SCOPES"
|
|
60
|
+
],
|
|
61
|
+
"codeSyntax": {
|
|
62
|
+
"WEB": "var(--success-solid)"
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
"warning": {
|
|
69
|
+
"surface": {
|
|
70
|
+
"$type": "color",
|
|
71
|
+
"$value": "{warning.900}",
|
|
72
|
+
"$description": "Warning (caution and pending states) — tinted background.",
|
|
73
|
+
"$extensions": {
|
|
74
|
+
"com.figma": {
|
|
75
|
+
"hiddenFromPublishing": false,
|
|
76
|
+
"scopes": [
|
|
77
|
+
"ALL_SCOPES"
|
|
78
|
+
],
|
|
79
|
+
"codeSyntax": {
|
|
80
|
+
"WEB": "var(--warning-surface)"
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
"text": {
|
|
86
|
+
"$type": "color",
|
|
87
|
+
"$value": "{warning.300}",
|
|
88
|
+
"$description": "Warning (caution and pending states) — readable text on the tint.",
|
|
89
|
+
"$extensions": {
|
|
90
|
+
"com.figma": {
|
|
91
|
+
"hiddenFromPublishing": false,
|
|
92
|
+
"scopes": [
|
|
93
|
+
"ALL_SCOPES"
|
|
94
|
+
],
|
|
95
|
+
"codeSyntax": {
|
|
96
|
+
"WEB": "var(--warning-text)"
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
"border": {
|
|
102
|
+
"$type": "color",
|
|
103
|
+
"$value": "{warning.700}",
|
|
104
|
+
"$description": "Warning (caution and pending states) — border and divider.",
|
|
105
|
+
"$extensions": {
|
|
106
|
+
"com.figma": {
|
|
107
|
+
"hiddenFromPublishing": false,
|
|
108
|
+
"scopes": [
|
|
109
|
+
"ALL_SCOPES"
|
|
110
|
+
],
|
|
111
|
+
"codeSyntax": {
|
|
112
|
+
"WEB": "var(--warning-border)"
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
"solid": {
|
|
118
|
+
"$type": "color",
|
|
119
|
+
"$value": "{warning.500}",
|
|
120
|
+
"$description": "Warning (caution and pending states) — solid fill for badges and icons.",
|
|
121
|
+
"$extensions": {
|
|
122
|
+
"com.figma": {
|
|
123
|
+
"hiddenFromPublishing": false,
|
|
124
|
+
"scopes": [
|
|
125
|
+
"ALL_SCOPES"
|
|
126
|
+
],
|
|
127
|
+
"codeSyntax": {
|
|
128
|
+
"WEB": "var(--warning-solid)"
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
"danger": {
|
|
135
|
+
"surface": {
|
|
136
|
+
"$type": "color",
|
|
137
|
+
"$value": "{danger.900}",
|
|
138
|
+
"$description": "Danger (errors and destructive actions) — tinted background.",
|
|
139
|
+
"$extensions": {
|
|
140
|
+
"com.figma": {
|
|
141
|
+
"hiddenFromPublishing": false,
|
|
142
|
+
"scopes": [
|
|
143
|
+
"ALL_SCOPES"
|
|
144
|
+
],
|
|
145
|
+
"codeSyntax": {
|
|
146
|
+
"WEB": "var(--danger-surface)"
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
"text": {
|
|
152
|
+
"$type": "color",
|
|
153
|
+
"$value": "{danger.300}",
|
|
154
|
+
"$description": "Danger (errors and destructive actions) — readable text on the tint.",
|
|
155
|
+
"$extensions": {
|
|
156
|
+
"com.figma": {
|
|
157
|
+
"hiddenFromPublishing": false,
|
|
158
|
+
"scopes": [
|
|
159
|
+
"ALL_SCOPES"
|
|
160
|
+
],
|
|
161
|
+
"codeSyntax": {
|
|
162
|
+
"WEB": "var(--danger-text)"
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
"border": {
|
|
168
|
+
"$type": "color",
|
|
169
|
+
"$value": "{danger.700}",
|
|
170
|
+
"$description": "Danger (errors and destructive actions) — border and divider.",
|
|
171
|
+
"$extensions": {
|
|
172
|
+
"com.figma": {
|
|
173
|
+
"hiddenFromPublishing": false,
|
|
174
|
+
"scopes": [
|
|
175
|
+
"ALL_SCOPES"
|
|
176
|
+
],
|
|
177
|
+
"codeSyntax": {
|
|
178
|
+
"WEB": "var(--danger-border)"
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
"solid": {
|
|
184
|
+
"$type": "color",
|
|
185
|
+
"$value": "{danger.500}",
|
|
186
|
+
"$description": "Danger (errors and destructive actions) — solid fill for badges and icons.",
|
|
187
|
+
"$extensions": {
|
|
188
|
+
"com.figma": {
|
|
189
|
+
"hiddenFromPublishing": false,
|
|
190
|
+
"scopes": [
|
|
191
|
+
"ALL_SCOPES"
|
|
192
|
+
],
|
|
193
|
+
"codeSyntax": {
|
|
194
|
+
"WEB": "var(--danger-solid)"
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
"info": {
|
|
201
|
+
"surface": {
|
|
202
|
+
"$type": "color",
|
|
203
|
+
"$value": "{info.900}",
|
|
204
|
+
"$description": "Info (neutral information) — tinted background.",
|
|
205
|
+
"$extensions": {
|
|
206
|
+
"com.figma": {
|
|
207
|
+
"hiddenFromPublishing": false,
|
|
208
|
+
"scopes": [
|
|
209
|
+
"ALL_SCOPES"
|
|
210
|
+
],
|
|
211
|
+
"codeSyntax": {
|
|
212
|
+
"WEB": "var(--info-surface)"
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
},
|
|
217
|
+
"text": {
|
|
218
|
+
"$type": "color",
|
|
219
|
+
"$value": "{info.300}",
|
|
220
|
+
"$description": "Info (neutral information) — readable text on the tint.",
|
|
221
|
+
"$extensions": {
|
|
222
|
+
"com.figma": {
|
|
223
|
+
"hiddenFromPublishing": false,
|
|
224
|
+
"scopes": [
|
|
225
|
+
"ALL_SCOPES"
|
|
226
|
+
],
|
|
227
|
+
"codeSyntax": {
|
|
228
|
+
"WEB": "var(--info-text)"
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
},
|
|
233
|
+
"border": {
|
|
234
|
+
"$type": "color",
|
|
235
|
+
"$value": "{info.700}",
|
|
236
|
+
"$description": "Info (neutral information) — border and divider.",
|
|
237
|
+
"$extensions": {
|
|
238
|
+
"com.figma": {
|
|
239
|
+
"hiddenFromPublishing": false,
|
|
240
|
+
"scopes": [
|
|
241
|
+
"ALL_SCOPES"
|
|
242
|
+
],
|
|
243
|
+
"codeSyntax": {
|
|
244
|
+
"WEB": "var(--info-border)"
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
},
|
|
249
|
+
"solid": {
|
|
250
|
+
"$type": "color",
|
|
251
|
+
"$value": "{info.500}",
|
|
252
|
+
"$description": "Info (neutral information) — solid fill for badges and icons.",
|
|
253
|
+
"$extensions": {
|
|
254
|
+
"com.figma": {
|
|
255
|
+
"hiddenFromPublishing": false,
|
|
256
|
+
"scopes": [
|
|
257
|
+
"ALL_SCOPES"
|
|
258
|
+
],
|
|
259
|
+
"codeSyntax": {
|
|
260
|
+
"WEB": "var(--info-solid)"
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
},
|
|
266
|
+
"background": {
|
|
267
|
+
"default": {
|
|
268
|
+
"$type": "color",
|
|
269
|
+
"$value": "{nsw-grey.950}",
|
|
270
|
+
"$description": "Page canvas — the base background behind all content.",
|
|
271
|
+
"$extensions": {
|
|
272
|
+
"com.figma": {
|
|
273
|
+
"hiddenFromPublishing": false,
|
|
274
|
+
"scopes": [
|
|
275
|
+
"ALL_SCOPES"
|
|
276
|
+
],
|
|
277
|
+
"codeSyntax": {
|
|
278
|
+
"WEB": "var(--background-default)"
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
},
|
|
283
|
+
"subtle": {
|
|
284
|
+
"$type": "color",
|
|
285
|
+
"$value": "{nsw-grey.900}",
|
|
286
|
+
"$description": "Subtly differentiated background for alternating or grouped sections.",
|
|
287
|
+
"$extensions": {
|
|
288
|
+
"com.figma": {
|
|
289
|
+
"hiddenFromPublishing": false,
|
|
290
|
+
"scopes": [
|
|
291
|
+
"ALL_SCOPES"
|
|
292
|
+
],
|
|
293
|
+
"codeSyntax": {
|
|
294
|
+
"WEB": "var(--background-subtle)"
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
"surface": {
|
|
301
|
+
"default": {
|
|
302
|
+
"$type": "color",
|
|
303
|
+
"$value": "{nsw-grey.900}",
|
|
304
|
+
"$description": "Default container surface — cards, panels, and inputs on the page.",
|
|
305
|
+
"$extensions": {
|
|
306
|
+
"com.figma": {
|
|
307
|
+
"hiddenFromPublishing": false,
|
|
308
|
+
"scopes": [
|
|
309
|
+
"ALL_SCOPES"
|
|
310
|
+
],
|
|
311
|
+
"codeSyntax": {
|
|
312
|
+
"WEB": "var(--surface-default)"
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
},
|
|
317
|
+
"raised": {
|
|
318
|
+
"$type": "color",
|
|
319
|
+
"$value": "{nsw-grey.800}",
|
|
320
|
+
"$description": "Raised surface for higher-elevation layers (menus, popovers, dialogs). Higher elevation reads lighter in dark mode.",
|
|
321
|
+
"$extensions": {
|
|
322
|
+
"com.figma": {
|
|
323
|
+
"hiddenFromPublishing": false,
|
|
324
|
+
"scopes": [
|
|
325
|
+
"ALL_SCOPES"
|
|
326
|
+
],
|
|
327
|
+
"codeSyntax": {
|
|
328
|
+
"WEB": "var(--surface-raised)"
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
},
|
|
333
|
+
"sunken": {
|
|
334
|
+
"$type": "color",
|
|
335
|
+
"$value": "{nsw-grey.950}",
|
|
336
|
+
"$description": "Recessed surface for wells and inset regions.",
|
|
337
|
+
"$extensions": {
|
|
338
|
+
"com.figma": {
|
|
339
|
+
"hiddenFromPublishing": false,
|
|
340
|
+
"scopes": [
|
|
341
|
+
"ALL_SCOPES"
|
|
342
|
+
],
|
|
343
|
+
"codeSyntax": {
|
|
344
|
+
"WEB": "var(--surface-sunken)"
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
"text": {
|
|
351
|
+
"default": {
|
|
352
|
+
"$type": "color",
|
|
353
|
+
"$value": "{nsw-grey.100}",
|
|
354
|
+
"$description": "Primary body and heading text.",
|
|
355
|
+
"$extensions": {
|
|
356
|
+
"com.figma": {
|
|
357
|
+
"hiddenFromPublishing": false,
|
|
358
|
+
"scopes": [
|
|
359
|
+
"ALL_SCOPES"
|
|
360
|
+
],
|
|
361
|
+
"codeSyntax": {
|
|
362
|
+
"WEB": "var(--text-default)"
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
"muted": {
|
|
368
|
+
"$type": "color",
|
|
369
|
+
"$value": "{nsw-grey.400}",
|
|
370
|
+
"$description": "Secondary text — supporting copy, captions, metadata.",
|
|
371
|
+
"$extensions": {
|
|
372
|
+
"com.figma": {
|
|
373
|
+
"hiddenFromPublishing": false,
|
|
374
|
+
"scopes": [
|
|
375
|
+
"ALL_SCOPES"
|
|
376
|
+
],
|
|
377
|
+
"codeSyntax": {
|
|
378
|
+
"WEB": "var(--text-muted)"
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
},
|
|
383
|
+
"subtle": {
|
|
384
|
+
"$type": "color",
|
|
385
|
+
"$value": "{nsw-grey.500}",
|
|
386
|
+
"$description": "Tertiary text — placeholders and disabled labels. The mid-grey reads in both modes.",
|
|
387
|
+
"$extensions": {
|
|
388
|
+
"com.figma": {
|
|
389
|
+
"hiddenFromPublishing": false,
|
|
390
|
+
"scopes": [
|
|
391
|
+
"ALL_SCOPES"
|
|
392
|
+
],
|
|
393
|
+
"codeSyntax": {
|
|
394
|
+
"WEB": "var(--text-subtle)"
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
},
|
|
399
|
+
"inverse": {
|
|
400
|
+
"$type": "color",
|
|
401
|
+
"$value": "{nsw-grey.950}",
|
|
402
|
+
"$description": "Text and icons rendered on an action or solid fill.",
|
|
403
|
+
"$extensions": {
|
|
404
|
+
"com.figma": {
|
|
405
|
+
"hiddenFromPublishing": false,
|
|
406
|
+
"scopes": [
|
|
407
|
+
"ALL_SCOPES"
|
|
408
|
+
],
|
|
409
|
+
"codeSyntax": {
|
|
410
|
+
"WEB": "var(--text-inverse)"
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
},
|
|
415
|
+
"link": {
|
|
416
|
+
"$type": "color",
|
|
417
|
+
"$value": "{nsw-blue.400}",
|
|
418
|
+
"$description": "Inline hyperlink text.",
|
|
419
|
+
"$extensions": {
|
|
420
|
+
"com.figma": {
|
|
421
|
+
"hiddenFromPublishing": false,
|
|
422
|
+
"scopes": [
|
|
423
|
+
"ALL_SCOPES"
|
|
424
|
+
],
|
|
425
|
+
"codeSyntax": {
|
|
426
|
+
"WEB": "var(--text-link)"
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
},
|
|
432
|
+
"border": {
|
|
433
|
+
"default": {
|
|
434
|
+
"$type": "color",
|
|
435
|
+
"$value": "{nsw-grey.700}",
|
|
436
|
+
"$description": "Default border for inputs, cards, and dividers.",
|
|
437
|
+
"$extensions": {
|
|
438
|
+
"com.figma": {
|
|
439
|
+
"hiddenFromPublishing": false,
|
|
440
|
+
"scopes": [
|
|
441
|
+
"ALL_SCOPES"
|
|
442
|
+
],
|
|
443
|
+
"codeSyntax": {
|
|
444
|
+
"WEB": "var(--border-default)"
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
},
|
|
449
|
+
"subtle": {
|
|
450
|
+
"$type": "color",
|
|
451
|
+
"$value": "{nsw-grey.800}",
|
|
452
|
+
"$description": "Low-emphasis border for subtle separation.",
|
|
453
|
+
"$extensions": {
|
|
454
|
+
"com.figma": {
|
|
455
|
+
"hiddenFromPublishing": false,
|
|
456
|
+
"scopes": [
|
|
457
|
+
"ALL_SCOPES"
|
|
458
|
+
],
|
|
459
|
+
"codeSyntax": {
|
|
460
|
+
"WEB": "var(--border-subtle)"
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
},
|
|
465
|
+
"strong": {
|
|
466
|
+
"$type": "color",
|
|
467
|
+
"$value": "{nsw-grey.500}",
|
|
468
|
+
"$description": "High-emphasis border for focus and selected states.",
|
|
469
|
+
"$extensions": {
|
|
470
|
+
"com.figma": {
|
|
471
|
+
"hiddenFromPublishing": false,
|
|
472
|
+
"scopes": [
|
|
473
|
+
"ALL_SCOPES"
|
|
474
|
+
],
|
|
475
|
+
"codeSyntax": {
|
|
476
|
+
"WEB": "var(--border-strong)"
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
},
|
|
482
|
+
"action": {
|
|
483
|
+
"default": {
|
|
484
|
+
"$type": "color",
|
|
485
|
+
"$value": "{nsw-blue.500}",
|
|
486
|
+
"$description": "Primary interactive colour — buttons, links, key accents. NSW navy in light, brightened for contrast in dark.",
|
|
487
|
+
"$extensions": {
|
|
488
|
+
"com.figma": {
|
|
489
|
+
"hiddenFromPublishing": false,
|
|
490
|
+
"scopes": [
|
|
491
|
+
"ALL_SCOPES"
|
|
492
|
+
],
|
|
493
|
+
"codeSyntax": {
|
|
494
|
+
"WEB": "var(--action-default)"
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
},
|
|
499
|
+
"hover": {
|
|
500
|
+
"$type": "color",
|
|
501
|
+
"$value": "{nsw-blue.400}",
|
|
502
|
+
"$description": "Hover and active state for primary actions.",
|
|
503
|
+
"$extensions": {
|
|
504
|
+
"com.figma": {
|
|
505
|
+
"hiddenFromPublishing": false,
|
|
506
|
+
"scopes": [
|
|
507
|
+
"ALL_SCOPES"
|
|
508
|
+
],
|
|
509
|
+
"codeSyntax": {
|
|
510
|
+
"WEB": "var(--action-hover)"
|
|
511
|
+
}
|
|
512
|
+
}
|
|
513
|
+
}
|
|
514
|
+
},
|
|
515
|
+
"subtle": {
|
|
516
|
+
"$type": "color",
|
|
517
|
+
"$value": "{nsw-blue.900}",
|
|
518
|
+
"$description": "Tinted background for low-emphasis (ghost) actions.",
|
|
519
|
+
"$extensions": {
|
|
520
|
+
"com.figma": {
|
|
521
|
+
"hiddenFromPublishing": false,
|
|
522
|
+
"scopes": [
|
|
523
|
+
"ALL_SCOPES"
|
|
524
|
+
],
|
|
525
|
+
"codeSyntax": {
|
|
526
|
+
"WEB": "var(--action-subtle)"
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
}
|