Change titles

frontend/src/components/features/controls/agent-status-bar.tsx

@@ -55,7 +55,7 @@ export function AgentStatusBar() {
 
   return (
     <div className="flex flex-col items-center">
-      <div className="flex items-center bg-sub px-2 py-1 text-gray-400 rounded-[100px] text-sm gap-[6px]">
+      <div className="flex items-center bg-base-secondary px-2 py-1 text-gray-400 rounded-[100px] text-sm gap-[6px]">
         <div
           className={`w-2 h-2 rounded-full animate-pulse ${AGENT_STATUS_MAP[curAgentState].indicator}`}
         />

frontend/src/components/features/conversation-panel/conversation-panel.tsx

@@ -73,7 +73,7 @@ export function ConversationPanel({ onClose }: ConversationPanelProps) {
     <div
       ref={ref}
       data-testid="conversation-panel"
-      className="w-[350px] h-full border border-neutral-700 bg-sub rounded-xl overflow-y-auto"
+      className="w-[350px] h-full border border-neutral-700 bg-base-secondary rounded-xl overflow-y-auto"
     >
       <div className="pt-4 px-4 flex items-center justify-between">
         {isFetching && <LoadingSpinner size="small" />}

frontend/src/components/features/file-explorer/file-explorer-header.tsx

@@ -19,7 +19,7 @@ export function FileExplorerHeader({
   return (
     <div
       className={cn(
-        "sticky top-0 bg-sub",
+        "sticky top-0 bg-base-secondary",
         "flex items-center",
         !isOpen ? "justify-center" : "justify-between",
       )}

frontend/src/components/features/file-explorer/file-explorer.tsx

@@ -54,7 +54,7 @@ export function FileExplorer({ isOpen, onToggle }: FileExplorerProps) {
     <div data-testid="file-explorer" className="relative h-full">
       <div
         className={cn(
-          "bg-sub h-full border-r-1 border-r-neutral-600 flex flex-col",
+          "bg-base-secondary h-full border-r-1 border-r-neutral-600 flex flex-col",
           !isOpen ? "w-12" : "w-60",
         )}
       >

frontend/src/components/features/settings/optional-tag.tsx

@@ -1,3 +1,3 @@
 export function OptionalTag() {
-  return <span className="text-xs text-subtle-alt">(Optional)</span>;
+  return <span className="text-xs text-tertiary-alt">(Optional)</span>;
 }

frontend/src/components/features/settings/settings-dropdown-input.tsx

@@ -38,12 +38,12 @@ export function SettingsDropdownInput({
         isDisabled={isDisabled}
         className="w-full"
         classNames={{
-          popoverContent: "bg-subtle rounded-xl border border-[#717888]",
+          popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
         }}
         inputProps={{
           classNames: {
             inputWrapper:
-              "bg-subtle border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
+              "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
           },
         }}
       >

frontend/src/components/features/settings/settings-input.tsx

@@ -44,7 +44,7 @@ export function SettingsInput({
         defaultValue={defaultValue}
         placeholder={placeholder}
         className={cn(
-          "bg-subtle border border-[#717888] h-10 w-full rounded p-2 placeholder:italic placeholder:text-subtle-alt",
+          "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic placeholder:text-tertiary-alt",
           "disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
         )}
       />

frontend/src/components/features/settings/styled-switch-component.tsx

@@ -12,13 +12,13 @@ export function StyledSwitchComponent({
       className={cn(
         "w-12 h-6 rounded-xl flex items-center p-1.5 cursor-pointer",
         isToggled && "justify-end bg-primary",
-        !isToggled && "justify-start bg-[#1F2228] border border-subtle-alt",
+        !isToggled && "justify-start bg-[#1F2228] border border-tertiary-alt",
       )}
     >
       <div
         className={cn(
           "bg-[#1F2228] w-3 h-3 rounded-xl",
-          isToggled ? "bg-[#1F2228]" : "bg-subtle-alt",
+          isToggled ? "bg-[#1F2228]" : "bg-tertiary-alt",
         )}
       />
     </div>

frontend/src/components/layout/beta-badge.tsx

@@ -4,7 +4,7 @@ import { I18nKey } from "#/i18n/declaration";
 export function BetaBadge() {
   const { t } = useTranslation();
   return (
-    <span className="text-[11px] leading-5 text-root bg-neutral-400 px-1 rounded-xl">
+    <span className="text-[11px] leading-5 text-base bg-neutral-400 px-1 rounded-xl">
       {t(I18nKey.BADGE$BETA)}
     </span>
   );

frontend/src/components/layout/container.tsx

@@ -23,7 +23,7 @@ export function Container({
   return (
     <div
       className={clsx(
-        "bg-sub border border-neutral-600 rounded-xl flex flex-col",
+        "bg-base-secondary border border-neutral-600 rounded-xl flex flex-col",
         className,
       )}
     >

frontend/src/components/layout/count-badge.tsx

@@ -1,6 +1,6 @@
 export function CountBadge({ count }: { count: number }) {
   return (
-    <span className="text-[11px] leading-5 text-root bg-neutral-400 px-1 rounded-xl">
+    <span className="text-[11px] leading-5 text-base bg-neutral-400 px-1 rounded-xl">
       {count}
     </span>
   );

frontend/src/components/layout/nav-tab.tsx

@@ -17,10 +17,10 @@ export function NavTab({ to, label, icon, isBeta }: NavTabProps) {
       to={to}
       className={({ isActive }) =>
         cn(
-          "px-2 border-b border-r border-neutral-600 bg-root flex-1",
+          "px-2 border-b border-r border-neutral-600 bg-base flex-1",
           "first-of-type:rounded-tl-xl last-of-type:rounded-tr-xl last-of-type:border-r-0",
           "flex items-center gap-2",
-          isActive && "bg-sub",
+          isActive && "bg-base-secondary",
         )
       }
     >

frontend/src/components/shared/action-tooltip.tsx

@@ -27,7 +27,7 @@ export function ActionTooltip({ type, onClick }: ActionTooltipProps) {
             ? t(I18nKey.ACTION$CONFIRM)
             : t(I18nKey.ACTION$REJECT)
         }
-        className="bg-neutral-700 rounded-full p-1 hover:bg-sub"
+        className="bg-neutral-700 rounded-full p-1 hover:bg-base-secondary"
         onClick={onClick}
       >
         {type === "confirm" ? <ConfirmIcon /> : <RejectIcon />}

frontend/src/components/shared/modals/base-modal/base-modal.tsx

@@ -43,7 +43,7 @@ export function BaseModal({
       backdrop="blur"
       hideCloseButton
       size="sm"
-      className="bg-root rounded-lg"
+      className="bg-base rounded-lg"
     >
       <ModalContent className={contentClassName}>
         {(closeModal) => (

frontend/src/components/shared/modals/modal-body.tsx

@@ -12,7 +12,7 @@ export function ModalBody({ testID, children, className }: ModalBodyProps) {
     <div
       data-testid={testID}
       className={cn(
-        "bg-root flex flex-col gap-6 items-center w-[384px] p-6 rounded-xl",
+        "bg-base flex flex-col gap-6 items-center w-[384px] p-6 rounded-xl",
         className,
       )}
     >

frontend/src/components/shared/modals/security/invariant/invariant.tsx

@@ -247,7 +247,7 @@ function SecurityInvariant() {
 
   return (
     <div className="flex flex-1 w-full h-full">
-      <div className="w-60 bg-sub border-r border-r-neutral-600 p-4 flex-shrink-0">
+      <div className="w-60 bg-base-secondary border-r border-r-neutral-600 p-4 flex-shrink-0">
         <div className="text-center mb-2">
           <InvariantLogoIcon className="mx-auto mb-1" />
           <b>{t(I18nKey.INVARIANT$INVARIANT_ANALYZER_LABEL)}</b>
@@ -285,7 +285,7 @@ function SecurityInvariant() {
           </div>
         </ul>
       </div>
-      <div className="flex flex-col min-h-0 w-full overflow-y-auto bg-root">
+      <div className="flex flex-col min-h-0 w-full overflow-y-auto bg-base">
         {sections[activeSection as SectionType]}
       </div>
     </div>

frontend/src/components/shared/modals/settings/model-selector.tsx

@@ -84,12 +84,12 @@ export function ModelSelector({
           defaultSelectedKey={selectedProvider ?? undefined}
           selectedKey={selectedProvider}
           classNames={{
-            popoverContent: "bg-subtle rounded-xl border border-[#717888]",
+            popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
           }}
           inputProps={{
             classNames: {
               inputWrapper:
-                "bg-subtle border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
+                "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
             },
           }}
         >
@@ -135,12 +135,12 @@ export function ModelSelector({
           selectedKey={selectedModel}
           defaultSelectedKey={selectedModel ?? undefined}
           classNames={{
-            popoverContent: "bg-subtle rounded-xl border border-[#717888]",
+            popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
           }}
           inputProps={{
             classNames: {
               inputWrapper:
-                "bg-subtle border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
+                "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
             },
           }}
         >

frontend/src/components/shared/modals/settings/settings-modal.tsx

@@ -21,7 +21,7 @@ export function SettingsModal({ onClose, settings }: SettingsModalProps) {
     <ModalBackdrop>
       <div
         data-testid="ai-config-modal"
-        className="bg-root min-w-[384px] p-6 rounded-xl flex flex-col gap-2"
+        className="bg-base min-w-[384px] p-6 rounded-xl flex flex-col gap-2"
       >
         {aiConfigOptions.error && (
           <p className="text-danger text-xs">{aiConfigOptions.error.message}</p>

frontend/src/index.css

@@ -9,7 +9,7 @@
   --bg-editor-sidebar: #24272e;
   --bg-editor-active: #31343d;
   --border-editor-sidebar: #3c3c4a;
-  background-color: var(--root) !important;
+  background-color: var(--base) !important;
   --bg-neutral-muted: #afb8c133;
 }
 

frontend/src/routes/_oh._index/route.tsx

@@ -29,7 +29,7 @@ function Home() {
   const latestConversation = localStorage.getItem("latest_conversation_id");
 
   return (
-    <div className="bg-sub h-full rounded-xl flex flex-col items-center justify-center relative overflow-y-auto px-2">
+    <div className="bg-base-secondary h-full rounded-xl flex flex-col items-center justify-center relative overflow-y-auto px-2">
       <HeroHeading />
       <div className="flex flex-col gap-8 w-full md:w-[600px] items-center">
         <div className="flex flex-col gap-2 w-full">

frontend/src/routes/_oh.app._index/route.tsx

@@ -75,7 +75,7 @@ function FileViewer() {
   };
 
   return (
-    <div className="flex h-full bg-root relative">
+    <div className="flex h-full bg-base relative">
       <FileExplorer isOpen={fileExplorerIsOpen} onToggle={toggleFileExplorer} />
       <div className="w-full h-full flex flex-col">
         {selectedPath && (

frontend/src/routes/_oh.app/route.tsx

@@ -127,7 +127,7 @@ function AppContent() {
         orientation={Orientation.HORIZONTAL}
         className="grow h-full min-h-0 min-w-0"
         initialSize={500}
-        firstClassName="rounded-xl overflow-hidden border border-neutral-600 bg-sub"
+        firstClassName="rounded-xl overflow-hidden border border-neutral-600 bg-base-secondary"
         secondClassName="flex flex-col overflow-hidden"
         firstChild={<ChatInterface />}
         secondChild={

frontend/src/routes/_oh/route.tsx

@@ -91,7 +91,7 @@ export default function MainApp() {
   return (
     <div
       data-testid="root-layout"
-      className="bg-root p-3 h-screen md:min-w-[1024px] overflow-x-hidden flex flex-col md:flex-row gap-3"
+      className="bg-base p-3 h-screen md:min-w-[1024px] overflow-x-hidden flex flex-col md:flex-row gap-3"
     >
       <Sidebar />
 

frontend/src/routes/account-settings.tsx

@@ -388,7 +388,7 @@ function AccountSettings() {
         </div>
       </form>
 
-      <footer className="flex gap-6 p-6 justify-end border-t border-t-subtle">
+      <footer className="flex gap-6 p-6 justify-end border-t border-t-tertiary">
         <BrandButton
           type="button"
           variant="secondary"
@@ -411,7 +411,7 @@ function AccountSettings() {
         <ModalBackdrop>
           <div
             data-testid="reset-modal"
-            className="bg-root p-4 rounded-xl flex flex-col gap-4"
+            className="bg-base p-4 rounded-xl flex flex-col gap-4"
           >
             <p>Are you sure you want to reset all settings?</p>
             <div className="w-full flex gap-2">

frontend/src/routes/settings.tsx

@@ -11,17 +11,17 @@ function SettingsScreen() {
   return (
     <main
       data-testid="settings-screen"
-      className="bg-sub border border-subtle h-full rounded-xl flex flex-col"
+      className="bg-base-secondary border border-tertiary h-full rounded-xl flex flex-col"
     >
-      <header className="px-3 py-1.5 border-b border-b-subtle flex items-center gap-2">
+      <header className="px-3 py-1.5 border-b border-b-tertiary flex items-center gap-2">
         <SettingsIcon width={16} height={16} />
         <h1 className="text-sm leading-6">Settings</h1>
       </header>
 
       {isSaas && BILLING_SETTINGS() && (
         <nav
           data-testid="settings-navbar"
-          className="flex items-end gap-12 px-11 border-b border-subtle"
+          className="flex items-end gap-12 px-11 border-b border-tertiary"
         >
           {[
             { to: "/settings", text: "Account" },

frontend/tailwind.config.js

@@ -10,12 +10,12 @@ export default {
     extend: {
       colors: {
         primary: "#C9B974",
-        root: "#171717",
-        sub: "#262626",
+        base: "#171717",
+        "base-secondary": "#262626",
         danger: "#E76A5E",
         success: "#A5E75E",
-        subtle: "#454545",
-        "subtle-alt": "#B7BDC2",
+        tertiary: "#454545",
+        "tertiary-light": "#B7BDC2",
       },
     },
   },