From 41db4a574cd0547473b3ad9bf43a29b9a3bc2b4e Mon Sep 17 00:00:00 2001
From: Norbert Melzer <timmelzer@gmail.com>
Date: Sat, 31 May 2025 16:39:34 +0200
Subject: [PATCH] fix: update Catppuccin class names to use ctp- prefix

This commit standardizes all Catppuccin color class references to use the
configured 'ctp-' prefix. Previously, some classes were using unprefixed
color names (like 'text-text', 'border-surface2') which may cause issues
with Tailwind CSS 4 compatibility.

- Updated class names in layout components
- Standardized border color references
- Maintained CSS variable approach for dynamic color mixing
---
 src/components/NavBox.astro         |  2 +-
 src/components/PaginateButton.astro |  6 +++---
 src/layouts/NobbzDev.astro          | 20 ++++++++++----------
 src/scripts/filename-transformer.ts |  6 +++---
 src/styles/base.css                 |  2 +-
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/NavBox.astro b/src/components/NavBox.astro
index 63ffce8..bd72fda 100644
--- a/src/components/NavBox.astro
+++ b/src/components/NavBox.astro
@@ -17,7 +17,7 @@ const class_ = Astro.props.class ?? "";
   id="side-nav"
   class:list={[
     "border-4",
-    "border-surface2",
+    "border-ctp-surface2",
     "m-1",
     "p-1",
     "rounded-[12px]",
diff --git a/src/components/PaginateButton.astro b/src/components/PaginateButton.astro
index 2d29fdd..27bc097 100644
--- a/src/components/PaginateButton.astro
+++ b/src/components/PaginateButton.astro
@@ -16,13 +16,13 @@ const active = !!href;
 <div
   class:list={[
     "border-2",
-    "border-surface2",
+    "border-ctp-surface2",
     "rounded-md",
     "p-1",
     "m-1",
     active
-      ? "bg-crust hover:bg-surface2 hover:shadow-xl hover:shadow-base text-blue"
-      : "bg-overlay0 text-overlay2 opacity-40",
+      ? "bg-ctp-crust hover:bg-ctp-surface2 hover:shadow-xl hover:shadow-ctp-base text-ctp-blue"
+      : "bg-ctp-overlay0 text-ctp-overlay2 opacity-40",
   ]}
 >
   <a href={href}><slot /></a>
diff --git a/src/layouts/NobbzDev.astro b/src/layouts/NobbzDev.astro
index f9e8f9d..b8795e9 100644
--- a/src/layouts/NobbzDev.astro
+++ b/src/layouts/NobbzDev.astro
@@ -22,14 +22,14 @@ import "../styles/base.css";
     class:list={[
       "mocha",
       "bg-gradient-to-b",
-      "from-base",
-      "to-crust",
+      "from-ctp-base",
+      "to-ctp-crust",
       "min-h-screen",
       "bg-fixed",
       "overflow-y-scroll",
       "[&::-webkit-scrollbar]:w-2",
-      "[&::-webkit-scrollbar-track]:bg-surface2",
-      "[&::-webkit-scrollbar-thumb]:bg-surface0",
+      "[&::-webkit-scrollbar-track]:bg-ctp-surface2",
+      "[&::-webkit-scrollbar-thumb]:bg-ctp-surface0",
     ]}
   >
     <div
@@ -39,21 +39,21 @@ import "../styles/base.css";
         "m-auto",
         "min-h-screen",
         "justify-center",
-        "text-text",
+        "text-ctp-text",
       ]}
     >
       <div
         class:list={[
           "flex-none",
           "border-4",
-          "border-surface2",
+          "border-ctp-surface2",
           "rounded-[12px]",
           "p-1",
           "m-1",
         ]}
       >
-        <h1 class:list={["text-4xl", "text-text", "font-extrabold"]}>
-          NobbZ<span class="text-xs text-overlay1">.dev</span>
+        <h1 class:list={["text-4xl", "text-ctp-text", "font-extrabold"]}>
+          NobbZ<span class="text-xs text-ctp-overlay1">.dev</span>
         </h1>
       </div>
       <div
@@ -73,7 +73,7 @@ import "../styles/base.css";
             "flex-none",
             "w-1/1",
             "border-4",
-            "border-surface2",
+            "border-ctp-surface2",
             "p-1",
             "m-1",
             "rounded-[12px]",
@@ -91,7 +91,7 @@ import "../styles/base.css";
           "flex-none",
           "w-1/1",
           "border-4",
-          "border-surface2",
+          "border-ctp-surface2",
           "m-1",
           "p-1",
           "rounded-[12px]",
diff --git a/src/scripts/filename-transformer.ts b/src/scripts/filename-transformer.ts
index 1e8ea10..41490e5 100644
--- a/src/scripts/filename-transformer.ts
+++ b/src/scripts/filename-transformer.ts
@@ -28,13 +28,13 @@ export function filenameTransformer(): ShikiTransformer {
           "before:left-0",
           "before:w-full",
           "before:bg-gradient-to-b",
-          "before:from-crust",
-          "before:to-base",
+          "before:from-ctp-crust",
+          "before:to-ctp-base",
           "before:rounded-t",
           "before:border-t-2",
           "before:border-l-2",
           "before:border-r-2",
-          "before:border-base",
+          "before:border-ctp-base",
           "before:border-solid",
           "before:font-bold",
           "before:px-4",
diff --git a/src/styles/base.css b/src/styles/base.css
index 77d0c18..efa4535 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -42,7 +42,7 @@ body {
       @apply text-[color-mix(in_srgb,var(--text-color),var(--highlight-color)_60%)];
     }
     h6 {
-      @apply text-base;
+      @apply text-ctp-base;
       @apply font-bold;
       @apply text-[color-mix(in_srgb,var(--text-color),var(--highlight-color)_75%)];
     }
-- 
2.51.2