@stackoverflow/stacks 1.10.3 → 2.0.0-rc.1

package/lib/components/sidebar-widget/sidebar-widget.less

@@ -14,7 +14,7 @@
         a:not(.button):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link) {
             &,
             &:visited {
-                color: var(--black-500);
+                color: var(--black-400);
             }
         }
     }
@@ -26,7 +26,7 @@
 
     // CHILD ELEMENTS
     & &--action {
-        color: var(--blue);
+        color: var(--blue-400);
         float: right;
         font-size: var(--fs-fine);
         line-height: calc(var(--fs-body1) * 1.5); // 19.5px - line-height should be the same as in the outside element, so the header and action baselines line up
@@ -69,7 +69,7 @@
             &__expanding-control {
                 &:before {
                     border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
-                    border-left-color: var(--bc-darker);
+                    border-left-color: var(--bc-dark);
                     border-right-width: 0;
                     content: '';
                     float: left;
@@ -100,9 +100,9 @@
             outline: none;
         }
 
-        background: var(--black-025);
+        background: var(--black-100);
         border-top: var(--su-static1) solid var(--_sw-header-bc);
-        color: var(--black-600);
+        color: var(--black-500);
         font-size: var(--fs-body2);
         font-weight: normal;
         margin: 0;
@@ -115,7 +115,7 @@
             &[aria-current="true"],
             &[aria-current="page"] {
                 &:before {
-                    border-left-color: var(--theme-primary-color);
+                    border-left-color: var(--theme-primary);
                     border-left-style: solid;
                     border-left-width: calc(var(--su-static1) * 3); // 3px
                     content: '';
@@ -153,12 +153,12 @@
                     }
                 }
 
-                #stacks-internals #bullet-arrow(var(--theme-primary-color));
+                #stacks-internals #bullet-arrow(var(--theme-primary));
                 color: var(--black);
                 font-weight: bold;
             }
 
-            #stacks-internals #bullet-arrow(var(--black-100));
+            #stacks-internals #bullet-arrow(var(--black-225));
             background-position: 0 calc((1.2em - calc(var(--su-static8) + var(--su-static2))) / 2); // 0 ((1.2em - 10) / 2)
             background-repeat: no-repeat;
             background-size: auto calc(var(--su-static8) + var(--su-static2)); // auto 10px
@@ -215,10 +215,10 @@
 // COLOR ALTERNATIVES
 .alternate-color(@name) {
     &.s-sidebarwidget__@{name} {
-        --_sw-bc: var(~"--@{name}-200");
+        --_sw-bc: var(~"--@{name}-300");
 
         .highcontrast-mode({
-            --_sw-bc: var(~"--@{name}-700");
+            --_sw-bc: var(~"--@{name}-500");
         });
 
         &:after,
@@ -228,11 +228,11 @@
         }
 
         .s-sidebarwidget--header {
-            background-color: var(~"--@{name}-100");
+            background-color: var(~"--@{name}-300");
             color: var(--fc-medium);
         }
 
-        background-color: var(~"--@{name}-050");
+        background-color: var(~"--@{name}-200");
         border-color: var(--_sw-bc);
     }
 }

package/lib/components/table/table.less

@@ -13,7 +13,7 @@
     --_ta-td-ta: left;
     --_ta-td-va: middle;
     --_ta-td-w: unset;
-    --_ta-thead-th-bg: var(--black-025);
+    --_ta-thead-th-bg: var(--black-100);
     --_ta-th-bbw: 0;
     --_ta-th-bc: var(--bc-medium);
     --_ta-th-fs: unset;
@@ -24,8 +24,8 @@
 
     // VARIANTS
     &&__stripes {
-        --_ta-tbody-tr-even-bg: var(--black-025);
-        --_ta-thead-th-bg: var(--black-050);
+        --_ta-tbody-tr-even-bg: var(--black-100);
+        --_ta-thead-th-bg: var(--black-150);
     }
 
     // MODIFIERS
@@ -113,7 +113,7 @@
 
         thead th {
             border-top-color: transparent;
-            border-bottom-color: var(--bc-darker);
+            border-bottom-color: var(--bc-dark);
             font-size: inherit;
             text-transform: initial;
             letter-spacing: initial;
@@ -142,7 +142,7 @@
             }
 
             &.is-sorted { //  Selected state
-                color: var(--black-900);
+                color: var(--black-600);
             }
 
             color: var(--fc-light);
@@ -285,8 +285,8 @@
         }
 
         &.is-disabled {
-            background-color: var(--black-025);
-            --_ta-tbody-tr-even-bg: var(--black-025);
+            background-color: var(--black-100);
+            --_ta-tbody-tr-even-bg: var(--black-100);
 
             th:not(.is-enabled),
             td:not(.is-enabled) {

package/lib/components/tag/tag.less

@@ -4,11 +4,11 @@
     --_ta-bc-selected: transparent;
     --_ta-bg: var(--theme-tag-background-color);
     --_ta-bg-hover: var(--theme-tag-hover-background-color);
-    --_ta-bg-selected: var(--theme-secondary-200);
+    --_ta-bg-selected: var(--theme-secondary-300);
     --_ta-br: var(--br-sm);
     --_ta-fc: var(--theme-tag-color);
     --_ta-fc-hover: var(--theme-tag-hover-color);
-    --_ta-fc-selected: var(--theme-secondary-900);
+    --_ta-fc-selected: var(--theme-secondary-600);
     --_ta-fs: var(--fs-caption);
     --_ta-lh: 1.846153846;
     --_ta-pl: var(--_ta-px);
@@ -99,41 +99,41 @@
 
     // moderator overrides other muted and required, required overrides muted
     &&__moderator {
-        --_ta-bc: var(--red-200);
-        --_ta-bg: var(--red-050);
-        --_ta-fc: var(--red-800);
-        --_ta-bc-hover: var(--red-300);
-        --_ta-bg-hover: var(--red-100);
-        --_ta-fc-hover: var(--red-900);
+        --_ta-bc: var(--red-300);
+        --_ta-bg: var(--red-200);
+        --_ta-fc: var(--red-600);
+        --_ta-bc-hover: var(--red-400);
+        --_ta-bg-hover: var(--red-300);
+        --_ta-fc-hover: var(--red-600);
         --_ta-bc-selected: var(--red-400);
-        --_ta-bg-selected: var(--red-200);
-        --_ta-fc-selected: var(--red-800);
+        --_ta-bg-selected: var(--red-300);
+        --_ta-fc-selected: var(--red-600);
     }
 
     &&__muted:not(&__moderator):not(&__required) {
         --_ta-bc: transparent;
-        --_ta-bg: var(--black-075);
-        --_ta-fc: var(--black-700);
+        --_ta-bg: var(--black-200);
+        --_ta-fc: var(--black-500);
         --_ta-bc-hover: transparent;
-        --_ta-bg-hover: var(--black-100);
-        --_ta-fc-hover: var(--black-800);
+        --_ta-bg-hover: var(--black-225);
+        --_ta-fc-hover: var(--black-600);
         --_ta-bc-selected: transparent;
-        --_ta-bg-selected: var(--black-200);
-        --_ta-fc-selected: var(--black-900);
+        --_ta-bg-selected: var(--black-300);
+        --_ta-fc-selected: var(--black-600);
 
         .highcontrast-mode({ --_ta-bc: currentColor; }); // Specificity has bit us, so we need this override
     }
 
     &&__required:not(&__moderator) {
-        --_ta-bc: var(--bc-darker);
-        --_ta-bg: var(--black-075);
-        --_ta-fc: var(--black-700);
-        --_ta-bc-hover: var(--black-300);
-        --_ta-bg-hover: var(--black-100);
-        --_ta-fc-hover: var(--black-800);
-        --_ta-bc-selected: var(--black-500);
-        --_ta-bg-selected: var(--black-200);
-        --_ta-fc-selected: var(--black-900);
+        --_ta-bc: var(--bc-dark);
+        --_ta-bg: var(--black-200);
+        --_ta-fc: var(--black-500);
+        --_ta-bc-hover: var(--black-350);
+        --_ta-bg-hover: var(--black-225);
+        --_ta-fc-hover: var(--black-600);
+        --_ta-bc-selected: var(--black-400);
+        --_ta-bg-selected: var(--black-300);
+        --_ta-fc-selected: var(--black-600);
     }
     &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {

package/lib/components/toggle-switch/toggle-switch.a11y.test.ts

@@ -64,13 +64,6 @@ describe("toggle-switch", () => {
             template: ({ component, testid }) => html`
                 <div data-testid="${testid}">${component}</div>
             `,
-            // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-            skippedTestids: [
-                "s-toggle-switch-dark-multiple",
-                "s-toggle-switch-light-multiple",
-                "s-toggle-switch-dark-multiple-off",
-                "s-toggle-switch-light-multiple-off",
-            ],
         });
     });
 });

package/lib/components/toggle-switch/toggle-switch.less

@@ -1,9 +1,9 @@
 .s-toggle-switch {
-    --_ts-bg: var(--black-300);
+    --_ts-bg: var(--black-350);
     --_ts-bg-ps: left center;
     --_ts-bs-color: transparent;
     --_ts-multiple-bg: unset;
-    --_ts-multiple-fc: var(--black-500);
+    --_ts-multiple-fc: var(--black-400);
 
     fieldset[disabled] &,
     &[disabled] {
@@ -19,7 +19,7 @@
             &:checked {
                 + label {
                     &.s-toggle-switch--label-off {
-                        --_ts-multiple-bg: var(--black-500);
+                        --_ts-multiple-bg: var(--black-400);
                         --_ts-multiple-fc: var(--white);
 
                         .dark-mode({ --_ts-multiple-bg: var(--black-350); });
@@ -27,7 +27,7 @@
 
                     &:not(.s-toggle-switch--label-off) {
                         --_ts-multiple-bg: var(--green-400);
-                        --_ts-multiple-fc: @white;
+                        --_ts-multiple-fc: var(--_white-static);
 
                         .highcontrast-mode({ --_ts-multiple-fc: var(--white); });
                     }

package/lib/components/topbar/topbar.less

@@ -30,9 +30,9 @@
         --theme-topbar-select-background: var(--theme-topbar-background-color);
 
         // Topbar items
-        --theme-topbar-item-color: var(--black-800);
-        --theme-topbar-item-color-hover: var(--black-900);
-        --theme-topbar-item-background-hover: var(--black-200);
+        --theme-topbar-item-color: var(--black-600);
+        --theme-topbar-item-color-hover: var(--black-600);
+        --theme-topbar-item-background-hover: var(--black-300);
         --theme-topbar-item-color-current: var(--black);
     });
 
@@ -146,36 +146,36 @@
     // TODO this only works 100% perfectly in light mode, due to child elements inheriting current theme colors
     // TODO extend forced light mode instead of overriding
 
-    --theme-topbar-background-color: @white;
-    --theme-topbar-bottom-border: 1px solid @black-100;
+    --theme-topbar-background-color: var(--_white-static);
+    --theme-topbar-bottom-border: 1px solid .set-black()[225];
 
     // Search input
-    --theme-topbar-search-color: @black-700;
-    --theme-topbar-search-background: @white;
-    --theme-topbar-search-placeholder: @black-400;
-    --theme-topbar-search-border: @black-200;
-    --theme-topbar-search-border-focus: @blue-300;
+    --theme-topbar-search-color: .set-black()[500];
+    --theme-topbar-search-background: var(--_white-static);
+    --theme-topbar-search-placeholder: .set-black()[400];
+    --theme-topbar-search-border: .set-black()[300];
+    --theme-topbar-search-border-focus: .set-blue()[400];
     --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
 
     // Search switcher
-    --theme-topbar-select-color: @black-700;
-    --theme-topbar-select-background: @black-050;
+    --theme-topbar-select-color: .set-black()[500];
+    --theme-topbar-select-background: .set-black()[150];
 
     // Items
-    --theme-topbar-item-color: @black-600;
-    --theme-topbar-item-color-hover: @black-800;
-    --theme-topbar-item-background-hover: @black-075;
-    --theme-topbar-item-color-current: @black;
-    --theme-topbar-item-border-current: var(--theme-primary-color);
+    --theme-topbar-item-color: .set-black()[500];
+    --theme-topbar-item-color-hover: .set-black()[600];
+    --theme-topbar-item-background-hover: .set-black()[200];
+    --theme-topbar-item-color-current: var(--_black-static);
+    --theme-topbar-item-border-current: var(--theme-primary);
 
     // TODO HACK remove everything below once light/dark topbars are inheriting forced themes correctly
     // redefine the variables for extra contrast in high-contrast mode
     .highcontrast-mode({
         // Topbar items
-        --theme-topbar-item-color: @black-800;
-        --theme-topbar-item-color-hover: @black-900;
-        --theme-topbar-item-background-hover: @black-075;
-        --theme-topbar-item-color-current: @black;
+        --theme-topbar-item-color: .set-black()[600];
+        --theme-topbar-item-color-hover: .set-black()[600]; // TODO hover is now identical color to base color
+        --theme-topbar-item-background-hover: .set-black()[200];
+        --theme-topbar-item-color-current: var(--_black-static);
     });
 
     --scrollbar: hsla(0, 0%, 0%, 0.2);
@@ -188,7 +188,7 @@
     // TODO this only works 100% perfectly in dark mode, due to child elements inheriting current theme colors
     // TODO extend forced dark mode instead of overriding
 
-    @topbar-actual-background: @black-800;
+    @topbar-actual-background: .set-black()[600];
     // TODO
     #calc-topbar-lightness-increase() when (lightness(@topbar-actual-background) < 15%) {
         @topbar-search-lightness-increase: 20%;
@@ -207,18 +207,18 @@
     --theme-topbar-search-placeholder: lighten(@topbar-actual-background, 60% + @topbar-search-lightness-increase);
     --theme-topbar-search-border: lighten(@topbar-actual-background, 20% + @topbar-search-lightness-increase);
     --theme-topbar-search-border-focus: lighten(@topbar-actual-background, 45% + @topbar-search-lightness-increase);
-    --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) fade(@white, 30%);
+    --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) fade(.set-white()[default], 30%);
 
     // Search switcher
     --theme-topbar-select-color: lighten(@topbar-actual-background, 60% + @topbar-search-lightness-increase);
     --theme-topbar-select-background: lighten(@topbar-actual-background, 10% + @topbar-search-lightness-increase);
 
     // Items
-    --theme-topbar-item-color: @black-100;
-    --theme-topbar-item-color-hover: @white;
-    --theme-topbar-item-background-hover: @black-700;
-    --theme-topbar-item-color-current: @white;
-    --theme-topbar-item-border-current: var(--theme-primary-color);
+    --theme-topbar-item-color: .set-black()[225];
+    --theme-topbar-item-color-hover: var(--_white-static);
+    --theme-topbar-item-background-hover: .set-black()[500];
+    --theme-topbar-item-color-current: var(--_white-static);
+    --theme-topbar-item-border-current: var(--theme-primary);
 
     // Themed border accent
     --theme-topbar-accent-border: none;
@@ -227,10 +227,10 @@
     // redefine the variables for extra contrast in high-contrast mode
     .highcontrast-mode({
         // Topbar items
-        --theme-topbar-item-color: @white;
-        --theme-topbar-item-color-hover: @white;
-        --theme-topbar-item-background-hover: @black-700;
-        --theme-topbar-item-color-current: @white;
+        --theme-topbar-item-color: var(--_white-static);
+        --theme-topbar-item-color-hover: var(--_white-static);
+        --theme-topbar-item-background-hover: .set-black()[500];
+        --theme-topbar-item-color-current: var(--_white-static);
 
         .s-badge {
             border-color: currentColor;
@@ -333,11 +333,11 @@
     }
 
     &.is-unread {
-        .topbar-notice-styles(var(--theme-primary-color), var(--theme-primary-color), var(--white));
+        .topbar-notice-styles(var(--theme-primary), var(--theme-primary), var(--white));
 
         &:hover,
         &:focus {
-            .topbar-notice-styles(var(--theme-primary-600), var(--theme-primary-600), var(--white));
+            .topbar-notice-styles(var(--theme-primary-500), var(--theme-primary-500), var(--white));
         }
     }
 }

package/lib/components/uploader/uploader.less

@@ -2,9 +2,9 @@
     // COMPONENT-SPECIFIC CONSTANTS
     --_up-bg-b-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); // Keeping this a custom property to save a few bytes
     // COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    --_up-bg: var(--black-025);
-    --_up-bg-focus: var(--black-050);
-    --_up-bg-bc: var(--black-150);
+    --_up-bg: var(--black-100);
+    --_up-bg-focus: var(--black-150);
+    --_up-bg-bc: var(--black-250);
     --_up-focus-ring-color: var(--focus-ring);
 
     // CONTEXTUAL STYLES
@@ -22,35 +22,35 @@
     }
 
     &.has-error {
-        --_up-bg: var(--red-050);
-        --_up-bg-focus: var(--red-100);
+        --_up-bg: var(--red-200);
+        --_up-bg-focus: var(--red-300);
         --_up-bg-bc: var(--red-400);
         --_up-bg-bc-hc-state: var(--red-400);
         --_up-focus-ring-color: var(--focus-ring-error);
-        --_up-link-fc: var(--red-900);
+        --_up-link-fc: var(--red-600);
     }
 
     &.has-success {
-        --_up-bg: var(--green-025);
-        --_up-bg-focus: var(--green-050);
+        --_up-bg: var(--green-100);
+        --_up-bg-focus: var(--green-200);
         --_up-bg-bc: var(--green-400);
         --_up-bg-bc-hc-state: var(--green-400);
         --_up-focus-ring-color: var(--focus-ring-success);
-        --_up-link-fc: var(--green-900);
+        --_up-link-fc: var(--green-600);
     }
 
     &.has-warning {
-        --_up-bg: var(--yellow-050);
-        --_up-bg-focus: var(--yellow-100);
+        --_up-bg: var(--yellow-200);
+        --_up-bg-focus: var(--yellow-300);
         --_up-bg-bc: var(--yellow-400);
         --_up-bg-bc-hc-state: var(--yellow-400);
         --_up-focus-ring-color: var(--focus-ring-warning);
-        --_up-link-fc: var(--yellow-900);
+        --_up-link-fc: var(--yellow-600);
     }
 
     &.is-active {
-        --_up-bg: var(--black-050);
-        --_up-bg-bc: var(--black-200);
+        --_up-bg: var(--black-150);
+        --_up-bg-bc: var(--black-300);
     }
 
     &.is-disabled {
@@ -172,7 +172,7 @@
     }
 
     & &--previews-heading {
-        color: var(--black-900);
+        color: var(--black-600);
         font-size: var(--fs-body2);
         font-weight: 600;
         padding-bottom: var(--su8);

package/lib/components/user-card/user-card.less

@@ -11,20 +11,20 @@
     --_uc-link-fs: var(--fs-caption);
     --_uc-link-ws: unset;
     --_uc-rep-fc: unset;
-    --_uc-time-fc: var(--black-500);
+    --_uc-time-fc: var(--black-400);
     --_uc-time-ws: unset;
     --_uc-type-fc: var(--theme-primary-400);
 
     // MODIFIERS
     &&__deleted {
-        --_uc-fc: var(--black-500);
+        --_uc-fc: var(--black-400);
     }
 
     &&__highlighted {
-        --_uc-bg: var(--theme-secondary-050);
+        --_uc-bg: var(--theme-secondary-200);
         --_uc-bar: var(--br-md);
-        --_uc-time-fc: var(--black-600);
-        --_uc-type-fc: var(--black-700);
+        --_uc-time-fc: var(--black-500);
+        --_uc-type-fc: var(--black-500);
     }
 
     // VARIANTS
@@ -44,7 +44,7 @@
 
     &&__minimal {
         --_uc-link-ws: nowrap;
-        --_uc-rep-fc: var(--black-600);
+        --_uc-rep-fc: var(--black-500);
         --_uc-time-ws: nowrap;
     }
 
@@ -52,7 +52,7 @@
     & &--location,
     & &--role {
         font-size: var(--fs-caption);
-        color: var(--black-500);
+        color: var(--black-400);
     }
 
     & &--awards {