chore(frontend): Standardize custom colors used throughout the app (#…

…6833)
All-Hands-AI · Feb 20, 2025 · 2f14e53 · 2f14e53
1 parent 5272306
commit 2f14e53
Show file tree

Hide file tree

Showing 30 changed files with 63 additions and 61 deletions.
diff --git a/frontend/src/components/features/controls/agent-status-bar.tsx b/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-neutral-800 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}`}
         />

diff --git a/frontend/src/components/features/conversation-panel/conversation-panel.tsx b/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-neutral-800 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" />}

diff --git a/frontend/src/components/features/file-explorer/file-explorer-header.tsx b/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-neutral-800",
+        "sticky top-0 bg-base-secondary",
         "flex items-center",
         !isOpen ? "justify-center" : "justify-between",
       )}

diff --git a/frontend/src/components/features/file-explorer/file-explorer.tsx b/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-neutral-800 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",
         )}
       >

diff --git a/frontend/src/components/features/settings/brand-button.tsx b/frontend/src/components/features/settings/brand-button.tsx
@@ -28,8 +28,8 @@ export function BrandButton({
       onClick={onClick}
       className={cn(
         "w-fit p-2 rounded disabled:opacity-30 disabled:cursor-not-allowed",
-        variant === "primary" && "bg-[#C9B974] text-[#0D0F11]",
-        variant === "secondary" && "border border-[#C9B974] text-[#C9B974]",
+        variant === "primary" && "bg-primary text-[#0D0F11]",
+        variant === "secondary" && "border border-primary text-primary",
         className,
       )}
     >

diff --git a/frontend/src/components/features/settings/key-status-icon.tsx b/frontend/src/components/features/settings/key-status-icon.tsx
@@ -8,9 +8,7 @@ interface KeyStatusIconProps {
 export function KeyStatusIcon({ isSet }: KeyStatusIconProps) {
   return (
     <span data-testid={isSet ? "set-indicator" : "unset-indicator"}>
-      <SuccessIcon
-        className={cn(isSet ? "text-[#A5E75E]" : "text-[#E76A5E]")}
-      />
+      <SuccessIcon className={cn(isSet ? "text-success" : "text-danger")} />
     </span>
   );
 }
diff --git a/frontend/src/components/features/settings/optional-tag.tsx b/frontend/src/components/features/settings/optional-tag.tsx
@@ -1,3 +1,3 @@
 export function OptionalTag() {
-  return <span className="text-xs text-[#B7BDC2]">(Optional)</span>;
+  return <span className="text-xs text-tertiary-alt">(Optional)</span>;
 }
diff --git a/frontend/src/components/features/settings/settings-dropdown-input.tsx b/frontend/src/components/features/settings/settings-dropdown-input.tsx
@@ -38,12 +38,12 @@ export function SettingsDropdownInput({
         isDisabled={isDisabled}
         className="w-full"
         classNames={{
-          popoverContent: "bg-[#454545] rounded-xl border border-[#717888]",
+          popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
         }}
         inputProps={{
           classNames: {
             inputWrapper:
-              "bg-[#454545] 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",
           },
         }}
       >

diff --git a/frontend/src/components/features/settings/settings-input.tsx b/frontend/src/components/features/settings/settings-input.tsx
@@ -44,7 +44,7 @@ export function SettingsInput({
         defaultValue={defaultValue}
         placeholder={placeholder}
         className={cn(
-          "bg-[#454545] border border-[#717888] h-10 w-full rounded p-2 placeholder:italic placeholder:text-[#B7BDC2]",
+          "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",
         )}
       />

diff --git a/frontend/src/components/features/settings/settings-switch.tsx b/frontend/src/components/features/settings/settings-switch.tsx
@@ -40,7 +40,7 @@ export function SettingsSwitch({
       <div className="flex items-center gap-1">
         <span className="text-sm">{children}</span>
         {isBeta && (
-          <span className="text-[11px] leading-4 text-[#0D0F11] font-[500] tracking-tighter bg-[#C9B974] px-1 rounded-full">
+          <span className="text-[11px] leading-4 text-[#0D0F11] font-[500] tracking-tighter bg-primary px-1 rounded-full">
             Beta
           </span>
         )}

diff --git a/frontend/src/components/features/settings/styled-switch-component.tsx b/frontend/src/components/features/settings/styled-switch-component.tsx
@@ -11,14 +11,14 @@ export function StyledSwitchComponent({
     <div
       className={cn(
         "w-12 h-6 rounded-xl flex items-center p-1.5 cursor-pointer",
-        isToggled && "justify-end bg-[#C9B974]",
-        !isToggled && "justify-start bg-[#1F2228] border border-[#B7BDC2]",
+        isToggled && "justify-end bg-primary",
+        !isToggled && "justify-start bg-[#1F2228] border border-tertiary-alt",
       )}
     >
       <div
         className={cn(
           "bg-[#1F2228] w-3 h-3 rounded-xl",
-          isToggled ? "bg-[#1F2228]" : "bg-[#B7BDC2]",
+          isToggled ? "bg-[#1F2228]" : "bg-tertiary-alt",
         )}
       />
     </div>

diff --git a/frontend/src/components/layout/beta-badge.tsx b/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-primary 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>
   );

diff --git a/frontend/src/components/layout/container.tsx b/frontend/src/components/layout/container.tsx
@@ -23,7 +23,7 @@ export function Container({
   return (
     <div
       className={clsx(
-        "bg-neutral-800 border border-neutral-600 rounded-xl flex flex-col",
+        "bg-base-secondary border border-neutral-600 rounded-xl flex flex-col",
         className,
       )}
     >

diff --git a/frontend/src/components/layout/count-badge.tsx b/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-primary bg-neutral-400 px-1 rounded-xl">
+    <span className="text-[11px] leading-5 text-base bg-neutral-400 px-1 rounded-xl">
       {count}
     </span>
   );

diff --git a/frontend/src/components/layout/nav-tab.tsx b/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-primary 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-root-secondary",
+          isActive && "bg-base-secondary",
         )
       }
     >

diff --git a/frontend/src/components/shared/action-tooltip.tsx b/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-neutral-800"
+        className="bg-neutral-700 rounded-full p-1 hover:bg-base-secondary"
         onClick={onClick}
       >
         {type === "confirm" ? <ConfirmIcon /> : <RejectIcon />}

diff --git a/frontend/src/components/shared/hero-heading.tsx b/frontend/src/components/shared/hero-heading.tsx
@@ -18,7 +18,7 @@ export function HeroHeading() {
             rel="noopener noreferrer"
             target="_blank"
             href="https://docs.all-hands.dev/modules/usage/getting-started"
-            className="text-hyperlink underline underline-offset-[3px]"
+            className="text-white underline underline-offset-[3px]"
           >
             {t(I18nKey.LANDING$START_HELP_LINK)}
           </a>

diff --git a/frontend/src/components/shared/modals/base-modal/base-modal.tsx b/frontend/src/components/shared/modals/base-modal/base-modal.tsx
@@ -43,7 +43,7 @@ export function BaseModal({
       backdrop="blur"
       hideCloseButton
       size="sm"
-      className="bg-neutral-900 rounded-lg"
+      className="bg-base rounded-lg"
     >
       <ModalContent className={contentClassName}>
         {(closeModal) => (

diff --git a/frontend/src/components/shared/modals/modal-body.tsx b/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-primary 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,
       )}
     >

diff --git a/frontend/src/components/shared/modals/security/invariant/invariant.tsx b/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-neutral-800 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-neutral-900">
+      <div className="flex flex-col min-h-0 w-full overflow-y-auto bg-base">
         {sections[activeSection as SectionType]}
       </div>
     </div>

diff --git a/frontend/src/components/shared/modals/settings/model-selector.tsx b/frontend/src/components/shared/modals/settings/model-selector.tsx
@@ -84,12 +84,12 @@ export function ModelSelector({
           defaultSelectedKey={selectedProvider ?? undefined}
           selectedKey={selectedProvider}
           classNames={{
-            popoverContent: "bg-[#454545] rounded-xl border border-[#717888]",
+            popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
           }}
           inputProps={{
             classNames: {
               inputWrapper:
-                "bg-[#454545] 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-[#454545] rounded-xl border border-[#717888]",
+            popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
           }}
           inputProps={{
             classNames: {
               inputWrapper:
-                "bg-[#454545] 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",
             },
           }}
         >

diff --git a/frontend/src/components/shared/modals/settings/settings-modal.tsx b/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-primary 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>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -4,27 +4,28 @@
   --bg-input: #393939;
   --bg-workspace: #1f2228;
   --border: #3c3c4a;
-  --text-editor-base: #9099AC;
-  --text-editor-active:#C4CBDA;
-  --bg-editor-sidebar: #24272E;
-  --bg-editor-active: #31343D;
-  --border-editor-sidebar: #3C3C4A;
-  background-color: var(--neutral-900) !important;
+  --text-editor-base: #9099ac;
+  --text-editor-active: #c4cbda;
+  --bg-editor-sidebar: #24272e;
+  --bg-editor-active: #31343d;
+  --border-editor-sidebar: #3c3c4a;
+  background-color: var(--base) !important;
   --bg-neutral-muted: #afb8c133;
 }
 
 body {
   margin: 0;
-  font-family: -apple-system, "SF Pro", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family:
+    -apple-system, "SF Pro", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
 .markdown-body code {
@@ -52,6 +53,7 @@ code {
   text-align: left;
 }
 
-.markdown-body th, .markdown-body td {
+.markdown-body th,
+.markdown-body td {
   padding: 0.1rem 1rem;
 }
diff --git a/frontend/src/routes/_oh._index/route.tsx b/frontend/src/routes/_oh._index/route.tsx
@@ -29,7 +29,7 @@ function Home() {
   const latestConversation = localStorage.getItem("latest_conversation_id");
 
   return (
-    <div className="bg-root-secondary 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">

diff --git a/frontend/src/routes/_oh.app._index/route.tsx b/frontend/src/routes/_oh.app._index/route.tsx
@@ -75,7 +75,7 @@ function FileViewer() {
   };
 
   return (
-    <div className="flex h-full bg-neutral-900 relative">
+    <div className="flex h-full bg-base relative">
       <FileExplorer isOpen={fileExplorerIsOpen} onToggle={toggleFileExplorer} />
       <div className="w-full h-full flex flex-col">
         {selectedPath && (

diff --git a/frontend/src/routes/_oh.app/route.tsx b/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-neutral-800"
+        firstClassName="rounded-xl overflow-hidden border border-neutral-600 bg-base-secondary"
         secondClassName="flex flex-col overflow-hidden"
         firstChild={<ChatInterface />}
         secondChild={

diff --git a/frontend/src/routes/_oh/route.tsx b/frontend/src/routes/_oh/route.tsx
@@ -91,7 +91,7 @@ export default function MainApp() {
   return (
     <div
       data-testid="root-layout"
-      className="bg-root-primary 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 />
 

diff --git a/frontend/src/routes/account-settings.tsx b/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-[#454545]">
+      <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-primary 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">

diff --git a/frontend/src/routes/settings.tsx b/frontend/src/routes/settings.tsx
@@ -11,17 +11,17 @@ function SettingsScreen() {
   return (
     <main
       data-testid="settings-screen"
-      className="bg-[#24272E] border border-[#454545] 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-[#454545] 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-[#454545]"
+          className="flex items-end gap-12 px-11 border-b border-tertiary"
         >
           {[
             { to: "/settings", text: "Account" },
@@ -34,7 +34,7 @@ function SettingsScreen() {
               className={({ isActive }) =>
                 cn(
                   "border-b-2 border-transparent py-2.5",
-                  isActive && "border-[#C9B974]",
+                  isActive && "border-primary",
                 )
               }
             >