refactor: theme steering initial pass

e2e/tests/console/aiAssistant.spec.js

@@ -3291,10 +3291,9 @@ describe("custom providers", () => {
     cy.getByDataHook("custom-provider-name-input")
       .should("be.visible")
       .type("Ollama")
-    cy.getByDataHook("custom-provider-type-select").should(
-      "have.value",
-      "openai-chat-completions",
-    )
+    cy.getByDataHook("custom-provider-type-select")
+      .should("be.visible")
+      .should("contain", "OpenAI Chat Completions API")
     cy.getByDataHook("custom-provider-base-url-input").type(
       "http://localhost:11434/v1",
     )

src/components/AISparkle/index.tsx

@@ -45,8 +45,8 @@ const FilledSparkle = ({ gradientId }: { gradientId: string }) => {
           y2="22.5"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor={theme.color.aiGradientStart} />
-          <stop offset="1" stopColor={theme.color.aiGradientEnd} />
+          <stop stopColor={theme.color.aiPinkStart} />
+          <stop offset="1" stopColor={theme.color.aiPinkEnd} />
         </linearGradient>
       </defs>
     </svg>
@@ -59,7 +59,7 @@ const HollowSparkle = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none">
       <path
-        fill={theme.color.aiGradientStart}
+        fill={theme.color.aiPinkStart}
         d="m11.69 7.582-3.118-1.15-1.152-3.12a1.245 1.245 0 0 0-2.336 0l-1.15 3.12-3.12 1.15a1.245 1.245 0 0 0 0 2.336l3.118 1.15 1.152 3.12a1.245 1.245 0 0 0 2.336 0l1.15-3.118 3.12-1.152a1.245 1.245 0 0 0 0-2.336M7.727 9.779a.75.75 0 0 0-.444.445l-1.032 2.794-1.03-2.794a.75.75 0 0 0-.444-.445L1.984 8.75l2.794-1.03a.75.75 0 0 0 .444-.444l1.03-2.793 1.03 2.793a.75.75 0 0 0 .444.445l2.793 1.029zm.274-7.529a.75.75 0 0 1 .75-.75h.75V.75a.75.75 0 0 1 1.5 0v.75h.75a.75.75 0 1 1 0 1.5h-.75v.75a.75.75 0 1 1-1.5 0V3h-.75a.75.75 0 0 1-.75-.75m7 3a.75.75 0 0 1-.75.75h-.25v.25a.75.75 0 1 1-1.5 0V6h-.25a.75.75 0 1 1 0-1.5h.25v-.25a.75.75 0 1 1 1.5 0v.25h.25a.75.75 0 0 1 .75.75"
       />
     </svg>

src/components/AIStatusIndicator/AssistantModes.tsx

@@ -55,7 +55,7 @@ const ReasoningIcon = styled.div`
 const CheckIcon = styled(CheckboxCircle)`
   width: 1.6rem;
   height: 1.6rem;
-  color: ${color("statusAssistant")};
+  color: ${color("aiPinkStart")};
   flex-shrink: 0;
 `
 

src/components/AIStatusIndicator/AssistantModesCompact.tsx

@@ -11,6 +11,7 @@ import {
   type OperationHistory,
 } from "../../providers/AIStatusProvider"
 import { color } from "../../utils"
+import { statusInfoFocus } from "../../theme"
 import { BrainIcon } from "../SetupAIAssistant/BrainIcon"
 import {
   buildOperationSections,
@@ -121,7 +122,8 @@ const ModeHeaderTop = styled.div<{
       }
 
       &:focus-visible {
-        outline: 1px solid ${color("contentAccent")};
+        outline: 1px solid
+          ${({ theme }) => statusInfoFocus(theme.color.statusInfo)};
         outline-offset: 2px;
       }
 
@@ -213,7 +215,7 @@ const CodeBadgeText = styled.span`
 const CheckIcon = styled(CheckIconRaw)`
   width: 1.6rem;
   height: 1.6rem;
-  color: ${color("statusAssistant")};
+  color: ${color("aiPinkStart")};
   flex-shrink: 0;
 `
 

src/components/AIStatusIndicator/index.tsx

@@ -10,7 +10,7 @@ import {
 import { color } from "../../utils"
 import { slideAnimation } from "../Animation"
 import { AISparkle } from "../AISparkle"
-import { brandLinearGradientHorizontal } from "../../theme"
+import { assistantLinearGradientHorizontal } from "../../theme"
 import { getAllModelOptions } from "../../utils/ai"
 import { useAIConversation } from "../../providers/AIConversationProvider"
 import { Button } from "../../components/Button"
@@ -49,8 +49,8 @@ const CaretGradient = (props: React.SVGProps<SVGSVGElement>) => {
           y2="15"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor={theme.color.contentAccent} />
-          <stop offset="1" stopColor={theme.color.brandGradientEnd} />
+          <stop stopColor={theme.color.aiPinkStart} />
+          <stop offset="1" stopColor={theme.color.aiPinkEnd} />
         </linearGradient>
       </defs>
     </svg>
@@ -125,7 +125,7 @@ const ThoughtStream = styled.div<{
   background:
     linear-gradient(${color("surfaceInset")}, ${color("surfaceInset")})
       padding-box,
-    ${({ theme }) => brandLinearGradientHorizontal(theme.color)} border-box;
+    ${({ theme }) => assistantLinearGradientHorizontal(theme.color)} border-box;
   ${({ $abort }) =>
     $abort &&
     css`
@@ -164,7 +164,7 @@ const ThoughtStreamContent = styled.div`
 const CheckIcon = styled(CheckboxCircle)`
   width: 2.4rem;
   height: 2.4rem;
-  color: ${color("statusAssistant")};
+  color: ${color("aiPinkStart")};
   flex-shrink: 0;
 `
 

src/components/Badge/index.tsx

@@ -22,10 +22,15 @@ export const badgeVariants = [
 
 export type BadgeVariant = (typeof badgeVariants)[number]
 
+export type BadgeSize = "sm" | "md"
+export type BadgeShape = "chip" | "pill"
+
 type Props = React.ComponentPropsWithoutRef<"span"> & {
   type?: BadgeType
   variant?: BadgeVariant
-  size?: "sm" | "md"
+  size?: BadgeSize
+  /** `chip` is the default status badge. `pill` is reserved for compact count badges. */
+  shape?: BadgeShape
   icon?: React.ReactNode
   pulsate?: boolean
   children?: React.ReactNode
@@ -63,31 +68,57 @@ const getTone = (variant: BadgeVariant, theme: DefaultTheme) => {
     info: theme.color.statusInfo,
     success: theme.color.statusSuccess,
     warning: theme.color.statusWarning,
-    danger: theme.color.statusDanger,
+    danger: theme.color.statusDangerContrast,
   }
   return tones[variant]
 }
 
+const chipBackground = (variant: BadgeVariant, theme: DefaultTheme) => {
+  switch (variant) {
+    case "success":
+      return theme.color.statusSuccessSurface
+    case "danger":
+      return theme.color.statusDangerSurface
+    case "warning":
+      return theme.color.statusWarningSurface
+    case "info":
+      return theme.color.statusInfoSurface
+    case "neutral":
+      return theme.color.interactionNeutral
+    default:
+      return withAlpha(getTone(variant, theme), 0.1)
+  }
+}
+
 const Root = styled.span<{
   $variant: BadgeVariant
-  $size: "sm" | "md"
+  $size: BadgeSize
+  $shape: BadgeShape
   pulsate?: boolean
 }>`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  gap: 0.5rem;
-  height: ${({ $size }) => ($size === "sm" ? "2.2rem" : "2.8rem")};
-  padding: ${({ $size }) => ($size === "sm" ? "0 0.7rem" : "0 0.9rem")};
-  border: 1px solid
-    ${({ $variant, theme }) => withAlpha(getTone($variant, theme), 0.32)};
-  border-radius: 999px;
+  gap: 0.4rem;
+  height: ${({ $shape, $size }) =>
+    $shape === "pill" ? ($size === "sm" ? "2rem" : "2.8rem") : "auto"};
+  padding: ${({ $shape, $size }) =>
+    $shape === "pill" ? ($size === "sm" ? "0 0.5rem" : "0 0.9rem") : "0.5rem"};
+  border: ${({ $shape, $variant, theme }) =>
+    $shape === "pill"
+      ? `1px solid ${withAlpha(getTone($variant, theme), 0.32)}`
+      : 0};
+  border-radius: ${({ $shape }) => ($shape === "pill" ? "999px" : "0.4rem")};
   color: ${({ $variant, theme }) => getTone($variant, theme)};
-  background: ${({ $variant, theme }) =>
-    withAlpha(getTone($variant, theme), 0.1)};
-  font-size: ${({ theme }) => theme.fontSize.xs};
-  font-weight: 600;
+  background: ${({ $shape, $variant, theme }) =>
+    $shape === "pill"
+      ? withAlpha(getTone($variant, theme), 0.12)
+      : chipBackground($variant, theme)};
+  font-size: ${({ $shape, theme }) =>
+    $shape === "pill" ? theme.fontSize.xs : "1.1rem"};
+  font-weight: 400;
+  letter-spacing: ${({ $shape }) => ($shape === "pill" ? "0.1px" : "normal")};
   line-height: 1;
   white-space: nowrap;
 
@@ -105,16 +136,16 @@ const Root = styled.span<{
     `};
 `
 
-const Icon = styled.div<{ hasGap: boolean }>`
+const Icon = styled.div<{ hasGap: boolean; $shape: BadgeShape }>`
   display: flex;
   justify-content: center;
   align-items: center;
 
   ${({ hasGap }) => !hasGap && "margin: 0 -0.1rem;"}
 
   svg {
-    width: 1.4rem;
-    height: 1.4rem;
+    width: ${({ $shape }) => ($shape === "pill" ? "1.2rem" : "1.6rem")};
+    height: ${({ $shape }) => ($shape === "pill" ? "1.2rem" : "1.6rem")};
   }
 `
 
@@ -124,6 +155,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, Props>(
       type,
       variant,
       size = "md",
+      shape = "chip",
       icon,
       pulsate,
       children,
@@ -139,10 +171,15 @@ export const Badge = React.forwardRef<HTMLSpanElement, Props>(
       className={className}
       $variant={getVariant(variant, type)}
       $size={size}
+      $shape={shape}
       pulsate={pulsate}
       data-hook={dataHook}
     >
-      {icon && <Icon hasGap={React.Children.count(children) > 0}>{icon}</Icon>}
+      {icon && (
+        <Icon $shape={shape} hasGap={React.Children.count(children) > 0}>
+          {icon}
+        </Icon>
+      )}
       {children}
     </Root>
   ),

src/components/Button/index.tsx

@@ -6,8 +6,9 @@ import type { FontSize } from "../../types"
 import type { ButtonVariant } from "./variants"
 import { makeButtonVariant } from "./variants"
 import {
-  brandLinearGradientHorizontal,
-  brandLinearGradientVertical,
+  assistantLinearGradientHorizontal,
+  assistantLinearGradientVertical,
+  statusInfoFocus,
 } from "../../theme"
 import { BUTTON_HEIGHTS } from "./tokens"
 
@@ -17,13 +18,15 @@ export const sizes = ["sm", "md", "lg"] as const
 export type Size = (typeof sizes)[number]
 type Type = "button" | "submit"
 
-const getPinkGradient = (props: ButtonProps & { theme: DefaultTheme }) =>
+const getAssistantGradient = (props: ButtonProps & { theme: DefaultTheme }) =>
   props.gradientStyle === "vertical"
-    ? brandLinearGradientVertical(props.theme.color)
-    : brandLinearGradientHorizontal(props.theme.color)
+    ? assistantLinearGradientVertical(props.theme.color)
+    : assistantLinearGradientHorizontal(props.theme.color)
 
-const getHoverPinkGradient = (props: ButtonProps & { theme: DefaultTheme }) => {
-  const base = getPinkGradient(props)
+const getHoverAssistantGradient = (
+  props: ButtonProps & { theme: DefaultTheme },
+) => {
+  const base = getAssistantGradient(props)
   return base.includes("180deg")
     ? base.replace("180deg", "0deg")
     : base.replace("90deg", "270deg")
@@ -186,7 +189,7 @@ export const ButtonBase = styled.button.attrs<{
     filter 120ms ease;
 
   &&:focus-visible {
-    outline: 1px solid ${({ theme }) => theme.color.contentAccent};
+    outline: 1px solid ${({ theme }) => statusInfoFocus(theme.color.statusInfo)};
     outline-offset: 2px;
   }
 
@@ -195,7 +198,7 @@ export const ButtonBase = styled.button.attrs<{
     cursor: not-allowed;
   }
 
-  &&:active:not(:disabled):not([aria-disabled="true"]) {
+  &&:active:not(:disabled):not([aria-disabled="true"]):not([role="tab"]) {
     filter: brightness(0.9);
   }
 `
@@ -251,15 +254,15 @@ const StyledButton = styled(ButtonBase)<ButtonProps>`
         border: ${getBorderWidth} solid transparent;
         background:
           linear-gradient(${getFillColor}, ${getFillColor}) padding-box,
-          ${getPinkGradient} border-box;
+          ${getAssistantGradient} border-box;
         color: ${props.theme.color.contentPrimary};
       }
 
       &&:hover:not(:disabled):not([aria-disabled="true"]) {
         background:
           linear-gradient(${getHoverFillColor}, ${getHoverFillColor})
             padding-box,
-          ${getHoverPinkGradient} border-box;
+          ${getHoverAssistantGradient} border-box;
         color: ${props.theme.color.contentPrimary};
       }
 

src/components/Button/variants.ts

@@ -118,14 +118,14 @@ const themes: {
   },
   dangerGhost: {
     normal: {
-      background: "transparent",
+      background: "statusDangerSurface",
       border: "transparent",
-      color: "statusDanger",
+      color: "statusDangerContrast",
     },
     hover: {
-      background: "statusDangerSurface",
+      background: "statusDangerSurfaceHover",
       border: "transparent",
-      color: "statusDanger",
+      color: "statusDangerSubtle",
     },
     disabled: {
       background: "transparent",
@@ -135,14 +135,14 @@ const themes: {
   },
   danger: {
     normal: {
-      background: "statusDangerSurface",
-      border: "transparent",
-      color: "statusDangerStrong",
+      background: "statusDangerStrong",
+      border: "statusDangerStrong",
+      color: "contentInverse",
     },
     hover: {
-      background: "statusDangerSurfaceHover",
-      border: "transparent",
-      color: "statusDangerStrong",
+      background: "statusDanger",
+      border: "statusDanger",
+      color: "contentInverse",
     },
     disabled: {
       background: "surfaceRaised",
@@ -197,8 +197,14 @@ export const makeButtonVariant = (variant: ButtonVariant) => {
     }
 
     &&:hover:not(:disabled):not([aria-disabled="true"]) {
-      background: ${getColor(theme.hover.background)};
-      color: ${getColor(theme.hover.color)};
+      background: ${({ theme: t }) =>
+        variant === "ghost" && t.mode === "light"
+          ? t.color.interactionHover
+          : t.color[theme.hover.background]};
+      color: ${({ theme: t }) =>
+        variant === "dangerGhost" && t.mode === "dark"
+          ? t.color.statusDanger
+          : t.color[theme.hover.color]};
       border-color: ${getColor(theme.hover.border)};
     }