feat(webapp): add light theme behind feature flag

- semantic token overrides for light, trigger.light editor/code palettes
- Interface theme dropdown on /account, gated by hasThemeSwitcher flag
- unify light surfaces: buttons, inputs, radios, checkboxes, tabs, clipboard fields
- fix checkbox :read-only override and useThemeColor hydration mismatch
- resolve Firefox panel animation check from request UA

Author: kathiekiwi

.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.

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>

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>

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>

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

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:`}

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}
             >

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": {

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 */}

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,
 };