refactor: replace hardcoded hex values with Tailwind semantic tokens
3,200+ hardcoded color values replaced with CSS variable-backed Tailwind classes (bg-card, text-foreground, border-border, etc.). Enables light mode via CSS variable swap. Only syntax highlighting colors and intentional one-offs remain hardcoded (~15 values). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
@@ -21,16 +21,16 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
|
||||
className="card-interactive text-left w-full flex flex-col gap-3 p-5"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h3 className="font-heading text-[#e2e5eb] text-base font-semibold leading-tight line-clamp-2">
|
||||
<h3 className="font-heading text-foreground text-base font-semibold leading-tight line-clamp-2">
|
||||
{template.name}
|
||||
</h3>
|
||||
<span className="shrink-0">
|
||||
<GitBranch className="w-4 h-4 text-[#848b9b]" />
|
||||
<GitBranch className="w-4 h-4 text-muted-foreground" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{template.description && (
|
||||
<p className="text-[#848b9b] text-sm leading-relaxed line-clamp-2">
|
||||
<p className="text-muted-foreground text-sm leading-relaxed line-clamp-2">
|
||||
{template.description}
|
||||
</p>
|
||||
)}
|
||||
@@ -40,26 +40,26 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
|
||||
{template.tags.slice(0, 3).map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b]"
|
||||
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{template.tags.length > 3 && (
|
||||
<span className="font-sans text-xs text-[0.625rem] text-[#848b9b]">
|
||||
<span className="font-sans text-xs text-[0.625rem] text-muted-foreground">
|
||||
+{template.tags.length - 3}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 mt-auto pt-2 border-t border-[#1e2130]">
|
||||
<div className="flex items-center gap-4 mt-auto pt-2 border-t border-border">
|
||||
{template.category && (
|
||||
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
|
||||
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
|
||||
{template.category}
|
||||
</span>
|
||||
)}
|
||||
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] flex items-center gap-1">
|
||||
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground flex items-center gap-1">
|
||||
<Layers className="w-3 h-3" />
|
||||
{template.step_count} steps
|
||||
</span>
|
||||
@@ -83,11 +83,11 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
|
||||
<div className="flex items-center justify-between">
|
||||
<span className={cn(
|
||||
'font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md border',
|
||||
'bg-primary/5 border-primary/20 text-[#22d3ee]'
|
||||
'bg-primary/5 border-primary/20 text-primary'
|
||||
)}>
|
||||
{typeLabels[template.tree_type] || template.tree_type}
|
||||
</span>
|
||||
<span className="font-sans text-xs text-[0.625rem] text-[#5a6170]">
|
||||
<span className="font-sans text-xs text-[0.625rem] text-text-muted">
|
||||
{template.usage_count.toLocaleString()} uses
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -22,20 +22,20 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<h3 className="font-heading text-[#e2e5eb] text-base font-semibold leading-tight line-clamp-2">
|
||||
<h3 className="font-heading text-foreground text-base font-semibold leading-tight line-clamp-2">
|
||||
{template.name}
|
||||
</h3>
|
||||
{template.is_verified && (
|
||||
<CheckCircle2 className="w-4 h-4 text-[#22d3ee] shrink-0" />
|
||||
<CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
<span className="shrink-0">
|
||||
<Terminal className="w-4 h-4 text-[#848b9b]" />
|
||||
<Terminal className="w-4 h-4 text-muted-foreground" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{template.description && (
|
||||
<p className="text-[#848b9b] text-sm leading-relaxed line-clamp-2">
|
||||
<p className="text-muted-foreground text-sm leading-relaxed line-clamp-2">
|
||||
{template.description}
|
||||
</p>
|
||||
)}
|
||||
@@ -45,31 +45,31 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
|
||||
{template.tags.slice(0, 3).map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b]"
|
||||
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{template.tags.length > 3 && (
|
||||
<span className="font-sans text-xs text-[0.625rem] text-[#848b9b]">
|
||||
<span className="font-sans text-xs text-[0.625rem] text-muted-foreground">
|
||||
+{template.tags.length - 3}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 mt-auto pt-2 border-t border-[#1e2130]">
|
||||
<div className="flex items-center gap-3 mt-auto pt-2 border-t border-border">
|
||||
{template.complexity && (
|
||||
<span
|
||||
className={cn(
|
||||
'font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md border',
|
||||
complexityColors[template.complexity] || 'text-[#848b9b] border-[#1e2130] bg-[#14161d]'
|
||||
complexityColors[template.complexity] || 'text-muted-foreground border-border bg-card'
|
||||
)}
|
||||
>
|
||||
{template.complexity}
|
||||
</span>
|
||||
)}
|
||||
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
|
||||
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
|
||||
{template.parameter_count} param{template.parameter_count !== 1 ? 's' : ''}
|
||||
</span>
|
||||
{template.requires_elevation && (
|
||||
@@ -82,7 +82,7 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
|
||||
{template.requires_modules.slice(0, 2).map((mod) => (
|
||||
<span
|
||||
key={mod}
|
||||
className="font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b] flex items-center gap-1"
|
||||
className="font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground flex items-center gap-1"
|
||||
>
|
||||
<Package className="w-3 h-3" />
|
||||
{mod}
|
||||
@@ -92,7 +92,7 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-end">
|
||||
<span className="font-sans text-xs text-[0.625rem] text-[#5a6170]">
|
||||
<span className="font-sans text-xs text-[0.625rem] text-text-muted">
|
||||
{template.usage_count.toLocaleString()} uses
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -66,21 +66,21 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-4 p-6 border-b border-[#1e2130]">
|
||||
<div className="flex items-start justify-between gap-4 p-6 border-b border-border">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
{type === 'flow' ? (
|
||||
<GitBranch className="w-5 h-5 text-[#22d3ee] shrink-0" />
|
||||
<GitBranch className="w-5 h-5 text-primary shrink-0" />
|
||||
) : (
|
||||
<Terminal className="w-5 h-5 text-[#22d3ee] shrink-0" />
|
||||
<Terminal className="w-5 h-5 text-primary shrink-0" />
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<h2 className="font-heading text-[#e2e5eb] text-xl font-semibold leading-tight flex items-center gap-2">
|
||||
<h2 className="font-heading text-foreground text-xl font-semibold leading-tight flex items-center gap-2">
|
||||
{template.name}
|
||||
{type === 'script' && (template as PublicScriptDetail).is_verified && (
|
||||
<CheckCircle2 className="w-4 h-4 text-[#22d3ee] shrink-0" />
|
||||
<CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
|
||||
)}
|
||||
</h2>
|
||||
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mt-1">
|
||||
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mt-1">
|
||||
{type === 'flow' ? 'Flow Template' : 'Script Template'}
|
||||
</p>
|
||||
</div>
|
||||
@@ -88,7 +88,7 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="p-1.5 rounded-lg text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.04)] transition-colors"
|
||||
className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)] transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
@@ -97,7 +97,7 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||
{template.description && (
|
||||
<p className="text-[#848b9b] text-sm leading-relaxed">
|
||||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||||
{template.description}
|
||||
</p>
|
||||
)}
|
||||
@@ -139,7 +139,7 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
|
||||
value={(template as PublicScriptDetail).complexity!}
|
||||
valueClassName={
|
||||
complexityColors[(template as PublicScriptDetail).complexity!] ||
|
||||
'text-[#e2e5eb]'
|
||||
'text-foreground'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
@@ -161,14 +161,14 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
|
||||
{/* Tags */}
|
||||
{template.tags.length > 0 && (
|
||||
<div>
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
|
||||
Tags
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{template.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b]"
|
||||
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
@@ -180,10 +180,10 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
|
||||
{/* Flow preview structure */}
|
||||
{type === 'flow' && (template as PublicFlowDetail).preview_structure && (
|
||||
<div>
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
|
||||
Flow Preview
|
||||
</h4>
|
||||
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
|
||||
<div className="bg-card border border-border rounded-xl p-4">
|
||||
<PreviewTree structure={(template as PublicFlowDetail).preview_structure!} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -192,22 +192,22 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
|
||||
{/* Script parameters */}
|
||||
{type === 'script' && (template as PublicScriptDetail).parameters.length > 0 && (
|
||||
<div>
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
|
||||
Parameters
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{(template as PublicScriptDetail).parameters.map((param) => (
|
||||
<div
|
||||
key={param.name}
|
||||
className="flex items-start gap-3 bg-[#14161d] border border-[#1e2130] rounded-xl p-3"
|
||||
className="flex items-start gap-3 bg-card border border-border rounded-xl p-3"
|
||||
>
|
||||
<code className="font-sans text-xs text-[#22d3ee] shrink-0">
|
||||
<code className="font-sans text-xs text-primary shrink-0">
|
||||
{param.name}
|
||||
</code>
|
||||
<span className="text-[#848b9b] text-sm flex-1">
|
||||
<span className="text-muted-foreground text-sm flex-1">
|
||||
{param.description}
|
||||
</span>
|
||||
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170] shrink-0">
|
||||
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-text-muted shrink-0">
|
||||
{param.type}
|
||||
</span>
|
||||
</div>
|
||||
@@ -219,14 +219,14 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
|
||||
{/* Script modules */}
|
||||
{type === 'script' && (template as PublicScriptDetail).requires_modules.length > 0 && (
|
||||
<div>
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
|
||||
Required Modules
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{(template as PublicScriptDetail).requires_modules.map((mod) => (
|
||||
<span
|
||||
key={mod}
|
||||
className="font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b] flex items-center gap-1"
|
||||
className="font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground flex items-center gap-1"
|
||||
>
|
||||
<Package className="w-3 h-3" />
|
||||
{mod}
|
||||
@@ -238,17 +238,17 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between gap-4 p-6 border-t border-[#1e2130]">
|
||||
<div className="flex items-center justify-between gap-4 p-6 border-t border-border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2.5 rounded-lg text-sm font-medium bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] transition-colors"
|
||||
className="px-4 py-2.5 rounded-lg text-sm font-medium bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<Link
|
||||
to="/register"
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-semibold bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98] transition-all"
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-semibold bg-primary text-white hover:brightness-110 active:scale-[0.98] transition-all"
|
||||
>
|
||||
Sign Up to Use This
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
@@ -271,11 +271,11 @@ function MetaStat({
|
||||
valueClassName?: string
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-3">
|
||||
<div className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-1">
|
||||
<div className="bg-card border border-border rounded-xl p-3">
|
||||
<div className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1">
|
||||
{label}
|
||||
</div>
|
||||
<div className={cn('text-[#e2e5eb] text-sm font-semibold flex items-center gap-1.5', valueClassName)}>
|
||||
<div className={cn('text-foreground text-sm font-semibold flex items-center gap-1.5', valueClassName)}>
|
||||
{icon}
|
||||
{value}
|
||||
</div>
|
||||
@@ -293,17 +293,17 @@ function PreviewTree({ structure }: { structure: Record<string, unknown> }) {
|
||||
|
||||
return (
|
||||
<div className="text-sm">
|
||||
<div className="flex items-center gap-2 text-[#e2e5eb]">
|
||||
<ChevronRight className="w-3.5 h-3.5 text-[#22d3ee]" />
|
||||
<div className="flex items-center gap-2 text-foreground">
|
||||
<ChevronRight className="w-3.5 h-3.5 text-primary" />
|
||||
<span>{name}</span>
|
||||
</div>
|
||||
{children.length > 0 && (
|
||||
<div className="ml-5 mt-1 space-y-1 border-l border-[#1e2130] pl-3">
|
||||
<div className="ml-5 mt-1 space-y-1 border-l border-border pl-3">
|
||||
{children.slice(0, 8).map((child, i) => (
|
||||
<PreviewTree key={i} structure={child} />
|
||||
))}
|
||||
{children.length > 8 && (
|
||||
<span className="text-[#848b9b] text-xs">
|
||||
<span className="text-muted-foreground text-xs">
|
||||
+{children.length - 8} more steps...
|
||||
</span>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user