@eui/styles 19.3.9 → 19.3.10-snapshot-1764611477507
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.
|
@@ -46,7 +46,7 @@ $breakpoint-map: (
|
|
|
46
46
|
);
|
|
47
47
|
|
|
48
48
|
// naming
|
|
49
|
-
$xs: base.new-breakpoint(min-width map.get($breakpoint-map, 'xs') max-width map.get($breakpoint-map, '
|
|
49
|
+
$xs: base.new-breakpoint(min-width map.get($breakpoint-map, 'xs') max-width map.get($breakpoint-map, 'sm') - 1) !default;
|
|
50
50
|
$s: base.new-breakpoint(min-width map.get($breakpoint-map, 'sm') max-width map.get($breakpoint-map, 'md') - 1) !default;
|
|
51
51
|
$m: base.new-breakpoint(min-width map.get($breakpoint-map, 'md') max-width map.get($breakpoint-map, 'lg') - 1) !default;
|
|
52
52
|
$l: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg') max-width map.get($breakpoint-map, 'xl') - 1) !default;
|
|
@@ -55,8 +55,8 @@ $xxl: base.new-breakpoint(min-width map.get($breakpoint-map, 'xxl') max-width ma
|
|
|
55
55
|
$fhd: base.new-breakpoint(min-width map.get($breakpoint-map, 'fhd') max-width map.get($breakpoint-map, '2k') - 1) !default;
|
|
56
56
|
|
|
57
57
|
// human naming
|
|
58
|
-
$eui-bkp-mobile-
|
|
59
|
-
$eui-bkp-mobile:
|
|
58
|
+
$eui-bkp-mobile-xs: $xs !default;
|
|
59
|
+
$eui-bkp-mobile: $s !default;
|
|
60
60
|
$eui-bkp-mobile-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'md')) !default;
|
|
61
61
|
$eui-bkp-tablet: $m !default;
|
|
62
62
|
$eui-bkp-tablet-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg')) !default;
|
|
@@ -98,24 +98,24 @@ $opacity-map: (
|
|
|
98
98
|
|
|
99
99
|
$spacing-map: (
|
|
100
100
|
none: 0,
|
|
101
|
-
5xs: 0.0625rem, // 4xs
|
|
102
|
-
4xs: 0.125rem, // 3xs
|
|
103
|
-
3xs: 0.25rem, // 2xs
|
|
104
|
-
2xs: 0.375rem,
|
|
105
|
-
xs: 0.5rem, // ==
|
|
106
|
-
s: 0.75rem, // ==
|
|
107
|
-
m: 1rem, // ==
|
|
108
|
-
l: 1.25rem, // ==
|
|
109
|
-
xl: 1.5rem, // ==
|
|
110
|
-
2xl: 1.75rem, //
|
|
111
|
-
3xl: 2rem, // 2xl
|
|
112
|
-
4xl: 2.25rem, //
|
|
113
|
-
5xl: 2.5rem, // 3xl
|
|
114
|
-
6xl: 3rem, // 4xl
|
|
115
|
-
7xl: 3.5rem, // 5xl
|
|
116
|
-
8xl: 4rem, // 6xl
|
|
117
|
-
9xl: 4.5rem,
|
|
118
|
-
10xl: 5rem, // 7xl
|
|
101
|
+
5xs: 0.0625rem, // 4xs - 1px
|
|
102
|
+
4xs: 0.125rem, // 3xs - 2px
|
|
103
|
+
3xs: 0.25rem, // 2xs - 4px
|
|
104
|
+
2xs: 0.375rem, // - 6px
|
|
105
|
+
xs: 0.5rem, // == - 8px
|
|
106
|
+
s: 0.75rem, // == - 12px
|
|
107
|
+
m: 1rem, // == - 16px
|
|
108
|
+
l: 1.25rem, // == - 20px
|
|
109
|
+
xl: 1.5rem, // == - 24px
|
|
110
|
+
2xl: 1.75rem, // - 28px
|
|
111
|
+
3xl: 2rem, // 2xl - 32px
|
|
112
|
+
4xl: 2.25rem, // - 36px
|
|
113
|
+
5xl: 2.5rem, // 3xl - 40px
|
|
114
|
+
6xl: 3rem, // 4xl - 48px
|
|
115
|
+
7xl: 3.5rem, // 5xl - 56px
|
|
116
|
+
8xl: 4rem, // 6xl - 64px
|
|
117
|
+
9xl: 4.5rem, // - 72px
|
|
118
|
+
10xl: 5rem, // 7xl - 80px
|
|
119
119
|
);
|
|
120
120
|
|
|
121
121
|
|
|
@@ -198,19 +198,19 @@ $ecl-colors: (
|
|
|
198
198
|
'grey-950': #00002e,
|
|
199
199
|
|
|
200
200
|
// Status
|
|
201
|
-
'info-25': #
|
|
202
|
-
'info-50': #
|
|
203
|
-
'info-75': #
|
|
204
|
-
'info-100': #
|
|
205
|
-
'info-200': #
|
|
206
|
-
'info-300': #
|
|
207
|
-
'info-400': #
|
|
208
|
-
'info-500': #
|
|
201
|
+
'info-25': #f9fbfd,
|
|
202
|
+
'info-50': #f5f7fb,
|
|
203
|
+
'info-75': #ebeff7,
|
|
204
|
+
'info-100': #dee4f2,
|
|
205
|
+
'info-200': #bfcce6,
|
|
206
|
+
'info-300': #a3b6da,
|
|
207
|
+
'info-400': #859dce,
|
|
208
|
+
'info-500': #6685c2,
|
|
209
209
|
'info-600': #3b62b0,
|
|
210
|
-
'info-700': #
|
|
211
|
-
'info-800': #
|
|
212
|
-
'info-900': #
|
|
213
|
-
'info-950': #
|
|
210
|
+
'info-700': #1c49a4,
|
|
211
|
+
'info-800': #039,
|
|
212
|
+
'info-900': #00297a,
|
|
213
|
+
'info-950': #001f5c,
|
|
214
214
|
|
|
215
215
|
'success-25': #f9fefc,
|
|
216
216
|
'success-50': #edfbf6,
|
|
@@ -252,9 +252,188 @@ $ecl-colors: (
|
|
|
252
252
|
'warning-700': #ba6517,
|
|
253
253
|
'warning-800': #8b4c11,
|
|
254
254
|
'warning-900': #68390d,
|
|
255
|
-
'warning-950': #512c0a
|
|
255
|
+
'warning-950': #512c0a,
|
|
256
|
+
|
|
257
|
+
// Priority colors
|
|
258
|
+
'blue-50': #e6edff,
|
|
259
|
+
'blue-100': #d9e3ff,
|
|
260
|
+
'blue-200': #b0c6ff,
|
|
261
|
+
'blue-300': #8cacff,
|
|
262
|
+
'blue-400': #5987ff,
|
|
263
|
+
'blue-500': #0046ff,
|
|
264
|
+
'blue-600': #003fe6,
|
|
265
|
+
'blue-700': #0038cc,
|
|
266
|
+
'blue-800': #0035bf,
|
|
267
|
+
'blue-900': #002a99,
|
|
268
|
+
|
|
269
|
+
'blue-navy-50': #f5f5fa,
|
|
270
|
+
'blue-navy-100': #f0f0f8,
|
|
271
|
+
'blue-navy-200': #d9d9ec,
|
|
272
|
+
'blue-navy-300': #bfbfe0,
|
|
273
|
+
'blue-navy-400': #a0a0d1,
|
|
274
|
+
'blue-navy-500': #8c8cc7,
|
|
275
|
+
'blue-navy-600': #4545a4,
|
|
276
|
+
'blue-navy-700': #000083,
|
|
277
|
+
'blue-navy-800': #000069,
|
|
278
|
+
'blue-navy-900': #00002e,
|
|
279
|
+
|
|
280
|
+
'blue-electric-50': #e6f8fd,
|
|
281
|
+
'blue-electric-100': #d9f5fb,
|
|
282
|
+
'blue-electric-200': #b1eaf7,
|
|
283
|
+
'blue-electric-300': #5bd3ef,
|
|
284
|
+
'blue-electric-400': #03bbe6,
|
|
285
|
+
'blue-electric-500': #03a8cf,
|
|
286
|
+
'blue-electric-600': #028cad,
|
|
287
|
+
'blue-electric-700': #02708a,
|
|
288
|
+
'blue-electric-800': #015467,
|
|
289
|
+
'blue-electric-900': #014959,
|
|
290
|
+
|
|
291
|
+
'green-50': #e6f9f2,
|
|
292
|
+
'green-100': #daf6eb,
|
|
293
|
+
'green-200': #b2edd6,
|
|
294
|
+
'green-300': #8fe5c4,
|
|
295
|
+
'green-400': #5ddaa9,
|
|
296
|
+
'green-500': #05c67b,
|
|
297
|
+
'green-600': #05b26f,
|
|
298
|
+
'green-700': #049e62,
|
|
299
|
+
'green-800': #04955c,
|
|
300
|
+
'green-900': #03774a,
|
|
301
|
+
|
|
302
|
+
'green-dark-50': #e6f0f0,
|
|
303
|
+
'green-dark-100': #d9e8e8,
|
|
304
|
+
'green-dark-200': #b0d0d0,
|
|
305
|
+
'green-dark-300': #8cbaba,
|
|
306
|
+
'green-dark-400': #599c9c,
|
|
307
|
+
'green-dark-500': #066,
|
|
308
|
+
'green-dark-600': #005c5c,
|
|
309
|
+
'green-dark-700': #005252,
|
|
310
|
+
'green-dark-800': #004d4d,
|
|
311
|
+
'green-dark-900': #003d3d,
|
|
312
|
+
|
|
313
|
+
'orange-50': #fff3e9,
|
|
314
|
+
'orange-100': #ffdbba,
|
|
315
|
+
'orange-200': #ffc998,
|
|
316
|
+
'orange-300': #ffb16a,
|
|
317
|
+
'orange-400': #ffa14d,
|
|
318
|
+
'orange-500': #ff8a20,
|
|
319
|
+
'orange-600': #e87e1d,
|
|
320
|
+
'orange-700': #b56217,
|
|
321
|
+
'orange-800': #8c4c12,
|
|
322
|
+
'orange-900': #6b3a0d,
|
|
323
|
+
|
|
324
|
+
'purple-50': #f4effb,
|
|
325
|
+
'purple-100': #ddcdf3,
|
|
326
|
+
'purple-200': #ccb5ee,
|
|
327
|
+
'purple-300': #b594e6,
|
|
328
|
+
'purple-400': #a67fe1,
|
|
329
|
+
'purple-500': #905fd9,
|
|
330
|
+
'purple-600': #8356c5,
|
|
331
|
+
'purple-700': #66439a,
|
|
332
|
+
'purple-800': #4f3477,
|
|
333
|
+
'purple-900': #3c285b,
|
|
334
|
+
|
|
335
|
+
// Supplementary colors
|
|
336
|
+
'blue-ocean-50': #e8f8f6,
|
|
337
|
+
'blue-ocean-100': #dcf5f2,
|
|
338
|
+
'blue-ocean-200': #b7eae4,
|
|
339
|
+
'blue-ocean-300': #97e0d8,
|
|
340
|
+
'blue-ocean-400': #69d2c6,
|
|
341
|
+
'blue-ocean-500': #18baa8,
|
|
342
|
+
'blue-ocean-600': #16a797,
|
|
343
|
+
'blue-ocean-700': #139586,
|
|
344
|
+
'blue-ocean-800': #128c7e,
|
|
345
|
+
'blue-ocean-900': #0e7065,
|
|
346
|
+
|
|
347
|
+
'green-lemon-50': #fafcee,
|
|
348
|
+
'green-lemon-100': #f7fbe5,
|
|
349
|
+
'green-lemon-200': #eff6c9,
|
|
350
|
+
'green-lemon-300': #e8f2b0,
|
|
351
|
+
'green-lemon-400': #ddec8d,
|
|
352
|
+
'green-lemon-500': #cbe250,
|
|
353
|
+
'green-lemon-600': #b7cb48,
|
|
354
|
+
'green-lemon-700': #a2b540,
|
|
355
|
+
'green-lemon-800': #98aa3c,
|
|
356
|
+
'green-lemon-900': #7a8830,
|
|
357
|
+
|
|
358
|
+
'green-pine-50': #eff3f3,
|
|
359
|
+
'green-pine-100': #dae2e4,
|
|
360
|
+
'green-pine-200': #ced8db,
|
|
361
|
+
'green-pine-300': #b6c6ca,
|
|
362
|
+
'green-pine-400': #94abb1,
|
|
363
|
+
'green-pine-500': #809ba2,
|
|
364
|
+
'green-pine-600': #445c63,
|
|
365
|
+
'green-pine-700': #0a3f4d,
|
|
366
|
+
'green-pine-800': #08323e,
|
|
367
|
+
'green-pine-900': #082f3a,
|
|
368
|
+
|
|
369
|
+
'red-crayola-50': #fcebee,
|
|
370
|
+
'red-crayola-100': #f6c1ca,
|
|
371
|
+
'red-crayola-200': #f2a3b1,
|
|
372
|
+
'red-crayola-300': #ec798d,
|
|
373
|
+
'red-crayola-400': #e95f77,
|
|
374
|
+
'red-crayola-500': #e33755,
|
|
375
|
+
'red-crayola-600': #cf324d,
|
|
376
|
+
'red-crayola-700': #a1273c,
|
|
377
|
+
'red-crayola-800': #7d1e2f,
|
|
378
|
+
'red-crayola-900': #5f1724,
|
|
379
|
+
|
|
380
|
+
'warm-grey-50': #f6f4f3,
|
|
381
|
+
'warm-grey-100': #e2dcda,
|
|
382
|
+
'warm-grey-200': #d3cbc8,
|
|
383
|
+
'warm-grey-300': #bfb4af,
|
|
384
|
+
'warm-grey-400': #b3a59f,
|
|
385
|
+
'warm-grey-500': #a08f87,
|
|
386
|
+
'warm-grey-600': #92827b,
|
|
387
|
+
'warm-grey-700': #726660,
|
|
388
|
+
'warm-grey-800': #584f4a,
|
|
389
|
+
'warm-grey-900': #433c39,
|
|
390
|
+
|
|
391
|
+
'yellow-gold-50': #fffae6,
|
|
392
|
+
'yellow-gold-100': #fff3c2,
|
|
393
|
+
'yellow-gold-200': #ffea91,
|
|
394
|
+
'yellow-gold-300': #ffe05e,
|
|
395
|
+
'yellow-gold-400': #ffd72e,
|
|
396
|
+
'yellow-gold-500': #ffce00,
|
|
397
|
+
'yellow-gold-600': #d9af00,
|
|
398
|
+
'yellow-gold-700': #b59200,
|
|
399
|
+
'yellow-gold-800': #917500,
|
|
400
|
+
'yellow-gold-900': #735d00,
|
|
401
|
+
|
|
402
|
+
'orange-abricot-50': #fff9ed,
|
|
403
|
+
'orange-abricot-100': #fff1d4,
|
|
404
|
+
'orange-abricot-200': #ffdfa9,
|
|
405
|
+
'orange-abricot-300': #ffbe5c,
|
|
406
|
+
'orange-abricot-400': #fea439,
|
|
407
|
+
'orange-abricot-500': #fc8713,
|
|
408
|
+
'orange-abricot-600': #ed6c09,
|
|
409
|
+
'orange-abricot-700': #c55109,
|
|
410
|
+
'orange-abricot-800': #9c4010,
|
|
411
|
+
'orange-abricot-900': #7e3610,
|
|
412
|
+
|
|
413
|
+
'purple-violet-50': #f3f1ff,
|
|
414
|
+
'purple-violet-100': #dbd4ff,
|
|
415
|
+
'purple-violet-200': #cabfff,
|
|
416
|
+
'purple-violet-300': #b1a1ff,
|
|
417
|
+
'purple-violet-400': #a28fff,
|
|
418
|
+
'purple-violet-500': #8b73ff,
|
|
419
|
+
'purple-violet-600': #7e69e8,
|
|
420
|
+
'purple-violet-700': #6352b5,
|
|
421
|
+
'purple-violet-800': #4c3f8c,
|
|
422
|
+
'purple-violet-900': #3a306b,
|
|
423
|
+
|
|
424
|
+
'red-tomato-50': #fff0ed,
|
|
425
|
+
'red-tomato-100': #ffd0c7,
|
|
426
|
+
'red-tomato-200': #ffbaac,
|
|
427
|
+
'red-tomato-300': #ff9a86,
|
|
428
|
+
'red-tomato-400': #ff866e,
|
|
429
|
+
'red-tomato-500': #ff684a,
|
|
430
|
+
'red-tomato-600': #e85f43,
|
|
431
|
+
'red-tomato-700': #b54a35,
|
|
432
|
+
'red-tomato-800': #8c3929,
|
|
433
|
+
'red-tomato-900': #6b2c1f
|
|
256
434
|
);
|
|
257
435
|
|
|
436
|
+
|
|
258
437
|
$color-map: (
|
|
259
438
|
br: (
|
|
260
439
|
950: map.get($ecl-colors, 'grey-950'),
|
|
@@ -305,7 +484,7 @@ $color-map: (
|
|
|
305
484
|
100: #e4e4e4,
|
|
306
485
|
75: #efefef,
|
|
307
486
|
50: #f7f7f7,
|
|
308
|
-
25: #fbfbfb
|
|
487
|
+
25: #fbfbfb
|
|
309
488
|
),
|
|
310
489
|
in: (
|
|
311
490
|
950: map.get($ecl-colors, 'info-950'),
|
|
@@ -384,6 +563,13 @@ $color-map: (
|
|
|
384
563
|
)
|
|
385
564
|
);
|
|
386
565
|
|
|
566
|
+
|
|
567
|
+
|
|
568
|
+
|
|
569
|
+
|
|
570
|
+
|
|
571
|
+
|
|
572
|
+
|
|
387
573
|
// COLOR STATES
|
|
388
574
|
|
|
389
575
|
$color-state-map: (
|
|
@@ -391,33 +577,34 @@ $color-state-map: (
|
|
|
391
577
|
base: 'br-900',
|
|
392
578
|
default: 'br-900',
|
|
393
579
|
lighter: 'br-700',
|
|
394
|
-
on-lighter: 'br-700-contrast',
|
|
395
580
|
light: 'br-800',
|
|
396
|
-
on-light: 'br-800-contrast',
|
|
397
581
|
dark: 'br-950',
|
|
398
|
-
|
|
582
|
+
surface: 'br-900',
|
|
583
|
+
on-surface: 'br-900-contrast',
|
|
584
|
+
surface-light: 'br-800',
|
|
585
|
+
on-surface-light: 'br-800-contrast',
|
|
586
|
+
surface-dark: 'br-950',
|
|
587
|
+
on-surface-dark: 'br-950-contrast'
|
|
399
588
|
),
|
|
400
589
|
primary: (
|
|
401
590
|
base: 'pr-600',
|
|
402
591
|
default: 'pr-700',
|
|
403
592
|
lighter: 'pr-500',
|
|
404
|
-
on-lighter: 'pr-500-contrast',
|
|
405
593
|
light: 'pr-600',
|
|
406
|
-
on-light: 'pr-600-contrast',
|
|
407
594
|
dark: 'pr-900',
|
|
408
|
-
on-dark: 'pr-900-contrast',
|
|
409
595
|
darker: 'pr-950',
|
|
410
|
-
on-darker: 'pr-950-contrast',
|
|
411
596
|
surface-light: 'pr-75',
|
|
412
597
|
on-surface-light: 'pr-900',
|
|
413
598
|
surface-light-hover: 'pr-100',
|
|
414
599
|
on-surface-light-hover: 'pr-950',
|
|
415
600
|
surface-medium: 'pr-200',
|
|
416
|
-
on-surface-medium: 'pr-
|
|
601
|
+
on-surface-medium: 'pr-200-contrast',
|
|
417
602
|
surface: 'pr-600',
|
|
418
603
|
on-surface: 'pr-600-contrast',
|
|
419
604
|
surface-hover: 'pr-700',
|
|
420
605
|
on-surface-hover: 'pr-700-contrast',
|
|
606
|
+
surface-dark: 'pr-900',
|
|
607
|
+
on-surface-dark: 'pr-900-contrast',
|
|
421
608
|
border: 'pr-500',
|
|
422
609
|
border-light: 'pr-300',
|
|
423
610
|
border-lighter: 'pr-200'
|
|
@@ -426,38 +613,32 @@ $color-state-map: (
|
|
|
426
613
|
base: 'gr-500',
|
|
427
614
|
default: 'gr-800',
|
|
428
615
|
lighter: 'gr-600',
|
|
429
|
-
on-lighter: 'gr-600-contrast',
|
|
430
616
|
light: 'gr-700',
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
on-dark: 'gr-900-contrast',
|
|
434
|
-
darker: 'gr-950',
|
|
435
|
-
on-darker: 'gr-950-contrast',
|
|
617
|
+
dark: 'gr-900',
|
|
618
|
+
darker: 'gr-950',
|
|
436
619
|
surface-light: 'gr-50',
|
|
437
620
|
on-surface-light: 'gr-900',
|
|
438
621
|
surface-light-hover: 'gr-75',
|
|
439
622
|
on-surface-light-hover: 'gr-950',
|
|
440
|
-
surface-medium: 'gr-
|
|
623
|
+
surface-medium: 'gr-100',
|
|
441
624
|
on-surface-medium: 'gr-900',
|
|
442
625
|
surface: 'gr-600',
|
|
443
626
|
on-surface: 'gr-600-contrast',
|
|
444
627
|
surface-hover: 'gr-700',
|
|
445
628
|
on-surface-hover: 'gr-700-contrast',
|
|
629
|
+
surface-dark: 'gr-900',
|
|
630
|
+
on-surface-dark: 'gr-900-contrast',
|
|
446
631
|
border: 'gr-500',
|
|
447
|
-
border-light: 'gr-
|
|
448
|
-
border-lighter: 'gr-
|
|
632
|
+
border-light: 'gr-300',
|
|
633
|
+
border-lighter: 'gr-200'
|
|
449
634
|
),
|
|
450
635
|
neutral: (
|
|
451
636
|
base: 'grn-500',
|
|
452
637
|
default: 'grn-800',
|
|
453
638
|
lighter: 'grn-600',
|
|
454
|
-
on-lighter: 'grn-600-contrast',
|
|
455
639
|
light: 'grn-700',
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
on-dark: 'grn-900-contrast',
|
|
459
|
-
darker: 'grn-950',
|
|
460
|
-
on-darker: 'grn-950-contrast',
|
|
640
|
+
dark: 'grn-900',
|
|
641
|
+
darker: 'grn-950',
|
|
461
642
|
surface-light: 'grn-50',
|
|
462
643
|
on-surface-light: 'grn-900',
|
|
463
644
|
surface-light-hover: 'grn-75',
|
|
@@ -468,6 +649,8 @@ $color-state-map: (
|
|
|
468
649
|
on-surface: 'grn-400-contrast',
|
|
469
650
|
surface-hover: 'grn-300',
|
|
470
651
|
on-surface-hover: 'grn-300-contrast',
|
|
652
|
+
surface-dark: 'grn-900',
|
|
653
|
+
on-surface-dark: 'grn-900-contrast',
|
|
471
654
|
border: 'grn-500',
|
|
472
655
|
border-light: 'grn-400',
|
|
473
656
|
border-lighter: 'grn-300'
|
|
@@ -476,13 +659,9 @@ $color-state-map: (
|
|
|
476
659
|
base: 'cta-400',
|
|
477
660
|
default: 'cta-900',
|
|
478
661
|
lighter: 'cta-400',
|
|
479
|
-
on-lighter: 'cta-400-contrast',
|
|
480
662
|
light: 'cta-500',
|
|
481
|
-
on-light: 'cta-500-contrast',
|
|
482
663
|
dark: 'cta-800',
|
|
483
|
-
on-dark: 'cta-800-contrast',
|
|
484
664
|
darker: 'cta-900',
|
|
485
|
-
on-darker: 'cta-900-contrast',
|
|
486
665
|
surface-light: 'cta-25',
|
|
487
666
|
on-surface-light: 'cta-800',
|
|
488
667
|
surface-light-hover: 'cta-50',
|
|
@@ -493,6 +672,8 @@ $color-state-map: (
|
|
|
493
672
|
on-surface: 'cta-400-contrast',
|
|
494
673
|
surface-hover: 'cta-500',
|
|
495
674
|
on-surface-hover: 'cta-500-contrast',
|
|
675
|
+
surface-dark: 'cta-600',
|
|
676
|
+
on-surface-dark: 'cta-600-contrast',
|
|
496
677
|
border: 'cta-300',
|
|
497
678
|
border-light: 'cta-100',
|
|
498
679
|
border-lighter: 'cta-75'
|
|
@@ -501,38 +682,32 @@ $color-state-map: (
|
|
|
501
682
|
base: 'in-500',
|
|
502
683
|
default: 'in-600',
|
|
503
684
|
lighter: 'in-400',
|
|
504
|
-
on-lighter: 'in-400-contrast',
|
|
505
685
|
light: 'in-500',
|
|
506
|
-
on-light: 'in-500-contrast',
|
|
507
686
|
dark: 'in-800',
|
|
508
|
-
on-dark: 'in-800-contrast',
|
|
509
687
|
darker: 'in-900',
|
|
510
|
-
|
|
511
|
-
surface-light: 'in-50',
|
|
688
|
+
surface-light: 'in-75',
|
|
512
689
|
on-surface-light: 'in-600',
|
|
513
|
-
surface-light-hover: 'in-
|
|
690
|
+
surface-light-hover: 'in-100',
|
|
514
691
|
on-surface-light-hover: 'in-800',
|
|
515
|
-
surface-medium: 'in-
|
|
692
|
+
surface-medium: 'in-200',
|
|
516
693
|
on-surface-medium: 'in-950',
|
|
517
694
|
surface: 'in-600',
|
|
518
695
|
on-surface: 'in-600-contrast',
|
|
519
696
|
surface-hover: 'in-800',
|
|
520
697
|
on-surface-hover: 'in-800-contrast',
|
|
698
|
+
surface-dark: 'in-800',
|
|
699
|
+
on-surface-dark: 'in-800-contrast',
|
|
521
700
|
border: 'in-400',
|
|
522
|
-
border-light: 'in-
|
|
523
|
-
border-lighter: 'in-
|
|
701
|
+
border-light: 'in-300',
|
|
702
|
+
border-lighter: 'in-200'
|
|
524
703
|
),
|
|
525
704
|
success: (
|
|
526
705
|
base: 'su-700',
|
|
527
706
|
default: 'su-900',
|
|
528
707
|
lighter: 'su-700',
|
|
529
|
-
on-lighter: 'su-700-contrast',
|
|
530
708
|
light: 'su-800',
|
|
531
|
-
on-light: 'su-800-contrast',
|
|
532
709
|
dark: 'su-900',
|
|
533
|
-
on-dark: 'su-900-contrast',
|
|
534
710
|
darker: 'su-950',
|
|
535
|
-
on-darker: 'su-950-contrast',
|
|
536
711
|
surface-light: 'su-100',
|
|
537
712
|
on-surface-light: 'su-950',
|
|
538
713
|
surface-light-hover: 'su-200',
|
|
@@ -543,21 +718,19 @@ $color-state-map: (
|
|
|
543
718
|
on-surface: 'su-950-contrast',
|
|
544
719
|
surface-hover: 'su-950',
|
|
545
720
|
on-surface-hover: 'su-950-contrast',
|
|
721
|
+
surface-dark: 'su-950',
|
|
722
|
+
on-surface-dark: 'su-950-contrast',
|
|
546
723
|
border: 'su-600',
|
|
547
724
|
border-light: 'su-400',
|
|
548
725
|
border-lighter: 'su-300'
|
|
549
726
|
),
|
|
550
727
|
warning: (
|
|
551
728
|
base: 'wa-500',
|
|
552
|
-
default: 'wa-
|
|
553
|
-
lighter: 'wa-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
on-light: 'wa-600-contrast',
|
|
557
|
-
dark: 'wa-900',
|
|
558
|
-
on-dark: 'wa-900-contrast',
|
|
729
|
+
default: 'wa-900',
|
|
730
|
+
lighter: 'wa-700',
|
|
731
|
+
light: 'wa-800',
|
|
732
|
+
dark: 'wa-950',
|
|
559
733
|
darker: 'wa-950',
|
|
560
|
-
on-darker: 'wa-950-contrast',
|
|
561
734
|
surface-light: 'wa-50',
|
|
562
735
|
on-surface-light: 'wa-900',
|
|
563
736
|
surface-light-hover: 'wa-75',
|
|
@@ -568,6 +741,8 @@ $color-state-map: (
|
|
|
568
741
|
on-surface: 'wa-500-contrast',
|
|
569
742
|
surface-hover: 'wa-600',
|
|
570
743
|
on-surface-hover: 'wa-600-contrast',
|
|
744
|
+
surface-dark: 'wa-900',
|
|
745
|
+
on-surface-dark: 'wa-900-contrast',
|
|
571
746
|
border: 'wa-400',
|
|
572
747
|
border-light: 'wa-200',
|
|
573
748
|
border-lighter: 'wa-100'
|
|
@@ -576,13 +751,9 @@ $color-state-map: (
|
|
|
576
751
|
base: 'da-600',
|
|
577
752
|
default: 'da-600',
|
|
578
753
|
lighter: 'da-400',
|
|
579
|
-
on-lighter: 'da-400-contrast',
|
|
580
754
|
light: 'da-500',
|
|
581
|
-
on-light: 'da-500-contrast',
|
|
582
755
|
dark: 'da-700',
|
|
583
|
-
on-dark: 'da-700-contrast',
|
|
584
756
|
darker: 'da-800',
|
|
585
|
-
on-darker: 'da-800-contrast',
|
|
586
757
|
surface-light: 'da-75',
|
|
587
758
|
on-surface-light: 'da-700',
|
|
588
759
|
surface-light-hover: 'da-100',
|
|
@@ -593,6 +764,8 @@ $color-state-map: (
|
|
|
593
764
|
on-surface: 'da-600-contrast',
|
|
594
765
|
surface-hover: 'da-700',
|
|
595
766
|
on-surface-hover: 'da-700-contrast',
|
|
767
|
+
surface-dark: 'da-800',
|
|
768
|
+
on-surface-dark: 'da-800-contrast',
|
|
596
769
|
border: 'da-500',
|
|
597
770
|
border-light: 'da-300',
|
|
598
771
|
border-lighter: 'da-200'
|
|
@@ -621,54 +794,282 @@ $box-shadow-map: (
|
|
|
621
794
|
|
|
622
795
|
|
|
623
796
|
// TYPOGRAPHY
|
|
797
|
+
$font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl');
|
|
624
798
|
|
|
625
|
-
$font-size-
|
|
626
|
-
|
|
627
|
-
|
|
799
|
+
$font-size-map: (
|
|
800
|
+
'8xl': 3.75rem,
|
|
801
|
+
'7xl': 3.25rem,
|
|
802
|
+
'6xl': 2.5rem,
|
|
803
|
+
'5xl': 2.25rem,
|
|
804
|
+
'4xl': 2rem,
|
|
805
|
+
'3xl': 1.75rem,
|
|
806
|
+
'2xl': 1.5rem,
|
|
807
|
+
'xl': 1.375rem,
|
|
808
|
+
'l': 1.25rem,
|
|
809
|
+
'm': 1.125rem,
|
|
810
|
+
's': 1rem,
|
|
811
|
+
'xs': 0.875rem,
|
|
812
|
+
'2xs': 0.75rem,
|
|
813
|
+
'3xs': 0.675rem
|
|
628
814
|
);
|
|
629
815
|
|
|
630
816
|
$font-line-height-map: (
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
s-compact: 1rem,
|
|
645
|
-
m-compact: 1.25rem,
|
|
646
|
-
l-compact: 1.5rem,
|
|
647
|
-
xl-compact: 1.75rem,
|
|
648
|
-
2xl-compact: 2rem,
|
|
649
|
-
3xl-compact: 2.5rem,
|
|
650
|
-
4xl-compact: 2.75rem,
|
|
651
|
-
5xl-compact: 3rem,
|
|
652
|
-
6xl-compact: 3.25rem
|
|
817
|
+
'7xl': 3.75rem,
|
|
818
|
+
'6xl': 3.5rem,
|
|
819
|
+
'5xl': 3.25rem,
|
|
820
|
+
'4xl': 3rem,
|
|
821
|
+
'3xl': 2.75rem,
|
|
822
|
+
'2xl': 2.5rem,
|
|
823
|
+
'xl': 2.25rem,
|
|
824
|
+
'l': 2rem,
|
|
825
|
+
'm': 1.75rem,
|
|
826
|
+
's': 1.5rem,
|
|
827
|
+
'xs': 1.25rem,
|
|
828
|
+
'2xs': 1rem,
|
|
829
|
+
'3xs': 0.875rem
|
|
653
830
|
);
|
|
654
831
|
|
|
655
|
-
$font-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
832
|
+
$font-map: (
|
|
833
|
+
8xl: (
|
|
834
|
+
desktop: (
|
|
835
|
+
font-size: 8xl,
|
|
836
|
+
line-height: 7xl
|
|
837
|
+
),
|
|
838
|
+
tablet: (
|
|
839
|
+
font-size: 7xl,
|
|
840
|
+
line-height: 6xl
|
|
841
|
+
),
|
|
842
|
+
mobile: (
|
|
843
|
+
font-size: 6xl,
|
|
844
|
+
line-height: 3xl
|
|
845
|
+
),
|
|
846
|
+
mobile-xs: (
|
|
847
|
+
font-size: 4xl,
|
|
848
|
+
line-height: xl
|
|
849
|
+
)
|
|
850
|
+
),
|
|
851
|
+
7xl: (
|
|
852
|
+
desktop: (
|
|
853
|
+
font-size: 7xl,
|
|
854
|
+
line-height: 6xl
|
|
855
|
+
),
|
|
856
|
+
tablet: (
|
|
857
|
+
font-size: 6xl,
|
|
858
|
+
line-height: 3xl
|
|
859
|
+
),
|
|
860
|
+
mobile: (
|
|
861
|
+
font-size: 5xl,
|
|
862
|
+
line-height: 3xl
|
|
863
|
+
),
|
|
864
|
+
mobile-xs: (
|
|
865
|
+
font-size: 4xl,
|
|
866
|
+
line-height: xl
|
|
867
|
+
)
|
|
868
|
+
),
|
|
869
|
+
6xl: (
|
|
870
|
+
desktop: (
|
|
871
|
+
font-size: 6xl,
|
|
872
|
+
line-height: 4xl
|
|
873
|
+
),
|
|
874
|
+
tablet: (
|
|
875
|
+
font-size: 5xl,
|
|
876
|
+
line-height: 3xl
|
|
877
|
+
),
|
|
878
|
+
mobile: (
|
|
879
|
+
font-size: 4xl,
|
|
880
|
+
line-height: xl
|
|
881
|
+
),
|
|
882
|
+
mobile-xs: (
|
|
883
|
+
font-size: 3xl,
|
|
884
|
+
line-height: xl
|
|
885
|
+
)
|
|
886
|
+
),
|
|
887
|
+
5xl: (
|
|
888
|
+
desktop: (
|
|
889
|
+
font-size: 5xl,
|
|
890
|
+
line-height: 3xl
|
|
891
|
+
),
|
|
892
|
+
tablet: (
|
|
893
|
+
font-size: 4xl,
|
|
894
|
+
line-height: xl
|
|
895
|
+
),
|
|
896
|
+
mobile: (
|
|
897
|
+
font-size: 3xl,
|
|
898
|
+
line-height: xl
|
|
899
|
+
),
|
|
900
|
+
mobile-xs: (
|
|
901
|
+
font-size: 2xl,
|
|
902
|
+
line-height: l
|
|
903
|
+
)
|
|
904
|
+
),
|
|
905
|
+
4xl: (
|
|
906
|
+
desktop: (
|
|
907
|
+
font-size: 4xl,
|
|
908
|
+
line-height: xl
|
|
909
|
+
),
|
|
910
|
+
tablet: (
|
|
911
|
+
font-size: 3xl,
|
|
912
|
+
line-height: xl
|
|
913
|
+
),
|
|
914
|
+
mobile: (
|
|
915
|
+
font-size: 2xl,
|
|
916
|
+
line-height: l
|
|
917
|
+
),
|
|
918
|
+
mobile-xs: (
|
|
919
|
+
font-size: xl,
|
|
920
|
+
line-height: l
|
|
921
|
+
)
|
|
922
|
+
),
|
|
923
|
+
3xl: (
|
|
924
|
+
desktop: (
|
|
925
|
+
font-size: 3xl,
|
|
926
|
+
line-height: xl
|
|
927
|
+
),
|
|
928
|
+
tablet: (
|
|
929
|
+
font-size: 2xl,
|
|
930
|
+
line-height: xl
|
|
931
|
+
),
|
|
932
|
+
mobile: (
|
|
933
|
+
font-size: xl,
|
|
934
|
+
line-height: l
|
|
935
|
+
),
|
|
936
|
+
mobile-xs: (
|
|
937
|
+
font-size: l,
|
|
938
|
+
line-height: m
|
|
939
|
+
)
|
|
940
|
+
),
|
|
941
|
+
2xl: (
|
|
942
|
+
desktop: (
|
|
943
|
+
font-size: 2xl,
|
|
944
|
+
line-height: xl
|
|
945
|
+
),
|
|
946
|
+
tablet: (
|
|
947
|
+
font-size: xl,
|
|
948
|
+
line-height: l
|
|
949
|
+
),
|
|
950
|
+
mobile: (
|
|
951
|
+
font-size: l,
|
|
952
|
+
line-height: m
|
|
953
|
+
),
|
|
954
|
+
mobile-xs: (
|
|
955
|
+
font-size: l,
|
|
956
|
+
line-height: m
|
|
957
|
+
)
|
|
958
|
+
),
|
|
959
|
+
xl: (
|
|
960
|
+
desktop: (
|
|
961
|
+
font-size: xl,
|
|
962
|
+
line-height: m
|
|
963
|
+
),
|
|
964
|
+
tablet: (
|
|
965
|
+
font-size: xl,
|
|
966
|
+
line-height: m
|
|
967
|
+
),
|
|
968
|
+
mobile: (
|
|
969
|
+
font-size: l,
|
|
970
|
+
line-height: m
|
|
971
|
+
),
|
|
972
|
+
mobile-xs: (
|
|
973
|
+
font-size: m,
|
|
974
|
+
line-height: s
|
|
975
|
+
)
|
|
976
|
+
),
|
|
977
|
+
l: (
|
|
978
|
+
desktop: (
|
|
979
|
+
font-size: m,
|
|
980
|
+
line-height: s
|
|
981
|
+
),
|
|
982
|
+
tablet: (
|
|
983
|
+
font-size: m,
|
|
984
|
+
line-height: s
|
|
985
|
+
),
|
|
986
|
+
mobile: (
|
|
987
|
+
font-size: s,
|
|
988
|
+
line-height: s
|
|
989
|
+
),
|
|
990
|
+
mobile-xs: (
|
|
991
|
+
font-size: s,
|
|
992
|
+
line-height: s
|
|
993
|
+
)
|
|
994
|
+
),
|
|
995
|
+
m: (
|
|
996
|
+
desktop: (
|
|
997
|
+
font-size: s,
|
|
998
|
+
line-height: s
|
|
999
|
+
),
|
|
1000
|
+
tablet: (
|
|
1001
|
+
font-size: s,
|
|
1002
|
+
line-height: s
|
|
1003
|
+
),
|
|
1004
|
+
mobile: (
|
|
1005
|
+
font-size: s,
|
|
1006
|
+
line-height: s
|
|
1007
|
+
),
|
|
1008
|
+
mobile-xs: (
|
|
1009
|
+
font-size: s,
|
|
1010
|
+
line-height: s
|
|
1011
|
+
)
|
|
1012
|
+
),
|
|
1013
|
+
s: (
|
|
1014
|
+
desktop: (
|
|
1015
|
+
font-size: xs,
|
|
1016
|
+
line-height: s
|
|
1017
|
+
),
|
|
1018
|
+
tablet: (
|
|
1019
|
+
font-size: xs,
|
|
1020
|
+
line-height: s
|
|
1021
|
+
),
|
|
1022
|
+
mobile: (
|
|
1023
|
+
font-size: xs,
|
|
1024
|
+
line-height: s
|
|
1025
|
+
),
|
|
1026
|
+
mobile-xs: (
|
|
1027
|
+
font-size: xs,
|
|
1028
|
+
line-height: s
|
|
1029
|
+
)
|
|
1030
|
+
),
|
|
1031
|
+
xs: (
|
|
1032
|
+
desktop: (
|
|
1033
|
+
font-size: 2xs,
|
|
1034
|
+
line-height: xs
|
|
1035
|
+
),
|
|
1036
|
+
tablet: (
|
|
1037
|
+
font-size: 2xs,
|
|
1038
|
+
line-height: xs
|
|
1039
|
+
),
|
|
1040
|
+
mobile: (
|
|
1041
|
+
font-size: 2xs,
|
|
1042
|
+
line-height: xs
|
|
1043
|
+
),
|
|
1044
|
+
mobile-xs: (
|
|
1045
|
+
font-size: 2xs,
|
|
1046
|
+
line-height: xs
|
|
1047
|
+
)
|
|
1048
|
+
),
|
|
1049
|
+
2xs: (
|
|
1050
|
+
desktop: (
|
|
1051
|
+
font-size: 3xs,
|
|
1052
|
+
line-height: 2xs
|
|
1053
|
+
),
|
|
1054
|
+
tablet: (
|
|
1055
|
+
font-size: 3xs,
|
|
1056
|
+
line-height: 2xs
|
|
1057
|
+
),
|
|
1058
|
+
mobile: (
|
|
1059
|
+
font-size: 3xs,
|
|
1060
|
+
line-height: 2xs
|
|
1061
|
+
),
|
|
1062
|
+
mobile-xs: (
|
|
1063
|
+
font-size: 3xs,
|
|
1064
|
+
line-height: 2xs
|
|
1065
|
+
)
|
|
1066
|
+
)
|
|
667
1067
|
);
|
|
668
1068
|
|
|
669
1069
|
$font-weight-map: (
|
|
1070
|
+
'light': 300,
|
|
670
1071
|
'regular': 400,
|
|
671
1072
|
'medium': 500,
|
|
672
1073
|
'semi-bold': 600,
|
|
673
1074
|
'bold': 700
|
|
674
|
-
);
|
|
1075
|
+
);
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
1
2
|
@use '../01-base' as base;
|
|
2
3
|
@use '../02-tokens/maps-eds-theme' as maps;
|
|
3
4
|
|
|
@@ -11,7 +12,7 @@
|
|
|
11
12
|
|
|
12
13
|
@font-face {
|
|
13
14
|
font-family: 'Inter';
|
|
14
|
-
src: url('#{base.$eui-assets-base-path}/fonts/inter
|
|
15
|
+
src: url('#{base.$eui-assets-base-path}/fonts/inter/InterVariable-Italic.woff2') format('woff2');
|
|
15
16
|
font-weight: 100 900;
|
|
16
17
|
font-display: swap;
|
|
17
18
|
font-style: italic;
|
|
@@ -44,8 +45,8 @@
|
|
|
44
45
|
--eui-c-white: #fff;
|
|
45
46
|
--eui-c-black: #000;
|
|
46
47
|
|
|
47
|
-
--eui-c-secondary-min: var(--eui-bc-
|
|
48
|
-
--eui-c-secondary-max: var(--eui-bc-
|
|
48
|
+
--eui-c-secondary-min: var(--eui-bc-grn-10);
|
|
49
|
+
--eui-c-secondary-max: var(--eui-bc-grn-950);
|
|
49
50
|
|
|
50
51
|
--eui-c-surface-page: var(--eui-bc-grn-25);
|
|
51
52
|
--eui-c-surface-container: var(--eui-c-white);
|
|
@@ -69,6 +70,7 @@
|
|
|
69
70
|
--eui-c-active: var(--eui-bc-pr-600);
|
|
70
71
|
--eui-c-active-bg: var(--eui-bc-pr-200);
|
|
71
72
|
--eui-c-active-bg-alt: var(--eui-bc-pr-300);
|
|
73
|
+
--eui-c-active-bg-light: var(--eui-bc-pr-100);
|
|
72
74
|
|
|
73
75
|
--eui-c-disabled: var(--eui-bc-gr-500);
|
|
74
76
|
--eui-c-disabled-bg: var(--eui-bc-gr-50);
|
|
@@ -76,8 +78,8 @@
|
|
|
76
78
|
|
|
77
79
|
--eui-c-link: var(--eui-bc-pr-600);
|
|
78
80
|
|
|
79
|
-
--eui-c-divider: var(--eui-bc-gr-
|
|
80
|
-
--eui-c-divider-light: var(--eui-bc-gr-
|
|
81
|
+
--eui-c-divider: var(--eui-bc-gr-100);
|
|
82
|
+
--eui-c-divider-light: var(--eui-bc-gr-75);
|
|
81
83
|
|
|
82
84
|
|
|
83
85
|
|
|
@@ -106,6 +108,7 @@
|
|
|
106
108
|
--eui-c-active-rgb: var(--eui-bc-pr-600-rgb);
|
|
107
109
|
--eui-c-active-bg-rgb: var(--eui-bc-pr-200-rgb);
|
|
108
110
|
--eui-c-active-bg-alt-rgb: var(--eui-bc-pr-300-rgb);
|
|
111
|
+
--eui-c-active-bg-light: var(--eui-bc-pr-100-rgb);
|
|
109
112
|
|
|
110
113
|
--eui-c-disabled-rgb: var(--eui-bc-gr-500-rgb);
|
|
111
114
|
--eui-c-disabled-bg-rgb: var(--eui-bc-gr-50-rgb);
|
|
@@ -113,8 +116,8 @@
|
|
|
113
116
|
|
|
114
117
|
--eui-c-link-rgb: var(--eui-bc-pr-600-rgb);
|
|
115
118
|
|
|
116
|
-
--eui-c-divider-rgb: var(--eui-bc-gr-
|
|
117
|
-
--eui-c-divider-light-rgb: var(--eui-bc-gr-
|
|
119
|
+
--eui-c-divider-rgb: var(--eui-bc-gr-100-rgb);
|
|
120
|
+
--eui-c-divider-light-rgb: var(--eui-bc-gr-75-rgb);
|
|
118
121
|
|
|
119
122
|
|
|
120
123
|
|
|
@@ -145,10 +148,6 @@
|
|
|
145
148
|
}
|
|
146
149
|
}
|
|
147
150
|
|
|
148
|
-
|
|
149
|
-
// TYPOGRAPHY - eui-f
|
|
150
|
-
// ------------------
|
|
151
|
-
|
|
152
151
|
// TYPOGRAPHY
|
|
153
152
|
--eui-f-family: 'Inter', arial, sans-serif;
|
|
154
153
|
|
|
@@ -158,90 +157,61 @@
|
|
|
158
157
|
// font sizes
|
|
159
158
|
--eui-f-size-base: 16px;
|
|
160
159
|
|
|
160
|
+
// base line-height / scale-factor (for compact mode)
|
|
161
|
+
--eui-base-line-height: 1.5;
|
|
162
|
+
--eui-base-scale-factor: 1;
|
|
163
|
+
|
|
161
164
|
// font aliases
|
|
162
165
|
--eui-f: var(--eui-f-m);
|
|
166
|
+
--eui-f-light: var(--eui-f-m-light);
|
|
167
|
+
--eui-f-medium: var(--eui-f-m-medium);
|
|
168
|
+
--eui-f-semi-bold: var(--eui-f-m-semi-bold);
|
|
163
169
|
--eui-f-bold: var(--eui-f-m-bold);
|
|
164
170
|
|
|
171
|
+
@each $size, $sizeDef in maps.$font-map {
|
|
172
|
+
$desktop: map.get($sizeDef, 'desktop');
|
|
173
|
+
--eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
|
|
174
|
+
--eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
|
|
175
|
+
--eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
|
|
176
|
+
--eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
|
|
177
|
+
--eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
@include base.media(maps.$eui-bkp-tablet) {
|
|
181
|
+
@each $size, $sizeDef in maps.$font-map {
|
|
182
|
+
$tablet: map.get($sizeDef, 'tablet');
|
|
183
|
+
--eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
|
|
184
|
+
--eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
|
|
185
|
+
--eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
|
|
186
|
+
--eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
|
|
187
|
+
--eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
165
190
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
// --eui-f-#{$font}-#{$size}-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
|
|
187
|
-
|
|
188
|
-
// --eui-f-#{$font}-#{$size}-tablet-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
|
|
189
|
-
// --eui-f-#{$font}-#{$size}-tablet-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
|
|
190
|
-
// --eui-f-#{$font}-#{$size}-tablet-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
|
|
191
|
-
// --eui-f-#{$font}-#{$size}-tablet-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
|
|
192
|
-
|
|
193
|
-
// --eui-f-#{$font}-#{$size}-mobile-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
|
|
194
|
-
// --eui-f-#{$font}-#{$size}-mobile-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
|
|
195
|
-
// --eui-f-#{$font}-#{$size}-mobile-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
|
|
196
|
-
// --eui-f-#{$font}-#{$size}-mobile-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
|
|
197
|
-
// }
|
|
198
|
-
// }
|
|
199
|
-
|
|
200
|
-
// @include base.media(maps.$eui-bkp-tablet) {
|
|
201
|
-
// @each $font, $fontDef in maps.$font-map-responsive {
|
|
202
|
-
// @each $size, $sizeDef in $fontDef {
|
|
203
|
-
// --eui-f-#{$font}-#{$size}-regular: var(--eui-f-#{$font}-#{$size}-tablet-regular);
|
|
204
|
-
// --eui-f-#{$font}-#{$size}-medium: var(--eui-f-#{$font}-#{$size}-tablet-medium);
|
|
205
|
-
// --eui-f-#{$font}-#{$size}-semi-bold: var(--eui-f-#{$font}-#{$size}-tablet-semi-bold);
|
|
206
|
-
// --eui-f-#{$font}-#{$size}-bold: var(--eui-f-#{$font}-#{$size}-tablet-bold);
|
|
207
|
-
// }
|
|
208
|
-
// }
|
|
209
|
-
// }
|
|
210
|
-
// @include base.media(maps.$eui-bkp-mobile) {
|
|
211
|
-
// @each $font, $fontDef in maps.$font-map-responsive {
|
|
212
|
-
// @each $size, $sizeDef in $fontDef {
|
|
213
|
-
// --eui-f-#{$font}-#{$size}-regular: var(--eui-f-#{$font}-#{$size}-mobile-regular);
|
|
214
|
-
// --eui-f-#{$font}-#{$size}-medium: var(--eui-f-#{$font}-#{$size}-mobile-medium);
|
|
215
|
-
// --eui-f-#{$font}-#{$size}-semi-bold: var(--eui-f-#{$font}-#{$size}-mobile-semi-bold);
|
|
216
|
-
// --eui-f-#{$font}-#{$size}-bold: var(--eui-f-#{$font}-#{$size}-mobile-bold);
|
|
217
|
-
// }
|
|
218
|
-
// }
|
|
219
|
-
// }
|
|
220
|
-
|
|
221
|
-
// // normal fonts (non-responsive)
|
|
222
|
-
// @each $font, $fontDef in maps.$font-map {
|
|
223
|
-
// @each $size, $sizeDef in $fontDef {
|
|
224
|
-
// @each $type, $def in $sizeDef {
|
|
225
|
-
// --eui-f-#{$font}-#{$size}-#{$type}: #{$def};
|
|
226
|
-
// }
|
|
227
|
-
// --eui-f-#{$font}-#{$size}-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
|
|
228
|
-
// --eui-f-#{$font}-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
|
|
229
|
-
// --eui-f-#{$font}-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
|
|
230
|
-
// --eui-f-#{$font}-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
|
|
231
|
-
// }
|
|
232
|
-
// }
|
|
233
|
-
|
|
234
|
-
// eUI font maps
|
|
235
|
-
@each $size in maps.$font-size-list {
|
|
236
|
-
--eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
|
|
237
|
-
--eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
|
|
238
|
-
--eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
|
|
239
|
-
--eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
|
|
191
|
+
@include base.media(maps.$eui-bkp-mobile) {
|
|
192
|
+
@each $size, $sizeDef in maps.$font-map {
|
|
193
|
+
$mobile: map.get($sizeDef, 'mobile');
|
|
194
|
+
--eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
|
|
195
|
+
--eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
|
|
196
|
+
--eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
|
|
197
|
+
--eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
|
|
198
|
+
--eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
@include base.media(maps.$eui-bkp-mobile-xs) {
|
|
203
|
+
@each $size, $sizeDef in maps.$font-map {
|
|
204
|
+
$mobilexs: map.get($sizeDef, 'mobile-xs');
|
|
205
|
+
--eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
|
|
206
|
+
--eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
|
|
207
|
+
--eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
|
|
208
|
+
--eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
|
|
209
|
+
--eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
|
|
210
|
+
}
|
|
240
211
|
}
|
|
241
212
|
|
|
242
213
|
@each $size, $def in maps.$font-size-map {
|
|
243
214
|
--eui-f-size-#{$size}: #{$def};
|
|
244
|
-
--eui-f-size-#{$size}-compact: #{$def};
|
|
245
215
|
}
|
|
246
216
|
|
|
247
217
|
@each $size, $def in maps.$font-line-height-map {
|
|
@@ -316,7 +286,6 @@
|
|
|
316
286
|
--eui-zi-#{$idx}: #{$value};
|
|
317
287
|
}
|
|
318
288
|
|
|
319
|
-
|
|
320
289
|
// OTHERS
|
|
321
290
|
// ------
|
|
322
291
|
--eui-internal-icon-checkmark-path: url('#{base.$eui-assets-base-path}/icons/eui-internals/check.svg');
|