Tailwind 4 (#2910)

* First pass

* Still a few issues to sort

* Neater focus

* Style fixes

* Headless ui upgrade

* Initial table fixes

* Table, focus and token fixes

* Switch metrics cursor colour

* Table and card fixes

* Visual regression script

Visual regression script

Update generate-visual-baseline.sh

Setting up tests

Fix cmd

Test improvements

Add regression e2e test

Fix / remove vis regression tests

Update generate-visual-baseline.sh

Simplify scripts

Simplify regression readme

* Mini table and command menu fixes

* E2E fixes

* Merge fixes

* Fix scrolling table

* Add missing license header

* Update ip-pool-item.tsx

* Fix serial console overflow

* design-system 4.0 canary excluding asciidoc from ui import

---------

Co-authored-by: David Crespo <[email protected]>

Author: benjaminleonard

.gitignore

@@ -31,3 +31,10 @@ test-results/
 ci-e2e-traces/
 playwright-report/
 .vercel
+
+# Visual regression snapshots
+test/e2e/**/*-snapshots/
+test/e2e/**/*.png
+
+# LLMs
+CLAUDE.md

app/components/AccordionItem.tsx

@@ -29,9 +29,9 @@ export const AccordionItem = ({ children, isOpen, label, value }: AccordionItemP
   return (
     <Accordion.Item value={value}>
       <Accordion.Header className="max-w-lg">
-        <Accordion.Trigger className="group flex w-full items-center justify-between border-t py-2 text-sans-xl border-secondary [&>svg]:data-[state=open]:rotate-90">
+        <Accordion.Trigger className="text-sans-xl border-secondary group flex w-full items-center justify-between border-t py-2 [&>svg]:data-[state=open]:rotate-90">
           <div className="text-raise">{label}</div>
-          <DirectionRightIcon className="transition-all text-default" />
+          <DirectionRightIcon className="text-default transition-all" />
         </Accordion.Trigger>
       </Accordion.Header>
       <Accordion.Content

app/components/AttachFloatingIpModal.tsx

@@ -48,7 +48,7 @@ function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
         {fip.description && (
           <>
             <Slash />
-            <div className="grow overflow-hidden overflow-ellipsis whitespace-pre text-left">
+            <div className="grow overflow-hidden text-left text-ellipsis whitespace-pre">
               {fip.description}
             </div>
           </>

app/components/CapacityBar.tsx

@@ -34,15 +34,15 @@ export const CapacityBar = <T extends number | bigint>({
   const unitElt = includeUnit ? <>&nbsp;{unit}</> : null
 
   return (
-    <div className="w-full min-w-min rounded-lg border border-default lg+:max-w-[50%]">
+    <div className="border-default 1000:max-w-1/2 w-full min-w-min rounded-lg border">
       <div className="flex justify-between p-3">
         <TitleCell icon={icon} title={title} unit={unit} />
         <PctCell pct={pct} />
       </div>
-      <div className="p-3 pb-4 pt-1">
+      <div className="p-3 pt-1 pb-4">
         <Bar pct={pct} />
       </div>
-      <div className="flex justify-between border-t border-secondary">
+      <div className="border-secondary flex justify-between border-t">
         <ValueCell label={provisionedLabel} value={provisioned} unit={unitElt} />
         <ValueCell label={capacityLabel} value={capacity} unit={unitElt} />
       </div>
@@ -55,9 +55,9 @@ function TitleCell({ icon, title, unit }: TitleCellProps) {
   return (
     <div>
       <div className="flex grow items-center">
-        <span className="mr-2 flex h-4 w-4 items-center text-accent">{icon}</span>
-        <span className="!normal-case text-mono-sm text-default">{title}</span>
-        <span className="ml-1 !normal-case text-mono-sm text-tertiary">({unit})</span>
+        <span className="text-accent mr-2 flex h-4 w-4 items-center">{icon}</span>
+        <span className="text-mono-sm text-default normal-case!">{title}</span>
+        <span className="text-mono-sm text-tertiary ml-1 normal-case!">({unit})</span>
       </div>
     </div>
   )
@@ -67,8 +67,8 @@ function PctCell({ pct }: { pct: number }) {
   // NaN happens when both top and bottom are 0
   if (Number.isNaN(pct)) {
     return (
-      <div className="flex -translate-y-0.5 items-baseline text-tertiary">
-        <div className="font-light text-sans-2xl text-raise">—</div>
+      <div className="text-tertiary flex -translate-y-0.5 items-baseline">
+        <div className="text-sans-2xl text-raise font-light">—</div>
         <div className="text-sans-xl">%</div>
       </div>
     )
@@ -77,7 +77,7 @@ function PctCell({ pct }: { pct: number }) {
   const [wholeNumber, decimal] = splitDecimal(pct)
   return (
     <div className="flex -translate-y-0.5 items-baseline">
-      <div className="font-light text-sans-2xl text-raise">{wholeNumber}</div>
+      <div className="text-sans-2xl text-raise font-light">{wholeNumber}</div>
       <div className="text-sans-xl text-tertiary">{decimal}%</div>
     </div>
   )
@@ -87,10 +87,10 @@ function Bar({ pct }: { pct: number }) {
   return (
     <div className="flex w-full gap-0.5">
       <div
-        className="h-3 rounded-l border bg-accent-secondary border-accent-secondary"
+        className="bg-accent-secondary border-accent-secondary h-3 rounded-l border"
         style={{ width: `${pct.toFixed(2)}%` }}
       ></div>
-      <div className="h-3 grow rounded-r border bg-info-secondary border-info-secondary"></div>
+      <div className="bg-info-secondary border-info-secondary h-3 grow rounded-r border"></div>
     </div>
   )
 }
@@ -103,9 +103,9 @@ type ValueCellProps = {
 
 function ValueCell({ label, value, unit }: ValueCellProps) {
   return (
-    <div className="p-3 text-mono-sm">
-      <div className="mb-px text-tertiary">{label}</div>
-      <div className="!normal-case text-default">
+    <div className="text-mono-sm p-3">
+      <div className="text-tertiary mb-px">{label}</div>
+      <div className="text-default normal-case!">
         <BigNum num={value} />
         {unit}
       </div>

app/components/CapacityBars.tsx

@@ -23,7 +23,7 @@ export const CapacityBars = ({
   allocatedLabel: string
 }) => {
   return (
-    <div className="mb-12 flex min-w-min flex-col gap-3 lg+:flex-row">
+    <div className="1000:flex-row mb-12 flex min-w-min flex-col gap-3">
       <CapacityBar
         icon={<Cpu16Icon />}
         title="CPU"

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="w-full rounded border px-4 py-3 !normal-case !tracking-normal text-mono-md bg-default border-secondary">
+        <pre className="text-mono-md bg-default border-secondary w-full rounded border px-4 py-3 tracking-normal! normal-case!">
           {children}
         </pre>
       </Modal.Section>
@@ -71,7 +71,7 @@ export function CopyCodeModal({
                 animate={{ opacity: 1, y: '-50%', x: '-50%' }}
                 initial={{ opacity: 0, y: 'calc(-50% - 25px)', x: '-50%' }}
                 transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
-                className="absolute left-1/2 top-1/2 flex items-center"
+                className="absolute top-1/2 left-1/2 flex items-center"
               >
                 <Success12Icon className="text-accent" />
               </m.span>
@@ -108,7 +108,7 @@ export function EquivalentCliCommand({ project, instance }: EquivProps) {
         isOpen={isOpen}
         onDismiss={() => setIsOpen(false)}
       >
-        <span className="mr-2 select-none text-tertiary">$</span>
+        <span className="text-tertiary mr-2 select-none">$</span>
         {cmdParts.join(' \\\n    ')}
       </CopyCodeModal>
     </>

app/components/DocsPopover.tsx

@@ -22,14 +22,14 @@ type DocsPopoverLinkProps = {
 export const DocsPopoverLink = ({ href, linkText }: DocsPopoverLinkProps) => (
   <a
     href={href}
-    className="group block px-4 children:last:border-0"
+    className="group block px-4 last:*:border-0"
     target="_blank"
     rel="noreferrer"
   >
-    <div className="mx-2 border-b py-1.5 border-secondary">
-      <div className="relative -ml-2 inline-block rounded py-1 pl-2 pr-7 text-sans-md text-raise group-hover:bg-tertiary">
-        <span className="inline-block max-w-[300px] truncate align-middle">{linkText}</span>
-        <OpenLink12Icon className="absolute top-1.5 ml-2 translate-y-[1px] text-secondary" />
+    <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">
+        <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>
     </div>
   </a>
@@ -47,25 +47,25 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
   const title = `Learn about ${heading}`
   return (
     <Popover>
-      <PopoverButton title={title}>
+      <PopoverButton title={title} className="headless-hide-focus rounded">
         <div className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-8')}>
           <Info16Icon aria-hidden className="shrink-0" />
         </div>
       </PopoverButton>
       <PopoverPanel
         // popover-panel needed for enter animation
-        className="popover-panel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-2"
+        className="popover-panel bg-raise border-secondary elevation-2 z-10 w-96 rounded-lg border"
         anchor={{ to: 'bottom end', gap: 12 }}
       >
         <div className="px-4">
-          <h2 className="mt-4 flex items-center gap-1 text-sans-md">
-            <div className="mr-1 flex items-center text-accent-secondary">{icon}</div>
+          <h2 className="text-sans-md mt-4 flex items-center gap-1">
+            <div className="text-accent-secondary mr-1 flex items-center">{icon}</div>
             {title}
           </h2>
-          <p className="mb-3 mt-2 text-sans-md text-default">{summary}</p>
+          <p className="text-sans-md text-default mt-2 mb-3">{summary}</p>
         </div>
-        <div className="border-t pb-1 border-secondary">
-          <h3 className="mb-1 mt-3 px-4 text-mono-sm text-tertiary">Guides</h3>
+        <div className="border-secondary border-t pb-1">
+          <h3 className="text-mono-sm text-tertiary mt-3 mb-1 px-4">Guides</h3>
           {links.map((link) => (
             <DocsPopoverLink key={link.href} {...link} />
           ))}

app/components/ErrorBoundary.tsx

@@ -19,7 +19,7 @@ import { ErrorPage, NotFound } from './ErrorPage'
 const IdpMisconfig = () => (
   <Message
     variant="notice"
-    className="!mt-6"
+    className="mt-6!"
     showIcon={false}
     content={
       <p>

app/components/ErrorPage.tsx

@@ -17,7 +17,7 @@ import { Button } from '~/ui/lib/Button'
 const GradientBackground = () => (
   <div
     // negative z-index avoids covering MSW warning banner
-    className="fixed bottom-0 left-0 right-0 top-0 -z-10"
+    className="fixed top-0 right-0 bottom-0 left-0 -z-10"
     style={{
       background:
         'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, #161B1D 100%)',
@@ -34,17 +34,17 @@ export function ErrorPage({ children }: Props) {
       <div className="relative flex w-full justify-between">
         <Link
           to="/"
-          className="flex items-center p-6 text-mono-sm text-default hover:text-raise"
+          className="text-mono-sm text-default hover:text-raise flex items-center p-6"
         >
-          <PrevArrow12Icon title="Select" className="mr-2 text-secondary" />
+          <PrevArrow12Icon title="Select" className="text-secondary mr-2" />
           Back to console
         </Link>
-        <SignOutButton className="mr-6 mt-4" />
+        <SignOutButton className="mt-4 mr-6" />
       </div>
-      <div className="absolute left-1/2 top-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg border p-8 !bg-raise border-secondary elevation-3">
+      <div className="bg-raise! border-secondary elevation-3 absolute top-1/2 left-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg border p-8">
         <div className="my-2 flex h-12 w-12 items-center justify-center">
-          <div className="absolute h-12 w-12 rounded-full opacity-20 bg-destructive motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
-          <Error12Icon className="relative h-8 w-8 text-error" />
+          <div className="bg-destructive absolute h-12 w-12 rounded-full opacity-20 motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
+          <Error12Icon className="text-error relative h-8 w-8" />
         </div>
 
         <div className="space-y-2 text-center">{children}</div>

app/components/ExternalIps.tsx

@@ -44,14 +44,14 @@ export function ExternalIps({ project, instance }: PP.Instance) {
 
   return (
     <div className="flex max-w-full items-center">
-      {intersperse(links, <Slash className="ml-0.5 mr-1.5" />)}
+      {intersperse(links, <Slash className="mr-1.5 ml-0.5" />)}
       {/* if there are more than 2 ips, add a link to the instance networking page */}
       {overflowCount > 0 && (
         <>
-          <Slash className="ml-0.5 mr-1.5" />
+          <Slash className="mr-1.5 ml-0.5" />
           <Link
             to={pb.instanceNetworking({ project, instance })}
-            className="hover:link-with-underline -m-2 self-center p-2 text-tertiary"
+            className="hover:link-with-underline text-tertiary -m-2 self-center p-2"
           >
             …
           </Link>