fix(core): align border radius tokens with Figma design system#3805
fix(core): align border radius tokens with Figma design system#3805desiree-np wants to merge 3 commits intomainfrom
Conversation
- Add missing `xxl` token (20px / 1.25rem) to borderRadius scale in core and react-native theme.css - Migrate 11 hardcoded `rounded-[10px]` usages to `rounded` (the DEFAULT token) across web components
github-actions
bot
added
fix
core
📦 Alpha Package Version PublishedUse Use |
✅ No New Circular DependenciesNo new circular dependencies detected. Current count: 0 |
🔍 Visual review for your branch is published 🔍Here are the links to: |
There was a problem hiding this comment.
Pull request overview
Aligns border-radius design tokens across the monorepo with the Figma design system, adding the missing xxl size and replacing hardcoded 10px radii with the semantic Tailwind token.
Changes:
- Add
xxl(1.25rem/ 20px) to the core border radius token scale and React Native CSS variables. - Replace
rounded-[10px]withroundedacross affected React components/experimental UI to use the semantic default radius.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/core/src/tokens/borderRadius.ts | Adds xxl: "1.25rem" to the shared radius token scale. |
| packages/react-native/src/styles/theme.css | Adds --radius-xxl: 1.25rem to keep RN theme variables in sync with tokens. |
| packages/react/src/ui/InputField/InputField.tsx | Uses rounded instead of hardcoded rounded-[10px] for the sm variant (plus formatting changes). |
| packages/react/src/ui/F0Wizard/components/WizardSteps.tsx | Replaces rounded-[10px] with rounded on step buttons (plus formatting changes). |
| packages/react/src/experimental/Navigation/F0TableOfContent/index.tsx | Replaces placeholder rounded-[10px] with rounded (plus formatting changes). |
| packages/react/src/experimental/Navigation/F0TableOfContent/Item/PrimitiveItem.tsx | Replaces rounded-[10px] with rounded on item container (plus formatting changes). |
| packages/react/src/experimental/Forms/EntitySelect/ListItem/index.tsx | Replaces list item rounded-[10px] with rounded (plus formatting changes). |
| packages/react/src/experimental/Forms/EntitySelect/CreateItem/index.tsx | Replaces create-item rounded-[10px] with rounded (plus formatting changes). |
| packages/react/src/experimental/Forms/EntitySelect/Content/MainContent/Searcher.tsx | Replaces searcher rounded-[10px] with rounded (plus formatting changes). |
| packages/react/src/experimental/Forms/EntitySelect/Content/MainContent/index.tsx | Replaces select trigger rounded-[10px] with rounded (plus formatting changes). |
| packages/react/src/components/F0DurationInput/F0DurationInput.tsx | Replaces container rounded-[10px] with rounded (plus formatting changes). |
Comments suppressed due to low confidence (1)
packages/react/src/components/F0DurationInput/F0DurationInput.tsx:6
- This file was reformatted with semicolons, but
packages/reactis formatted by oxfmt withsemi: falseand CI runspnpm --filter @factorialco/f0-react format:check. Please run oxfmt to restore the expected formatting.
import { cva } from "cva";
import {
Fragment,
forwardRef,
useCallback,
useEffect,
| import { cva } from "cva"; | ||
| import { AnimatePresence, motion } from "motion/react"; | ||
| import { | ||
| AriaAttributes, |
There was a problem hiding this comment.
This file was reformatted with semicolons, but packages/react/.oxfmtrc.jsonc sets semi: false and CI runs pnpm --filter @factorialco/f0-react format:check. Please re-run pnpm --filter @factorialco/f0-react format (oxfmt) so the formatting matches repo conventions and the PR doesn’t fail the formatting job.
| import { cva } from "cva"; | ||
|
|
||
| import Check from "@/icons/app/Check" | ||
| import { cn, focusRing } from "@/lib/utils" | ||
| import { Counter } from "@/ui/Counter" | ||
| import Check from "@/icons/app/Check"; | ||
| import { cn, focusRing } from "@/lib/utils"; | ||
| import { Counter } from "@/ui/Counter"; |
There was a problem hiding this comment.
This file now uses semicolons, but @factorialco/f0-react enforces oxfmt with semi: false in CI (format:check). Please run the package formatter (oxfmt) so the file matches repo formatting and passes CI.
| import { AnimatePresence, motion } from "motion/react"; | ||
| import { ReactNode } from "react"; | ||
|
|
||
| import { ButtonInternal } from "@/components/F0Button/internal" | ||
| import { F0Icon } from "@/components/F0Icon" | ||
| import { OneEllipsis } from "@/components/OneEllipsis/OneEllipsis" | ||
| import { Counter } from "@/ui/Counter" | ||
| import { ChevronDown, Handle } from "@/icons/app" | ||
| import { useI18n } from "@/lib/providers/i18n" | ||
| import { cn, focusRing } from "@/lib/utils" | ||
| import { ButtonInternal } from "@/components/F0Button/internal"; | ||
| import { F0Icon } from "@/components/F0Icon"; | ||
| import { OneEllipsis } from "@/components/OneEllipsis/OneEllipsis"; |
There was a problem hiding this comment.
This file was reformatted with semicolons; however, packages/react uses oxfmt with semi: false and CI runs format:check. Please reformat with oxfmt to avoid failing CI and to reduce formatting-only churn.
| } from "react"; | ||
|
|
||
| import { OneEllipsis } from "@/components/OneEllipsis/OneEllipsis"; | ||
| import { F1SearchBox } from "@/experimental/Forms/Fields/F1SearchBox"; | ||
| import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; | ||
|
|
There was a problem hiding this comment.
This file appears to have been reformatted with semicolons, but packages/react/.oxfmtrc.jsonc configures semi: false and CI runs pnpm --filter @factorialco/f0-react format:check. Please run oxfmt so formatting matches repo conventions.
| import { ChevronDown, ChevronRight } from "lucide-react"; | ||
| import { useState } from "react"; | ||
|
|
||
| import { F0AvatarPerson } from "@/components/avatars/F0AvatarPerson" | ||
| import { F0Button } from "@/components/F0Button" | ||
| import { F0Icon } from "@/components/F0Icon" | ||
| import { Counter } from "@/ui/Counter" | ||
| import { CheckCircle } from "@/icons/app" | ||
| import LogoAvatar from "@/icons/app/LogoAvatar" | ||
| import { cn } from "@/lib/utils" | ||
| import { Checkbox } from "@/ui/checkbox" | ||
| import { F0AvatarPerson } from "@/components/avatars/F0AvatarPerson"; | ||
| import { F0Button } from "@/components/F0Button"; | ||
| import { F0Icon } from "@/components/F0Icon"; |
There was a problem hiding this comment.
Formatting: semicolons were introduced here, but packages/react is formatted by oxfmt with semi: false and CI checks format:check. Please run pnpm --filter @factorialco/f0-react format to align formatting.
| import { F0Button } from "@/components/F0Button"; | ||
| import { Plus } from "@/icons/app"; | ||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| import { focusNextFocusable, focusPreviousFocusable } from "../ListItem" | ||
| import { focusNextFocusable, focusPreviousFocusable } from "../ListItem"; | ||
|
|
There was a problem hiding this comment.
This file now includes semicolons, which conflicts with the packages/react oxfmt config (semi: false) enforced by CI. Please re-run the formatter (oxfmt) so format:check passes.
| import { Search } from "lucide-react"; | ||
|
|
||
| import { CrossedCircle } from "@/icons/app" | ||
| import { CrossedCircle } from "@/icons/app"; | ||
|
|
||
| import { F0Icon } from "../../../../../components/F0Icon" | ||
| import { focusNextFocusable, focusPreviousFocusable } from "../../ListItem" | ||
| import { F0Icon } from "../../../../../components/F0Icon"; | ||
| import { focusNextFocusable, focusPreviousFocusable } from "../../ListItem"; |
There was a problem hiding this comment.
This file was reformatted with semicolons, but packages/react uses oxfmt with semi: false and CI runs format:check. Please run the package formatter (oxfmt) to match repo conventions.
| import { VirtualItem } from "@tanstack/react-virtual"; | ||
| import React, { useCallback, useMemo } from "react"; | ||
|
|
||
| import { F0Select } from "@/components/F0Select" | ||
| import { F0Select } from "@/components/F0Select"; | ||
|
|
||
| import { Action } from "../../../../../components/F0Select/components/SelectBottomActions" | ||
| import { cn } from "../../../../../lib/utils" | ||
| import { Spinner } from "@/ui/Spinner" | ||
| import { VirtualList } from "../../../../Navigation/VirtualList" | ||
| import { CreateItem } from "../../CreateItem" | ||
| import { EntitySelectListItem } from "../../ListItem" | ||
| import { Action } from "../../../../../components/F0Select/components/SelectBottomActions"; | ||
| import { cn } from "../../../../../lib/utils"; | ||
| import { Spinner } from "@/ui/Spinner"; |
There was a problem hiding this comment.
Formatting: semicolons were introduced, but packages/react is enforced by oxfmt with semi: false in CI (format:check). Please reformat with oxfmt so this passes CI and avoids formatting-only diffs.
📱 Expo Go Preview Published
LinksQR Code |
| size: { | ||
| sm: "rounded-[10px]", | ||
| sm: "rounded", | ||
| md: "rounded-[12px]", |
There was a problem hiding this comment.
In this variant map, md still uses an arbitrary rounded-[12px] value while sm was migrated to the semantic token. Since core tokens define md (12px), consider switching md to rounded-md as well to keep border radius usage consistently token-based and easier to maintain.
| md: "rounded-[12px]", | |
| md: "rounded-md", |
| md: "0.75rem", | ||
| lg: "0.875rem", | ||
| xl: "1rem", | ||
| xxl: "1.25rem", | ||
| "2xl": "1.5rem", | ||
| full: "9999px", |
There was a problem hiding this comment.
Adding the new xxl border radius token is good, but some React APIs enumerate border-radius tokens manually (e.g. packages/react/src/components/F0Box/types.ts and utils/border.ts) and currently don’t include xxl. That makes the new token unavailable/inconsistent for consumers using those token-based props. Please update any such token unions/mappings to include xxl (and its per-corner variants) so the token is fully supported across the design system.
| --color-f0-background-accent-bold: var(--f0-background-accent-bold); | ||
| --color-f0-background-accent-bold-hover: var( | ||
| --f0-background-accent-bold-hover | ||
| ); | ||
| --color-f0-background-promote: var(--f0-background-promote); | ||
| --color-f0-background-promote-bold: var(--f0-background-promote-bold); | ||
| --color-f0-background-promote-hover: var(--f0-background-promote-hover); | ||
| --color-f0-background-critical: var(--f0-background-critical); |
There was a problem hiding this comment.
This PR is described as a border-radius token alignment, but this file also adds a new --color-f0-background-promote-bold mapping and defines --f0-background-promote-bold for light/dark variants. If this is intentional, please update the PR description to reflect the additional color-token change (or move it to a separate PR) to keep scope clear.
sauldom102
left a comment
sauldom102
left a comment
There was a problem hiding this comment.
We are defining here xxl border radius but we already have 2xl 🤔
Summary
xxltoken (20px) to the border radius scale — present in Figma but absent in coderounded-[10px]usages torounded(the correct semantic token for the DEFAULT 10px value)Changes
Token definition
packages/core/src/tokens/borderRadius.tsxxl: "1.25rem"(20px) betweenxland2xlpackages/react-native/src/styles/theme.css--radius-xxl: 1.25remto matchComponent cleanup (
rounded-[10px]→rounded)src/ui/InputField/InputField.tsxsrc/ui/F0Wizard/components/WizardSteps.tsxsrc/experimental/Navigation/F0TableOfContent/index.tsx(2 occurrences)src/experimental/Navigation/F0TableOfContent/Item/PrimitiveItem.tsxsrc/components/F0DurationInput/F0DurationInput.tsxsrc/experimental/Forms/EntitySelect/ListItem/index.tsx(2 occurrences)src/experimental/Forms/EntitySelect/CreateItem/index.tsxsrc/experimental/Forms/EntitySelect/Content/MainContent/Searcher.tsxsrc/experimental/Forms/EntitySelect/Content/MainContent/index.tsxBorder radius scale — before / after
none2xsxssmDEFAULT(rounded)rounded)mdlgxlxxl2xlfull