diff --git a/.changeset/fix-button-disabled-tokens.md b/.changeset/fix-button-disabled-tokens.md new file mode 100644 index 000000000..69fb9357b --- /dev/null +++ b/.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. diff --git a/core/scss/bootstrap/_buttons.scss b/core/scss/bootstrap/_buttons.scss index be554ca32..9d92502ff 100644 --- a/core/scss/bootstrap/_buttons.scss +++ b/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; diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss index a24ca8b25..314b9e451 100644 --- a/core/scss/ui/_buttons.scss +++ b/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;