@stackoverflow/stacks 1.10.3 → 2.0.0-rc.1

package/lib/components/notice/notice.less

@@ -1,9 +1,9 @@
 .construct-notice-component(@baseClass) {
     --_no-bc: var(--bc-medium);
-    --_no-bg: var(--black-050);
+    --_no-bg: var(--black-150);
     --_no-fc: var(--fc-medium);
-    --_no-btn-bg-focus: var(--black-100);
-    --_no-btn-bg-active: var(--black-150);
+    --_no-btn-bg-focus: var(--black-225);
+    --_no-btn-bg-active: var(--black-250);
 
     // MODIFIERS
     &:not(&__important) {
@@ -22,10 +22,10 @@
 
     &__important {
         --_no-bc: var(--_no-bg);
-        --_no-bg: var(--black-700);
+        --_no-bg: var(--black-500);
         --_no-fc: var(--white);
-        --_no-btn-bg-focus: var(--black-800);
-        --_no-btn-bg-active: var(--black-900);
+        --_no-btn-bg-focus: var(--black-600);
+        --_no-btn-bg-active: var(--black-600);
 
         .highcontrast-mode({
             --_no-bc: var(--_no-bg);
@@ -34,61 +34,61 @@
 
     // VARIANTS
     &__danger {
-        --_no-bc: var(--red-200);
-        --_no-bg: var(--red-050);
-        --_no-btn-bg-active: var(--red-200);
-        --_no-btn-bg-focus: var(--red-100);
+        --_no-bc: var(--red-300);
+        --_no-bg: var(--red-200);
+        --_no-btn-bg-active: var(--red-300);
+        --_no-btn-bg-focus: var(--red-300);
 
         &:not(.@{baseClass}__important) {
             .highcontrast-mode({
-                --_no-bg: var(--red-200);
+                --_no-bg: var(--red-300);
             });
         }
 
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
-            --_no-bg: var(--red-500);
-            --_no-btn-bg-active: var(--red-700);
-            --_no-btn-bg-focus: var(--red-600);
+            --_no-bg: var(--red-400);
+            --_no-btn-bg-active: var(--red-500);
+            --_no-btn-bg-focus: var(--red-500);
 
             .dark-mode({
                 --_no-bg: var(--red-400);
-                --_no-fc: var(--black-900);
+                --_no-fc: var(--black-600);
             });
 
             .highcontrast-dark-mode({
-                --_no-bg: var(--red-500);
+                --_no-bg: var(--red-400);
                 --_no-fc: var(--white);
             });
         }
     }
 
     &__info {
-        --_no-bc: var(--theme-secondary-150);
-        --_no-bg: var(--theme-secondary-050);
-        --_no-btn-bg-focus: var(--theme-secondary-100);
-        --_no-btn-bg-active: var(--theme-secondary-150);
-        --_no-code-bg: var(--theme-secondary-150);
+        --_no-bc: var(--theme-secondary-300);
+        --_no-bg: var(--theme-secondary-200);
+        --_no-btn-bg-focus: var(--theme-secondary-300);
+        --_no-btn-bg-active: var(--theme-secondary-300);
+        --_no-code-bg: var(--theme-secondary-300);
 
         &:not(.@{baseClass}__important) {
             .highcontrast-mode({
-                --_no-bg: var(--theme-secondary-100);
+                --_no-bg: var(--theme-secondary-300);
             });
 
             .highcontrast-dark-mode({
-                --_no-bg: var(--theme-secondary-100);
+                --_no-bg: var(--theme-secondary-300);
             });
         }
 
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--theme-secondary-400);
-            --_no-btn-bg-active: var(--theme-secondary-600);
-            --_no-btn-bg-focus: var(--theme-secondary-500);
+            --_no-btn-bg-active: var(--theme-secondary-500);
+            --_no-btn-bg-focus: var(--theme-secondary-400);
 
             .dark-mode({
-                --_no-bg: var(--theme-secondary-300);
-                --_no-fc: var(--black-900);
+                --_no-bg: var(--theme-secondary-400);
+                --_no-fc: var(--black-600);
             });
 
             .highcontrast-dark-mode({
@@ -99,63 +99,63 @@
     }
 
     &__success {
-        --_no-bc: var(--green-200);
-        --_no-bg: var(--green-050);
-        --_no-btn-bg-active: var(--green-200);
-        --_no-btn-bg-focus: var(--green-100);
+        --_no-bc: var(--green-300);
+        --_no-bg: var(--green-200);
+        --_no-btn-bg-active: var(--green-300);
+        --_no-btn-bg-focus: var(--green-300);
 
         &:not(.@{baseClass}__important) {
             .highcontrast-mode({
-                --_no-bg: var(--green-200);
+                --_no-bg: var(--green-300);
             });
         }
 
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--green-400);
-            --_no-fc: var(--black-900);
-            --_no-btn-bg-active: var(--green-600);
-            --_no-btn-bg-focus: var(--green-500);
+            --_no-fc: var(--black-600);
+            --_no-btn-bg-active: var(--green-500);
+            --_no-btn-bg-focus: var(--green-400);
 
             .dark-mode({
-                --_no-bg: var(--green-500);
+                --_no-bg: var(--green-400);
                 --_no-fc: var(--white);
             });
 
             .highcontrast-mode({
-                --_no-bg: var(--green-500);
+                --_no-bg: var(--green-400);
                 --_no-fc: var(--white);
             });
         }
     }
 
     &__warning {
-        --_no-bc: var(--yellow-300);
-        --_no-bg: var(--yellow-050);
-        --_no-btn-bg-active: var(--yellow-300);
-        --_no-btn-bg-focus: var(--yellow-200);
-        --_no-code-bg: var(--yellow-200);
+        --_no-bc: var(--yellow-400);
+        --_no-bg: var(--yellow-200);
+        --_no-btn-bg-active: var(--yellow-400);
+        --_no-btn-bg-focus: var(--yellow-300);
+        --_no-code-bg: var(--yellow-300);
 
         &:not(.@{baseClass}__important) {
             .highcontrast-mode({
-                --_no-bg: var(--yellow-200);
+                --_no-bg: var(--yellow-300);
             });
         }
 
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--yellow-400);
-            --_no-fc: var(--black-900);
-            --_no-btn-bg-active: var(--yellow-600);
-            --_no-btn-bg-focus: var(--yellow-500);
+            --_no-fc: var(--black-600);
+            --_no-btn-bg-active: var(--yellow-500);
+            --_no-btn-bg-focus: var(--yellow-400);
 
             .dark-mode({
-                --_no-bg: var(--yellow-600);
+                --_no-bg: var(--yellow-500);
                 --_no-fc: var(--white);
             });
 
             .highcontrast-mode({
-                --_no-bg: var(--yellow-700);
+                --_no-bg: var(--yellow-500);
                 --_no-fc: var(--white);
             });
         }

package/lib/components/pagination/pagination.less

@@ -3,8 +3,8 @@
         --_pa-item-bg: transparent;
         --_pa-item-bc: var(--bc-medium);
         --_pa-item-fc: var(--fc-medium);
-        --_pa-item-bg-hover: var(--black-100);
-        --_pa-item-bc-hover: var(--bc-darker);
+        --_pa-item-bg-hover: var(--black-225);
+        --_pa-item-bc-hover: var(--bc-dark);
         --_pa-item-fc-hover: var(--fc-dark);
 
         // CONTEXTUAL STYLES
@@ -12,7 +12,7 @@
 
         // MODIFIERS
         &.is-selected {
-            --_pa-item-bg: var(--theme-primary-color);
+            --_pa-item-bg: var(--theme-primary);
             --_pa-item-bc: transparent;
             --_pa-item-fc: var(--white);
         }

package/lib/components/popover/popover.less

@@ -20,10 +20,10 @@
 
     // CONTEXTUAL STYLES
     .dark-mode({
-        --_po-bg: var(--black-075);
+        --_po-bg: var(--black-200);
         --_po-bc: var(--bc-light);
         --_po-bs: var(--bs-lg);
-        --_po-arrow-fc: var(--black-075);
+        --_po-arrow-fc: var(--black-200);
     });
 
     // MODIFIERS

package/lib/components/popover/tooltip.test.ts

@@ -41,7 +41,7 @@ describe("tooltip", () => {
                 <svg
                     data-testid="svg"
                     aria-hidden="true"
-                    class="bg-red-500"
+                    class="bg-red-400"
                     width="18"
                     height="18"
                     viewBox="0 0 18 18"

package/lib/components/post-summary/post-summary.less

@@ -13,11 +13,11 @@
     --_ps-stats-fd: column;
     --_ps-stats-w: calc(var(--su96) + var(--su12));
     // Stats item modifiers
-    --_ps-has-answers-bc: var(--green-700);
+    --_ps-has-answers-bc: var(--green-500);
     --_ps-has-answers-bg: unset;
-    --_ps-has-answers-fc: var(--green-700);
-    --_ps-has-accepted-answers-bc: var(--green-700);
-    --_ps-has-accepted-answers-bg: var(--green-700);
+    --_ps-has-answers-fc: var(--green-500);
+    --_ps-has-accepted-answers-bc: var(--green-500);
+    --_ps-has-accepted-answers-bg: var(--green-500);
     --_ps-has-accepted-answers-fc: var(--white);
     --_ps-stats-item-emphasized-fc: var(--_ps-state-fc, var(--fc-dark));
 
@@ -50,15 +50,15 @@
     &&__deleted,
     &&__ignored {
         --_ps-o: 0.75;
-        --_ps-has-answers-bc: var(--black-300);
+        --_ps-has-answers-bc: var(--black-350);
         --_ps-has-answers-bg: transparent;
         --_ps-has-answers-fc: var(--_ps-state-fc);
         --_ps-has-accepted-answers-bc: transparent;
-        --_ps-has-accepted-answers-bg: var(--black-050);
+        --_ps-has-accepted-answers-bg: var(--black-150);
         --_ps-has-accepted-answers-fc: var(--_ps-state-fc);
-        --_ps-meta-tags-tag-bg: var(--black-050);
+        --_ps-meta-tags-tag-bg: var(--black-150);
         --_ps-meta-tags-tag-fc: var(--_ps-state-fc);
-        --_ps-state-fc: var(--black-500);
+        --_ps-state-fc: var(--black-400);
 
         .s-post-summary--meta-tags {
             a, // TODO: remove rule for `a` once Core replaces `.post-tag` with `.s-tag`
@@ -73,7 +73,7 @@
                     });
 
                     background-color: var(--_ps-meta-tags-tag-bg);
-                    color: var(--black-600);
+                    color: var(--black-500);
                 }
             }
         }
@@ -97,26 +97,26 @@
     }
 
     &&__deleted {
-        --_ps-bg: var(--red-025);
-        --_ps-has-accepted-answers-bg: var(--black-075);
-        --_ps-has-accepted-answers-fc: var(--black-600);
-        --_ps-meta-tags-tag-bg: var(--black-075);
+        --_ps-bg: var(--red-100);
+        --_ps-has-accepted-answers-bg: var(--black-200);
+        --_ps-has-accepted-answers-fc: var(--black-500);
+        --_ps-meta-tags-tag-bg: var(--black-200);
 
         .is-deleted,
         .s-badge__danger.s-badge__filled {
             .dark-mode({
-                background-color: var(--red-800);
+                background-color: var(--red-600);
                 color: var(--white);
             });
 
-            background-color: var(--red-600);
+            background-color: var(--red-500);
         }
     }
 
     &&__watched {
         &:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
-            --_ps-bg: var(--yellow-050);
-            --_ps-stats-fc: var(--black-500);
+            --_ps-bg: var(--yellow-200);
+            --_ps-stats-fc: var(--black-400);
             --_ps-content-title-a-fc: var(--theme-post-title-color);
             --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover);
             --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited);
@@ -137,7 +137,7 @@
 
                 .s-user-card--rep,
                 .s-user-card--time {
-                    color: var(--black-600);
+                    color: var(--black-500);
                 }
             }
         }
@@ -156,10 +156,10 @@
 
             &:before {
                 .highcontrast-mode({
-                    background: var(--black-600);
+                    background: var(--black-500);
                 });
 
-                background: var(--black-150);
+                background: var(--black-250);
                 border-radius: var(--su8);
                 bottom: 0;
                 content: "";
@@ -177,7 +177,7 @@
 
         &--answer-excerpt {
             .v-truncate4;
-            color: var(--black-600);
+            color: var(--black-500);
             margin-bottom: var(--su8);
         }
 
@@ -374,56 +374,56 @@
             }
 
             &.has-bounty { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__bounty`
-                background-color: var(--blue-600);
+                background-color: var(--blue-500);
                 color: var(--white);
             }
 
             // Hotness
             &.is-warm {
-                color: var(--_ps-state-fc, var(--yellow-900));
+                color: var(--_ps-state-fc, var(--yellow-600));
             }
 
             &.is-hot {
-                color: var(--_ps-state-fc, var(--orange-800));
+                color: var(--_ps-state-fc, var(--orange-600));
             }
 
             &.is-supernova {
-                color: var(--_ps-state-fc, var(--red-800));
+                color: var(--_ps-state-fc, var(--red-600));
             }
 
             // Status
             &.is-archived { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__icon`
-                background-color: var(--black-100);
-                border-color: var(--black-600);
-                color: var(--black-900);
+                background-color: var(--black-225);
+                border-color: var(--black-500);
+                color: var(--black-600);
             }
 
             &.is-closed { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__danger s-badge__icon`
-                background-color: var(--red-100);
-                border-color: var(--red-600);
-                color: var(--red-900);
+                background-color: var(--red-300);
+                border-color: var(--red-500);
+                color: var(--red-600);
             }
 
             &.is-draft { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__info s-badge__icon`
-                background-color: var(--blue-100);
-                border-color: var(--blue-600);
-                color: var(--blue-900);
+                background-color: var(--blue-300);
+                border-color: var(--blue-500);
+                color: var(--blue-600);
             }
 
             &.is-pinned { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__filled s-badge__icon`
-                background-color: var(--black-700);
+                background-color: var(--black-500);
                 color: var(--white);
             }
 
             &.is-published {
-                background-color: var(--black-050);
-                color: var(--black-800);
+                background-color: var(--black-150);
+                color: var(--black-600);
             }
 
             &.is-review { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__warning s-badge__icon`
-                background-color: var(--yellow-100);
-                border-color: var(--yellow-600);
-                color: var(--yellow-900);
+                background-color: var(--yellow-300);
+                border-color: var(--yellow-500);
+                color: var(--yellow-600);
             }
 
             &__emphasized {

package/lib/components/progress-bar/progress-bar.less

@@ -3,7 +3,7 @@
     @pr-circle-circumference: (2 * pi() * 14); // 2πr, r = 14.
     // COMPONENT-SPECIFIC CUSTOM PROPERTIES
     --_pr-bar: var(--br-sm);
-    --_pr-bg: var(--black-200);
+    --_pr-bg: var(--black-300);
     --_pr-h: unset;
     --_pr-size: unset;
     --_pr-w: 100%;
@@ -20,26 +20,26 @@
 
     // MODIFIERS
     &&__brand {
-        --_pr-bar-bg: var(--orange-500);
+        --_pr-bar-bg: var(--orange-400);
     }
 
     &&__bronze {
-        --_pr-bar-bg: var(--bronze-lighter);
-        --_pr-label-bc: var(--bronze-darker);
+        --_pr-bar-bg: var(--bronze-100);
+        --_pr-label-bc: var(--bronze-400);
     }
 
     &&__gold {
-        --_pr-bar-bg: var(--gold-lighter);
-        --_pr-label-bc: var(--gold-darker);
+        --_pr-bar-bg: var(--gold-100);
+        --_pr-label-bc: var(--gold-400);
     }
 
     &&__info {
-        --_pr-bar-bg: var(--blue-500);
+        --_pr-bar-bg: var(--blue-400);
     }
 
     &&__silver {
-        --_pr-bar-bg: var(--silver-lighter);
-        --_pr-label-bc: var(--silver-darker);
+        --_pr-bar-bg: var(--silver-100);
+        --_pr-label-bc: var(--silver-400);
     }
 
     // VARIANTS
@@ -108,12 +108,12 @@
     }
 
     &&__privilege {
-        --_pr-bar-bg: var(--green-050);
+        --_pr-bar-bg: var(--green-200);
         --_pr-label-ai: center;
         --_pr-label-bc: var(--green-400);
         --_pr-label-jc: center;
 
-        .highcontrast-mode({ --_pr-bar-bg: var(--green-200); });
+        .highcontrast-mode({ --_pr-bar-bg: var(--green-300); });
     }
 
     // TODO move `.s-progress__stepped` to entirely separate component (or consider deprecating)
@@ -135,7 +135,7 @@
                     }
                 }
 
-                background: var(--black-300);
+                background: var(--black-350);
                 border-radius: 0;
                 height: var(--su-static6);
                 position: absolute;
@@ -146,7 +146,7 @@
             &--label { // Override a ton of properties
                 border: 0;
                 border-radius: 0;
-                color: var(--black-500);
+                color: var(--black-400);
                 display: block;
                 font-size: var(--fs-body1);
                 height: auto;
@@ -203,9 +203,9 @@
                 });
 
                 align-items: center;
-                background: var(--black-300);
+                background: var(--black-350);
                 border-radius: 100%;
-                color: @white;
+                color: var(--_white-static);
                 display: flex;
                 height: var(--su-static24);
                 justify-content: center;

package/lib/components/prose/prose.less

@@ -8,7 +8,7 @@
     --_pr-lh: 1.5;
     --_pr-blockquote-ml: 1em;
     --_pr-blockquote-mt: 0;
-    --_pr-blockquote-before-bg: var(--black-150);
+    --_pr-blockquote-before-bg: var(--black-250);
     --_pr-code-fs: var(--fs-body1);
     --_pr-h1-fs: var(--fs-headline1);
     --_pr-h2-fs: var(--fs-title);
@@ -16,10 +16,10 @@
     --_pr-h4-fs: var(--fs-body3);
     --_pr-h5-fs: var(--fs-body2);
     --_pr-h6-fs: var(--fs-body1);
-    --_pr-hr-bg: var(--black-100); // used for both background-color and color properties
+    --_pr-hr-bg: var(--black-225); // used for both background-color and color properties
     --_pr-img-mb: @pr-spacing;
-    --_pr-kbd-bc: var(--black-300);
-    --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 @white;
+    --_pr-kbd-bc: var(--black-350);
+    --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static);
     --_pr-spoiler-cursor: pointer;
     --_pr-spoiler-after-t: 1em;
     --_pr-soiler-after-o: unset;
@@ -32,13 +32,13 @@
     // CONDITIONAL STYLES
     .dark-mode({
         --_pr-kbd-bc: transparent;
-        --_pr-kbd-btc: @black-500;
+        --_pr-kbd-btc: var(--black-400);
         --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.8);
     });
 
     .highcontrast-mode({
-        --_pr-blockquote-before-bg: var(--black-600);
-        --_pr-hr-bg: var(--black-500);
+        --_pr-blockquote-before-bg: var(--black-500);
+        --_pr-hr-bg: var(--black-400);
     });
 
     #stacks-internals #screen-sm({
@@ -79,8 +79,8 @@
 
         > code {
             padding: var(--su2) var(--su4);
-            color: var(--black-800);
-            background-color: var(--black-075);
+            color: var(--black-600);
+            background-color: var(--black-200);
             border-radius: var(--br-sm);
         }
     }
@@ -265,7 +265,7 @@
             --_pr-blockquote-ml: 0; // We don't need the intial indentation on nested blockquotes
         }
 
-        color: var(--black-600);
+        color: var(--black-500);
         margin: var(--_pr-blockquote-mt) 1em @pr-spacing var(--_pr-blockquote-ml);
         padding: 0.8em 0.8em 0.8em 1em;
         position: relative;
@@ -315,9 +315,9 @@
         border-top-color: var(--_pr-kbd-btc, var(--_pr-kbd-bc));
         box-shadow: var(--_pr-kbd-bs);
 
-        background-color: var(--black-075);
+        background-color: var(--black-200);
         border-radius: var(--br-sm);
-        color: var(--black-800);
+        color: var(--black-600);
         display: inline-block;
         font-family: var(--ff-sans);
         font-size: var(--fs-fine);
@@ -385,7 +385,7 @@
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E");
             background-position: center right;
             background-repeat: no-repeat;
-            color: var(--black-500);
+            color: var(--black-400);
             content: attr(data-spoiler) " ";
             font-size: var(--fs-body1);
             padding-right: calc(var(--su24) - var(--su2));
@@ -409,9 +409,9 @@
 
         cursor: var(--_pr-spoiler-cursor);
 
-        background: var(--black-050);
+        background: var(--black-150);
         border-radius: var(--br-md);
-        color: var(--black-800);
+        color: var(--black-600);
         min-height: var(--su-static48); // TODO: Let's find a solution that doesn't have a magic number
     }
 

package/lib/components/select/select.less

@@ -1,8 +1,8 @@
 .s-select {
     --_se-arrow-bc: currentColor transparent;
     --_se-arrow-size: var(--su-static4); // Constant
-    --_se-select-bc: var(--bc-darker);
-    --_se-select-bc-focus: var(--theme-secondary-300);
+    --_se-select-bc: var(--bc-dark);
+    --_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);
     --_se-select-br: var(--br-md);
@@ -26,7 +26,7 @@
     .validation-states(se-select);
 
     .is-disabled & {
-        --_se-arrow-bc: var(--bc-darker) transparent;
+        --_se-arrow-bc: var(--bc-dark) transparent;
     }
 
     &&__sm {
@@ -90,8 +90,8 @@
         &[readonly],
         .is-readonly & { // [1]
             --_se-select-bc: var(--bc-light);
-            --_se-select-bg: var(--black-050);
-            --_se-select-fc: var(--black-200);
+            --_se-select-bg: var(--black-150);
+            --_se-select-fc: var(--black-300);
 
             .highcontrast-mode({
                 --_se-select-fc: var(--fc-light);