dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

feat: Complete light mode implementation with semantic theme system

Browse Source 
- Add comprehensive light/dark mode CSS variables with semantic naming
- Implement theme-aware scrollbars using CSS variables
- Add light mode backgrounds: --bg-base, --bg-elevated, --bg-surface, etc.
- Add theme-aware borders: --border-base, --border-panel, --border-subtle
- Add semantic text colors: --foreground-secondary, --foreground-subtle
- Convert oklch colors to hex for better compatibility
- Add theme awareness to CodeMirror editors
- Update dark mode colors for consistency (background, sidebar, card, muted, input)
- Add Tailwind color mappings for semantic classes
This commit is contained in:
Peet McKinney
2025-12-23 12:28:35 -07:00
parent ae6b165e37
commit 8579e42002
84 changed files with 1091 additions and 671 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/ui/desktop/apps/file-manager/components/CompressDialog.tsx
View File

@@ -71,7 +71,7 @@ export function CompressDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[500px] bg-dark-bg border-2 border-dark-border">
<DialogContent className="sm:max-w-[500px] bg-canvas border-2 border-edge">
<DialogHeader>
<DialogTitle>{t("fileManager.compressFiles")}</DialogTitle>
<DialogDescription className="text-muted-foreground">
@@ -123,8 +123,8 @@ export function CompressDialog({
</Select>
</div>
<div className="rounded-md bg-dark-hover/50 border border-dark-border p-3">
<p className="text-sm text-gray-400 mb-2">
<div className="rounded-md bg-hover/50 border border-edge p-3">
<p className="text-sm text-muted-foreground mb-2">
{t("fileManager.selectedFiles")}:
</p>
<ul className="text-sm space-y-1">
@@ -134,7 +134,7 @@ export function CompressDialog({
</li>
))}
{fileNames.length > 5 && (
<li className="text-gray-400 italic">
<li className="text-muted-foreground italic">
{t("fileManager.andMoreFiles", {
count: fileNames.length - 5,
})}

8
src/ui/desktop/apps/file-manager/components/DiffViewer.tsx
View File

@@ -210,7 +210,7 @@ export function DiffViewer({
if (isLoading) {
return (
<div className="h-full flex items-center justify-center bg-dark-bg">
<div className="h-full flex items-center justify-center bg-canvas">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2"></div>
<p className="text-sm text-muted-foreground">
@@ -223,7 +223,7 @@ export function DiffViewer({
if (error) {
return (
<div className="h-full flex items-center justify-center bg-dark-bg">
<div className="h-full flex items-center justify-center bg-canvas">
<div className="text-center max-w-md">
<FileText className="w-16 h-16 mx-auto mb-4 text-red-500 opacity-50" />
<p className="text-red-500 mb-4">{error}</p>
@@ -237,8 +237,8 @@ export function DiffViewer({
}
return (
<div className="h-full flex flex-col bg-dark-bg">
<div className="flex-shrink-0 border-b border-dark-border p-3">
<div className="h-full flex flex-col bg-canvas">
<div className="flex-shrink-0 border-b border-edge p-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="text-sm">

30
src/ui/desktop/apps/file-manager/components/FileViewer.tsx
View File

@@ -133,14 +133,14 @@ function getLanguageIcon(filename: string): React.ReactNode {
yml: <SiYaml className="w-6 h-6 text-red-400" />,
toml: <SiToml className="w-6 h-6 text-orange-400" />,
sql: <SiMysql className="w-6 h-6 text-blue-500" />,
sh: <SiGnubash className="w-6 h-6 text-gray-700" />,
bash: <SiGnubash className="w-6 h-6 text-gray-700" />,
zsh: <SiShell className="w-6 h-6 text-gray-700" />,
sh: <SiGnubash className="w-6 h-6 text-foreground" />,
bash: <SiGnubash className="w-6 h-6 text-foreground" />,
zsh: <SiShell className="w-6 h-6 text-foreground" />,
vue: <SiVuedotjs className="w-6 h-6 text-green-500" />,
svelte: <SiSvelte className="w-6 h-6 text-orange-500" />,
md: <SiMarkdown className="w-6 h-6 text-gray-600" />,
conf: <SiShell className="w-6 h-6 text-gray-600" />,
ini: <Code className="w-6 h-6 text-gray-600" />,
md: <SiMarkdown className="w-6 h-6 text-muted-foreground" />,
conf: <SiShell className="w-6 h-6 text-muted-foreground" />,
ini: <Code className="w-6 h-6 text-muted-foreground" />,
};
return iconMap[ext] || <Code className="w-6 h-6 text-yellow-500" />;
@@ -238,7 +238,7 @@ function getFileType(filename: string): {
return {
type: "unknown",
icon: <FileIcon className="w-6 h-6" />,
color: "text-gray-500",
color: "text-foreground-subtle",
};
}
}
@@ -423,7 +423,7 @@ export function FileViewer({
<div className="h-full flex items-center justify-center">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
<p className="text-sm text-gray-600">Loading file...</p>
<p className="text-sm text-muted-foreground">Loading file...</p>
</div>
</div>
);
@@ -812,6 +812,8 @@ export function FileViewer({
},
".cm-scroller": {
overflow: "auto",
scrollbarWidth: "thin",
scrollbarColor: "var(--scrollbar-thumb) var(--scrollbar-track)",
},
".cm-editor": {
height: "100%",
@@ -835,7 +837,7 @@ export function FileViewer({
}}
/>
) : (
<div className="h-full p-4 font-mono text-sm whitespace-pre-wrap overflow-auto bg-background text-foreground">
<div className="h-full p-4 font-mono text-sm whitespace-pre-wrap overflow-auto thin-scrollbar bg-background text-foreground">
{editedContent || content || t("fileManager.fileIsEmpty")}
</div>
)}
@@ -969,7 +971,7 @@ export function FileViewer({
</div>
</div>
<div className="flex-1 overflow-auto bg-muted/10">
<div className="flex-1 overflow-auto thin-scrollbar bg-muted/10">
<div className="p-4">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
@@ -1041,7 +1043,7 @@ export function FileViewer({
</blockquote>
),
table: ({ children }) => (
<div className="mb-3 overflow-x-auto">
<div className="mb-3 overflow-x-auto thin-scrollbar">
<table className="min-w-full border border-border rounded-lg text-sm">
{children}
</table>
@@ -1084,7 +1086,7 @@ export function FileViewer({
</div>
</>
) : (
<div className="flex-1 overflow-auto p-6">
<div className="flex-1 overflow-auto thin-scrollbar p-6">
<div className="max-w-4xl mx-auto">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
@@ -1154,7 +1156,7 @@ export function FileViewer({
</blockquote>
),
table: ({ children }) => (
<div className="mb-4 overflow-x-auto">
<div className="mb-4 overflow-x-auto thin-scrollbar">
<table className="min-w-full border border-border rounded-lg">
{children}
</table>
@@ -1252,7 +1254,7 @@ export function FileViewer({
</div>
</div>
<div className="flex-1 overflow-auto p-6 bg-gray-100 dark:bg-gray-900">
<div className="flex-1 overflow-auto thin-scrollbar p-6 bg-gray-100 dark:bg-gray-900">
<div className="flex justify-center">
{pdfError ? (
<div className="text-center text-muted-foreground p-8">

6
src/ui/desktop/apps/file-manager/components/PermissionsDialog.tsx
View File

@@ -140,7 +140,7 @@ export function PermissionsDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[500px] bg-dark-bg border-2 border-dark-border">
<DialogContent className="sm:max-w-[500px] bg-canvas border-2 border-edge">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Shield className="w-5 h-5" />
@@ -155,7 +155,7 @@ export function PermissionsDialog({
<div className="space-y-6 py-4">
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<Label className="text-gray-400">
<Label className="text-muted-foreground">
{t("fileManager.currentPermissions")}
</Label>
<p className="font-mono text-lg mt-1">
@@ -163,7 +163,7 @@ export function PermissionsDialog({
</p>
</div>
<div>
<Label className="text-gray-400">
<Label className="text-muted-foreground">
{t("fileManager.newPermissions")}
</Label>
<p className="font-mono text-lg mt-1">{octal}</p>