feat(F0Box): add hoverBackground prop with semantic hover tokens by AngelMsaa · Pull Request #3738 · factorialco/f0

AngelMsaa · 2026-03-24T09:53:19Z

What?

Add a new hoverBackground prop to F0Box that exposes the 6 hover background tokens defined in @factorialco/f0-core but previously missing from the component API.

Why?

The core token system defines hover variants for backgrounds (background.hover, background.secondary.hover, etc.) but F0Box had no way to use them declaratively. Consumers had to manually apply Tailwind hover classes, bypassing the design system's token abstraction.

How?

Added HoverBackgroundToken type with 6 values: default, secondary, accent-bold, promote, selected, selected-bold
Added hoverBackground CVA variant mapping each token to hover:bg-f1-background-*-hover + transition-colors
Wired the new prop through F0Box

Usage

<F0Box background="primary" hoverBackground="default">
  Hover me
</F0Box>

<F0Box background="selected" hoverBackground="selected">
  Interactive selection
</F0Box>

Checklist

Note

Low Risk
Low risk UI-only change that adds optional hover styling tokens and corresponding Tailwind safelisted classes; primary risk is missing/incorrect token-to-class mappings causing unexpected hover colors.

Overview
F0Box now supports an optional hoverBackground prop that maps a small set of semantic hover background tokens to hover:bg-* Tailwind classes, and automatically adds transition-colors when used.

This change threads the new token through the component API/exports, extends backgroundVariants and ResponsiveStyleProps to handle responsive hover overrides, and expands the responsive Tailwind safelist to ensure hover classes are generated at build time.

^{Written by Cursor Bugbot for commit 0591663. This will update automatically on new commits. Configure here.}

github-actions · 2026-03-24T09:55:29Z

✅ No New Circular Dependencies

No new circular dependencies detected. Current count: 0

packages/react/src/components/F0Box/types.ts

Copilot

Pull request overview

This PR extends F0Box’s styling API to support semantic hover background tokens from @factorialco/f0-core, allowing consumers to use hover background states declaratively through a new hoverBackground prop.

Changes:

Added a new HoverBackgroundToken union type to represent supported hover background tokens.
Added a hoverBackground CVA variant mapping tokens to hover:bg-f1-background-*-hover classes (with transition-colors).
Wired hoverBackground through F0Box so it’s applied via boxVariants.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
packages/react/src/components/F0Box/utils/background.ts	Adds `hoverBackground` variant mappings for hover background tokens.
packages/react/src/components/F0Box/types.ts	Introduces `HoverBackgroundToken` type for the new prop.
packages/react/src/components/F0Box/F0Box.tsx	Passes `hoverBackground` into the CVA variant resolver.

Copilot · 2026-03-24T09:56:59Z

packages/react/src/components/F0Box/types.ts

+/** Hover background tokens mapped to the f1 theme hover states */
+export type HoverBackgroundToken =
+  | "default"
+  | "secondary"
+  | "accent-bold"
+  | "promote"
+  | "selected"
+  | "selected-bold"


HoverBackgroundToken is introduced as part of the public F0Box token surface, but it isn’t re-exported from components/F0Box/index.tsx (that file explicitly enumerates exported token types). As a result, consumers can’t import this token type the same way they do BackgroundToken, BorderColorToken, etc. Please add HoverBackgroundToken to the token type re-export list in index.tsx to keep the public API consistent.

Copilot · 2026-03-24T09:57:00Z

packages/react/src/components/F0Box/F0Box.tsx

      // Background
      background,
+      hoverBackground,
      // Border


hoverBackground is wired into the main CVA variants, but it can’t be set via the responsive overrides (sm/md/lg/xl) because ResponsiveStyleProps only exposes background (not hoverBackground). If this prop is intended to behave like other style props, consider adding it to ResponsiveStyleProps and ensuring any needed responsive safelist entries exist for sm:hover:* classes.

Copilot · 2026-03-24T09:57:00Z

packages/react/src/components/F0Box/utils/background.ts

+  hoverBackground: {
+    default: "hover:bg-f1-background-hover transition-colors",
+    secondary: "hover:bg-f1-background-secondary-hover transition-colors",
+    "accent-bold": "hover:bg-f1-background-accent-bold-hover transition-colors",
+    promote: "hover:bg-f1-background-promote-hover transition-colors",
+    selected: "hover:bg-f1-background-selected-hover transition-colors",
+    "selected-bold":
+      "hover:bg-f1-background-selected-bold-hover transition-colors",


The hoverBackground variant strings repeat transition-colors for every token. This is a small maintainability issue (harder to adjust transition behavior consistently later). Consider factoring transition-colors out so it’s applied once when hoverBackground is set (e.g., via a shared constant, base class, or compound variant).

github-actions · 2026-03-24T09:57:13Z

📦 Alpha Package Version Published

Use pnpm i github:factorialco/f0#npm/alpha-pr-3738 to install the package

Use pnpm i github:factorialco/f0#0eee01807834879f665f9424350626085d33dfae to install this specific commit

github-actions · 2026-03-24T09:57:33Z

🔍 Visual review for your branch is published 🔍

Here are the links to:

github-actions · 2026-03-24T09:58:51Z

Coverage Report for packages/react

Status	Category	Percentage	Covered / Total
🔵	Lines	44.05%	10365 / 23530
🔵	Statements	43.36%	10683 / 24633
🔵	Functions	36.08%	2342 / 6491
🔵	Branches	35.27%	6528 / 18508

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/react/src/components/F0Box/F0Box.tsx	100%	47.82%	100%	100%
packages/react/src/components/F0Box/index.tsx	100%	100%	100%	100%
packages/react/src/components/F0Box/types.ts	100%	100%	100%	100%
packages/react/src/components/F0Box/utils/background.ts	100%	100%	100%	100%
packages/react/src/components/F0Box/utils/responsive-safelist.ts	0%	100%	100%	0%	12-398
packages/react/src/components/F0Box/utils/responsive.ts	6.66%	0%	0%	8.33%	131-165

Generated in workflow #12145 for commit 0591663 by the Vitest Coverage Report Action

AngelMsaa · 2026-03-24T10:47:14Z

@copilot open a new pull request to apply changes based on the comments in this thread

Copilot · 2026-03-24T10:47:23Z

@AngelMsaa I've opened a new pull request, #3739, to work on those changes. Once the pull request is ready, I'll request review from you.

Add a new `hoverBackground` prop to F0Box that exposes the 6 hover background tokens defined in @factorialco/f0-core but previously missing from the component API: - default (bg hover) - secondary (bg secondary hover) - accent-bold (bg accent bold hover) - promote (bg promote hover) - selected (bg selected hover) - selected-bold (bg selected bold hover) Each value applies the corresponding `hover:bg-f1-background-*-hover` Tailwind class along with `transition-colors` for smooth state changes.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

cursor · 2026-03-24T16:17:18Z

packages/react/src/components/F0Box/F0Box.tsx

            grow,
            shrink,
          }),
+          hoverBackground && "transition-colors",


Missing transition-colors for responsive-only hoverBackground usage

Medium Severity

The transition-colors class is only applied when the direct hoverBackground prop is set. If a consumer uses hoverBackground exclusively through a responsive breakpoint prop (e.g., sm={{ hoverBackground: "default" }}), the top-level hoverBackground is undefined, so transition-colors is never added. The hover color change will then be instant rather than smoothly animated, which is inconsistent with the direct-prop behavior. The check needs to also consider whether any breakpoint override includes a hoverBackground value.

Copilot AI review requested due to automatic review settings March 24, 2026 09:53

AngelMsaa requested a review from a team as a code owner March 24, 2026 09:53

github-actions bot added feat react Changes affect packages/react labels Mar 24, 2026

Copilot started reviewing on behalf of AngelMsaa March 24, 2026 09:53 View session

cursor bot reviewed Mar 24, 2026

View reviewed changes

packages/react/src/components/F0Box/types.ts Show resolved Hide resolved

Copilot AI reviewed Mar 24, 2026

View reviewed changes

Copilot AI mentioned this pull request Mar 24, 2026

feat(F0Box): address hoverBackground review feedback #3739

Draft

AngelMsaa force-pushed the feat/f0box-hover-background branch from 5eb9059 to 0591663 Compare March 24, 2026 16:12

cursor bot reviewed Mar 24, 2026

View reviewed changes

AngelMsaa closed this Mar 24, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(F0Box): add hoverBackground prop with semantic hover tokens#3738

feat(F0Box): add hoverBackground prop with semantic hover tokens#3738
AngelMsaa wants to merge 1 commit intomainfrom
feat/f0box-hover-background

AngelMsaa commented Mar 24, 2026 •

edited by cursor bot

Loading

Uh oh!

github-actions bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 24, 2026

Uh oh!

Copilot AI Mar 24, 2026

Uh oh!

Copilot AI Mar 24, 2026

Uh oh!

github-actions bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

AngelMsaa commented Mar 24, 2026

Uh oh!

Copilot AI commented Mar 24, 2026

Uh oh!

cursor bot left a comment

Uh oh!

cursor bot Mar 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

AngelMsaa commented Mar 24, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Usage

Checklist

Uh oh!

github-actions bot commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ No New Circular Dependencies

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Alpha Package Version Published

Uh oh!

github-actions bot commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 Visual review for your branch is published 🔍

Uh oh!

github-actions bot commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for packages/react

Uh oh!

AngelMsaa commented Mar 24, 2026

Uh oh!

Copilot AI commented Mar 24, 2026

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Mar 24, 2026

Choose a reason for hiding this comment

Missing transition-colors for responsive-only hoverBackground usage

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AngelMsaa commented Mar 24, 2026 •

edited by cursor bot

Loading

github-actions bot commented Mar 24, 2026 •

edited

Loading

github-actions bot commented Mar 24, 2026 •

edited

Loading

github-actions bot commented Mar 24, 2026 •

edited

Loading

github-actions bot commented Mar 24, 2026 •

edited

Loading

Missing `transition-colors` for responsive-only `hoverBackground` usage