@stackoverflow/stacks 1.10.2 → 2.0.0-rc.0

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

@@ -6,17 +6,14 @@ describe("toggle-switch", () => {
     // Single toggle switch
     [true, false].forEach((checked) => {
         [true, false].forEach((disabled) => {
-            const idSuffix = `${checked ? "-checked" : ""}${
-                disabled ? "-disabled" : ""
+            const testidSuffix = `${checked ? "checked" : "unchecked"}${
+                disabled ? "-disabled" : "-enabled"
             }`;
-            const id = `toggle-switch${idSuffix}`;
+            const id = `toggle-switch-${testidSuffix}`;
 
             runComponentTests({
                 type: "visual",
                 baseClass: "s-toggle-switch",
-                modifiers: {
-                    global: idSuffix ? [idSuffix.substring(1)] : [], // for proper testid generation
-                },
                 tag: "input",
                 attributes: {
                     id,
@@ -24,6 +21,11 @@ describe("toggle-switch", () => {
                     ...(checked ? { checked: "" } : {}),
                     ...(disabled ? { disabled: "" } : {}),
                 },
+                options: {
+                    ...defaultOptions,
+                    includeNullModifier: false,
+                    testidSuffix,
+                },
                 template: ({ component, testid }) => html`
                     <div data-testid="${testid}" class="p4 ws1">
                         <label class="v-visible-sr" for="${id}">toggle</label>
@@ -40,15 +42,12 @@ describe("toggle-switch", () => {
             type: "visual",
             baseClass: "s-toggle-switch",
             variants: ["multiple"],
-            modifiers: {
-                global: offChecked ? ["off"] : [], // for proper testid generation
-            },
             children: {
                 default: `
-                    <input type="radio" name="group" id="four" ${
+                    <input type="radio" name="group" id="off" ${
                         offChecked ? 'checked=""' : ""
                     }>
-                    <label for="four" class="s-toggle-switch--label-off">Off</label>
+                    <label for="off" class="s-toggle-switch--label-off">Off</label>
                     <input type="radio" name="group" id="one" ${
                         !offChecked ? 'checked=""' : ""
                     }>
@@ -61,7 +60,9 @@ describe("toggle-switch", () => {
             },
             options: {
                 ...defaultOptions,
+                includeNullModifier: false,
                 includeNullVariant: false,
+                testidSuffix: offChecked ? "unchecked" : "checked",
             },
             template: ({ component, testid }) => html`
                 <div data-testid="${testid}" class="d-flex ai-center g8 p4 ws2">

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 {