@@ -223,7 +223,7 @@ export const ChartTooltipContent = React.forwardRef< !hideIndicator && (

= {

@radix-ui/primitives

@radix-ui/colors

@stitches/react

diff --git a/site/src/components/Combobox/Combobox.tsx b/site/src/components/Combobox/Combobox.tsx index 35a4846fcffb4..64487aeb7b08f 100644 --- a/site/src/components/Combobox/Combobox.tsx +++ b/site/src/components/Combobox/Combobox.tsx @@ -91,7 +91,7 @@ export const Combobox: FC = ({ - + { value: string; @@ -14,6 +15,7 @@ export const CopyableValue: FC = ({ placement = "bottom-start", PopperProps, children, + className, ...attrs }) => { const { showCopiedSuccess, copyToClipboard } = useClipboard({ @@ -27,7 +29,14 @@ export const CopyableValue: FC = ({ placement={placement} PopperProps={PopperProps} > - + {children} diff --git a/site/src/components/DropdownMenu/DropdownMenu.tsx b/site/src/components/DropdownMenu/DropdownMenu.tsx index 01547c30b17a6..8169847615bb0 100644 --- a/site/src/components/DropdownMenu/DropdownMenu.tsx +++ b/site/src/components/DropdownMenu/DropdownMenu.tsx @@ -38,7 +38,7 @@ const DropdownMenuSubTrigger = forwardRef< ref={ref} className={cn( [ - "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-surface-secondary", + "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-surface-secondary", "data-[state=open]:bg-surface-secondary [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", ], @@ -61,7 +61,7 @@ const DropdownMenuSubContent = forwardRef< ref={ref} className={cn( [ - "z-50 min-w-[8rem] overflow-hidden rounded-md border border-solid bg-surface-primary p-1 text-content-secondary shadow-lg", + "z-50 min-w-32 overflow-hidden rounded-md border border-solid bg-surface-primary p-1 text-content-secondary shadow-lg", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", @@ -111,10 +111,10 @@ export const DropdownMenuItem = forwardRef< [ ` relative flex cursor-default select-none items-center gap-2 rounded-sm - px-2 py-1.5 text-sm text-content-secondary font-medium outline-none + px-2 py-1.5 text-sm text-content-secondary font-medium outline-hidden no-underline focus:bg-surface-secondary focus:text-content-primary - data-[disabled]:pointer-events-none data-[disabled]:opacity-50 + data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-icon-sm [&>svg]:shrink-0 [&_img]:size-icon-sm [&>img]:shrink-0 `, @@ -135,8 +135,8 @@ const DropdownMenuCheckboxItem = forwardRef< ref={ref} className={cn( [ - "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors", - "focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50", + "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors", + "focus:bg-surface-secondary focus:text-content-primary data-disabled:pointer-events-none data-disabled:opacity-50", ], className, )} @@ -162,8 +162,8 @@ const DropdownMenuRadioItem = forwardRef< ref={ref} className={cn( [ - "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors", - "focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50", + "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors", + "focus:bg-surface-secondary focus:text-content-primary data-disabled:pointer-events-none data-disabled:opacity-50", ], className, )} diff --git a/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx b/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx index e9042eefb7d6b..979022ca85332 100644 --- a/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx +++ b/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx @@ -98,7 +98,7 @@ export const GlobalErrorBoundaryInner: FC = ({ type ErrorStackProps = Readonly<{ error: Error | ErrorResponse }>; const ErrorStack: FC = ({ error }) => { return ( -

{isRouteErrorResponse(error) ? ( <>

diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx index 78ad6c0311c06..742ac8529b1c3 100644 --- a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx +++ b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx @@ -52,7 +52,7 @@ export const FeatureStageBadge: FC = ({ = ({ /> - diff --git a/site/src/components/Input/Input.tsx b/site/src/components/Input/Input.tsx index 9f3896a1f4f6d..467abe8886958 100644 --- a/site/src/components/Input/Input.tsx +++ b/site/src/components/Input/Input.tsx @@ -14,10 +14,10 @@ export const Input = forwardRef< type={type} className={cn( `flex h-10 w-full rounded-md border border-border border-solid bg-transparent px-3 - text-base shadow-sm transition-colors + text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-content-primary placeholder:text-content-secondary - focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link + focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-content-link disabled:cursor-not-allowed disabled:opacity-50 md:text-sm text-inherit`, className, )} diff --git a/site/src/components/Link/Link.tsx b/site/src/components/Link/Link.tsx index f861ae2e197f7..c917ca9dea7cc 100644 --- a/site/src/components/Link/Link.tsx +++ b/site/src/components/Link/Link.tsx @@ -6,8 +6,8 @@ import { cn } from "utils/cn"; const linkVariants = cva( `relative inline-flex items-center no-underline font-medium text-content-link hover:cursor-pointer - after:hover:content-[''] after:hover:absolute after:hover:left-0 after:hover:w-full after:hover:h-px after:hover:bg-current after:hover:bottom-px - focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link + hover:after:content-[''] hover:after:absolute hover:after:left-0 hover:after:w-full hover:after:h-px hover:after:bg-current hover:after:bottom-px + focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-content-link focus-visible:ring-offset-2 focus-visible:ring-offset-surface-primary focus-visible:rounded-sm visited:text-content-link pl-0.5`, //pl-0.5 adjusts the underline spacing to align with the icon on the right. { diff --git a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx index 6d82f043968b1..accbb590f4be5 100644 --- a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx +++ b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx @@ -496,8 +496,8 @@ export const MultiSelectCombobox = forwardRef< { setOnScrollbar(false); @@ -678,7 +678,7 @@ export const MultiSelectCombobox = forwardRef< - + = ({ {description &&
{description}
} - - Read the documentation - +
+ + Read the documentation + +

diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx index b04aeb258fd7d..884884499fcee 100644 --- a/site/src/components/Popover/Popover.tsx +++ b/site/src/components/Popover/Popover.tsx @@ -25,7 +25,7 @@ export const PopoverContent = forwardRef< sideOffset={sideOffset} className={cn( `z-50 w-72 rounded-md border border-solid bg-surface-primary - text-content-primary shadow-md outline-none + text-content-primary shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 diff --git a/site/src/components/RadioGroup/RadioGroup.tsx b/site/src/components/RadioGroup/RadioGroup.tsx index 3b63a91f40087..f3104b2eb7999 100644 --- a/site/src/components/RadioGroup/RadioGroup.tsx +++ b/site/src/components/RadioGroup/RadioGroup.tsx @@ -31,7 +31,7 @@ export const RadioGroupItem = React.forwardRef< ref={ref} className={cn( `aspect-square h-4 w-4 rounded-full border border-solid border-border text-content-primary bg-surface-primary - focus:outline-none focus-visible:ring-2 focus-visible:ring-content-link + focus:outline-hidden focus-visible:ring-2 focus-visible:ring-content-link focus-visible:ring-offset-4 focus-visible:ring-offset-surface-primary disabled:cursor-not-allowed disabled:opacity-25 disabled:border-surface-invert-primary hover:border-border-hover data-[state=checked]:border-border-hover`, diff --git a/site/src/components/ScrollArea/ScrollArea.tsx b/site/src/components/ScrollArea/ScrollArea.tsx index e23718dacfb8c..f4bb40d4584ed 100644 --- a/site/src/components/ScrollArea/ScrollArea.tsx +++ b/site/src/components/ScrollArea/ScrollArea.tsx @@ -34,9 +34,9 @@ const ScrollBar = React.forwardRef< className={cn( "border-0 border-solid border-border flex touch-none select-none transition-colors", orientation === "vertical" && - "h-full w-2.5 border-l border-l-transparent p-[1px]", + "h-full w-2.5 border-l border-l-transparent p-px", orientation === "horizontal" && - "h-2.5 flex-col border-t border-t-transparent p-[1px]", + "h-2.5 flex-col border-t border-t-transparent p-px", className, )} {...props} diff --git a/site/src/components/Select/Select.tsx b/site/src/components/Select/Select.tsx index 3d2f8ffc3b706..f8f5850c0dff9 100644 --- a/site/src/components/Select/Select.tsx +++ b/site/src/components/Select/Select.tsx @@ -24,10 +24,10 @@ export const SelectTrigger = React.forwardRef< id={id} className={cn( `flex h-10 w-full font-medium items-center justify-between whitespace-nowrap rounded-md - border border-border border-solid bg-transparent px-3 py-2 text-sm shadow-sm + border border-border border-solid bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background text-content-secondary placeholder:text-content-secondary focus:outline-none, focus:ring-2 focus:ring-content-link disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 - focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link`, + focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-content-link`, className, )} {...props} @@ -83,7 +83,7 @@ export const SelectContent = React.forwardRef< {children} @@ -133,8 +133,8 @@ export const SelectItem = React.forwardRef< ref={ref} className={cn( "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ", - "pl-2 pr-8 text-sm text-content-secondary outline-none focus:bg-surface-secondary ", - "focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50", + "pl-2 pr-8 text-sm text-content-secondary outline-hidden focus:bg-surface-secondary ", + "focus:text-content-primary data-disabled:pointer-events-none data-disabled:opacity-50", className, )} {...props} diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx index 846b7bf7afa29..2d2fbf963ce6c 100644 --- a/site/src/components/SelectMenu/SelectMenu.tsx +++ b/site/src/components/SelectMenu/SelectMenu.tsx @@ -41,7 +41,7 @@ export const SelectMenuButton = forwardRef< return (