From 1ec56ef150b772dd5b60a86cb9bac8116a8a2e77 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Thu, 1 May 2025 21:55:39 +0200
Subject: [PATCH] fix: :lipstick: Fix broken colors in some parts of the UI

The hsl() wrapper was no longer needed with tailwind v4
---
 components/editor/content.vue          | 2 +-
 components/graphics/square-pattern.vue | 2 +-
 components/ui/sidebar/index.ts         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/editor/content.vue b/components/editor/content.vue
index a23c6d9..52d046e 100644
--- a/components/editor/content.vue
+++ b/components/editor/content.vue
@@ -75,7 +75,7 @@ onUnmounted(() => {
 @reference "../../styles/index.css";
 
 .tiptap p.is-editor-empty:first-child::before {
-    color: hsl(var(--muted-foreground));
+    color: var(--muted-foreground);
     content: attr(data-placeholder);
     float: left;
     height: 0;
diff --git a/components/graphics/square-pattern.vue b/components/graphics/square-pattern.vue
index d2a8f51..451a78a 100644
--- a/components/graphics/square-pattern.vue
+++ b/components/graphics/square-pattern.vue
@@ -1,5 +1,5 @@
 <template>
-    <svg class="absolute inset-x-0 top-0 h-full w-full stroke-primary/[0.07] [mask-image:radial-gradient(100%_100%_at_top_right,hsl(var(--primary-foreground)),transparent)] pointer-events-none"
+    <svg class="absolute inset-x-0 top-0 h-full w-full stroke-primary/[0.07] [mask-image:radial-gradient(100%_100%_at_top_right,var(--primary-foreground),transparent)] pointer-events-none"
         aria-hidden="true">
         <defs>
             <pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1"
diff --git a/components/ui/sidebar/index.ts b/components/ui/sidebar/index.ts
index 0bde8fe..bf6cb68 100644
--- a/components/ui/sidebar/index.ts
+++ b/components/ui/sidebar/index.ts
@@ -43,7 +43,7 @@ export const sidebarMenuButtonVariants = cva(
                 default:
                     "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                 outline:
-                    "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+                    "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hovfer:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
             },
             size: {
                 default: "h-8 text-sm",