[docs] Button variants missing hover styles and using non-semantic color tokens
- Dominant language
- TypeScript
- Stars
- 3.9k
- Forks
- 177
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 48
Description
## Describe the issue
On the **Button documentation page**, several button variants do not show consistent hover styles and reference color utilities that are not valid **Kumo semantic tokens**. According to the documentation, only semantic color tokens (e.g., `bg-kumo-*`, `text-kumo-*`, `ring-kumo-*`) should be used, and hover styles should be present for all interactive variants.
The affected variants include:
- `secondary`
- `outline`
- `secondary-destructive`
These variants either lack visible hover feedback entirely or rely on `border-secondary`, which does not appear to be a documented or acceptable Kumo color token.
---
## To reproduce
1. Visit the Button docs: https://kumo-ui.com/components/button/
2. Inspect the `secondary`, `outline`, or `secondary-destructive` examples
3. Verify that hover styles are absent or using non-semantic tokens
4. Compare with variants like `primary` and `destructive`, which correctly show hover behavior
---
## Current behavior
- Some button variants have no visible hover styles
- Some variants reference `border-secondary`, which is not a Kumo semantic token
- This contradicts the documentation guidance to only use Kumo semantic tokens
Example classes from the current source:
```ts
readonly secondary: {
readonly classes:
"bg-kumo-control !text-kumo-default ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-control disabled:bg-kumo-control/50 disabled:!text-kumo-default/70 ring-kumo-line data-[state=open]:bg-kumo-control";
};
readonly "secondary-destructive": {
readonly classes:
"bg-kumo-control !text-kumo-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-control disabled:bg-kumo-control/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-control";
};
readonly outline: {
readonly classes:
"bg-kumo-base text-kumo-default ring ring-kumo-line";
};
````
---
## Expected behavior
* All button variants should include a clear and consistent hover state
* All color utilities used should be semantic Kumo tokens
* Non-semantic tokens (e.g., `border-secondary`) should be removed or replaced with appropriate Kumo tokens
---
## Environment and versions
* **Kumo version:** v1.0.0
* **Docs section:** Components → Button, https://kumo-ui.com/components/button
* **Browser:** Chrome, Safari
* **OS:** Windows
Contributor guide
Research direction
Start at the Button documentation page and inspect the secondary, outline, and secondary-destructive variant definitions shown in the issue. Compare them with the primary and destructive variants, then verify that every affected variant has visible hover feedback and uses only semantic Kumo color tokens.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100