working on better tailwind setup

wavetermdev · Feb 4, 2025 · 377b2e1 · 377b2e1
1 parent ff3c47b
commit 377b2e1
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/frontend/app/shadcn/chart.tsx b/frontend/app/shadcn/chart.tsx
@@ -156,7 +156,7 @@ const ChartTooltipContent = React.forwardRef<
             <div
                 ref={ref}
                 className={cn(
-                    "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+                    "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background !px-2.5 !py-1.5 text-xs shadow-xl",
                     className
                 )}
             >

diff --git a/frontend/tailwindsetup.css b/frontend/tailwindsetup.css
@@ -1,14 +1,41 @@
+/* Copyright 2025, Command Line Inc.
+   SPDX-License-Identifier: Apache-2.0 */
+
 @source './**/*.{jsx,tsx}';
 @source './../.storybook/**/*.{jsx,tsx}';
 
 @theme {
-    --color-background: #000000;
+    --color-background: rgb(34, 34, 34);
     --color-foreground: #f7f7f7;
+    --color-white: #f7f7f7;
     --color-muted-foreground: rgb(195, 200, 194);
+    --color-accent-50: rgb(236, 253, 232);
+    --color-accent-100: rgb(209, 250, 202);
+    --color-accent-200: rgb(167, 243, 168);
+    --color-accent-300: rgb(110, 231, 133);
+    --color-accent-400: rgb(88, 193, 66); /* main accent color */
+    --color-accent-500: rgb(63, 162, 51);
+    --color-accent-600: rgb(47, 133, 47);
+    --color-accent-700: rgb(34, 104, 43);
+    --color-accent-800: rgb(22, 81, 35);
+    --color-accent-900: rgb(15, 61, 29);
+    --color-error: rgb(229, 77, 46);
+    --color-warning: rgb(224, 185, 86);
+    --color-success: rgb(78, 154, 6);
+    --color-panel: rgba(31, 33, 31, 0.5);
+    --color-highlight: rgba(255, 255, 255, 0.2);
+    --color-hover: rgba(255, 255, 255, 0.1);
+    --color-border: rgba(255, 255, 255, 0.16);
+
+    --font-sans: "Inter", sans-serif;
+    --font-mono: "Hack", monospace;
+    --font-markdown: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji";
+
+    --radius: 8px;
 }
 
-/* Copyright 2024, Command Line Inc.
-   SPDX-License-Identifier: Apache-2.0 */
+@variant dark (&:where([data-colorscheme="dark"], [data-colorscheme="dark"] *));
 
 /* added this wrapper while we transition */
 .tw {

diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="/fontawesome/css/custom-icons.min.css" />
     <script type="module" src="frontend/wave.ts"></script>
   </head>
-  <body class="init">
+  <body class="init" data-colorscheme="dark">
     <div id="main"></div>
   </body>
 </html>