Restyle kbd as a compact key cap and add .kbd-group (#3273)

.changeset/kbd-styles.md

@@ -0,0 +1,7 @@
+---
+'@tabler/core': minor
+'@tabler/preview': minor
+'@tabler/docs': minor
+---
+
+Restyled `<kbd>` as a compact key cap and added `.kbd-group` to group the keys of one shortcut. The key now adapts its colours inside buttons, badges and tooltips, and can be themed with the `--tblr-kbd-*` custom properties.

core/js/src/bootstrap/util/sanitizer.ts

@@ -32,6 +32,7 @@ export const DefaultAllowlist: AllowList = {
   'h6': [],
   'i': [],
   'img': ['src', 'srcset', 'alt', 'title', 'width', 'height'],
+  'kbd': [],
   'li': [],
   'ol': [],
   'p': [],

core/scss/_core.scss

@@ -102,6 +102,7 @@
 @forward 'ui/tracking';
 @forward 'ui/timeline';
 @forward 'ui/type';
+@forward 'ui/kbd';
 @forward 'ui/charts';
 @forward 'ui/sparkline';
 @forward 'ui/offcanvas';

core/scss/_variables.scss

@@ -753,14 +753,18 @@ $pre-bg: var(--bg-surface-dark) !default;
 $pre-color: var(--light) !default;
 $pre-selection-bg: color-transparent(var(--primary), 0.4) !default;
 
-$kbd-padding-x: 0.5rem !default;
+// scss-docs-start kbd-variables
-$kbd-padding-y: 0.25rem !default;
+$kbd-height: 1.25rem !default;
+$kbd-padding-x: 0.25rem !default;
+$kbd-padding-y: 0 !default;
+$kbd-gap: 0.25rem !default;
 $kbd-font-weight: var(--font-weight-medium) !default;
 $kbd-font-size: var(--font-size-h5) !default;
-$kbd-border: var(--border-width) var(--border-style) var(--border-color) !default;
+$kbd-border: 0 !default;
 $kbd-color: var(--secondary-color) !default;
-$kbd-bg: var(--code-bg) !default;
+$kbd-bg: color-transparent(currentColor, 0.12) !default;
-$kbd-border-radius: var(--border-radius) !default;
+$kbd-border-radius: var(--border-radius-sm) !default;
+// scss-docs-end kbd-variables
 $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
 
 // Avatars

core/scss/ui/_kbd.scss

@@ -0,0 +1,83 @@
+//
+// Keyboard key
+//
+@use '../config' as *;
+
+kbd,
+.kbd {
+  // scss-docs-start kbd-css-vars
+  --kbd-height: #{$kbd-height};
+  --kbd-padding-x: #{$kbd-padding-x};
+  --kbd-padding-y: #{$kbd-padding-y};
+  --kbd-gap: #{$kbd-gap};
+  --kbd-font-size: #{$kbd-font-size};
+  --kbd-font-weight: #{$kbd-font-weight};
+  --kbd-color: #{$kbd-color};
+  --kbd-bg: #{$kbd-bg};
+  --kbd-border: #{$kbd-border};
+  --kbd-border-radius: #{$kbd-border-radius};
+  // scss-docs-end kbd-css-vars
+  box-sizing: border-box;
+  display: inline-flex;
+  gap: var(--kbd-gap);
+  align-items: center;
+  justify-content: center;
+  min-width: var(--kbd-height);
+  max-width: 100%;
+  height: var(--kbd-height);
+  padding: var(--kbd-padding-y) var(--kbd-padding-x);
+  font-family: var(--font-sans-serif);
+  font-size: var(--kbd-font-size);
+  font-weight: var(--kbd-font-weight);
+  line-height: 1;
+  color: var(--kbd-color);
+  white-space: nowrap;
+  vertical-align: baseline;
+  background-color: var(--kbd-bg);
+  border: var(--kbd-border);
+  @include border-radius(var(--kbd-border-radius));
+
+  .icon {
+    --icon-size: 0.75rem;
+  }
+}
+
+// On a coloured surface the key takes the colour of the text around it
+.btn,
+.tooltip,
+.badge {
+  kbd,
+  .kbd {
+    --kbd-color: inherit;
+  }
+}
+
+.btn,
+.badge {
+  > kbd,
+  > .kbd {
+    margin-inline-start: 0.5em;
+  }
+}
+
+//
+// Group of keys
+//
+.kbd-group {
+  display: inline-flex;
+  gap: var(--kbd-gap, #{$kbd-gap});
+  align-items: center;
+  min-width: 0;
+  height: auto;
+  padding: 0;
+  font-weight: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+
+  // Reboot removes the padding of a nested `kbd`
+  > kbd {
+    padding: var(--kbd-padding-y) var(--kbd-padding-x);
+    font-size: var(--kbd-font-size);
+  }
+}

core/scss/ui/_type.scss

@@ -162,19 +162,6 @@ abbr {
   text-decoration-skip-ink: none;
 }
 
-kbd,
-.kbd {
-  box-sizing: border-box;
-  display: inline-block;
-  max-width: 100%;
-  font-size: $kbd-font-size;
-  font-weight: $kbd-font-weight;
-  line-height: 1;
-  vertical-align: baseline;
-  border: $kbd-border;
-  @include border-radius($kbd-border-radius);
-}
-
 img {
   max-width: 100%;
   height: auto;

docs/content/ui/base/typography.mdx

@@ -167,10 +167,31 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use
 
 ## Keyboard input
 
-Use the `<kbd>` to indicate input that is typically entered via keyboard.
+Use the `<kbd>` element to show a key the user presses. The `.kbd` class gives the same look to any other element.
 
 <Example>
-To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd> .
+To edit settings, press <kbd>Ctrl</kbd> + <kbd>,</kbd> or <kbd>Ctrl</kbd> + <kbd>C</kbd>.
+</Example>
+
+### Key group
+
+Wrap the keys of one shortcut in `.kbd-group` to keep them together on one line with an even gap.
+
+<Example>
+<kbd class="kbd-group"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>⌥</kbd><kbd>⌃</kbd></kbd>
+<kbd class="kbd-group ms-3"><kbd>Ctrl</kbd><span>+</span><kbd>B</kbd></kbd>
+</Example>
+
+### Key in a button
+
+Inside a button, a badge or a tooltip the key takes the colour of the text around it.
+
+<Example>
+<div class="btn-list">
+  <button type="button" class="btn">Accept <kbd>⏎</kbd></button>
+  <button type="button" class="btn btn-primary">Save <kbd class="kbd-group"><kbd>⌘</kbd><kbd>S</kbd></kbd></button>
+  <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="Print <kbd class='kbd-group'><kbd>Ctrl</kbd><kbd>P</kbd></kbd>">Print</button>
+</div>
 </Example>
 
 ## Prose

docs/content/ui/forms/elements.mdx

@@ -448,7 +448,7 @@ Include a `<kbd>` in your input control to add a shortcut hint to the control.
   <label class="form-label">Input with appended kbd</label>
   <div class="input-group input-group-flat">
     <input type="password" class="form-control" value="ultrastrongpassword" autocomplete="off" />
-    <span class="input-group-text"><kbd>ctrl + K</kbd></span>
+    <span class="input-group-text"><kbd class="kbd-group"><kbd>⌘</kbd><kbd>K</kbd></kbd></span>
   </div>
 </div>
 </Example>

shared/components/forms/FormElements2.astro

@@ -75,7 +75,7 @@ import InputGroup from '@ui/InputGroup.astro'
   <div class="input-group input-group-flat">
     <input type="text" class="form-control" id="fe2-appended-kbd" autocomplete="off" />
     <span class="input-group-text">
-      <kbd>ctrl + K</kbd>
+      <kbd class="kbd-group"><kbd>⌘</kbd><kbd>K</kbd></kbd>
     </span>
   </div>
 </FormGroup>