WIP: lift light surfaces and neutralize chrome hover/focus

src/components/AIStatusIndicator/AssistantModesCompact.tsx

@@ -121,7 +121,7 @@ const ModeHeaderTop = styled.div<{
       }
 
       &:focus-visible {
-        outline: 1px solid ${color("contentAccent")};
+        outline: 1px solid ${color("borderStrong")};
         outline-offset: 2px;
       }
 

src/components/Button/index.tsx

@@ -185,7 +185,7 @@ export const ButtonBase = styled.button.attrs<{
     filter 120ms ease;
 
   &&:focus-visible {
-    outline: 1px solid ${({ theme }) => theme.color.contentAccent};
+    outline: 1px solid ${({ theme }) => theme.color.borderStrong};
     outline-offset: 2px;
   }
 

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,8 +3,11 @@ 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
@@ -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/ResultGrid/styles.ts

@@ -80,7 +80,7 @@ export const HeaderNameRow = styled.div<{ $align: string }>`
 `
 
 export const HeaderName = styled.span`
-  color: ${color("contentObject")};
+  color: ${color("contentPrimary")};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -138,7 +138,7 @@ export const ColResizer = styled.div`
   }
 
   &:hover::after {
-    background: ${color("contentAccent")};
+    background: ${color("borderStrong")};
   }
 `
 
@@ -157,7 +157,7 @@ export const ResizeGhost = styled.div`
   top: 0;
   bottom: 0;
   width: 2px;
-  background: ${color("contentAccent")};
+  background: ${color("borderStrong")};
   pointer-events: none;
   /* Above the resizer overlay (z-index 6) so the drag line isn't clipped. */
   z-index: 7;
@@ -180,16 +180,16 @@ export const Row = styled.div<{ $active: boolean }>`
       &:hover {
         background:
           linear-gradient(
-            ${theme.color.interactionAccentHover},
-            ${theme.color.interactionAccentHover}
+            ${theme.color.interactionHover},
+            ${theme.color.interactionHover}
           ),
           ${theme.color.surfaceInset};
 
         [data-frozen="true"] {
           background:
             linear-gradient(
-              ${theme.color.interactionAccentHover},
-              ${theme.color.interactionAccentHover}
+              ${theme.color.interactionHover},
+              ${theme.color.interactionHover}
             ),
             ${theme.color.surfaceInset};
         }
@@ -350,7 +350,7 @@ export const FreezeHandle = styled.div<{
     !$dragging &&
     css`
       &:hover::after {
-        background: ${color("contentAccent")};
+        background: ${color("borderStrong")};
       }
     `}
 `

src/components/SegmentedControl/index.tsx

@@ -56,7 +56,7 @@ const SegmentedControlRoot = styled.div`
   && > button[aria-pressed="true"]:focus-visible {
     outline: none;
     outline-offset: 0;
-    box-shadow: inset 0 0 0 2px ${({ theme }) => theme.color.contentAccent};
+    box-shadow: inset 0 0 0 2px ${({ theme }) => theme.color.borderStrong};
   }
 `
 
@@ -82,7 +82,10 @@ const GlassSelection = styled.div`
   border-bottom-width: 2px;
   border-bottom-color: ${({ theme }) => theme.color.glassEdge};
   border-radius: 0.4rem;
-  box-shadow: 0 3px 9px ${({ theme }) => theme.color.shadowSoft};
+  box-shadow: ${({ theme }) =>
+    theme.mode === "light"
+      ? `0 1px 1px ${theme.color.shadowSubtle}, 0 1px 3px ${theme.color.shadowSoft}`
+      : `0 3px 9px ${theme.color.shadowSoft}`};
   backdrop-filter: blur(6px) saturate(145%);
   -webkit-backdrop-filter: blur(5px) saturate(150%);
   transition: opacity 100ms ease;

src/components/SelectMenu/index.tsx

@@ -41,7 +41,7 @@ const TriggerRoot = styled(Button).attrs({ variant: "secondary" })<{
   text-align: left;
 
   &[aria-expanded="true"] {
-    border-color: ${({ theme }) => theme.color.borderAccent};
+    border-color: ${({ theme }) => theme.color.borderStrong};
   }
 
   &[aria-expanded="true"] ${TriggerCaret} {

src/components/Sidebar/index.tsx

@@ -13,7 +13,7 @@ export const Sidebar = styled(Box).attrs({ flexDirection: "column" })<{
   width: ${SIDEBAR_WIDTH};
   height: 100%;
   background: ${({ theme }) => theme.color.surfaceBase};
-  border-right: 1px solid ${({ theme }) => theme.color.borderSubtle};
+  border-right: 1px solid ${({ theme }) => theme.color.borderDefault};
   gap: 0.8rem;
   flex-shrink: 0;
   justify-content: ${({ align }) =>
@@ -37,6 +37,6 @@ export const Sidebar = styled(Box).attrs({ flexDirection: "column" })<{
 
   &:last-of-type {
     border-right: 0;
-    border-left: 1px solid ${({ theme }) => theme.color.borderSubtle};
+    border-left: 1px solid ${({ theme }) => theme.color.borderDefault};
   }
 `

src/components/TableSelector/index.tsx

@@ -54,8 +54,8 @@ const TriggerContainer = styled.div`
 
   &:hover,
   &:focus-within {
-    border-color: ${({ theme }) => theme.color.borderAccent};
-    background: ${({ theme }) => theme.color.interactionAccentHover};
+    border-color: ${({ theme }) => theme.color.borderDefault};
+    background: ${({ theme }) => theme.color.interactionHover};
   }
 `
 
@@ -110,18 +110,18 @@ const Item = styled.div<{ $active: boolean; $disabled?: boolean }>`
   color: ${({ theme, $disabled }) =>
     $disabled ? theme.color.contentDisabled : theme.color.contentPrimary};
   background: ${({ $active, theme }) =>
-    $active ? theme.color.interactionAccentActive : "transparent"};
+    $active ? theme.color.interactionNeutral : "transparent"};
   border: 1px solid
     ${({ $active, theme }) =>
-      $active ? theme.color.borderAccent : "transparent"};
+      $active ? theme.color.borderDefault : "transparent"};
 
   &:hover {
     background: ${({ $disabled, $active, theme }) =>
       $disabled
         ? "transparent"
         : $active
-          ? theme.color.interactionAccentActive
-          : theme.color.interactionAccentHover};
+          ? theme.color.interactionNeutral
+          : theme.color.interactionHover};
   }
 
   .highlight {

src/components/Tooltip/index.tsx

@@ -110,7 +110,7 @@ const ArrowWithBorder = React.forwardRef<SVGSVGElement>((props, ref) => {
       <polyline
         points="0,0 7,7 14,0"
         fill="none"
-        stroke={theme.color.contentDisabled}
+        stroke={theme.color.borderDefault}
         strokeWidth="1"
       />
     </StyledArrowSvg>
@@ -130,7 +130,7 @@ const TooltipContent = styled(RadixTooltip.Content)<{
   max-width: ${({ $maxWidth }) => $maxWidth ?? "460px"};
   padding: 1rem;
   background: ${color("surfaceInset")};
-  border: 1px solid ${color("contentDisabled")};
+  border: 1px solid ${color("borderDefault")};
   border-radius: 6px;
   z-index: ${TOOLTIP_Z_INDEX};
   animation-duration: 200ms;

src/components/TopBar/InstanceSettingsPopper.tsx

@@ -154,7 +154,7 @@ const ColorSlider = styled.input.attrs({ type: "range", min: 0, max: 255 })`
   }
 
   &:focus-visible {
-    outline: 1px solid ${({ theme }) => theme.color.contentAccent};
+    outline: 1px solid ${({ theme }) => theme.color.borderStrong};
     outline-offset: 2px;
   }
 

src/components/TopBar/index.tsx

@@ -15,7 +15,7 @@ const Root = styled(Box).attrs({
   min-height: ${TOP_BAR_HEIGHT};
   gap: 0;
   background: ${({ theme }) => theme.color.surfaceBase};
-  border-bottom: 1px solid ${({ theme }) => theme.color.borderSubtle};
+  border-bottom: 1px solid ${({ theme }) => theme.color.borderDefault};
   box-shadow: 0 6px 18px ${({ theme }) => theme.color.shadowSubtle};
   z-index: 30;
 `

src/modules/OAuth2/views/login.tsx

@@ -443,13 +443,18 @@ export const Login = ({
             >
               <FormBody>
                 <Form.Item name="username" label="Username">
-                  <Form.Input name="username" placeholder="Enter username" />
+                  <Form.Input
+                    name="username"
+                    placeholder="Enter username"
+                    tone="accent"
+                  />
                 </Form.Item>
                 <Form.Item name="password" label="Password">
                   <Form.Input
                     name="password"
                     type="password"
                     placeholder="Enter password"
+                    tone="accent"
                   />
                 </Form.Item>
                 {errorMessage && (

src/scenes/Console/index.tsx

@@ -78,13 +78,14 @@ const SidebarSpacer = styled.div`
 `
 
 const SidePanelRight = styled.div`
-  background: ${({ theme }) => theme.color.surfaceBase};
+  background: ${({ theme }) => theme.color.surfaceRaised};
   height: 100%;
   border-left: 1px solid ${({ theme }) => theme.color.borderSubtle};
 `
 
 const Wrapper = styled.div`
   height: 100%;
+  background: ${({ theme }) => theme.color.surfaceRaised};
   border-right: 1px solid ${({ theme }) => theme.color.borderSubtle};
 `
 

src/scenes/Editor/AIChatWindow/AIChatErrorBoundary.tsx

@@ -23,7 +23,7 @@ const Wrapper = styled.div`
   width: 100%;
   height: 100%;
   padding: 2rem;
-  background: ${({ theme }) => theme.color.surfaceBase};
+  background: ${({ theme }) => theme.color.surfaceRaised};
   border-left: 0.2rem ${color("surfaceInset")} solid;
 `
 

src/scenes/Editor/AIChatWindow/AIChatWindowLazy.tsx

@@ -11,7 +11,7 @@ const AIChatWindow = lazy(() => import("./index"))
 const LoaderContainer = styled.div`
   display: flex;
   align-items: center;
-  background: ${({ theme }) => theme.color.surfaceBase};
+  background: ${({ theme }) => theme.color.surfaceRaised};
   justify-content: center;
   height: 100%;
   width: 100%;

src/scenes/Editor/AIChatWindow/ChatHistoryItem.tsx

@@ -25,8 +25,12 @@ const Container = styled.div<{ $disabled?: boolean }>`
   text-align: left;
 
   &:hover {
-    background: ${({ $disabled }) =>
-      $disabled ? "transparent" : color("surfaceRaised")};
+    background: ${({ $disabled, theme }) =>
+      $disabled
+        ? "transparent"
+        : theme.mode === "light"
+          ? theme.color.surfaceBase
+          : theme.color.surfaceInput};
 
     .chat-title {
       color: ${({ $disabled }) =>
@@ -35,7 +39,7 @@ const Container = styled.div<{ $disabled?: boolean }>`
   }
 
   &:focus-visible {
-    outline: 1px solid ${color("contentAccent")};
+    outline: 1px solid ${color("borderStrong")};
     outline-offset: 2px;
   }
 `
@@ -69,7 +73,7 @@ const Title = styled.div.attrs({ className: "chat-title" })`
 const TitleInput = styled.input`
   color: ${color("contentPrimary")};
   background: transparent;
-  border: 1px solid ${color("actionPrimary")};
+  border: 1px solid ${color("borderStrong")};
   border-radius: 6px;
   outline: none;
   padding: 0.2rem 0.4rem;

src/scenes/Editor/AIChatWindow/ChatHistoryView.tsx

@@ -29,7 +29,7 @@ const Container = styled.div`
   height: 100%;
   width: 100%;
   padding: 2rem 1rem 4rem 1rem;
-  background: ${({ theme }) => theme.color.surfaceBase};
+  background: ${({ theme }) => theme.color.surfaceRaised};
   overflow: hidden;
 `
 

src/scenes/Editor/AIChatWindow/ChatInput.tsx

@@ -43,7 +43,9 @@ const InputWrapper = styled(Box)`
   overflow: hidden;
 `
 
-const StyledTextArea = styled(TextArea)<{ $hasContext: boolean }>`
+const StyledTextArea = styled(TextArea).attrs({ $tone: "accent" })<{
+  $hasContext: boolean
+}>`
   flex: 1;
   min-height: 8rem;
   max-height: 30rem;

src/scenes/Editor/AIChatWindow/ChatMessages.tsx

@@ -96,7 +96,10 @@ const UserRequestBox = styled(Box)`
   padding: 0.8rem;
   width: 100%;
   align-self: flex-end;
-  background: ${color("authBackdrop")};
+  background: ${({ theme }) =>
+    theme.mode === "light"
+      ? theme.color.surfaceValue
+      : theme.color.authBackdrop};
   border: 1px solid ${color("borderDefault")};
   border-radius: 0.6rem;
   flex-shrink: 0;

src/scenes/Editor/AIChatWindow/index.tsx

@@ -107,7 +107,7 @@ const ChatWindowContent = styled.div`
   height: 100%;
   width: 100%;
   overflow: hidden;
-  background: ${({ theme }) => theme.color.surfaceBase};
+  background: ${({ theme }) => theme.color.surfaceRaised};
 `
 
 const InitialQueryContainer = styled.div`
@@ -182,7 +182,7 @@ const ChatPanel = styled(Box)`
   height: 100%;
   width: 100%;
   gap: 0;
-  background: ${({ theme }) => theme.color.surfaceBase};
+  background: ${({ theme }) => theme.color.surfaceRaised};
 `
 
 const AIChatWindow: React.FC = () => {