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/skills/SkillAgentToggles.tsx
+6 -6
View File
@@ -62,7 +62,7 @@ export function SkillAgentToggles(props: SkillAgentTogglesProps) {
if (items.length === 0) {
return (
<p className="px-3 py-4 text-center text-[13px] text-[color:var(--muted)]">
<p className="px-3 py-4 text-center text-[13px] text-muted-foreground">
{mode === "skill" ? "No agents in this company" : "No skills imported yet"}
</p>
);
@@ -78,15 +78,15 @@ export function SkillAgentToggles(props: SkillAgentTogglesProps) {
key={item.id}
type="button"
disabled={isToggling}
className="flex w-full items-center gap-3 border-b border-[color:var(--line)] px-3 py-2 text-left transition hover:bg-[color:var(--panel-soft)] disabled:opacity-60"
className="flex w-full items-center gap-3 border-b border-border px-3 py-2 text-left transition hover:bg-muted disabled:opacity-60"
onClick={() => void handleToggle(item.id)}
>
{/* Toggle indicator */}
<span
className={`flex h-[18px] w-[32px] shrink-0 items-center rounded-full p-[2px] transition-colors ${
isAssigned
? "bg-[color:var(--accent)]"
: "bg-[color:var(--line)]"
? "bg-primary"
: "bg-[color:var(--border)]"
}`}
>
<span
@@ -96,11 +96,11 @@ export function SkillAgentToggles(props: SkillAgentTogglesProps) {
/>
</span>
<div className="min-w-0 flex-1">
<div className="truncate text-[13px] font-medium text-[color:var(--text)]">
<div className="truncate text-[13px] font-medium text-foreground">
{item.name}
</div>
{item.detail ? (
<div className="truncate text-[12px] text-[color:var(--muted)]">
<div className="truncate text-[12px] text-muted-foreground">
{item.detail}
</div>
) : null}
src/renderer/components/skills/SkillDetail.tsx
+30 -30
View File
@@ -134,7 +134,7 @@ export function SkillDetail({
if (loading) {
return (
<div className="flex flex-1 items-center justify-center p-8 text-[color:var(--muted)]">
<div className="flex flex-1 items-center justify-center p-8 text-muted-foreground">
<div className="text-[13px]">Loading skill...</div>
</div>
);
@@ -142,7 +142,7 @@ export function SkillDetail({
if (!detail) {
return (
<div className="flex flex-1 items-center justify-center p-8 text-[color:var(--muted)]">
<div className="flex flex-1 items-center justify-center p-8 text-muted-foreground">
<div className="text-[13px]">Skill not found</div>
</div>
);
@@ -165,15 +165,15 @@ export function SkillDetail({
return (
<div className="min-w-0">
{/* Header section */}
<div className="border-b border-[color:var(--line)] px-5 py-4">
<div className="border-b border-border px-5 py-4">
<div className="flex items-start gap-3">
<SourceIcon size={20} className="mt-1 shrink-0 text-[color:var(--muted)]" />
<SourceIcon size={20} className="mt-1 shrink-0 text-muted-foreground" />
<div className="min-w-0">
<h1 className="text-[20px] font-semibold leading-tight text-[color:var(--text)]">
<h1 className="text-[20px] font-semibold leading-tight text-foreground">
{detail.name}
</h1>
{detail.description ? (
<p className="mt-1 max-w-3xl text-[13px] text-[color:var(--muted)]">
<p className="mt-1 max-w-3xl text-[13px] text-muted-foreground">
{detail.description}
</p>
) : null}
@@ -182,35 +182,35 @@ export function SkillDetail({
</div>
{/* Metadata row */}
<div className="space-y-3 border-b border-[color:var(--line)] px-5 pt-4 pb-4">
<div className="space-y-3 border-b border-border px-5 pt-4 pb-4">
<div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-[13px]">
{/* Source */}
<div className="flex items-center gap-2">
<span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">Source</span>
<span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">Source</span>
<span className="flex items-center gap-1.5">
<SourceIcon size={14} className="text-[color:var(--muted)]" />
<span className="text-[color:var(--text)]">{sourceLabel[detail.sourceType] ?? detail.sourceType}</span>
<SourceIcon size={14} className="text-muted-foreground" />
<span className="text-foreground">{sourceLabel[detail.sourceType] ?? detail.sourceType}</span>
</span>
</div>
{/* Trust level */}
<div className="flex items-center gap-2">
<span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">Trust</span>
<span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">Trust</span>
<StatusPill status={trustToneMap[detail.trustLevel] ?? "default"} />
<span className="text-[color:var(--text)]">{trustLabelMap[detail.trustLevel] ?? detail.trustLevel}</span>
<span className="text-foreground">{trustLabelMap[detail.trustLevel] ?? detail.trustLevel}</span>
</div>
{/* Compatibility */}
<div className="flex items-center gap-2">
<span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">Compat</span>
<span className="text-[color:var(--text)]">{detail.compatibility || "all"}</span>
<span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">Compat</span>
<span className="text-foreground">{detail.compatibility || "all"}</span>
</div>
{/* Ref (for GitHub sources) */}
{isGitHubSource ? (
<div className="flex items-center gap-2">
<span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">Ref</span>
<span className="font-mono text-[12px] text-[color:var(--text)]">{shortRef(detail.sourceRef)}</span>
<span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">Ref</span>
<span className="font-mono text-[12px] text-foreground">{shortRef(detail.sourceRef)}</span>
</div>
) : null}
</div>
@@ -225,11 +225,11 @@ export function SkillDetail({
onClick={() => void handleCheckUpdate()}
/>
{updateStatus?.hasUpdate ? (
<span className="inline-flex items-center gap-1 rounded-full bg-[color:var(--accent-soft)] px-2.5 py-0.5 text-[12px] font-medium text-[color:var(--accent-text)]">
<span className="inline-flex items-center gap-1 rounded-full bg-accent px-2.5 py-0.5 text-[12px] font-medium text-primary">
Update available: {shortRef(updateStatus.currentRef)} &rarr; {shortRef(updateStatus.latestRef)}
</span>
) : updateStatus && !updateStatus.hasUpdate ? (
<span className="text-[12px] text-[color:var(--muted)]">Up to date</span>
<span className="text-[12px] text-muted-foreground">Up to date</span>
) : null}
</div>
) : null}
@@ -240,7 +240,7 @@ export function SkillDetail({
{/* File tree sidebar + content */}
<div className="grid grid-cols-[12rem_minmax(0,1fr)]">
{/* File tree sidebar */}
<div className="border-r border-[color:var(--line)] py-2">
<div className="border-r border-border py-2">
{treeNodes.length > 0 ? (
<SkillFileTree
nodes={treeNodes}
@@ -250,18 +250,18 @@ export function SkillDetail({
onSelectPath={setSelectedSkillFilePath}
/>
) : (
<p className="px-3 py-2 text-[12px] text-[color:var(--muted)]">No files</p>
<p className="px-3 py-2 text-[12px] text-muted-foreground">No files</p>
)}
</div>
{/* Content area */}
<div className="p-4">
{/* File path bar */}
<div className="mb-3 flex items-center gap-1 text-[12px] text-[color:var(--muted)]">
<div className="mb-3 flex items-center gap-1 text-[12px] text-muted-foreground">
{selectedSkillFilePath.split("/").map((segment, i, arr) => (
<span key={i} className="flex items-center gap-1">
{i > 0 ? <span className="opacity-40">/</span> : null}
<span className={i === arr.length - 1 ? "font-medium text-[color:var(--text)]" : ""}>
<span className={i === arr.length - 1 ? "font-medium text-foreground" : ""}>
{segment}
</span>
</span>
@@ -270,35 +270,35 @@ export function SkillDetail({
{/* Content */}
{isSkillMd ? (
<pre className="rounded-lg bg-[color:var(--panel)] p-4 font-mono text-[13px] text-[color:var(--text)] overflow-auto whitespace-pre-wrap">
<pre className="rounded-lg bg-card p-4 font-mono text-[13px] text-foreground overflow-auto whitespace-pre-wrap">
{fileContent}
</pre>
) : selectedFileEntry ? (
<div className="rounded-lg bg-[color:var(--panel)] p-4 text-[13px] text-[color:var(--muted)]">
<p className="font-medium text-[color:var(--text)]">{selectedFileEntry.path}</p>
<div className="rounded-lg bg-card p-4 text-[13px] text-muted-foreground">
<p className="font-medium text-foreground">{selectedFileEntry.path}</p>
<p className="mt-1">Kind: {selectedFileEntry.kind}</p>
<p className="mt-1 text-[12px] italic">File content preview is not available for non-SKILL.md files.</p>
</div>
) : (
<p className="text-[13px] text-[color:var(--muted)]">Select a file to view its details.</p>
<p className="text-[13px] text-muted-foreground">Select a file to view its details.</p>
)}
</div>
</div>
</div>
{/* Agent assignments section */}
<div className="border-t border-[color:var(--line)] px-5 py-4">
<h3 className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--accent-text)] mb-3">
<div className="border-t border-border px-5 py-4">
<h3 className="text-[11px] font-semibold uppercase tracking-[0.08em] text-primary mb-3">
Agent Assignments
</h3>
<SkillAgentToggles mode="skill" companyId={companyId} skillId={skillId} agents={agents} />
</div>
{/* Delete section */}
<div className="border-t border-[color:var(--line)] px-5 py-4">
<div className="border-t border-border px-5 py-4">
{confirmingDelete ? (
<div className="flex items-center gap-3">
<p className="text-[13px] text-[color:var(--danger)]">
<p className="text-[13px] text-destructive">
Delete &ldquo;{detail.name}&rdquo;? This cannot be undone.
</p>
<ActionButton
src/renderer/components/skills/SkillFileTree.tsx
+4 -4
View File
@@ -90,7 +90,7 @@ export function SkillFileTree({
<div key={node.path ?? node.name}>
<button
type="button"
className="flex min-h-9 w-full items-center gap-2 text-left text-[13px] text-[color:var(--muted)] hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--text)]"
className="flex min-h-9 w-full items-center gap-2 text-left text-[13px] text-muted-foreground hover:bg-muted hover:text-foreground"
style={{ paddingLeft: `${BASE_INDENT + depth * STEP_INDENT}px` }}
onClick={() => node.path && onToggleDir(node.path)}
>
@@ -118,10 +118,10 @@ export function SkillFileTree({
<button
key={node.path ?? node.name}
type="button"
className={`flex min-h-9 w-full items-center gap-2 text-left text-[13px] hover:bg-[color:var(--panel-soft)] ${
className={`flex min-h-9 w-full items-center gap-2 text-left text-[13px] hover:bg-muted ${
isSelected
? "text-[color:var(--text)] font-medium"
: "text-[color:var(--muted)]"
? "text-foreground font-medium"
: "text-muted-foreground"
}`}
style={{ paddingLeft: `${BASE_INDENT + depth * STEP_INDENT}px` }}
onClick={() => node.path && onSelectPath(node.path)}
src/renderer/components/skills/SkillImportModal.tsx
+7 -7
View File
@@ -114,7 +114,7 @@ export function SkillImportModal({
<Modal open={open} title="Import Skill" onClose={handleClose} width="560px">
<div className="space-y-5">
{/* Tab bar */}
<div className="flex gap-1 border-b border-[color:var(--line)]">
<div className="flex gap-1 border-b border-border">
{tabs.map((tab) => {
const Icon = tab.icon;
const isActive = activeTab === tab.id;
@@ -124,8 +124,8 @@ export function SkillImportModal({
type="button"
className={`flex items-center gap-1.5 px-3 py-2 text-[12px] font-medium transition-colors ${
isActive
? "border-b-2 border-[color:var(--accent)] text-[color:var(--text)]"
: "text-[color:var(--muted)] hover:text-[color:var(--text)]"
? "border-b-2 border-[color:var(--primary)] text-foreground"
: "text-muted-foreground hover:text-foreground"
}`}
onClick={() => {
setActiveTab(tab.id);
@@ -144,7 +144,7 @@ export function SkillImportModal({
{activeTab === "local" ? (
<div className="flex gap-2">
<input
className="focus-ring w-full rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] px-3.5 py-2.5 text-[14px] text-[color:var(--text)] placeholder:text-[color:var(--muted)]"
className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 w-full rounded-lg border border-border bg-card px-3.5 py-2.5 text-[14px] text-foreground placeholder:text-muted-foreground"
value={source}
onChange={(e) => setSource(e.target.value)}
placeholder={placeholder.local}
@@ -153,7 +153,7 @@ export function SkillImportModal({
</div>
) : (
<input
className="focus-ring w-full rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] px-3.5 py-2.5 text-[14px] text-[color:var(--text)] placeholder:text-[color:var(--muted)]"
className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 w-full rounded-lg border border-border bg-card px-3.5 py-2.5 text-[14px] text-foreground placeholder:text-muted-foreground"
value={source}
onChange={(e) => setSource(e.target.value)}
placeholder={placeholder[activeTab]}
@@ -161,8 +161,8 @@ export function SkillImportModal({
)}
{activeTab === "skills_sh" && (
<p className="text-[12px] text-[color:var(--muted)]">
Enter a skills.sh install command (e.g., <code className="rounded bg-[color:var(--panel-soft)] px-1 py-0.5 font-mono text-[11px]">npx skills.sh install skill-name</code>) or a direct skills.sh URL.
<p className="text-[12px] text-muted-foreground">
Enter a skills.sh install command (e.g., <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px]">npx skills.sh install skill-name</code>) or a direct skills.sh URL.
</p>
)}
</div>
src/renderer/components/skills/SkillList.tsx
+5 -5
View File
@@ -62,7 +62,7 @@ export function SkillList({
if (filteredSkills.length === 0) {
return (
<div className="px-4 py-6 text-[13px] text-[color:var(--muted)]">
<div className="px-4 py-6 text-[13px] text-muted-foreground">
No skills match this filter.
</div>
);
@@ -79,10 +79,10 @@ export function SkillList({
const filePath = selectedPaths[skill.id] ?? "SKILL.md";
return (
<div key={skill.id} className="border-b border-[color:var(--line)]">
<div key={skill.id} className="border-b border-border">
<div
className={`group flex items-center gap-2 px-3 py-1.5 hover:bg-[color:var(--panel-soft)] ${
isSelected ? "text-[color:var(--text)]" : "text-[color:var(--muted)]"
className={`group flex items-center gap-2 px-3 py-1.5 hover:bg-muted ${
isSelected ? "text-foreground" : "text-muted-foreground"
}`}
>
<SourceIcon
@@ -101,7 +101,7 @@ export function SkillList({
</button>
<button
type="button"
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[4px] text-[color:var(--muted)] opacity-60 transition-opacity hover:bg-[color:var(--panel-soft)] hover:opacity-100"
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[4px] text-muted-foreground opacity-60 transition-opacity hover:bg-muted hover:opacity-100"
onClick={() => handleToggleSkill(skill.id)}
aria-label={isExpanded ? "Collapse file tree" : "Expand file tree"}
>
src/renderer/components/skills/SkillsSection.tsx
+7 -7
View File
@@ -60,20 +60,20 @@ export function SkillsSection({
return (
<div className="grid h-full grid-cols-1 xl:grid-cols-[19rem_minmax(0,1fr)]">
{/* Left column -- skill list sidebar */}
<aside className="flex flex-col overflow-y-auto border-r border-[color:var(--line)]">
<aside className="flex flex-col overflow-y-auto border-r border-border">
{/* Header */}
<div className="flex shrink-0 items-center gap-3 px-4 py-3">
<h2 className="text-[20px] font-bold tracking-[-0.025em] text-[color:var(--text)]">
<h2 className="text-[20px] font-bold tracking-[-0.025em] text-foreground">
Skills
</h2>
{skills.length > 0 && (
<span className="inline-flex h-[20px] min-w-[20px] items-center justify-center rounded-full bg-[color:var(--panel-soft)] px-1.5 text-[11px] font-semibold text-[color:var(--muted-strong)]">
<span className="inline-flex h-[20px] min-w-[20px] items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground">
{skills.length}
</span>
)}
<button
type="button"
className="focus-ring ml-auto flex h-7 w-7 items-center justify-center rounded-[6px] text-[color:var(--muted)] transition hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--text)]"
className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ml-auto flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition hover:bg-muted hover:text-foreground"
onClick={() => setSkillImportModalOpen(true)}
aria-label="Import skill"
>
@@ -86,11 +86,11 @@ export function SkillsSection({
<div className="relative">
<MagnifyingGlass
size={14}
className="absolute left-3 top-1/2 -translate-y-1/2 text-[color:var(--muted)]"
className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
aria-hidden="true"
/>
<input
className="focus-ring w-full rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] py-2 pl-8 pr-3 text-[13px] text-[color:var(--text)] placeholder:text-[color:var(--muted)]"
className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 w-full rounded-lg border border-border bg-card py-2 pl-8 pr-3 text-[13px] text-foreground placeholder:text-muted-foreground"
value={skillFilter}
onChange={(e) => setSkillFilter(e.target.value)}
placeholder="Filter skills..."
@@ -108,7 +108,7 @@ export function SkillsSection({
action={
<button
type="button"
className="focus-ring inline-flex items-center gap-2 rounded-[8px] border border-transparent bg-[color:var(--accent)] px-4 py-2.5 text-[12px] font-bold text-[color:var(--text-on-accent)] shadow-[0_1px_3px_rgba(74,93,122,0.35)] transition hover:bg-[color:var(--accent-hover)]"
className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 inline-flex items-center gap-2 rounded-lg border border-transparent bg-primary px-4 py-2.5 text-[12px] font-bold text-primary-foreground shadow-[0_1px_3px_rgba(74,93,122,0.35)] transition hover:bg-primary/90"
onClick={() => setSkillImportModalOpen(true)}
>
<Plus size={14} weight="bold" />