@stackoverflow/stacks 1.10.2 → 2.0.0-rc.0

package/lib/components/input_textarea/input_textarea.less

@@ -1,7 +1,7 @@
 .s-input,
 .s-textarea {
-    --_in-bc: var(--bc-darker);
-    --_in-bc-focus: var(--theme-secondary-300);
+    --_in-bc: var(--bc-dark);
+    --_in-bc-focus: var(--theme-secondary-400);
     --_in-bg: var(--white);
     --_in-br: var(--br-md);
     --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -12,7 +12,7 @@
     --_in-o: unset;
     --_in-px: 0.7em;
     --_in-py: 0.6em;
-    --_in-placeholder-fc: var(--black-200);
+    --_in-placeholder-fc: var(--black-300);
 
     // CONTEXTUAL STYLES
     @supports (-webkit-overflow-scrolling: touch) {
@@ -49,9 +49,9 @@
             --_in-fc: var(--fc-light);
         });
 
-        --_in-bg: var(--black-050);
+        --_in-bg: var(--black-150);
         --_in-bc: var(--bc-light);
-        --_in-fc: var(--black-200);
+        --_in-fc: var(--black-300);
         --_in-fc-focus: var(--_in-fc);
     }
 
@@ -59,7 +59,7 @@
         in,
         { .highcontrast-mode({ --_in-bc: var(--red-400); }); },
         { .highcontrast-mode({ --_in-bc: var(--green-400); }); },
-        { .highcontrast-mode({ --_in-bc: var(--yellow-600); }); }
+        { .highcontrast-mode({ --_in-bc: var(--yellow-500); }); }
     );
 
     // Sizes

package/lib/components/label/label.less

@@ -44,7 +44,7 @@
     // Default styling is optional.
     &--status { // TODO convert to require parent class for styling [1]
         --_la-status-b: none;
-        --_la-status-bg: var(--black-050);
+        --_la-status-bg: var(--black-150);
         --_la-status-fc: var(--fc-medium);
 
         .highcontrast-mode({
@@ -53,27 +53,27 @@
 
         // TODO: include child component class (without variant) on selector
         &__beta {
-            --_la-status-bg: var(--blue-100);
-            --_la-status-fc: var(--blue-700);
+            --_la-status-bg: var(--blue-300);
+            --_la-status-fc: var(--blue-500);
         }
 
         &__new {
-            --_la-status-bg: var(--green-100);
-            --_la-status-fc: var(--green-700);
+            --_la-status-bg: var(--green-300);
+            --_la-status-fc: var(--green-500);
 
             .dark-mode({
-                --_la-status-bg: var(--green-050);
-                --_la-status-fc: var(--green-800);
+                --_la-status-bg: var(--green-200);
+                --_la-status-fc: var(--green-600);
             });
         }
 
         &__required {
-            --_la-status-bg: var(--red-100);
-            --_la-status-fc: var(--red-700);
+            --_la-status-bg: var(--red-300);
+            --_la-status-fc: var(--red-500);
 
             .dark-mode({
-                --_la-status-bg: var(--red-050);
-                --_la-status-fc: var(--red-800);
+                --_la-status-bg: var(--red-200);
+                --_la-status-fc: var(--red-600);
             });
         }
 

package/lib/components/link/link.a11y.test.ts

@@ -24,13 +24,5 @@ describe("link", () => {
         attributes: {
             href: "#",
         },
-        skippedTestids: [
-            "s-link-dark", // TODO fix contrast issue
-            "s-link-dark-dropdown", // TODO fix contrast issue
-            "s-link-dark-danger", // TODO fix contrast issue
-            "s-link-dark-danger-dropdown", // TODO fix contrast issue
-            "s-link-dark-underlined", // TODO fix contrast issue
-            "s-link-dark-underlined-dropdown", // TODO fix contrast issue
-        ],
     });
 });

package/lib/components/link/link.less

@@ -60,15 +60,15 @@ a,
 
         // VARIANTS
         &__danger {
-            --_li-fc: var(--red-500);
+            --_li-fc: var(--red-400);
             --_li-fc-hover: var(--red-400);
-            --_li-fc-visited: var(--red-600);
+            --_li-fc-visited: var(--red-500);
         }
 
         &__grayscale {
-            --_li-fc: var(--black-800);
-            --_li-fc-hover: var(--black-900);
-            --_li-fc-visited: var(--black-700);
+            --_li-fc: var(--black-600);
+            --_li-fc-hover: var(--black-600);
+            --_li-fc-visited: var(--black-500);
         }
 
         &__inherit {
@@ -78,9 +78,9 @@ a,
         }
 
         &__muted {
-            --_li-fc: var(--black-500);
-            --_li-fc-hover: var(--black-600);
-            --_li-fc-visited: var(--black-700);
+            --_li-fc: var(--black-400);
+            --_li-fc-hover: var(--black-500);
+            --_li-fc-visited: var(--black-500);
         }
     }
 

package/lib/components/link-preview/link-preview.less

@@ -17,15 +17,15 @@
     & &--footer {
         a {
             &:visited {
-                color: var(--black-700);
+                color: var(--black-500);
             }
             &:hover,
             &:active,
             &:focus {
-                color: var(--black-600);
+                color: var(--black-500);
             }
 
-            color: var(--black-500);
+            color: var(--black-400);
             cursor: pointer;
             text-decoration: none;
         }
@@ -51,14 +51,14 @@
     & &--details {
         margin-top: var(--_lp-details-mt);
 
-        color: var(--black-500);
+        color: var(--black-400);
         font-size: var(--fs-caption);
     }
 
     & &--footer {
         flex-direction: var(--_lp-footer-fd);
 
-        background: var(--black-025);
+        background: var(--black-100);
         border-bottom-left-radius: var(--br-sm);
         border-bottom-right-radius: var(--br-sm);
         border-top: var(--su-static1) solid var(--bc-medium);
@@ -69,7 +69,7 @@
     }
 
     & &--header {
-        background: var(--black-025);
+        background: var(--black-100);
         border-bottom: var(--su-static1) solid var(--bc-medium);
         border-top-left-radius: var(--br-sm);
         border-top-right-radius: var(--br-sm);
@@ -78,7 +78,7 @@
     }
 
     & &--icon {
-        color: var(--black-800); // Set the default color of the integration's icon. Most likely this will be overridden by the integration icon's native colors.
+        color: var(--black-600); // Set the default color of the integration's icon. Most likely this will be overridden by the integration icon's native colors.
         margin-right: var(--su8);
     }
 
@@ -86,11 +86,11 @@
         padding-left: var(--_lp-misc-pl);
         padding-top: var(--_lp-misc-pt);
 
-        color: var(--black-500);
+        color: var(--black-400);
     }
 
     & &--title {
-        color: var(--black-900);
+        color: var(--black-600);
         font-size: var(--fs-body3);
         font-weight: bold;
     }

package/lib/components/menu/menu.less

@@ -5,8 +5,8 @@
 
     // CONTEXTUAL STYLES
     .dark-mode({
-        --_me-divider-bg: var(--bc-lightest);
-        --_me-label-btc: var(--bc-lightest);
+        --_me-divider-bg: var(--bc-light);
+        --_me-label-btc: var(--bc-light);
     });
 
     // CHILD ELEMENTS
@@ -27,7 +27,7 @@
     }
 
     & &--title {
-        color: var(--black-600);
+        color: var(--black-500);
         font-size: var(--fs-fine);
         padding: var(--su8) var(--su12);
         text-transform: uppercase;

package/lib/components/modal/modal.less

@@ -1,5 +1,6 @@
 .s-modal {
-    --_mo-bg: fade(@black-900, 50%); // Background remains fixed
+    // TODO Replace this Less variable with a CSS variable or other solution
+    --_mo-bg: fade(.set-black()[600], 50%); // Background remains fixed
     --_mo-hmx: unset;
     --_mo-wmx: unset;
     --_mo-close-t: var(--su8);
@@ -37,8 +38,8 @@
     // VARIANTS
     &.has-danger,
     &&__danger {
-        --_mo-bg: darken(fade(@red-900, 50%), 23%);
-        --_mo-header-fc: var(--red-600);
+        --_mo-bg: darken(fade(.set-red()[600], 50%), 18%);
+        --_mo-header-fc: var(--red-500);
     }
 
     // CHILD ELEMENTS
@@ -61,7 +62,7 @@
 
     & &--dialog {
         .dark-mode({
-            --_mo-dialog-bg: var(--black-100);
+            --_mo-dialog-bg: var(--black-225);
         });
 
         padding: var(--_mo-dialog-pt) var(--su24) var(--su24);

package/lib/components/navigation/navigation.less

@@ -4,22 +4,22 @@
     --_na-p: var(--su2) 0;
     --_na-gap: var(--su4);
     --_na-item-bg: none;
-    --_na-item-fc: var(--black-600);
+    --_na-item-fc: var(--black-500);
     --_na-item-fs: unset;
     --_na-item-p: var(--su6) var(--su12);
     --_na-item-py: var(--su12);
     --_na-item-ws: nowrap;
-    --_na-item-bg-hover: var(--black-075);
+    --_na-item-bg-hover: var(--black-200);
     --_na-item-fc-hover: var(--_na-item-fc);
-    --_na-item-selected-bg: var(--theme-primary-color);
+    --_na-item-selected-bg: var(--theme-primary);
     --_na-item-selected-fc: var(--white);
-    --_na-item-selected-bg-hover: var(--theme-primary-600);
+    --_na-item-selected-bg-hover: var(--theme-primary-500);
     --_na-title-mt: var(--su16);
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
-        --_na-item-bg-hover: var(--black-600);
-        --_na-item-fc-hover: var(--black-100);
+        --_na-item-bg-hover: var(--black-500);
+        --_na-item-fc-hover: var(--black-225);
     });
 
     // MODIFIERS
@@ -44,14 +44,14 @@
 
     // VARIANTS
     &&__muted {
-        --_na-item-selected-bg: var(--black-050);
-        --_na-item-selected-fc: var(--black-800);
+        --_na-item-selected-bg: var(--black-150);
+        --_na-item-selected-fc: var(--black-600);
         --_na-item-selected-bg-hover: var(--_na-item-bg);
 
         .highcontrast-mode({
-            --_na-item-selected-bg: var(--black-800);
-            --_na-item-selected-fc: var(--black-050);
-            --_na-item-selected-bg-hover: var(--black-900);
+            --_na-item-selected-bg: var(--black-600);
+            --_na-item-selected-fc: var(--black-150);
+            --_na-item-selected-bg-hover: var(--black-600);
         });
     }
 

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"