fix(button): adjust disabled state style in HC modes (#2160)

Author: giamir

.changeset/bold-tables-hug.md

@@ -15,15 +15,19 @@
     // Base
     &:not(&__danger):not(&__featured):not(&__tonal):not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google) { // Exclude default styles from impacting these variants
         --_bu-bg: var(--theme-button-color, var(--theme-secondary));
-        --_bu-bg-disabled: var(--black-350);
+        --_bu-bg-disabled: var(--theme-secondary-300);
         --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-500));
         --_bu-fc: var(--white);
-        --_bu-fc-disabled: var(--black-050);
+        --_bu-fc-disabled: var(--theme-secondary-100);
         --_bu-fc-hover: var(--theme-button-hover-color, var(--white));
         --_bu-badge-bg: var(--theme-secondary-500);
         --_bu-badge-fc: var(--white);
-        --_bu-badge-bg-disabled: var(--black-250);
-        --_bu-badge-fc-disabled: var(--black-050);
+        --_bu-badge-bg-disabled: var(--theme-secondary-300);
+        --_bu-badge-fc-disabled: var(--theme-secondary-100);
+
+        .highcontrast-mode({
+            --_bu-bg-disabled: var(--theme-secondary-300);
+        });
 
         &.s-btn__clear {
             --_bu-bg: transparent;
@@ -35,11 +39,15 @@
             --_bu-fc-hover: var(--_bu-fc);
             --_bu-badge-bg: var(--theme-secondary-100);
             --_bu-badge-fc: var(--theme-secondary-500);
-            --_bu-badge-bg-disabled: var(--black-100);
-            --_bu-badge-fc-disabled: var(--black-350);
+            --_bu-badge-bg-disabled: var(--theme-secondary-100);
+            --_bu-badge-fc-disabled: var(--theme-secondary-300);
 
             .highcontrast-mode({
-                --_bu-bc: var(--theme-secondary-600);
+                --_bu-bc: var(--theme-secondary-400);
+                --_bu-bc-disabled: var(--theme-secondary-300);
+                --_bu-bg-disabled: var(--white);
+                --_bu-badge-bg-disabled: var(--theme-secondary-100);
+                --_bu-badge-fc-disabled: var(--theme-secondary-300);
             });
         }
     }
@@ -57,6 +65,25 @@
         --_bu-badge-bg-disabled: var(--red-300);
         --_bu-badge-fc-disabled: var(--black-100);
 
+        .dark-mode({
+            --_bu-bg-disabled: var(--red-300);
+            --_bu-badge-fc-disabled: var(--black-050);
+            --_bu-badge-bg-disabled: var(--red-400);
+        });
+
+        .highcontrast-mode({
+            --_bu-fc-disabled: var(--black-300);
+            --_bu-badge-bg-disabled: var(--red-100);
+            --_bu-badge-fc-disabled: var(--black-300);
+        });
+
+        .highcontrast-dark-mode({
+            --_bu-bg-disabled: var(--red-300);
+            --_bu-fc-disabled: var(--black-050);
+            --_bu-badge-fc-disabled: var(--black-050);
+            --_bu-badge-bg-disabled: var(--red-400);
+        });
+
         &.s-btn__clear {
             --_bu-bg: transparent;
             --_bu-bg-disabled: var(--_bu-bg);
@@ -71,9 +98,23 @@
             --_bu-badge-bg-disabled: var(--red-100);
             --_bu-badge-fc-disabled: var(--red-300);
 
+            .dark-mode({
+                --_bu-bg-disabled: var(--_bu-bg);
+                --_bu-fc-disabled: var(--red-300);
+                --_bu-badge-bg-disabled: var(--red-100);
+                --_bu-badge-fc-disabled: var(--red-400);
+            });
+
             .highcontrast-mode({
                 --_bu-bc: var(--red-600);
-                --_bu-bc-disabled: var(--red-300);
+                --_bu-bc-disabled: var(--black-300);
+            });
+
+            .highcontrast-dark-mode({
+                --_bu-bg-disabled: var(--black-050);
+                --_bu-fc-disabled: var(--red-300);
+                --_bu-badge-bg-disabled: var(--red-100);
+                --_bu-badge-fc-disabled: var(--red-300);
             });
         }
     }
@@ -89,6 +130,25 @@
         --_bu-badge-fc: var(--black-050);
         --_bu-badge-bg-disabled: var(--purple-300);
         --_bu-badge-fc-disabled: var(--black-100);
+
+        .dark-mode({
+            --_bu-bg-disabled: var(--purple-100);
+            --_bu-fc-disabled: var(--purple-400);
+            --_bu-badge-fc-disabled: var(--purple-400);
+            --_bu-badge-bg-disabled: var(--purple-200);
+        });
+
+        .highcontrast-mode({
+            --_bu-fc-disabled: var(--black-300);
+            --_bu-badge-fc-disabled: var(--black-300);
+            --_bu-badge-bg-disabled: var(--purple-200);
+        });
+
+        .highcontrast-dark-mode({
+            --_bu-fc-disabled: var(--purple-400);
+            --_bu-badge-bg-disabled: var(--purple-200);
+            --_bu-badge-fc-disabled: var(--purple-400);
+        });
     }
 
     &&__tonal {
@@ -102,10 +162,11 @@
         --_bu-badge-bg: var(--black-200);
         --_bu-badge-fc: var(--black-600);
         --_bu-badge-bg-disabled: var(--black-100);
-        --_bu-badge-fc-disabled: var(--black-350);
+        --_bu-badge-fc-disabled: var(--black-300);
 
         .highcontrast-mode({
-            --_bu-bc: var(--black-300);
+            --_bu-bc: var(--black-400);
+            --_bu-bc-disabled: var(--black-300);
         });
     }
 

packages/stacks-classic/lib/components/button/button.less

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2e44188e4f25fd4d1b530d91afb0f9e30147f31e6a922c504a633a53f5de624a
-size 5129
+oid sha256:cc8334edb8ad0a2abefe1592d72e5708e6925bdf17bc332bc15ccfe1286159c6
+size 5539

packages/stacks-classic/screenshots/Chromium/baseline/s-btn-group-highcontrast-dark-badge.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:01a31c8a5c5c4867b4c53b26d1f04046ec8561067d4af46598e6e9e7a1eebd6f
-size 3659
+oid sha256:d3e0e8968af356a93340befcdefe5738f182bf82d46c7102a9669bd0eb2440a9
+size 4031

packages/stacks-classic/screenshots/Chromium/baseline/s-btn-group-highcontrast-dark-form.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ae2ac716d170f9dc603e7c39e85ff43603717d1a40776fe2c2fb699561a2c300
-size 3641
+oid sha256:c835246cf66ea73dc01077b81dc166ad732889bb900bf24dfb5f4515d9ef499c
+size 3978

packages/stacks-classic/screenshots/Chromium/baseline/s-btn-group-highcontrast-dark-radio.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1373198d3baf8643bf69d387856955e959e0209e64322c232e58f5cd01d49386
-size 1987
+oid sha256:1d6af5107e2ab2c14fc4a4671db6f5958f2e34f797d3e055fa910203ba7f6456
+size 2199

packages/stacks-classic/screenshots/Chromium/baseline/s-btn-group-highcontrast-dark-single.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:286b656ff5ba139ba2bf8dda5e19c24931b28b2a43c0623419fe2a616ca44904
-size 3633
+oid sha256:43b49309404434a819bc018b158eb513eebf44d83e586d0ec2e08531b9ab8536
+size 3971

packages/stacks-classic/screenshots/Chromium/baseline/s-btn-group-highcontrast-dark.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:47c4514a50f924cc6c8585f1af8b524330a18ad8137ba634a0722bb27a7fdd18
-size 6320
+oid sha256:89592c365bea18c14739ffd2a14f665f415ee4050d689ca7c6d10ed18c1a9531
+size 6414

packages/stacks-classic/screenshots/Chromium/baseline/s-btn-group-highcontrast-light-badge.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:aebc217fd0e458e3802a0a87929fefe0ab560ba4c0c4eeb2acea8be8128e879b
-size 4338
+oid sha256:675f4e3b0397f24560525d37ba653280daa65fab0527e222933530d595364f96
+size 4379

packages/stacks-classic/screenshots/Chromium/baseline/s-btn-group-highcontrast-light-form.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7166e46455693f041fefdeba89939fa2266a56a1ab52d630501e4b6e52c5bd6e
-size 4238
+oid sha256:4781bde93b8a367b435afeffefdaf19a5507bc66497acab5e9a41441ff5e232b
+size 4305