@dereekb/dbx-components-mcp 13.10.6 → 13.10.7
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/dbx-components-mcp.js +2091 -351
- package/generated/angular-material-m3.tokens.mcp.generated.json +1061 -0
- package/generated/angular-material-mdc.tokens.mcp.generated.json +298 -0
- package/generated/dereekb-dbx-web.tokens.mcp.generated.json +987 -0
- package/generated/dereekb-dbx-web.ui-components.mcp.generated.json +28 -0
- package/generated/rule-catalog.generated.json +3 -3
- package/package.json +1 -1
|
@@ -0,0 +1,1061 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 1,
|
|
3
|
+
"source": "angular-material-m3",
|
|
4
|
+
"module": "@angular/material",
|
|
5
|
+
"generatedAt": "1970-01-01T00:00:00.000Z",
|
|
6
|
+
"generator": "@dereekb/dbx-components-mcp/scripts/generate-css-tokens.mjs",
|
|
7
|
+
"entries": [
|
|
8
|
+
{
|
|
9
|
+
"cssVariable": "--mat-sys-primary",
|
|
10
|
+
"source": "mat-sys",
|
|
11
|
+
"role": "color",
|
|
12
|
+
"intents": [
|
|
13
|
+
"primary color",
|
|
14
|
+
"brand color",
|
|
15
|
+
"main accent color",
|
|
16
|
+
"primary action color"
|
|
17
|
+
],
|
|
18
|
+
"description": "The Material primary brand color. Use for the most prominent UI surfaces — filled buttons, primary FABs, navigation bar background.",
|
|
19
|
+
"antiUseNotes": "Don't paint big neutral surfaces with primary; use --mat-sys-surface family instead.",
|
|
20
|
+
"defaults": {
|
|
21
|
+
"light": "rgb(101 85 143)",
|
|
22
|
+
"dark": "rgb(207 188 252)"
|
|
23
|
+
},
|
|
24
|
+
"seeAlso": [
|
|
25
|
+
"--mat-sys-on-primary",
|
|
26
|
+
"--mat-sys-primary-container"
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"cssVariable": "--mat-sys-on-primary",
|
|
31
|
+
"source": "mat-sys",
|
|
32
|
+
"role": "text-color",
|
|
33
|
+
"intents": [
|
|
34
|
+
"text color on primary",
|
|
35
|
+
"foreground on primary",
|
|
36
|
+
"label color on primary surface"
|
|
37
|
+
],
|
|
38
|
+
"description": "Foreground color used on top of `--mat-sys-primary`. Provides accessible contrast against the primary brand color.",
|
|
39
|
+
"defaults": {
|
|
40
|
+
"light": "rgb(255 255 255)",
|
|
41
|
+
"dark": "rgb(56 30 114)"
|
|
42
|
+
},
|
|
43
|
+
"seeAlso": [
|
|
44
|
+
"--mat-sys-primary"
|
|
45
|
+
]
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"cssVariable": "--mat-sys-primary-container",
|
|
49
|
+
"source": "mat-sys",
|
|
50
|
+
"role": "color",
|
|
51
|
+
"intents": [
|
|
52
|
+
"primary container",
|
|
53
|
+
"tonal primary background",
|
|
54
|
+
"subtle primary surface"
|
|
55
|
+
],
|
|
56
|
+
"description": "Lower-emphasis primary surface — tonal buttons, selection indicators, badge backgrounds.",
|
|
57
|
+
"defaults": {
|
|
58
|
+
"light": "rgb(232 221 255)",
|
|
59
|
+
"dark": "rgb(78 61 119)"
|
|
60
|
+
},
|
|
61
|
+
"seeAlso": [
|
|
62
|
+
"--mat-sys-on-primary-container"
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"cssVariable": "--mat-sys-on-primary-container",
|
|
67
|
+
"source": "mat-sys",
|
|
68
|
+
"role": "text-color",
|
|
69
|
+
"intents": [
|
|
70
|
+
"text color on primary container"
|
|
71
|
+
],
|
|
72
|
+
"description": "Foreground color used on top of `--mat-sys-primary-container`.",
|
|
73
|
+
"defaults": {
|
|
74
|
+
"light": "rgb(33 0 93)",
|
|
75
|
+
"dark": "rgb(232 221 255)"
|
|
76
|
+
},
|
|
77
|
+
"seeAlso": [
|
|
78
|
+
"--mat-sys-primary-container"
|
|
79
|
+
]
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"cssVariable": "--mat-sys-secondary",
|
|
83
|
+
"source": "mat-sys",
|
|
84
|
+
"role": "color",
|
|
85
|
+
"intents": [
|
|
86
|
+
"secondary color",
|
|
87
|
+
"supporting accent color"
|
|
88
|
+
],
|
|
89
|
+
"description": "Material secondary color — supporting accent, less prominent than primary.",
|
|
90
|
+
"defaults": {
|
|
91
|
+
"light": "rgb(98 91 113)",
|
|
92
|
+
"dark": "rgb(204 195 219)"
|
|
93
|
+
},
|
|
94
|
+
"seeAlso": [
|
|
95
|
+
"--mat-sys-on-secondary",
|
|
96
|
+
"--mat-sys-secondary-container"
|
|
97
|
+
]
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"cssVariable": "--mat-sys-on-secondary",
|
|
101
|
+
"source": "mat-sys",
|
|
102
|
+
"role": "text-color",
|
|
103
|
+
"intents": [
|
|
104
|
+
"text color on secondary"
|
|
105
|
+
],
|
|
106
|
+
"description": "Foreground color used on top of `--mat-sys-secondary`.",
|
|
107
|
+
"defaults": {
|
|
108
|
+
"light": "rgb(255 255 255)",
|
|
109
|
+
"dark": "rgb(51 45 65)"
|
|
110
|
+
},
|
|
111
|
+
"seeAlso": [
|
|
112
|
+
"--mat-sys-secondary"
|
|
113
|
+
]
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"cssVariable": "--mat-sys-secondary-container",
|
|
117
|
+
"source": "mat-sys",
|
|
118
|
+
"role": "color",
|
|
119
|
+
"intents": [
|
|
120
|
+
"secondary container",
|
|
121
|
+
"tonal secondary background"
|
|
122
|
+
],
|
|
123
|
+
"description": "Lower-emphasis secondary surface for chips, filter affordances, and supporting actions.",
|
|
124
|
+
"defaults": {
|
|
125
|
+
"light": "rgb(232 222 247)",
|
|
126
|
+
"dark": "rgb(74 68 88)"
|
|
127
|
+
},
|
|
128
|
+
"seeAlso": [
|
|
129
|
+
"--mat-sys-on-secondary-container"
|
|
130
|
+
]
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"cssVariable": "--mat-sys-on-secondary-container",
|
|
134
|
+
"source": "mat-sys",
|
|
135
|
+
"role": "text-color",
|
|
136
|
+
"intents": [
|
|
137
|
+
"text color on secondary container"
|
|
138
|
+
],
|
|
139
|
+
"description": "Foreground color used on top of `--mat-sys-secondary-container`.",
|
|
140
|
+
"defaults": {
|
|
141
|
+
"light": "rgb(30 24 43)",
|
|
142
|
+
"dark": "rgb(232 222 247)"
|
|
143
|
+
},
|
|
144
|
+
"seeAlso": [
|
|
145
|
+
"--mat-sys-secondary-container"
|
|
146
|
+
]
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"cssVariable": "--mat-sys-tertiary",
|
|
150
|
+
"source": "mat-sys",
|
|
151
|
+
"role": "color",
|
|
152
|
+
"intents": [
|
|
153
|
+
"tertiary color",
|
|
154
|
+
"accent color",
|
|
155
|
+
"highlight color"
|
|
156
|
+
],
|
|
157
|
+
"description": "Material tertiary color — distinct accent. Aliased by `--dbx-accent-color` so dbx-web's accent and Material's tertiary stay in sync.",
|
|
158
|
+
"defaults": {
|
|
159
|
+
"light": "rgb(125 82 96)",
|
|
160
|
+
"dark": "rgb(239 184 200)"
|
|
161
|
+
},
|
|
162
|
+
"seeAlso": [
|
|
163
|
+
"--mat-sys-on-tertiary",
|
|
164
|
+
"--mat-sys-tertiary-container"
|
|
165
|
+
]
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"cssVariable": "--mat-sys-on-tertiary",
|
|
169
|
+
"source": "mat-sys",
|
|
170
|
+
"role": "text-color",
|
|
171
|
+
"intents": [
|
|
172
|
+
"text color on tertiary"
|
|
173
|
+
],
|
|
174
|
+
"description": "Foreground color used on top of `--mat-sys-tertiary`.",
|
|
175
|
+
"defaults": {
|
|
176
|
+
"light": "rgb(255 255 255)",
|
|
177
|
+
"dark": "rgb(73 37 50)"
|
|
178
|
+
},
|
|
179
|
+
"seeAlso": [
|
|
180
|
+
"--mat-sys-tertiary"
|
|
181
|
+
]
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"cssVariable": "--mat-sys-tertiary-container",
|
|
185
|
+
"source": "mat-sys",
|
|
186
|
+
"role": "color",
|
|
187
|
+
"intents": [
|
|
188
|
+
"tertiary container",
|
|
189
|
+
"tonal accent background"
|
|
190
|
+
],
|
|
191
|
+
"description": "Lower-emphasis tertiary surface.",
|
|
192
|
+
"defaults": {
|
|
193
|
+
"light": "rgb(255 217 225)",
|
|
194
|
+
"dark": "rgb(99 59 73)"
|
|
195
|
+
},
|
|
196
|
+
"seeAlso": [
|
|
197
|
+
"--mat-sys-on-tertiary-container"
|
|
198
|
+
]
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"cssVariable": "--mat-sys-on-tertiary-container",
|
|
202
|
+
"source": "mat-sys",
|
|
203
|
+
"role": "text-color",
|
|
204
|
+
"intents": [
|
|
205
|
+
"text color on tertiary container"
|
|
206
|
+
],
|
|
207
|
+
"description": "Foreground color used on top of `--mat-sys-tertiary-container`.",
|
|
208
|
+
"defaults": {
|
|
209
|
+
"light": "rgb(49 17 30)",
|
|
210
|
+
"dark": "rgb(255 217 225)"
|
|
211
|
+
},
|
|
212
|
+
"seeAlso": [
|
|
213
|
+
"--mat-sys-tertiary-container"
|
|
214
|
+
]
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"cssVariable": "--mat-sys-error",
|
|
218
|
+
"source": "mat-sys",
|
|
219
|
+
"role": "color",
|
|
220
|
+
"intents": [
|
|
221
|
+
"error color",
|
|
222
|
+
"danger color",
|
|
223
|
+
"destructive color",
|
|
224
|
+
"warn color"
|
|
225
|
+
],
|
|
226
|
+
"description": "Error/destructive color. Aliased by `--dbx-warn-color`.",
|
|
227
|
+
"defaults": {
|
|
228
|
+
"light": "rgb(186 26 26)",
|
|
229
|
+
"dark": "rgb(255 180 171)"
|
|
230
|
+
},
|
|
231
|
+
"seeAlso": [
|
|
232
|
+
"--mat-sys-on-error",
|
|
233
|
+
"--mat-sys-error-container"
|
|
234
|
+
]
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"cssVariable": "--mat-sys-on-error",
|
|
238
|
+
"source": "mat-sys",
|
|
239
|
+
"role": "text-color",
|
|
240
|
+
"intents": [
|
|
241
|
+
"text color on error"
|
|
242
|
+
],
|
|
243
|
+
"description": "Foreground color used on top of `--mat-sys-error`.",
|
|
244
|
+
"defaults": {
|
|
245
|
+
"light": "rgb(255 255 255)",
|
|
246
|
+
"dark": "rgb(105 0 5)"
|
|
247
|
+
},
|
|
248
|
+
"seeAlso": [
|
|
249
|
+
"--mat-sys-error"
|
|
250
|
+
]
|
|
251
|
+
},
|
|
252
|
+
{
|
|
253
|
+
"cssVariable": "--mat-sys-error-container",
|
|
254
|
+
"source": "mat-sys",
|
|
255
|
+
"role": "color",
|
|
256
|
+
"intents": [
|
|
257
|
+
"error container",
|
|
258
|
+
"tonal error background",
|
|
259
|
+
"destructive container"
|
|
260
|
+
],
|
|
261
|
+
"description": "Lower-emphasis error surface for inline error chips.",
|
|
262
|
+
"defaults": {
|
|
263
|
+
"light": "rgb(255 218 214)",
|
|
264
|
+
"dark": "rgb(147 0 10)"
|
|
265
|
+
},
|
|
266
|
+
"seeAlso": [
|
|
267
|
+
"--mat-sys-on-error-container"
|
|
268
|
+
]
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
"cssVariable": "--mat-sys-on-error-container",
|
|
272
|
+
"source": "mat-sys",
|
|
273
|
+
"role": "text-color",
|
|
274
|
+
"intents": [
|
|
275
|
+
"text color on error container"
|
|
276
|
+
],
|
|
277
|
+
"description": "Foreground color used on top of `--mat-sys-error-container`.",
|
|
278
|
+
"defaults": {
|
|
279
|
+
"light": "rgb(65 0 2)",
|
|
280
|
+
"dark": "rgb(255 218 214)"
|
|
281
|
+
},
|
|
282
|
+
"seeAlso": [
|
|
283
|
+
"--mat-sys-error-container"
|
|
284
|
+
]
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
"cssVariable": "--mat-sys-surface",
|
|
288
|
+
"source": "mat-sys",
|
|
289
|
+
"role": "surface",
|
|
290
|
+
"intents": [
|
|
291
|
+
"base surface",
|
|
292
|
+
"page background",
|
|
293
|
+
"default app background",
|
|
294
|
+
"background color"
|
|
295
|
+
],
|
|
296
|
+
"description": "Default surface color — the base background under the app shell. Aliased by `--dbx-surface-color`.",
|
|
297
|
+
"antiUseNotes": "Don't hardcode `#fff` or `white` for backgrounds — use `var(--mat-sys-surface)` so dark mode flips automatically.",
|
|
298
|
+
"defaults": {
|
|
299
|
+
"light": "rgb(255 251 254)",
|
|
300
|
+
"dark": "rgb(20 12 26)"
|
|
301
|
+
},
|
|
302
|
+
"recommendedPrimitive": "content-box",
|
|
303
|
+
"seeAlso": [
|
|
304
|
+
"--mat-sys-on-surface",
|
|
305
|
+
"--mat-sys-surface-container"
|
|
306
|
+
]
|
|
307
|
+
},
|
|
308
|
+
{
|
|
309
|
+
"cssVariable": "--mat-sys-surface-dim",
|
|
310
|
+
"source": "mat-sys",
|
|
311
|
+
"role": "surface",
|
|
312
|
+
"intents": [
|
|
313
|
+
"dimmed surface",
|
|
314
|
+
"subtly darker background"
|
|
315
|
+
],
|
|
316
|
+
"description": "Dimmed surface — slightly darker than `--mat-sys-surface` for hierarchy.",
|
|
317
|
+
"defaults": {
|
|
318
|
+
"light": "rgb(221 216 224)",
|
|
319
|
+
"dark": "rgb(20 12 26)"
|
|
320
|
+
},
|
|
321
|
+
"seeAlso": [
|
|
322
|
+
"--mat-sys-surface"
|
|
323
|
+
]
|
|
324
|
+
},
|
|
325
|
+
{
|
|
326
|
+
"cssVariable": "--mat-sys-surface-bright",
|
|
327
|
+
"source": "mat-sys",
|
|
328
|
+
"role": "surface",
|
|
329
|
+
"intents": [
|
|
330
|
+
"bright surface",
|
|
331
|
+
"lighter background"
|
|
332
|
+
],
|
|
333
|
+
"description": "Bright surface — slightly lighter than `--mat-sys-surface`.",
|
|
334
|
+
"defaults": {
|
|
335
|
+
"light": "rgb(253 248 253)",
|
|
336
|
+
"dark": "rgb(58 49 65)"
|
|
337
|
+
},
|
|
338
|
+
"seeAlso": [
|
|
339
|
+
"--mat-sys-surface"
|
|
340
|
+
]
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
"cssVariable": "--mat-sys-surface-container",
|
|
344
|
+
"source": "mat-sys",
|
|
345
|
+
"role": "surface",
|
|
346
|
+
"intents": [
|
|
347
|
+
"container surface",
|
|
348
|
+
"card background",
|
|
349
|
+
"raised surface"
|
|
350
|
+
],
|
|
351
|
+
"description": "Container surface — the canonical `<dbx-content-box>` / card background.",
|
|
352
|
+
"antiUseNotes": "Don't paint a card with a hardcoded `#f8f9fa` or `#fff`; use this variable so light/dark mode toggles automatically.",
|
|
353
|
+
"defaults": {
|
|
354
|
+
"light": "rgb(241 236 244)",
|
|
355
|
+
"dark": "rgb(33 26 39)"
|
|
356
|
+
},
|
|
357
|
+
"recommendedPrimitive": "content-box",
|
|
358
|
+
"seeAlso": [
|
|
359
|
+
"--mat-sys-on-surface"
|
|
360
|
+
]
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
"cssVariable": "--mat-sys-surface-container-low",
|
|
364
|
+
"source": "mat-sys",
|
|
365
|
+
"role": "surface",
|
|
366
|
+
"intents": [
|
|
367
|
+
"lower-elevation container",
|
|
368
|
+
"subtle container background"
|
|
369
|
+
],
|
|
370
|
+
"description": "Lower-elevation container surface.",
|
|
371
|
+
"defaults": {
|
|
372
|
+
"light": "rgb(247 242 250)",
|
|
373
|
+
"dark": "rgb(28 21 33)"
|
|
374
|
+
},
|
|
375
|
+
"seeAlso": [
|
|
376
|
+
"--mat-sys-surface-container"
|
|
377
|
+
]
|
|
378
|
+
},
|
|
379
|
+
{
|
|
380
|
+
"cssVariable": "--mat-sys-surface-container-high",
|
|
381
|
+
"source": "mat-sys",
|
|
382
|
+
"role": "surface",
|
|
383
|
+
"intents": [
|
|
384
|
+
"higher-elevation container",
|
|
385
|
+
"modal background",
|
|
386
|
+
"raised card"
|
|
387
|
+
],
|
|
388
|
+
"description": "Higher-elevation container surface — modal cards, bottom sheets.",
|
|
389
|
+
"defaults": {
|
|
390
|
+
"light": "rgb(236 230 239)",
|
|
391
|
+
"dark": "rgb(43 35 49)"
|
|
392
|
+
},
|
|
393
|
+
"seeAlso": [
|
|
394
|
+
"--mat-sys-surface-container"
|
|
395
|
+
]
|
|
396
|
+
},
|
|
397
|
+
{
|
|
398
|
+
"cssVariable": "--mat-sys-surface-container-highest",
|
|
399
|
+
"source": "mat-sys",
|
|
400
|
+
"role": "surface",
|
|
401
|
+
"intents": [
|
|
402
|
+
"topmost container surface"
|
|
403
|
+
],
|
|
404
|
+
"description": "Topmost container surface — used by elements that float above other containers.",
|
|
405
|
+
"defaults": {
|
|
406
|
+
"light": "rgb(230 224 233)",
|
|
407
|
+
"dark": "rgb(54 46 60)"
|
|
408
|
+
},
|
|
409
|
+
"seeAlso": [
|
|
410
|
+
"--mat-sys-surface-container"
|
|
411
|
+
]
|
|
412
|
+
},
|
|
413
|
+
{
|
|
414
|
+
"cssVariable": "--mat-sys-on-surface",
|
|
415
|
+
"source": "mat-sys",
|
|
416
|
+
"role": "text-color",
|
|
417
|
+
"intents": [
|
|
418
|
+
"body text color",
|
|
419
|
+
"primary text",
|
|
420
|
+
"default foreground",
|
|
421
|
+
"text on background"
|
|
422
|
+
],
|
|
423
|
+
"description": "Default body text color on surfaces. Aliased by `--dbx-default-color`.",
|
|
424
|
+
"antiUseNotes": "Don't use this for hint or secondary text — use `--mat-sys-on-surface-variant` instead.",
|
|
425
|
+
"defaults": {
|
|
426
|
+
"light": "rgb(28 27 30)",
|
|
427
|
+
"dark": "rgb(229 225 230)"
|
|
428
|
+
},
|
|
429
|
+
"seeAlso": [
|
|
430
|
+
"--mat-sys-surface",
|
|
431
|
+
"--mat-sys-on-surface-variant"
|
|
432
|
+
]
|
|
433
|
+
},
|
|
434
|
+
{
|
|
435
|
+
"cssVariable": "--mat-sys-on-surface-variant",
|
|
436
|
+
"source": "mat-sys",
|
|
437
|
+
"role": "text-color",
|
|
438
|
+
"intents": [
|
|
439
|
+
"hint text color",
|
|
440
|
+
"secondary text",
|
|
441
|
+
"subtitle text",
|
|
442
|
+
"muted text",
|
|
443
|
+
"caption text",
|
|
444
|
+
"subdued foreground"
|
|
445
|
+
],
|
|
446
|
+
"description": "Lower-emphasis foreground used for hints, captions, and supporting text. Replaces hardcoded `rgba(0,0,0,0.6)` / `rgba(255,255,255,0.7)` patterns.",
|
|
447
|
+
"antiUseNotes": "Don't write `color: rgba(0,0,0,0.6)` for subtitles — use `var(--mat-sys-on-surface-variant)` so dark mode flips automatically.",
|
|
448
|
+
"defaults": {
|
|
449
|
+
"light": "rgb(73 69 79)",
|
|
450
|
+
"dark": "rgb(202 196 208)"
|
|
451
|
+
},
|
|
452
|
+
"utilityClasses": [
|
|
453
|
+
".dbx-text-hint"
|
|
454
|
+
],
|
|
455
|
+
"seeAlso": [
|
|
456
|
+
"--mat-sys-on-surface",
|
|
457
|
+
"--mat-sys-outline"
|
|
458
|
+
]
|
|
459
|
+
},
|
|
460
|
+
{
|
|
461
|
+
"cssVariable": "--mat-sys-outline",
|
|
462
|
+
"source": "mat-sys",
|
|
463
|
+
"role": "color",
|
|
464
|
+
"intents": [
|
|
465
|
+
"outline color",
|
|
466
|
+
"border color",
|
|
467
|
+
"divider color",
|
|
468
|
+
"stroke color"
|
|
469
|
+
],
|
|
470
|
+
"description": "Standard outline color for borders and dividers.",
|
|
471
|
+
"defaults": {
|
|
472
|
+
"light": "rgb(121 116 126)",
|
|
473
|
+
"dark": "rgb(148 143 153)"
|
|
474
|
+
},
|
|
475
|
+
"seeAlso": [
|
|
476
|
+
"--mat-sys-outline-variant"
|
|
477
|
+
]
|
|
478
|
+
},
|
|
479
|
+
{
|
|
480
|
+
"cssVariable": "--mat-sys-outline-variant",
|
|
481
|
+
"source": "mat-sys",
|
|
482
|
+
"role": "color",
|
|
483
|
+
"intents": [
|
|
484
|
+
"subtle border color",
|
|
485
|
+
"decorative divider",
|
|
486
|
+
"low-contrast outline"
|
|
487
|
+
],
|
|
488
|
+
"description": "Lower-contrast outline color for decorative dividers and disabled-state borders.",
|
|
489
|
+
"defaults": {
|
|
490
|
+
"light": "rgb(202 196 208)",
|
|
491
|
+
"dark": "rgb(74 69 78)"
|
|
492
|
+
},
|
|
493
|
+
"seeAlso": [
|
|
494
|
+
"--mat-sys-outline"
|
|
495
|
+
]
|
|
496
|
+
},
|
|
497
|
+
{
|
|
498
|
+
"cssVariable": "--mat-sys-inverse-surface",
|
|
499
|
+
"source": "mat-sys",
|
|
500
|
+
"role": "surface",
|
|
501
|
+
"intents": [
|
|
502
|
+
"inverse surface",
|
|
503
|
+
"snackbar background"
|
|
504
|
+
],
|
|
505
|
+
"description": "Surface color used by snackbars and tooltips.",
|
|
506
|
+
"defaults": {
|
|
507
|
+
"light": "rgb(49 48 51)",
|
|
508
|
+
"dark": "rgb(229 225 230)"
|
|
509
|
+
},
|
|
510
|
+
"seeAlso": [
|
|
511
|
+
"--mat-sys-inverse-on-surface"
|
|
512
|
+
]
|
|
513
|
+
},
|
|
514
|
+
{
|
|
515
|
+
"cssVariable": "--mat-sys-inverse-on-surface",
|
|
516
|
+
"source": "mat-sys",
|
|
517
|
+
"role": "text-color",
|
|
518
|
+
"intents": [
|
|
519
|
+
"text color on inverse surface",
|
|
520
|
+
"snackbar foreground"
|
|
521
|
+
],
|
|
522
|
+
"description": "Foreground color used on top of `--mat-sys-inverse-surface`.",
|
|
523
|
+
"defaults": {
|
|
524
|
+
"light": "rgb(244 239 244)",
|
|
525
|
+
"dark": "rgb(49 48 51)"
|
|
526
|
+
},
|
|
527
|
+
"seeAlso": [
|
|
528
|
+
"--mat-sys-inverse-surface"
|
|
529
|
+
]
|
|
530
|
+
},
|
|
531
|
+
{
|
|
532
|
+
"cssVariable": "--mat-sys-inverse-primary",
|
|
533
|
+
"source": "mat-sys",
|
|
534
|
+
"role": "color",
|
|
535
|
+
"intents": [
|
|
536
|
+
"inverse primary",
|
|
537
|
+
"snackbar accent"
|
|
538
|
+
],
|
|
539
|
+
"description": "Primary color tuned for use on inverse surfaces (snackbar action labels).",
|
|
540
|
+
"defaults": {
|
|
541
|
+
"light": "rgb(207 188 252)",
|
|
542
|
+
"dark": "rgb(101 85 143)"
|
|
543
|
+
},
|
|
544
|
+
"seeAlso": [
|
|
545
|
+
"--mat-sys-primary"
|
|
546
|
+
]
|
|
547
|
+
},
|
|
548
|
+
{
|
|
549
|
+
"cssVariable": "--mat-sys-scrim",
|
|
550
|
+
"source": "mat-sys",
|
|
551
|
+
"role": "color",
|
|
552
|
+
"intents": [
|
|
553
|
+
"scrim",
|
|
554
|
+
"modal backdrop",
|
|
555
|
+
"overlay color"
|
|
556
|
+
],
|
|
557
|
+
"description": "Scrim color used behind modal overlays and bottom sheets.",
|
|
558
|
+
"defaults": {
|
|
559
|
+
"light": "rgb(0 0 0)",
|
|
560
|
+
"dark": "rgb(0 0 0)"
|
|
561
|
+
}
|
|
562
|
+
},
|
|
563
|
+
{
|
|
564
|
+
"cssVariable": "--mat-sys-shadow",
|
|
565
|
+
"source": "mat-sys",
|
|
566
|
+
"role": "shadow",
|
|
567
|
+
"intents": [
|
|
568
|
+
"shadow color",
|
|
569
|
+
"elevation shadow"
|
|
570
|
+
],
|
|
571
|
+
"description": "Shadow color used by Material elevation tokens.",
|
|
572
|
+
"defaults": {
|
|
573
|
+
"light": "rgb(0 0 0)",
|
|
574
|
+
"dark": "rgb(0 0 0)"
|
|
575
|
+
},
|
|
576
|
+
"seeAlso": [
|
|
577
|
+
"--mat-sys-level1",
|
|
578
|
+
"--mat-sys-level2"
|
|
579
|
+
]
|
|
580
|
+
},
|
|
581
|
+
{
|
|
582
|
+
"cssVariable": "--mat-sys-corner-extra-small",
|
|
583
|
+
"source": "mat-sys",
|
|
584
|
+
"role": "radius",
|
|
585
|
+
"intents": [
|
|
586
|
+
"xs corner radius",
|
|
587
|
+
"tiny corner",
|
|
588
|
+
"subtle rounding"
|
|
589
|
+
],
|
|
590
|
+
"description": "Smallest corner radius — chips, small buttons.",
|
|
591
|
+
"defaults": {
|
|
592
|
+
"light": "4px"
|
|
593
|
+
},
|
|
594
|
+
"seeAlso": [
|
|
595
|
+
"--mat-sys-corner-small"
|
|
596
|
+
]
|
|
597
|
+
},
|
|
598
|
+
{
|
|
599
|
+
"cssVariable": "--mat-sys-corner-small",
|
|
600
|
+
"source": "mat-sys",
|
|
601
|
+
"role": "radius",
|
|
602
|
+
"intents": [
|
|
603
|
+
"small corner radius",
|
|
604
|
+
"8px radius",
|
|
605
|
+
"subtle card corner"
|
|
606
|
+
],
|
|
607
|
+
"description": "Small corner radius — minor cards, embedded inputs.",
|
|
608
|
+
"defaults": {
|
|
609
|
+
"light": "8px"
|
|
610
|
+
},
|
|
611
|
+
"seeAlso": [
|
|
612
|
+
"--mat-sys-corner-medium"
|
|
613
|
+
]
|
|
614
|
+
},
|
|
615
|
+
{
|
|
616
|
+
"cssVariable": "--mat-sys-corner-medium",
|
|
617
|
+
"source": "mat-sys",
|
|
618
|
+
"role": "radius",
|
|
619
|
+
"intents": [
|
|
620
|
+
"card radius",
|
|
621
|
+
"medium corner radius",
|
|
622
|
+
"12px radius",
|
|
623
|
+
"default rounding"
|
|
624
|
+
],
|
|
625
|
+
"description": "Medium corner radius — Material cards, dbx-web content boxes.",
|
|
626
|
+
"antiUseNotes": "Don't hardcode `border-radius: 12px` on a card; reach for this token (or rely on `<dbx-content-box>`'s default).",
|
|
627
|
+
"defaults": {
|
|
628
|
+
"light": "12px"
|
|
629
|
+
},
|
|
630
|
+
"recommendedPrimitive": "content-box",
|
|
631
|
+
"seeAlso": [
|
|
632
|
+
"--mat-sys-corner-large"
|
|
633
|
+
]
|
|
634
|
+
},
|
|
635
|
+
{
|
|
636
|
+
"cssVariable": "--mat-sys-corner-large",
|
|
637
|
+
"source": "mat-sys",
|
|
638
|
+
"role": "radius",
|
|
639
|
+
"intents": [
|
|
640
|
+
"large corner radius",
|
|
641
|
+
"16px radius",
|
|
642
|
+
"prominent rounding"
|
|
643
|
+
],
|
|
644
|
+
"description": "Large corner radius — emphasised cards.",
|
|
645
|
+
"defaults": {
|
|
646
|
+
"light": "16px"
|
|
647
|
+
},
|
|
648
|
+
"seeAlso": [
|
|
649
|
+
"--mat-sys-corner-medium"
|
|
650
|
+
]
|
|
651
|
+
},
|
|
652
|
+
{
|
|
653
|
+
"cssVariable": "--mat-sys-corner-extra-large",
|
|
654
|
+
"source": "mat-sys",
|
|
655
|
+
"role": "radius",
|
|
656
|
+
"intents": [
|
|
657
|
+
"xl corner radius",
|
|
658
|
+
"28px radius",
|
|
659
|
+
"modal corner"
|
|
660
|
+
],
|
|
661
|
+
"description": "Extra-large corner radius — bottom sheets, modal containers.",
|
|
662
|
+
"defaults": {
|
|
663
|
+
"light": "28px"
|
|
664
|
+
}
|
|
665
|
+
},
|
|
666
|
+
{
|
|
667
|
+
"cssVariable": "--mat-sys-corner-full",
|
|
668
|
+
"source": "mat-sys",
|
|
669
|
+
"role": "radius",
|
|
670
|
+
"intents": [
|
|
671
|
+
"pill radius",
|
|
672
|
+
"full corner radius",
|
|
673
|
+
"circular radius",
|
|
674
|
+
"999px radius"
|
|
675
|
+
],
|
|
676
|
+
"description": "Full corner radius — pills, FABs, badges.",
|
|
677
|
+
"defaults": {
|
|
678
|
+
"light": "9999px"
|
|
679
|
+
}
|
|
680
|
+
},
|
|
681
|
+
{
|
|
682
|
+
"cssVariable": "--mat-sys-level0",
|
|
683
|
+
"source": "mat-sys",
|
|
684
|
+
"role": "elevation",
|
|
685
|
+
"intents": [
|
|
686
|
+
"no shadow",
|
|
687
|
+
"level 0 elevation",
|
|
688
|
+
"flat surface"
|
|
689
|
+
],
|
|
690
|
+
"description": "No elevation — flat. Equivalent to `box-shadow: none`.",
|
|
691
|
+
"defaults": {
|
|
692
|
+
"light": "none"
|
|
693
|
+
}
|
|
694
|
+
},
|
|
695
|
+
{
|
|
696
|
+
"cssVariable": "--mat-sys-level1",
|
|
697
|
+
"source": "mat-sys",
|
|
698
|
+
"role": "elevation",
|
|
699
|
+
"intents": [
|
|
700
|
+
"level 1 elevation",
|
|
701
|
+
"subtle shadow",
|
|
702
|
+
"card shadow"
|
|
703
|
+
],
|
|
704
|
+
"description": "Level 1 elevation. Default for raised cards.",
|
|
705
|
+
"antiUseNotes": "Don't hardcode `box-shadow: 0 1px 2px rgba(0,0,0,.06)`; use this token or `<dbx-content-box [elevate]>`.",
|
|
706
|
+
"defaults": {
|
|
707
|
+
"light": "0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)"
|
|
708
|
+
},
|
|
709
|
+
"recommendedPrimitive": "content-box"
|
|
710
|
+
},
|
|
711
|
+
{
|
|
712
|
+
"cssVariable": "--mat-sys-level2",
|
|
713
|
+
"source": "mat-sys",
|
|
714
|
+
"role": "elevation",
|
|
715
|
+
"intents": [
|
|
716
|
+
"level 2 elevation",
|
|
717
|
+
"raised shadow",
|
|
718
|
+
"FAB shadow"
|
|
719
|
+
],
|
|
720
|
+
"description": "Level 2 elevation — FABs, hovered cards.",
|
|
721
|
+
"defaults": {
|
|
722
|
+
"light": "0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)"
|
|
723
|
+
}
|
|
724
|
+
},
|
|
725
|
+
{
|
|
726
|
+
"cssVariable": "--mat-sys-level3",
|
|
727
|
+
"source": "mat-sys",
|
|
728
|
+
"role": "elevation",
|
|
729
|
+
"intents": [
|
|
730
|
+
"level 3 elevation",
|
|
731
|
+
"modal shadow"
|
|
732
|
+
],
|
|
733
|
+
"description": "Level 3 elevation — modal dialogs, dropdown menus.",
|
|
734
|
+
"defaults": {
|
|
735
|
+
"light": "0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3)"
|
|
736
|
+
}
|
|
737
|
+
},
|
|
738
|
+
{
|
|
739
|
+
"cssVariable": "--mat-sys-level4",
|
|
740
|
+
"source": "mat-sys",
|
|
741
|
+
"role": "elevation",
|
|
742
|
+
"intents": [
|
|
743
|
+
"level 4 elevation",
|
|
744
|
+
"navigation drawer shadow"
|
|
745
|
+
],
|
|
746
|
+
"description": "Level 4 elevation — navigation drawers.",
|
|
747
|
+
"defaults": {
|
|
748
|
+
"light": "0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.3)"
|
|
749
|
+
}
|
|
750
|
+
},
|
|
751
|
+
{
|
|
752
|
+
"cssVariable": "--mat-sys-level5",
|
|
753
|
+
"source": "mat-sys",
|
|
754
|
+
"role": "elevation",
|
|
755
|
+
"intents": [
|
|
756
|
+
"level 5 elevation",
|
|
757
|
+
"highest shadow"
|
|
758
|
+
],
|
|
759
|
+
"description": "Highest elevation — overlays.",
|
|
760
|
+
"defaults": {
|
|
761
|
+
"light": "0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.3)"
|
|
762
|
+
}
|
|
763
|
+
},
|
|
764
|
+
{
|
|
765
|
+
"cssVariable": "--mat-sys-display-large",
|
|
766
|
+
"source": "mat-sys",
|
|
767
|
+
"role": "typography",
|
|
768
|
+
"intents": [
|
|
769
|
+
"display large typography",
|
|
770
|
+
"hero text style",
|
|
771
|
+
"57px display"
|
|
772
|
+
],
|
|
773
|
+
"description": "Display large — hero/display headings. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
774
|
+
"defaults": {
|
|
775
|
+
"light": "400 57px / 64px Roboto"
|
|
776
|
+
}
|
|
777
|
+
},
|
|
778
|
+
{
|
|
779
|
+
"cssVariable": "--mat-sys-display-medium",
|
|
780
|
+
"source": "mat-sys",
|
|
781
|
+
"role": "typography",
|
|
782
|
+
"intents": [
|
|
783
|
+
"display medium typography",
|
|
784
|
+
"45px display"
|
|
785
|
+
],
|
|
786
|
+
"description": "Display medium — large heroes. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
787
|
+
"defaults": {
|
|
788
|
+
"light": "400 45px / 52px Roboto"
|
|
789
|
+
}
|
|
790
|
+
},
|
|
791
|
+
{
|
|
792
|
+
"cssVariable": "--mat-sys-display-small",
|
|
793
|
+
"source": "mat-sys",
|
|
794
|
+
"role": "typography",
|
|
795
|
+
"intents": [
|
|
796
|
+
"display small typography",
|
|
797
|
+
"36px display"
|
|
798
|
+
],
|
|
799
|
+
"description": "Display small — page titles for split-screen layouts. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
800
|
+
"defaults": {
|
|
801
|
+
"light": "400 36px / 44px Roboto"
|
|
802
|
+
}
|
|
803
|
+
},
|
|
804
|
+
{
|
|
805
|
+
"cssVariable": "--mat-sys-headline-large",
|
|
806
|
+
"source": "mat-sys",
|
|
807
|
+
"role": "typography",
|
|
808
|
+
"intents": [
|
|
809
|
+
"headline large",
|
|
810
|
+
"h1 typography",
|
|
811
|
+
"32px headline"
|
|
812
|
+
],
|
|
813
|
+
"description": "Headline large — h1 equivalents. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
814
|
+
"defaults": {
|
|
815
|
+
"light": "400 32px / 40px Roboto"
|
|
816
|
+
}
|
|
817
|
+
},
|
|
818
|
+
{
|
|
819
|
+
"cssVariable": "--mat-sys-headline-medium",
|
|
820
|
+
"source": "mat-sys",
|
|
821
|
+
"role": "typography",
|
|
822
|
+
"intents": [
|
|
823
|
+
"headline medium",
|
|
824
|
+
"h2 typography",
|
|
825
|
+
"28px headline"
|
|
826
|
+
],
|
|
827
|
+
"description": "Headline medium — h2 equivalents. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
828
|
+
"defaults": {
|
|
829
|
+
"light": "400 28px / 36px Roboto"
|
|
830
|
+
}
|
|
831
|
+
},
|
|
832
|
+
{
|
|
833
|
+
"cssVariable": "--mat-sys-headline-small",
|
|
834
|
+
"source": "mat-sys",
|
|
835
|
+
"role": "typography",
|
|
836
|
+
"intents": [
|
|
837
|
+
"headline small",
|
|
838
|
+
"h3 typography",
|
|
839
|
+
"24px headline"
|
|
840
|
+
],
|
|
841
|
+
"description": "Headline small — h3 equivalents. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
842
|
+
"defaults": {
|
|
843
|
+
"light": "400 24px / 32px Roboto"
|
|
844
|
+
}
|
|
845
|
+
},
|
|
846
|
+
{
|
|
847
|
+
"cssVariable": "--mat-sys-title-large",
|
|
848
|
+
"source": "mat-sys",
|
|
849
|
+
"role": "typography",
|
|
850
|
+
"intents": [
|
|
851
|
+
"title large",
|
|
852
|
+
"section header",
|
|
853
|
+
"22px title"
|
|
854
|
+
],
|
|
855
|
+
"description": "Title large — section headers. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
856
|
+
"defaults": {
|
|
857
|
+
"light": "500 22px / 28px Roboto"
|
|
858
|
+
}
|
|
859
|
+
},
|
|
860
|
+
{
|
|
861
|
+
"cssVariable": "--mat-sys-title-medium",
|
|
862
|
+
"source": "mat-sys",
|
|
863
|
+
"role": "typography",
|
|
864
|
+
"intents": [
|
|
865
|
+
"title medium",
|
|
866
|
+
"card header",
|
|
867
|
+
"16px title"
|
|
868
|
+
],
|
|
869
|
+
"description": "Title medium — card headers. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
870
|
+
"defaults": {
|
|
871
|
+
"light": "500 16px / 24px Roboto"
|
|
872
|
+
}
|
|
873
|
+
},
|
|
874
|
+
{
|
|
875
|
+
"cssVariable": "--mat-sys-title-small",
|
|
876
|
+
"source": "mat-sys",
|
|
877
|
+
"role": "typography",
|
|
878
|
+
"intents": [
|
|
879
|
+
"title small",
|
|
880
|
+
"compact title",
|
|
881
|
+
"14px title"
|
|
882
|
+
],
|
|
883
|
+
"description": "Title small — compact headings. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
884
|
+
"defaults": {
|
|
885
|
+
"light": "500 14px / 20px Roboto"
|
|
886
|
+
}
|
|
887
|
+
},
|
|
888
|
+
{
|
|
889
|
+
"cssVariable": "--mat-sys-body-large",
|
|
890
|
+
"source": "mat-sys",
|
|
891
|
+
"role": "typography",
|
|
892
|
+
"intents": [
|
|
893
|
+
"body large",
|
|
894
|
+
"16px body text"
|
|
895
|
+
],
|
|
896
|
+
"description": "Body large — primary reading text. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
897
|
+
"defaults": {
|
|
898
|
+
"light": "400 16px / 24px Roboto"
|
|
899
|
+
}
|
|
900
|
+
},
|
|
901
|
+
{
|
|
902
|
+
"cssVariable": "--mat-sys-body-medium",
|
|
903
|
+
"source": "mat-sys",
|
|
904
|
+
"role": "typography",
|
|
905
|
+
"intents": [
|
|
906
|
+
"body medium",
|
|
907
|
+
"default body text",
|
|
908
|
+
"14px body text"
|
|
909
|
+
],
|
|
910
|
+
"description": "Body medium — default body text. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
911
|
+
"defaults": {
|
|
912
|
+
"light": "400 14px / 20px Roboto"
|
|
913
|
+
}
|
|
914
|
+
},
|
|
915
|
+
{
|
|
916
|
+
"cssVariable": "--mat-sys-body-small",
|
|
917
|
+
"source": "mat-sys",
|
|
918
|
+
"role": "typography",
|
|
919
|
+
"intents": [
|
|
920
|
+
"body small",
|
|
921
|
+
"12px body text",
|
|
922
|
+
"supporting body"
|
|
923
|
+
],
|
|
924
|
+
"description": "Body small — supporting copy. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
925
|
+
"defaults": {
|
|
926
|
+
"light": "400 12px / 16px Roboto"
|
|
927
|
+
}
|
|
928
|
+
},
|
|
929
|
+
{
|
|
930
|
+
"cssVariable": "--mat-sys-label-large",
|
|
931
|
+
"source": "mat-sys",
|
|
932
|
+
"role": "typography",
|
|
933
|
+
"intents": [
|
|
934
|
+
"label large",
|
|
935
|
+
"button label typography",
|
|
936
|
+
"14px label"
|
|
937
|
+
],
|
|
938
|
+
"description": "Label large — button labels. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
939
|
+
"defaults": {
|
|
940
|
+
"light": "500 14px / 20px Roboto"
|
|
941
|
+
}
|
|
942
|
+
},
|
|
943
|
+
{
|
|
944
|
+
"cssVariable": "--mat-sys-label-medium",
|
|
945
|
+
"source": "mat-sys",
|
|
946
|
+
"role": "typography",
|
|
947
|
+
"intents": [
|
|
948
|
+
"label medium",
|
|
949
|
+
"12px label"
|
|
950
|
+
],
|
|
951
|
+
"description": "Label medium — supporting labels. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
952
|
+
"defaults": {
|
|
953
|
+
"light": "500 12px / 16px Roboto"
|
|
954
|
+
}
|
|
955
|
+
},
|
|
956
|
+
{
|
|
957
|
+
"cssVariable": "--mat-sys-label-small",
|
|
958
|
+
"source": "mat-sys",
|
|
959
|
+
"role": "typography",
|
|
960
|
+
"intents": [
|
|
961
|
+
"label small",
|
|
962
|
+
"11px label",
|
|
963
|
+
"tiny label"
|
|
964
|
+
],
|
|
965
|
+
"description": "Label small — tiniest labels. Sub-tokens: -size, -weight, -line-height, -tracking, -font.",
|
|
966
|
+
"defaults": {
|
|
967
|
+
"light": "500 11px / 16px Roboto"
|
|
968
|
+
}
|
|
969
|
+
},
|
|
970
|
+
{
|
|
971
|
+
"cssVariable": "--mat-sys-easing-standard",
|
|
972
|
+
"source": "mat-sys",
|
|
973
|
+
"role": "motion",
|
|
974
|
+
"intents": [
|
|
975
|
+
"standard easing",
|
|
976
|
+
"default ease",
|
|
977
|
+
"cubic-bezier easing"
|
|
978
|
+
],
|
|
979
|
+
"description": "Standard easing curve.",
|
|
980
|
+
"defaults": {
|
|
981
|
+
"light": "cubic-bezier(0.2, 0, 0, 1)"
|
|
982
|
+
}
|
|
983
|
+
},
|
|
984
|
+
{
|
|
985
|
+
"cssVariable": "--mat-sys-easing-emphasized",
|
|
986
|
+
"source": "mat-sys",
|
|
987
|
+
"role": "motion",
|
|
988
|
+
"intents": [
|
|
989
|
+
"emphasized easing",
|
|
990
|
+
"expressive ease"
|
|
991
|
+
],
|
|
992
|
+
"description": "Emphasized easing curve — for prominent transitions.",
|
|
993
|
+
"defaults": {
|
|
994
|
+
"light": "cubic-bezier(0.2, 0, 0, 1)"
|
|
995
|
+
}
|
|
996
|
+
},
|
|
997
|
+
{
|
|
998
|
+
"cssVariable": "--mat-sys-easing-emphasized-decelerate",
|
|
999
|
+
"source": "mat-sys",
|
|
1000
|
+
"role": "motion",
|
|
1001
|
+
"intents": [
|
|
1002
|
+
"emphasized decelerated easing"
|
|
1003
|
+
],
|
|
1004
|
+
"description": "Emphasized decelerate easing curve.",
|
|
1005
|
+
"defaults": {
|
|
1006
|
+
"light": "cubic-bezier(0.05, 0.7, 0.1, 1)"
|
|
1007
|
+
}
|
|
1008
|
+
},
|
|
1009
|
+
{
|
|
1010
|
+
"cssVariable": "--mat-sys-easing-emphasized-accelerate",
|
|
1011
|
+
"source": "mat-sys",
|
|
1012
|
+
"role": "motion",
|
|
1013
|
+
"intents": [
|
|
1014
|
+
"emphasized accelerated easing"
|
|
1015
|
+
],
|
|
1016
|
+
"description": "Emphasized accelerate easing curve.",
|
|
1017
|
+
"defaults": {
|
|
1018
|
+
"light": "cubic-bezier(0.3, 0, 0.8, 0.15)"
|
|
1019
|
+
}
|
|
1020
|
+
},
|
|
1021
|
+
{
|
|
1022
|
+
"cssVariable": "--mat-sys-motion-duration-short1",
|
|
1023
|
+
"source": "mat-sys",
|
|
1024
|
+
"role": "motion",
|
|
1025
|
+
"intents": [
|
|
1026
|
+
"motion duration short",
|
|
1027
|
+
"quick animation duration"
|
|
1028
|
+
],
|
|
1029
|
+
"description": "Short duration tier 1 — small element transitions.",
|
|
1030
|
+
"defaults": {
|
|
1031
|
+
"light": "50ms"
|
|
1032
|
+
}
|
|
1033
|
+
},
|
|
1034
|
+
{
|
|
1035
|
+
"cssVariable": "--mat-sys-motion-duration-medium2",
|
|
1036
|
+
"source": "mat-sys",
|
|
1037
|
+
"role": "motion",
|
|
1038
|
+
"intents": [
|
|
1039
|
+
"motion duration medium",
|
|
1040
|
+
"standard animation duration"
|
|
1041
|
+
],
|
|
1042
|
+
"description": "Medium duration tier 2 — standard transitions.",
|
|
1043
|
+
"defaults": {
|
|
1044
|
+
"light": "300ms"
|
|
1045
|
+
}
|
|
1046
|
+
},
|
|
1047
|
+
{
|
|
1048
|
+
"cssVariable": "--mat-sys-motion-duration-long2",
|
|
1049
|
+
"source": "mat-sys",
|
|
1050
|
+
"role": "motion",
|
|
1051
|
+
"intents": [
|
|
1052
|
+
"motion duration long",
|
|
1053
|
+
"long animation duration"
|
|
1054
|
+
],
|
|
1055
|
+
"description": "Long duration tier 2 — large element transitions.",
|
|
1056
|
+
"defaults": {
|
|
1057
|
+
"light": "500ms"
|
|
1058
|
+
}
|
|
1059
|
+
}
|
|
1060
|
+
]
|
|
1061
|
+
}
|