Update based on comments

Author: ttaylor-stack

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

@@ -33,7 +33,7 @@
     --_bu-filled-fc-disabled: var(--black-050);
 
     // BASE SELECTED MODIFIER
-    --_bu-bg-selected: linear-gradient(to bottom, var(--theme-secondary-100) 0%, var(--theme-secondary-100) 50%, color-mix(in srgb, var(--theme-secondary-100) 60%, white 40%) 50%, color-mix(in srgb, var(--theme-secondary-100) 60%, white 40%) 100%);
+    --_bu-bg-selected: linear-gradient(to bottom, var(--theme-secondary-100) 0%, var(--theme-secondary-100) 50%, color-mix(in srgb, var(--theme-secondary-100) 60%, var(--black-050) 40%) 50%, color-mix(in srgb, var(--theme-secondary-100) 60%, var(--black-050) 40%) 100%);
     --_bu-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
 
     // FILLED VARIANT
@@ -73,7 +73,8 @@
     });
 
     .dark-mode({
-        --_bu-filled-bg-selected: linear-gradient(to bottom, var(--theme-secondary-600) 0%, var(--theme-secondary-600) 50%, color-mix(in srgb, var(--theme-secondary-600) 60%, black 40%) 50%, color-mix(in srgb, var(--theme-secondary-600) 60%, black 40%) 100%);
+        --_bu-bg-selected: linear-gradient(to bottom, color-mix(in srgb, var(--theme-secondary-100) 60%, var(--black-050) 40%) 0%, color-mix(in srgb, var(--theme-secondary-100) 60%, var(--black-050) 40%) 50%, var(--theme-secondary-100) 50%, var(--theme-secondary-100) 100%);  
+        --_bu-filled-bg-selected: linear-gradient(to bottom, color-mix(in srgb, var(--theme-secondary-600) 85%, var(--black-050) 15%) 0%, color-mix(in srgb, var(--theme-secondary-600) 85%, var(--black-050) 15%) 50%, var(--theme-secondary-600) 50%, var(--theme-secondary-600) 100%);
     });
 
     // STATES
@@ -275,7 +276,7 @@
     &&__danger {
         --_bu-bg-active: var(--black-050);
         --_bu-bg-hover: var(--red-100);
-        --_bu-bg-selected: linear-gradient(to bottom, var(--red-100) 0%, var(--red-100) 50%, color-mix(in srgb, var(--red-100) 60%, white 40%) 50%, color-mix(in srgb, var(--red-100) 60%, white 40%) 100%);
+        --_bu-bg-selected: linear-gradient(to bottom, var(--red-100) 0%, var(--red-100) 50%, color-mix(in srgb, var(--red-100) 50%, white 50%) 50%, color-mix(in srgb, var(--red-100) 50%, white 50%) 100%);
         --_bu-bg-focus: var(--black-050);
         --_bu-fc: var(--red-400);
         --_bu-fc-active: var(--_bu-fc);
@@ -305,7 +306,8 @@
             --_bu-badge-bg: var(--red-500);
         });
         .dark-mode({
-            --_bu-filled-bg-selected: linear-gradient(to bottom, var(--red-500) 0%, var(--red-500) 50%, color-mix(in srgb, var(--red-500) 60%, white 40%) 50%, color-mix(in srgb, var(--red-500) 60%, white 40%) 100%);
+            --_bu-bg-selected: linear-gradient(to bottom, color-mix(in srgb, var(--red-100) 50%, var(--black-050) 50%) 0%, color-mix(in srgb, var(--red-100) 50%, var(--black-050) 50%) 50%, var(--red-100) 50%, var(--red-100) 100%);
+            --_bu-filled-bg-selected: linear-gradient(to bottom, color-mix(in srgb, var(--red-500) 85%, var(--black-050) 15%) 0%, color-mix(in srgb, var(--red-500) 85%, var(--black-050) 15%) 50%, var(--red-500) 50%, var(--red-500) 100%);
         });
     }
 
@@ -333,25 +335,25 @@
         --_bu-number-fc: var(--white);
         --_bu-number-fc-filled: var(--black);
         .dark-mode({
-            --_bu-filled-bg-selected: linear-gradient(to bottom, var(--purple-500) 0%, var(--purple-500) 50%, color-mix(in srgb, var(--purple-500) 60%, white 40%) 50%, color-mix(in srgb, var(--purple-500) 60%, white 40%) 100%);
+            --_bu-filled-bg-selected: linear-gradient(to bottom, color-mix(in srgb, var(--purple-500) 85%, var(--black-050) 15%) 0%, color-mix(in srgb, var(--purple-500) 85%, var(--black-050) 15%) 50%, var(--purple-500) 50%, var(--purple-500) 100%);
         });
     }
 
     &&__tonal {
-        --_bu-bg: var(--theme-secondary-150);
+        --_bu-bg: var(--black-150);
         --_bu-bc-hover: transparent;
-        --_bu-bg-active: var(--theme-secondary-150);
-        --_bu-bg-hover: var(--theme-secondary-200);
-        --_bu-bg-selected: linear-gradient(to bottom, var(--theme-secondary-200) 0%, var(--theme-secondary-200) 50%, color-mix(in srgb, var(--theme-secondary-200) 70%, white 30%) 50%, color-mix(in srgb, var(--theme-secondary-200) 70%, white 30%) 100%);
-        --_bu-fc: var(--theme-secondary-600);
+        --_bu-bg-active: var(--black-150);
+        --_bu-bg-hover: var(--black-200);
+        --_bu-bg-selected: linear-gradient(to bottom, var(--black-200) 0%, var(--black-200) 50%, color-mix(in srgb, var(--black-200) 60%, var(--black-050) 40%) 50%, color-mix(in srgb, var(--black-200) 60%, var(--black-050) 40%) 100%);
+        --_bu-fc: var(--black-600);
         --_bu-fc-active: var(--_bu-fc);
-        --_bu-fc-hover: var(--theme-secondary-600);
-        --_bu-fc-selected: var(--theme-secondary-600);
+        --_bu-fc-hover: var(--black-600);
+        --_bu-fc-selected: var(--black-600);
         --_bu-bg-disabled: var(--black-100);
         --_bu-fc-disabled: var(--black-300);
         --_bu-number-fc-filled: var(--white);
         --_bu-number-fc-selected: var(--white);
-        --_bu-number-fc-focus: var(--theme-secondary-600);
+        --_bu-number-fc-focus: var(--black-600);
 
         .highcontrast-mode({
             --_bu-bc-hover: currentColor;
@@ -370,6 +372,10 @@
             --_bu-number-fc-filled: var(--black);
             --_bu-number-fc-selected: var(--white);
         });
+
+        .dark-mode({
+            --_bu-bg-selected: linear-gradient(to bottom, color-mix(in srgb, var(--black-200) 70%, var(--black-050) 30%) 0%, color-mix(in srgb, var(--black-200) 70%, var(--black-050) 30%) 50%, var(--black-200) 50%, var(--black-200) 100%);
+        });
     }
 
     // Social