Hardcoded Value Types
🎨
Colors
#ffffff
rgb(255,255,255)
hsl(0,0%,100%)
📐
Spacing
16px
1.5rem
24px
🔤
Typography
14px
Arial
font-weight: 600
🌓
Shadows
box-shadow: 0 2px 4px rgba(0,0,0,0.1)
📏
Borders
1px solid #ccc
border-radius: 4px
✗ Before: Hardcoded values everywhere
Card.tsx
export function Card({ title }) {
return (
<div style={{
backgroundColor: '#ffffff', // ⚠️
padding: '16px', // ⚠️
borderRadius: '8px' // ⚠️
}}>
{title}
</div>
);
}✓ After: Using design tokens
Card.tsx
export function Card({ title }) {
return (
<div style={{
backgroundColor: 'var(--bg-surface)',
padding: 'var(--spacing-md)',
borderRadius: 'var(--radius-md)'
}}>
{title}
</div>
);
}Step 1: Find Every Hardcoded Value
Each issue shows the exact token replacement.
buoy-cli
$
Found 47 hardcoded values — 42 auto-fixable
src/components/Card.tsx:12
├─ #ffffff → var(--bg-surface)
├─ 16px → var(--spacing-md)
└─ 8px → var(--radius-md)
src/components/Button.tsx:8
├─ #0066ff → var(--color-primary)
└─ 14px → var(--text-sm)
Run buoy fix --auto to apply 42 fixes
Step 2: Auto-Fix Them All
One command. Dozens of files fixed. Token coverage jumps.
buoy-cli
$
⚓ Fixing hardcoded values...
✓ Card.tsx: 3 values → tokens
✓ Button.tsx: 2 values → tokens
✓ Header.tsx: 5 values → tokens
... and 32 more files
42 hardcoded values replaced with tokens.
Token coverage: 34% → 89%
The Visible Outcome
34%
Token Coverage Before
47 hardcoded values scattered across 35 files
89%
Token Coverage After
42 values auto-fixed in under 5 seconds
Now when you update --color-primary, every component updates at once.
No hunting through files. No missed spots. One source of truth.
Frequently Asked Questions
What counts as a hardcoded value?
Any color (#hex, rgb, hsl), spacing (px, rem, em), or typography value that isn't using a CSS variable, theme token, or design system reference.
Does Buoy support CSS-in-JS?
Yes. Buoy detects hardcoded values in styled-components, Emotion, inline styles, and CSS modules.
Can I ignore certain hardcoded values?
Yes. Use buoy.config.mjs to define ignore patterns for intentional values like transparent, inherit, or specific hex codes.
What frameworks does this work with?
React, Vue, Svelte, Angular, and vanilla CSS/SCSS files.