refactor(ui): allow all tailwind css colors

apps/storybook/stories/Colors.mdx

@@ -6,7 +6,7 @@ import tailwindConfig from "@repo/config-tailwind"
 <Title>Colors</Title>
 
 <ColorPalette>
-  {Object.entries(tailwindConfig.theme.colors).map(
+  {Object.entries(tailwindConfig.theme.extend.colors).map(
     ([colorName, colorValue]) => {
       const colors = {}
 

packages/config-tailwind/styles.css

@@ -9,6 +9,10 @@
 @tailwind utilities;
 
 @layer base {
+  * {
+    min-width: 0;
+  }
+
   b,
   strong {
     @apply font-semibold;
@@ -36,11 +40,11 @@
     @apply italic tracking-wider;
   }
   blockquote {
-    @apply border-gray border-l-4 pl-3 italic;
+    @apply border-gray-lighter border-l-4 pl-3 italic;
   }
 
   kbd {
-    @apply bg-gray rounded-md px-2 dark:text-black;
+    @apply bg-gray-lighter rounded-md px-2 dark:text-black;
   }
 
   mark {
@@ -82,7 +86,7 @@ body {
 }
 
 .prose {
-  @apply dark:text-gray !max-w-5xl scroll-smooth text-black;
+  @apply dark:text-gray-lighter !max-w-5xl scroll-smooth text-black;
 }
 
 .prose p {
@@ -107,7 +111,7 @@ body {
 }
 
 .prose strong {
-  @apply dark:text-gray text-black;
+  @apply dark:text-gray-lighter text-black;
 }
 
 .prose h2,

packages/config-tailwind/tailwind.config.js

@@ -3,39 +3,34 @@ import { fontFamily } from "tailwindcss/defaultTheme"
 
 /** @type {Omit<import('tailwindcss').Config, "content">} */
 const config = {
-  darkMode: "class",
+  darkMode: "selector",
   theme: {
-    colors: {
-      primary: {
-        DEFAULT: "#0056b3",
-        dark: "#00aeff",
-      },
-      background: {
-        DEFAULT: "#fff",
-        dark: "#181818",
-      },
-      white: "#fff",
-      black: "#000",
-      gray: "#d1d5db",
-      "gray-darker": {
-        DEFAULT: "#4b5563",
-        dark: "#9ca3af",
-      },
-      yellow: "#fef08a",
-      transparent: "transparent",
-      inherit: "inherit",
-      current: "currentColor",
-    },
-    boxShadow: {
-      dark: "0px 0px 2px 2px rgba(0, 0, 0, 0.25)",
-      light: "0px 0px 2px 2px rgba(0, 0, 0, 0.10)",
-      darkFlag: "0px 1px 10px hsla(0, 0%, 100%, 0.2)",
-      lightFlag: "0px 1px 10px rgba(0, 0, 0, 0.25)",
-    },
-    fontFamily: {
-      sans: ["'Montserrat'", ...fontFamily.sans],
-    },
     extend: {
+      colors: {
+        primary: {
+          DEFAULT: "#0056b3",
+          dark: "#00aeff",
+        },
+        background: {
+          DEFAULT: "#fff",
+          dark: "#181818",
+        },
+        "gray-lighter": "#d1d5db",
+        "gray-darker": {
+          DEFAULT: "#4b5563",
+          dark: "#9ca3af",
+        },
+        yellow: "#fef08a",
+      },
+      boxShadow: {
+        dark: "0px 0px 2px 2px rgba(0, 0, 0, 0.25)",
+        light: "0px 0px 2px 2px rgba(0, 0, 0, 0.10)",
+        darkFlag: "0px 1px 10px hsla(0, 0%, 100%, 0.2)",
+        lightFlag: "0px 1px 10px rgba(0, 0, 0, 0.25)",
+      },
+      fontFamily: {
+        sans: ["'Montserrat'", ...fontFamily.sans],
+      },
       typography: {
         DEFAULT: {
           css: {

packages/ui/src/Design/Button/Button.tsx

@@ -12,7 +12,7 @@ const buttonVariants = cva({
     variant: {
       solid: "bg-primary hover:bg-primary/80 text-white",
       outline:
-        "dark:border-primary-dark/60 dark:text-primary-dark dark:hover:border-primary-dark border-primary/60 text-primary hover:border-primary hover:bg-gray border bg-transparent dark:hover:bg-transparent",
+        "dark:border-primary-dark/60 dark:text-primary-dark dark:hover:border-primary-dark border-primary/60 text-primary hover:border-primary hover:bg-gray-lighter border bg-transparent dark:hover:bg-transparent",
     },
     size: {
       small: "h-9 rounded-md px-3",

packages/ui/src/Home/About/AboutDescription.tsx

@@ -8,7 +8,7 @@ export const AboutDescription: React.FC<AboutDescriptionProps> = () => {
   const t = useTranslations()
 
   return (
-    <div className="dark:text-gray my-6 max-w-md text-center text-black">
+    <div className="dark:text-gray-lighter my-6 max-w-md text-center text-black">
       <Typography as="p" variant="text1" className="my-6">
         {t.rich("home.about.description", {
           strong: (children) => {

packages/ui/src/Home/About/AboutList/AboutItem.tsx

@@ -12,7 +12,7 @@ export const AboutItem: React.FC<AboutItemProps> = (props) => {
       <strong className="w-24 text-sm text-black lg:w-32 dark:text-white">
         {label}
       </strong>
-      <span className="dark:text-gray block text-sm font-normal text-black">
+      <span className="dark:text-gray-lighter block text-sm font-normal text-black">
         {link != null ? (
           <a className="hover:underline" href={link}>
             {value}

packages/ui/src/Home/Interests/InterestItem.tsx

@@ -17,7 +17,7 @@ export const InterestItem: React.FC<InterestItemProps> = (props) => {
       <Typography
         as="p"
         variant="text1"
-        className="dark:text-gray my-2 text-black"
+        className="dark:text-gray-lighter my-2 text-black"
       >
         {description}
       </Typography>