@abgov/design-tokens 2.6.0 → 2.8.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/data/component-design-tokens/accordion-design-tokens.json +39 -12
- package/data/component-design-tokens/badge-design-tokens.json +3 -0
- package/data/component-design-tokens/button-design-tokens.json +20 -3
- package/data/component-design-tokens/callout-design-tokens.json +16 -0
- package/data/component-design-tokens/checkbox-design-tokens.json +1 -0
- package/data/component-design-tokens/container-design-tokens.json +4 -0
- package/data/component-design-tokens/drawer-design-tokens.json +8 -2
- package/data/component-design-tokens/dropdown-design-tokens.json +1 -0
- package/data/component-design-tokens/file-uploader-design-tokens.json +2 -0
- package/data/component-design-tokens/footer-design-tokens.json +9 -0
- package/data/component-design-tokens/header-design-tokens.json +14 -0
- package/data/component-design-tokens/icon-button-design-tokens.json +2 -0
- package/data/component-design-tokens/input-design-tokens.json +1 -0
- package/data/component-design-tokens/link-design-tokens.json +1 -0
- package/data/component-design-tokens/microsite-header-design-tokens.json +2 -0
- package/data/component-design-tokens/notification-banner-design-tokens.json +4 -0
- package/data/component-design-tokens/popover-design-tokens.json +1 -0
- package/data/component-design-tokens/progress-indicator-design-tokens.json +4 -1
- package/data/component-design-tokens/radio-design-tokens.json +13 -5
- package/data/component-design-tokens/table-design-tokens.json +3 -0
- package/data/component-design-tokens/temporary-notification-design-tokens.json +1 -0
- package/data/component-design-tokens/work-side-menu-design-tokens.json +13 -0
- package/data/goa-global-design-tokens.json +357 -132
- package/dist/dark-theme.css +206 -0
- package/dist/tokens.css +39 -1
- package/dist/tokens.scss +39 -1
- package/index.spec.js +4 -3
- package/lib/design-tokens.js +123 -2
- package/package.json +1 -1
|
@@ -2,19 +2,19 @@
|
|
|
2
2
|
"color": {
|
|
3
3
|
"interactive": {
|
|
4
4
|
"default": {
|
|
5
|
-
"value": "#006dcc",
|
|
5
|
+
"value": { "light": "#006dcc", "dark": "#6b9fc9" },
|
|
6
6
|
"type": "color"
|
|
7
7
|
},
|
|
8
8
|
"secondary": {
|
|
9
|
-
"value": "#e0f1ff",
|
|
9
|
+
"value": { "light": "#e0f1ff", "dark": "#1e2d3d" },
|
|
10
10
|
"type": "color"
|
|
11
11
|
},
|
|
12
12
|
"hover": {
|
|
13
|
-
"value": "#045092",
|
|
13
|
+
"value": { "light": "#045092", "dark": "#85b5d8" },
|
|
14
14
|
"type": "color"
|
|
15
15
|
},
|
|
16
16
|
"secondary-hover": {
|
|
17
|
-
"value": "#c5ddf6",
|
|
17
|
+
"value": { "light": "#c5ddf6", "dark": "#243648" },
|
|
18
18
|
"type": "color"
|
|
19
19
|
},
|
|
20
20
|
"disabled": {
|
|
@@ -22,19 +22,19 @@
|
|
|
22
22
|
"type": "color"
|
|
23
23
|
},
|
|
24
24
|
"error": {
|
|
25
|
-
"value": "#ec040b",
|
|
25
|
+
"value": { "light": "#ec040b", "dark": "#c97b7b" },
|
|
26
26
|
"type": "color"
|
|
27
27
|
},
|
|
28
28
|
"error-hover": {
|
|
29
|
-
"value": "#ba0000",
|
|
29
|
+
"value": { "light": "#ba0000", "dark": "#b06060" },
|
|
30
30
|
"type": "color"
|
|
31
31
|
},
|
|
32
32
|
"error-disabled": {
|
|
33
|
-
"value": "#f58185",
|
|
33
|
+
"value": { "light": "#f58185", "dark": "#6a4040" },
|
|
34
34
|
"type": "color"
|
|
35
35
|
},
|
|
36
36
|
"focus": {
|
|
37
|
-
"value": "#006dcc",
|
|
37
|
+
"value": { "light": "#006dcc", "dark": "#6b9fc9" },
|
|
38
38
|
"type": "color"
|
|
39
39
|
},
|
|
40
40
|
"focus-black": {
|
|
@@ -42,21 +42,21 @@
|
|
|
42
42
|
"type": "color"
|
|
43
43
|
},
|
|
44
44
|
"visited": {
|
|
45
|
-
"value": "#756693",
|
|
45
|
+
"value": { "light": "#756693", "dark": "#9b8ec9" },
|
|
46
46
|
"type": "color"
|
|
47
47
|
}
|
|
48
48
|
},
|
|
49
49
|
"brand": {
|
|
50
50
|
"default": {
|
|
51
|
-
"value": "#0081a2",
|
|
51
|
+
"value": { "light": "#0081a2", "dark": "#6bc9b8" },
|
|
52
52
|
"type": "color"
|
|
53
53
|
},
|
|
54
54
|
"dark": {
|
|
55
|
-
"value": "#005072",
|
|
55
|
+
"value": { "light": "#005072", "dark": "#90ddd0" },
|
|
56
56
|
"type": "color"
|
|
57
57
|
},
|
|
58
58
|
"light": {
|
|
59
|
-
"value": "#c8eefa",
|
|
59
|
+
"value": { "light": "#c8eefa", "dark": "#1a3030" },
|
|
60
60
|
"type": "color"
|
|
61
61
|
}
|
|
62
62
|
},
|
|
@@ -80,327 +80,466 @@
|
|
|
80
80
|
},
|
|
81
81
|
"info": {
|
|
82
82
|
"default": {
|
|
83
|
-
"value": "#0077ad",
|
|
83
|
+
"value": { "light": "#0077ad", "dark": "#6b9fc9" },
|
|
84
84
|
"type": "color"
|
|
85
85
|
},
|
|
86
86
|
"light": {
|
|
87
|
-
"value": "#ebf8ff",
|
|
87
|
+
"value": { "light": "#ebf8ff", "dark": "#1e2d3d" },
|
|
88
88
|
"type": "color"
|
|
89
89
|
},
|
|
90
90
|
"dark": {
|
|
91
|
-
"value": "#004a8f",
|
|
91
|
+
"value": { "light": "#004a8f", "dark": "#5080a0" },
|
|
92
92
|
"type": "color"
|
|
93
93
|
},
|
|
94
94
|
"background": {
|
|
95
|
-
"value": "#f4fdff",
|
|
95
|
+
"value": { "light": "#f4fdff", "dark": "#1e2830" },
|
|
96
96
|
"type": "color"
|
|
97
97
|
},
|
|
98
98
|
"border": {
|
|
99
|
-
"value": "#cbeaf7",
|
|
99
|
+
"value": { "light": "#cbeaf7", "dark": "#2a4050" },
|
|
100
100
|
"type": "color"
|
|
101
101
|
},
|
|
102
102
|
"text": {
|
|
103
|
-
"value": "#0077ad",
|
|
103
|
+
"value": { "light": "#0077ad", "dark": "#8ab4d4" },
|
|
104
104
|
"type": "color"
|
|
105
105
|
},
|
|
106
106
|
"textDark": {
|
|
107
|
-
"value": "#00527c",
|
|
107
|
+
"value": { "light": "#00527c", "dark": "#a0c8e0" },
|
|
108
108
|
"type": "color"
|
|
109
109
|
},
|
|
110
110
|
"textInverse": {
|
|
111
|
-
"value": "#ebf8ff",
|
|
111
|
+
"value": { "light": "#ebf8ff", "dark": "#1a2530" },
|
|
112
112
|
"type": "color"
|
|
113
113
|
}
|
|
114
114
|
},
|
|
115
115
|
"warning": {
|
|
116
116
|
"default": {
|
|
117
|
-
"value": "#f9ce2d",
|
|
117
|
+
"value": { "light": "#f9ce2d", "dark": "#c9a227" },
|
|
118
118
|
"type": "color"
|
|
119
119
|
},
|
|
120
120
|
"light": {
|
|
121
|
-
"value": "#fef2c8",
|
|
121
|
+
"value": { "light": "#fef2c8", "dark": "#2e2818" },
|
|
122
122
|
"type": "color"
|
|
123
123
|
},
|
|
124
124
|
"dark": {
|
|
125
|
-
"value": "#c28900",
|
|
125
|
+
"value": { "light": "#c28900", "dark": "#a08020" },
|
|
126
126
|
"type": "color"
|
|
127
127
|
},
|
|
128
128
|
"background": {
|
|
129
|
-
"value": "#fff6e5",
|
|
129
|
+
"value": { "light": "#fff6e5", "dark": "#302a16" },
|
|
130
130
|
"type": "color"
|
|
131
131
|
},
|
|
132
132
|
"border": {
|
|
133
|
-
"value": "#fde3a1",
|
|
133
|
+
"value": { "light": "#fde3a1", "dark": "#403518" },
|
|
134
134
|
"type": "color"
|
|
135
135
|
},
|
|
136
136
|
"text": {
|
|
137
|
-
"value": "#8d6500",
|
|
137
|
+
"value": { "light": "#8d6500", "dark": "#d4b040" },
|
|
138
138
|
"type": "color"
|
|
139
139
|
},
|
|
140
140
|
"textDark": {
|
|
141
|
-
"value": "#4d3700",
|
|
141
|
+
"value": { "light": "#4d3700", "dark": "#3a2a00" },
|
|
142
142
|
"type": "color"
|
|
143
143
|
}
|
|
144
144
|
},
|
|
145
145
|
"important": {
|
|
146
146
|
"default": {
|
|
147
|
-
"value": "#f9ce2d",
|
|
147
|
+
"value": { "light": "#f9ce2d", "dark": "#c9a227" },
|
|
148
148
|
"type": "color"
|
|
149
149
|
},
|
|
150
150
|
"light": {
|
|
151
|
-
"value": "#fef2c8",
|
|
151
|
+
"value": { "light": "#fef2c8", "dark": "#2e2818" },
|
|
152
152
|
"type": "color"
|
|
153
153
|
},
|
|
154
154
|
"dark": {
|
|
155
|
-
"value": "#c28900",
|
|
155
|
+
"value": { "light": "#c28900", "dark": "#a08020" },
|
|
156
156
|
"type": "color"
|
|
157
157
|
},
|
|
158
158
|
"background": {
|
|
159
|
-
"value": "#fde3a1",
|
|
159
|
+
"value": { "light": "#fde3a1", "dark": "#2e2818" },
|
|
160
160
|
"type": "color"
|
|
161
161
|
},
|
|
162
162
|
"border": {
|
|
163
|
-
"value": "#fde3a1",
|
|
163
|
+
"value": { "light": "#fde3a1", "dark": "#403518" },
|
|
164
164
|
"type": "color"
|
|
165
165
|
},
|
|
166
166
|
"text": {
|
|
167
|
-
"value": "#8d6500",
|
|
167
|
+
"value": { "light": "#8d6500", "dark": "#d4b040" },
|
|
168
168
|
"type": "color"
|
|
169
169
|
},
|
|
170
170
|
"text-dark": {
|
|
171
|
-
"value": "#4d3700",
|
|
171
|
+
"value": { "light": "#4d3700", "dark": "#3a2a00" },
|
|
172
172
|
"type": "color"
|
|
173
173
|
}
|
|
174
174
|
},
|
|
175
175
|
"emergency": {
|
|
176
176
|
"default": {
|
|
177
|
-
"value": "#da291c",
|
|
177
|
+
"value": { "light": "#da291c", "dark": "#c97b7b" },
|
|
178
178
|
"type": "color"
|
|
179
179
|
},
|
|
180
180
|
"light": {
|
|
181
|
-
"value": "#fdded9",
|
|
181
|
+
"value": { "light": "#fdded9", "dark": "#3d2525" },
|
|
182
182
|
"type": "color"
|
|
183
183
|
},
|
|
184
184
|
"dark": {
|
|
185
|
-
"value": "#a91a10",
|
|
185
|
+
"value": { "light": "#a91a10", "dark": "#c08080" },
|
|
186
186
|
"type": "color"
|
|
187
187
|
},
|
|
188
188
|
"background": {
|
|
189
|
-
"value": "#fff6f6",
|
|
189
|
+
"value": { "light": "#fff6f6", "dark": "#321e1e" },
|
|
190
190
|
"type": "color"
|
|
191
191
|
},
|
|
192
192
|
"border": {
|
|
193
|
-
"value": "#eeaea5",
|
|
193
|
+
"value": { "light": "#eeaea5", "dark": "#402828" },
|
|
194
194
|
"type": "color"
|
|
195
195
|
},
|
|
196
196
|
"text": {
|
|
197
|
-
"value": "#a91a10",
|
|
197
|
+
"value": { "light": "#a91a10", "dark": "#d49090" },
|
|
198
198
|
"type": "color"
|
|
199
199
|
},
|
|
200
200
|
"textDark": {
|
|
201
|
-
"value": "#8e1515",
|
|
201
|
+
"value": { "light": "#8e1515", "dark": "#e0a8a8" },
|
|
202
202
|
"type": "color"
|
|
203
203
|
},
|
|
204
204
|
"textInverse": {
|
|
205
|
-
"value": "#fff6f6",
|
|
205
|
+
"value": { "light": "#fff6f6", "dark": "#281a1a" },
|
|
206
206
|
"type": "color"
|
|
207
207
|
}
|
|
208
208
|
},
|
|
209
209
|
"success": {
|
|
210
210
|
"default": {
|
|
211
|
-
"value": "#006f4c",
|
|
211
|
+
"value": { "light": "#006f4c", "dark": "#7eb36a" },
|
|
212
212
|
"type": "color"
|
|
213
213
|
},
|
|
214
214
|
"light": {
|
|
215
|
-
"value": "#d8f7e6",
|
|
215
|
+
"value": { "light": "#d8f7e6", "dark": "#1e2e1a" },
|
|
216
216
|
"type": "color"
|
|
217
217
|
},
|
|
218
218
|
"dark": {
|
|
219
|
-
"value": "#00563a",
|
|
219
|
+
"value": { "light": "#00563a", "dark": "#5a8a48" },
|
|
220
220
|
"type": "color"
|
|
221
221
|
},
|
|
222
222
|
"background": {
|
|
223
|
-
"value": "#f4fff6",
|
|
223
|
+
"value": { "light": "#f4fff6", "dark": "#1e3220" },
|
|
224
224
|
"type": "color"
|
|
225
225
|
},
|
|
226
226
|
"border": {
|
|
227
|
-
"value": "#c4e3d2",
|
|
227
|
+
"value": { "light": "#c4e3d2", "dark": "#2a4020" },
|
|
228
228
|
"type": "color"
|
|
229
229
|
},
|
|
230
230
|
"text": {
|
|
231
|
-
"value": "#3a8050",
|
|
231
|
+
"value": { "light": "#3a8050", "dark": "#90c880" },
|
|
232
232
|
"type": "color"
|
|
233
233
|
},
|
|
234
234
|
"textDark": {
|
|
235
|
-
"value": "#355147",
|
|
235
|
+
"value": { "light": "#355147", "dark": "#a8d8a0" },
|
|
236
236
|
"type": "color"
|
|
237
237
|
},
|
|
238
238
|
"textInverse": {
|
|
239
|
-
"value": "#edfcf0",
|
|
239
|
+
"value": { "light": "#edfcf0", "dark": "#1a2818" },
|
|
240
240
|
"type": "color"
|
|
241
241
|
}
|
|
242
242
|
},
|
|
243
243
|
"critical": {
|
|
244
244
|
"default": {
|
|
245
|
-
"value": "#171d23",
|
|
245
|
+
"value": { "light": "#171d23", "dark": "#d4d4d4" },
|
|
246
246
|
"type": "color"
|
|
247
247
|
}
|
|
248
248
|
},
|
|
249
249
|
"greyscale": {
|
|
250
250
|
"50": {
|
|
251
|
-
"value": "#f8f8f8",
|
|
251
|
+
"value": { "light": "#f8f8f8", "dark": "#262626" },
|
|
252
252
|
"type": "color"
|
|
253
253
|
},
|
|
254
254
|
"100": {
|
|
255
|
-
"value": "#f2f0f0",
|
|
255
|
+
"value": { "light": "#f2f0f0", "dark": "#2a2a2a" },
|
|
256
256
|
"type": "color"
|
|
257
257
|
},
|
|
258
258
|
"150": {
|
|
259
|
-
"value": "#e9e9e9",
|
|
259
|
+
"value": { "light": "#e9e9e9", "dark": "#333333" },
|
|
260
260
|
"type": "color"
|
|
261
261
|
},
|
|
262
262
|
"200": {
|
|
263
|
-
"value": "#cdcdcd",
|
|
263
|
+
"value": { "light": "#cdcdcd", "dark": "#3d3d3d" },
|
|
264
264
|
"type": "color"
|
|
265
265
|
},
|
|
266
266
|
"300": {
|
|
267
|
-
"value": "#b1b1b1",
|
|
267
|
+
"value": { "light": "#b1b1b1", "dark": "#4d4d4d" },
|
|
268
268
|
"type": "color"
|
|
269
269
|
},
|
|
270
270
|
"400": {
|
|
271
|
-
"value": "#9f9f9f",
|
|
271
|
+
"value": { "light": "#9f9f9f", "dark": "#6a6a6a" },
|
|
272
272
|
"type": "color"
|
|
273
273
|
},
|
|
274
274
|
"500": {
|
|
275
|
-
"value": "#808080",
|
|
275
|
+
"value": { "light": "#808080", "dark": "#858585" },
|
|
276
276
|
"type": "color"
|
|
277
277
|
},
|
|
278
278
|
"600": {
|
|
279
|
-
"value": "#6f6f6f",
|
|
279
|
+
"value": { "light": "#6f6f6f", "dark": "#999999" },
|
|
280
280
|
"type": "color"
|
|
281
281
|
},
|
|
282
282
|
"700": {
|
|
283
|
-
"value": "#4d4d4d",
|
|
283
|
+
"value": { "light": "#4d4d4d", "dark": "#b0b0b0" },
|
|
284
284
|
"type": "color"
|
|
285
285
|
},
|
|
286
286
|
"800": {
|
|
287
|
-
"value": "#353535",
|
|
287
|
+
"value": { "light": "#353535", "dark": "#b8b8b8" },
|
|
288
288
|
"type": "color"
|
|
289
289
|
},
|
|
290
290
|
"black": {
|
|
291
|
-
"value": "#000000",
|
|
291
|
+
"value": { "light": "#000000", "dark": "#d4d4d4" },
|
|
292
292
|
"type": "color"
|
|
293
293
|
},
|
|
294
294
|
"white": {
|
|
295
|
-
"value": "#ffffff",
|
|
295
|
+
"value": { "light": "#ffffff", "dark": "#1e1e1e" },
|
|
296
|
+
"type": "color"
|
|
297
|
+
}
|
|
298
|
+
},
|
|
299
|
+
"surface": {
|
|
300
|
+
"0": {
|
|
301
|
+
"value": { "light": "#f8f8f8", "dark": "#1a1a1a" },
|
|
302
|
+
"type": "color",
|
|
303
|
+
"description": "Surface scale - lowest elevation"
|
|
304
|
+
},
|
|
305
|
+
"50": {
|
|
306
|
+
"value": { "light": "#ffffff", "dark": "#1e1e1e" },
|
|
307
|
+
"type": "color"
|
|
308
|
+
},
|
|
309
|
+
"100": {
|
|
310
|
+
"value": { "light": "#ffffff", "dark": "#232323" },
|
|
311
|
+
"type": "color"
|
|
312
|
+
},
|
|
313
|
+
"150": {
|
|
314
|
+
"value": { "light": "#f8f8f8", "dark": "#252525" },
|
|
315
|
+
"type": "color"
|
|
316
|
+
},
|
|
317
|
+
"200": {
|
|
318
|
+
"value": { "light": "#f8f8f8", "dark": "#262626" },
|
|
319
|
+
"type": "color"
|
|
320
|
+
},
|
|
321
|
+
"250": {
|
|
322
|
+
"value": { "light": "#f2f0f0", "dark": "#292929" },
|
|
323
|
+
"type": "color"
|
|
324
|
+
},
|
|
325
|
+
"300": {
|
|
326
|
+
"value": { "light": "#ffffff", "dark": "#2e2e2e" },
|
|
327
|
+
"type": "color"
|
|
328
|
+
},
|
|
329
|
+
"350": {
|
|
330
|
+
"value": { "light": "#f2f0f0", "dark": "#333333" },
|
|
331
|
+
"type": "color"
|
|
332
|
+
},
|
|
333
|
+
"400": {
|
|
334
|
+
"value": { "light": "#f8f8f8", "dark": "#383838" },
|
|
335
|
+
"type": "color",
|
|
336
|
+
"description": "Surface scale - highest elevation"
|
|
337
|
+
},
|
|
338
|
+
"page": {
|
|
339
|
+
"value": "{color.surface.0}",
|
|
340
|
+
"type": "color"
|
|
341
|
+
},
|
|
342
|
+
"default": {
|
|
343
|
+
"value": "{color.surface.50}",
|
|
344
|
+
"type": "color"
|
|
345
|
+
},
|
|
346
|
+
"card": {
|
|
347
|
+
"value": "{color.surface.100}",
|
|
348
|
+
"type": "color"
|
|
349
|
+
},
|
|
350
|
+
"section": {
|
|
351
|
+
"value": "{color.surface.150}",
|
|
352
|
+
"type": "color"
|
|
353
|
+
},
|
|
354
|
+
"input": {
|
|
355
|
+
"value": "{color.surface.200}",
|
|
356
|
+
"type": "color"
|
|
357
|
+
},
|
|
358
|
+
"content-body": {
|
|
359
|
+
"value": "{color.surface.250}",
|
|
360
|
+
"type": "color"
|
|
361
|
+
},
|
|
362
|
+
"widget": {
|
|
363
|
+
"value": "{color.surface.300}",
|
|
364
|
+
"type": "color"
|
|
365
|
+
},
|
|
366
|
+
"heading": {
|
|
367
|
+
"value": "{color.surface.350}",
|
|
368
|
+
"type": "color"
|
|
369
|
+
},
|
|
370
|
+
"item": {
|
|
371
|
+
"value": "{color.surface.400}",
|
|
372
|
+
"type": "color"
|
|
373
|
+
},
|
|
374
|
+
"table-data": {
|
|
375
|
+
"value": { "light": "#ffffff", "dark": "#2c2c2c" },
|
|
376
|
+
"type": "color"
|
|
377
|
+
},
|
|
378
|
+
"container-heading": {
|
|
379
|
+
"value": { "light": "#f2f0f0", "dark": "#353535" },
|
|
380
|
+
"type": "color"
|
|
381
|
+
},
|
|
382
|
+
"popover": {
|
|
383
|
+
"value": { "light": "#ffffff", "dark": "#242424" },
|
|
384
|
+
"type": "color"
|
|
385
|
+
},
|
|
386
|
+
"app-header": {
|
|
387
|
+
"value": { "light": "#ffffff", "dark": "#222222" },
|
|
388
|
+
"type": "color"
|
|
389
|
+
},
|
|
390
|
+
"card-hover": {
|
|
391
|
+
"value": { "light": "#f8f8f8", "dark": "#2e2e2e" },
|
|
392
|
+
"type": "color"
|
|
393
|
+
},
|
|
394
|
+
"widget-hover": {
|
|
395
|
+
"value": { "light": "#f8f8f8", "dark": "#3a3a3a" },
|
|
296
396
|
"type": "color"
|
|
397
|
+
},
|
|
398
|
+
"heading-hover": {
|
|
399
|
+
"value": { "light": "#e9e9e9", "dark": "#3f3f3f" },
|
|
400
|
+
"type": "color"
|
|
401
|
+
},
|
|
402
|
+
"item-hover": {
|
|
403
|
+
"value": { "light": "#f2f0f0", "dark": "#444444" },
|
|
404
|
+
"type": "color"
|
|
405
|
+
}
|
|
406
|
+
},
|
|
407
|
+
"static": {
|
|
408
|
+
"white": {
|
|
409
|
+
"value": "#ffffff",
|
|
410
|
+
"type": "color",
|
|
411
|
+
"description": "Static white - never flips, for white pigment on colored backgrounds"
|
|
297
412
|
}
|
|
298
413
|
},
|
|
299
414
|
"extended": {
|
|
300
415
|
"sky": {
|
|
301
416
|
"default": {
|
|
302
|
-
"value": "#90ebe7",
|
|
417
|
+
"value": { "light": "#90ebe7", "dark": "#5cbfba" },
|
|
303
418
|
"type": "color"
|
|
304
419
|
},
|
|
305
420
|
"light": {
|
|
306
|
-
"value": "#e2f9f8",
|
|
421
|
+
"value": { "light": "#e2f9f8", "dark": "#1c3a39" },
|
|
307
422
|
"type": "color"
|
|
308
423
|
},
|
|
309
424
|
"border": {
|
|
310
|
-
"value": "#bff0ee",
|
|
425
|
+
"value": { "light": "#bff0ee", "dark": "#2c5b59" },
|
|
311
426
|
"type": "color"
|
|
312
427
|
},
|
|
313
428
|
"text": {
|
|
429
|
+
"value": { "light": "#093937", "dark": "#bff0ee" },
|
|
430
|
+
"type": "color"
|
|
431
|
+
},
|
|
432
|
+
"text-dark": {
|
|
314
433
|
"value": "#093937",
|
|
315
434
|
"type": "color"
|
|
316
435
|
}
|
|
317
436
|
},
|
|
318
437
|
"pasture": {
|
|
319
438
|
"default": {
|
|
320
|
-
"value": "#afe274",
|
|
439
|
+
"value": { "light": "#afe274", "dark": "#7fb050" },
|
|
321
440
|
"type": "color"
|
|
322
441
|
},
|
|
323
442
|
"light": {
|
|
324
|
-
"value": "#f0f59b",
|
|
443
|
+
"value": { "light": "#f0f59b", "dark": "#2d3520" },
|
|
325
444
|
"type": "color"
|
|
326
445
|
},
|
|
327
446
|
"border": {
|
|
328
|
-
"value": "#dee563",
|
|
447
|
+
"value": { "light": "#dee563", "dark": "#5a6230" },
|
|
329
448
|
"type": "color"
|
|
330
449
|
},
|
|
331
450
|
"text": {
|
|
451
|
+
"value": { "light": "#174c38", "dark": "#a9d9a3" },
|
|
452
|
+
"type": "color"
|
|
453
|
+
},
|
|
454
|
+
"text-dark": {
|
|
332
455
|
"value": "#174c38",
|
|
333
456
|
"type": "color"
|
|
334
457
|
}
|
|
335
458
|
},
|
|
336
459
|
"sunset": {
|
|
337
460
|
"default": {
|
|
338
|
-
"value": "#f7ac71",
|
|
461
|
+
"value": { "light": "#f7ac71", "dark": "#d18a4d" },
|
|
339
462
|
"type": "color"
|
|
340
463
|
},
|
|
341
464
|
"light": {
|
|
342
|
-
"value": "#fcefd5",
|
|
465
|
+
"value": { "light": "#fcefd5", "dark": "#3a2c1a" },
|
|
343
466
|
"type": "color"
|
|
344
467
|
},
|
|
345
468
|
"border": {
|
|
346
|
-
"value": "#f5ddad",
|
|
469
|
+
"value": { "light": "#f5ddad", "dark": "#6e4a25" },
|
|
347
470
|
"type": "color"
|
|
348
471
|
},
|
|
349
472
|
"text": {
|
|
473
|
+
"value": { "light": "#7a141a", "dark": "#f5c8a0" },
|
|
474
|
+
"type": "color"
|
|
475
|
+
},
|
|
476
|
+
"text-dark": {
|
|
350
477
|
"value": "#7a141a",
|
|
351
478
|
"type": "color"
|
|
352
479
|
}
|
|
353
480
|
},
|
|
354
481
|
"dawn": {
|
|
355
482
|
"default": {
|
|
356
|
-
"value": "#ff9ac1",
|
|
483
|
+
"value": { "light": "#ff9ac1", "dark": "#d97394" },
|
|
357
484
|
"type": "color"
|
|
358
485
|
},
|
|
359
486
|
"light": {
|
|
360
|
-
"value": "#f4cde4",
|
|
487
|
+
"value": { "light": "#f4cde4", "dark": "#3a1f2c" },
|
|
361
488
|
"type": "color"
|
|
362
489
|
},
|
|
363
490
|
"border": {
|
|
364
|
-
"value": "#e9b8d5",
|
|
491
|
+
"value": { "light": "#e9b8d5", "dark": "#5e3340" },
|
|
365
492
|
"type": "color"
|
|
366
493
|
},
|
|
367
494
|
"text": {
|
|
495
|
+
"value": { "light": "#310c46", "dark": "#e9b8d5" },
|
|
496
|
+
"type": "color"
|
|
497
|
+
},
|
|
498
|
+
"text-dark": {
|
|
368
499
|
"value": "#310c46",
|
|
369
500
|
"type": "color"
|
|
370
501
|
}
|
|
371
502
|
},
|
|
372
503
|
"lilac": {
|
|
373
504
|
"default": {
|
|
374
|
-
"value": "#d4c2ff",
|
|
505
|
+
"value": { "light": "#d4c2ff", "dark": "#9c8bcc" },
|
|
375
506
|
"type": "color"
|
|
376
507
|
},
|
|
377
508
|
"light": {
|
|
378
|
-
"value": "#efe2fb",
|
|
509
|
+
"value": { "light": "#efe2fb", "dark": "#2a223d" },
|
|
379
510
|
"type": "color"
|
|
380
511
|
},
|
|
381
512
|
"border": {
|
|
382
|
-
"value": "#e2d2fd",
|
|
513
|
+
"value": { "light": "#e2d2fd", "dark": "#4a3d65" },
|
|
383
514
|
"type": "color"
|
|
384
515
|
},
|
|
385
516
|
"text": {
|
|
517
|
+
"value": { "light": "#151d83", "dark": "#c4b8e8" },
|
|
518
|
+
"type": "color"
|
|
519
|
+
},
|
|
520
|
+
"text-dark": {
|
|
386
521
|
"value": "#151d83",
|
|
387
522
|
"type": "color"
|
|
388
523
|
}
|
|
389
524
|
},
|
|
390
525
|
"prairie": {
|
|
391
526
|
"default": {
|
|
392
|
-
"value": "#ffda77",
|
|
527
|
+
"value": { "light": "#ffda77", "dark": "#d4ad4a" },
|
|
393
528
|
"type": "color"
|
|
394
529
|
},
|
|
395
530
|
"light": {
|
|
396
|
-
"value": "#fff2c8",
|
|
531
|
+
"value": { "light": "#fff2c8", "dark": "#3a2f1a" },
|
|
397
532
|
"type": "color"
|
|
398
533
|
},
|
|
399
534
|
"border": {
|
|
400
|
-
"value": "#ecd386",
|
|
535
|
+
"value": { "light": "#ecd386", "dark": "#5e4825" },
|
|
401
536
|
"type": "color"
|
|
402
537
|
},
|
|
403
538
|
"text": {
|
|
539
|
+
"value": { "light": "#47372a", "dark": "#e8d8a0" },
|
|
540
|
+
"type": "color"
|
|
541
|
+
},
|
|
542
|
+
"text-dark": {
|
|
404
543
|
"value": "#47372a",
|
|
405
544
|
"type": "color"
|
|
406
545
|
}
|
|
@@ -422,9 +561,9 @@
|
|
|
422
561
|
},
|
|
423
562
|
"background": {
|
|
424
563
|
"modal": {
|
|
425
|
-
"value": "50%",
|
|
564
|
+
"value": { "light": "50%", "dark": "70%" },
|
|
426
565
|
"type": "opacity",
|
|
427
|
-
"description": "
|
|
566
|
+
"description": "Opacity for black scrim behind modal to disable the rest of the screen (light: 50%, dark: 70%)"
|
|
428
567
|
},
|
|
429
568
|
"loading": {
|
|
430
569
|
"value": "90%",
|
|
@@ -631,103 +770,188 @@
|
|
|
631
770
|
"shadow": {
|
|
632
771
|
"100": {
|
|
633
772
|
"value": {
|
|
634
|
-
"
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
773
|
+
"light": {
|
|
774
|
+
"x": "0",
|
|
775
|
+
"y": "1",
|
|
776
|
+
"blur": "0",
|
|
777
|
+
"spread": "0",
|
|
778
|
+
"color": "#1a1a1a12",
|
|
779
|
+
"type": "dropShadow"
|
|
780
|
+
},
|
|
781
|
+
"dark": {
|
|
782
|
+
"x": "0",
|
|
783
|
+
"y": "1",
|
|
784
|
+
"blur": "0",
|
|
785
|
+
"spread": "0",
|
|
786
|
+
"color": "rgba(255,255,255,0.05)",
|
|
787
|
+
"type": "dropShadow"
|
|
788
|
+
}
|
|
640
789
|
},
|
|
641
790
|
"type": "boxShadow"
|
|
642
791
|
},
|
|
643
792
|
"150": {
|
|
644
793
|
"value": {
|
|
645
|
-
"
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
794
|
+
"light": {
|
|
795
|
+
"x": "0",
|
|
796
|
+
"y": "1",
|
|
797
|
+
"blur": "0",
|
|
798
|
+
"spread": "0",
|
|
799
|
+
"color": "#1a1a1a40",
|
|
800
|
+
"type": "dropShadow"
|
|
801
|
+
},
|
|
802
|
+
"dark": {
|
|
803
|
+
"x": "0",
|
|
804
|
+
"y": "1",
|
|
805
|
+
"blur": "0",
|
|
806
|
+
"spread": "0",
|
|
807
|
+
"color": "rgba(255,255,255,0.08)",
|
|
808
|
+
"type": "dropShadow"
|
|
809
|
+
}
|
|
651
810
|
},
|
|
652
811
|
"type": "boxShadow"
|
|
653
812
|
},
|
|
654
813
|
"200": {
|
|
655
814
|
"value": {
|
|
656
|
-
"
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
815
|
+
"light": {
|
|
816
|
+
"x": "0",
|
|
817
|
+
"y": "3",
|
|
818
|
+
"blur": "1",
|
|
819
|
+
"spread": "-1",
|
|
820
|
+
"color": "#1a1a1a12",
|
|
821
|
+
"type": "dropShadow"
|
|
822
|
+
},
|
|
823
|
+
"dark": {
|
|
824
|
+
"x": "0",
|
|
825
|
+
"y": "3",
|
|
826
|
+
"blur": "1",
|
|
827
|
+
"spread": "-1",
|
|
828
|
+
"color": "rgba(255,255,255,0.05)",
|
|
829
|
+
"type": "dropShadow"
|
|
830
|
+
}
|
|
662
831
|
},
|
|
663
832
|
"type": "boxShadow"
|
|
664
833
|
},
|
|
665
834
|
"300": {
|
|
666
835
|
"value": {
|
|
667
|
-
"
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
836
|
+
"light": {
|
|
837
|
+
"x": "0",
|
|
838
|
+
"y": "4",
|
|
839
|
+
"blur": "6",
|
|
840
|
+
"spread": "-2",
|
|
841
|
+
"color": "#1a1a1a33",
|
|
842
|
+
"type": "dropShadow"
|
|
843
|
+
},
|
|
844
|
+
"dark": {
|
|
845
|
+
"x": "0",
|
|
846
|
+
"y": "4",
|
|
847
|
+
"blur": "6",
|
|
848
|
+
"spread": "-2",
|
|
849
|
+
"color": "rgba(0,0,0,0.4)",
|
|
850
|
+
"type": "dropShadow"
|
|
851
|
+
}
|
|
673
852
|
},
|
|
674
853
|
"type": "boxShadow"
|
|
675
854
|
},
|
|
676
855
|
"400": {
|
|
677
856
|
"value": {
|
|
678
|
-
"
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
857
|
+
"light": {
|
|
858
|
+
"x": "0",
|
|
859
|
+
"y": "8",
|
|
860
|
+
"blur": "16",
|
|
861
|
+
"spread": "-4",
|
|
862
|
+
"color": "#1a1a1a38",
|
|
863
|
+
"type": "dropShadow"
|
|
864
|
+
},
|
|
865
|
+
"dark": {
|
|
866
|
+
"x": "0",
|
|
867
|
+
"y": "8",
|
|
868
|
+
"blur": "16",
|
|
869
|
+
"spread": "-4",
|
|
870
|
+
"color": "rgba(0,0,0,0.5)",
|
|
871
|
+
"type": "dropShadow"
|
|
872
|
+
}
|
|
684
873
|
},
|
|
685
874
|
"type": "boxShadow"
|
|
686
875
|
},
|
|
687
876
|
"500": {
|
|
688
877
|
"value": {
|
|
689
|
-
"
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
878
|
+
"light": {
|
|
879
|
+
"x": "0",
|
|
880
|
+
"y": "12",
|
|
881
|
+
"blur": "20",
|
|
882
|
+
"spread": "-8",
|
|
883
|
+
"color": "#1a1a1a3d",
|
|
884
|
+
"type": "dropShadow"
|
|
885
|
+
},
|
|
886
|
+
"dark": {
|
|
887
|
+
"x": "0",
|
|
888
|
+
"y": "12",
|
|
889
|
+
"blur": "20",
|
|
890
|
+
"spread": "-8",
|
|
891
|
+
"color": "rgba(0,0,0,0.5)",
|
|
892
|
+
"type": "dropShadow"
|
|
893
|
+
}
|
|
695
894
|
},
|
|
696
895
|
"type": "boxShadow"
|
|
697
896
|
},
|
|
698
897
|
"600": {
|
|
699
898
|
"value": {
|
|
700
|
-
"
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
899
|
+
"light": {
|
|
900
|
+
"x": "0",
|
|
901
|
+
"y": "20",
|
|
902
|
+
"blur": "20",
|
|
903
|
+
"spread": "-8",
|
|
904
|
+
"color": "#1a1a1a47",
|
|
905
|
+
"type": "dropShadow"
|
|
906
|
+
},
|
|
907
|
+
"dark": {
|
|
908
|
+
"x": "0",
|
|
909
|
+
"y": "20",
|
|
910
|
+
"blur": "20",
|
|
911
|
+
"spread": "-8",
|
|
912
|
+
"color": "rgba(0,0,0,0.5)",
|
|
913
|
+
"type": "dropShadow"
|
|
914
|
+
}
|
|
706
915
|
},
|
|
707
916
|
"type": "boxShadow"
|
|
708
917
|
},
|
|
709
918
|
"modal": {
|
|
710
|
-
"value":
|
|
919
|
+
"value": {
|
|
920
|
+
"light": "0px 0px 4px 0px rgba(0,0,0,0.1), 0px 8px 40px 0px rgba(0,0,0,0.2)",
|
|
921
|
+
"dark": "0px 0px 4px 0px rgba(0,0,0,0.3), 0px 8px 40px 0px rgba(0,0,0,0.5)"
|
|
922
|
+
},
|
|
711
923
|
"type": "other",
|
|
712
924
|
"description": "Layered shadow with deep elevation"
|
|
713
925
|
},
|
|
714
926
|
"raised-light": {
|
|
715
|
-
"value":
|
|
927
|
+
"value": {
|
|
928
|
+
"light": "0px 12px 16px -4px rgba(16,29,40,0.08), 0px 4px 6px -2px rgba(16,29,40,0.03)",
|
|
929
|
+
"dark": "0px 12px 16px -4px rgba(0,0,0,0.3), 0px 4px 6px -2px rgba(0,0,0,0.15)"
|
|
930
|
+
},
|
|
716
931
|
"type": "other",
|
|
717
932
|
"description": "Subtle layered shadow with light elevation"
|
|
718
933
|
},
|
|
719
934
|
"raised-heavy": {
|
|
720
|
-
"value":
|
|
935
|
+
"value": {
|
|
936
|
+
"light": "0px 0px 1px 0px rgba(0,0,0,0.2), 0px 16px 32px -20px rgba(0,0,0,0.22)",
|
|
937
|
+
"dark": "0px 0px 1px 0px rgba(0,0,0,0.4), 0px 16px 32px -20px rgba(0,0,0,0.5)"
|
|
938
|
+
},
|
|
721
939
|
"type": "other",
|
|
722
940
|
"description": "Layered shadow with pronounced elevation"
|
|
723
941
|
},
|
|
724
942
|
"shallow-above": {
|
|
725
|
-
"value":
|
|
943
|
+
"value": {
|
|
944
|
+
"light": "0px -2px 16px 0px rgba(0,0,0,0.1)",
|
|
945
|
+
"dark": "0px -2px 16px 0px rgba(0,0,0,0.3)"
|
|
946
|
+
},
|
|
726
947
|
"type": "other",
|
|
727
948
|
"description": "Upward shadow with negative vertical offset"
|
|
728
949
|
},
|
|
729
950
|
"shallow-below": {
|
|
730
|
-
"value":
|
|
951
|
+
"value": {
|
|
952
|
+
"light": "0px 1px 8px 0px rgba(0,0,0,0.07)",
|
|
953
|
+
"dark": "0px 1px 8px 0px rgba(0,0,0,0.2)"
|
|
954
|
+
},
|
|
731
955
|
"type": "other",
|
|
732
956
|
"description": "Downward shadow with positive vertical offset"
|
|
733
957
|
}
|
|
@@ -1343,13 +1567,14 @@
|
|
|
1343
1567
|
"type": "color"
|
|
1344
1568
|
},
|
|
1345
1569
|
"readonly": {
|
|
1346
|
-
"value": "#e1dedd",
|
|
1570
|
+
"value": { "light": "#e1dedd", "dark": "#3d3d3d" },
|
|
1347
1571
|
"type": "color"
|
|
1348
1572
|
}
|
|
1349
1573
|
},
|
|
1350
1574
|
"background": {
|
|
1351
1575
|
"default": {
|
|
1352
1576
|
"value": "{color.greyscale.white}",
|
|
1577
|
+
"dark": "var(--goa-color-surface-input)",
|
|
1353
1578
|
"type": "color"
|
|
1354
1579
|
},
|
|
1355
1580
|
"disabled": {
|
|
@@ -1361,7 +1586,7 @@
|
|
|
1361
1586
|
"type": "color"
|
|
1362
1587
|
},
|
|
1363
1588
|
"error-hover": {
|
|
1364
|
-
"value": "#f4c8c5",
|
|
1589
|
+
"value": { "light": "#f4c8c5", "dark": "#3a1818" },
|
|
1365
1590
|
"type": "color"
|
|
1366
1591
|
},
|
|
1367
1592
|
"readonly": {
|