test(pie-css): PEW-109 tests update

apps/pie-storybook/.storybook/preview-head.html

@@ -26,13 +26,9 @@
     body {
         font-feature-settings: "tnum"; /* Enable tabular numbers */
         color: var(--dt-color-content-default);
-        background-color: var(--dt-color-container-default);
         font-family: var(--dt-font-interactive-l-family);
     }
 </style>
 <script>
     window.global = window;
-    (function() {
-        document.documentElement.setAttribute('data-darkmode-enabled', true);
-    })()
 </script>

packages/tools/pie-css/scss/mixins/index.scss

@@ -1,4 +1,3 @@
-@forward './buttonInteractiveStates';
 @forward './interactiveStates';
 @forward './unitModifiers';
 @forward './focus';

packages/tools/pie-css/test/css/__snapshots__/css.spec.ts.snap

@@ -152,14 +152,23 @@ exports[`index.css > should render the expected CSS content 1`] = `
     --dt-color-content-positive: var(--dt-color-green);
     --dt-color-content-disabled: var(--dt-color-charcoal-50);
     --dt-color-content-brand: var(--dt-color-orange);
+    --dt-color-hover-01-bg: #000;
     --dt-color-hover-01: 4%;
+    --dt-color-hover-01-dark-bg: #000;
     --dt-color-hover-01-dark: 4%;
+    --dt-color-hover-02-bg: #fff;
     --dt-color-hover-02: 8%;
+    --dt-color-hover-02-light-bg: #fff;
     --dt-color-hover-02-light: 8%;
+    --dt-color-active-01-bg: #000;
     --dt-color-active-01: 12%;
+    --dt-color-active-01-dark-bg: #000;
     --dt-color-active-01-dark: 12%;
+    --dt-color-active-02-bg: #fff;
     --dt-color-active-02: 20%;
+    --dt-color-active-02-light-bg: #fff;
     --dt-color-active-02-light: 20%;
+    --dt-color-resting-bg: #fff;
     --dt-color-resting: 0%;
     --dt-color-focus-inner: var(--dt-color-white);
     --dt-color-focus-outer: var(--dt-color-blue-70);
@@ -519,14 +528,23 @@ html[data-highcontrast-enabled] {
     --dt-color-content-positive: var(--dt-color-green-dark-hc);
     --dt-color-content-disabled: var(--dt-color-charcoal-50);
     --dt-color-content-brand: var(--dt-color-orange-dark-hc);
+    --dt-color-hover-01-bg: #000;
     --dt-color-hover-01: 4%;
+    --dt-color-hover-01-dark-bg: #000;
     --dt-color-hover-01-dark: 4%;
+    --dt-color-hover-02-bg: #fff;
     --dt-color-hover-02: 8%;
+    --dt-color-hover-02-light-bg: #fff;
     --dt-color-hover-02-light: 8%;
+    --dt-color-active-01-bg: #000;
     --dt-color-active-01: 12%;
+    --dt-color-active-01-dark-bg: #000;
     --dt-color-active-01-dark: 12%;
+    --dt-color-active-02-bg: #fff;
     --dt-color-active-02: 20%;
+    --dt-color-active-02-light-bg: #fff;
     --dt-color-active-02-light: 20%;
+    --dt-color-resting-bg: #fff;
     --dt-color-resting: 0%;
     --dt-color-focus-inner: var(--dt-color-white);
     --dt-color-focus-outer: var(--dt-color-blue-70);
@@ -620,14 +638,23 @@ html[data-highcontrast-enabled] {
         --dt-color-content-positive: var(--dt-color-green-30);
         --dt-color-content-disabled: var(--dt-color-charcoal-50);
         --dt-color-content-brand: var(--dt-color-orange-30);
+        --dt-color-hover-01-bg: #fff;
         --dt-color-hover-01: 8%;
+        --dt-color-hover-01-dark-bg: #000;
         --dt-color-hover-01-dark: 4%;
+        --dt-color-hover-02-bg: #000;
         --dt-color-hover-02: 4%;
+        --dt-color-hover-02-light-bg: #fff;
         --dt-color-hover-02-light: 8%;
+        --dt-color-active-01-bg: #fff;
         --dt-color-active-01: 20%;
+        --dt-color-active-01-dark-bg: #000;
         --dt-color-active-01-dark: 12%;
+        --dt-color-active-02-bg: #000;
         --dt-color-active-02: 12%;
+        --dt-color-active-02-light-bg: #fff;
         --dt-color-active-02-light: 20%;
+        --dt-color-resting-bg: #000;
         --dt-color-resting: 0%;
         --dt-color-focus-inner: var(--dt-color-black);
         --dt-color-focus-outer: var(--dt-color-blue-30);
@@ -722,14 +749,23 @@ html[data-highcontrast-enabled] {
         --dt-color-content-positive: var(--dt-color-green-light-hc);
         --dt-color-content-disabled: var(--dt-color-charcoal-50);
         --dt-color-content-brand: var(--dt-color-orange-30);
+        --dt-color-hover-01-bg: #fff;
         --dt-color-hover-01: 8%;
+        --dt-color-hover-01-dark-bg: #000;
         --dt-color-hover-01-dark: 4%;
+        --dt-color-hover-02-bg: #000;
         --dt-color-hover-02: 4%;
+        --dt-color-hover-02-light-bg: #fff;
         --dt-color-hover-02-light: 8%;
+        --dt-color-active-01-bg: #fff;
         --dt-color-active-01: 20%;
+        --dt-color-active-01-dark-bg: #000;
         --dt-color-active-01-dark: 12%;
+        --dt-color-active-02-bg: #000;
         --dt-color-active-02: 12%;
+        --dt-color-active-02-light-bg: #fff;
         --dt-color-active-02-light: 20%;
+        --dt-color-resting-bg: #000;
         --dt-color-resting: 0%;
         --dt-color-focus-inner: var(--dt-color-black);
         --dt-color-focus-outer: var(--dt-color-blue-30);