@cuby-ui/core 0.0.469 → 0.0.470

package/styles/theme.scss

@@ -1,427 +1,427 @@
-:root {
-    --cui-main-font: Inter, sans-serif;
-    --cui-nunito-italic-font: Nunito_Italic, Inter, sans-serif;
-
-    --cui-black: #000000;
-
-    --cui-gray-0: #ffffff;
-    --cui-gray-10: #f9fafb;
-    --cui-gray-50: #eff0f2;
-    --cui-gray-100: #e9ebee;
-    --cui-gray-200: #dcdee3;
-    --cui-gray-300: #aeb2bc;
-    --cui-gray-400: #7f8493;
-    --cui-gray-500: #595e6a;
-    --cui-gray-600: #474b55;
-    --cui-gray-700: #363840;
-    --cui-gray-800: #24262b;
-    --cui-gray-900: #121315;
-
-    --cui-slate-10: #f6fbff;
-    --cui-slate-50: #e4ecf3;
-    --cui-slate-100: #d3dde8;
-    --cui-slate-200: #c5d1de;
-    --cui-slate-300: #adbac7;
-    --cui-slate-400: #717e8b;
-    --cui-slate-500: #444c56;
-    --cui-slate-600: #373e47;
-    --cui-slate-700: #2d333b;
-    --cui-slate-800: #22272e;
-    --cui-slate-900: #1c2128;
-
-    --cui-cyan-100: #f0f6f6;
-    --cui-cyan-200: #d6eaea;
-    --cui-cyan-300: #badcdc;
-    --cui-cyan-400: #98cbca;
-    --cui-cyan-500: #53a8a7;
-    --cui-cyan-600: #319795;
-    --cui-cyan-700: #297f7e;
-    --cui-cyan-800: #1a6b6a;
-    --cui-cyan-900: #0d4949;
-
-    --cui-light-green-50: #f5fef1;
-    --cui-light-green-100: #f0feea;
-    --cui-light-green-200: #e1fcd3;
-    --cui-light-green-300: #9ef572;
-    --cui-light-green-400: #8edd67;
-    --cui-light-green-500: #7ec45b;
-    --cui-light-green-600: #77b856;
-    --cui-light-green-700: #5f9344;
-    --cui-light-green-800: #476e33;
-    --cui-light-green-900: #375628;
-
-    --cui-green-50: #ecfff3;
-    --cui-green-100: #c1ffda;
-    --cui-green-200: #97ffc0;
-    --cui-green-300: #6dffa7;
-    --cui-green-400: #3eee84;
-    --cui-green-500: #29cc6a;
-    --cui-green-600: #17c174;
-    --cui-green-700: #039855;
-    --cui-green-800: #006f3d;
-    --cui-green-900: #004627;
-
-    --cui-yellow-50: #fffaeb;
-    --cui-yellow-100: #ffe6b7;
-    --cui-yellow-200: #ffd892;
-    --cui-yellow-300: #ffc354;
-    --cui-yellow-400: #fdb022;
-    --cui-yellow-500: #db9411;
-    --cui-yellow-600: #b97904;
-    --cui-yellow-700: #976200;
-    --cui-yellow-800: #754c00;
-    --cui-yellow-900: #533600;
-
-    --cui-orange-50: #fff4ee;
-    --cui-orange-100: #ffebdd;
-    --cui-orange-200: #ffe0cf;
-    --cui-orange-300: #ffd7ba;
-    --cui-orange-400: #ffbc8b;
-    --cui-orange-500: #ffa05c;
-    --cui-orange-600: #ff852c;
-    --cui-orange-700: #b75119;
-    --cui-orange-800: #8e3605;
-    --cui-orange-900: #652400;
-
-    --cui-red-50: #ffeeee;
-    --cui-red-100: #ffc8c8;
-    --cui-red-200: #ffa2a2;
-    --cui-red-300: #ff7c7c;
-    --cui-red-400: #fc5555;
-    --cui-red-500: #d92d20;
-    --cui-red-600: #b82e2e;
-    --cui-red-700: #961f1f;
-    --cui-red-800: #741313;
-    --cui-red-900: #520909;
-
-    --cui-light-blue-50: #f0f9ff;
-    --cui-light-blue-100: #e5f5ff;
-    --cui-light-blue-200: #c4e7ff;
-    --cui-light-blue-300: #98d6ff;
-    --cui-light-blue-400: #6dc4ff;
-    --cui-light-blue-500: #2eabff;
-    --cui-light-blue-600: #0099ff;
-    --cui-light-blue-700: #0068ad;
-    --cui-light-blue-800: #005085;
-    --cui-light-blue-900: #00375c;
-
-    --cui-blue-50: #f0f7ff;
-    --cui-blue-100: #e8f1ff;
-    --cui-blue-200: #bed9ff;
-    --cui-blue-300: #94c0ff;
-    --cui-blue-400: #4190ff;
-    --cui-blue-500: #4190ff;
-    --cui-blue-600: #1570ef;
-    --cui-blue-700: #0354c6;
-    --cui-blue-800: #00429d;
-    --cui-blue-900: #002b67;
-
-    --cui-magenta-50: #ffe5ff;
-    --cui-magenta-100: #ffe5ff;
-    --cui-magenta-200: #f38de2;
-    --cui-magenta-300: #ec5fd6;
-    --cui-magenta-400: #e633c9;
-    --cui-magenta-500: #cc19b0;
-    --cui-magenta-600: #a0128a;
-    --cui-magenta-700: #720a63;
-    --cui-magenta-800: #46033d;
-    --cui-magenta-900: #1c0018;
-
-    --cui-lavender-50: #f7f0fb;
-    --cui-lavender-100: #f3e8f9;
-    --cui-lavender-200: #e6cff3;
-    --cui-lavender-300: #c47eee;
-    --cui-lavender-400: #9e5bc3;
-    --cui-lavender-500: #8c51ae;
-    --cui-lavender-600: #834ca3;
-    --cui-lavender-700: #693d82;
-    --cui-lavender-800: #4f2d62;
-    --cui-lavender-900: #3d234c;
-
-    --cui-violet-50: #f2efff;
-    --cui-violet-100: #d4cbff;
-    --cui-violet-200: #b6a8ff;
-    --cui-violet-300: #9984ff;
-    --cui-violet-400: #7b61ff;
-    --cui-violet-500: #634bdd;
-    --cui-violet-600: #4d38bb;
-    --cui-violet-700: #3a2799;
-    --cui-violet-800: #291a77;
-    --cui-violet-900: #1a0f55;
-
-    --cui-purple-50: #f4f2ff;
-    --cui-purple-100: #d4cdff;
-    --cui-purple-200: #b4a7ff;
-    --cui-purple-300: #9382ff;
-    --cui-purple-400: #806fea;
-    --cui-purple-500: #6a5acd;
-    --cui-purple-600: #5647b0;
-    --cui-purple-700: #433693;
-    --cui-purple-800: #322776;
-    --cui-purple-900: #231a58;
-
-    --cui-base: var(--cui-black);
-    --cui-base-0: var(--cui-gray-0);
-    --cui-base-10: var(--cui-gray-10);
-    --cui-base-50: var(--cui-gray-50);
-    --cui-base-100: var(--cui-gray-100);
-    --cui-base-200: var(--cui-gray-200);
-    --cui-base-300: var(--cui-gray-300);
-    --cui-base-400: var(--cui-gray-400);
-    --cui-base-500: var(--cui-gray-500);
-    --cui-base-900: var(--cui-gray-900);
-
-    --cui-success: var(--cui-green-600);
-
-    --cui-warning: var(--cui-yellow-400);
-
-    --cui-danger: var(--cui-red-500);
-
-    --cui-info: var(--cui-blue-600);
-
-    --cui-accent-1: var(--cui-cyan-800);
-
-    --cui-accent-2: var(--cui-light-blue-600);
-
-    --cui-accent-3: var(--cui-purple-500);
-
-    --cui-accent-4: var(--cui-orange-600);
-
-    --cui-focus: var(--cui-blue-100);
-
-    --cui-input: var(--cui-gray-10);
-
-    --cui-bg-light: var(--cui-gray-0);
-
-    --cui-bg-light-blue: var(--cui-light-blue-500);
-
-    --cui-bg-light-blue-1: var(--cui-light-blue-50);
-
-    --cui-label-text: var(--cui-gray-500);
-
-    --cui-sidebar: var(--cui-gray-50);
-
-    --cui-scrollbar: var(--cui-gray-200);
-
-    --cui-track: var(--cui-gray-10);
-
-    --cui-btn-bg: var(--cui-light-blue-500);
-
-    --cui-badge-info-bg: var(--cui-blue-50);
-    --cui-badge-info-label: var(--cui-gray-900);
-
-    --cui-badge-danger-bg: var(--cui-red-50);
-    --cui-badge-danger-label: var(--cui-gray-900);
-
-    --cui-badge-success-bg: var(--cui-green-50);
-    --cui-badge-success-label: var(--cui-gray-900);
-
-    --cui-badge-warning-bg: var(--cui-yellow-50);
-    --cui-badge-warning-label: var(--cui-gray-900);
-
-    --cui-badge-gray-bg: var(--cui-gray-100);
-    --cui-badge-gray-label: var(--cui-gray-900);
-
-    --cui-badge-light-blue-bg: var(--cui-light-blue-50);
-    --cui-badge-light-blue-label: var(--cui-gray-900);
-
-    --cui-badge-magenta-bg: var(--cui-magenta-50);
-    --cui-badge-magenta-label: var(--cui-gray-900);
-
-    --cui-badge-light-green-bg: var(--cui-light-green-100);
-    --cui-badge-light-green-label: var(--cui-gray-900);
-
-    --cui-badge-lavender-bg: var(--cui-lavender-50);
-    --cui-badge-lavender-label: var(--cui-lavender-400);
-
-    --cui-badge-violet-bg: var(--cui-violet-50);
-    --cui-badge-violet-label: var(--cui-gray-900);
-
-    --cui-badge-yellow-bg: var(--cui-yellow-50);
-    --cui-badge-yellow-border: var(--cui-yellow-100);
-    --cui-badge-yellow-label: var(--cui-gray-900);
-
-    --cui-badge-orange-bg: var(--cui-orange-50);
-    --cui-badge-orange-label: var(--cui-gray-900);
-
-    --cui-badge-blue-border: var(--cui-blue-200);
-    --cui-badge-blue-bg: var(--cui-blue-50);
-
-    --cui-badge-purple-border: var(--cui-purple-100);
-    --cui-badge-purple-bg: var(--cui-purple-50);
-
-    --cui-banner-alert-bg: var(--cui-yellow-100);
-    --cui-banner-alert-text: var(--cui-orange-800);
-    --cui-banner-alert-icon: var(--cui-orange-800);
-    --cui-banner-alert-link: var(--cui-blue-600);
-
-    --cui-banner-info-bg: var(--cui-blue-50);
-    --cui-banner-info-text: var(--cui-light-blue-800);
-    --cui-banner-info-icon: var(--cui-light-blue-800);
-
-    --cui-banner-danger-bg: var(--cui-red-50);
-    --cui-banner-danger-text: var(--cui-gray-900);
-    --cui-banner-danger-icon: var(--cui-red-500);
-    --cui-banner-danger-link: var(--cui-blue-600);
-
-    --cui-banner-success-bg: var(--cui-green-50);
-    --cui-banner-success-text: var(--cui-gray-900);
-    --cui-banner-success-icon: var(--cui-green-600);
-    --cui-banner-success-link: var(--cui-blue-600);
-
-    --cui-toast-alert-bg: var(--cui-gray-800);
-    --cui-toast-alert-text: var(--cui-gray-0);
-    --cui-toast-alert-icon: var(--cui-yellow-400);
-
-    --cui-toast-info-bg: var(--cui-gray-800);
-    --cui-toast-info-text: var(--cui-gray-0);
-    --cui-toast-info-icon: var(--cui-blue-600);
-
-    --cui-toast-danger-bg: var(--cui-gray-800);
-    --cui-toast-danger-text: var(--cui-gray-0);
-    --cui-toast-danger-icon: var(--cui-red-500);
-
-    --cui-toast-success-bg: var(--cui-gray-800);
-    --cui-toast-success-text: var(--cui-gray-0);
-    --cui-toast-success-icon: var(--cui-green-600);
-
-    --cui-danger-bg: var(--cui-red-50);
-    --cui-success-bg: var(--cui-green-50);
-    --cui-cyan-bg: var(--cui-cyan-600);
-    --cui-yellow-bg: var(--cui-yellow-400);
-    --cui-lavender-bg: var(--cui-lavender-50);
-    --cui-violet-bg: var(--cui-violet-400);
-}
-
-[cuiTheme='dark'] {
-    --cui-base-0: var(--cui-slate-900);
-    --cui-base-10: var(--cui-slate-800);
-    --cui-base-50: var(--cui-slate-700);
-    --cui-base-100: var(--cui-slate-600);
-    --cui-base-200: var(--cui-slate-500);
-    --cui-base-300: var(--cui-gray-400);
-    --cui-base-400: var(--cui-slate-400);
-    --cui-base-500: var(--cui-slate-300);
-    --cui-base-900: var(--cui-slate-200);
-
-    --cui-success: var(--cui-green-500);
-
-    --cui-warning: var(--cui-yellow-300);
-
-    --cui-danger: var(--cui-red-400);
-
-    --cui-info: var(--cui-blue-500);
-
-    --cui-accent-1: var(--cui-cyan-700);
-
-    --cui-accent-2: var(--cui-light-blue-600);
-
-    --cui-accent-3: var(--cui-purple-400);
-
-    --cui-accent-4: var(--cui-orange-500);
-
-    --cui-focus: var(--cui-light-blue-700);
-
-    --cui-input: var(--cui-slate-700);
-
-    --cui-bg-light: var(--cui-slate-700);
-
-    --cui-bg-light-blue: var(--cui-light-blue-700);
-
-    --cui-bg-light-blue-1: var(--cui-light-blue-800);
-
-    --cui-label-text: var(--cui-gray-0);
-
-    --cui-sidebar: var(--cui-slate-800);
-
-    --cui-scrollbar: var(--cui-gray-500);
-
-    --cui-track: var(--cui-slate-700);
-
-    --cui-btn-bg: var(--cui-light-blue-700);
-
-    --cui-badge-info-bg: var(--cui-blue-900);
-    --cui-badge-info-label: var(--cui-light-blue-600);
-
-    --cui-badge-danger-bg: var(--cui-red-900);
-    --cui-badge-danger-label: var(--cui-red-400);
-
-    --cui-badge-success-bg: var(--cui-green-900);
-    --cui-badge-success-label: var(--cui-green-600);
-
-    --cui-badge-warning-bg: var(--cui-yellow-900);
-    --cui-badge-warning-label: var(--cui-yellow-400);
-
-    --cui-badge-gray-bg: var(--cui-gray-600);
-    --cui-badge-gray-label: var(--cui-gray-0);
-
-    --cui-badge-light-blue-bg: var(--cui-light-blue-900);
-    --cui-badge-light-blue-label: var(--cui-light-blue-600);
-
-    --cui-badge-magenta-bg: var(--cui-magenta-900);
-    --cui-badge-magenta-label: var(--cui-magenta-500);
-
-    --cui-badge-light-green-bg: var(--cui-light-green-900);
-    --cui-badge-light-green-label: var(--cui-light-green-500);
-
-    --cui-badge-lavender-bg: var(--cui-lavender-900);
-    --cui-badge-lavender-label: var(--cui-lavender-300);
-
-    --cui-badge-violet-bg: var(--cui-violet-900);
-    --cui-badge-violet-label: var(--cui-violet-400);
-
-    --cui-badge-yellow-bg: var(--cui-yellow-900);
-    --cui-badge-yellow-border: var(--cui-yellow-800);
-    --cui-badge-yellow-label: var(--cui-yellow-500);
-
-    --cui-badge-orange-bg: var(--cui-orange-900);
-    --cui-badge-orange-label: var(--cui-orange-600);
-
-    --cui-badge-blue-border: var(--cui-blue-800);
-    --cui-badge-blue-bg: var(--cui-blue-900);
-
-    --cui-badge-purple-border: var(--cui-purple-800);
-    --cui-badge-purple-bg: var(--cui-purple-900);
-
-    --cui-banner-alert-bg: var(--cui-yellow-900);
-    --cui-banner-alert-text: var(--cui-gray-0);
-    --cui-banner-alert-icon: var(--cui-yellow-300);
-    --cui-banner-alert-link: var(--cui-yellow-300);
-
-    --cui-banner-info-bg: var(--cui-blue-900);
-    --cui-banner-info-text: var(--cui-light-blue-400);
-    --cui-banner-info-icon: var(--cui-light-blue-400);
-
-    --cui-banner-danger-bg: var(--cui-red-900);
-    --cui-banner-danger-text: var(--cui-gray-0);
-    --cui-banner-danger-icon: var(--cui-red-400);
-    --cui-banner-danger-link: var(--cui-red-400);
-
-    --cui-banner-success-bg: var(--cui-green-900);
-    --cui-banner-success-text: var(--cui-gray-0);
-    --cui-banner-success-icon: var(--cui-green-500);
-    --cui-banner-success-link: var(--cui-green-500);
-
-    --cui-toast-alert-bg: var(--cui-yellow-900);
-    --cui-toast-alert-text: var(--cui-gray-0);
-    --cui-toast-alert-icon: var(--cui-yellow-300);
-
-    --cui-toast-info-bg: var(--cui-blue-900);
-    --cui-toast-info-text: var(--cui-gray-0);
-    --cui-toast-info-icon: var(--cui-light-blue-400);
-
-    --cui-toast-danger-bg: var(--cui-red-900);
-    --cui-toast-danger-text: var(--cui-gray-0);
-    --cui-toast-danger-icon: var(--cui-red-400);
-
-    --cui-toast-success-bg: var(--cui-green-900);
-    --cui-toast-success-text: var(--cui-gray-0);
-    --cui-toast-success-icon: var(--cui-green-500);
-
-    --cui-danger-bg: var(--cui-red-900);
-    --cui-success-bg: var(--cui-green-900);
-    --cui-cyan-bg: var(--cui-cyan-800);
-    --cui-yellow-bg: var(--cui-yellow-600);
-    --cui-lavender-bg: var(--cui-lavender-900);
-    --cui-violet-bg: var(-cui-violet-600);
-}
+:root {
+    --cui-main-font: Inter, sans-serif;
+    --cui-nunito-italic-font: Nunito_Italic, Inter, sans-serif;
+
+    --cui-black: #000000;
+
+    --cui-gray-0: #ffffff;
+    --cui-gray-10: #f9fafb;
+    --cui-gray-50: #eff0f2;
+    --cui-gray-100: #e9ebee;
+    --cui-gray-200: #dcdee3;
+    --cui-gray-300: #aeb2bc;
+    --cui-gray-400: #7f8493;
+    --cui-gray-500: #595e6a;
+    --cui-gray-600: #474b55;
+    --cui-gray-700: #363840;
+    --cui-gray-800: #24262b;
+    --cui-gray-900: #121315;
+
+    --cui-slate-10: #f6fbff;
+    --cui-slate-50: #e4ecf3;
+    --cui-slate-100: #d3dde8;
+    --cui-slate-200: #c5d1de;
+    --cui-slate-300: #adbac7;
+    --cui-slate-400: #717e8b;
+    --cui-slate-500: #444c56;
+    --cui-slate-600: #373e47;
+    --cui-slate-700: #2d333b;
+    --cui-slate-800: #22272e;
+    --cui-slate-900: #1c2128;
+
+    --cui-cyan-100: #f0f6f6;
+    --cui-cyan-200: #d6eaea;
+    --cui-cyan-300: #badcdc;
+    --cui-cyan-400: #98cbca;
+    --cui-cyan-500: #53a8a7;
+    --cui-cyan-600: #319795;
+    --cui-cyan-700: #297f7e;
+    --cui-cyan-800: #1a6b6a;
+    --cui-cyan-900: #0d4949;
+
+    --cui-light-green-50: #f5fef1;
+    --cui-light-green-100: #f0feea;
+    --cui-light-green-200: #e1fcd3;
+    --cui-light-green-300: #9ef572;
+    --cui-light-green-400: #8edd67;
+    --cui-light-green-500: #7ec45b;
+    --cui-light-green-600: #77b856;
+    --cui-light-green-700: #5f9344;
+    --cui-light-green-800: #476e33;
+    --cui-light-green-900: #375628;
+
+    --cui-green-50: #ecfff3;
+    --cui-green-100: #c1ffda;
+    --cui-green-200: #97ffc0;
+    --cui-green-300: #6dffa7;
+    --cui-green-400: #3eee84;
+    --cui-green-500: #29cc6a;
+    --cui-green-600: #17c174;
+    --cui-green-700: #039855;
+    --cui-green-800: #006f3d;
+    --cui-green-900: #004627;
+
+    --cui-yellow-50: #fffaeb;
+    --cui-yellow-100: #ffe6b7;
+    --cui-yellow-200: #ffd892;
+    --cui-yellow-300: #ffc354;
+    --cui-yellow-400: #fdb022;
+    --cui-yellow-500: #db9411;
+    --cui-yellow-600: #b97904;
+    --cui-yellow-700: #976200;
+    --cui-yellow-800: #754c00;
+    --cui-yellow-900: #533600;
+
+    --cui-orange-50: #fff4ee;
+    --cui-orange-100: #ffebdd;
+    --cui-orange-200: #ffe0cf;
+    --cui-orange-300: #ffd7ba;
+    --cui-orange-400: #ffbc8b;
+    --cui-orange-500: #ffa05c;
+    --cui-orange-600: #ff852c;
+    --cui-orange-700: #b75119;
+    --cui-orange-800: #8e3605;
+    --cui-orange-900: #652400;
+
+    --cui-red-50: #ffeeee;
+    --cui-red-100: #ffc8c8;
+    --cui-red-200: #ffa2a2;
+    --cui-red-300: #ff7c7c;
+    --cui-red-400: #fc5555;
+    --cui-red-500: #d92d20;
+    --cui-red-600: #b82e2e;
+    --cui-red-700: #961f1f;
+    --cui-red-800: #741313;
+    --cui-red-900: #520909;
+
+    --cui-light-blue-50: #f0f9ff;
+    --cui-light-blue-100: #e5f5ff;
+    --cui-light-blue-200: #c4e7ff;
+    --cui-light-blue-300: #98d6ff;
+    --cui-light-blue-400: #6dc4ff;
+    --cui-light-blue-500: #2eabff;
+    --cui-light-blue-600: #0099ff;
+    --cui-light-blue-700: #0068ad;
+    --cui-light-blue-800: #005085;
+    --cui-light-blue-900: #00375c;
+
+    --cui-blue-50: #f0f7ff;
+    --cui-blue-100: #e8f1ff;
+    --cui-blue-200: #bed9ff;
+    --cui-blue-300: #94c0ff;
+    --cui-blue-400: #4190ff;
+    --cui-blue-500: #4190ff;
+    --cui-blue-600: #1570ef;
+    --cui-blue-700: #0354c6;
+    --cui-blue-800: #00429d;
+    --cui-blue-900: #002b67;
+
+    --cui-magenta-50: #ffe5ff;
+    --cui-magenta-100: #ffe5ff;
+    --cui-magenta-200: #f38de2;
+    --cui-magenta-300: #ec5fd6;
+    --cui-magenta-400: #e633c9;
+    --cui-magenta-500: #cc19b0;
+    --cui-magenta-600: #a0128a;
+    --cui-magenta-700: #720a63;
+    --cui-magenta-800: #46033d;
+    --cui-magenta-900: #1c0018;
+
+    --cui-lavender-50: #f7f0fb;
+    --cui-lavender-100: #f3e8f9;
+    --cui-lavender-200: #e6cff3;
+    --cui-lavender-300: #c47eee;
+    --cui-lavender-400: #9e5bc3;
+    --cui-lavender-500: #8c51ae;
+    --cui-lavender-600: #834ca3;
+    --cui-lavender-700: #693d82;
+    --cui-lavender-800: #4f2d62;
+    --cui-lavender-900: #3d234c;
+
+    --cui-violet-50: #f2efff;
+    --cui-violet-100: #d4cbff;
+    --cui-violet-200: #b6a8ff;
+    --cui-violet-300: #9984ff;
+    --cui-violet-400: #7b61ff;
+    --cui-violet-500: #634bdd;
+    --cui-violet-600: #4d38bb;
+    --cui-violet-700: #3a2799;
+    --cui-violet-800: #291a77;
+    --cui-violet-900: #1a0f55;
+
+    --cui-purple-50: #f4f2ff;
+    --cui-purple-100: #d4cdff;
+    --cui-purple-200: #b4a7ff;
+    --cui-purple-300: #9382ff;
+    --cui-purple-400: #806fea;
+    --cui-purple-500: #6a5acd;
+    --cui-purple-600: #5647b0;
+    --cui-purple-700: #433693;
+    --cui-purple-800: #322776;
+    --cui-purple-900: #231a58;
+
+    --cui-base: var(--cui-black);
+    --cui-base-0: var(--cui-gray-0);
+    --cui-base-10: var(--cui-gray-10);
+    --cui-base-50: var(--cui-gray-50);
+    --cui-base-100: var(--cui-gray-100);
+    --cui-base-200: var(--cui-gray-200);
+    --cui-base-300: var(--cui-gray-300);
+    --cui-base-400: var(--cui-gray-400);
+    --cui-base-500: var(--cui-gray-500);
+    --cui-base-900: var(--cui-gray-900);
+
+    --cui-success: var(--cui-green-600);
+
+    --cui-warning: var(--cui-yellow-400);
+
+    --cui-danger: var(--cui-red-500);
+
+    --cui-info: var(--cui-blue-600);
+
+    --cui-accent-1: var(--cui-cyan-800);
+
+    --cui-accent-2: var(--cui-light-blue-600);
+
+    --cui-accent-3: var(--cui-purple-500);
+
+    --cui-accent-4: var(--cui-orange-600);
+
+    --cui-focus: var(--cui-blue-100);
+
+    --cui-input: var(--cui-gray-10);
+
+    --cui-bg-light: var(--cui-gray-0);
+
+    --cui-bg-light-blue: var(--cui-light-blue-500);
+
+    --cui-bg-light-blue-1: var(--cui-light-blue-50);
+
+    --cui-label-text: var(--cui-gray-500);
+
+    --cui-sidebar: var(--cui-gray-50);
+
+    --cui-scrollbar: var(--cui-gray-200);
+
+    --cui-track: var(--cui-gray-10);
+
+    --cui-btn-bg: var(--cui-light-blue-500);
+
+    --cui-badge-info-bg: var(--cui-blue-50);
+    --cui-badge-info-label: var(--cui-gray-900);
+
+    --cui-badge-danger-bg: var(--cui-red-50);
+    --cui-badge-danger-label: var(--cui-gray-900);
+
+    --cui-badge-success-bg: var(--cui-green-50);
+    --cui-badge-success-label: var(--cui-gray-900);
+
+    --cui-badge-warning-bg: var(--cui-yellow-50);
+    --cui-badge-warning-label: var(--cui-gray-900);
+
+    --cui-badge-gray-bg: var(--cui-gray-100);
+    --cui-badge-gray-label: var(--cui-gray-900);
+
+    --cui-badge-light-blue-bg: var(--cui-light-blue-50);
+    --cui-badge-light-blue-label: var(--cui-gray-900);
+
+    --cui-badge-magenta-bg: var(--cui-magenta-50);
+    --cui-badge-magenta-label: var(--cui-gray-900);
+
+    --cui-badge-light-green-bg: var(--cui-light-green-100);
+    --cui-badge-light-green-label: var(--cui-gray-900);
+
+    --cui-badge-lavender-bg: var(--cui-lavender-50);
+    --cui-badge-lavender-label: var(--cui-lavender-400);
+
+    --cui-badge-violet-bg: var(--cui-violet-50);
+    --cui-badge-violet-label: var(--cui-gray-900);
+
+    --cui-badge-yellow-bg: var(--cui-yellow-50);
+    --cui-badge-yellow-border: var(--cui-yellow-100);
+    --cui-badge-yellow-label: var(--cui-gray-900);
+
+    --cui-badge-orange-bg: var(--cui-orange-50);
+    --cui-badge-orange-label: var(--cui-gray-900);
+
+    --cui-badge-blue-border: var(--cui-blue-200);
+    --cui-badge-blue-bg: var(--cui-blue-50);
+
+    --cui-badge-purple-border: var(--cui-purple-100);
+    --cui-badge-purple-bg: var(--cui-purple-50);
+
+    --cui-banner-alert-bg: var(--cui-yellow-100);
+    --cui-banner-alert-text: var(--cui-orange-800);
+    --cui-banner-alert-icon: var(--cui-orange-800);
+    --cui-banner-alert-link: var(--cui-blue-600);
+
+    --cui-banner-info-bg: var(--cui-blue-50);
+    --cui-banner-info-text: var(--cui-light-blue-800);
+    --cui-banner-info-icon: var(--cui-light-blue-800);
+
+    --cui-banner-danger-bg: var(--cui-red-50);
+    --cui-banner-danger-text: var(--cui-gray-900);
+    --cui-banner-danger-icon: var(--cui-red-500);
+    --cui-banner-danger-link: var(--cui-blue-600);
+
+    --cui-banner-success-bg: var(--cui-green-50);
+    --cui-banner-success-text: var(--cui-gray-900);
+    --cui-banner-success-icon: var(--cui-green-600);
+    --cui-banner-success-link: var(--cui-blue-600);
+
+    --cui-toast-alert-bg: var(--cui-gray-800);
+    --cui-toast-alert-text: var(--cui-gray-0);
+    --cui-toast-alert-icon: var(--cui-yellow-400);
+
+    --cui-toast-info-bg: var(--cui-gray-800);
+    --cui-toast-info-text: var(--cui-gray-0);
+    --cui-toast-info-icon: var(--cui-blue-600);
+
+    --cui-toast-danger-bg: var(--cui-gray-800);
+    --cui-toast-danger-text: var(--cui-gray-0);
+    --cui-toast-danger-icon: var(--cui-red-500);
+
+    --cui-toast-success-bg: var(--cui-gray-800);
+    --cui-toast-success-text: var(--cui-gray-0);
+    --cui-toast-success-icon: var(--cui-green-600);
+
+    --cui-danger-bg: var(--cui-red-50);
+    --cui-success-bg: var(--cui-green-50);
+    --cui-cyan-bg: var(--cui-cyan-600);
+    --cui-yellow-bg: var(--cui-yellow-400);
+    --cui-lavender-bg: var(--cui-lavender-50);
+    --cui-violet-bg: var(--cui-violet-400);
+}
+
+[cuiTheme='dark'] {
+    --cui-base-0: var(--cui-slate-900);
+    --cui-base-10: var(--cui-slate-800);
+    --cui-base-50: var(--cui-slate-700);
+    --cui-base-100: var(--cui-slate-600);
+    --cui-base-200: var(--cui-slate-500);
+    --cui-base-300: var(--cui-gray-400);
+    --cui-base-400: var(--cui-slate-400);
+    --cui-base-500: var(--cui-slate-300);
+    --cui-base-900: var(--cui-slate-200);
+
+    --cui-success: var(--cui-green-500);
+
+    --cui-warning: var(--cui-yellow-300);
+
+    --cui-danger: var(--cui-red-400);
+
+    --cui-info: var(--cui-blue-500);
+
+    --cui-accent-1: var(--cui-cyan-700);
+
+    --cui-accent-2: var(--cui-light-blue-600);
+
+    --cui-accent-3: var(--cui-purple-400);
+
+    --cui-accent-4: var(--cui-orange-500);
+
+    --cui-focus: var(--cui-light-blue-700);
+
+    --cui-input: var(--cui-slate-700);
+
+    --cui-bg-light: var(--cui-slate-700);
+
+    --cui-bg-light-blue: var(--cui-light-blue-700);
+
+    --cui-bg-light-blue-1: var(--cui-light-blue-800);
+
+    --cui-label-text: var(--cui-gray-0);
+
+    --cui-sidebar: var(--cui-slate-800);
+
+    --cui-scrollbar: var(--cui-gray-500);
+
+    --cui-track: var(--cui-slate-700);
+
+    --cui-btn-bg: var(--cui-light-blue-700);
+
+    --cui-badge-info-bg: var(--cui-blue-900);
+    --cui-badge-info-label: var(--cui-light-blue-600);
+
+    --cui-badge-danger-bg: var(--cui-red-900);
+    --cui-badge-danger-label: var(--cui-red-400);
+
+    --cui-badge-success-bg: var(--cui-green-900);
+    --cui-badge-success-label: var(--cui-green-600);
+
+    --cui-badge-warning-bg: var(--cui-yellow-900);
+    --cui-badge-warning-label: var(--cui-yellow-400);
+
+    --cui-badge-gray-bg: var(--cui-gray-600);
+    --cui-badge-gray-label: var(--cui-gray-0);
+
+    --cui-badge-light-blue-bg: var(--cui-light-blue-900);
+    --cui-badge-light-blue-label: var(--cui-light-blue-600);
+
+    --cui-badge-magenta-bg: var(--cui-magenta-900);
+    --cui-badge-magenta-label: var(--cui-magenta-500);
+
+    --cui-badge-light-green-bg: var(--cui-light-green-900);
+    --cui-badge-light-green-label: var(--cui-light-green-500);
+
+    --cui-badge-lavender-bg: var(--cui-lavender-900);
+    --cui-badge-lavender-label: var(--cui-lavender-300);
+
+    --cui-badge-violet-bg: var(--cui-violet-900);
+    --cui-badge-violet-label: var(--cui-violet-400);
+
+    --cui-badge-yellow-bg: var(--cui-yellow-900);
+    --cui-badge-yellow-border: var(--cui-yellow-800);
+    --cui-badge-yellow-label: var(--cui-yellow-500);
+
+    --cui-badge-orange-bg: var(--cui-orange-900);
+    --cui-badge-orange-label: var(--cui-orange-600);
+
+    --cui-badge-blue-border: var(--cui-blue-800);
+    --cui-badge-blue-bg: var(--cui-blue-900);
+
+    --cui-badge-purple-border: var(--cui-purple-800);
+    --cui-badge-purple-bg: var(--cui-purple-900);
+
+    --cui-banner-alert-bg: var(--cui-yellow-900);
+    --cui-banner-alert-text: var(--cui-gray-0);
+    --cui-banner-alert-icon: var(--cui-yellow-300);
+    --cui-banner-alert-link: var(--cui-yellow-300);
+
+    --cui-banner-info-bg: var(--cui-blue-900);
+    --cui-banner-info-text: var(--cui-light-blue-400);
+    --cui-banner-info-icon: var(--cui-light-blue-400);
+
+    --cui-banner-danger-bg: var(--cui-red-900);
+    --cui-banner-danger-text: var(--cui-gray-0);
+    --cui-banner-danger-icon: var(--cui-red-400);
+    --cui-banner-danger-link: var(--cui-red-400);
+
+    --cui-banner-success-bg: var(--cui-green-900);
+    --cui-banner-success-text: var(--cui-gray-0);
+    --cui-banner-success-icon: var(--cui-green-500);
+    --cui-banner-success-link: var(--cui-green-500);
+
+    --cui-toast-alert-bg: var(--cui-yellow-900);
+    --cui-toast-alert-text: var(--cui-gray-0);
+    --cui-toast-alert-icon: var(--cui-yellow-300);
+
+    --cui-toast-info-bg: var(--cui-blue-900);
+    --cui-toast-info-text: var(--cui-gray-0);
+    --cui-toast-info-icon: var(--cui-light-blue-400);
+
+    --cui-toast-danger-bg: var(--cui-red-900);
+    --cui-toast-danger-text: var(--cui-gray-0);
+    --cui-toast-danger-icon: var(--cui-red-400);
+
+    --cui-toast-success-bg: var(--cui-green-900);
+    --cui-toast-success-text: var(--cui-gray-0);
+    --cui-toast-success-icon: var(--cui-green-500);
+
+    --cui-danger-bg: var(--cui-red-900);
+    --cui-success-bg: var(--cui-green-900);
+    --cui-cyan-bg: var(--cui-cyan-800);
+    --cui-yellow-bg: var(--cui-yellow-600);
+    --cui-lavender-bg: var(--cui-lavender-900);
+    --cui-violet-bg: var(-cui-violet-600);
+}