diff --git a/src/components/hotkey/hotkey.scss b/src/components/hotkey/hotkey.scss index 5eb118f3b7..0dab13fac8 100644 --- a/src/components/hotkey/hotkey.scss +++ b/src/components/hotkey/hotkey.scss @@ -1,3 +1,7 @@ +/** +* @prop --hotkey-text-transform: Defines the text transformation of the hotkey. Defaults to `uppercase` to render the hotkey that resembles a physical keyboard key. +*/ + @forward '../markdown/partial-styles/_kbd.scss'; :host(limel-hotkey) { display: flex; @@ -11,6 +15,7 @@ } kbd { + text-transform: var(--hotkey-text-transform, uppercase); margin: 0; font-size: 0.75rem; box-shadow: @@ -21,9 +26,6 @@ kbd { span { display: inline-block; - &::first-letter { - text-transform: uppercase; - } } kbd.is-glyph { diff --git a/src/components/markdown/partial-styles/_kbd.scss b/src/components/markdown/partial-styles/_kbd.scss index aa97edeb10..a3e8e97725 100644 --- a/src/components/markdown/partial-styles/_kbd.scss +++ b/src/components/markdown/partial-styles/_kbd.scss @@ -1,10 +1,10 @@ @use '../../../style/mixins'; kbd { + display: inline-block; @include mixins.font-family('monospace'); font-weight: 600; color: rgb(var(--contrast-1100)); - background-color: rgb(var(--contrast-200)); white-space: pre; word-spacing: normal; @@ -12,16 +12,19 @@ kbd { word-wrap: normal; line-height: normal; - padding: 0.125rem 0.5rem; - margin: 0 0.25rem; - box-shadow: - var(--button-shadow-normal), - 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset; - border: { radius: 0.125rem; style: solid; - color: rgba(var(--contrast-600), 0.8); - width: 0 1px 0.125rem 1px; + color: rgb(var(--contrast-500)); + width: 0 1px 0.1875rem 1px; } + + padding: 0.0625rem 0.375rem; + margin: 0 0.25rem; + + background-color: rgb(var(--contrast-200)); + box-shadow: + var(--button-shadow-normal), + 0 0.625rem 0.375rem -0.5rem rgb(var(--color-black), 0.02), + 0 0.025rem 0.5rem 0 rgb(var(--contrast-100)) inset; }