triggerdotdev · kathiekiwi · Jul 9, 2026
diff --git a/.server-changes/light-theme.md b/.server-changes/light-theme.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Adds an opt-in light theme behind a feature flag. When enabled, an Interface theme setting appears on the account page (dark stays the default). Code editors and syntax highlighting use the trigger.light palette.
diff --git a/apps/webapp/app/components/AskAI.tsx b/apps/webapp/app/components/AskAI.tsx
@@ -389,7 +389,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>

diff --git a/apps/webapp/app/components/admin/debugTooltip.tsx b/apps/webapp/app/components/admin/debugTooltip.tsx
@@ -40,7 +40,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>

diff --git a/apps/webapp/app/components/billing/AnimatedOrgBannerBar.tsx b/apps/webapp/app/components/billing/AnimatedOrgBannerBar.tsx
@@ -44,7 +44,9 @@ export function AnimatedOrgBannerBar({
             />
             <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>

diff --git a/apps/webapp/app/components/billing/BillingLimitRecoveryPanel.tsx b/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

diff --git a/apps/webapp/app/components/billing/UsageBar.tsx b/apps/webapp/app/components/billing/UsageBar.tsx
@@ -67,7 +67,7 @@ export function UsageBar({ current, billingLimit, tierLimit, isPaying }: UsageBa
             animate={{ width: tierRunLimitPercentage + "%" }}
             transition={{ duration: 1.5, type: "spring" }}
             style={{ width: `${tierRunLimitPercentage}%` }}
-            className="absolute h-3 rounded-l-sm bg-green-900/50"
+            className="absolute h-3 rounded-l-sm bg-green-900/20"
           >
             <Legend
               text={isPaying ? `Included usage:` : `Tier limit:`}

diff --git a/apps/webapp/app/components/code/ChartConfigPanel.tsx b/apps/webapp/app/components/code/ChartConfigPanel.tsx
@@ -572,7 +572,7 @@ function SeriesColorPicker({
           title="Change series color"
         >
           <span
-            className="block h-4 w-4 rounded-full border border-white/30"
+            className="block h-4 w-4 rounded-full border border-text-bright/30"
             style={{ backgroundColor: color }}
           />
         </button>
@@ -587,7 +587,7 @@ function SeriesColorPicker({
                 onColorChange(c);
                 setOpen(false);
               }}
-              className="group/swatch flex h-6 w-6 items-center justify-center rounded-full border border-white/30"
+              className="group/swatch flex h-6 w-6 items-center justify-center rounded-full border border-text-bright/30"
               style={{ backgroundColor: c }}
               title={c}
             >

diff --git a/apps/webapp/app/components/primitives/AppliedFilter.tsx b/apps/webapp/app/components/primitives/AppliedFilter.tsx
@@ -4,11 +4,11 @@ import { cn } from "~/utils/cn";
 
 const variants = {
   "secondary/small": {
-    box: "h-6 bg-secondary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-surface-control group-hover:border-border-brighter text-text-bright border border-border-bright",
+    box: "h-6 bg-secondary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 shadow-xs group-hover:bg-background-raised text-text-bright border border-border-bright/50",
     clear: "size-6 text-text-bright hover:text-text-bright transition-colors",
   },
   "tertiary/small": {
-    box: "h-6 bg-tertiary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-surface-control",
+    box: "h-6 bg-tertiary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-background-raised",
     clear: "size-6 text-text-dimmed hover:text-text-bright transition-colors",
   },
   "minimal/medium": {

diff --git a/apps/webapp/app/components/primitives/Avatar.tsx b/apps/webapp/app/components/primitives/Avatar.tsx
@@ -138,7 +138,7 @@ function AvatarLetters({
 
   return (
     <span
-      className="grid shrink-0 place-items-center overflow-hidden text-charcoal-750"
+      className="grid shrink-0 place-items-center overflow-hidden text-white"
       style={styleFromSize(size)}
     >
       {/* This is the square container */}

diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx
@@ -49,18 +49,17 @@ type Size = keyof typeof sizes;
 
 const theme = {
   primary: {
-    textColor:
-      "text-text-bright group-hover/button:text-white transition group-disabled/button:text-text-dimmed",
+    textColor: "text-white transition group-disabled/button:text-white/60",
     button:
       "bg-indigo-600 border border-indigo-500 group-hover/button:bg-indigo-500 group-hover/button:border-indigo-400 group-disabled/button:opacity-50 group-disabled/button:bg-indigo-600 group-disabled/button:border-indigo-500 group-disabled/button:pointer-events-none",
     shortcut:
-      "border-text-bright/40 text-text-bright group-hover/button:border-text-bright/60 group-hover/button:text-text-bright",
-    icon: "text-text-bright",
+      "border-white/40 text-white group-hover/button:border-white/60 group-hover/button:text-white",
+    icon: "text-white",
   },
   secondary: {
     textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80",
     button:
-      "bg-secondary group-hover/button:bg-surface-control group-hover/button:border-border-brighter border border-border-bright group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
+      "bg-secondary border border-border-bright/50 shadow-xs group-hover/button:bg-background-raised group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
     shortcut:
       "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
     icon: "text-text-bright",
@@ -82,17 +81,16 @@ const theme = {
     icon: "text-text-dimmed",
   },
   danger: {
-    textColor:
-      "text-text-bright group-hover/button:text-white transition group-disabled/button:text-text-bright/80",
+    textColor: "text-white transition group-disabled/button:text-white/80",
     button:
       "bg-error group-hover/button:bg-rose-500 disabled:opacity-50 group-disabled/button:bg-error group-disabled/button:pointer-events-none",
-    shortcut: "border-text-bright text-text-bright group-hover/button:border-text-bright/60",
-    icon: "text-text-bright",
+    shortcut: "border-white text-white group-hover/button:border-white/60",
+    icon: "text-white",
   },
   docs: {
-    textColor: "text-blue-200/70 transition group-disabled/button:text-text-dimmed/80",
+    textColor: "text-callout-docs-text/70 transition group-disabled/button:text-text-dimmed/80",
     button:
-      "bg-background-raised border border-border-bright/50 shadow-sm group-hover/button:bg-secondary group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
+      "bg-secondary border border-border-bright/50 shadow-xs group-hover/button:bg-background-raised group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
     shortcut:
       "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
     icon: "text-blue-500",
@@ -167,7 +165,7 @@ const variant = {
 };
 
 const allVariants = {
-  $all: "font-normal text-center font-sans justify-center items-center shrink-0 transition duration-150 rounded-[3px] select-none group-focus/button:outline-hidden group-disabled/button:opacity-75 group-disabled/button:pointer-events-none focus-custom",
+  $all: "cursor-pointer font-normal text-center font-sans justify-center items-center shrink-0 transition duration-150 rounded-[3px] select-none group-focus/button:outline-hidden group-disabled/button:opacity-75 group-disabled/button:pointer-events-none focus-custom",
   variant: variant,
 };
 

diff --git a/apps/webapp/app/components/primitives/Checkbox.tsx b/apps/webapp/app/components/primitives/Checkbox.tsx
@@ -139,7 +139,11 @@ export const CheckboxWithLabel = React.forwardRef<HTMLInputElement, CheckboxProp
           className={cn(
             inputPositionClasses,
             props.readOnly || disabled ? "cursor-default" : "cursor-pointer",
-            "read-only:border-border-bright disabled:border-border-bright rounded-sm border border-border-bright bg-transparent transition checked:bg-indigo-500! read-only:bg-background-raised! group-hover:bg-background-deep checked:group-hover:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-hidden  focus-visible:ring-indigo-500 disabled:bg-background-raised!"
+            // NB: don't use the `read-only:` variant here — checkboxes always
+            // match :read-only, so it would override the checked style.
+            "rounded-sm border border-border-bright bg-transparent transition checked:bg-indigo-500! group-hover:bg-background-deep checked:group-hover:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-hidden focus-visible:ring-indigo-500",
+            (isDisabled || props.readOnly) &&
+              "bg-background-raised! checked:bg-background-raised! checked:group-hover:bg-background-raised! group-hover:bg-background-raised!"
           )}
           id={id}
           ref={ref}
@@ -189,7 +193,13 @@ export const Checkbox = forwardRef<HTMLInputElement, SimpleCheckboxProps>(
             : props.readOnly
               ? "cursor-default"
               : "cursor-pointer",
-          "read-only:border-border-bright disabled:border-border-bright disabled:opacity-50 rounded-sm border border-border-bright bg-transparent transition checked:bg-indigo-500! read-only:bg-background-raised! group-hover:bg-background-deep checked:group-hover:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-hidden focus-visible:ring-indigo-500 disabled:bg-background-raised!"
+          // NB: don't use the `read-only:` variant here — checkboxes always
+          // match :read-only, so it would override the checked style.
+          "rounded-sm border border-border-bright bg-transparent transition checked:bg-indigo-500! group-hover:bg-background-deep checked:group-hover:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-hidden focus-visible:ring-indigo-500",
+          props.disabled && "opacity-50",
+          (props.disabled || props.readOnly) &&
+            "bg-background-raised! checked:bg-background-raised! checked:group-hover:bg-background-raised! group-hover:bg-background-raised!",
+          className
         )}
         {...props}
         ref={ref}

diff --git a/apps/webapp/app/components/primitives/ClientTabs.tsx b/apps/webapp/app/components/primitives/ClientTabs.tsx
@@ -122,10 +122,10 @@ const ClientTabsTrigger = React.forwardRef<
             <motion.div
               layoutId={layoutId}
               transition={{ duration: 0.4, type: "spring" }}
-              className="absolute inset-0 rounded-[2px] border border-border-brightest/50 bg-surface-control"
+              className="absolute inset-0 rounded-[2px] border border-[#e2e4e9] bg-white dark:border-border-brightest/50 dark:bg-surface-control"
             />
           ) : (
-            <div className="absolute inset-0 rounded-[2px] border border-border-brightest/50 bg-surface-control" />
+            <div className="absolute inset-0 rounded-[2px] border border-[#e2e4e9] bg-white dark:border-border-brightest/50 dark:bg-surface-control" />
           )
         ) : null}
       </TabsPrimitive.Trigger>

diff --git a/apps/webapp/app/components/primitives/ClipboardField.tsx b/apps/webapp/app/components/primitives/ClipboardField.tsx
@@ -5,7 +5,7 @@ import { CopyButton } from "./CopyButton";
 const variants = {
   "primary/small": {
     container:
-      "flex items-center text-text-dimmed font-mono rounded border bg-background-hover text-xs transition hover:bg-background-raised focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border border-border-bright/50 shadow-xs bg-input-bg text-xs transition hover:bg-background-raised focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-xs px-2 w-auto rounded-l h-6 leading-6 focus:ring-transparent",
     buttonVariant: "primary" as const,
@@ -14,7 +14,7 @@ const variants = {
   },
   "secondary/small": {
     container:
-      "flex items-center text-text-dimmed font-mono rounded border bg-background-hover text-xs transition hover:bg-background-raised focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border border-border-bright/50 shadow-xs bg-input-bg text-xs transition hover:bg-background-raised focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-xs px-2 w-auto rounded-l h-6 leading-6 focus:ring-transparent",
     buttonVariant: "tertiary" as const,
@@ -33,7 +33,7 @@ const variants = {
   },
   "primary/medium": {
     container:
-      "flex items-center text-text-dimmed font-mono rounded border bg-background-hover text-sm transition hover:bg-background-raised focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border border-border-bright/50 shadow-xs bg-input-bg text-sm transition hover:bg-background-raised focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-sm px-3 w-auto rounded-l h-8 leading-6 focus:ring-transparent",
     buttonVariant: "primary" as const,
@@ -42,7 +42,7 @@ const variants = {
   },
   "secondary/medium": {
     container:
-      "flex items-center text-text-dimmed font-mono rounded bg-background-hover text-sm transition hover:bg-background-raised focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border border-border-bright/50 shadow-xs bg-input-bg text-sm transition hover:bg-background-raised focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-hidden focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-sm px-3 w-auto rounded-l h-8 leading-6 focus:ring-transparent",
     buttonVariant: "tertiary" as const,

diff --git a/apps/webapp/app/components/primitives/Input.tsx b/apps/webapp/app/components/primitives/Input.tsx
@@ -12,21 +12,21 @@ const inputBase =
 const variants = {
   large: {
     container:
-      "px-1 w-full h-10 rounded-[3px] border border-background-bright bg-background-hover hover:border-border-bright hover:bg-secondary",
+      "px-1 w-full h-10 rounded-[3px] border border-border-bright/50 shadow-xs bg-input-bg hover:bg-background-raised",
     input: "px-2 text-sm",
     iconSize: "size-4 ml-1",
     accessory: "pr-1",
   },
   medium: {
     container:
-      "px-1 h-8 w-full rounded border border-background-bright bg-background-hover hover:border-border-bright hover:bg-secondary",
+      "px-1 h-8 w-full rounded border border-border-bright/50 shadow-xs bg-input-bg hover:bg-background-raised",
     input: "px-1.5 rounded text-sm",
     iconSize: "size-4 ml-0.5",
     accessory: "pr-1",
   },
   small: {
     container:
-      "px-1 h-6 w-full rounded border border-background-bright bg-background-hover hover:border-border-bright hover:bg-secondary",
+      "px-1 h-6 w-full rounded border border-border-bright/50 shadow-xs bg-input-bg hover:bg-background-raised",
     input: "px-1 rounded text-xs",
     iconSize: "size-3 ml-0.5",
     accessory: "pr-0.5",
@@ -39,7 +39,7 @@ const variants = {
   },
   "secondary-small": {
     container:
-      "px-1 h-6 w-full rounded border border-border-bright hover:border-border-brighter bg-grid-dimmed hover:bg-secondary",
+      "px-1 h-6 w-full rounded border border-border-bright/50 shadow-xs bg-input-bg hover:bg-background-raised",
     input: "px-1 rounded text-xs",
     iconSize: "size-3 ml-0.5",
     accessory: "pr-0.5",