Fix theming order

cbasje · Jul 13, 2023 · 15edace · 15edace
1 parent ae11124
commit 15edace
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -10,10 +10,10 @@ const config = {
         postcssGlobalData({
             files: ["./node_modules/open-props/media.min.css"],
         }),
-        postcssCustomMedia,
+        postcssCustomMedia({ preserve: true }),
         // postcssPresetEnv,
-        autoprefixer,
-        cssnano,
+        autoprefixer(),
+        cssnano(),
     ],
 };
 

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -1,5 +1,3 @@
-@import "open-props/media";
-
 @layer normalize {
     @import "open-props/normalize";
     @import "open-props/zindex";
@@ -15,11 +13,7 @@
     }
 }
 
-@layer theme {
-    @layer colors {
-        @import "open-props/colors";
-    }
-
+@layer theming {
     @layer sizes {
         @import "open-props/borders";
         @import "open-props/sizes";
@@ -29,6 +23,19 @@
         @import "open-props/fonts";
         @import "./fonts.scss";
     }
+
+    @layer global {
+        @import "./themes/global.scss";
+    }
+
+    @layer themes {
+        @media (--OSlight) {
+            @import "./themes/light.scss";
+        }
+        @media (--OSdark) {
+            @import "./themes/dark.scss";
+        }
+    }
 }
 
 @layer components {
@@ -38,15 +45,6 @@
 }
 
 @layer overrides {
-    @import "./themes/global.scss";
-
-    @media (--OSlight) {
-        @import "./themes/light.scss";
-    }
-    @media (--OSdark) {
-        @import "./themes/dark.scss";
-    }
-
     :root {
         background-color: var(--theme-surface-1);
         color: var(--theme-text-1);