feat(webapp): Themes + contrast settings update

.changeset/vite-ignore-optional-imports.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Annotate the optional `@ai-sdk/otel` dynamic import with `@vite-ignore` so Vite-based bundlers don't warn about an unanalyzable import.

.server-changes/light-theme.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Adds an opt-in Interface theme setting on the account page behind a feature flag. Choose Dark (the new default), System preference (follows your OS), Light, or the original Classic look, and fine-tune the new themes with a contrast slider. System preference switches automatically when your OS appearance changes.

apps/webapp/app/assets/icons/MachineIcon.tsx

@@ -48,28 +48,33 @@ export function MachineDefaultIcon({ className }: { className?: string }) {
 
 function MachineIconNoMachine({ className }: { className?: string }) {
   return (
-    <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className={cn("text-[#D7D9DD] light:text-charcoal-500", className)}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M16.1875 13C16.6362 13 17 13.3638 17 13.8125V16.1875C17 16.6362 16.6362 17 16.1875 17H6.18945C6.25882 16.9453 6.32663 16.8872 6.39062 16.8232L10.2139 13H16.1875Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <path
         d="M4.84961 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H8.84961L4.84961 12ZM16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H11.2139L15.2139 8H16.1875Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <path
         d="M9.85059 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H13.8506L9.85059 7Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <line
         x1="3"
         y1="16.9998"
         x2="17.0018"
         y2="2.99805"
-        stroke="#D7D9DD"
+        stroke="currentColor"
         strokeOpacity="0.4"
         strokeWidth="2"
         strokeLinecap="round"
@@ -83,17 +88,17 @@ function MachineIconMicro({ className }: { className?: string }) {
     <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M16.1875 13C16.6362 13 17 13.3638 17 13.8125V16.1875C17 16.6362 16.6362 17 16.1875 17H3.8125C3.36377 17 3 16.6362 3 16.1875V13.8125C3 13.3638 3.36377 13 3.8125 13H16.1875ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <path
         d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <path
         d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
     </svg>
@@ -109,12 +114,12 @@ function MachineIconSmall1x({ className }: { className?: string }) {
       />
       <path
         d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <path
         d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
     </svg>
@@ -130,12 +135,12 @@ function MachineIconSmall2x({ className }: { className?: string }) {
       />
       <path
         d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <path
         d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
     </svg>
@@ -155,7 +160,7 @@ function MachineIconMedium1x({ className }: { className?: string }) {
       />
       <path
         d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
     </svg>
@@ -175,7 +180,7 @@ function MachineIconMedium2x({ className }: { className?: string }) {
       />
       <path
         d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
     </svg>

apps/webapp/app/components/AskAI.tsx

@@ -458,7 +458,7 @@ function ChatMessages({
         <div className="flex flex-col">
           <Callout variant="error" className="mb-4">
             <Paragraph className="font-semibold text-error">Error generating answer:</Paragraph>
-            <Paragraph className="text-rose-300">
+            <Paragraph className="text-rose-500 dark:text-rose-300">
               {error} If the problem persists after retrying, please contact support.
             </Paragraph>
           </Callout>

apps/webapp/app/components/BackgroundWrapper.tsx

@@ -1,42 +1,72 @@
 import { type ReactNode } from "react";
 import blurredDashboardBackgroundMenuTop from "~/assets/images/blurred-dashboard-background-menu-top.jpg";
+import blurredDashboardBackgroundMenuTopLight from "~/assets/images/blurred-dashboard-background-menu-top-light.jpg";
 import blurredDashboardBackgroundMenuBottom from "~/assets/images/blurred-dashboard-background-menu-bottom.jpg";
+import blurredDashboardBackgroundMenuBottomLight from "~/assets/images/blurred-dashboard-background-menu-bottom-light.jpg";
 import blurredDashboardBackgroundTable from "~/assets/images/blurred-dashboard-background-table.jpg";
+import blurredDashboardBackgroundTableLight from "~/assets/images/blurred-dashboard-background-table-light.jpg";
+
+/* Blurred dashboard screenshots; the -light set is the same artwork with the
+   lightness inverted for the light theme. */
+const BACKDROPS = [
+  {
+    images: {
+      menuTop: blurredDashboardBackgroundMenuTop,
+      menuBottom: blurredDashboardBackgroundMenuBottom,
+      table: blurredDashboardBackgroundTable,
+    },
+    tableFill: "#101214",
+    className: "hidden lg:block light:lg:hidden",
+  },
+  {
+    images: {
+      menuTop: blurredDashboardBackgroundMenuTopLight,
+      menuBottom: blurredDashboardBackgroundMenuBottomLight,
+      table: blurredDashboardBackgroundTableLight,
+    },
+    tableFill: "#f4f5f7",
+    className: "hidden light:lg:block",
+  },
+];
 
 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-top-left bg-no-repeat lg:block"
-        style={{
-          backgroundImage: `url(${blurredDashboardBackgroundMenuTop})`,
-          aspectRatio: "auto",
-          height: "100vh",
-          backgroundSize: "260px auto",
-        }}
-      />
+      {BACKDROPS.map(({ images, tableFill, className }) => (
+        <div key={tableFill} className={className}>
+          <div
+            className="absolute left-0 top-0 w-[260px] bg-contain bg-top-left bg-no-repeat"
+            style={{
+              backgroundImage: `url(${images.menuTop})`,
+              aspectRatio: "auto",
+              height: "100vh",
+              backgroundSize: "260px auto",
+            }}
+          />
 
-      <div
-        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",
-          height: "100vh",
-          backgroundSize: "260px auto",
-        }}
-      />
+          <div
+            className="absolute bottom-0 left-0 w-[260px] bg-contain bg-bottom-left bg-no-repeat"
+            style={{
+              backgroundImage: `url(${images.menuBottom})`,
+              aspectRatio: "auto",
+              height: "100vh",
+              backgroundSize: "260px auto",
+            }}
+          />
 
-      <div
-        className="absolute top-0 hidden bg-top-left bg-no-repeat lg:block"
-        style={{
-          left: "260px",
-          backgroundImage: `url(${blurredDashboardBackgroundTable})`,
-          width: "100%",
-          height: "100vh",
-          backgroundSize: "1200px auto",
-          backgroundColor: "#101214",
-        }}
-      />
+          <div
+            className="absolute top-0 bg-top-left bg-no-repeat"
+            style={{
+              left: "260px",
+              backgroundImage: `url(${images.table})`,
+              width: "100%",
+              height: "100vh",
+              backgroundSize: "1200px auto",
+              backgroundColor: tableFill,
+            }}
+          />
+        </div>
+      ))}
 
       <div className="relative z-10 h-full w-full">{children}</div>
     </div>

apps/webapp/app/components/BlankStatePanels.tsx

@@ -12,6 +12,7 @@ import {
 } from "@heroicons/react/20/solid";
 import { useLocation } from "react-use";
 import { AIChatIcon } from "~/assets/icons/AIChatIcon";
+import { AIPenIcon } from "~/assets/icons/AIPenIcon";
 import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
 import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
 import openBulkActionsPanel from "~/assets/images/open-bulk-actions-panel.png";
@@ -742,7 +743,7 @@ export function PromptsNone() {
   return (
     <InfoPanel
       title="Define your first prompt"
-      icon={AIChatIcon}
+      icon={AIPenIcon}
       iconClassName="text-aiPrompts"
       panelClassName="max-w-lg"
       accessory={

apps/webapp/app/components/BulkActionFilterSummary.tsx

@@ -9,7 +9,7 @@ import { Paragraph } from "./primitives/Paragraph";
 import simplur from "simplur";
 import { appliedSummary, dateFromString, timeFilterRenderValues } from "./runs/v3/SharedFilters";
 import { formatNumber } from "~/utils/numberFormatter";
-import { SpinnerWhite } from "./primitives/Spinner";
+import { Spinner } from "./primitives/Spinner";
 import { ArrowPathIcon, CheckIcon, XCircleIcon } from "@heroicons/react/20/solid";
 import { XCircleIcon as XCircleIconOutline } from "@heroicons/react/24/outline";
 import assertNever from "assert-never";
@@ -306,5 +306,5 @@ export function EstimatedCount({ count }: { count?: number }) {
     return <>~{formatNumber(count)}</>;
   }
 
-  return <SpinnerWhite className="mx-0.5 -mt-0.5 inline size-3" />;
+  return <Spinner color="blue" className="mx-0.5 -mt-0.5 inline size-3" />;
 }

apps/webapp/app/components/DevPresence.tsx

@@ -15,6 +15,7 @@ import disconnectedImage from "../assets/images/cli-disconnected.png";
 import { InlineCode } from "./code/InlineCode";
 import { Button } from "./primitives/Buttons";
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "./primitives/Dialog";
+import { cn } from "~/utils/cn";
 import { Paragraph } from "./primitives/Paragraph";
 import { TextLink } from "./primitives/TextLink";
 import { PackageManagerProvider, TriggerDevStepV3 } from "./SetupCommands";
@@ -165,7 +166,10 @@ export function DevPresencePanel({ isConnected }: { isConnected: boolean | undef
             width={282}
             height={45}
           />
-          <Paragraph variant="small" className={isConnected ? "text-success" : "text-error"}>
+          <Paragraph
+            variant="small"
+            className={cn("system-mono-label", isConnected ? "text-success" : "text-error")}
+          >
             {isConnected === undefined
               ? "Checking connection..."
               : isConnected

apps/webapp/app/components/ErrorDisplay.tsx

@@ -60,10 +60,12 @@ type DisplayOptionsProps = {
 
 export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
   return (
+    // The backdrop stays dark in every theme (the rotating-logo animation is
+    // dark artwork), so the text pins to the dark-theme colors on light too.
     <div className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-[#16181C]">
       <div className="z-10 mt-[30vh] flex shrink-0 flex-col items-center gap-8">
-        <Header1>{title}</Header1>
-        {message && <Paragraph>{message}</Paragraph>}
+        <Header1 className="light:text-charcoal-200">{title}</Header1>
+        {message && <Paragraph className="light:text-charcoal-400">{message}</Paragraph>}
         <LinkButton
           to={button ? button.to : "/"}
           shortcut={{ key: "enter" }}

apps/webapp/app/components/FeatureBadges.tsx

@@ -12,7 +12,14 @@ export function AlphaBadge({
   return (
     <SimpleTooltip
       button={
-        <Badge variant="extra-small" className={cn(inline ? "inline-grid" : "", className)}>
+        <Badge
+          variant="extra-small"
+          className={cn(
+            "system:border-transparent system:bg-blue-500 system:text-white",
+            inline ? "inline-grid" : "",
+            className
+          )}
+        >
           Alpha
         </Badge>
       }
@@ -35,7 +42,14 @@ export function BetaBadge({ inline = false, className }: { inline?: boolean; cla
   return (
     <SimpleTooltip
       button={
-        <Badge variant="extra-small" className={cn(inline ? "inline-grid" : "", className)}>
+        <Badge
+          variant="extra-small"
+          className={cn(
+            "system:border-transparent system:bg-blue-500 system:text-white",
+            inline ? "inline-grid" : "",
+            className
+          )}
+        >
           Beta
         </Badge>
       }
@@ -58,7 +72,11 @@ export function NewBadge({ inline = false, className }: { inline?: boolean; clas
   return (
     <Badge
       variant="extra-small"
-      className={cn("text-success", inline ? "inline-grid" : "", className)}
+      className={cn(
+        "text-success system:border-transparent system:bg-success system:text-white",
+        inline ? "inline-grid" : "",
+        className
+      )}
     >
       New
     </Badge>

apps/webapp/app/components/LoginPageLayout.tsx

@@ -72,7 +72,7 @@ export function LoginPageLayout({
         {rightContent ?? (
           <>
             <div className="flex h-full flex-col items-center justify-center px-16">
-              <Header3 className="relative text-center text-2xl font-normal leading-8 text-text-dimmed transition before:relative before:right-1 before:top-0 before:text-6xl before:text-charcoal-750 before:content-['❝'] lg-height:text-xl md-height:text-lg">
+              <Header3 className="relative text-center text-2xl font-normal leading-8 text-text-dimmed transition before:relative before:right-1 before:top-0 before:text-6xl before:text-grid-bright before:content-['❝'] dark:before:text-charcoal-750 lg-height:text-xl md-height:text-lg">
                 {randomQuote?.quote}
               </Header3>
               <Paragraph className="mt-4 text-text-dimmed/60">{randomQuote?.person}</Paragraph>

apps/webapp/app/components/admin/debugTooltip.tsx

@@ -44,7 +44,7 @@ function Content({ children }: { children: React.ReactNode }) {
   const user = useUser();
 
   return (
-    <div className="flex flex-col gap-2 divide-y divide-slate-700">
+    <div className="flex flex-col gap-2 divide-y divide-grid-bright">
       <Property.Table>
         <Property.Item>
           <Property.Label>User ID</Property.Label>

apps/webapp/app/components/billing/AnimatedOrgBannerBar.tsx

@@ -40,11 +40,16 @@ export function AnimatedOrgBannerBar({
           <div className="flex items-center gap-2">
             <Icon
               icon={ExclamationCircleIcon}
-              className={cn("h-5 w-5", variant === "warning" ? "text-amber-400" : "text-error")}
+              className={cn(
+                "h-5 w-5",
+                variant === "warning" ? "text-amber-400 light:text-amber-600" : "text-error"
+              )}
             />
             <Paragraph
               variant="small"
-              className={variant === "warning" ? "text-amber-200" : "text-error"}
+              className={
+                variant === "warning" ? "text-amber-700 dark:text-amber-200" : "text-error"
+              }
             >
               {children}
             </Paragraph>

apps/webapp/app/components/billing/BillingLimitRecoveryPanel.tsx

@@ -113,7 +113,7 @@ export function BillingLimitRecoveryPanel({
       <div className="border-b border-grid-dimmed pb-3">
         <Header2 spacing>Action required</Header2>
         <Callout variant="warning">
-          <Paragraph variant="small" className="text-yellow-200">
+          <Paragraph variant="small" className="text-callout-warning-text">
             {isGrace ? (
               <>
                 Your organization has reached its billing limit. Processing is paused and new runs