@stackoverflow/stacks 1.10.3 → 2.0.0-rc.1

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

@@ -9,11 +9,5 @@ describe("card", () => {
         children: {
             default: `<p>This is a description of the card’s content.</p>`,
         },
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: [
-            "s-card-dark-muted",
-            "s-card-light-muted",
-            "s-card-highcontrast-light-muted",
-        ],
     });
 });

package/lib/components/check-control/check-control.a11y.test.ts

@@ -29,19 +29,6 @@ import "../../index";
                     ...defaultOptions,
                     testidSuffix: `${state}-${type}`,
                 },
-                // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-                skippedTestids: [
-                    /^s-check-control-dark-has-error-(checked|unchecked)-(checkbox|radio)$/,
-                    /^s-check-control-light-has-(success|warning)-(checked|unchecked)-(checkbox|radio)$/,
-                    "s-check-control-dark-has-success-checked-checkbox",
-                    "s-check-control-light-has-error-checked-checkbox",
-                    "s-check-control-dark-has-success-unchecked-checkbox",
-                    "s-check-control-light-has-error-unchecked-checkbox",
-                    "s-check-control-dark-has-success-checked-radio",
-                    "s-check-control-light-has-error-checked-radio",
-                    "s-check-control-dark-has-success-unchecked-radio",
-                    "s-check-control-light-has-error-unchecked-radio",
-                ],
             });
         });
     });

package/lib/components/check-control/check-control.visual.test.ts

@@ -12,7 +12,7 @@ import "../../index";
                     global: ["has-warning", "has-error", "has-success"],
                 },
                 attributes: {
-                    class: "bg-black-100 hs1 ws2 p8",
+                    class: "bg-black-225 hs1 ws2 p8",
                 },
                 children: {
                     default: `

package/lib/components/checkbox_radio/checkbox_radio.less

@@ -1,8 +1,8 @@
 .s-checkbox,
 .s-radio {
     --_ch-baw: var(--su-static1);
-    --_ch-bc: var(--bc-darker);
-    --_ch-bc-focus: var(--theme-secondary-300);
+    --_ch-bc: var(--bc-dark);
+    --_ch-bc-focus: var(--theme-secondary-400);
     --_ch-bg: var(--white);
     --_ch-bg-image: unset;
     --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -51,9 +51,9 @@
     // CONTEXTUAL STYLES
     .highcontrast-dark-mode({
         &:checked, &:indeterminate {
-            --_ch-bc: var(--blue-700) !important;
+            --_ch-bc: var(--blue-500) !important;
             --_ch-bc-focus: var(--_ch-bc);
-            --_ch-bg: var(--blue-300);
+            --_ch-bg: var(--blue-400);
         }
     });
 
@@ -93,7 +93,7 @@
     // CONTEXTUAL STYLES
     .highcontrast-dark-mode({
         &:checked {
-            --_ch-bc: var(--blue-300);
+            --_ch-bc: var(--blue-400);
             outline: var(--su-static1) solid var(--black);
         }
     });

package/lib/components/checkbox_radio/checkbox_radio.visual.test.ts

@@ -5,7 +5,7 @@ import "../../index";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const checkboxTemplate = ({ component, testid }: any) =>
     html`<div
-        class="d-inline-flex ai-center jc-center bg-black-100 hs1 ws1 p8"
+        class="d-inline-flex ai-center jc-center bg-black-225 hs1 ws1 p8"
         data-testid="${testid}"
     >
         ${component}

package/lib/components/code-block/code-block.less

@@ -1,9 +1,9 @@
 .s-code-block {
-    --_cb-line-numbers-bg: var(--black-050);
+    --_cb-line-numbers-bg: var(--black-150);
 
     // CONTEXTUAL STYLES
     .dark-mode({
-        --_cb-line-numbers-bg: var(--black-025);
+        --_cb-line-numbers-bg: var(--black-100);
     });
 
     // CHILD COMPONENTS
@@ -93,7 +93,7 @@
             border-color: var(--bc-medium);
             border-style: solid;
             border-width: 0 var(--su-static1) 0 0;
-            color: var(--black-300);
+            color: var(--black-350);
             float: left;
             margin: calc(var(--su12) * -1);
             margin-right: var(--su12);

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

@@ -24,11 +24,6 @@ import "../../index";
                     ${component}
                 </div>
             `,
-            // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-            skippedTestids: [
-                /^.*-is-disabled$/, // TODO: should these the disabled tests be excluded all together instead of skipped?
-                "s-description-dark",
-            ],
         });
     });
 });

package/lib/components/description/description.visual.test.ts

@@ -18,7 +18,7 @@ import "../../index";
             },
             template: ({ component, testid }) => html`
                 <div
-                    class="bg-black-100 d-inline-flex ai-center jc-center hs1 ws2 p8
+                    class="bg-black-225 d-inline-flex ai-center jc-center hs1 ws2 p8
                     ${isDisabled ? "is-disabled" : ""}"
                     data-testid="${testid}"
                 >

package/lib/components/input-fill/input-fill.less

@@ -1,6 +1,6 @@
 .s-input-fill {
-    --_if-bc: var(--bc-darker);
-    --_if-bg: var(--black-050);
+    --_if-bc: var(--bc-dark);
+    --_if-bg: var(--black-150);
     --_if-blw: 0;
     --_if-blr: 0;
     --_if-brr: 0;

package/lib/components/input-icon/input-icon.less

@@ -12,7 +12,7 @@
     }
 
     .has-warning & {
-        --_ii-fc: var(--yellow-600);
+        --_ii-fc: var(--yellow-500);
     }
 
     .is-disabled & {
@@ -20,7 +20,7 @@
     }
 
     .is-readonly & {
-        --_ii-fc: var(--black-200);
+        --_ii-fc: var(--black-300);
 
         .highcontrast-mode({
             --_ii-fc: var(--fc-light);

package/lib/components/input-message/input-message.less

@@ -16,20 +16,20 @@
 
     // MODIFIERS
     .has-error & {
-        --_im-fc: var(--red-500);
-        --_im-a-fc: var(--red-800);
-        --_im-a-fc-hover: var(--red-900);
+        --_im-fc: var(--red-400);
+        --_im-a-fc: var(--red-600);
+        --_im-a-fc-hover: var(--red-600);
     }
 
     .has-success & {
-        --_im-fc: var(--green-500);
-        --_im-a-fc: var(--green-800);
-        --_im-a-fc-hover: var(--green-900);
+        --_im-fc: var(--green-400);
+        --_im-a-fc: var(--green-600);
+        --_im-a-fc-hover: var(--green-600);
     }
 
     .has-warning & {
-        --_im-fc: var(--yellow-800);
-        --_im-a-fc: var(--yellow-900);
+        --_im-fc: var(--yellow-600);
+        --_im-a-fc: var(--yellow-600);
     }
 
     // CHILD ELEMENTS

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,26 +24,5 @@ describe("link", () => {
         attributes: {
             href: "#",
         },
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: [
-            "s-link-dark",
-            "s-link-dark-dropdown",
-            "s-link-dark-danger",
-            "s-link-dark-danger-dropdown",
-            "s-link-dark-underlined",
-            "s-link-dark-underlined-dropdown",
-            "s-link-dark-muted",
-            "s-link-dark-muted-dropdown",
-            "s-link-dark-visited",
-            "s-link-dark-visited-dropdown",
-            "s-link-light",
-            "s-link-light-danger",
-            "s-link-light-danger-dropdown",
-            "s-link-light-dropdown",
-            "s-link-light-muted",
-            "s-link-light-muted-dropdown",
-            "s-link-light-underlined",
-            "s-link-light-underlined-dropdown",
-        ],
     });
 });

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);
         });
     }