refactor: Enhance Select component color handling with dynamic CSS variable retrieval

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Inputs/Input/index.tsx

@@ -56,7 +56,6 @@ const Input: FC<IInputProps> = forwardRef<HTMLInputElement, IInputProps>(
     return (
       <div className={classNames(inputWrapperClassName)}>
         <InputHeader {...inputHeaderProps} />
-        dsadsa
         <div className='yl:flex yl:flex-col'>
           <input
             ref={ref}

src/Components/Inputs/Select/styles.ts

@@ -2,34 +2,43 @@ import { CSSObjectWithLabel, OptionProps, StylesConfig } from "react-select";
 
 import { Option } from "./types";
 
-/**
- * @url https://react-select.com/styles
- */
+const getCssVar = (varName: string): string => {
+  return getComputedStyle(document.documentElement)
+    .getPropertyValue(varName)
+    .trim();
+};
 
-const color = "oklch(0.85 0.02 240)";
+const text = getCssVar("--color-text") || "oklch(0.85 0.02 240)";
+const background = getCssVar("--color-background") || "oklch(0.1 0.02 240)";
+const border = getCssVar("--color-border") || "oklch(0.3 0.02 240)";
+const muted = getCssVar("--color-muted") || "oklch(0.5 0.05 240)";
+const primary = getCssVar("--color-primary") || "oklch(0.8 0.2 80)";
+const secondary = getCssVar("--color-secondary") || "oklch(0.65 0.05 270)";
+const error = getCssVar("--color-error") || "oklch(0.6 0.2 30)";
+const accent = getCssVar("--color-accent") || "oklch(0.6 0.2 250)";
 
 export const styles: StylesConfig<Option | undefined, false | true> = {
   input: (base: CSSObjectWithLabel) => ({
     ...base,
     outline: "none",
     boxShadow: "none",
     padding: "4px 0",
-    color,
+    color: text,
     "input:focus": {
       boxShadow: "none"
     }
   }),
   control: (base: CSSObjectWithLabel) => {
     return {
       ...base,
-      backgroundColor: "oklch(0.1 0.02 240)",
+      backgroundColor: background,
       borderWidth: "2px",
-      borderColor: "oklch(0.3 0.02 240)",
+      borderColor: border,
       borderRadius: 6,
       boxShadow: "none",
-      color,
+      color: text,
       "&:hover": {
-        borderColor: "oklch(0.3 0.02 240)"
+        borderColor: border
       }
     };
   },
@@ -38,51 +47,49 @@ export const styles: StylesConfig<Option | undefined, false | true> = {
     props: OptionProps<Option | undefined, false | true>
   ) => ({
     ...base,
-    backgroundColor: props.isDisabled
-      ? "oklch(0.5 0.05 240)"
-      : "oklch(0.1 0.02 240)",
-    color: props.isDisabled ? "oklch(0.5 0.05 240)" : color,
+    backgroundColor: props.isDisabled ? muted : background,
+    color: props.isDisabled ? muted : text,
     cursor: props.isDisabled ? "not-allowed" : "default",
     "&:active": {
-      backgroundColor: !props.isDisabled ? "oklch(0.6 0.2 250)" : undefined,
-      color: !props.isDisabled ? color : undefined
+      backgroundColor: !props.isDisabled ? primary : undefined,
+      color: !props.isDisabled ? background : undefined
     }
   }),
   multiValueRemove: (base: CSSObjectWithLabel) => {
     return {
       ...base,
-      color: "oklch(0.65 0.05 270)",
+      color: secondary,
       cursor: "pointer",
       "&:hover": {
-        color: color,
-        backgroundColor: "oklch(0.6 0.2 30)"
+        color: text,
+        backgroundColor: error
       }
     };
   },
   multiValue: (base: CSSObjectWithLabel) => {
     return {
       ...base,
-      backgroundColor: "oklch(0.1 0.02 240)",
-      color
+      backgroundColor: background,
+      color: text
     };
   },
   singleValue: (base: CSSObjectWithLabel) => {
     return {
       ...base,
-      backgroundColor: "oklch(0.1 0.02 240)",
-      color
+      backgroundColor: background,
+      color: text
     };
   },
   multiValueLabel: (base: CSSObjectWithLabel) => {
     return {
       ...base,
-      color
+      color: text
     };
   },
   placeholder: (base: CSSObjectWithLabel) => {
     return {
       ...base,
-      color: "oklch(0.5 0.05 240)"
+      color: muted
     };
   },
   valueContainer: (base: CSSObjectWithLabel) => {
@@ -97,28 +104,28 @@ export const styles: StylesConfig<Option | undefined, false | true> = {
   menu: (base: CSSObjectWithLabel) => {
     return {
       ...base,
-      backgroundColor: "oklch(0.1 0.02 240)",
-      color,
+      backgroundColor: background,
+      color: text,
       boxShadow: "none",
       borderWidth: "2px",
-      borderColor: "oklch(0.3 0.02 240)",
+      borderColor: border,
       borderRadius: 0,
       zIndex: 99999999
     };
   },
   indicatorSeparator: (base: CSSObjectWithLabel) => {
     return {
       ...base,
-      backgroundColor: "oklch(0.3 0.02 240)"
+      backgroundColor: border
     };
   },
   clearIndicator: (base: CSSObjectWithLabel) => {
     return {
       ...base,
-      color: "oklch(0.3 0.02 240)",
+      color: border,
       cursor: "pointer",
       "&:hover": {
-        color: "oklch(0.6 0.2 30)"
+        color: error
       }
     };
   },
@@ -129,18 +136,18 @@ export const styles: StylesConfig<Option | undefined, false | true> = {
       width: "10px"
     },
     "::-webkit-scrollbar-track": {
-      background: "oklch(0.1 0.02 240)"
+      background: background
     },
     "::-webkit-scrollbar-thumb": {
-      background: "oklch(0.3 0.02 240)"
+      background: border
     },
     "::-webkit-scrollbar-thumb:hover": {
-      background: "oklch(0.6 0.2 250)"
+      background: accent
     }
   }),
   groupHeading: (base: CSSObjectWithLabel) => ({
     ...base,
-    color: "oklch(0.5 0.05 240)",
+    color: muted,
     padding: "5px 10px",
     fontSize: "0.75rem"
   })

src/tailwind.css

@@ -15,7 +15,6 @@
 }
 
 @theme {
-  /* Colors */
   --color-primary: oklch(0.8 0.2 80);
   --color-secondary: oklch(0.65 0.05 270);
   --color-background: oklch(0.1 0.02 240);
@@ -29,7 +28,6 @@
   --color-error: oklch(0.6 0.2 30);
   --color-info: oklch(0.6 0.2 250);
 
-  /* Animations */
   --animate-height-animation: height-animation 100ms
     cubic-bezier(0.3, 0.31, 0.59, 0.7);