Give disabled buttons the colors of their own enabled state (#2925)

.changeset/fix-button-disabled-tokens.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed disabled buttons falling back to `currentColor` for the border and to a transparent background.

core/scss/bootstrap/_buttons.scss

@@ -20,6 +20,12 @@
   --btn-hover-border-color: transparent;
   --btn-box-shadow: #{$btn-box-shadow};
   --btn-disabled-opacity: #{$btn-disabled-opacity};
+  // Disabled reuses the button's own colors, dimmed by the opacity above.
+  // Without these the `:disabled` rule reads tokens only the color variants
+  // set, so a plain button fell back to `currentColor` for the border.
+  --btn-disabled-color: var(--btn-color);
+  --btn-disabled-bg: var(--btn-bg);
+  --btn-disabled-border-color: var(--btn-border-color);
   // Zero-size shadow, not `none`: the active state is combined with the focus
   // ring in one `box-shadow` list, where `none` would negate every other shadow
   --btn-active-shadow: 0 0 0 #000;

core/scss/ui/_buttons.scss

@@ -62,6 +62,11 @@
 }
 
 .btn-link {
+  // Tokens, not just the plain properties below: the disabled state reads
+  // `--btn-bg` and `--btn-border-color`, so setting only `background-color`
+  // here would leave a disabled link button with the default surface and border.
+  --btn-bg: transparent;
+  --btn-border-color: transparent;
   color: #{color.adjust($primary, $lightness: 5%)};
   background-color: transparent;
   border-color: transparent;
@@ -269,6 +274,8 @@
 //
 .btn-action {
   --border-color: transparent;
+  --btn-bg: transparent;
+  --btn-disabled-color: var(--secondary);
   color: var(--secondary);
   @include border-radius(var(--border-radius));
   background: transparent;