@kdcloudjs/shoelace 1.0.16 → 1.0.18

package/cdn/themes/nova.styles.js

@@ -0,0 +1,671 @@
+import { css } from "lit";
+
+export default css`
+  :root,
+  :host,
+  .sl-theme-newtheme {
+    color-scheme: nova;
+
+    --sl-color-gray-50: #fafafa;
+    --sl-color-gray-100: #f5f5f5;
+    --sl-color-gray-200: #e5e5e5;
+    --sl-color-gray-300: #d9d9d9;
+    --sl-color-gray-400: #b2b2b2;
+    --sl-color-gray-500: #999999;
+    --sl-color-gray-600: #555555;
+    --sl-color-gray-700: #404040;
+    --sl-color-gray-800: #2f2f2f;
+    --sl-color-gray-900: #212121;
+    --sl-color-gray-950: #1a1a1a;
+
+    --sl-color-neutral-gray-50: #fafbfc;
+    --sl-color-neutral-gray-100: #f7f8fa;
+    --sl-color-neutral-gray-200: #f1f4f6;
+    --sl-color-neutral-gray-300: #ebeef2;
+    --sl-color-neutral-gray-400: #eaeef2;
+    --sl-color-neutral-gray-500: #d0d4dc;
+    --sl-color-neutral-gray-600: #b3b8c5;
+    --sl-color-neutral-gray-700: #989eac;
+    --sl-color-neutral-gray-800: #797f91;
+    --sl-color-neutral-gray-900: #646a78;
+    --sl-color-neutral-gray-950: #3a3c46;
+
+    --sl-color-black-0: rgba(0, 0, 0, 0);
+    --sl-color-black-3: rgba(0, 0, 0, 0.03);
+    --sl-color-black-6: rgba(0, 0, 0, 0.06);
+    --sl-color-black-12: rgba(0, 0, 0, 0.12);
+    --sl-color-black-18: rgba(0, 0, 0, 0.18);
+    --sl-color-black-28: rgba(0, 0, 0, 0.28);
+    --sl-color-black-46: rgba(0, 0, 0, 0.46);
+    --sl-color-black-64: rgba(0, 0, 0, 0.64);
+    --sl-color-black-82: rgba(0, 0, 0, 0.82);
+    --sl-color-black-94: rgba(0, 0, 0, 0.94);
+    --sl-color-black-100: rgba(0, 0, 0, 1);
+
+    --sl-color-white-0: rgba(255, 255, 255, 0);
+    --sl-color-white-3: rgba(255, 255, 255, 0.03);
+    --sl-color-white-6: rgba(255, 255, 255, 0.06);
+    --sl-color-white-12: rgba(255, 255, 255, 0.12);
+    --sl-color-white-18: rgba(255, 255, 255, 0.18);
+    --sl-color-white-28: rgba(255, 255, 255, 0.28);
+    --sl-color-white-46: rgba(255, 255, 255, 0.46);
+    --sl-color-white-64: rgba(255, 255, 255, 0.64);
+    --sl-color-white-82: rgba(255, 255, 255, 0.82);
+    --sl-color-white-94: rgba(255, 255, 255, 0.94);
+    --sl-color-white-100: rgba(255, 255, 255, 1);
+
+    --sl-color-red-50: #fff0f1;
+    --sl-color-red-100: #ffe0e3;
+    --sl-color-red-200: #ffc7cc;
+    --sl-color-red-300: #ff9ea6;
+    --sl-color-red-400: #ff5765;
+    --sl-color-red-500: #ff293b;
+    --sl-color-red-600: #f12234;
+    --sl-color-red-700: #da0b20;
+    --sl-color-red-800: #b30f25;
+    --sl-color-red-900: #991519;
+    --sl-color-red-950: #580405;
+
+    --sl-color-orange-50: #fff4ed;
+    --sl-color-orange-100: #ffe5d4;
+    --sl-color-orange-200: #ffc7a8;
+    --sl-color-orange-300: #ffa070;
+    --sl-color-orange-400: #ff6d37;
+    --sl-color-orange-500: #ff5522;
+    --sl-color-orange-600: #f05513;
+    --sl-color-orange-700: #bb4c02;
+    --sl-color-orange-800: #983a08;
+    --sl-color-orange-900: #7c300b;
+    --sl-color-orange-950: #521a00;
+
+    --sl-color-amber-50: #fffdea;
+    --sl-color-amber-100: #fff8c5;
+    --sl-color-amber-200: #fff285;
+    --sl-color-amber-300: #ffdb38;
+    --sl-color-amber-400: #ffd414;
+    --sl-color-amber-500: #ffb200;
+    --sl-color-amber-600: #e28800;
+    --sl-color-amber-700: #bb5f02;
+    --sl-color-amber-800: #984908;
+    --sl-color-amber-900: #7c3c0b;
+    --sl-color-amber-950: #612800;
+
+    --sl-color-yellow-50: #feffe7;
+    --sl-color-yellow-100: #fbffc1;
+    --sl-color-yellow-200: #fffb86;
+    --sl-color-yellow-300: #ffec3d;
+    --sl-color-yellow-400: #ffe51c;
+    --sl-color-yellow-500: #ffe600;
+    --sl-color-yellow-600: #d1a600;
+    --sl-color-yellow-700: #a67802;
+    --sl-color-yellow-800: #895d0a;
+    --sl-color-yellow-900: #744c0f;
+    --sl-color-yellow-950: #5c3c05;
+
+    --sl-color-lime-50: #f0fbe4;
+    --sl-color-lime-100: #ebfadc;
+    --sl-color-lime-200: #cbf2a5;
+    --sl-color-lime-300: #9ce356;
+    --sl-color-lime-400: #84d533;
+    --sl-color-lime-500: #74d70b;
+    --sl-color-lime-600: #5fba04;
+    --sl-color-lime-700: #438308;
+    --sl-color-lime-800: #38670d;
+    --sl-color-lime-900: #305710;
+    --sl-color-lime-950: #1e4203;
+
+    --sl-color-green-50: #eefff0;
+    --sl-color-green-100: #dbffe1;
+    --sl-color-green-200: #b4f5bf;
+    --sl-color-green-300: #7aeb9c;
+    --sl-color-green-400: #45e57a;
+    --sl-color-green-500: #08cc50;
+    --sl-color-green-600: #04b545;
+    --sl-color-green-700: #078e3b;
+    --sl-color-green-800: #0c6f37;
+    --sl-color-green-900: #0c5b31;
+    --sl-color-green-950: #003d1d;
+
+    --sl-color-emerald-50: #ebfef7;
+    --sl-color-emerald-100: #d4fce9;
+    --sl-color-emerald-200: #a9ebd3;
+    --sl-color-emerald-300: #83ebc8;
+    --sl-color-emerald-400: #50e6b9;
+    --sl-color-emerald-500: #08c787;
+    --sl-color-emerald-600: #009d72;
+    --sl-color-emerald-700: #007e5e;
+    --sl-color-emerald-800: #02634c;
+    --sl-color-emerald-900: #025240;
+    --sl-color-emerald-950: #003d31;
+
+    --sl-color-teal-50: #effefc;
+    --sl-color-teal-100: #c9fef5;
+    --sl-color-teal-200: #87ebdb;
+    --sl-color-teal-300: #71f5e5;
+    --sl-color-teal-400: #4cebe9;
+    --sl-color-teal-500: #00e5e5;
+    --sl-color-teal-600: #00bfb8;
+    --sl-color-teal-700: #027f83;
+    --sl-color-teal-800: #086367;
+    --sl-color-teal-900: #0f5052;
+    --sl-color-teal-950: #013a3d;
+
+    --sl-color-cyan-50: #f0f9ff;
+    --sl-color-cyan-100: #def1ff;
+    --sl-color-cyan-200: #b6e5ff;
+    --sl-color-cyan-300: #75d3ff;
+    --sl-color-cyan-400: #2cbdff;
+    --sl-color-cyan-500: #00a3f4;
+    --sl-color-cyan-600: #0083d4;
+    --sl-color-cyan-700: #0068ab;
+    --sl-color-cyan-800: #00588d;
+    --sl-color-cyan-900: #064a74;
+    --sl-color-cyan-950: #053a61;
+
+    --sl-color-sky-50: #f7f9ff;
+    --sl-color-sky-100: #f2f6ff;
+    --sl-color-sky-200: #e9f0ff;
+    --sl-color-sky-300: #e2ebff;
+    --sl-color-sky-400: #b5caff;
+    --sl-color-sky-500: #87a9ff;
+    --sl-color-sky-600: #5582f3;
+    --sl-color-sky-700: #3761ca;
+    --sl-color-sky-800: #1f44a1;
+    --sl-color-sky-900: #0e2c79;
+    --sl-color-sky-950: #031c5e;
+
+    --sl-color-blue-50: #eef5ff;
+    --sl-color-blue-100: #e0ecff;
+    --sl-color-blue-200: #bcd8ff;
+    --sl-color-blue-300: #8ec0ff;
+    --sl-color-blue-400: #599cff;
+    --sl-color-blue-500: #2970ff;
+    --sl-color-blue-600: #1b55f5;
+    --sl-color-blue-700: #1440e1;
+    --sl-color-blue-800: #1734b6;
+    --sl-color-blue-900: #19318f;
+    --sl-color-blue-950: #19276b;
+
+    --sl-color-indigo-50: #f5f6ff;
+    --sl-color-indigo-100: #e5e9ff;
+    --sl-color-indigo-200: #ccd3ff;
+    --sl-color-indigo-300: #9ba6fd;
+    --sl-color-indigo-400: #737cfc;
+    --sl-color-indigo-500: #5155f6;
+    --sl-color-indigo-600: #4343f5;
+    --sl-color-indigo-700: #322fcc;
+    --sl-color-indigo-800: #1a18a3;
+    --sl-color-indigo-900: #0d097a;
+    --sl-color-indigo-950: #060066;
+
+    --sl-color-violet-50: #f5f2ff;
+    --sl-color-violet-100: #e9e3ff;
+    --sl-color-violet-200: #cec2ff;
+    --sl-color-violet-300: #b19eff;
+    --sl-color-violet-400: #9980ff;
+    --sl-color-violet-500: #7858f9;
+    --sl-color-violet-600: #572ff7;
+    --sl-color-violet-700: #3c17cf;
+    --sl-color-violet-800: #2505a6;
+    --sl-color-violet-900: #1a0080;
+    --sl-color-violet-950: #140066;
+
+    --sl-color-purple-50: #f9f5ff;
+    --sl-color-purple-100: #f1e7ff;
+    --sl-color-purple-200: #e5d3ff;
+    --sl-color-purple-300: #d0b0ff;
+    --sl-color-purple-400: #b37eff;
+    --sl-color-purple-500: #8f40ff;
+    --sl-color-purple-600: #7f2af3;
+    --sl-color-purple-700: #6c1ad6;
+    --sl-color-purple-800: #5d1aaf;
+    --sl-color-purple-900: #4d178c;
+    --sl-color-purple-950: #320269;
+
+    --sl-color-fuchsia-50: #fff2fc;
+    --sl-color-fuchsia-100: #ffe3f8;
+    --sl-color-fuchsia-200: #ffc2f0;
+    --sl-color-fuchsia-300: #ff9ee7;
+    --sl-color-fuchsia-400: #ff80df;
+    --sl-color-fuchsia-500: #f858d0;
+    --sl-color-fuchsia-600: #ed1db9;
+    --sl-color-fuchsia-700: #b8148f;
+    --sl-color-fuchsia-800: #950471;
+    --sl-color-fuchsia-900: #66004d;
+    --sl-color-fuchsia-950: #5c0044;
+
+    --sl-color-pink-50: #fff0f3;
+    --sl-color-pink-100: #ffe2ea;
+    --sl-color-pink-200: #ffcada;
+    --sl-color-pink-300: #ff9fbb;
+    --sl-color-pink-400: #ff6997;
+    --sl-color-pink-500: #ff246d;
+    --sl-color-pink-600: #ed1165;
+    --sl-color-pink-700: #c80856;
+    --sl-color-pink-800: #a8094f;
+    --sl-color-pink-900: #8f0c49;
+    --sl-color-pink-950: #6b0130;
+
+    --sl-color-rose-50: #fff0f2;
+    --sl-color-rose-100: #ffdbe0;
+    --sl-color-rose-200: #ffc2ca;
+    --sl-color-rose-300: #ff99a7;
+    --sl-color-rose-400: #f86d7f;
+    --sl-color-rose-500: #f74f65;
+    --sl-color-rose-600: #e3203a;
+    --sl-color-rose-700: #ba0b22;
+    --sl-color-rose-800: #910013;
+    --sl-color-rose-900: #750010;
+    --sl-color-rose-950: #5c000c;
+
+    --sl-color-primary-50: var(--sl-color-blue-50);
+    --sl-color-primary-100: var(--sl-color-blue-100);
+    --sl-color-primary-200: var(--sl-color-blue-200);
+    --sl-color-primary-300: var(--sl-color-blue-300);
+    --sl-color-primary-400: var(--sl-color-blue-400);
+    --sl-color-primary-500: var(--sl-color-blue-400);
+    --sl-color-primary-600: var(--sl-color-blue-500);
+    --sl-color-primary-700: var(--sl-color-blue-600);
+    --sl-color-primary-800: var(--sl-color-blue-700);
+    --sl-color-primary-900: var(--sl-color-blue-900);
+    --sl-color-primary-950: var(--sl-color-blue-950);
+
+    --sl-color-success-50: var(--sl-color-green-50);
+    --sl-color-success-100: var(--sl-color-green-100);
+    --sl-color-success-200: var(--sl-color-green-200);
+    --sl-color-success-300: var(--sl-color-green-300);
+    --sl-color-success-400: var(--sl-color-green-400);
+    --sl-color-success-500: var(--sl-color-green-500);
+    --sl-color-success-600: var(--sl-color-green-600);
+    --sl-color-success-700: var(--sl-color-green-700);
+    --sl-color-success-800: var(--sl-color-green-800);
+    --sl-color-success-900: var(--sl-color-green-900);
+    --sl-color-success-950: var(--sl-color-green-950);
+
+    --sl-color-warning-50: var(--sl-color-orange-50);
+    --sl-color-warning-100: var(--sl-color-orange-100);
+    --sl-color-warning-200: var(--sl-color-orange-200);
+    --sl-color-warning-300: var(--sl-color-orange-300);
+    --sl-color-warning-400: var(--sl-color-orange-400);
+    --sl-color-warning-500: var(--sl-color-orange-400);
+    --sl-color-warning-600: var(--sl-color-orange-500);
+    --sl-color-warning-700: var(--sl-color-orange-600);
+    --sl-color-warning-800: var(--sl-color-orange-700);
+    --sl-color-warning-900: var(--sl-color-orange-900);
+    --sl-color-warning-950: var(--sl-color-orange-950);
+
+    --sl-color-danger-50: var(--sl-color-red-50);
+    --sl-color-danger-100: var(--sl-color-red-100);
+    --sl-color-danger-200: var(--sl-color-red-200);
+    --sl-color-danger-300: var(--sl-color-red-300);
+    --sl-color-danger-400: var(--sl-color-red-400);
+    --sl-color-danger-500: var(--sl-color-red-400);
+    --sl-color-danger-600: var(--sl-color-red-500);
+    --sl-color-danger-700: var(--sl-color-red-600);
+    --sl-color-danger-800: var(--sl-color-red-700);
+    --sl-color-danger-900: var(--sl-color-red-900);
+    --sl-color-danger-950: var(--sl-color-red-950);
+
+    --sl-color-neutral-50: var(--sl-color-black-0);
+    --sl-color-neutral-100: var(--sl-color-black-3);
+    --sl-color-neutral-200: var(--sl-color-black-6);
+    --sl-color-neutral-300: var(--sl-color-black-12);
+    --sl-color-neutral-400: var(--sl-color-black-18);
+    --sl-color-neutral-500: var(--sl-color-black-28);
+    --sl-color-neutral-600: var(--sl-color-black-46);
+    --sl-color-neutral-700: var(--sl-color-black-64);
+    --sl-color-neutral-800: var(--sl-color-black-82);
+    --sl-color-neutral-900: var(--sl-color-black-94);
+    --sl-color-neutral-950: var(--sl-color-black-100);
+
+    --sl-color-neutral-gray-50: var(--sl-color-neutral-gray-50);
+    --sl-color-neutral-gray-100: var(--sl-color-neutral-gray-100);
+    --sl-color-neutral-gray-200: var(--sl-color-neutral-gray-200);
+    --sl-color-neutral-gray-300: var(--sl-color-neutral-gray-300);
+    --sl-color-neutral-gray-400: var(--sl-color-neutral-gray-400);
+    --sl-color-neutral-gray-500: var(--sl-color-neutral-gray-500);
+    --sl-color-neutral-gray-600: var(--sl-color-neutral-gray-600);
+    --sl-color-neutral-gray-700: var(--sl-color-neutral-gray-700);
+    --sl-color-neutral-gray-800: var(--sl-color-neutral-gray-800);
+    --sl-color-neutral-gray-900: var(--sl-color-neutral-gray-900);
+    --sl-color-neutral-gray-950: var(--sl-color-neutral-gray-950);
+
+    --sl-color-neutral-0: hsl(0, 0%, 100%);
+    --sl-color-neutral-1000: hsl(0, 0%, 0%);
+
+    --sl-border-radius-small: calc(
+      16 * 0.125 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-border-radius-medium: calc(
+      16 * 0.25 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-border-radius-x-medium: calc(
+      16 * 0.375 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-border-radius-large: calc(
+      16 * 0.5 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-border-radius-x-large: calc(
+      16 * 0.75 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-border-radius-2x-large: calc(
+      16 * 1 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-border-radius-3x-large: calc(
+      16 * 1.25 / var(--kdds-base-font-size, 16) * 1rem
+    );
+
+    --sl-border-radius-circle: 50%;
+    --sl-border-radius-pill: 9999px;
+
+    --sl-shadow-x-small: 0 1px 2px rgba(47, 62, 97, 0.1);
+    --sl-shadow-small: 0 2px 5px rgba(47, 62, 97, 0.12);
+    --sl-shadow-medium: 0 4px 10px rgba(47, 62, 97, 0.12);
+    --sl-shadow-large: 0 4px 15px rgba(47, 62, 97, 0.12);
+    --sl-shadow-x-large: 0 8px 20px rgba(47, 62, 97, 0.12);
+
+    --sl-spacing-3x-small: calc(
+      16 * 0.125 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-spacing-2x-small: calc(
+      16 * 0.25 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-spacing-1-5x-small: calc(
+      16 * 0.375 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-spacing-x-small: calc(
+      16 * 0.5 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-spacing-0-5x-small: calc(
+      16 * 0.625 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-spacing-small: calc(16 * 0.75 / var(--kdds-base-font-size, 16) * 1rem);
+    --sl-spacing-medium: calc(16 * 1 / var(--kdds-base-font-size, 16) * 1rem);
+    --sl-spacing-large: calc(16 * 1.25 / var(--kdds-base-font-size, 16) * 1rem);
+    --sl-spacing-x-large: calc(
+      16 * 1.75 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-spacing-2x-large: calc(
+      16 * 2.25 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-spacing-3x-large: calc(16 * 3 / var(--kdds-base-font-size, 16) * 1rem);
+    --sl-spacing-4x-large: calc(
+      16 * 4.5 / var(--kdds-base-font-size, 16) * 1rem
+    );
+
+    --sl-transition-x-slow: 1000ms;
+    --sl-transition-slow: 500ms;
+    --sl-transition-medium: 250ms;
+    --sl-transition-fast: 150ms;
+    --sl-transition-x-fast: 50ms;
+
+    --sl-font-mono:
+      SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+    --sl-font-sans:
+      Microsoft Sans Serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
+      Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol";
+
+    --sl-font-size-2x-small: calc(
+      16 * 0.625 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-font-size-x-small: calc(
+      16 * 0.75 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-font-size-small: calc(
+      16 * 0.875 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-font-size-medium: calc(16 * 1 / var(--kdds-base-font-size, 16) * 1rem);
+    --sl-font-size-large: calc(
+      16 * 1.25 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-font-size-x-large: calc(
+      16 * 1.5 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-font-size-2x-large: calc(
+      16 * 2.25 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-font-size-3x-large: calc(
+      16 * 3 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-font-size-4x-large: calc(
+      16 * 4.5 / var(--kdds-base-font-size, 16) * 1rem
+    );
+
+    --sl-font-weight-light: 300;
+    --sl-font-weight-normal: 400;
+    --sl-font-weight-semibold: 500;
+    --sl-font-weight-bold: 700;
+
+    --sl-letter-spacing-denser: -0.03em;
+    --sl-letter-spacing-dense: -0.015em;
+    --sl-letter-spacing-normal: normal;
+    --sl-letter-spacing-loose: 0.075em;
+    --sl-letter-spacing-looser: 0.15em;
+
+    --sl-line-height-denser: 1;
+    --sl-line-height-dense: 1.5;
+    --sl-line-height-normal: 1.8;
+    --sl-line-height-loose: 2.2;
+    --sl-line-height-looser: 2.6;
+
+    --sl-focus-ring-color: var(--sl-color-primary-600);
+    --sl-focus-ring-style: solid;
+    --sl-focus-ring-width: 1px;
+    --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
+      var(--sl-focus-ring-color);
+    --sl-focus-ring-offset: 1px;
+
+    --sl-button-font-size-small: var(--sl-font-size-x-small);
+    --sl-button-font-size-medium: var(--sl-font-size-small);
+    --sl-button-font-size-large: var(--sl-font-size-medium);
+    --sl-button-min-width-small: 60px;
+    --sl-button-min-width-medium: 60px;
+    --sl-button-min-width-large: 68px;
+
+    --sl-input-height-small: calc(
+      16 * 1.5 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-input-height-medium: calc(
+      16 * 2 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-input-height-large: calc(
+      16 * 2.5 / var(--kdds-base-font-size, 16) * 1rem
+    );
+
+    --sl-input-background-color: var(--sl-color-neutral-0);
+    --sl-input-background-color-hover: var(--sl-input-background-color);
+    --sl-input-background-color-focus: var(--sl-input-background-color);
+    --sl-input-background-color-disabled: var(--sl-color-neutral-100);
+    --sl-input-border-color: var(--sl-color-neutral-300);
+    --sl-input-border-color-hover: var(--sl-color-primary-600);
+    --sl-input-border-color-focus: var(--sl-color-primary-600);
+    --sl-input-border-color-disabled: var(--sl-color-neutral-100);
+    --sl-input-border-width: 1px;
+    --sl-input-required-content: "*";
+    --sl-input-required-content-offset: -2px;
+    --sl-input-required-content-color: var(--sl-input-label-color);
+
+    --sl-input-border-radius-small: var(--sl-border-radius-small);
+    --sl-input-border-radius-medium: var(--sl-border-radius-small);
+    --sl-input-border-radius-large: var(--sl-border-radius-small);
+
+    --sl-input-font-family: var(--sl-font-sans);
+    --sl-input-font-weight: var(--sl-font-weight-normal);
+    --sl-input-font-size-small: var(--sl-font-size-x-small);
+    --sl-input-font-size-medium: var(--sl-font-size-small);
+    --sl-input-font-size-large: var(--sl-font-size-medium);
+    --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
+
+    --sl-input-color: var(--sl-color-neutral-900);
+    --sl-input-color-hover: var(--sl-color-neutral-900);
+    --sl-input-color-focus: var(--sl-color-neutral-900);
+    --sl-input-color-disabled: var(--sl-color-neutral-500);
+    --sl-input-icon-color: var(--sl-color-neutral-600);
+    --sl-input-icon-color-hover: var(--sl-color-primary-600);
+    --sl-input-icon-color-focus: var(--sl-color-primary-700);
+    --sl-input-placeholder-color: var(--sl-color-neutral-400);
+    --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
+    --sl-input-spacing-small: var(--sl-spacing-small);
+    --sl-input-spacing-medium: var(--sl-spacing-medium);
+    --sl-input-spacing-large: var(--sl-spacing-large);
+
+    --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+    --sl-input-focus-ring-offset: 0;
+
+    --sl-input-filled-background-color: var(--sl-color-neutral-100);
+    --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
+    --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
+    --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
+    --sl-input-filled-color: var(--sl-color-neutral-900);
+    --sl-input-filled-color-hover: var(--sl-color-neutral-900);
+    --sl-input-filled-color-focus: var(--sl-color-neutral-900);
+    --sl-input-filled-color-disabled: var(--sl-color-neutral-500);
+
+    --sl-input-label-font-size-small: var(--sl-font-size-x-small);
+    --sl-input-label-font-size-medium: var(--sl-font-size-x-small);
+    --sl-input-label-font-size-large: var(--sl-font-size-x-small);
+    --sl-input-label-color: inherit;
+
+    --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
+    --sl-input-help-text-font-size-medium: var(--sl-font-size-x-small);
+    --sl-input-help-text-font-size-large: var(--sl-font-size-x-small);
+    --sl-input-help-text-color: var(--sl-color-neutral-500);
+
+    --sl-toggle-size-small: calc(
+      16 * 1 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-toggle-size-medium: calc(
+      16 * 1.25 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-toggle-size-large: calc(
+      16 * 1.5 / var(--kdds-base-font-size, 16) * 1rem
+    );
+
+    --sl-overlay-background-color: hsla(0, 0%, 0%, 0.3);
+
+    --sl-panel-background-color: var(--sl-color-neutral-0);
+    --sl-panel-border-color: var(--sl-color-neutral-200);
+    --sl-panel-border-width: 1px;
+
+    --sl-tooltip-border-radius: var(--sl-border-radius-medium);
+    --sl-tooltip-background-color: var(--sl-color-neutral-0);
+    --sl-tooltip-color: var(--sl-color-neutral-900);
+    --sl-tooltip-font-family: var(--sl-font-sans);
+    --sl-tooltip-font-weight: var(--sl-font-weight-normal);
+    --sl-tooltip-font-size: var(--sl-font-size-small);
+    --sl-tooltip-line-height: var(--sl-line-height-dense);
+    --sl-tooltip-padding: var(--sl-spacing-small);
+    --sl-tooltip-arrow-size: 6px;
+
+    --sl-details-height: 40px;
+
+    --sl-dialog-header-height: 50px;
+
+    --sl-table-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
+    --sl-table-header-background: var(--sl-color-neutral-100, #f5f5f5);
+    --sl-table-cell-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
+    --sl-table-row-background-hover: var(--sl-color-neutral-100, #f5f5f5);
+    --sl-table-row-background-active: var(--sl-color-primary-100, #f2f6ff);
+    --sl-table-cell-edit-background-hover: var(
+      --sl-color-neutral-0,
+      hsl(0, 0%, 100%)
+    );
+    --sl-table-expand-row-background: var(--sl-color-neutral-200, #e5e5e5);
+    --sl-table-icon-color-default: var(--sl-color-neutral-600, #555555);
+    --sl-table-icon-color-hover: var(--sl-color-primary-600, #5582f3);
+    --sl-table-icon-color-active: var(--sl-color-primary-600, #5582f3);
+    --sl-table-mask: rgba(255, 255, 255, 0.65);
+    --sl-table-range-selection-background: #f2f9ff;
+
+    --sl-table-column-header-padding: var(--sl-spacing-x-small);
+    --sl-table-cell-padding: var(--sl-spacing-x-small);
+    --sl-table-default-text-margin-vertical: calc(
+      16 * 0.875 / var(--kdds-base-font-size, 16) * 1rem
+    );
+
+    --sl-table-cell-border-width: var(--sl-input-border-width, 1px);
+    --sl-table-cell-border: var(--sl-color-neutral-300, #d9d9d9);
+    --sl-table-cell-border-focus: var(--sl-color-primary-600, #5582f3);
+
+    --sl-table-range-selection-border: #276ff5;
+
+    --sl-table-header-line-height: calc(
+      16 * 1.75 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-table-cell-color: var(--sl-color-neutral-900, #212121);
+    --sl-table-cell-line-height: calc(
+      16 * 2 / var(--kdds-base-font-size, 16) * 1rem
+    );
+    --sl-table-default-text-color: var(--sl-color-neutral-600, #666666);
+    --sl-table-font-size: var(--sl-font-size-small);
+
+    --sl-table-drag-handle-width: calc(
+      16 * 0.5 / var(--kdds-base-font-size, 16) * 1rem
+    );
+
+    --sl-z-index-drawer: 700;
+    --sl-z-index-dialog: 800;
+    --sl-z-index-dropdown: 900;
+    --sl-z-index-toast: 950;
+    --sl-z-index-tooltip: 1000;
+    --sl-z-index-table-overlay: 1100;
+
+    --sl-dashboard-bg-color: var(--sl-color-purple-gray-50);
+    --sl-dashboard-card-bg-color: var(--sl-color-purple-gray-100);
+    --sl-dashboard-card-bg-color-hover: var(--sl-color-purple-gray-200);
+    --sl-dashboard-card-border-color: var(--sl-color-purple-gray-200);
+    --sl-dashboard-card-border-width: 1px;
+    --sl-dashboard-card-border-radius: var(--sl-border-radius-large);
+    --sl-dashboard-card-shadow: var(--sl-shadow-medium);
+    --sl-dashboard-card-shadow-hover: var(--sl-shadow-large);
+    --sl-card-dragging-bg: var(--sl-color-primary-50);
+    --sl-card-dragging-border: var(--sl-color-primary-600);
+    --sl-card-dragging-shadow: var(--sl-shadow-x-large);
+    --sl-card-dragging-opacity: 0.9;
+    --sl-card-resize-handle-size: 12px;
+    --sl-del-btn-bg-color: var(--sl-color-purple-gray-200);
+    --sl-del-btn-color: var(--sl-color-purple-gray-700);
+    --sl-del-btn-hover-bg-color: var(--sl-color-primary-600);
+    --sl-del-btn-hover-color: var(--sl-color-neutral-0);
+    --sl-del-btn-active-bg-color: var(--sl-color-primary-700);
+    --sl-del-btn-active-color: var(--sl-color-neutral-0);
+  }
+
+  @supports (scrollbar-gutter: stable) {
+    .sl-scroll-lock {
+      scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;
+    }
+
+    .sl-scroll-lock body {
+      overflow: hidden !important;
+    }
+  }
+
+  @supports not (scrollbar-gutter: stable) {
+    .sl-scroll-lock body {
+      padding-right: var(--sl-scroll-lock-size) !important;
+      overflow: hidden !important;
+    }
+  }
+
+  .sl-toast-stack {
+    position: fixed;
+    top: 0;
+    inset-inline-start: 50%;
+    z-index: var(--sl-z-index-toast);
+    transform: translateX(-50%);
+    width: 28rem;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: auto;
+  }
+
+  .sl-toast-stack sl-alert {
+    margin: var(--sl-spacing-medium);
+  }
+
+  .sl-toast-stack sl-alert::part(base) {
+    box-shadow: var(--sl-shadow-large);
+  }
+`;