Skip to content

🤖 Centralize Tailwind color usage with CSS variables #391

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 23, 2025
Merged

🤖 Centralize Tailwind color usage with CSS variables #391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a7a84b
🤖 Centralize Tailwind color usage with CSS variables
kylecarbs Oct 23, 2025
87f0ab1
fix: Correct directional border color syntax
kylecarbs Oct 23, 2025
7fded98
fix: Use bg-muted-dark instead of bg-text-muted-dark
kylecarbs Oct 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions src/components/AIView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,12 +245,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
return (
<div
className={cn(
"flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
"flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
className
)}
style={{ containerType: "inline-size" }}
>
<div className="flex-1 flex flex-col items-center justify-center h-full text-[#6b6b6b] text-center">
<div className="flex-1 flex flex-col items-center justify-center h-full text-placeholder text-center">
<h3 className="m-0 mb-2.5 text-base font-medium">Loading workspace...</h3>
</div>
</div>
Expand Down Expand Up @@ -286,12 +286,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
return (
<div
className={cn(
"flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
"flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
className
)}
style={{ containerType: "inline-size" }}
>
<div className="flex-1 flex flex-col items-center justify-center h-full text-[#6b6b6b] text-center">
<div className="flex-1 flex flex-col items-center justify-center h-full text-placeholder text-center">
<h3 className="m-0 mb-2.5 text-base font-medium">Loading workspace...</h3>
</div>
</div>
Expand All @@ -302,12 +302,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
return (
<div
className={cn(
"flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
"flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
className
)}
style={{ containerType: "inline-size" }}
>
<div className="flex-1 flex flex-col items-center justify-center h-full text-[#6b6b6b] text-center">
<div className="flex-1 flex flex-col items-center justify-center h-full text-placeholder text-center">
<h3 className="m-0 mb-2.5 text-base font-medium">No Workspace Selected</h3>
<p className="m-0 text-[13px]">
Select a workspace from the sidebar to view and interact with Claude
Expand All @@ -320,7 +320,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
return (
<div
className={cn(
"flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
"flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
className
)}
style={{ containerType: "inline-size" }}
Expand Down Expand Up @@ -378,7 +378,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
className="h-full overflow-y-auto p-[15px] whitespace-pre-wrap break-words leading-[1.5]"
>
{mergedMessages.length === 0 ? (
<div className="flex-1 flex flex-col items-center justify-center h-full text-[#6b6b6b] text-center [&_h3]:m-0 [&_h3]:mb-2.5 [&_h3]:text-base [&_h3]:font-medium [&_p]:m-0 [&_p]:text-[13px]">
<div className="flex-1 flex flex-col items-center justify-center h-full text-placeholder text-center [&_h3]:m-0 [&_h3]:mb-2.5 [&_h3]:text-base [&_h3]:font-medium [&_p]:m-0 [&_p]:text-[13px]">
<h3>No Messages Yet</h3>
<p>Send a message below to begin</p>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/components/ChatInputToast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import React, { useEffect, useCallback } from "react";
import { cn } from "@/lib/utils";

const toastTypeStyles: Record<"success" | "error", string> = {
success: "bg-[#0e639c20] border border-[#0e639c] text-[#3794ff]",
error: "bg-[#f1483620] border border-[#f14836] text-[#f14836]",
success: "bg-toast-success-bg border border-accent-dark text-toast-success-text",
error: "bg-toast-error-bg border border-toast-error-border text-toast-error-text",
};

export interface Toast {
Expand All @@ -22,7 +22,7 @@ interface ChatInputToastProps {
}

export const SolutionLabel: React.FC<{ children: ReactNode }> = ({ children }) => (
<div className="text-[#808080] text-[10px] mb-1 uppercase">{children}</div>
<div className="text-muted-light text-[10px] mb-1 uppercase">{children}</div>
);

export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss }) => {
Expand Down Expand Up @@ -65,15 +65,15 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
<div
role="alert"
aria-live="assertive"
className="bg-[#2d1f1f] border border-[#5a2c2c] rounded px-3 py-2.5 text-xs text-[#f48771] animate-[toastSlideIn_0.2s_ease-out] shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
className="bg-toast-fatal-bg border border-toast-fatal-border rounded px-3 py-2.5 text-xs text-danger-soft animate-[toastSlideIn_0.2s_ease-out] shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
>
<div className="flex items-start gap-1.5">
<span className="text-sm leading-none">âš </span>
<div className="flex-1">
{toast.title && <div className="font-semibold mb-1.5">{toast.title}</div>}
<div className="text-text-light leading-[1.4] mt-1.5">{toast.message}</div>
<div className="text-light leading-[1.4] mt-1.5">{toast.message}</div>
{toast.solution && (
<div className="bg-bg-dark rounded px-2 py-1.5 mt-2 font-monospace text-[11px] text-[#9cdcfe]">
<div className="bg-dark rounded px-2 py-1.5 mt-2 font-monospace text-[11px] text-code-type">
{toast.solution}
</div>
)}
Expand Down
6 changes: 3 additions & 3 deletions src/components/CommandPalette.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ const PaletteDemo: React.FC<{ autoOpen?: boolean }> = ({ autoOpen = true }) => {
<>
<button
onClick={() => open()}
className="py-2 px-4 bg-[#0e639c] text-white border-none rounded cursor-pointer font-primary text-[13px] self-start hover:bg-[#1177bb] active:bg-[#0d5689]"
className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] self-start hover:bg-accent-hover active:bg-accent-dark"
>
Open Command Palette (⌘⇧P)
</button>
Expand Down Expand Up @@ -174,8 +174,8 @@ type Story = StoryObj<typeof meta>;

export const Default: Story = {
render: () => (
<div className="min-h-[600px] bg-[#1e1e1e] p-5 flex flex-col gap-5">
<div className="p-4 bg-[#252526] border border-[#3e3e42] rounded text-[#cccccc] font-primary text-[13px] leading-[1.6] [&_kbd]:py-0.5 [&_kbd]:px-1.5 [&_kbd]:bg-[#1e1e1e] [&_kbd]:border [&_kbd]:border-[#3e3e42] [&_kbd]:rounded-[3px] [&_kbd]:font-monospace [&_kbd]:text-[11px]">
<div className="min-h-[600px] bg-dark p-5 flex flex-col gap-5">
<div className="p-4 bg-separator border border-border-light rounded text-bright font-primary text-[13px] leading-[1.6] [&_kbd]:py-0.5 [&_kbd]:px-1.5 [&_kbd]:bg-dark [&_kbd]:border [&_kbd]:border-border-light [&_kbd]:rounded-[3px] [&_kbd]:font-monospace [&_kbd]:text-[11px]">
<strong>Command Palette</strong>
<br />
<br />
Expand Down
14 changes: 7 additions & 7 deletions src/components/CommandPalette.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,12 +364,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
}}
>
<Command
className="w-[min(720px,92vw)] bg-[#1f1f1f] border border-[#333] rounded-lg shadow-[0_10px_40px_rgba(0,0,0,0.4)] text-[#e5e5e5] font-primary overflow-hidden"
className="w-[min(720px,92vw)] bg-separator border border-border rounded-lg shadow-[0_10px_40px_rgba(0,0,0,0.4)] text-lighter font-primary overflow-hidden"
onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
shouldFilter={shouldUseCmdkFilter}
>
<Command.Input
className="w-full py-3 px-3.5 bg-[#161616] text-[#e5e5e5] border-none outline-none text-sm border-b border-[#2a2a2a]"
className="w-full py-3 px-3.5 bg-darker text-lighter border-none outline-none text-sm border-b border-hover"
value={query}
onValueChange={handleQueryChange}
placeholder={
Expand Down Expand Up @@ -405,12 +405,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
<Command.Group
key={group.name}
heading={group.name}
className="[&[cmdk-group]]:py-2 [&[cmdk-group]]:px-1.5 [&[cmdk-group-heading]]:py-1 [&[cmdk-group-heading]]:px-2.5 [&[cmdk-group-heading]]:text-[#9a9a9a] [&[cmdk-group-heading]]:text-[11px] [&[cmdk-group-heading]]:uppercase [&[cmdk-group-heading]]:tracking-[0.08em]"
className="[&[cmdk-group]]:py-2 [&[cmdk-group]]:px-1.5 [&[cmdk-group-heading]]:py-1 [&[cmdk-group-heading]]:px-2.5 [&[cmdk-group-heading]]:text-subdued [&[cmdk-group-heading]]:text-[11px] [&[cmdk-group-heading]]:uppercase [&[cmdk-group-heading]]:tracking-[0.08em]"
>
{group.items.map((item) => (
<Command.Item
key={item.id}
className="grid grid-cols-[1fr_auto] items-center gap-2 py-2 px-3 text-[13px] cursor-pointer rounded-md my-0.5 mx-1 hover:bg-[#2a2a2a] aria-selected:bg-[#2f2f2f]"
className="grid grid-cols-[1fr_auto] items-center gap-2 py-2 px-3 text-[13px] cursor-pointer rounded-md my-0.5 mx-1 hover:bg-hover aria-selected:bg-hover"
onSelect={() => {
if ("prompt" in item && item.prompt) {
addRecent(item.id);
Expand All @@ -435,12 +435,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
{"subtitle" in item && item.subtitle && (
<>
<br />
<span className="text-[#9a9a9a] text-xs">{item.subtitle}</span>
<span className="text-subdued text-xs">{item.subtitle}</span>
</>
)}
</div>
{"shortcutHint" in item && item.shortcutHint && (
<span className="text-[#9a9a9a] text-[11px] font-monospace">
<span className="text-subdued text-[11px] font-monospace">
{item.shortcutHint}
</span>
)}
Expand All @@ -449,7 +449,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
</Command.Group>
))}
{!hasAnyItems && (
<div className="p-4 text-[#7a7a7a] text-[13px]">{emptyText ?? "No results"}</div>
<div className="p-4 text-gray text-[13px]">{emptyText ?? "No results"}</div>
)}
</Command.List>
</Command>
Expand Down
10 changes: 5 additions & 5 deletions src/components/CommandSuggestions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,19 +104,19 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
role="option"
aria-selected={index === selectedIndex}
className={cn(
"px-2.5 py-1.5 cursor-pointer transition-colors duration-150 flex items-center justify-between gap-3 hover:bg-[#094771]",
index === selectedIndex ? "bg-[#094771]" : "bg-transparent"
"px-2.5 py-1.5 cursor-pointer transition-colors duration-150 flex items-center justify-between gap-3 hover:bg-accent-darker",
index === selectedIndex ? "bg-accent-darker" : "bg-transparent"
)}
>
<div className="text-[#569cd6] font-monospace text-xs flex-shrink-0">
<div className="text-accent font-monospace text-xs flex-shrink-0">
{suggestion.display}
</div>
<div className="text-[#969696] text-[11px] text-right overflow-hidden text-ellipsis whitespace-nowrap">
<div className="text-medium text-[11px] text-right overflow-hidden text-ellipsis whitespace-nowrap">
{suggestion.description}
</div>
</div>
))}
<div className="px-2.5 py-1 border-t border-border-light bg-bg-dark text-[#6b6b6b] text-[10px] text-center flex-shrink-0 [&_span]:text-[#969696] [&_span]:font-medium">
<div className="px-2.5 py-1 border-t border-border-light bg-dark text-placeholder text-[10px] text-center flex-shrink-0 [&_span]:text-medium [&_span]:font-medium">
<span>Tab</span> to complete • <span>↑↓</span> to navigate • <span>Esc</span> to dismiss
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Context1MCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
type="checkbox"
checked={use1M}
onChange={(e) => setUse1M(e.target.checked)}
className="cursor-pointer w-[11px] h-[11px] m-0 appearance-none border border-border-light rounded-sm bg-bg-dark relative hover:border-accent checked:bg-accent checked:border-accent checked:after:content-[''] checked:after:absolute checked:after:left-[3px] checked:after:top-0 checked:after:w-[3px] checked:after:h-[6px] checked:after:border-solid checked:after:border-white checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:rotate-45"
className="cursor-pointer w-[11px] h-[11px] m-0 appearance-none border border-border-light rounded-sm bg-dark relative hover:border-accent checked:bg-accent checked:border-accent checked:after:content-[''] checked:after:absolute checked:after:left-[3px] checked:after:top-0 checked:after:w-[3px] checked:after:h-[6px] checked:after:border-solid checked:after:border-white checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:rotate-45"
/>
1M Context
</label>
Expand Down
2 changes: 1 addition & 1 deletion src/components/DirectorySelectModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const DirectorySelectModal: React.FC = () => {
onKeyDown={handleKeyDown}
placeholder="/home/user/projects/my-project"
autoFocus
className="w-full px-3 py-2 bg-modal-bg border border-[#444] rounded text-white text-sm font-mono mb-5 focus:outline-none focus:border-accent placeholder:text-muted"
className="w-full px-3 py-2 bg-modal-bg border border-border-medium rounded text-white text-sm font-mono mb-5 focus:outline-none focus:border-accent placeholder:text-muted"
/>
{error && <div className="text-error text-xs -mt-3 mb-3">{error}</div>}
<ModalActions>
Expand Down
4 changes: 2 additions & 2 deletions src/components/ErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export class ErrorBoundary extends Component<Props, State> {
}

return (
<div className="p-5 bg-[#3c1f1f] border border-[#f48771] rounded text-[#f48771] m-5">
<div className="p-5 bg-error-bg-dark border border-danger-soft rounded text-danger-soft m-5">
<h3 className="m-0 mb-2.5 text-base">
Something went wrong{this.props.workspaceInfo && ` in ${this.props.workspaceInfo}`}
</h3>
Expand All @@ -59,7 +59,7 @@ export class ErrorBoundary extends Component<Props, State> {
)}
<button
onClick={this.handleReset}
className="py-2 px-4 bg-[#f48771] text-white border-none rounded-sm cursor-pointer text-sm hover:bg-[#ff9980]"
className="py-2 px-4 bg-danger-soft text-white border-none rounded-sm cursor-pointer text-sm hover:bg-info-light"
>
Reset
</button>
Expand Down
Loading