@seed-design/css 1.1.16 → 1.1.19

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 (48) hide show
  1. package/all.css +35 -23
  2. package/all.min.css +1 -1
  3. package/base.css +6 -2
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/bottom-sheet.css +1 -0
  7. package/recipes/chip-tabs.css +12 -12
  8. package/recipes/chip.css +2 -2
  9. package/recipes/help-bubble.css +1 -1
  10. package/recipes/menu-sheet.css +1 -0
  11. package/recipes/segmented-control.css +1 -1
  12. package/recipes/tabs.css +6 -6
  13. package/recipes/text.css +5 -0
  14. package/recipes/text.d.ts +1 -1
  15. package/recipes/text.mjs +1 -0
  16. package/vars/color/bg.d.ts +37 -0
  17. package/vars/color/bg.mjs +2 -0
  18. package/vars/color/fg.d.ts +14 -0
  19. package/vars/color/stroke.d.ts +15 -0
  20. package/vars/component/action-button.d.ts +101 -0
  21. package/vars/component/avatar.d.ts +16 -0
  22. package/vars/component/badge.d.ts +80 -0
  23. package/vars/component/callout.d.ts +32 -0
  24. package/vars/component/checkmark.d.ts +32 -0
  25. package/vars/component/chip-tab.d.ts +2 -2
  26. package/vars/component/chip-tab.mjs +2 -2
  27. package/vars/component/chip.d.ts +21 -2
  28. package/vars/component/chip.mjs +3 -2
  29. package/vars/component/contextual-floating-button.d.ts +12 -0
  30. package/vars/component/extended-fab.d.ts +6 -0
  31. package/vars/component/field.d.ts +6 -0
  32. package/vars/component/floating-action-button.d.ts +6 -0
  33. package/vars/component/menu-sheet-item.d.ts +12 -0
  34. package/vars/component/notification-badge.d.ts +6 -0
  35. package/vars/component/page-banner.d.ts +46 -0
  36. package/vars/component/progress-circle.d.ts +21 -0
  37. package/vars/component/radiomark.d.ts +3 -0
  38. package/vars/component/segmented-control.d.ts +1 -1
  39. package/vars/component/segmented-control.mjs +1 -1
  40. package/vars/component/skeleton.d.ts +18 -0
  41. package/vars/component/switch-mark.d.ts +3 -0
  42. package/vars/component/text-input.d.ts +12 -0
  43. package/vars/component/toggle-button.d.ts +6 -0
  44. package/vars/component/typography.d.ts +90 -0
  45. package/vars/component/typography.mjs +9 -0
  46. package/vars/font-size.d.ts +10 -0
  47. package/vars/gradient.d.ts +6 -2
  48. package/vars/line-height.d.ts +10 -0
package/all.css CHANGED
@@ -451,6 +451,8 @@
451
451
  --seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-800);
452
452
  --seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-900);
453
453
  --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-200);
454
+ --seed-color-bg-neutral-weak-alpha: var(--seed-color-palette-static-black-alpha-200);
455
+ --seed-color-bg-neutral-weak-alpha-pressed: var(--seed-color-palette-static-black-alpha-300);
454
456
  --seed-color-bg-neutral-weak-pressed: var(--seed-color-palette-gray-300);
455
457
  --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-700);
456
458
  --seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-500);
@@ -515,8 +517,8 @@
515
517
  --seed-gradient-glow-magic-pressed: #fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;
516
518
  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
517
519
  --seed-gradient-highlight-magic-pressed: #e14f00 20%, #ae58bf 100%;
518
- --seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f58a 46%, #fff9f58a 54%, #fff9f500 100%;
519
- --seed-gradient-shimmer-neutral: #fff0 0%, #fff6 46%, #fff6 54%, #fff0 100%;
520
+ --seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%;
521
+ --seed-gradient-shimmer-neutral: #fff0 0%, #ffffffab 46%, #ffffffab 54%, #fff0 100%;
520
522
  --seed-shadow-s1: 0px 1px 4px 0px #00000014;
521
523
  --seed-shadow-s2: 0px 2px 10px 0px #0000001a;
522
524
  --seed-shadow-s3: 0px 4px 16px 0px #0000001f;
@@ -659,6 +661,8 @@
659
661
  --seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-400);
660
662
  --seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-500);
661
663
  --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-300);
664
+ --seed-color-bg-neutral-weak-alpha: var(--seed-color-palette-static-white-alpha-200);
665
+ --seed-color-bg-neutral-weak-alpha-pressed: var(--seed-color-palette-static-white-alpha-300);
662
666
  --seed-color-bg-neutral-weak-pressed: var(--seed-color-palette-gray-400);
663
667
  --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-700);
664
668
  --seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-500);
@@ -2738,6 +2742,7 @@
2738
2742
  }
2739
2743
 
2740
2744
  .seed-bottom-sheet__header--headerAlign_center {
2745
+ text-align: center;
2741
2746
  justify-content: center;
2742
2747
  padding-left: 50px;
2743
2748
  padding-right: 50px;
@@ -3222,7 +3227,7 @@
3222
3227
  }
3223
3228
 
3224
3229
  .seed-chip__root--variant_solid {
3225
- background: var(--seed-color-bg-neutral-weak);
3230
+ background: var(--seed-color-bg-neutral-weak-alpha);
3226
3231
  --seed-icon-color: var(--seed-color-fg-neutral);
3227
3232
  }
3228
3233
 
@@ -3233,7 +3238,7 @@
3233
3238
  }
3234
3239
 
3235
3240
  .seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3236
- background: var(--seed-color-bg-neutral-weak-pressed);
3241
+ background: var(--seed-color-bg-neutral-weak-alpha-pressed);
3237
3242
  }
3238
3243
 
3239
3244
  .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
@@ -3423,7 +3428,7 @@
3423
3428
  transform: translate3d(0, 0, 0);
3424
3429
  }
3425
3430
 
3426
- .seed-chip-tabs__content:not([data-carousel]):not(:is(:selected, [data-selected])) {
3431
+ .seed-chip-tabs__content:not([data-carousel]):not(:is([aria-selected="true"], [data-selected])) {
3427
3432
  display: none;
3428
3433
  }
3429
3434
 
@@ -3466,20 +3471,20 @@
3466
3471
  }
3467
3472
 
3468
3473
  .seed-chip-tabs__trigger--variant_neutralSolid {
3469
- background-color: var(--seed-color-bg-neutral-weak);
3474
+ background-color: var(--seed-color-bg-neutral-weak-alpha);
3470
3475
  color: var(--seed-color-fg-neutral);
3471
3476
  }
3472
3477
 
3473
- .seed-chip-tabs__trigger--variant_neutralSolid:is(:selected, [data-selected]) {
3478
+ .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]) {
3474
3479
  background-color: var(--seed-color-bg-neutral-inverted);
3475
3480
  color: var(--seed-color-fg-neutral-inverted);
3476
3481
  }
3477
3482
 
3478
3483
  .seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) {
3479
- background-color: var(--seed-color-bg-transparent-pressed);
3484
+ background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
3480
3485
  }
3481
3486
 
3482
- .seed-chip-tabs__trigger--variant_neutralSolid:is(:selected, [data-selected]):is(:active, [data-active]) {
3487
+ .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3483
3488
  background-color: var(--seed-color-bg-neutral-inverted-pressed);
3484
3489
  }
3485
3490
 
@@ -3488,7 +3493,7 @@
3488
3493
  color: var(--seed-color-fg-disabled);
3489
3494
  }
3490
3495
 
3491
- .seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
3496
+ .seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]):is([aria-selected="true"], [data-selected]) {
3492
3497
  background-color: var(--seed-color-bg-disabled);
3493
3498
  color: var(--seed-color-fg-disabled);
3494
3499
  }
@@ -3499,7 +3504,7 @@
3499
3504
  color: var(--seed-color-fg-neutral);
3500
3505
  }
3501
3506
 
3502
- .seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]) {
3507
+ .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]) {
3503
3508
  background-color: var(--seed-color-bg-neutral-inverted);
3504
3509
  color: var(--seed-color-fg-neutral-inverted);
3505
3510
  border-color: #0000;
@@ -3509,7 +3514,7 @@
3509
3514
  background-color: var(--seed-color-bg-transparent-pressed);
3510
3515
  }
3511
3516
 
3512
- .seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]):is(:active, [data-active]) {
3517
+ .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3513
3518
  background-color: var(--seed-color-bg-neutral-inverted-pressed);
3514
3519
  }
3515
3520
 
@@ -3518,7 +3523,7 @@
3518
3523
  color: var(--seed-color-fg-disabled);
3519
3524
  }
3520
3525
 
3521
- .seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
3526
+ .seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]):is([aria-selected="true"], [data-selected]) {
3522
3527
  background-color: var(--seed-color-bg-disabled);
3523
3528
  color: var(--seed-color-fg-disabled);
3524
3529
  }
@@ -3528,7 +3533,7 @@
3528
3533
  color: var(--seed-color-fg-neutral-muted);
3529
3534
  }
3530
3535
 
3531
- .seed-chip-tabs__trigger--variant_brandSolid:is(:selected, [data-selected]) {
3536
+ .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]) {
3532
3537
  background-color: var(--seed-color-bg-brand-solid);
3533
3538
  color: var(--seed-color-palette-static-white);
3534
3539
  }
@@ -3537,7 +3542,7 @@
3537
3542
  background-color: var(--seed-color-bg-neutral-weak-pressed);
3538
3543
  }
3539
3544
 
3540
- .seed-chip-tabs__trigger--variant_brandSolid:is(:selected, [data-selected]):is(:active, [data-active]) {
3545
+ .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3541
3546
  background-color: var(--seed-color-bg-brand-solid-pressed);
3542
3547
  }
3543
3548
 
@@ -3547,7 +3552,7 @@
3547
3552
  color: var(--seed-color-fg-disabled);
3548
3553
  }
3549
3554
 
3550
- .seed-chip-tabs__trigger--variant_brandSolid:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
3555
+ .seed-chip-tabs__trigger--variant_brandSolid:is(:disabled, [disabled], [data-disabled]):is([aria-selected="true"], [data-selected]) {
3551
3556
  background-color: var(--seed-color-bg-disabled);
3552
3557
  }
3553
3558
 
@@ -4423,7 +4428,7 @@
4423
4428
  animation-fill-mode: forwards;
4424
4429
  }
4425
4430
 
4426
- .seed-help-bubble__content:is(:hidden, [hidden], [data-hidden]) {
4431
+ .seed-help-bubble__content:is([hidden], [data-hidden]) {
4427
4432
  display: none !important;
4428
4433
  }
4429
4434
 
@@ -5141,6 +5146,7 @@
5141
5146
  }
5142
5147
 
5143
5148
  .seed-menu-sheet__header {
5149
+ text-align: center;
5144
5150
  align-items: center;
5145
5151
  gap: var(--seed-dimension-x1);
5146
5152
  padding-bottom: var(--seed-dimension-x4);
@@ -5963,7 +5969,7 @@
5963
5969
  max-width: 100%;
5964
5970
  padding: var(--seed-dimension-x1);
5965
5971
  border-radius: var(--seed-radius-full);
5966
- background-color: var(--seed-color-bg-neutral-weak);
5972
+ background-color: var(--seed-color-bg-neutral-weak-alpha);
5967
5973
  isolation: isolate;
5968
5974
  grid-auto-rows: 1fr;
5969
5975
  grid-auto-columns: 1fr;
@@ -6744,7 +6750,7 @@
6744
6750
  transform: translate3d(0, 0, 0);
6745
6751
  }
6746
6752
 
6747
- .seed-tabs__content[data-ssr]:not(:is(:selected, [data-selected])), .seed-tabs__content:not([data-carousel]):not(:is(:selected, [data-selected])) {
6753
+ .seed-tabs__content[data-ssr]:not(:is([aria-selected="true"], [data-selected])), .seed-tabs__content:not([data-carousel]):not(:is([aria-selected="true"], [data-selected])) {
6748
6754
  display: none;
6749
6755
  }
6750
6756
 
@@ -6778,7 +6784,7 @@
6778
6784
  position: relative;
6779
6785
  }
6780
6786
 
6781
- .seed-tabs__trigger:is(:selected, [data-selected]) {
6787
+ .seed-tabs__trigger:is([aria-selected="true"], [data-selected]) {
6782
6788
  color: var(--seed-color-fg-neutral);
6783
6789
  }
6784
6790
 
@@ -6787,7 +6793,7 @@
6787
6793
  color: var(--seed-color-fg-disabled);
6788
6794
  }
6789
6795
 
6790
- .seed-tabs__trigger:is(:selected, [data-selected])[data-ssr]:after {
6796
+ .seed-tabs__trigger:is([aria-selected="true"], [data-selected])[data-ssr]:after {
6791
6797
  content: "";
6792
6798
  background-color: var(--seed-color-fg-neutral);
6793
6799
  height: 2px;
@@ -6810,7 +6816,7 @@
6810
6816
  flex: 1;
6811
6817
  }
6812
6818
 
6813
- .seed-tabs__trigger--triggerLayout_fill:is(:selected, [data-selected])[data-ssr]:after {
6819
+ .seed-tabs__trigger--triggerLayout_fill:is([aria-selected="true"], [data-selected])[data-ssr]:after {
6814
6820
  left: var(--seed-dimension-spacing-x-global-gutter);
6815
6821
  right: var(--seed-dimension-spacing-x-global-gutter);
6816
6822
  }
@@ -6826,7 +6832,7 @@
6826
6832
  width: calc(var(--indicator-width, 0px) - 2 * 0px);
6827
6833
  }
6828
6834
 
6829
- .seed-tabs__trigger--triggerLayout_hug:is(:selected, [data-selected])[data-ssr]:after {
6835
+ .seed-tabs__trigger--triggerLayout_hug:is([aria-selected="true"], [data-selected])[data-ssr]:after {
6830
6836
  left: 0;
6831
6837
  right: 0;
6832
6838
  }
@@ -7015,6 +7021,12 @@
7015
7021
  --seed-font-weight: var(--seed-font-weight-regular);
7016
7022
  }
7017
7023
 
7024
+ .seed-text--textStyle_articleNote {
7025
+ --seed-font-size: var(--seed-font-size-t4);
7026
+ --seed-line-height: var(--seed-line-height-t5);
7027
+ --seed-font-weight: var(--seed-font-weight-regular);
7028
+ }
7029
+
7018
7030
  .seed-text--textStyle_t1Regular {
7019
7031
  --seed-font-size: var(--seed-font-size-t1);
7020
7032
  --seed-line-height: var(--seed-line-height-t1);