@common-origin/design-system 2.18.0 → 2.19.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/dist/client.esm.js +954 -617
- package/dist/client.esm.js.map +1 -1
- package/dist/client.js +954 -617
- package/dist/client.js.map +1 -1
- package/dist/components/atoms/Chip/shared/types.d.ts +3 -1
- package/dist/components/atoms/Chip/shared/utils.d.ts +2 -3
- package/dist/data.esm.js +261 -14
- package/dist/data.esm.js.map +1 -1
- package/dist/data.js +261 -14
- package/dist/data.js.map +1 -1
- package/dist/lib/cssTokens.d.ts +14 -0
- package/dist/lib/cssVariables.d.ts +15 -0
- package/dist/lib/styleUtils.d.ts +23 -0
- package/dist/lib/tokenAliases.d.ts +13 -0
- package/dist/styles/tokens.d.ts +3174 -0
- package/dist/styles/tokens.json +257 -12
- package/dist/tokens/index.esm.js +261 -14
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +261 -14
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/styles/tokens.d.ts +3174 -0
- package/dist/tokens/types/tokens.d.ts +3 -1204
- package/dist/tokens.css +710 -430
- package/dist/types/tokens.d.ts +3 -1204
- package/package.json +4 -2
|
@@ -0,0 +1,3174 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated by npm run build:tokens.
|
|
3
|
+
*/
|
|
4
|
+
/** Every design token, by tier. Hover a token for when to use it. */
|
|
5
|
+
export type Tokens = {
|
|
6
|
+
base: {
|
|
7
|
+
border: {
|
|
8
|
+
/** Corner radius scale from 1 (2px) to 7 (32px); the key is the step, and circle makes a pill or circle. */
|
|
9
|
+
radius: {
|
|
10
|
+
'1': string;
|
|
11
|
+
'2': string;
|
|
12
|
+
'3': string;
|
|
13
|
+
'4': string;
|
|
14
|
+
'5': string;
|
|
15
|
+
'6': string;
|
|
16
|
+
'7': string;
|
|
17
|
+
circle: string;
|
|
18
|
+
};
|
|
19
|
+
/** Border line styles, keyed by their CSS name. */
|
|
20
|
+
style: {
|
|
21
|
+
solid: string;
|
|
22
|
+
dashed: string;
|
|
23
|
+
dotted: string;
|
|
24
|
+
};
|
|
25
|
+
/** Border width scale; the key is the width in pixels (2 is 0.125rem, 2px). */
|
|
26
|
+
width: {
|
|
27
|
+
'0': string;
|
|
28
|
+
'1': string;
|
|
29
|
+
'2': string;
|
|
30
|
+
'3': string;
|
|
31
|
+
'4': string;
|
|
32
|
+
'5': string;
|
|
33
|
+
'6': string;
|
|
34
|
+
'8': string;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
/** Shadow scale from 1 (subtle) to 6 (deepest), plus none; the key is the elevation step. */
|
|
38
|
+
shadow: {
|
|
39
|
+
'1': string;
|
|
40
|
+
'2': string;
|
|
41
|
+
'3': string;
|
|
42
|
+
'4': string;
|
|
43
|
+
'5': string;
|
|
44
|
+
'6': string;
|
|
45
|
+
none: string;
|
|
46
|
+
};
|
|
47
|
+
/** Stacking order: 1–5 are 10–50 for layers within the page, 6–8 are 1000 and up for overlays. */
|
|
48
|
+
zIndex: {
|
|
49
|
+
'0': string;
|
|
50
|
+
'1': string;
|
|
51
|
+
'2': string;
|
|
52
|
+
'3': string;
|
|
53
|
+
'4': string;
|
|
54
|
+
'5': string;
|
|
55
|
+
'6': string;
|
|
56
|
+
'7': string;
|
|
57
|
+
'8': string;
|
|
58
|
+
};
|
|
59
|
+
/** Opacity scale; the key is the percentage (50 is 0.5). */
|
|
60
|
+
opacity: {
|
|
61
|
+
'0': string;
|
|
62
|
+
'5': string;
|
|
63
|
+
'10': string;
|
|
64
|
+
'20': string;
|
|
65
|
+
'25': string;
|
|
66
|
+
'30': string;
|
|
67
|
+
'40': string;
|
|
68
|
+
'50': string;
|
|
69
|
+
'60': string;
|
|
70
|
+
'70': string;
|
|
71
|
+
'75': string;
|
|
72
|
+
'80': string;
|
|
73
|
+
'90': string;
|
|
74
|
+
'95': string;
|
|
75
|
+
'100': string;
|
|
76
|
+
};
|
|
77
|
+
/** The one dimension scale on the 4px grid; the key is the multiple of 4px (12 is 3rem, 48px). Replaces the parallel base.size and base.spacing scales (#188). */
|
|
78
|
+
dimension: {
|
|
79
|
+
'0': string;
|
|
80
|
+
'1': string;
|
|
81
|
+
'2': string;
|
|
82
|
+
'3': string;
|
|
83
|
+
'4': string;
|
|
84
|
+
'5': string;
|
|
85
|
+
'6': string;
|
|
86
|
+
'7': string;
|
|
87
|
+
'8': string;
|
|
88
|
+
'9': string;
|
|
89
|
+
'10': string;
|
|
90
|
+
'11': string;
|
|
91
|
+
'12': string;
|
|
92
|
+
'14': string;
|
|
93
|
+
'15': string;
|
|
94
|
+
'16': string;
|
|
95
|
+
'18': string;
|
|
96
|
+
'20': string;
|
|
97
|
+
'24': string;
|
|
98
|
+
'28': string;
|
|
99
|
+
'30': string;
|
|
100
|
+
'32': string;
|
|
101
|
+
'40': string;
|
|
102
|
+
'45': string;
|
|
103
|
+
'48': string;
|
|
104
|
+
'50': string;
|
|
105
|
+
'56': string;
|
|
106
|
+
'64': string;
|
|
107
|
+
'75': string;
|
|
108
|
+
'90': string;
|
|
109
|
+
'100': string;
|
|
110
|
+
'140': string;
|
|
111
|
+
'180': string;
|
|
112
|
+
'192': string;
|
|
113
|
+
};
|
|
114
|
+
/** Size keywords (auto, full, screen, min, max, fit). The numbered steps are deprecated aliases of base.dimension. */
|
|
115
|
+
size: {
|
|
116
|
+
/**
|
|
117
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.0`.
|
|
118
|
+
*/
|
|
119
|
+
'0': string;
|
|
120
|
+
/**
|
|
121
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.1`.
|
|
122
|
+
*/
|
|
123
|
+
'1': string;
|
|
124
|
+
/**
|
|
125
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.2`.
|
|
126
|
+
*/
|
|
127
|
+
'2': string;
|
|
128
|
+
/**
|
|
129
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.3`.
|
|
130
|
+
*/
|
|
131
|
+
'3': string;
|
|
132
|
+
/**
|
|
133
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.4`.
|
|
134
|
+
*/
|
|
135
|
+
'4': string;
|
|
136
|
+
/**
|
|
137
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.5`.
|
|
138
|
+
*/
|
|
139
|
+
'5': string;
|
|
140
|
+
/**
|
|
141
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.6`.
|
|
142
|
+
*/
|
|
143
|
+
'6': string;
|
|
144
|
+
/**
|
|
145
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.7`.
|
|
146
|
+
*/
|
|
147
|
+
'7': string;
|
|
148
|
+
/**
|
|
149
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.8`.
|
|
150
|
+
*/
|
|
151
|
+
'8': string;
|
|
152
|
+
/**
|
|
153
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.9`.
|
|
154
|
+
*/
|
|
155
|
+
'9': string;
|
|
156
|
+
/**
|
|
157
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.10`.
|
|
158
|
+
*/
|
|
159
|
+
'10': string;
|
|
160
|
+
/**
|
|
161
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.11`.
|
|
162
|
+
*/
|
|
163
|
+
'11': string;
|
|
164
|
+
/**
|
|
165
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.12`.
|
|
166
|
+
*/
|
|
167
|
+
'12': string;
|
|
168
|
+
/**
|
|
169
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.14`.
|
|
170
|
+
*/
|
|
171
|
+
'14': string;
|
|
172
|
+
/**
|
|
173
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.15`.
|
|
174
|
+
*/
|
|
175
|
+
'15': string;
|
|
176
|
+
/**
|
|
177
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.16`.
|
|
178
|
+
*/
|
|
179
|
+
'16': string;
|
|
180
|
+
/**
|
|
181
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.18`.
|
|
182
|
+
*/
|
|
183
|
+
'18': string;
|
|
184
|
+
/**
|
|
185
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.20`.
|
|
186
|
+
*/
|
|
187
|
+
'20': string;
|
|
188
|
+
/**
|
|
189
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.24`.
|
|
190
|
+
*/
|
|
191
|
+
'24': string;
|
|
192
|
+
/**
|
|
193
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.28`.
|
|
194
|
+
*/
|
|
195
|
+
'28': string;
|
|
196
|
+
/**
|
|
197
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.30`.
|
|
198
|
+
*/
|
|
199
|
+
'30': string;
|
|
200
|
+
/**
|
|
201
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.32`.
|
|
202
|
+
*/
|
|
203
|
+
'32': string;
|
|
204
|
+
/**
|
|
205
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.40`.
|
|
206
|
+
*/
|
|
207
|
+
'40': string;
|
|
208
|
+
/**
|
|
209
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.45`.
|
|
210
|
+
*/
|
|
211
|
+
'45': string;
|
|
212
|
+
/**
|
|
213
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.48`.
|
|
214
|
+
*/
|
|
215
|
+
'48': string;
|
|
216
|
+
/**
|
|
217
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.50`.
|
|
218
|
+
*/
|
|
219
|
+
'50': string;
|
|
220
|
+
/**
|
|
221
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.56`.
|
|
222
|
+
*/
|
|
223
|
+
'56': string;
|
|
224
|
+
/**
|
|
225
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.64`.
|
|
226
|
+
*/
|
|
227
|
+
'64': string;
|
|
228
|
+
/**
|
|
229
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.75`.
|
|
230
|
+
*/
|
|
231
|
+
'75': string;
|
|
232
|
+
/**
|
|
233
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.90`.
|
|
234
|
+
*/
|
|
235
|
+
'90': string;
|
|
236
|
+
/**
|
|
237
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.100`.
|
|
238
|
+
*/
|
|
239
|
+
'100': string;
|
|
240
|
+
/**
|
|
241
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.140`.
|
|
242
|
+
*/
|
|
243
|
+
'140': string;
|
|
244
|
+
/**
|
|
245
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.180`.
|
|
246
|
+
*/
|
|
247
|
+
'180': string;
|
|
248
|
+
/**
|
|
249
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.192`.
|
|
250
|
+
*/
|
|
251
|
+
'192': string;
|
|
252
|
+
auto: string;
|
|
253
|
+
full: string;
|
|
254
|
+
screen: string;
|
|
255
|
+
min: string;
|
|
256
|
+
max: string;
|
|
257
|
+
fit: string;
|
|
258
|
+
};
|
|
259
|
+
/** Colour palette: the grey ramp and its alpha twins (decision 0040), the older neutral ramp, seven hue ramps, and transparent. */
|
|
260
|
+
color: {
|
|
261
|
+
/** Fully transparent. For colour values that must not show, such as a border that keeps its width (semantic.color.border.none). */
|
|
262
|
+
transparent: string;
|
|
263
|
+
/** Pure-grey ramp, defined in OKLCH (chroma 0): 100 (lightest) to 1200 (primary text). Each step has one job, and its contrast against white is in its description (decision 0040). */
|
|
264
|
+
gray: {
|
|
265
|
+
/** Page background. oklch(0.991 0 0), 1.03:1 on white. */
|
|
266
|
+
'100': string;
|
|
267
|
+
/** Subtle background. oklch(0.982 0 0), 1.05:1 on white. */
|
|
268
|
+
'200': string;
|
|
269
|
+
/** Component fill at rest. oklch(0.961 0 0), 1.12:1 on white. */
|
|
270
|
+
'300': string;
|
|
271
|
+
/** Component fill on hover. oklch(0.940 0 0), 1.19:1 on white. */
|
|
272
|
+
'400': string;
|
|
273
|
+
/** Component fill pressed or selected. oklch(0.918 0 0), 1.27:1 on white. */
|
|
274
|
+
'500': string;
|
|
275
|
+
/** Subtle border. oklch(0.895 0 0), 1.37:1 on white. */
|
|
276
|
+
'600': string;
|
|
277
|
+
/** Default border, for dividers and decorative outlines. oklch(0.860 0 0), 1.53:1 on white. */
|
|
278
|
+
'700': string;
|
|
279
|
+
/** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.655 0 0), 3.19:1 on white. */
|
|
280
|
+
'800': string;
|
|
281
|
+
/** Solid fill. oklch(0.615 0 0), 3.74:1 on white. */
|
|
282
|
+
'900': string;
|
|
283
|
+
/** Solid fill on hover. oklch(0.575 0 0), 4.35:1 on white. */
|
|
284
|
+
'1000': string;
|
|
285
|
+
/** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.500 0 0), 6.01:1 on white. */
|
|
286
|
+
'1100': string;
|
|
287
|
+
/** Primary text, and the darkest step. oklch(0.250 0 0), 15.91:1 on white. */
|
|
288
|
+
'1200': string;
|
|
289
|
+
};
|
|
290
|
+
/** Alpha twins of the grey ramp: gray.1200 at the opacity that composites over white to the same step. For overlays, hover fills that must work on any surface, and borders on tinted or image backgrounds (decision 0040). */
|
|
291
|
+
'gray-alpha': {
|
|
292
|
+
/** Page background. Composites to gray.100 over white. */
|
|
293
|
+
'100': string;
|
|
294
|
+
/** Subtle background. Composites to gray.200 over white. */
|
|
295
|
+
'200': string;
|
|
296
|
+
/** Component fill at rest. Composites to gray.300 over white. */
|
|
297
|
+
'300': string;
|
|
298
|
+
/** Component fill on hover. Composites to gray.400 over white. */
|
|
299
|
+
'400': string;
|
|
300
|
+
/** Component fill pressed or selected. Composites to gray.500 over white. */
|
|
301
|
+
'500': string;
|
|
302
|
+
/** Subtle border. Composites to gray.600 over white. */
|
|
303
|
+
'600': string;
|
|
304
|
+
/** Default border, for dividers and decorative outlines. Composites to gray.700 over white. */
|
|
305
|
+
'700': string;
|
|
306
|
+
/** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to gray.800 over white. */
|
|
307
|
+
'800': string;
|
|
308
|
+
/** Solid fill. Composites to gray.900 over white. */
|
|
309
|
+
'900': string;
|
|
310
|
+
/** Solid fill on hover. Composites to gray.1000 over white. */
|
|
311
|
+
'1000': string;
|
|
312
|
+
/** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to gray.1100 over white. */
|
|
313
|
+
'1100': string;
|
|
314
|
+
/** Primary text, and the darkest step. Composites to gray.1200 over white. */
|
|
315
|
+
'1200': string;
|
|
316
|
+
};
|
|
317
|
+
/** Neutral grey ramp: 000 is white, then 100 (lightest grey) to 1000 (near-black). */
|
|
318
|
+
neutral: {
|
|
319
|
+
'100': string;
|
|
320
|
+
'200': string;
|
|
321
|
+
'300': string;
|
|
322
|
+
'400': string;
|
|
323
|
+
'500': string;
|
|
324
|
+
'600': string;
|
|
325
|
+
'700': string;
|
|
326
|
+
'800': string;
|
|
327
|
+
'900': string;
|
|
328
|
+
'1000': string;
|
|
329
|
+
'000': string;
|
|
330
|
+
};
|
|
331
|
+
/** Green ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
332
|
+
green: {
|
|
333
|
+
'100': string;
|
|
334
|
+
'200': string;
|
|
335
|
+
'300': string;
|
|
336
|
+
'400': string;
|
|
337
|
+
'500': string;
|
|
338
|
+
'600': string;
|
|
339
|
+
'700': string;
|
|
340
|
+
'800': string;
|
|
341
|
+
'900': string;
|
|
342
|
+
'1000': string;
|
|
343
|
+
'1100': string;
|
|
344
|
+
'1200': string;
|
|
345
|
+
'1300': string;
|
|
346
|
+
};
|
|
347
|
+
/** Orange ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
348
|
+
orange: {
|
|
349
|
+
'100': string;
|
|
350
|
+
'200': string;
|
|
351
|
+
'300': string;
|
|
352
|
+
'400': string;
|
|
353
|
+
'500': string;
|
|
354
|
+
'600': string;
|
|
355
|
+
'700': string;
|
|
356
|
+
'800': string;
|
|
357
|
+
'900': string;
|
|
358
|
+
'1000': string;
|
|
359
|
+
'1100': string;
|
|
360
|
+
'1200': string;
|
|
361
|
+
'1300': string;
|
|
362
|
+
};
|
|
363
|
+
/** Red ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
364
|
+
red: {
|
|
365
|
+
'100': string;
|
|
366
|
+
'200': string;
|
|
367
|
+
'300': string;
|
|
368
|
+
'400': string;
|
|
369
|
+
'500': string;
|
|
370
|
+
'600': string;
|
|
371
|
+
'700': string;
|
|
372
|
+
'800': string;
|
|
373
|
+
'900': string;
|
|
374
|
+
'1000': string;
|
|
375
|
+
'1100': string;
|
|
376
|
+
'1200': string;
|
|
377
|
+
'1300': string;
|
|
378
|
+
};
|
|
379
|
+
/** Blue ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
380
|
+
blue: {
|
|
381
|
+
'100': string;
|
|
382
|
+
'200': string;
|
|
383
|
+
'300': string;
|
|
384
|
+
'400': string;
|
|
385
|
+
'500': string;
|
|
386
|
+
'600': string;
|
|
387
|
+
'700': string;
|
|
388
|
+
'800': string;
|
|
389
|
+
'900': string;
|
|
390
|
+
'1000': string;
|
|
391
|
+
'1100': string;
|
|
392
|
+
'1200': string;
|
|
393
|
+
'1300': string;
|
|
394
|
+
};
|
|
395
|
+
/** Purple ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
396
|
+
purple: {
|
|
397
|
+
'100': string;
|
|
398
|
+
'200': string;
|
|
399
|
+
'300': string;
|
|
400
|
+
'400': string;
|
|
401
|
+
'500': string;
|
|
402
|
+
'600': string;
|
|
403
|
+
'700': string;
|
|
404
|
+
'800': string;
|
|
405
|
+
'900': string;
|
|
406
|
+
'1000': string;
|
|
407
|
+
'1100': string;
|
|
408
|
+
'1200': string;
|
|
409
|
+
'1300': string;
|
|
410
|
+
};
|
|
411
|
+
/** Pink ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
412
|
+
pink: {
|
|
413
|
+
'100': string;
|
|
414
|
+
'200': string;
|
|
415
|
+
'300': string;
|
|
416
|
+
'400': string;
|
|
417
|
+
'500': string;
|
|
418
|
+
'600': string;
|
|
419
|
+
'700': string;
|
|
420
|
+
'800': string;
|
|
421
|
+
'900': string;
|
|
422
|
+
'1000': string;
|
|
423
|
+
'1100': string;
|
|
424
|
+
'1200': string;
|
|
425
|
+
'1300': string;
|
|
426
|
+
};
|
|
427
|
+
/** Yellow ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
428
|
+
yellow: {
|
|
429
|
+
'100': string;
|
|
430
|
+
'200': string;
|
|
431
|
+
'300': string;
|
|
432
|
+
'400': string;
|
|
433
|
+
'500': string;
|
|
434
|
+
'600': string;
|
|
435
|
+
'700': string;
|
|
436
|
+
'800': string;
|
|
437
|
+
'900': string;
|
|
438
|
+
'1000': string;
|
|
439
|
+
'1100': string;
|
|
440
|
+
'1200': string;
|
|
441
|
+
'1300': string;
|
|
442
|
+
};
|
|
443
|
+
};
|
|
444
|
+
/** Spacing keyword auto. The numbered steps are deprecated aliases of base.dimension. */
|
|
445
|
+
spacing: {
|
|
446
|
+
/**
|
|
447
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.0`.
|
|
448
|
+
*/
|
|
449
|
+
'0': string;
|
|
450
|
+
/**
|
|
451
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.1`.
|
|
452
|
+
*/
|
|
453
|
+
'1': string;
|
|
454
|
+
/**
|
|
455
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.2`.
|
|
456
|
+
*/
|
|
457
|
+
'2': string;
|
|
458
|
+
/**
|
|
459
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.3`.
|
|
460
|
+
*/
|
|
461
|
+
'3': string;
|
|
462
|
+
/**
|
|
463
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.4`.
|
|
464
|
+
*/
|
|
465
|
+
'4': string;
|
|
466
|
+
/**
|
|
467
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.5`.
|
|
468
|
+
*/
|
|
469
|
+
'5': string;
|
|
470
|
+
/**
|
|
471
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.6`.
|
|
472
|
+
*/
|
|
473
|
+
'6': string;
|
|
474
|
+
/**
|
|
475
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.7`.
|
|
476
|
+
*/
|
|
477
|
+
'7': string;
|
|
478
|
+
/**
|
|
479
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.8`.
|
|
480
|
+
*/
|
|
481
|
+
'8': string;
|
|
482
|
+
/**
|
|
483
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.9`.
|
|
484
|
+
*/
|
|
485
|
+
'9': string;
|
|
486
|
+
/**
|
|
487
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.10`.
|
|
488
|
+
*/
|
|
489
|
+
'10': string;
|
|
490
|
+
/**
|
|
491
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.12`.
|
|
492
|
+
*/
|
|
493
|
+
'12': string;
|
|
494
|
+
/**
|
|
495
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.14`.
|
|
496
|
+
*/
|
|
497
|
+
'14': string;
|
|
498
|
+
/**
|
|
499
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.16`.
|
|
500
|
+
*/
|
|
501
|
+
'16': string;
|
|
502
|
+
/**
|
|
503
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.20`.
|
|
504
|
+
*/
|
|
505
|
+
'20': string;
|
|
506
|
+
/**
|
|
507
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.24`.
|
|
508
|
+
*/
|
|
509
|
+
'24': string;
|
|
510
|
+
/**
|
|
511
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.28`.
|
|
512
|
+
*/
|
|
513
|
+
'28': string;
|
|
514
|
+
/**
|
|
515
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.32`.
|
|
516
|
+
*/
|
|
517
|
+
'32': string;
|
|
518
|
+
/**
|
|
519
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.40`.
|
|
520
|
+
*/
|
|
521
|
+
'40': string;
|
|
522
|
+
/**
|
|
523
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.48`.
|
|
524
|
+
*/
|
|
525
|
+
'48': string;
|
|
526
|
+
/**
|
|
527
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.56`.
|
|
528
|
+
*/
|
|
529
|
+
'56': string;
|
|
530
|
+
/**
|
|
531
|
+
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.64`.
|
|
532
|
+
*/
|
|
533
|
+
'64': string;
|
|
534
|
+
auto: string;
|
|
535
|
+
};
|
|
536
|
+
/** Font stacks keyed by role: heading, body and monospace. */
|
|
537
|
+
fontFamily: {
|
|
538
|
+
heading: string;
|
|
539
|
+
body: string;
|
|
540
|
+
monospace: string;
|
|
541
|
+
};
|
|
542
|
+
/** Type size scale from 1 (0.75rem, 12px) to 10 (5rem, 80px); the key is the step. */
|
|
543
|
+
fontSize: {
|
|
544
|
+
'1': string;
|
|
545
|
+
'2': string;
|
|
546
|
+
'3': string;
|
|
547
|
+
'4': string;
|
|
548
|
+
'5': string;
|
|
549
|
+
'6': string;
|
|
550
|
+
'7': string;
|
|
551
|
+
'8': string;
|
|
552
|
+
'9': string;
|
|
553
|
+
'10': string;
|
|
554
|
+
};
|
|
555
|
+
/** Font weight scale from 1 (300, light) to 7 (900, black); the key is the step. */
|
|
556
|
+
fontWeight: {
|
|
557
|
+
'1': string;
|
|
558
|
+
'2': string;
|
|
559
|
+
'3': string;
|
|
560
|
+
'4': string;
|
|
561
|
+
'5': string;
|
|
562
|
+
/** Extra Bold — for page titles and primary display headings per VDL (800–900 weight range) */
|
|
563
|
+
'6': string;
|
|
564
|
+
/** Black/Ultra Bold — maximum heading weight for the most dominant display headings per VDL */
|
|
565
|
+
'7': string;
|
|
566
|
+
};
|
|
567
|
+
/** Line height scale from 1 (1rem) to 11 (5rem), plus none (1, the font size); the key is the step. */
|
|
568
|
+
lineHeight: {
|
|
569
|
+
'1': string;
|
|
570
|
+
'2': string;
|
|
571
|
+
'3': string;
|
|
572
|
+
'4': string;
|
|
573
|
+
'5': string;
|
|
574
|
+
'6': string;
|
|
575
|
+
'7': string;
|
|
576
|
+
'8': string;
|
|
577
|
+
'9': string;
|
|
578
|
+
'10': string;
|
|
579
|
+
'11': string;
|
|
580
|
+
none: string;
|
|
581
|
+
};
|
|
582
|
+
/** Letter spacing from 0 (tightest, -0.125rem) to 4 (widest, 0.125rem); 2 is normal. */
|
|
583
|
+
letterSpacing: {
|
|
584
|
+
'0': string;
|
|
585
|
+
'1': string;
|
|
586
|
+
'2': string;
|
|
587
|
+
'3': string;
|
|
588
|
+
'4': string;
|
|
589
|
+
};
|
|
590
|
+
/** Viewport widths where layouts change, from xs (0) to 2xl (1536px), keyed by size. */
|
|
591
|
+
breakpoint: {
|
|
592
|
+
xs: string;
|
|
593
|
+
sm: string;
|
|
594
|
+
md: string;
|
|
595
|
+
lg: string;
|
|
596
|
+
xl: string;
|
|
597
|
+
'2xl': string;
|
|
598
|
+
};
|
|
599
|
+
/** Animation durations from instant (0ms) to slowest (1000ms), keyed by speed. */
|
|
600
|
+
duration: {
|
|
601
|
+
instant: string;
|
|
602
|
+
fast: string;
|
|
603
|
+
normal: string;
|
|
604
|
+
moderate: string;
|
|
605
|
+
slow: string;
|
|
606
|
+
slower: string;
|
|
607
|
+
slowest: string;
|
|
608
|
+
};
|
|
609
|
+
/** Timing functions keyed by their CSS name; the Quart and Back curves are stronger variants. */
|
|
610
|
+
easing: {
|
|
611
|
+
linear: string;
|
|
612
|
+
ease: string;
|
|
613
|
+
easeIn: string;
|
|
614
|
+
easeOut: string;
|
|
615
|
+
easeInOut: string;
|
|
616
|
+
easeInQuart: string;
|
|
617
|
+
easeOutQuart: string;
|
|
618
|
+
easeInOutQuart: string;
|
|
619
|
+
easeInBack: string;
|
|
620
|
+
easeOutBack: string;
|
|
621
|
+
easeInOutBack: string;
|
|
622
|
+
};
|
|
623
|
+
};
|
|
624
|
+
component: {
|
|
625
|
+
button: {
|
|
626
|
+
primary: {
|
|
627
|
+
/** Primary Button fill at rest. */
|
|
628
|
+
backgroundColor: string;
|
|
629
|
+
/** Text and icon colour on the primary Button. */
|
|
630
|
+
textColor: string;
|
|
631
|
+
/** Corner radius of every Button (visual language: Button uses sm). */
|
|
632
|
+
borderRadius: string;
|
|
633
|
+
/**
|
|
634
|
+
* Padding of the primary Button.
|
|
635
|
+
*
|
|
636
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0.
|
|
637
|
+
*/
|
|
638
|
+
padding: string;
|
|
639
|
+
/** Button label typography, the same as sizes.large.font. */
|
|
640
|
+
font: string;
|
|
641
|
+
};
|
|
642
|
+
hover: {
|
|
643
|
+
/** Primary Button fill on hover. */
|
|
644
|
+
backgroundColor: string;
|
|
645
|
+
};
|
|
646
|
+
active: {
|
|
647
|
+
/** Primary Button fill while pressed. */
|
|
648
|
+
backgroundColor: string;
|
|
649
|
+
};
|
|
650
|
+
focus: {
|
|
651
|
+
/** Focus ring on every Button. */
|
|
652
|
+
outline: string;
|
|
653
|
+
/**
|
|
654
|
+
* Gap between a Button and its focus outline.
|
|
655
|
+
*
|
|
656
|
+
* @deprecated Use semantic.border.focusOffset (decision 0022). Removed in 3.0.
|
|
657
|
+
*/
|
|
658
|
+
outlineOffset: string;
|
|
659
|
+
};
|
|
660
|
+
disabled: {
|
|
661
|
+
/** Disabled primary Button fill. */
|
|
662
|
+
backgroundColor: string;
|
|
663
|
+
/** Disabled primary Button text and icon colour. */
|
|
664
|
+
textColor: string;
|
|
665
|
+
};
|
|
666
|
+
variants: {
|
|
667
|
+
secondary: {
|
|
668
|
+
/** Secondary Button fill at rest. */
|
|
669
|
+
backgroundColor: string;
|
|
670
|
+
/** Text and icon colour on the secondary Button. */
|
|
671
|
+
textColor: string;
|
|
672
|
+
hover: {
|
|
673
|
+
/** Secondary Button fill on hover. */
|
|
674
|
+
backgroundColor: string;
|
|
675
|
+
};
|
|
676
|
+
active: {
|
|
677
|
+
/** Secondary Button fill while pressed. */
|
|
678
|
+
backgroundColor: string;
|
|
679
|
+
};
|
|
680
|
+
disabled: {
|
|
681
|
+
/** Disabled secondary Button fill. */
|
|
682
|
+
backgroundColor: string;
|
|
683
|
+
/** Disabled secondary Button text and icon colour. */
|
|
684
|
+
textColor: string;
|
|
685
|
+
};
|
|
686
|
+
};
|
|
687
|
+
naked: {
|
|
688
|
+
/** Naked Button has no fill at rest. */
|
|
689
|
+
backgroundColor: string;
|
|
690
|
+
/** Text and icon colour on the naked Button. */
|
|
691
|
+
textColor: string;
|
|
692
|
+
hover: {
|
|
693
|
+
/** Naked Button fill on hover. */
|
|
694
|
+
backgroundColor: string;
|
|
695
|
+
};
|
|
696
|
+
active: {
|
|
697
|
+
/** Naked Button fill while pressed. */
|
|
698
|
+
backgroundColor: string;
|
|
699
|
+
};
|
|
700
|
+
disabled: {
|
|
701
|
+
/** Disabled naked Button has no fill. */
|
|
702
|
+
backgroundColor: string;
|
|
703
|
+
/** Disabled naked Button text and icon colour. */
|
|
704
|
+
textColor: string;
|
|
705
|
+
};
|
|
706
|
+
};
|
|
707
|
+
accent: {
|
|
708
|
+
/** Fill of the accent Button: the blue call to action above primary, at most one per view (decision 0016). */
|
|
709
|
+
backgroundColor: string;
|
|
710
|
+
/** Text and icon colour on the accent Button. */
|
|
711
|
+
textColor: string;
|
|
712
|
+
hover: {
|
|
713
|
+
/** Accent Button fill on hover. */
|
|
714
|
+
backgroundColor: string;
|
|
715
|
+
};
|
|
716
|
+
active: {
|
|
717
|
+
/** Accent Button fill while pressed. */
|
|
718
|
+
backgroundColor: string;
|
|
719
|
+
};
|
|
720
|
+
disabled: {
|
|
721
|
+
/** Disabled accent Button fill. */
|
|
722
|
+
backgroundColor: string;
|
|
723
|
+
/** Disabled accent Button text and icon colour. */
|
|
724
|
+
textColor: string;
|
|
725
|
+
};
|
|
726
|
+
};
|
|
727
|
+
emphasis: {
|
|
728
|
+
/**
|
|
729
|
+
* Fill of the accent Button: the blue call to action above primary, at most one per view (decision 0016).
|
|
730
|
+
*
|
|
731
|
+
* @deprecated Use component.button.variants.accent.backgroundColor. Alias kept until 3.0 (decision 0016).
|
|
732
|
+
*/
|
|
733
|
+
backgroundColor: string;
|
|
734
|
+
/**
|
|
735
|
+
* Text and icon colour on the accent Button.
|
|
736
|
+
*
|
|
737
|
+
* @deprecated Use component.button.variants.accent.textColor. Alias kept until 3.0 (decision 0016).
|
|
738
|
+
*/
|
|
739
|
+
textColor: string;
|
|
740
|
+
hover: {
|
|
741
|
+
/**
|
|
742
|
+
* Accent Button fill on hover.
|
|
743
|
+
*
|
|
744
|
+
* @deprecated Use component.button.variants.accent.hover.backgroundColor. Alias kept until 3.0 (decision 0016).
|
|
745
|
+
*/
|
|
746
|
+
backgroundColor: string;
|
|
747
|
+
};
|
|
748
|
+
active: {
|
|
749
|
+
/**
|
|
750
|
+
* Accent Button fill while pressed.
|
|
751
|
+
*
|
|
752
|
+
* @deprecated Use component.button.variants.accent.active.backgroundColor. Alias kept until 3.0 (decision 0016).
|
|
753
|
+
*/
|
|
754
|
+
backgroundColor: string;
|
|
755
|
+
};
|
|
756
|
+
disabled: {
|
|
757
|
+
/**
|
|
758
|
+
* Disabled accent Button fill.
|
|
759
|
+
*
|
|
760
|
+
* @deprecated Use component.button.variants.accent.disabled.backgroundColor. Alias kept until 3.0 (decision 0016).
|
|
761
|
+
*/
|
|
762
|
+
backgroundColor: string;
|
|
763
|
+
/**
|
|
764
|
+
* Disabled accent Button text and icon colour.
|
|
765
|
+
*
|
|
766
|
+
* @deprecated Use component.button.variants.accent.disabled.textColor. Alias kept until 3.0 (decision 0016).
|
|
767
|
+
*/
|
|
768
|
+
textColor: string;
|
|
769
|
+
};
|
|
770
|
+
};
|
|
771
|
+
danger: {
|
|
772
|
+
/** Danger Button fill at rest, for destructive actions. */
|
|
773
|
+
backgroundColor: string;
|
|
774
|
+
/** Text and icon colour on the danger Button. */
|
|
775
|
+
textColor: string;
|
|
776
|
+
hover: {
|
|
777
|
+
/** Danger Button fill on hover. */
|
|
778
|
+
backgroundColor: string;
|
|
779
|
+
};
|
|
780
|
+
active: {
|
|
781
|
+
/** Danger Button fill while pressed. */
|
|
782
|
+
backgroundColor: string;
|
|
783
|
+
};
|
|
784
|
+
disabled: {
|
|
785
|
+
/** Disabled danger Button fill. */
|
|
786
|
+
backgroundColor: string;
|
|
787
|
+
/** Disabled danger Button text and icon colour. */
|
|
788
|
+
textColor: string;
|
|
789
|
+
};
|
|
790
|
+
};
|
|
791
|
+
};
|
|
792
|
+
sizes: {
|
|
793
|
+
small: {
|
|
794
|
+
/**
|
|
795
|
+
* Padding of the small Button.
|
|
796
|
+
*
|
|
797
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0.
|
|
798
|
+
*/
|
|
799
|
+
padding: string;
|
|
800
|
+
/** Small Button label typography. */
|
|
801
|
+
font: string;
|
|
802
|
+
};
|
|
803
|
+
medium: {
|
|
804
|
+
/**
|
|
805
|
+
* Padding of the medium Button.
|
|
806
|
+
*
|
|
807
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .lg. Removed in 3.0.
|
|
808
|
+
*/
|
|
809
|
+
padding: string;
|
|
810
|
+
/** Medium Button label typography. */
|
|
811
|
+
font: string;
|
|
812
|
+
};
|
|
813
|
+
large: {
|
|
814
|
+
/**
|
|
815
|
+
* Padding of the large Button.
|
|
816
|
+
*
|
|
817
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0.
|
|
818
|
+
*/
|
|
819
|
+
padding: string;
|
|
820
|
+
/** Large Button label typography. */
|
|
821
|
+
font: string;
|
|
822
|
+
};
|
|
823
|
+
};
|
|
824
|
+
};
|
|
825
|
+
chip: {
|
|
826
|
+
closeButton: {
|
|
827
|
+
/** Width and height of a chip's close button, which fits inside the chip with room around it. */
|
|
828
|
+
size: string;
|
|
829
|
+
};
|
|
830
|
+
default: {
|
|
831
|
+
/** Default chip fill at rest. */
|
|
832
|
+
backgroundColor: string;
|
|
833
|
+
/** Default chip text and icon colour. */
|
|
834
|
+
textColor: string;
|
|
835
|
+
/** Corner radius of every chip: rounder than Button, to signal a different job (decision 0016). */
|
|
836
|
+
borderRadius: string;
|
|
837
|
+
/**
|
|
838
|
+
* Padding of a chip before chips took padding per size.
|
|
839
|
+
*
|
|
840
|
+
* @deprecated No component spacing tokens (decision 0022). No chip reads it; chips take padding per size. Removed in 3.0.
|
|
841
|
+
*/
|
|
842
|
+
padding: string;
|
|
843
|
+
/** Chip label typography, the same as sizes.large.font. */
|
|
844
|
+
font: string;
|
|
845
|
+
};
|
|
846
|
+
hover: {
|
|
847
|
+
/** Default chip fill on hover, when it's clickable. */
|
|
848
|
+
backgroundColor: string;
|
|
849
|
+
};
|
|
850
|
+
active: {
|
|
851
|
+
/** Default chip fill while pressed, when it's clickable. */
|
|
852
|
+
backgroundColor: string;
|
|
853
|
+
};
|
|
854
|
+
focus: {
|
|
855
|
+
/** Focus ring on every chip and its close button. */
|
|
856
|
+
outline: string;
|
|
857
|
+
/**
|
|
858
|
+
* Gap between a chip and its focus outline.
|
|
859
|
+
*
|
|
860
|
+
* @deprecated Use semantic.border.focusOffset (decision 0022). Removed in 3.0.
|
|
861
|
+
*/
|
|
862
|
+
outlineOffset: string;
|
|
863
|
+
};
|
|
864
|
+
disabled: {
|
|
865
|
+
/** Disabled default chip fill. */
|
|
866
|
+
backgroundColor: string;
|
|
867
|
+
/** Disabled default chip text and icon colour. */
|
|
868
|
+
textColor: string;
|
|
869
|
+
};
|
|
870
|
+
variants: {
|
|
871
|
+
emphasis: {
|
|
872
|
+
/** Emphasis chip fill at rest. */
|
|
873
|
+
backgroundColor: string;
|
|
874
|
+
/** Emphasis chip text and icon colour. */
|
|
875
|
+
textColor: string;
|
|
876
|
+
hover: {
|
|
877
|
+
/** Emphasis chip fill on hover, when it's clickable. */
|
|
878
|
+
backgroundColor: string;
|
|
879
|
+
};
|
|
880
|
+
active: {
|
|
881
|
+
/** Emphasis chip fill while pressed, when it's clickable. */
|
|
882
|
+
backgroundColor: string;
|
|
883
|
+
};
|
|
884
|
+
disabled: {
|
|
885
|
+
/** Disabled emphasis chip fill. */
|
|
886
|
+
backgroundColor: string;
|
|
887
|
+
/** Disabled emphasis chip text and icon colour. */
|
|
888
|
+
textColor: string;
|
|
889
|
+
};
|
|
890
|
+
};
|
|
891
|
+
subtle: {
|
|
892
|
+
/** Subtle chip fill at rest. */
|
|
893
|
+
backgroundColor: string;
|
|
894
|
+
/** Subtle chip text and icon colour. */
|
|
895
|
+
textColor: string;
|
|
896
|
+
hover: {
|
|
897
|
+
/** Subtle chip fill on hover, when it's clickable. */
|
|
898
|
+
backgroundColor: string;
|
|
899
|
+
};
|
|
900
|
+
active: {
|
|
901
|
+
/** Subtle chip fill while pressed, when it's clickable. */
|
|
902
|
+
backgroundColor: string;
|
|
903
|
+
};
|
|
904
|
+
disabled: {
|
|
905
|
+
/** Disabled subtle chip fill. */
|
|
906
|
+
backgroundColor: string;
|
|
907
|
+
/** Disabled subtle chip text and icon colour. */
|
|
908
|
+
textColor: string;
|
|
909
|
+
};
|
|
910
|
+
};
|
|
911
|
+
interactive: {
|
|
912
|
+
/** Interactive chip fill at rest. */
|
|
913
|
+
backgroundColor: string;
|
|
914
|
+
/** Interactive chip text and icon colour. */
|
|
915
|
+
textColor: string;
|
|
916
|
+
hover: {
|
|
917
|
+
/** Interactive chip fill on hover, when it's clickable. */
|
|
918
|
+
backgroundColor: string;
|
|
919
|
+
};
|
|
920
|
+
active: {
|
|
921
|
+
/** Interactive chip fill while pressed, when it's clickable. */
|
|
922
|
+
backgroundColor: string;
|
|
923
|
+
};
|
|
924
|
+
disabled: {
|
|
925
|
+
/** Disabled interactive chip fill. */
|
|
926
|
+
backgroundColor: string;
|
|
927
|
+
/** Disabled interactive chip text and icon colour. */
|
|
928
|
+
textColor: string;
|
|
929
|
+
};
|
|
930
|
+
};
|
|
931
|
+
};
|
|
932
|
+
sizes: {
|
|
933
|
+
small: {
|
|
934
|
+
/**
|
|
935
|
+
* Padding of the small chip.
|
|
936
|
+
*
|
|
937
|
+
* @deprecated Chips take their min-height from semantic.size.label.medium with no vertical padding, and semantic.spacing.component.sm horizontally (decisions 0022, 0034 and 0035). Removed in 3.0.
|
|
938
|
+
*/
|
|
939
|
+
padding: string;
|
|
940
|
+
/**
|
|
941
|
+
* Label typography of the small chip.
|
|
942
|
+
*
|
|
943
|
+
* @deprecated Chips have one size (decision 0035). Use component.chip.sizes.medium.font. Removed in 3.0.
|
|
944
|
+
*/
|
|
945
|
+
font: string;
|
|
946
|
+
};
|
|
947
|
+
medium: {
|
|
948
|
+
/**
|
|
949
|
+
* Padding of the medium chip.
|
|
950
|
+
*
|
|
951
|
+
* @deprecated Chips take their min-height from semantic.size.label.medium with no vertical padding, and semantic.spacing.component.sm horizontally (decisions 0022, 0034 and 0035). Removed in 3.0.
|
|
952
|
+
*/
|
|
953
|
+
padding: string;
|
|
954
|
+
/** Chip label typography. Every chip uses it: chips have one size (decision 0035). */
|
|
955
|
+
font: string;
|
|
956
|
+
};
|
|
957
|
+
large: {
|
|
958
|
+
/**
|
|
959
|
+
* Padding of the large chip, which no chip used.
|
|
960
|
+
*
|
|
961
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0.
|
|
962
|
+
*/
|
|
963
|
+
padding: string;
|
|
964
|
+
/**
|
|
965
|
+
* Label typography of the large chip, which no chip used.
|
|
966
|
+
*
|
|
967
|
+
* @deprecated Chips have one size (decision 0035). Use component.chip.sizes.medium.font. Removed in 3.0.
|
|
968
|
+
*/
|
|
969
|
+
font: string;
|
|
970
|
+
};
|
|
971
|
+
};
|
|
972
|
+
};
|
|
973
|
+
iconButton: {
|
|
974
|
+
primary: {
|
|
975
|
+
/**
|
|
976
|
+
* Fill of the primary IconButton at rest.
|
|
977
|
+
*
|
|
978
|
+
* @deprecated IconButton reads component.button.primary.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
979
|
+
*/
|
|
980
|
+
backgroundColor: string;
|
|
981
|
+
/** Corner radius of every IconButton, matching Button. */
|
|
982
|
+
borderRadius: string;
|
|
983
|
+
/**
|
|
984
|
+
* Minimum width of the medium IconButton, duplicated from its sizes.
|
|
985
|
+
*
|
|
986
|
+
* @deprecated No IconButton reads it: sizes take their minimum width from semantic.size.control (decision 0034). Removed in 3.0. Use `semantic.size.control.md`.
|
|
987
|
+
*/
|
|
988
|
+
minWidth: string;
|
|
989
|
+
/**
|
|
990
|
+
* Minimum height of the medium IconButton, duplicated from its sizes.
|
|
991
|
+
*
|
|
992
|
+
* @deprecated No IconButton reads it: sizes take their minimum height from semantic.size.control (decision 0034). Removed in 3.0. Use `semantic.size.control.md`.
|
|
993
|
+
*/
|
|
994
|
+
minHeight: string;
|
|
995
|
+
/**
|
|
996
|
+
* Display of IconButton's content box.
|
|
997
|
+
*
|
|
998
|
+
* @deprecated Layout mechanics stay in component code (decision 0014, rule 5); IconButton sets display: flex itself. Removed in 3.0.
|
|
999
|
+
*/
|
|
1000
|
+
display: string;
|
|
1001
|
+
/**
|
|
1002
|
+
* Vertical alignment of IconButton's icon.
|
|
1003
|
+
*
|
|
1004
|
+
* @deprecated Layout mechanics stay in component code (decision 0014, rule 5); IconButton sets align-items: center itself. Removed in 3.0.
|
|
1005
|
+
*/
|
|
1006
|
+
alignItems: string;
|
|
1007
|
+
/**
|
|
1008
|
+
* Horizontal alignment of IconButton's icon.
|
|
1009
|
+
*
|
|
1010
|
+
* @deprecated Layout mechanics stay in component code (decision 0014, rule 5); IconButton sets justify-content: center itself. Removed in 3.0.
|
|
1011
|
+
*/
|
|
1012
|
+
justifyContent: string;
|
|
1013
|
+
};
|
|
1014
|
+
hover: {
|
|
1015
|
+
/**
|
|
1016
|
+
* Fill of the primary IconButton on hover.
|
|
1017
|
+
*
|
|
1018
|
+
* @deprecated IconButton reads component.button.hover.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1019
|
+
*/
|
|
1020
|
+
backgroundColor: string;
|
|
1021
|
+
};
|
|
1022
|
+
active: {
|
|
1023
|
+
/**
|
|
1024
|
+
* Fill of the primary IconButton while pressed.
|
|
1025
|
+
*
|
|
1026
|
+
* @deprecated IconButton reads component.button.active.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1027
|
+
*/
|
|
1028
|
+
backgroundColor: string;
|
|
1029
|
+
};
|
|
1030
|
+
focus: {
|
|
1031
|
+
/** Focus ring on every IconButton. */
|
|
1032
|
+
outline: string;
|
|
1033
|
+
/**
|
|
1034
|
+
* Gap between an IconButton and its focus outline.
|
|
1035
|
+
*
|
|
1036
|
+
* @deprecated Use semantic.border.focusOffset (decision 0022). Removed in 3.0.
|
|
1037
|
+
*/
|
|
1038
|
+
outlineOffset: string;
|
|
1039
|
+
};
|
|
1040
|
+
disabled: {
|
|
1041
|
+
/**
|
|
1042
|
+
* Fill of the primary IconButton when disabled.
|
|
1043
|
+
*
|
|
1044
|
+
* @deprecated IconButton reads component.button.disabled.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1045
|
+
*/
|
|
1046
|
+
backgroundColor: string;
|
|
1047
|
+
};
|
|
1048
|
+
variants: {
|
|
1049
|
+
secondary: {
|
|
1050
|
+
/**
|
|
1051
|
+
* Fill of the secondary IconButton at rest.
|
|
1052
|
+
*
|
|
1053
|
+
* @deprecated IconButton reads component.button.variants.secondary.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1054
|
+
*/
|
|
1055
|
+
backgroundColor: string;
|
|
1056
|
+
hover: {
|
|
1057
|
+
/**
|
|
1058
|
+
* Fill of the secondary IconButton on hover.
|
|
1059
|
+
*
|
|
1060
|
+
* @deprecated IconButton reads component.button.variants.secondary.hover.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1061
|
+
*/
|
|
1062
|
+
backgroundColor: string;
|
|
1063
|
+
};
|
|
1064
|
+
active: {
|
|
1065
|
+
/**
|
|
1066
|
+
* Fill of the secondary IconButton while pressed.
|
|
1067
|
+
*
|
|
1068
|
+
* @deprecated IconButton reads component.button.variants.secondary.active.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1069
|
+
*/
|
|
1070
|
+
backgroundColor: string;
|
|
1071
|
+
};
|
|
1072
|
+
disabled: {
|
|
1073
|
+
/**
|
|
1074
|
+
* Fill of the secondary IconButton when disabled.
|
|
1075
|
+
*
|
|
1076
|
+
* @deprecated IconButton reads component.button.variants.secondary.disabled.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1077
|
+
*/
|
|
1078
|
+
backgroundColor: string;
|
|
1079
|
+
};
|
|
1080
|
+
};
|
|
1081
|
+
naked: {
|
|
1082
|
+
/**
|
|
1083
|
+
* Fill of the naked IconButton at rest.
|
|
1084
|
+
*
|
|
1085
|
+
* @deprecated IconButton reads component.button.variants.naked.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1086
|
+
*/
|
|
1087
|
+
backgroundColor: string;
|
|
1088
|
+
hover: {
|
|
1089
|
+
/**
|
|
1090
|
+
* Fill of the naked IconButton on hover.
|
|
1091
|
+
*
|
|
1092
|
+
* @deprecated IconButton reads component.button.variants.naked.hover.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1093
|
+
*/
|
|
1094
|
+
backgroundColor: string;
|
|
1095
|
+
};
|
|
1096
|
+
active: {
|
|
1097
|
+
/**
|
|
1098
|
+
* Fill of the naked IconButton while pressed.
|
|
1099
|
+
*
|
|
1100
|
+
* @deprecated IconButton reads component.button.variants.naked.active.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1101
|
+
*/
|
|
1102
|
+
backgroundColor: string;
|
|
1103
|
+
};
|
|
1104
|
+
disabled: {
|
|
1105
|
+
/**
|
|
1106
|
+
* Fill of the naked IconButton when disabled.
|
|
1107
|
+
*
|
|
1108
|
+
* @deprecated IconButton reads component.button.variants.naked.disabled.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1109
|
+
*/
|
|
1110
|
+
backgroundColor: string;
|
|
1111
|
+
};
|
|
1112
|
+
};
|
|
1113
|
+
};
|
|
1114
|
+
sizes: {
|
|
1115
|
+
small: {
|
|
1116
|
+
/**
|
|
1117
|
+
* Minimum width of the small IconButton.
|
|
1118
|
+
*
|
|
1119
|
+
* @deprecated IconButton takes its minimum width from semantic.size.control.sm (decision 0034). Removed in 3.0.
|
|
1120
|
+
*/
|
|
1121
|
+
minWidth: string;
|
|
1122
|
+
/**
|
|
1123
|
+
* Minimum height of the small IconButton.
|
|
1124
|
+
*
|
|
1125
|
+
* @deprecated IconButton takes its minimum height from semantic.size.control.sm (decision 0034). Removed in 3.0.
|
|
1126
|
+
*/
|
|
1127
|
+
minHeight: string;
|
|
1128
|
+
/**
|
|
1129
|
+
* Padding of the small IconButton.
|
|
1130
|
+
*
|
|
1131
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.inset.xs. Removed in 3.0.
|
|
1132
|
+
*/
|
|
1133
|
+
padding: string;
|
|
1134
|
+
};
|
|
1135
|
+
medium: {
|
|
1136
|
+
/**
|
|
1137
|
+
* Minimum width of the medium IconButton.
|
|
1138
|
+
*
|
|
1139
|
+
* @deprecated IconButton takes its minimum width from semantic.size.control.md (decision 0034). Removed in 3.0.
|
|
1140
|
+
*/
|
|
1141
|
+
minWidth: string;
|
|
1142
|
+
/**
|
|
1143
|
+
* Minimum height of the medium IconButton.
|
|
1144
|
+
*
|
|
1145
|
+
* @deprecated IconButton takes its minimum height from semantic.size.control.md (decision 0034). Removed in 3.0.
|
|
1146
|
+
*/
|
|
1147
|
+
minHeight: string;
|
|
1148
|
+
/**
|
|
1149
|
+
* Padding of the medium IconButton.
|
|
1150
|
+
*
|
|
1151
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.inset.sm. Removed in 3.0.
|
|
1152
|
+
*/
|
|
1153
|
+
padding: string;
|
|
1154
|
+
};
|
|
1155
|
+
large: {
|
|
1156
|
+
/**
|
|
1157
|
+
* Minimum width of the large IconButton.
|
|
1158
|
+
*
|
|
1159
|
+
* @deprecated IconButton takes its minimum width from semantic.size.control.lg (decision 0034). Removed in 3.0.
|
|
1160
|
+
*/
|
|
1161
|
+
minWidth: string;
|
|
1162
|
+
/**
|
|
1163
|
+
* Minimum height of the large IconButton.
|
|
1164
|
+
*
|
|
1165
|
+
* @deprecated IconButton takes its minimum height from semantic.size.control.lg (decision 0034). Removed in 3.0.
|
|
1166
|
+
*/
|
|
1167
|
+
minHeight: string;
|
|
1168
|
+
/**
|
|
1169
|
+
* Padding of the large IconButton.
|
|
1170
|
+
*
|
|
1171
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.inset.md. Removed in 3.0.
|
|
1172
|
+
*/
|
|
1173
|
+
padding: string;
|
|
1174
|
+
};
|
|
1175
|
+
};
|
|
1176
|
+
};
|
|
1177
|
+
separator: {
|
|
1178
|
+
/** Divider line, the same as variants.default.border. */
|
|
1179
|
+
border: string;
|
|
1180
|
+
/**
|
|
1181
|
+
* Space around a Divider.
|
|
1182
|
+
*
|
|
1183
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0.
|
|
1184
|
+
*/
|
|
1185
|
+
margin: string;
|
|
1186
|
+
variants: {
|
|
1187
|
+
default: {
|
|
1188
|
+
/** Default Divider line. */
|
|
1189
|
+
border: string;
|
|
1190
|
+
/**
|
|
1191
|
+
* Space around the default Divider variant.
|
|
1192
|
+
*
|
|
1193
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0.
|
|
1194
|
+
*/
|
|
1195
|
+
margin: string;
|
|
1196
|
+
};
|
|
1197
|
+
strong: {
|
|
1198
|
+
/** Strong Divider line, for a firmer break. */
|
|
1199
|
+
border: string;
|
|
1200
|
+
/**
|
|
1201
|
+
* Space around a strong Divider.
|
|
1202
|
+
*
|
|
1203
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0.
|
|
1204
|
+
*/
|
|
1205
|
+
margin: string;
|
|
1206
|
+
};
|
|
1207
|
+
minimal: {
|
|
1208
|
+
/** Minimal Divider line. */
|
|
1209
|
+
border: string;
|
|
1210
|
+
/**
|
|
1211
|
+
* Space around a minimal Divider.
|
|
1212
|
+
*
|
|
1213
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.600 (vertical margin). Removed in 3.0.
|
|
1214
|
+
*/
|
|
1215
|
+
margin: string;
|
|
1216
|
+
};
|
|
1217
|
+
};
|
|
1218
|
+
sizes: {
|
|
1219
|
+
small: {
|
|
1220
|
+
/**
|
|
1221
|
+
* Space around a small Divider.
|
|
1222
|
+
*
|
|
1223
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.400 (vertical margin). Removed in 3.0.
|
|
1224
|
+
*/
|
|
1225
|
+
margin: string;
|
|
1226
|
+
};
|
|
1227
|
+
medium: {
|
|
1228
|
+
/**
|
|
1229
|
+
* Space around a medium Divider.
|
|
1230
|
+
*
|
|
1231
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.600 (vertical margin). Removed in 3.0.
|
|
1232
|
+
*/
|
|
1233
|
+
margin: string;
|
|
1234
|
+
};
|
|
1235
|
+
large: {
|
|
1236
|
+
/**
|
|
1237
|
+
* Space around a large Divider.
|
|
1238
|
+
*
|
|
1239
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0.
|
|
1240
|
+
*/
|
|
1241
|
+
margin: string;
|
|
1242
|
+
};
|
|
1243
|
+
xlarge: {
|
|
1244
|
+
/**
|
|
1245
|
+
* Space around an extra-large Divider.
|
|
1246
|
+
*
|
|
1247
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.1200 (vertical margin). Removed in 3.0.
|
|
1248
|
+
*/
|
|
1249
|
+
margin: string;
|
|
1250
|
+
};
|
|
1251
|
+
};
|
|
1252
|
+
};
|
|
1253
|
+
progressBar: {
|
|
1254
|
+
/** ProgressBar track, behind the filled part. */
|
|
1255
|
+
backgroundColor: string;
|
|
1256
|
+
/**
|
|
1257
|
+
* Corner radius of the ProgressBar track and fill.
|
|
1258
|
+
*
|
|
1259
|
+
* @deprecated ProgressBar never read it; its track and fill use semantic.radius.xs. Removed in 3.0.
|
|
1260
|
+
*/
|
|
1261
|
+
borderRadius: string;
|
|
1262
|
+
sizes: {
|
|
1263
|
+
sm: {
|
|
1264
|
+
/** Thickness of the small ProgressBar, the thinnest size. */
|
|
1265
|
+
height: string;
|
|
1266
|
+
};
|
|
1267
|
+
md: {
|
|
1268
|
+
/** Thickness of the medium ProgressBar, the default. */
|
|
1269
|
+
height: string;
|
|
1270
|
+
};
|
|
1271
|
+
lg: {
|
|
1272
|
+
/** Thickness of the large ProgressBar, for prominent progress. */
|
|
1273
|
+
height: string;
|
|
1274
|
+
};
|
|
1275
|
+
xl: {
|
|
1276
|
+
/** Thickness of the extra-large ProgressBar, the thickest size. */
|
|
1277
|
+
height: string;
|
|
1278
|
+
};
|
|
1279
|
+
};
|
|
1280
|
+
};
|
|
1281
|
+
input: {
|
|
1282
|
+
default: {
|
|
1283
|
+
/** Text input fill: TextField, PasswordField, NumberInput, Dropdown, SearchField, and the Checkbox box. */
|
|
1284
|
+
backgroundColor: string;
|
|
1285
|
+
/** Text input value colour. */
|
|
1286
|
+
textColor: string;
|
|
1287
|
+
/** Text input, Dropdown and Checkbox border at rest. At least 3:1 on white (decision 0025). */
|
|
1288
|
+
borderColor: string;
|
|
1289
|
+
/** Corner radius of text inputs and the Checkbox box. */
|
|
1290
|
+
borderRadius: string;
|
|
1291
|
+
/** Border width of text inputs and the Checkbox box. */
|
|
1292
|
+
borderWidth: string;
|
|
1293
|
+
/**
|
|
1294
|
+
* Vertical padding of single-line text inputs.
|
|
1295
|
+
*
|
|
1296
|
+
* @deprecated Single-line fields take their min-height from semantic.size.control.lg with no vertical padding (decisions 0022 and 0034). Removed in 3.0.
|
|
1297
|
+
*/
|
|
1298
|
+
paddingY: string;
|
|
1299
|
+
/**
|
|
1300
|
+
* Horizontal padding of text inputs.
|
|
1301
|
+
*
|
|
1302
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.inset.lg. Removed in 3.0.
|
|
1303
|
+
*/
|
|
1304
|
+
paddingX: string;
|
|
1305
|
+
/** Text input value typography. */
|
|
1306
|
+
font: string;
|
|
1307
|
+
};
|
|
1308
|
+
placeholder: {
|
|
1309
|
+
/** Placeholder text in every text input (TextField, PasswordField, NumberInput, SearchField, AgentInput). 8.18:1 on the white input fill: placeholders aren't exempt from the contrast minimum (WCAG 1.4.3), unlike disabled text. */
|
|
1310
|
+
textColor: string;
|
|
1311
|
+
};
|
|
1312
|
+
hover: {
|
|
1313
|
+
/** Text input border on hover. */
|
|
1314
|
+
borderColor: string;
|
|
1315
|
+
};
|
|
1316
|
+
focus: {
|
|
1317
|
+
/** Text input border while focused. */
|
|
1318
|
+
borderColor: string;
|
|
1319
|
+
/** Focus ring on text inputs and the Checkbox box. */
|
|
1320
|
+
outline: string;
|
|
1321
|
+
/**
|
|
1322
|
+
* Gap between a text input and its focus outline.
|
|
1323
|
+
*
|
|
1324
|
+
* @deprecated Use semantic.border.focusOffset (decision 0022). Removed in 3.0.
|
|
1325
|
+
*/
|
|
1326
|
+
outlineOffset: string;
|
|
1327
|
+
};
|
|
1328
|
+
error: {
|
|
1329
|
+
/** Text input border when invalid. */
|
|
1330
|
+
borderColor: string;
|
|
1331
|
+
focus: {
|
|
1332
|
+
/** Invalid text input border while focused. */
|
|
1333
|
+
borderColor: string;
|
|
1334
|
+
/** Focus ring on an invalid text input. */
|
|
1335
|
+
outline: string;
|
|
1336
|
+
/**
|
|
1337
|
+
* Gap between a text input in its error state and its focus outline.
|
|
1338
|
+
*
|
|
1339
|
+
* @deprecated Use semantic.border.focusOffset (decision 0022). Removed in 3.0.
|
|
1340
|
+
*/
|
|
1341
|
+
outlineOffset: string;
|
|
1342
|
+
};
|
|
1343
|
+
hover: {
|
|
1344
|
+
/** Invalid text input border on hover. */
|
|
1345
|
+
borderColor: string;
|
|
1346
|
+
};
|
|
1347
|
+
};
|
|
1348
|
+
disabled: {
|
|
1349
|
+
/** Disabled text input fill. */
|
|
1350
|
+
backgroundColor: string;
|
|
1351
|
+
/** Disabled text input value colour. */
|
|
1352
|
+
textColor: string;
|
|
1353
|
+
/** Disabled text input, Dropdown and Checkbox border. Stays light: WCAG 1.4.11 exempts inactive controls (decision 0025). */
|
|
1354
|
+
borderColor: string;
|
|
1355
|
+
/**
|
|
1356
|
+
* Cursor over a disabled text input.
|
|
1357
|
+
*
|
|
1358
|
+
* @deprecated Behaviour, not a design decision, stays in component code (decision 0014, rule 5); inputs set cursor: not-allowed themselves. Removed in 3.0.
|
|
1359
|
+
*/
|
|
1360
|
+
cursor: string;
|
|
1361
|
+
};
|
|
1362
|
+
textarea: {
|
|
1363
|
+
/** Minimum height of TextArea, tall enough for a few lines of entry (decision 0034). */
|
|
1364
|
+
minHeight: string;
|
|
1365
|
+
};
|
|
1366
|
+
};
|
|
1367
|
+
badge: {
|
|
1368
|
+
dot: {
|
|
1369
|
+
/** Width and height of the dot Badge indicator on a button, tab or icon. */
|
|
1370
|
+
size: string;
|
|
1371
|
+
};
|
|
1372
|
+
count: {
|
|
1373
|
+
/** Minimum width of the count Badge, so a single digit sits in a circle. */
|
|
1374
|
+
minWidth: string;
|
|
1375
|
+
/** Height of the count Badge indicator on a button, tab or icon. */
|
|
1376
|
+
height: string;
|
|
1377
|
+
/**
|
|
1378
|
+
* Horizontal padding of a count Badge.
|
|
1379
|
+
*
|
|
1380
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.inset.xs. Removed in 3.0.
|
|
1381
|
+
*/
|
|
1382
|
+
paddingX: string;
|
|
1383
|
+
/** Line height of the count text, so the digits centre in the indicator. */
|
|
1384
|
+
lineHeight: string;
|
|
1385
|
+
};
|
|
1386
|
+
ring: {
|
|
1387
|
+
/** Ring that separates a Badge indicator from the element it sits on. */
|
|
1388
|
+
width: string;
|
|
1389
|
+
};
|
|
1390
|
+
/** Badge indicators are always fully circular. */
|
|
1391
|
+
borderRadius: string;
|
|
1392
|
+
label: {
|
|
1393
|
+
/** Text weight for the badge-like label family: StatusBadge, CategoryBadge and Tag (decision 0014). Declare it after the typography shorthand, which would otherwise reset it. */
|
|
1394
|
+
fontWeight: string;
|
|
1395
|
+
typography: {
|
|
1396
|
+
/** Typography for small labels in the badge-like family (StatusBadge, CategoryBadge small; Tag). Combine with label.fontWeight. */
|
|
1397
|
+
small: string;
|
|
1398
|
+
/** Typography for medium labels in the badge-like family (StatusBadge, CategoryBadge medium). Combine with label.fontWeight. */
|
|
1399
|
+
medium: string;
|
|
1400
|
+
};
|
|
1401
|
+
};
|
|
1402
|
+
};
|
|
1403
|
+
field: {
|
|
1404
|
+
/**
|
|
1405
|
+
* Vertical gap between a field's label, control and helper text.
|
|
1406
|
+
*
|
|
1407
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.200. Removed in 3.0.
|
|
1408
|
+
*/
|
|
1409
|
+
gap: string;
|
|
1410
|
+
label: {
|
|
1411
|
+
/** Field label text. */
|
|
1412
|
+
typography: string;
|
|
1413
|
+
/** Field label colour. */
|
|
1414
|
+
color: string;
|
|
1415
|
+
/** Field label colour when the field is disabled. */
|
|
1416
|
+
colorDisabled: string;
|
|
1417
|
+
/**
|
|
1418
|
+
* Gap between a label and its required indicator.
|
|
1419
|
+
*
|
|
1420
|
+
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.100. Removed in 3.0.
|
|
1421
|
+
*/
|
|
1422
|
+
gap: string;
|
|
1423
|
+
};
|
|
1424
|
+
requiredIndicator: {
|
|
1425
|
+
/** Colour of the required-field asterisk. */
|
|
1426
|
+
color: string;
|
|
1427
|
+
/** Weight of the required-field asterisk. */
|
|
1428
|
+
fontWeight: string;
|
|
1429
|
+
};
|
|
1430
|
+
helperText: {
|
|
1431
|
+
/** Helper and error text under a field (TextField, PasswordField, NumberInput, Dropdown, Checkbox). One step below the label. */
|
|
1432
|
+
typography: string;
|
|
1433
|
+
/** Helper text colour. */
|
|
1434
|
+
color: string;
|
|
1435
|
+
/** Helper text colour when it describes an error. */
|
|
1436
|
+
colorError: string;
|
|
1437
|
+
};
|
|
1438
|
+
};
|
|
1439
|
+
alert: {
|
|
1440
|
+
severity: {
|
|
1441
|
+
error: {
|
|
1442
|
+
/** Error alert background, in both appearances. */
|
|
1443
|
+
background: string;
|
|
1444
|
+
/** Error alert text colour. */
|
|
1445
|
+
text: string;
|
|
1446
|
+
};
|
|
1447
|
+
warning: {
|
|
1448
|
+
/** Warning alert background, in both appearances. */
|
|
1449
|
+
background: string;
|
|
1450
|
+
/** Warning alert text colour. */
|
|
1451
|
+
text: string;
|
|
1452
|
+
};
|
|
1453
|
+
info: {
|
|
1454
|
+
/** Info alert background, in both appearances. */
|
|
1455
|
+
background: string;
|
|
1456
|
+
/** Info alert text colour. */
|
|
1457
|
+
text: string;
|
|
1458
|
+
};
|
|
1459
|
+
success: {
|
|
1460
|
+
/** Success alert background, in both appearances. */
|
|
1461
|
+
background: string;
|
|
1462
|
+
/** Success alert text colour. */
|
|
1463
|
+
text: string;
|
|
1464
|
+
};
|
|
1465
|
+
};
|
|
1466
|
+
appearance: {
|
|
1467
|
+
outlined: {
|
|
1468
|
+
borderColor: {
|
|
1469
|
+
/** Outlined error alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
|
|
1470
|
+
error: string;
|
|
1471
|
+
/** Outlined warning alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
|
|
1472
|
+
warning: string;
|
|
1473
|
+
/** Outlined info alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
|
|
1474
|
+
info: string;
|
|
1475
|
+
/** Outlined success alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
|
|
1476
|
+
success: string;
|
|
1477
|
+
};
|
|
1478
|
+
};
|
|
1479
|
+
borderless: {
|
|
1480
|
+
borderColor: {
|
|
1481
|
+
/** Borderless error alert: no visible border, keeping its width so both appearances take the same space (decision 0019). */
|
|
1482
|
+
error: string;
|
|
1483
|
+
/** Borderless warning alert: no visible border, keeping its width so both appearances take the same space (decision 0019). */
|
|
1484
|
+
warning: string;
|
|
1485
|
+
/** Borderless info alert: no visible border, keeping its width so both appearances take the same space (decision 0019). */
|
|
1486
|
+
info: string;
|
|
1487
|
+
/** Borderless success alert: no visible border, keeping its width so both appearances take the same space (decision 0019). */
|
|
1488
|
+
success: string;
|
|
1489
|
+
};
|
|
1490
|
+
};
|
|
1491
|
+
};
|
|
1492
|
+
title: {
|
|
1493
|
+
/** Alert title style (h6), adjusted by title.fontWeight and title.lineHeight. */
|
|
1494
|
+
typography: string;
|
|
1495
|
+
/** Alert titles are semibold, heavier than h6's medium. */
|
|
1496
|
+
fontWeight: string;
|
|
1497
|
+
/** Alert titles use a tighter line height than h6. */
|
|
1498
|
+
lineHeight: string;
|
|
1499
|
+
};
|
|
1500
|
+
message: {
|
|
1501
|
+
/** Alert message style (body), adjusted by message.lineHeight. */
|
|
1502
|
+
typography: string;
|
|
1503
|
+
/** Alert messages use a tighter line height than body. */
|
|
1504
|
+
lineHeight: string;
|
|
1505
|
+
};
|
|
1506
|
+
};
|
|
1507
|
+
tabBar: {
|
|
1508
|
+
badge: {
|
|
1509
|
+
/** Tab count badge text. */
|
|
1510
|
+
typography: string;
|
|
1511
|
+
/** Tab count badges are bold, heavier than caption. */
|
|
1512
|
+
fontWeight: string;
|
|
1513
|
+
/** Height and minimum width of a tab's count badge in TabBar. */
|
|
1514
|
+
size: string;
|
|
1515
|
+
};
|
|
1516
|
+
scrollbar: {
|
|
1517
|
+
/** Height of the horizontal scrollbar TabBar shows when its tabs overflow. */
|
|
1518
|
+
height: string;
|
|
1519
|
+
};
|
|
1520
|
+
};
|
|
1521
|
+
searchField: {
|
|
1522
|
+
sectionHeader: {
|
|
1523
|
+
/** Suggestion-list section header text (shown uppercase). */
|
|
1524
|
+
typography: string;
|
|
1525
|
+
/** Tracking for the uppercase section header. */
|
|
1526
|
+
letterSpacing: string;
|
|
1527
|
+
};
|
|
1528
|
+
};
|
|
1529
|
+
avatar: {
|
|
1530
|
+
initials: {
|
|
1531
|
+
/** Initials font. */
|
|
1532
|
+
fontFamily: string;
|
|
1533
|
+
/** Initials weight. */
|
|
1534
|
+
fontWeight: string;
|
|
1535
|
+
/** Initials sit on a single line equal to their size. */
|
|
1536
|
+
lineHeight: string;
|
|
1537
|
+
fontSize: {
|
|
1538
|
+
/** Initials in an xs avatar. */
|
|
1539
|
+
xs: string;
|
|
1540
|
+
/** Initials in an sm avatar. */
|
|
1541
|
+
sm: string;
|
|
1542
|
+
/** Initials in an md avatar. */
|
|
1543
|
+
md: string;
|
|
1544
|
+
/** Initials in an lg avatar. */
|
|
1545
|
+
lg: string;
|
|
1546
|
+
/** Initials in an xl avatar. */
|
|
1547
|
+
xl: string;
|
|
1548
|
+
};
|
|
1549
|
+
};
|
|
1550
|
+
};
|
|
1551
|
+
codeBlock: {
|
|
1552
|
+
/** Code font. */
|
|
1553
|
+
fontFamily: string;
|
|
1554
|
+
/** Code text size. */
|
|
1555
|
+
fontSize: string;
|
|
1556
|
+
/** Code line height. */
|
|
1557
|
+
lineHeight: string;
|
|
1558
|
+
};
|
|
1559
|
+
slider: {
|
|
1560
|
+
thumb: {
|
|
1561
|
+
shadow: {
|
|
1562
|
+
/** Slider thumb at rest. */
|
|
1563
|
+
default: string;
|
|
1564
|
+
/** Slider thumb on hover: one step deeper. */
|
|
1565
|
+
hover: string;
|
|
1566
|
+
/** Slider thumb while dragging: deepest. */
|
|
1567
|
+
active: string;
|
|
1568
|
+
};
|
|
1569
|
+
/** Fill of Slider's thumb: white, so it reads on both the track and the fill. */
|
|
1570
|
+
background: string;
|
|
1571
|
+
};
|
|
1572
|
+
};
|
|
1573
|
+
accountCard: {
|
|
1574
|
+
header: {
|
|
1575
|
+
/** Minimum height of AccountCard's header row, so cards in a grid line up. */
|
|
1576
|
+
minHeight: string;
|
|
1577
|
+
};
|
|
1578
|
+
/** Narrowest an AccountCard may get before its content wraps badly. */
|
|
1579
|
+
minWidth: string;
|
|
1580
|
+
};
|
|
1581
|
+
breadcrumbs: {
|
|
1582
|
+
item: {
|
|
1583
|
+
/** Width at which a long Breadcrumbs label truncates with an ellipsis. */
|
|
1584
|
+
maxWidth: string;
|
|
1585
|
+
};
|
|
1586
|
+
/** Breadcrumb-sized text; Breadcrumbs uses typography.caption for its links today. */
|
|
1587
|
+
font: string;
|
|
1588
|
+
};
|
|
1589
|
+
cardLarge: {
|
|
1590
|
+
/** Widest a CardLarge grows, so its text keeps a readable measure. */
|
|
1591
|
+
maxWidth: string;
|
|
1592
|
+
};
|
|
1593
|
+
checkbox: {
|
|
1594
|
+
box: {
|
|
1595
|
+
/** Width and height of the Checkbox and Radio box. */
|
|
1596
|
+
size: string;
|
|
1597
|
+
};
|
|
1598
|
+
row: {
|
|
1599
|
+
/** Minimum height of a Checkbox or Radio row, so the whole row is easy to hit. */
|
|
1600
|
+
minHeight: string;
|
|
1601
|
+
};
|
|
1602
|
+
};
|
|
1603
|
+
emptyState: {
|
|
1604
|
+
illustration: {
|
|
1605
|
+
/** Size of the small EmptyState illustration, for empty panels and cards. */
|
|
1606
|
+
small: string;
|
|
1607
|
+
/** Size of the medium EmptyState illustration, the default. */
|
|
1608
|
+
medium: string;
|
|
1609
|
+
/** Size of the large EmptyState illustration, for full-page empty states. */
|
|
1610
|
+
large: string;
|
|
1611
|
+
};
|
|
1612
|
+
/** Widest an EmptyState block grows inside a wide container. */
|
|
1613
|
+
maxWidth: string;
|
|
1614
|
+
text: {
|
|
1615
|
+
/** Widest EmptyState's title and description run, for a readable measure. */
|
|
1616
|
+
maxWidth: string;
|
|
1617
|
+
};
|
|
1618
|
+
actions: {
|
|
1619
|
+
/** Widest EmptyState's actions area grows, so buttons don't stretch. */
|
|
1620
|
+
maxWidth: string;
|
|
1621
|
+
};
|
|
1622
|
+
};
|
|
1623
|
+
listItem: {
|
|
1624
|
+
expandedIndent: {
|
|
1625
|
+
/** Indent of a compact ListItem's expanded content, aligning it with the label. */
|
|
1626
|
+
compact: string;
|
|
1627
|
+
/** Left indent of a comfortable ListItem's expanded content. */
|
|
1628
|
+
comfortable: string;
|
|
1629
|
+
};
|
|
1630
|
+
};
|
|
1631
|
+
transactionListItem: {
|
|
1632
|
+
/** Minimum height of a TransactionListItem row, so rows line up in a list. */
|
|
1633
|
+
minHeight: string;
|
|
1634
|
+
};
|
|
1635
|
+
status: {
|
|
1636
|
+
pending: {
|
|
1637
|
+
/** Text and icon of a pending StatusLabel, on its pending background. */
|
|
1638
|
+
text: string;
|
|
1639
|
+
/** Fill of a pending StatusLabel, behind its pending text. */
|
|
1640
|
+
background: string;
|
|
1641
|
+
};
|
|
1642
|
+
completed: {
|
|
1643
|
+
/** Text and icon of a completed StatusLabel, on its completed background. */
|
|
1644
|
+
text: string;
|
|
1645
|
+
/** Fill of a completed StatusLabel, behind its completed text. */
|
|
1646
|
+
background: string;
|
|
1647
|
+
};
|
|
1648
|
+
failed: {
|
|
1649
|
+
/** Text and icon of a failed StatusLabel, on its failed background. */
|
|
1650
|
+
text: string;
|
|
1651
|
+
/** Fill of a failed StatusLabel, behind its failed text. */
|
|
1652
|
+
background: string;
|
|
1653
|
+
};
|
|
1654
|
+
cancelled: {
|
|
1655
|
+
/** Text and icon of a cancelled StatusLabel, on its cancelled background. */
|
|
1656
|
+
text: string;
|
|
1657
|
+
/** Fill of a cancelled StatusLabel, behind its cancelled text. */
|
|
1658
|
+
background: string;
|
|
1659
|
+
};
|
|
1660
|
+
processing: {
|
|
1661
|
+
/** Text and icon of a processing StatusLabel, on its processing background. */
|
|
1662
|
+
text: string;
|
|
1663
|
+
/** Fill of a processing StatusLabel, behind its processing text. */
|
|
1664
|
+
background: string;
|
|
1665
|
+
};
|
|
1666
|
+
scheduled: {
|
|
1667
|
+
/** Text and icon of a scheduled StatusLabel, on its scheduled background. */
|
|
1668
|
+
text: string;
|
|
1669
|
+
/** Fill of a scheduled StatusLabel, behind its scheduled text. */
|
|
1670
|
+
background: string;
|
|
1671
|
+
};
|
|
1672
|
+
};
|
|
1673
|
+
transaction: {
|
|
1674
|
+
/** Positive amounts and credits in MoneyDisplay and TransactionListItem. */
|
|
1675
|
+
credit: string;
|
|
1676
|
+
/** A credit amount on a hovered interactive row. */
|
|
1677
|
+
'credit-hover': string;
|
|
1678
|
+
/** Negative amounts and debits in MoneyDisplay and TransactionListItem. */
|
|
1679
|
+
debit: string;
|
|
1680
|
+
/** A debit amount on a hovered interactive row. */
|
|
1681
|
+
'debit-hover': string;
|
|
1682
|
+
/** Amounts of pending or processing transactions. */
|
|
1683
|
+
pending: string;
|
|
1684
|
+
/** Informational amounts that are neither credit nor debit. */
|
|
1685
|
+
neutral: string;
|
|
1686
|
+
};
|
|
1687
|
+
track: {
|
|
1688
|
+
/** Unfilled track of ProgressBar and Slider; the fill and thumb show the value (decision 0026). */
|
|
1689
|
+
background: string;
|
|
1690
|
+
};
|
|
1691
|
+
tooltip: {
|
|
1692
|
+
/** Dotted underline marking text that has a tooltip. */
|
|
1693
|
+
border: string;
|
|
1694
|
+
};
|
|
1695
|
+
};
|
|
1696
|
+
semantic: {
|
|
1697
|
+
elevation: {
|
|
1698
|
+
/** No elevation - flat surfaces, default state */
|
|
1699
|
+
none: string;
|
|
1700
|
+
/** Sunken/pressed states, input fields, wells */
|
|
1701
|
+
inset: string;
|
|
1702
|
+
/** Subtle lift - cards, buttons with depth */
|
|
1703
|
+
raised: string;
|
|
1704
|
+
/** Moderate lift - tooltips, popovers, dropdowns */
|
|
1705
|
+
floating: string;
|
|
1706
|
+
/** High lift - modals, dialogs, action sheets */
|
|
1707
|
+
overlay: string;
|
|
1708
|
+
/** Fixed headers, sticky navigation, bottom bars */
|
|
1709
|
+
sticky: string;
|
|
1710
|
+
};
|
|
1711
|
+
breakpoint: {
|
|
1712
|
+
/** The smallest viewport, where mobile-first styles start. */
|
|
1713
|
+
xs: string;
|
|
1714
|
+
/** Breakpoint for large phones in landscape and small tablets. */
|
|
1715
|
+
sm: string;
|
|
1716
|
+
/** Breakpoint for tablets; below it, mobile layouts apply, such as a fullscreen Modal. */
|
|
1717
|
+
md: string;
|
|
1718
|
+
/** Breakpoint for small desktops and landscape tablets. */
|
|
1719
|
+
lg: string;
|
|
1720
|
+
/** Breakpoint for standard desktops. */
|
|
1721
|
+
xl: string;
|
|
1722
|
+
/** Breakpoint for wide desktops; layouts can add columns from here. */
|
|
1723
|
+
'2xl': string;
|
|
1724
|
+
};
|
|
1725
|
+
opacity: {
|
|
1726
|
+
/** 0.5: disabled controls and items. */
|
|
1727
|
+
disabled: string;
|
|
1728
|
+
/** 1: fully opaque (the enabled counterpart of disabled). */
|
|
1729
|
+
full: string;
|
|
1730
|
+
/** Content that fades to answer hover, such as a clickable card's image. */
|
|
1731
|
+
hover: string;
|
|
1732
|
+
/** Content that fades while pressed, one step further than hover. */
|
|
1733
|
+
pressed: string;
|
|
1734
|
+
};
|
|
1735
|
+
fontFamily: {
|
|
1736
|
+
/** UI text (Inter). Use a typography style where one fits; this is for components that set the family on its own. */
|
|
1737
|
+
body: string;
|
|
1738
|
+
/** Code and other fixed-width text (CodeBlock). */
|
|
1739
|
+
monospace: string;
|
|
1740
|
+
};
|
|
1741
|
+
fontSize: {
|
|
1742
|
+
/** Smallest text size: captions, metadata and small labels. */
|
|
1743
|
+
xs: string;
|
|
1744
|
+
/** Secondary text size: labels, compact controls and supporting copy. */
|
|
1745
|
+
sm: string;
|
|
1746
|
+
/** Body text size: paragraphs, input values and most controls. */
|
|
1747
|
+
md: string;
|
|
1748
|
+
/** One step larger than body text on the type scale. */
|
|
1749
|
+
lg: string;
|
|
1750
|
+
/** Two steps larger than body text on the type scale. */
|
|
1751
|
+
xl: string;
|
|
1752
|
+
};
|
|
1753
|
+
lineHeight: {
|
|
1754
|
+
/** 1 (unitless): line box equals the font size. For single-line glyphs such as avatar initials and count indicators. */
|
|
1755
|
+
none: string;
|
|
1756
|
+
/** Line height for compact multi-line text, such as Alert and CodeBlock. */
|
|
1757
|
+
tight: string;
|
|
1758
|
+
/** Line height for body text and multi-line entry, such as TextArea. */
|
|
1759
|
+
normal: string;
|
|
1760
|
+
};
|
|
1761
|
+
letterSpacing: {
|
|
1762
|
+
/** Tightest tracking, for the largest headings: display and h1. */
|
|
1763
|
+
tighter: string;
|
|
1764
|
+
/** Slightly tighter tracking for mid-size headings, h2 to h4. */
|
|
1765
|
+
tight: string;
|
|
1766
|
+
/** 0: default tracking (h5, h6 and text). */
|
|
1767
|
+
normal: string;
|
|
1768
|
+
/** Wide tracking for small uppercase labels, such as SearchField section headers. */
|
|
1769
|
+
wide: string;
|
|
1770
|
+
};
|
|
1771
|
+
fontWeight: {
|
|
1772
|
+
/** 400. Body text, captions, most UI text. */
|
|
1773
|
+
regular: string;
|
|
1774
|
+
/** 500. Subheadings (h5, h6, subtitle), buttons, emphasis within UI text. */
|
|
1775
|
+
medium: string;
|
|
1776
|
+
/** 600. Labels and short titles that need more weight than medium (label, Alert title). */
|
|
1777
|
+
semibold: string;
|
|
1778
|
+
/** 700. Headings (display to h4), overline, strong indicators such as the required-field asterisk. */
|
|
1779
|
+
bold: string;
|
|
1780
|
+
};
|
|
1781
|
+
zIndex: {
|
|
1782
|
+
/**
|
|
1783
|
+
* Sticky and fixed chrome that stays visible while scrolling: sticky headers, section headers, navigation bars. Pair with elevation.sticky. Sits below dropdowns, overlays and modals.
|
|
1784
|
+
*
|
|
1785
|
+
* @deprecated Renamed to semantic.layer.sticky by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1786
|
+
*/
|
|
1787
|
+
sticky: string;
|
|
1788
|
+
/**
|
|
1789
|
+
* Floating menus anchored to a control: dropdown menus, select and autocomplete lists (Dropdown, SearchField). Pair with elevation.floating. Sits above sticky, below overlays.
|
|
1790
|
+
*
|
|
1791
|
+
* @deprecated Renamed to semantic.layer.dropdown by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1792
|
+
*/
|
|
1793
|
+
dropdown: string;
|
|
1794
|
+
/**
|
|
1795
|
+
* Panels that slide over the page and their backdrop: sheets, drawers (Sheet). The backdrop uses the same value and comes before the panel in the DOM. Pair with elevation.overlay. Sits below modals.
|
|
1796
|
+
*
|
|
1797
|
+
* @deprecated Renamed to semantic.layer.overlay by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1798
|
+
*/
|
|
1799
|
+
overlay: string;
|
|
1800
|
+
/**
|
|
1801
|
+
* Blocking dialogs and their backdrop: modals, action sheets (Modal, ActionSheet). The backdrop uses the same value and comes before the dialog in the DOM. Pair with elevation.overlay. Topmost layer in the system.
|
|
1802
|
+
*
|
|
1803
|
+
* @deprecated Renamed to semantic.layer.modal by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1804
|
+
*/
|
|
1805
|
+
modal: string;
|
|
1806
|
+
};
|
|
1807
|
+
border: {
|
|
1808
|
+
/** Hairline in the default border colour: dividers that separate content, such as Breadcrumbs. 1.19:1 on white, so never a control's edge (decision 0025). */
|
|
1809
|
+
default: string;
|
|
1810
|
+
/**
|
|
1811
|
+
* Hairline in the subtle border colour: dividers and decorative outlines, such as CodeBlock and Separator. 1.30:1 on white, so never a control's edge (decision 0025).
|
|
1812
|
+
*
|
|
1813
|
+
* @deprecated Renamed to semantic.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1814
|
+
*/
|
|
1815
|
+
subtle: string;
|
|
1816
|
+
/**
|
|
1817
|
+
* Hairline in near-black: a firm outline that must read as a boundary, such as a hovered or focused text input. 11.51:1 on white.
|
|
1818
|
+
*
|
|
1819
|
+
* @deprecated Renamed to semantic.border.input-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1820
|
+
*/
|
|
1821
|
+
strong: string;
|
|
1822
|
+
/** The focus ring every component draws, with border.focusOffset; never blue (decision 0029). */
|
|
1823
|
+
focus: string;
|
|
1824
|
+
/**
|
|
1825
|
+
* Dotted underline marking text that has a tooltip.
|
|
1826
|
+
*
|
|
1827
|
+
* @deprecated Moved to the component tier as component.tooltip.border (decision 0031 §6). Removed in 3.0.
|
|
1828
|
+
*/
|
|
1829
|
+
tooltip: string;
|
|
1830
|
+
width: {
|
|
1831
|
+
/** Hairline border: dividers, control edges and rings. */
|
|
1832
|
+
thin: string;
|
|
1833
|
+
/** Thick border: focus rings, emphasised outlines and selected states. */
|
|
1834
|
+
thick: string;
|
|
1835
|
+
};
|
|
1836
|
+
/** Gap between an element and its focus ring; negate it to inset the ring inside the element. */
|
|
1837
|
+
focusOffset: string;
|
|
1838
|
+
radius: {
|
|
1839
|
+
/**
|
|
1840
|
+
* No rounding - tables, dividers, inline code blocks, sharp-edged containers
|
|
1841
|
+
*
|
|
1842
|
+
* @deprecated Renamed to semantic.radius.none by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1843
|
+
*/
|
|
1844
|
+
none: string;
|
|
1845
|
+
/**
|
|
1846
|
+
* Minimal rounding - small badges, compact tags, inline buttons, checkboxes
|
|
1847
|
+
*
|
|
1848
|
+
* @deprecated Renamed to semantic.radius.xs by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1849
|
+
*/
|
|
1850
|
+
xs: string;
|
|
1851
|
+
/**
|
|
1852
|
+
* Subtle rounding - buttons, inputs, chips, form controls, list items
|
|
1853
|
+
*
|
|
1854
|
+
* @deprecated Renamed to semantic.radius.sm by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1855
|
+
*/
|
|
1856
|
+
sm: string;
|
|
1857
|
+
/**
|
|
1858
|
+
* Standard rounding - cards, containers, dropdowns, popovers, menus
|
|
1859
|
+
*
|
|
1860
|
+
* @deprecated Renamed to semantic.radius.md by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1861
|
+
*/
|
|
1862
|
+
md: string;
|
|
1863
|
+
/**
|
|
1864
|
+
* Generous rounding - modals, action sheets, dialogs, feature cards, panels
|
|
1865
|
+
*
|
|
1866
|
+
* @deprecated Renamed to semantic.radius.lg by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1867
|
+
*/
|
|
1868
|
+
lg: string;
|
|
1869
|
+
/**
|
|
1870
|
+
* Large rounding - pills, pill buttons, prominent CTAs, search bars
|
|
1871
|
+
*
|
|
1872
|
+
* @deprecated Renamed to semantic.radius.xl by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1873
|
+
*/
|
|
1874
|
+
xl: string;
|
|
1875
|
+
/**
|
|
1876
|
+
* Extra large rounding - hero elements, decorative containers, large pills
|
|
1877
|
+
*
|
|
1878
|
+
* @deprecated Renamed to semantic.radius.2xl by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1879
|
+
*/
|
|
1880
|
+
'2xl': string;
|
|
1881
|
+
/**
|
|
1882
|
+
* Maximum rounding - decorative elements, marketing components, large decorative cards
|
|
1883
|
+
*
|
|
1884
|
+
* @deprecated Renamed to semantic.radius.3xl by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1885
|
+
*/
|
|
1886
|
+
'3xl': string;
|
|
1887
|
+
/**
|
|
1888
|
+
* Fully circular - avatars, round icon buttons, status indicators, FABs
|
|
1889
|
+
*
|
|
1890
|
+
* @deprecated Renamed to semantic.radius.full by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1891
|
+
*/
|
|
1892
|
+
circle: string;
|
|
1893
|
+
};
|
|
1894
|
+
/** Hairline for dividers and decorative outlines, such as CodeBlock and Divider; never a control edge. */
|
|
1895
|
+
emphasis: string;
|
|
1896
|
+
/** Firm hairline that must read as a boundary, such as a hovered text input. */
|
|
1897
|
+
'input-hover': string;
|
|
1898
|
+
};
|
|
1899
|
+
size: {
|
|
1900
|
+
/** Size step for thin bars: the TabBar scrollbar, the small ProgressBar. */
|
|
1901
|
+
'100': string;
|
|
1902
|
+
/** Size step for small marks: the Badge dot, the medium ProgressBar. */
|
|
1903
|
+
'200': string;
|
|
1904
|
+
/** Size step for compact indicators: the Badge count, the large ProgressBar. */
|
|
1905
|
+
'400': string;
|
|
1906
|
+
/** Size step for small boxes: the Checkbox box, TabBar count badges, small labels. */
|
|
1907
|
+
'500': string;
|
|
1908
|
+
/** Size step for the medium label height, used by chips and StatusLabel. */
|
|
1909
|
+
'600': string;
|
|
1910
|
+
/** Size step for compact rows and large labels, such as the Checkbox row. */
|
|
1911
|
+
'800': string;
|
|
1912
|
+
/** Size step for headers and indents, such as the AccountCard header. */
|
|
1913
|
+
'1200': string;
|
|
1914
|
+
/** Size step for the comfortable ListItem expanded indent. */
|
|
1915
|
+
'1500': string;
|
|
1916
|
+
/** Size step for tall rows, such as the TransactionListItem minimum height. */
|
|
1917
|
+
'1800': string;
|
|
1918
|
+
/** Size step for small illustrations, such as the small EmptyState image. */
|
|
1919
|
+
'2000': string;
|
|
1920
|
+
/** Size step for medium illustrations and multi-line inputs: EmptyState, TextArea. */
|
|
1921
|
+
'3000': string;
|
|
1922
|
+
/** Size step for truncation widths, such as a Breadcrumbs label. */
|
|
1923
|
+
'4500': string;
|
|
1924
|
+
/** Size step for large illustrations, such as the large EmptyState image. */
|
|
1925
|
+
'5000': string;
|
|
1926
|
+
/** Size step for narrow column widths: AccountCard, EmptyState actions. */
|
|
1927
|
+
'7500': string;
|
|
1928
|
+
/** Size step for readable text widths, such as EmptyState copy. */
|
|
1929
|
+
'9000': string;
|
|
1930
|
+
/** Size step for compact panel widths, such as the EmptyState block. */
|
|
1931
|
+
'10000': string;
|
|
1932
|
+
/** Size step for wide content columns, such as CardLarge. */
|
|
1933
|
+
'19200': string;
|
|
1934
|
+
/** Minimum pointer target for a control that's smaller to look at: its invisible hit area (WCAG 2.5.8, decision 0039). On touch screens, use touchTarget. */
|
|
1935
|
+
pointerTarget: string;
|
|
1936
|
+
/** Minimum height of a tappable row or control on touch screens. */
|
|
1937
|
+
touchTarget: string;
|
|
1938
|
+
control: {
|
|
1939
|
+
/** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
|
|
1940
|
+
sm: string;
|
|
1941
|
+
/** Minimum height of medium controls: the default IconButton, medium Buttons (decision 0034). */
|
|
1942
|
+
md: string;
|
|
1943
|
+
/** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
|
|
1944
|
+
lg: string;
|
|
1945
|
+
};
|
|
1946
|
+
overlay: {
|
|
1947
|
+
/** Width of a small Modal, and the default width or height of a Sheet. */
|
|
1948
|
+
sm: string;
|
|
1949
|
+
/** Width of a medium overlay panel, such as a medium Modal. */
|
|
1950
|
+
md: string;
|
|
1951
|
+
/** Width of a large overlay panel, such as a large Modal. */
|
|
1952
|
+
lg: string;
|
|
1953
|
+
};
|
|
1954
|
+
label: {
|
|
1955
|
+
/** Height of a small label: StatusLabel small and Tag small (decision 0018). */
|
|
1956
|
+
small: string;
|
|
1957
|
+
/** Height of a medium label and every chip: StatusLabel, Tag, CategoryLabel (0018, 0035). */
|
|
1958
|
+
medium: string;
|
|
1959
|
+
/** Height of a large label: CategoryLabel large (decision 0018). */
|
|
1960
|
+
large: string;
|
|
1961
|
+
};
|
|
1962
|
+
menu: {
|
|
1963
|
+
/** Tallest a floating menu grows before it scrolls: Dropdown, SearchField. */
|
|
1964
|
+
maxHeight: string;
|
|
1965
|
+
};
|
|
1966
|
+
dimension: {
|
|
1967
|
+
/**
|
|
1968
|
+
* 0.25rem (4px): TabBar scrollbar height; small ProgressBar height (via component tokens).
|
|
1969
|
+
*
|
|
1970
|
+
* @deprecated Renamed to semantic.size.100 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1971
|
+
*/
|
|
1972
|
+
'1': string;
|
|
1973
|
+
/**
|
|
1974
|
+
* 0.5rem (8px): medium ProgressBar height; Badge dot (via component tokens). Approved under decision 0022.
|
|
1975
|
+
*
|
|
1976
|
+
* @deprecated Renamed to semantic.size.200 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1977
|
+
*/
|
|
1978
|
+
'2': string;
|
|
1979
|
+
/**
|
|
1980
|
+
* 1rem (16px): large ProgressBar height; Badge count minimum width and height (via component tokens). Approved under decision 0022.
|
|
1981
|
+
*
|
|
1982
|
+
* @deprecated Renamed to semantic.size.400 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1983
|
+
*/
|
|
1984
|
+
'4': string;
|
|
1985
|
+
/**
|
|
1986
|
+
* 1.25rem (20px): checkbox box; TabBar count badge; extra-large ProgressBar height (via component tokens); small label height (via size.label.small).
|
|
1987
|
+
*
|
|
1988
|
+
* @deprecated Renamed to semantic.size.500 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1989
|
+
*/
|
|
1990
|
+
'5': string;
|
|
1991
|
+
/**
|
|
1992
|
+
* 1.5rem (24px): medium label height (via size.label.medium).
|
|
1993
|
+
*
|
|
1994
|
+
* @deprecated Renamed to semantic.size.600 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
1995
|
+
*/
|
|
1996
|
+
'6': string;
|
|
1997
|
+
/**
|
|
1998
|
+
* 2rem (32px): checkbox row minimum height (via component tokens); large label height (via size.label.large).
|
|
1999
|
+
*
|
|
2000
|
+
* @deprecated Renamed to semantic.size.800 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2001
|
+
*/
|
|
2002
|
+
'8': string;
|
|
2003
|
+
/**
|
|
2004
|
+
* 3rem (48px): AccountCard header minimum height; compact ListItem expanded indent (via component tokens).
|
|
2005
|
+
*
|
|
2006
|
+
* @deprecated Renamed to semantic.size.1200 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2007
|
+
*/
|
|
2008
|
+
'12': string;
|
|
2009
|
+
/**
|
|
2010
|
+
* 3.75rem (60px): comfortable ListItem expanded indent (via component tokens).
|
|
2011
|
+
*
|
|
2012
|
+
* @deprecated Renamed to semantic.size.1500 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2013
|
+
*/
|
|
2014
|
+
'15': string;
|
|
2015
|
+
/**
|
|
2016
|
+
* 4.5rem (72px): TransactionListItem minimum height (via component tokens).
|
|
2017
|
+
*
|
|
2018
|
+
* @deprecated Renamed to semantic.size.1800 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2019
|
+
*/
|
|
2020
|
+
'18': string;
|
|
2021
|
+
/**
|
|
2022
|
+
* 5rem (80px): small EmptyState illustration (via component tokens).
|
|
2023
|
+
*
|
|
2024
|
+
* @deprecated Renamed to semantic.size.2000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2025
|
+
*/
|
|
2026
|
+
'20': string;
|
|
2027
|
+
/**
|
|
2028
|
+
* 7.5rem (120px): medium EmptyState illustration; TextArea minimum height (via component tokens).
|
|
2029
|
+
*
|
|
2030
|
+
* @deprecated Renamed to semantic.size.3000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2031
|
+
*/
|
|
2032
|
+
'30': string;
|
|
2033
|
+
/**
|
|
2034
|
+
* 11.25rem (180px): Breadcrumbs label truncation width (via component tokens).
|
|
2035
|
+
*
|
|
2036
|
+
* @deprecated Renamed to semantic.size.4500 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2037
|
+
*/
|
|
2038
|
+
'45': string;
|
|
2039
|
+
/**
|
|
2040
|
+
* 12.5rem (200px): large EmptyState illustration (via component tokens).
|
|
2041
|
+
*
|
|
2042
|
+
* @deprecated Renamed to semantic.size.5000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2043
|
+
*/
|
|
2044
|
+
'50': string;
|
|
2045
|
+
/**
|
|
2046
|
+
* 18.75rem (300px): AccountCard minimum width; EmptyState actions maximum width (via component tokens).
|
|
2047
|
+
*
|
|
2048
|
+
* @deprecated Renamed to semantic.size.7500 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2049
|
+
*/
|
|
2050
|
+
'75': string;
|
|
2051
|
+
/**
|
|
2052
|
+
* 22.5rem (360px): EmptyState text maximum width (via component tokens).
|
|
2053
|
+
*
|
|
2054
|
+
* @deprecated Renamed to semantic.size.9000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2055
|
+
*/
|
|
2056
|
+
'90': string;
|
|
2057
|
+
/**
|
|
2058
|
+
* 25rem (400px): EmptyState maximum width (via component tokens).
|
|
2059
|
+
*
|
|
2060
|
+
* @deprecated Renamed to semantic.size.10000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2061
|
+
*/
|
|
2062
|
+
'100': string;
|
|
2063
|
+
/**
|
|
2064
|
+
* 48rem (768px): CardLarge maximum width (via component tokens).
|
|
2065
|
+
*
|
|
2066
|
+
* @deprecated Renamed to semantic.size.19200 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2067
|
+
*/
|
|
2068
|
+
'192': string;
|
|
2069
|
+
};
|
|
2070
|
+
icon: {
|
|
2071
|
+
/** The smallest icon size, for dense inline indicators. */
|
|
2072
|
+
xs: string;
|
|
2073
|
+
/** Icons in compact controls, such as Alert's dismiss icon and small icon buttons. */
|
|
2074
|
+
sm: string;
|
|
2075
|
+
/** Icons beside body text, such as Alert's severity icon. */
|
|
2076
|
+
md: string;
|
|
2077
|
+
/** The Icon component's default size; also list item icons. */
|
|
2078
|
+
lg: string;
|
|
2079
|
+
/** Extra-large standalone icons, such as feature illustrations. */
|
|
2080
|
+
xl: string;
|
|
2081
|
+
/** The largest icon size, for prominent standalone icons. */
|
|
2082
|
+
'2xl': string;
|
|
2083
|
+
};
|
|
2084
|
+
avatar: {
|
|
2085
|
+
/** Extra-small avatar, inline with text. */
|
|
2086
|
+
xs: string;
|
|
2087
|
+
/** Small avatar, in dense lists and tables. */
|
|
2088
|
+
sm: string;
|
|
2089
|
+
/** Medium avatar, the default size. */
|
|
2090
|
+
md: string;
|
|
2091
|
+
/** Large avatar, in headers and cards. */
|
|
2092
|
+
lg: string;
|
|
2093
|
+
/** Extra-large avatar, on profile pages. */
|
|
2094
|
+
xl: string;
|
|
2095
|
+
};
|
|
2096
|
+
};
|
|
2097
|
+
spacing: {
|
|
2098
|
+
separator: {
|
|
2099
|
+
/**
|
|
2100
|
+
* 1rem: space around a small Divider, above and below when horizontal, either side when vertical.
|
|
2101
|
+
*
|
|
2102
|
+
* @deprecated Renamed to semantic.space.400 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2103
|
+
*/
|
|
2104
|
+
sm: string;
|
|
2105
|
+
/**
|
|
2106
|
+
* 1.5rem: space around a medium or minimal Divider, above and below when horizontal, either side when vertical.
|
|
2107
|
+
*
|
|
2108
|
+
* @deprecated Renamed to semantic.space.600 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2109
|
+
*/
|
|
2110
|
+
md: string;
|
|
2111
|
+
/**
|
|
2112
|
+
* 2rem: space around a large (the default) Divider, above and below when horizontal, either side when vertical.
|
|
2113
|
+
*
|
|
2114
|
+
* @deprecated Renamed to semantic.space.800 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2115
|
+
*/
|
|
2116
|
+
lg: string;
|
|
2117
|
+
/**
|
|
2118
|
+
* 3rem: space around an extra-large Divider, above and below when horizontal, either side when vertical.
|
|
2119
|
+
*
|
|
2120
|
+
* @deprecated Renamed to semantic.space.1200 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2121
|
+
*/
|
|
2122
|
+
xl: string;
|
|
2123
|
+
};
|
|
2124
|
+
component: {
|
|
2125
|
+
/**
|
|
2126
|
+
* Extra-small component internal spacing (0.25rem / 4px). Use for tight gaps within compound elements, icon-to-label spacing in small chips.
|
|
2127
|
+
*
|
|
2128
|
+
* @deprecated Renamed to semantic.space.inset.xs by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2129
|
+
*/
|
|
2130
|
+
xs: string;
|
|
2131
|
+
/**
|
|
2132
|
+
* Small component internal spacing (0.5rem / 8px). Use for standard icon-to-label gaps, chip padding, compact button inner spacing.
|
|
2133
|
+
*
|
|
2134
|
+
* @deprecated Renamed to semantic.space.inset.sm by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2135
|
+
*/
|
|
2136
|
+
sm: string;
|
|
2137
|
+
/**
|
|
2138
|
+
* Medium component internal spacing (0.75rem / 12px). Use for standard button vertical padding, form field inner padding.
|
|
2139
|
+
*
|
|
2140
|
+
* @deprecated Renamed to semantic.space.inset.md by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2141
|
+
*/
|
|
2142
|
+
md: string;
|
|
2143
|
+
/**
|
|
2144
|
+
* Large component internal spacing (1rem / 16px). Use for button horizontal padding, input horizontal padding, card inner spacing.
|
|
2145
|
+
*
|
|
2146
|
+
* @deprecated Renamed to semantic.space.inset.lg by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2147
|
+
*/
|
|
2148
|
+
lg: string;
|
|
2149
|
+
/**
|
|
2150
|
+
* Extra-large component internal spacing (1.25rem / 20px). Use for generous button padding, prominent CTAs.
|
|
2151
|
+
*
|
|
2152
|
+
* @deprecated Renamed to semantic.space.inset.xl by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2153
|
+
*/
|
|
2154
|
+
xl: string;
|
|
2155
|
+
/**
|
|
2156
|
+
* 2x extra-large component internal spacing (1.5rem / 24px). Use for large card inner padding, spacious form sections.
|
|
2157
|
+
*
|
|
2158
|
+
* @deprecated Renamed to semantic.space.inset.2xl by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2159
|
+
*/
|
|
2160
|
+
'2xl': string;
|
|
2161
|
+
};
|
|
2162
|
+
layout: {
|
|
2163
|
+
/**
|
|
2164
|
+
* 0: no space, for explicit resets.
|
|
2165
|
+
*
|
|
2166
|
+
* @deprecated Renamed to semantic.space.0 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2167
|
+
*/
|
|
2168
|
+
none: string;
|
|
2169
|
+
/**
|
|
2170
|
+
* 0.25rem: the tightest gap, such as between a label and its required indicator.
|
|
2171
|
+
*
|
|
2172
|
+
* @deprecated Renamed to semantic.space.100 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2173
|
+
*/
|
|
2174
|
+
xs: string;
|
|
2175
|
+
/**
|
|
2176
|
+
* 0.5rem: a small gap, such as between a field's label, control and helper text.
|
|
2177
|
+
*
|
|
2178
|
+
* @deprecated Renamed to semantic.space.200 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2179
|
+
*/
|
|
2180
|
+
sm: string;
|
|
2181
|
+
/**
|
|
2182
|
+
* 0.75rem: the default gap between related elements.
|
|
2183
|
+
*
|
|
2184
|
+
* @deprecated Renamed to semantic.space.300 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2185
|
+
*/
|
|
2186
|
+
md: string;
|
|
2187
|
+
/**
|
|
2188
|
+
* 1rem: space between groups of elements, and padding inside containers.
|
|
2189
|
+
*
|
|
2190
|
+
* @deprecated Renamed to semantic.space.400 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2191
|
+
*/
|
|
2192
|
+
lg: string;
|
|
2193
|
+
/**
|
|
2194
|
+
* 1.25rem: generous padding inside larger containers.
|
|
2195
|
+
*
|
|
2196
|
+
* @deprecated Renamed to semantic.space.500 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2197
|
+
*/
|
|
2198
|
+
xl: string;
|
|
2199
|
+
/**
|
|
2200
|
+
* 1.5rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2201
|
+
*
|
|
2202
|
+
* @deprecated Renamed to semantic.space.600 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2203
|
+
*/
|
|
2204
|
+
'2xl': string;
|
|
2205
|
+
/**
|
|
2206
|
+
* 1.75rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2207
|
+
*
|
|
2208
|
+
* @deprecated Renamed to semantic.space.700 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2209
|
+
*/
|
|
2210
|
+
'3xl': string;
|
|
2211
|
+
/**
|
|
2212
|
+
* 2rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2213
|
+
*
|
|
2214
|
+
* @deprecated Renamed to semantic.space.800 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2215
|
+
*/
|
|
2216
|
+
'4xl': string;
|
|
2217
|
+
/**
|
|
2218
|
+
* 2.25rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2219
|
+
*
|
|
2220
|
+
* @deprecated Renamed to semantic.space.900 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2221
|
+
*/
|
|
2222
|
+
'5xl': string;
|
|
2223
|
+
/**
|
|
2224
|
+
* 2.5rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2225
|
+
*
|
|
2226
|
+
* @deprecated Renamed to semantic.space.1000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2227
|
+
*/
|
|
2228
|
+
'6xl': string;
|
|
2229
|
+
/**
|
|
2230
|
+
* 3rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2231
|
+
*
|
|
2232
|
+
* @deprecated Renamed to semantic.space.1200 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2233
|
+
*/
|
|
2234
|
+
'7xl': string;
|
|
2235
|
+
/**
|
|
2236
|
+
* 3.5rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2237
|
+
*
|
|
2238
|
+
* @deprecated Renamed to semantic.space.1400 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2239
|
+
*/
|
|
2240
|
+
'8xl': string;
|
|
2241
|
+
/**
|
|
2242
|
+
* 4rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2243
|
+
*
|
|
2244
|
+
* @deprecated Renamed to semantic.space.1600 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2245
|
+
*/
|
|
2246
|
+
'9xl': string;
|
|
2247
|
+
/**
|
|
2248
|
+
* 5rem: a larger step on the layout spacing scale, for space between blocks and sections. Second-largest, after 11xl.
|
|
2249
|
+
*
|
|
2250
|
+
* @deprecated Renamed to semantic.space.2000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2251
|
+
*/
|
|
2252
|
+
'10xl': string;
|
|
2253
|
+
/**
|
|
2254
|
+
* 6rem: the largest layout gap (FeatureBlock at wide breakpoints).
|
|
2255
|
+
*
|
|
2256
|
+
* @deprecated Renamed to semantic.space.2400 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2257
|
+
*/
|
|
2258
|
+
'11xl': string;
|
|
2259
|
+
/** auto: lets the browser compute the space, such as margin: auto to centre or push an element. */
|
|
2260
|
+
auto: string;
|
|
2261
|
+
};
|
|
2262
|
+
};
|
|
2263
|
+
color: {
|
|
2264
|
+
text: {
|
|
2265
|
+
/** Primary text: body copy, labels and headings. 15.43:1 on white, 14.63:1 on the page. */
|
|
2266
|
+
default: string;
|
|
2267
|
+
/** Emphasised text: one step darker than text.default, so it reads stronger (decision 0029). 17.65:1 on white. */
|
|
2268
|
+
emphasis: string;
|
|
2269
|
+
/**
|
|
2270
|
+
* Secondary text: helper text, metadata and supporting copy. 8.18:1 on white, 7.76:1 on the page.
|
|
2271
|
+
*
|
|
2272
|
+
* @deprecated Renamed to semantic.color.text.muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2273
|
+
*/
|
|
2274
|
+
subdued: string;
|
|
2275
|
+
/** Text on dark or coloured fills, such as the primary, accent and danger Buttons. 15.43:1 on background.emphasis, 5.39:1 on background.interactive. */
|
|
2276
|
+
inverse: string;
|
|
2277
|
+
/** Text of disabled controls. 2.07:1 on white: disabled text is exempt from the contrast minimum (WCAG 1.4.3), so never use it for text people need to read, including placeholders. */
|
|
2278
|
+
disabled: string;
|
|
2279
|
+
/**
|
|
2280
|
+
* Blue text for links and selected items (decision 0003). 5.39:1 on white, 5.11:1 on the page.
|
|
2281
|
+
*
|
|
2282
|
+
* @deprecated Renamed to semantic.color.text.accent by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2283
|
+
*/
|
|
2284
|
+
interactive: string;
|
|
2285
|
+
/**
|
|
2286
|
+
* Blue text on a hovered selected item (interactive-subtle-hover fill, 5.60:1). Decision 0016.
|
|
2287
|
+
*
|
|
2288
|
+
* @deprecated Renamed to semantic.color.text.accent-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2289
|
+
*/
|
|
2290
|
+
'interactive-hover': string;
|
|
2291
|
+
/**
|
|
2292
|
+
* Blue text on a pressed selected item (interactive-subtle-active fill, 6.65:1). Decision 0016.
|
|
2293
|
+
*
|
|
2294
|
+
* @deprecated Renamed to semantic.color.text.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2295
|
+
*/
|
|
2296
|
+
'interactive-active': string;
|
|
2297
|
+
/**
|
|
2298
|
+
* Error text, such as field error messages and InlineAlert errors. 5.41:1 on white, 5.13:1 on the page.
|
|
2299
|
+
*
|
|
2300
|
+
* @deprecated Renamed to semantic.color.text.danger by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2301
|
+
*/
|
|
2302
|
+
error: string;
|
|
2303
|
+
/** Success text, such as InlineAlert success messages. 5.40:1 on white, 5.12:1 on the page. */
|
|
2304
|
+
success: string;
|
|
2305
|
+
/** Warning text, such as InlineAlert warnings. 5.38:1 on white, 5.10:1 on the page. */
|
|
2306
|
+
warning: string;
|
|
2307
|
+
/** Secondary text: helper text, metadata, timestamps. */
|
|
2308
|
+
muted: string;
|
|
2309
|
+
/** Blue text for links and selected items; never decoration, see 0003. */
|
|
2310
|
+
accent: string;
|
|
2311
|
+
/** Text of a hovered selected item, on the accent-muted-hover fill. */
|
|
2312
|
+
'accent-hover': string;
|
|
2313
|
+
/** Text of a pressed selected item, on the accent-muted-pressed fill. */
|
|
2314
|
+
'accent-pressed': string;
|
|
2315
|
+
/** Error text: field error messages, InlineAlert errors. */
|
|
2316
|
+
danger: string;
|
|
2317
|
+
};
|
|
2318
|
+
background: {
|
|
2319
|
+
/**
|
|
2320
|
+
* Page background: a cool off-white (#f8f9fa), never pure white (decision 0006).
|
|
2321
|
+
*
|
|
2322
|
+
* @deprecated Renamed to semantic.surface.base by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2323
|
+
*/
|
|
2324
|
+
default: string;
|
|
2325
|
+
/**
|
|
2326
|
+
* White: inputs, sheets and other surfaces that sit on the page background.
|
|
2327
|
+
*
|
|
2328
|
+
* @deprecated Split by use (decision 0031): semantic.surface.raised for surfaces such as cards, inputs and sheets; component.slider.thumb.background for Slider's thumb. Removed in 3.0.
|
|
2329
|
+
*/
|
|
2330
|
+
subtle: string;
|
|
2331
|
+
/**
|
|
2332
|
+
* Near-black fill for emphasis controls: the primary Button, IconButton and the emphasis Chip.
|
|
2333
|
+
*
|
|
2334
|
+
* @deprecated Renamed to semantic.color.fill.emphasis by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2335
|
+
*/
|
|
2336
|
+
emphasis: string;
|
|
2337
|
+
/**
|
|
2338
|
+
* Fill of a hovered emphasis control: the primary Button and IconButton, and the emphasis Chip. Approved under decision 0022.
|
|
2339
|
+
*
|
|
2340
|
+
* @deprecated Renamed to semantic.color.fill.emphasis-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2341
|
+
*/
|
|
2342
|
+
'emphasis-hover': string;
|
|
2343
|
+
/**
|
|
2344
|
+
* Fill of a pressed emphasis control. Approved under decision 0022.
|
|
2345
|
+
*
|
|
2346
|
+
* @deprecated Renamed to semantic.color.fill.emphasis-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2347
|
+
*/
|
|
2348
|
+
'emphasis-active': string;
|
|
2349
|
+
/**
|
|
2350
|
+
* Light grey fill for quiet surfaces and grouped content, such as the default Chip.
|
|
2351
|
+
*
|
|
2352
|
+
* @deprecated Renamed to semantic.color.fill.muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2353
|
+
*/
|
|
2354
|
+
surface: string;
|
|
2355
|
+
/**
|
|
2356
|
+
* Dark grey fill for inverse surfaces, such as a checked Checkbox box.
|
|
2357
|
+
*
|
|
2358
|
+
* @deprecated Renamed to semantic.color.fill.inverse by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2359
|
+
*/
|
|
2360
|
+
inverse: string;
|
|
2361
|
+
/**
|
|
2362
|
+
* Blue fill for the accent Button and other deliberate highlights (decision 0003). Pair with text.inverse (5.39:1).
|
|
2363
|
+
*
|
|
2364
|
+
* @deprecated Renamed to semantic.color.fill.accent by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2365
|
+
*/
|
|
2366
|
+
interactive: string;
|
|
2367
|
+
/**
|
|
2368
|
+
* Light blue fill for selected items, such as a selected filter chip or tab (decision 0016). Pair with text.interactive.
|
|
2369
|
+
*
|
|
2370
|
+
* @deprecated Renamed to semantic.color.fill.accent-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2371
|
+
*/
|
|
2372
|
+
'interactive-subtle': string;
|
|
2373
|
+
/**
|
|
2374
|
+
* Fill of a hovered selected item, such as a selected filter chip. Pair with text.interactive-hover. Decision 0016.
|
|
2375
|
+
*
|
|
2376
|
+
* @deprecated Renamed to semantic.color.fill.accent-muted-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2377
|
+
*/
|
|
2378
|
+
'interactive-subtle-hover': string;
|
|
2379
|
+
/**
|
|
2380
|
+
* Fill of a pressed selected item. Pair with text.interactive-active. Decision 0016.
|
|
2381
|
+
*
|
|
2382
|
+
* @deprecated Renamed to semantic.color.fill.accent-muted-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2383
|
+
*/
|
|
2384
|
+
'interactive-subtle-active': string;
|
|
2385
|
+
/**
|
|
2386
|
+
* Blue fill on hover, for controls that use background.interactive.
|
|
2387
|
+
*
|
|
2388
|
+
* @deprecated Renamed to semantic.color.fill.accent-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2389
|
+
*/
|
|
2390
|
+
'interactive-hover': string;
|
|
2391
|
+
/**
|
|
2392
|
+
* Blue fill while pressed, for controls that use background.interactive.
|
|
2393
|
+
*
|
|
2394
|
+
* @deprecated Renamed to semantic.color.fill.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2395
|
+
*/
|
|
2396
|
+
'interactive-active': string;
|
|
2397
|
+
/**
|
|
2398
|
+
* Strong red fill for destructive actions, such as the danger Button. Pair with text.inverse (5.41:1).
|
|
2399
|
+
*
|
|
2400
|
+
* @deprecated Renamed to semantic.color.fill.danger by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2401
|
+
*/
|
|
2402
|
+
error: string;
|
|
2403
|
+
/**
|
|
2404
|
+
* Fill of a hovered error control, such as the danger Button. Approved under decision 0022.
|
|
2405
|
+
*
|
|
2406
|
+
* @deprecated Renamed to semantic.color.fill.danger-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2407
|
+
*/
|
|
2408
|
+
'error-hover': string;
|
|
2409
|
+
/**
|
|
2410
|
+
* Fill of a pressed error control. Approved under decision 0022.
|
|
2411
|
+
*
|
|
2412
|
+
* @deprecated Renamed to semantic.color.fill.danger-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2413
|
+
*/
|
|
2414
|
+
'error-active': string;
|
|
2415
|
+
/**
|
|
2416
|
+
* Light red tint behind error messages, such as an error Alert.
|
|
2417
|
+
*
|
|
2418
|
+
* @deprecated Renamed to semantic.color.fill.danger-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2419
|
+
*/
|
|
2420
|
+
'error-subtle': string;
|
|
2421
|
+
/**
|
|
2422
|
+
* Strong green fill for success states.
|
|
2423
|
+
*
|
|
2424
|
+
* @deprecated Renamed to semantic.color.fill.success by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2425
|
+
*/
|
|
2426
|
+
success: string;
|
|
2427
|
+
/**
|
|
2428
|
+
* Light green tint behind success messages, such as a success Alert.
|
|
2429
|
+
*
|
|
2430
|
+
* @deprecated Renamed to semantic.color.fill.success-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2431
|
+
*/
|
|
2432
|
+
'success-subtle': string;
|
|
2433
|
+
/**
|
|
2434
|
+
* Strong orange fill for warning states.
|
|
2435
|
+
*
|
|
2436
|
+
* @deprecated Renamed to semantic.color.fill.warning by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2437
|
+
*/
|
|
2438
|
+
warning: string;
|
|
2439
|
+
/**
|
|
2440
|
+
* Light orange tint behind warning messages, such as a warning Alert.
|
|
2441
|
+
*
|
|
2442
|
+
* @deprecated Renamed to semantic.color.fill.warning-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2443
|
+
*/
|
|
2444
|
+
'warning-subtle': string;
|
|
2445
|
+
/**
|
|
2446
|
+
* Fill of disabled controls.
|
|
2447
|
+
*
|
|
2448
|
+
* @deprecated Renamed to semantic.color.fill.disabled by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2449
|
+
*/
|
|
2450
|
+
disabled: string;
|
|
2451
|
+
/**
|
|
2452
|
+
* Fill of a neutral control at rest, such as the secondary Button. Not the disabled fill, though the value matches today. Approved under decision 0022.
|
|
2453
|
+
*
|
|
2454
|
+
* @deprecated Renamed to semantic.color.fill.default by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2455
|
+
*/
|
|
2456
|
+
neutral: string;
|
|
2457
|
+
/**
|
|
2458
|
+
* Fill of a hovered neutral control. Approved under decision 0022.
|
|
2459
|
+
*
|
|
2460
|
+
* @deprecated Renamed to semantic.color.fill.default-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2461
|
+
*/
|
|
2462
|
+
'neutral-hover': string;
|
|
2463
|
+
/**
|
|
2464
|
+
* Fill of a pressed neutral control. Approved under decision 0022.
|
|
2465
|
+
*
|
|
2466
|
+
* @deprecated Renamed to semantic.color.fill.default-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2467
|
+
*/
|
|
2468
|
+
'neutral-active': string;
|
|
2469
|
+
/**
|
|
2470
|
+
* No fill, for controls without a background at rest, such as the naked Button and IconButton. Approved under decision 0022.
|
|
2471
|
+
*
|
|
2472
|
+
* @deprecated Renamed to semantic.color.fill.none by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2473
|
+
*/
|
|
2474
|
+
transparent: string;
|
|
2475
|
+
/**
|
|
2476
|
+
* Unfilled track of ProgressBar and Slider. 1.30:1 on white: the filled part and the thumb show the value, so the track doesn't need 3:1 (decision 0026).
|
|
2477
|
+
*
|
|
2478
|
+
* @deprecated Moved to the component tier as component.track.background (decision 0031 §6). Removed in 3.0.
|
|
2479
|
+
*/
|
|
2480
|
+
progressTrack: string;
|
|
2481
|
+
/**
|
|
2482
|
+
* The same cool off-white as background.default (#f8f9fa). Decision 0006 makes background.default the page background token, so use that.
|
|
2483
|
+
*
|
|
2484
|
+
* @deprecated Renamed to semantic.surface.base by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2485
|
+
*/
|
|
2486
|
+
page: string;
|
|
2487
|
+
/**
|
|
2488
|
+
* Semi-transparent scrim for modal, sheet, drawer, and action-sheet backdrops. Uses brand near-black (#212529) at 50% opacity. Sits below the overlay surface and above page content.
|
|
2489
|
+
*
|
|
2490
|
+
* @deprecated Renamed to semantic.surface.scrim by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2491
|
+
*/
|
|
2492
|
+
overlay: string;
|
|
2493
|
+
/**
|
|
2494
|
+
* Subtle transparent dark overlay for hover states on components that sit over variable-colour backgrounds (e.g. chip close-button hover). Uses brand near-black (#212529) — never pure #000000 per VDL.
|
|
2495
|
+
*
|
|
2496
|
+
* @deprecated Renamed to semantic.color.fill.none-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2497
|
+
*/
|
|
2498
|
+
'hover-overlay': string;
|
|
2499
|
+
/**
|
|
2500
|
+
* Slightly stronger transparent dark overlay for active/pressed states on components over variable-colour backgrounds (e.g. chip close-button active). Uses brand near-black (#212529). Pair with hover-overlay for consistent press depth.
|
|
2501
|
+
*
|
|
2502
|
+
* @deprecated Renamed to semantic.color.fill.none-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2503
|
+
*/
|
|
2504
|
+
'active-overlay': string;
|
|
2505
|
+
/**
|
|
2506
|
+
* Subtle transparent light overlay for elements that sit on a strong or dark background (e.g. the count badge on an active pills tab in TabBar). The light counterpart of hover-overlay; pair with text.inverse.
|
|
2507
|
+
*
|
|
2508
|
+
* @deprecated Renamed to semantic.color.fill.inverse-none-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2509
|
+
*/
|
|
2510
|
+
'inverse-overlay': string;
|
|
2511
|
+
};
|
|
2512
|
+
border: {
|
|
2513
|
+
/** Default border colour for dividers and decorative outlines only. 1.19:1 on white, below the 3:1 a control's edge needs (WCAG 1.4.11); use color.border.control for that (decision 0025). */
|
|
2514
|
+
default: string;
|
|
2515
|
+
/**
|
|
2516
|
+
* Subtle border colour for dividers and decorative outlines, and for the borders of disabled controls, which WCAG 1.4.11 exempts. 1.30:1 on white, below the 3:1 a control's edge needs; use color.border.control for that (decision 0025).
|
|
2517
|
+
*
|
|
2518
|
+
* @deprecated Renamed to semantic.color.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2519
|
+
*/
|
|
2520
|
+
subtle: string;
|
|
2521
|
+
/**
|
|
2522
|
+
* Resting border of a control whose edge shows where it is, such as a text input, Dropdown or the Checkbox box. 4.69:1 on white, 4.45:1 on the page, above the 3:1 WCAG 1.4.11 asks for (decision 0025).
|
|
2523
|
+
*
|
|
2524
|
+
* @deprecated Renamed to semantic.color.border.input by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2525
|
+
*/
|
|
2526
|
+
control: string;
|
|
2527
|
+
/**
|
|
2528
|
+
* Near-black border colour for firm boundaries, such as a hovered or focused input. 11.51:1 on white.
|
|
2529
|
+
*
|
|
2530
|
+
* @deprecated Split by use (decision 0031): semantic.color.border.input-hover for a hovered control, semantic.color.border.focus for the focus ring and CardSmall's ring, semantic.color.fill.inverse for drag handles. Removed in 3.0.
|
|
2531
|
+
*/
|
|
2532
|
+
strong: string;
|
|
2533
|
+
/**
|
|
2534
|
+
* Blue border for selected and interactive states (decision 0003). 5.39:1 on white.
|
|
2535
|
+
*
|
|
2536
|
+
* @deprecated Renamed to semantic.color.border.accent by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2537
|
+
*/
|
|
2538
|
+
interactive: string;
|
|
2539
|
+
/**
|
|
2540
|
+
* Red border for invalid fields and error outlines. 5.41:1 on white.
|
|
2541
|
+
*
|
|
2542
|
+
* @deprecated Renamed to semantic.color.border.danger by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2543
|
+
*/
|
|
2544
|
+
error: string;
|
|
2545
|
+
/** Green border for success outlines, such as an outlined success Alert. */
|
|
2546
|
+
success: string;
|
|
2547
|
+
/** Orange border for warning outlines, such as an outlined warning Alert. */
|
|
2548
|
+
warning: string;
|
|
2549
|
+
/** An invisible border that keeps its width, so a borderless state takes the same space as a bordered one (for example Alert's borderless appearance, decision 0019). */
|
|
2550
|
+
none: string;
|
|
2551
|
+
/** Border for dividers, decorative outlines and disabled controls; never a resting control edge. */
|
|
2552
|
+
emphasis: string;
|
|
2553
|
+
/** Resting edge of a control that must show where it is: text inputs, Dropdown, Checkbox. */
|
|
2554
|
+
input: string;
|
|
2555
|
+
/** Edge of a hovered control, such as a hovered text input or Dropdown. */
|
|
2556
|
+
'input-hover': string;
|
|
2557
|
+
/** The focus ring, and rings that mark the current item, such as on CardSmall (0029). */
|
|
2558
|
+
focus: string;
|
|
2559
|
+
/** Blue border for selected items; never decoration, see 0003. */
|
|
2560
|
+
accent: string;
|
|
2561
|
+
/** Border of an invalid field and other error outlines. */
|
|
2562
|
+
danger: string;
|
|
2563
|
+
};
|
|
2564
|
+
icon: {
|
|
2565
|
+
/** Default icon colour, matching text.default. 15.43:1 on white. */
|
|
2566
|
+
default: string;
|
|
2567
|
+
/** Emphasised icons, matching text.emphasis: one step darker than icon.default (decision 0029). */
|
|
2568
|
+
emphasis: string;
|
|
2569
|
+
/**
|
|
2570
|
+
* Secondary icons, such as list item and empty-state icons. 4.69:1 on white, 4.45:1 on the page (icons need 3:1).
|
|
2571
|
+
*
|
|
2572
|
+
* @deprecated Renamed to semantic.color.icon.muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2573
|
+
*/
|
|
2574
|
+
subdued: string;
|
|
2575
|
+
/** Icons and other foreground marks in disabled controls, such as a disabled Slider's fill and thumb ring. Exempt from the contrast minimum, like text.disabled. */
|
|
2576
|
+
disabled: string;
|
|
2577
|
+
/** Icons on dark or coloured fills, matching text.inverse. */
|
|
2578
|
+
inverse: string;
|
|
2579
|
+
/**
|
|
2580
|
+
* Blue icons in links and selected items, matching text.interactive. 5.39:1 on white.
|
|
2581
|
+
*
|
|
2582
|
+
* @deprecated Renamed to semantic.color.icon.accent by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2583
|
+
*/
|
|
2584
|
+
interactive: string;
|
|
2585
|
+
/**
|
|
2586
|
+
* Blue icon on hover, matching text.interactive-hover.
|
|
2587
|
+
*
|
|
2588
|
+
* @deprecated Renamed to semantic.color.icon.accent-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2589
|
+
*/
|
|
2590
|
+
'interactive-hover': string;
|
|
2591
|
+
/**
|
|
2592
|
+
* Blue icon while pressed, matching text.interactive-active.
|
|
2593
|
+
*
|
|
2594
|
+
* @deprecated Renamed to semantic.color.icon.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2595
|
+
*/
|
|
2596
|
+
'interactive-active': string;
|
|
2597
|
+
/**
|
|
2598
|
+
* Error icons, such as in Alert and EmptyState. 5.41:1 on white. (InlineAlert's icon takes the text colour instead.)
|
|
2599
|
+
*
|
|
2600
|
+
* @deprecated Renamed to semantic.color.icon.danger by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2601
|
+
*/
|
|
2602
|
+
error: string;
|
|
2603
|
+
/** Success icons, such as in Alert and EmptyState. 5.40:1 on white. (InlineAlert's icon takes the text colour instead.) */
|
|
2604
|
+
success: string;
|
|
2605
|
+
/** Warning icons, such as in Alert. 5.38:1 on white. (InlineAlert's icon takes the text colour instead.) */
|
|
2606
|
+
warning: string;
|
|
2607
|
+
/** Secondary icons, such as list item and empty-state icons. */
|
|
2608
|
+
muted: string;
|
|
2609
|
+
/** Blue icons in links and selected items, matching color.text.accent. */
|
|
2610
|
+
accent: string;
|
|
2611
|
+
/** Icon of a hovered selected item, matching color.text.accent-hover. */
|
|
2612
|
+
'accent-hover': string;
|
|
2613
|
+
/** Icon of a pressed selected item, matching color.text.accent-pressed. */
|
|
2614
|
+
'accent-pressed': string;
|
|
2615
|
+
/** Error icons, such as in Alert and EmptyState. */
|
|
2616
|
+
danger: string;
|
|
2617
|
+
};
|
|
2618
|
+
financial: {
|
|
2619
|
+
/**
|
|
2620
|
+
* Color for positive monetary values, credits, income
|
|
2621
|
+
*
|
|
2622
|
+
* @deprecated Moved to the component tier as component.transaction.credit (decision 0031 §6). Removed in 3.0.
|
|
2623
|
+
*/
|
|
2624
|
+
credit: string;
|
|
2625
|
+
/**
|
|
2626
|
+
* Hover state for credit-colored interactive elements
|
|
2627
|
+
*
|
|
2628
|
+
* @deprecated Moved to the component tier as component.transaction.credit-hover (decision 0031 §6). Removed in 3.0.
|
|
2629
|
+
*/
|
|
2630
|
+
'credit-hover': string;
|
|
2631
|
+
/**
|
|
2632
|
+
* Color for negative monetary values, debits, expenses
|
|
2633
|
+
*
|
|
2634
|
+
* @deprecated Moved to the component tier as component.transaction.debit (decision 0031 §6). Removed in 3.0.
|
|
2635
|
+
*/
|
|
2636
|
+
debit: string;
|
|
2637
|
+
/**
|
|
2638
|
+
* Hover state for debit-colored interactive elements
|
|
2639
|
+
*
|
|
2640
|
+
* @deprecated Moved to the component tier as component.transaction.debit-hover (decision 0031 §6). Removed in 3.0.
|
|
2641
|
+
*/
|
|
2642
|
+
'debit-hover': string;
|
|
2643
|
+
/**
|
|
2644
|
+
* Color for pending or processing financial transactions
|
|
2645
|
+
*
|
|
2646
|
+
* @deprecated Moved to the component tier as component.transaction.pending (decision 0031 §6). Removed in 3.0.
|
|
2647
|
+
*/
|
|
2648
|
+
pending: string;
|
|
2649
|
+
/**
|
|
2650
|
+
* Neutral color for informational monetary amounts
|
|
2651
|
+
*
|
|
2652
|
+
* @deprecated Moved to the component tier as component.transaction.neutral (decision 0031 §6). Removed in 3.0.
|
|
2653
|
+
*/
|
|
2654
|
+
neutral: string;
|
|
2655
|
+
};
|
|
2656
|
+
category: {
|
|
2657
|
+
/** Blue category color for general/miscellaneous */
|
|
2658
|
+
blue: string;
|
|
2659
|
+
/** Strong step of the blue category: the fill of a filled CategoryLabel, with white text (decision 0029). */
|
|
2660
|
+
'blue-strong': string;
|
|
2661
|
+
/**
|
|
2662
|
+
* Strong step of the blue category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
2663
|
+
*
|
|
2664
|
+
* @deprecated "emphasis" means near-black, so use semantic.color.category.blue-strong (decision 0029). Removed in 3.0.
|
|
2665
|
+
*/
|
|
2666
|
+
'blue-emphasis': string;
|
|
2667
|
+
/**
|
|
2668
|
+
* Subtle blue background
|
|
2669
|
+
*
|
|
2670
|
+
* @deprecated Renamed to semantic.color.category.blue-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2671
|
+
*/
|
|
2672
|
+
'blue-subtle': string;
|
|
2673
|
+
/** Purple category color for entertainment */
|
|
2674
|
+
purple: string;
|
|
2675
|
+
/** Strong step of the purple category: the fill of a filled CategoryLabel, with white text (decision 0029). */
|
|
2676
|
+
'purple-strong': string;
|
|
2677
|
+
/**
|
|
2678
|
+
* Strong step of the purple category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
2679
|
+
*
|
|
2680
|
+
* @deprecated "emphasis" means near-black, so use semantic.color.category.purple-strong (decision 0029). Removed in 3.0.
|
|
2681
|
+
*/
|
|
2682
|
+
'purple-emphasis': string;
|
|
2683
|
+
/**
|
|
2684
|
+
* Subtle purple background
|
|
2685
|
+
*
|
|
2686
|
+
* @deprecated Renamed to semantic.color.category.purple-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2687
|
+
*/
|
|
2688
|
+
'purple-subtle': string;
|
|
2689
|
+
/** Pink category color for health/wellness */
|
|
2690
|
+
pink: string;
|
|
2691
|
+
/** Strong step of the pink category: the fill of a filled CategoryLabel, with white text (decision 0029). */
|
|
2692
|
+
'pink-strong': string;
|
|
2693
|
+
/**
|
|
2694
|
+
* Strong step of the pink category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
2695
|
+
*
|
|
2696
|
+
* @deprecated "emphasis" means near-black, so use semantic.color.category.pink-strong (decision 0029). Removed in 3.0.
|
|
2697
|
+
*/
|
|
2698
|
+
'pink-emphasis': string;
|
|
2699
|
+
/**
|
|
2700
|
+
* Subtle pink background
|
|
2701
|
+
*
|
|
2702
|
+
* @deprecated Renamed to semantic.color.category.pink-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2703
|
+
*/
|
|
2704
|
+
'pink-subtle': string;
|
|
2705
|
+
/** Yellow category color for utilities */
|
|
2706
|
+
yellow: string;
|
|
2707
|
+
/** Strong step of the yellow category: the fill of a filled CategoryLabel, with white text (decision 0029). */
|
|
2708
|
+
'yellow-strong': string;
|
|
2709
|
+
/**
|
|
2710
|
+
* Strong step of the yellow category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
2711
|
+
*
|
|
2712
|
+
* @deprecated "emphasis" means near-black, so use semantic.color.category.yellow-strong (decision 0029). Removed in 3.0.
|
|
2713
|
+
*/
|
|
2714
|
+
'yellow-emphasis': string;
|
|
2715
|
+
/**
|
|
2716
|
+
* Subtle yellow background
|
|
2717
|
+
*
|
|
2718
|
+
* @deprecated Renamed to semantic.color.category.yellow-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2719
|
+
*/
|
|
2720
|
+
'yellow-subtle': string;
|
|
2721
|
+
/** Green category color for income */
|
|
2722
|
+
green: string;
|
|
2723
|
+
/** Strong step of the green category: the fill of a filled CategoryLabel, with white text (decision 0029). */
|
|
2724
|
+
'green-strong': string;
|
|
2725
|
+
/**
|
|
2726
|
+
* Strong step of the green category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
2727
|
+
*
|
|
2728
|
+
* @deprecated "emphasis" means near-black, so use semantic.color.category.green-strong (decision 0029). Removed in 3.0.
|
|
2729
|
+
*/
|
|
2730
|
+
'green-emphasis': string;
|
|
2731
|
+
/**
|
|
2732
|
+
* Subtle green background
|
|
2733
|
+
*
|
|
2734
|
+
* @deprecated Renamed to semantic.color.category.green-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2735
|
+
*/
|
|
2736
|
+
'green-subtle': string;
|
|
2737
|
+
/** Red category color for expenses */
|
|
2738
|
+
red: string;
|
|
2739
|
+
/** Strong step of the red category: the fill of a filled CategoryLabel, with white text (decision 0029). */
|
|
2740
|
+
'red-strong': string;
|
|
2741
|
+
/**
|
|
2742
|
+
* Strong step of the red category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
2743
|
+
*
|
|
2744
|
+
* @deprecated "emphasis" means near-black, so use semantic.color.category.red-strong (decision 0029). Removed in 3.0.
|
|
2745
|
+
*/
|
|
2746
|
+
'red-emphasis': string;
|
|
2747
|
+
/**
|
|
2748
|
+
* Subtle red background
|
|
2749
|
+
*
|
|
2750
|
+
* @deprecated Renamed to semantic.color.category.red-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2751
|
+
*/
|
|
2752
|
+
'red-subtle': string;
|
|
2753
|
+
/** Orange category color for food & dining */
|
|
2754
|
+
orange: string;
|
|
2755
|
+
/** Strong step of the orange category: the fill of a filled CategoryLabel, with white text (decision 0029). */
|
|
2756
|
+
'orange-strong': string;
|
|
2757
|
+
/**
|
|
2758
|
+
* Strong step of the orange category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
2759
|
+
*
|
|
2760
|
+
* @deprecated "emphasis" means near-black, so use semantic.color.category.orange-strong (decision 0029). Removed in 3.0.
|
|
2761
|
+
*/
|
|
2762
|
+
'orange-emphasis': string;
|
|
2763
|
+
/**
|
|
2764
|
+
* Subtle orange background
|
|
2765
|
+
*
|
|
2766
|
+
* @deprecated Renamed to semantic.color.category.orange-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2767
|
+
*/
|
|
2768
|
+
'orange-subtle': string;
|
|
2769
|
+
/** Gray category color for uncategorized */
|
|
2770
|
+
gray: string;
|
|
2771
|
+
/** Strong step of the gray category: the fill of a filled CategoryLabel, with white text (decision 0029). */
|
|
2772
|
+
'gray-strong': string;
|
|
2773
|
+
/**
|
|
2774
|
+
* Strong step of the gray category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
2775
|
+
*
|
|
2776
|
+
* @deprecated "emphasis" means near-black, so use semantic.color.category.gray-strong (decision 0029). Removed in 3.0.
|
|
2777
|
+
*/
|
|
2778
|
+
'gray-emphasis': string;
|
|
2779
|
+
/**
|
|
2780
|
+
* Subtle gray background
|
|
2781
|
+
*
|
|
2782
|
+
* @deprecated Renamed to semantic.color.category.gray-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2783
|
+
*/
|
|
2784
|
+
'gray-subtle': string;
|
|
2785
|
+
/** Text and icons of an outlined or minimal blue CategoryLabel, on white or blue-muted. */
|
|
2786
|
+
'blue-text': string;
|
|
2787
|
+
/** Text and icons of an outlined or minimal purple CategoryLabel, on white or purple-muted. */
|
|
2788
|
+
'purple-text': string;
|
|
2789
|
+
/** Text and icons of an outlined or minimal pink CategoryLabel, on white or pink-muted. */
|
|
2790
|
+
'pink-text': string;
|
|
2791
|
+
/** Text and icons of an outlined or minimal yellow CategoryLabel, on white or yellow-muted. */
|
|
2792
|
+
'yellow-text': string;
|
|
2793
|
+
/** Text and icons of an outlined or minimal green CategoryLabel, on white or green-muted. */
|
|
2794
|
+
'green-text': string;
|
|
2795
|
+
/** Text and icons of an outlined or minimal red CategoryLabel, on white or red-muted. */
|
|
2796
|
+
'red-text': string;
|
|
2797
|
+
/** Text and icons of an outlined or minimal orange CategoryLabel, on white or orange-muted. */
|
|
2798
|
+
'orange-text': string;
|
|
2799
|
+
/** Text and icons of an outlined or minimal gray CategoryLabel, on white or gray-muted. */
|
|
2800
|
+
'gray-text': string;
|
|
2801
|
+
/** Light blue fill of a blue CategoryLabel, behind the blue-text colour. */
|
|
2802
|
+
'blue-muted': string;
|
|
2803
|
+
/** Light purple fill of a purple CategoryLabel, behind the purple-text colour. */
|
|
2804
|
+
'purple-muted': string;
|
|
2805
|
+
/** Light pink fill of a pink CategoryLabel, behind the pink-text colour. */
|
|
2806
|
+
'pink-muted': string;
|
|
2807
|
+
/** Light yellow fill of a yellow CategoryLabel, behind the yellow-text colour. */
|
|
2808
|
+
'yellow-muted': string;
|
|
2809
|
+
/** Light green fill of a green CategoryLabel, behind the green-text colour. */
|
|
2810
|
+
'green-muted': string;
|
|
2811
|
+
/** Light red fill of a red CategoryLabel, behind the red-text colour. */
|
|
2812
|
+
'red-muted': string;
|
|
2813
|
+
/** Light orange fill of a orange CategoryLabel, behind the orange-text colour. */
|
|
2814
|
+
'orange-muted': string;
|
|
2815
|
+
/** Light gray fill of a gray CategoryLabel, behind the gray-text colour. */
|
|
2816
|
+
'gray-muted': string;
|
|
2817
|
+
};
|
|
2818
|
+
status: {
|
|
2819
|
+
/**
|
|
2820
|
+
* Text and icon of a pending StatusLabel, on its pending background.
|
|
2821
|
+
*
|
|
2822
|
+
* @deprecated Moved to the component tier as component.status.pending.text (decision 0031 §6). Removed in 3.0.
|
|
2823
|
+
*/
|
|
2824
|
+
pending: string;
|
|
2825
|
+
/**
|
|
2826
|
+
* Background for pending status
|
|
2827
|
+
*
|
|
2828
|
+
* @deprecated Moved to the component tier as component.status.pending.background (decision 0031 §6). Removed in 3.0.
|
|
2829
|
+
*/
|
|
2830
|
+
'pending-bg': string;
|
|
2831
|
+
/**
|
|
2832
|
+
* Green color for completed status
|
|
2833
|
+
*
|
|
2834
|
+
* @deprecated Moved to the component tier as component.status.completed.text (decision 0031 §6). Removed in 3.0.
|
|
2835
|
+
*/
|
|
2836
|
+
completed: string;
|
|
2837
|
+
/**
|
|
2838
|
+
* Background for completed status
|
|
2839
|
+
*
|
|
2840
|
+
* @deprecated Moved to the component tier as component.status.completed.background (decision 0031 §6). Removed in 3.0.
|
|
2841
|
+
*/
|
|
2842
|
+
'completed-bg': string;
|
|
2843
|
+
/**
|
|
2844
|
+
* Red color for failed/error status
|
|
2845
|
+
*
|
|
2846
|
+
* @deprecated Moved to the component tier as component.status.failed.text (decision 0031 §6). Removed in 3.0.
|
|
2847
|
+
*/
|
|
2848
|
+
failed: string;
|
|
2849
|
+
/**
|
|
2850
|
+
* Background for failed status
|
|
2851
|
+
*
|
|
2852
|
+
* @deprecated Moved to the component tier as component.status.failed.background (decision 0031 §6). Removed in 3.0.
|
|
2853
|
+
*/
|
|
2854
|
+
'failed-bg': string;
|
|
2855
|
+
/**
|
|
2856
|
+
* Gray color for cancelled status
|
|
2857
|
+
*
|
|
2858
|
+
* @deprecated Moved to the component tier as component.status.cancelled.text (decision 0031 §6). Removed in 3.0.
|
|
2859
|
+
*/
|
|
2860
|
+
cancelled: string;
|
|
2861
|
+
/**
|
|
2862
|
+
* Background for cancelled status
|
|
2863
|
+
*
|
|
2864
|
+
* @deprecated Moved to the component tier as component.status.cancelled.background (decision 0031 §6). Removed in 3.0.
|
|
2865
|
+
*/
|
|
2866
|
+
'cancelled-bg': string;
|
|
2867
|
+
/**
|
|
2868
|
+
* Blue color for processing status
|
|
2869
|
+
*
|
|
2870
|
+
* @deprecated Moved to the component tier as component.status.processing.text (decision 0031 §6). Removed in 3.0.
|
|
2871
|
+
*/
|
|
2872
|
+
processing: string;
|
|
2873
|
+
/**
|
|
2874
|
+
* Background for processing status
|
|
2875
|
+
*
|
|
2876
|
+
* @deprecated Moved to the component tier as component.status.processing.background (decision 0031 §6). Removed in 3.0.
|
|
2877
|
+
*/
|
|
2878
|
+
'processing-bg': string;
|
|
2879
|
+
/**
|
|
2880
|
+
* Purple color for scheduled status
|
|
2881
|
+
*
|
|
2882
|
+
* @deprecated Moved to the component tier as component.status.scheduled.text (decision 0031 §6). Removed in 3.0.
|
|
2883
|
+
*/
|
|
2884
|
+
scheduled: string;
|
|
2885
|
+
/**
|
|
2886
|
+
* Background for scheduled status
|
|
2887
|
+
*
|
|
2888
|
+
* @deprecated Moved to the component tier as component.status.scheduled.background (decision 0031 §6). Removed in 3.0.
|
|
2889
|
+
*/
|
|
2890
|
+
'scheduled-bg': string;
|
|
2891
|
+
};
|
|
2892
|
+
fill: {
|
|
2893
|
+
/** Near-black fill for emphasis controls, such as the primary Button and IconButton. */
|
|
2894
|
+
emphasis: string;
|
|
2895
|
+
/** Fill of a hovered emphasis control, such as the primary Button. */
|
|
2896
|
+
'emphasis-hover': string;
|
|
2897
|
+
/** Fill of a pressed emphasis control, such as the primary Button. */
|
|
2898
|
+
'emphasis-pressed': string;
|
|
2899
|
+
/** Light grey fill for quiet grouped content, such as the default Chip. */
|
|
2900
|
+
muted: string;
|
|
2901
|
+
/** Dark fill for inverse elements: a checked Checkbox, Modal and Sheet drag handles. */
|
|
2902
|
+
inverse: string;
|
|
2903
|
+
/** Blue fill for the accent Button and other deliberate highlights; see 0003. */
|
|
2904
|
+
accent: string;
|
|
2905
|
+
/** Light blue fill for selected items: a selected chip, tab or row; see 0016. */
|
|
2906
|
+
'accent-muted': string;
|
|
2907
|
+
/** Fill of a hovered selected item, such as a selected filter chip. */
|
|
2908
|
+
'accent-muted-hover': string;
|
|
2909
|
+
/** Fill of a pressed selected item, such as a selected filter chip. */
|
|
2910
|
+
'accent-muted-pressed': string;
|
|
2911
|
+
/** Blue fill of a hovered accent control, such as the accent Button. */
|
|
2912
|
+
'accent-hover': string;
|
|
2913
|
+
/** Blue fill of a pressed accent control, such as the accent Button. */
|
|
2914
|
+
'accent-pressed': string;
|
|
2915
|
+
/** Strong red fill for destructive actions, such as the danger Button. */
|
|
2916
|
+
danger: string;
|
|
2917
|
+
/** Fill of a hovered destructive control, such as the danger Button. */
|
|
2918
|
+
'danger-hover': string;
|
|
2919
|
+
/** Fill of a pressed destructive control, such as the danger Button. */
|
|
2920
|
+
'danger-pressed': string;
|
|
2921
|
+
/** Light red tint behind error messages, such as an error Alert. */
|
|
2922
|
+
'danger-muted': string;
|
|
2923
|
+
/** Strong green fill for success states, such as a success indicator. */
|
|
2924
|
+
success: string;
|
|
2925
|
+
/** Light green tint behind success messages, such as a success Alert. */
|
|
2926
|
+
'success-muted': string;
|
|
2927
|
+
/** Strong orange fill for warning states, such as a warning indicator. */
|
|
2928
|
+
warning: string;
|
|
2929
|
+
/** Light orange tint behind warning messages, such as a warning Alert. */
|
|
2930
|
+
'warning-muted': string;
|
|
2931
|
+
/** Fill of a disabled control, such as a disabled Button or Switch. */
|
|
2932
|
+
disabled: string;
|
|
2933
|
+
/** Fill of a neutral control at rest, such as the secondary Button. */
|
|
2934
|
+
default: string;
|
|
2935
|
+
/** Fill of a hovered neutral control, such as the secondary Button. */
|
|
2936
|
+
'default-hover': string;
|
|
2937
|
+
/** Fill of a pressed neutral control, such as the secondary Button. */
|
|
2938
|
+
'default-pressed': string;
|
|
2939
|
+
/** No fill, for controls without a background at rest: the naked Button and IconButton. */
|
|
2940
|
+
none: string;
|
|
2941
|
+
/** Hover tint for a fill-less control over any background, such as a chip close button. */
|
|
2942
|
+
'none-hover': string;
|
|
2943
|
+
/** Pressed tint for a fill-less control over any background, such as a chip close button. */
|
|
2944
|
+
'none-pressed': string;
|
|
2945
|
+
/** Hover tint for a fill-less element on a dark background, such as a count on a dark tab. */
|
|
2946
|
+
'inverse-none-hover': string;
|
|
2947
|
+
};
|
|
2948
|
+
};
|
|
2949
|
+
typography: {
|
|
2950
|
+
/** The largest heading, for hero titles. */
|
|
2951
|
+
display: string;
|
|
2952
|
+
/** Heading 1: the page title, one per page. */
|
|
2953
|
+
h1: string;
|
|
2954
|
+
/** Heading 2: major sections of a page. */
|
|
2955
|
+
h2: string;
|
|
2956
|
+
/** Heading 3: the third heading level in a page outline. */
|
|
2957
|
+
h3: string;
|
|
2958
|
+
/** Heading 4: the fourth heading level in a page outline. */
|
|
2959
|
+
h4: string;
|
|
2960
|
+
/** Heading 5: the fifth heading level in a page outline. */
|
|
2961
|
+
h5: string;
|
|
2962
|
+
/** The smallest heading; Alert's title builds on it. */
|
|
2963
|
+
h6: string;
|
|
2964
|
+
/** Subtitle: a short line under a heading. */
|
|
2965
|
+
subtitle: string;
|
|
2966
|
+
/** Body text: paragraphs and input values. The default text style. */
|
|
2967
|
+
body: string;
|
|
2968
|
+
/** Small text: secondary copy and compact controls. */
|
|
2969
|
+
small: string;
|
|
2970
|
+
/** A short uppercase label above a heading. */
|
|
2971
|
+
overline: string;
|
|
2972
|
+
/** Captions: helper text, metadata and image captions. */
|
|
2973
|
+
caption: string;
|
|
2974
|
+
/**
|
|
2975
|
+
* Label of the large Button, the default size.
|
|
2976
|
+
*
|
|
2977
|
+
* @deprecated Moved to the component tier as component.button.sizes.large.font (decision 0031 §6). Removed in 3.0.
|
|
2978
|
+
*/
|
|
2979
|
+
button1: string;
|
|
2980
|
+
/**
|
|
2981
|
+
* Label of the medium Button, and tab labels.
|
|
2982
|
+
*
|
|
2983
|
+
* @deprecated Moved to the component tier as component.button.sizes.medium.font (decision 0031 §6). Removed in 3.0.
|
|
2984
|
+
*/
|
|
2985
|
+
button2: string;
|
|
2986
|
+
/**
|
|
2987
|
+
* Label of the small Button, for dense toolbars.
|
|
2988
|
+
*
|
|
2989
|
+
* @deprecated Moved to the component tier as component.button.sizes.small.font (decision 0031 §6). Removed in 3.0.
|
|
2990
|
+
*/
|
|
2991
|
+
button3: string;
|
|
2992
|
+
/** Form labels for fields such as TextField and Slider. */
|
|
2993
|
+
label: string;
|
|
2994
|
+
/**
|
|
2995
|
+
* Breadcrumb-sized text; not used today, as Breadcrumbs uses typography.caption.
|
|
2996
|
+
*
|
|
2997
|
+
* @deprecated Moved to the component tier as component.breadcrumbs.font (decision 0031 §6). Removed in 3.0.
|
|
2998
|
+
*/
|
|
2999
|
+
breadcrumb: string;
|
|
3000
|
+
};
|
|
3001
|
+
motion: {
|
|
3002
|
+
duration: {
|
|
3003
|
+
/**
|
|
3004
|
+
* 200ms: standard duration for property-specific transitions.
|
|
3005
|
+
*
|
|
3006
|
+
* @deprecated Renamed to semantic.motion.duration.moderate by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0.
|
|
3007
|
+
*/
|
|
3008
|
+
normal: string;
|
|
3009
|
+
/** Quick responses to input: hover, press, focus and small indicators. */
|
|
3010
|
+
fast: string;
|
|
3011
|
+
/** The longest duration (P6): larger movements, such as a Sheet sliding in. */
|
|
3012
|
+
slow: string;
|
|
3013
|
+
/** No duration: changes that should happen at once, such as movement under reduced motion. */
|
|
3014
|
+
instant: string;
|
|
3015
|
+
/** The default duration for state changes and short movements, such as a menu opening. */
|
|
3016
|
+
moderate: string;
|
|
3017
|
+
};
|
|
3018
|
+
easing: {
|
|
3019
|
+
/**
|
|
3020
|
+
* ease-in-out: standard easing for property-specific transitions.
|
|
3021
|
+
*
|
|
3022
|
+
* @deprecated Renamed to semantic.motion.easing.standard by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0.
|
|
3023
|
+
*/
|
|
3024
|
+
easeInOut: string;
|
|
3025
|
+
/**
|
|
3026
|
+
* ease-out: for elements responding to input or entering the page.
|
|
3027
|
+
*
|
|
3028
|
+
* @deprecated Renamed to semantic.motion.easing.decelerate by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0.
|
|
3029
|
+
*/
|
|
3030
|
+
easeOut: string;
|
|
3031
|
+
/** Easing for change on screen: something moving or resizing in place. */
|
|
3032
|
+
standard: string;
|
|
3033
|
+
/** Easing for things arriving or responding: entrances, hover and press. */
|
|
3034
|
+
decelerate: string;
|
|
3035
|
+
/** Easing for things leaving: exits and dismissals speed up as they go (decision 0037). */
|
|
3036
|
+
accelerate: string;
|
|
3037
|
+
};
|
|
3038
|
+
transition: {
|
|
3039
|
+
/**
|
|
3040
|
+
* All properties over duration.fast (150ms), easing out: quick feedback, such as the Slider thumb.
|
|
3041
|
+
*
|
|
3042
|
+
* @deprecated It animates every property (`transition: all`). List the properties instead, with motion.duration and motion.easing, or use a motion.transition composite (decision 0037). Removed in 3.0.
|
|
3043
|
+
*/
|
|
3044
|
+
fast: string;
|
|
3045
|
+
/**
|
|
3046
|
+
* All properties over duration.normal (200ms), easing in and out: the default state transition.
|
|
3047
|
+
*
|
|
3048
|
+
* @deprecated It animates every property (`transition: all`). List the properties instead, with motion.duration and motion.easing, or use a motion.transition composite (decision 0037). Removed in 3.0.
|
|
3049
|
+
*/
|
|
3050
|
+
normal: string;
|
|
3051
|
+
/**
|
|
3052
|
+
* All properties over duration.slow (300ms), the motion maximum (P6), easing in and out: larger changes.
|
|
3053
|
+
*
|
|
3054
|
+
* @deprecated It animates every property (`transition: all`). List the properties instead, with motion.duration and motion.easing, or use a motion.transition composite (decision 0037). Removed in 3.0.
|
|
3055
|
+
*/
|
|
3056
|
+
slow: string;
|
|
3057
|
+
/** Fill and text colour responding to hover and press: buttons, chips, tabs and rows. */
|
|
3058
|
+
feedback: string;
|
|
3059
|
+
/** How the focus ring appears: outline and outline offset. */
|
|
3060
|
+
focus: string;
|
|
3061
|
+
/** Small movement or fade in response to input, such as a pressed control shifting. */
|
|
3062
|
+
press: string;
|
|
3063
|
+
};
|
|
3064
|
+
/**
|
|
3065
|
+
* Background and text colour over 150ms: the hover and press response of buttons, chips and tabs.
|
|
3066
|
+
*
|
|
3067
|
+
* @deprecated Renamed to semantic.motion.transition.feedback by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0.
|
|
3068
|
+
*/
|
|
3069
|
+
hover: string;
|
|
3070
|
+
/**
|
|
3071
|
+
* Outline and outline offset over 150ms: how the focus ring appears.
|
|
3072
|
+
*
|
|
3073
|
+
* @deprecated Renamed to semantic.motion.transition.focus by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0.
|
|
3074
|
+
*/
|
|
3075
|
+
focus: string;
|
|
3076
|
+
/**
|
|
3077
|
+
* Transform and opacity over 150ms: small movement or fade in response to input.
|
|
3078
|
+
*
|
|
3079
|
+
* @deprecated Renamed to semantic.motion.transition.press by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0.
|
|
3080
|
+
*/
|
|
3081
|
+
interactive: string;
|
|
3082
|
+
distance: {
|
|
3083
|
+
/** How far a small element travels as it enters, such as a Dropdown menu dropping in. */
|
|
3084
|
+
sm: string;
|
|
3085
|
+
};
|
|
3086
|
+
};
|
|
3087
|
+
layer: {
|
|
3088
|
+
/** Stacking layer for chrome that stays visible while scrolling: sticky headers, navigation bars. */
|
|
3089
|
+
sticky: string;
|
|
3090
|
+
/** Stacking layer for menus anchored to a control: Dropdown and SearchField lists. */
|
|
3091
|
+
dropdown: string;
|
|
3092
|
+
/** Stacking layer for panels that slide over the page and their backdrop, such as Sheet. */
|
|
3093
|
+
overlay: string;
|
|
3094
|
+
/** Stacking layer for blocking dialogs and their backdrop: Modal, ActionSheet. */
|
|
3095
|
+
modal: string;
|
|
3096
|
+
};
|
|
3097
|
+
radius: {
|
|
3098
|
+
/** No rounding: tables, dividers and sharp-edged containers. */
|
|
3099
|
+
none: string;
|
|
3100
|
+
/** Minimal rounding: small badges, checkboxes, compact tags. */
|
|
3101
|
+
xs: string;
|
|
3102
|
+
/** Subtle rounding: buttons, inputs and other form controls. */
|
|
3103
|
+
sm: string;
|
|
3104
|
+
/** Standard rounding: cards, dropdown menus, popovers. */
|
|
3105
|
+
md: string;
|
|
3106
|
+
/** Generous rounding: modals, action sheets and feature cards. */
|
|
3107
|
+
lg: string;
|
|
3108
|
+
/** Large rounding: pill buttons and prominent search bars. */
|
|
3109
|
+
xl: string;
|
|
3110
|
+
/** Extra-large rounding: hero elements and decorative containers. */
|
|
3111
|
+
'2xl': string;
|
|
3112
|
+
/** Maximum rounding short of a circle: decorative cards and marketing elements. */
|
|
3113
|
+
'3xl': string;
|
|
3114
|
+
/** Fully round: avatars, round icon buttons, status dots and chips. */
|
|
3115
|
+
full: string;
|
|
3116
|
+
};
|
|
3117
|
+
space: {
|
|
3118
|
+
/** No space, for explicit resets of padding, margin or gap. */
|
|
3119
|
+
'0': string;
|
|
3120
|
+
/** The tightest gap, such as between a label and its required indicator. */
|
|
3121
|
+
'100': string;
|
|
3122
|
+
/** A small gap, such as between a field's label, control and helper text. */
|
|
3123
|
+
'200': string;
|
|
3124
|
+
/** The default gap between related elements in a group. */
|
|
3125
|
+
'300': string;
|
|
3126
|
+
/** Space between groups of elements, around a small Divider, and inside containers. */
|
|
3127
|
+
'400': string;
|
|
3128
|
+
/** Generous padding inside larger containers and cards. */
|
|
3129
|
+
'500': string;
|
|
3130
|
+
/** Space between blocks, and around a medium or minimal Divider. */
|
|
3131
|
+
'600': string;
|
|
3132
|
+
/** A larger step between blocks and sections; pick the step the layout needs. */
|
|
3133
|
+
'700': string;
|
|
3134
|
+
/** Space between sections, and around the default Divider. */
|
|
3135
|
+
'800': string;
|
|
3136
|
+
/** A larger step between blocks and sections; pick the step the layout needs. */
|
|
3137
|
+
'900': string;
|
|
3138
|
+
/** A larger step between blocks and sections; pick the step the layout needs. */
|
|
3139
|
+
'1000': string;
|
|
3140
|
+
/** Space between major sections, and around an extra-large Divider. */
|
|
3141
|
+
'1200': string;
|
|
3142
|
+
/** A large step between page sections; pick the step the layout needs. */
|
|
3143
|
+
'1400': string;
|
|
3144
|
+
/** A large step between page sections; pick the step the layout needs. */
|
|
3145
|
+
'1600': string;
|
|
3146
|
+
/** A very large step between page sections, second only to the largest. */
|
|
3147
|
+
'2000': string;
|
|
3148
|
+
/** The largest gap between page sections, such as FeatureBlock at wide breakpoints. */
|
|
3149
|
+
'2400': string;
|
|
3150
|
+
inset: {
|
|
3151
|
+
/** Tightest padding inside a component, such as around an icon in a small control. */
|
|
3152
|
+
xs: string;
|
|
3153
|
+
/** Small padding inside a component: chip sides, icon-to-label gaps, compact buttons. */
|
|
3154
|
+
sm: string;
|
|
3155
|
+
/** Medium padding inside a component: form field insides, medium IconButtons. */
|
|
3156
|
+
md: string;
|
|
3157
|
+
/** Large padding inside a component: button and input sides, card insides. */
|
|
3158
|
+
lg: string;
|
|
3159
|
+
/** Generous padding inside a component, such as a prominent call to action. */
|
|
3160
|
+
xl: string;
|
|
3161
|
+
/** Largest padding inside a component: large cards, spacious form sections. */
|
|
3162
|
+
'2xl': string;
|
|
3163
|
+
};
|
|
3164
|
+
};
|
|
3165
|
+
surface: {
|
|
3166
|
+
/** The page: the off-white background everything else sits on (decision 0006). */
|
|
3167
|
+
base: string;
|
|
3168
|
+
/** Content raised off the page: cards, inputs, sheets, dialogs, code blocks. */
|
|
3169
|
+
raised: string;
|
|
3170
|
+
/** Backdrop behind a modal surface: Modal, Sheet, ActionSheet. */
|
|
3171
|
+
scrim: string;
|
|
3172
|
+
};
|
|
3173
|
+
};
|
|
3174
|
+
};
|