From 42d84554762dd44761785042655adf17eea34fba Mon Sep 17 00:00:00 2001
From: rmkane <rmkane89@gmail.com>
Date: Tue, 14 Feb 2023 14:50:36 -0500
Subject: [PATCH] Replace SASS @import usage with @forward

The use of @import is discouraged. Utilize the @use rule instead.

See: <https://sass-lang.com/documentation/at-rules/import>
"The Sass team discourages the continued use of the @import rule. Sass will
gradually phase it out over the next few years, and eventually remove it from
the language entirely. Prefer the @use rule instead."

Changelog:

* Removed extraeneous $color-text comments from scss/css files
* Implemented @use over @import
* scss/_main.scss defaults to the Sakura base theme
  * In turn, scss/sakura.scss does not specify overrides
* Updated test.html to include missing themes
  * Also added padding to theme switcher labels
* Updated README 'earthy' theme example
* Updated package-lock.json version 3 (latest stable node/npm)
  * Reference versions: node 18.14.0 (LTS) / npm 9.3.1
---
 README.md                       |  40 ++---
 css/sakura-dark-solarized.css   |   1 -
 css/sakura-dark.css             |   1 -
 css/sakura-vader.css            |   1 -
 package-lock.json               | 256 +++++++++++++++++++++++---------
 package.json                    |   2 +-
 scss/_defaults.scss             |   2 +
 scss/_main.scss                 |  12 ++
 scss/sakura-dark-solarized.scss |  28 ++--
 scss/sakura-dark.scss           |  28 ++--
 scss/sakura-earthly.scss        |  27 ++--
 scss/sakura-ink.scss            |  27 ++--
 scss/sakura-pink.scss           |  27 ++--
 scss/sakura-vader.scss          |  24 +--
 scss/sakura.scss                |  15 +-
 test.html                       |  29 +++-
 16 files changed, 330 insertions(+), 190 deletions(-)
 create mode 100644 scss/_defaults.scss

diff --git a/README.md b/README.md
index 924c6e6..9cd212f 100644
--- a/README.md
+++ b/README.md
@@ -139,24 +139,28 @@ You can make your own themes by overriding some variables for colors.
 Here is an example file: `./scss/sakura-earthly.scss`:
 
 ```scss
-/* Duotone color scheming:
-   Uses blossom as the revealing/stark color
-   Uses fade as the more prominent color
-*/
-$color-blossom: #338618;
-$color-fade: #5e5e5e;
-
-/* bg color is used for the background of the page
-   bg-alt is used for code-blocks etc
-*/
-$color-bg: #f9f9f9;
-$color-bg-alt: #C7E3BE;
-
-/* color of all the text on the page */
-$color-text: #4a4a4a;
-$font-size-base: 1.8rem;
-
-@import "main";
+@use 'defaults' as defaults;
+@forward 'main' with (
+    /* Duotone color scheming:
+       Uses blossom as the revealing/stark color
+       Uses fade as the more prominent color
+    */
+    $color-blossom: #007559,
+    $color-fade: #006994,
+  
+    /* bg color is used for the background of the page
+       bg-alt is used for code-blocks etc
+    */
+    $color-bg: #ffffff,
+    $color-bg-alt: #f7f7f7,
+  
+    /* color of all the text on the page */
+    $color-text: #222222,
+    $font-size-base: defaults.$font-size-base,
+          
+    $font-family-base: defaults.$font-family,
+    $font-family-heading: defaults.$font-family 
+);
 ```
 
 ## Dark mode
diff --git a/css/sakura-dark-solarized.css b/css/sakura-dark-solarized.css
index 049bb06..65843e0 100644
--- a/css/sakura-dark-solarized.css
+++ b/css/sakura-dark-solarized.css
@@ -1,4 +1,3 @@
-/* $color-text: #dedce5; */
 /* Sakura.css v1.4.1
  * ================
  * Minimal css theme.
diff --git a/css/sakura-dark.css b/css/sakura-dark.css
index 2e27919..8028136 100644
--- a/css/sakura-dark.css
+++ b/css/sakura-dark.css
@@ -1,4 +1,3 @@
-/* $color-text: #dedce5; */
 /* Sakura.css v1.4.1
  * ================
  * Minimal css theme.
diff --git a/css/sakura-vader.css b/css/sakura-vader.css
index 587c3fb..f1d1d3c 100644
--- a/css/sakura-vader.css
+++ b/css/sakura-vader.css
@@ -1,4 +1,3 @@
-/* $color-text: #dedce5; */
 /* Sakura.css v1.4.1
  * ================
  * Minimal css theme.
diff --git a/package-lock.json b/package-lock.json
index 764236c..2402028 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,290 +1,404 @@
 {
   "name": "sakura.css",
   "version": "1.4.1",
-  "lockfileVersion": 1,
+  "lockfileVersion": 3,
   "requires": true,
-  "dependencies": {
-    "@jridgewell/gen-mapping": {
+  "packages": {
+    "": {
+      "name": "sakura.css",
+      "version": "1.4.1",
+      "license": "MIT",
+      "devDependencies": {
+        "bookmarklet": "3.0.0",
+        "sass": "^1.58.1"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
       "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
         "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
-    "@jridgewell/resolve-uri": {
+    "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
       "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
-      "dev": true
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
     },
-    "@jridgewell/set-array": {
+    "node_modules/@jridgewell/set-array": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
     },
-    "@jridgewell/source-map": {
+    "node_modules/@jridgewell/source-map": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
       "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
         "@jridgewell/trace-mapping": "^0.3.9"
       }
     },
-    "@jridgewell/sourcemap-codec": {
+    "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
-    "@jridgewell/trace-mapping": {
+    "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
       "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
-    "acorn": {
+    "node_modules/acorn": {
       "version": "8.7.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
       "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
-      "dev": true
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
     },
-    "anymatch": {
+    "node_modules/anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
       }
     },
-    "binary-extensions": {
+    "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "bookmarklet": {
+    "node_modules/bookmarklet": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bookmarklet/-/bookmarklet-3.0.0.tgz",
       "integrity": "sha512-xrE+D7Au9OMTjaA+wUSSFwRRwG48051UsHHOP7ugajVkNjvfsPFe+o/LV/QkTcP7GLb9ivd3gwc7KzaOfrae7w==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "md5": "^2.2.1",
         "terser": "^5.6.1"
+      },
+      "bin": {
+        "bookmarklet": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
       }
     },
-    "braces": {
+    "node_modules/braces": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "buffer-from": {
+    "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
-    "charenc": {
+    "node_modules/charenc": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
       "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
-      "dev": true
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
     },
-    "chokidar": {
+    "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
       "dev": true,
-      "requires": {
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
         "normalize-path": "~3.0.0",
         "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
       }
     },
-    "commander": {
+    "node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
-    "crypt": {
+    "node_modules/crypt": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
       "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
-      "dev": true
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
     },
-    "fill-range": {
+    "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "fsevents": {
+    "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
       "dev": true,
-      "optional": true
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
     },
-    "glob-parent": {
+    "node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
       }
     },
-    "immutable": {
+    "node_modules/immutable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
       "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
       "dev": true
     },
-    "is-binary-path": {
+    "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "is-buffer": {
+    "node_modules/is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
       "dev": true
     },
-    "is-extglob": {
+    "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "is-glob": {
+    "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "is-number": {
+    "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
     },
-    "md5": {
+    "node_modules/md5": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
       "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "charenc": "0.0.2",
         "crypt": "0.0.2",
         "is-buffer": "~1.1.6"
       }
     },
-    "normalize-path": {
+    "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "picomatch": {
+    "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
     },
-    "readdirp": {
+    "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
       }
     },
-    "sass": {
-      "version": "1.53.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
-      "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
+    "node_modules/sass": {
+      "version": "1.58.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.1.tgz",
+      "integrity": "sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
         "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
       }
     },
-    "source-map": {
+    "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "source-map-js": {
+    "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "source-map-support": {
+    "node_modules/source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
       }
     },
-    "terser": {
+    "node_modules/terser": {
       "version": "5.14.2",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
       "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
         "commander": "^2.20.0",
         "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
-    "to-regex-range": {
+    "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
-      "requires": {
+      "dependencies": {
         "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
       }
     }
   }
diff --git a/package.json b/package.json
index 459ead7..e5979c7 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,6 @@
   "homepage": "https://oxal.org/projects/sakura/",
   "devDependencies": {
     "bookmarklet": "3.0.0",
-    "sass": "^1.53.0"
+    "sass": "^1.58.1"
   }
 }
diff --git a/scss/_defaults.scss b/scss/_defaults.scss
new file mode 100644
index 0000000..ceecfe7
--- /dev/null
+++ b/scss/_defaults.scss
@@ -0,0 +1,2 @@
+$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+$font-size-base: 1.8rem;
\ No newline at end of file
diff --git a/scss/_main.scss b/scss/_main.scss
index 6c6a380..f132dff 100644
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -4,6 +4,18 @@
  * Project: https://github.com/oxalorg/sakura/
  */
 
+ $color-blossom: #1d7484 !default;
+ $color-fade: #982c61 !default;
+ 
+ $color-bg: #f9f9f9 !default;
+ $color-bg-alt: #f1f1f1 !default;
+ 
+ $color-text: #4a4a4a !default;
+ $font-size-base: 1.8rem !default;
+ 
+ $font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !default;
+ $font-family-heading: $font-family-base !default;
+
 /* Body */
 
 html {
diff --git a/scss/sakura-dark-solarized.scss b/scss/sakura-dark-solarized.scss
index ba36a91..f6d7159 100644
--- a/scss/sakura-dark-solarized.scss
+++ b/scss/sakura-dark-solarized.scss
@@ -1,14 +1,14 @@
-$color-blossom: #2aa198;
-$color-fade: #657b83;
-
-$color-bg: #002b36;
-$color-bg-alt: #073642;
-
-/* $color-text: #dedce5; */
-$color-text: #839496;
-$font-size-base: 1.8rem;
-
-$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-$font-family-heading: $font-family-base;
-
-@import "main";
+@use 'defaults' as defaults;
+@forward 'main' with (
+    $color-blossom: #2aa198,
+    $color-fade: #657b83,
+    
+    $color-bg: #002b36,
+    $color-bg-alt: #073642,
+    
+    $color-text: #839496,
+    $font-size-base: defaults.$font-size-base,
+    
+    $font-family-base: defaults.$font-family,
+    $font-family-heading: defaults.$font-family 
+);
diff --git a/scss/sakura-dark.scss b/scss/sakura-dark.scss
index fbbb1b2..42b4044 100644
--- a/scss/sakura-dark.scss
+++ b/scss/sakura-dark.scss
@@ -1,14 +1,14 @@
-$color-blossom: #ffffff;
-$color-fade: #c9c9c9;
-
-$color-bg: #222222;
-$color-bg-alt: #4a4a4a;
-
-/* $color-text: #dedce5; */
-$color-text: #c9c9c9;
-$font-size-base: 1.8rem;
-
-$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-$font-family-heading: $font-family-base;
-
-@import "main";
+@use 'defaults' as defaults;
+@forward 'main' with (
+    $color-blossom: #ffffff,
+    $color-fade: #c9c9c9,
+
+    $color-bg: #222222,
+    $color-bg-alt: #4a4a4a,
+
+    $color-text: #c9c9c9,
+    $font-size-base: defaults.$font-size-base,
+    
+    $font-family-base: defaults.$font-family,
+    $font-family-heading: defaults.$font-family 
+);
\ No newline at end of file
diff --git a/scss/sakura-earthly.scss b/scss/sakura-earthly.scss
index d412466..6cb39df 100644
--- a/scss/sakura-earthly.scss
+++ b/scss/sakura-earthly.scss
@@ -1,13 +1,14 @@
-$color-blossom: #007559;
-$color-fade: #006994;
-
-$color-bg: #ffffff;
-$color-bg-alt: #f7f7f7;
-
-$color-text: #222222;
-$font-size-base: 1.8rem;
-
-$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-$font-family-heading: $font-family-base;
-
-@import "main";
+@use 'defaults' as defaults;
+@forward 'main' with (
+    $color-blossom: #007559,
+    $color-fade: #006994,
+
+    $color-bg: #ffffff,
+    $color-bg-alt: #f7f7f7,
+
+    $color-text: #222222,
+    $font-size-base: defaults.$font-size-base,
+        
+    $font-family-base: defaults.$font-family,
+    $font-family-heading: defaults.$font-family 
+);
\ No newline at end of file
diff --git a/scss/sakura-ink.scss b/scss/sakura-ink.scss
index 3b89945..ea397d8 100644
--- a/scss/sakura-ink.scss
+++ b/scss/sakura-ink.scss
@@ -1,13 +1,14 @@
-$color-blossom: #3b22ea;
-$color-fade: #DA4453;
-
-$color-bg: #ffffff;
-$color-bg-alt: #f7f7f7;
-
-$color-text: rgba(0,0,0,0.85);
-$font-size-base: 1.8rem;
-
-$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-$font-family-heading: $font-family-base;
-
-@import "main";
+@use 'defaults' as defaults;
+@forward 'main' with (
+    $color-blossom: #3b22ea,
+    $color-fade: #DA4453,
+
+    $color-bg: #ffffff,
+    $color-bg-alt: #f7f7f7,
+
+    $color-text: rgba(0,0,0,0.85),
+    $font-size-base: defaults.$font-size-base,
+    
+    $font-family-base: defaults.$font-family,
+    $font-family-heading: defaults.$font-family 
+);
\ No newline at end of file
diff --git a/scss/sakura-pink.scss b/scss/sakura-pink.scss
index 87ab414..054eb3f 100644
--- a/scss/sakura-pink.scss
+++ b/scss/sakura-pink.scss
@@ -1,13 +1,14 @@
-$color-blossom: #980255;
-$color-fade: #753851;
-
-$color-bg: #ffe4f5;
-$color-bg-alt: #f8d2e9;
-
-$color-text: #49002d;
-$font-size-base: 1.8rem;
-
-$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-$font-family-heading: $font-family-base;
-
-@import "main";
+@use 'defaults' as defaults;
+@forward 'main' with (
+    $color-blossom: #980255,
+    $color-fade: #753851,
+
+    $color-bg: #ffe4f5,
+    $color-bg-alt: #f8d2e9,
+
+    $color-text: #49002d,
+    $font-size-base: defaults.$font-size-base,
+    
+    $font-family-base: defaults.$font-family,
+    $font-family-heading: defaults.$font-family 
+);
\ No newline at end of file
diff --git a/scss/sakura-vader.scss b/scss/sakura-vader.scss
index 8438850..6500381 100644
--- a/scss/sakura-vader.scss
+++ b/scss/sakura-vader.scss
@@ -1,15 +1,17 @@
-$color-force: #DA4453;
-$color-blossom: lighten($color-force, 20%);
-$color-fade: $color-force;
+@use 'defaults' as defaults;
 
-$color-bg: #120c0e;
-$color-bg-alt: #40363a;
+$color-force: #DA4453;
 
-/* $color-text: #dedce5; */
-$color-text: #d9d8dc;
-$font-size-base: 1.8rem;
+@forward 'main' with (
+    $color-blossom: lighten($color-force, 20%),
+    $color-fade: $color-force,
 
-$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-$font-family-heading: $font-family-base;
+    $color-bg: #120c0e,
+    $color-bg-alt: #40363a,
 
-@import "main";
+    $color-text: #d9d8dc,
+    $font-size-base: defaults.$font-size-base,
+    
+    $font-family-base: defaults.$font-family,
+    $font-family-heading: defaults.$font-family
+);
\ No newline at end of file
diff --git a/scss/sakura.scss b/scss/sakura.scss
index 26c6651..bfc65d2 100644
--- a/scss/sakura.scss
+++ b/scss/sakura.scss
@@ -1,13 +1,2 @@
-$color-blossom: #1d7484;
-$color-fade: #982c61;
-
-$color-bg: #f9f9f9;
-$color-bg-alt: #f1f1f1;
-
-$color-text: #4a4a4a;
-$font-size-base: 1.8rem;
-
-$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-$font-family-heading: $font-family-base;
-
-@import "main";
+@use 'defaults' as defaults;
+@use 'main';
\ No newline at end of file
diff --git a/test.html b/test.html
index 3d97d87..699d858 100755
--- a/test.html
+++ b/test.html
@@ -16,6 +16,9 @@
       left: 0px;
       top: 0px;
     }
+    #toggle .info {
+      padding: 0.5rem;
+    }
     #top {
       padding-top: 40px;
     }
@@ -25,8 +28,14 @@
   </style>
   <body>
     <div id="toggle">
-      <span><button id="toggleButton" onclick="toggleSakura();">Toggle</button> Toggle sakura.css on/off</span><br>
-      <span id="switch"><button id="switchThemeButton" onclick="switchSakuraTheme();">Switch</button>Current theme: <span id="currentTheme">sakura (default)</span></span>
+      <div>
+        <button id="toggleButton" onclick="toggleSakura();">Toggle</button>
+        <span class="info">Toggle sakura.css on/off</span>
+      </div>
+      <div id="switch">
+        <button id="switchThemeButton" onclick="switchSakuraTheme();">Switch</button>
+        <span class="info">Current theme: <span id="currentTheme">sakura (default)</span></span>
+      </div>
     </div>
     <div id="top" class="page" role="document">
       <header role="banner">
@@ -697,18 +706,26 @@ <h1>Form elements</h1>
       name: "Sakura (default)",
       href: "sakura.css",
     },
+    {
+      name: "sakura-dark",
+      href: "sakura-dark.css",
+    },
     {
       name: "sakura-earthly",
       href: "sakura-earthly.css",
     },
     {
-      name: "sakura-vader",
-      href: "sakura-vader.css",
+      name: "sakura-ink",
+      href: "sakura-ink.css",
     },
     {
-      name: "sakura-dark",
-      href: "sakura-dark.css"
+      name: "sakura-pink",
+      href: "sakura-pink.css",
     },
+    {
+      name: "sakura-vader",
+      href: "sakura-vader.css",
+    }
   ];
   var current = 0;
   var sakura = document.getElementById("sakura-css");