From 5eb9059ce87c07ec61429737617d397062e4b2d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81ngel=20Moreno?= Date: Tue, 24 Mar 2026 10:52:03 +0100 Subject: [PATCH 1/3] feat(F0Box): add hoverBackground prop with semantic hover tokens 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. --- packages/react/src/components/F0Box/F0Box.tsx | 2 ++ packages/react/src/components/F0Box/types.ts | 9 +++++++++ .../react/src/components/F0Box/utils/background.ts | 11 ++++++++++- 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/F0Box/F0Box.tsx b/packages/react/src/components/F0Box/F0Box.tsx index c81cbcbc9c..f9903d9b45 100644 --- a/packages/react/src/components/F0Box/F0Box.tsx +++ b/packages/react/src/components/F0Box/F0Box.tsx @@ -109,6 +109,7 @@ export const F0Box = forwardRef( maxHeight, // Background background, + hoverBackground, // Border borderColor, border, @@ -197,6 +198,7 @@ export const F0Box = forwardRef( maxWidth, maxHeight, background, + hoverBackground, borderColor, border, borderTop, diff --git a/packages/react/src/components/F0Box/types.ts b/packages/react/src/components/F0Box/types.ts index f04bb70f29..35e4f75868 100644 --- a/packages/react/src/components/F0Box/types.ts +++ b/packages/react/src/components/F0Box/types.ts @@ -168,6 +168,15 @@ export type BackgroundToken = | "selected-bold" | "overlay" +/** Hover background tokens mapped to the f1 theme hover states */ +export type HoverBackgroundToken = + | "default" + | "secondary" + | "accent-bold" + | "promote" + | "selected" + | "selected-bold" + /** Border color tokens mapped to the f1 theme */ export type BorderColorToken = | "default" diff --git a/packages/react/src/components/F0Box/utils/background.ts b/packages/react/src/components/F0Box/utils/background.ts index 1045ca9876..664545ad52 100644 --- a/packages/react/src/components/F0Box/utils/background.ts +++ b/packages/react/src/components/F0Box/utils/background.ts @@ -1,4 +1,4 @@ -import type { BackgroundToken } from "../types" +import type { BackgroundToken, HoverBackgroundToken } from "../types" export const backgroundVariants = { background: { @@ -25,4 +25,13 @@ export const backgroundVariants = { "selected-bold": "bg-f1-background-selected-bold", overlay: "bg-f1-background-overlay", } satisfies Record, + 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", + } satisfies Record, } From b28f304d52f84db185a598d91a94a3668df15b58 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 24 Mar 2026 10:47:20 +0000 Subject: [PATCH 2/3] Initial plan From 6ac520129113aace51d9b0f1442cd162d0d18583 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 24 Mar 2026 10:55:59 +0000 Subject: [PATCH 3/3] feat(F0Box): fix review - export type, responsive prop, refactor transition Co-authored-by: AngelMsaa <90286990+AngelMsaa@users.noreply.github.com> Agent-Logs-Url: https://github.com/factorialco/f0/sessions/9e71c013-4726-481a-849e-5784b23604fe --- packages/react/src/components/F0Box/F0Box.tsx | 1 + packages/react/src/components/F0Box/index.tsx | 1 + .../react/src/components/F0Box/utils/background.ts | 13 ++++++------- .../components/F0Box/utils/responsive-safelist.ts | 10 ++++++++++ .../react/src/components/F0Box/utils/responsive.ts | 2 ++ 5 files changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/react/src/components/F0Box/F0Box.tsx b/packages/react/src/components/F0Box/F0Box.tsx index f9903d9b45..33f8b8a84b 100644 --- a/packages/react/src/components/F0Box/F0Box.tsx +++ b/packages/react/src/components/F0Box/F0Box.tsx @@ -168,6 +168,7 @@ export const F0Box = forwardRef( ref={ref} className={cn( hasPerSideBorder && "border-0", + hoverBackground && "transition-colors", boxVariants({ display, position, diff --git a/packages/react/src/components/F0Box/index.tsx b/packages/react/src/components/F0Box/index.tsx index 3c58fd34ba..3263537379 100644 --- a/packages/react/src/components/F0Box/index.tsx +++ b/packages/react/src/components/F0Box/index.tsx @@ -26,6 +26,7 @@ export type { FlexWrapToken, FractionToken, GapToken, + HoverBackgroundToken, JustifyContentToken, MarginToken, NumericSizeToken, diff --git a/packages/react/src/components/F0Box/utils/background.ts b/packages/react/src/components/F0Box/utils/background.ts index 664545ad52..49d971d447 100644 --- a/packages/react/src/components/F0Box/utils/background.ts +++ b/packages/react/src/components/F0Box/utils/background.ts @@ -26,12 +26,11 @@ export const backgroundVariants = { overlay: "bg-f1-background-overlay", } satisfies Record, 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", + default: "hover:bg-f1-background-hover", + secondary: "hover:bg-f1-background-secondary-hover", + "accent-bold": "hover:bg-f1-background-accent-bold-hover", + promote: "hover:bg-f1-background-promote-hover", + selected: "hover:bg-f1-background-selected-hover", + "selected-bold": "hover:bg-f1-background-selected-bold-hover", } satisfies Record, } diff --git a/packages/react/src/components/F0Box/utils/responsive-safelist.ts b/packages/react/src/components/F0Box/utils/responsive-safelist.ts index ec7331a810..170772d178 100644 --- a/packages/react/src/components/F0Box/utils/responsive-safelist.ts +++ b/packages/react/src/components/F0Box/utils/responsive-safelist.ts @@ -144,6 +144,16 @@ export const RESPONSIVE_SAFELIST = [ "xl:bg-f1-background-positive", "xl:bg-f1-background-positive-bold", "xl:bg-f1-background-selected", "xl:bg-f1-background-selected-secondary", "xl:bg-f1-background-selected-bold", "xl:bg-f1-background-overlay", + // ===================== HOVER BACKGROUND ===================== + "sm:hover:bg-f1-background-hover", "sm:hover:bg-f1-background-secondary-hover", "sm:hover:bg-f1-background-accent-bold-hover", + "sm:hover:bg-f1-background-promote-hover", "sm:hover:bg-f1-background-selected-hover", "sm:hover:bg-f1-background-selected-bold-hover", + "md:hover:bg-f1-background-hover", "md:hover:bg-f1-background-secondary-hover", "md:hover:bg-f1-background-accent-bold-hover", + "md:hover:bg-f1-background-promote-hover", "md:hover:bg-f1-background-selected-hover", "md:hover:bg-f1-background-selected-bold-hover", + "lg:hover:bg-f1-background-hover", "lg:hover:bg-f1-background-secondary-hover", "lg:hover:bg-f1-background-accent-bold-hover", + "lg:hover:bg-f1-background-promote-hover", "lg:hover:bg-f1-background-selected-hover", "lg:hover:bg-f1-background-selected-bold-hover", + "xl:hover:bg-f1-background-hover", "xl:hover:bg-f1-background-secondary-hover", "xl:hover:bg-f1-background-accent-bold-hover", + "xl:hover:bg-f1-background-promote-hover", "xl:hover:bg-f1-background-selected-hover", "xl:hover:bg-f1-background-selected-bold-hover", + // ===================== BORDER COLOR ===================== "sm:border-f1-border", "sm:border-f1-border-secondary", "sm:border-f1-border-bold", "sm:border-f1-border-selected", "sm:border-f1-border-selected-bold", diff --git a/packages/react/src/components/F0Box/utils/responsive.ts b/packages/react/src/components/F0Box/utils/responsive.ts index 7944ef74eb..e66cc55fbc 100644 --- a/packages/react/src/components/F0Box/utils/responsive.ts +++ b/packages/react/src/components/F0Box/utils/responsive.ts @@ -13,6 +13,7 @@ import type { FlexDirectionToken, FlexWrapToken, GapToken, + HoverBackgroundToken, JustifyContentToken, MarginToken, OverflowToken, @@ -74,6 +75,7 @@ export interface ResponsiveStyleProps { maxHeight?: SizeToken // Background background?: BackgroundToken + hoverBackground?: HoverBackgroundToken // Border borderColor?: BorderColorToken border?: BorderWidthToken