@seed-design/css 1.1.16 → 1.1.17

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 (46) hide show
  1. package/all.css +33 -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/chip-tabs.css +12 -12
  7. package/recipes/chip.css +2 -2
  8. package/recipes/help-bubble.css +1 -1
  9. package/recipes/segmented-control.css +1 -1
  10. package/recipes/tabs.css +6 -6
  11. package/recipes/text.css +5 -0
  12. package/recipes/text.d.ts +1 -1
  13. package/recipes/text.mjs +1 -0
  14. package/vars/color/bg.d.ts +37 -0
  15. package/vars/color/bg.mjs +2 -0
  16. package/vars/color/fg.d.ts +14 -0
  17. package/vars/color/stroke.d.ts +15 -0
  18. package/vars/component/action-button.d.ts +101 -0
  19. package/vars/component/avatar.d.ts +16 -0
  20. package/vars/component/badge.d.ts +80 -0
  21. package/vars/component/callout.d.ts +32 -0
  22. package/vars/component/checkmark.d.ts +32 -0
  23. package/vars/component/chip-tab.d.ts +2 -2
  24. package/vars/component/chip-tab.mjs +2 -2
  25. package/vars/component/chip.d.ts +21 -2
  26. package/vars/component/chip.mjs +3 -2
  27. package/vars/component/contextual-floating-button.d.ts +12 -0
  28. package/vars/component/extended-fab.d.ts +6 -0
  29. package/vars/component/field.d.ts +6 -0
  30. package/vars/component/floating-action-button.d.ts +6 -0
  31. package/vars/component/menu-sheet-item.d.ts +12 -0
  32. package/vars/component/notification-badge.d.ts +6 -0
  33. package/vars/component/page-banner.d.ts +46 -0
  34. package/vars/component/progress-circle.d.ts +21 -0
  35. package/vars/component/radiomark.d.ts +3 -0
  36. package/vars/component/segmented-control.d.ts +1 -1
  37. package/vars/component/segmented-control.mjs +1 -1
  38. package/vars/component/skeleton.d.ts +18 -0
  39. package/vars/component/switch-mark.d.ts +3 -0
  40. package/vars/component/text-input.d.ts +12 -0
  41. package/vars/component/toggle-button.d.ts +6 -0
  42. package/vars/component/typography.d.ts +90 -0
  43. package/vars/component/typography.mjs +9 -0
  44. package/vars/font-size.d.ts +10 -0
  45. package/vars/gradient.d.ts +6 -2
  46. 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);
@@ -3222,7 +3226,7 @@
3222
3226
  }
3223
3227
 
3224
3228
  .seed-chip__root--variant_solid {
3225
- background: var(--seed-color-bg-neutral-weak);
3229
+ background: var(--seed-color-bg-neutral-weak-alpha);
3226
3230
  --seed-icon-color: var(--seed-color-fg-neutral);
3227
3231
  }
3228
3232
 
@@ -3233,7 +3237,7 @@
3233
3237
  }
3234
3238
 
3235
3239
  .seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3236
- background: var(--seed-color-bg-neutral-weak-pressed);
3240
+ background: var(--seed-color-bg-neutral-weak-alpha-pressed);
3237
3241
  }
3238
3242
 
3239
3243
  .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
@@ -3423,7 +3427,7 @@
3423
3427
  transform: translate3d(0, 0, 0);
3424
3428
  }
3425
3429
 
3426
- .seed-chip-tabs__content:not([data-carousel]):not(:is(:selected, [data-selected])) {
3430
+ .seed-chip-tabs__content:not([data-carousel]):not(:is([aria-selected="true"], [data-selected])) {
3427
3431
  display: none;
3428
3432
  }
3429
3433
 
@@ -3466,20 +3470,20 @@
3466
3470
  }
3467
3471
 
3468
3472
  .seed-chip-tabs__trigger--variant_neutralSolid {
3469
- background-color: var(--seed-color-bg-neutral-weak);
3473
+ background-color: var(--seed-color-bg-neutral-weak-alpha);
3470
3474
  color: var(--seed-color-fg-neutral);
3471
3475
  }
3472
3476
 
3473
- .seed-chip-tabs__trigger--variant_neutralSolid:is(:selected, [data-selected]) {
3477
+ .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]) {
3474
3478
  background-color: var(--seed-color-bg-neutral-inverted);
3475
3479
  color: var(--seed-color-fg-neutral-inverted);
3476
3480
  }
3477
3481
 
3478
3482
  .seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) {
3479
- background-color: var(--seed-color-bg-transparent-pressed);
3483
+ background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
3480
3484
  }
3481
3485
 
3482
- .seed-chip-tabs__trigger--variant_neutralSolid:is(:selected, [data-selected]):is(:active, [data-active]) {
3486
+ .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3483
3487
  background-color: var(--seed-color-bg-neutral-inverted-pressed);
3484
3488
  }
3485
3489
 
@@ -3488,7 +3492,7 @@
3488
3492
  color: var(--seed-color-fg-disabled);
3489
3493
  }
3490
3494
 
3491
- .seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
3495
+ .seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]):is([aria-selected="true"], [data-selected]) {
3492
3496
  background-color: var(--seed-color-bg-disabled);
3493
3497
  color: var(--seed-color-fg-disabled);
3494
3498
  }
@@ -3499,7 +3503,7 @@
3499
3503
  color: var(--seed-color-fg-neutral);
3500
3504
  }
3501
3505
 
3502
- .seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]) {
3506
+ .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]) {
3503
3507
  background-color: var(--seed-color-bg-neutral-inverted);
3504
3508
  color: var(--seed-color-fg-neutral-inverted);
3505
3509
  border-color: #0000;
@@ -3509,7 +3513,7 @@
3509
3513
  background-color: var(--seed-color-bg-transparent-pressed);
3510
3514
  }
3511
3515
 
3512
- .seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]):is(:active, [data-active]) {
3516
+ .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3513
3517
  background-color: var(--seed-color-bg-neutral-inverted-pressed);
3514
3518
  }
3515
3519
 
@@ -3518,7 +3522,7 @@
3518
3522
  color: var(--seed-color-fg-disabled);
3519
3523
  }
3520
3524
 
3521
- .seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
3525
+ .seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]):is([aria-selected="true"], [data-selected]) {
3522
3526
  background-color: var(--seed-color-bg-disabled);
3523
3527
  color: var(--seed-color-fg-disabled);
3524
3528
  }
@@ -3528,7 +3532,7 @@
3528
3532
  color: var(--seed-color-fg-neutral-muted);
3529
3533
  }
3530
3534
 
3531
- .seed-chip-tabs__trigger--variant_brandSolid:is(:selected, [data-selected]) {
3535
+ .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]) {
3532
3536
  background-color: var(--seed-color-bg-brand-solid);
3533
3537
  color: var(--seed-color-palette-static-white);
3534
3538
  }
@@ -3537,7 +3541,7 @@
3537
3541
  background-color: var(--seed-color-bg-neutral-weak-pressed);
3538
3542
  }
3539
3543
 
3540
- .seed-chip-tabs__trigger--variant_brandSolid:is(:selected, [data-selected]):is(:active, [data-active]) {
3544
+ .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3541
3545
  background-color: var(--seed-color-bg-brand-solid-pressed);
3542
3546
  }
3543
3547
 
@@ -3547,7 +3551,7 @@
3547
3551
  color: var(--seed-color-fg-disabled);
3548
3552
  }
3549
3553
 
3550
- .seed-chip-tabs__trigger--variant_brandSolid:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
3554
+ .seed-chip-tabs__trigger--variant_brandSolid:is(:disabled, [disabled], [data-disabled]):is([aria-selected="true"], [data-selected]) {
3551
3555
  background-color: var(--seed-color-bg-disabled);
3552
3556
  }
3553
3557
 
@@ -4423,7 +4427,7 @@
4423
4427
  animation-fill-mode: forwards;
4424
4428
  }
4425
4429
 
4426
- .seed-help-bubble__content:is(:hidden, [hidden], [data-hidden]) {
4430
+ .seed-help-bubble__content:is([hidden], [data-hidden]) {
4427
4431
  display: none !important;
4428
4432
  }
4429
4433
 
@@ -5963,7 +5967,7 @@
5963
5967
  max-width: 100%;
5964
5968
  padding: var(--seed-dimension-x1);
5965
5969
  border-radius: var(--seed-radius-full);
5966
- background-color: var(--seed-color-bg-neutral-weak);
5970
+ background-color: var(--seed-color-bg-neutral-weak-alpha);
5967
5971
  isolation: isolate;
5968
5972
  grid-auto-rows: 1fr;
5969
5973
  grid-auto-columns: 1fr;
@@ -6744,7 +6748,7 @@
6744
6748
  transform: translate3d(0, 0, 0);
6745
6749
  }
6746
6750
 
6747
- .seed-tabs__content[data-ssr]:not(:is(:selected, [data-selected])), .seed-tabs__content:not([data-carousel]):not(:is(:selected, [data-selected])) {
6751
+ .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
6752
  display: none;
6749
6753
  }
6750
6754
 
@@ -6778,7 +6782,7 @@
6778
6782
  position: relative;
6779
6783
  }
6780
6784
 
6781
- .seed-tabs__trigger:is(:selected, [data-selected]) {
6785
+ .seed-tabs__trigger:is([aria-selected="true"], [data-selected]) {
6782
6786
  color: var(--seed-color-fg-neutral);
6783
6787
  }
6784
6788
 
@@ -6787,7 +6791,7 @@
6787
6791
  color: var(--seed-color-fg-disabled);
6788
6792
  }
6789
6793
 
6790
- .seed-tabs__trigger:is(:selected, [data-selected])[data-ssr]:after {
6794
+ .seed-tabs__trigger:is([aria-selected="true"], [data-selected])[data-ssr]:after {
6791
6795
  content: "";
6792
6796
  background-color: var(--seed-color-fg-neutral);
6793
6797
  height: 2px;
@@ -6810,7 +6814,7 @@
6810
6814
  flex: 1;
6811
6815
  }
6812
6816
 
6813
- .seed-tabs__trigger--triggerLayout_fill:is(:selected, [data-selected])[data-ssr]:after {
6817
+ .seed-tabs__trigger--triggerLayout_fill:is([aria-selected="true"], [data-selected])[data-ssr]:after {
6814
6818
  left: var(--seed-dimension-spacing-x-global-gutter);
6815
6819
  right: var(--seed-dimension-spacing-x-global-gutter);
6816
6820
  }
@@ -6826,7 +6830,7 @@
6826
6830
  width: calc(var(--indicator-width, 0px) - 2 * 0px);
6827
6831
  }
6828
6832
 
6829
- .seed-tabs__trigger--triggerLayout_hug:is(:selected, [data-selected])[data-ssr]:after {
6833
+ .seed-tabs__trigger--triggerLayout_hug:is([aria-selected="true"], [data-selected])[data-ssr]:after {
6830
6834
  left: 0;
6831
6835
  right: 0;
6832
6836
  }
@@ -7015,6 +7019,12 @@
7015
7019
  --seed-font-weight: var(--seed-font-weight-regular);
7016
7020
  }
7017
7021
 
7022
+ .seed-text--textStyle_articleNote {
7023
+ --seed-font-size: var(--seed-font-size-t4);
7024
+ --seed-line-height: var(--seed-line-height-t5);
7025
+ --seed-font-weight: var(--seed-font-weight-regular);
7026
+ }
7027
+
7018
7028
  .seed-text--textStyle_t1Regular {
7019
7029
  --seed-font-size: var(--seed-font-size-t1);
7020
7030
  --seed-line-height: var(--seed-line-height-t1);