agent/Understand-Anything
1
0
Fork 0
mirror of https://github.com/Egonex-AI/Understand-Anything.git synced 2026-06-22 10:58:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(dashboard): rename gold CSS variables to accent

Browse Source 
Rename all gold-related CSS custom properties, Tailwind classes,
and keyframe animations from "gold" to "accent" to prepare for
the theme system where the accent color is user-configurable.

- --color-gold -> --color-accent (plus -dim and -bright variants)
- @keyframes goldPulse -> accentPulse
- .animate-gold-pulse -> .animate-accent-pulse
- All text-gold, bg-gold, border-gold, ring-gold Tailwind classes

No behavioral or visual change — pure mechanical rename.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lum1104
2026-03-27 09:29:44 +08:00
Unverified
parent 348ba3102d
commit dde40b8512
12 changed files with 50 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
understand-anything-plugin/packages/dashboard/src/App.tsx
+1 -1
View File
@@ -200,7 +200,7 @@ function App() {
<LayerLegend />
<button
onClick={() => setShowKeyboardHelp(true)}
className="text-text-muted hover:text-gold transition-colors"
className="text-text-muted hover:text-accent transition-colors"
title="Keyboard shortcuts (Shift + ?)"
>
<svg
understand-anything-plugin/packages/dashboard/src/components/CodeViewer.tsx
+4 -4
View File
@@ -56,14 +56,14 @@ export default function CodeViewer() {
<div className="flex-1 overflow-auto p-5">
{/* Summary */}
<div className="mb-4">
<h4 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">Summary</h4>
<h4 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">Summary</h4>
<p className="text-sm text-text-secondary leading-relaxed">{node.summary}</p>
</div>
{/* Language notes callout */}
{node.languageNotes && (
<div className="mb-4 bg-gold/5 border border-gold/20 rounded-lg p-3">
<h4 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-1.5">Language Notes</h4>
<div className="mb-4 bg-accent/5 border border-accent/20 rounded-lg p-3">
<h4 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-1.5">Language Notes</h4>
<p className="text-sm text-text-secondary leading-relaxed">{node.languageNotes}</p>
</div>
)}
@@ -71,7 +71,7 @@ export default function CodeViewer() {
{/* Tags */}
{node.tags.length > 0 && (
<div className="mb-4">
<h4 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">Tags</h4>
<h4 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">Tags</h4>
<div className="flex flex-wrap gap-1.5">
{node.tags.map((tag) => (
<span key={tag} className="text-[11px] glass text-text-secondary px-2.5 py-1 rounded-full">
understand-anything-plugin/packages/dashboard/src/components/CustomNode.tsx
+6 -6
View File
@@ -20,7 +20,7 @@ const typeTextColors: Record<string, string> = {
const complexityColors: Record<string, string> = {
simple: "text-node-function",
moderate: "text-gold-dim",
moderate: "text-accent-dim",
complex: "text-[#c97070]",
};
@@ -51,17 +51,17 @@ function CustomNodeComponent({
let extraClass = "";
if (data.isSelected) {
extraClass = "ring-2 ring-gold node-glow";
extraClass = "ring-2 ring-accent node-glow";
} else if (data.isTourHighlighted) {
extraClass = "ring-2 ring-gold-dim animate-gold-pulse";
extraClass = "ring-2 ring-accent-dim animate-accent-pulse";
} else if (data.isHighlighted) {
const score = data.searchScore ?? 1;
if (score <= 0.1) {
extraClass = "ring-2 ring-gold-bright";
extraClass = "ring-2 ring-accent-bright";
} else if (score <= 0.3) {
extraClass = "ring-2 ring-gold";
extraClass = "ring-2 ring-accent";
} else {
extraClass = "ring-1 ring-gold-dim/60";
extraClass = "ring-1 ring-accent-dim/60";
}
}
understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx
+1 -1
View File
@@ -429,7 +429,7 @@ function GraphViewInner() {
{layouting && (
<div className="absolute inset-0 z-50 flex items-center justify-center bg-root/80 rounded-lg">
<div className="text-center">
<div className="inline-block w-8 h-8 border-2 border-gold border-t-transparent rounded-full animate-spin mb-3" />
<div className="inline-block w-8 h-8 border-2 border-accent border-t-transparent rounded-full animate-spin mb-3" />
<p className="text-text-secondary text-sm">
Laying out {topoNodes.length.toLocaleString()} nodes...
</p>
understand-anything-plugin/packages/dashboard/src/components/KeyboardShortcutsHelp.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ export default function KeyboardShortcutsHelp({
<div className="p-6 space-y-6">
{Object.entries(groupedShortcuts).map(([category, categoryShortcuts]) => (
<div key={category}>
<h3 className="text-sm font-semibold text-gold uppercase tracking-wider mb-3">
<h3 className="text-sm font-semibold text-accent uppercase tracking-wider mb-3">
{category}
</h3>
<div className="space-y-2">
understand-anything-plugin/packages/dashboard/src/components/LayerLegend.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export default function LayerLegend() {
disabled={!hasLayers}
className={`px-2 py-0.5 rounded text-[11px] font-medium transition-colors ${
showLayers && hasLayers
? "bg-gold/20 text-gold"
? "bg-accent/20 text-accent"
: hasLayers
? "bg-elevated text-text-secondary hover:bg-surface"
: "bg-elevated text-text-muted cursor-not-allowed"
understand-anything-plugin/packages/dashboard/src/components/LearnPanel.tsx
+10 -10
View File
@@ -47,13 +47,13 @@ export default function LearnPanel() {
<button
onClick={startTour}
className="w-full mb-4 bg-gold/10 border border-gold/30 text-gold text-sm font-medium py-2.5 px-4 rounded-lg hover:bg-gold/20 transition-colors"
className="w-full mb-4 bg-accent/10 border border-accent/30 text-accent text-sm font-medium py-2.5 px-4 rounded-lg hover:bg-accent/20 transition-colors"
>
Start Tour
</button>
<div className="space-y-2">
<h3 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">
<h3 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">
Steps
</h3>
{tourSteps.map((step, i) => (
@@ -61,7 +61,7 @@ export default function LearnPanel() {
key={step.order}
className="flex items-start gap-2 text-xs bg-elevated rounded-lg px-3 py-2 border border-border-subtle"
>
<span className="text-gold font-mono shrink-0 mt-0.5">
<span className="text-accent font-mono shrink-0 mt-0.5">
{i + 1}.
</span>
<span className="text-text-secondary">{step.title}</span>
@@ -86,7 +86,7 @@ export default function LearnPanel() {
{/* Header with progress counter and exit */}
<div className="flex items-center justify-between px-3 py-2 border-b border-border-subtle shrink-0">
<div className="flex items-center gap-2">
<h3 className="text-[11px] font-semibold text-gold uppercase tracking-wider">
<h3 className="text-[11px] font-semibold text-accent uppercase tracking-wider">
Tour
</h3>
<span className="text-xs text-text-muted">
@@ -104,7 +104,7 @@ export default function LearnPanel() {
{/* Progress bar */}
<div className="h-1 bg-elevated shrink-0">
<div
className="h-full bg-gold transition-all duration-300"
className="h-full bg-accent transition-all duration-300"
style={{ width: `${progressPct}%` }}
/>
</div>
@@ -154,8 +154,8 @@ export default function LearnPanel() {
{/* Language lesson */}
{step.languageLesson && (
<div className="bg-gold/5 border border-gold/20 rounded p-3 mb-4">
<h4 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-1.5">
<div className="bg-accent/5 border border-accent/20 rounded p-3 mb-4">
<h4 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-1.5">
Language Lesson
</h4>
<p className="text-sm text-text-secondary leading-relaxed">
@@ -167,7 +167,7 @@ export default function LearnPanel() {
{/* Referenced component pills */}
{step.nodeIds.length > 0 && (
<div className="mb-4">
<h4 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">
<h4 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">
Referenced Components
</h4>
<div className="flex flex-wrap gap-1.5">
@@ -198,7 +198,7 @@ export default function LearnPanel() {
onClick={() => setTourStep(i)}
className={`w-2 h-2 rounded-full transition-colors ${
i === currentTourStep
? "bg-gold"
? "bg-accent"
: "bg-elevated hover:bg-surface"
}`}
aria-label={`Go to step ${i + 1}`}
@@ -217,7 +217,7 @@ export default function LearnPanel() {
</button>
<button
onClick={isLast ? stopTour : nextTourStep}
className="flex-1 text-xs bg-gold/10 border border-gold/30 text-gold py-1.5 rounded-lg hover:bg-gold/20 transition-colors"
className="flex-1 text-xs bg-accent/10 border border-accent/30 text-accent py-1.5 rounded-lg hover:bg-accent/20 transition-colors"
>
{isLast ? "Finish" : "Next"}
</button>
understand-anything-plugin/packages/dashboard/src/components/NodeInfo.tsx
+6 -6
View File
@@ -11,7 +11,7 @@ const typeBadgeColors: Record<string, string> = {
const complexityBadgeColors: Record<string, string> = {
simple: "text-node-function border border-node-function/30 bg-node-function/10",
moderate: "text-gold-dim border border-gold-dim/30 bg-gold-dim/10",
moderate: "text-accent-dim border border-accent-dim/30 bg-accent-dim/10",
complex: "text-[#c97070] border border-[#c97070]/30 bg-[#c97070]/10",
};
@@ -75,7 +75,7 @@ export default function NodeInfo() {
<div className="mb-4">
<button
onClick={() => setLanguageExpanded(!languageExpanded)}
className="flex items-center gap-1.5 text-xs font-semibold text-gold uppercase tracking-wider mb-2 hover:text-gold-bright transition-colors"
className="flex items-center gap-1.5 text-xs font-semibold text-accent uppercase tracking-wider mb-2 hover:text-accent-bright transition-colors"
>
<svg
className={`w-3 h-3 transition-transform ${languageExpanded ? "rotate-90" : ""}`}
@@ -88,7 +88,7 @@ export default function NodeInfo() {
Language Concepts
</button>
{languageExpanded && (
<div className="bg-gold/5 border border-gold/20 rounded-lg p-3">
<div className="bg-accent/5 border border-accent/20 rounded-lg p-3">
<p className="text-sm text-text-secondary leading-relaxed">
{node.languageNotes}
</p>
@@ -99,7 +99,7 @@ export default function NodeInfo() {
{node.tags.length > 0 && (
<div className="mb-4">
<h3 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">
<h3 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">
Tags
</h3>
<div className="flex flex-wrap gap-1.5">
@@ -117,7 +117,7 @@ export default function NodeInfo() {
{connections.length > 0 && (
<div>
<h3 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">
<h3 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">
Connections ({connections.length})
</h3>
<div className="space-y-1.5">
@@ -132,7 +132,7 @@ export default function NodeInfo() {
key={i}
className="text-xs bg-elevated rounded-lg px-3 py-2 border border-border-subtle flex items-center gap-2"
>
<span className="text-gold font-mono">{arrow}</span>
<span className="text-accent font-mono">{arrow}</span>
<span className="text-text-muted">{edge.type}</span>
<span className="text-text-primary truncate">
{otherNode?.name ?? otherId}
understand-anything-plugin/packages/dashboard/src/components/PersonaSelector.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export default function PersonaSelector() {
title={p.description}
className={`px-2.5 py-1 rounded text-[11px] font-medium transition-colors ${
persona === p.id
? "bg-gold/20 text-gold"
? "bg-accent/20 text-accent"
: "text-text-muted hover:text-text-secondary hover:bg-surface"
}`}
>
understand-anything-plugin/packages/dashboard/src/components/ProjectOverview.tsx
+7 -7
View File
@@ -30,19 +30,19 @@ export default function ProjectOverview() {
{/* Stats grid */}
<div className="grid grid-cols-2 gap-3 mb-6">
<div className="bg-elevated rounded-lg p-3 border border-border-subtle">
<div className="text-2xl font-mono font-medium text-gold">{nodes.length}</div>
<div className="text-2xl font-mono font-medium text-accent">{nodes.length}</div>
<div className="text-[11px] text-text-muted uppercase tracking-wider mt-1">Nodes</div>
</div>
<div className="bg-elevated rounded-lg p-3 border border-border-subtle">
<div className="text-2xl font-mono font-medium text-gold">{edges.length}</div>
<div className="text-2xl font-mono font-medium text-accent">{edges.length}</div>
<div className="text-[11px] text-text-muted uppercase tracking-wider mt-1">Edges</div>
</div>
<div className="bg-elevated rounded-lg p-3 border border-border-subtle">
<div className="text-2xl font-mono font-medium text-gold">{layers.length}</div>
<div className="text-2xl font-mono font-medium text-accent">{layers.length}</div>
<div className="text-[11px] text-text-muted uppercase tracking-wider mt-1">Layers</div>
</div>
<div className="bg-elevated rounded-lg p-3 border border-border-subtle">
<div className="text-2xl font-mono font-medium text-gold">{Object.keys(typeCounts).length}</div>
<div className="text-2xl font-mono font-medium text-accent">{Object.keys(typeCounts).length}</div>
<div className="text-[11px] text-text-muted uppercase tracking-wider mt-1">Types</div>
</div>
</div>
@@ -50,7 +50,7 @@ export default function ProjectOverview() {
{/* Languages */}
{project.languages.length > 0 && (
<div className="mb-5">
<h3 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">Languages</h3>
<h3 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">Languages</h3>
<div className="flex flex-wrap gap-1.5">
{project.languages.map((lang) => (
<span key={lang} className="text-[11px] glass text-text-secondary px-2.5 py-1 rounded-full">
@@ -64,7 +64,7 @@ export default function ProjectOverview() {
{/* Frameworks */}
{project.frameworks.length > 0 && (
<div className="mb-5">
<h3 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">Frameworks</h3>
<h3 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">Frameworks</h3>
<div className="flex flex-wrap gap-1.5">
{project.frameworks.map((fw) => (
<span key={fw} className="text-[11px] glass text-text-secondary px-2.5 py-1 rounded-full">
@@ -84,7 +84,7 @@ export default function ProjectOverview() {
{hasTour && (
<button
onClick={startTour}
className="w-full bg-gold/10 border border-gold/30 text-gold text-sm font-medium py-2.5 px-4 rounded-lg hover:bg-gold/20 transition-all duration-200"
className="w-full bg-accent/10 border border-accent/30 text-accent text-sm font-medium py-2.5 px-4 rounded-lg hover:bg-accent/20 transition-all duration-200"
>
Start Guided Tour
</button>
understand-anything-plugin/packages/dashboard/src/components/SearchBar.tsx
+4 -4
View File
@@ -94,14 +94,14 @@ export default function SearchBar() {
onChange={handleInputChange}
onFocus={() => setDropdownOpen(true)}
placeholder="Search nodes by name, summary, or tags..."
className="flex-1 bg-elevated text-text-primary text-sm rounded-lg px-3 py-1.5 border border-border-subtle focus:outline-none focus:border-gold/50 placeholder-text-muted"
className="flex-1 bg-elevated text-text-primary text-sm rounded-lg px-3 py-1.5 border border-border-subtle focus:outline-none focus:border-accent/50 placeholder-text-muted"
/>
<div className="flex items-center gap-1 bg-elevated rounded-lg p-0.5 shrink-0">
<button
onClick={() => setSearchMode("fuzzy")}
className={`text-[10px] px-1.5 py-0.5 rounded transition-colors ${
searchMode === "fuzzy"
? "bg-gold/20 text-gold"
? "bg-accent/20 text-accent"
: "text-text-muted hover:text-text-secondary"
}`}
>
@@ -111,7 +111,7 @@ export default function SearchBar() {
onClick={() => setSearchMode("semantic")}
className={`text-[10px] px-1.5 py-0.5 rounded transition-colors ${
searchMode === "semantic"
? "bg-gold/20 text-gold"
? "bg-accent/20 text-accent"
: "text-text-muted hover:text-text-secondary"
}`}
>
@@ -159,7 +159,7 @@ export default function SearchBar() {
<div className="flex items-center gap-1.5 shrink-0">
<div className="w-16 h-1.5 bg-elevated rounded-full overflow-hidden">
<div
className="h-full bg-gold rounded-full"
className="h-full bg-accent rounded-full"
style={{ width: `${relevance}%` }}
/>
</div>
understand-anything-plugin/packages/dashboard/src/index.css
+8 -8
View File
@@ -7,10 +7,10 @@
--color-elevated: #1a1a1a;
--color-panel: #141414;
/* Gold accent spectrum */
--color-gold: #d4a574;
--color-gold-dim: #c9a96e;
--color-gold-bright: #e8c49a;
/* Accent spectrum */
--color-accent: #d4a574;
--color-accent-dim: #c9a96e;
--color-accent-bright: #e8c49a;
/* Text hierarchy */
--color-text-primary: #f5f0eb;
@@ -89,7 +89,7 @@ body {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 600;
color: var(--color-gold);
color: var(--color-accent);
background: rgba(212, 165, 116, 0.1);
border: 1px solid rgba(212, 165, 116, 0.3);
border-radius: 0.25rem;
@@ -117,7 +117,7 @@ body {
}
}
@keyframes goldPulse {
@keyframes accentPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(212, 165, 116, 0.4);
}
@@ -135,8 +135,8 @@ body {
animation: slideUp 0.3s ease-out forwards;
}
.animate-gold-pulse {
animation: goldPulse 2s ease-in-out infinite;
.animate-accent-pulse {
animation: accentPulse 2s ease-in-out infinite;
}
/* Node selection glow */