Buttons: KButton style refresh — shape, sentence casing, and padding

[rtibbles]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

Restyle standard (non-icon) KButton components per updated Figma specs. Key changes include updated button shape, moving from all-caps text to sentence casing, and padding adjustments so total heights match specs.

Complexity: Medium
Target branch: develop

Context

KButton currently renders as bold, uppercase text with 14px font size, 36px line-height, 2px border-radius, and Material Design-style drop shadow. The component supports three appearances: raised-button, flat-button, and basic-link.

Buttons are styled in lib/buttons-and-links/buttons.scss with shared logic in lib/buttons-and-links/buttonMixin.js. The basic-link appearance is also affected by the typography line-height changes in the sibling issue.

The Change

Update KButton styling to match the new Figma specs:

• Text casing: Move from all-caps (text-transform: uppercase) to sentence casing
• Shape: Updated button shape per Figma (border-radius, sizing)
• Padding: Adjusted so that the true total button height matches the spec, factoring in the new line-height from the typography updates

These changes apply to standard button appearances (raised-button and flat-button). The basic-link appearance is addressed in the typography sub-issue.

Out of Scope

• Icon buttons (KIconButton) — managed separately
• VBtn migration in Studio — tracked in a separate effort
• Cross-product button rollout (Kolibri, KDP)
• basic-link appearance — covered in the typography sub-issue

Acceptance Criteria

• KButton text casing changed from uppercase to sentence casing
• Button shape updated per Figma spec (border-radius, sizing)
• Padding adjusted so total button heights match Figma specs
• Changes applied to raised-button and flat-button appearances
• KDS documentation updated to reflect new button defaults
• Visual regression tests updated/passing

References

• Kolibri Design System Figma
• Button styles: lib/buttons-and-links/buttons.scss
• Button mixin: lib/buttons-and-links/buttonMixin.js
• KButton component: lib/buttons-and-links/KButton.vue

AI usage

This issue was drafted using Claude Code based on collaborative discussion of scope and requirements. All content was reviewed and approved before posting.