@muraldevkit/ds-foundation 2.18.0 → 2.19.0-dev-rMoq.1

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.
Files changed (40) hide show
  1. package/README.md +10 -5
  2. package/dist/fonts.css +0 -1
  3. package/dist/fonts.min.css +2 -1
  4. package/dist/foundation.css +681 -504
  5. package/dist/foundation.css.map +1 -1
  6. package/dist/foundation.min.css +2 -1
  7. package/dist/foundation.min.css.map +1 -1
  8. package/dist/tokens/contextual-variables/border.json +134 -0
  9. package/dist/tokens/contextual-variables/color.json +352 -0
  10. package/dist/tokens/contextual-variables/shadows.json +30 -0
  11. package/dist/tokens/contextual-variables/spacing.json +120 -0
  12. package/dist/tokens/contextual-variables/typography.json +232 -0
  13. package/dist/tokens/global-variables/border.json +61 -0
  14. package/dist/tokens/global-variables/color.json +636 -0
  15. package/dist/tokens/global-variables/motion.json +63 -0
  16. package/dist/tokens/global-variables/shadows.json +86 -0
  17. package/dist/tokens/global-variables/spacing.json +60 -0
  18. package/dist/tokens/global-variables/typography.json +208 -0
  19. package/package.json +5 -15
  20. package/src/styles/_tokens.scss +781 -0
  21. package/src/styles/contextual-variables/index.scss +0 -3
  22. package/src/styles/contextual-variables/spacing.scss +8 -169
  23. package/src/styles/contextual-variables/typography.scss +9 -374
  24. package/src/styles/index.scss +10 -10
  25. package/dist/tokens/border.json +0 -39
  26. package/dist/tokens/color.json +0 -387
  27. package/dist/tokens/motion.json +0 -41
  28. package/dist/tokens/shadows.json +0 -21
  29. package/dist/tokens/spacing.json +0 -46
  30. package/dist/tokens/typography.json +0 -152
  31. package/src/styles/contextual-variables/border.scss +0 -200
  32. package/src/styles/contextual-variables/color.scss +0 -519
  33. package/src/styles/contextual-variables/shadows.scss +0 -44
  34. package/src/styles/global-variables/border.scss +0 -65
  35. package/src/styles/global-variables/color.scss +0 -734
  36. package/src/styles/global-variables/index.scss +0 -7
  37. package/src/styles/global-variables/motion.scss +0 -65
  38. package/src/styles/global-variables/shadows.scss +0 -39
  39. package/src/styles/global-variables/spacing.scss +0 -79
  40. package/src/styles/global-variables/typography.scss +0 -203
package/dist/foundation.css CHANGED
@@ -1,501 +1,694 @@
1
- /* Border Radius Tokens */
2
- /* Border Width Tokens */
3
- :root {
4
- --mrl-radii-01: 2px;
5
- --mrl-radii-02: 4px;
6
- --mrl-radii-03: 8px;
7
- --mrl-radii-04: 12px;
8
- --mrl-radii-05: 16px;
9
- --mrl-radii-06: 24px;
10
- --mrl-radii-07: 32px;
11
- --mrl-radii-08: 40px;
12
- --mrl-stroke-01: 2px;
13
- --mrl-stroke-02: 2px;
14
- --mrl-stroke-03: 2px;
15
- }
16
-
17
- :root {
18
- --mrl-gray-10: 249, 250, 250;
19
- --mrl-gray-20: 236, 240, 244;
20
- --mrl-gray-30: 220, 225, 229;
21
- --mrl-gray-40: 184, 193, 204;
22
- --mrl-gray-50: 155, 168, 182;
23
- --mrl-gray-60: 129, 143, 156;
24
- --mrl-gray-70: 99, 112, 126;
25
- --mrl-gray-80: 72, 82, 91;
26
- --mrl-gray-90: 40, 46, 52;
27
- --mrl-gray-100: 27, 31, 34;
28
- --mrl-blue-10: 247, 250, 255;
29
- --mrl-blue-20: 230, 244, 254;
30
- --mrl-blue-30: 205, 230, 254;
31
- --mrl-blue-40: 180, 217, 253;
32
- --mrl-blue-50: 131, 191, 252;
33
- --mrl-blue-60: 81, 143, 251;
34
- --mrl-blue-70: 48, 106, 227;
35
- --mrl-blue-80: 49, 99, 201;
36
- --mrl-blue-90: 42, 86, 176;
37
- --mrl-blue-100: 30, 61, 125;
38
- --mrl-red-10: 255, 235, 235;
39
- --mrl-red-20: 255, 214, 214;
40
- --mrl-red-30: 255, 204, 204;
41
- --mrl-red-40: 255, 179, 179;
42
- --mrl-red-50: 255, 128, 128;
43
- --mrl-red-60: 255, 75, 75;
44
- --mrl-red-70: 224, 41, 53;
45
- --mrl-red-80: 179, 33, 42;
46
- --mrl-red-90: 140, 26, 33;
47
- --mrl-red-100: 115, 21, 27;
48
- --mrl-tomato-10: 251, 224, 223;
49
- --mrl-tomato-20: 253, 216, 216;
50
- --mrl-tomato-30: 246, 193, 194;
51
- --mrl-tomato-40: 240, 148, 151;
52
- --mrl-tomato-50: 227, 99, 103;
53
- --mrl-tomato-60: 224, 72, 77;
54
- --mrl-tomato-70: 212, 58, 64;
55
- --mrl-tomato-80: 205, 45, 51;
56
- --mrl-tomato-90: 190, 39, 48;
57
- --mrl-tomato-100: 157, 32, 40;
58
- --mrl-tomato-desaturated: 229, 179, 182;
59
- --mrl-orange-10: 255, 231, 204;
60
- --mrl-orange-20: 254, 226, 194;
61
- --mrl-orange-30: 252, 218, 192;
62
- --mrl-orange-40: 245, 199, 146;
63
- --mrl-orange-50: 244, 158, 72;
64
- --mrl-orange-60: 229, 121, 26;
65
- --mrl-orange-70: 201, 79, 19;
66
- --mrl-orange-80: 191, 76, 18;
67
- --mrl-orange-90: 178, 68, 1;
68
- --mrl-orange-100: 147, 57, 1;
69
- --mrl-orange-desaturated: 235, 186, 142;
70
- --mrl-lemon-10: 250, 241, 193;
71
- --mrl-lemon-20: 249, 240, 190;
72
- --mrl-lemon-30: 249, 237, 174;
73
- --mrl-lemon-40: 245, 226, 127;
74
- --mrl-lemon-50: 228, 203, 73;
75
- --mrl-lemon-60: 182, 158, 35;
76
- --mrl-lemon-70: 142, 116, 23;
77
- --mrl-lemon-80: 132, 108, 21;
78
- --mrl-lemon-90: 122, 99, 16;
79
- --mrl-lemon-100: 104, 84, 13;
80
- --mrl-lemon-desaturated: 228, 215, 149;
81
- --mrl-melon-10: 227, 248, 216;
82
- --mrl-melon-20: 214, 237, 202;
83
- --mrl-melon-30: 190, 226, 171;
84
- --mrl-melon-40: 161, 214, 135;
85
- --mrl-melon-50: 122, 185, 91;
86
- --mrl-melon-60: 93, 160, 59;
87
- --mrl-melon-70: 75, 132, 46;
88
- --mrl-melon-80: 69, 121, 42;
89
- --mrl-melon-90: 71, 114, 49;
90
- --mrl-melon-100: 60, 96, 41;
91
- --mrl-melon-desaturated: 169, 208, 178;
92
- --mrl-mint-10: 220, 242, 249;
93
- --mrl-mint-20: 207, 234, 242;
94
- --mrl-mint-30: 177, 217, 231;
95
- --mrl-mint-40: 138, 199, 219;
96
- --mrl-mint-50: 89, 181, 212;
97
- --mrl-mint-60: 36, 150, 188;
98
- --mrl-mint-70: 9, 126, 165;
99
- --mrl-mint-80: 8, 118, 155;
100
- --mrl-mint-90: 1, 114, 152;
101
- --mrl-mint-100: 1, 99, 132;
102
- --mrl-mint-desaturated: 162, 203, 216;
103
- --mrl-blueberry-10: 215, 228, 255;
104
- --mrl-blueberry-20: 202, 219, 252;
105
- --mrl-blueberry-30: 187, 209, 251;
106
- --mrl-blueberry-40: 139, 175, 249;
107
- --mrl-blueberry-50: 105, 146, 226;
108
- --mrl-blueberry-60: 91, 131, 210;
109
- --mrl-blueberry-70: 64, 110, 203;
110
- --mrl-blueberry-80: 32, 89, 202;
111
- --mrl-blueberry-90: 28, 77, 175;
112
- --mrl-blueberry-100: 24, 66, 149;
113
- --mrl-blueberry-desaturated: 173, 199, 224;
114
- --mrl-grape-10: 222, 220, 249;
115
- --mrl-grape-20: 216, 216, 249;
116
- --mrl-grape-30: 207, 207, 247;
117
- --mrl-grape-40: 162, 163, 240;
118
- --mrl-grape-50: 142, 129, 228;
119
- --mrl-grape-60: 132, 108, 224;
120
- --mrl-grape-70: 114, 86, 219;
121
- --mrl-grape-80: 94, 62, 214;
122
- --mrl-grape-90: 74, 58, 182;
123
- --mrl-grape-100: 63, 49, 155;
124
- --mrl-grape-desaturated: 189, 187, 221;
125
- --mrl-dragonfruit-10: 255, 225, 243;
126
- --mrl-dragonfruit-20: 246, 213, 243;
127
- --mrl-dragonfruit-30: 230, 188, 226;
128
- --mrl-dragonfruit-40: 216, 151, 209;
129
- --mrl-dragonfruit-50: 202, 114, 193;
130
- --mrl-dragonfruit-60: 196, 100, 186;
131
- --mrl-dragonfruit-70: 186, 74, 171;
132
- --mrl-dragonfruit-80: 175, 75, 168;
133
- --mrl-dragonfruit-90: 163, 67, 157;
134
- --mrl-dragonfruit-100: 141, 58, 136;
135
- --mrl-dragonfruit-desaturated: 232, 201, 221;
136
- --mrl-truffle-10: 236, 239, 238;
137
- --mrl-truffle-20: 219, 225, 223;
138
- --mrl-truffle-30: 197, 206, 203;
139
- --mrl-truffle-40: 170, 182, 178;
140
- --mrl-truffle-50: 131, 149, 144;
141
- --mrl-truffle-60: 108, 127, 121;
142
- --mrl-truffle-70: 96, 113, 108;
143
- --mrl-truffle-80: 80, 98, 93;
144
- --mrl-truffle-90: 70, 83, 79;
145
- --mrl-truffle-100: 56, 66, 63;
146
- --mrl-truffle-desaturated: 196, 202, 200;
147
- --mrl-white: 255, 255, 255;
148
- --mrl-black: 0, 0, 0;
149
- --mrl-status-info: 49, 99, 201;
150
- --mrl-status-info-light: 236, 242, 254;
151
- --mrl-status-success: 0, 132, 63;
152
- --mrl-status-success-light: 243, 250, 235;
153
- --mrl-status-warning: 255, 170, 1;
154
- --mrl-status-warning-light: 254, 246, 231;
155
- --mrl-status-error: 179, 33, 42;
156
- --mrl-status-error-light: 252, 233, 235;
157
- --mrl-white-opacity-02: rgba(var(--mrl-white), 0.24);
158
- --mrl-white-opacity-03: rgba(var(--mrl-white), 0.3);
159
- --mrl-white-opacity-04: rgba(var(--mrl-white), 0.4);
160
- --mrl-white-opacity-06: rgba(var(--mrl-white), 0.6);
161
- --mrl-white-opacity-08: rgba(var(--mrl-white), 0.8);
162
- --mrl-status-private: var(--mrl-gray-100);
163
- --mrl-black-opacity-00: rgba(42, 82, 121, 0.06);
164
- --mrl-black-opacity-01: rgba(42, 82, 121, 0.12);
165
- --mrl-black-opacity-02: rgba(21, 57, 75, 0.24);
166
- --mrl-black-opacity-03: rgba(11, 41, 70, 0.32);
167
- --mrl-black-opacity-05: rgba(31, 51, 71, 0.56);
168
- --mrl-black-opacity-06: rgba(21, 41, 60, 0.64);
169
- --mrl-black-opacity-08: rgba(24, 36, 47, 0.8);
170
- }
171
-
172
- :root {
173
- /* Motion - Timing */
174
- --mrl-timing-m1: cubic-bezier(0.17, 0, 0, 1);
175
- --mrl-timing-m1r: cubic-bezier(1, 0, 0.83, 1);
176
- --mrl-timing-m2: cubic-bezier(0, 0.5, 0, 1);
177
- --mrl-timing-m3: cubic-bezier(0.33, 0, 0.67, 1);
178
- --mrl-timing-m4: cubic-bezier(0, 0, 0, 1);
179
- /* Motion - Duration */
180
- --mrl-duration-01: 17ms;
181
- --mrl-duration-02: 167ms;
182
- --mrl-duration-03: 333ms;
183
- --mrl-duration-04: 667ms;
184
- /* Motion - Distance */
185
- --mrl-distance-01: 4px;
186
- --mrl-distance-02: 8px;
187
- }
188
-
1
+ @charset "UTF-8";
189
2
  /**
190
- * Please note!
191
- * If you make a change to these tokens, please make sure that the
192
- * mrl-shadow mixin is changed as well. We need the contextual tokens
193
- * to map to the drop-shadow filter!
194
- */
195
- /* Shadow/Elevation Tokens */
196
- :root {
197
- --mrl-shadow-01: 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 4px 4px 0 rgba(42, 82, 121, 0.04);
198
- --mrl-shadow-02: 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 6px 8px 0 rgba(42, 82, 121, 0.04);
199
- --mrl-shadow-03: 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 24px 20px 0 rgba(42, 82, 121, 0.08);
200
- --mrl-shadow-interactive-01: 0 4px 5px 0 rgba(24, 36, 47, 0.08);
201
- --mrl-shadow-interactive-02: 0 12px 20px 0px rgba(27, 57, 75, 0.2);
202
- }
203
-
204
- /* Spacing Tokens */
205
- :root {
206
- --mrl-spacing-01: calc(2 / var(--mrl-baseline) * 1rem);
207
- --mrl-spacing-02: calc(4 / var(--mrl-baseline) * 1rem);
208
- --mrl-spacing-03: calc(8 / var(--mrl-baseline) * 1rem);
209
- --mrl-spacing-04: calc(12 / var(--mrl-baseline) * 1rem);
210
- --mrl-spacing-05: calc(16 / var(--mrl-baseline) * 1rem);
211
- --mrl-spacing-06: calc(20 / var(--mrl-baseline) * 1rem);
212
- --mrl-spacing-07: calc(24 / var(--mrl-baseline) * 1rem);
213
- --mrl-spacing-08: calc(32 / var(--mrl-baseline) * 1rem);
214
- --mrl-spacing-09: calc(40 / var(--mrl-baseline) * 1rem);
215
- --mrl-spacing-10: calc(48 / var(--mrl-baseline) * 1rem);
216
- --mrl-spacing-11: calc(64 / var(--mrl-baseline) * 1rem);
217
- --mrl-spacing-12: calc(80 / var(--mrl-baseline) * 1rem);
218
- --mrl-spacing-13: calc(96 / var(--mrl-baseline) * 1rem);
219
- --mrl-spacing-14: calc(160 / var(--mrl-baseline) * 1rem);
220
- }
221
-
222
- /* Font Size Tokens */
223
- /* Line-height Tokens */
224
- /* Letter Spacing Tokens */
225
- /* Font Weight Tokens */
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
226
5
  :root {
227
- --mrl-baseline: 16;
228
- --mrl-font-family-01: abcsocial;
229
- --mrl-font-family-02: stkbureau;
230
- /* Typography - Font Size */
231
- --mrl-font-size-01: calc(11 / var(--mrl-baseline) * 1rem);
232
- --mrl-font-size-02: calc(12 / var(--mrl-baseline) * 1rem);
233
- --mrl-font-size-03: calc(14 / var(--mrl-baseline) * 1rem);
234
- --mrl-font-size-04: calc(16 / var(--mrl-baseline) * 1rem);
235
- --mrl-font-size-05: calc(18 / var(--mrl-baseline) * 1rem);
236
- --mrl-font-size-06: calc(20 / var(--mrl-baseline) * 1rem);
237
- --mrl-font-size-07: calc(24 / var(--mrl-baseline) * 1rem);
238
- --mrl-font-size-08: calc(32 / var(--mrl-baseline) * 1rem);
239
- --mrl-font-size-09: calc(40 / var(--mrl-baseline) * 1rem);
240
- --mrl-font-size-10: calc(48 / var(--mrl-baseline) * 1rem);
241
- --mrl-font-size-11: calc(64 / var(--mrl-baseline) * 1rem);
242
- --mrl-font-size-12: calc(80 / var(--mrl-baseline) * 1rem);
243
- --mrl-font-size-13: calc(96 / var(--mrl-baseline) * 1rem);
244
- --mrl-font-size-14: calc(120 / var(--mrl-baseline) * 1rem);
245
- /* Typography - Line Height */
246
- --mrl-line-height-01: 0.875;
247
- --mrl-line-height-02: 1;
248
- --mrl-line-height-03: 1.125;
249
- --mrl-line-height-04: 1.167;
250
- --mrl-line-height-05: 1.25;
251
- --mrl-line-height-06: 1.333;
252
- --mrl-line-height-07: 1.4;
253
- --mrl-line-height-08: 1.429;
254
- --mrl-line-height-09: 1.5;
255
- --mrl-line-height-10: 1.56;
256
- --mrl-line-height-11: 1.75;
257
- --mrl-line-height-12: 2;
258
- /* Typography - Letter Spacing */
259
- --mrl-letter-spacing-01: -2%;
260
- --mrl-letter-spacing-02: -1%;
261
- --mrl-letter-spacing-03: 0%;
262
- --mrl-letter-spacing-04: 1%;
263
- --mrl-letter-spacing-05: 2%;
264
- /* Typography - Font Weight */
265
- --mrl-font-weight-01: 400;
266
- --mrl-font-weight-02: 500;
267
- --mrl-font-weight-03: 600;
268
- --mrl-font-weight-04: 700;
269
- --mrl-font-weight-05: 800;
270
- }
271
-
272
- :root {
273
- /* Color */
274
- --mrl-color-focus: rgba(var(--mrl-blue-70), 1);
275
- --mrl-color-focus-inverse: rgba(var(--mrl-white), 1);
276
- --mrl-color-shadows: rgba(var(--mrl-black), 1);
277
- --mrl-color-brand: rgba(var(--mrl-red-70), 1);
278
- --mrl-color-brand-hover: rgba(var(--mrl-red-80), 1);
279
- --mrl-color-brand-active: rgba(var(--mrl-red-90), 1);
280
- --mrl-color-accent: rgba(var(--mrl-blue-70), 1);
281
- --mrl-color-skeleton: rgba(var(--mrl-gray-20), 1);
282
- --mrl-color-skeleton-inverse: rgba(var(--mrl-white), 1);
283
- --mrl-color-background: rgba(var(--mrl-white), 1);
284
- --mrl-color-background-secondary: rgba(var(--mrl-gray-80), 1);
285
- --mrl-color-background-decorative: rgba(var(--mrl-gray-20), 1);
286
- --mrl-color-background-highlight-secondary: rgba(var(--mrl-blue-10), 1);
287
- --mrl-color-background-info: rgba(var(--mrl-status-info), 1);
288
- --mrl-color-background-info-light: rgba(var(--mrl-status-info-light), 1);
289
- --mrl-color-background-success: rgba(var(--mrl-status-success), 1);
290
- --mrl-color-background-success-light: rgba(var(--mrl-status-success-light), 1);
291
- --mrl-color-background-warning: rgba(var(--mrl-status-warning), 1);
292
- --mrl-color-background-warning-light: rgba(var(--mrl-status-warning-light), 1);
293
- --mrl-color-background-error: rgba(var(--mrl-status-error), 1);
294
- --mrl-color-background-error-light: rgba(var(--mrl-status-error-light), 1);
295
- --mrl-color-background-private: rgba(var(--mrl-gray-100), 1);
296
- --mrl-color-background-inverse: rgba(var(--mrl-gray-100), 1);
297
- --mrl-color-background-inverse-hover: rgba(var(--mrl-gray-90), 1);
298
- --mrl-color-background-disabled: rgba(var(--mrl-gray-40), 1);
299
- --mrl-color-background-highlight-hover: rgba(var(--mrl-gray-20), 1);
300
- --mrl-color-background-highlight-active: rgba(var(--mrl-gray-90), 1);
301
- --mrl-color-background-highlight-selected: rgba(var(--mrl-gray-100), 1);
302
- --mrl-color-background-highlight-emph-active: rgba(var(--mrl-gray-30), 1);
303
- --mrl-color-line: rgba(var(--mrl-gray-70), 1);
304
- --mrl-color-line-hover: rgba(var(--mrl-gray-90), 1);
305
- --mrl-color-line-active: rgba(var(--mrl-gray-100), 1);
306
- --mrl-color-line-selected: rgba(var(--mrl-gray-90), 1);
307
- --mrl-color-line-disabled: rgba(var(--mrl-gray-40), 1);
308
- --mrl-color-line-highlight-secondary: rgba(var(--mrl-blue-20), 1);
309
- --mrl-color-line-divider: rgba(var(--mrl-gray-20), 1);
310
- --mrl-color-line-divider-inverse: rgba(var(--mrl-gray-80), 1);
311
- --mrl-color-line-emph: rgba(var(--mrl-gray-20), 1);
312
- --mrl-color-line-emph-hover: rgba(var(--mrl-gray-90), 1);
313
- --mrl-color-line-emph-active: rgba(var(--mrl-black), 1);
314
- --mrl-color-line-inverse: rgba(var(--mrl-white), 1);
315
- --mrl-color-line-inverse-disabled: rgba(var(--mrl-white), 1);
316
- --mrl-color-icon-light: rgba(var(--mrl-gray-70), 1);
317
- --mrl-color-icon-disabled: rgba(var(--mrl-gray-40), 1);
318
- --mrl-color-icon-inverse: rgba(var(--mrl-white), 1);
319
- --mrl-color-input-icon-default: rgba(var(--mrl-gray-70), 1);
320
- --mrl-color-text: rgba(var(--mrl-gray-80), 1);
321
- --mrl-color-text-hover: rgba(var(--mrl-gray-90), 1);
322
- --mrl-color-text-active: rgba(var(--mrl-gray-90), 1);
323
- --mrl-color-text-selected: rgba(var(--mrl-gray-100), 1);
324
- --mrl-color-text-disabled: rgba(var(--mrl-gray-40), 1);
325
- --mrl-color-text-disabled-inverse: rgba(var(--mrl-white), 1);
326
- --mrl-color-text-emph: rgba(var(--mrl-gray-80), 1);
327
- --mrl-color-text-emph-hover: rgba(var(--mrl-gray-90), 1);
328
- --mrl-color-text-emph-active: rgba(var(--mrl-black), 1);
329
- --mrl-color-text-highlight: rgba(var(--mrl-gray-80), 1);
330
- --mrl-color-text-highlight-hover: rgba(var(--mrl-gray-90), 1);
331
- --mrl-color-text-highlight-active: rgba(var(--mrl-white), 1);
332
- --mrl-color-text-highlight-selected: rgba(var(--mrl-white), 1);
333
- --mrl-color-text-highlight-emph: rgba(var(--mrl-gray-90), 1);
334
- --mrl-color-text-highlight-emph-hover: rgba(var(--mrl-gray-100), 1);
335
- --mrl-color-text-highlight-emph-active: rgba(var(--mrl-black), 1);
336
- --mrl-color-text-highlight-emph-selected: rgba(var(--mrl-white), 1);
337
- --mrl-color-text-inverse: rgba(var(--mrl-white), 1);
338
- --mrl-color-text-inverse-secondary: rgba(var(--mrl-gray-10), 1);
339
- --mrl-color-text-inverse-hover: rgba(var(--mrl-white), 1);
340
- --mrl-color-text-inverse-active: rgba(var(--mrl-white), 1);
341
- --mrl-color-text-inverse-selected: rgba(var(--mrl-white), 1);
342
- --mrl-color-text-02: rgba(var(--mrl-gray-90), 1);
343
- --mrl-color-text-secondary: rgba(var(--mrl-gray-70), 1);
344
- --mrl-color-text-label: rgba(var(--mrl-gray-100), 1);
345
- --mrl-color-text-heading: rgba(var(--mrl-gray-100), 1);
346
- --mrl-color-text-success: rgba(var(--mrl-status-success), 1);
347
- --mrl-color-text-warning: rgba(var(--mrl-gray-90), 1);
348
- --mrl-color-text-warning-light: rgba(var(--mrl-gray-80), 1);
349
- --mrl-color-text-error: rgba(var(--mrl-status-error), 1);
350
- --mrl-color-text-info: rgba(var(--mrl-status-info), 1);
351
- --mrl-color-text-private: rgba(var(--mrl-gray-100), 1);
352
- --mrl-color-icon-emph-selected: rgba(var(--mrl-gray-100), 1);
353
- /* Color tokens that are set to non-global tokens */
354
- --mrl-color-background-inverse-active: var(--mrl-color-accent);
355
- --mrl-color-background-inverse-selected: var(--mrl-color-accent);
356
- --mrl-color-background-highlight-emph-selected: var(--mrl-color-accent);
357
- --mrl-color-line-emph-selected: var(--mrl-color-accent);
358
- --mrl-color-text-emph-selected: var(--mrl-color-accent);
359
- --mrl-color-background-page: rgb(243, 245, 246);
360
- /* Colors with opacity */
361
- --mrl-color-background-hover-opacity: rgba(var(--mrl-gray-30), 0.2);
362
- --mrl-color-background-inverse-hover-opacity: var(--mrl-black-opacity-02);
6
+ --mrl-radii-01: 2px; /** Border radius token. */
7
+ --mrl-radii-02: 4px; /** Border radius token. */
8
+ --mrl-radii-03: 8px; /** Border radius token. */
9
+ --mrl-radii-04: 12px; /** Border radius token. */
10
+ --mrl-radii-05: 16px; /** Border radius token. */
11
+ --mrl-radii-06: 24px; /** Border radius token. */
12
+ --mrl-radii-07: 32px; /** Border radius token. */
13
+ --mrl-radii-08: 40px; /** Border radius token. */
14
+ --mrl-stroke-01: 2px; /** Border width token. */
15
+ --mrl-stroke-02: 2px; /** Border width token. */
16
+ --mrl-stroke-03: 2px; /** Border width token. */
17
+ --mrl-gray-10: 249, 250, 250; /** Color token. */
18
+ --mrl-gray-20: 236, 240, 244; /** Color token. */
19
+ --mrl-gray-30: 220, 225, 229; /** Color token. */
20
+ --mrl-gray-40: 184, 193, 204; /** Color token. */
21
+ --mrl-gray-50: 155, 168, 182; /** Color token. */
22
+ --mrl-gray-60: 129, 143, 156; /** Color token. */
23
+ --mrl-gray-70: 99, 112, 126; /** Color token. */
24
+ --mrl-gray-80: 72, 82, 91; /** Color token. */
25
+ --mrl-gray-90: 40, 46, 52; /** Color token. */
26
+ --mrl-gray-100: 27, 31, 34; /** Color token. */
27
+ --mrl-blue-10: 247, 250, 255; /** Color token. */
28
+ --mrl-blue-20: 230, 244, 254; /** Color token. */
29
+ --mrl-blue-30: 205, 230, 254; /** Color token. */
30
+ --mrl-blue-40: 180, 217, 253; /** Color token. */
31
+ --mrl-blue-50: 131, 191, 252; /** Color token. */
32
+ --mrl-blue-60: 81, 143, 251; /** Color token. */
33
+ --mrl-blue-70: 48, 106, 227; /** Color token. */
34
+ --mrl-blue-80: 49, 99, 201; /** Color token. */
35
+ --mrl-blue-90: 42, 86, 176; /** Color token. */
36
+ --mrl-blue-100: 30, 61, 125; /** Color token. */
37
+ --mrl-red-10: 255, 235, 235; /** Color token. */
38
+ --mrl-red-20: 255, 214, 214; /** Color token. */
39
+ --mrl-red-30: 255, 204, 204; /** Color token. */
40
+ --mrl-red-40: 255, 179, 179; /** Color token. */
41
+ --mrl-red-50: 255, 128, 128; /** Color token. */
42
+ --mrl-red-60: 255, 75, 75; /** Color token. */
43
+ --mrl-red-70: 224, 41, 53; /** Color token. */
44
+ --mrl-red-80: 179, 33, 42; /** Color token. */
45
+ --mrl-red-90: 140, 26, 33; /** Color token. */
46
+ --mrl-red-100: 115, 21, 27; /** Color token. */
47
+ --mrl-tomato-10: 251, 224, 223; /** Color token. */
48
+ --mrl-tomato-20: 253, 216, 216; /** Color token. */
49
+ --mrl-tomato-30: 246, 193, 194; /** Color token. */
50
+ --mrl-tomato-40: 240, 148, 151; /** Color token. */
51
+ --mrl-tomato-50: 227, 99, 103; /** Color token. */
52
+ --mrl-tomato-60: 224, 72, 77; /** Color token. */
53
+ --mrl-tomato-70: 212, 58, 64; /** Color token. */
54
+ --mrl-tomato-80: 205, 45, 51; /** Color token. */
55
+ --mrl-tomato-90: 190, 39, 48; /** Color token. */
56
+ --mrl-tomato-100: 157, 32, 40; /** Color token. */
57
+ --mrl-tomato-desaturated: 229, 179, 182; /** Color token. */
58
+ --mrl-orange-10: 255, 231, 204; /** Color token. */
59
+ --mrl-orange-20: 254, 226, 194; /** Color token. */
60
+ --mrl-orange-30: 252, 218, 192; /** Color token. */
61
+ --mrl-orange-40: 245, 199, 146; /** Color token. */
62
+ --mrl-orange-50: 244, 158, 72; /** Color token. */
63
+ --mrl-orange-60: 229, 121, 26; /** Color token. */
64
+ --mrl-orange-70: 201, 79, 19; /** Color token. */
65
+ --mrl-orange-80: 191, 76, 18; /** Color token. */
66
+ --mrl-orange-90: 178, 68, 1; /** Color token. */
67
+ --mrl-orange-100: 147, 57, 1; /** Color token. */
68
+ --mrl-orange-desaturated: 235, 186, 142; /** Color token. */
69
+ --mrl-lemon-10: 250, 241, 193; /** Color token. */
70
+ --mrl-lemon-20: 249, 240, 190; /** Color token. */
71
+ --mrl-lemon-30: 249, 237, 174; /** Color token. */
72
+ --mrl-lemon-40: 245, 226, 127; /** Color token. */
73
+ --mrl-lemon-50: 228, 203, 73; /** Color token. */
74
+ --mrl-lemon-60: 182, 158, 35; /** Color token. */
75
+ --mrl-lemon-70: 142, 116, 23; /** Color token. */
76
+ --mrl-lemon-80: 132, 108, 21; /** Color token. */
77
+ --mrl-lemon-90: 122, 99, 16; /** Color token. */
78
+ --mrl-lemon-100: 104, 84, 13; /** Color token. */
79
+ --mrl-lemon-desaturated: 228, 215, 149; /** Color token. */
80
+ --mrl-melon-10: 227, 248, 216; /** Color token. */
81
+ --mrl-melon-20: 214, 237, 202; /** Color token. */
82
+ --mrl-melon-30: 190, 226, 171; /** Color token. */
83
+ --mrl-melon-40: 161, 214, 135; /** Color token. */
84
+ --mrl-melon-50: 122, 185, 91; /** Color token. */
85
+ --mrl-melon-60: 93, 160, 59; /** Color token. */
86
+ --mrl-melon-70: 75, 132, 46; /** Color token. */
87
+ --mrl-melon-80: 69, 121, 42; /** Color token. */
88
+ --mrl-melon-90: 71, 114, 49; /** Color token. */
89
+ --mrl-melon-100: 60, 96, 41; /** Color token. */
90
+ --mrl-melon-desaturated: 169, 208, 178; /** Color token. */
91
+ --mrl-mint-10: 220, 242, 249; /** Color token. */
92
+ --mrl-mint-20: 207, 234, 242; /** Color token. */
93
+ --mrl-mint-30: 177, 217, 231; /** Color token. */
94
+ --mrl-mint-40: 138, 199, 219; /** Color token. */
95
+ --mrl-mint-50: 89, 181, 212; /** Color token. */
96
+ --mrl-mint-60: 36, 150, 188; /** Color token. */
97
+ --mrl-mint-70: 9, 126, 165; /** Color token. */
98
+ --mrl-mint-80: 8, 118, 155; /** Color token. */
99
+ --mrl-mint-90: 1, 114, 152; /** Color token. */
100
+ --mrl-mint-100: 1, 99, 132; /** Color token. */
101
+ --mrl-mint-desaturated: 162, 203, 216; /** Color token. */
102
+ --mrl-blueberry-10: 215, 228, 255; /** Color token. */
103
+ --mrl-blueberry-20: 202, 219, 252; /** Color token. */
104
+ --mrl-blueberry-30: 187, 209, 251; /** Color token. */
105
+ --mrl-blueberry-40: 139, 175, 249; /** Color token. */
106
+ --mrl-blueberry-50: 105, 146, 226; /** Color token. */
107
+ --mrl-blueberry-60: 91, 131, 210; /** Color token. */
108
+ --mrl-blueberry-70: 64, 110, 203; /** Color token. */
109
+ --mrl-blueberry-80: 32, 89, 202; /** Color token. */
110
+ --mrl-blueberry-90: 28, 77, 175; /** Color token. */
111
+ --mrl-blueberry-100: 24, 66, 149; /** Color token. */
112
+ --mrl-blueberry-desaturated: 173, 199, 224; /** Color token. */
113
+ --mrl-grape-10: 222, 220, 249; /** Color token. */
114
+ --mrl-grape-20: 216, 216, 249; /** Color token. */
115
+ --mrl-grape-30: 207, 207, 247; /** Color token. */
116
+ --mrl-grape-40: 162, 163, 240; /** Color token. */
117
+ --mrl-grape-50: 142, 129, 228; /** Color token. */
118
+ --mrl-grape-60: 132, 108, 224; /** Color token. */
119
+ --mrl-grape-70: 114, 86, 219; /** Color token. */
120
+ --mrl-grape-80: 94, 62, 214; /** Color token. */
121
+ --mrl-grape-90: 74, 58, 182; /** Color token. */
122
+ --mrl-grape-100: 63, 49, 155; /** Color token. */
123
+ --mrl-grape-desaturated: 189, 187, 221; /** Color token. */
124
+ --mrl-dragonfruit-10: 255, 225, 243; /** Color token. */
125
+ --mrl-dragonfruit-20: 246, 213, 243; /** Color token. */
126
+ --mrl-dragonfruit-30: 230, 188, 226; /** Color token. */
127
+ --mrl-dragonfruit-40: 216, 151, 209; /** Color token. */
128
+ --mrl-dragonfruit-50: 202, 114, 193; /** Color token. */
129
+ --mrl-dragonfruit-60: 196, 100, 186; /** Color token. */
130
+ --mrl-dragonfruit-70: 186, 74, 171; /** Color token. */
131
+ --mrl-dragonfruit-80: 175, 75, 168; /** Color token. */
132
+ --mrl-dragonfruit-90: 163, 67, 157; /** Color token. */
133
+ --mrl-dragonfruit-100: 141, 58, 136; /** Color token. */
134
+ --mrl-dragonfruit-desaturated: 232, 201, 221; /** Color token. */
135
+ --mrl-truffle-10: 236, 239, 238; /** Color token. */
136
+ --mrl-truffle-20: 219, 225, 223; /** Color token. */
137
+ --mrl-truffle-30: 197, 206, 203; /** Color token. */
138
+ --mrl-truffle-40: 170, 182, 178; /** Color token. */
139
+ --mrl-truffle-50: 131, 149, 144; /** Color token. */
140
+ --mrl-truffle-60: 108, 127, 121; /** Color token. */
141
+ --mrl-truffle-70: 96, 113, 108; /** Color token. */
142
+ --mrl-truffle-80: 80, 98, 93; /** Color token. */
143
+ --mrl-truffle-90: 70, 83, 79; /** Color token. */
144
+ --mrl-truffle-100: 56, 66, 63; /** Color token. */
145
+ --mrl-truffle-desaturated: 196, 202, 200; /** Color token. */
146
+ --mrl-white: 255, 255, 255; /** Color token. */
147
+ --mrl-black: 0, 0, 0; /** Color token. */
148
+ --mrl-status-info: 49, 99, 201; /** Color token. */
149
+ --mrl-status-info-light: 236, 242, 254; /** Color token. */
150
+ --mrl-status-success: 0, 132, 63; /** Color token. */
151
+ --mrl-status-success-light: 243, 250, 235; /** Color token. */
152
+ --mrl-status-warning: 255, 170, 1; /** Color token. */
153
+ --mrl-status-warning-light: 254, 246, 231; /** Color token. */
154
+ --mrl-status-error: 179, 33, 42; /** Color token. */
155
+ --mrl-status-error-light: 252, 233, 235; /** Color token. */
156
+ --mrl-status-private: var(--mrl-gray-100); /** Color token. */
157
+ --mrl-white-opacity-02: rgba(var(--mrl-white), 0.24); /** Color token. */
158
+ --mrl-white-opacity-03: rgba(var(--mrl-white), 0.3); /** Color token. */
159
+ --mrl-white-opacity-04: rgba(var(--mrl-white), 0.4); /** Color token. */
160
+ --mrl-white-opacity-06: rgba(var(--mrl-white), 0.6); /** Color token. */
161
+ --mrl-white-opacity-08: rgba(var(--mrl-white), 0.8); /** Color token. */
162
+ --mrl-black-opacity-00: rgba(42, 82, 121, 0.06); /** Color token. */
163
+ --mrl-black-opacity-01: rgba(42, 82, 121, 0.12); /** Color token. */
164
+ --mrl-black-opacity-02: rgba(21, 57, 75, 0.24); /** Color token. */
165
+ --mrl-black-opacity-03: rgba(11, 41, 70, 0.32); /** Color token. */
166
+ --mrl-black-opacity-05: rgba(31, 51, 71, 0.56); /** Color token. */
167
+ --mrl-black-opacity-06: rgba(21, 41, 60, 0.64); /** Color token. */
168
+ --mrl-black-opacity-08: rgba(24, 36, 47, 0.8); /** Color token. */
169
+ --mrl-timing-m1: cubic-bezier(0.17, 0, 0, 1); /** Motion timing token. */
170
+ --mrl-timing-m1r: cubic-bezier(1, 0, 0.83, 1); /** Motion timing token. */
171
+ --mrl-timing-m2: cubic-bezier(0, 0.5, 0, 1); /** Motion timing token. */
172
+ --mrl-timing-m3: cubic-bezier(0.33, 0, 0.67, 1); /** Motion timing token. */
173
+ --mrl-timing-m4: cubic-bezier(0, 0, 0, 1); /** Motion timing token. */
174
+ --mrl-duration-01: 17ms; /** Motion duration token. */
175
+ --mrl-duration-02: 167ms; /** Motion duration token. */
176
+ --mrl-duration-03: 333ms; /** Motion duration token. */
177
+ --mrl-duration-04: 667ms; /** Motion duration token. */
178
+ --mrl-distance-01: 4px; /** Motion distance token. */
179
+ --mrl-distance-02: 8px; /** Motion distance token. */
180
+ --mrl-shadow-01:
181
+ 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 4px 4px 0 rgba(42, 82, 121, 0.04); /** Shadow token. */
182
+ --mrl-shadow-02:
183
+ 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 6px 8px 0 rgba(42, 82, 121, 0.04); /** Shadow token. */
184
+ --mrl-shadow-03:
185
+ 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 24px 20px 0 rgba(42, 82, 121, 0.08); /** Shadow token. */
186
+ --mrl-shadow-interactive-01: 0 4px 5px 0 rgba(24, 36, 47, 0.08); /** Shadow token. */
187
+ --mrl-shadow-interactive-02: 0 12px 20px 0px rgba(27, 57, 75, 0.2); /** Shadow token. */
188
+ --mrl-spacing-10: calc(48 / var(--mrl-baseline) * 1rem); /** Spacing token. */
189
+ --mrl-spacing-11: calc(64 / var(--mrl-baseline) * 1rem); /** Spacing token. */
190
+ --mrl-spacing-12: calc(80 / var(--mrl-baseline) * 1rem); /** Spacing token. */
191
+ --mrl-spacing-13: calc(96 / var(--mrl-baseline) * 1rem); /** Spacing token. */
192
+ --mrl-spacing-14: calc(160 / var(--mrl-baseline) * 1rem); /** Spacing token. */
193
+ --mrl-spacing-01: calc(2 / var(--mrl-baseline) * 1rem); /** Spacing token. */
194
+ --mrl-spacing-02: calc(4 / var(--mrl-baseline) * 1rem); /** Spacing token. */
195
+ --mrl-spacing-03: calc(8 / var(--mrl-baseline) * 1rem); /** Spacing token. */
196
+ --mrl-spacing-04: calc(12 / var(--mrl-baseline) * 1rem); /** Spacing token. */
197
+ --mrl-spacing-05: calc(16 / var(--mrl-baseline) * 1rem); /** Spacing token. */
198
+ --mrl-spacing-06: calc(20 / var(--mrl-baseline) * 1rem); /** Spacing token. */
199
+ --mrl-spacing-07: calc(24 / var(--mrl-baseline) * 1rem); /** Spacing token. */
200
+ --mrl-spacing-08: calc(32 / var(--mrl-baseline) * 1rem); /** Spacing token. */
201
+ --mrl-spacing-09: calc(40 / var(--mrl-baseline) * 1rem); /** Spacing token. */
202
+ --mrl-baseline: 16; /** Root baseline used by other tokens to compute rem-based sizes via calc(). */
203
+ --mrl-font-family-01: abcsocial; /** Font family token. */
204
+ --mrl-font-family-02: stkbureau; /** Font family token. */
205
+ --mrl-font-size-10: calc(48 / var(--mrl-baseline) * 1rem); /** Font size token. */
206
+ --mrl-font-size-11: calc(64 / var(--mrl-baseline) * 1rem); /** Font size token. */
207
+ --mrl-font-size-12: calc(80 / var(--mrl-baseline) * 1rem); /** Font size token. */
208
+ --mrl-font-size-13: calc(96 / var(--mrl-baseline) * 1rem); /** Font size token. */
209
+ --mrl-font-size-14: calc(120 / var(--mrl-baseline) * 1rem); /** Font size token. */
210
+ --mrl-font-size-01: calc(11 / var(--mrl-baseline) * 1rem); /** Font size token. */
211
+ --mrl-font-size-02: calc(12 / var(--mrl-baseline) * 1rem); /** Font size token. */
212
+ --mrl-font-size-03: calc(14 / var(--mrl-baseline) * 1rem); /** Font size token. */
213
+ --mrl-font-size-04: calc(16 / var(--mrl-baseline) * 1rem); /** Font size token. */
214
+ --mrl-font-size-05: calc(18 / var(--mrl-baseline) * 1rem); /** Font size token. */
215
+ --mrl-font-size-06: calc(20 / var(--mrl-baseline) * 1rem); /** Font size token. */
216
+ --mrl-font-size-07: calc(24 / var(--mrl-baseline) * 1rem); /** Font size token. */
217
+ --mrl-font-size-08: calc(32 / var(--mrl-baseline) * 1rem); /** Font size token. */
218
+ --mrl-font-size-09: calc(40 / var(--mrl-baseline) * 1rem); /** Font size token. */
219
+ --mrl-line-height-10: 1.56; /** Line height token. */
220
+ --mrl-line-height-11: 1.75; /** Line height token. */
221
+ --mrl-line-height-12: 2; /** Line height token. */
222
+ --mrl-line-height-01: 0.875; /** Line height token. */
223
+ --mrl-line-height-02: 1; /** Line height token. */
224
+ --mrl-line-height-03: 1.125; /** Line height token. */
225
+ --mrl-line-height-04: 1.167; /** Line height token. */
226
+ --mrl-line-height-05: 1.25; /** Line height token. */
227
+ --mrl-line-height-06: 1.333; /** Line height token. */
228
+ --mrl-line-height-07: 1.4; /** Line height token. */
229
+ --mrl-line-height-08: 1.429; /** Line height token. */
230
+ --mrl-line-height-09: 1.5; /** Line height token. */
231
+ --mrl-letter-spacing-01: -2%; /** Letter spacing token. */
232
+ --mrl-letter-spacing-02: -1%; /** Letter spacing token. */
233
+ --mrl-letter-spacing-03: 0%; /** Letter spacing token. */
234
+ --mrl-letter-spacing-04: 1%; /** Letter spacing token. */
235
+ --mrl-letter-spacing-05: 2%; /** Letter spacing token. */
236
+ --mrl-font-weight-01: 400; /** Font weight token. */
237
+ --mrl-font-weight-02: 500; /** Font weight token. */
238
+ --mrl-font-weight-03: 600; /** Font weight token. */
239
+ --mrl-font-weight-04: 700; /** Font weight token. */
240
+ --mrl-font-weight-05: 800; /** Font weight token. */
241
+ --mrl-line-width-border-fine: 1px; /** Fine border width. No global stroke token for 1px, so this is hard-coded. */
242
+ --mrl-color-background-page: rgb(
243
+ 243,
244
+ 245,
245
+ 246
246
+ ); /** Intentional one-off page background (#f3f5f6). */
247
+ --mrl-space-offset-focus: 1px; /** Focus ring offset. No global spacing token for 1px, so this is hard-coded. */
248
+ --mrl-type-size-toggleable-label: calc(
249
+ 10 / var(--mrl-baseline) * 1rem
250
+ ); /** Toggleable label mixin variable. Exceptional value: this mixin renders a 10px font, which we have no variable for. */
251
+ --mrl-line-width-border: var(--mrl-stroke-01); /** Default border width. */
252
+ --mrl-line-width-border-selected: var(--mrl-stroke-01); /** Border width for selected state. */
253
+ --mrl-line-width-focus: var(--mrl-stroke-01); /** Focus ring width. */
254
+ --mrl-line-width-control: var(--mrl-stroke-01); /** Border width for controls. */
255
+ --mrl-line-width-divider: var(--mrl-stroke-01); /** Width for divider lines. */
256
+ --mrl-border-radius-tight: var(--mrl-radii-01); /** Tight corner radius. */
257
+ --mrl-border-radius-content: var(--mrl-radii-02); /** Default content corner radius. */
258
+ --mrl-border-radius-content-large: var(--mrl-radii-03); /** Large content corner radius. */
259
+ --mrl-border-radius-functional: var(--mrl-radii-03); /** Corner radius for functional elements. */
260
+ --mrl-border-radius-functional-large: var(
261
+ --mrl-radii-04
262
+ ); /** Large corner radius for functional elements. */
263
+ --mrl-border-radius-container: var(--mrl-radii-04); /** Corner radius for containers. */
264
+ --mrl-border-radius-container-large: var(
265
+ --mrl-radii-05
266
+ ); /** Large corner radius for containers. */
267
+ --mrl-border-radius-rounded: var(--mrl-radii-07); /** Rounded corner radius. */
268
+ --mrl-border-radius-rounded-large: var(--mrl-radii-08); /** Large rounded corner radius. */
269
+ --mrl-color-focus: rgba(var(--mrl-blue-70), 1); /** Focus ring on interactive elements. */
270
+ --mrl-color-focus-inverse: rgba(
271
+ var(--mrl-white),
272
+ 1
273
+ ); /** Focus ring on inverse (dark) surfaces. */
274
+ --mrl-color-shadows: rgba(var(--mrl-black), 1); /** Base color for shadow tokens. */
275
+ --mrl-color-brand: rgba(var(--mrl-red-70), 1); /** Primary brand color. */
276
+ --mrl-color-brand-hover: rgba(var(--mrl-red-80), 1); /** Brand color, hover state. */
277
+ --mrl-color-brand-active: rgba(var(--mrl-red-90), 1); /** Brand color, active/pressed state. */
278
+ --mrl-color-accent: rgba(
279
+ var(--mrl-blue-70),
280
+ 1
281
+ ); /** Accent color used for emphasis and selection. */
282
+ --mrl-color-skeleton: rgba(var(--mrl-gray-20), 1); /** Skeleton placeholder background. */
283
+ --mrl-color-skeleton-inverse: rgba(
284
+ var(--mrl-white),
285
+ 1
286
+ ); /** Skeleton placeholder background on inverse surfaces. */
287
+ --mrl-color-background: rgba(var(--mrl-white), 1); /** Default surface background. */
288
+ --mrl-color-background-secondary: rgba(
289
+ var(--mrl-gray-80),
290
+ 1
291
+ ); /** Secondary surface background. */
292
+ --mrl-color-background-decorative: rgba(
293
+ var(--mrl-gray-20),
294
+ 1
295
+ ); /** Background for decorative, non-interactive surfaces. */
296
+ --mrl-color-background-highlight-secondary: rgba(
297
+ var(--mrl-blue-10),
298
+ 1
299
+ ); /** Secondary highlight background. */
300
+ --mrl-color-background-info: rgba(
301
+ var(--mrl-status-info),
302
+ 1
303
+ ); /** Background for info status surfaces. */
304
+ --mrl-color-background-info-light: rgba(
305
+ var(--mrl-status-info-light),
306
+ 1
307
+ ); /** Light background for info status surfaces. */
308
+ --mrl-color-background-success: rgba(
309
+ var(--mrl-status-success),
310
+ 1
311
+ ); /** Background for success status surfaces. */
312
+ --mrl-color-background-success-light: rgba(
313
+ var(--mrl-status-success-light),
314
+ 1
315
+ ); /** Light background for success status surfaces. */
316
+ --mrl-color-background-warning: rgba(
317
+ var(--mrl-status-warning),
318
+ 1
319
+ ); /** Background for warning status surfaces. */
320
+ --mrl-color-background-warning-light: rgba(
321
+ var(--mrl-status-warning-light),
322
+ 1
323
+ ); /** Light background for warning status surfaces. */
324
+ --mrl-color-background-error: rgba(
325
+ var(--mrl-status-error),
326
+ 1
327
+ ); /** Background for error status surfaces. */
328
+ --mrl-color-background-error-light: rgba(
329
+ var(--mrl-status-error-light),
330
+ 1
331
+ ); /** Light background for error status surfaces. */
332
+ --mrl-color-background-private: rgba(
333
+ var(--mrl-gray-100),
334
+ 1
335
+ ); /** Background for private content warnings. */
336
+ --mrl-color-background-inverse: rgba(
337
+ var(--mrl-gray-100),
338
+ 1
339
+ ); /** Inverse (dark) surface background. */
340
+ --mrl-color-background-inverse-hover: rgba(
341
+ var(--mrl-gray-90),
342
+ 1
343
+ ); /** Inverse surface background, hover state. */
344
+ --mrl-color-background-disabled: rgba(
345
+ var(--mrl-gray-40),
346
+ 1
347
+ ); /** Background for disabled controls. */
348
+ --mrl-color-background-highlight-hover: rgba(
349
+ var(--mrl-gray-20),
350
+ 1
351
+ ); /** Highlight background, hover state. */
352
+ --mrl-color-background-highlight-active: rgba(
353
+ var(--mrl-gray-90),
354
+ 1
355
+ ); /** Highlight background, active/pressed state. */
356
+ --mrl-color-background-highlight-selected: rgba(
357
+ var(--mrl-gray-100),
358
+ 1
359
+ ); /** Highlight background, selected state. */
360
+ --mrl-color-background-highlight-emph-active: rgba(
361
+ var(--mrl-gray-30),
362
+ 1
363
+ ); /** Emphasized highlight background, active state. */
364
+ --mrl-color-line: rgba(var(--mrl-gray-70), 1); /** Default line/border color. */
365
+ --mrl-color-line-hover: rgba(var(--mrl-gray-90), 1); /** Line color, hover state. */
366
+ --mrl-color-line-active: rgba(var(--mrl-gray-100), 1); /** Line color, active state. */
367
+ --mrl-color-line-selected: rgba(var(--mrl-gray-90), 1); /** Line color, selected state. */
368
+ --mrl-color-line-disabled: rgba(var(--mrl-gray-40), 1); /** Line color for disabled controls. */
369
+ --mrl-color-line-highlight-secondary: rgba(
370
+ var(--mrl-blue-20),
371
+ 1
372
+ ); /** Secondary highlight line color. */
373
+ --mrl-color-line-divider: rgba(var(--mrl-gray-20), 1); /** Divider line color. */
374
+ --mrl-color-line-divider-inverse: rgba(
375
+ var(--mrl-gray-80),
376
+ 1
377
+ ); /** Divider line color on inverse surfaces. */
378
+ --mrl-color-line-emph: rgba(var(--mrl-gray-20), 1); /** Emphasized line color. */
379
+ --mrl-color-line-emph-hover: rgba(
380
+ var(--mrl-gray-90),
381
+ 1
382
+ ); /** Emphasized line color, hover state. */
383
+ --mrl-color-line-emph-active: rgba(
384
+ var(--mrl-black),
385
+ 1
386
+ ); /** Emphasized line color, active state. */
387
+ --mrl-color-line-inverse: rgba(var(--mrl-white), 1); /** Line color on inverse surfaces. */
388
+ --mrl-color-line-inverse-disabled: rgba(
389
+ var(--mrl-white),
390
+ 1
391
+ ); /** Line color for disabled controls on inverse surfaces. */
392
+ --mrl-color-icon-light: rgba(var(--mrl-gray-70), 1); /** Light icon color. */
393
+ --mrl-color-icon-disabled: rgba(var(--mrl-gray-40), 1); /** Icon color for disabled controls. */
394
+ --mrl-color-icon-inverse: rgba(var(--mrl-white), 1); /** Icon color on inverse surfaces. */
395
+ --mrl-color-input-icon-default: rgba(
396
+ var(--mrl-gray-70),
397
+ 1
398
+ ); /** Default icon color inside form inputs. */
399
+ --mrl-color-text: rgba(var(--mrl-gray-80), 1); /** Default body text color. */
400
+ --mrl-color-text-hover: rgba(var(--mrl-gray-90), 1); /** Text color, hover state. */
401
+ --mrl-color-text-active: rgba(var(--mrl-gray-90), 1); /** Text color, active state. */
402
+ --mrl-color-text-selected: rgba(var(--mrl-gray-100), 1); /** Text color, selected state. */
403
+ --mrl-color-text-disabled: rgba(var(--mrl-gray-40), 1); /** Text color for disabled controls. */
404
+ --mrl-color-text-disabled-inverse: rgba(
405
+ var(--mrl-white),
406
+ 1
407
+ ); /** Disabled text color on inverse surfaces. */
408
+ --mrl-color-text-emph: rgba(var(--mrl-gray-80), 1); /** Emphasized text color. */
409
+ --mrl-color-text-emph-hover: rgba(
410
+ var(--mrl-gray-90),
411
+ 1
412
+ ); /** Emphasized text color, hover state. */
413
+ --mrl-color-text-emph-active: rgba(
414
+ var(--mrl-black),
415
+ 1
416
+ ); /** Emphasized text color, active state. */
417
+ --mrl-color-text-highlight: rgba(
418
+ var(--mrl-gray-80),
419
+ 1
420
+ ); /** Text color on highlighted backgrounds. */
421
+ --mrl-color-text-highlight-hover: rgba(
422
+ var(--mrl-gray-90),
423
+ 1
424
+ ); /** Highlighted text color, hover state. */
425
+ --mrl-color-text-highlight-active: rgba(
426
+ var(--mrl-white),
427
+ 1
428
+ ); /** Highlighted text color, active state. */
429
+ --mrl-color-text-highlight-selected: rgba(
430
+ var(--mrl-white),
431
+ 1
432
+ ); /** Highlighted text color, selected state. */
433
+ --mrl-color-text-highlight-emph: rgba(
434
+ var(--mrl-gray-90),
435
+ 1
436
+ ); /** Emphasized highlighted text color. */
437
+ --mrl-color-text-highlight-emph-hover: rgba(
438
+ var(--mrl-gray-100),
439
+ 1
440
+ ); /** Emphasized highlighted text color, hover state. */
441
+ --mrl-color-text-highlight-emph-active: rgba(
442
+ var(--mrl-black),
443
+ 1
444
+ ); /** Emphasized highlighted text color, active state. */
445
+ --mrl-color-text-highlight-emph-selected: rgba(
446
+ var(--mrl-white),
447
+ 1
448
+ ); /** Emphasized highlighted text color, selected state. */
449
+ --mrl-color-text-inverse: rgba(var(--mrl-white), 1); /** Text color on inverse surfaces. */
450
+ --mrl-color-text-inverse-secondary: rgba(
451
+ var(--mrl-gray-10),
452
+ 1
453
+ ); /** Secondary text color on inverse surfaces. */
454
+ --mrl-color-text-inverse-hover: rgba(var(--mrl-white), 1); /** Inverse text color, hover state. */
455
+ --mrl-color-text-inverse-active: rgba(
456
+ var(--mrl-white),
457
+ 1
458
+ ); /** Inverse text color, active state. */
459
+ --mrl-color-text-inverse-selected: rgba(
460
+ var(--mrl-white),
461
+ 1
462
+ ); /** Inverse text color, selected state. */
463
+ --mrl-color-text-02: rgba(var(--mrl-gray-90), 1); /** Alternate body text color. */
464
+ --mrl-color-text-secondary: rgba(var(--mrl-gray-70), 1); /** Secondary text color. */
465
+ --mrl-color-text-label: rgba(var(--mrl-gray-100), 1); /** Text color for form labels. */
466
+ --mrl-color-text-heading: rgba(var(--mrl-gray-100), 1); /** Text color for headings. */
467
+ --mrl-color-text-success: rgba(
468
+ var(--mrl-status-success),
469
+ 1
470
+ ); /** Text color for success messages. */
471
+ --mrl-color-text-warning: rgba(var(--mrl-gray-90), 1); /** Text color for warning messages. */
472
+ --mrl-color-text-warning-light: rgba(
473
+ var(--mrl-gray-80),
474
+ 1
475
+ ); /** Text color for light-warning messages. */
476
+ --mrl-color-text-error: rgba(var(--mrl-status-error), 1); /** Text color for error messages. */
477
+ --mrl-color-text-info: rgba(var(--mrl-status-info), 1); /** Text color for info messages. */
478
+ --mrl-color-text-private: rgba(var(--mrl-gray-100), 1); /** Text color for private content. */
479
+ --mrl-color-icon-emph-selected: rgba(
480
+ var(--mrl-gray-100),
481
+ 1
482
+ ); /** Emphasized icon color, selected state. */
483
+ --mrl-color-background-hover-opacity: rgba(
484
+ var(--mrl-gray-30),
485
+ 0.2
486
+ ); /** Hover overlay at 20% opacity. */
487
+ --mrl-color-background-inverse-hover-opacity: var(
488
+ --mrl-black-opacity-02
489
+ ); /** Inverse hover overlay using black-opacity-02. */
490
+ --mrl-shadows-lifted: var(--mrl-shadow-01); /** Contextual shadow token. */
491
+ --mrl-shadows-raised: var(--mrl-shadow-02); /** Contextual shadow token. */
492
+ --mrl-shadows-floating: var(--mrl-shadow-03); /** Contextual shadow token. */
493
+ --mrl-shadows-hover: var(--mrl-shadow-interactive-01); /** Contextual shadow token. */
494
+ --mrl-shadows-drag: var(--mrl-shadow-interactive-02); /** Contextual shadow token. */
495
+ --mrl-space-stack-components: var(
496
+ --mrl-spacing-06
497
+ ); /** Vertical stack spacing between components. */
498
+ --mrl-space-stack-controls: var(--mrl-spacing-05); /** Vertical stack spacing between controls. */
499
+ --mrl-space-stack-controls-small: var(
500
+ --mrl-spacing-04
501
+ ); /** Vertical stack spacing between small controls. */
502
+ --mrl-space-stack-section: var(--mrl-spacing-07); /** Vertical stack spacing between sections. */
503
+ --mrl-space-stack-section-divider: var(
504
+ --mrl-spacing-04
505
+ ); /** Vertical stack spacing around section dividers. */
506
+ --mrl-space-stack-section-divider-small: var(
507
+ --mrl-spacing-03
508
+ ); /** Vertical stack spacing around small section dividers. */
509
+ --mrl-space-stack-section-divider-large: var(
510
+ --mrl-spacing-06
511
+ ); /** Vertical stack spacing around large section dividers. */
512
+ --mrl-space-stack-section-divider-xlarge: var(
513
+ --mrl-spacing-08
514
+ ); /** Vertical stack spacing around xlarge section dividers. */
515
+ --mrl-space-stack-section-divider-label: var(
516
+ --mrl-spacing-05
517
+ ); /** Vertical stack spacing around section divider labels. */
518
+ --mrl-space-stack-siblings: var(
519
+ --mrl-spacing-04
520
+ ); /** Vertical stack spacing between sibling elements. */
521
+ --mrl-space-stack-related: var(
522
+ --mrl-spacing-03
523
+ ); /** Vertical stack spacing between related elements. */
524
+ --mrl-space-stack-related-small: var(
525
+ --mrl-spacing-02
526
+ ); /** Vertical stack spacing between closely related elements. */
527
+ --mrl-space-inset: var(--mrl-spacing-03); /** Default inset padding. */
528
+ --mrl-space-inset-container: var(--mrl-spacing-08); /** Inset padding for containers. */
529
+ --mrl-space-inset-container-large: var(
530
+ --mrl-spacing-05
531
+ ); /** Inset padding for large containers (mobile-first; overridden above 600px in spacing.scss). */
532
+ --mrl-space-inset-large: var(--mrl-spacing-05); /** Large inset padding. */
533
+ --mrl-space-inset-control: var(--mrl-spacing-06); /** Inset padding for controls. */
534
+ --mrl-space-inset-control-large: var(--mrl-spacing-05); /** Inset padding for large controls. */
535
+ --mrl-space-inset-control-small: calc(
536
+ var(--mrl-spacing-03) + var(--mrl-spacing-01)
537
+ ); /** Inset padding for small controls (form inputs, buttons). */
538
+ --mrl-space-inline-related: var(
539
+ --mrl-spacing-03
540
+ ); /** Horizontal spacing between related elements. */
541
+ --mrl-space-inline-sibling: var(
542
+ --mrl-spacing-04
543
+ ); /** Horizontal spacing between sibling elements. */
544
+ --mrl-space-inline-sibling-small: var(
545
+ --mrl-spacing-02
546
+ ); /** Horizontal spacing between closely placed sibling elements. */
547
+ --mrl-space-gutter: var(--mrl-spacing-04); /** Default grid/layout gutter. */
548
+ --mrl-space-gutter-label: var(--mrl-spacing-05); /** Gutter spacing around labels. */
549
+ --mrl-space-stack-subheading: var(
550
+ --mrl-spacing-05
551
+ ); /** Vertical stack spacing around subheadings. */
552
+ --mrl-space-stack-title: var(--mrl-spacing-07); /** Vertical stack spacing around titles. */
553
+ --mrl-space-stack-title-related: var(
554
+ --mrl-spacing-05
555
+ ); /** Vertical stack spacing between a title and related content. */
556
+ --mrl-body-font: var(--mrl-font-family-01), sans-serif;
557
+ --mrl-heading-font: var(--mrl-font-family-01), sans-serif;
558
+ --mrl-heading-font-alt: var(--mrl-font-family-02), serif;
559
+ --mrl-type-size-display: var(--mrl-font-size-08); /** Contextual typography token. */
560
+ --mrl-type-size-display-large: var(--mrl-font-size-09); /** Contextual typography token. */
561
+ --mrl-type-size-display-small: var(--mrl-font-size-07); /** Contextual typography token. */
562
+ --mrl-type-size-display-xsmall: var(--mrl-font-size-06); /** Contextual typography token. */
563
+ --mrl-type-size-headline: var(--mrl-font-size-06); /** Contextual typography token. */
564
+ --mrl-type-size-headline-large: var(--mrl-font-size-06); /** Contextual typography token. */
565
+ --mrl-type-size-headline-small: var(--mrl-font-size-04); /** Contextual typography token. */
566
+ --mrl-type-size-text: var(--mrl-font-size-04); /** Contextual typography token. */
567
+ --mrl-type-size-text-large: var(--mrl-font-size-05); /** Contextual typography token. */
568
+ --mrl-type-size-text-small: var(--mrl-font-size-03); /** Contextual typography token. */
569
+ --mrl-type-size-text-xsmall: var(--mrl-font-size-02); /** Contextual typography token. */
570
+ --mrl-type-size-text-xxsmall: var(--mrl-font-size-01); /** Contextual typography token. */
571
+ --mrl-type-line-height-title: var(--mrl-line-height-05); /** Contextual typography token. */
572
+ --mrl-type-line-height-title-large: var(--mrl-line-height-06); /** Contextual typography token. */
573
+ --mrl-type-line-height-title-small: var(--mrl-line-height-08); /** Contextual typography token. */
574
+ --mrl-type-line-height-title-xsmall: var(
575
+ --mrl-line-height-06
576
+ ); /** Contextual typography token. */
577
+ --mrl-type-line-height-title-xxsmall: var(
578
+ --mrl-line-height-06
579
+ ); /** Contextual typography token. */
580
+ --mrl-type-line-height-display: var(--mrl-line-height-02); /** Contextual typography token. */
581
+ --mrl-type-line-height-display-large: var(
582
+ --mrl-line-height-02
583
+ ); /** Contextual typography token. */
584
+ --mrl-type-line-height-display-small: var(
585
+ --mrl-line-height-02
586
+ ); /** Contextual typography token. */
587
+ --mrl-type-line-height-display-xsmall: var(
588
+ --mrl-line-height-02
589
+ ); /** Contextual typography token. */
590
+ --mrl-type-line-height-headline: var(--mrl-line-height-07); /** Contextual typography token. */
591
+ --mrl-type-line-height-headline-large: var(
592
+ --mrl-line-height-07
593
+ ); /** Contextual typography token. */
594
+ --mrl-type-line-height-headline-small: var(
595
+ --mrl-line-height-02
596
+ ); /** Contextual typography token. */
597
+ --mrl-type-line-height-text: var(--mrl-line-height-09); /** Contextual typography token. */
598
+ --mrl-type-line-height-text-large: var(--mrl-line-height-10); /** Contextual typography token. */
599
+ --mrl-type-line-height-text-small: var(--mrl-line-height-08); /** Contextual typography token. */
600
+ --mrl-type-line-height-text-xsmall: var(--mrl-line-height-06); /** Contextual typography token. */
601
+ --mrl-type-line-height-text-xxsmall: var(
602
+ --mrl-line-height-08
603
+ ); /** Contextual typography token. */
604
+ --mrl-type-line-height-interactive: var(--mrl-line-height-09); /** Contextual typography token. */
605
+ --mrl-type-line-height-interactive-large: var(
606
+ --mrl-line-height-10
607
+ ); /** Contextual typography token. */
608
+ --mrl-type-line-height-interactive-small: var(
609
+ --mrl-line-height-08
610
+ ); /** Contextual typography token. */
611
+ --mrl-type-line-height-interactive-xsmall: var(
612
+ --mrl-line-height-06
613
+ ); /** Contextual typography token. */
614
+ --mrl-type-weight-display: var(--mrl-font-weight-01); /** Contextual typography token. */
615
+ --mrl-type-weight-headline: var(--mrl-font-weight-04); /** Contextual typography token. */
616
+ --mrl-type-weight-title: var(--mrl-font-weight-04); /** Contextual typography token. */
617
+ --mrl-type-weight-title-secondary: var(--mrl-font-weight-02); /** Contextual typography token. */
618
+ --mrl-type-weight-text: var(--mrl-font-weight-01); /** Contextual typography token. */
619
+ --mrl-type-weight-text-bold: var(--mrl-font-weight-04); /** Contextual typography token. */
620
+ --mrl-type-weight-text-secondary: var(--mrl-font-weight-01); /** Contextual typography token. */
621
+ --mrl-type-weight-interactive: var(--mrl-font-weight-04); /** Contextual typography token. */
622
+ --mrl-type-weight-toggleable-label: var(
623
+ --mrl-font-weight-03
624
+ ); /** Toggleable label mixin variable. */
625
+ --mrl-type-spacing-display: var(--mrl-letter-spacing-03); /** Contextual typography token. */
626
+ --mrl-type-spacing-display-large: var(
627
+ --mrl-letter-spacing-02
628
+ ); /** Contextual typography token. */
629
+ --mrl-type-spacing-display-small: var(
630
+ --mrl-letter-spacing-02
631
+ ); /** Contextual typography token. */
632
+ --mrl-type-spacing-display-xsmall: var(
633
+ --mrl-letter-spacing-02
634
+ ); /** Contextual typography token. */
635
+ --mrl-type-spacing-headline: var(--mrl-letter-spacing-03); /** Contextual typography token. */
636
+ --mrl-type-spacing-headline-large: var(
637
+ --mrl-letter-spacing-03
638
+ ); /** Contextual typography token. */
639
+ --mrl-type-spacing-headline-small: var(
640
+ --mrl-letter-spacing-04
641
+ ); /** Contextual typography token. */
642
+ --mrl-type-spacing-text: var(--mrl-letter-spacing-03); /** Contextual typography token. */
643
+ --mrl-type-spacing-interactive-xsmall: var(
644
+ --mrl-letter-spacing-04
645
+ ); /** Contextual typography token. */
646
+ --mrl-border: var(--mrl-line-width-border) solid var(--mrl-color-line); /** Default border shorthand. */
647
+ --mrl-border-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-hover); /** Border shorthand, hover state. */
648
+ --mrl-border-active: var(--mrl-line-width-border) solid var(--mrl-color-line-active); /** Border shorthand, active state. */
649
+ --mrl-border-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-selected); /** Border shorthand, selected state. */
650
+ --mrl-border-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-disabled); /** Border shorthand, disabled state. */
651
+ --mrl-border-emph: var(--mrl-line-width-border) solid var(--mrl-color-line-emph); /** Emphasized border shorthand. */
652
+ --mrl-border-emph-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-hover); /** Emphasized border shorthand, hover state. */
653
+ --mrl-border-emph-active: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-active); /** Emphasized border shorthand, active state. */
654
+ --mrl-border-emph-selected: var(--mrl-line-width-border-selected) solid
655
+ var(--mrl-color-line-emph-selected); /** Emphasized border shorthand, selected state. */
656
+ --mrl-border-emph-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-disabled); /** Emphasized border shorthand, disabled state. NOTE: --mrl-color-line-emph-disabled is referenced but not defined anywhere — preserving pre-existing behavior; needs follow-up. */
657
+ --mrl-border-inverse: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse); /** Border shorthand on inverse surfaces. */
658
+ --mrl-border-inverse-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse); /** Inverse border shorthand, hover state. */
659
+ --mrl-border-inverse-active: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse); /** Inverse border shorthand, active state. */
660
+ --mrl-border-inverse-selected: var(--mrl-line-width-border-selected) solid
661
+ var(--mrl-color-line-inverse); /** Inverse border shorthand, selected state. */
662
+ --mrl-border-inverse-disabled: var(--mrl-line-width-border) solid
663
+ var(--mrl-color-line-inverse-disabled); /** Inverse border shorthand, disabled state. */
664
+ --mrl-border-focus: var(--mrl-line-width-focus) solid var(--mrl-color-focus); /** Focus ring border shorthand. */
665
+ --mrl-border-divider: var(--mrl-line-width-divider) solid var(--mrl-color-line-divider); /** Divider line border shorthand. */
666
+ --mrl-color-background-inverse-active: var(
667
+ --mrl-color-accent
668
+ ); /** Inverse surface background, active state. */
669
+ --mrl-color-background-inverse-selected: var(
670
+ --mrl-color-accent
671
+ ); /** Inverse surface background, selected state. */
672
+ --mrl-color-background-highlight-emph-selected: var(
673
+ --mrl-color-accent
674
+ ); /** Emphasized highlight background, selected state. */
675
+ --mrl-color-line-emph-selected: var(
676
+ --mrl-color-accent
677
+ ); /** Emphasized line color, selected state. */
678
+ --mrl-color-text-emph-selected: var(
679
+ --mrl-color-accent
680
+ ); /** Emphasized text color, selected state. */
681
+ --mrl-space-inline-sibling-xsmall: var(
682
+ --mrl-space-inline-sibling-small
683
+ ); /** Horizontal spacing between very closely placed sibling elements. */
363
684
  }
364
685
 
365
- :root {
366
- --mrl-space-offset-focus: 1px;
367
- /* Spacing */
368
- --mrl-space-stack-components: var(--mrl-spacing-06);
369
- --mrl-space-stack-controls: var(--mrl-spacing-05);
370
- --mrl-space-stack-controls-small: var(--mrl-spacing-04);
371
- --mrl-space-stack-section: var(--mrl-spacing-07);
372
- --mrl-space-stack-section-divider: var(--mrl-spacing-04);
373
- --mrl-space-stack-section-divider-small: var(--mrl-spacing-03);
374
- --mrl-space-stack-section-divider-large: var(--mrl-spacing-06);
375
- --mrl-space-stack-section-divider-xlarge: var(--mrl-spacing-08);
376
- --mrl-space-stack-section-divider-label: var(--mrl-spacing-05);
377
- --mrl-space-stack-siblings: var(--mrl-spacing-04);
378
- --mrl-space-stack-related: var(--mrl-spacing-03);
379
- --mrl-space-stack-related-small: var(--mrl-spacing-02);
380
- --mrl-space-inset: var(--mrl-spacing-03);
381
- --mrl-space-inset-container: var(--mrl-spacing-08);
382
- --mrl-space-inset-container-large: var(--mrl-spacing-05);
383
- --mrl-space-inset-large: var(--mrl-spacing-05);
384
- --mrl-space-inset-control: var(--mrl-spacing-06);
385
- --mrl-space-inset-control-large: var(--mrl-spacing-05);
386
- --mrl-space-inline-related: var(--mrl-spacing-03);
387
- --mrl-space-inline-sibling: var(--mrl-spacing-04);
388
- --mrl-space-inline-sibling-small: var(--mrl-spacing-02);
389
- --mrl-space-gutter: var(--mrl-spacing-04);
390
- --mrl-space-gutter-label: var(--mrl-spacing-05);
391
- --mrl-space-stack-subheading: var(--mrl-spacing-05);
392
- --mrl-space-stack-title: var(--mrl-spacing-07);
393
- --mrl-space-stack-title-related: var(--mrl-spacing-05);
394
- --mrl-space-inline-sibling-xsmall: var(--mrl-space-inline-sibling-small);
395
- --mrl-space-inset-control-small: calc(var(--mrl-spacing-03) + var(--mrl-spacing-01));
396
- }
397
686
  @media only screen and (min-width: 600px) {
398
687
  :root {
399
688
  --mrl-space-inset-container-large: var(--mrl-spacing-08);
400
689
  }
401
690
  }
402
691
 
403
- :root {
404
- --mrl-line-width-border-fine: 1px;
405
- --mrl-line-width-border: var(--mrl-stroke-01);
406
- --mrl-line-width-border-selected: var(--mrl-stroke-01);
407
- --mrl-line-width-focus: var(--mrl-stroke-01);
408
- --mrl-line-width-control: var(--mrl-stroke-01);
409
- --mrl-line-width-divider: var(--mrl-stroke-01);
410
- --mrl-border-radius-tight: var(--mrl-radii-01);
411
- --mrl-border-radius-content: var(--mrl-radii-02);
412
- --mrl-border-radius-content-large: var(--mrl-radii-03);
413
- --mrl-border-radius-functional: var(--mrl-radii-03);
414
- --mrl-border-radius-functional-large: var(--mrl-radii-04);
415
- --mrl-border-radius-container: var(--mrl-radii-04);
416
- --mrl-border-radius-container-large: var(--mrl-radii-05);
417
- --mrl-border-radius-rounded: var(--mrl-radii-07);
418
- --mrl-border-radius-rounded-large: var(--mrl-radii-08);
419
- --mrl-border: var(--mrl-line-width-border) solid var(--mrl-color-line);
420
- --mrl-border-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-hover);
421
- --mrl-border-active: var(--mrl-line-width-border) solid var(--mrl-color-line-active);
422
- --mrl-border-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-selected);
423
- --mrl-border-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-disabled);
424
- --mrl-border-emph: var(--mrl-line-width-border) solid var(--mrl-color-line-emph);
425
- --mrl-border-emph-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-hover);
426
- --mrl-border-emph-active: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-active);
427
- --mrl-border-emph-selected: var(--mrl-line-width-border-selected) solid
428
- var(--mrl-color-line-emph-selected);
429
- --mrl-border-emph-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-disabled);
430
- --mrl-border-inverse: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);
431
- --mrl-border-inverse-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);
432
- --mrl-border-inverse-active: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);
433
- --mrl-border-inverse-selected: var(--mrl-line-width-border-selected) solid
434
- var(--mrl-color-line-inverse);
435
- --mrl-border-inverse-disabled: var(--mrl-line-width-border) solid
436
- var(--mrl-color-line-inverse-disabled);
437
- --mrl-border-focus: var(--mrl-line-width-focus) solid var(--mrl-color-focus);
438
- --mrl-border-divider: var(--mrl-line-width-divider) solid var(--mrl-color-line-divider);
439
- }
440
-
441
- :root {
442
- --mrl-body-font: var(--mrl-font-family-01), sans-serif;
443
- --mrl-heading-font: var(--mrl-font-family-01), sans-serif;
444
- --mrl-heading-font-alt: var(--mrl-font-family-02), serif;
445
- --mrl-type-size-display: var(--mrl-font-size-08);
446
- --mrl-type-size-display-large: var(--mrl-font-size-09);
447
- --mrl-type-size-display-small: var(--mrl-font-size-07);
448
- --mrl-type-size-display-xsmall: var(--mrl-font-size-06);
449
- --mrl-type-size-headline: var(--mrl-font-size-06);
450
- --mrl-type-size-headline-large: var(--mrl-font-size-06);
451
- --mrl-type-size-headline-small: var(--mrl-font-size-04);
452
- --mrl-type-size-text: var(--mrl-font-size-04);
453
- --mrl-type-size-text-large: var(--mrl-font-size-05);
454
- --mrl-type-size-text-small: var(--mrl-font-size-03);
455
- --mrl-type-size-text-xsmall: var(--mrl-font-size-02);
456
- --mrl-type-size-text-xxsmall: var(--mrl-font-size-01);
457
- --mrl-type-line-height-title: var(--mrl-line-height-05);
458
- --mrl-type-line-height-title-large: var(--mrl-line-height-06);
459
- --mrl-type-line-height-title-small: var(--mrl-line-height-08);
460
- --mrl-type-line-height-title-xsmall: var(--mrl-line-height-06);
461
- --mrl-type-line-height-title-xxsmall: var(--mrl-line-height-06);
462
- --mrl-type-line-height-display: var(--mrl-line-height-02);
463
- --mrl-type-line-height-display-large: var(--mrl-line-height-02);
464
- --mrl-type-line-height-display-small: var(--mrl-line-height-02);
465
- --mrl-type-line-height-display-xsmall: var(--mrl-line-height-02);
466
- --mrl-type-line-height-headline: var(--mrl-line-height-07);
467
- --mrl-type-line-height-headline-large: var(--mrl-line-height-07);
468
- --mrl-type-line-height-headline-small: var(--mrl-line-height-02);
469
- --mrl-type-line-height-text: var(--mrl-line-height-09);
470
- --mrl-type-line-height-text-large: var(--mrl-line-height-10);
471
- --mrl-type-line-height-text-small: var(--mrl-line-height-08);
472
- --mrl-type-line-height-text-xsmall: var(--mrl-line-height-06);
473
- --mrl-type-line-height-text-xxsmall: var(--mrl-line-height-08);
474
- --mrl-type-line-height-interactive: var(--mrl-line-height-09);
475
- --mrl-type-line-height-interactive-large: var(--mrl-line-height-10);
476
- --mrl-type-line-height-interactive-small: var(--mrl-line-height-08);
477
- --mrl-type-line-height-interactive-xsmall: var(--mrl-line-height-06);
478
- --mrl-type-weight-display: var(--mrl-font-weight-01);
479
- --mrl-type-weight-headline: var(--mrl-font-weight-04);
480
- --mrl-type-weight-title: var(--mrl-font-weight-04);
481
- --mrl-type-weight-title-secondary: var(--mrl-font-weight-02);
482
- --mrl-type-weight-text: var(--mrl-font-weight-01);
483
- --mrl-type-weight-text-bold: var(--mrl-font-weight-04);
484
- --mrl-type-weight-text-secondary: var(--mrl-font-weight-01);
485
- --mrl-type-weight-interactive: var(--mrl-font-weight-04);
486
- --mrl-type-spacing-display: var(--mrl-letter-spacing-03);
487
- --mrl-type-spacing-display-large: var(--mrl-letter-spacing-02);
488
- --mrl-type-spacing-display-small: var(--mrl-letter-spacing-02);
489
- --mrl-type-spacing-display-xsmall: var(--mrl-letter-spacing-02);
490
- --mrl-type-spacing-headline: var(--mrl-letter-spacing-03);
491
- --mrl-type-spacing-headline-large: var(--mrl-letter-spacing-03);
492
- --mrl-type-spacing-headline-small: var(--mrl-letter-spacing-04);
493
- --mrl-type-spacing-text: var(--mrl-letter-spacing-03);
494
- --mrl-type-spacing-interactive-xsmall: var(--mrl-letter-spacing-04);
495
- --mrl-type-size-toggleable-label: calc(10 / var(--mrl-baseline) * 1rem);
496
- --mrl-type-weight-toggleable-label: var(--mrl-font-weight-03);
497
- }
498
-
499
692
  @media screen and (min-width: 600px) {
500
693
  :root {
501
694
  --mrl-type-size-display: var(--mrl-font-size-09);
@@ -511,21 +704,6 @@
511
704
  --mrl-type-spacing-headline-small: var(--mrl-letter-spacing-03);
512
705
  }
513
706
  }
514
- /**
515
- * Please note!
516
- * If you make a change to these tokens, please make sure that the
517
- * mrl-shadow mixin is changed as well. We need the tokens
518
- * to map to the drop-shadow filter!
519
- */
520
- /* Contextual Shadow Tokens */
521
- :root {
522
- --mrl-shadows-lifted: var(--mrl-shadow-01);
523
- --mrl-shadows-raised: var(--mrl-shadow-02);
524
- --mrl-shadows-floating: var(--mrl-shadow-03);
525
- --mrl-shadows-hover: var(--mrl-shadow-interactive-01);
526
- --mrl-shadows-drag: var(--mrl-shadow-interactive-02);
527
- }
528
-
529
707
  /* stylelint-disable scss/operator-no-newline-after */
530
708
  .mrl-u-focus-wrapper {
531
709
  position: relative;
@@ -796,5 +974,4 @@ mrl-icon-button[size=xsmall][kind=ghost-inverse] {
796
974
  min-height: var(--mrl-spacing-07);
797
975
  min-width: var(--mrl-spacing-07);
798
976
  }
799
-
800
977
  /*# sourceMappingURL=foundation.css.map */