| author |  Julius Marminge <julius0216@outlook.com> 2026-06-09 17:15:09-07:00 |
| committer |  GitHub <noreply@github.com> 2026-06-09 17:15:09-07:00 |
| log | b03bc4b52d184c5f2367d702e043586a0e9fcdaa |
| tree | 9cded4c0f735f3a617ca3a8fb34232a6c108a499 |
| parent | aca14507f729a1a8279cc77f8a94072d87e00e1b |
| signature | Signed by PGP key B5690EEEBB952194 |
Mute icons in labeled controls and suppress popup focus rings (#3015)
Co-authored-by: ss <ss@barekey.dev>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>6 files changed, 23 insertions(+), 10 deletions(-)
apps
web
apps/web/src/components/ui/autocomplete.tsx+1-1
| ... | ... | @@ -125,7 +125,7 @@ function AutocompleteItem({ className, children, ...props }: AutocompletePrimiti |
| 125 | 125 | return ( |
| 126 | 126 | <AutocompletePrimitive.Item |
| 127 | 127 | className={cn( |
| 128 | "flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none hover:bg-accent data-disabled:pointer-events-none data-selected:bg-accent/50 data-selected:text-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground [&[data-highlighted][data-selected]]:bg-accent [&[data-highlighted][data-selected]]:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm", | |
| 128 | "flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none hover:bg-accent data-disabled:pointer-events-none data-selected:bg-accent/50 data-selected:text-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground [&[data-highlighted][data-selected]]:bg-accent [&[data-highlighted][data-selected]]:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='text-'])]:text-muted-foreground", | |
| 129 | 129 | className, |
| 130 | 130 | )} |
| 131 | 131 | data-slot="autocomplete-item" |
apps/web/src/components/ui/button.tsx+2-2
| ... | ... | @@ -37,10 +37,10 @@ const buttonVariants = cva( |
| 37 | 37 | "destructive-outline": |
| 38 | 38 | "border-input bg-popover not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4", |
| 39 | 39 | ghost: |
| 40 | "border-transparent text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent", | |
| 40 | "border-transparent text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent [&_svg:not([class*='text-'])]:text-muted-foreground", | |
| 41 | 41 | link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline", |
| 42 | 42 | outline: |
| 43 | "border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64", | |
| 43 | "border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64 [&_svg:not([class*='text-'])]:text-muted-foreground", | |
| 44 | 44 | secondary: |
| 45 | 45 | "border-transparent bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90", |
| 46 | 46 | }, |
apps/web/src/components/ui/combobox.tsx+2
| ... | ... | @@ -208,9 +208,11 @@ function ComboboxItem({ |
| 208 | 208 | </ComboboxPrimitive.ItemIndicator> |
| 209 | 209 | <div |
| 210 | 210 | className={cn( |
| 211 | "[&_svg:not([class*='text-'])]:text-muted-foreground", | |
| 211 | 212 | hideIndicator ? "col-start-1 col-span-full" : "col-start-2", |
| 212 | 213 | contentClassName, |
| 213 | 214 | )} |
| 215 | data-slot="combobox-item-content" | |
| 214 | 216 | > |
| 215 | 217 | {children} |
| 216 | 218 | </div> |
apps/web/src/components/ui/menu.tsx+2-2
| ... | ... | @@ -78,7 +78,7 @@ function MenuItem({ |
| 78 | 78 | return ( |
| 79 | 79 | <MenuPrimitive.Item |
| 80 | 80 | className={cn( |
| 81 | "[&>svg]:-mx-0.5 flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:shrink-0", | |
| 81 | "[&>svg]:-mx-0.5 flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:[&>svg:not([class*='text-'])]:text-current [&>svg]:pointer-events-none [&>svg]:shrink-0", | |
| 82 | 82 | className, |
| 83 | 83 | )} |
| 84 | 84 | data-inset={inset} |
| ... | ... | @@ -235,7 +235,7 @@ function MenuSubTrigger({ |
| 235 | 235 | return ( |
| 236 | 236 | <MenuPrimitive.SubmenuTrigger |
| 237 | 237 | className={cn( |
| 238 | "flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", | |
| 238 | "flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none", | |
| 239 | 239 | className, |
| 240 | 240 | )} |
| 241 | 241 | data-inset={inset} |
apps/web/src/components/ui/select.tsx+8-5
| ... | ... | @@ -21,7 +21,7 @@ const selectTriggerVariants = cva( |
| 21 | 21 | variants: { |
| 22 | 22 | variant: { |
| 23 | 23 | default: |
| 24 | "w-full min-w-36 border-input bg-background not-dark:bg-clip-padding text-foreground shadow-xs/5 ring-ring/24 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", | |
| 24 | "w-full min-w-36 border-input bg-background not-dark:bg-clip-padding text-foreground shadow-xs/5 ring-ring/24 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='text-'])]:text-muted-foreground [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", | |
| 25 | 25 | ghost: |
| 26 | 26 | "border-transparent text-muted-foreground/70 focus-visible:ring-2 focus-visible:ring-ring data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent [:hover,[data-pressed]]:text-foreground/80", |
| 27 | 27 | }, |
| ... | ... | @@ -54,7 +54,7 @@ function SelectButton({ className, size, variant, render, children, ...props }: |
| 54 | 54 | {children} |
| 55 | 55 | </span> |
| 56 | 56 | {variant === "ghost" ? ( |
| 57 | <ChevronDownIcon className="size-3 opacity-50" /> | |
| 57 | <ChevronDownIcon className="-me-1 size-3 opacity-50" /> | |
| 58 | 58 | ) : ( |
| 59 | 59 | <ChevronsUpDownIcon className={selectTriggerIconClassName} /> |
| 60 | 60 | )} |
| ... | ... | @@ -87,7 +87,7 @@ function SelectTrigger({ |
| 87 | 87 | > |
| 88 | 88 | {children} |
| 89 | 89 | <SelectPrimitive.Icon data-slot="select-icon"> |
| 90 | <ChevronDownIcon className="size-3 opacity-50" /> | |
| 90 | <ChevronDownIcon className="-me-1 size-3 opacity-50" /> | |
| 91 | 91 | </SelectPrimitive.Icon> |
| 92 | 92 | </SelectPrimitive.Trigger> |
| 93 | 93 | ); |
| ... | ... | @@ -138,7 +138,7 @@ function SelectPopup({ |
| 138 | 138 | sideOffset={sideOffset} |
| 139 | 139 | > |
| 140 | 140 | <SelectPrimitive.Popup |
| 141 | className="origin-(--transform-origin) text-foreground" | |
| 141 | className="origin-(--transform-origin) rounded-lg text-foreground outline-none" | |
| 142 | 142 | data-slot="select-popup" |
| 143 | 143 | {...props} |
| 144 | 144 | > |
| ... | ... | @@ -210,7 +210,10 @@ function SelectItem({ |
| 210 | 210 | </SelectPrimitive.ItemIndicator> |
| 211 | 211 | )} |
| 212 | 212 | <SelectPrimitive.ItemText |
| 213 | className={cn("min-w-0", hideIndicator ? "col-start-1" : "col-start-2")} | |
| 213 | className={cn( | |
| 214 | "min-w-0 [&_svg:not([class*='text-'])]:text-muted-foreground", | |
| 215 | hideIndicator ? "col-start-1" : "col-start-2", | |
| 216 | )} | |
| 214 | 217 | data-slot="select-item-text" |
| 215 | 218 | > |
| 216 | 219 | {children} |
apps/web/src/index.css+8
| ... | ... | @@ -54,6 +54,14 @@ |
| 54 | 54 | * { |
| 55 | 55 | @apply border-border outline-ring/50; |
| 56 | 56 | } |
| 57 | :where([data-slot="menu-popup"], [data-slot="select-popup"], [data-slot="popover-popup"]):focus, | |
| 58 | :where( | |
| 59 | [data-slot="menu-popup"], | |
| 60 | [data-slot="select-popup"], | |
| 61 | [data-slot="popover-popup"] | |
| 62 | ):focus-visible { | |
| 63 | @apply outline-none ring-0; | |
| 64 | } | |
| 57 | 65 | html { |
| 58 | 66 | background-color: var(--app-chrome-background); |
| 59 | 67 | } |