@seed-design/lynx-css 0.12.1 → 0.14.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 (84) hide show
  1. package/all.css +170 -80
  2. package/all.min.css +1 -1
  3. package/base.css +20 -4
  4. package/base.min.css +1 -1
  5. package/package.json +4 -3
  6. package/recipes/action-button.css +19 -19
  7. package/recipes/app-bar.css +3 -3
  8. package/recipes/badge.css +95 -31
  9. package/recipes/badge.d.ts +5 -1
  10. package/recipes/badge.mjs +22 -1
  11. package/recipes/checkmark.css +10 -10
  12. package/recipes/chip-tabs.css +6 -6
  13. package/recipes/chip.css +14 -14
  14. package/recipes/contextual-floating-button.css +7 -7
  15. package/recipes/floating-action-button.css +2 -2
  16. package/recipes/help-bubble.css +5 -5
  17. package/recipes/notification-badge.css +1 -1
  18. package/recipes/page-banner.css +29 -29
  19. package/recipes/radiomark.css +7 -7
  20. package/recipes/slider-tick.css +1 -1
  21. package/recipes/slider.css +4 -4
  22. package/recipes/switchmark.css +2 -2
  23. package/vars/color/bg.d.ts +8 -4
  24. package/vars/color/bg.mjs +3 -1
  25. package/vars/color/fg.d.ts +13 -1
  26. package/vars/color/fg.mjs +6 -0
  27. package/vars/component/action-button.d.ts +18 -18
  28. package/vars/component/action-button.mjs +18 -18
  29. package/vars/component/badge.d.ts +22 -12
  30. package/vars/component/badge.mjs +22 -10
  31. package/vars/component/checkmark.d.ts +4 -4
  32. package/vars/component/checkmark.mjs +4 -4
  33. package/vars/component/chip.d.ts +12 -12
  34. package/vars/component/chip.mjs +12 -12
  35. package/vars/component/contextual-floating-button.d.ts +7 -7
  36. package/vars/component/contextual-floating-button.mjs +7 -7
  37. package/vars/component/date-picker.d.ts +8 -6
  38. package/vars/component/date-picker.mjs +8 -6
  39. package/vars/component/dialog-close-button.d.ts +1 -3
  40. package/vars/component/dialog-close-button.mjs +1 -3
  41. package/vars/component/extended-fab.d.ts +4 -4
  42. package/vars/component/extended-fab.mjs +4 -4
  43. package/vars/component/floating-action-button.d.ts +2 -2
  44. package/vars/component/floating-action-button.mjs +2 -2
  45. package/vars/component/help-bubble.d.ts +5 -5
  46. package/vars/component/help-bubble.mjs +5 -5
  47. package/vars/component/index.d.ts +2 -2
  48. package/vars/component/index.mjs +2 -2
  49. package/vars/component/notification-badge.d.ts +1 -1
  50. package/vars/component/notification-badge.mjs +1 -1
  51. package/vars/component/page-banner-close-button.d.ts +1 -1
  52. package/vars/component/page-banner-close-button.mjs +1 -1
  53. package/vars/component/page-banner.d.ts +27 -27
  54. package/vars/component/page-banner.mjs +27 -27
  55. package/vars/component/pagination-page-item.d.ts +3 -3
  56. package/vars/component/pagination-page-item.mjs +3 -3
  57. package/vars/component/popover-close-button.d.ts +22 -0
  58. package/vars/component/popover-close-button.mjs +22 -0
  59. package/vars/component/popover.d.ts +74 -0
  60. package/vars/component/popover.mjs +64 -0
  61. package/vars/component/radiomark.d.ts +4 -4
  62. package/vars/component/radiomark.mjs +4 -4
  63. package/vars/component/side-panel-close-button.d.ts +1 -3
  64. package/vars/component/side-panel-close-button.mjs +1 -3
  65. package/vars/component/slider-thumb.d.ts +1 -1
  66. package/vars/component/slider-thumb.mjs +1 -1
  67. package/vars/component/slider-tick.d.ts +1 -1
  68. package/vars/component/slider-tick.mjs +1 -1
  69. package/vars/component/slider.d.ts +4 -4
  70. package/vars/component/slider.mjs +4 -4
  71. package/vars/component/snackbar.d.ts +2 -2
  72. package/vars/component/snackbar.mjs +2 -2
  73. package/vars/component/switchmark.d.ts +5 -2
  74. package/vars/component/switchmark.mjs +5 -2
  75. package/vars/component/toggle-button.d.ts +4 -4
  76. package/vars/component/toggle-button.mjs +4 -4
  77. package/vars/component/top-navigation.d.ts +1 -4
  78. package/vars/component/top-navigation.mjs +1 -4
  79. package/vars/component/chip-tab.d.ts +0 -121
  80. package/vars/component/chip-tab.mjs +0 -121
  81. package/vars/component/control-chip.d.ts +0 -158
  82. package/vars/component/control-chip.mjs +0 -158
  83. package/vars/component/inline-banner.d.ts +0 -191
  84. package/vars/component/inline-banner.mjs +0 -191
package/base.css CHANGED
@@ -262,6 +262,12 @@ text {
262
262
  --seed-color-fg-neutral-inverted: #fff;
263
263
  --seed-color-fg-neutral-muted: #555d6d;
264
264
  --seed-color-fg-neutral-subtle: #868b94;
265
+ --seed-color-fg-on-brand-solid: #fff;
266
+ --seed-color-fg-on-critical-solid: #fff;
267
+ --seed-color-fg-on-informative-solid: #fff;
268
+ --seed-color-fg-on-neutral-solid: #fff;
269
+ --seed-color-fg-on-positive-solid: #fff;
270
+ --seed-color-fg-on-warning-solid: #000000d0;
265
271
  --seed-color-fg-placeholder: #b0b3ba;
266
272
  --seed-color-fg-positive: #079171;
267
273
  --seed-color-fg-positive-contrast: #075445;
@@ -283,15 +289,17 @@ text {
283
289
  --seed-color-bg-layer-basement: #f3f4f5;
284
290
  --seed-color-bg-layer-default: #fff;
285
291
  --seed-color-bg-layer-default-pressed: #f7f8f9;
286
- --seed-color-bg-layer-fill: #f7f8f9;
287
292
  --seed-color-bg-layer-floating: #fff;
288
293
  --seed-color-bg-layer-floating-pressed: #f7f8f9;
289
294
  --seed-color-bg-magic-weak: #f9f2ee;
290
295
  --seed-color-bg-neutral-inverted: #2a3038;
291
296
  --seed-color-bg-neutral-inverted-pressed: #555d6d;
292
- --seed-color-bg-neutral-solid: #1a1c20;
297
+ --seed-color-bg-neutral-muted: #f7f8f9;
298
+ --seed-color-bg-neutral-solid: #2a3038;
299
+ --seed-color-bg-neutral-solid-pressed: #555d6d;
293
300
  --seed-color-bg-neutral-solid-muted: #555d6d;
294
301
  --seed-color-bg-neutral-solid-muted-pressed: #2a3038;
302
+ --seed-color-bg-neutral-subtle: #fff;
295
303
  --seed-color-bg-neutral-weak: #f3f4f5;
296
304
  --seed-color-bg-neutral-weak-alpha: #0000000c;
297
305
  --seed-color-bg-neutral-weak-alpha-pressed: #00000010;
@@ -474,6 +482,12 @@ text {
474
482
  --seed-color-fg-neutral-inverted: #16171b;
475
483
  --seed-color-fg-neutral-muted: #dcdee3;
476
484
  --seed-color-fg-neutral-subtle: #b0b3ba;
485
+ --seed-color-fg-on-brand-solid: #fff;
486
+ --seed-color-fg-on-critical-solid: #fff;
487
+ --seed-color-fg-on-informative-solid: #fff;
488
+ --seed-color-fg-on-neutral-solid: #16171b;
489
+ --seed-color-fg-on-positive-solid: #fff;
490
+ --seed-color-fg-on-warning-solid: #000000d0;
477
491
  --seed-color-fg-placeholder: #868b94;
478
492
  --seed-color-fg-positive: #22b27f;
479
493
  --seed-color-fg-positive-contrast: #93e5c0;
@@ -495,15 +509,17 @@ text {
495
509
  --seed-color-bg-layer-basement: #000;
496
510
  --seed-color-bg-layer-default: #16171b;
497
511
  --seed-color-bg-layer-default-pressed: #2b2e35;
498
- --seed-color-bg-layer-fill: #1d2025;
499
512
  --seed-color-bg-layer-floating: #1d2025;
500
513
  --seed-color-bg-layer-floating-pressed: #2b2e35;
501
514
  --seed-color-bg-magic-weak: #201f1f;
502
515
  --seed-color-bg-neutral-inverted: #f3f4f5;
503
516
  --seed-color-bg-neutral-inverted-pressed: #dcdee3;
504
- --seed-color-bg-neutral-solid: #2b2e35;
517
+ --seed-color-bg-neutral-muted: #1d2025;
518
+ --seed-color-bg-neutral-solid: #f3f4f5;
519
+ --seed-color-bg-neutral-solid-pressed: #dcdee3;
505
520
  --seed-color-bg-neutral-solid-muted: #393d46;
506
521
  --seed-color-bg-neutral-solid-muted-pressed: #5b606a;
522
+ --seed-color-bg-neutral-subtle: #16171b;
507
523
  --seed-color-bg-neutral-weak: #2b2e35;
508
524
  --seed-color-bg-neutral-weak-alpha: #ffffff20;
509
525
  --seed-color-bg-neutral-weak-alpha-pressed: #ffffff2e;
package/base.min.css CHANGED
@@ -1 +1 @@
1
- :root{font-size:16px}text{background-color:var(--seed-color-bg-transparent)}.seed-icon,.seed-prefix-icon,.seed-suffix-icon,.seed-icon-slot,.seed-prefix-icon-slot,.seed-suffix-icon-slot{flex-shrink:0;justify-content:center;align-items:center;display:flex}.seed-icon{width:var(--seed-icon-size);height:var(--seed-icon-size);color:var(--seed-icon-color,currentColor)}.seed-prefix-icon{width:var(--seed-prefix-icon-size);height:var(--seed-prefix-icon-size);color:var(--seed-prefix-icon-color,currentColor);margin-left:var(--seed-prefix-icon-margin-left,0);margin-right:var(--seed-prefix-icon-margin-right,0);margin-top:var(--seed-prefix-icon-margin-top,0);margin-bottom:var(--seed-prefix-icon-margin-bottom,0);align-self:var(--seed-prefix-icon-align-self);justify-self:var(--seed-prefix-icon-justify-self)}.seed-suffix-icon{width:var(--seed-suffix-icon-size);height:var(--seed-suffix-icon-size);color:var(--seed-suffix-icon-color,currentColor);margin-left:var(--seed-suffix-icon-margin-left,0);margin-right:var(--seed-suffix-icon-margin-right,0);margin-top:var(--seed-suffix-icon-margin-top,0);margin-bottom:var(--seed-suffix-icon-margin-bottom,0);align-self:var(--seed-suffix-icon-align-self);justify-self:var(--seed-suffix-icon-justify-self)}:root{--seed-dimension-x0_5:2px;--seed-dimension-x1:4px;--seed-dimension-x1_5:6px;--seed-dimension-x2:8px;--seed-dimension-x2_5:10px;--seed-dimension-x3:12px;--seed-dimension-x3_5:14px;--seed-dimension-x4:16px;--seed-dimension-x4_5:18px;--seed-dimension-x5:20px;--seed-dimension-x6:24px;--seed-dimension-x7:28px;--seed-dimension-x8:32px;--seed-dimension-x9:36px;--seed-dimension-x10:40px;--seed-dimension-x12:48px;--seed-dimension-x13:52px;--seed-dimension-x14:56px;--seed-dimension-x16:64px;--seed-dimension-spacing-x-between-chips:8px;--seed-dimension-spacing-x-global-gutter:16px;--seed-dimension-spacing-y-component-default:12px;--seed-dimension-spacing-y-nav-to-title:20px;--seed-dimension-spacing-y-screen-bottom:56px;--seed-dimension-spacing-y-between-text:6px;--seed-duration-d1:50ms;--seed-duration-d2:.1s;--seed-duration-d3:.15s;--seed-duration-d4:.2s;--seed-duration-d5:.25s;--seed-duration-d6:.3s;--seed-duration-color-transition:.15s;--seed-duration-pressed-scale:.15s;--seed-font-size-t1:11sp;--seed-font-size-t2:12sp;--seed-font-size-t3:13sp;--seed-font-size-t4:14sp;--seed-font-size-t5:16sp;--seed-font-size-t6:18sp;--seed-font-size-t7:20sp;--seed-font-size-t8:22sp;--seed-font-size-t9:24sp;--seed-font-size-t10:26sp;--seed-font-size-t11:28sp;--seed-font-size-t12:32sp;--seed-font-size-t13:40sp;--seed-font-size-t14:48sp;--seed-font-size-t1-static:11px;--seed-font-size-t2-static:12px;--seed-font-size-t3-static:13px;--seed-font-size-t4-static:14px;--seed-font-size-t5-static:16px;--seed-font-size-t6-static:18px;--seed-font-size-t7-static:20px;--seed-font-size-t8-static:22px;--seed-font-size-t9-static:24px;--seed-font-size-t10-static:26px;--seed-font-size-t11-static:28px;--seed-font-size-t12-static:32px;--seed-font-size-t13-static:40px;--seed-font-size-t14-static:48px;--seed-font-weight-regular:400;--seed-font-weight-medium:500;--seed-font-weight-bold:700;--seed-line-height-t1:15sp;--seed-line-height-t2:16sp;--seed-line-height-t3:18sp;--seed-line-height-t4:19sp;--seed-line-height-t5:22sp;--seed-line-height-t6:24sp;--seed-line-height-t7:27sp;--seed-line-height-t8:30sp;--seed-line-height-t9:32sp;--seed-line-height-t10:35sp;--seed-line-height-t11:38sp;--seed-line-height-t12:42sp;--seed-line-height-t13:52sp;--seed-line-height-t14:60sp;--seed-line-height-t1-static:15px;--seed-line-height-t2-static:16px;--seed-line-height-t3-static:18px;--seed-line-height-t4-static:19px;--seed-line-height-t5-static:22px;--seed-line-height-t6-static:24px;--seed-line-height-t7-static:27px;--seed-line-height-t8-static:30px;--seed-line-height-t9-static:32px;--seed-line-height-t10-static:35px;--seed-line-height-t11-static:38px;--seed-line-height-t12-static:42px;--seed-line-height-t13-static:52px;--seed-line-height-t14-static:60px;--seed-radius-r0_5:2px;--seed-radius-r1:4px;--seed-radius-r1_5:6px;--seed-radius-r2:8px;--seed-radius-r2_5:10px;--seed-radius-r3:12px;--seed-radius-r3_5:14px;--seed-radius-r4:16px;--seed-radius-r5:20px;--seed-radius-r6:24px;--seed-radius-full:9999px;--seed-timing-function-linear:cubic-bezier(0, 0, 1, 1);--seed-timing-function-easing:cubic-bezier(.35, 0, .35, 1);--seed-timing-function-enter:cubic-bezier(0, 0, .15, 1);--seed-timing-function-exit:cubic-bezier(.35, 0, 1, 1);--seed-timing-function-enter-expressive:cubic-bezier(.03, .4, .1, 1);--seed-timing-function-exit-expressive:cubic-bezier(.35, 0, .95, .55);--seed-timing-function-pressed-scale:cubic-bezier(0, 0, .15, 1)}:root,:root.seed-user-color-scheme-light,:root.seed-color-mode-light-only,.seed-color-mode-light-only{--seed-color-palette-gray-00:#fff;--seed-color-palette-gray-100:#f7f8f9;--seed-color-palette-gray-200:#f3f4f5;--seed-color-palette-gray-300:#eeeff1;--seed-color-palette-gray-400:#dcdee3;--seed-color-palette-gray-500:#d1d3d8;--seed-color-palette-gray-600:#b0b3ba;--seed-color-palette-gray-700:#868b94;--seed-color-palette-gray-800:#555d6d;--seed-color-palette-gray-900:#2a3038;--seed-color-palette-gray-1000:#1a1c20;--seed-color-palette-carrot-100:#fff2ec;--seed-color-palette-carrot-200:#ffe8db;--seed-color-palette-carrot-300:#ffd5c0;--seed-color-palette-carrot-400:#ffb999;--seed-color-palette-carrot-500:#ff9364;--seed-color-palette-carrot-600:#f60;--seed-color-palette-carrot-700:#e14d00;--seed-color-palette-carrot-800:#b93901;--seed-color-palette-carrot-900:#862b00;--seed-color-palette-carrot-1000:#471601;--seed-color-palette-blue-100:#eff6ff;--seed-color-palette-blue-200:#e2edfc;--seed-color-palette-blue-300:#cbdffa;--seed-color-palette-blue-400:#aacefd;--seed-color-palette-blue-500:#85b8fd;--seed-color-palette-blue-600:#5e98fe;--seed-color-palette-blue-700:#217cf9;--seed-color-palette-blue-800:#135fcd;--seed-color-palette-blue-900:#0b4596;--seed-color-palette-blue-1000:#032451;--seed-color-palette-red-100:#fdf0f0;--seed-color-palette-red-200:#fde7e7;--seed-color-palette-red-300:#fed4d2;--seed-color-palette-red-400:#feb7b3;--seed-color-palette-red-500:#fe928d;--seed-color-palette-red-600:#fc6a66;--seed-color-palette-red-700:#fa342c;--seed-color-palette-red-800:#ca1d13;--seed-color-palette-red-900:#921708;--seed-color-palette-red-1000:#4a1209;--seed-color-palette-green-100:#edfaf6;--seed-color-palette-green-200:#d9f6e9;--seed-color-palette-green-300:#b9e9d2;--seed-color-palette-green-400:#7ddcb3;--seed-color-palette-green-500:#42c593;--seed-color-palette-green-600:#10ab7d;--seed-color-palette-green-700:#079171;--seed-color-palette-green-800:#00745f;--seed-color-palette-green-900:#075445;--seed-color-palette-green-1000:#0a2b24;--seed-color-palette-yellow-100:#fff7de;--seed-color-palette-yellow-200:#fdefb9;--seed-color-palette-yellow-300:#fbdc65;--seed-color-palette-yellow-400:#e9c647;--seed-color-palette-yellow-500:#d4ab28;--seed-color-palette-yellow-600:#c49725;--seed-color-palette-yellow-700:#9b7821;--seed-color-palette-yellow-800:#755b22;--seed-color-palette-yellow-900:#4f3e1f;--seed-color-palette-yellow-1000:#2c2512;--seed-color-palette-purple-100:#f5f3fe;--seed-color-palette-purple-200:#efeafe;--seed-color-palette-purple-300:#e1d8ff;--seed-color-palette-purple-400:#d0c0ff;--seed-color-palette-purple-500:#b8a1ff;--seed-color-palette-purple-600:#9f84fb;--seed-color-palette-purple-700:#8969ea;--seed-color-palette-purple-800:#6d50cb;--seed-color-palette-purple-900:#50379b;--seed-color-palette-purple-1000:#29175d;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:#f60;--seed-color-fg-brand-contrast:#e14d00;--seed-color-fg-critical:#fa342c;--seed-color-fg-critical-contrast:#921708;--seed-color-fg-disabled:#d1d3d8;--seed-color-fg-informative:#217cf9;--seed-color-fg-informative-contrast:#0b4596;--seed-color-fg-neutral:#1a1c20;--seed-color-fg-neutral-inverted:#fff;--seed-color-fg-neutral-muted:#555d6d;--seed-color-fg-neutral-subtle:#868b94;--seed-color-fg-placeholder:#b0b3ba;--seed-color-fg-positive:#079171;--seed-color-fg-positive-contrast:#075445;--seed-color-fg-warning:#9b7821;--seed-color-fg-warning-contrast:#4f3e1f;--seed-color-bg-brand-solid:#f60;--seed-color-bg-brand-solid-pressed:#e14d00;--seed-color-bg-brand-weak:#fff2ec;--seed-color-bg-brand-weak-pressed:#ffe8db;--seed-color-bg-critical-solid:#fa342c;--seed-color-bg-critical-solid-pressed:#ca1d13;--seed-color-bg-critical-weak:#fdf0f0;--seed-color-bg-critical-weak-pressed:#fde7e7;--seed-color-bg-disabled:#f3f4f5;--seed-color-bg-informative-solid:#217cf9;--seed-color-bg-informative-solid-pressed:#135fcd;--seed-color-bg-informative-weak:#eff6ff;--seed-color-bg-informative-weak-pressed:#e2edfc;--seed-color-bg-layer-basement:#f3f4f5;--seed-color-bg-layer-default:#fff;--seed-color-bg-layer-default-pressed:#f7f8f9;--seed-color-bg-layer-fill:#f7f8f9;--seed-color-bg-layer-floating:#fff;--seed-color-bg-layer-floating-pressed:#f7f8f9;--seed-color-bg-magic-weak:#f9f2ee;--seed-color-bg-neutral-inverted:#2a3038;--seed-color-bg-neutral-inverted-pressed:#555d6d;--seed-color-bg-neutral-solid:#1a1c20;--seed-color-bg-neutral-solid-muted:#555d6d;--seed-color-bg-neutral-solid-muted-pressed:#2a3038;--seed-color-bg-neutral-weak:#f3f4f5;--seed-color-bg-neutral-weak-alpha:#0000000c;--seed-color-bg-neutral-weak-alpha-pressed:#00000010;--seed-color-bg-neutral-weak-pressed:#eeeff1;--seed-color-bg-overlay:#00000074;--seed-color-bg-overlay-muted:#0000002c;--seed-color-bg-positive-solid:#079171;--seed-color-bg-positive-solid-pressed:#00745f;--seed-color-bg-positive-weak:#edfaf6;--seed-color-bg-positive-weak-pressed:#d9f6e9;--seed-color-bg-transparent:#0000;--seed-color-bg-transparent-pressed:#00000007;--seed-color-bg-transparent-selected:#0000000c;--seed-color-bg-transparent-selected-pressed:#00000010;--seed-color-bg-warning-solid:#fbdc65;--seed-color-bg-warning-solid-pressed:#e9c647;--seed-color-bg-warning-weak:#fff7de;--seed-color-bg-warning-weak-pressed:#fdefb9;--seed-color-stroke-brand-solid:#e14d00;--seed-color-stroke-brand-weak:#ffd5c0;--seed-color-stroke-critical-solid:#fa342c;--seed-color-stroke-critical-weak:#fed4d2;--seed-color-stroke-focus-ring:#5e98fe;--seed-color-stroke-informative-solid:#217cf9;--seed-color-stroke-informative-weak:#cbdffa;--seed-color-stroke-neutral-contrast:#1a1c20;--seed-color-stroke-neutral-muted:#00000010;--seed-color-stroke-neutral-solid:#555d6d;--seed-color-stroke-neutral-subtle:#0000000c;--seed-color-stroke-neutral-weak:#dcdee3;--seed-color-stroke-positive-solid:#079171;--seed-color-stroke-positive-weak:#b9e9d2;--seed-color-stroke-warning-solid:#9b7821;--seed-color-stroke-warning-weak:#fbdc65;--seed-color-manner-temp-l1-bg:#f1f2f3;--seed-color-manner-temp-l1-text:#757b85;--seed-color-manner-temp-l10-bg:#ffebee;--seed-color-manner-temp-l10-text:#cb0123;--seed-color-manner-temp-l2-bg:#f8f4ec;--seed-color-manner-temp-l2-text:#ab863f;--seed-color-manner-temp-l3-bg:#fff5e5;--seed-color-manner-temp-l3-text:#e08a00;--seed-color-manner-temp-l4-bg:#fff3e5;--seed-color-manner-temp-l4-text:#f57e00;--seed-color-manner-temp-l5-bg:#fff1e5;--seed-color-manner-temp-l5-text:#ff7300;--seed-color-manner-temp-l6-bg:#fff0e5;--seed-color-manner-temp-l6-text:#f60;--seed-color-manner-temp-l7-bg:#ffefe5;--seed-color-manner-temp-l7-text:#ff5100;--seed-color-manner-temp-l8-bg:#ffeee5;--seed-color-manner-temp-l8-text:#f30;--seed-color-manner-temp-l9-bg:#fdeded;--seed-color-manner-temp-l9-text:#e82c45;--seed-color-banner-blue:#e1f7ff;--seed-color-banner-cool-gray:#ebf1f5;--seed-color-banner-green:#f0fbe5;--seed-color-banner-orange:#fff2e1;--seed-color-banner-pink:#ffebf1;--seed-color-banner-purple:#f5ecff;--seed-color-banner-red:#ffecee;--seed-color-banner-teal:#e6faf6;--seed-color-banner-warm-gray:#f2f0ee;--seed-color-banner-yellow:#fffae1;--seed-gradient-fade-mask:#0000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29.0%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #0006 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000 100%;--seed-gradient-glow-magic:#fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;--seed-gradient-glow-magic-pressed:#fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#e14f00 20%, #ae58bf 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffffab 46%, #ffffffab 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000014;--seed-shadow-s2:0px 2px 10px 0px #0000001a;--seed-shadow-s3:0px 4px 16px 0px #0000001f}:root.seed-user-color-scheme-dark,:root.seed-color-mode-dark-only,.seed-color-mode-dark-only{--seed-color-palette-gray-00:#000;--seed-color-palette-gray-100:#16171b;--seed-color-palette-gray-200:#1d2025;--seed-color-palette-gray-300:#2b2e35;--seed-color-palette-gray-400:#393d46;--seed-color-palette-gray-500:#5b606a;--seed-color-palette-gray-600:#868b94;--seed-color-palette-gray-700:#b0b3ba;--seed-color-palette-gray-800:#dcdee3;--seed-color-palette-gray-900:#e9eaec;--seed-color-palette-gray-1000:#f3f4f5;--seed-color-palette-carrot-100:#31241f;--seed-color-palette-carrot-200:#4b291c;--seed-color-palette-carrot-300:#6b311c;--seed-color-palette-carrot-400:#923600;--seed-color-palette-carrot-500:#bd4201;--seed-color-palette-carrot-600:#e65200;--seed-color-palette-carrot-700:#f60;--seed-color-palette-carrot-800:#ff9e65;--seed-color-palette-carrot-900:#eecebc;--seed-color-palette-carrot-1000:#f4eeea;--seed-color-palette-blue-100:#202742;--seed-color-palette-blue-200:#1e3352;--seed-color-palette-blue-300:#1a4275;--seed-color-palette-blue-400:#0f559e;--seed-color-palette-blue-500:#1964d8;--seed-color-palette-blue-600:#1e82eb;--seed-color-palette-blue-700:#41a2f9;--seed-color-palette-blue-800:#83bcf9;--seed-color-palette-blue-900:#b9d7fb;--seed-color-palette-blue-1000:#e5f0fe;--seed-color-palette-red-100:#322323;--seed-color-palette-red-200:#4f2624;--seed-color-palette-red-300:#742826;--seed-color-palette-red-400:#a12621;--seed-color-palette-red-500:#ca2319;--seed-color-palette-red-600:#f73526;--seed-color-palette-red-700:#ff6e60;--seed-color-palette-red-800:#ffa299;--seed-color-palette-red-900:#f8c5c3;--seed-color-palette-red-1000:#fdf2f2;--seed-color-palette-green-100:#202926;--seed-color-palette-green-200:#20362e;--seed-color-palette-green-300:#20493b;--seed-color-palette-green-400:#19604c;--seed-color-palette-green-500:#117956;--seed-color-palette-green-600:#1b946d;--seed-color-palette-green-700:#22b27f;--seed-color-palette-green-800:#35ce9a;--seed-color-palette-green-900:#93e5c0;--seed-color-palette-green-1000:#d4f6ef;--seed-color-palette-yellow-100:#302819;--seed-color-palette-yellow-200:#413218;--seed-color-palette-yellow-300:#543e15;--seed-color-palette-yellow-400:#714e15;--seed-color-palette-yellow-500:#91601b;--seed-color-palette-yellow-600:#b6720d;--seed-color-palette-yellow-700:#ca901c;--seed-color-palette-yellow-800:#dab156;--seed-color-palette-yellow-900:#e5d49b;--seed-color-palette-yellow-1000:#f7f0cd;--seed-color-palette-purple-100:#28213b;--seed-color-palette-purple-200:#3b2873;--seed-color-palette-purple-300:#443081;--seed-color-palette-purple-400:#5a3bb1;--seed-color-palette-purple-500:#764fd9;--seed-color-palette-purple-600:#8e6bee;--seed-color-palette-purple-700:#a78df0;--seed-color-palette-purple-800:#beadf2;--seed-color-palette-purple-900:#d9cefa;--seed-color-palette-purple-1000:#f0edfc;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:#f60;--seed-color-fg-brand-contrast:#f60;--seed-color-fg-critical:#ff6e60;--seed-color-fg-critical-contrast:#f8c5c3;--seed-color-fg-disabled:#5b606a;--seed-color-fg-informative:#41a2f9;--seed-color-fg-informative-contrast:#b9d7fb;--seed-color-fg-neutral:#f3f4f5;--seed-color-fg-neutral-inverted:#16171b;--seed-color-fg-neutral-muted:#dcdee3;--seed-color-fg-neutral-subtle:#b0b3ba;--seed-color-fg-placeholder:#868b94;--seed-color-fg-positive:#22b27f;--seed-color-fg-positive-contrast:#93e5c0;--seed-color-fg-warning:#ca901c;--seed-color-fg-warning-contrast:#e5d49b;--seed-color-bg-brand-solid:#f60;--seed-color-bg-brand-solid-pressed:#ff9e65;--seed-color-bg-brand-weak:#31241f;--seed-color-bg-brand-weak-pressed:#4b291c;--seed-color-bg-critical-solid:#f73526;--seed-color-bg-critical-solid-pressed:#ff6e60;--seed-color-bg-critical-weak:#322323;--seed-color-bg-critical-weak-pressed:#4f2624;--seed-color-bg-disabled:#2b2e35;--seed-color-bg-informative-solid:#1e82eb;--seed-color-bg-informative-solid-pressed:#41a2f9;--seed-color-bg-informative-weak:#202742;--seed-color-bg-informative-weak-pressed:#1e3352;--seed-color-bg-layer-basement:#000;--seed-color-bg-layer-default:#16171b;--seed-color-bg-layer-default-pressed:#2b2e35;--seed-color-bg-layer-fill:#1d2025;--seed-color-bg-layer-floating:#1d2025;--seed-color-bg-layer-floating-pressed:#2b2e35;--seed-color-bg-magic-weak:#201f1f;--seed-color-bg-neutral-inverted:#f3f4f5;--seed-color-bg-neutral-inverted-pressed:#dcdee3;--seed-color-bg-neutral-solid:#2b2e35;--seed-color-bg-neutral-solid-muted:#393d46;--seed-color-bg-neutral-solid-muted-pressed:#5b606a;--seed-color-bg-neutral-weak:#2b2e35;--seed-color-bg-neutral-weak-alpha:#ffffff20;--seed-color-bg-neutral-weak-alpha-pressed:#ffffff2e;--seed-color-bg-neutral-weak-pressed:#393d46;--seed-color-bg-overlay:#00000074;--seed-color-bg-overlay-muted:#0000002c;--seed-color-bg-positive-solid:#117956;--seed-color-bg-positive-solid-pressed:#1b946d;--seed-color-bg-positive-weak:#202926;--seed-color-bg-positive-weak-pressed:#20362e;--seed-color-bg-transparent:#fff0;--seed-color-bg-transparent-pressed:#ffffff0d;--seed-color-bg-transparent-selected:#ffffff17;--seed-color-bg-transparent-selected-pressed:#ffffff20;--seed-color-bg-warning-solid:#dab156;--seed-color-bg-warning-solid-pressed:#e5d49b;--seed-color-bg-warning-weak:#302819;--seed-color-bg-warning-weak-pressed:#413218;--seed-color-stroke-brand-solid:#f60;--seed-color-stroke-brand-weak:#6b311c;--seed-color-stroke-critical-solid:#ff6e60;--seed-color-stroke-critical-weak:#742826;--seed-color-stroke-focus-ring:#1e82eb;--seed-color-stroke-informative-solid:#41a2f9;--seed-color-stroke-informative-weak:#1a4275;--seed-color-stroke-neutral-contrast:#f3f4f5;--seed-color-stroke-neutral-muted:#ffffff17;--seed-color-stroke-neutral-solid:#dcdee3;--seed-color-stroke-neutral-subtle:#ffffff0d;--seed-color-stroke-neutral-weak:#393d46;--seed-color-stroke-positive-solid:#22b27f;--seed-color-stroke-positive-weak:#20493b;--seed-color-stroke-warning-solid:#ca901c;--seed-color-stroke-warning-weak:#543e15;--seed-color-manner-temp-l1-bg:#292929;--seed-color-manner-temp-l1-text:#b8b8b9;--seed-color-manner-temp-l10-bg:#34040a;--seed-color-manner-temp-l10-text:#fb6f82;--seed-color-manner-temp-l2-bg:#332605;--seed-color-manner-temp-l2-text:#f5db97;--seed-color-manner-temp-l3-bg:#372b01;--seed-color-manner-temp-l3-text:#fdda65;--seed-color-manner-temp-l4-bg:#372301;--seed-color-manner-temp-l4-text:#fbbe55;--seed-color-manner-temp-l5-bg:#371f01;--seed-color-manner-temp-l5-text:#faac4b;--seed-color-manner-temp-l6-bg:#351b03;--seed-color-manner-temp-l6-text:#fc9855;--seed-color-manner-temp-l7-bg:#371701;--seed-color-manner-temp-l7-text:#f97a25;--seed-color-manner-temp-l8-bg:#380f00;--seed-color-manner-temp-l8-text:#fe6a34;--seed-color-manner-temp-l9-bg:#380500;--seed-color-manner-temp-l9-text:#fe6a5d;--seed-color-banner-blue:#0d2a3a;--seed-color-banner-cool-gray:#242c33;--seed-color-banner-green:#1e361c;--seed-color-banner-orange:#42230a;--seed-color-banner-pink:#3b172c;--seed-color-banner-purple:#2e1e45;--seed-color-banner-red:#3a0f15;--seed-color-banner-teal:#143633;--seed-color-banner-warm-gray:#2f2b27;--seed-color-banner-yellow:#3e2b00;--seed-gradient-fade-mask:#0000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29.0%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #0006 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000 100%;--seed-gradient-glow-magic:#2d252d 0%, #3a312b 80%, #333232 100%;--seed-gradient-glow-magic-pressed:#3e333e 0%, #51453e 80%, #434242 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#ff9e65 20%, #e89bee 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000080;--seed-shadow-s2:0px 2px 10px 0px #000000ad;--seed-shadow-s3:0px 4px 16px 0px #000c}:root{--seed-scale-s95:.95;--seed-scale-s97:.97;--seed-scale-s98:.98}@keyframes seed-enter{0%{opacity:var(--seed-enter-opacity,1);transform:translate3d(var(--seed-enter-translate-x,0), var(--seed-enter-translate-y,0), 0) scale(var(--seed-enter-scale,1)) rotate(var(--seed-enter-rotate,0))}to{opacity:1;transform:translate(0,0)scale(1)rotate(0)}}@keyframes seed-exit{0%{opacity:1;transform:translate(0,0)scale(1)rotate(0)}to{opacity:var(--seed-exit-opacity,1);transform:translate3d(var(--seed-exit-translate-x,0), var(--seed-exit-translate-y,0), 0) scale(var(--seed-exit-scale,1)) rotate(var(--seed-exit-rotate,0))}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slide-x{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes drawer-slide-from-bottom{0%{transform:translate3d(0, var(--seed-drawer-start-transform,100%), 0)}to{transform:translate3d(0, var(--snap-point-height,0), 0)}}@keyframes drawer-slide-to-bottom{to{transform:translate3d(0, var(--seed-drawer-start-transform,100%), 0)}}
1
+ :root{font-size:16px}text{background-color:var(--seed-color-bg-transparent)}.seed-icon,.seed-prefix-icon,.seed-suffix-icon,.seed-icon-slot,.seed-prefix-icon-slot,.seed-suffix-icon-slot{flex-shrink:0;justify-content:center;align-items:center;display:flex}.seed-icon{width:var(--seed-icon-size);height:var(--seed-icon-size);color:var(--seed-icon-color,currentColor)}.seed-prefix-icon{width:var(--seed-prefix-icon-size);height:var(--seed-prefix-icon-size);color:var(--seed-prefix-icon-color,currentColor);margin-left:var(--seed-prefix-icon-margin-left,0);margin-right:var(--seed-prefix-icon-margin-right,0);margin-top:var(--seed-prefix-icon-margin-top,0);margin-bottom:var(--seed-prefix-icon-margin-bottom,0);align-self:var(--seed-prefix-icon-align-self);justify-self:var(--seed-prefix-icon-justify-self)}.seed-suffix-icon{width:var(--seed-suffix-icon-size);height:var(--seed-suffix-icon-size);color:var(--seed-suffix-icon-color,currentColor);margin-left:var(--seed-suffix-icon-margin-left,0);margin-right:var(--seed-suffix-icon-margin-right,0);margin-top:var(--seed-suffix-icon-margin-top,0);margin-bottom:var(--seed-suffix-icon-margin-bottom,0);align-self:var(--seed-suffix-icon-align-self);justify-self:var(--seed-suffix-icon-justify-self)}:root{--seed-dimension-x0_5:2px;--seed-dimension-x1:4px;--seed-dimension-x1_5:6px;--seed-dimension-x2:8px;--seed-dimension-x2_5:10px;--seed-dimension-x3:12px;--seed-dimension-x3_5:14px;--seed-dimension-x4:16px;--seed-dimension-x4_5:18px;--seed-dimension-x5:20px;--seed-dimension-x6:24px;--seed-dimension-x7:28px;--seed-dimension-x8:32px;--seed-dimension-x9:36px;--seed-dimension-x10:40px;--seed-dimension-x12:48px;--seed-dimension-x13:52px;--seed-dimension-x14:56px;--seed-dimension-x16:64px;--seed-dimension-spacing-x-between-chips:8px;--seed-dimension-spacing-x-global-gutter:16px;--seed-dimension-spacing-y-component-default:12px;--seed-dimension-spacing-y-nav-to-title:20px;--seed-dimension-spacing-y-screen-bottom:56px;--seed-dimension-spacing-y-between-text:6px;--seed-duration-d1:50ms;--seed-duration-d2:.1s;--seed-duration-d3:.15s;--seed-duration-d4:.2s;--seed-duration-d5:.25s;--seed-duration-d6:.3s;--seed-duration-color-transition:.15s;--seed-duration-pressed-scale:.15s;--seed-font-size-t1:11sp;--seed-font-size-t2:12sp;--seed-font-size-t3:13sp;--seed-font-size-t4:14sp;--seed-font-size-t5:16sp;--seed-font-size-t6:18sp;--seed-font-size-t7:20sp;--seed-font-size-t8:22sp;--seed-font-size-t9:24sp;--seed-font-size-t10:26sp;--seed-font-size-t11:28sp;--seed-font-size-t12:32sp;--seed-font-size-t13:40sp;--seed-font-size-t14:48sp;--seed-font-size-t1-static:11px;--seed-font-size-t2-static:12px;--seed-font-size-t3-static:13px;--seed-font-size-t4-static:14px;--seed-font-size-t5-static:16px;--seed-font-size-t6-static:18px;--seed-font-size-t7-static:20px;--seed-font-size-t8-static:22px;--seed-font-size-t9-static:24px;--seed-font-size-t10-static:26px;--seed-font-size-t11-static:28px;--seed-font-size-t12-static:32px;--seed-font-size-t13-static:40px;--seed-font-size-t14-static:48px;--seed-font-weight-regular:400;--seed-font-weight-medium:500;--seed-font-weight-bold:700;--seed-line-height-t1:15sp;--seed-line-height-t2:16sp;--seed-line-height-t3:18sp;--seed-line-height-t4:19sp;--seed-line-height-t5:22sp;--seed-line-height-t6:24sp;--seed-line-height-t7:27sp;--seed-line-height-t8:30sp;--seed-line-height-t9:32sp;--seed-line-height-t10:35sp;--seed-line-height-t11:38sp;--seed-line-height-t12:42sp;--seed-line-height-t13:52sp;--seed-line-height-t14:60sp;--seed-line-height-t1-static:15px;--seed-line-height-t2-static:16px;--seed-line-height-t3-static:18px;--seed-line-height-t4-static:19px;--seed-line-height-t5-static:22px;--seed-line-height-t6-static:24px;--seed-line-height-t7-static:27px;--seed-line-height-t8-static:30px;--seed-line-height-t9-static:32px;--seed-line-height-t10-static:35px;--seed-line-height-t11-static:38px;--seed-line-height-t12-static:42px;--seed-line-height-t13-static:52px;--seed-line-height-t14-static:60px;--seed-radius-r0_5:2px;--seed-radius-r1:4px;--seed-radius-r1_5:6px;--seed-radius-r2:8px;--seed-radius-r2_5:10px;--seed-radius-r3:12px;--seed-radius-r3_5:14px;--seed-radius-r4:16px;--seed-radius-r5:20px;--seed-radius-r6:24px;--seed-radius-full:9999px;--seed-timing-function-linear:cubic-bezier(0, 0, 1, 1);--seed-timing-function-easing:cubic-bezier(.35, 0, .35, 1);--seed-timing-function-enter:cubic-bezier(0, 0, .15, 1);--seed-timing-function-exit:cubic-bezier(.35, 0, 1, 1);--seed-timing-function-enter-expressive:cubic-bezier(.03, .4, .1, 1);--seed-timing-function-exit-expressive:cubic-bezier(.35, 0, .95, .55);--seed-timing-function-pressed-scale:cubic-bezier(0, 0, .15, 1)}:root,:root.seed-user-color-scheme-light,:root.seed-color-mode-light-only,.seed-color-mode-light-only{--seed-color-palette-gray-00:#fff;--seed-color-palette-gray-100:#f7f8f9;--seed-color-palette-gray-200:#f3f4f5;--seed-color-palette-gray-300:#eeeff1;--seed-color-palette-gray-400:#dcdee3;--seed-color-palette-gray-500:#d1d3d8;--seed-color-palette-gray-600:#b0b3ba;--seed-color-palette-gray-700:#868b94;--seed-color-palette-gray-800:#555d6d;--seed-color-palette-gray-900:#2a3038;--seed-color-palette-gray-1000:#1a1c20;--seed-color-palette-carrot-100:#fff2ec;--seed-color-palette-carrot-200:#ffe8db;--seed-color-palette-carrot-300:#ffd5c0;--seed-color-palette-carrot-400:#ffb999;--seed-color-palette-carrot-500:#ff9364;--seed-color-palette-carrot-600:#f60;--seed-color-palette-carrot-700:#e14d00;--seed-color-palette-carrot-800:#b93901;--seed-color-palette-carrot-900:#862b00;--seed-color-palette-carrot-1000:#471601;--seed-color-palette-blue-100:#eff6ff;--seed-color-palette-blue-200:#e2edfc;--seed-color-palette-blue-300:#cbdffa;--seed-color-palette-blue-400:#aacefd;--seed-color-palette-blue-500:#85b8fd;--seed-color-palette-blue-600:#5e98fe;--seed-color-palette-blue-700:#217cf9;--seed-color-palette-blue-800:#135fcd;--seed-color-palette-blue-900:#0b4596;--seed-color-palette-blue-1000:#032451;--seed-color-palette-red-100:#fdf0f0;--seed-color-palette-red-200:#fde7e7;--seed-color-palette-red-300:#fed4d2;--seed-color-palette-red-400:#feb7b3;--seed-color-palette-red-500:#fe928d;--seed-color-palette-red-600:#fc6a66;--seed-color-palette-red-700:#fa342c;--seed-color-palette-red-800:#ca1d13;--seed-color-palette-red-900:#921708;--seed-color-palette-red-1000:#4a1209;--seed-color-palette-green-100:#edfaf6;--seed-color-palette-green-200:#d9f6e9;--seed-color-palette-green-300:#b9e9d2;--seed-color-palette-green-400:#7ddcb3;--seed-color-palette-green-500:#42c593;--seed-color-palette-green-600:#10ab7d;--seed-color-palette-green-700:#079171;--seed-color-palette-green-800:#00745f;--seed-color-palette-green-900:#075445;--seed-color-palette-green-1000:#0a2b24;--seed-color-palette-yellow-100:#fff7de;--seed-color-palette-yellow-200:#fdefb9;--seed-color-palette-yellow-300:#fbdc65;--seed-color-palette-yellow-400:#e9c647;--seed-color-palette-yellow-500:#d4ab28;--seed-color-palette-yellow-600:#c49725;--seed-color-palette-yellow-700:#9b7821;--seed-color-palette-yellow-800:#755b22;--seed-color-palette-yellow-900:#4f3e1f;--seed-color-palette-yellow-1000:#2c2512;--seed-color-palette-purple-100:#f5f3fe;--seed-color-palette-purple-200:#efeafe;--seed-color-palette-purple-300:#e1d8ff;--seed-color-palette-purple-400:#d0c0ff;--seed-color-palette-purple-500:#b8a1ff;--seed-color-palette-purple-600:#9f84fb;--seed-color-palette-purple-700:#8969ea;--seed-color-palette-purple-800:#6d50cb;--seed-color-palette-purple-900:#50379b;--seed-color-palette-purple-1000:#29175d;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:#f60;--seed-color-fg-brand-contrast:#e14d00;--seed-color-fg-critical:#fa342c;--seed-color-fg-critical-contrast:#921708;--seed-color-fg-disabled:#d1d3d8;--seed-color-fg-informative:#217cf9;--seed-color-fg-informative-contrast:#0b4596;--seed-color-fg-neutral:#1a1c20;--seed-color-fg-neutral-inverted:#fff;--seed-color-fg-neutral-muted:#555d6d;--seed-color-fg-neutral-subtle:#868b94;--seed-color-fg-on-brand-solid:#fff;--seed-color-fg-on-critical-solid:#fff;--seed-color-fg-on-informative-solid:#fff;--seed-color-fg-on-neutral-solid:#fff;--seed-color-fg-on-positive-solid:#fff;--seed-color-fg-on-warning-solid:#000000d0;--seed-color-fg-placeholder:#b0b3ba;--seed-color-fg-positive:#079171;--seed-color-fg-positive-contrast:#075445;--seed-color-fg-warning:#9b7821;--seed-color-fg-warning-contrast:#4f3e1f;--seed-color-bg-brand-solid:#f60;--seed-color-bg-brand-solid-pressed:#e14d00;--seed-color-bg-brand-weak:#fff2ec;--seed-color-bg-brand-weak-pressed:#ffe8db;--seed-color-bg-critical-solid:#fa342c;--seed-color-bg-critical-solid-pressed:#ca1d13;--seed-color-bg-critical-weak:#fdf0f0;--seed-color-bg-critical-weak-pressed:#fde7e7;--seed-color-bg-disabled:#f3f4f5;--seed-color-bg-informative-solid:#217cf9;--seed-color-bg-informative-solid-pressed:#135fcd;--seed-color-bg-informative-weak:#eff6ff;--seed-color-bg-informative-weak-pressed:#e2edfc;--seed-color-bg-layer-basement:#f3f4f5;--seed-color-bg-layer-default:#fff;--seed-color-bg-layer-default-pressed:#f7f8f9;--seed-color-bg-layer-floating:#fff;--seed-color-bg-layer-floating-pressed:#f7f8f9;--seed-color-bg-magic-weak:#f9f2ee;--seed-color-bg-neutral-inverted:#2a3038;--seed-color-bg-neutral-inverted-pressed:#555d6d;--seed-color-bg-neutral-muted:#f7f8f9;--seed-color-bg-neutral-solid:#2a3038;--seed-color-bg-neutral-solid-pressed:#555d6d;--seed-color-bg-neutral-solid-muted:#555d6d;--seed-color-bg-neutral-solid-muted-pressed:#2a3038;--seed-color-bg-neutral-subtle:#fff;--seed-color-bg-neutral-weak:#f3f4f5;--seed-color-bg-neutral-weak-alpha:#0000000c;--seed-color-bg-neutral-weak-alpha-pressed:#00000010;--seed-color-bg-neutral-weak-pressed:#eeeff1;--seed-color-bg-overlay:#00000074;--seed-color-bg-overlay-muted:#0000002c;--seed-color-bg-positive-solid:#079171;--seed-color-bg-positive-solid-pressed:#00745f;--seed-color-bg-positive-weak:#edfaf6;--seed-color-bg-positive-weak-pressed:#d9f6e9;--seed-color-bg-transparent:#0000;--seed-color-bg-transparent-pressed:#00000007;--seed-color-bg-transparent-selected:#0000000c;--seed-color-bg-transparent-selected-pressed:#00000010;--seed-color-bg-warning-solid:#fbdc65;--seed-color-bg-warning-solid-pressed:#e9c647;--seed-color-bg-warning-weak:#fff7de;--seed-color-bg-warning-weak-pressed:#fdefb9;--seed-color-stroke-brand-solid:#e14d00;--seed-color-stroke-brand-weak:#ffd5c0;--seed-color-stroke-critical-solid:#fa342c;--seed-color-stroke-critical-weak:#fed4d2;--seed-color-stroke-focus-ring:#5e98fe;--seed-color-stroke-informative-solid:#217cf9;--seed-color-stroke-informative-weak:#cbdffa;--seed-color-stroke-neutral-contrast:#1a1c20;--seed-color-stroke-neutral-muted:#00000010;--seed-color-stroke-neutral-solid:#555d6d;--seed-color-stroke-neutral-subtle:#0000000c;--seed-color-stroke-neutral-weak:#dcdee3;--seed-color-stroke-positive-solid:#079171;--seed-color-stroke-positive-weak:#b9e9d2;--seed-color-stroke-warning-solid:#9b7821;--seed-color-stroke-warning-weak:#fbdc65;--seed-color-manner-temp-l1-bg:#f1f2f3;--seed-color-manner-temp-l1-text:#757b85;--seed-color-manner-temp-l10-bg:#ffebee;--seed-color-manner-temp-l10-text:#cb0123;--seed-color-manner-temp-l2-bg:#f8f4ec;--seed-color-manner-temp-l2-text:#ab863f;--seed-color-manner-temp-l3-bg:#fff5e5;--seed-color-manner-temp-l3-text:#e08a00;--seed-color-manner-temp-l4-bg:#fff3e5;--seed-color-manner-temp-l4-text:#f57e00;--seed-color-manner-temp-l5-bg:#fff1e5;--seed-color-manner-temp-l5-text:#ff7300;--seed-color-manner-temp-l6-bg:#fff0e5;--seed-color-manner-temp-l6-text:#f60;--seed-color-manner-temp-l7-bg:#ffefe5;--seed-color-manner-temp-l7-text:#ff5100;--seed-color-manner-temp-l8-bg:#ffeee5;--seed-color-manner-temp-l8-text:#f30;--seed-color-manner-temp-l9-bg:#fdeded;--seed-color-manner-temp-l9-text:#e82c45;--seed-color-banner-blue:#e1f7ff;--seed-color-banner-cool-gray:#ebf1f5;--seed-color-banner-green:#f0fbe5;--seed-color-banner-orange:#fff2e1;--seed-color-banner-pink:#ffebf1;--seed-color-banner-purple:#f5ecff;--seed-color-banner-red:#ffecee;--seed-color-banner-teal:#e6faf6;--seed-color-banner-warm-gray:#f2f0ee;--seed-color-banner-yellow:#fffae1;--seed-gradient-fade-mask:#0000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29.0%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #0006 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000 100%;--seed-gradient-glow-magic:#fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;--seed-gradient-glow-magic-pressed:#fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#e14f00 20%, #ae58bf 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffffab 46%, #ffffffab 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000014;--seed-shadow-s2:0px 2px 10px 0px #0000001a;--seed-shadow-s3:0px 4px 16px 0px #0000001f}:root.seed-user-color-scheme-dark,:root.seed-color-mode-dark-only,.seed-color-mode-dark-only{--seed-color-palette-gray-00:#000;--seed-color-palette-gray-100:#16171b;--seed-color-palette-gray-200:#1d2025;--seed-color-palette-gray-300:#2b2e35;--seed-color-palette-gray-400:#393d46;--seed-color-palette-gray-500:#5b606a;--seed-color-palette-gray-600:#868b94;--seed-color-palette-gray-700:#b0b3ba;--seed-color-palette-gray-800:#dcdee3;--seed-color-palette-gray-900:#e9eaec;--seed-color-palette-gray-1000:#f3f4f5;--seed-color-palette-carrot-100:#31241f;--seed-color-palette-carrot-200:#4b291c;--seed-color-palette-carrot-300:#6b311c;--seed-color-palette-carrot-400:#923600;--seed-color-palette-carrot-500:#bd4201;--seed-color-palette-carrot-600:#e65200;--seed-color-palette-carrot-700:#f60;--seed-color-palette-carrot-800:#ff9e65;--seed-color-palette-carrot-900:#eecebc;--seed-color-palette-carrot-1000:#f4eeea;--seed-color-palette-blue-100:#202742;--seed-color-palette-blue-200:#1e3352;--seed-color-palette-blue-300:#1a4275;--seed-color-palette-blue-400:#0f559e;--seed-color-palette-blue-500:#1964d8;--seed-color-palette-blue-600:#1e82eb;--seed-color-palette-blue-700:#41a2f9;--seed-color-palette-blue-800:#83bcf9;--seed-color-palette-blue-900:#b9d7fb;--seed-color-palette-blue-1000:#e5f0fe;--seed-color-palette-red-100:#322323;--seed-color-palette-red-200:#4f2624;--seed-color-palette-red-300:#742826;--seed-color-palette-red-400:#a12621;--seed-color-palette-red-500:#ca2319;--seed-color-palette-red-600:#f73526;--seed-color-palette-red-700:#ff6e60;--seed-color-palette-red-800:#ffa299;--seed-color-palette-red-900:#f8c5c3;--seed-color-palette-red-1000:#fdf2f2;--seed-color-palette-green-100:#202926;--seed-color-palette-green-200:#20362e;--seed-color-palette-green-300:#20493b;--seed-color-palette-green-400:#19604c;--seed-color-palette-green-500:#117956;--seed-color-palette-green-600:#1b946d;--seed-color-palette-green-700:#22b27f;--seed-color-palette-green-800:#35ce9a;--seed-color-palette-green-900:#93e5c0;--seed-color-palette-green-1000:#d4f6ef;--seed-color-palette-yellow-100:#302819;--seed-color-palette-yellow-200:#413218;--seed-color-palette-yellow-300:#543e15;--seed-color-palette-yellow-400:#714e15;--seed-color-palette-yellow-500:#91601b;--seed-color-palette-yellow-600:#b6720d;--seed-color-palette-yellow-700:#ca901c;--seed-color-palette-yellow-800:#dab156;--seed-color-palette-yellow-900:#e5d49b;--seed-color-palette-yellow-1000:#f7f0cd;--seed-color-palette-purple-100:#28213b;--seed-color-palette-purple-200:#3b2873;--seed-color-palette-purple-300:#443081;--seed-color-palette-purple-400:#5a3bb1;--seed-color-palette-purple-500:#764fd9;--seed-color-palette-purple-600:#8e6bee;--seed-color-palette-purple-700:#a78df0;--seed-color-palette-purple-800:#beadf2;--seed-color-palette-purple-900:#d9cefa;--seed-color-palette-purple-1000:#f0edfc;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:#f60;--seed-color-fg-brand-contrast:#f60;--seed-color-fg-critical:#ff6e60;--seed-color-fg-critical-contrast:#f8c5c3;--seed-color-fg-disabled:#5b606a;--seed-color-fg-informative:#41a2f9;--seed-color-fg-informative-contrast:#b9d7fb;--seed-color-fg-neutral:#f3f4f5;--seed-color-fg-neutral-inverted:#16171b;--seed-color-fg-neutral-muted:#dcdee3;--seed-color-fg-neutral-subtle:#b0b3ba;--seed-color-fg-on-brand-solid:#fff;--seed-color-fg-on-critical-solid:#fff;--seed-color-fg-on-informative-solid:#fff;--seed-color-fg-on-neutral-solid:#16171b;--seed-color-fg-on-positive-solid:#fff;--seed-color-fg-on-warning-solid:#000000d0;--seed-color-fg-placeholder:#868b94;--seed-color-fg-positive:#22b27f;--seed-color-fg-positive-contrast:#93e5c0;--seed-color-fg-warning:#ca901c;--seed-color-fg-warning-contrast:#e5d49b;--seed-color-bg-brand-solid:#f60;--seed-color-bg-brand-solid-pressed:#ff9e65;--seed-color-bg-brand-weak:#31241f;--seed-color-bg-brand-weak-pressed:#4b291c;--seed-color-bg-critical-solid:#f73526;--seed-color-bg-critical-solid-pressed:#ff6e60;--seed-color-bg-critical-weak:#322323;--seed-color-bg-critical-weak-pressed:#4f2624;--seed-color-bg-disabled:#2b2e35;--seed-color-bg-informative-solid:#1e82eb;--seed-color-bg-informative-solid-pressed:#41a2f9;--seed-color-bg-informative-weak:#202742;--seed-color-bg-informative-weak-pressed:#1e3352;--seed-color-bg-layer-basement:#000;--seed-color-bg-layer-default:#16171b;--seed-color-bg-layer-default-pressed:#2b2e35;--seed-color-bg-layer-floating:#1d2025;--seed-color-bg-layer-floating-pressed:#2b2e35;--seed-color-bg-magic-weak:#201f1f;--seed-color-bg-neutral-inverted:#f3f4f5;--seed-color-bg-neutral-inverted-pressed:#dcdee3;--seed-color-bg-neutral-muted:#1d2025;--seed-color-bg-neutral-solid:#f3f4f5;--seed-color-bg-neutral-solid-pressed:#dcdee3;--seed-color-bg-neutral-solid-muted:#393d46;--seed-color-bg-neutral-solid-muted-pressed:#5b606a;--seed-color-bg-neutral-subtle:#16171b;--seed-color-bg-neutral-weak:#2b2e35;--seed-color-bg-neutral-weak-alpha:#ffffff20;--seed-color-bg-neutral-weak-alpha-pressed:#ffffff2e;--seed-color-bg-neutral-weak-pressed:#393d46;--seed-color-bg-overlay:#00000074;--seed-color-bg-overlay-muted:#0000002c;--seed-color-bg-positive-solid:#117956;--seed-color-bg-positive-solid-pressed:#1b946d;--seed-color-bg-positive-weak:#202926;--seed-color-bg-positive-weak-pressed:#20362e;--seed-color-bg-transparent:#fff0;--seed-color-bg-transparent-pressed:#ffffff0d;--seed-color-bg-transparent-selected:#ffffff17;--seed-color-bg-transparent-selected-pressed:#ffffff20;--seed-color-bg-warning-solid:#dab156;--seed-color-bg-warning-solid-pressed:#e5d49b;--seed-color-bg-warning-weak:#302819;--seed-color-bg-warning-weak-pressed:#413218;--seed-color-stroke-brand-solid:#f60;--seed-color-stroke-brand-weak:#6b311c;--seed-color-stroke-critical-solid:#ff6e60;--seed-color-stroke-critical-weak:#742826;--seed-color-stroke-focus-ring:#1e82eb;--seed-color-stroke-informative-solid:#41a2f9;--seed-color-stroke-informative-weak:#1a4275;--seed-color-stroke-neutral-contrast:#f3f4f5;--seed-color-stroke-neutral-muted:#ffffff17;--seed-color-stroke-neutral-solid:#dcdee3;--seed-color-stroke-neutral-subtle:#ffffff0d;--seed-color-stroke-neutral-weak:#393d46;--seed-color-stroke-positive-solid:#22b27f;--seed-color-stroke-positive-weak:#20493b;--seed-color-stroke-warning-solid:#ca901c;--seed-color-stroke-warning-weak:#543e15;--seed-color-manner-temp-l1-bg:#292929;--seed-color-manner-temp-l1-text:#b8b8b9;--seed-color-manner-temp-l10-bg:#34040a;--seed-color-manner-temp-l10-text:#fb6f82;--seed-color-manner-temp-l2-bg:#332605;--seed-color-manner-temp-l2-text:#f5db97;--seed-color-manner-temp-l3-bg:#372b01;--seed-color-manner-temp-l3-text:#fdda65;--seed-color-manner-temp-l4-bg:#372301;--seed-color-manner-temp-l4-text:#fbbe55;--seed-color-manner-temp-l5-bg:#371f01;--seed-color-manner-temp-l5-text:#faac4b;--seed-color-manner-temp-l6-bg:#351b03;--seed-color-manner-temp-l6-text:#fc9855;--seed-color-manner-temp-l7-bg:#371701;--seed-color-manner-temp-l7-text:#f97a25;--seed-color-manner-temp-l8-bg:#380f00;--seed-color-manner-temp-l8-text:#fe6a34;--seed-color-manner-temp-l9-bg:#380500;--seed-color-manner-temp-l9-text:#fe6a5d;--seed-color-banner-blue:#0d2a3a;--seed-color-banner-cool-gray:#242c33;--seed-color-banner-green:#1e361c;--seed-color-banner-orange:#42230a;--seed-color-banner-pink:#3b172c;--seed-color-banner-purple:#2e1e45;--seed-color-banner-red:#3a0f15;--seed-color-banner-teal:#143633;--seed-color-banner-warm-gray:#2f2b27;--seed-color-banner-yellow:#3e2b00;--seed-gradient-fade-mask:#0000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29.0%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #0006 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000 100%;--seed-gradient-glow-magic:#2d252d 0%, #3a312b 80%, #333232 100%;--seed-gradient-glow-magic-pressed:#3e333e 0%, #51453e 80%, #434242 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#ff9e65 20%, #e89bee 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000080;--seed-shadow-s2:0px 2px 10px 0px #000000ad;--seed-shadow-s3:0px 4px 16px 0px #000c}:root{--seed-scale-s95:.95;--seed-scale-s97:.97;--seed-scale-s98:.98}@keyframes seed-enter{0%{opacity:var(--seed-enter-opacity,1);transform:translate3d(var(--seed-enter-translate-x,0), var(--seed-enter-translate-y,0), 0) scale(var(--seed-enter-scale,1)) rotate(var(--seed-enter-rotate,0))}to{opacity:1;transform:translate(0,0)scale(1)rotate(0)}}@keyframes seed-exit{0%{opacity:1;transform:translate(0,0)scale(1)rotate(0)}to{opacity:var(--seed-exit-opacity,1);transform:translate3d(var(--seed-exit-translate-x,0), var(--seed-exit-translate-y,0), 0) scale(var(--seed-exit-scale,1)) rotate(var(--seed-exit-rotate,0))}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slide-x{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes drawer-slide-from-bottom{0%{transform:translate3d(0, var(--seed-drawer-start-transform,100%), 0)}to{transform:translate3d(0, var(--snap-point-height,0), 0)}}@keyframes drawer-slide-to-bottom{to{transform:translate3d(0, var(--seed-drawer-start-transform,100%), 0)}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/lynx-css",
3
- "version": "0.12.1",
3
+ "version": "0.14.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
@@ -12,9 +12,10 @@
12
12
  ],
13
13
  "type": "module",
14
14
  "exports": {
15
- "./*.css": "./*.css",
16
15
  "./base.css": "./base.css",
16
+ "./base.min.css": "./base.min.css",
17
17
  "./all.css": "./all.css",
18
+ "./all.min.css": "./all.min.css",
18
19
  "./recipes/*.css": "./recipes/*.css",
19
20
  "./recipes/*": {
20
21
  "types": "./recipes/*.d.ts",
@@ -61,7 +62,7 @@
61
62
  "devDependencies": {
62
63
  "@seed-design/qvism-cli": "0.0.0",
63
64
  "@seed-design/lynx-qvism-preset": "0.0.0",
64
- "@seed-design/rootage-artifacts": "2.9.0"
65
+ "@seed-design/rootage-artifacts": "3.0.0"
65
66
  },
66
67
  "publishConfig": {
67
68
  "access": "public"
package/recipes/action-button.css CHANGED
@@ -60,36 +60,36 @@
60
60
  .seed-action-button__root--variant_brandSolid {
61
61
  background: var(--seed-color-bg-brand-solid);
62
62
  --track-color: var(--seed-color-palette-static-white-alpha-300);
63
- --range-color: var(--seed-color-palette-static-white)
63
+ --range-color: var(--seed-color-fg-on-brand-solid)
64
64
  }
65
65
  .seed-action-button__text--variant_brandSolid {
66
- color: var(--seed-color-palette-static-white)
66
+ color: var(--seed-color-fg-on-brand-solid)
67
67
  }
68
68
  .seed-action-button__prefixIcon--variant_brandSolid {
69
- color: var(--seed-color-palette-static-white)
69
+ color: var(--seed-color-fg-on-brand-solid)
70
70
  }
71
71
  .seed-action-button__suffixIcon--variant_brandSolid {
72
- color: var(--seed-color-palette-static-white)
72
+ color: var(--seed-color-fg-on-brand-solid)
73
73
  }
74
74
  .seed-action-button__icon--variant_brandSolid {
75
- color: var(--seed-color-palette-static-white)
75
+ color: var(--seed-color-fg-on-brand-solid)
76
76
  }
77
77
  .seed-action-button__root--variant_neutralSolid {
78
- background: var(--seed-color-bg-neutral-inverted);
78
+ background: var(--seed-color-bg-neutral-solid);
79
79
  --track-color: var(--seed-color-palette-static-white-alpha-300);
80
- --range-color: var(--seed-color-palette-static-white)
80
+ --range-color: var(--seed-color-fg-on-neutral-solid)
81
81
  }
82
82
  .seed-action-button__text--variant_neutralSolid {
83
- color: var(--seed-color-fg-neutral-inverted)
83
+ color: var(--seed-color-fg-on-neutral-solid)
84
84
  }
85
85
  .seed-action-button__prefixIcon--variant_neutralSolid {
86
- color: var(--seed-color-fg-neutral-inverted)
86
+ color: var(--seed-color-fg-on-neutral-solid)
87
87
  }
88
88
  .seed-action-button__suffixIcon--variant_neutralSolid {
89
- color: var(--seed-color-fg-neutral-inverted)
89
+ color: var(--seed-color-fg-on-neutral-solid)
90
90
  }
91
91
  .seed-action-button__icon--variant_neutralSolid {
92
- color: var(--seed-color-fg-neutral-inverted)
92
+ color: var(--seed-color-fg-on-neutral-solid)
93
93
  }
94
94
  .seed-action-button__root--variant_neutralWeak {
95
95
  background: var(--seed-color-bg-neutral-weak);
@@ -111,19 +111,19 @@
111
111
  .seed-action-button__root--variant_criticalSolid {
112
112
  background: var(--seed-color-bg-critical-solid);
113
113
  --track-color: var(--seed-color-palette-static-white-alpha-300);
114
- --range-color: var(--seed-color-palette-static-white)
114
+ --range-color: var(--seed-color-fg-on-critical-solid)
115
115
  }
116
116
  .seed-action-button__text--variant_criticalSolid {
117
- color: var(--seed-color-palette-static-white)
117
+ color: var(--seed-color-fg-on-critical-solid)
118
118
  }
119
119
  .seed-action-button__prefixIcon--variant_criticalSolid {
120
- color: var(--seed-color-palette-static-white)
120
+ color: var(--seed-color-fg-on-critical-solid)
121
121
  }
122
122
  .seed-action-button__suffixIcon--variant_criticalSolid {
123
- color: var(--seed-color-palette-static-white)
123
+ color: var(--seed-color-fg-on-critical-solid)
124
124
  }
125
125
  .seed-action-button__icon--variant_criticalSolid {
126
- color: var(--seed-color-palette-static-white)
126
+ color: var(--seed-color-fg-on-critical-solid)
127
127
  }
128
128
  .seed-action-button__root--variant_brandOutline {
129
129
  border-style: solid;
@@ -345,10 +345,10 @@
345
345
  background: var(--seed-color-bg-brand-solid-pressed)
346
346
  }
347
347
  .seed-action-button__root--variant_neutralSolid-pressed_true {
348
- background: var(--seed-color-bg-neutral-inverted-pressed)
348
+ background: var(--seed-color-bg-neutral-solid-pressed)
349
349
  }
350
350
  .seed-action-button__root--variant_neutralSolid-disabled_false-loading_false:active {
351
- background: var(--seed-color-bg-neutral-inverted-pressed)
351
+ background: var(--seed-color-bg-neutral-solid-pressed)
352
352
  }
353
353
  .seed-action-button__root--variant_neutralWeak-pressed_true {
354
354
  background: var(--seed-color-bg-neutral-weak-pressed)
@@ -491,7 +491,7 @@
491
491
  background: var(--seed-color-bg-brand-solid-pressed)
492
492
  }
493
493
  .seed-action-button__root--variant_neutralSolid-loading_true {
494
- background: var(--seed-color-bg-neutral-inverted-pressed)
494
+ background: var(--seed-color-bg-neutral-solid-pressed)
495
495
  }
496
496
  .seed-action-button__root--variant_neutralWeak-loading_true {
497
497
  background: var(--seed-color-bg-neutral-weak-pressed)
package/recipes/app-bar.css CHANGED
@@ -53,16 +53,16 @@
53
53
  align-items: center;
54
54
  }
55
55
  .seed-app-bar__root--theme_cupertino {
56
- height: calc(44px + var(--seed-safe-area-top));
56
+ height: calc(56px + var(--seed-safe-area-top));
57
57
  padding-left: var(--seed-dimension-x4);
58
58
  padding-right: var(--seed-dimension-x4);
59
59
  padding-top: var(--seed-safe-area-top);
60
60
  }
61
61
  .seed-app-bar__left--theme_cupertino {
62
- height: 44px;
62
+ height: 56px;
63
63
  }
64
64
  .seed-app-bar__right--theme_cupertino {
65
- height: 44px;
65
+ height: 56px;
66
66
  }
67
67
  .seed-app-bar__iconButton--theme_cupertino {
68
68
  width: 44px;
package/recipes/badge.css CHANGED
@@ -2,42 +2,82 @@
2
2
  display: flex;
3
3
  flex-direction: row;
4
4
  align-items: center;
5
- flex-shrink: 0;
5
+ min-width: 0;
6
+ flex-shrink: 1;
7
+ overflow: hidden;
6
8
  text-align: start
7
9
  }
10
+ .seed-badge__prefix {
11
+ display: flex;
12
+ flex-direction: row;
13
+ flex-shrink: 0;
14
+ align-items: center;
15
+ justify-content: center;
16
+ color: inherit;
17
+ --seed-icon-size: 100%;
18
+ --seed-icon-color: currentColor
19
+ }
8
20
  .seed-badge__label {
21
+ min-width: 0;
9
22
  overflow: hidden;
10
23
  text-overflow: ellipsis;
11
24
  white-space: nowrap;
12
- flex-shrink: 1;
13
- max-width: 100%
25
+ flex-shrink: 1
26
+ }
27
+ .seed-badge__action {
28
+ display: flex;
29
+ flex-direction: row;
30
+ flex-shrink: 0;
31
+ align-items: center;
32
+ justify-content: center;
33
+ color: inherit;
34
+ --seed-icon-size: 100%;
35
+ --seed-icon-color: currentColor;
36
+ transform: scale(1);
37
+ transition: transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
14
38
  }
15
39
  .seed-badge__root--size_medium {
16
- max-width: 7.5rem;
17
40
  min-height: var(--seed-dimension-x5);
18
41
  padding-left: var(--seed-dimension-x1_5);
19
42
  padding-right: var(--seed-dimension-x1_5);
20
43
  padding-top: var(--seed-dimension-x0_5);
21
44
  padding-bottom: var(--seed-dimension-x0_5);
22
- border-radius: var(--seed-radius-r1)
45
+ border-radius: var(--seed-radius-r1);
46
+ gap: var(--seed-dimension-x0_5)
23
47
  }
24
48
  .seed-badge__label--size_medium {
25
49
  font-size: var(--seed-font-size-t1);
26
50
  line-height: var(--seed-line-height-t1)
27
51
  }
52
+ .seed-badge__prefix--size_medium {
53
+ width: var(--seed-dimension-x3);
54
+ height: var(--seed-dimension-x3)
55
+ }
56
+ .seed-badge__action--size_medium {
57
+ width: var(--seed-dimension-x3);
58
+ height: var(--seed-dimension-x3)
59
+ }
28
60
  .seed-badge__root--size_large {
29
- max-width: 6.75rem;
30
61
  min-height: var(--seed-dimension-x6);
31
62
  padding-left: var(--seed-dimension-x2);
32
63
  padding-right: var(--seed-dimension-x2);
33
64
  padding-top: var(--seed-dimension-x1);
34
65
  padding-bottom: var(--seed-dimension-x1);
35
- border-radius: var(--seed-radius-r1_5)
66
+ border-radius: var(--seed-radius-r1_5);
67
+ gap: var(--seed-dimension-x0_5)
36
68
  }
37
69
  .seed-badge__label--size_large {
38
70
  font-size: var(--seed-font-size-t2);
39
71
  line-height: var(--seed-line-height-t2)
40
72
  }
73
+ .seed-badge__prefix--size_large {
74
+ width: var(--seed-dimension-x3_5);
75
+ height: var(--seed-dimension-x3_5)
76
+ }
77
+ .seed-badge__action--size_large {
78
+ width: var(--seed-dimension-x3_5);
79
+ height: var(--seed-dimension-x3_5)
80
+ }
41
81
  .seed-badge__label--variant_weak {
42
82
  font-weight: var(--seed-font-weight-medium)
43
83
  }
@@ -48,110 +88,134 @@
48
88
  font-weight: var(--seed-font-weight-bold)
49
89
  }
50
90
  .seed-badge__root--tone_neutral-variant_weak {
51
- background-color: var(--seed-color-bg-neutral-weak)
91
+ background-color: var(--seed-color-bg-neutral-weak);
92
+ color: var(--seed-color-fg-neutral-muted)
52
93
  }
53
94
  .seed-badge__label--tone_neutral-variant_weak {
54
95
  color: var(--seed-color-fg-neutral-muted)
55
96
  }
56
97
  .seed-badge__root--tone_neutral-variant_solid {
57
- background-color: var(--seed-color-palette-gray-800)
98
+ background-color: var(--seed-color-palette-gray-800);
99
+ color: var(--seed-color-fg-on-neutral-solid)
58
100
  }
59
101
  .seed-badge__label--tone_neutral-variant_solid {
60
- color: var(--seed-color-fg-neutral-inverted)
102
+ color: var(--seed-color-fg-on-neutral-solid)
61
103
  }
62
104
  .seed-badge__root--tone_neutral-variant_outline {
63
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted)
105
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
106
+ color: var(--seed-color-fg-neutral-muted)
64
107
  }
65
108
  .seed-badge__label--tone_neutral-variant_outline {
66
109
  color: var(--seed-color-fg-neutral-muted)
67
110
  }
68
111
  .seed-badge__root--tone_brand-variant_weak {
69
- background-color: var(--seed-color-bg-brand-weak)
112
+ background-color: var(--seed-color-bg-brand-weak);
113
+ color: var(--seed-color-fg-brand-contrast)
70
114
  }
71
115
  .seed-badge__label--tone_brand-variant_weak {
72
116
  color: var(--seed-color-fg-brand-contrast)
73
117
  }
74
118
  .seed-badge__root--tone_brand-variant_solid {
75
- background-color: var(--seed-color-bg-brand-solid)
119
+ background-color: var(--seed-color-bg-brand-solid);
120
+ color: var(--seed-color-fg-on-brand-solid)
76
121
  }
77
122
  .seed-badge__label--tone_brand-variant_solid {
78
- color: var(--seed-color-palette-static-white)
123
+ color: var(--seed-color-fg-on-brand-solid)
79
124
  }
80
125
  .seed-badge__root--tone_brand-variant_outline {
81
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak)
126
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
127
+ color: var(--seed-color-fg-brand)
82
128
  }
83
129
  .seed-badge__label--tone_brand-variant_outline {
84
130
  color: var(--seed-color-fg-brand)
85
131
  }
86
132
  .seed-badge__root--tone_informative-variant_weak {
87
- background-color: var(--seed-color-bg-informative-weak)
133
+ background-color: var(--seed-color-bg-informative-weak);
134
+ color: var(--seed-color-fg-informative-contrast)
88
135
  }
89
136
  .seed-badge__label--tone_informative-variant_weak {
90
137
  color: var(--seed-color-fg-informative-contrast)
91
138
  }
92
139
  .seed-badge__root--tone_informative-variant_solid {
93
- background-color: var(--seed-color-bg-informative-solid)
140
+ background-color: var(--seed-color-bg-informative-solid);
141
+ color: var(--seed-color-fg-on-informative-solid)
94
142
  }
95
143
  .seed-badge__label--tone_informative-variant_solid {
96
- color: var(--seed-color-palette-static-white)
144
+ color: var(--seed-color-fg-on-informative-solid)
97
145
  }
98
146
  .seed-badge__root--tone_informative-variant_outline {
99
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative-weak)
147
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative-weak);
148
+ color: var(--seed-color-fg-informative)
100
149
  }
101
150
  .seed-badge__label--tone_informative-variant_outline {
102
151
  color: var(--seed-color-fg-informative)
103
152
  }
104
153
  .seed-badge__root--tone_positive-variant_weak {
105
- background-color: var(--seed-color-bg-positive-weak)
154
+ background-color: var(--seed-color-bg-positive-weak);
155
+ color: var(--seed-color-fg-positive-contrast)
106
156
  }
107
157
  .seed-badge__label--tone_positive-variant_weak {
108
158
  color: var(--seed-color-fg-positive-contrast)
109
159
  }
110
160
  .seed-badge__root--tone_positive-variant_solid {
111
- background-color: var(--seed-color-bg-positive-solid)
161
+ background-color: var(--seed-color-bg-positive-solid);
162
+ color: var(--seed-color-fg-on-positive-solid)
112
163
  }
113
164
  .seed-badge__label--tone_positive-variant_solid {
114
- color: var(--seed-color-palette-static-white)
165
+ color: var(--seed-color-fg-on-positive-solid)
115
166
  }
116
167
  .seed-badge__root--tone_positive-variant_outline {
117
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive-weak)
168
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive-weak);
169
+ color: var(--seed-color-fg-positive)
118
170
  }
119
171
  .seed-badge__label--tone_positive-variant_outline {
120
172
  color: var(--seed-color-fg-positive)
121
173
  }
122
174
  .seed-badge__root--tone_warning-variant_weak {
123
- background-color: var(--seed-color-bg-warning-weak)
175
+ background-color: var(--seed-color-bg-warning-weak);
176
+ color: var(--seed-color-fg-warning-contrast)
124
177
  }
125
178
  .seed-badge__label--tone_warning-variant_weak {
126
179
  color: var(--seed-color-fg-warning-contrast)
127
180
  }
128
181
  .seed-badge__root--tone_warning-variant_solid {
129
- background-color: var(--seed-color-bg-warning-solid)
182
+ background-color: var(--seed-color-bg-warning-solid);
183
+ color: var(--seed-color-fg-on-warning-solid)
130
184
  }
131
185
  .seed-badge__label--tone_warning-variant_solid {
132
- color: var(--seed-color-palette-static-black-alpha-900)
186
+ color: var(--seed-color-fg-on-warning-solid)
133
187
  }
134
188
  .seed-badge__root--tone_warning-variant_outline {
135
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning-weak)
189
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning-weak);
190
+ color: var(--seed-color-fg-warning)
136
191
  }
137
192
  .seed-badge__label--tone_warning-variant_outline {
138
193
  color: var(--seed-color-fg-warning)
139
194
  }
140
195
  .seed-badge__root--tone_critical-variant_weak {
141
- background-color: var(--seed-color-bg-critical-weak)
196
+ background-color: var(--seed-color-bg-critical-weak);
197
+ color: var(--seed-color-fg-critical-contrast)
142
198
  }
143
199
  .seed-badge__label--tone_critical-variant_weak {
144
200
  color: var(--seed-color-fg-critical-contrast)
145
201
  }
146
202
  .seed-badge__root--tone_critical-variant_solid {
147
- background-color: var(--seed-color-bg-critical-solid)
203
+ background-color: var(--seed-color-bg-critical-solid);
204
+ color: var(--seed-color-fg-on-critical-solid)
148
205
  }
149
206
  .seed-badge__label--tone_critical-variant_solid {
150
- color: var(--seed-color-palette-static-white)
207
+ color: var(--seed-color-fg-on-critical-solid)
151
208
  }
152
209
  .seed-badge__root--tone_critical-variant_outline {
153
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical-weak)
210
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical-weak);
211
+ color: var(--seed-color-fg-critical)
154
212
  }
155
213
  .seed-badge__label--tone_critical-variant_outline {
156
214
  color: var(--seed-color-fg-critical)
215
+ }
216
+ .seed-badge__action--size_medium-pressed_true {
217
+ transform: scale(var(--seed-scale-s95))
218
+ }
219
+ .seed-badge__action--size_large-pressed_true {
220
+ transform: scale(var(--seed-scale-s95))
157
221
  }
package/recipes/badge.d.ts CHANGED
@@ -11,6 +11,10 @@ declare interface BadgeVariant {
11
11
  * @default "neutral"
12
12
  */
13
13
  tone: "neutral" | "brand" | "informative" | "positive" | "warning" | "critical";
14
+ /**
15
+ * @default false
16
+ */
17
+ pressed: boolean;
14
18
  }
15
19
 
16
20
  declare type BadgeVariantMap = {
@@ -19,7 +23,7 @@ declare type BadgeVariantMap = {
19
23
 
20
24
  export declare type BadgeVariantProps = Partial<BadgeVariant>;
21
25
 
22
- export declare type BadgeSlotName = "root" | "label";
26
+ export declare type BadgeSlotName = "root" | "prefix" | "label" | "action";
23
27
 
24
28
  export declare const badgeVariantMap: BadgeVariantMap;
25
29
 
package/recipes/badge.mjs CHANGED
@@ -6,16 +6,25 @@ const badgeSlotNames = [
6
6
  "root",
7
7
  "seed-badge__root"
8
8
  ],
9
+ [
10
+ "prefix",
11
+ "seed-badge__prefix"
12
+ ],
9
13
  [
10
14
  "label",
11
15
  "seed-badge__label"
16
+ ],
17
+ [
18
+ "action",
19
+ "seed-badge__action"
12
20
  ]
13
21
  ];
14
22
 
15
23
  const defaultVariant = {
16
24
  "size": "medium",
17
25
  "variant": "solid",
18
- "tone": "neutral"
26
+ "tone": "neutral",
27
+ "pressed": false
19
28
  };
20
29
 
21
30
  const compoundVariants = [
@@ -90,6 +99,14 @@ const compoundVariants = [
90
99
  {
91
100
  "tone": "critical",
92
101
  "variant": "outline"
102
+ },
103
+ {
104
+ "size": "medium",
105
+ "pressed": true
106
+ },
107
+ {
108
+ "size": "large",
109
+ "pressed": true
93
110
  }
94
111
  ];
95
112
 
@@ -110,6 +127,10 @@ export const badgeVariantMap = {
110
127
  "positive",
111
128
  "warning",
112
129
  "critical"
130
+ ],
131
+ "pressed": [
132
+ true,
133
+ false
113
134
  ]
114
135
  };
115
136