ZacharyZhang-NY/AgentCompany
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat(11-02): replace 1113 old CSS variable references with Paperclip design tokens

Browse Source 
- Replace all bg-[color:var(--old)] with bg-background/bg-card/bg-muted/bg-primary etc.
- Replace all text-[color:var(--old)] with text-foreground/text-muted-foreground/text-primary etc.
- Replace all border-[color:var(--line)] with border-border
- Replace all inline var(--old) with var(--new) equivalents
- Replace all rounded-[6px]/rounded-[8px] with rounded-lg
- Replace .surface class with bg-card border border-border shadow-sm
- Replace .focus-ring class with focus-visible Tailwind utilities
- Replace .mono class with font-mono
- Replace data-theme attribute with class-based dark mode
- 99 files updated, ~1265 lines changed, zero old references remaining
This commit is contained in:
ZacharyZhang-NY committed 2026-03-27 22:12:00 -04:00
1 parent 2ed5dd3388
commit 06ea4c6aec
99 files changed
+1265 -1265
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/renderer/components/communication/ChannelSidebar.tsx
+37 -37
View File
@@ -7,11 +7,11 @@ import type { ChannelDescriptor, TaskDiscussionDescriptor } from "./ChannelHeade
import { useT } from "../../i18n"
const channelConfig: Record<MessageChannel, { label: string; icon: React.ElementType; color: string }> = {
direct: { label: "Direct Messages", icon: EnvelopeSimple, color: "var(--accent)" },
department: { label: "Department", icon: Buildings, color: "var(--muted-strong)" },
company: { label: "Company-wide", icon: Megaphone, color: "var(--accent)" },
project: { label: "Project", icon: Hash, color: "var(--success)" },
incident: { label: "Incident", icon: Fire, color: "var(--danger)" },
direct: { label: "Direct Messages", icon: EnvelopeSimple, color: "var(--primary)" },
department: { label: "Department", icon: Buildings, color: "var(--muted-foreground)" },
company: { label: "Company-wide", icon: Megaphone, color: "var(--primary)" },
project: { label: "Project", icon: Hash, color: "var(--primary)" },
incident: { label: "Incident", icon: Fire, color: "var(--destructive)" },
}
function ChannelItem({
@@ -38,15 +38,15 @@ function ChannelItem({
type="button"
onClick={onClick}
aria-current={active ? "page" : undefined}
className={`group relative flex w-full items-center gap-2.5 rounded-[8px] px-3 py-2 text-left transition duration-150 ${
active ? "bg-[color:var(--accent-soft)]" : "hover:bg-[color:var(--panel-soft)]/50"
className={`group relative flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left transition duration-150 ${
active ? "bg-accent" : "hover:bg-muted/50"
}`}
>
{descriptor.channel === "direct" && agent ? (
<AgentAvatar agent={agent} size="sm" />
) : (
<div
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px]"
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg"
style={{ backgroundColor: `${config.color}18` }}
>
<Icon size={14} weight={active ? "fill" : "regular"} style={{ color: config.color }} />
@@ -56,21 +56,21 @@ function ChannelItem({
<span
className={`min-w-0 flex-1 truncate text-[13px] ${
active
? "font-semibold text-[color:var(--text)]"
? "font-semibold text-foreground"
: unreadCount > 0
? "font-semibold text-[color:var(--text)]"
: "font-medium text-[color:var(--muted-strong)]"
? "font-semibold text-foreground"
: "font-medium text-muted-foreground"
}`}
>
{descriptor.label}
</span>
{hasUrgent ? (
<span className="h-2 w-2 shrink-0 rounded-full bg-[color:var(--danger)]" />
<span className="h-2 w-2 shrink-0 rounded-full bg-destructive" />
) : unreadCount > 0 ? (
<span
className="flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full px-1 text-[9px] font-bold text-[color:var(--text-on-accent)]"
style={{ backgroundColor: "var(--accent)" }}
className="flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full px-1 text-[9px] font-bold text-primary-foreground"
style={{ backgroundColor: "var(--primary)" }}
>
{unreadCount > 99 ? "99+" : unreadCount}
</span>
@@ -108,13 +108,13 @@ export function ChannelSidebar({
animate={{ width: 260, opacity: 1 }}
exit={{ width: 0, opacity: 0 }}
transition={{ duration: 0.2 }}
className="flex h-full shrink-0 flex-col overflow-hidden border-r border-[color:var(--line)] bg-[color:var(--panel)]"
className="flex h-full shrink-0 flex-col overflow-hidden border-r border-border bg-card"
style={{ width: 260 }}
>
<div className="flex-1 overflow-y-auto px-2 py-3">
{channelGroups.map((group) => (
<div key={group.type} className="mb-3">
<div className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">
<div className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
{group.label}
</div>
{group.items.map((ch) => {
@@ -136,7 +136,7 @@ export function ChannelSidebar({
{taskDiscussionChannels.length > 0 ? (
<div className="mb-3">
<div className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">
<div className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
{t("comm.taskDiscussions")}
</div>
{taskDiscussionChannels.map((discussion) => (
@@ -144,14 +144,14 @@ export function ChannelSidebar({
key={discussion.key}
type="button"
onClick={() => onSelectChannel(discussion.key)}
className={`group flex w-full items-center gap-2.5 rounded-[8px] px-3 py-2 text-left transition duration-150 ${
selectedChannelKey === discussion.key ? "bg-[color:var(--panel-soft)]" : "hover:bg-[color:var(--panel-soft)]/50"
className={`group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left transition duration-150 ${
selectedChannelKey === discussion.key ? "bg-muted" : "hover:bg-muted/50"
}`}
>
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px]" style={{ backgroundColor: "var(--accent-soft)" }}>
<Hash size={14} weight={selectedChannelKey === discussion.key ? "fill" : "regular"} style={{ color: "var(--accent)" }} />
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg" style={{ backgroundColor: "var(--primary)" }}>
<Hash size={14} weight={selectedChannelKey === discussion.key ? "fill" : "regular"} style={{ color: "var(--primary)" }} />
</div>
<span className={`min-w-0 flex-1 truncate text-[13px] ${selectedChannelKey === discussion.key ? "font-semibold text-[color:var(--text)]" : "font-medium text-[color:var(--muted-strong)]"}`}>
<span className={`min-w-0 flex-1 truncate text-[13px] ${selectedChannelKey === discussion.key ? "font-semibold text-foreground" : "font-medium text-muted-foreground"}`}>
{discussion.label}
</span>
</button>
@@ -160,14 +160,14 @@ export function ChannelSidebar({
) : null}
{totalChannels === 0 ? (
<div className="px-3 py-6 text-center text-[11px] text-[color:var(--muted)]">
<div className="px-3 py-6 text-center text-[11px] text-muted-foreground">
{t("comm.noActiveDepartments")}
</div>
) : null}
</div>
<div className="border-t border-[color:var(--line)] px-4 py-2">
<div className="flex items-center justify-between text-[11px] text-[color:var(--muted)]">
<div className="border-t border-border px-4 py-2">
<div className="flex items-center justify-between text-[11px] text-muted-foreground">
<span>{totalChannels} channels</span>
<span>{agents.length} agents</span>
</div>
@@ -201,29 +201,29 @@ export function FilterBar({
<div className="space-y-2">
<div className="flex items-center gap-2">
<div className="relative min-w-0 flex-1">
<MagnifyingGlass size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[color:var(--muted)]" />
<MagnifyingGlass size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
<input
type="text"
value={filters.search}
onChange={(e) => onChangeFilters({ ...filters, search: e.target.value })}
onKeyDown={onSearchKeyDown}
placeholder={t("comm.searchMessages")}
className="w-full rounded-[6px] border border-[color:var(--line)] bg-[color:var(--panel)] py-1.5 pl-8 pr-3 text-[11px] text-[color:var(--text)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-1"
style={{ focusRingColor: "var(--accent)" } as React.CSSProperties}
className="w-full rounded-lg border border-border bg-card py-1.5 pl-8 pr-3 text-[11px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1"
style={{ focusRingColor: "var(--primary)" } as React.CSSProperties}
/>
</div>
{scopeToggle}
<button
type="button"
onClick={() => setExpanded(!expanded)}
className={`flex items-center gap-1.5 rounded-[6px] border px-2.5 py-1.5 text-[11px] font-medium transition ${
className={`flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-[11px] font-medium transition ${
expanded || filters.channelType !== "all" || filters.priority !== "all" || filters.unreadOnly
? "border-transparent text-[color:var(--text-on-accent)]"
: "border-[color:var(--line)] text-[color:var(--muted-strong)] hover:border-[color:var(--line-strong)]"
? "border-transparent text-primary-foreground"
: "border-border text-muted-foreground hover:border-border"
}`}
style={
expanded || filters.channelType !== "all" || filters.priority !== "all" || filters.unreadOnly
? { backgroundColor: "var(--accent)" }
? { backgroundColor: "var(--primary)" }
: undefined
}
>
@@ -243,7 +243,7 @@ export function FilterBar({
<select
value={filters.channelType}
onChange={(e) => onChangeFilters({ ...filters, channelType: e.target.value as MessageChannel | "all" })}
className="rounded-[6px] border border-[color:var(--line)] bg-[color:var(--panel)] px-2 py-1 text-[11px] font-medium text-[color:var(--text)]"
className="rounded-lg border border-border bg-card px-2 py-1 text-[11px] font-medium text-foreground"
>
<option value="all">{t("comm.allChannels")}</option>
<option value="direct">{t("comm.direct")}</option>
@@ -255,7 +255,7 @@ export function FilterBar({
<select
value={filters.priority}
onChange={(e) => onChangeFilters({ ...filters, priority: e.target.value })}
className="rounded-[6px] border border-[color:var(--line)] bg-[color:var(--panel)] px-2 py-1 text-[11px] font-medium text-[color:var(--text)]"
className="rounded-lg border border-border bg-card px-2 py-1 text-[11px] font-medium text-foreground"
>
<option value="all">{t("comm.allPriorities")}</option>
<option value="urgent">{t("comm.urgent")}</option>
@@ -266,9 +266,9 @@ export function FilterBar({
type="button"
onClick={() => onChangeFilters({ ...filters, unreadOnly: !filters.unreadOnly })}
className={`rounded-full px-2.5 py-1.5 text-[11px] font-semibold transition ${
filters.unreadOnly ? "text-[color:var(--text-on-accent)]" : "bg-[color:var(--panel-soft)] text-[color:var(--muted-strong)]"
filters.unreadOnly ? "text-primary-foreground" : "bg-muted text-muted-foreground"
}`}
style={filters.unreadOnly ? { backgroundColor: "var(--accent)" } : undefined}
style={filters.unreadOnly ? { backgroundColor: "var(--primary)" } : undefined}
>
{t("comm.unreadOnly")}
</button>
@@ -276,7 +276,7 @@ export function FilterBar({
<button
type="button"
onClick={() => onChangeFilters({ search: filters.search, channelType: "all", priority: "all", unreadOnly: false })}
className="text-[11px] font-medium text-[color:var(--muted)] underline transition hover:text-[color:var(--text)]"
className="text-[11px] font-medium text-muted-foreground underline transition hover:text-foreground"
>
{t("comm.clearFilters")}
</button>