Attempt to make color schema better 💀

Author: Rikthepixel

Diff for: src/components/controls/Select.tsx

@@ -12,11 +12,11 @@ import ChevronDownIcon from "@heroicons/react/24/solid/ChevronDownIcon";
 export const style = inputStyle;
 export type VariantProps = InputVariantProps;
 
-export const containerStyle = cva("absolute border-2  bg-white left-1/2 -translate-x-1/2 top-full rounded-lg min-w-fit w-full overflow-hidden translate-y-1 z-50", {
+export const containerStyle = cva("absolute border-2 left-1/2 -translate-x-1/2 top-full rounded-lg min-w-fit w-full overflow-hidden translate-y-1 z-50", {
   variants: {
     color: {
-      primary: "border-primary",
-      secondary: "border-secondary"
+      primary: "border-primary bg-fill text-fill-contrast",
+      secondary: "border-secondary bg-fill text-fill-contrast"
     }
   }
 });

Diff for: src/components/layout/NavDropdown.tsx

@@ -56,7 +56,7 @@ const NavDropdown = ({ summary, children }: NavDropdownProps) => {
           height="1em"
         />
       </summary>
-      <div ref={containerRef} className="absolute inset-x-0 flex flex-col gap-2 px-4 py-2 bg-white border-2 rounded-lg group/dropdown border-primary md:w-fit" data-in-group>
+      <div ref={containerRef} className="absolute inset-x-0 flex flex-col gap-2 px-4 py-2 border-2 rounded-lg bg-fill text-fill-contrast group/dropdown border-primary md:w-fit" data-in-group>
         {children}
       </div>
     </details>

Diff for: src/components/pages/blog/ArticleBrief.tsx

@@ -50,7 +50,7 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, imgLoading, readtime, te
 
   return (
     <motion.li
-      className="origin-center flex flex-col flex-1 gap-4 mx-0 rounded-lg motion-safe:transition-[margin-inline] motion-safe:duration-500 sm:mx-16 md:mx-0 bg-primary-300"
+      className="origin-center flex flex-col flex-1 gap-4 mx-0 rounded-lg motion-safe:transition-[margin-inline] motion-safe:duration-500 sm:mx-16 md:mx-0 bg-primary image-dots from-primary-light border-2 border-primary-light"
       variants={LIST_ANIM}
       initial="in"
       animate="anim"

Diff for: tailwind.config.js

@@ -17,15 +17,14 @@ module.exports = {
       colors: {
         primary: {
           DEFAULT: "#127bcc",
-          300: "#127bcc",
-          light: "#127bcc",
-          dark: "#127bcc",
+          light: "#40a2ed",
+          dark: "#0e62a3",
           contrast: "#FFF"
         },
         secondary: {
-          DEFAULT: "#127bcc",
-          light: "#127bcc",
-          dark: "#127bcc",
+          DEFAULT: "#9c58ef",
+          light: "#8a41e2",
+          dark: "#5106ad",
           contrast: "#FFF"
         },
         fill: {