@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/typography.scss CHANGED
@@ -9,126 +9,314 @@
9
9
  // we implement mobile as the default since our implementation follows a mobile-first philosophy
10
10
  // for performance.
11
11
 
12
- /* Font Size Tokens */
13
- $mrl-contextual-font-size-vars: (
14
- 'display': '08',
15
- 'display-large': '09',
16
- 'display-small': '07',
17
- 'display-xsmall': '06',
18
-
19
- 'headline': '06',
20
- 'headline-large': '06',
21
- 'headline-small': '04',
22
-
23
- // Title & Interactive use cases follow Text's scale
24
- 'text': '04',
25
- 'text-large': '05',
26
- 'text-small': '03',
27
- 'text-xsmall': '02',
28
- 'text-xxsmall': '01'
29
- );
30
- $mrl-contextual-font-size-vars-large-viewport: (
31
- 'display': '09',
32
- 'display-large': '10',
33
- 'display-small': '08',
34
- 'display-xsmall': '07',
35
-
36
- 'headline': '06',
37
- 'headline-large': '07',
38
- 'headline-small': '04'
39
- );
40
-
41
- /* Line Height Tokens - Small Viewports */
42
- $mrl-contextual-line-height-vars: (
43
- 'title': '05',
44
- 'title-large': '06',
45
- 'title-small': '08',
46
- 'title-xsmall': '06',
47
- 'title-xxsmall': '06',
48
-
49
- 'display': '02',
50
- 'display-large': '02',
51
- 'display-small': '02',
52
- 'display-xsmall': '02',
53
-
54
- 'headline': '07',
55
- 'headline-large': '07',
56
- 'headline-small': '02',
57
-
58
- 'text': '09',
59
- 'text-large': '10',
60
- 'text-small': '08',
61
- 'text-xsmall': '06',
62
- 'text-xxsmall': '08',
63
-
64
- 'interactive': '09',
65
- 'interactive-large': '10',
66
- 'interactive-small': '08',
67
- 'interactive-xsmall': '06'
68
- );
69
-
70
- /* Line Height Tokens - Large Viewport Overrides */
71
- $mrl-contextual-line-height-vars-large-viewport: (
72
- 'headline': '07',
73
- 'headline-large': '06',
74
- 'headline-small': '09'
75
- );
76
-
77
- /* Font Weight Tokens */
78
- $mrl-contextual-font-weight-vars: (
79
- 'display': '01',
80
- 'headline': '04',
81
- 'title': '04',
82
- 'title-secondary': '02',
83
- 'text': '01',
84
- 'text-bold': '04',
85
- 'text-secondary': '01',
86
- 'interactive': '04'
87
- );
88
-
89
- /* Letter Spacing Tokens */
90
- $mrl-contextual-letter-spacing-vars: (
91
- 'display': '03',
92
- 'display-large': '02',
93
- 'display-small': '02',
94
- 'display-xsmall': '02',
95
-
96
- 'headline': '03',
97
- 'headline-large': '03',
98
- 'headline-small': '04',
99
-
100
- // title and interactive use cases follow the same scale as text
101
- 'text': '03',
102
- 'interactive-xsmall': '04'
103
- );
104
- $mrl-contextual-letter-spacing-vars-large-viewport: (
105
- 'headline-small': '03'
106
- );
107
-
108
12
  :root {
109
13
  --mrl-body-font: var(--mrl-font-family-01), sans-serif;
110
14
  --mrl-heading-font: var(--mrl-font-family-01), sans-serif;
111
15
  --mrl-heading-font-alt: var(--mrl-font-family-02), serif;
112
16
 
113
17
  // Typography - Font Size
114
- @each $token-name, $token-value in $mrl-contextual-font-size-vars {
115
- --mrl-type-size-#{$token-name}: var(--mrl-font-size-#{$token-value});
116
- }
18
+ ///
19
+ /// Contextual typography token.
20
+ /// --mrl-type-size-display -> --mrl-font-size-08 -> calc(32 / var(--mrl-baseline) * 1rem).
21
+ ///
22
+ --mrl-type-size-display: var(--mrl-font-size-08);
23
+
24
+ ///
25
+ /// Contextual typography token.
26
+ /// --mrl-type-size-display-large -> --mrl-font-size-09 -> calc(40 / var(--mrl-baseline) * 1rem).
27
+ ///
28
+ --mrl-type-size-display-large: var(--mrl-font-size-09);
29
+
30
+ ///
31
+ /// Contextual typography token.
32
+ /// --mrl-type-size-display-small -> --mrl-font-size-07 -> calc(24 / var(--mrl-baseline) * 1rem).
33
+ ///
34
+ --mrl-type-size-display-small: var(--mrl-font-size-07);
35
+
36
+ ///
37
+ /// Contextual typography token.
38
+ /// --mrl-type-size-display-xsmall -> --mrl-font-size-06 -> calc(20 / var(--mrl-baseline) * 1rem).
39
+ ///
40
+ --mrl-type-size-display-xsmall: var(--mrl-font-size-06);
41
+
42
+ ///
43
+ /// Contextual typography token.
44
+ /// --mrl-type-size-headline -> --mrl-font-size-06 -> calc(20 / var(--mrl-baseline) * 1rem).
45
+ ///
46
+ --mrl-type-size-headline: var(--mrl-font-size-06);
47
+
48
+ ///
49
+ /// Contextual typography token.
50
+ /// --mrl-type-size-headline-large -> --mrl-font-size-06 -> calc(20 / var(--mrl-baseline) * 1rem).
51
+ ///
52
+ --mrl-type-size-headline-large: var(--mrl-font-size-06);
53
+
54
+ ///
55
+ /// Contextual typography token.
56
+ /// --mrl-type-size-headline-small -> --mrl-font-size-04 -> calc(16 / var(--mrl-baseline) * 1rem).
57
+ ///
58
+ --mrl-type-size-headline-small: var(--mrl-font-size-04);
59
+
60
+ ///
61
+ /// Contextual typography token.
62
+ /// --mrl-type-size-text -> --mrl-font-size-04 -> calc(16 / var(--mrl-baseline) * 1rem).
63
+ ///
64
+ --mrl-type-size-text: var(--mrl-font-size-04);
65
+
66
+ ///
67
+ /// Contextual typography token.
68
+ /// --mrl-type-size-text-large -> --mrl-font-size-05 -> calc(18 / var(--mrl-baseline) * 1rem).
69
+ ///
70
+ --mrl-type-size-text-large: var(--mrl-font-size-05);
71
+
72
+ ///
73
+ /// Contextual typography token.
74
+ /// --mrl-type-size-text-small -> --mrl-font-size-03 -> calc(14 / var(--mrl-baseline) * 1rem).
75
+ ///
76
+ --mrl-type-size-text-small: var(--mrl-font-size-03);
77
+
78
+ ///
79
+ /// Contextual typography token.
80
+ /// --mrl-type-size-text-xsmall -> --mrl-font-size-02 -> calc(12 / var(--mrl-baseline) * 1rem).
81
+ ///
82
+ --mrl-type-size-text-xsmall: var(--mrl-font-size-02);
83
+
84
+ ///
85
+ /// Contextual typography token.
86
+ /// --mrl-type-size-text-xxsmall -> --mrl-font-size-01 -> calc(11 / var(--mrl-baseline) * 1rem).
87
+ ///
88
+ --mrl-type-size-text-xxsmall: var(--mrl-font-size-01);
117
89
 
118
90
  // Typography - Line Height
119
- @each $token-name, $token-value in $mrl-contextual-line-height-vars {
120
- --mrl-type-line-height-#{$token-name}: var(--mrl-line-height-#{$token-value});
121
- }
91
+ ///
92
+ /// Contextual typography token.
93
+ /// --mrl-type-line-height-title -> --mrl-line-height-05 -> 1.25.
94
+ ///
95
+ --mrl-type-line-height-title: var(--mrl-line-height-05);
96
+
97
+ ///
98
+ /// Contextual typography token.
99
+ /// --mrl-type-line-height-title-large -> --mrl-line-height-06 -> 1.333.
100
+ ///
101
+ --mrl-type-line-height-title-large: var(--mrl-line-height-06);
102
+
103
+ ///
104
+ /// Contextual typography token.
105
+ /// --mrl-type-line-height-title-small -> --mrl-line-height-08 -> 1.429.
106
+ ///
107
+ --mrl-type-line-height-title-small: var(--mrl-line-height-08);
108
+
109
+ ///
110
+ /// Contextual typography token.
111
+ /// --mrl-type-line-height-title-xsmall -> --mrl-line-height-06 -> 1.333.
112
+ ///
113
+ --mrl-type-line-height-title-xsmall: var(--mrl-line-height-06);
114
+
115
+ ///
116
+ /// Contextual typography token.
117
+ /// --mrl-type-line-height-title-xxsmall -> --mrl-line-height-06 -> 1.333.
118
+ ///
119
+ --mrl-type-line-height-title-xxsmall: var(--mrl-line-height-06);
120
+
121
+ ///
122
+ /// Contextual typography token.
123
+ /// --mrl-type-line-height-display -> --mrl-line-height-02 -> 1.
124
+ ///
125
+ --mrl-type-line-height-display: var(--mrl-line-height-02);
126
+
127
+ ///
128
+ /// Contextual typography token.
129
+ /// --mrl-type-line-height-display-large -> --mrl-line-height-02 -> 1.
130
+ ///
131
+ --mrl-type-line-height-display-large: var(--mrl-line-height-02);
132
+
133
+ ///
134
+ /// Contextual typography token.
135
+ /// --mrl-type-line-height-display-small -> --mrl-line-height-02 -> 1.
136
+ ///
137
+ --mrl-type-line-height-display-small: var(--mrl-line-height-02);
138
+
139
+ ///
140
+ /// Contextual typography token.
141
+ /// --mrl-type-line-height-display-xsmall -> --mrl-line-height-02 -> 1.
142
+ ///
143
+ --mrl-type-line-height-display-xsmall: var(--mrl-line-height-02);
144
+
145
+ ///
146
+ /// Contextual typography token.
147
+ /// --mrl-type-line-height-headline -> --mrl-line-height-07 -> 1.4.
148
+ ///
149
+ --mrl-type-line-height-headline: var(--mrl-line-height-07);
150
+
151
+ ///
152
+ /// Contextual typography token.
153
+ /// --mrl-type-line-height-headline-large -> --mrl-line-height-07 -> 1.4.
154
+ ///
155
+ --mrl-type-line-height-headline-large: var(--mrl-line-height-07);
156
+
157
+ ///
158
+ /// Contextual typography token.
159
+ /// --mrl-type-line-height-headline-small -> --mrl-line-height-02 -> 1.
160
+ ///
161
+ --mrl-type-line-height-headline-small: var(--mrl-line-height-02);
162
+
163
+ ///
164
+ /// Contextual typography token.
165
+ /// --mrl-type-line-height-text -> --mrl-line-height-09 -> 1.5.
166
+ ///
167
+ --mrl-type-line-height-text: var(--mrl-line-height-09);
168
+
169
+ ///
170
+ /// Contextual typography token.
171
+ /// --mrl-type-line-height-text-large -> --mrl-line-height-10 -> 1.56.
172
+ ///
173
+ --mrl-type-line-height-text-large: var(--mrl-line-height-10);
174
+
175
+ ///
176
+ /// Contextual typography token.
177
+ /// --mrl-type-line-height-text-small -> --mrl-line-height-08 -> 1.429.
178
+ ///
179
+ --mrl-type-line-height-text-small: var(--mrl-line-height-08);
180
+
181
+ ///
182
+ /// Contextual typography token.
183
+ /// --mrl-type-line-height-text-xsmall -> --mrl-line-height-06 -> 1.333.
184
+ ///
185
+ --mrl-type-line-height-text-xsmall: var(--mrl-line-height-06);
186
+
187
+ ///
188
+ /// Contextual typography token.
189
+ /// --mrl-type-line-height-text-xxsmall -> --mrl-line-height-08 -> 1.429.
190
+ ///
191
+ --mrl-type-line-height-text-xxsmall: var(--mrl-line-height-08);
192
+
193
+ ///
194
+ /// Contextual typography token.
195
+ /// --mrl-type-line-height-interactive -> --mrl-line-height-09 -> 1.5.
196
+ ///
197
+ --mrl-type-line-height-interactive: var(--mrl-line-height-09);
198
+
199
+ ///
200
+ /// Contextual typography token.
201
+ /// --mrl-type-line-height-interactive-large -> --mrl-line-height-10 -> 1.56.
202
+ ///
203
+ --mrl-type-line-height-interactive-large: var(--mrl-line-height-10);
204
+
205
+ ///
206
+ /// Contextual typography token.
207
+ /// --mrl-type-line-height-interactive-small -> --mrl-line-height-08 -> 1.429.
208
+ ///
209
+ --mrl-type-line-height-interactive-small: var(--mrl-line-height-08);
210
+
211
+ ///
212
+ /// Contextual typography token.
213
+ /// --mrl-type-line-height-interactive-xsmall -> --mrl-line-height-06 -> 1.333.
214
+ ///
215
+ --mrl-type-line-height-interactive-xsmall: var(--mrl-line-height-06);
122
216
 
123
217
  // Typography - Font Weight
124
- @each $token-name, $token-value in $mrl-contextual-font-weight-vars {
125
- --mrl-type-weight-#{$token-name}: var(--mrl-font-weight-#{$token-value});
126
- }
218
+ ///
219
+ /// Contextual typography token.
220
+ /// --mrl-type-weight-display -> --mrl-font-weight-01 -> 400.
221
+ ///
222
+ --mrl-type-weight-display: var(--mrl-font-weight-01);
223
+
224
+ ///
225
+ /// Contextual typography token.
226
+ /// --mrl-type-weight-headline -> --mrl-font-weight-04 -> 700.
227
+ ///
228
+ --mrl-type-weight-headline: var(--mrl-font-weight-04);
229
+
230
+ ///
231
+ /// Contextual typography token.
232
+ /// --mrl-type-weight-title -> --mrl-font-weight-04 -> 700.
233
+ ///
234
+ --mrl-type-weight-title: var(--mrl-font-weight-04);
235
+
236
+ ///
237
+ /// Contextual typography token.
238
+ /// --mrl-type-weight-title-secondary -> --mrl-font-weight-02 -> 500.
239
+ ///
240
+ --mrl-type-weight-title-secondary: var(--mrl-font-weight-02);
241
+
242
+ ///
243
+ /// Contextual typography token.
244
+ /// --mrl-type-weight-text -> --mrl-font-weight-01 -> 400.
245
+ ///
246
+ --mrl-type-weight-text: var(--mrl-font-weight-01);
247
+
248
+ ///
249
+ /// Contextual typography token.
250
+ /// --mrl-type-weight-text-bold -> --mrl-font-weight-04 -> 700.
251
+ ///
252
+ --mrl-type-weight-text-bold: var(--mrl-font-weight-04);
253
+
254
+ ///
255
+ /// Contextual typography token.
256
+ /// --mrl-type-weight-text-secondary -> --mrl-font-weight-01 -> 400.
257
+ ///
258
+ --mrl-type-weight-text-secondary: var(--mrl-font-weight-01);
259
+
260
+ ///
261
+ /// Contextual typography token.
262
+ /// --mrl-type-weight-interactive -> --mrl-font-weight-04 -> 700.
263
+ ///
264
+ --mrl-type-weight-interactive: var(--mrl-font-weight-04);
127
265
 
128
266
  // Typography - Letter Spacing
129
- @each $token-name, $token-value in $mrl-contextual-letter-spacing-vars {
130
- --mrl-type-spacing-#{$token-name}: var(--mrl-letter-spacing-#{$token-value});
131
- }
267
+ ///
268
+ /// Contextual typography token.
269
+ /// --mrl-type-spacing-display -> --mrl-letter-spacing-03 -> 0%.
270
+ ///
271
+ --mrl-type-spacing-display: var(--mrl-letter-spacing-03);
272
+
273
+ ///
274
+ /// Contextual typography token.
275
+ /// --mrl-type-spacing-display-large -> --mrl-letter-spacing-02 -> -1%.
276
+ ///
277
+ --mrl-type-spacing-display-large: var(--mrl-letter-spacing-02);
278
+
279
+ ///
280
+ /// Contextual typography token.
281
+ /// --mrl-type-spacing-display-small -> --mrl-letter-spacing-02 -> -1%.
282
+ ///
283
+ --mrl-type-spacing-display-small: var(--mrl-letter-spacing-02);
284
+
285
+ ///
286
+ /// Contextual typography token.
287
+ /// --mrl-type-spacing-display-xsmall -> --mrl-letter-spacing-02 -> -1%.
288
+ ///
289
+ --mrl-type-spacing-display-xsmall: var(--mrl-letter-spacing-02);
290
+
291
+ ///
292
+ /// Contextual typography token.
293
+ /// --mrl-type-spacing-headline -> --mrl-letter-spacing-03 -> 0%.
294
+ ///
295
+ --mrl-type-spacing-headline: var(--mrl-letter-spacing-03);
296
+
297
+ ///
298
+ /// Contextual typography token.
299
+ /// --mrl-type-spacing-headline-large -> --mrl-letter-spacing-03 -> 0%.
300
+ ///
301
+ --mrl-type-spacing-headline-large: var(--mrl-letter-spacing-03);
302
+
303
+ ///
304
+ /// Contextual typography token.
305
+ /// --mrl-type-spacing-headline-small -> --mrl-letter-spacing-04 -> 1%.
306
+ ///
307
+ --mrl-type-spacing-headline-small: var(--mrl-letter-spacing-04);
308
+
309
+ ///
310
+ /// Contextual typography token.
311
+ /// --mrl-type-spacing-text -> --mrl-letter-spacing-03 -> 0%.
312
+ ///
313
+ --mrl-type-spacing-text: var(--mrl-letter-spacing-03);
314
+
315
+ ///
316
+ /// Contextual typography token.
317
+ /// --mrl-type-spacing-interactive-xsmall -> --mrl-letter-spacing-04 -> 1%.
318
+ ///
319
+ --mrl-type-spacing-interactive-xsmall: var(--mrl-letter-spacing-04);
132
320
 
133
321
  // Toggleable label mixin variables
134
322
  // Exceptional value: this mixin renders a 10px font, which we have no variable for
@@ -141,18 +329,72 @@ $mrl-contextual-letter-spacing-vars-large-viewport: (
141
329
  @media screen and (min-width: 600px) {
142
330
  :root {
143
331
  // Typography - Font Size
144
- @each $token-name, $token-value in $mrl-contextual-font-size-vars-large-viewport {
145
- --mrl-type-size-#{$token-name}: var(--mrl-font-size-#{$token-value});
146
- }
332
+ ///
333
+ /// Contextual typography token.
334
+ /// --mrl-type-size-display -> --mrl-font-size-09 -> calc(40 / var(--mrl-baseline) * 1rem).
335
+ ///
336
+ --mrl-type-size-display: var(--mrl-font-size-09);
337
+
338
+ ///
339
+ /// Contextual typography token.
340
+ /// --mrl-type-size-display-large -> --mrl-font-size-10 -> calc(48 / var(--mrl-baseline) * 1rem).
341
+ ///
342
+ --mrl-type-size-display-large: var(--mrl-font-size-10);
343
+
344
+ ///
345
+ /// Contextual typography token.
346
+ /// --mrl-type-size-display-small -> --mrl-font-size-08 -> calc(32 / var(--mrl-baseline) * 1rem).
347
+ ///
348
+ --mrl-type-size-display-small: var(--mrl-font-size-08);
349
+
350
+ ///
351
+ /// Contextual typography token.
352
+ /// --mrl-type-size-display-xsmall -> --mrl-font-size-07 -> calc(24 / var(--mrl-baseline) * 1rem).
353
+ ///
354
+ --mrl-type-size-display-xsmall: var(--mrl-font-size-07);
355
+
356
+ ///
357
+ /// Contextual typography token.
358
+ /// --mrl-type-size-headline -> --mrl-font-size-06 -> calc(20 / var(--mrl-baseline) * 1rem).
359
+ ///
360
+ --mrl-type-size-headline: var(--mrl-font-size-06);
361
+
362
+ ///
363
+ /// Contextual typography token.
364
+ /// --mrl-type-size-headline-large -> --mrl-font-size-07 -> calc(24 / var(--mrl-baseline) * 1rem).
365
+ ///
366
+ --mrl-type-size-headline-large: var(--mrl-font-size-07);
367
+
368
+ ///
369
+ /// Contextual typography token.
370
+ /// --mrl-type-size-headline-small -> --mrl-font-size-04 -> calc(16 / var(--mrl-baseline) * 1rem).
371
+ ///
372
+ --mrl-type-size-headline-small: var(--mrl-font-size-04);
147
373
 
148
374
  // Typography - Line Height
149
- @each $token-name, $token-value in $mrl-contextual-line-height-vars-large-viewport {
150
- --mrl-type-line-height-#{$token-name}: var(--mrl-line-height-#{$token-value});
151
- }
375
+ ///
376
+ /// Contextual typography token.
377
+ /// --mrl-type-line-height-headline -> --mrl-line-height-07 -> 1.4.
378
+ ///
379
+ --mrl-type-line-height-headline: var(--mrl-line-height-07);
380
+
381
+ ///
382
+ /// Contextual typography token.
383
+ /// --mrl-type-line-height-headline-large -> --mrl-line-height-06 -> 1.333.
384
+ ///
385
+ --mrl-type-line-height-headline-large: var(--mrl-line-height-06);
386
+
387
+ ///
388
+ /// Contextual typography token.
389
+ /// --mrl-type-line-height-headline-small -> --mrl-line-height-09 -> 1.5.
390
+ ///
391
+ --mrl-type-line-height-headline-small: var(--mrl-line-height-09);
152
392
 
153
393
  // Typography - Letter Spacing
154
- @each $token-name, $token-value in $mrl-contextual-letter-spacing-vars-large-viewport {
155
- --mrl-type-spacing-#{$token-name}: var(--mrl-letter-spacing-#{$token-value});
156
- }
394
+ ///
395
+ /// Contextual typography token.
396
+ /// --mrl-type-spacing-headline-small -> --mrl-letter-spacing-03 -> 0%.
397
+ ///
398
+ --mrl-type-spacing-headline-small: var(--mrl-letter-spacing-03);
157
399
  }
158
400
  }
package/src/styles/global-variables/border.scss CHANGED
@@ -4,37 +4,62 @@
4
4
  ////
5
5
 
6
6
  /* Border Radius Tokens */
7
- // Values in the map is the number of pixels provided by design.
8
- $mrl-global-border-radius-vars: (
9
- "01": 2,
10
- "02": 4,
11
- "03": 8,
12
- "04": 12,
13
- "05": 16,
14
- "06": 24,
15
- "07": 32,
16
- "08": 40,
17
- );
18
7
 
19
8
  /* Border Width Tokens */
20
- // Values in the map is the number of pixels provided by design.
21
- // Note: We have to add 02 and 03 to have parity with Classic theme, which has 3
22
- // different line widths. We set them all to the same value (2px) in Foundation and these tokens are then overwritten in Classic.
23
- // This approach reduces the risk of breaking visual updates when Classic is disabled. When Classic
24
- // is deprecated, we should be able to deprecate and remove these tokens.
25
- $mrl-global-border-width-vars: (
26
- "01": 2,
27
- "02": 2,
28
- "03": 2,
29
- );
30
9
 
31
10
  :root {
32
- @each $token-name, $token-value in $mrl-global-border-radius-vars {
33
- --mrl-radii-#{$token-name}: #{$token-value}px;
34
- }
11
+ ///
12
+ /// Border radius token.
13
+ ///
14
+ --mrl-radii-01: 2px;
35
15
 
36
- @each $token-name, $token-value in $mrl-global-border-width-vars {
37
- --mrl-stroke-#{$token-name}: #{$token-value}px;
38
- }
39
- }
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
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
+ }