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 (#450)

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

Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com>
This commit was merged in pull request #450.
This commit is contained in:
Peet McKinney
2025-12-23 15:35:49 -07:00
committed by GitHub
parent 186ba34c66
commit e6a70e3a02
84 changed files with 1084 additions and 664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/ui/desktop/apps/server-stats/widgets/ProcessesWidget.tsx
View File

@@ -28,22 +28,23 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
const topProcesses = processes?.top || [];
return (
<div className="h-full w-full p-4 rounded-lg bg-dark-bg-darker border border-dark-border/50 hover:bg-dark-bg/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="h-full w-full p-4 rounded-lg bg-canvas/50 border border-edge/50 hover:bg-canvas/70 transition-colors duration-200 flex flex-col overflow-hidden">
<div className="flex items-center gap-2 flex-shrink-0 mb-3">
<List className="h-5 w-5 text-yellow-400" />
<h3 className="font-semibold text-lg text-white">
<h3 className="font-semibold text-lg text-foreground">
{t("serverStats.processes")}
</h3>
</div>
<div className="flex items-center justify-between mb-3 pb-2 border-b border-dark-border/30">
<div className="text-sm text-gray-400">
<div className="flex items-center justify-between mb-3 pb-2 border-b border-edge/30">
<div className="text-sm text-muted-foreground">
{t("serverStats.totalProcesses")}:{" "}
<span className="text-white font-semibold">
<span className="text-foreground font-semibold">
{processes?.total ?? "N/A"}
</span>
</div>
<div className="text-sm text-gray-400">
<div className="text-sm text-muted-foreground">
{t("serverStats.running")}:{" "}
<span className="text-green-400 font-semibold">
{processes?.running ?? "N/A"}
@@ -51,9 +52,9 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
</div>
</div>
<div className="overflow-auto flex-1">
<div className="overflow-auto thin-scrollbar flex-1">
{topProcesses.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-gray-400">
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
<Activity className="h-10 w-10 mb-3 opacity-50" />
<p className="text-sm">{t("serverStats.noProcessesFound")}</p>
</div>
@@ -61,11 +62,16 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
<div className="space-y-2">
{topProcesses.map((proc) => (
<div
key={proc.pid}
className="p-2.5 rounded-lg bg-dark-bg/30 hover:bg-dark-bg/50 transition-colors border border-dark-border/20"
key={index}
className="p-2.5 rounded-lg bg-canvas/30 hover:bg-canvas/50 transition-colors border border-edge/20"
>
<div className="flex items-center justify-between mb-1.5">
<span className="text-xs font-mono text-gray-400 font-medium">
<span className="text-xs font-mono text-muted-foreground font-medium">
PID: {proc.pid}
</span>
<div className="flex gap-3 text-xs font-medium">
@@ -73,10 +79,10 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
<span className="text-green-400">MEM: {proc.mem}%</span>
</div>
</div>
<div className="text-xs text-white font-mono truncate mb-1">
<div className="text-xs text-foreground font-mono truncate mb-1">
{proc.command}
</div>
<div className="text-xs text-gray-500">User: {proc.user}</div>
<div className="text-xs text-foreground-subtle">User: {proc.user}</div>
</div>
))}
</div>