@seed-design/css 0.0.38 → 0.0.41

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 (33) hide show
  1. package/all.css +98 -44
  2. package/all.min.css +1 -1
  3. package/base.css +64 -32
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/action-button.css +3 -3
  7. package/recipes/callout.css +7 -7
  8. package/recipes/progress-circle.css +1 -1
  9. package/recipes/skeleton.css +12 -2
  10. package/recipes/skeleton.d.ts +4 -0
  11. package/recipes/skeleton.mjs +6 -1
  12. package/recipes/text.css +6 -0
  13. package/recipes/text.d.ts +4 -0
  14. package/recipes/text.mjs +6 -1
  15. package/recipes/toggle-button.css +1 -1
  16. package/vars/color/bg.d.ts +1 -4
  17. package/vars/color/bg.mjs +1 -4
  18. package/vars/color/fg.d.ts +0 -2
  19. package/vars/color/fg.mjs +0 -2
  20. package/vars/color/palette.d.ts +17 -1
  21. package/vars/color/palette.mjs +17 -1
  22. package/vars/component/action-button.d.ts +3 -3
  23. package/vars/component/action-button.mjs +3 -3
  24. package/vars/component/callout.d.ts +7 -7
  25. package/vars/component/callout.mjs +7 -7
  26. package/vars/component/progress-circle.d.ts +1 -1
  27. package/vars/component/progress-circle.mjs +1 -1
  28. package/vars/component/skeleton.d.ts +21 -5
  29. package/vars/component/skeleton.mjs +21 -5
  30. package/vars/component/toggle-button.d.ts +1 -1
  31. package/vars/component/toggle-button.mjs +1 -1
  32. package/vars/gradient.d.ts +6 -1
  33. package/vars/gradient.mjs +6 -1
package/all.css CHANGED
@@ -63,7 +63,7 @@
63
63
  .seed-box {
64
64
  --seed-box-background: initial;
65
65
  --seed-box-color: initial;
66
- background-color: var(--seed-box-background);
66
+ background: var(--seed-box-background);
67
67
  color: var(--seed-box-color);
68
68
  --seed-box-border-style: solid;
69
69
  --seed-box-border-color: initial;
@@ -160,7 +160,7 @@
160
160
 
161
161
  .seed-box:is(:active, [data-active]) {
162
162
  --seed-box-background--active: var(--seed-box-background);
163
- background-color: var(--seed-box-background--active);
163
+ background: var(--seed-box-background--active);
164
164
  }
165
165
 
166
166
  .seed-consistent-width:before {
@@ -332,11 +332,27 @@
332
332
  --seed-color-palette-red-1000: #4a1209;
333
333
  --seed-color-palette-static-black: #000;
334
334
  --seed-color-palette-static-white: #fff;
335
- --seed-color-palette-static-black-alpha-50: #0000000d;
336
- --seed-color-palette-static-black-alpha-200: #0003;
337
- --seed-color-palette-static-black-alpha-500: #00000080;
338
- --seed-color-palette-static-white-alpha-200: #fff3;
339
- --seed-color-palette-static-white-alpha-800: #fffc;
335
+ --seed-color-palette-static-black-alpha-100: #00000007;
336
+ --seed-color-palette-static-black-alpha-200: #0000000c;
337
+ --seed-color-palette-static-black-alpha-300: #00000010;
338
+ --seed-color-palette-static-black-alpha-400: #00000021;
339
+ --seed-color-palette-static-black-alpha-500: #0000002c;
340
+ --seed-color-palette-static-black-alpha-600: #0000004c;
341
+ --seed-color-palette-static-black-alpha-700: #00000074;
342
+ --seed-color-palette-static-black-alpha-800: #000000a2;
343
+ --seed-color-palette-static-black-alpha-900: #000000d0;
344
+ --seed-color-palette-static-black-alpha-1000: #000000e3;
345
+ --seed-color-palette-static-white-alpha-50: #ffffff0d;
346
+ --seed-color-palette-static-white-alpha-100: #ffffff17;
347
+ --seed-color-palette-static-white-alpha-200: #ffffff20;
348
+ --seed-color-palette-static-white-alpha-300: #ffffff2e;
349
+ --seed-color-palette-static-white-alpha-400: #ffffff3d;
350
+ --seed-color-palette-static-white-alpha-500: #ffffff60;
351
+ --seed-color-palette-static-white-alpha-600: #ffffff8b;
352
+ --seed-color-palette-static-white-alpha-700: #ffffffb3;
353
+ --seed-color-palette-static-white-alpha-800: #ffffffde;
354
+ --seed-color-palette-static-white-alpha-900: #ffffffea;
355
+ --seed-color-palette-static-white-alpha-1000: #fffffff4;
340
356
  --seed-color-palette-yellow-100: #fff7de;
341
357
  --seed-color-palette-yellow-200: #fdefb9;
342
358
  --seed-color-palette-yellow-300: #fbdc65;
@@ -351,21 +367,20 @@
351
367
  --seed-color-fg-critical: var(--seed-color-palette-red-700);
352
368
  --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
353
369
  --seed-color-fg-informative: var(--seed-color-palette-blue-700);
354
- --seed-color-fg-magic: var(--seed-color-palette-purple-700);
355
370
  --seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
356
371
  --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
357
372
  --seed-color-fg-positive: var(--seed-color-palette-green-700);
358
373
  --seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
359
374
  --seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
360
- --seed-color-fg-magic-contrast: var(--seed-color-palette-purple-900);
361
375
  --seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-00);
362
376
  --seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
363
377
  --seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
364
378
  --seed-color-fg-positive-contrast: var(--seed-color-palette-green-900);
365
379
  --seed-color-fg-warning-contrast: var(--seed-color-palette-yellow-900);
366
380
  --seed-color-bg-disabled: var(--seed-color-palette-gray-200);
367
- --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-500);
381
+ --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-700);
368
382
  --seed-color-bg-brand-solid: var(--seed-color-palette-carrot-600);
383
+ --seed-color-bg-magic-weak: #f9f2ee;
369
384
  --seed-color-bg-brand-solid-pressed: var(--seed-color-palette-carrot-700);
370
385
  --seed-color-bg-critical-solid: var(--seed-color-palette-red-700);
371
386
  --seed-color-bg-critical-weak: var(--seed-color-palette-red-100);
@@ -381,10 +396,6 @@
381
396
  --seed-color-bg-layer-floating: var(--seed-color-palette-gray-00);
382
397
  --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-100);
383
398
  --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-100);
384
- --seed-color-bg-magic-solid: var(--seed-color-palette-purple-700);
385
- --seed-color-bg-magic-weak: var(--seed-color-palette-purple-100);
386
- --seed-color-bg-magic-solid-pressed: var(--seed-color-palette-purple-800);
387
- --seed-color-bg-magic-weak-pressed: var(--seed-color-palette-purple-200);
388
399
  --seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-900);
389
400
  --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-1000);
390
401
  --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-200);
@@ -392,7 +403,7 @@
392
403
  --seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-800);
393
404
  --seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-900);
394
405
  --seed-color-bg-neutral-weak-pressed: var(--seed-color-palette-gray-300);
395
- --seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-200);
406
+ --seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-500);
396
407
  --seed-color-bg-positive-solid: var(--seed-color-palette-green-700);
397
408
  --seed-color-bg-positive-weak: var(--seed-color-palette-green-100);
398
409
  --seed-color-bg-positive-solid-pressed: var(--seed-color-palette-green-800);
@@ -409,7 +420,7 @@
409
420
  --seed-color-stroke-positive: var(--seed-color-palette-green-300);
410
421
  --seed-color-stroke-field-focused: var(--seed-color-palette-gray-800);
411
422
  --seed-color-stroke-neutral-muted: var(--seed-color-palette-gray-200);
412
- --seed-color-stroke-on-image: var(--seed-color-palette-static-black-alpha-50);
423
+ --seed-color-stroke-on-image: var(--seed-color-palette-static-black-alpha-200);
413
424
  --seed-color-manner-temp-l1-bg: #eff0f1;
414
425
  --seed-color-manner-temp-l1-text: #62666a;
415
426
  --seed-color-manner-temp-l2-bg: #e7f2fc;
@@ -422,7 +433,12 @@
422
433
  --seed-color-manner-temp-l5-text: #d28500;
423
434
  --seed-color-manner-temp-l6-bg: #fff0e5;
424
435
  --seed-color-manner-temp-l6-text: #f06000;
425
- --seed-gradient-shimmer: #fff0 0%, #fff6 46%, #fff6 54%, #fff0 100%;
436
+ --seed-gradient-shimmer-neutral: #fff0 0%, #fff6 46%, #fff6 54%, #fff0 100%;
437
+ --seed-gradient-shimmer-magic: #fef0e700 0%, #fef0e78a 46%, #fef0e78a 54%, #fef0e700 100%;
438
+ --seed-gradient-fade-neutral: #fff 0%, #fff0 100%;
439
+ --seed-gradient-glow-magic: #fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;
440
+ --seed-gradient-glow-magic-pressed: #fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;
441
+ --seed-gradient-highlight-magic: #f60 20%, #d25aca 80%;
426
442
  }
427
443
 
428
444
  :root[data-seed-color-mode="system"][data-seed-user-color-scheme="dark"], :root[data-seed-color-mode="dark-only"], :root [data-seed-color-mode="dark-only"] {
@@ -489,11 +505,27 @@
489
505
  --seed-color-palette-red-1000: #fdf2f2;
490
506
  --seed-color-palette-static-black: #000;
491
507
  --seed-color-palette-static-white: #fff;
492
- --seed-color-palette-static-black-alpha-50: #0000000d;
493
- --seed-color-palette-static-black-alpha-200: #0003;
494
- --seed-color-palette-static-black-alpha-500: #00000080;
495
- --seed-color-palette-static-white-alpha-200: #fff3;
496
- --seed-color-palette-static-white-alpha-800: #fffc;
508
+ --seed-color-palette-static-black-alpha-100: #00000007;
509
+ --seed-color-palette-static-black-alpha-200: #0000000c;
510
+ --seed-color-palette-static-black-alpha-300: #00000010;
511
+ --seed-color-palette-static-black-alpha-400: #00000021;
512
+ --seed-color-palette-static-black-alpha-500: #0000002c;
513
+ --seed-color-palette-static-black-alpha-600: #0000004c;
514
+ --seed-color-palette-static-black-alpha-700: #00000074;
515
+ --seed-color-palette-static-black-alpha-800: #000000a2;
516
+ --seed-color-palette-static-black-alpha-900: #000000d0;
517
+ --seed-color-palette-static-black-alpha-1000: #000000e3;
518
+ --seed-color-palette-static-white-alpha-50: #ffffff0d;
519
+ --seed-color-palette-static-white-alpha-100: #ffffff17;
520
+ --seed-color-palette-static-white-alpha-200: #ffffff20;
521
+ --seed-color-palette-static-white-alpha-300: #ffffff2e;
522
+ --seed-color-palette-static-white-alpha-400: #ffffff3d;
523
+ --seed-color-palette-static-white-alpha-500: #ffffff60;
524
+ --seed-color-palette-static-white-alpha-600: #ffffff8b;
525
+ --seed-color-palette-static-white-alpha-700: #ffffffb3;
526
+ --seed-color-palette-static-white-alpha-800: #ffffffde;
527
+ --seed-color-palette-static-white-alpha-900: #ffffffea;
528
+ --seed-color-palette-static-white-alpha-1000: #fffffff4;
497
529
  --seed-color-palette-yellow-100: #302819;
498
530
  --seed-color-palette-yellow-200: #413218;
499
531
  --seed-color-palette-yellow-300: #543e15;
@@ -508,21 +540,20 @@
508
540
  --seed-color-fg-critical: var(--seed-color-palette-red-700);
509
541
  --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
510
542
  --seed-color-fg-informative: var(--seed-color-palette-blue-700);
511
- --seed-color-fg-magic: var(--seed-color-palette-purple-700);
512
543
  --seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
513
544
  --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
514
545
  --seed-color-fg-positive: var(--seed-color-palette-green-700);
515
546
  --seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
516
547
  --seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
517
- --seed-color-fg-magic-contrast: var(--seed-color-palette-purple-900);
518
548
  --seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-100);
519
549
  --seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
520
550
  --seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
521
551
  --seed-color-fg-positive-contrast: var(--seed-color-palette-green-900);
522
552
  --seed-color-fg-warning-contrast: var(--seed-color-palette-yellow-900);
523
553
  --seed-color-bg-disabled: var(--seed-color-palette-gray-300);
524
- --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-500);
554
+ --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-700);
525
555
  --seed-color-bg-brand-solid: var(--seed-color-palette-carrot-700);
556
+ --seed-color-bg-magic-weak: #201f1f;
526
557
  --seed-color-bg-brand-solid-pressed: var(--seed-color-palette-carrot-800);
527
558
  --seed-color-bg-critical-solid: var(--seed-color-palette-red-600);
528
559
  --seed-color-bg-critical-weak: var(--seed-color-palette-red-100);
@@ -538,10 +569,6 @@
538
569
  --seed-color-bg-layer-floating: var(--seed-color-palette-gray-200);
539
570
  --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-300);
540
571
  --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-300);
541
- --seed-color-bg-magic-solid: var(--seed-color-palette-purple-600);
542
- --seed-color-bg-magic-weak: var(--seed-color-palette-purple-100);
543
- --seed-color-bg-magic-solid-pressed: var(--seed-color-palette-purple-700);
544
- --seed-color-bg-magic-weak-pressed: var(--seed-color-palette-purple-200);
545
572
  --seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-1000);
546
573
  --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-300);
547
574
  --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-300);
@@ -549,7 +576,7 @@
549
576
  --seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-400);
550
577
  --seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-500);
551
578
  --seed-color-bg-neutral-weak-pressed: var(--seed-color-palette-gray-400);
552
- --seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-200);
579
+ --seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-500);
553
580
  --seed-color-bg-positive-solid: var(--seed-color-palette-green-500);
554
581
  --seed-color-bg-positive-weak: var(--seed-color-palette-green-100);
555
582
  --seed-color-bg-positive-solid-pressed: var(--seed-color-palette-green-500);
@@ -566,7 +593,7 @@
566
593
  --seed-color-stroke-positive: var(--seed-color-palette-green-300);
567
594
  --seed-color-stroke-field-focused: var(--seed-color-palette-gray-800);
568
595
  --seed-color-stroke-neutral-muted: var(--seed-color-palette-gray-200);
569
- --seed-color-stroke-on-image: var(--seed-color-palette-static-black-alpha-50);
596
+ --seed-color-stroke-on-image: var(--seed-color-palette-static-black-alpha-200);
570
597
  --seed-color-manner-temp-l1-bg: #222226;
571
598
  --seed-color-manner-temp-l1-text: #b1b5b9;
572
599
  --seed-color-manner-temp-l2-bg: #16212b;
@@ -579,7 +606,12 @@
579
606
  --seed-color-manner-temp-l5-text: #ffa100;
580
607
  --seed-color-manner-temp-l6-bg: #2e1d12;
581
608
  --seed-color-manner-temp-l6-text: #ff9147;
582
- --seed-gradient-shimmer: #fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;
609
+ --seed-gradient-shimmer-neutral: #fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;
610
+ --seed-gradient-shimmer-magic: #fef0e700 0%, #fef0e71a 46%, #fef0e71a 54%, #fef0e700 100%;
611
+ --seed-gradient-fade-neutral: #1d2025 0%, #1d202500 100%;
612
+ --seed-gradient-glow-magic: #2d252d 0%, #3a312b 80%, #333232 100%;
613
+ --seed-gradient-glow-magic-pressed: #3e333e 0%, #51453e 80%, #434242 100%;
614
+ --seed-gradient-highlight-magic: #ff6000 20%, #d25aca 80%;
583
615
  }
584
616
 
585
617
  .seed-avatar__root {
@@ -929,7 +961,7 @@
929
961
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
930
962
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
931
963
  --seed-icon-color: var(--seed-color-palette-static-white);
932
- --track-color: var(--seed-color-palette-static-white-alpha-200);
964
+ --track-color: var(--seed-color-palette-static-white-alpha-300);
933
965
  --range-color: var(--seed-color-palette-static-white);
934
966
  }
935
967
 
@@ -955,7 +987,7 @@
955
987
  --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
956
988
  --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
957
989
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
958
- --track-color: var(--seed-color-palette-static-white-alpha-200);
990
+ --track-color: var(--seed-color-palette-static-white-alpha-300);
959
991
  --range-color: var(--seed-color-palette-static-white);
960
992
  }
961
993
 
@@ -1007,7 +1039,7 @@
1007
1039
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
1008
1040
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
1009
1041
  --seed-icon-color: var(--seed-color-palette-static-white);
1010
- --track-color: var(--seed-color-palette-static-white-alpha-200);
1042
+ --track-color: var(--seed-color-palette-static-white-alpha-300);
1011
1043
  --range-color: var(--seed-color-palette-static-white);
1012
1044
  }
1013
1045
 
@@ -1260,7 +1292,7 @@
1260
1292
  .seed-toggle-button--variant_brandSolid {
1261
1293
  background: var(--seed-color-bg-brand-solid);
1262
1294
  color: var(--seed-color-palette-static-white);
1263
- --track-color: var(--seed-color-palette-static-white-alpha-200);
1295
+ --track-color: var(--seed-color-palette-static-white-alpha-300);
1264
1296
  --range-color: var(--seed-color-palette-static-white);
1265
1297
  }
1266
1298
 
@@ -3051,17 +3083,17 @@
3051
3083
  }
3052
3084
 
3053
3085
  .seed-callout__root--tone_magic {
3054
- background-color: var(--seed-color-bg-magic-weak);
3055
- --seed-prefix-icon-color: var(--seed-color-fg-magic-contrast);
3056
- --seed-suffix-icon-color: var(--seed-color-fg-magic-contrast);
3086
+ background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
3087
+ --seed-prefix-icon-color: var(--seed-color-fg-neutral);
3088
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
3057
3089
  }
3058
3090
 
3059
3091
  .seed-callout__root--tone_magic:is(button):is(:active, [data-active]) {
3060
- background-color: var(--seed-color-bg-magic-weak-pressed);
3092
+ background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
3061
3093
  }
3062
3094
 
3063
3095
  .seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic {
3064
- color: var(--seed-color-fg-magic-contrast);
3096
+ color: var(--seed-color-fg-neutral);
3065
3097
  }
3066
3098
 
3067
3099
  .seed-manner-temp {
@@ -3714,7 +3746,7 @@
3714
3746
  }
3715
3747
 
3716
3748
  .seed-progress-circle__root--tone_staticWhite {
3717
- --track-color: var(--seed-color-palette-static-white-alpha-200);
3749
+ --track-color: var(--seed-color-palette-static-white-alpha-300);
3718
3750
  --range-color: var(--seed-color-palette-static-white);
3719
3751
  }
3720
3752
 
@@ -4080,7 +4112,6 @@
4080
4112
 
4081
4113
  .seed-skeleton {
4082
4114
  box-sizing: border-box;
4083
- background: var(--seed-color-palette-gray-200);
4084
4115
  --seed-box-width: initial;
4085
4116
  --seed-box-height: initial;
4086
4117
  width: var(--seed-box-width);
@@ -4091,7 +4122,6 @@
4091
4122
 
4092
4123
  .seed-skeleton:after {
4093
4124
  content: "";
4094
- background-image: linear-gradient(90deg, var(--seed-gradient-shimmer));
4095
4125
  width: 100%;
4096
4126
  height: 100%;
4097
4127
  animation-name: slide-x;
@@ -4119,6 +4149,22 @@
4119
4149
  border-radius: var(--seed-radius-full);
4120
4150
  }
4121
4151
 
4152
+ .seed-skeleton--tone_neutral {
4153
+ background: var(--seed-color-palette-gray-200);
4154
+ }
4155
+
4156
+ .seed-skeleton--tone_neutral:after {
4157
+ background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-neutral));
4158
+ }
4159
+
4160
+ .seed-skeleton--tone_magic {
4161
+ background: var(--seed-color-bg-magic-weak);
4162
+ }
4163
+
4164
+ .seed-skeleton--tone_magic:after {
4165
+ background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-magic));
4166
+ }
4167
+
4122
4168
  .seed-snackbar__root {
4123
4169
  box-sizing: border-box;
4124
4170
  background: var(--seed-color-bg-neutral-solid);
@@ -4423,6 +4469,14 @@
4423
4469
  overflow: hidden;
4424
4470
  }
4425
4471
 
4472
+ .seed-text--textDecorationLine_none {
4473
+ text-decoration-line: none;
4474
+ }
4475
+
4476
+ .seed-text--textDecorationLine_line-through {
4477
+ text-decoration-line: line-through;
4478
+ }
4479
+
4426
4480
  .seed-link-content {
4427
4481
  cursor: pointer;
4428
4482
  box-sizing: border-box;