Keep the default button opaque on hover and active (#3309)

.changeset/btn-hover-opaque.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed the default `.btn` turning see-through on hover and active by mixing the tint over `--tblr-bg-surface`.

core/scss/_variables.scss

@@ -1137,6 +1137,12 @@ $btn-active-border-tint-amount: 10% !default;
 
 $btn-border-color: var(--border-color) !default;
 
+// Hover and active backgrounds of the default button. `$hover-bg` and
+// `$active-bg` are tints over `transparent`; a button over a photo would
+// show it through, so the same tints are mixed over the button surface instead.
+$btn-hover-bg: light-dark(color-transparent(var(--body-color), 0.06, var(--bg-surface)), color-transparent(var(--body-color), 0.08, var(--bg-surface))) !default;
+$btn-active-bg: light-dark(color-transparent(var(--primary), 0.04, var(--bg-surface)), color-transparent(var(--primary), 0.12, var(--bg-surface))) !default;
+
 $btn-color: var(--body-color) !default;
 $btn-padding-y: $input-btn-padding-y !default;
 $btn-padding-x: $input-btn-padding-x !default;

core/scss/ui/_buttons.scss

@@ -12,10 +12,10 @@
   --btn-bg: var(--bg-surface);
   --btn-color: var(--body-color);
   --btn-border-color: #{$btn-border-color};
-  --btn-hover-bg: var(--hover-bg);
+  --btn-hover-bg: #{$btn-hover-bg};
   --btn-hover-border-color: var(--border-active-color);
   --btn-active-color: #{$active-color};
-  --btn-active-bg: var(--active-bg);
+  --btn-active-bg: #{$btn-active-bg};
   --btn-active-border-color: #{$active-border-color};
   position: relative;