From b5f25a221194d9c00dd77f1405cc92a2df37c5d1 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 3 Aug 2026 09:13:08 +0000 Subject: [PATCH 1/4] ci(deps): bump chromaui/action from 13 to 18 Bumps [chromaui/action](https://github.com/chromaui/action) from 13 to 18. - [Release notes](https://github.com/chromaui/action/releases) - [Changelog](https://github.com/chromaui/action/blob/main/CHANGELOG.md) - [Commits](https://github.com/chromaui/action/compare/v13...v18) --- updated-dependencies: - dependency-name: chromaui/action dependency-version: '18' dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] --- .github/workflows/deploy-storybook-main.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/deploy-storybook-main.yml b/.github/workflows/deploy-storybook-main.yml index 9828ae8..77c3ca7 100644 --- a/.github/workflows/deploy-storybook-main.yml +++ b/.github/workflows/deploy-storybook-main.yml @@ -56,7 +56,7 @@ jobs: run: pnpm run storybook:build - name: Publish to Chromatic - uses: chromaui/action@v13 + uses: chromaui/action@v18 with: token: ${{ secrets.GITHUB_TOKEN }} projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} From fdf8de7e412165afaf4626cc7343ce7f2ba4ffd7 Mon Sep 17 00:00:00 2001 From: Ranit Manik <138437760+RanitManik@users.noreply.github.com> Date: Wed, 5 Aug 2026 22:27:01 +0530 Subject: [PATCH 2/4] refactor: standardize border-radius and update focus ring implementation across UI components --- ui/src/components/Alert/Alert.tsx | 2 +- ui/src/components/Badge/Badge.tsx | 42 ++++++++-------- ui/src/components/Breadcrumb/Breadcrumb.tsx | 2 +- ui/src/components/Button/Button.tsx | 2 +- ui/src/components/Calendar/Calendar.tsx | 2 +- ui/src/components/Card/Card.tsx | 2 +- ui/src/components/Checkbox/Checkbox.tsx | 8 +-- ui/src/components/Clipboard/Clipboard.tsx | 2 +- ui/src/components/ContextMenu/ContextMenu.tsx | 34 +++++++++---- ui/src/components/Drawer/Drawer.tsx | 49 ++++++++++--------- ui/src/components/Dropdown/Dropdown.tsx | 26 ++++++++-- ui/src/components/FileUpload/FileUpload.tsx | 6 +-- ui/src/components/InputOTP/InputOTP.tsx | 9 ++-- ui/src/components/Link/Link.tsx | 2 +- ui/src/components/Modal/Modal.tsx | 33 +++++++------ ui/src/components/Pagination/Pagination.tsx | 2 +- ui/src/components/Popover/Popover.tsx | 19 ++++++- ui/src/components/Progress/Progress.tsx | 8 ++- ui/src/components/RangeInput/RangeInput.tsx | 10 ++-- ui/src/components/Skeleton/Skeleton.tsx | 2 +- ui/src/components/Slider/Slider.tsx | 7 ++- .../SortableList/SortableList.stories.tsx | 4 ++ .../components/SortableList/SortableList.tsx | 36 ++++++++++++-- ui/src/components/Switch/Switch.tsx | 2 +- ui/src/components/Table/Table.tsx | 2 +- ui/src/components/Tabs/Tabs.tsx | 6 +-- ui/src/components/Toast/Toast.tsx | 2 +- ui/src/components/Tooltip/Tooltip.tsx | 2 +- ui/src/components/TreeView/TreeView.tsx | 2 +- ui/src/styles/focus.css | 15 +++--- ui/src/styles/tokens.css | 6 +-- 31 files changed, 220 insertions(+), 126 deletions(-) diff --git a/ui/src/components/Alert/Alert.tsx b/ui/src/components/Alert/Alert.tsx index c631461..7fb6f37 100644 --- a/ui/src/components/Alert/Alert.tsx +++ b/ui/src/components/Alert/Alert.tsx @@ -182,7 +182,7 @@ export const Alert = React.forwardRef( { variant = "info", size = "md", - rounded = "md", + rounded = "sm", style = "filled", startIcon, endIcon, diff --git a/ui/src/components/Badge/Badge.tsx b/ui/src/components/Badge/Badge.tsx index a8d9a10..b40ff7d 100644 --- a/ui/src/components/Badge/Badge.tsx +++ b/ui/src/components/Badge/Badge.tsx @@ -65,62 +65,62 @@ export interface BadgeProps { const badgeBase = tw`inline-flex items-center font-medium transition-all duration-200`; -// Filled — brand colors use tokens, semantics stay as Tailwind +// Filled const variantsFilled = { primary: tw`bg-primary text-primary-foreground`, secondary: tw`bg-secondary text-secondary-foreground`, - success: tw`bg-green-600 text-white`, - warning: tw`bg-yellow-600 text-white`, + success: tw`bg-success text-success-foreground`, + warning: tw`bg-warning text-warning-foreground`, error: tw`bg-destructive text-destructive-foreground`, - info: tw`bg-cyan-600 text-white`, + info: tw`bg-info text-info-foreground`, }; // Outline const variantsOutline = { primary: tw`border border-primary bg-background text-primary`, secondary: tw`border border-secondary-foreground bg-background text-secondary-foreground`, - success: tw`border border-green-600 bg-background text-green-600`, - warning: tw`border border-yellow-600 bg-background text-yellow-600`, + success: tw`border border-success bg-background text-success`, + warning: tw`border border-warning bg-background text-warning`, error: tw`border border-destructive bg-background text-destructive`, - info: tw`border border-cyan-600 bg-background text-cyan-600`, + info: tw`border border-info bg-background text-info`, }; // Soft const variantsSoft = { primary: tw`bg-accent text-accent-foreground`, secondary: tw`bg-secondary text-secondary-foreground`, - success: tw`bg-green-50 text-green-700`, - warning: tw`bg-yellow-50 text-yellow-700`, - error: tw`bg-destructive/10 text-destructive`, - info: tw`bg-cyan-50 text-cyan-700`, + success: tw`bg-success/15 text-success`, + warning: tw`bg-warning/15 text-warning`, + error: tw`bg-destructive/15 text-destructive`, + info: tw`bg-info/15 text-info`, }; // Hover states for clickable badges const hoverStatesFilled = { primary: tw`hover:bg-primary/90`, secondary: tw`hover:bg-secondary/80`, - success: tw`hover:bg-green-700`, - warning: tw`hover:bg-yellow-700`, + success: tw`hover:bg-success/90`, + warning: tw`hover:bg-warning/90`, error: tw`hover:bg-destructive/90`, - info: tw`hover:bg-cyan-700`, + info: tw`hover:bg-info/90`, }; const hoverStatesOutline = { primary: tw`hover:bg-accent`, secondary: tw`hover:bg-secondary`, - success: tw`hover:bg-green-50`, - warning: tw`hover:bg-yellow-50`, + success: tw`hover:bg-success/10`, + warning: tw`hover:bg-warning/10`, error: tw`hover:bg-destructive/10`, - info: tw`hover:bg-cyan-50`, + info: tw`hover:bg-info/10`, }; const hoverStatesSoft = { primary: tw`hover:bg-accent/80`, secondary: tw`hover:bg-secondary/80`, - success: tw`hover:bg-green-100`, - warning: tw`hover:bg-yellow-100`, - error: tw`hover:bg-destructive/15`, - info: tw`hover:bg-cyan-100`, + success: tw`hover:bg-success/25`, + warning: tw`hover:bg-warning/25`, + error: tw`hover:bg-destructive/25`, + info: tw`hover:bg-info/25`, }; const sizes = { diff --git a/ui/src/components/Breadcrumb/Breadcrumb.tsx b/ui/src/components/Breadcrumb/Breadcrumb.tsx index cad7cc1..49abedb 100644 --- a/ui/src/components/Breadcrumb/Breadcrumb.tsx +++ b/ui/src/components/Breadcrumb/Breadcrumb.tsx @@ -60,7 +60,7 @@ export interface BreadcrumbProps { // Design primitives matching Select component const breadcrumbBase = tw`inline-flex items-center`; -const itemBase = tw`inline-flex items-center text-sm font-medium transition-colors duration-200`; +const itemBase = tw`rui-focus-ring inline-flex items-center text-sm font-medium transition-colors duration-200`; const variants = { primary: tw`text-muted-foreground hover:text-primary`, diff --git a/ui/src/components/Button/Button.tsx b/ui/src/components/Button/Button.tsx index 5a0c8cc..a6e6a4d 100644 --- a/ui/src/components/Button/Button.tsx +++ b/ui/src/components/Button/Button.tsx @@ -95,7 +95,7 @@ export const Button = React.forwardRef( endIcon, loading = false, fullWidth = false, - rounded = "md", + rounded = "sm", animation = "none", children, disabled, diff --git a/ui/src/components/Calendar/Calendar.tsx b/ui/src/components/Calendar/Calendar.tsx index a66947d..0292940 100644 --- a/ui/src/components/Calendar/Calendar.tsx +++ b/ui/src/components/Calendar/Calendar.tsx @@ -275,7 +275,7 @@ export const Calendar: React.FC = ({ outOfMonth && showOutsideDays && "text-muted-foreground/60", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground", - todayFlag && !isSelected && "ring-1 ring-ring/40 ring-inset" + todayFlag && !isSelected && "ring-1 ring-border font-semibold" ); return ( diff --git a/ui/src/components/Card/Card.tsx b/ui/src/components/Card/Card.tsx index 7154410..53d8883 100644 --- a/ui/src/components/Card/Card.tsx +++ b/ui/src/components/Card/Card.tsx @@ -109,7 +109,7 @@ export const Card = React.forwardRef( onCopy, onError, disabled = false, - rounded = "md", + rounded = "sm", animation = "none", className = "", ...props diff --git a/ui/src/components/ContextMenu/ContextMenu.tsx b/ui/src/components/ContextMenu/ContextMenu.tsx index b80824f..6d56672 100644 --- a/ui/src/components/ContextMenu/ContextMenu.tsx +++ b/ui/src/components/ContextMenu/ContextMenu.tsx @@ -21,11 +21,20 @@ const useContextMenu = () => { }; // Base styles (same as Dropdown) -const contentBase = tw`z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground p-1 shadow-md`; +const contentBase = tw`z-50 min-w-[8rem] overflow-hidden border border-border bg-popover text-popover-foreground p-1 shadow-md`; const itemBase = tw`relative flex w-full cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50`; const labelBase = tw`px-2 py-1.5 text-sm font-semibold text-foreground`; const separatorBase = tw`-mx-1 my-1 h-px bg-border`; +const roundedOptions = { + none: tw`rounded-none`, + sm: tw`rounded-sm`, + md: tw`rounded-md`, + lg: tw`rounded-lg`, + xl: tw`rounded-xl`, + full: tw`rounded-full`, +}; + // Animation classes const contentAnimation = tw`animate-in fade-in-0 zoom-in-95 duration-150 ease-out`; @@ -60,6 +69,11 @@ export interface ContextMenuTriggerProps { } export interface ContextMenuContentProps { + /** + * Control border radius + * @default "sm" + */ + rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full"; /** * Content to display in the context menu */ @@ -192,7 +206,7 @@ ContextMenuTrigger.displayName = "ContextMenuTrigger"; // ContextMenuContent component export const ContextMenuContent = React.forwardRef( - ({ className, children, ...props }, ref) => { + ({ rounded = "sm", className, children, ...props }, ref) => { const { isOpen, position } = useContextMenu(); const contentRef = useRef(null); const [isVisible, setIsVisible] = useState(false); @@ -223,11 +237,7 @@ export const ContextMenuContent = React.forwardRef