Refactor how all colors are being set

src/assets/css/index.css

@@ -41,3 +41,61 @@ p {
     user-select: none;
   }
 }
+
+.light {
+  --lumina: #f0f2f5;
+  --whisper: #ffffff;
+  --seraph: #21bb5a;
+  --ember: #cacadb;
+  --enigma: #ffae19;
+  --glaze: #21bb5a;
+  --glazeText: #151226;
+  --glazeBg: #ffffff;
+  --sigma: #0f0e1e;
+  --zeta: #0f0e1e;
+  --status: #21bb5a;
+  --loader: #f6f8fa;
+  --dots: #21bb5a;
+  --neon: #019aff;
+  --pale-dots: #cacadb;
+  --iota-dots: #21bb5a;
+  --overlay: rgba(15, 14, 30, 0.2);
+  --beta: #f6f8fa;
+  --ze: 43, 49, 57;
+  --zephyr-100: rgb(var(--ze));
+  --zephyr-200: rgba(var(--ze), 0.1);
+  --zephyr-600: rgba(var(--ze), 0.6);
+  --zephyr-800: rgba(var(--ze), 0.8);
+  --card: 0 12px 24px 0 rgba(43, 49, 57, 0.06), 0 4px 8px 0 rgba(43, 55, 70, 0.04);
+  --loading-dots: -24px 0 rgba(201, 201, 201, 0.5), 24px 0 rgba(201, 201, 201, 0.5);
+  --density-different: 500;
+}
+
+.dark {
+  --lumina: #252239;
+  --whisper: #151226;
+  --seraph: #f53373;
+  --ember: #cacadb;
+  --enigma: #ffae19;
+  --glaze: #b3bac6;
+  --glazeText: #151226;
+  --glazeBg: #b3bac6;
+  --sigma: #0f0e1e;
+  --zeta: #ffffff;
+  --status: #21bb5a;
+  --loader: #252239;
+  --dots: #f53374;
+  --neon: #019aff;
+  --pale-dots: #ffffff;
+  --iota-dots: #21bb5a;
+  --overlay: rgba(15, 14, 30, 0.9);
+  --beta: #25223;
+  --ze: 255, 255, 255;
+  --zephyr-100: rgb(var(--ze));
+  --zephyr-200: rgba(var(--ze), 0.1);
+  --zephyr-600: rgba(var(--ze), 0.6);
+  --zephyr-800: rgba(var(--ze), 0.8);
+  --card: 0 12px 24px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  --loading-dots: -24px 0 rgba(255, 255, 255, 0.5), 24px 0 rgba(255, 255, 255, 0.5);
+  --density-different: 400;
+}

src/components/Button/basic.tsx

@@ -1,11 +1,8 @@
-import { useAppSelector } from '../../hooks';
 import { ButtonProps } from '../../interfaces/component';
-import { getConfig } from '../../store/slices/config';
 import { basic as variant } from './variants';
 
 export const Btn = ({ text = '', onClick, e2e }: ButtonProps) => {
-  const { themeId: theme } = useAppSelector(getConfig);
-  const { base } = variant({ theme });
+  const { base } = variant();
 
   return (
     <button

src/components/Button/icon.tsx

@@ -1,11 +1,8 @@
-import { useAppSelector } from '../../hooks';
 import { IconProps } from '../../interfaces/component';
-import { getConfig } from '../../store/slices/config';
 import { icon as variant } from './variants';
 
 export const IconBtn = ({ children, outlined = false, onClick, e2e = null, disabled = false }: IconProps) => {
-  const { themeId: theme } = useAppSelector(getConfig);
-  const { base } = variant({ theme, outlined });
+  const { base } = variant({ outlined });
 
   return (
     <button

src/components/Button/variants.ts

@@ -3,29 +3,15 @@ import { tv, type VariantProps } from 'tailwind-variants';
 
 export const basic = /*tw*/ tv({
   slots: {
-    base: 'tw--flex-1 tw--w-full tw--px-[15px] tw--py-[11px] tw--rounded-[20px] tw--border select-none',
-  },
-  variants: {
-    theme: {
-      light: {
-        base: 'tw--bg-light-glazeBg tw--text-light-glazeText tw--border-light-seraph tw--font-medium',
-      },
-      dark: {
-        base: 'tw--bg-dark-glazeBg tw--text-dark-glazeText tw--border-dark-glaze',
-      },
-    },
+    base: 'tw--flex-1 tw--w-full tw--px-[15px] tw--py-[11px] tw--rounded-[20px] tw--border select-none tw--bg-glazeBg tw--text-glazeText tw--border-glaze  tw--font-density-different',
   },
 });
 
 export const icon = /*tw*/ tv({
   slots: {
-    base: 'tw--text-[inherit]',
+    base: 'tw--flex-1 tw--text-dots',
   },
   variants: {
-    theme: {
-      light: { base: 'tw--text-light-status' },
-      dark: { base: 'tw--text-dark-seraph' },
-    },
     outlined: {
       true: 'tw--p-0.5 tw--bg-white tw--rounded-full tw--shadow',
       false: 'tw--bg-[transparent]',

src/components/DevTools/variants.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const wrapper = /* tw */ tv({
   slots: {
-    base: 'tw--fixed tw--flex tw--gap-2 tw--flex-col tw--p-3 tw--space-y-4 tw--bg-dark-sigma tw--rounded-lg',
+    base: 'tw--fixed tw--flex tw--gap-2 tw--flex-col tw--p-3 tw--space-y-4 tw--bg-[#0f0e1e] tw--rounded-lg',
   },
   variants: {
     hidden: {

src/components/Form/email.tsx

@@ -13,9 +13,9 @@ import { layoutFoot as variant } from '../Layout/variants';
 export const EmailForm = () => {
   const dispatch = useAppDispatch();
   const meta = useAppSelector((state) => state.meta);
-  const { themeId: theme, translations } = useAppSelector(getConfig);
+  const { translations } = useAppSelector(getConfig);
   const { isLoading } = useAppSelector(getEmailIntentions);
-  const { base, input, button } = variant({ theme });
+  const { base, input, button } = variant();
   const [email, setCurrentEmail] = useState<string | ''>('');
   const inputElement = useRef<HTMLInputElement>(null);
 

src/components/Form/response.tsx

@@ -5,16 +5,14 @@ import { Input } from '../../components/Input';
 import { Roles } from '../../config/enums';
 import { useAppDispatch, useAppSelector } from '../../hooks';
 import { fillUserHistoryData, getChat, setLastGroupPointer, setTypingTimeoutExpired } from '../../store/slices/chat';
-import { getConfig } from '../../store/slices/config';
 import { uuidV4 } from '../../utils';
 import { layoutFoot as variant } from '../Layout/variants';
 import { TYPING_TIMEOUT } from '../../config/env';
 
 export const ResponseForm = () => {
   const dispatch = useAppDispatch();
-  const { themeId: theme } = useAppSelector(getConfig);
   const { connected, isLoading } = useAppSelector(getChat);
-  const { base, input, button } = variant({ theme });
+  const { base, input, button } = variant();
   const [response, setCurrentResponse] = useState<string | ''>('');
   const [timerId, setTimerId] = useState<NodeJS.Timeout | null>(null);
   const groupId = useAppSelector((state) => state.chat.lastGroupId);

src/components/Input/basic.tsx

@@ -1,8 +1,6 @@
 import { forwardRef } from 'react';
 
-import { useAppSelector } from '../../hooks';
 import { BasicInputProps } from '../../interfaces/component';
-import { getConfig } from '../../store/slices/config';
 import { basic as variant } from './variants';
 
 export const Input = forwardRef<HTMLInputElement, BasicInputProps>((props, ref) => {
@@ -17,8 +15,7 @@ export const Input = forwardRef<HTMLInputElement, BasicInputProps>((props, ref)
     value,
   } = props;
 
-  const { themeId: theme } = useAppSelector(getConfig);
-  const { base, input, loader, spin } = variant({ theme });
+  const { base, input, loader, spin } = variant();
 
   return (
     <div className={base()}>

src/components/Input/variants.ts

@@ -3,25 +3,9 @@ import { tv } from 'tailwind-variants';
 export const basic = /* tw*/ tv({
   slots: {
     base: 'tw--relative tw--flex tw--items-center',
-    input: 'tw--w-full tw--px-[15px] tw--py-[11px] tw--rounded-[20px] focus:tw--outline-none',
+    input: 'tw--w-full tw--px-[15px] tw--py-[11px] tw--rounded-[20px] focus:tw--outline-none focus:!tw--bg-lumina tw--bg-lumina tw--text-zephyr-100 tw--font-density-different',
     loader: 'tw--absolute tw--right-4 tw--top-[50%] tw--translate-y-[-50%]',
-    spin: 'tw--block tw--w-6 tw--h-6 tw--border-solid tw--border-[5px] tw--rounded-3xl tw--animate-rotate tw--m-auto'
-  },
-  variants: {
-    theme: {
-      light: {
-        base: '',
-        input: 'tw--bg-light-lumina tw--text-light-zephyr-100 tw--font-semibold focus:!tw--bg-light-lumina',
-        loader: '',
-        spin: 'tw--border-light-zephyr-200 tw--border-t-light-zephyr-600 tw--border-l-light-zephyr-600',
-      },
-      dark: {
-        base: '',
-        input: 'tw--bg-dark-lumina tw--text-dark-zephyr-100 tw--font-bold focus:!tw--bg-dark-lumina',
-        loader: '',
-        spin: 'w--border-dark-zephyr-200 tw--border-t-dark-zephyr-600 tw--border-l-dark-zephyr-600',
-      },
-    },
+    spin: 'tw--block tw--w-6 tw--h-6 tw--border-solid tw--border-[5px] tw--rounded-3xl tw--animate-rotate tw--m-auto tw--border-zephyr-200 tw--border-t-zephyr-600 tw--border-l-zephyr-600'
   },
 });
 

src/components/Layout/base.tsx

@@ -5,14 +5,14 @@ import { layoutBase as variant } from './variants';
 
 export const LayoutBase = ({ head, stream, foot }: LayoutBaseProps) => {
   const { themeId: theme, isPluginMode } = useAppSelector(getConfig);
-  const { base, wrapper } = variant({ theme });
+  const { base, wrapper } = variant();
   const data = useWindowSize();
 
   return (
     <div
       data-e2e="base-container"
       style={{ height: `${data[1]}px` }}
-      className={base({ minimized: isPluginMode })}
+      className={base({ minimized: isPluginMode }) + ' ' + theme }
     >
       <div className={wrapper()}>
         {head}

src/components/Layout/variants.ts

@@ -3,20 +3,10 @@ import { tv } from 'tailwind-variants';
 
 export const layoutBase = /*tw*/ tv({
   slots: {
-    base: 'tw--flex tw--self-stretch tw--justify-self-stretch tw--items-stretch tw--justify-center tw--overflow-hidden tw--h-full',
-    wrapper: 'tw--flex tw--flex-col tw--w-full md:tw--max-w-[800px] tw--max-h-screen tw--h-full',
+    base: 'tw--flex tw--self-stretch tw--justify-self-stretch tw--items-stretch tw--justify-center tw--overflow-hidden tw--h-full tw--bg-lumina',
+    wrapper: 'tw--flex tw--flex-col tw--w-full md:tw--max-w-[800px] tw--max-h-screen tw--h-full tw--bg-whisper tw--text-zephyr-100',
   },
   variants: {
-    theme: {
-      light: {
-        base: 'tw--bg-light-lumina',
-        wrapper: 'tw--bg-light-whisper tw--text-light-zephyr-100',
-      },
-      dark: {
-        base: 'tw--bg-dark-lumina',
-        wrapper: 'tw--bg-dark-whisper tw--text-white',
-      }
-    },
     minimized: {
       true: 'tw--fixed tw--right-0 tw--bottom-0 tw--max-h-[700px] tw--max-w-md'
     }
@@ -25,13 +15,7 @@ export const layoutBase = /*tw*/ tv({
 
 export const layoutHead = /*tw*/ tv({
   slots: {
-    base: 'tw--flex tw--px-5 tw--py-[11px] tw--shadow-[-1px_2px_5px_0] tw--justify-between',
-  },
-  variants: {
-    theme: {
-      light: 'tw--shadow-light-zephyr-200',
-      dark: 'tw--shadow-dark-zephyr-200',
-    },
+    base: 'tw--flex tw--px-5 tw--py-[11px] tw--shadow-[-1px_2px_5px_0] tw--shadow-zephyr-200',
   },
 });
 

src/components/Link/basic.tsx

@@ -1,11 +1,8 @@
-import { useAppSelector } from '../../hooks';
 import { LinkProps } from '../../interfaces/component';
-import { getConfig } from '../../store/slices/config';
 import { basic as variant } from './variants';
 
 export const Link = ({ text, href, onClick }: LinkProps) => {
-  const { themeId: theme } = useAppSelector(getConfig);
-  const { base } = variant({ theme });
+  const { base } = variant();
 
   return (
     <a

src/components/Link/variants.ts

@@ -2,17 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const basic = /* tw*/ tv({
   slots: {
-    base: 'tw--flex-1 tw--w-full tw--px-[15px] tw--py-[11px] tw--rounded-[20px] tw--border select-none tw--text-center',
-  },
-  variants: {
-    theme: {
-      light: {
-        base: 'tw--inline-block tw--bg-light-glaze tw--text-white',
-      },
-      dark: {
-        base: 'tw--inline-block tw--bg-dark-glazeBg tw--text-dark-glazeText',
-      },
-    },
+    base: 'tw--flex-1 tw--w-full tw--px-[15px] tw--py-[11px] tw--rounded-[20px] tw--border select-none tw--text-center tw--bg-glaze tw--text-whisper',
   },
 });
 

src/components/Overlay/index.tsx

@@ -1,11 +1,8 @@
-import { useAppSelector } from '../../hooks';
 import { OverlayProps } from '../../interfaces/component';
-import { getConfig } from '../../store/slices/config';
 import overlay from './variants';
 
 export const Overlay = ({ children }: OverlayProps) => {
-  const { themeId: theme } = useAppSelector(getConfig);
-  const { base } = overlay({ theme });
+  const { base } = overlay();
   return (
     <div className={base()}>
       {children}

src/components/Overlay/variants.ts

@@ -3,18 +3,8 @@ import { tv } from 'tailwind-variants';
 // eslint-disable-next-line spaced-comment
 export const overlay = /*tw*/ tv({
   slots: {
-    base: 'loader js-payment-loader tw--hidden tw--fixed tw--left-0 tw--top-0 tw--z-[101] tw--m-0 tw--flex tw--h-screen tw--w-screen tw--items-center tw--justify-center tw--px-5'
+    base: 'loader js-payment-loader tw--hidden tw--fixed tw--left-0 tw--top-0 tw--z-[101] tw--m-0 tw--flex tw--h-screen tw--w-screen tw--items-center tw--justify-center tw--px-5 tw--bg-whisper'
   },
-  variants: {
-    theme: {
-      light: {
-        base: 'tw--bg-light-whisper'
-      },
-      dark: {
-        base: 'tw--bg-dark-whisper'
-      }
-    }
-  }
 });
 
 export default overlay;

src/components/Payment/btn.tsx

@@ -8,10 +8,9 @@ import { getConfig } from '../../store/slices/config';
 import { payment as variant } from './variants';
 
 export const PaymentButton = ({ text, onClick, e2e, disabled = false }: PaymentButtonProps) => {
-  const { themeId: theme } = useAppSelector(getConfig);
   const meta = useAppSelector((state) => state.meta);
   const currentEmail = useAppSelector((state) => state.intentions.email.current);
-  const { btn } = variant({ theme });
+  const { btn } = variant();
 
   useEffect(() => {
     const data = {

src/components/Payment/loader.tsx

@@ -1,13 +1,10 @@
-import { useAppSelector } from '../../hooks';
-import { getConfig } from '../../store/slices/config';
 import { loader as variants } from './variants';
 interface PaymentLoaderProps {
   texts?: Array<string>;
   title?: string;
 }
 
 export const PaymentLoader = ({ texts = [], title = '' }: PaymentLoaderProps) => {
-  const { themeId: theme } = useAppSelector(getConfig);
   const {
     wrapper,
     inner,
@@ -19,7 +16,7 @@ export const PaymentLoader = ({ texts = [], title = '' }: PaymentLoaderProps) =>
     spinningTexts,
     filmContainer,
     film
-  } = variants({ theme });
+  } = variants();
   return (
     <div
       className={wrapper()}