chore: Tailwind CSS v4 migration (#4139)

Migrates the webapp from Tailwind CSS 3.4 to 4.x.

Author: kathiekiwi

.server-changes/tailwind-v4-migration.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Migrated the webapp to Tailwind CSS v4 with a CSS-first `@theme`. Semantic color tokens are now CSS variables overridable per theme (multi-theme support). Tailwind runs through `@tailwindcss/postcss`; plugins replaced or upgraded to v4-compatible versions.

.server-changes/theme-color-tokens.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Replaced raw charcoal-* Tailwind classes with semantic theme tokens (surfaces, borders, text) across the dashboard. Adds surface/border/text tokens to the themable layer so future themes only override CSS variables.

apps/webapp/app/components/AskAI.tsx

@@ -173,7 +173,7 @@ function AskAIDialog({ initialQuery, isOpen, onOpenChange, closeAskAI }: AskAIDi
   return (
     <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogContent className="animated-gradient-glow flex max-h-[90vh] min-h-fit w-full flex-col justify-between gap-0 px-0 pb-0 pt-0 sm:max-w-prose">
-        <DialogHeader className="flex h-[2.75rem] items-start justify-center rounded-t-md bg-background-bright pl-3">
+        <DialogHeader className="flex h-11 items-start justify-center rounded-t-md bg-background-bright pl-3">
           <div className="flex items-center gap-1">
             <AISparkleIcon className="size-5" />
             <DialogTitle className="text-sm font-medium text-text-bright">Ask AI</DialogTitle>
@@ -226,7 +226,7 @@ function ChatMessages({
   ];
 
   return (
-    <div className="flex-1 overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+    <div className="flex-1 overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
       {conversation.length === 0 ? (
         <motion.div
           className="flex flex-col gap-2 pb-2"
@@ -249,7 +249,7 @@ function ChatMessages({
           {exampleQuestions.map((question, index) => (
             <motion.button
               key={index}
-              className="group flex w-fit items-center gap-2 rounded-full border border-dashed border-charcoal-600 px-4 py-2 transition-colors hover:border-solid hover:border-indigo-500"
+              className="group flex w-fit items-center gap-2 rounded-full border border-dashed border-border-bright px-4 py-2 transition-colors hover:border-solid hover:border-indigo-500"
               onClick={() => onExampleClick(question)}
               variants={{
                 hidden: {
@@ -468,7 +468,7 @@ function ChatInterface({ initialQuery }: { initialQuery?: string }) {
         error={error}
         addFeedback={addFeedback}
       />
-      <form onSubmit={handleSubmit} className="flex-shrink-0 border-t border-grid-bright p-4">
+      <form onSubmit={handleSubmit} className="shrink-0 border-t border-grid-bright p-4">
         <div className="flex gap-3">
           <input
             type="text"
@@ -511,7 +511,7 @@ function ChatInterface({ initialQuery }: { initialQuery?: string }) {
               disabled={!message.trim()}
               LeadingIcon={<ArrowUpIcon className="size-5 text-text-bright" />}
               variant="primary/large"
-              className="size-10 min-w-10 rounded-full group-disabled/button:border-charcoal-550 group-disabled/button:bg-charcoal-600"
+              className="size-10 min-w-10 rounded-full group-disabled/button:border-border-brighter group-disabled/button:bg-surface-control"
             />
           )}
         </div>
@@ -531,11 +531,11 @@ function GradientSpinnerBackground({
 }) {
   return (
     <div
-      className={`flex rounded-full bg-gradient-to-br from-indigo-500 via-purple-500 to-fuchsia-500 p-px ${className}`}
+      className={`flex rounded-full bg-linear-to-br from-indigo-500 via-purple-500 to-fuchsia-500 p-px ${className}`}
     >
       <div
-        className={`flex h-full w-full items-center justify-center rounded-full bg-charcoal-600 ${
-          hoverEffect ? "transition group-hover:bg-charcoal-550" : ""
+        className={`flex h-full w-full items-center justify-center rounded-full bg-surface-control ${
+          hoverEffect ? "transition group-hover:bg-surface-control-hover" : ""
         }`}
       >
         {children}

apps/webapp/app/components/BackgroundWrapper.tsx

@@ -7,7 +7,7 @@ export function BackgroundWrapper({ children }: { children: ReactNode }) {
   return (
     <div className="relative h-full w-full overflow-hidden bg-background-dimmed lg:bg-transparent">
       <div
-        className="absolute left-0 top-0 hidden w-[260px] bg-contain bg-left-top bg-no-repeat lg:block"
+        className="absolute left-0 top-0 hidden w-[260px] bg-contain bg-top-left bg-no-repeat lg:block"
         style={{
           backgroundImage: `url(${blurredDashboardBackgroundMenuTop})`,
           aspectRatio: "auto",
@@ -17,7 +17,7 @@ export function BackgroundWrapper({ children }: { children: ReactNode }) {
       />
 
       <div
-        className="absolute bottom-0 left-0 hidden w-[260px] bg-contain bg-left-bottom bg-no-repeat lg:block"
+        className="absolute bottom-0 left-0 hidden w-[260px] bg-contain bg-bottom-left bg-no-repeat lg:block"
         style={{
           backgroundImage: `url(${blurredDashboardBackgroundMenuBottom})`,
           aspectRatio: "auto",
@@ -27,7 +27,7 @@ export function BackgroundWrapper({ children }: { children: ReactNode }) {
       />
 
       <div
-        className="absolute top-0 hidden bg-left-top bg-no-repeat lg:block"
+        className="absolute top-0 hidden bg-top-left bg-no-repeat lg:block"
         style={{
           left: "260px",
           backgroundImage: `url(${blurredDashboardBackgroundTable})`,

apps/webapp/app/components/BlankStatePanels.tsx

@@ -304,7 +304,7 @@ export function DeploymentsNoneDev() {
           organization={organization}
           project={project}
           environment={environment}
-          className="w-fit border border-charcoal-600 bg-secondary hover:border-charcoal-550 hover:bg-charcoal-600"
+          className="w-fit border border-border-bright bg-secondary hover:border-border-brighter hover:bg-surface-control"
         />
       </StepContentContainer>
     </>

apps/webapp/app/components/DefinitionTooltip.tsx

@@ -17,11 +17,11 @@ export function DefinitionTip({
     <TooltipProvider>
       <Tooltip disableHoverableContent={disableHoverableContent}>
         <TooltipTrigger className="text-left">
-          <span className="cursor-default underline decoration-charcoal-500 decoration-dashed underline-offset-4 transition hover:decoration-charcoal-400">
+          <span className="cursor-default underline decoration-text-faint decoration-dashed underline-offset-4 transition hover:decoration-text-dimmed">
             {children}
           </span>
         </TooltipTrigger>
-        <TooltipContent align="end" side="right" className="w-[16rem] min-w-[16rem]">
+        <TooltipContent align="end" side="right" className="w-64 min-w-64">
           <Header3 className="mb-1">{title}</Header3>
           {typeof content === "string" ? (
             <Paragraph variant="small">{content}</Paragraph>

apps/webapp/app/components/Feedback.tsx

@@ -84,7 +84,7 @@ export function Feedback({ button, defaultValue = "bug", onOpenChange }: Feedbac
         <DialogHeader>Contact us</DialogHeader>
         <div className="mt-2 flex flex-col gap-4">
           <div className="flex items-center gap-4">
-            <Icon icon={EnvelopeIcon} className="size-10 min-w-[2.5rem] text-blue-500" />
+            <Icon icon={EnvelopeIcon} className="size-10 min-w-10 text-blue-500" />
             <Paragraph variant="base/bright">
               How can we help? We read every message and will respond as quickly as we can.
             </Paragraph>

apps/webapp/app/components/GitMetadata.tsx

@@ -28,7 +28,7 @@ export function GitMetadataBranch({
           leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
           to={git.branchUrl}
-          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
+          className="pl-1 duration-0 [&_span]:duration-0 group-hover/table-row:[&_span]:text-text-bright"
         >
           {git.branchName}
         </LinkButton>
@@ -52,7 +52,7 @@ export function GitMetadataCommit({
           LeadingIcon={<GitCommitIcon className="size-4" />}
           leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
-          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
+          className="pl-1 duration-0 [&_span]:duration-0 group-hover/table-row:[&_span]:text-text-bright"
         >
           {`${git.shortSha} / ${git.commitMessage}`}
         </LinkButton>
@@ -78,7 +78,7 @@ export function GitMetadataPullRequest({
           LeadingIcon={<GitPullRequestIcon className="size-4" />}
           leadingIconClassName="group-hover/table-row:text-text-bright"
           iconSpacing="gap-x-1"
-          className="pl-1 duration-0 [&_span]:duration-0 [&_span]:group-hover/table-row:text-text-bright"
+          className="pl-1 duration-0 [&_span]:duration-0 group-hover/table-row:[&_span]:text-text-bright"
         >
           #{git.pullRequestNumber} {git.pullRequestTitle}
         </LinkButton>

apps/webapp/app/components/ListPagination.tsx

@@ -23,7 +23,7 @@ export function ListPagination({ list, className }: { list: List; className?: st
       <NextButton cursor={list.pagination.next} />
       <div
         className={cn(
-          "order-2 h-6 w-px bg-charcoal-600 transition-colors peer-hover/next:bg-charcoal-550 peer-hover/prev:bg-charcoal-550",
+          "order-2 h-6 w-px bg-surface-control transition-colors peer-hover/next:bg-surface-control-hover peer-hover/prev:bg-surface-control-hover",
           bothDisabled && "opacity-30"
         )}
       />
@@ -41,7 +41,7 @@ function PreviousButton({ cursor }: { cursor?: string }) {
         variant={"secondary/small"}
         LeadingIcon={ChevronLeftIcon}
         className={cn(
-          "flex items-center rounded-r-none border-r-0 pl-2 pr-[0.5625rem]",
+          "flex items-center rounded-r-none border-r-0 pl-2 pr-2.25",
           !path && "cursor-not-allowed opacity-50"
         )}
         onClick={(e) => !path && e.preventDefault()}
@@ -63,7 +63,7 @@ function NextButton({ cursor }: { cursor?: string }) {
         variant={"secondary/small"}
         TrailingIcon={ChevronRightIcon}
         className={cn(
-          "flex items-center rounded-l-none border-l-0 pl-[0.5625rem] pr-2",
+          "flex items-center rounded-l-none border-l-0 pl-2.25 pr-2",
           !path && "cursor-not-allowed opacity-50"
         )}
         onClick={(e) => !path && e.preventDefault()}

apps/webapp/app/components/LoginPageLayout.tsx

@@ -68,7 +68,7 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
         </div>
         <div className="flex flex-col items-center gap-4 px-8">
           <Paragraph>Trusted by developers at</Paragraph>
-          <div className="flex w-full flex-wrap items-center justify-center gap-x-6 gap-y-3 text-charcoal-500 xl:justify-between xl:gap-0">
+          <div className="flex w-full flex-wrap items-center justify-center gap-x-6 gap-y-3 text-text-faint xl:justify-between xl:gap-0">
             <LyftLogo className="w-11" />
             <UnkeyLogo />
             <MiddayLogo />