Fix dead variables-dark import in dormant SCSS mixin tests (#42746)

Author: julien-deramond

scss/tests/jasmine.cjs

@@ -8,7 +8,7 @@ module.exports = {
   spec_dir: 'scss',
   // Make Jasmine look for `.test.scss` files
   // spec_files: ['**/*.{test,spec}.scss'],
-  spec_files: ['**/_utilities.test.scss', '**/utilities/_api.test.scss', '**/modules/_configuration.test.scss', '**/modules/_root-tokens.test.scss', '**/forms/_validation.test.scss'],
+  spec_files: ['**/_utilities.test.scss', '**/utilities/_api.test.scss', '**/modules/_configuration.test.scss', '**/modules/_root-tokens.test.scss', '**/forms/_validation.test.scss', '**/mixins/_color-mode-*.test.scss'],
   // Compile them into JS scripts running `sass-true`
   requires: [path.join(__dirname, 'sass-true/register.cjs')],
   // Ensure we use `require` so that the require.extensions works

scss/tests/mixins/_color-contrast.test.scss

@@ -1,8 +1,6 @@
-@import "../../functions";
-@import "../../config";
-@import "../../variables-dark";
-@import "../../maps";
-@import "../../mixins";
+@use "../../colors" as *;
+@use "../../config" as *;
+@use "../../functions" as *;
 
 @include describe("color-contrast function") {
   @include it("should return a color when contrast ratio equals minimum requirement (WCAG 2.1 compliance)") {

scss/tests/mixins/_color-mode-data.test.scss

@@ -0,0 +1,38 @@
+// check-unused-imports-disable — test infrastructure imports.
+// stylelint-disable selector-attribute-quotes
+
+@use "sass:color";
+// Configure the shared config module once, for this compilation, before it's
+// loaded by mixins/color-mode. Dart Sass forbids reassigning another module's
+// variable (`ns.$var: value !global` errors), so overriding via `with (...)`
+// at first load is the only supported way to flip `$color-mode-type` for a test.
+@use "../../config" with ($color-mode-type: "data");
+@use "../../colors" as *;
+@use "../../mixins/color-mode" as *;
+
+@include describe("global $color-mode-type: data") {
+  @include it("generates data attribute selectors for dark mode") {
+    @include assert() {
+      @include output() {
+        @include color-mode(dark) {
+          .element {
+            color: var(--bs-primary-fg-emphasis);
+            background-color: var(--bs-primary-bg-subtle);
+          }
+        }
+        @include color-mode(dark, true) {
+          --custom-color: #{color.mix($indigo, $blue, 50%, oklch)};
+        }
+      }
+      @include expect() {
+        [data-bs-theme=dark] .element {
+          color: var(--bs-primary-fg-emphasis);
+          background-color: var(--bs-primary-bg-subtle);
+        }
+        [data-bs-theme=dark] {
+          --custom-color: #{color.mix($indigo, $blue, 50%, oklch)};
+        }
+      }
+    }
+  }
+}

scss/tests/mixins/_color-mode-media-query.test.scss

@@ -0,0 +1,37 @@
+// check-unused-imports-disable — test infrastructure imports.
+
+@use "sass:color";
+@use "../../colors" as *;
+@use "../../mixins/color-mode" as *;
+
+// Exercises the default `$color-mode-type: "media-query"` (see scss/_config.scss).
+@include describe("global $color-mode-type: media-query (default)") {
+  @include it("generates media queries for dark mode") {
+    @include assert() {
+      @include output() {
+        @include color-mode(dark) {
+          .element {
+            color: var(--bs-primary-fg-emphasis);
+            background-color: var(--bs-primary-bg-subtle);
+          }
+        }
+        @include color-mode(dark, true) {
+          --custom-color: #{color.mix($indigo, $blue, 50%, oklch)};
+        }
+      }
+      @include expect() {
+        @media (prefers-color-scheme: dark) {
+          .element {
+            color: var(--bs-primary-fg-emphasis);
+            background-color: var(--bs-primary-bg-subtle);
+          }
+        }
+        @media (prefers-color-scheme: dark) {
+          :root {
+            --custom-color: #{color.mix($indigo, $blue, 50%, oklch)};
+          }
+        }
+      }
+    }
+  }
+}