diff --git a/.changeset/btn-inner-highlight.md b/.changeset/btn-inner-highlight.md new file mode 100644 index 000000000..7231e21b9 --- /dev/null +++ b/.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. diff --git a/.changeset/btn-size-tweaks.md b/.changeset/btn-size-tweaks.md new file mode 100644 index 000000000..078d8be6b --- /dev/null +++ b/.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. diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 2e51d3fe0..ee24cc5fb 100644 --- a/core/scss/_variables.scss +++ b/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 diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss index e6cc72a9e..2f0b2c8e7 100644 --- a/core/scss/ui/_buttons.scss +++ b/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}; } //