refactor: use css var instead of tailwindcss colors

EATSTEAK · Dec 7, 2024 · fd1c6b9 · fd1c6b9
1 parent d579d56
commit fd1c6b9
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 26 deletions.
diff --git a/src/components/ui/CategoryLabel.tsx b/src/components/ui/CategoryLabel.tsx
@@ -12,7 +12,11 @@ export const CategoryLabel: Component<{ category: string }> = (props) => {
       fallback={<label class="category-label">Uncategorized</label>}
     >
       <a
-        class={`category-label bg-category-${category.id}-bg dark:bg-category-${category.id}-bg-dark text-category-${category.id}-text dark:text-category-${category.id}-text-dark`}
+        class={`category-label`}
+        style={{
+          "background-color": `var(--category-${category.id}-bg)`,
+          color: `var(--category-${category.id}-text)`,
+        }}
         href={`/category/${category.id}`}
         aria-label={category.name}
       >

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -72,6 +72,7 @@ const toc = buildToc(headings);
         description={description}
         image={`/card/og/${slug}.png`}
 >
+    <div class="top-0 left-0 absolute w-full h-80 -z-10"></div>
     <main class="flex flex-col w-full">
         <section
                 class="self-center flex justify-center items-stretch w-full p-8 xl:p-0"

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -2,6 +2,7 @@
 import BaseHead from "@components/shell/BaseHead.astro";
 import {Footer} from "@components/shell/Footer";
 import Header from "@components/shell/Header.astro";
+import "@styles/theme.css";
 
 const {
     title,

diff --git a/src/pages/category/[...id]/[...page].astro b/src/pages/category/[...id]/[...page].astro
@@ -43,12 +43,20 @@ const {page, category} = Astro.props as Props;
     <main class="flex flex-col items-stretch justify-start">
         <GrillContainer parentClassOverride="relative h-fit">
             <h2
-                    class={`px-2 uppercase bg-category-${category.id}-bg text-category-${category.id}-text dark:bg-category-${category.id}-bg-dark dark:text-category-${category.id}-text-dark`}
+                    class="px-2 uppercase"
+                    style={{
+                        "background-color": `var(--category-${category.id}-bg)`,
+                        color: `var(--category-${category.id}-text)`,
+                    }}
             >
                 {category.name}
             </h2>
             <p
-                    class={`px-2 bg-category-${category.id}-bg text-category-${category.id}-text dark:bg-category-${category.id}-bg-dark dark:text-category-${category.id}-text-dark`}
+                    class="px-2"
+                    style={{
+                        "background-color": `var(--category-${category.id}-bg)`,
+                        color: `var(--category-${category.id}-text)`,
+                    }}
             >
                 {category.description}
             </p>

diff --git a/src/pages/category/index.astro b/src/pages/category/index.astro
@@ -46,7 +46,11 @@ const topics = Object.keys(getTopics(posts));
                     categories.map((category) => (
                             <a
                                     href={`/category/${category.id}`}
-                                    class={`transition-all hover:scale-[1.01] focus:scale-[1.01] border-2 p-4 border-slate-700 dark:border-white bg-category-${category.id}-bg text-category-${category.id}-text dark:bg-category-${category.id}-bg-dark dark:text-category-${category.id}-text-dark basis-full lg:basis-[calc(50%-0.5rem)]`}
+                                    class={`transition-all hover:scale-[1.01] focus:scale-[1.01] border-2 p-4 border-slate-700 dark:border-white basis-full lg:basis-[calc(50%-0.5rem)]`}
+                                    style={{
+                                        "background-color": `var(--category-${category.id}-bg)`,
+                                        color: `var(--category-${category.id}-text)`,
+                                    }}
                             >
                                 <h2 class="uppercase">{category.name}</h2>
                                 <p>{category.description}</p>

diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -0,0 +1,17 @@
+:not(.dark) {
+    --category-rust-bg: #991b1b;
+    --category-rust-text: #fff;
+    --category-web-bg: #0e7490;
+    --category-web-text: #fff;
+    --category-uncategorized-bg: #1f2937;
+    --category-uncategorized-text: #fff;
+}
+
+.dark {
+    --category-rust-bg: #991b1b;
+    --category-rust-text: #fff;
+    --category-web-bg: #0e7490;
+    --category-web-text: #fff;
+    --category-uncategorized-bg: #1f2937;
+    --category-uncategorized-text: #fff;
+}
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -1,27 +1,6 @@
 const defaultTheme = require("tailwindcss/defaultTheme");
 const { CATEGORIES } = require("./src/consts");
 
-const categoryColors = Object.fromEntries(
-  Object.values(CATEGORIES).flatMap((category) => [
-    [
-      `category-${category.id}-bg`,
-      {
-        DEFAULT: category.color.light.bg,
-        light: category.color.light.bg,
-        dark: category.color.dark.bg,
-      },
-    ],
-    [
-      `category-${category.id}-text`,
-      {
-        DEFAULT: category.color.light.text,
-        light: category.color.light.text,
-        dark: category.color.dark.text,
-      },
-    ],
-  ])
-);
-
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
@@ -33,7 +12,6 @@ export default {
         sans: ['"Noto Sans KR"', ...defaultTheme.fontFamily.sans],
         mono: ['"MonoplexKR"', ...defaultTheme.fontFamily.mono],
       },
-      colors: categoryColors,
     },
   },
   plugins: [],