@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.
|
@@ -1,18 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"success": {
|
|
3
|
-
"
|
|
3
|
+
"surface": {
|
|
4
4
|
"$type": "color",
|
|
5
|
-
"$value": {
|
|
6
|
-
|
|
7
|
-
"components": [
|
|
8
|
-
0.9372549019607843,
|
|
9
|
-
0.9764705882352941,
|
|
10
|
-
0.9294117647058824
|
|
11
|
-
],
|
|
12
|
-
"alpha": 1,
|
|
13
|
-
"hex": "#eff9ed"
|
|
14
|
-
},
|
|
15
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 50: subtle backgrounds and surfaces.",
|
|
5
|
+
"$value": "{success.50}",
|
|
6
|
+
"$description": "Success (positive outcomes and confirmations) — tinted background.",
|
|
16
7
|
"$extensions": {
|
|
17
8
|
"com.figma": {
|
|
18
9
|
"hiddenFromPublishing": false,
|
|
@@ -20,24 +11,15 @@
|
|
|
20
11
|
"ALL_SCOPES"
|
|
21
12
|
],
|
|
22
13
|
"codeSyntax": {
|
|
23
|
-
"WEB": "var(--success-
|
|
14
|
+
"WEB": "var(--success-surface)"
|
|
24
15
|
}
|
|
25
16
|
}
|
|
26
17
|
}
|
|
27
18
|
},
|
|
28
|
-
"
|
|
19
|
+
"text": {
|
|
29
20
|
"$type": "color",
|
|
30
|
-
"$value": {
|
|
31
|
-
|
|
32
|
-
"components": [
|
|
33
|
-
0.8784313725490196,
|
|
34
|
-
0.9529411764705882,
|
|
35
|
-
0.8705882352941177
|
|
36
|
-
],
|
|
37
|
-
"alpha": 1,
|
|
38
|
-
"hex": "#e0f3de"
|
|
39
|
-
},
|
|
40
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 100: subtle backgrounds and surfaces.",
|
|
21
|
+
"$value": "{success.700}",
|
|
22
|
+
"$description": "Success (positive outcomes and confirmations) — readable text on the tint.",
|
|
41
23
|
"$extensions": {
|
|
42
24
|
"com.figma": {
|
|
43
25
|
"hiddenFromPublishing": false,
|
|
@@ -45,24 +27,15 @@
|
|
|
45
27
|
"ALL_SCOPES"
|
|
46
28
|
],
|
|
47
29
|
"codeSyntax": {
|
|
48
|
-
"WEB": "var(--success-
|
|
30
|
+
"WEB": "var(--success-text)"
|
|
49
31
|
}
|
|
50
32
|
}
|
|
51
33
|
}
|
|
52
34
|
},
|
|
53
|
-
"
|
|
35
|
+
"border": {
|
|
54
36
|
"$type": "color",
|
|
55
|
-
"$value": {
|
|
56
|
-
|
|
57
|
-
"components": [
|
|
58
|
-
0.8235294117647058,
|
|
59
|
-
0.9254901960784314,
|
|
60
|
-
0.8117647058823529
|
|
61
|
-
],
|
|
62
|
-
"alpha": 1,
|
|
63
|
-
"hex": "#d2eccf"
|
|
64
|
-
},
|
|
65
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 150: subtle backgrounds and surfaces.",
|
|
37
|
+
"$value": "{success.300}",
|
|
38
|
+
"$description": "Success (positive outcomes and confirmations) — border and divider.",
|
|
66
39
|
"$extensions": {
|
|
67
40
|
"com.figma": {
|
|
68
41
|
"hiddenFromPublishing": false,
|
|
@@ -70,24 +43,15 @@
|
|
|
70
43
|
"ALL_SCOPES"
|
|
71
44
|
],
|
|
72
45
|
"codeSyntax": {
|
|
73
|
-
"WEB": "var(--success-
|
|
46
|
+
"WEB": "var(--success-border)"
|
|
74
47
|
}
|
|
75
48
|
}
|
|
76
49
|
}
|
|
77
50
|
},
|
|
78
|
-
"
|
|
51
|
+
"solid": {
|
|
79
52
|
"$type": "color",
|
|
80
|
-
"$value": {
|
|
81
|
-
|
|
82
|
-
"components": [
|
|
83
|
-
0.7686274509803922,
|
|
84
|
-
0.8980392156862745,
|
|
85
|
-
0.7529411764705882
|
|
86
|
-
],
|
|
87
|
-
"alpha": 1,
|
|
88
|
-
"hex": "#c4e5c0"
|
|
89
|
-
},
|
|
90
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 200: Interactive components.",
|
|
53
|
+
"$value": "{success.600}",
|
|
54
|
+
"$description": "Success (positive outcomes and confirmations) — solid fill for badges and icons.",
|
|
91
55
|
"$extensions": {
|
|
92
56
|
"com.figma": {
|
|
93
57
|
"hiddenFromPublishing": false,
|
|
@@ -95,776 +59,17 @@
|
|
|
95
59
|
"ALL_SCOPES"
|
|
96
60
|
],
|
|
97
61
|
"codeSyntax": {
|
|
98
|
-
"WEB": "var(--success-
|
|
62
|
+
"WEB": "var(--success-solid)"
|
|
99
63
|
}
|
|
100
64
|
}
|
|
101
65
|
}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
"colorSpace": "srgb",
|
|
107
|
-
"components": [
|
|
108
|
-
0.6666666666666666,
|
|
109
|
-
0.8392156862745098,
|
|
110
|
-
0.6470588235294118
|
|
111
|
-
],
|
|
112
|
-
"alpha": 1,
|
|
113
|
-
"hex": "#aad6a5"
|
|
114
|
-
},
|
|
115
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 250: Interactive components.",
|
|
116
|
-
"$extensions": {
|
|
117
|
-
"com.figma": {
|
|
118
|
-
"hiddenFromPublishing": false,
|
|
119
|
-
"scopes": [
|
|
120
|
-
"ALL_SCOPES"
|
|
121
|
-
],
|
|
122
|
-
"codeSyntax": {
|
|
123
|
-
"WEB": "var(--success-250)"
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
},
|
|
128
|
-
"300": {
|
|
129
|
-
"$type": "color",
|
|
130
|
-
"$value": {
|
|
131
|
-
"colorSpace": "srgb",
|
|
132
|
-
"components": [
|
|
133
|
-
0.5607843137254902,
|
|
134
|
-
0.7803921568627451,
|
|
135
|
-
0.5411764705882353
|
|
136
|
-
],
|
|
137
|
-
"alpha": 1,
|
|
138
|
-
"hex": "#8fc78a"
|
|
139
|
-
},
|
|
140
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 300: Interactive components.",
|
|
141
|
-
"$extensions": {
|
|
142
|
-
"com.figma": {
|
|
143
|
-
"hiddenFromPublishing": false,
|
|
144
|
-
"scopes": [
|
|
145
|
-
"ALL_SCOPES"
|
|
146
|
-
],
|
|
147
|
-
"codeSyntax": {
|
|
148
|
-
"WEB": "var(--success-300)"
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
},
|
|
153
|
-
"350": {
|
|
154
|
-
"$type": "color",
|
|
155
|
-
"$value": {
|
|
156
|
-
"colorSpace": "srgb",
|
|
157
|
-
"components": [
|
|
158
|
-
0.4549019607843137,
|
|
159
|
-
0.7176470588235294,
|
|
160
|
-
0.43529411764705883
|
|
161
|
-
],
|
|
162
|
-
"alpha": 1,
|
|
163
|
-
"hex": "#74b76f"
|
|
164
|
-
},
|
|
165
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 350: Interactive components.",
|
|
166
|
-
"$extensions": {
|
|
167
|
-
"com.figma": {
|
|
168
|
-
"hiddenFromPublishing": false,
|
|
169
|
-
"scopes": [
|
|
170
|
-
"ALL_SCOPES"
|
|
171
|
-
],
|
|
172
|
-
"codeSyntax": {
|
|
173
|
-
"WEB": "var(--success-350)"
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
},
|
|
178
|
-
"400": {
|
|
179
|
-
"$type": "color",
|
|
180
|
-
"$value": {
|
|
181
|
-
"colorSpace": "srgb",
|
|
182
|
-
"components": [
|
|
183
|
-
0.34509803921568627,
|
|
184
|
-
0.6588235294117647,
|
|
185
|
-
0.32941176470588235
|
|
186
|
-
],
|
|
187
|
-
"alpha": 1,
|
|
188
|
-
"hex": "#58a854"
|
|
189
|
-
},
|
|
190
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 400: Interactive components.",
|
|
191
|
-
"$extensions": {
|
|
192
|
-
"com.figma": {
|
|
193
|
-
"hiddenFromPublishing": false,
|
|
194
|
-
"scopes": [
|
|
195
|
-
"ALL_SCOPES"
|
|
196
|
-
],
|
|
197
|
-
"codeSyntax": {
|
|
198
|
-
"WEB": "var(--success-400)"
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
},
|
|
203
|
-
"450": {
|
|
204
|
-
"$type": "color",
|
|
205
|
-
"$value": {
|
|
206
|
-
"colorSpace": "srgb",
|
|
207
|
-
"components": [
|
|
208
|
-
0.28627450980392155,
|
|
209
|
-
0.6313725490196078,
|
|
210
|
-
0.27450980392156865
|
|
211
|
-
],
|
|
212
|
-
"alpha": 1,
|
|
213
|
-
"hex": "#49a146"
|
|
214
|
-
},
|
|
215
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 450: borders, separators and icons.",
|
|
216
|
-
"$extensions": {
|
|
217
|
-
"com.figma": {
|
|
218
|
-
"hiddenFromPublishing": false,
|
|
219
|
-
"scopes": [
|
|
220
|
-
"ALL_SCOPES"
|
|
221
|
-
],
|
|
222
|
-
"codeSyntax": {
|
|
223
|
-
"WEB": "var(--success-450)"
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
},
|
|
228
|
-
"500": {
|
|
229
|
-
"$type": "color",
|
|
230
|
-
"$value": {
|
|
231
|
-
"colorSpace": "srgb",
|
|
232
|
-
"components": [
|
|
233
|
-
0.2235294117647059,
|
|
234
|
-
0.6,
|
|
235
|
-
0.21176470588235294
|
|
236
|
-
],
|
|
237
|
-
"alpha": 1,
|
|
238
|
-
"hex": "#399936"
|
|
239
|
-
},
|
|
240
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 500: borders, separators and icons.",
|
|
241
|
-
"$extensions": {
|
|
242
|
-
"com.figma": {
|
|
243
|
-
"hiddenFromPublishing": false,
|
|
244
|
-
"scopes": [
|
|
245
|
-
"ALL_SCOPES"
|
|
246
|
-
],
|
|
247
|
-
"codeSyntax": {
|
|
248
|
-
"WEB": "var(--success-500)"
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
},
|
|
253
|
-
"550": {
|
|
254
|
-
"$type": "color",
|
|
255
|
-
"$value": {
|
|
256
|
-
"colorSpace": "srgb",
|
|
257
|
-
"components": [
|
|
258
|
-
0.1450980392156863,
|
|
259
|
-
0.5725490196078431,
|
|
260
|
-
0.1411764705882353
|
|
261
|
-
],
|
|
262
|
-
"alpha": 1,
|
|
263
|
-
"hex": "#259224"
|
|
264
|
-
},
|
|
265
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 550: borders, separators and icons.",
|
|
266
|
-
"$extensions": {
|
|
267
|
-
"com.figma": {
|
|
268
|
-
"hiddenFromPublishing": false,
|
|
269
|
-
"scopes": [
|
|
270
|
-
"ALL_SCOPES"
|
|
271
|
-
],
|
|
272
|
-
"codeSyntax": {
|
|
273
|
-
"WEB": "var(--success-550)"
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
},
|
|
278
|
-
"600": {
|
|
279
|
-
"$type": "color",
|
|
280
|
-
"$value": {
|
|
281
|
-
"colorSpace": "srgb",
|
|
282
|
-
"components": [
|
|
283
|
-
0,
|
|
284
|
-
0.5411764705882353,
|
|
285
|
-
0.027450980392156862
|
|
286
|
-
],
|
|
287
|
-
"alpha": 1,
|
|
288
|
-
"hex": "#008a07"
|
|
289
|
-
},
|
|
290
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 600: borders, separators and icons.",
|
|
291
|
-
"$extensions": {
|
|
292
|
-
"com.figma": {
|
|
293
|
-
"hiddenFromPublishing": false,
|
|
294
|
-
"scopes": [
|
|
295
|
-
"ALL_SCOPES"
|
|
296
|
-
],
|
|
297
|
-
"codeSyntax": {
|
|
298
|
-
"WEB": "var(--success-600)"
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
}
|
|
302
|
-
},
|
|
303
|
-
"650": {
|
|
304
|
-
"$type": "color",
|
|
305
|
-
"$value": {
|
|
306
|
-
"colorSpace": "srgb",
|
|
307
|
-
"components": [
|
|
308
|
-
0,
|
|
309
|
-
0.4470588235294118,
|
|
310
|
-
0.01568627450980392
|
|
311
|
-
],
|
|
312
|
-
"alpha": 1,
|
|
313
|
-
"hex": "#007204"
|
|
314
|
-
},
|
|
315
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 650: borders, separators and icons.",
|
|
316
|
-
"$extensions": {
|
|
317
|
-
"com.figma": {
|
|
318
|
-
"hiddenFromPublishing": false,
|
|
319
|
-
"scopes": [
|
|
320
|
-
"ALL_SCOPES"
|
|
321
|
-
],
|
|
322
|
-
"codeSyntax": {
|
|
323
|
-
"WEB": "var(--success-650)"
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
|
-
},
|
|
328
|
-
"700": {
|
|
329
|
-
"$type": "color",
|
|
330
|
-
"$value": {
|
|
331
|
-
"colorSpace": "srgb",
|
|
332
|
-
"components": [
|
|
333
|
-
0,
|
|
334
|
-
0.35294117647058826,
|
|
335
|
-
0.00784313725490196
|
|
336
|
-
],
|
|
337
|
-
"alpha": 1,
|
|
338
|
-
"hex": "#005a02"
|
|
339
|
-
},
|
|
340
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 700: Solid colors.",
|
|
341
|
-
"$extensions": {
|
|
342
|
-
"com.figma": {
|
|
343
|
-
"hiddenFromPublishing": false,
|
|
344
|
-
"scopes": [
|
|
345
|
-
"ALL_SCOPES"
|
|
346
|
-
],
|
|
347
|
-
"codeSyntax": {
|
|
348
|
-
"WEB": "var(--success-700)"
|
|
349
|
-
}
|
|
350
|
-
}
|
|
351
|
-
}
|
|
352
|
-
},
|
|
353
|
-
"750": {
|
|
354
|
-
"$type": "color",
|
|
355
|
-
"$value": {
|
|
356
|
-
"colorSpace": "srgb",
|
|
357
|
-
"components": [
|
|
358
|
-
0,
|
|
359
|
-
0.26666666666666666,
|
|
360
|
-
0.00392156862745098
|
|
361
|
-
],
|
|
362
|
-
"alpha": 1,
|
|
363
|
-
"hex": "#004401"
|
|
364
|
-
},
|
|
365
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 750: Solid colors.",
|
|
366
|
-
"$extensions": {
|
|
367
|
-
"com.figma": {
|
|
368
|
-
"hiddenFromPublishing": false,
|
|
369
|
-
"scopes": [
|
|
370
|
-
"ALL_SCOPES"
|
|
371
|
-
],
|
|
372
|
-
"codeSyntax": {
|
|
373
|
-
"WEB": "var(--success-750)"
|
|
374
|
-
}
|
|
375
|
-
}
|
|
376
|
-
}
|
|
377
|
-
},
|
|
378
|
-
"800": {
|
|
379
|
-
"$type": "color",
|
|
380
|
-
"$value": {
|
|
381
|
-
"colorSpace": "srgb",
|
|
382
|
-
"components": [
|
|
383
|
-
0,
|
|
384
|
-
0.1843137254901961,
|
|
385
|
-
0
|
|
386
|
-
],
|
|
387
|
-
"alpha": 1,
|
|
388
|
-
"hex": "#002f00"
|
|
389
|
-
},
|
|
390
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 800: Solid colors.",
|
|
391
|
-
"$extensions": {
|
|
392
|
-
"com.figma": {
|
|
393
|
-
"hiddenFromPublishing": false,
|
|
394
|
-
"scopes": [
|
|
395
|
-
"ALL_SCOPES"
|
|
396
|
-
],
|
|
397
|
-
"codeSyntax": {
|
|
398
|
-
"WEB": "var(--success-800)"
|
|
399
|
-
}
|
|
400
|
-
}
|
|
401
|
-
}
|
|
402
|
-
},
|
|
403
|
-
"850": {
|
|
404
|
-
"$type": "color",
|
|
405
|
-
"$value": {
|
|
406
|
-
"colorSpace": "srgb",
|
|
407
|
-
"components": [
|
|
408
|
-
0,
|
|
409
|
-
0.13333333333333333,
|
|
410
|
-
0
|
|
411
|
-
],
|
|
412
|
-
"alpha": 1,
|
|
413
|
-
"hex": "#002200"
|
|
414
|
-
},
|
|
415
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 850: text and high emphasis.",
|
|
416
|
-
"$extensions": {
|
|
417
|
-
"com.figma": {
|
|
418
|
-
"hiddenFromPublishing": false,
|
|
419
|
-
"scopes": [
|
|
420
|
-
"ALL_SCOPES"
|
|
421
|
-
],
|
|
422
|
-
"codeSyntax": {
|
|
423
|
-
"WEB": "var(--success-850)"
|
|
424
|
-
}
|
|
425
|
-
}
|
|
426
|
-
}
|
|
427
|
-
},
|
|
428
|
-
"900": {
|
|
429
|
-
"$type": "color",
|
|
430
|
-
"$value": {
|
|
431
|
-
"colorSpace": "srgb",
|
|
432
|
-
"components": [
|
|
433
|
-
0,
|
|
434
|
-
0.08627450980392157,
|
|
435
|
-
0
|
|
436
|
-
],
|
|
437
|
-
"alpha": 1,
|
|
438
|
-
"hex": "#001600"
|
|
439
|
-
},
|
|
440
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 900: text and high emphasis.",
|
|
441
|
-
"$extensions": {
|
|
442
|
-
"com.figma": {
|
|
443
|
-
"hiddenFromPublishing": false,
|
|
444
|
-
"scopes": [
|
|
445
|
-
"ALL_SCOPES"
|
|
446
|
-
],
|
|
447
|
-
"codeSyntax": {
|
|
448
|
-
"WEB": "var(--success-900)"
|
|
449
|
-
}
|
|
450
|
-
}
|
|
451
|
-
}
|
|
452
|
-
},
|
|
453
|
-
"950": {
|
|
454
|
-
"$type": "color",
|
|
455
|
-
"$value": {
|
|
456
|
-
"colorSpace": "srgb",
|
|
457
|
-
"components": [
|
|
458
|
-
0,
|
|
459
|
-
0.043137254901960784,
|
|
460
|
-
0
|
|
461
|
-
],
|
|
462
|
-
"alpha": 1,
|
|
463
|
-
"hex": "#000b00"
|
|
464
|
-
},
|
|
465
|
-
"$description": "Success state — positive outcomes, confirmations, and completed actions. Step 950: text and high emphasis.",
|
|
466
|
-
"$extensions": {
|
|
467
|
-
"com.figma": {
|
|
468
|
-
"hiddenFromPublishing": false,
|
|
469
|
-
"scopes": [
|
|
470
|
-
"ALL_SCOPES"
|
|
471
|
-
],
|
|
472
|
-
"codeSyntax": {
|
|
473
|
-
"WEB": "var(--success-950)"
|
|
474
|
-
}
|
|
475
|
-
}
|
|
476
|
-
}
|
|
477
|
-
}
|
|
478
|
-
},
|
|
479
|
-
"warning": {
|
|
480
|
-
"50": {
|
|
481
|
-
"$type": "color",
|
|
482
|
-
"$value": {
|
|
483
|
-
"colorSpace": "srgb",
|
|
484
|
-
"components": [
|
|
485
|
-
1,
|
|
486
|
-
0.9529411764705882,
|
|
487
|
-
0.9294117647058824
|
|
488
|
-
],
|
|
489
|
-
"alpha": 1,
|
|
490
|
-
"hex": "#fff3ed"
|
|
491
|
-
},
|
|
492
|
-
"$description": "Warning state — caution and actions that need attention. Step 50: subtle backgrounds and surfaces.",
|
|
493
|
-
"$extensions": {
|
|
494
|
-
"com.figma": {
|
|
495
|
-
"hiddenFromPublishing": false,
|
|
496
|
-
"scopes": [
|
|
497
|
-
"ALL_SCOPES"
|
|
498
|
-
],
|
|
499
|
-
"codeSyntax": {
|
|
500
|
-
"WEB": "var(--warning-50)"
|
|
501
|
-
}
|
|
502
|
-
}
|
|
503
|
-
}
|
|
504
|
-
},
|
|
505
|
-
"100": {
|
|
506
|
-
"$type": "color",
|
|
507
|
-
"$value": {
|
|
508
|
-
"colorSpace": "srgb",
|
|
509
|
-
"components": [
|
|
510
|
-
1,
|
|
511
|
-
0.9098039215686274,
|
|
512
|
-
0.8705882352941177
|
|
513
|
-
],
|
|
514
|
-
"alpha": 1,
|
|
515
|
-
"hex": "#ffe8de"
|
|
516
|
-
},
|
|
517
|
-
"$description": "Warning state — caution and actions that need attention. Step 100: subtle backgrounds and surfaces.",
|
|
518
|
-
"$extensions": {
|
|
519
|
-
"com.figma": {
|
|
520
|
-
"hiddenFromPublishing": false,
|
|
521
|
-
"scopes": [
|
|
522
|
-
"ALL_SCOPES"
|
|
523
|
-
],
|
|
524
|
-
"codeSyntax": {
|
|
525
|
-
"WEB": "var(--warning-100)"
|
|
526
|
-
}
|
|
527
|
-
}
|
|
528
|
-
}
|
|
529
|
-
},
|
|
530
|
-
"150": {
|
|
531
|
-
"$type": "color",
|
|
532
|
-
"$value": {
|
|
533
|
-
"colorSpace": "srgb",
|
|
534
|
-
"components": [
|
|
535
|
-
1,
|
|
536
|
-
0.8666666666666667,
|
|
537
|
-
0.8117647058823529
|
|
538
|
-
],
|
|
539
|
-
"alpha": 1,
|
|
540
|
-
"hex": "#ffddcf"
|
|
541
|
-
},
|
|
542
|
-
"$description": "Warning state — caution and actions that need attention. Step 150: subtle backgrounds and surfaces.",
|
|
543
|
-
"$extensions": {
|
|
544
|
-
"com.figma": {
|
|
545
|
-
"hiddenFromPublishing": false,
|
|
546
|
-
"scopes": [
|
|
547
|
-
"ALL_SCOPES"
|
|
548
|
-
],
|
|
549
|
-
"codeSyntax": {
|
|
550
|
-
"WEB": "var(--warning-150)"
|
|
551
|
-
}
|
|
552
|
-
}
|
|
553
|
-
}
|
|
554
|
-
},
|
|
555
|
-
"200": {
|
|
556
|
-
"$type": "color",
|
|
557
|
-
"$value": {
|
|
558
|
-
"colorSpace": "srgb",
|
|
559
|
-
"components": [
|
|
560
|
-
0.9921568627450981,
|
|
561
|
-
0.8235294117647058,
|
|
562
|
-
0.7529411764705882
|
|
563
|
-
],
|
|
564
|
-
"alpha": 1,
|
|
565
|
-
"hex": "#fdd2c0"
|
|
566
|
-
},
|
|
567
|
-
"$description": "Warning state — caution and actions that need attention. Step 200: Interactive components.",
|
|
568
|
-
"$extensions": {
|
|
569
|
-
"com.figma": {
|
|
570
|
-
"hiddenFromPublishing": false,
|
|
571
|
-
"scopes": [
|
|
572
|
-
"ALL_SCOPES"
|
|
573
|
-
],
|
|
574
|
-
"codeSyntax": {
|
|
575
|
-
"WEB": "var(--warning-200)"
|
|
576
|
-
}
|
|
577
|
-
}
|
|
578
|
-
}
|
|
579
|
-
},
|
|
580
|
-
"250": {
|
|
581
|
-
"$type": "color",
|
|
582
|
-
"$value": {
|
|
583
|
-
"colorSpace": "srgb",
|
|
584
|
-
"components": [
|
|
585
|
-
0.9647058823529412,
|
|
586
|
-
0.7411764705882353,
|
|
587
|
-
0.6470588235294118
|
|
588
|
-
],
|
|
589
|
-
"alpha": 1,
|
|
590
|
-
"hex": "#f6bda5"
|
|
591
|
-
},
|
|
592
|
-
"$description": "Warning state — caution and actions that need attention. Step 250: Interactive components.",
|
|
593
|
-
"$extensions": {
|
|
594
|
-
"com.figma": {
|
|
595
|
-
"hiddenFromPublishing": false,
|
|
596
|
-
"scopes": [
|
|
597
|
-
"ALL_SCOPES"
|
|
598
|
-
],
|
|
599
|
-
"codeSyntax": {
|
|
600
|
-
"WEB": "var(--warning-250)"
|
|
601
|
-
}
|
|
602
|
-
}
|
|
603
|
-
}
|
|
604
|
-
},
|
|
605
|
-
"300": {
|
|
606
|
-
"$type": "color",
|
|
607
|
-
"$value": {
|
|
608
|
-
"colorSpace": "srgb",
|
|
609
|
-
"components": [
|
|
610
|
-
0.9333333333333333,
|
|
611
|
-
0.6588235294117647,
|
|
612
|
-
0.5411764705882353
|
|
613
|
-
],
|
|
614
|
-
"alpha": 1,
|
|
615
|
-
"hex": "#eea88a"
|
|
616
|
-
},
|
|
617
|
-
"$description": "Warning state — caution and actions that need attention. Step 300: Interactive components.",
|
|
618
|
-
"$extensions": {
|
|
619
|
-
"com.figma": {
|
|
620
|
-
"hiddenFromPublishing": false,
|
|
621
|
-
"scopes": [
|
|
622
|
-
"ALL_SCOPES"
|
|
623
|
-
],
|
|
624
|
-
"codeSyntax": {
|
|
625
|
-
"WEB": "var(--warning-300)"
|
|
626
|
-
}
|
|
627
|
-
}
|
|
628
|
-
}
|
|
629
|
-
},
|
|
630
|
-
"350": {
|
|
631
|
-
"$type": "color",
|
|
632
|
-
"$value": {
|
|
633
|
-
"colorSpace": "srgb",
|
|
634
|
-
"components": [
|
|
635
|
-
0.9019607843137255,
|
|
636
|
-
0.5764705882352941,
|
|
637
|
-
0.43529411764705883
|
|
638
|
-
],
|
|
639
|
-
"alpha": 1,
|
|
640
|
-
"hex": "#e6936f"
|
|
641
|
-
},
|
|
642
|
-
"$description": "Warning state — caution and actions that need attention. Step 350: Interactive components.",
|
|
643
|
-
"$extensions": {
|
|
644
|
-
"com.figma": {
|
|
645
|
-
"hiddenFromPublishing": false,
|
|
646
|
-
"scopes": [
|
|
647
|
-
"ALL_SCOPES"
|
|
648
|
-
],
|
|
649
|
-
"codeSyntax": {
|
|
650
|
-
"WEB": "var(--warning-350)"
|
|
651
|
-
}
|
|
652
|
-
}
|
|
653
|
-
}
|
|
654
|
-
},
|
|
655
|
-
"400": {
|
|
656
|
-
"$type": "color",
|
|
657
|
-
"$value": {
|
|
658
|
-
"colorSpace": "srgb",
|
|
659
|
-
"components": [
|
|
660
|
-
0.8666666666666667,
|
|
661
|
-
0.49019607843137253,
|
|
662
|
-
0.3254901960784314
|
|
663
|
-
],
|
|
664
|
-
"alpha": 1,
|
|
665
|
-
"hex": "#dd7d53"
|
|
666
|
-
},
|
|
667
|
-
"$description": "Warning state — caution and actions that need attention. Step 400: Interactive components.",
|
|
668
|
-
"$extensions": {
|
|
669
|
-
"com.figma": {
|
|
670
|
-
"hiddenFromPublishing": false,
|
|
671
|
-
"scopes": [
|
|
672
|
-
"ALL_SCOPES"
|
|
673
|
-
],
|
|
674
|
-
"codeSyntax": {
|
|
675
|
-
"WEB": "var(--warning-400)"
|
|
676
|
-
}
|
|
677
|
-
}
|
|
678
|
-
}
|
|
679
|
-
},
|
|
680
|
-
"450": {
|
|
681
|
-
"$type": "color",
|
|
682
|
-
"$value": {
|
|
683
|
-
"colorSpace": "srgb",
|
|
684
|
-
"components": [
|
|
685
|
-
0.8470588235294118,
|
|
686
|
-
0.4470588235294118,
|
|
687
|
-
0.26666666666666666
|
|
688
|
-
],
|
|
689
|
-
"alpha": 1,
|
|
690
|
-
"hex": "#d87244"
|
|
691
|
-
},
|
|
692
|
-
"$description": "Warning state — caution and actions that need attention. Step 450: borders, separators and icons.",
|
|
693
|
-
"$extensions": {
|
|
694
|
-
"com.figma": {
|
|
695
|
-
"hiddenFromPublishing": false,
|
|
696
|
-
"scopes": [
|
|
697
|
-
"ALL_SCOPES"
|
|
698
|
-
],
|
|
699
|
-
"codeSyntax": {
|
|
700
|
-
"WEB": "var(--warning-450)"
|
|
701
|
-
}
|
|
702
|
-
}
|
|
703
|
-
}
|
|
704
|
-
},
|
|
705
|
-
"500": {
|
|
706
|
-
"$type": "color",
|
|
707
|
-
"$value": {
|
|
708
|
-
"colorSpace": "srgb",
|
|
709
|
-
"components": [
|
|
710
|
-
0.8274509803921568,
|
|
711
|
-
0.403921568627451,
|
|
712
|
-
0.20392156862745098
|
|
713
|
-
],
|
|
714
|
-
"alpha": 1,
|
|
715
|
-
"hex": "#d36734"
|
|
716
|
-
},
|
|
717
|
-
"$description": "Warning state — caution and actions that need attention. Step 500: borders, separators and icons.",
|
|
718
|
-
"$extensions": {
|
|
719
|
-
"com.figma": {
|
|
720
|
-
"hiddenFromPublishing": false,
|
|
721
|
-
"scopes": [
|
|
722
|
-
"ALL_SCOPES"
|
|
723
|
-
],
|
|
724
|
-
"codeSyntax": {
|
|
725
|
-
"WEB": "var(--warning-500)"
|
|
726
|
-
}
|
|
727
|
-
}
|
|
728
|
-
}
|
|
729
|
-
},
|
|
730
|
-
"550": {
|
|
731
|
-
"$type": "color",
|
|
732
|
-
"$value": {
|
|
733
|
-
"colorSpace": "srgb",
|
|
734
|
-
"components": [
|
|
735
|
-
0.807843137254902,
|
|
736
|
-
0.3607843137254902,
|
|
737
|
-
0.12941176470588237
|
|
738
|
-
],
|
|
739
|
-
"alpha": 1,
|
|
740
|
-
"hex": "#ce5c21"
|
|
741
|
-
},
|
|
742
|
-
"$description": "Warning state — caution and actions that need attention. Step 550: borders, separators and icons.",
|
|
743
|
-
"$extensions": {
|
|
744
|
-
"com.figma": {
|
|
745
|
-
"hiddenFromPublishing": false,
|
|
746
|
-
"scopes": [
|
|
747
|
-
"ALL_SCOPES"
|
|
748
|
-
],
|
|
749
|
-
"codeSyntax": {
|
|
750
|
-
"WEB": "var(--warning-550)"
|
|
751
|
-
}
|
|
752
|
-
}
|
|
753
|
-
}
|
|
754
|
-
},
|
|
755
|
-
"600": {
|
|
756
|
-
"$type": "color",
|
|
757
|
-
"$value": {
|
|
758
|
-
"colorSpace": "srgb",
|
|
759
|
-
"components": [
|
|
760
|
-
0.788235294117647,
|
|
761
|
-
0.3137254901960784,
|
|
762
|
-
0
|
|
763
|
-
],
|
|
764
|
-
"alpha": 1,
|
|
765
|
-
"hex": "#c95000"
|
|
766
|
-
},
|
|
767
|
-
"$description": "Warning state — caution and actions that need attention. Step 600: borders, separators and icons.",
|
|
768
|
-
"$extensions": {
|
|
769
|
-
"com.figma": {
|
|
770
|
-
"hiddenFromPublishing": false,
|
|
771
|
-
"scopes": [
|
|
772
|
-
"ALL_SCOPES"
|
|
773
|
-
],
|
|
774
|
-
"codeSyntax": {
|
|
775
|
-
"WEB": "var(--warning-600)"
|
|
776
|
-
}
|
|
777
|
-
}
|
|
778
|
-
}
|
|
779
|
-
},
|
|
780
|
-
"650": {
|
|
781
|
-
"$type": "color",
|
|
782
|
-
"$value": {
|
|
783
|
-
"colorSpace": "srgb",
|
|
784
|
-
"components": [
|
|
785
|
-
0.6588235294117647,
|
|
786
|
-
0.24705882352941178,
|
|
787
|
-
0.011764705882352941
|
|
788
|
-
],
|
|
789
|
-
"alpha": 1,
|
|
790
|
-
"hex": "#a83f03"
|
|
791
|
-
},
|
|
792
|
-
"$description": "Warning state — caution and actions that need attention. Step 650: borders, separators and icons.",
|
|
793
|
-
"$extensions": {
|
|
794
|
-
"com.figma": {
|
|
795
|
-
"hiddenFromPublishing": false,
|
|
796
|
-
"scopes": [
|
|
797
|
-
"ALL_SCOPES"
|
|
798
|
-
],
|
|
799
|
-
"codeSyntax": {
|
|
800
|
-
"WEB": "var(--warning-650)"
|
|
801
|
-
}
|
|
802
|
-
}
|
|
803
|
-
}
|
|
804
|
-
},
|
|
805
|
-
"700": {
|
|
806
|
-
"$type": "color",
|
|
807
|
-
"$value": {
|
|
808
|
-
"colorSpace": "srgb",
|
|
809
|
-
"components": [
|
|
810
|
-
0.5333333333333333,
|
|
811
|
-
0.1843137254901961,
|
|
812
|
-
0.011764705882352941
|
|
813
|
-
],
|
|
814
|
-
"alpha": 1,
|
|
815
|
-
"hex": "#882f03"
|
|
816
|
-
},
|
|
817
|
-
"$description": "Warning state — caution and actions that need attention. Step 700: Solid colors.",
|
|
818
|
-
"$extensions": {
|
|
819
|
-
"com.figma": {
|
|
820
|
-
"hiddenFromPublishing": false,
|
|
821
|
-
"scopes": [
|
|
822
|
-
"ALL_SCOPES"
|
|
823
|
-
],
|
|
824
|
-
"codeSyntax": {
|
|
825
|
-
"WEB": "var(--warning-700)"
|
|
826
|
-
}
|
|
827
|
-
}
|
|
828
|
-
}
|
|
829
|
-
},
|
|
830
|
-
"750": {
|
|
831
|
-
"$type": "color",
|
|
832
|
-
"$value": {
|
|
833
|
-
"colorSpace": "srgb",
|
|
834
|
-
"components": [
|
|
835
|
-
0.4117647058823529,
|
|
836
|
-
0.12549019607843137,
|
|
837
|
-
0.00392156862745098
|
|
838
|
-
],
|
|
839
|
-
"alpha": 1,
|
|
840
|
-
"hex": "#692001"
|
|
841
|
-
},
|
|
842
|
-
"$description": "Warning state — caution and actions that need attention. Step 750: Solid colors.",
|
|
843
|
-
"$extensions": {
|
|
844
|
-
"com.figma": {
|
|
845
|
-
"hiddenFromPublishing": false,
|
|
846
|
-
"scopes": [
|
|
847
|
-
"ALL_SCOPES"
|
|
848
|
-
],
|
|
849
|
-
"codeSyntax": {
|
|
850
|
-
"WEB": "var(--warning-750)"
|
|
851
|
-
}
|
|
852
|
-
}
|
|
853
|
-
}
|
|
854
|
-
},
|
|
855
|
-
"800": {
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
"warning": {
|
|
69
|
+
"surface": {
|
|
856
70
|
"$type": "color",
|
|
857
|
-
"$value": {
|
|
858
|
-
|
|
859
|
-
"components": [
|
|
860
|
-
0.29411764705882354,
|
|
861
|
-
0.07058823529411765,
|
|
862
|
-
0
|
|
863
|
-
],
|
|
864
|
-
"alpha": 1,
|
|
865
|
-
"hex": "#4b1200"
|
|
866
|
-
},
|
|
867
|
-
"$description": "Warning state — caution and actions that need attention. Step 800: Solid colors.",
|
|
71
|
+
"$value": "{warning.50}",
|
|
72
|
+
"$description": "Warning (caution and pending states) — tinted background.",
|
|
868
73
|
"$extensions": {
|
|
869
74
|
"com.figma": {
|
|
870
75
|
"hiddenFromPublishing": false,
|
|
@@ -872,24 +77,15 @@
|
|
|
872
77
|
"ALL_SCOPES"
|
|
873
78
|
],
|
|
874
79
|
"codeSyntax": {
|
|
875
|
-
"WEB": "var(--warning-
|
|
80
|
+
"WEB": "var(--warning-surface)"
|
|
876
81
|
}
|
|
877
82
|
}
|
|
878
83
|
}
|
|
879
84
|
},
|
|
880
|
-
"
|
|
85
|
+
"text": {
|
|
881
86
|
"$type": "color",
|
|
882
|
-
"$value": {
|
|
883
|
-
|
|
884
|
-
"components": [
|
|
885
|
-
0.2235294117647059,
|
|
886
|
-
0.0392156862745098,
|
|
887
|
-
0
|
|
888
|
-
],
|
|
889
|
-
"alpha": 1,
|
|
890
|
-
"hex": "#390a00"
|
|
891
|
-
},
|
|
892
|
-
"$description": "Warning state — caution and actions that need attention. Step 850: text and high emphasis.",
|
|
87
|
+
"$value": "{warning.700}",
|
|
88
|
+
"$description": "Warning (caution and pending states) — readable text on the tint.",
|
|
893
89
|
"$extensions": {
|
|
894
90
|
"com.figma": {
|
|
895
91
|
"hiddenFromPublishing": false,
|
|
@@ -897,24 +93,15 @@
|
|
|
897
93
|
"ALL_SCOPES"
|
|
898
94
|
],
|
|
899
95
|
"codeSyntax": {
|
|
900
|
-
"WEB": "var(--warning-
|
|
96
|
+
"WEB": "var(--warning-text)"
|
|
901
97
|
}
|
|
902
98
|
}
|
|
903
99
|
}
|
|
904
100
|
},
|
|
905
|
-
"
|
|
101
|
+
"border": {
|
|
906
102
|
"$type": "color",
|
|
907
|
-
"$value": {
|
|
908
|
-
|
|
909
|
-
"components": [
|
|
910
|
-
0.15294117647058825,
|
|
911
|
-
0.01568627450980392,
|
|
912
|
-
0
|
|
913
|
-
],
|
|
914
|
-
"alpha": 1,
|
|
915
|
-
"hex": "#270400"
|
|
916
|
-
},
|
|
917
|
-
"$description": "Warning state — caution and actions that need attention. Step 900: text and high emphasis.",
|
|
103
|
+
"$value": "{warning.300}",
|
|
104
|
+
"$description": "Warning (caution and pending states) — border and divider.",
|
|
918
105
|
"$extensions": {
|
|
919
106
|
"com.figma": {
|
|
920
107
|
"hiddenFromPublishing": false,
|
|
@@ -922,24 +109,15 @@
|
|
|
922
109
|
"ALL_SCOPES"
|
|
923
110
|
],
|
|
924
111
|
"codeSyntax": {
|
|
925
|
-
"WEB": "var(--warning-
|
|
112
|
+
"WEB": "var(--warning-border)"
|
|
926
113
|
}
|
|
927
114
|
}
|
|
928
115
|
}
|
|
929
116
|
},
|
|
930
|
-
"
|
|
117
|
+
"solid": {
|
|
931
118
|
"$type": "color",
|
|
932
|
-
"$value": {
|
|
933
|
-
|
|
934
|
-
"components": [
|
|
935
|
-
0.09019607843137255,
|
|
936
|
-
0.00392156862745098,
|
|
937
|
-
0
|
|
938
|
-
],
|
|
939
|
-
"alpha": 1,
|
|
940
|
-
"hex": "#170100"
|
|
941
|
-
},
|
|
942
|
-
"$description": "Warning state — caution and actions that need attention. Step 950: text and high emphasis.",
|
|
119
|
+
"$value": "{warning.600}",
|
|
120
|
+
"$description": "Warning (caution and pending states) — solid fill for badges and icons.",
|
|
943
121
|
"$extensions": {
|
|
944
122
|
"com.figma": {
|
|
945
123
|
"hiddenFromPublishing": false,
|
|
@@ -947,301 +125,17 @@
|
|
|
947
125
|
"ALL_SCOPES"
|
|
948
126
|
],
|
|
949
127
|
"codeSyntax": {
|
|
950
|
-
"WEB": "var(--warning-
|
|
128
|
+
"WEB": "var(--warning-solid)"
|
|
951
129
|
}
|
|
952
130
|
}
|
|
953
131
|
}
|
|
954
132
|
}
|
|
955
133
|
},
|
|
956
134
|
"danger": {
|
|
957
|
-
"
|
|
958
|
-
"$type": "color",
|
|
959
|
-
"$value": {
|
|
960
|
-
"colorSpace": "srgb",
|
|
961
|
-
"components": [
|
|
962
|
-
1,
|
|
963
|
-
0.9411764705882353,
|
|
964
|
-
0.9372549019607843
|
|
965
|
-
],
|
|
966
|
-
"alpha": 1,
|
|
967
|
-
"hex": "#fff0ef"
|
|
968
|
-
},
|
|
969
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 50: subtle backgrounds and surfaces.",
|
|
970
|
-
"$extensions": {
|
|
971
|
-
"com.figma": {
|
|
972
|
-
"hiddenFromPublishing": false,
|
|
973
|
-
"scopes": [
|
|
974
|
-
"ALL_SCOPES"
|
|
975
|
-
],
|
|
976
|
-
"codeSyntax": {
|
|
977
|
-
"WEB": "var(--danger-50)"
|
|
978
|
-
}
|
|
979
|
-
}
|
|
980
|
-
}
|
|
981
|
-
},
|
|
982
|
-
"100": {
|
|
983
|
-
"$type": "color",
|
|
984
|
-
"$value": {
|
|
985
|
-
"colorSpace": "srgb",
|
|
986
|
-
"components": [
|
|
987
|
-
1,
|
|
988
|
-
0.8862745098039215,
|
|
989
|
-
0.8823529411764706
|
|
990
|
-
],
|
|
991
|
-
"alpha": 1,
|
|
992
|
-
"hex": "#ffe2e1"
|
|
993
|
-
},
|
|
994
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 100: subtle backgrounds and surfaces.",
|
|
995
|
-
"$extensions": {
|
|
996
|
-
"com.figma": {
|
|
997
|
-
"hiddenFromPublishing": false,
|
|
998
|
-
"scopes": [
|
|
999
|
-
"ALL_SCOPES"
|
|
1000
|
-
],
|
|
1001
|
-
"codeSyntax": {
|
|
1002
|
-
"WEB": "var(--danger-100)"
|
|
1003
|
-
}
|
|
1004
|
-
}
|
|
1005
|
-
}
|
|
1006
|
-
},
|
|
1007
|
-
"150": {
|
|
1008
|
-
"$type": "color",
|
|
1009
|
-
"$value": {
|
|
1010
|
-
"colorSpace": "srgb",
|
|
1011
|
-
"components": [
|
|
1012
|
-
1,
|
|
1013
|
-
0.8313725490196079,
|
|
1014
|
-
0.8313725490196079
|
|
1015
|
-
],
|
|
1016
|
-
"alpha": 1,
|
|
1017
|
-
"hex": "#ffd4d4"
|
|
1018
|
-
},
|
|
1019
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 150: subtle backgrounds and surfaces.",
|
|
1020
|
-
"$extensions": {
|
|
1021
|
-
"com.figma": {
|
|
1022
|
-
"hiddenFromPublishing": false,
|
|
1023
|
-
"scopes": [
|
|
1024
|
-
"ALL_SCOPES"
|
|
1025
|
-
],
|
|
1026
|
-
"codeSyntax": {
|
|
1027
|
-
"WEB": "var(--danger-150)"
|
|
1028
|
-
}
|
|
1029
|
-
}
|
|
1030
|
-
}
|
|
1031
|
-
},
|
|
1032
|
-
"200": {
|
|
1033
|
-
"$type": "color",
|
|
1034
|
-
"$value": {
|
|
1035
|
-
"colorSpace": "srgb",
|
|
1036
|
-
"components": [
|
|
1037
|
-
0.9921568627450981,
|
|
1038
|
-
0.7764705882352941,
|
|
1039
|
-
0.7764705882352941
|
|
1040
|
-
],
|
|
1041
|
-
"alpha": 1,
|
|
1042
|
-
"hex": "#fdc6c6"
|
|
1043
|
-
},
|
|
1044
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 200: Interactive components.",
|
|
1045
|
-
"$extensions": {
|
|
1046
|
-
"com.figma": {
|
|
1047
|
-
"hiddenFromPublishing": false,
|
|
1048
|
-
"scopes": [
|
|
1049
|
-
"ALL_SCOPES"
|
|
1050
|
-
],
|
|
1051
|
-
"codeSyntax": {
|
|
1052
|
-
"WEB": "var(--danger-200)"
|
|
1053
|
-
}
|
|
1054
|
-
}
|
|
1055
|
-
}
|
|
1056
|
-
},
|
|
1057
|
-
"250": {
|
|
1058
|
-
"$type": "color",
|
|
1059
|
-
"$value": {
|
|
1060
|
-
"colorSpace": "srgb",
|
|
1061
|
-
"components": [
|
|
1062
|
-
0.9568627450980393,
|
|
1063
|
-
0.6745098039215687,
|
|
1064
|
-
0.6784313725490196
|
|
1065
|
-
],
|
|
1066
|
-
"alpha": 1,
|
|
1067
|
-
"hex": "#f4acad"
|
|
1068
|
-
},
|
|
1069
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 250: Interactive components.",
|
|
1070
|
-
"$extensions": {
|
|
1071
|
-
"com.figma": {
|
|
1072
|
-
"hiddenFromPublishing": false,
|
|
1073
|
-
"scopes": [
|
|
1074
|
-
"ALL_SCOPES"
|
|
1075
|
-
],
|
|
1076
|
-
"codeSyntax": {
|
|
1077
|
-
"WEB": "var(--danger-250)"
|
|
1078
|
-
}
|
|
1079
|
-
}
|
|
1080
|
-
}
|
|
1081
|
-
},
|
|
1082
|
-
"300": {
|
|
1083
|
-
"$type": "color",
|
|
1084
|
-
"$value": {
|
|
1085
|
-
"colorSpace": "srgb",
|
|
1086
|
-
"components": [
|
|
1087
|
-
0.9176470588235294,
|
|
1088
|
-
0.5725490196078431,
|
|
1089
|
-
0.5803921568627451
|
|
1090
|
-
],
|
|
1091
|
-
"alpha": 1,
|
|
1092
|
-
"hex": "#ea9294"
|
|
1093
|
-
},
|
|
1094
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 300: Interactive components.",
|
|
1095
|
-
"$extensions": {
|
|
1096
|
-
"com.figma": {
|
|
1097
|
-
"hiddenFromPublishing": false,
|
|
1098
|
-
"scopes": [
|
|
1099
|
-
"ALL_SCOPES"
|
|
1100
|
-
],
|
|
1101
|
-
"codeSyntax": {
|
|
1102
|
-
"WEB": "var(--danger-300)"
|
|
1103
|
-
}
|
|
1104
|
-
}
|
|
1105
|
-
}
|
|
1106
|
-
},
|
|
1107
|
-
"350": {
|
|
1108
|
-
"$type": "color",
|
|
1109
|
-
"$value": {
|
|
1110
|
-
"colorSpace": "srgb",
|
|
1111
|
-
"components": [
|
|
1112
|
-
0.8745098039215686,
|
|
1113
|
-
0.47058823529411764,
|
|
1114
|
-
0.48627450980392156
|
|
1115
|
-
],
|
|
1116
|
-
"alpha": 1,
|
|
1117
|
-
"hex": "#df787c"
|
|
1118
|
-
},
|
|
1119
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 350: Interactive components.",
|
|
1120
|
-
"$extensions": {
|
|
1121
|
-
"com.figma": {
|
|
1122
|
-
"hiddenFromPublishing": false,
|
|
1123
|
-
"scopes": [
|
|
1124
|
-
"ALL_SCOPES"
|
|
1125
|
-
],
|
|
1126
|
-
"codeSyntax": {
|
|
1127
|
-
"WEB": "var(--danger-350)"
|
|
1128
|
-
}
|
|
1129
|
-
}
|
|
1130
|
-
}
|
|
1131
|
-
},
|
|
1132
|
-
"400": {
|
|
1133
|
-
"$type": "color",
|
|
1134
|
-
"$value": {
|
|
1135
|
-
"colorSpace": "srgb",
|
|
1136
|
-
"components": [
|
|
1137
|
-
0.8274509803921568,
|
|
1138
|
-
0.36470588235294116,
|
|
1139
|
-
0.396078431372549
|
|
1140
|
-
],
|
|
1141
|
-
"alpha": 1,
|
|
1142
|
-
"hex": "#d35d65"
|
|
1143
|
-
},
|
|
1144
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 400: Interactive components.",
|
|
1145
|
-
"$extensions": {
|
|
1146
|
-
"com.figma": {
|
|
1147
|
-
"hiddenFromPublishing": false,
|
|
1148
|
-
"scopes": [
|
|
1149
|
-
"ALL_SCOPES"
|
|
1150
|
-
],
|
|
1151
|
-
"codeSyntax": {
|
|
1152
|
-
"WEB": "var(--danger-400)"
|
|
1153
|
-
}
|
|
1154
|
-
}
|
|
1155
|
-
}
|
|
1156
|
-
},
|
|
1157
|
-
"450": {
|
|
1158
|
-
"$type": "color",
|
|
1159
|
-
"$value": {
|
|
1160
|
-
"colorSpace": "srgb",
|
|
1161
|
-
"components": [
|
|
1162
|
-
0.803921568627451,
|
|
1163
|
-
0.3058823529411765,
|
|
1164
|
-
0.34901960784313724
|
|
1165
|
-
],
|
|
1166
|
-
"alpha": 1,
|
|
1167
|
-
"hex": "#cd4e59"
|
|
1168
|
-
},
|
|
1169
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 450: borders, separators and icons.",
|
|
1170
|
-
"$extensions": {
|
|
1171
|
-
"com.figma": {
|
|
1172
|
-
"hiddenFromPublishing": false,
|
|
1173
|
-
"scopes": [
|
|
1174
|
-
"ALL_SCOPES"
|
|
1175
|
-
],
|
|
1176
|
-
"codeSyntax": {
|
|
1177
|
-
"WEB": "var(--danger-450)"
|
|
1178
|
-
}
|
|
1179
|
-
}
|
|
1180
|
-
}
|
|
1181
|
-
},
|
|
1182
|
-
"500": {
|
|
1183
|
-
"$type": "color",
|
|
1184
|
-
"$value": {
|
|
1185
|
-
"colorSpace": "srgb",
|
|
1186
|
-
"components": [
|
|
1187
|
-
0.7764705882352941,
|
|
1188
|
-
0.24705882352941178,
|
|
1189
|
-
0.3058823529411765
|
|
1190
|
-
],
|
|
1191
|
-
"alpha": 1,
|
|
1192
|
-
"hex": "#c63f4e"
|
|
1193
|
-
},
|
|
1194
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 500: borders, separators and icons.",
|
|
1195
|
-
"$extensions": {
|
|
1196
|
-
"com.figma": {
|
|
1197
|
-
"hiddenFromPublishing": false,
|
|
1198
|
-
"scopes": [
|
|
1199
|
-
"ALL_SCOPES"
|
|
1200
|
-
],
|
|
1201
|
-
"codeSyntax": {
|
|
1202
|
-
"WEB": "var(--danger-500)"
|
|
1203
|
-
}
|
|
1204
|
-
}
|
|
1205
|
-
}
|
|
1206
|
-
},
|
|
1207
|
-
"550": {
|
|
1208
|
-
"$type": "color",
|
|
1209
|
-
"$value": {
|
|
1210
|
-
"colorSpace": "srgb",
|
|
1211
|
-
"components": [
|
|
1212
|
-
0.7490196078431373,
|
|
1213
|
-
0.17254901960784313,
|
|
1214
|
-
0.25882352941176473
|
|
1215
|
-
],
|
|
1216
|
-
"alpha": 1,
|
|
1217
|
-
"hex": "#bf2c42"
|
|
1218
|
-
},
|
|
1219
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 550: borders, separators and icons.",
|
|
1220
|
-
"$extensions": {
|
|
1221
|
-
"com.figma": {
|
|
1222
|
-
"hiddenFromPublishing": false,
|
|
1223
|
-
"scopes": [
|
|
1224
|
-
"ALL_SCOPES"
|
|
1225
|
-
],
|
|
1226
|
-
"codeSyntax": {
|
|
1227
|
-
"WEB": "var(--danger-550)"
|
|
1228
|
-
}
|
|
1229
|
-
}
|
|
1230
|
-
}
|
|
1231
|
-
},
|
|
1232
|
-
"600": {
|
|
135
|
+
"surface": {
|
|
1233
136
|
"$type": "color",
|
|
1234
|
-
"$value": {
|
|
1235
|
-
|
|
1236
|
-
"components": [
|
|
1237
|
-
0.7215686274509804,
|
|
1238
|
-
0.07058823529411765,
|
|
1239
|
-
0.21568627450980393
|
|
1240
|
-
],
|
|
1241
|
-
"alpha": 1,
|
|
1242
|
-
"hex": "#b81237"
|
|
1243
|
-
},
|
|
1244
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 600: borders, separators and icons.",
|
|
137
|
+
"$value": "{danger.50}",
|
|
138
|
+
"$description": "Danger (errors and destructive actions) — tinted background.",
|
|
1245
139
|
"$extensions": {
|
|
1246
140
|
"com.figma": {
|
|
1247
141
|
"hiddenFromPublishing": false,
|
|
@@ -1249,24 +143,15 @@
|
|
|
1249
143
|
"ALL_SCOPES"
|
|
1250
144
|
],
|
|
1251
145
|
"codeSyntax": {
|
|
1252
|
-
"WEB": "var(--danger-
|
|
146
|
+
"WEB": "var(--danger-surface)"
|
|
1253
147
|
}
|
|
1254
148
|
}
|
|
1255
149
|
}
|
|
1256
150
|
},
|
|
1257
|
-
"
|
|
151
|
+
"text": {
|
|
1258
152
|
"$type": "color",
|
|
1259
|
-
"$value": {
|
|
1260
|
-
|
|
1261
|
-
"components": [
|
|
1262
|
-
0.6,
|
|
1263
|
-
0.043137254901960784,
|
|
1264
|
-
0.16470588235294117
|
|
1265
|
-
],
|
|
1266
|
-
"alpha": 1,
|
|
1267
|
-
"hex": "#990b2a"
|
|
1268
|
-
},
|
|
1269
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 650: borders, separators and icons.",
|
|
153
|
+
"$value": "{danger.700}",
|
|
154
|
+
"$description": "Danger (errors and destructive actions) — readable text on the tint.",
|
|
1270
155
|
"$extensions": {
|
|
1271
156
|
"com.figma": {
|
|
1272
157
|
"hiddenFromPublishing": false,
|
|
@@ -1274,24 +159,15 @@
|
|
|
1274
159
|
"ALL_SCOPES"
|
|
1275
160
|
],
|
|
1276
161
|
"codeSyntax": {
|
|
1277
|
-
"WEB": "var(--danger-
|
|
162
|
+
"WEB": "var(--danger-text)"
|
|
1278
163
|
}
|
|
1279
164
|
}
|
|
1280
165
|
}
|
|
1281
166
|
},
|
|
1282
|
-
"
|
|
167
|
+
"border": {
|
|
1283
168
|
"$type": "color",
|
|
1284
|
-
"$value": {
|
|
1285
|
-
|
|
1286
|
-
"components": [
|
|
1287
|
-
0.48627450980392156,
|
|
1288
|
-
0.023529411764705882,
|
|
1289
|
-
0.12156862745098039
|
|
1290
|
-
],
|
|
1291
|
-
"alpha": 1,
|
|
1292
|
-
"hex": "#7c061f"
|
|
1293
|
-
},
|
|
1294
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 700: Solid colors.",
|
|
169
|
+
"$value": "{danger.300}",
|
|
170
|
+
"$description": "Danger (errors and destructive actions) — border and divider.",
|
|
1295
171
|
"$extensions": {
|
|
1296
172
|
"com.figma": {
|
|
1297
173
|
"hiddenFromPublishing": false,
|
|
@@ -1299,24 +175,15 @@
|
|
|
1299
175
|
"ALL_SCOPES"
|
|
1300
176
|
],
|
|
1301
177
|
"codeSyntax": {
|
|
1302
|
-
"WEB": "var(--danger-
|
|
178
|
+
"WEB": "var(--danger-border)"
|
|
1303
179
|
}
|
|
1304
180
|
}
|
|
1305
181
|
}
|
|
1306
182
|
},
|
|
1307
|
-
"
|
|
183
|
+
"solid": {
|
|
1308
184
|
"$type": "color",
|
|
1309
|
-
"$value": {
|
|
1310
|
-
|
|
1311
|
-
"components": [
|
|
1312
|
-
0.37254901960784315,
|
|
1313
|
-
0.00784313725490196,
|
|
1314
|
-
0.0784313725490196
|
|
1315
|
-
],
|
|
1316
|
-
"alpha": 1,
|
|
1317
|
-
"hex": "#5f0214"
|
|
1318
|
-
},
|
|
1319
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 750: Solid colors.",
|
|
185
|
+
"$value": "{danger.600}",
|
|
186
|
+
"$description": "Danger (errors and destructive actions) — solid fill for badges and icons.",
|
|
1320
187
|
"$extensions": {
|
|
1321
188
|
"com.figma": {
|
|
1322
189
|
"hiddenFromPublishing": false,
|
|
@@ -1324,24 +191,17 @@
|
|
|
1324
191
|
"ALL_SCOPES"
|
|
1325
192
|
],
|
|
1326
193
|
"codeSyntax": {
|
|
1327
|
-
"WEB": "var(--danger-
|
|
194
|
+
"WEB": "var(--danger-solid)"
|
|
1328
195
|
}
|
|
1329
196
|
}
|
|
1330
197
|
}
|
|
1331
|
-
}
|
|
1332
|
-
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
"info": {
|
|
201
|
+
"surface": {
|
|
1333
202
|
"$type": "color",
|
|
1334
|
-
"$value": {
|
|
1335
|
-
|
|
1336
|
-
"components": [
|
|
1337
|
-
0.26666666666666666,
|
|
1338
|
-
0,
|
|
1339
|
-
0.0392156862745098
|
|
1340
|
-
],
|
|
1341
|
-
"alpha": 1,
|
|
1342
|
-
"hex": "#44000a"
|
|
1343
|
-
},
|
|
1344
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 800: Solid colors.",
|
|
203
|
+
"$value": "{info.50}",
|
|
204
|
+
"$description": "Info (neutral information) — tinted background.",
|
|
1345
205
|
"$extensions": {
|
|
1346
206
|
"com.figma": {
|
|
1347
207
|
"hiddenFromPublishing": false,
|
|
@@ -1349,24 +209,15 @@
|
|
|
1349
209
|
"ALL_SCOPES"
|
|
1350
210
|
],
|
|
1351
211
|
"codeSyntax": {
|
|
1352
|
-
"WEB": "var(--
|
|
212
|
+
"WEB": "var(--info-surface)"
|
|
1353
213
|
}
|
|
1354
214
|
}
|
|
1355
215
|
}
|
|
1356
216
|
},
|
|
1357
|
-
"
|
|
217
|
+
"text": {
|
|
1358
218
|
"$type": "color",
|
|
1359
|
-
"$value": {
|
|
1360
|
-
|
|
1361
|
-
"components": [
|
|
1362
|
-
0.2,
|
|
1363
|
-
0,
|
|
1364
|
-
0.0196078431372549
|
|
1365
|
-
],
|
|
1366
|
-
"alpha": 1,
|
|
1367
|
-
"hex": "#330005"
|
|
1368
|
-
},
|
|
1369
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 850: text and high emphasis.",
|
|
219
|
+
"$value": "{info.700}",
|
|
220
|
+
"$description": "Info (neutral information) — readable text on the tint.",
|
|
1370
221
|
"$extensions": {
|
|
1371
222
|
"com.figma": {
|
|
1372
223
|
"hiddenFromPublishing": false,
|
|
@@ -1374,24 +225,15 @@
|
|
|
1374
225
|
"ALL_SCOPES"
|
|
1375
226
|
],
|
|
1376
227
|
"codeSyntax": {
|
|
1377
|
-
"WEB": "var(--
|
|
228
|
+
"WEB": "var(--info-text)"
|
|
1378
229
|
}
|
|
1379
230
|
}
|
|
1380
231
|
}
|
|
1381
232
|
},
|
|
1382
|
-
"
|
|
233
|
+
"border": {
|
|
1383
234
|
"$type": "color",
|
|
1384
|
-
"$value": {
|
|
1385
|
-
|
|
1386
|
-
"components": [
|
|
1387
|
-
0.13725490196078433,
|
|
1388
|
-
0,
|
|
1389
|
-
0.00784313725490196
|
|
1390
|
-
],
|
|
1391
|
-
"alpha": 1,
|
|
1392
|
-
"hex": "#230002"
|
|
1393
|
-
},
|
|
1394
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 900: text and high emphasis.",
|
|
235
|
+
"$value": "{info.300}",
|
|
236
|
+
"$description": "Info (neutral information) — border and divider.",
|
|
1395
237
|
"$extensions": {
|
|
1396
238
|
"com.figma": {
|
|
1397
239
|
"hiddenFromPublishing": false,
|
|
@@ -1399,24 +241,15 @@
|
|
|
1399
241
|
"ALL_SCOPES"
|
|
1400
242
|
],
|
|
1401
243
|
"codeSyntax": {
|
|
1402
|
-
"WEB": "var(--
|
|
244
|
+
"WEB": "var(--info-border)"
|
|
1403
245
|
}
|
|
1404
246
|
}
|
|
1405
247
|
}
|
|
1406
248
|
},
|
|
1407
|
-
"
|
|
249
|
+
"solid": {
|
|
1408
250
|
"$type": "color",
|
|
1409
|
-
"$value": {
|
|
1410
|
-
|
|
1411
|
-
"components": [
|
|
1412
|
-
0.0784313725490196,
|
|
1413
|
-
0,
|
|
1414
|
-
0.00392156862745098
|
|
1415
|
-
],
|
|
1416
|
-
"alpha": 1,
|
|
1417
|
-
"hex": "#140001"
|
|
1418
|
-
},
|
|
1419
|
-
"$description": "Danger state — errors and destructive or critical actions. Step 950: text and high emphasis.",
|
|
251
|
+
"$value": "{info.600}",
|
|
252
|
+
"$description": "Info (neutral information) — solid fill for badges and icons.",
|
|
1420
253
|
"$extensions": {
|
|
1421
254
|
"com.figma": {
|
|
1422
255
|
"hiddenFromPublishing": false,
|
|
@@ -1424,101 +257,17 @@
|
|
|
1424
257
|
"ALL_SCOPES"
|
|
1425
258
|
],
|
|
1426
259
|
"codeSyntax": {
|
|
1427
|
-
"WEB": "var(--
|
|
260
|
+
"WEB": "var(--info-solid)"
|
|
1428
261
|
}
|
|
1429
262
|
}
|
|
1430
263
|
}
|
|
1431
264
|
}
|
|
1432
265
|
},
|
|
1433
|
-
"
|
|
1434
|
-
"
|
|
1435
|
-
"$type": "color",
|
|
1436
|
-
"$value": {
|
|
1437
|
-
"colorSpace": "srgb",
|
|
1438
|
-
"components": [
|
|
1439
|
-
0.9137254901960784,
|
|
1440
|
-
0.9333333333333333,
|
|
1441
|
-
0.9686274509803922
|
|
1442
|
-
],
|
|
1443
|
-
"alpha": 1,
|
|
1444
|
-
"hex": "#e9eef7"
|
|
1445
|
-
},
|
|
1446
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 50: subtle backgrounds and surfaces.",
|
|
1447
|
-
"$extensions": {
|
|
1448
|
-
"com.figma": {
|
|
1449
|
-
"hiddenFromPublishing": false,
|
|
1450
|
-
"scopes": [
|
|
1451
|
-
"ALL_SCOPES"
|
|
1452
|
-
],
|
|
1453
|
-
"codeSyntax": {
|
|
1454
|
-
"WEB": "var(--info-50)"
|
|
1455
|
-
}
|
|
1456
|
-
}
|
|
1457
|
-
}
|
|
1458
|
-
},
|
|
1459
|
-
"100": {
|
|
1460
|
-
"$type": "color",
|
|
1461
|
-
"$value": {
|
|
1462
|
-
"colorSpace": "srgb",
|
|
1463
|
-
"components": [
|
|
1464
|
-
0.8313725490196079,
|
|
1465
|
-
0.8666666666666667,
|
|
1466
|
-
0.9215686274509803
|
|
1467
|
-
],
|
|
1468
|
-
"alpha": 1,
|
|
1469
|
-
"hex": "#d4ddeb"
|
|
1470
|
-
},
|
|
1471
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 100: subtle backgrounds and surfaces.",
|
|
1472
|
-
"$extensions": {
|
|
1473
|
-
"com.figma": {
|
|
1474
|
-
"hiddenFromPublishing": false,
|
|
1475
|
-
"scopes": [
|
|
1476
|
-
"ALL_SCOPES"
|
|
1477
|
-
],
|
|
1478
|
-
"codeSyntax": {
|
|
1479
|
-
"WEB": "var(--info-100)"
|
|
1480
|
-
}
|
|
1481
|
-
}
|
|
1482
|
-
}
|
|
1483
|
-
},
|
|
1484
|
-
"150": {
|
|
1485
|
-
"$type": "color",
|
|
1486
|
-
"$value": {
|
|
1487
|
-
"colorSpace": "srgb",
|
|
1488
|
-
"components": [
|
|
1489
|
-
0.7529411764705882,
|
|
1490
|
-
0.8,
|
|
1491
|
-
0.8784313725490196
|
|
1492
|
-
],
|
|
1493
|
-
"alpha": 1,
|
|
1494
|
-
"hex": "#c0cce0"
|
|
1495
|
-
},
|
|
1496
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 150: subtle backgrounds and surfaces.",
|
|
1497
|
-
"$extensions": {
|
|
1498
|
-
"com.figma": {
|
|
1499
|
-
"hiddenFromPublishing": false,
|
|
1500
|
-
"scopes": [
|
|
1501
|
-
"ALL_SCOPES"
|
|
1502
|
-
],
|
|
1503
|
-
"codeSyntax": {
|
|
1504
|
-
"WEB": "var(--info-150)"
|
|
1505
|
-
}
|
|
1506
|
-
}
|
|
1507
|
-
}
|
|
1508
|
-
},
|
|
1509
|
-
"200": {
|
|
266
|
+
"background": {
|
|
267
|
+
"default": {
|
|
1510
268
|
"$type": "color",
|
|
1511
|
-
"$value": {
|
|
1512
|
-
|
|
1513
|
-
"components": [
|
|
1514
|
-
0.6745098039215687,
|
|
1515
|
-
0.7333333333333333,
|
|
1516
|
-
0.8352941176470589
|
|
1517
|
-
],
|
|
1518
|
-
"alpha": 1,
|
|
1519
|
-
"hex": "#acbbd5"
|
|
1520
|
-
},
|
|
1521
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 200: Interactive components.",
|
|
269
|
+
"$value": "{nsw-grey.50}",
|
|
270
|
+
"$description": "Page canvas — the base background behind all content.",
|
|
1522
271
|
"$extensions": {
|
|
1523
272
|
"com.figma": {
|
|
1524
273
|
"hiddenFromPublishing": false,
|
|
@@ -1526,24 +275,15 @@
|
|
|
1526
275
|
"ALL_SCOPES"
|
|
1527
276
|
],
|
|
1528
277
|
"codeSyntax": {
|
|
1529
|
-
"WEB": "var(--
|
|
278
|
+
"WEB": "var(--background-default)"
|
|
1530
279
|
}
|
|
1531
280
|
}
|
|
1532
281
|
}
|
|
1533
282
|
},
|
|
1534
|
-
"
|
|
283
|
+
"subtle": {
|
|
1535
284
|
"$type": "color",
|
|
1536
|
-
"$value": {
|
|
1537
|
-
|
|
1538
|
-
"components": [
|
|
1539
|
-
0.5882352941176471,
|
|
1540
|
-
0.6627450980392157,
|
|
1541
|
-
0.8
|
|
1542
|
-
],
|
|
1543
|
-
"alpha": 1,
|
|
1544
|
-
"hex": "#96a9cc"
|
|
1545
|
-
},
|
|
1546
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 250: Interactive components.",
|
|
285
|
+
"$value": "{nsw-grey.100}",
|
|
286
|
+
"$description": "Subtly differentiated background for alternating or grouped sections.",
|
|
1547
287
|
"$extensions": {
|
|
1548
288
|
"com.figma": {
|
|
1549
289
|
"hiddenFromPublishing": false,
|
|
@@ -1551,24 +291,17 @@
|
|
|
1551
291
|
"ALL_SCOPES"
|
|
1552
292
|
],
|
|
1553
293
|
"codeSyntax": {
|
|
1554
|
-
"WEB": "var(--
|
|
294
|
+
"WEB": "var(--background-subtle)"
|
|
1555
295
|
}
|
|
1556
296
|
}
|
|
1557
297
|
}
|
|
1558
|
-
}
|
|
1559
|
-
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
"surface": {
|
|
301
|
+
"default": {
|
|
1560
302
|
"$type": "color",
|
|
1561
|
-
"$value": {
|
|
1562
|
-
|
|
1563
|
-
"components": [
|
|
1564
|
-
0.5019607843137255,
|
|
1565
|
-
0.596078431372549,
|
|
1566
|
-
0.7607843137254902
|
|
1567
|
-
],
|
|
1568
|
-
"alpha": 1,
|
|
1569
|
-
"hex": "#8098c2"
|
|
1570
|
-
},
|
|
1571
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 300: Interactive components.",
|
|
303
|
+
"$value": "{white}",
|
|
304
|
+
"$description": "Default container surface — cards, panels, and inputs on the page.",
|
|
1572
305
|
"$extensions": {
|
|
1573
306
|
"com.figma": {
|
|
1574
307
|
"hiddenFromPublishing": false,
|
|
@@ -1576,24 +309,15 @@
|
|
|
1576
309
|
"ALL_SCOPES"
|
|
1577
310
|
],
|
|
1578
311
|
"codeSyntax": {
|
|
1579
|
-
"WEB": "var(--
|
|
312
|
+
"WEB": "var(--surface-default)"
|
|
1580
313
|
}
|
|
1581
314
|
}
|
|
1582
315
|
}
|
|
1583
316
|
},
|
|
1584
|
-
"
|
|
317
|
+
"raised": {
|
|
1585
318
|
"$type": "color",
|
|
1586
|
-
"$value": {
|
|
1587
|
-
|
|
1588
|
-
"components": [
|
|
1589
|
-
0.4196078431372549,
|
|
1590
|
-
0.5254901960784314,
|
|
1591
|
-
0.7215686274509804
|
|
1592
|
-
],
|
|
1593
|
-
"alpha": 1,
|
|
1594
|
-
"hex": "#6b86b8"
|
|
1595
|
-
},
|
|
1596
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 350: Interactive components.",
|
|
319
|
+
"$value": "{white}",
|
|
320
|
+
"$description": "Raised surface for higher-elevation layers (menus, popovers, dialogs). Higher elevation reads lighter in dark mode.",
|
|
1597
321
|
"$extensions": {
|
|
1598
322
|
"com.figma": {
|
|
1599
323
|
"hiddenFromPublishing": false,
|
|
@@ -1601,24 +325,15 @@
|
|
|
1601
325
|
"ALL_SCOPES"
|
|
1602
326
|
],
|
|
1603
327
|
"codeSyntax": {
|
|
1604
|
-
"WEB": "var(--
|
|
328
|
+
"WEB": "var(--surface-raised)"
|
|
1605
329
|
}
|
|
1606
330
|
}
|
|
1607
331
|
}
|
|
1608
332
|
},
|
|
1609
|
-
"
|
|
333
|
+
"sunken": {
|
|
1610
334
|
"$type": "color",
|
|
1611
|
-
"$value": {
|
|
1612
|
-
|
|
1613
|
-
"components": [
|
|
1614
|
-
0.3411764705882353,
|
|
1615
|
-
0.4588235294117647,
|
|
1616
|
-
0.6823529411764706
|
|
1617
|
-
],
|
|
1618
|
-
"alpha": 1,
|
|
1619
|
-
"hex": "#5775ae"
|
|
1620
|
-
},
|
|
1621
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 400: Interactive components.",
|
|
335
|
+
"$value": "{nsw-grey.100}",
|
|
336
|
+
"$description": "Recessed surface for wells and inset regions.",
|
|
1622
337
|
"$extensions": {
|
|
1623
338
|
"com.figma": {
|
|
1624
339
|
"hiddenFromPublishing": false,
|
|
@@ -1626,24 +341,17 @@
|
|
|
1626
341
|
"ALL_SCOPES"
|
|
1627
342
|
],
|
|
1628
343
|
"codeSyntax": {
|
|
1629
|
-
"WEB": "var(--
|
|
344
|
+
"WEB": "var(--surface-sunken)"
|
|
1630
345
|
}
|
|
1631
346
|
}
|
|
1632
347
|
}
|
|
1633
|
-
}
|
|
1634
|
-
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
"text": {
|
|
351
|
+
"default": {
|
|
1635
352
|
"$type": "color",
|
|
1636
|
-
"$value": {
|
|
1637
|
-
|
|
1638
|
-
"components": [
|
|
1639
|
-
0.30196078431372547,
|
|
1640
|
-
0.4235294117647059,
|
|
1641
|
-
0.6627450980392157
|
|
1642
|
-
],
|
|
1643
|
-
"alpha": 1,
|
|
1644
|
-
"hex": "#4d6ca9"
|
|
1645
|
-
},
|
|
1646
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 450: borders, separators and icons.",
|
|
353
|
+
"$value": "{nsw-grey.900}",
|
|
354
|
+
"$description": "Primary body and heading text.",
|
|
1647
355
|
"$extensions": {
|
|
1648
356
|
"com.figma": {
|
|
1649
357
|
"hiddenFromPublishing": false,
|
|
@@ -1651,24 +359,15 @@
|
|
|
1651
359
|
"ALL_SCOPES"
|
|
1652
360
|
],
|
|
1653
361
|
"codeSyntax": {
|
|
1654
|
-
"WEB": "var(--
|
|
362
|
+
"WEB": "var(--text-default)"
|
|
1655
363
|
}
|
|
1656
364
|
}
|
|
1657
365
|
}
|
|
1658
366
|
},
|
|
1659
|
-
"
|
|
367
|
+
"muted": {
|
|
1660
368
|
"$type": "color",
|
|
1661
|
-
"$value": {
|
|
1662
|
-
|
|
1663
|
-
"components": [
|
|
1664
|
-
0.25882352941176473,
|
|
1665
|
-
0.39215686274509803,
|
|
1666
|
-
0.6431372549019608
|
|
1667
|
-
],
|
|
1668
|
-
"alpha": 1,
|
|
1669
|
-
"hex": "#4264a4"
|
|
1670
|
-
},
|
|
1671
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 500: borders, separators and icons.",
|
|
369
|
+
"$value": "{nsw-grey.600}",
|
|
370
|
+
"$description": "Secondary text — supporting copy, captions, metadata.",
|
|
1672
371
|
"$extensions": {
|
|
1673
372
|
"com.figma": {
|
|
1674
373
|
"hiddenFromPublishing": false,
|
|
@@ -1676,24 +375,15 @@
|
|
|
1676
375
|
"ALL_SCOPES"
|
|
1677
376
|
],
|
|
1678
377
|
"codeSyntax": {
|
|
1679
|
-
"WEB": "var(--
|
|
378
|
+
"WEB": "var(--text-muted)"
|
|
1680
379
|
}
|
|
1681
380
|
}
|
|
1682
381
|
}
|
|
1683
382
|
},
|
|
1684
|
-
"
|
|
383
|
+
"subtle": {
|
|
1685
384
|
"$type": "color",
|
|
1686
|
-
"$value": {
|
|
1687
|
-
|
|
1688
|
-
"components": [
|
|
1689
|
-
0.2196078431372549,
|
|
1690
|
-
0.3568627450980392,
|
|
1691
|
-
0.6196078431372549
|
|
1692
|
-
],
|
|
1693
|
-
"alpha": 1,
|
|
1694
|
-
"hex": "#385b9e"
|
|
1695
|
-
},
|
|
1696
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 550: borders, separators and icons.",
|
|
385
|
+
"$value": "{nsw-grey.500}",
|
|
386
|
+
"$description": "Tertiary text — placeholders and disabled labels. The mid-grey reads in both modes.",
|
|
1697
387
|
"$extensions": {
|
|
1698
388
|
"com.figma": {
|
|
1699
389
|
"hiddenFromPublishing": false,
|
|
@@ -1701,24 +391,15 @@
|
|
|
1701
391
|
"ALL_SCOPES"
|
|
1702
392
|
],
|
|
1703
393
|
"codeSyntax": {
|
|
1704
|
-
"WEB": "var(--
|
|
394
|
+
"WEB": "var(--text-subtle)"
|
|
1705
395
|
}
|
|
1706
396
|
}
|
|
1707
397
|
}
|
|
1708
398
|
},
|
|
1709
|
-
"
|
|
399
|
+
"inverse": {
|
|
1710
400
|
"$type": "color",
|
|
1711
|
-
"$value": {
|
|
1712
|
-
|
|
1713
|
-
"components": [
|
|
1714
|
-
0.1803921568627451,
|
|
1715
|
-
0.3215686274509804,
|
|
1716
|
-
0.6
|
|
1717
|
-
],
|
|
1718
|
-
"alpha": 1,
|
|
1719
|
-
"hex": "#2e5299"
|
|
1720
|
-
},
|
|
1721
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 600: borders, separators and icons.",
|
|
401
|
+
"$value": "{white}",
|
|
402
|
+
"$description": "Text and icons rendered on an action or solid fill.",
|
|
1722
403
|
"$extensions": {
|
|
1723
404
|
"com.figma": {
|
|
1724
405
|
"hiddenFromPublishing": false,
|
|
@@ -1726,24 +407,15 @@
|
|
|
1726
407
|
"ALL_SCOPES"
|
|
1727
408
|
],
|
|
1728
409
|
"codeSyntax": {
|
|
1729
|
-
"WEB": "var(--
|
|
410
|
+
"WEB": "var(--text-inverse)"
|
|
1730
411
|
}
|
|
1731
412
|
}
|
|
1732
413
|
}
|
|
1733
414
|
},
|
|
1734
|
-
"
|
|
415
|
+
"link": {
|
|
1735
416
|
"$type": "color",
|
|
1736
|
-
"$value": {
|
|
1737
|
-
|
|
1738
|
-
"components": [
|
|
1739
|
-
0.13725490196078433,
|
|
1740
|
-
0.25882352941176473,
|
|
1741
|
-
0.4980392156862745
|
|
1742
|
-
],
|
|
1743
|
-
"alpha": 1,
|
|
1744
|
-
"hex": "#23427f"
|
|
1745
|
-
},
|
|
1746
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 650: borders, separators and icons.",
|
|
417
|
+
"$value": "{nsw-blue.800}",
|
|
418
|
+
"$description": "Inline hyperlink text.",
|
|
1747
419
|
"$extensions": {
|
|
1748
420
|
"com.figma": {
|
|
1749
421
|
"hiddenFromPublishing": false,
|
|
@@ -1751,24 +423,17 @@
|
|
|
1751
423
|
"ALL_SCOPES"
|
|
1752
424
|
],
|
|
1753
425
|
"codeSyntax": {
|
|
1754
|
-
"WEB": "var(--
|
|
426
|
+
"WEB": "var(--text-link)"
|
|
1755
427
|
}
|
|
1756
428
|
}
|
|
1757
429
|
}
|
|
1758
|
-
}
|
|
1759
|
-
|
|
430
|
+
}
|
|
431
|
+
},
|
|
432
|
+
"border": {
|
|
433
|
+
"default": {
|
|
1760
434
|
"$type": "color",
|
|
1761
|
-
"$value": {
|
|
1762
|
-
|
|
1763
|
-
"components": [
|
|
1764
|
-
0.09803921568627451,
|
|
1765
|
-
0.2,
|
|
1766
|
-
0.4
|
|
1767
|
-
],
|
|
1768
|
-
"alpha": 1,
|
|
1769
|
-
"hex": "#193366"
|
|
1770
|
-
},
|
|
1771
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 700: Solid colors.",
|
|
435
|
+
"$value": "{nsw-grey.300}",
|
|
436
|
+
"$description": "Default border for inputs, cards, and dividers.",
|
|
1772
437
|
"$extensions": {
|
|
1773
438
|
"com.figma": {
|
|
1774
439
|
"hiddenFromPublishing": false,
|
|
@@ -1776,24 +441,15 @@
|
|
|
1776
441
|
"ALL_SCOPES"
|
|
1777
442
|
],
|
|
1778
443
|
"codeSyntax": {
|
|
1779
|
-
"WEB": "var(--
|
|
444
|
+
"WEB": "var(--border-default)"
|
|
1780
445
|
}
|
|
1781
446
|
}
|
|
1782
447
|
}
|
|
1783
448
|
},
|
|
1784
|
-
"
|
|
449
|
+
"subtle": {
|
|
1785
450
|
"$type": "color",
|
|
1786
|
-
"$value": {
|
|
1787
|
-
|
|
1788
|
-
"components": [
|
|
1789
|
-
0.06274509803921569,
|
|
1790
|
-
0.1450980392156863,
|
|
1791
|
-
0.30980392156862746
|
|
1792
|
-
],
|
|
1793
|
-
"alpha": 1,
|
|
1794
|
-
"hex": "#10254f"
|
|
1795
|
-
},
|
|
1796
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 750: Solid colors.",
|
|
451
|
+
"$value": "{nsw-grey.200}",
|
|
452
|
+
"$description": "Low-emphasis border for subtle separation.",
|
|
1797
453
|
"$extensions": {
|
|
1798
454
|
"com.figma": {
|
|
1799
455
|
"hiddenFromPublishing": false,
|
|
@@ -1801,24 +457,15 @@
|
|
|
1801
457
|
"ALL_SCOPES"
|
|
1802
458
|
],
|
|
1803
459
|
"codeSyntax": {
|
|
1804
|
-
"WEB": "var(--
|
|
460
|
+
"WEB": "var(--border-subtle)"
|
|
1805
461
|
}
|
|
1806
462
|
}
|
|
1807
463
|
}
|
|
1808
464
|
},
|
|
1809
|
-
"
|
|
465
|
+
"strong": {
|
|
1810
466
|
"$type": "color",
|
|
1811
|
-
"$value": {
|
|
1812
|
-
|
|
1813
|
-
"components": [
|
|
1814
|
-
0.027450980392156862,
|
|
1815
|
-
0.09019607843137255,
|
|
1816
|
-
0.2196078431372549
|
|
1817
|
-
],
|
|
1818
|
-
"alpha": 1,
|
|
1819
|
-
"hex": "#071738"
|
|
1820
|
-
},
|
|
1821
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 800: Solid colors.",
|
|
467
|
+
"$value": "{nsw-grey.500}",
|
|
468
|
+
"$description": "High-emphasis border for focus and selected states.",
|
|
1822
469
|
"$extensions": {
|
|
1823
470
|
"com.figma": {
|
|
1824
471
|
"hiddenFromPublishing": false,
|
|
@@ -1826,24 +473,17 @@
|
|
|
1826
473
|
"ALL_SCOPES"
|
|
1827
474
|
],
|
|
1828
475
|
"codeSyntax": {
|
|
1829
|
-
"WEB": "var(--
|
|
476
|
+
"WEB": "var(--border-strong)"
|
|
1830
477
|
}
|
|
1831
478
|
}
|
|
1832
479
|
}
|
|
1833
|
-
}
|
|
1834
|
-
|
|
480
|
+
}
|
|
481
|
+
},
|
|
482
|
+
"action": {
|
|
483
|
+
"default": {
|
|
1835
484
|
"$type": "color",
|
|
1836
|
-
"$value": {
|
|
1837
|
-
|
|
1838
|
-
"components": [
|
|
1839
|
-
0.01568627450980392,
|
|
1840
|
-
0.058823529411764705,
|
|
1841
|
-
0.16470588235294117
|
|
1842
|
-
],
|
|
1843
|
-
"alpha": 1,
|
|
1844
|
-
"hex": "#040f2a"
|
|
1845
|
-
},
|
|
1846
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 850: text and high emphasis.",
|
|
485
|
+
"$value": "{nsw-blue.800}",
|
|
486
|
+
"$description": "Primary interactive colour — buttons, links, key accents. NSW navy in light, brightened for contrast in dark.",
|
|
1847
487
|
"$extensions": {
|
|
1848
488
|
"com.figma": {
|
|
1849
489
|
"hiddenFromPublishing": false,
|
|
@@ -1851,24 +491,15 @@
|
|
|
1851
491
|
"ALL_SCOPES"
|
|
1852
492
|
],
|
|
1853
493
|
"codeSyntax": {
|
|
1854
|
-
"WEB": "var(--
|
|
494
|
+
"WEB": "var(--action-default)"
|
|
1855
495
|
}
|
|
1856
496
|
}
|
|
1857
497
|
}
|
|
1858
498
|
},
|
|
1859
|
-
"
|
|
499
|
+
"hover": {
|
|
1860
500
|
"$type": "color",
|
|
1861
|
-
"$value": {
|
|
1862
|
-
|
|
1863
|
-
"components": [
|
|
1864
|
-
0.00784313725490196,
|
|
1865
|
-
0.027450980392156862,
|
|
1866
|
-
0.10980392156862745
|
|
1867
|
-
],
|
|
1868
|
-
"alpha": 1,
|
|
1869
|
-
"hex": "#02071c"
|
|
1870
|
-
},
|
|
1871
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 900: text and high emphasis.",
|
|
501
|
+
"$value": "{nsw-blue.900}",
|
|
502
|
+
"$description": "Hover and active state for primary actions.",
|
|
1872
503
|
"$extensions": {
|
|
1873
504
|
"com.figma": {
|
|
1874
505
|
"hiddenFromPublishing": false,
|
|
@@ -1876,24 +507,15 @@
|
|
|
1876
507
|
"ALL_SCOPES"
|
|
1877
508
|
],
|
|
1878
509
|
"codeSyntax": {
|
|
1879
|
-
"WEB": "var(--
|
|
510
|
+
"WEB": "var(--action-hover)"
|
|
1880
511
|
}
|
|
1881
512
|
}
|
|
1882
513
|
}
|
|
1883
514
|
},
|
|
1884
|
-
"
|
|
515
|
+
"subtle": {
|
|
1885
516
|
"$type": "color",
|
|
1886
|
-
"$value": {
|
|
1887
|
-
|
|
1888
|
-
"components": [
|
|
1889
|
-
0,
|
|
1890
|
-
0.011764705882352941,
|
|
1891
|
-
0.058823529411764705
|
|
1892
|
-
],
|
|
1893
|
-
"alpha": 1,
|
|
1894
|
-
"hex": "#00030f"
|
|
1895
|
-
},
|
|
1896
|
-
"$description": "Informational state — neutral highlights, tips, and in-progress notices. Step 950: text and high emphasis.",
|
|
517
|
+
"$value": "{nsw-blue.50}",
|
|
518
|
+
"$description": "Tinted background for low-emphasis (ghost) actions.",
|
|
1897
519
|
"$extensions": {
|
|
1898
520
|
"com.figma": {
|
|
1899
521
|
"hiddenFromPublishing": false,
|
|
@@ -1901,7 +523,7 @@
|
|
|
1901
523
|
"ALL_SCOPES"
|
|
1902
524
|
],
|
|
1903
525
|
"codeSyntax": {
|
|
1904
|
-
"WEB": "var(--
|
|
526
|
+
"WEB": "var(--action-subtle)"
|
|
1905
527
|
}
|
|
1906
528
|
}
|
|
1907
529
|
}
|