From 4c69d5a8522fecbec249f2d9be4af819fe26e479 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20LUDWIG?= Date: Sat, 9 Nov 2024 20:14:30 +0100 Subject: [PATCH] refactor(ui): allow all tailwind css colors --- apps/storybook/stories/Colors.mdx | 2 +- packages/config-tailwind/styles.css | 12 ++-- packages/config-tailwind/tailwind.config.js | 57 +++++++++---------- packages/ui/src/Design/Button/Button.tsx | 2 +- .../ui/src/Home/About/AboutDescription.tsx | 2 +- .../ui/src/Home/About/AboutList/AboutItem.tsx | 2 +- .../ui/src/Home/Interests/InterestItem.tsx | 2 +- 7 files changed, 39 insertions(+), 40 deletions(-) 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 ( -
+
{t.rich("home.about.description", { strong: (children) => { diff --git a/packages/ui/src/Home/About/AboutList/AboutItem.tsx b/packages/ui/src/Home/About/AboutList/AboutItem.tsx index 3e5dbb7..ea8b933 100644 --- a/packages/ui/src/Home/About/AboutList/AboutItem.tsx +++ b/packages/ui/src/Home/About/AboutList/AboutItem.tsx @@ -12,7 +12,7 @@ export const AboutItem: React.FC = (props) => { {label} - + {link != null ? ( {value} diff --git a/packages/ui/src/Home/Interests/InterestItem.tsx b/packages/ui/src/Home/Interests/InterestItem.tsx index a68e30b..4904081 100644 --- a/packages/ui/src/Home/Interests/InterestItem.tsx +++ b/packages/ui/src/Home/Interests/InterestItem.tsx @@ -17,7 +17,7 @@ export const InterestItem: React.FC = (props) => { {description}