diff --git a/apps/storybook/stories/Colors.mdx b/apps/storybook/stories/Colors.mdx
index 0ca1ca2..af8dada 100644
--- a/apps/storybook/stories/Colors.mdx
+++ b/apps/storybook/stories/Colors.mdx
@@ -6,7 +6,7 @@ import tailwindConfig from "@repo/config-tailwind"
Colors
- {Object.entries(tailwindConfig.theme.colors).map(
+ {Object.entries(tailwindConfig.theme.extend.colors).map(
([colorName, colorValue]) => {
const colors = {}
diff --git a/packages/config-tailwind/styles.css b/packages/config-tailwind/styles.css
index 1764482..6c006fb 100644
--- a/packages/config-tailwind/styles.css
+++ b/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,
diff --git a/packages/config-tailwind/tailwind.config.js b/packages/config-tailwind/tailwind.config.js
index f657612..57e3aa2 100644
--- a/packages/config-tailwind/tailwind.config.js
+++ b/packages/config-tailwind/tailwind.config.js
@@ -3,39 +3,34 @@ import { fontFamily } from "tailwindcss/defaultTheme"
/** @type {Omit} */
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: {
diff --git a/packages/ui/src/Design/Button/Button.tsx b/packages/ui/src/Design/Button/Button.tsx
index 7607d25..d3b8e45 100644
--- a/packages/ui/src/Design/Button/Button.tsx
+++ b/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",
diff --git a/packages/ui/src/Home/About/AboutDescription.tsx b/packages/ui/src/Home/About/AboutDescription.tsx
index 750671f..85d6ab5 100644
--- a/packages/ui/src/Home/About/AboutDescription.tsx
+++ b/packages/ui/src/Home/About/AboutDescription.tsx
@@ -8,7 +8,7 @@ export const AboutDescription: React.FC = () => {
const t = useTranslations()
return (
-