fix(markdown): improve visual style of kbd elements

[Kiarokh]

Summary by CodeRabbit

• Style
  • Refined keyboard (kbd) styling for improved visual clarity: adjusted spacing and sizing, updated border color and depth, added multi-layered shadowing, and set display to inline-block for consistent layout.
  • Made hotkey text transformation configurable and simplified capitalization so transformation applies uniformly to the whole key label.

Review:

• Commits are atomic
• Commits have the correct type for the changes made
• Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

• Chrome
• Edge
• Firefox

Linux:

• Chrome
• Firefox

macOS:

• Chrome
• Firefox
• Safari

Mobile:

• Chrome on Android
• iOS

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Updated kbd styling across markdown and hotkey components: display, padding, border, box-shadow, background and text-transform changes; no exported/public API changes.

Changes

Cohort / File(s)	Summary
Markdown kbd styles src/components/markdown/partial-styles/_kbd.scss	Set display: inline-block; tightened padding to 0.0625rem 0.375rem; reordered background-color; replaced single inset box-shadow with a three-layer stack (retained var(--button-shadow-normal), added rgb(var(--color-black), 0.02) non-inset, adjusted inset to rgb(var(--contrast-100))); updated border color to rgb(var(--contrast-500)) and increased border width from 0.125rem to 0.1875rem.
Hotkey kbd text transform src/components/hotkey/hotkey.scss	Added documented CSS custom property --hotkey-text-transform and applied it to kbd via text-transform: var(--hotkey-text-transform, uppercase); removed span::first-letter rule so transformation applies at the kbd element level.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

visual design, accessibility

Suggested reviewers

• LucyChyzhova

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change—improving visual styling of kbd elements through refined padding, borders, shadows, and layout properties.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch split/3.5-improve-visual-style

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3989/

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/markdown/partial-styles/_kbd.scss`:
- Line 28: The box-shadow line in _kbd.scss uses a mixed unit typo ("0.375px")
that should be rem to match the project's shadow conventions; change the
blur-radius from 0.375px to 0.375rem so the box-shadow entry (the line
containing "0 0.625rem 0.375px -0.5rem rgb(var(--color-black), 0.02)") uses
consistent rem units with the rest of the shadows.scss definitions.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 9f56d5e7-6e1e-4ed4-8e22-92f34a69f3e9

📥 Commits

Reviewing files that changed from the base of the PR and between 8f08916 and 4cf7834.

📒 Files selected for processing (1)

• src/components/markdown/partial-styles/_kbd.scss

[adrianschmidt]

Consolidated PR Review -- 6 Dimensions

PR Summary

This PR modifies src/components/markdown/partial-styles/_kbd.scss (+15/-8 lines) to improve the visual styling of <kbd> elements in the markdown component. Changes include refined padding, adjusted border colors/widths, multi-layered box-shadow for depth, display: inline-block, and a ::first-letter { text-transform: uppercase } rule.

---

1. Backward Compatibility -- FAIR ⚠️

The change is purely in SCSS with no public API modifications, but the ::first-letter rule introduces a behavioral change that alters rendered output.

• [Medium] ::first-letter { text-transform: uppercase } silently mutates displayed text. In the markdown component, <kbd> elements contain raw text directly (e.g., <kbd>ctrl</kbd> would render as "Ctrl", <kbd>r</kbd> as "R"). This is a content distortion that existing consumers may not expect. Authors lose control over casing of their keyboard labels. In the hotkey component, this is not an issue because the ::first-letter is applied to a nested <span>, not <kbd> directly.
• [Low] display: inline-block changes layout behavior. Inline-block elements don't break across lines, which is generally correct for keyboard keys but is a subtle layout change.
• [Low] Border color opacity removed. Changed from rgba(var(--contrast-600), 0.8) to rgb(var(--contrast-500)), which could be visually noticeable in some themes.
• Positives: No public API, prop, event, or export changes. The styling aligns _kbd.scss with the hotkey component's visual design, which is good consistency work via the @forward relationship.

2. Code Quality -- ACCEPTABLE ✅

The SCSS is clean and well-structured, aligning with the hotkey component's existing styles. Two minor consistency notes.

• [Medium] ::first-letter applied to kbd directly vs. nested span in hotkey. In hotkey.scss (line 24), ::first-letter targets a span inside kbd. Here it targets kbd itself. When kbd contains child elements (e.g., nested kbd for key combinations), ::first-letter behavior may be unexpected. This is an inconsistency with the hotkey component's approach.
• [Low] Mixed units in box-shadow: 0.375px vs rem. Line 28 uses 0.375px while all other values use rem. This matches hotkey.scss (line 18) exactly, so it appears intentional, but the unit inconsistency may confuse future maintainers.
• Positives: Shadow values and border styles now match hotkey.scss exactly. Property ordering is clean and logical. The display: inline-block addition is consistent with how code elements are handled in _pre-code.scss.

3. Architecture -- GOOD ✅

The change follows the established partial-style architecture perfectly: single-concern SCSS partial, imported via @forward, using shared mixins.

• [Low] ::first-letter is a semantic/behavioral decision, not purely visual. This forces uppercase on the first character, which is a content presentation decision that arguably belongs at a higher level or should be documented as intentional.
• Positives: No new coupling introduced. The change is well-contained within the existing partial-styles pattern and does not affect the component's public API or other partials.

4. Security -- SAFE ✅

No significant issues found. This is a pure CSS/SCSS change with no JavaScript, dynamic value interpolation, or user-input handling. CSS custom properties are standard theming variables.

• Positives: Scoped entirely to visual styling with no logic or data-flow implications. Uses the project's own style system.

5. Observability -- SAFE ✅

No significant issues found. CSS-only changes do not involve logging, metrics, error handling, or sensitive data.

• Positives: Narrowly scoped to a single SCSS partial with minimal blast radius.

6. Performance -- GOOD ✅

No significant performance issues. All changes are static CSS on an element that appears sparingly in rendered markdown.

• [Low] Additional box-shadow layer (2 -> 3 layers). Trivial paint cost increase for small, infrequent elements.
• Positives: No animations or transitions introduced. No new selectors increasing style-matching complexity. Change is scoped to a low-frequency element type.

---

Overall Verdicts

Dimension	Verdict
Backward Compatibility	FAIR
Code Quality	ACCEPTABLE
Architecture	GOOD
Security	SAFE
Observability	SAFE
Performance	GOOD

Top Recommendations

1. [Medium from Backward Compatibility] The ::first-letter { text-transform: uppercase } rule silently changes how <kbd> content is displayed in markdown (e.g., ctrl becomes Ctrl). Consider whether this is intentional -- if so, document it in the PR description as a behavioral change, not just a visual fix. If authors should control casing, remove this rule from the shared _kbd.scss and let the hotkey component apply it to its own nested <span> as it already does.
2. [Medium from Code Quality] The ::first-letter approach differs between this file (applied to kbd directly) and hotkey.scss (applied to a nested span). When markdown produces nested <kbd> elements for key combinations, the pseudo-element may not behave as intended. Consider aligning the approach or verifying behavior with nested elements.

---

🤖 Generated with Claude Code

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/markdown/partial-styles/_kbd.scss`:
- Around line 3-30: The kbd styling lost the intentional keycap-first-letter
transform; restore the uppercase rule by adding an ::first-letter selector to
the kbd block (e.g., within the existing kbd { ... } rules add &::first-letter {
text-transform: uppercase; }) so key labels render with an uppercase first
letter consistent with previous keycap presentation.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: acef7021-0dd2-4b45-bb03-20a55f9c67d5

📥 Commits

Reviewing files that changed from the base of the PR and between 4cf7834 and 51d8199.

📒 Files selected for processing (1)

• src/components/markdown/partial-styles/_kbd.scss

[lime-opensource]

🎉 This PR is included in version 39.10.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀