From 043c69112b1789a10d5dfecdea31fcba1372321d Mon Sep 17 00:00:00 2001
From: Theo Ribbi <theo@ribbi.ch>
Date: Mon, 1 Sep 2025 23:09:21 +0200
Subject: [PATCH] feat(theme): add muted and toggle colors to theme
 configuration

Add new color variables for muted and toggle components to improve theme customization options. Update existing color variables to use consistent naming convention.
---
 app/(site)/docs/installation/page.tsx | 56 +++++++++++++++++++--------
 1 file changed, 39 insertions(+), 17 deletions(-)

diff --git a/app/(site)/docs/installation/page.tsx b/app/(site)/docs/installation/page.tsx
index 162c950..449423f 100644
--- a/app/(site)/docs/installation/page.tsx
+++ b/app/(site)/docs/installation/page.tsx
@@ -232,6 +232,10 @@ module.exports = {
           DEFAULT: "rgb(var(--color-foreground) / <alpha-value>)",
           muted: "rgb(var(--color-foreground-muted) / <alpha-value>)",
         },
+        muted: {
+          DEFAULT: "rgb(var(--color-muted) / <alpha-value>)",
+          foreground: "rgb(var(--color-muted-foreground) / <alpha-value>)",
+        },
         destructive: {
           DEFAULT: "rgb(var(--color-destructive) / <alpha-value>)",
           foreground: "rgb(var(--color-destructive-foreground) / <alpha-value>)",
@@ -249,27 +253,31 @@ module.exports = {
           foreground: "rgb(var(--color-info-foreground) / <alpha-value>)",
         },
         card: {
-          DEFAULT: "rgb(var(--card-rgb) / <alpha-value>)",
-          foreground: "rgb(var(--card-foreground-rgb) / <alpha-value>)",
+          DEFAULT: "rgb(var(--color-card) / <alpha-value>)",
+          foreground: "rgb(var(--color-card-foreground) / <alpha-value>)",
         },
         popover: {
-          DEFAULT: "rgb(var(--popover-rgb) / <alpha-value>)",
-          foreground: "rgb(var(--popover-foreground-rgb) / <alpha-value>)",
+          DEFAULT: "rgb(var(--color-popover) / <alpha-value>)",
+          foreground: "rgb(var(--color-popover-foreground) / <alpha-value>)",
         },
         accent: {
-          DEFAULT: "rgb(var(--accent-rgb) / <alpha-value>)",
-          foreground: "rgb(var(--accent-foreground-rgb) / <alpha-value>)",
+          DEFAULT: "rgb(var(--color-accent) / <alpha-value>)",
+          foreground: "rgb(var(--color-accent-foreground) / <alpha-value>)",
         },
         border: {
-          DEFAULT: "rgb(var(--border-rgb) / <alpha-value>)",
-          foreground: "rgb(var(--border-foreground-rgb) / <alpha-value>)",
+          DEFAULT: "rgb(var(--border) / <alpha-value>)",
+          foreground: "rgb(var(--border-foreground) / <alpha-value>)",
         },
         input: {
-          DEFAULT: "rgb(var(--input-rgb) / <alpha-value>)",
-          foreground: "rgb(var(--input-foreground-rgb) / <alpha-value>)",
+          DEFAULT: "rgb(var(--input) / <alpha-value>)",
+          foreground: "rgb(var(--input-foreground) / <alpha-value>)",
+        },
+        
+        toggle: {
+          active: "rgb(var(--toggle-active) / <alpha-value>)",
+          "active-foreground": "rgb(var(--toggle-active-foreground) / <alpha-value>)",
+          border: "rgb(var(--toggle-border) / <alpha-value>)",
         },
-        ring: "rgb(var(--ring-rgb) / <alpha-value>)",
-        radius: "var(--radius)",
       },
     },
   },
@@ -287,6 +295,8 @@ module.exports = {
           "--color-warning": "234 179 8",
           "--color-info": "59 130 246",
           "--color-muted": "115 115 115",
+          "--toggle-active": "45 45 45",
+          "--toggle-border": "229 231 235",
         },
       });
     },
@@ -326,9 +336,11 @@ export const themes = {
       "--color-secondary":    "45 45 45",
       "--color-secondary-foreground": "255 255 255",
       "--color-foreground-muted": "115 115 115",
+      "--color-muted-foreground": "115 115 115",
+      "--color-muted":        "240 240 240", 
 
       // Accent colors
-      "--color-accent":       "45 45 45",
+      "--color-accent":       "145 145 145",
       "--color-accent-foreground": "255 255 255",
 
       // Status colors
@@ -350,6 +362,11 @@ export const themes = {
       "--input":              "229 231 235",
       "--input-foreground": "13 13 13",
       "--ring":               "13 13 13",
+      
+      // Toggle specific colors
+      "--toggle-active":      "45 45 45",
+      "--toggle-active-foreground": "255 255 255",
+      "--toggle-border":      "229 231 235",
     }),
 
     dark: vars({
@@ -368,7 +385,9 @@ export const themes = {
 
       // Secondary colors
       "--color-secondary":    "58 58 58",
-      "--color-muted":        "163 163 163",
+      "--color-muted":        "75 85 99",
+      "--color-foreground-muted": "209 213 219",
+      "--color-muted-foreground": "209 213 219", 
 
       // Accent colors
       "--color-accent":       "58  58  58",
@@ -388,11 +407,14 @@ export const themes = {
       "--color-info-foreground": "250 250 250",
 
       // Borders, inputs and "rings"
-      "--border":             " 38  38  38",
-      "--border-foreground": "250 250 250",
+      "--border":             "75 85 99", 
       "--input":              " 38  38  38",
-      "--input-foreground": "250 250 250",
       "--ring":               "212 212 212",
+      
+      // Toggle specific colors
+      "--toggle-active":      "120 120 120",
+      "--toggle-active-foreground": "250 250 250",
+      "--toggle-border":      "100 100 100",
     }),
 } as const;
 `}