Add the --tblr-btn-input-* control scale on :root (#3154)

.changeset/btn-input-scale.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": minor
+"@tabler/docs": patch
+---
+
+Added the `--tblr-btn-input-*` control scale on `:root` (padding, font size, line height, radius, min height per size).

core/scss/_props.scss

@@ -92,6 +92,39 @@
     }
   }
 
+  /** Buttons and form controls: one scale, in the names Bootstrap 6 uses */
+  // scss-docs-start btn-input-css-vars
+  --btn-input-fg: var(--body-color);
+  --btn-input-bg: var(--bg-forms);
+  --btn-input-padding-y: #{$input-btn-padding-y};
+  --btn-input-padding-x: #{$input-btn-padding-x};
+  --btn-input-font-size: #{$input-btn-font-size};
+  --btn-input-line-height: #{$input-btn-line-height};
+  --btn-input-border-radius: var(--border-radius);
+  --btn-input-min-height: calc(var(--btn-input-line-height) + var(--btn-input-padding-y) * 2 + #{$input-btn-border-width} * 2);
+
+  --btn-input-sm-padding-y: #{$input-btn-padding-y-sm};
+  --btn-input-sm-padding-x: #{$input-btn-padding-x-sm};
+  --btn-input-sm-font-size: #{$input-btn-font-size-sm};
+  --btn-input-sm-line-height: #{$input-btn-line-height-sm};
+  --btn-input-sm-border-radius: var(--border-radius-sm);
+  --btn-input-sm-min-height: calc(var(--btn-input-sm-line-height) + var(--btn-input-sm-padding-y) * 2 + #{$input-btn-border-width} * 2);
+
+  --btn-input-lg-padding-y: #{$input-btn-padding-y-lg};
+  --btn-input-lg-padding-x: #{$input-btn-padding-x-lg};
+  --btn-input-lg-font-size: #{$input-btn-font-size-lg};
+  --btn-input-lg-line-height: #{$input-btn-line-height-lg};
+  --btn-input-lg-border-radius: var(--border-radius-lg);
+  --btn-input-lg-min-height: calc(var(--btn-input-lg-line-height) + var(--btn-input-lg-padding-y) * 2 + #{$input-btn-border-width} * 2);
+
+  --btn-input-xl-padding-y: #{$input-btn-padding-y-xl};
+  --btn-input-xl-padding-x: #{$input-btn-padding-x-xl};
+  --btn-input-xl-font-size: #{$input-btn-font-size-xl};
+  --btn-input-xl-line-height: #{$input-btn-line-height-xl};
+  --btn-input-xl-border-radius: var(--border-radius);
+  --btn-input-xl-min-height: calc(var(--btn-input-xl-line-height) + var(--btn-input-xl-padding-y) * 2 + #{$input-btn-border-width} * 2);
+  // scss-docs-end btn-input-css-vars
+
   /** Backdrops */
   --backdrop-opacity: #{$backdrop-opacity};
   --backdrop-bg: #{$backdrop-bg};

core/scss/mixins/_functions.scss

@@ -342,3 +342,15 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
   }
   @return $result;
 }
+
+// Seeds a component token from a Sass variable that has a `:root` scale
+// counterpart. While the variable still holds `$default`, the token reads the
+// scale (`var(--btn-input-padding-y)`) and follows it at runtime; once a
+// project configured the variable from Sass, that value wins, as it did before
+// the scale existed. `$token` is the bare name of the root custom property.
+@function var-if-default($value, $default, $token) {
+  @if $value == $default {
+    @return var(#{$token});
+  }
+  @return $value;
+}

core/scss/tests/_var-if-default.test.scss

@@ -0,0 +1,20 @@
+// Tests for `var-if-default()` in scss/mixins/_functions.scss: a component
+// token follows the `:root` scale until the Sass variable is configured.
+
+@use 'sass:meta';
+@use '../mixins/functions' as *;
+
+@include describe('var-if-default') {
+  @include it('reads the root token while the variable keeps its default') {
+    @include assert-equal(meta.inspect(var-if-default(0.5625rem, 0.5625rem, --btn-input-padding-y)), 'var(--btn-input-padding-y)');
+  }
+
+  @include it('keeps a configured value') {
+    @include assert-equal(var-if-default(1rem, 0.5625rem, --btn-input-padding-y), 1rem);
+  }
+
+  @include it('compares var() defaults by value') {
+    @include assert-equal(meta.inspect(var-if-default(var(--border-radius), var(--border-radius), --btn-input-border-radius)), 'var(--btn-input-border-radius)');
+    @include assert-equal(meta.inspect(var-if-default(0, var(--border-radius), --btn-input-border-radius)), '0');
+  }
+}

docs/content/ui/forms/elements.mdx

@@ -163,6 +163,15 @@ Inputs come in three sizes: small, default and large.
 </div>
 </Example>
 
+The sizes come from one scale of custom properties on `:root`, shared by buttons and form controls and named as in Bootstrap 6: `--tblr-btn-input-padding-y`, `--tblr-btn-input-padding-x`, `--tblr-btn-input-font-size`, `--tblr-btn-input-line-height`, `--tblr-btn-input-border-radius` and `--tblr-btn-input-min-height`, plus a `--tblr-btn-input-sm-*`, `--tblr-btn-input-lg-*` and `--tblr-btn-input-xl-*` set for each size. Override them on `:root` to change every control at once.
+
+```css
+:root {
+  --tblr-btn-input-padding-y: 0.75rem;
+  --tblr-btn-input-border-radius: 0;
+}
+```
+
 ## Datalists
 
 Use the `datalist` element to add an autocomplete feature to your input control. The list of available options will display once a user starts to type and will make it quicker to complete form sections.