cloudflare / cloudflare/kumo

[docs] Button variants missing hover styles and using non-semantic color tokens

Open
#35 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.