refactor: use obsidian css variable instead of shadcn/ui default css …

…variable.
logancyang · Dec 4, 2024 · e031a19 · e031a19
1 parent e684a45
commit e031a19
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 1,401 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 # vscode
-.vscode 
+.vscode
 
 # Intellij
 *.iml
@@ -11,6 +11,7 @@ node_modules
 # Don't include the compiled main.js file in the repo.
 # They should be uploaded to GitHub releases instead.
 main.js
+styles.css
 
 # Exclude sourcemaps
 *.map

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -4,57 +4,65 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
-    --ring: 215 20.2% 65.1%;
-    --radius: 0.5rem;
-  }
+    /*--background: hsl(0 0% 100%);*/
+    --background: var(--background-primary);
 
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-    --ring: 216 34% 17%;
-  }
-}
+    /*--foreground: hsl(222.2 47.4% 11.2%);*/
+    --foreground: var(--text-normal);
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply font-sans antialiased bg-background text-foreground;
+    /*--muted: hsl(210 40% 96.1%);*/
+    --muted: var(--background-secondary-alt);
+
+    /*--muted-foreground: hsl(215.4 16.3% 46.9%);*/
+    --muted-foreground: var(--text-muted);
+
+    /*--popover: hsl(0 0% 100%);*/
+    --popover: var(--background-secondary);
+
+    /*--popover-foreground: hsl(222.2 47.4% 11.2%);*/
+    --popover-foreground: var(--text-normal);
+
+    /*--border: hsl(214.3 31.8% 91.4%);*/
+    --border: var(--background-modifier-border);
+
+    /*--input: hsl(214.3 31.8% 91.4%);*/
+    --input: var(--background-modifier-form-field);
+
+    /*--card: hsl(0 0% 100%);*/
+    --card: var(--background-secondary);
+
+    /*--card-foreground: hsl(222.2 47.4% 11.2%);*/
+    --card-foreground: var(--text-normal);
+
+    /*--primary: hsl(222.2 47.4% 11.2%);*/
+    --primary: var(--interactive-accent);
+
+    /*--primary-foreground: hsl(210 40% 98%);*/
+    --primary-foreground: var(--text-on-accent);
+
+    /*--secondary: hsl(210 40% 96.1%);*/
+    --secondary: var(--background-secondary);
+
+    /*--secondary-foreground: hsl(222.2 47.4% 11.2%);*/
+    --secondary-foreground: var(--text-normal);
+
+    /*--accent: hsl(210 40% 96.1%);*/
+    --accent: var(--interactive-accent-hover);
+
+    /*--accent-foreground: hsl(222.2 47.4% 11.2%);*/
+    --accent-foreground: var(--text-on-accent);
+
+    /*--destructive: hsl(0 100% 50%);*/
+    --destructive: var(--background-modifier-error);
+
+    /*--destructive-foreground: hsl(210 40% 98%);*/
+    --destructive-foreground: var(--text-error);
+
+    /*--ring: hsl(215 20.2% 65.1%);*/
+    --ring: var(--interactive-accent);
+
+    /*--radius: 0.5rem;*/
+    --radius: var(--radius-l);
   }
 }