@muraldevkit/ds-foundation 2.16.2-dev-JVec.1 → 2.18.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 (17) hide show
  1. package/dist/foundation.css +41 -87
  2. package/dist/foundation.css.map +1 -1
  3. package/dist/foundation.min.css +1 -1
  4. package/dist/foundation.min.css.map +1 -1
  5. package/dist/tokens/color.json +0 -32
  6. package/package.json +2 -2
  7. package/src/styles/contextual-variables/border.scss +187 -93
  8. package/src/styles/contextual-variables/color.scss +502 -164
  9. package/src/styles/contextual-variables/shadows.scss +29 -13
  10. package/src/styles/contextual-variables/spacing.scss +156 -41
  11. package/src/styles/contextual-variables/typography.scss +359 -117
  12. package/src/styles/global-variables/border.scss +53 -28
  13. package/src/styles/global-variables/color.scss +717 -317
  14. package/src/styles/global-variables/motion.scss +52 -27
  15. package/src/styles/global-variables/shadows.scss +24 -11
  16. package/src/styles/global-variables/spacing.scss +69 -22
  17. package/src/styles/global-variables/typography.scss +176 -60
package/src/styles/contextual-variables/color.scss CHANGED
@@ -3,174 +3,512 @@
3
3
  /// @group variables
4
4
  ////
5
5
 
6
- $mrl-contextual-color-vars: (
7
- // --------- Misc --------------
8
- // Miscellaneous color tokens
9
- 'focus': 'blue-70',
10
- 'focus-inverse': 'white',
11
- 'shadows': 'black',
12
- 'brand': 'red-70',
13
- 'brand-hover': 'red-80',
14
- 'brand-active': 'red-90',
15
- 'accent': 'blue-70',
16
- 'skeleton': 'gray-20',
17
- 'skeleton-inverse': 'white',
18
-
19
- // --------- Background --------------
20
- 'background': 'white',
21
- 'background-secondary': 'gray-80',
22
- 'background-decorative': 'gray-20',
23
- 'background-highlight-secondary': 'blue-10',
24
-
25
- // Status use cases
26
- // @TODO - remove private when releasing v2
27
- 'background-info': 'status-info',
28
- 'background-info-light': 'status-info-light',
29
- 'background-success': 'status-success',
30
- 'background-success-light': 'status-success-light',
31
- 'background-warning': 'status-warning',
32
- 'background-warning-light': 'status-warning-light',
33
- 'background-error': 'status-error',
34
- 'background-error-light': 'status-error-light',
35
- 'background-private': 'gray-100',
36
-
37
- // This is our primary inverse background color
38
- // but our status colors also use inverse text colors
39
- 'background-inverse': 'gray-100',
40
-
41
- // Used only when the background is using "background-inverse"
42
- // other colored backgrounds will have a different rule set that's TBD
43
- 'background-inverse-hover': 'gray-90',
44
-
45
- // Used only when there is a background on the element being disabled
46
- 'background-disabled': 'gray-40',
47
-
48
- // Used for Highlight
49
- 'background-highlight-hover': 'gray-20',
50
- 'background-highlight-active': 'gray-90',
51
- 'background-highlight-selected': 'gray-100',
52
-
53
- // Use to extend Highlight to add emphasis
54
- 'background-highlight-emph-active': 'gray-30',
55
-
56
- // --------- Line --------------
57
- 'line': 'gray-70',
58
- 'line-hover': 'gray-90',
59
- 'line-active': 'gray-100',
60
- 'line-selected': 'gray-90',
61
- 'line-disabled': 'gray-40',
62
- 'line-highlight-secondary': 'blue-20',
63
-
64
- // Design calls this "Light" but it's semantically used for dividers
65
- 'line-divider': 'gray-20',
66
- // Design calls this "Dark" but it's semantically used for dividers. This is intended for use on dark or saturated backgrounds
67
- 'line-divider-inverse': 'gray-80',
68
-
69
- // Used for Base with Emphasis
70
- 'line-emph': 'gray-20',
71
- 'line-emph-hover': 'gray-90',
72
- 'line-emph-active': 'black',
73
-
74
- // Inverse
75
- 'line-inverse': 'white',
76
- 'line-inverse-disabled': 'white',
77
- // @todo active and selected are TBD as Design finishes the inverse-secondary button
78
- // --------- Icons -------------
79
- 'icon-light': 'gray-70 ',
80
- 'icon-disabled': 'gray-40',
81
- 'icon-inverse': 'white',
82
- 'input-icon-default': 'gray-70',
83
-
84
- // --------- Text --------------
85
- 'text': 'gray-80',
86
- 'text-hover': 'gray-90',
87
- 'text-active': 'gray-90',
88
- 'text-selected': 'gray-100',
89
- 'text-disabled': 'gray-40',
90
- // Used when the background of the element uses the disabled color
91
- 'text-disabled-inverse': 'white',
92
-
93
- // Use for Base with Emphasis
94
- 'text-emph': 'gray-80',
95
- 'text-emph-hover': 'gray-90',
96
- 'text-emph-active': 'black',
97
-
98
- // Use for Highlight
99
- 'text-highlight': 'gray-80',
100
- 'text-highlight-hover': 'gray-90',
101
- 'text-highlight-active': 'white',
102
- 'text-highlight-selected': 'white',
103
-
104
- // Alternative to add emphasis to Highlight
105
- 'text-highlight-emph': 'gray-90',
106
- 'text-highlight-emph-hover': 'gray-100',
107
- 'text-highlight-emph-active': 'black',
108
- 'text-highlight-emph-selected': 'white',
109
-
110
- // Use for Inverse or any saturated background color (e.g. statuses)
111
- 'text-inverse': 'white',
112
- 'text-inverse-secondary': 'gray-10',
113
- 'text-inverse-hover': 'white',
114
- 'text-inverse-active': 'white',
115
- 'text-inverse-selected': 'white',
116
-
117
- // Static text color options
118
- 'text-02': 'gray-90',
119
- // Also used for placeholders
120
- 'text-secondary': 'gray-70',
121
- 'text-label': 'gray-100',
122
- 'text-heading': 'gray-100',
123
-
124
- // Status colors
125
- // @TODO - remove private with v2
126
- 'text-success': 'status-success',
127
- // For success messages on a white background
128
- 'text-warning': 'gray-90',
129
- // For warning messages on a white background
130
- 'text-warning-light': 'gray-80',
131
- 'text-error': 'status-error',
132
- // For error messages on a white background
133
- 'text-info': 'status-info',
134
- // For info messages on a white background
135
- 'text-private': 'gray-100',
136
-
137
- // For private messages on a white background
138
- // --------- Icon --------------
139
- // Used when there is an icon and you're following the Base with Emphasis style set
140
- // for all other states, the icon is the same color as the text
141
- 'icon-emph-selected': 'gray-100'
142
- );
143
-
144
- // These variables are referencing other contextual tokens and should not be wrapped by rgba
145
- $mrl-contextual-color-vars-2: (
146
- // --------- Background --------------
147
- // Used only when the background is using "background-inverse"
148
- // other colored backgrounds will have a different rule set that's TBD
149
- 'background-inverse-active': 'color-accent',
150
- 'background-inverse-selected': 'color-accent',
151
-
152
- // Use to extend Highlight to add emphasis
153
- 'background-highlight-emph-selected': 'color-accent',
154
-
155
- // --------- Line --------------
156
- // Used for Base with Emphasis
157
- 'line-emph-selected': 'color-accent',
158
-
159
- // --------- Text --------------
160
- // Use for Base with Emphasis
161
- 'text-emph-selected': 'color-accent'
162
- );
163
-
164
6
  :root {
165
7
  /* Color */
166
- @each $token-name, $token-value in $mrl-contextual-color-vars {
167
- --mrl-color-#{$token-name}: rgba(var(--mrl-#{$token-value}), 1);
168
- }
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);
169
481
 
170
482
  /* Color tokens that are set to non-global tokens */
171
- @each $token-name, $token-value in $mrl-contextual-color-vars-2 {
172
- --mrl-color-#{$token-name}: var(--mrl-#{$token-value});
173
- }
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);
174
512
 
175
513
  // This is an intentional one-off contextual token
176
514
  --mrl-color-background-page: rgb(243, 245, 246); // #f3f5f6