Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open
  • Is something wrong?
#35 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@ftzi is already working on this.

Since Aug 31, 2026.

  • #53 by @CiscoFran10 — closed without merging
  • #196 by @matingathani — closed without merging
  • #763 by @ftzi — open

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
frontend

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.

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:

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

Dominant language
TypeScript
Stars
4.1k
Forks
192
Avg merge
20h 28m
Merged PRs (30d)
38

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from cloudflare/kumo

All issues in cloudflare/kumo

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.