Update design system

app/components/CopyCode.tsx

@@ -46,7 +46,7 @@ export function CopyCodeModal({
   return (
     <Modal isOpen={isOpen} onDismiss={onDismiss} title={modalTitle} width="free">
       <Modal.Section>
-        <pre className="text-mono-md bg-default border-secondary w-full rounded border px-4 py-3 tracking-normal! normal-case!">
+        <pre className="text-mono-md bg-default border-secondary w-full rounded-md border px-4 py-3 tracking-normal! normal-case!">
           {children}
         </pre>
       </Modal.Section>

app/components/DocsPopover.tsx

@@ -27,7 +27,7 @@ export const DocsPopoverLink = ({ href, linkText }: DocsPopoverLinkProps) => (
     rel="noreferrer"
   >
     <div className="border-secondary mx-2 border-b py-1.5">
-      <div className="text-sans-md text-raise group-hover:bg-tertiary relative -ml-2 inline-block rounded py-1 pr-7 pl-2">
+      <div className="text-sans-md text-raise group-hover:bg-tertiary relative -ml-2 inline-block rounded-md py-1 pr-7 pl-2">
         <span className="inline-block max-w-300 truncate align-middle">{linkText}</span>
         <OpenLink12Icon className="text-secondary absolute top-1.5 ml-2 translate-y-px" />
       </div>
@@ -47,7 +47,7 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
   const title = `Learn about ${heading}`
   return (
     <Popover>
-      <PopoverButton title={title} className="headless-hide-focus rounded">
+      <PopoverButton title={title} className="headless-hide-focus rounded-md">
         <div className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-8')}>
           <Info16Icon aria-hidden className="shrink-0" />
         </div>

app/components/InstanceAutoRestartPopover.tsx

@@ -43,7 +43,7 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
   return (
     <Popover>
       <PopoverButton
-        className="border-default hover:bg-hover group flex h-6 w-6 items-center justify-center rounded border"
+        className="border-default hover:bg-hover group flex h-6 w-6 items-center justify-center rounded-md border"
         aria-label="Auto-restart status"
       >
         <AutoRestart12Icon className="shrink-0" aria-hidden />
@@ -60,7 +60,7 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
           <CloseButton
             as={Link}
             to={pb.instanceSettings(instanceSelector)}
-            className="group -m-1 flex w-full items-center justify-between rounded px-1"
+            className="group -m-1 flex w-full items-center justify-between rounded-md px-1"
           >
             {match(policy)
               .with('never', () => (

app/components/MoreActionsMenu.tsx

@@ -40,7 +40,7 @@ export const MoreActionsMenu = ({
             variant === 'small' && 'h-6 w-6',
             variant === 'default' && 'h-8 w-8',
             (variant === 'default' || variant === 'small') &&
-              'border-default rounded border',
+              'border-default rounded-md border',
             variant === 'filled' && 'h-full w-full px-3'
           )}
         >

app/components/PageSkeleton.tsx

@@ -13,7 +13,7 @@ import { classed } from '~/util/classed'
 
 import { MswBanner } from './MswBanner'
 
-const Block = classed.div`motion-safe:animate-pulse2 rounded bg-tertiary`
+const Block = classed.div`motion-safe:animate-pulse2 rounded-md bg-tertiary`
 
 export function PageSkeleton({ skipPaths }: { skipPaths?: RegExp[] }) {
   const { pathname } = useLocation()

app/components/Sidebar.tsx

@@ -17,7 +17,7 @@ import { Truncate } from '~/ui/lib/Truncate'
 
 const linkStyles = (isActive = false) =>
   cn(
-    'flex h-7 items-center rounded px-2 text-sans-md [&>svg]:mr-2',
+    'flex h-7 items-center rounded-md px-2 text-sans-md [&>svg]:mr-2',
     isActive
       ? 'text-accent bg-accent-secondary hover:bg-accent-secondary-hover [&>svg]:text-accent-tertiary'
       : 'hover:bg-hover [&>svg]:text-quaternary text-default'

app/components/Terminal.tsx

@@ -15,7 +15,7 @@ import { classed } from '~/util/classed'
 
 import { AttachAddon } from './AttachAddon'
 
-const ScrollButton = classed.button`ml-4 flex h-8 w-8 items-center justify-center rounded border border-secondary hover:bg-hover`
+const ScrollButton = classed.button`ml-4 flex h-8 w-8 items-center justify-center rounded-md border border-secondary hover:bg-hover`
 
 function getOptions(): ITerminalOptions {
   const style = getComputedStyle(document.body)

app/components/TimeSeriesChart.tsx

@@ -92,7 +92,7 @@ function renderTooltip(props: TooltipProps<number, string>, unit?: string) {
   } = payload[0]
   if (!timestamp || typeof value !== 'number') return null
   return (
-    <div className="text-sans-md text-secondary bg-raise border-secondary elevation-2 rounded border outline-0">
+    <div className="text-sans-md text-secondary bg-raise border-secondary elevation-2 rounded-md border outline-0">
       <div className="border-secondary border-b px-3 py-2 pr-6">
         {longDateTime(timestamp)}
       </div>

app/components/TopBar.tsx

@@ -132,7 +132,7 @@ function UserMenu() {
   const { me } = useCurrentUser()
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger aria-label="User menu" className="rounded">
+      <DropdownMenu.Trigger aria-label="User menu" className="rounded-md">
         <div
           className={cn(
             buttonStyle({ size: 'sm', variant: 'ghost' }),
@@ -163,9 +163,9 @@ function SiloSystemPicker({ level }: { level: 'silo' | 'system' }) {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger
         aria-label="Switch between system and silo"
-        className="headless-hide-focus rounded"
+        className="headless-hide-focus rounded-md"
       >
-        <div className="active-clicked text-sans-md text-default border-secondary hover:bg-hover flex items-center rounded border px-2 py-1.5">
+        <div className="active-clicked text-sans-md text-default border-secondary hover:bg-hover flex items-center rounded-md border px-2 py-1.5">
           <div className="text-tertiary flex items-center">
             {level === 'system' ? <Servers16Icon /> : <Organization16Icon />}
           </div>

app/pages/DeviceAuthVerifyPage.tsx

@@ -51,7 +51,7 @@ export default function DeviceAuthVerifyPage() {
       <AuthCodeInput
         onChange={(code) => setUserCode(code)}
         containerClassName="flex space-x-2 mb-6"
-        inputClassName="rounded border border-default bg-default w-full aspect-square flex items-center justify-center text-center text-default text-mono-md"
+        inputClassName="rounded-md border border-default bg-default w-full aspect-square flex items-center justify-center text-center text-default text-mono-md"
         length={8}
         dashAfterIdxs={DASH_AFTER_IDXS}
       />

app/pages/LoginPage.tsx

@@ -44,7 +44,7 @@ export default function LoginPage() {
     <>
       <div className="mb-3 flex items-end space-x-3">
         <Identicon
-          className="text-accent bg-accent-secondary-hover flex h-[34px] w-[34px] items-center justify-center rounded"
+          className="text-accent bg-accent-secondary-hover flex h-[34px] w-[34px] items-center justify-center rounded-md"
           name={silo}
         />
         <div className="text-sans-2xl text-raise">{silo}</div>

app/pages/LoginPageSaml.tsx

@@ -24,7 +24,7 @@ export default function LoginPageSaml() {
     <>
       <div className="mb-3 flex items-end space-x-3">
         <Identicon
-          className="text-accent bg-accent-secondary-hover flex h-[34px] w-[34px] items-center justify-center rounded"
+          className="text-accent bg-accent-secondary-hover flex h-[34px] w-[34px] items-center justify-center rounded-md"
           name={silo}
         />
         <div className="text-sans-2xl text-raise">{silo}</div>

app/pages/project/instances/SerialConsolePage.tsx

@@ -139,7 +139,7 @@ export default function SerialConsolePage() {
     <div className="mx-0! flex h-full max-h-[calc(100vh-var(--top-bar-height))] w-full! flex-col">
       <Link
         to={pb.instance(instanceSelector)}
-        className="bg-accent-secondary mx-3 mt-3 mb-6 flex h-10 shrink-0 items-center rounded px-3"
+        className="bg-accent-secondary mx-3 mt-3 mb-6 flex h-10 shrink-0 items-center rounded-md px-3"
       >
         <PrevArrow12Icon className="text-accent-tertiary" />
         <div className="text-mono-sm text-accent ml-2">

app/pages/system/UpdatePage.tsx

@@ -214,7 +214,7 @@ export default function UpdatePage() {
               return (
                 <li
                   key={repo.hash}
-                  className="border-default @container flex items-center gap-2 rounded border pl-4"
+                  className="border-default @container flex items-center gap-2 rounded-md border pl-4"
                 >
                   <Images24Icon className="text-quaternary shrink-0" aria-hidden />
                   <div className="flex min-w-0 flex-1 flex-col flex-wrap items-start gap-x-4 gap-y-1 py-3 @md:flex-row @md:items-center">

app/pages/system/silos/SiloScimTab.tsx

@@ -245,7 +245,7 @@ function TokenCreatedModal({
 
         <div className="mt-4">
           <div className="text-sans-md text-raise mb-2">Bearer Token</div>
-          <div className="text-sans-md text-raise bg-default border-default flex items-stretch rounded border">
+          <div className="text-sans-md text-raise bg-default border-default flex items-stretch rounded-md border">
             <div className="flex-1 overflow-hidden py-2.75 pr-5 pl-3 text-nowrap text-ellipsis">
               {token.bearerToken}
             </div>

app/table/cells/EmptyCell.tsx

@@ -10,4 +10,4 @@ import { classed } from '~/util/classed'
 
 export const EmptyCell = () => <span className="text-sans-md text-quaternary">&mdash;</span>
 
-export const SkeletonCell = classed.div`h-4 w-12 rounded bg-tertiary motion-safe:animate-pulse`
+export const SkeletonCell = classed.div`h-4 w-12 rounded-md bg-tertiary motion-safe:animate-pulse`

app/table/columns/action-col.tsx

@@ -85,7 +85,7 @@ export const RowActions = ({ id, copyIdLabel = 'Copy ID', actions }: RowActionsP
     <DropdownMenu.Root>
       {/* stopPropagation prevents clicks from toggling row select in a single select table */}
       <DropdownMenu.Trigger
-        className="headless-hide-focus flex h-full w-full items-center justify-center rounded -outline-offset-2"
+        className="headless-hide-focus flex h-full w-full items-center justify-center rounded-md -outline-offset-2"
         aria-label="Row actions"
         onClick={(e) => e.stopPropagation()}
       >

app/ui/lib/ActionMenu.tsx

@@ -231,7 +231,7 @@ export const ActionMenuHotkey = ({ keys, action }: ActionMenuHotkeyProps) => (
       {keys.map((hotkey) => (
         <kbd
           key={hotkey}
-          className="text-mono-xs text-raise mr-1 inline-block rounded border border-[rgba(255,255,255,.15)] px-2 py-1"
+          className="text-mono-xs text-raise mr-1 inline-block rounded-md border border-[rgba(255,255,255,.15)] px-2 py-1"
         >
           {hotkey}
         </kbd>

app/ui/lib/BulkActionMenu.tsx

@@ -18,7 +18,7 @@ export interface BulkActionMenuProps {
 export function BulkActionMenu({ children, selectedCount }: BulkActionMenuProps) {
   const actionButtons = flattenChildren(children)
   return (
-    <div className="bg-accent-secondary border-accent flex w-fit rounded border *:items-center *:space-x-2 *:p-3">
+    <div className="bg-accent-secondary border-accent flex w-fit rounded-md border *:items-center *:space-x-2 *:p-3">
       <div className="border-accent-tertiary flex border-r">{actionButtons}</div>
       <div className="flex">
         <span className="text-sans-sm text-accent">{selectedCount} selected</span>
@@ -31,7 +31,7 @@ BulkActionMenu.Button = (props: Omit<ButtonProps, 'size' | 'variant'>) => (
   <Button
     size="sm"
     // TODO: Remove this border once the proper button styles are available
-    className="border-accent-secondary! rounded border"
+    className="border-accent-secondary! rounded-md border"
     {...props}
   />
 )

app/ui/lib/CalendarCell.tsx

@@ -51,9 +51,9 @@ export function CalendarCell({ state, date }: CalendarCellProps) {
       ? isSameDay(date, state.highlightedRange.end)
       : isSelected
 
-  // We add rounded corners on the left for the first day of the month,
+  // We add rounded-md corners on the left for the first day of the month,
   // the first day of each week, and the start date of the selection.
-  // We add rounded corners on the right for the last day of the month,
+  // We add rounded-md corners on the right for the last day of the month,
   // the last day of each week, and the end date of the selection.
   const { locale } = useLocale()
   const dayOfWeek = getDayOfWeek(date, locale)

app/ui/lib/Combobox.tsx

@@ -176,7 +176,7 @@ export const Combobox = ({
           )}
           <div
             className={cn(
-              `flex rounded border focus-within:ring-2`,
+              `flex rounded-md border focus-within:ring-2`,
               hasError
                 ? 'focus-error border-error-secondary focus-within:ring-error-secondary hover:border-error'
                 : 'border-default focus-within:ring-accent-secondary hover:border-hover',
@@ -228,7 +228,7 @@ export const Combobox = ({
               placeholder={placeholder}
               disabled={disabled || isLoading}
               className={cn(
-                `text-sans-md text-raise placeholder:text-tertiary h-10 w-full rounded border-none! px-3 py-2 outline-hidden!`,
+                `text-sans-md text-raise placeholder:text-tertiary h-10 w-full rounded-md border-none! px-3 py-2 outline-hidden!`,
                 disabled
                   ? 'text-disabled bg-disabled border-default! cursor-not-allowed'
                   : 'bg-default',

app/ui/lib/DateField.tsx

@@ -24,7 +24,7 @@ import {
   type DateSegment as DateSegmentType,
 } from 'react-stately'
 
-const dateTimeFieldStyles = 'flex items-center rounded border p-2'
+const dateTimeFieldStyles = 'flex items-center rounded-md border p-2'
 
 interface DateFieldProps extends AriaDateFieldProps<DateValue> {
   className?: string
@@ -129,7 +129,7 @@ function DateSegment({
           (segment.maxValue != null && String(segment.maxValue).length + 'ch') || undefined,
       }}
       className={cn(
-        'group box-content rounded px-px text-right tabular-nums outline-hidden',
+        'group box-content rounded-md px-px text-right tabular-nums outline-hidden',
         !readOnly && 'focus:text-raise focus:bg-accent-secondary-hover',
         segment.type === 'timeZoneName' ? 'text-sans-sm ml-1' : 'text-sans-md'
       )}

app/ui/lib/EmptyMessage.tsx

@@ -43,7 +43,7 @@ export function EmptyMessage(props: Props) {
   return (
     <div className="m-4 flex max-w-[18rem] flex-col items-center text-center">
       {props.icon && (
-        <div className="text-accent bg-accent-secondary mb-4 rounded p-1 leading-0">
+        <div className="text-accent bg-accent-secondary mb-4 rounded-md p-1 leading-0">
           {props.icon}
         </div>
       )}

app/ui/lib/FileInput.tsx

@@ -80,7 +80,7 @@ export function FileInput({
       />
       <div
         className={cn(
-          'text-raise bg-default pointer-events-none relative z-1 flex flex-col items-center justify-center space-y-0.5 rounded border px-4 py-6',
+          'text-raise bg-default pointer-events-none relative z-1 flex flex-col items-center justify-center space-y-0.5 rounded-md border px-4 py-6',
           dragOver && 'bg-accent-secondary border-accent-secondary!',
           error
             ? 'border-error-secondary! group-hover:border-error'
@@ -89,7 +89,7 @@ export function FileInput({
       >
         <div
           className={cn(
-            'text-accent bg-accent-secondary flex items-center justify-center rounded p-1',
+            'text-accent bg-accent-secondary flex items-center justify-center rounded-md p-1',
             dragOver && 'bg-accent-secondary-hover'
           )}
         >
@@ -105,7 +105,7 @@ export function FileInput({
               <button
                 type="button"
                 onClick={handleResetInput}
-                className="hover:*:text-secondary pointer-events-auto ml-1 inline-flex rounded p-1"
+                className="hover:*:text-secondary pointer-events-auto ml-1 inline-flex rounded-md p-1"
                 aria-label="Clear file"
               >
                 <Error16Icon className="text-tertiary" />

app/ui/lib/Listbox.tsx

@@ -101,7 +101,7 @@ export const Listbox = <Value extends string = string>({
               id={id}
               name={name}
               className={cn(
-                `text-sans-md flex h-11 items-center justify-between rounded border`,
+                `text-sans-md flex h-11 items-center justify-between rounded-md border`,
                 hasError
                   ? 'focus-error border-error-secondary hover:border-error'
                   : 'border-default hover:border-hover',

app/ui/lib/Modal.tsx

@@ -83,7 +83,7 @@ export function Modal({
               </Dialog.Title>
               {children}
               <Dialog.Close
-                className="hover:bg-hover absolute top-3.5 right-2 flex items-center justify-center rounded p-2"
+                className="hover:bg-hover absolute top-3.5 right-2 flex items-center justify-center rounded-md p-2"
                 aria-label="Close"
               >
                 <Close12Icon className="text-default" />

app/ui/lib/NumberInput.tsx

@@ -34,7 +34,7 @@ export function NumberInput(props: NumberInputProps) {
   return (
     <div
       className={cn(
-        'relative flex rounded border',
+        'relative flex rounded-md border',
         props.error
           ? 'border-error-secondary hover:border-error'
           : 'border-default hover:border-hover',
@@ -47,7 +47,7 @@ export function NumberInput(props: NumberInputProps) {
         {...inputProps}
         ref={mergeRefs([props.ref, inputRef])}
         className={cn(
-          `text-sans-md text-raise bg-default placeholder:text-tertiary disabled:text-secondary disabled:bg-disabled w-full rounded border-none px-3 py-2.75 outline-offset-1! focus:outline-hidden disabled:cursor-not-allowed`,
+          `text-sans-md text-raise bg-default placeholder:text-tertiary disabled:text-secondary disabled:bg-disabled w-full rounded-md border-none px-3 py-2.75 outline-offset-1! focus:outline-hidden disabled:cursor-not-allowed`,
           props.error && 'focus-error',
           props.isDisabled && 'text-disabled bg-disabled'
         )}

app/ui/lib/Pagination.tsx

@@ -19,7 +19,7 @@ const PageInput = ({ number, className }: PageInputProps) => {
   return (
     <span
       className={cn(
-        'text-mono-sm text-default bg-tertiary ring-secondary h-4 rounded px-[3px] pt-px pb-[3px] whitespace-nowrap ring ring-inset',
+        'text-mono-sm text-default bg-tertiary ring-secondary h-4 rounded-md px-[3px] pt-px pb-[3px] whitespace-nowrap ring ring-inset',
         className
       )}
     >

app/ui/lib/Radio.tsx

@@ -42,7 +42,7 @@ export const Radio = ({ children, className, alignTop, ...inputProps }: RadioPro
 )
 
 const cardLabelStyles = `
-  text-sans-md border rounded border-default bg-default hover:border-hover
+  text-sans-md border rounded-md border-default bg-default hover:border-hover
   peer-focus:ring-2 peer-focus:ring-accent-secondary w-44 text-raise
 
   *:border-secondary *:p-3

app/ui/lib/RangeCalendar.tsx

@@ -67,7 +67,7 @@ export const CalendarButton = ({
     onClick={handleClick}
     disabled={isDisabled}
     className={cn(
-      'text-secondary flex h-8 w-10 items-center justify-center rounded outline-hidden',
+      'text-secondary flex h-8 w-10 items-center justify-center rounded-md outline-hidden',
       isDisabled ? 'text-disabled' : 'hover:bg-tertiary'
     )}
   >

app/ui/lib/SideModal.tsx

@@ -103,7 +103,7 @@ export function SideModal({
 
               {/* Close button is here at the end so we aren't automatically focusing on it when the side modal is opened. Positioned in the safe area at the top */}
               <Dialog.Close
-                className="hover:bg-hover absolute top-10 right-(--content-gutter) -m-2 flex rounded p-2"
+                className="hover:bg-hover absolute top-10 right-(--content-gutter) -m-2 flex rounded-md p-2"
                 aria-label="Close"
               >
                 <Close12Icon className="text-default" />

app/ui/lib/Table.tsx

@@ -21,7 +21,7 @@ export function Table({ className, ...props }: TableProps) {
     <SimpleBar
       scrollableNodeProps={{ ref: overflowRef }}
       className={cn(
-        'overflow-x-auto rounded pb-4',
+        'overflow-x-auto rounded-md pb-4',
         !scrollStart && 'scrolled',
         isOverflow && !scrollEnd && 'overflowing'
       )}

app/ui/lib/Tag.tsx

@@ -48,7 +48,7 @@ export const Tag = ({
       className={cn(
         'ox-tag',
         `variant-${variant}`,
-        'text-mono-sm inline-flex items-center rounded px-1 whitespace-nowrap',
+        'text-mono-sm inline-flex items-center rounded-md px-1 whitespace-nowrap',
         tagColors[variant][color],
         narrow ? 'h-4' : 'h-6',
         className