Add css mixins

app/assets/styles.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
+  @define-mixin light-vars {
     --color-gray-darkest: 36 36 36;
     --color-gray-dark: 66 66 66;
     --color-gray: 97 97 97;
@@ -12,6 +12,33 @@
     --color-gray-lightest: 245 245 245;
   }
 
+  @define-mixin dark-vars {
+    --color-gray-darkest: 245 245 245;
+    --color-gray-dark: 209 209 209;
+    --color-gray: 199 199 199;
+    --color-gray-light: 97 97 97;
+    --color-gray-lighter: 66 66 66;
+    --color-gray-lightest: 36 36 36;
+  }
+
+  :root {
+    @mixin light-vars;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      @mixin dark-vars;
+    }
+  }
+
+  :root[data-theme='light'] {
+    @mixin light-vars;
+  }
+
+  :root[data-theme='dark'] {
+    @mixin dark-vars;
+  }
+
   body {
     @apply text-gray-dark;
   }
@@ -33,14 +60,14 @@
       th {
         @apply px-4 py-4 text-gray-dark font-normal whitespace-nowrap;
 
-        &[type="button"] {
+        &[type='button'] {
           @apply cursor-pointer select-none;
         }
 
         svg {
           width: 1em;
           height: 1em;
-          bottom: .1em;
+          bottom: 0.1em;
           position: relative;
         }
       }

config/postcss.config.js

@@ -1,6 +1,7 @@
 const env = process.env.EMBER_ENV || 'development';
 
 const plugins = [
+  require('postcss-mixins'),
   require('tailwindcss/nesting'),
   require('tailwindcss')({ config: './config/tailwind.config.js' }),
   require('autoprefixer'),

package.json

@@ -93,6 +93,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.16",
     "postcss-loader": "^7.0.1",
+    "postcss-mixins": "^9.0.4",
     "prettier": "^2.7.1",
     "qunit": "^2.19.1",
     "qunit-dom": "^2.0.0",

yarn.lock

@@ -9079,7 +9079,7 @@ loader-utils@^1.2.3:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
-loader-utils@^2.0.0, loader-utils@^2.0.2:
+loader-utils@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
   integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
@@ -9739,13 +9739,6 @@ mktemp@~0.4.0:
   resolved "https://registry.yarnpkg.com/mktemp/-/mktemp-0.4.0.tgz#6d0515611c8a8c84e484aa2000129b98e981ff0b"
   integrity sha512-IXnMcJ6ZyTuhRmJSjzvHSRhlVPiN9Jwc6e59V0bEJ0ba6OBeX2L0E+mRN1QseeOF4mM+F1Rit6Nh7o+rl2Yn/A==
 
-monaco-editor-webpack-plugin@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.0.1.tgz#ba19c60aba990184e36ad8722b1ed6a564527c7c"
-  integrity sha512-M8qIqizltrPlIbrb73cZdTWfU9sIsUVFvAZkL3KGjAHmVWEJ0hZKa/uad14JuOckc0GwnCaoGHvMoYtJjVyCzw==
-  dependencies:
-    loader-utils "^2.0.2"
-
 monaco-editor@^0.34.0:
   version "0.34.0"
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.0.tgz#b1749870a1f795dbfc4dc03d8e9b646ddcbeefa7"
@@ -10687,6 +10680,16 @@ postcss-minify-selectors@^5.2.1:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
+postcss-mixins@^9.0.4:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-mixins/-/postcss-mixins-9.0.4.tgz#75cd3cdb619a7e08c4c51ebb094db5f6d65b3831"
+  integrity sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==
+  dependencies:
+    fast-glob "^3.2.11"
+    postcss-js "^4.0.0"
+    postcss-simple-vars "^7.0.0"
+    sugarss "^4.0.1"
+
 postcss-modules-extract-imports@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
@@ -10816,6 +10819,11 @@ postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selecto
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-simple-vars@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-simple-vars/-/postcss-simple-vars-7.0.0.tgz#f1d10a979762aa4e7e3450a35a32885112893d1b"
+  integrity sha512-SPSkKQK7mKjD/tqcTbZkDi3KP+C/cTGXnKQmSt3AisJtnZE6ZxHEUoOGRfpV0B5dW1Y36EETfRHx10WLHpXThA==
+
 postcss-svgo@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d"
@@ -12308,6 +12316,11 @@ stylehacks@^5.1.0:
     browserslist "^4.16.6"
     postcss-selector-parser "^6.0.4"
 
+sugarss@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-4.0.1.tgz#128a783ed71ee0fc3b489ce1f7d5a89bc1e24383"
+  integrity sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==
+
 sum-up@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sum-up/-/sum-up-1.0.3.tgz#1c661f667057f63bcb7875aa1438bc162525156e"