fix: add default styles

malezjaa · Jan 24, 2024 · 8c91fd7 · 8c91fd7
1 parent 051c479
commit 8c91fd7
Show file tree

Hide file tree

Showing 4 changed files with 310 additions and 94 deletions.
diff --git a/apps/docs/src/docs/guides/themes.md b/apps/docs/src/docs/guides/themes.md
@@ -25,25 +25,25 @@ export default function Page() {
 
 ```css [styles.css]
 :root {
-  --eddies-bg-color: white;
-  --eddies-text-color: black;
-  --eddies-bg-secondary-color: rgb(224, 221, 221);
-  --eddies-text-secondary-color: rgb(124, 121, 119);
-  --eddies-border: rgba(236, 236, 238, 0.856);
-  --eddies-muted: #d8d8d8;
-  --eddies-hover: #ecebeb;
-  --edies-box-shadow: rgb(207, 207, 207) 0px 4px 12px;
+  --eddies-bg-color: white !important;
+  --eddies-text-color: black !important;
+  --eddies-bg-secondary-color: rgb(224, 221, 221) !important;
+  --eddies-text-secondary-color: rgb(124, 121, 119) !important;
+  --eddies-border: rgba(236, 236, 238, 0.856) !important;
+  --eddies-muted: #d8d8d8 !important;
+  --eddies-hover: #ecebeb !important;
+  --edies-box-shadow: rgb(207, 207, 207) 0px 4px 12px !important;
 }
 
 .dark-theme {
-  --eddies-bg-color: #222222;
-  --eddies-text-color: #e1f7f1;
-  --eddies-bg-secondary-color: #2e2e2e;
-  --eddies-text-secondary-color: rgb(185, 182, 181);
-  --eddies-border: rgba(226, 232, 255, 0.07);
-  --eddies-muted: rgb(26, 26, 26);
-  --eddies-hover: rgb(46, 45, 45);
-  --edies-box-shadow: rgb(15, 15, 15) 0px 4px 12px;
+  --eddies-bg-color: #222222 !important;
+  --eddies-text-color: #e1f7f1 !important;
+  --eddies-bg-secondary-color: #2e2e2e !important;
+  --eddies-text-secondary-color: rgb(185, 182, 181) !important;
+  --eddies-border: rgba(226, 232, 255, 0.07) !important;
+  --eddies-muted: rgb(26, 26, 26) !important;
+  --eddies-hover: rgb(46, 45, 45) !important;
+  --edies-box-shadow: rgb(15, 15, 15) 0px 4px 12px !important;
 }
 ```
 

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
@@ -1,31 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  :root {
-    --eddies-bg-color: white;
-    --eddies-text-color: black;
-    --eddies-bg-secondary-color: white;
-    --eddies-text-secondary-color: rgb(31, 31, 31);
-
-    --eddies-border: rgba(226, 232, 255, 0.07);
-    --eddies-muted: rgb(26, 26, 26);
-    --eddies-hover: rgb(46, 45, 45);
-
-    --edies-box-shadow: rgb(15, 15, 15) 0px 4px 12px;
-  }
-
-  .dark-theme {
-    --eddies-bg-color: #1b1b1b;
-    --eddies-text-color: #e1f7f1;
-    --eddies-bg-secondary-color: rgb(35, 35, 35);
-    --eddies-text-secondary-color: rgb(185, 182, 181);
-
-    --eddies-border: rgba(226, 232, 255, 0.07);
-    --eddies-muted: rgb(26, 26, 26);
-    --eddies-hover: rgb(46, 45, 45);
-
-    --edies-box-shadow: rgb(15, 15, 15) 0px 4px 12px;
-  }
-}
diff --git a/packages/eddies/src/styles/index.css b/packages/eddies/src/styles/index.css
@@ -40,6 +40,34 @@
   --edies-box-shadow: rgb(15, 15, 15) 0px 4px 12px;
 }
 
+@layer base {
+  :root {
+    --eddies-bg-color: white;
+    --eddies-text-color: black;
+    --eddies-bg-secondary-color: white;
+    --eddies-text-secondary-color: rgb(31, 31, 31);
+
+    --eddies-border: rgba(226, 232, 255, 0.07);
+    --eddies-muted: rgb(26, 26, 26);
+    --eddies-hover: rgb(46, 45, 45);
+
+    --edies-box-shadow: rgb(15, 15, 15) 0px 4px 12px;
+  }
+
+  .dark-theme {
+    --eddies-bg-color: #1b1b1b;
+    --eddies-text-color: #e1f7f1;
+    --eddies-bg-secondary-color: rgb(35, 35, 35);
+    --eddies-text-secondary-color: rgb(185, 182, 181);
+
+    --eddies-border: rgba(226, 232, 255, 0.07);
+    --eddies-muted: rgb(26, 26, 26);
+    --eddies-hover: rgb(46, 45, 45);
+
+    --edies-box-shadow: rgb(15, 15, 15) 0px 4px 12px;
+  }
+}
+
 .tippy-box {
   border-radius: 0.375rem;
   box-shadow: var(--edies-box-shadow);