Skip to content

Commit c9c4a4a

Browse files
Xanacasclaude
Xanacas
and
claude
committed
fix(web): unify focus ring styles across sidebar and app
The sidebar components used `ring-sidebar-ring` which was never defined in the theme CSS, causing focus rings to fall back to `currentColor` (grey) instead of the app's blue `--ring` token. Thread rows had their focus ring explicitly suppressed with `focus-visible:ring-0`. - Replace `ring-sidebar-ring` with `ring-ring` in all sidebar UI primitives (SidebarGroupLabel, SidebarGroupAction, SidebarMenuButton, SidebarMenuAction, SidebarMenuSubButton) - Restore focus visibility on thread rows with `ring-1 ring-inset` to avoid clipping on first/last items Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
1 parent 46ea594 commit c9c4a4a

File tree

2 files changed

+6
-6
lines changed

2 files changed

+6
-6
lines changed

‎apps/web/src/components/Sidebar.logic.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export function resolveThreadRowClassName(input: {
5151
isSelected: boolean;
5252
}): string {
5353
const baseClassName =
54-
"h-7 w-full translate-x-0 cursor-default justify-start px-2 text-left select-none focus-visible:ring-0";
54+
"h-7 w-full translate-x-0 cursor-default justify-start px-2 text-left select-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring";
5555

5656
if (input.isSelected && input.isActive) {
5757
return cn(

‎apps/web/src/components/ui/sidebar.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -681,7 +681,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
681681
function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div">) {
682682
const defaultProps = {
683683
className: cn(
684-
"flex h-8 shrink-0 items-center rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
684+
"flex h-8 shrink-0 items-center rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
685685
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
686686
className,
687687
),
@@ -699,7 +699,7 @@ function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentP
699699
function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<"button">) {
700700
const defaultProps = {
701701
className: cn(
702-
"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
702+
"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
703703
// Increases the hit area of the button on mobile.
704704
"after:-inset-2 after:absolute md:after:hidden",
705705
"group-data-[collapsible=icon]:hidden",
@@ -750,7 +750,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
750750
}
751751

752752
const sidebarMenuButtonVariants = cva(
753-
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
753+
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
754754
{
755755
defaultVariants: {
756756
size: "default",
@@ -834,7 +834,7 @@ function SidebarMenuAction({
834834
}) {
835835
const defaultProps = {
836836
className: cn(
837-
"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
837+
"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
838838
// Increases the hit area of the button on mobile.
839839
"after:-inset-2 after:absolute md:after:hidden",
840840
"peer-data-[size=sm]/menu-button:top-1",
@@ -946,7 +946,7 @@ function SidebarMenuSubButton({
946946
}) {
947947
const defaultProps = {
948948
className: cn(
949-
"-translate-x-px flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
949+
"-translate-x-px flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
950950
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
951951
size === "sm" && "text-xs",
952952
size === "md" && "text-sm",

0 commit comments

Comments
 (0)