@seed-design/css 0.0.10 → 0.0.13
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.
- package/all.css +103 -63
- package/all.min.css +1 -1
- package/base.css +2 -0
- package/base.min.css +1 -1
- package/package.json +1 -1
- package/recipes/avatar.css +70 -51
- package/recipes/avatar.d.ts +4 -0
- package/recipes/avatar.mjs +8 -1
- package/recipes/bottom-sheet.css +10 -1
- package/recipes/bottom-sheet.d.ts +4 -1
- package/recipes/bottom-sheet.mjs +9 -2
- package/recipes/dialog.css +4 -1
- package/recipes/help-bubble.css +2 -2
- package/recipes/snackbar.css +6 -6
- package/vars/component/action-sheet.d.ts +1 -0
- package/vars/component/action-sheet.mjs +1 -0
- package/vars/component/avatar.d.ts +41 -13
- package/vars/component/avatar.mjs +41 -13
- package/vars/component/bottom-sheet.d.ts +17 -1
- package/vars/component/bottom-sheet.mjs +17 -1
- package/vars/component/dialog.d.ts +7 -4
- package/vars/component/dialog.mjs +7 -4
- package/vars/component/extended-action-sheet.d.ts +1 -0
- package/vars/component/extended-action-sheet.mjs +1 -0
- package/vars/component/help-bubble.d.ts +2 -2
- package/vars/component/help-bubble.mjs +2 -2
- package/vars/component/snackbar.d.ts +4 -2
- package/vars/component/snackbar.mjs +4 -2
- package/vars/dimension/spacing-y.d.ts +3 -1
- package/vars/dimension/spacing-y.mjs +3 -1
- package/vars/index.d.ts +12 -0
package/base.css
CHANGED
|
@@ -198,6 +198,8 @@
|
|
|
198
198
|
--seed-dimension-spacing-x-global-gutter: var(--seed-dimension-x4);
|
|
199
199
|
--seed-dimension-spacing-y-component-default: var(--seed-dimension-x3);
|
|
200
200
|
--seed-dimension-spacing-y-nav-to-title: var(--seed-dimension-x5);
|
|
201
|
+
--seed-dimension-spacing-y-screen-bottom: var(--seed-dimension-x14);
|
|
202
|
+
--seed-dimension-spacing-y-between-text: var(--seed-dimension-x1_5);
|
|
201
203
|
--seed-duration-d1: 50ms;
|
|
202
204
|
--seed-duration-d2: .1s;
|
|
203
205
|
--seed-duration-d3: .15s;
|
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-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:#e04f00;--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:#22252b;--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-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:#e04f00;--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:#22252b;--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
package/recipes/avatar.css
CHANGED
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
justify-content: center;
|
|
7
7
|
vertical-align: top;
|
|
8
8
|
border-radius: var(--seed-radius-full);
|
|
9
|
+
width: var(--avatar-size);
|
|
10
|
+
height: var(--avatar-size);
|
|
9
11
|
}
|
|
10
12
|
.seed-avatar__image {
|
|
11
13
|
display: block;
|
|
@@ -13,7 +15,11 @@
|
|
|
13
15
|
height: 100%;
|
|
14
16
|
object-fit: cover;
|
|
15
17
|
overflow: hidden;
|
|
16
|
-
|
|
18
|
+
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="16" fill="white"/></svg>'), var(--svg-mask-uri);
|
|
19
|
+
-webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
|
|
20
|
+
-webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
|
|
21
|
+
-webkit-mask-repeat: no-repeat;
|
|
22
|
+
-webkit-mask-composite: source-out;
|
|
17
23
|
}
|
|
18
24
|
.seed-avatar__image:not([data-loading-state='loaded']) {
|
|
19
25
|
display: none;
|
|
@@ -27,6 +33,11 @@
|
|
|
27
33
|
object-fit: cover;
|
|
28
34
|
overflow: hidden;
|
|
29
35
|
border-radius: var(--seed-radius-full);
|
|
36
|
+
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="16" fill="white"/></svg>'), var(--svg-mask-uri);
|
|
37
|
+
-webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
|
|
38
|
+
-webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
|
|
39
|
+
-webkit-mask-repeat: no-repeat;
|
|
40
|
+
-webkit-mask-composite: source-out;
|
|
30
41
|
}
|
|
31
42
|
.seed-avatar__fallback[data-loading-state='loaded'] {
|
|
32
43
|
display: none;
|
|
@@ -38,86 +49,94 @@
|
|
|
38
49
|
align-items: center;
|
|
39
50
|
justify-content: center;
|
|
40
51
|
z-index: 1;
|
|
41
|
-
|
|
42
|
-
|
|
52
|
+
top: var(--badge-offset);
|
|
53
|
+
left: var(--badge-offset);
|
|
54
|
+
width: var(--badge-size);
|
|
55
|
+
height: var(--badge-size);
|
|
43
56
|
}
|
|
44
57
|
.seed-avatar__root--size_20 {
|
|
45
|
-
|
|
46
|
-
|
|
58
|
+
--avatar-size: 20px;
|
|
59
|
+
--badge-mask-size: 0px;
|
|
60
|
+
--badge-mask-offset: 0px;
|
|
47
61
|
}
|
|
48
62
|
.seed-avatar__badge--size_20 {
|
|
49
|
-
|
|
50
|
-
height: 10px;
|
|
51
|
-
top: calc(20px / 2 + 20px / 2.828 - 10px / 2);
|
|
52
|
-
left: calc(20px / 2 + 20px / 2.828 - 10px / 2);
|
|
63
|
+
display: none;
|
|
53
64
|
}
|
|
54
65
|
.seed-avatar__root--size_24 {
|
|
55
|
-
|
|
56
|
-
|
|
66
|
+
--avatar-size: 24px;
|
|
67
|
+
--badge-mask-size: 12px;
|
|
68
|
+
--badge-mask-offset: 14px;
|
|
57
69
|
}
|
|
58
70
|
.seed-avatar__badge--size_24 {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
top: calc(24px / 2 + 24px / 2.828 - 12px / 2);
|
|
62
|
-
left: calc(24px / 2 + 24px / 2.828 - 12px / 2);
|
|
71
|
+
--badge-size: 10px;
|
|
72
|
+
--badge-offset: 15px;
|
|
63
73
|
}
|
|
64
74
|
.seed-avatar__root--size_36 {
|
|
65
|
-
|
|
66
|
-
|
|
75
|
+
--avatar-size: 36px;
|
|
76
|
+
--badge-mask-size: 18px;
|
|
77
|
+
--badge-mask-offset: 20px;
|
|
67
78
|
}
|
|
68
79
|
.seed-avatar__badge--size_36 {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
top: calc(36px / 2 + 36px / 2.828 - 16px / 2);
|
|
72
|
-
left: calc(36px / 2 + 36px / 2.828 - 16px / 2);
|
|
80
|
+
--badge-size: 14px;
|
|
81
|
+
--badge-offset: 22px;
|
|
73
82
|
}
|
|
74
83
|
.seed-avatar__root--size_42 {
|
|
75
|
-
|
|
76
|
-
|
|
84
|
+
--avatar-size: 42px;
|
|
85
|
+
--badge-mask-size: 20px;
|
|
86
|
+
--badge-mask-offset: 24px;
|
|
77
87
|
}
|
|
78
88
|
.seed-avatar__badge--size_42 {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
top: calc(42px / 2 + 42px / 2.828 - 24px / 2);
|
|
82
|
-
left: calc(42px / 2 + 42px / 2.828 - 24px / 2);
|
|
89
|
+
--badge-size: 16px;
|
|
90
|
+
--badge-offset: 26px;
|
|
83
91
|
}
|
|
84
92
|
.seed-avatar__root--size_48 {
|
|
85
|
-
|
|
86
|
-
|
|
93
|
+
--avatar-size: 48px;
|
|
94
|
+
--badge-mask-size: 22px;
|
|
95
|
+
--badge-mask-offset: 28px;
|
|
87
96
|
}
|
|
88
97
|
.seed-avatar__badge--size_48 {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
top: calc(48px / 2 + 48px / 2.828 - 24px / 2);
|
|
92
|
-
left: calc(48px / 2 + 48px / 2.828 - 24px / 2);
|
|
98
|
+
--badge-size: 18px;
|
|
99
|
+
--badge-offset: 30px;
|
|
93
100
|
}
|
|
94
101
|
.seed-avatar__root--size_64 {
|
|
95
|
-
|
|
96
|
-
|
|
102
|
+
--avatar-size: 64px;
|
|
103
|
+
--badge-mask-size: 26px;
|
|
104
|
+
--badge-mask-offset: 40px;
|
|
97
105
|
}
|
|
98
106
|
.seed-avatar__badge--size_64 {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
top: calc(64px / 2 + 64px / 2.828 - 24px / 2);
|
|
102
|
-
left: calc(64px / 2 + 64px / 2.828 - 24px / 2);
|
|
107
|
+
--badge-size: 22px;
|
|
108
|
+
--badge-offset: 42px;
|
|
103
109
|
}
|
|
104
110
|
.seed-avatar__root--size_80 {
|
|
105
|
-
|
|
106
|
-
|
|
111
|
+
--avatar-size: 80px;
|
|
112
|
+
--badge-mask-size: 32px;
|
|
113
|
+
--badge-mask-offset: 52px;
|
|
107
114
|
}
|
|
108
115
|
.seed-avatar__badge--size_80 {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
top: calc(80px / 2 + 80px / 2.828 - 24px / 2);
|
|
112
|
-
left: calc(80px / 2 + 80px / 2.828 - 24px / 2);
|
|
116
|
+
--badge-size: 28px;
|
|
117
|
+
--badge-offset: 54px;
|
|
113
118
|
}
|
|
114
119
|
.seed-avatar__root--size_96 {
|
|
115
|
-
|
|
116
|
-
|
|
120
|
+
--avatar-size: 96px;
|
|
121
|
+
--badge-mask-size: 38px;
|
|
122
|
+
--badge-mask-offset: 62px;
|
|
117
123
|
}
|
|
118
124
|
.seed-avatar__badge--size_96 {
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
125
|
+
--badge-size: 32px;
|
|
126
|
+
--badge-offset: 65px;
|
|
127
|
+
}
|
|
128
|
+
.seed-avatar__root--badgeMask_none {
|
|
129
|
+
--svg-mask-uri: url('data:image/svg+xml;utf8,<svg />');
|
|
130
|
+
}
|
|
131
|
+
.seed-avatar__root--badgeMask_circle {
|
|
132
|
+
--svg-mask-uri: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="16" fill="white"/></svg>');
|
|
133
|
+
}
|
|
134
|
+
.seed-avatar__badge--badgeMask_circle {
|
|
135
|
+
border-radius: 9999px;
|
|
136
|
+
}
|
|
137
|
+
.seed-avatar__root--badgeMask_flower {
|
|
138
|
+
--svg-mask-uri: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path shape-rendering="crispEdges" fill-rule="evenodd" clip-rule="evenodd" d="M29.9115 8C28.4089 5.42609 25.682 4.02087 22.8994 4.10435C21.5637 1.68348 19.0037 0 15.9985 0C12.9933 0 10.4333 1.65565 9.09762 4.10435C6.32893 4.03478 3.60197 5.42609 2.09936 8C0.596754 10.5739 0.76371 13.6348 2.19675 16C0.749797 18.3652 0.596754 21.4261 2.09936 24C3.60197 26.5739 6.32893 27.9791 9.11154 27.8957C10.4472 30.3165 13.0072 32 16.0124 32C19.0176 32 21.5776 30.3443 22.9133 27.8957C25.682 27.9652 28.4089 26.5739 29.9115 24C31.4141 21.4261 31.2472 18.3652 29.8141 16C31.2611 13.6348 31.4141 10.5739 29.9115 8Z" fill="white"/></svg>');
|
|
139
|
+
}
|
|
140
|
+
.seed-avatar__root--badgeMask_shield {
|
|
141
|
+
--svg-mask-uri: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.137 31.4527C18.1171 31.4616 18.0943 31.4721 18.0531 31.491C18.046 31.4943 18.0356 31.4994 18.0221 31.5059C17.8282 31.5996 16.9959 32.0019 16.0001 32C15.0096 32.002 14.1895 31.6075 13.986 31.5096L13.8629 31.4527C13.5452 31.3105 13.1039 31.1059 12.5795 30.8436C11.541 30.3242 10.1273 29.554 8.68691 28.5676C7.2706 27.5976 5.67543 26.3154 4.39746 24.7323C3.12739 23.159 1.92743 20.9794 1.92743 18.3179V7.77468C1.92743 6.02645 3.02031 4.4647 4.66276 3.86583L14.5747 0.25173C15.4953 -0.0839101 16.5047 -0.0839101 17.4252 0.25173L27.3372 3.86583C28.9796 4.4647 30.0725 6.02646 30.0725 7.77468V18.3179C30.0725 20.9794 28.8726 23.159 27.6025 24.7323C26.3245 26.3154 24.7294 27.5976 23.313 28.5676C21.8727 29.554 20.4589 30.3242 19.4205 30.8436C18.8961 31.1059 18.4547 31.3106 18.137 31.4527Z" fill="white"/></svg>');
|
|
123
142
|
}
|
package/recipes/avatar.d.ts
CHANGED
package/recipes/avatar.mjs
CHANGED
|
@@ -20,7 +20,8 @@ const avatarSlotNames = [
|
|
|
20
20
|
];
|
|
21
21
|
|
|
22
22
|
const defaultVariant = {
|
|
23
|
-
"size": 48
|
|
23
|
+
"size": 48,
|
|
24
|
+
"badgeMask": "none"
|
|
24
25
|
};
|
|
25
26
|
|
|
26
27
|
const compoundVariants = [];
|
|
@@ -35,6 +36,12 @@ export const avatarVariantMap = {
|
|
|
35
36
|
"64",
|
|
36
37
|
"80",
|
|
37
38
|
"96"
|
|
39
|
+
],
|
|
40
|
+
"badgeMask": [
|
|
41
|
+
"none",
|
|
42
|
+
"circle",
|
|
43
|
+
"flower",
|
|
44
|
+
"shield"
|
|
38
45
|
]
|
|
39
46
|
};
|
|
40
47
|
|
package/recipes/bottom-sheet.css
CHANGED
|
@@ -68,7 +68,6 @@
|
|
|
68
68
|
display: flex;
|
|
69
69
|
flex-direction: column;
|
|
70
70
|
gap: var(--seed-dimension-x2);
|
|
71
|
-
padding-inline: var(--seed-dimension-spacing-x-global-gutter);
|
|
72
71
|
padding-top: var(--seed-dimension-x6);
|
|
73
72
|
padding-bottom: var(--seed-dimension-x4);
|
|
74
73
|
}
|
|
@@ -128,4 +127,14 @@
|
|
|
128
127
|
content: "";
|
|
129
128
|
position: absolute;
|
|
130
129
|
inset: calc((28px - 44px) / 2);
|
|
130
|
+
}
|
|
131
|
+
.seed-bottom-sheet__header--headerAlign_left {
|
|
132
|
+
justify-content: flex-start;
|
|
133
|
+
padding-left: var(--seed-dimension-spacing-x-global-gutter);
|
|
134
|
+
padding-right: 50px;
|
|
135
|
+
}
|
|
136
|
+
.seed-bottom-sheet__header--headerAlign_center {
|
|
137
|
+
justify-content: center;
|
|
138
|
+
padding-left: 50px;
|
|
139
|
+
padding-right: 50px;
|
|
131
140
|
}
|
package/recipes/bottom-sheet.mjs
CHANGED
|
@@ -39,11 +39,18 @@ const bottomSheetSlotNames = [
|
|
|
39
39
|
]
|
|
40
40
|
];
|
|
41
41
|
|
|
42
|
-
const defaultVariant = {
|
|
42
|
+
const defaultVariant = {
|
|
43
|
+
"headerAlign": "left"
|
|
44
|
+
};
|
|
43
45
|
|
|
44
46
|
const compoundVariants = [];
|
|
45
47
|
|
|
46
|
-
export const bottomSheetVariantMap = {
|
|
48
|
+
export const bottomSheetVariantMap = {
|
|
49
|
+
"headerAlign": [
|
|
50
|
+
"left",
|
|
51
|
+
"center"
|
|
52
|
+
]
|
|
53
|
+
};
|
|
47
54
|
|
|
48
55
|
export const bottomSheetVariantKeys = Object.keys(bottomSheetVariantMap);
|
|
49
56
|
|
package/recipes/dialog.css
CHANGED
|
@@ -44,7 +44,6 @@
|
|
|
44
44
|
background: var(--seed-color-bg-layer-default);
|
|
45
45
|
max-width: 272px;
|
|
46
46
|
margin: auto var(--seed-dimension-x8);
|
|
47
|
-
padding: var(--seed-dimension-x5) var(--seed-dimension-x5);
|
|
48
47
|
border-radius: var(--seed-radius-r5);
|
|
49
48
|
}
|
|
50
49
|
.seed-dialog__content:is([data-state="open"], [data-open]) {
|
|
@@ -69,6 +68,8 @@
|
|
|
69
68
|
.seed-dialog__header {
|
|
70
69
|
display: flex;
|
|
71
70
|
flex-direction: column;
|
|
71
|
+
padding-inline: var(--seed-dimension-x5);
|
|
72
|
+
padding-top: var(--seed-dimension-x5);
|
|
72
73
|
gap: var(--seed-dimension-x1_5);
|
|
73
74
|
}
|
|
74
75
|
.seed-dialog__title {
|
|
@@ -90,5 +91,7 @@
|
|
|
90
91
|
display: flex;
|
|
91
92
|
flex-direction: column;
|
|
92
93
|
align-items: stretch;
|
|
94
|
+
padding-inline: var(--seed-dimension-x5);
|
|
93
95
|
padding-top: var(--seed-dimension-x4);
|
|
96
|
+
padding-bottom: var(--seed-dimension-x5);
|
|
94
97
|
}
|
package/recipes/help-bubble.css
CHANGED
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
display: flex;
|
|
46
46
|
align-items: center;
|
|
47
47
|
justify-content: center;
|
|
48
|
-
top:
|
|
49
|
-
right:
|
|
48
|
+
top: calc(12px - 32px / 2 + 14px / 2);
|
|
49
|
+
right: calc(12px - 32px / 2 + 14px / 2);
|
|
50
50
|
color: var(--seed-color-palette-static-white);
|
|
51
51
|
width: 32px;
|
|
52
52
|
height: 32px;
|
package/recipes/snackbar.css
CHANGED
|
@@ -12,21 +12,21 @@
|
|
|
12
12
|
gap: var(--seed-dimension-x2);
|
|
13
13
|
animation: seed-enter;
|
|
14
14
|
animation-timing-function: var(--seed-timing-function-enter);
|
|
15
|
-
animation-duration: var(--seed-duration-
|
|
15
|
+
animation-duration: var(--seed-duration-d3);
|
|
16
16
|
--seed-enter-translate-x: 0;
|
|
17
|
-
--seed-enter-translate-y:
|
|
17
|
+
--seed-enter-translate-y: 0;
|
|
18
18
|
--seed-enter-opacity: 0;
|
|
19
|
-
--seed-enter-scale:
|
|
19
|
+
--seed-enter-scale: 0.8;
|
|
20
20
|
}
|
|
21
21
|
.seed-snackbar__root:not([data-open]) {
|
|
22
22
|
animation: seed-exit;
|
|
23
23
|
animation-timing-function: var(--seed-timing-function-exit);
|
|
24
|
-
animation-duration: var(--seed-duration-
|
|
24
|
+
animation-duration: var(--seed-duration-d2);
|
|
25
25
|
animation-fill-mode: forwards;
|
|
26
26
|
--seed-exit-translate-x: 0;
|
|
27
|
-
--seed-exit-translate-y:
|
|
27
|
+
--seed-exit-translate-y: 0;
|
|
28
28
|
--seed-exit-opacity: 0;
|
|
29
|
-
--seed-exit-scale:
|
|
29
|
+
--seed-exit-scale: 0.8;
|
|
30
30
|
}
|
|
31
31
|
.seed-snackbar__message {
|
|
32
32
|
flex-grow: 1;
|
|
@@ -12,6 +12,7 @@ export declare const vars: {
|
|
|
12
12
|
},
|
|
13
13
|
"content": {
|
|
14
14
|
"color": "var(--seed-color-bg-layer-floating)",
|
|
15
|
+
"maxWidth": "480px",
|
|
15
16
|
"topCornerRadius": "var(--seed-radius-r5)",
|
|
16
17
|
"enterDuration": "var(--seed-duration-d6)",
|
|
17
18
|
"enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
|
|
@@ -12,6 +12,7 @@ export const vars = {
|
|
|
12
12
|
},
|
|
13
13
|
"content": {
|
|
14
14
|
"color": "var(--seed-color-bg-layer-floating)",
|
|
15
|
+
"maxWidth": "480px",
|
|
15
16
|
"topCornerRadius": "var(--seed-radius-r5)",
|
|
16
17
|
"enterDuration": "var(--seed-duration-d6)",
|
|
17
18
|
"enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
|
|
@@ -3,10 +3,6 @@ export declare const vars: {
|
|
|
3
3
|
"enabled": {
|
|
4
4
|
"root": {
|
|
5
5
|
"cornerRadius": "var(--seed-radius-full)"
|
|
6
|
-
},
|
|
7
|
-
"badge": {
|
|
8
|
-
"cornerRadius": "var(--seed-radius-full)",
|
|
9
|
-
"color": "var(--seed-color-bg-layer-default)"
|
|
10
6
|
}
|
|
11
7
|
}
|
|
12
8
|
},
|
|
@@ -14,9 +10,6 @@ export declare const vars: {
|
|
|
14
10
|
"enabled": {
|
|
15
11
|
"root": {
|
|
16
12
|
"size": "20px"
|
|
17
|
-
},
|
|
18
|
-
"badge": {
|
|
19
|
-
"size": "10px"
|
|
20
13
|
}
|
|
21
14
|
}
|
|
22
15
|
},
|
|
@@ -25,8 +18,13 @@ export declare const vars: {
|
|
|
25
18
|
"root": {
|
|
26
19
|
"size": "24px"
|
|
27
20
|
},
|
|
28
|
-
"
|
|
21
|
+
"badgeMask": {
|
|
22
|
+
"offset": "14px",
|
|
29
23
|
"size": "12px"
|
|
24
|
+
},
|
|
25
|
+
"badge": {
|
|
26
|
+
"offset": "15px",
|
|
27
|
+
"size": "10px"
|
|
30
28
|
}
|
|
31
29
|
}
|
|
32
30
|
},
|
|
@@ -35,8 +33,13 @@ export declare const vars: {
|
|
|
35
33
|
"root": {
|
|
36
34
|
"size": "36px"
|
|
37
35
|
},
|
|
36
|
+
"badgeMask": {
|
|
37
|
+
"offset": "20px",
|
|
38
|
+
"size": "18px"
|
|
39
|
+
},
|
|
38
40
|
"badge": {
|
|
39
|
-
"
|
|
41
|
+
"offset": "22px",
|
|
42
|
+
"size": "14px"
|
|
40
43
|
}
|
|
41
44
|
}
|
|
42
45
|
},
|
|
@@ -45,8 +48,13 @@ export declare const vars: {
|
|
|
45
48
|
"root": {
|
|
46
49
|
"size": "42px"
|
|
47
50
|
},
|
|
51
|
+
"badgeMask": {
|
|
52
|
+
"offset": "24px",
|
|
53
|
+
"size": "20px"
|
|
54
|
+
},
|
|
48
55
|
"badge": {
|
|
49
|
-
"
|
|
56
|
+
"offset": "26px",
|
|
57
|
+
"size": "16px"
|
|
50
58
|
}
|
|
51
59
|
}
|
|
52
60
|
},
|
|
@@ -55,8 +63,13 @@ export declare const vars: {
|
|
|
55
63
|
"root": {
|
|
56
64
|
"size": "48px"
|
|
57
65
|
},
|
|
66
|
+
"badgeMask": {
|
|
67
|
+
"offset": "28px",
|
|
68
|
+
"size": "22px"
|
|
69
|
+
},
|
|
58
70
|
"badge": {
|
|
59
|
-
"
|
|
71
|
+
"offset": "30px",
|
|
72
|
+
"size": "18px"
|
|
60
73
|
}
|
|
61
74
|
}
|
|
62
75
|
},
|
|
@@ -65,8 +78,13 @@ export declare const vars: {
|
|
|
65
78
|
"root": {
|
|
66
79
|
"size": "64px"
|
|
67
80
|
},
|
|
81
|
+
"badgeMask": {
|
|
82
|
+
"offset": "40px",
|
|
83
|
+
"size": "26px"
|
|
84
|
+
},
|
|
68
85
|
"badge": {
|
|
69
|
-
"
|
|
86
|
+
"offset": "42px",
|
|
87
|
+
"size": "22px"
|
|
70
88
|
}
|
|
71
89
|
}
|
|
72
90
|
},
|
|
@@ -75,8 +93,13 @@ export declare const vars: {
|
|
|
75
93
|
"root": {
|
|
76
94
|
"size": "80px"
|
|
77
95
|
},
|
|
96
|
+
"badgeMask": {
|
|
97
|
+
"offset": "52px",
|
|
98
|
+
"size": "32px"
|
|
99
|
+
},
|
|
78
100
|
"badge": {
|
|
79
|
-
"
|
|
101
|
+
"offset": "54px",
|
|
102
|
+
"size": "28px"
|
|
80
103
|
}
|
|
81
104
|
}
|
|
82
105
|
},
|
|
@@ -85,7 +108,12 @@ export declare const vars: {
|
|
|
85
108
|
"root": {
|
|
86
109
|
"size": "96px"
|
|
87
110
|
},
|
|
111
|
+
"badgeMask": {
|
|
112
|
+
"offset": "62px",
|
|
113
|
+
"size": "38px"
|
|
114
|
+
},
|
|
88
115
|
"badge": {
|
|
116
|
+
"offset": "65px",
|
|
89
117
|
"size": "32px"
|
|
90
118
|
}
|
|
91
119
|
}
|