From e2cff972c0130905541028fd61f6ba334c597eaa Mon Sep 17 00:00:00 2001 From: codecalm Date: Tue, 6 Oct 2026 00:45:47 +0200 Subject: [PATCH] Restyle `kbd` as a compact key cap and add `.kbd-group` --- .changeset/kbd-styles.md | 7 ++ core/js/src/bootstrap/util/sanitizer.ts | 1 + core/scss/_core.scss | 1 + core/scss/_variables.scss | 14 ++-- core/scss/ui/_kbd.scss | 83 +++++++++++++++++++++ core/scss/ui/_type.scss | 13 ---- docs/content/ui/base/typography.mdx | 25 ++++++- docs/content/ui/forms/elements.mdx | 2 +- shared/components/forms/FormElements2.astro | 2 +- 9 files changed, 126 insertions(+), 22 deletions(-) create mode 100644 .changeset/kbd-styles.md create mode 100644 core/scss/ui/_kbd.scss diff --git a/.changeset/kbd-styles.md b/.changeset/kbd-styles.md new file mode 100644 index 000000000..c5be705eb --- /dev/null +++ b/.changeset/kbd-styles.md @@ -0,0 +1,7 @@ +--- +'@tabler/core': minor +'@tabler/preview': minor +'@tabler/docs': minor +--- + +Restyled `` 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. diff --git a/core/js/src/bootstrap/util/sanitizer.ts b/core/js/src/bootstrap/util/sanitizer.ts index cc3ff0056..6a874cdeb 100644 --- a/core/js/src/bootstrap/util/sanitizer.ts +++ b/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': [], diff --git a/core/scss/_core.scss b/core/scss/_core.scss index 03e6aeb15..57bff0c2c 100644 --- a/core/scss/_core.scss +++ b/core/scss/_core.scss @@ -98,6 +98,7 @@ @forward 'ui/tracking'; @forward 'ui/timeline'; @forward 'ui/type'; +@forward 'ui/kbd'; @forward 'ui/charts'; @forward 'ui/sparkline'; @forward 'ui/offcanvas'; diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index c3e6084a6..4ac6732e5 100644 --- a/core/scss/_variables.scss +++ b/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; -$kbd-padding-y: 0.25rem !default; +// scss-docs-start kbd-variables +$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-border-radius: var(--border-radius) !default; +$kbd-bg: color-transparent(currentColor, 0.12) !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 diff --git a/core/scss/ui/_kbd.scss b/core/scss/ui/_kbd.scss new file mode 100644 index 000000000..b72d50e77 --- /dev/null +++ b/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); + } +} diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss index 449aaee36..fbb4401b3 100644 --- a/core/scss/ui/_type.scss +++ b/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; diff --git a/docs/content/ui/base/typography.mdx b/docs/content/ui/base/typography.mdx index 9772ac644..d398446ff 100644 --- a/docs/content/ui/base/typography.mdx +++ b/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 `` to indicate input that is typically entered via keyboard. +Use the `` element to show a key the user presses. The `.kbd` class gives the same look to any other element. -To edit settings, press ctrl + , or ctrl + C . +To edit settings, press Ctrl + , or Ctrl + C. + + +### Key group + +Wrap the keys of one shortcut in `.kbd-group` to keep them together on one line with an even gap. + + +⌘⇧⌥⌃ +Ctrl+B + + +### Key in a button + +Inside a button, a badge or a tooltip the key takes the colour of the text around it. + + +
+ + + +
 ## Prose diff --git a/docs/content/ui/forms/elements.mdx b/docs/content/ui/forms/elements.mdx index e2da81bf2..5c5b1a86e 100644 --- a/docs/content/ui/forms/elements.mdx +++ b/docs/content/ui/forms/elements.mdx @@ -425,7 +425,7 @@ Include a `` in your input control to add a shortcut hint to the control.
- ctrl + K + ⌘K
diff --git a/shared/components/forms/FormElements2.astro b/shared/components/forms/FormElements2.astro index 6a6ef218c..51b38ea69 100644 --- a/shared/components/forms/FormElements2.astro +++ b/shared/components/forms/FormElements2.astro @@ -75,7 +75,7 @@ import InputGroup from '@ui/InputGroup.astro'
- ctrl + K + ⌘K