WIP: lift light surfaces and neutralize chrome hover/focus

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

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

@@ -8,6 +8,7 @@ import { makeButtonVariant } from "./variants"
 import {
   brandLinearGradientHorizontal,
   brandLinearGradientVertical,
+  statusInfoFocus,
 } from "../../theme"
 import { BUTTON_HEIGHTS } from "./tokens"
 
@@ -185,7 +186,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;
   }
 
@@ -194,7 +195,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);
   }
 `

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

src/components/Checkbox/index.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from "react"
 import { Check } from "@phosphor-icons/react"
 import styled from "styled-components"
+import { statusInfoFocus } from "../../theme"
 
 type Props = React.InputHTMLAttributes<HTMLInputElement>
 
@@ -42,13 +43,12 @@ const NativeCheckbox = styled.input`
   cursor: pointer;
 
   &:not(:checked):not(:disabled):hover + ${Indicator} {
-    border-color: ${({ theme }) => theme.color.borderAccentStrong};
     background: ${({ theme }) => theme.color.controlSurfaceHover};
   }
 
   &:checked + ${Indicator} {
-    border-color: ${({ theme }) => theme.color.contentAccent};
-    background: ${({ theme }) => theme.color.contentAccent};
+    border-color: ${({ theme }) => theme.color.statusInfoControl};
+    background: ${({ theme }) => theme.color.statusInfoControl};
 
     svg {
       opacity: 1;
@@ -57,14 +57,13 @@ const NativeCheckbox = styled.input`
   }
 
   &:checked:not(:disabled):hover + ${Indicator} {
-    border-color: ${({ theme }) => theme.color.contentAccentStrong};
-    background: ${({ theme }) => theme.color.contentAccentStrong};
+    border-color: ${({ theme }) => theme.color.statusInfoControl};
+    background: ${({ theme }) => theme.color.statusInfoControl};
   }
 
   &:focus-visible + ${Indicator} {
-    border-color: ${({ theme }) => theme.color.actionPrimaryHover};
-    box-shadow: 0 0 0 0.2rem
-      ${({ theme }) => theme.color.interactionAccentActive};
+    outline: 1px solid ${({ theme }) => statusInfoFocus(theme.color.statusInfo)};
+    outline-offset: 2px;
   }
 
   &:disabled {

src/components/Drawer/content-wrapper.tsx

@@ -14,7 +14,7 @@ export const ContentWrapper = styled(Box).attrs({
   flex: 1;
   min-height: 0;
   overflow: auto;
-  background: ${({ theme }) => theme.color.surfaceBase};
+  background: ${({ theme }) => theme.color.surfaceRaised};
 
   form {
     width: 100%;

src/components/Drawer/index.tsx

@@ -59,9 +59,9 @@ const DrawerContent = styled(RadixDialog.Content).attrs({ forceMount: true })<{
 }>`
   display: flex;
   flex-direction: column;
-  background-color: ${({ theme }) => theme.color.surfaceBase};
+  background-color: ${({ theme }) => theme.color.surfaceRaised};
   border-left: 1px solid ${({ theme }) => theme.color.borderSubtle};
-  box-shadow: -18px 0 52px ${({ theme }) => theme.color.shadowSoft};
+  box-shadow: -4px 0 16px ${({ theme }) => theme.color.shadowSoft};
   position: ${({ mode }) => (mode === "modal" ? "fixed" : "inherit")};
   top: 0;
   right: 0;

src/components/Form/FormInput/index.tsx

@@ -12,6 +12,7 @@ export type FormInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   showPassword?: boolean
   autoFocus?: boolean
   autoComplete?: string
+  tone?: "neutral" | "accent"
 }
 
 const Wrapper = styled.div<{
@@ -69,6 +70,7 @@ export const FormInput = ({
   showPassword,
   autoFocus,
   autoComplete,
+  tone,
   ...rest
 }: FormInputProps) => {
   const { formState, getFieldState, register, setFocus } = useFormContext()
@@ -99,6 +101,7 @@ export const FormInput = ({
         disabled={disabled}
         showPassword={showPassword}
         autoComplete={autoComplete}
+        $tone={tone}
         {...rest}
         id={name}
         aria-invalid={hasError || undefined}

src/components/Input/index.tsx

@@ -3,17 +3,20 @@ import React from "react"
 
 export type InputVariant = "transparent" | "error"
 
+export type InputTone = "neutral" | "accent"
+
 export type InputStyleProps = {
   variant?: InputVariant
+  $tone?: InputTone
 }
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement> & InputStyleProps
 
 const errorStyle = css`
-  border-color: ${({ theme }) => theme.color.statusDanger};
+  border-color: ${({ theme }) => theme.color.statusDangerStrong};
   background-color: ${({ theme }) => theme.color.statusDangerSurface};
   &:focus {
-    border-color: ${({ theme }) => theme.color.statusDanger};
+    border-color: ${({ theme }) => theme.color.statusDangerStrong};
     background: ${({ theme }) => theme.color.statusDangerSurface};
   }
 `
@@ -42,7 +45,10 @@ export const inputStyles = css<InputStyleProps>`
   &:focus-visible {
     outline: none;
     box-shadow: none;
-    border-color: ${({ theme }) => theme.color.contentAccent};
+    border-color: ${({ theme, $tone }) =>
+      $tone === "accent"
+        ? theme.color.contentAccent
+        : theme.color.borderStrong};
     background: ${({ theme }) => theme.color.surfaceInput};
   }
 

src/components/MultiStepModal/index.tsx

@@ -91,6 +91,7 @@ const StepIndicatorContainer = styled(Box).attrs({
   backdrop-filter: blur(0.6rem);
   padding: 0.4rem;
   border-radius: 10rem;
+  border: 1px solid ${({ theme }) => theme.color.borderDefault};
   box-shadow: 0 0.1rem 0.2rem ${({ theme }) => theme.color.shadowSubtle};
   width: fit-content;
 `

src/components/ResultGrid/dimensions.ts

@@ -12,6 +12,7 @@ export const MAX_COLUMN_WIDTH_BOUNDS = {
 }
 export const CELL_FONT_SIZE_PX = 13
 export const HEADER_NAME_FONT_SIZE_PX = 14
+export const HEADER_NAME_FONT_WEIGHT = 600
 export const HEADER_TYPE_FONT_SIZE_PX = 10
 
 export const CELL_PADDING_PX = 12