@muraldevkit/ds-foundation 2.18.0 → 2.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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 +11 -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/src/styles/contextual-variables/color.scss DELETED
@@ -1,519 +0,0 @@
1
- ////
2
- /// Contextual Color Tokens
3
- /// @group variables
4
- ////
5
-
6
- :root {
7
- /* Color */
8
- ///
9
- /// Contextual color token.
10
- /// --mrl-color-focus -> --mrl-blue-70 -> rgba(48, 106, 227, 1).
11
- ///
12
- --mrl-color-focus: rgba(var(--mrl-blue-70), 1);
13
-
14
- ///
15
- /// Contextual color token.
16
- /// --mrl-color-focus-inverse -> --mrl-white -> rgba(255, 255, 255, 1).
17
- ///
18
- --mrl-color-focus-inverse: rgba(var(--mrl-white), 1);
19
-
20
- ///
21
- /// Contextual color token.
22
- /// --mrl-color-shadows -> --mrl-black -> rgba(0, 0, 0, 1).
23
- ///
24
- --mrl-color-shadows: rgba(var(--mrl-black), 1);
25
-
26
- ///
27
- /// Contextual color token.
28
- /// --mrl-color-brand -> --mrl-red-70 -> rgba(224, 41, 53, 1).
29
- ///
30
- --mrl-color-brand: rgba(var(--mrl-red-70), 1);
31
-
32
- ///
33
- /// Contextual color token.
34
- /// --mrl-color-brand-hover -> --mrl-red-80 -> rgba(179, 33, 42, 1).
35
- ///
36
- --mrl-color-brand-hover: rgba(var(--mrl-red-80), 1);
37
-
38
- ///
39
- /// Contextual color token.
40
- /// --mrl-color-brand-active -> --mrl-red-90 -> rgba(140, 26, 33, 1).
41
- ///
42
- --mrl-color-brand-active: rgba(var(--mrl-red-90), 1);
43
-
44
- ///
45
- /// Contextual color token.
46
- /// --mrl-color-accent -> --mrl-blue-70 -> rgba(48, 106, 227, 1).
47
- ///
48
- --mrl-color-accent: rgba(var(--mrl-blue-70), 1);
49
-
50
- ///
51
- /// Contextual color token.
52
- /// --mrl-color-skeleton -> --mrl-gray-20 -> rgba(236, 240, 244, 1).
53
- ///
54
- --mrl-color-skeleton: rgba(var(--mrl-gray-20), 1);
55
-
56
- ///
57
- /// Contextual color token.
58
- /// --mrl-color-skeleton-inverse -> --mrl-white -> rgba(255, 255, 255, 1).
59
- ///
60
- --mrl-color-skeleton-inverse: rgba(var(--mrl-white), 1);
61
-
62
- ///
63
- /// Contextual color token.
64
- /// --mrl-color-background -> --mrl-white -> rgba(255, 255, 255, 1).
65
- ///
66
- --mrl-color-background: rgba(var(--mrl-white), 1);
67
-
68
- ///
69
- /// Contextual color token.
70
- /// --mrl-color-background-secondary -> --mrl-gray-80 -> rgba(72, 82, 91, 1).
71
- ///
72
- --mrl-color-background-secondary: rgba(var(--mrl-gray-80), 1);
73
-
74
- ///
75
- /// Contextual color token.
76
- /// --mrl-color-background-decorative -> --mrl-gray-20 -> rgba(236, 240, 244, 1).
77
- ///
78
- --mrl-color-background-decorative: rgba(var(--mrl-gray-20), 1);
79
-
80
- ///
81
- /// Contextual color token.
82
- /// --mrl-color-background-highlight-secondary -> --mrl-blue-10 -> rgba(247, 250, 255, 1).
83
- ///
84
- --mrl-color-background-highlight-secondary: rgba(var(--mrl-blue-10), 1);
85
-
86
- ///
87
- /// Contextual color token.
88
- /// --mrl-color-background-info -> --mrl-status-info -> rgba(49, 99, 201, 1).
89
- ///
90
- --mrl-color-background-info: rgba(var(--mrl-status-info), 1);
91
-
92
- ///
93
- /// Contextual color token.
94
- /// --mrl-color-background-info-light -> --mrl-status-info-light -> rgba(236, 242, 254, 1).
95
- ///
96
- --mrl-color-background-info-light: rgba(var(--mrl-status-info-light), 1);
97
-
98
- ///
99
- /// Contextual color token.
100
- /// --mrl-color-background-success -> --mrl-status-success -> rgba(0, 132, 63, 1).
101
- ///
102
- --mrl-color-background-success: rgba(var(--mrl-status-success), 1);
103
-
104
- ///
105
- /// Contextual color token.
106
- /// --mrl-color-background-success-light -> --mrl-status-success-light -> rgba(243, 250, 235, 1).
107
- ///
108
- --mrl-color-background-success-light: rgba(var(--mrl-status-success-light), 1);
109
-
110
- ///
111
- /// Contextual color token.
112
- /// --mrl-color-background-warning -> --mrl-status-warning -> rgba(255, 170, 1, 1).
113
- ///
114
- --mrl-color-background-warning: rgba(var(--mrl-status-warning), 1);
115
-
116
- ///
117
- /// Contextual color token.
118
- /// --mrl-color-background-warning-light -> --mrl-status-warning-light -> rgba(254, 246, 231, 1).
119
- ///
120
- --mrl-color-background-warning-light: rgba(var(--mrl-status-warning-light), 1);
121
-
122
- ///
123
- /// Contextual color token.
124
- /// --mrl-color-background-error -> --mrl-status-error -> rgba(179, 33, 42, 1).
125
- ///
126
- --mrl-color-background-error: rgba(var(--mrl-status-error), 1);
127
-
128
- ///
129
- /// Contextual color token.
130
- /// --mrl-color-background-error-light -> --mrl-status-error-light -> rgba(252, 233, 235, 1).
131
- ///
132
- --mrl-color-background-error-light: rgba(var(--mrl-status-error-light), 1);
133
-
134
- ///
135
- /// Contextual color token.
136
- /// --mrl-color-background-private -> --mrl-gray-100 -> rgba(27, 31, 34, 1).
137
- ///
138
- --mrl-color-background-private: rgba(var(--mrl-gray-100), 1);
139
-
140
- ///
141
- /// Contextual color token.
142
- /// --mrl-color-background-inverse -> --mrl-gray-100 -> rgba(27, 31, 34, 1).
143
- ///
144
- --mrl-color-background-inverse: rgba(var(--mrl-gray-100), 1);
145
-
146
- ///
147
- /// Contextual color token.
148
- /// --mrl-color-background-inverse-hover -> --mrl-gray-90 -> rgba(40, 46, 52, 1).
149
- ///
150
- --mrl-color-background-inverse-hover: rgba(var(--mrl-gray-90), 1);
151
-
152
- ///
153
- /// Contextual color token.
154
- /// --mrl-color-background-disabled -> --mrl-gray-40 -> rgba(184, 193, 204, 1).
155
- ///
156
- --mrl-color-background-disabled: rgba(var(--mrl-gray-40), 1);
157
-
158
- ///
159
- /// Contextual color token.
160
- /// --mrl-color-background-highlight-hover -> --mrl-gray-20 -> rgba(236, 240, 244, 1).
161
- ///
162
- --mrl-color-background-highlight-hover: rgba(var(--mrl-gray-20), 1);
163
-
164
- ///
165
- /// Contextual color token.
166
- /// --mrl-color-background-highlight-active -> --mrl-gray-90 -> rgba(40, 46, 52, 1).
167
- ///
168
- --mrl-color-background-highlight-active: rgba(var(--mrl-gray-90), 1);
169
-
170
- ///
171
- /// Contextual color token.
172
- /// --mrl-color-background-highlight-selected -> --mrl-gray-100 -> rgba(27, 31, 34, 1).
173
- ///
174
- --mrl-color-background-highlight-selected: rgba(var(--mrl-gray-100), 1);
175
-
176
- ///
177
- /// Contextual color token.
178
- /// --mrl-color-background-highlight-emph-active -> --mrl-gray-30 -> rgba(220, 225, 229, 1).
179
- ///
180
- --mrl-color-background-highlight-emph-active: rgba(var(--mrl-gray-30), 1);
181
-
182
- ///
183
- /// Contextual color token.
184
- /// --mrl-color-line -> --mrl-gray-70 -> rgba(99, 112, 126, 1).
185
- ///
186
- --mrl-color-line: rgba(var(--mrl-gray-70), 1);
187
-
188
- ///
189
- /// Contextual color token.
190
- /// --mrl-color-line-hover -> --mrl-gray-90 -> rgba(40, 46, 52, 1).
191
- ///
192
- --mrl-color-line-hover: rgba(var(--mrl-gray-90), 1);
193
-
194
- ///
195
- /// Contextual color token.
196
- /// --mrl-color-line-active -> --mrl-gray-100 -> rgba(27, 31, 34, 1).
197
- ///
198
- --mrl-color-line-active: rgba(var(--mrl-gray-100), 1);
199
-
200
- ///
201
- /// Contextual color token.
202
- /// --mrl-color-line-selected -> --mrl-gray-90 -> rgba(40, 46, 52, 1).
203
- ///
204
- --mrl-color-line-selected: rgba(var(--mrl-gray-90), 1);
205
-
206
- ///
207
- /// Contextual color token.
208
- /// --mrl-color-line-disabled -> --mrl-gray-40 -> rgba(184, 193, 204, 1).
209
- ///
210
- --mrl-color-line-disabled: rgba(var(--mrl-gray-40), 1);
211
-
212
- ///
213
- /// Contextual color token.
214
- /// --mrl-color-line-highlight-secondary -> --mrl-blue-20 -> rgba(230, 244, 254, 1).
215
- ///
216
- --mrl-color-line-highlight-secondary: rgba(var(--mrl-blue-20), 1);
217
-
218
- ///
219
- /// Contextual color token.
220
- /// --mrl-color-line-divider -> --mrl-gray-20 -> rgba(236, 240, 244, 1).
221
- ///
222
- --mrl-color-line-divider: rgba(var(--mrl-gray-20), 1);
223
-
224
- ///
225
- /// Contextual color token.
226
- /// --mrl-color-line-divider-inverse -> --mrl-gray-80 -> rgba(72, 82, 91, 1).
227
- ///
228
- --mrl-color-line-divider-inverse: rgba(var(--mrl-gray-80), 1);
229
-
230
- ///
231
- /// Contextual color token.
232
- /// --mrl-color-line-emph -> --mrl-gray-20 -> rgba(236, 240, 244, 1).
233
- ///
234
- --mrl-color-line-emph: rgba(var(--mrl-gray-20), 1);
235
-
236
- ///
237
- /// Contextual color token.
238
- /// --mrl-color-line-emph-hover -> --mrl-gray-90 -> rgba(40, 46, 52, 1).
239
- ///
240
- --mrl-color-line-emph-hover: rgba(var(--mrl-gray-90), 1);
241
-
242
- ///
243
- /// Contextual color token.
244
- /// --mrl-color-line-emph-active -> --mrl-black -> rgba(0, 0, 0, 1).
245
- ///
246
- --mrl-color-line-emph-active: rgba(var(--mrl-black), 1);
247
-
248
- ///
249
- /// Contextual color token.
250
- /// --mrl-color-line-inverse -> --mrl-white -> rgba(255, 255, 255, 1).
251
- ///
252
- --mrl-color-line-inverse: rgba(var(--mrl-white), 1);
253
-
254
- ///
255
- /// Contextual color token.
256
- /// --mrl-color-line-inverse-disabled -> --mrl-white -> rgba(255, 255, 255, 1).
257
- ///
258
- --mrl-color-line-inverse-disabled: rgba(var(--mrl-white), 1);
259
-
260
- ///
261
- /// Contextual color token.
262
- /// --mrl-color-icon-light -> --mrl-gray-70 -> rgba(99, 112, 126, 1).
263
- ///
264
- --mrl-color-icon-light: rgba(var(--mrl-gray-70), 1);
265
-
266
- ///
267
- /// Contextual color token.
268
- /// --mrl-color-icon-disabled -> --mrl-gray-40 -> rgba(184, 193, 204, 1).
269
- ///
270
- --mrl-color-icon-disabled: rgba(var(--mrl-gray-40), 1);
271
-
272
- ///
273
- /// Contextual color token.
274
- /// --mrl-color-icon-inverse -> --mrl-white -> rgba(255, 255, 255, 1).
275
- ///
276
- --mrl-color-icon-inverse: rgba(var(--mrl-white), 1);
277
-
278
- ///
279
- /// Contextual color token.
280
- /// --mrl-color-input-icon-default -> --mrl-gray-70 -> rgba(99, 112, 126, 1).
281
- ///
282
- --mrl-color-input-icon-default: rgba(var(--mrl-gray-70), 1);
283
-
284
- ///
285
- /// Contextual color token.
286
- /// --mrl-color-text -> --mrl-gray-80 -> rgba(72, 82, 91, 1).
287
- ///
288
- --mrl-color-text: rgba(var(--mrl-gray-80), 1);
289
-
290
- ///
291
- /// Contextual color token.
292
- /// --mrl-color-text-hover -> --mrl-gray-90 -> rgba(40, 46, 52, 1).
293
- ///
294
- --mrl-color-text-hover: rgba(var(--mrl-gray-90), 1);
295
-
296
- ///
297
- /// Contextual color token.
298
- /// --mrl-color-text-active -> --mrl-gray-90 -> rgba(40, 46, 52, 1).
299
- ///
300
- --mrl-color-text-active: rgba(var(--mrl-gray-90), 1);
301
-
302
- ///
303
- /// Contextual color token.
304
- /// --mrl-color-text-selected -> --mrl-gray-100 -> rgba(27, 31, 34, 1).
305
- ///
306
- --mrl-color-text-selected: rgba(var(--mrl-gray-100), 1);
307
-
308
- ///
309
- /// Contextual color token.
310
- /// --mrl-color-text-disabled -> --mrl-gray-40 -> rgba(184, 193, 204, 1).
311
- ///
312
- --mrl-color-text-disabled: rgba(var(--mrl-gray-40), 1);
313
-
314
- ///
315
- /// Contextual color token.
316
- /// --mrl-color-text-disabled-inverse -> --mrl-white -> rgba(255, 255, 255, 1).
317
- ///
318
- --mrl-color-text-disabled-inverse: rgba(var(--mrl-white), 1);
319
-
320
- ///
321
- /// Contextual color token.
322
- /// --mrl-color-text-emph -> --mrl-gray-80 -> rgba(72, 82, 91, 1).
323
- ///
324
- --mrl-color-text-emph: rgba(var(--mrl-gray-80), 1);
325
-
326
- ///
327
- /// Contextual color token.
328
- /// --mrl-color-text-emph-hover -> --mrl-gray-90 -> rgba(40, 46, 52, 1).
329
- ///
330
- --mrl-color-text-emph-hover: rgba(var(--mrl-gray-90), 1);
331
-
332
- ///
333
- /// Contextual color token.
334
- /// --mrl-color-text-emph-active -> --mrl-black -> rgba(0, 0, 0, 1).
335
- ///
336
- --mrl-color-text-emph-active: rgba(var(--mrl-black), 1);
337
-
338
- ///
339
- /// Contextual color token.
340
- /// --mrl-color-text-highlight -> --mrl-gray-80 -> rgba(72, 82, 91, 1).
341
- ///
342
- --mrl-color-text-highlight: rgba(var(--mrl-gray-80), 1);
343
-
344
- ///
345
- /// Contextual color token.
346
- /// --mrl-color-text-highlight-hover -> --mrl-gray-90 -> rgba(40, 46, 52, 1).
347
- ///
348
- --mrl-color-text-highlight-hover: rgba(var(--mrl-gray-90), 1);
349
-
350
- ///
351
- /// Contextual color token.
352
- /// --mrl-color-text-highlight-active -> --mrl-white -> rgba(255, 255, 255, 1).
353
- ///
354
- --mrl-color-text-highlight-active: rgba(var(--mrl-white), 1);
355
-
356
- ///
357
- /// Contextual color token.
358
- /// --mrl-color-text-highlight-selected -> --mrl-white -> rgba(255, 255, 255, 1).
359
- ///
360
- --mrl-color-text-highlight-selected: rgba(var(--mrl-white), 1);
361
-
362
- ///
363
- /// Contextual color token.
364
- /// --mrl-color-text-highlight-emph -> --mrl-gray-90 -> rgba(40, 46, 52, 1).
365
- ///
366
- --mrl-color-text-highlight-emph: rgba(var(--mrl-gray-90), 1);
367
-
368
- ///
369
- /// Contextual color token.
370
- /// --mrl-color-text-highlight-emph-hover -> --mrl-gray-100 -> rgba(27, 31, 34, 1).
371
- ///
372
- --mrl-color-text-highlight-emph-hover: rgba(var(--mrl-gray-100), 1);
373
-
374
- ///
375
- /// Contextual color token.
376
- /// --mrl-color-text-highlight-emph-active -> --mrl-black -> rgba(0, 0, 0, 1).
377
- ///
378
- --mrl-color-text-highlight-emph-active: rgba(var(--mrl-black), 1);
379
-
380
- ///
381
- /// Contextual color token.
382
- /// --mrl-color-text-highlight-emph-selected -> --mrl-white -> rgba(255, 255, 255, 1).
383
- ///
384
- --mrl-color-text-highlight-emph-selected: rgba(var(--mrl-white), 1);
385
-
386
- ///
387
- /// Contextual color token.
388
- /// --mrl-color-text-inverse -> --mrl-white -> rgba(255, 255, 255, 1).
389
- ///
390
- --mrl-color-text-inverse: rgba(var(--mrl-white), 1);
391
-
392
- ///
393
- /// Contextual color token.
394
- /// --mrl-color-text-inverse-secondary -> --mrl-gray-10 -> rgba(249, 250, 250, 1).
395
- ///
396
- --mrl-color-text-inverse-secondary: rgba(var(--mrl-gray-10), 1);
397
-
398
- ///
399
- /// Contextual color token.
400
- /// --mrl-color-text-inverse-hover -> --mrl-white -> rgba(255, 255, 255, 1).
401
- ///
402
- --mrl-color-text-inverse-hover: rgba(var(--mrl-white), 1);
403
-
404
- ///
405
- /// Contextual color token.
406
- /// --mrl-color-text-inverse-active -> --mrl-white -> rgba(255, 255, 255, 1).
407
- ///
408
- --mrl-color-text-inverse-active: rgba(var(--mrl-white), 1);
409
-
410
- ///
411
- /// Contextual color token.
412
- /// --mrl-color-text-inverse-selected -> --mrl-white -> rgba(255, 255, 255, 1).
413
- ///
414
- --mrl-color-text-inverse-selected: rgba(var(--mrl-white), 1);
415
-
416
- ///
417
- /// Contextual color token.
418
- /// --mrl-color-text-02 -> --mrl-gray-90 -> rgba(40, 46, 52, 1).
419
- ///
420
- --mrl-color-text-02: rgba(var(--mrl-gray-90), 1);
421
-
422
- ///
423
- /// Contextual color token.
424
- /// --mrl-color-text-secondary -> --mrl-gray-70 -> rgba(99, 112, 126, 1).
425
- ///
426
- --mrl-color-text-secondary: rgba(var(--mrl-gray-70), 1);
427
-
428
- ///
429
- /// Contextual color token.
430
- /// --mrl-color-text-label -> --mrl-gray-100 -> rgba(27, 31, 34, 1).
431
- ///
432
- --mrl-color-text-label: rgba(var(--mrl-gray-100), 1);
433
-
434
- ///
435
- /// Contextual color token.
436
- /// --mrl-color-text-heading -> --mrl-gray-100 -> rgba(27, 31, 34, 1).
437
- ///
438
- --mrl-color-text-heading: rgba(var(--mrl-gray-100), 1);
439
-
440
- ///
441
- /// Contextual color token.
442
- /// --mrl-color-text-success -> --mrl-status-success -> rgba(0, 132, 63, 1).
443
- ///
444
- --mrl-color-text-success: rgba(var(--mrl-status-success), 1);
445
-
446
- ///
447
- /// Contextual color token.
448
- /// --mrl-color-text-warning -> --mrl-gray-90 -> rgba(40, 46, 52, 1).
449
- ///
450
- --mrl-color-text-warning: rgba(var(--mrl-gray-90), 1);
451
-
452
- ///
453
- /// Contextual color token.
454
- /// --mrl-color-text-warning-light -> --mrl-gray-80 -> rgba(72, 82, 91, 1).
455
- ///
456
- --mrl-color-text-warning-light: rgba(var(--mrl-gray-80), 1);
457
-
458
- ///
459
- /// Contextual color token.
460
- /// --mrl-color-text-error -> --mrl-status-error -> rgba(179, 33, 42, 1).
461
- ///
462
- --mrl-color-text-error: rgba(var(--mrl-status-error), 1);
463
-
464
- ///
465
- /// Contextual color token.
466
- /// --mrl-color-text-info -> --mrl-status-info -> rgba(49, 99, 201, 1).
467
- ///
468
- --mrl-color-text-info: rgba(var(--mrl-status-info), 1);
469
-
470
- ///
471
- /// Contextual color token.
472
- /// --mrl-color-text-private -> --mrl-gray-100 -> rgba(27, 31, 34, 1).
473
- ///
474
- --mrl-color-text-private: rgba(var(--mrl-gray-100), 1);
475
-
476
- ///
477
- /// Contextual color token.
478
- /// --mrl-color-icon-emph-selected -> --mrl-gray-100 -> rgba(27, 31, 34, 1).
479
- ///
480
- --mrl-color-icon-emph-selected: rgba(var(--mrl-gray-100), 1);
481
-
482
- /* Color tokens that are set to non-global tokens */
483
- ///
484
- /// Contextual color token.
485
- /// --mrl-color-background-inverse-active -> --mrl-color-accent -> rgba(48, 106, 227, 1).
486
- ///
487
- --mrl-color-background-inverse-active: var(--mrl-color-accent);
488
-
489
- ///
490
- /// Contextual color token.
491
- /// --mrl-color-background-inverse-selected -> --mrl-color-accent -> rgba(48, 106, 227, 1).
492
- ///
493
- --mrl-color-background-inverse-selected: var(--mrl-color-accent);
494
-
495
- ///
496
- /// Contextual color token.
497
- /// --mrl-color-background-highlight-emph-selected -> --mrl-color-accent -> rgba(48, 106, 227, 1).
498
- ///
499
- --mrl-color-background-highlight-emph-selected: var(--mrl-color-accent);
500
-
501
- ///
502
- /// Contextual color token.
503
- /// --mrl-color-line-emph-selected -> --mrl-color-accent -> rgba(48, 106, 227, 1).
504
- ///
505
- --mrl-color-line-emph-selected: var(--mrl-color-accent);
506
-
507
- ///
508
- /// Contextual color token.
509
- /// --mrl-color-text-emph-selected -> --mrl-color-accent -> rgba(48, 106, 227, 1).
510
- ///
511
- --mrl-color-text-emph-selected: var(--mrl-color-accent);
512
-
513
- // This is an intentional one-off contextual token
514
- --mrl-color-background-page: rgb(243, 245, 246); // #f3f5f6
515
-
516
- /* Colors with opacity */
517
- --mrl-color-background-hover-opacity: rgba(var(--mrl-gray-30), 0.2);
518
- --mrl-color-background-inverse-hover-opacity: var(--mrl-black-opacity-02);
519
- }
package/src/styles/contextual-variables/shadows.scss DELETED
@@ -1,44 +0,0 @@
1
- ////
2
- /// Contextual Shadow Tokens
3
- /// @group variables
4
- ////
5
-
6
- /**
7
- * Please note!
8
- * If you make a change to these tokens, please make sure that the
9
- * mrl-shadow mixin is changed as well. We need the tokens
10
- * to map to the drop-shadow filter!
11
- */
12
-
13
- /* Contextual Shadow Tokens */
14
- :root {
15
- ///
16
- /// Contextual shadow token.
17
- /// --mrl-shadows-lifted -> --mrl-shadow-01 -> 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 4px 4px 0 rgba(42, 82, 121, 0.04).
18
- ///
19
- --mrl-shadows-lifted: var(--mrl-shadow-01);
20
-
21
- ///
22
- /// Contextual shadow token.
23
- /// --mrl-shadows-raised -> --mrl-shadow-02 -> 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 6px 8px 0 rgba(42, 82, 121, 0.04).
24
- ///
25
- --mrl-shadows-raised: var(--mrl-shadow-02);
26
-
27
- ///
28
- /// Contextual shadow token.
29
- /// --mrl-shadows-floating -> --mrl-shadow-03 -> 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 24px 20px 0 rgba(42, 82, 121, 0.08).
30
- ///
31
- --mrl-shadows-floating: var(--mrl-shadow-03);
32
-
33
- ///
34
- /// Contextual shadow token.
35
- /// --mrl-shadows-hover -> --mrl-shadow-interactive-01 -> 0 4px 5px 0 rgba(24, 36, 47, 0.08).
36
- ///
37
- --mrl-shadows-hover: var(--mrl-shadow-interactive-01);
38
-
39
- ///
40
- /// Contextual shadow token.
41
- /// --mrl-shadows-drag -> --mrl-shadow-interactive-02 -> 0 12px 20px 0px rgba(27, 57, 75, 0.2).
42
- ///
43
- --mrl-shadows-drag: var(--mrl-shadow-interactive-02);
44
- }
package/src/styles/global-variables/border.scss DELETED
@@ -1,65 +0,0 @@
1
- ////
2
- /// Global Border Tokens
3
- /// @group variables
4
- ////
5
-
6
- /* Border Radius Tokens */
7
-
8
- /* Border Width Tokens */
9
-
10
- :root {
11
- ///
12
- /// Border radius token.
13
- ///
14
- --mrl-radii-01: 2px;
15
-
16
- ///
17
- /// Border radius token.
18
- ///
19
- --mrl-radii-02: 4px;
20
-
21
- ///
22
- /// Border radius token.
23
- ///
24
- --mrl-radii-03: 8px;
25
-
26
- ///
27
- /// Border radius token.
28
- ///
29
- --mrl-radii-04: 12px;
30
-
31
- ///
32
- /// Border radius token.
33
- ///
34
- --mrl-radii-05: 16px;
35
-
36
- ///
37
- /// Border radius token.
38
- ///
39
- --mrl-radii-06: 24px;
40
-
41
- ///
42
- /// Border radius token.
43
- ///
44
- --mrl-radii-07: 32px;
45
-
46
- ///
47
- /// Border radius token.
48
- ///
49
- --mrl-radii-08: 40px;
50
-
51
- ///
52
- /// Border width token.
53
- ///
54
- --mrl-stroke-01: 2px;
55
-
56
- ///
57
- /// Border width token.
58
- ///
59
- --mrl-stroke-02: 2px;
60
-
61
- ///
62
- /// Border width token.
63
- ///
64
- --mrl-stroke-03: 2px;
65
- }