Give filled buttons a raised look and tune the sm and xl sizes (#3280)

.changeset/btn-inner-highlight.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated filled `.btn-*` variants with a subtle border, inner edges and a faint gradient; outline buttons lose their shadow.

.changeset/btn-size-tweaks.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated `.btn-xl` with a `1.25rem` font, `1.75rem` icons and a larger radius; `.btn-sm` gets `0.75rem` side padding.

core/scss/_variables.scss

@@ -1083,15 +1083,23 @@ $input-btn-icon-size-lg: 1.5rem !default;
 
 $input-btn-padding-y-xl: 0.6875rem !default;
 $input-btn-padding-x-xl: 1.75rem !default;
-$input-btn-font-size-xl: $h1-font-size !default;
+$input-btn-font-size-xl: 1.25rem !default;
 $input-btn-line-height-xl: 2rem !default;
-$input-btn-icon-size-xl: 2rem !default;
+$input-btn-icon-size-xl: 1.75rem !default;
 
 // scss-docs-start btn-variables
 $btn-border-width: $input-btn-border-width !default;
 
 $btn-font-weight: var(--font-weight-medium) !default;
 $btn-box-shadow: var(--shadow-input) !default;
+// Inner edges of the filled color variants: the variant tinted towards white
+// along the top and shaded towards black along the bottom, over a faint white
+// gradient, so the button reads as slightly raised.
+$btn-highlight-color: color-mix(in oklab, var(--btn-variant), var(--white) 30%) !default;
+$btn-shade-color: color-mix(in oklab, var(--btn-variant), var(--black) 4%) !default;
+$btn-gradient: linear-gradient(180deg, color-transparent(var(--white), 0.12), transparent) !default;
+// Border of the filled color variants: the variant shaded a little towards black.
+$btn-variant-border-color: color-mix(in oklab, var(--btn-variant), var(--black) 10%) !default;
 $btn-disabled-opacity: 0.4 !default;
 $btn-active-box-shadow: inset 0 3px 5px color-transparent(var(--black), 0.125) !default;
 
@@ -1102,6 +1110,7 @@ $btn-link-disabled-color: light-dark(var(--gray-600), var(--gray-400)) !default;
 $btn-border-radius: var(--border-radius) !default;
 $btn-border-radius-sm: var(--border-radius-sm) !default;
 $btn-border-radius-lg: var(--border-radius-lg) !default;
+$btn-border-radius-xl: var(--border-radius-lg) !default;
 $btn-floating-offset: 1rem !default;
 $btn-pill-icon-padding-y: 0.375rem !default;
 $btn-pill-icon-padding-x: 15px !default;
@@ -1134,7 +1143,7 @@ $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
 $btn-font-size-sm: $input-btn-font-size-sm !default;
 $btn-font-size-lg: $input-btn-font-size-lg !default;
 $btn-padding-y-sm: $input-btn-padding-y-sm !default;
-$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-padding-x-sm: 0.75rem !default;
 $btn-padding-y-lg: $input-btn-padding-y-lg !default;
 $btn-padding-x-lg: $input-btn-padding-x-lg !default;
 // scss-docs-end btn-variables

core/scss/ui/_buttons.scss

@@ -121,9 +121,9 @@ $btn-colors: map.keys(map.merge($theme-colors, $social-colors));
 }
 
 #{btn-color-selectors('.btn-{c}')} {
-  --btn-border-color: transparent;
-  --btn-hover-border-color: transparent;
-  --btn-active-border-color: transparent;
+  --btn-border-color: #{$btn-variant-border-color};
+  --btn-hover-border-color: #{$btn-variant-border-color};
+  --btn-active-border-color: #{$btn-variant-border-color};
   --btn-color: var(--btn-variant-fg, #{$white});
   --btn-bg: var(--btn-variant);
   --btn-hover-color: var(--btn-variant-fg);
@@ -132,7 +132,12 @@ $btn-colors: map.keys(map.merge($theme-colors, $social-colors));
   --btn-active-bg: var(--btn-variant-darken);
   --btn-disabled-bg: var(--btn-variant);
   --btn-disabled-color: var(--btn-variant-fg);
-  --btn-box-shadow: var(--shadow-input);
+  // A lighter 1px edge along the top, a darker one along the bottom and a faint
+  // white gradient, so the filled button reads as slightly raised. The press
+  // state replaces the edges with `--btn-active-shadow`.
+  --btn-box-shadow: inset 0 1px 0 0 #{$btn-highlight-color}, inset 0 -1px 0 0 #{$btn-shade-color}, var(--shadow-input);
+  --btn-gradient: #{$btn-gradient};
+  background-image: var(--btn-gradient);
 }
 
 @if map.has-key($theme-colors, 'dark') {
@@ -155,6 +160,8 @@ $btn-colors: map.keys(map.merge($theme-colors, $social-colors));
   --btn-active-border-color: var(--btn-variant);
   --btn-disabled-color: var(--btn-variant);
   --btn-disabled-border-color: var(--btn-variant);
+  --btn-gradient: none;
+  --btn-box-shadow: none;
 }
 
 #{btn-color-selectors('.btn-ghost-{c}', '.btn-ghost.btn-{c}')} {
@@ -172,6 +179,7 @@ $btn-colors: map.keys(map.merge($theme-colors, $social-colors));
   --btn-disabled-bg: transparent;
   --btn-disabled-border-color: transparent;
   --gradient: none;
+  --btn-gradient: none;
   --btn-box-shadow: none;
 }
 
@@ -197,6 +205,7 @@ $btn-colors: map.keys(map.merge($theme-colors, $social-colors));
   --btn-padding-y: #{$input-btn-padding-y-xl};
   --btn-padding-x: #{$input-btn-padding-x-xl};
   --btn-font-size: #{$input-btn-font-size-xl};
+  --btn-border-radius: #{$btn-border-radius-xl};
 }
 
 //