@cuby-ui/core 0.0.163 → 0.0.165

package/styles/theme.scss

@@ -1,385 +1,385 @@
-@import './global';
-
-: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-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-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-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);
-
-  // TODO: Добавить для всех кнопок и свойств их
-  --c-action-background: #{$cui-bg-light-blue};
-  --c-action-background-hover: #{$cui-light-blue-600};
-  --c-action-border-color: #{$cui-light-blue-500};
-
-  --cui-cyan-bg: var(--cui-cyan-600);
-  --cui-yellow-bg: var(--cui-yellow-400);
-  --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-violet-bg: var(--cui-violet-900);
-  --cui-badge-violet-label: var(--cui-violet-400);
-
-  --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-cyan-bg: var(--cui-cyan-800);
-  --cui-yellow-bg: var(--cui-yellow-600);
-  --cui-violet-bg: var(-cui-violet-600);
-}
+@import './global';
+
+: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-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-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-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);
+
+  // TODO: Добавить для всех кнопок и свойств их
+  --c-action-background: #{$cui-bg-light-blue};
+  --c-action-background-hover: #{$cui-light-blue-600};
+  --c-action-border-color: #{$cui-light-blue-500};
+
+  --cui-cyan-bg: var(--cui-cyan-600);
+  --cui-yellow-bg: var(--cui-yellow-400);
+  --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-violet-bg: var(--cui-violet-900);
+  --cui-badge-violet-label: var(--cui-violet-400);
+
+  --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-cyan-bg: var(--cui-cyan-800);
+  --cui-yellow-bg: var(--cui-yellow-600);
+  --cui-violet-bg: var(-cui-violet-600);
+}