@cuby-ui/core 0.0.322 → 0.0.323

package/styles/theme.scss

@@ -1,421 +1,421 @@
-:root {
-    --cui-main-font: 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-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);
-
-    // TODO: Добавить для всех кнопок и свойств их
-    --c-action-background: var(--cui-bg-light-blue);
-    --c-action-background-hover: var(--cui-light-blue-600);
-    --c-action-border-color: var(--cui-light-blue-500);
-
-    --c-outlined-gray-color: var(--cui-base-900);
-}
-
-[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-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-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-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);
+
+    // TODO: Добавить для всех кнопок и свойств их
+    --c-action-background: var(--cui-bg-light-blue);
+    --c-action-background-hover: var(--cui-light-blue-600);
+    --c-action-border-color: var(--cui-light-blue-500);
+
+    --c-outlined-gray-color: var(--cui-base-900);
+}
+
+[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-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);
 }