@seed-design/css 0.0.28 → 0.0.30

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 (19) hide show
  1. package/all.css +201 -1
  2. package/all.min.css +1 -1
  3. package/base.css +4 -0
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/action-button.css +1 -1
  7. package/recipes/contextual-floating-button.css +94 -0
  8. package/recipes/contextual-floating-button.d.ts +26 -0
  9. package/recipes/contextual-floating-button.mjs +34 -0
  10. package/recipes/floating-action-button.css +76 -0
  11. package/recipes/floating-action-button.d.ts +24 -0
  12. package/recipes/floating-action-button.mjs +47 -0
  13. package/recipes/shared.mjs +1 -1
  14. package/vars/component/contextual-floating-button.d.ts +132 -0
  15. package/vars/component/contextual-floating-button.mjs +132 -0
  16. package/vars/component/floating-action-button.d.ts +54 -0
  17. package/vars/component/floating-action-button.mjs +54 -0
  18. package/vars/component/index.d.ts +2 -0
  19. package/vars/component/index.mjs +2 -0
package/base.css CHANGED
@@ -122,6 +122,10 @@
122
122
  --seed-box-position: initial;
123
123
  display: var(--seed-box-display);
124
124
  position: var(--seed-box-position);
125
+ --seed-box-unstable-transform: initial;
126
+ transform: var(--seed-box-unstable-transform);
127
+ --seed-box-z-index: initial;
128
+ z-index: var(--seed-box-z-index);
125
129
  --seed-box-overflow-x: initial;
126
130
  --seed-box-overflow-y: initial;
127
131
  overflow-x: var(--seed-box-overflow-x);
package/base.min.css CHANGED
@@ -1 +1 @@
1
- :root{--seed-safe-area-top:0px;--seed-safe-area-bottom:0px}@supports (left:constant(safe-area-inset-left)){:root{--seed-safe-area-top:constant(safe-area-inset-top);--seed-safe-area-bottom:constant(safe-area-inset-bottom)}}@supports (left:env(safe-area-inset-left)){:root{--seed-safe-area-top:env(safe-area-inset-top);--seed-safe-area-bottom:env(safe-area-inset-bottom)}}.seed-loading-indicator{display:inline-flex;position:absolute}.seed-icon,.seed-prefix-icon,.seed-suffix-icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-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);margin-left:var(--seed-prefix-icon-margin-left);margin-right:var(--seed-prefix-icon-margin-right);margin-top:var(--seed-prefix-icon-margin-top);color:var(--seed-prefix-icon-color,currentColor)}.seed-suffix-icon{width:var(--seed-suffix-icon-size);height:var(--seed-suffix-icon-size);margin-left:var(--seed-suffix-icon-margin-left);margin-right:var(--seed-suffix-icon-margin-right);margin-top:var(--seed-suffix-icon-margin-top);color:var(--seed-suffix-icon-color,currentColor)}.seed-count{font-size:var(--seed-count-font-size);line-height:var(--seed-count-line-height);font-weight:var(--seed-count-font-weight);color:var(--seed-count-color)}.seed-box{--seed-box-background:initial;--seed-box-color:initial;background-color:var(--seed-box-background);color:var(--seed-box-color);--seed-box-border-style:solid;--seed-box-border-color:initial;border-style:var(--seed-box-border-style);border-color:var(--seed-box-border-color);--seed-box-border-width:0;--seed-box-border-top-width:var(--seed-box-border-width);--seed-box-border-bottom-width:var(--seed-box-border-width);--seed-box-border-left-width:var(--seed-box-border-width);--seed-box-border-right-width:var(--seed-box-border-width);border-top-width:var(--seed-box-border-top-width);border-bottom-width:var(--seed-box-border-bottom-width);border-left-width:var(--seed-box-border-left-width);border-right-width:var(--seed-box-border-right-width);--seed-box-padding:0;--seed-box-padding-y:var(--seed-box-padding);--seed-box-padding-x:var(--seed-box-padding);--seed-box-padding-bottom:var(--seed-box-padding-y);--seed-box-padding-top:var(--seed-box-padding-y);--seed-box-padding-left:var(--seed-box-padding-x);--seed-box-padding-right:var(--seed-box-padding-x);padding-top:var(--seed-box-padding-top);padding-bottom:var(--seed-box-padding-bottom);padding-left:var(--seed-box-padding-left);padding-right:var(--seed-box-padding-right);--seed-box-min-height:initial;--seed-box-max-height:initial;--seed-box-height:initial;--seed-box-min-width:initial;--seed-box-max-width:initial;--seed-box-width:initial;min-height:var(--seed-box-min-height);max-height:var(--seed-box-max-height);height:var(--seed-box-height);min-width:var(--seed-box-min-width);max-width:var(--seed-box-max-width);width:var(--seed-box-width);--seed-box-top:initial;--seed-box-bottom:initial;--seed-box-left:initial;--seed-box-right:initial;top:var(--seed-box-top);bottom:var(--seed-box-bottom);left:var(--seed-box-left);right:var(--seed-box-right);--seed-box-border-radius:initial;--seed-box-border-bottom-left-radius:var(--seed-box-border-radius);--seed-box-border-bottom-right-radius:var(--seed-box-border-radius);--seed-box-border-top-left-radius:var(--seed-box-border-radius);--seed-box-border-top-right-radius:var(--seed-box-border-radius);border-bottom-left-radius:var(--seed-box-border-bottom-left-radius);border-bottom-right-radius:var(--seed-box-border-bottom-right-radius);border-top-left-radius:var(--seed-box-border-top-left-radius);border-top-right-radius:var(--seed-box-border-top-right-radius);--seed-box-display:block;--seed-box-position:initial;display:var(--seed-box-display);position:var(--seed-box-position);--seed-box-overflow-x:initial;--seed-box-overflow-y:initial;overflow-x:var(--seed-box-overflow-x);overflow-y:var(--seed-box-overflow-y);--seed-box-flex-grow:initial;--seed-box-flex-shrink:initial;flex-grow:var(--seed-box-flex-grow);flex-shrink:var(--seed-box-flex-shrink);--seed-box-flex-direction:initial;--seed-box-flex-wrap:initial;--seed-box-justify-content:initial;--seed-box-align-items:stretch;--seed-box-align-content:stretch;--seed-box-align-self:auto;--seed-box-gap:initial;flex-direction:var(--seed-box-flex-direction);flex-wrap:var(--seed-box-flex-wrap);justify-content:var(--seed-box-justify-content);align-items:var(--seed-box-align-items);align-content:var(--seed-box-align-content);align-self:var(--seed-box-align-self);gap:var(--seed-box-gap)}.seed-consistent-width:before{content:attr(data-text);visibility:hidden;height:0;font-weight:var(--seed-font-weight-regular);display:block}.seed-consistent-width:after{content:attr(data-text);visibility:hidden;height:0;font-weight:var(--seed-font-weight-bold);display:block}:root,[data-seed-color-mode=system]{color-scheme:light dark}[data-seed-color-mode=light-only]{color-scheme:light}[data-seed-color-mode=dark-only]{color-scheme:dark}: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:var(--seed-dimension-x2);--seed-dimension-spacing-x-global-gutter:var(--seed-dimension-x4);--seed-dimension-spacing-y-component-default:var(--seed-dimension-x3);--seed-dimension-spacing-y-nav-to-title:var(--seed-dimension-x5);--seed-dimension-spacing-y-screen-bottom:var(--seed-dimension-x14);--seed-dimension-spacing-y-between-text:var(--seed-dimension-x1_5);--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-font-size-t1:.6875rem;--seed-font-size-t2:.75rem;--seed-font-size-t3:.8125rem;--seed-font-size-t4:.875rem;--seed-font-size-t5:1rem;--seed-font-size-t6:1.125rem;--seed-font-size-t7:1.25rem;--seed-font-size-t8:1.375rem;--seed-font-size-t9:1.5rem;--seed-font-size-t10:1.625rem;--seed-font-size-t2-static:12px;--seed-font-size-t5-static:16px;--seed-font-size-t6-static:18px;--seed-font-weight-regular:400;--seed-font-weight-medium:500;--seed-font-weight-bold:700;--seed-line-height-t1:.9375rem;--seed-line-height-t2:1rem;--seed-line-height-t3:1.125rem;--seed-line-height-t4:1.1875rem;--seed-line-height-t5:1.375rem;--seed-line-height-t6:1.5rem;--seed-line-height-t7:1.6875rem;--seed-line-height-t8:1.875rem;--seed-line-height-t9:2rem;--seed-line-height-t10:2.1875rem;--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)}:root,:root[data-seed-color-mode=system][data-seed-user-color-scheme=light],:root[data-seed-color-mode=light-only],:root [data-seed-color-mode=light-only]{--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-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-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-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-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-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-static-black:#000;--seed-color-palette-static-white:#fff;--seed-color-palette-static-black-alpha-50:#0000000d;--seed-color-palette-static-black-alpha-200:#0003;--seed-color-palette-static-black-alpha-500:#00000080;--seed-color-palette-static-white-alpha-200:#fff3;--seed-color-palette-static-white-alpha-800:#fffc;--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-fg-brand:var(--seed-color-palette-carrot-600);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-magic:var(--seed-color-palette-purple-700);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-magic-contrast:var(--seed-color-palette-purple-900);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-00);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-disabled:var(--seed-color-palette-gray-200);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-600);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-700);--seed-color-bg-critical-solid:var(--seed-color-palette-red-700);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-800);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-700);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-800);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-200);--seed-color-bg-layer-default:var(--seed-color-palette-gray-00);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-100);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-magic-solid:var(--seed-color-palette-purple-700);--seed-color-bg-magic-weak:var(--seed-color-palette-purple-100);--seed-color-bg-magic-solid-pressed:var(--seed-color-palette-purple-800);--seed-color-bg-magic-weak-pressed:var(--seed-color-palette-purple-200);--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-200);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-200);--seed-color-bg-positive-solid:var(--seed-color-palette-green-700);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-800);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-300);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand:var(--seed-color-palette-carrot-300);--seed-color-stroke-control:var(--seed-color-palette-gray-400);--seed-color-stroke-critical:var(--seed-color-palette-red-300);--seed-color-stroke-field:var(--seed-color-palette-gray-400);--seed-color-stroke-informative:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral:var(--seed-color-palette-gray-300);--seed-color-stroke-positive:var(--seed-color-palette-green-300);--seed-color-stroke-field-focused:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-muted:var(--seed-color-palette-gray-200);--seed-color-stroke-on-image:var(--seed-color-palette-static-black-alpha-50);--seed-color-manner-temp-l1-bg:#eff0f1;--seed-color-manner-temp-l1-text:#62666a;--seed-color-manner-temp-l2-bg:#e7f2fc;--seed-color-manner-temp-l2-text:#2592f7;--seed-color-manner-temp-l3-bg:#e3f6fc;--seed-color-manner-temp-l3-text:#0099c8;--seed-color-manner-temp-l4-bg:#ebf9f4;--seed-color-manner-temp-l4-text:#03a07e;--seed-color-manner-temp-l5-bg:#fff5e5;--seed-color-manner-temp-l5-text:#d28500;--seed-color-manner-temp-l6-bg:#fff0e5;--seed-color-manner-temp-l6-text:#f06000;--seed-gradient-shimmer:#fff0 0%,#fff6 46%,#fff6 54%,#fff0 100%}:root[data-seed-color-mode=system][data-seed-user-color-scheme=dark],:root[data-seed-color-mode=dark-only],:root [data-seed-color-mode=dark-only]{--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-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-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-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-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-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-static-black:#000;--seed-color-palette-static-white:#fff;--seed-color-palette-static-black-alpha-50:#0000000d;--seed-color-palette-static-black-alpha-200:#0003;--seed-color-palette-static-black-alpha-500:#00000080;--seed-color-palette-static-white-alpha-200:#fff3;--seed-color-palette-static-white-alpha-800:#fffc;--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-fg-brand:var(--seed-color-palette-carrot-700);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-magic:var(--seed-color-palette-purple-700);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-magic-contrast:var(--seed-color-palette-purple-900);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-100);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-disabled:var(--seed-color-palette-gray-300);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-800);--seed-color-bg-critical-solid:var(--seed-color-palette-red-600);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-700);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-600);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-700);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default:var(--seed-color-palette-gray-100);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-200);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-200);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-magic-solid:var(--seed-color-palette-purple-600);--seed-color-bg-magic-weak:var(--seed-color-palette-purple-100);--seed-color-bg-magic-solid-pressed:var(--seed-color-palette-purple-700);--seed-color-bg-magic-weak-pressed:var(--seed-color-palette-purple-200);--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-400);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-500);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-400);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-200);--seed-color-bg-positive-solid:var(--seed-color-palette-green-500);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-500);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-600);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand:var(--seed-color-palette-carrot-300);--seed-color-stroke-control:var(--seed-color-palette-gray-400);--seed-color-stroke-critical:var(--seed-color-palette-red-300);--seed-color-stroke-field:var(--seed-color-palette-gray-400);--seed-color-stroke-informative:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral:var(--seed-color-palette-gray-300);--seed-color-stroke-positive:var(--seed-color-palette-green-300);--seed-color-stroke-field-focused:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-muted:var(--seed-color-palette-gray-200);--seed-color-stroke-on-image:var(--seed-color-palette-static-black-alpha-50);--seed-color-manner-temp-l1-bg:#222226;--seed-color-manner-temp-l1-text:#b1b5b9;--seed-color-manner-temp-l2-bg:#16212b;--seed-color-manner-temp-l2-text:#7cbaf4;--seed-color-manner-temp-l3-bg:#12262c;--seed-color-manner-temp-l3-text:#47c3eb;--seed-color-manner-temp-l4-bg:#162822;--seed-color-manner-temp-l4-text:#33cc94;--seed-color-manner-temp-l5-bg:#2e2312;--seed-color-manner-temp-l5-text:#ffa100;--seed-color-manner-temp-l6-bg:#2e1d12;--seed-color-manner-temp-l6-text:#ff9147;--seed-gradient-shimmer:#fff0 0%,#ffffff1a 46%,#ffffff1a 54%,#fff0 100%}@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)scale3d(var(--seed-enter-scale,1),var(--seed-enter-scale,1),var(--seed-enter-scale,1))rotate(var(--seed-enter-rotate,0))}}@keyframes seed-exit{to{opacity:var(--seed-exit-opacity,1);transform:translate3d(var(--seed-exit-translate-x,0),var(--seed-exit-translate-y,0),0)scale3d(var(--seed-exit-scale,1),var(--seed-exit-scale,1),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 progress-circle-head{0%{stroke-dasharray:0 1000%}75%{stroke-dasharray:var(--circumference),1000%}to{stroke-dasharray:var(--circumference),1000%}}@keyframes progress-circle-tail{0%{stroke-dashoffset:0}33.33%{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--circumference)*-1)}}
1
+ :root{--seed-safe-area-top:0px;--seed-safe-area-bottom:0px}@supports (left:constant(safe-area-inset-left)){:root{--seed-safe-area-top:constant(safe-area-inset-top);--seed-safe-area-bottom:constant(safe-area-inset-bottom)}}@supports (left:env(safe-area-inset-left)){:root{--seed-safe-area-top:env(safe-area-inset-top);--seed-safe-area-bottom:env(safe-area-inset-bottom)}}.seed-loading-indicator{display:inline-flex;position:absolute}.seed-icon,.seed-prefix-icon,.seed-suffix-icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-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);margin-left:var(--seed-prefix-icon-margin-left);margin-right:var(--seed-prefix-icon-margin-right);margin-top:var(--seed-prefix-icon-margin-top);color:var(--seed-prefix-icon-color,currentColor)}.seed-suffix-icon{width:var(--seed-suffix-icon-size);height:var(--seed-suffix-icon-size);margin-left:var(--seed-suffix-icon-margin-left);margin-right:var(--seed-suffix-icon-margin-right);margin-top:var(--seed-suffix-icon-margin-top);color:var(--seed-suffix-icon-color,currentColor)}.seed-count{font-size:var(--seed-count-font-size);line-height:var(--seed-count-line-height);font-weight:var(--seed-count-font-weight);color:var(--seed-count-color)}.seed-box{--seed-box-background:initial;--seed-box-color:initial;background-color:var(--seed-box-background);color:var(--seed-box-color);--seed-box-border-style:solid;--seed-box-border-color:initial;border-style:var(--seed-box-border-style);border-color:var(--seed-box-border-color);--seed-box-border-width:0;--seed-box-border-top-width:var(--seed-box-border-width);--seed-box-border-bottom-width:var(--seed-box-border-width);--seed-box-border-left-width:var(--seed-box-border-width);--seed-box-border-right-width:var(--seed-box-border-width);border-top-width:var(--seed-box-border-top-width);border-bottom-width:var(--seed-box-border-bottom-width);border-left-width:var(--seed-box-border-left-width);border-right-width:var(--seed-box-border-right-width);--seed-box-padding:0;--seed-box-padding-y:var(--seed-box-padding);--seed-box-padding-x:var(--seed-box-padding);--seed-box-padding-bottom:var(--seed-box-padding-y);--seed-box-padding-top:var(--seed-box-padding-y);--seed-box-padding-left:var(--seed-box-padding-x);--seed-box-padding-right:var(--seed-box-padding-x);padding-top:var(--seed-box-padding-top);padding-bottom:var(--seed-box-padding-bottom);padding-left:var(--seed-box-padding-left);padding-right:var(--seed-box-padding-right);--seed-box-min-height:initial;--seed-box-max-height:initial;--seed-box-height:initial;--seed-box-min-width:initial;--seed-box-max-width:initial;--seed-box-width:initial;min-height:var(--seed-box-min-height);max-height:var(--seed-box-max-height);height:var(--seed-box-height);min-width:var(--seed-box-min-width);max-width:var(--seed-box-max-width);width:var(--seed-box-width);--seed-box-top:initial;--seed-box-bottom:initial;--seed-box-left:initial;--seed-box-right:initial;top:var(--seed-box-top);bottom:var(--seed-box-bottom);left:var(--seed-box-left);right:var(--seed-box-right);--seed-box-border-radius:initial;--seed-box-border-bottom-left-radius:var(--seed-box-border-radius);--seed-box-border-bottom-right-radius:var(--seed-box-border-radius);--seed-box-border-top-left-radius:var(--seed-box-border-radius);--seed-box-border-top-right-radius:var(--seed-box-border-radius);border-bottom-left-radius:var(--seed-box-border-bottom-left-radius);border-bottom-right-radius:var(--seed-box-border-bottom-right-radius);border-top-left-radius:var(--seed-box-border-top-left-radius);border-top-right-radius:var(--seed-box-border-top-right-radius);--seed-box-display:block;--seed-box-position:initial;display:var(--seed-box-display);position:var(--seed-box-position);--seed-box-unstable-transform:initial;transform:var(--seed-box-unstable-transform);--seed-box-z-index:initial;z-index:var(--seed-box-z-index);--seed-box-overflow-x:initial;--seed-box-overflow-y:initial;overflow-x:var(--seed-box-overflow-x);overflow-y:var(--seed-box-overflow-y);--seed-box-flex-grow:initial;--seed-box-flex-shrink:initial;flex-grow:var(--seed-box-flex-grow);flex-shrink:var(--seed-box-flex-shrink);--seed-box-flex-direction:initial;--seed-box-flex-wrap:initial;--seed-box-justify-content:initial;--seed-box-align-items:stretch;--seed-box-align-content:stretch;--seed-box-align-self:auto;--seed-box-gap:initial;flex-direction:var(--seed-box-flex-direction);flex-wrap:var(--seed-box-flex-wrap);justify-content:var(--seed-box-justify-content);align-items:var(--seed-box-align-items);align-content:var(--seed-box-align-content);align-self:var(--seed-box-align-self);gap:var(--seed-box-gap)}.seed-consistent-width:before{content:attr(data-text);visibility:hidden;height:0;font-weight:var(--seed-font-weight-regular);display:block}.seed-consistent-width:after{content:attr(data-text);visibility:hidden;height:0;font-weight:var(--seed-font-weight-bold);display:block}:root,[data-seed-color-mode=system]{color-scheme:light dark}[data-seed-color-mode=light-only]{color-scheme:light}[data-seed-color-mode=dark-only]{color-scheme:dark}: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:var(--seed-dimension-x2);--seed-dimension-spacing-x-global-gutter:var(--seed-dimension-x4);--seed-dimension-spacing-y-component-default:var(--seed-dimension-x3);--seed-dimension-spacing-y-nav-to-title:var(--seed-dimension-x5);--seed-dimension-spacing-y-screen-bottom:var(--seed-dimension-x14);--seed-dimension-spacing-y-between-text:var(--seed-dimension-x1_5);--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-font-size-t1:.6875rem;--seed-font-size-t2:.75rem;--seed-font-size-t3:.8125rem;--seed-font-size-t4:.875rem;--seed-font-size-t5:1rem;--seed-font-size-t6:1.125rem;--seed-font-size-t7:1.25rem;--seed-font-size-t8:1.375rem;--seed-font-size-t9:1.5rem;--seed-font-size-t10:1.625rem;--seed-font-size-t2-static:12px;--seed-font-size-t5-static:16px;--seed-font-size-t6-static:18px;--seed-font-weight-regular:400;--seed-font-weight-medium:500;--seed-font-weight-bold:700;--seed-line-height-t1:.9375rem;--seed-line-height-t2:1rem;--seed-line-height-t3:1.125rem;--seed-line-height-t4:1.1875rem;--seed-line-height-t5:1.375rem;--seed-line-height-t6:1.5rem;--seed-line-height-t7:1.6875rem;--seed-line-height-t8:1.875rem;--seed-line-height-t9:2rem;--seed-line-height-t10:2.1875rem;--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)}:root,:root[data-seed-color-mode=system][data-seed-user-color-scheme=light],:root[data-seed-color-mode=light-only],:root [data-seed-color-mode=light-only]{--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-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-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-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-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-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-static-black:#000;--seed-color-palette-static-white:#fff;--seed-color-palette-static-black-alpha-50:#0000000d;--seed-color-palette-static-black-alpha-200:#0003;--seed-color-palette-static-black-alpha-500:#00000080;--seed-color-palette-static-white-alpha-200:#fff3;--seed-color-palette-static-white-alpha-800:#fffc;--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-fg-brand:var(--seed-color-palette-carrot-600);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-magic:var(--seed-color-palette-purple-700);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-magic-contrast:var(--seed-color-palette-purple-900);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-00);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-disabled:var(--seed-color-palette-gray-200);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-600);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-700);--seed-color-bg-critical-solid:var(--seed-color-palette-red-700);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-800);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-700);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-800);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-200);--seed-color-bg-layer-default:var(--seed-color-palette-gray-00);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-100);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-magic-solid:var(--seed-color-palette-purple-700);--seed-color-bg-magic-weak:var(--seed-color-palette-purple-100);--seed-color-bg-magic-solid-pressed:var(--seed-color-palette-purple-800);--seed-color-bg-magic-weak-pressed:var(--seed-color-palette-purple-200);--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-200);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-200);--seed-color-bg-positive-solid:var(--seed-color-palette-green-700);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-800);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-300);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand:var(--seed-color-palette-carrot-300);--seed-color-stroke-control:var(--seed-color-palette-gray-400);--seed-color-stroke-critical:var(--seed-color-palette-red-300);--seed-color-stroke-field:var(--seed-color-palette-gray-400);--seed-color-stroke-informative:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral:var(--seed-color-palette-gray-300);--seed-color-stroke-positive:var(--seed-color-palette-green-300);--seed-color-stroke-field-focused:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-muted:var(--seed-color-palette-gray-200);--seed-color-stroke-on-image:var(--seed-color-palette-static-black-alpha-50);--seed-color-manner-temp-l1-bg:#eff0f1;--seed-color-manner-temp-l1-text:#62666a;--seed-color-manner-temp-l2-bg:#e7f2fc;--seed-color-manner-temp-l2-text:#2592f7;--seed-color-manner-temp-l3-bg:#e3f6fc;--seed-color-manner-temp-l3-text:#0099c8;--seed-color-manner-temp-l4-bg:#ebf9f4;--seed-color-manner-temp-l4-text:#03a07e;--seed-color-manner-temp-l5-bg:#fff5e5;--seed-color-manner-temp-l5-text:#d28500;--seed-color-manner-temp-l6-bg:#fff0e5;--seed-color-manner-temp-l6-text:#f06000;--seed-gradient-shimmer:#fff0 0%,#fff6 46%,#fff6 54%,#fff0 100%}:root[data-seed-color-mode=system][data-seed-user-color-scheme=dark],:root[data-seed-color-mode=dark-only],:root [data-seed-color-mode=dark-only]{--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-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-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-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-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-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-static-black:#000;--seed-color-palette-static-white:#fff;--seed-color-palette-static-black-alpha-50:#0000000d;--seed-color-palette-static-black-alpha-200:#0003;--seed-color-palette-static-black-alpha-500:#00000080;--seed-color-palette-static-white-alpha-200:#fff3;--seed-color-palette-static-white-alpha-800:#fffc;--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-fg-brand:var(--seed-color-palette-carrot-700);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-magic:var(--seed-color-palette-purple-700);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-magic-contrast:var(--seed-color-palette-purple-900);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-100);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-disabled:var(--seed-color-palette-gray-300);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-800);--seed-color-bg-critical-solid:var(--seed-color-palette-red-600);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-700);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-600);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-700);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default:var(--seed-color-palette-gray-100);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-200);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-200);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-magic-solid:var(--seed-color-palette-purple-600);--seed-color-bg-magic-weak:var(--seed-color-palette-purple-100);--seed-color-bg-magic-solid-pressed:var(--seed-color-palette-purple-700);--seed-color-bg-magic-weak-pressed:var(--seed-color-palette-purple-200);--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-400);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-500);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-400);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-200);--seed-color-bg-positive-solid:var(--seed-color-palette-green-500);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-500);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-600);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand:var(--seed-color-palette-carrot-300);--seed-color-stroke-control:var(--seed-color-palette-gray-400);--seed-color-stroke-critical:var(--seed-color-palette-red-300);--seed-color-stroke-field:var(--seed-color-palette-gray-400);--seed-color-stroke-informative:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral:var(--seed-color-palette-gray-300);--seed-color-stroke-positive:var(--seed-color-palette-green-300);--seed-color-stroke-field-focused:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-muted:var(--seed-color-palette-gray-200);--seed-color-stroke-on-image:var(--seed-color-palette-static-black-alpha-50);--seed-color-manner-temp-l1-bg:#222226;--seed-color-manner-temp-l1-text:#b1b5b9;--seed-color-manner-temp-l2-bg:#16212b;--seed-color-manner-temp-l2-text:#7cbaf4;--seed-color-manner-temp-l3-bg:#12262c;--seed-color-manner-temp-l3-text:#47c3eb;--seed-color-manner-temp-l4-bg:#162822;--seed-color-manner-temp-l4-text:#33cc94;--seed-color-manner-temp-l5-bg:#2e2312;--seed-color-manner-temp-l5-text:#ffa100;--seed-color-manner-temp-l6-bg:#2e1d12;--seed-color-manner-temp-l6-text:#ff9147;--seed-gradient-shimmer:#fff0 0%,#ffffff1a 46%,#ffffff1a 54%,#fff0 100%}@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)scale3d(var(--seed-enter-scale,1),var(--seed-enter-scale,1),var(--seed-enter-scale,1))rotate(var(--seed-enter-rotate,0))}}@keyframes seed-exit{to{opacity:var(--seed-exit-opacity,1);transform:translate3d(var(--seed-exit-translate-x,0),var(--seed-exit-translate-y,0),0)scale3d(var(--seed-exit-scale,1),var(--seed-exit-scale,1),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 progress-circle-head{0%{stroke-dasharray:0 1000%}75%{stroke-dasharray:var(--circumference),1000%}to{stroke-dasharray:var(--circumference),1000%}}@keyframes progress-circle-tail{0%{stroke-dashoffset:0}33.33%{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--circumference)*-1)}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "0.0.28",
3
+ "version": "0.0.30",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/action-button.css CHANGED
@@ -16,7 +16,7 @@
16
16
  font-family: inherit;
17
17
  --seed-box-flex-grow: initial;
18
18
  flex-grow: var(--seed-box-flex-grow);
19
- --seed-box-min-width: var(--seed-box-min-width);
19
+ --seed-box-min-width: initial;
20
20
  min-width: var(--seed-box-min-width);
21
21
  }
22
22
  .seed-action-button:is(:focus, [data-focus]) {
package/recipes/contextual-floating-button.css ADDED
@@ -0,0 +1,94 @@
1
+ .seed-contextual-floating-button {
2
+ display: inline-flex;
3
+ box-sizing: border-box;
4
+ align-items: center;
5
+ justify-content: center;
6
+ cursor: pointer;
7
+ border: none;
8
+ text-transform: none;
9
+ -webkit-font-smoothing: antialiased;
10
+ -moz-osx-font-smoothing: grayscale;
11
+ text-decoration: none;
12
+ font-family: inherit;
13
+ }
14
+ .seed-contextual-floating-button:is(:focus, [data-focus]) {
15
+ outline: none;
16
+ }
17
+ .seed-contextual-floating-button:is(:disabled, [disabled], [data-disabled]) {
18
+ cursor: not-allowed;
19
+ }
20
+ .seed-contextual-floating-button {
21
+ border-radius: var(--seed-radius-full);
22
+ box-shadow: 0px 2px 6px 0px #00000026;
23
+ font-size: var(--seed-font-size-t4);
24
+ line-height: var(--seed-line-height-t4);
25
+ font-weight: var(--seed-font-weight-medium);
26
+ --seed-box-z-index: initial;
27
+ z-index: var(--seed-box-z-index);
28
+ --seed-box-position: initial;
29
+ position: var(--seed-box-position);
30
+ --seed-box-top: initial;
31
+ --seed-box-right: initial;
32
+ --seed-box-bottom: initial;
33
+ --seed-box-left: initial;
34
+ top: var(--seed-box-top);
35
+ right: var(--seed-box-right);
36
+ bottom: var(--seed-box-bottom);
37
+ left: var(--seed-box-left);
38
+ --seed-icon-size: 22px;
39
+ --size: 16px;
40
+ --thickness: 2px;
41
+ transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
42
+ }
43
+ .seed-contextual-floating-button--variant_solid {
44
+ background: var(--seed-color-bg-neutral-inverted);
45
+ color: var(--seed-color-fg-neutral-inverted);
46
+ --seed-icon-color: var(--seed-color-fg-neutral-inverted);
47
+ --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
48
+ --track-color: var(--seed-color-palette-gray-700);
49
+ --range-color: var(--seed-color-fg-neutral-inverted);
50
+ }
51
+ .seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
52
+ background: var(--seed-color-bg-neutral-inverted-pressed);
53
+ }
54
+ .seed-contextual-floating-button--variant_solid:is(:disabled, [disabled], [data-disabled]) {
55
+ background: var(--seed-color-bg-disabled);
56
+ color: var(--seed-color-fg-disabled);
57
+ --seed-prefix-icon-color: var(--seed-color-fg-disabled);
58
+ --seed-icon-color: var(--seed-color-fg-disabled);
59
+ }
60
+ .seed-contextual-floating-button--variant_solid[data-loading] {
61
+ background: var(--seed-color-bg-neutral-inverted-pressed);
62
+ }
63
+ .seed-contextual-floating-button--variant_layer {
64
+ background: var(--seed-color-bg-layer-floating);
65
+ color: var(--seed-color-fg-neutral);
66
+ --seed-icon-color: var(--seed-color-fg-neutral);
67
+ --seed-prefix-icon-color: var(--seed-color-fg-neutral);
68
+ --track-color: var(--seed-color-palette-gray-500);
69
+ --range-color: var(--seed-color-fg-neutral);
70
+ }
71
+ .seed-contextual-floating-button--variant_layer:is(:active, [data-active]) {
72
+ background: var(--seed-color-bg-layer-floating-pressed);
73
+ }
74
+ .seed-contextual-floating-button--variant_layer:is(:disabled, [disabled], [data-disabled]) {
75
+ background: var(--seed-color-bg-disabled);
76
+ color: var(--seed-color-fg-disabled);
77
+ --seed-prefix-icon-color: var(--seed-color-fg-disabled);
78
+ --seed-icon-color: var(--seed-color-fg-disabled);
79
+ }
80
+ .seed-contextual-floating-button--variant_layer[data-loading] {
81
+ background: var(--seed-color-bg-layer-floating-pressed);
82
+ }
83
+ .seed-contextual-floating-button--layout_withText {
84
+ min-height: 36px;
85
+ padding-inline: var(--seed-dimension-x3_5);
86
+ padding-block: var(--seed-dimension-x2);
87
+ gap: var(--seed-dimension-x1);
88
+ --seed-prefix-icon-size: 16px;
89
+ }
90
+ .seed-contextual-floating-button--layout_iconOnly {
91
+ width: 44px;
92
+ height: 44px;
93
+ --seed-icon-size: 22px;
94
+ }
package/recipes/contextual-floating-button.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ declare interface ContextualFloatingButtonVariant {
2
+ /**
3
+ * @default solid
4
+ */
5
+ variant: "solid" | "layer";
6
+ /**
7
+ * @default withText
8
+ */
9
+ layout: "withText" | "iconOnly";
10
+ }
11
+
12
+ declare type ContextualFloatingButtonVariantMap = {
13
+ [key in keyof ContextualFloatingButtonVariant]: Array<ContextualFloatingButtonVariant[key]>;
14
+ };
15
+
16
+ export declare type ContextualFloatingButtonVariantProps = Partial<ContextualFloatingButtonVariant>;
17
+
18
+ export declare const contextualFloatingButtonVariantMap: ContextualFloatingButtonVariantMap;
19
+
20
+ export declare const contextualFloatingButton: ((
21
+ props?: ContextualFloatingButtonVariantProps,
22
+ ) => string) & {
23
+ splitVariantProps: <T extends ContextualFloatingButtonVariantProps>(
24
+ props: T,
25
+ ) => [ContextualFloatingButtonVariantProps, Omit<T, keyof ContextualFloatingButtonVariantProps>];
26
+ }
package/recipes/contextual-floating-button.mjs ADDED
@@ -0,0 +1,34 @@
1
+ import './contextual-floating-button.css';
2
+ import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
3
+
4
+ const defaultVariant = {
5
+ "variant": "solid",
6
+ "layout": "withText"
7
+ };
8
+
9
+ const compoundVariants = [];
10
+
11
+ export const contextualFloatingButtonVariantMap = {
12
+ "variant": [
13
+ "solid",
14
+ "layer"
15
+ ],
16
+ "layout": [
17
+ "withText",
18
+ "iconOnly"
19
+ ]
20
+ };
21
+
22
+ export const contextualFloatingButtonVariantKeys = Object.keys(contextualFloatingButtonVariantMap);
23
+
24
+ export function contextualFloatingButton(props) {
25
+ return createClassName(
26
+ "seed-contextual-floating-button",
27
+ mergeVariants(defaultVariant, props),
28
+ compoundVariants,
29
+ );
30
+ }
31
+
32
+ Object.assign(contextualFloatingButton, { splitVariantProps: (props) => splitVariantProps(props, contextualFloatingButtonVariantMap) });
33
+
34
+ // @recipe(seed): contextual-floating-button
package/recipes/floating-action-button.css ADDED
@@ -0,0 +1,76 @@
1
+ .seed-floating-action-button__root {
2
+ display: inline-flex;
3
+ box-sizing: border-box;
4
+ align-items: center;
5
+ justify-content: center;
6
+ cursor: pointer;
7
+ border: none;
8
+ text-transform: none;
9
+ -webkit-font-smoothing: antialiased;
10
+ -moz-osx-font-smoothing: grayscale;
11
+ text-decoration: none;
12
+ font-family: inherit;
13
+ }
14
+ .seed-floating-action-button__root:is(:focus, [data-focus]) {
15
+ outline: none;
16
+ }
17
+ .seed-floating-action-button__root:is(:disabled, [disabled], [data-disabled]) {
18
+ cursor: not-allowed;
19
+ }
20
+ .seed-floating-action-button__root {
21
+ position: relative;
22
+ overflow: hidden;
23
+ background: var(--seed-color-bg-brand-solid);
24
+ border-radius: var(--seed-radius-full);
25
+ box-shadow: 0px 2px 6px 0px #00000026;
26
+ color: var(--seed-color-palette-static-white);
27
+ font-size: var(--seed-font-size-t5);
28
+ line-height: var(--seed-line-height-t5);
29
+ font-weight: var(--seed-font-weight-bold);
30
+ transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing);
31
+ }
32
+ .seed-floating-action-button__root:is(:active, [data-active]) {
33
+ background: var(--seed-color-bg-brand-solid-pressed);
34
+ }
35
+ .seed-floating-action-button__icon {
36
+ display: inline-flex;
37
+ align-items: center;
38
+ justify-content: center;
39
+ flex-shrink: 0;
40
+ color: var(--seed-color-palette-static-white);
41
+ transition: margin-right var(--seed-duration-d4) var(--seed-timing-function-easing), width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing);
42
+ }
43
+ .seed-floating-action-button__label {
44
+ word-break: keep-all;
45
+ white-space: nowrap;
46
+ overflow: hidden;
47
+ }
48
+ .seed-floating-action-button__root--extended_true {
49
+ padding-inline: var(--seed-dimension-x4_5);
50
+ height: 48px;
51
+ width: fit-content;
52
+ max-width: 999px;
53
+ }
54
+ .seed-floating-action-button__icon--extended_true {
55
+ width: var(--seed-dimension-x5);
56
+ height: var(--seed-dimension-x5);
57
+ margin-right: var(--seed-dimension-x1);
58
+ transition: none;
59
+ }
60
+ .seed-floating-action-button__root--extended_false {
61
+ padding: 0;
62
+ min-width: 56px;
63
+ max-width: 56px;
64
+ height: 56px;
65
+ }
66
+ .seed-floating-action-button__icon--extended_false {
67
+ position: absolute;
68
+ top: 50%;
69
+ left: 50%;
70
+ transform: translate(-50%, -50%);
71
+ width: var(--seed-dimension-x6);
72
+ height: var(--seed-dimension-x6);
73
+ }
74
+ .seed-floating-action-button__label--extended_false {
75
+ opacity: 0;
76
+ }
package/recipes/floating-action-button.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ declare interface FloatingActionButtonVariant {
2
+ /**
3
+ * @default true
4
+ */
5
+ extended: boolean;
6
+ }
7
+
8
+ declare type FloatingActionButtonVariantMap = {
9
+ [key in keyof FloatingActionButtonVariant]: Array<FloatingActionButtonVariant[key]>;
10
+ };
11
+
12
+ export declare type FloatingActionButtonVariantProps = Partial<FloatingActionButtonVariant>;
13
+
14
+ export declare type FloatingActionButtonSlotName = "root" | "icon" | "label";
15
+
16
+ export declare const floatingActionButtonVariantMap: FloatingActionButtonVariantMap;
17
+
18
+ export declare const floatingActionButton: ((
19
+ props?: FloatingActionButtonVariantProps,
20
+ ) => Record<FloatingActionButtonSlotName, string>) & {
21
+ splitVariantProps: <T extends FloatingActionButtonVariantProps>(
22
+ props: T,
23
+ ) => [FloatingActionButtonVariantProps, Omit<T, keyof FloatingActionButtonVariantProps>];
24
+ }
package/recipes/floating-action-button.mjs ADDED
@@ -0,0 +1,47 @@
1
+ import './floating-action-button.css';
2
+ import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
3
+
4
+ const floatingActionButtonSlotNames = [
5
+ [
6
+ "root",
7
+ "seed-floating-action-button__root"
8
+ ],
9
+ [
10
+ "icon",
11
+ "seed-floating-action-button__icon"
12
+ ],
13
+ [
14
+ "label",
15
+ "seed-floating-action-button__label"
16
+ ]
17
+ ];
18
+
19
+ const defaultVariant = {
20
+ "extended": true
21
+ };
22
+
23
+ const compoundVariants = [];
24
+
25
+ export const floatingActionButtonVariantMap = {
26
+ "extended": [
27
+ true,
28
+ false
29
+ ]
30
+ };
31
+
32
+ export const floatingActionButtonVariantKeys = Object.keys(floatingActionButtonVariantMap);
33
+
34
+ export function floatingActionButton(props) {
35
+ return Object.fromEntries(
36
+ floatingActionButtonSlotNames.map(([slot, className]) => {
37
+ return [
38
+ slot,
39
+ createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
40
+ ];
41
+ }),
42
+ );
43
+ }
44
+
45
+ Object.assign(floatingActionButton, { splitVariantProps: (props) => splitVariantProps(props, floatingActionButtonVariantMap) });
46
+
47
+ // @recipe(seed): floating-action-button
package/recipes/shared.mjs CHANGED
@@ -27,7 +27,7 @@ export const createClassName = (className, variants, compoundVariants = []) => {
27
27
  export function mergeVariants(a, b) {
28
28
  const result = { ...a };
29
29
  for (const k in b) {
30
- if (b[k]) {
30
+ if (b[k] != null) {
31
31
  result[k] = b[k];
32
32
  }
33
33
  }
package/vars/component/contextual-floating-button.d.ts ADDED
@@ -0,0 +1,132 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "cornerRadius": "var(--seed-radius-full)",
6
+ "shadow": "0px 2px 6px 0px #00000026",
7
+ "colorDuration": "var(--seed-duration-d4)",
8
+ "colorTimingFunction": "var(--seed-timing-function-easing)"
9
+ },
10
+ "progressCircle": {
11
+ "size": "16px",
12
+ "thickness": "2px"
13
+ }
14
+ }
15
+ },
16
+ "variantSolid": {
17
+ "enabled": {
18
+ "root": {
19
+ "color": "var(--seed-color-bg-neutral-inverted)"
20
+ },
21
+ "progressCircle": {
22
+ "trackColor": "var(--seed-color-palette-gray-700)",
23
+ "rangeColor": "var(--seed-color-fg-neutral-inverted)"
24
+ },
25
+ "label": {
26
+ "color": "var(--seed-color-fg-neutral-inverted)"
27
+ },
28
+ "prefixIcon": {
29
+ "color": "var(--seed-color-fg-neutral-inverted)"
30
+ },
31
+ "icon": {
32
+ "color": "var(--seed-color-fg-neutral-inverted)"
33
+ }
34
+ },
35
+ "pressed": {
36
+ "root": {
37
+ "color": "var(--seed-color-bg-neutral-inverted-pressed)"
38
+ }
39
+ },
40
+ "disabled": {
41
+ "root": {
42
+ "color": "var(--seed-color-bg-disabled)"
43
+ },
44
+ "label": {
45
+ "color": "var(--seed-color-fg-disabled)"
46
+ },
47
+ "prefixIcon": {
48
+ "color": "var(--seed-color-fg-disabled)"
49
+ },
50
+ "icon": {
51
+ "color": "var(--seed-color-fg-disabled)"
52
+ }
53
+ },
54
+ "loading": {
55
+ "root": {
56
+ "color": "var(--seed-color-bg-neutral-inverted-pressed)"
57
+ }
58
+ }
59
+ },
60
+ "variantLayer": {
61
+ "enabled": {
62
+ "root": {
63
+ "color": "var(--seed-color-bg-layer-floating)"
64
+ },
65
+ "progressCircle": {
66
+ "trackColor": "var(--seed-color-palette-gray-500)",
67
+ "rangeColor": "var(--seed-color-fg-neutral)"
68
+ },
69
+ "label": {
70
+ "color": "var(--seed-color-fg-neutral)"
71
+ },
72
+ "prefixIcon": {
73
+ "color": "var(--seed-color-fg-neutral)"
74
+ },
75
+ "icon": {
76
+ "color": "var(--seed-color-fg-neutral)"
77
+ }
78
+ },
79
+ "pressed": {
80
+ "root": {
81
+ "color": "var(--seed-color-bg-layer-floating-pressed)"
82
+ }
83
+ },
84
+ "disabled": {
85
+ "root": {
86
+ "color": "var(--seed-color-bg-disabled)"
87
+ },
88
+ "label": {
89
+ "color": "var(--seed-color-fg-disabled)"
90
+ },
91
+ "prefixIcon": {
92
+ "color": "var(--seed-color-fg-disabled)"
93
+ },
94
+ "icon": {
95
+ "color": "var(--seed-color-fg-disabled)"
96
+ }
97
+ },
98
+ "loading": {
99
+ "root": {
100
+ "color": "var(--seed-color-bg-layer-floating-pressed)"
101
+ }
102
+ }
103
+ },
104
+ "layoutWithText": {
105
+ "enabled": {
106
+ "root": {
107
+ "minHeight": "36px",
108
+ "paddingX": "var(--seed-dimension-x3_5)",
109
+ "paddingY": "var(--seed-dimension-x2)",
110
+ "gap": "var(--seed-dimension-x1)"
111
+ },
112
+ "label": {
113
+ "fontSize": "var(--seed-font-size-t4)",
114
+ "lineHeight": "var(--seed-line-height-t4)",
115
+ "fontWeight": "var(--seed-font-weight-medium)"
116
+ },
117
+ "prefixIcon": {
118
+ "size": "16px"
119
+ }
120
+ }
121
+ },
122
+ "layoutIconOnly": {
123
+ "enabled": {
124
+ "root": {
125
+ "size": "44px"
126
+ },
127
+ "icon": {
128
+ "size": "22px"
129
+ }
130
+ }
131
+ }
132
+ }