@stackoverflow/stacks 2.0.0-rc.7 → 2.0.0-rc.9

package/lib/components/anchor/anchor.less

@@ -15,28 +15,32 @@
     // VARIANTS
     &&__danger {
         --_an-a-fc: var(--red-400);
-        --_an-a-fc-hover: var(--red-400);
+        --_an-a-fc-hover: var(--red-500);
+        --_an-a-fc-visited: var(--red-600);
     }
 
     &&__default {
         --_an-a-fc: var(--theme-link-color, var(--theme-secondary-400));
-        --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
-        --_an-a-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
+        --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
+        --_an-a-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-600));
     }
 
     &&__grayscale {
-        --_an-a-fc: var(--black-500);
+        --_an-a-fc: var(--black-400);
         --_an-a-fc-hover: var(--black-500);
+        --_an-a-fc-visited: var(--black-600);
     }
 
     &&__inherit {
         --_an-a-fc: inherit;
         --_an-a-fc-hover: inherit;
+        --_an-a-fc-visited: inherit;
     }
 
     &&__muted {
         --_an-a-fc: var(--black-400);
-        --_an-a-fc-hover: var(--black-400);
+        --_an-a-fc-hover: var(--black-500);
+        --_an-a-fc-visited: var(--black-600);
     }
 
     &&__danger,

package/lib/components/button/button.less

@@ -29,9 +29,9 @@
     --_bu-filled-fc-hover: var(--theme-button-primary-hover-color, var(--white));
     --_bu-filled-fc-selected: var(--theme-button-primary-selected-color, var(--white));
     // Outlined
-    --_bu-outlined-bc: var(--theme-button-outlined-border-color, var(----theme-secondary-400));
+    --_bu-outlined-bc: var(--theme-button-outlined-border-color, var(--theme-secondary-400));
     --_bu-outlined-bg: var(--theme-button-outlined-background-color);
-    --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color, var(----theme-secondary-400));
+    --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color, var(--theme-secondary-400));
     --_bu-outlined-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
     --_bu-outlined-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
     // CHILD COMPONENT CUSTOM PROPERTIES

package/lib/components/link/link.less

@@ -3,8 +3,8 @@
 a,
 .s-link {
     --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
-    --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
-    --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
+    --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
+    --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-600));
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
@@ -61,14 +61,14 @@ a,
         // VARIANTS
         &__danger {
             --_li-fc: var(--red-400);
-            --_li-fc-hover: var(--red-400);
-            --_li-fc-visited: var(--red-500);
+            --_li-fc-hover: var(--red-500);
+            --_li-fc-visited: var(--red-600);
         }
 
         &__grayscale {
-            --_li-fc: var(--black-600);
-            --_li-fc-hover: var(--black-600);
-            --_li-fc-visited: var(--black-500);
+            --_li-fc: var(--black-500);
+            --_li-fc-hover: var(--black-400);
+            --_li-fc-visited: var(--black-600);
         }
 
         &__inherit {
@@ -80,7 +80,7 @@ a,
         &__muted {
             --_li-fc: var(--black-400);
             --_li-fc-hover: var(--black-500);
-            --_li-fc-visited: var(--black-500);
+            --_li-fc-visited: var(--black-600);
         }
     }
 

package/lib/components/select/select.less

@@ -1,7 +1,7 @@
 .s-select {
     --_se-arrow-bc: currentColor transparent;
     --_se-arrow-size: var(--su-static4); // Constant
-    --_se-select-bc: var(--bc-dark);
+    --_se-select-bc: var(--bc-darker);
     --_se-select-bc-focus: var(--theme-secondary-400);
     --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
     --_se-select-bg: var(--white);

package/lib/components/tag/tag.less

@@ -2,11 +2,11 @@
     --_ta-bc: var(--theme-tag-border-color, transparent);
     --_ta-bc-hover: var(--theme-tag-hover-border-color, transparent);
     --_ta-bc-selected: transparent;
-    --_ta-bg: var(--theme-tag-background-color, var(----theme-secondary-100));
+    --_ta-bg: var(--theme-tag-background-color, var(--theme-secondary-100));
     --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--theme-secondary-200));
     --_ta-bg-selected: var(--theme-secondary-300);
     --_ta-br: var(--br-sm);
-    --_ta-fc: var(--theme-tag-color, var(----theme-secondary-500));
+    --_ta-fc: var(--theme-tag-color, var(--theme-secondary-500));
     --_ta-fc-hover: var(--theme-tag-hover-color, var(--theme-secondary-600));
     --_ta-fc-selected: var(--theme-secondary-600);
     --_ta-fs: var(--fs-caption);

package/lib/exports/__snapshots__/color.less.test.ts.snap

@@ -6,6 +6,23 @@ exports[`colors > should output all the css generated by the v2 colors/theming g
     --_o-disabled-static: 0.5;
     --_black-static: hsl(0, 0%, 0%);
     --_white-static: hsl(0, 0%, 100%);
+}
+
+body:not(.theme-dark),
+body.theme-highcontrast:not(.theme-dark),
+body:not(.theme-highcontrast):not(.theme-dark),
+body.theme-dark .theme-light__forced,
+body.theme-highcontrast.theme-dark .theme-light__forced,
+body:not(.theme-highcontrast).theme-dark .theme-light__forced,
+body.theme-system .theme-light__forced,
+body.theme-highcontrast.theme-system .theme-light__forced,
+body:not(.theme-highcontrast).theme-system .theme-light__forced,
+body.theme-dark,
+body.theme-highcontrast.theme-dark,
+body:not(.theme-highcontrast).theme-dark,
+body:not(.theme-dark) .theme-dark__forced,
+body.theme-highcontrast:not(.theme-dark) .theme-dark__forced,
+body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced {
     --bg-error: var(--red-400);
     --bg-danger: var(--red-400);
     --bg-success: var(--green-400);
@@ -19,10 +36,32 @@ exports[`colors > should output all the css generated by the v2 colors/theming g
     --fc-dark: var(--black-600);
     --fc-error: var(--red-400);
     --fc-danger: var(--red-400);
-    --fc-success: var(--green-500);
+    --fc-success: var(--green-400);
     --fc-warning: var(--yellow-500);
 }
 
+@media (prefers-color-scheme: dark) {
+    body.theme-system,
+  body.theme-highcontrast.theme-system,
+  body:not(.theme-highcontrast).theme-system {
+        --bg-error: var(--red-400);
+        --bg-danger: var(--red-400);
+        --bg-success: var(--green-400);
+        --bg-warning: var(--yellow-500);
+        --bc-error: var(--red-400);
+        --bc-danger: var(--red-400);
+        --bc-success: var(--green-400);
+        --bc-warning: var(--yellow-500);
+        --fc-light: var(--black-400);
+        --fc-medium: var(--black-500);
+        --fc-dark: var(--black-600);
+        --fc-error: var(--red-400);
+        --fc-danger: var(--red-400);
+        --fc-success: var(--green-400);
+        --fc-warning: var(--yellow-500);
+    }
+}
+
 body:not(.theme-highcontrast):not(.theme-dark),
 body:not(.theme-highcontrast).theme-dark .theme-light__forced,
 body:not(.theme-highcontrast).theme-system .theme-light__forced,

package/lib/exports/color-sets.less

@@ -426,7 +426,7 @@
     dark: var(--black-600);
     error: var(--red-400);
     danger: var(--red-400);
-    success: var(--green-500);
+    success: var(--green-400);
     warning: var(--yellow-500);
 }
 

package/lib/exports/color.less

@@ -5,7 +5,23 @@ body {
     --_o-disabled-static: 0.5;
     --_black-static: .set-black()[default];
     --_white-static: .set-white()[default];
-    .create-colors(.sets-aliased-utility-variables());
+
+    &,
+    &.theme-highcontrast,
+    &:not(.theme-highcontrast) {
+        &:not(.theme-dark),
+        &.theme-dark .theme-light__forced,
+        &.theme-system .theme-light__forced,
+        &.theme-dark,
+        &:not(.theme-dark) .theme-dark__forced {
+            .create-colors(.sets-aliased-utility-variables());
+        }
+        &.theme-system {
+            @media (prefers-color-scheme: dark) {
+                .create-colors(.sets-aliased-utility-variables());
+            }
+        }
+    }
 }
 
 // Light, dark mode

package/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.0.0-rc.7",
+    "version": "2.0.0-rc.9",
     "files": [
         "dist",
         "lib"