Theme: Revert adoption of Sass @use back to @import

Doesn't seem to support overriding theme files from the site's _sass
directory. I'm happy to invert the relationship and require sprinkling
`@use` in every site, but it seems even with that it still doesn't work.

Let's try this again some time after Oct 2026.

Author: Krinkle

_config.yml

@@ -67,6 +67,29 @@ kramdown:
 sass:
   style: compressed
   sourcemap: never
+  # Sass has deprecated `@import` but I failed to find a way to make
+  # the new Sass module system do what we need via `@use`.
+  #
+  # Previous attempt at [1] was rolled back because while it was
+  # workable for the demo, it fell apart when using it in a production
+  # site like qunitjs.com because `@use` seems to favor nearby files
+  # even after you have left the site.
+  # Example: `assets/styles.scss`, defined in theme.
+  # - `assets/styles.scss` @use `amethyst`, defined in theme.
+  # - `amethyst.scss` @use `amethyst-variables-all`, defined in theme.
+  # - `amethyst-variables-all` @use `amethyst-variables` which is
+  #    overridden by the current site, but while @import prefers
+  #    the site directory, @use seems to favour the nearest, thus
+  #    making extension points impossible.
+  #
+  # Silence the deprecation for now, and let's hope this matures
+  # and gets better documented some time before Oct 2026 [2].
+  #
+  # [1]: https://github.com/qunitjs/jekyll-theme-amethyst/commit/356962ef961c8d06741147fb4e4b2e56d917a080
+  # [2] https://sass-lang.com/blog/import-is-deprecated/
+  # [3] https://sass-lang.com/blog/the-module-system-is-launched/
+  # [4] https://github.com/jekyll/minima/issues/815
+  quiet_deps: true
 
 
 # Blog archives

_sass/amethyst-variables-all.scss

@@ -2,10 +2,29 @@
 
 // Amethyst theme for Jekyll
 
-@use "amethyst-variables-all" as *;
 @use "sass:color";
 @use "sass:string";
 
+$size-sm: 0.8rem;
+$size-1: 1rem;
+$size-2: 1.333rem;
+$size-3: 1.777rem;
+$size-4: 2.369rem;
+$size-5: 3.157rem;
+$size-spacing: $size-2;
+$box-spacing: $size-1;
+
+$color-white: #fff;
+$color-light: #f4f4f4;
+$color-off-white: #cdcdcd;
+$color-darkgrey: #63676d; // based on 2015 api.jquery.com design
+$color-black: #333;
+
+$screen-s: 480px;
+$screen-m: 768px;
+$screen-l: 992px;
+$screen-xl: 1200px;
+
 * {
     box-sizing: border-box;
 }
@@ -449,13 +468,13 @@ table {
 /* Search */
 
 typesense-minibar {
-    --tsmb-color-base-background: #{color.adjust($color-accent, $lightness: 12%)};
+    --tsmb-color-base-background: #{lighten($color-accent, 12%)};
     --tsmb-color-primary30: #{$color-accent};
     --tsmb-color-primary50: #{$color-vibrant};
     --tsmb-color-primary90: #{$color-bright};
     --tsmb-color-base30: var(--tsmb-color-primary90);
-    --tsmb-color-base50: #{color.change($color-bright, $alpha: 0.6)}; // #a98dc1
-    --tsmb-color-base90: #{color.change($color-bright, $alpha: 0.6)};
+    --tsmb-color-base50: #{change-color($color-bright, $alpha: 0.6)}; // #a98dc1
+    --tsmb-color-base90: #{change-color($color-bright, $alpha: 0.6)};
 
     flex: 1;
     align-self: center;
@@ -464,7 +483,7 @@ typesense-minibar form {
     width: auto;
 }
 typesense-minibar form:not(:focus-within)::before {
-  filter: string.unquote("invert()");
+  filter: unquote("invert()");
 }
 typesense-minibar input[type="search"] {
   border: none;
@@ -591,8 +610,8 @@ typesense-minibar input[type="search"] {
 
 .hero {
     margin-bottom: $size-spacing;
-    background-color: color.adjust($color-vibrant, $lightness: -12%);
-    background-image: linear-gradient(135deg, color.adjust($color-vibrant, $lightness: -12%), $color-vibrant );
+    background-color: darken($color-vibrant, 12%);
+    background-image: linear-gradient(135deg, darken($color-vibrant, 12%), $color-vibrant );
     padding: ($size-4 * 2) 0;
     text-align: center;
 }

_sass/amethyst.scss

@@ -3,6 +3,7 @@
 
 @use "typesense-minibar.css";
 
-@use "amethyst";
-@use "highlight";
-@use "custom";
+@import "amethyst-variables";
+@import "amethyst";
+@import "highlight";
+@import "custom";