test: no-dead-ends — multi-framework, shared tokens

[dylantarre]

Testing suggestions in a monorepo with shared TypeScript tokens across React and Vue.

[ahoybuoy]

🛟 Buoy Design Review

4 issues in 1 file

File	Line	Issue	Fix
TestDrift.tsx	3	inline-style: backgroundColor: '#f43f5e', padding: '16px', borderRadius: '6px'	💡 --color-red-400, --spacing-4, --radius-md
TestDrift.tsx	4	inline-style: color: '#0d9488', fontSize: '13px'	💡 --color-teal-500, --font-size-sm
TestDrift.tsx	5	inline-style: marginTop: '24px', opacity: 0.8	💡 --spacing-6, --opacity-80
TestDrift.tsx	6	inline-style: backgroundColor: '#8b5cf6', color: '#fafafa', padding: '8px 16px'	💡 --color-indigo-400, --color-gray-50, --spacing-2

You're repeating specific colors like #f43f5e, #0d9488, and #8b5cf6 across multiple elements, which are great candidates for tokens. The padding values like 16px and 8px 16px are also consistent and could be systematized. Since you're using shadcn, consider naming these tokens like --primary, --secondary, and --accent for colors, and --spacing-sm, --spacing-md for padding.

Tip: Start by defining these tokens in your CSS variables and replace the inline styles with references to them.

💡 Tip: Add a design tokens file (CSS variables, TypeScript, or JSON) to your repo and Buoy will suggest exact replacements automatically.

_{4 issues · reply @ahoybuoy for help}

[ahoybuoy]

🛟 Buoy Design Review

4 issues in 1 file

File	Line	Issue	Fix
TestDrift.tsx	3	inline-style: backgroundColor: '#f43f5e', padding: '16px', borderRadius: '6px'	💡 --color-red-400, --spacing-4, --radius-md
TestDrift.tsx	4	inline-style: color: '#0d9488', fontSize: '13px'	💡 --color-teal-500, --font-size-sm
TestDrift.tsx	5	inline-style: marginTop: '24px', opacity: 0.8	💡 --spacing-6, --opacity-80
TestDrift.tsx	6	inline-style: backgroundColor: '#8b5cf6', color: '#fafafa', padding: '8px 16px'	💡 --color-indigo-400, --color-gray-50, --spacing-2

You're repeating colors like #f43f5e, #0d9488, and #8b5cf6 across multiple elements, which are great candidates for tokens. Since you're using shadcn, consider naming these as --primary, --accent, and --secondary in your HSL token system. The spacing values like 16px, 8px, and 24px are also consistent and could be systematized as --spacing-md, --spacing-sm, and --spacing-lg.

Tip: Start by defining these colors and spacing values as tokens in your CSS variables file to avoid hardcoding them in inline styles.

💡 Tip: Add a design tokens file (CSS variables, TypeScript, or JSON) to your repo and Buoy will suggest exact replacements automatically.

_{4 issues · reply @ahoybuoy for help}

[ahoybuoy]

🛟 Buoy Design Review

4 issues in 1 file

File	Line	Issue	Fix
TestDrift.tsx	3	inline-style: backgroundColor: '#f43f5e', padding: '16px', borderRadius: '6px'	💡 --color-red-400, --spacing-4, --radius-md
TestDrift.tsx	4	inline-style: color: '#0d9488', fontSize: '13px'	💡 --color-teal-500, --font-size-sm
TestDrift.tsx	5	inline-style: marginTop: '24px', opacity: 0.8	💡 --spacing-6, --opacity-80
TestDrift.tsx	6	inline-style: backgroundColor: '#8b5cf6', color: '#fafafa', padding: '8px 16px'	💡 --color-indigo-400, --color-gray-50, --spacing-2

You're using repeated colors like #f43f5e, #0d9488, and #8b5cf6 across multiple elements, which are great candidates for tokens like --error, --success, and --primary. The spacing values (16px, 8px, 24px) align with your 4px grid, so naming them --spacing-md, --spacing-sm, and --spacing-lg would keep things consistent.

Tip: Define these tokens in your CSS or Tailwind config to avoid inline styles and make future updates easier.

💡 Tip: Add a design tokens file (CSS variables, TypeScript, or JSON) to your repo and Buoy will suggest exact replacements automatically.

_{4 issues · reply @ahoybuoy for help}

[ahoybuoy]

🛟 Buoy Design Review

4 issues in 1 file

File	Line	Issue	Fix
TestDrift.tsx	3	inline-style: backgroundColor: '#f43f5e', padding: '16px', borderRadius: '6px'	💡 --color-red-400, --spacing-4, --radius-md
TestDrift.tsx	4	inline-style: color: '#0d9488', fontSize: '13px'	💡 --color-teal-500, --font-size-sm
TestDrift.tsx	5	inline-style: marginTop: '24px', opacity: 0.8	💡 --spacing-6, --opacity-80
TestDrift.tsx	6	inline-style: backgroundColor: '#8b5cf6', color: '#fafafa', padding: '8px 16px'	💡 --color-indigo-400, --color-gray-50, --spacing-2

You're repeating colors like #f43f5e, #0d9488, and #8b5cf6 across multiple elements, which are great candidates for tokens. Since you're using shadcn, consider naming these as --primary, --accent, and --secondary in your HSL token system. Your spacing values like 16px, 8px, and 24px are also consistent and could be systematized as --spacing-md, --spacing-sm, and --spacing-lg.

Tip: Start by defining these colors and spacing values as tokens in your CSS variables file to avoid repetition and ensure consistency.

💡 Tip: Add a design tokens file (CSS variables, TypeScript, or JSON) to your repo and Buoy will suggest exact replacements automatically.

_{4 issues · reply @ahoybuoy for help}

[ahoybuoy]

🛟 Buoy Design Review

4 issues in 1 file

File	Line	Issue	Fix
TestDrift.tsx	3	inline-style: backgroundColor: '#f43f5e', padding: '16px', borderRadius: '6px'	💡 --color-red-400, --spacing-4, --radius-md
TestDrift.tsx	4	inline-style: color: '#0d9488', fontSize: '13px'	💡 --color-teal-500, --font-size-sm
TestDrift.tsx	5	inline-style: marginTop: '24px', opacity: 0.8	💡 --spacing-6, --opacity-80
TestDrift.tsx	6	inline-style: backgroundColor: '#8b5cf6', color: '#fafafa', padding: '8px 16px'	💡 --color-indigo-400, --color-gray-50, --spacing-2

You're repeating colors like #f43f5e and #8b5cf6 across multiple elements, which are likely candidates for primary and secondary tokens. The padding values (16px, 8px 16px) and spacing (24px) are also consistent and could be systematized as spacing tokens like --spacing-sm and --spacing-md.

Tip: Define these colors and spacing values as tokens in your design system to ensure consistency and easier maintenance.

💡 Tip: Add a design tokens file (CSS variables, TypeScript, or JSON) to your repo and Buoy will suggest exact replacements automatically.

_{4 issues · reply @ahoybuoy for help}

[ahoybuoy]

🛟 Buoy Design Review

4 issues in 1 file

File	Line	Issue	Fix
TestDrift.tsx	3	inline-style: backgroundColor: '#f43f5e', padding: '16px', borderRadius: '6px'	💡 --color-red-400, --spacing-4, --radius-md
TestDrift.tsx	4	inline-style: color: '#0d9488', fontSize: '13px'	💡 --color-teal-500, --font-size-sm
TestDrift.tsx	5	inline-style: marginTop: '24px', opacity: 0.8	💡 --spacing-6, --opacity-80
TestDrift.tsx	6	inline-style: backgroundColor: '#8b5cf6', color: '#fafafa', padding: '8px 16px'	💡 --color-indigo-400, --color-gray-50, --spacing-2

You're using the same colors (#f43f5e, #0d9488, #8b5cf6) and spacing values (16px, 8px) repeatedly. These are great candidates for tokens like --color-error, --color-success, --color-primary, and --spacing-md. Since you're using inline styles, consider defining these tokens in a CSS file or using CSS variables for consistency.

Tip: Start by defining these tokens in a global CSS file and reference them in your components.

💡 Tip: Add a design tokens file (CSS variables, TypeScript, or JSON) to your repo and Buoy will suggest exact replacements automatically.

_{4 issues · reply @ahoybuoy for help}

[ahoybuoy]

🛟 Buoy Design Review

4 issues in 1 file

File	Line	Issue	Fix
TestDrift.tsx	3	inline-style: backgroundColor: '#f43f5e', padding: '16px', borderRadius: '6px'	💡 --color-red-400, --spacing-4, --radius-md
TestDrift.tsx	4	inline-style: color: '#0d9488', fontSize: '13px'	💡 --color-teal-500, --font-size-sm
TestDrift.tsx	5	inline-style: marginTop: '24px', opacity: 0.8	💡 --spacing-6, --opacity-80
TestDrift.tsx	6	inline-style: backgroundColor: '#8b5cf6', color: '#fafafa', padding: '8px 16px'	💡 --color-indigo-400, --color-gray-50, --spacing-2

You're repeating specific colors like #f43f5e, #0d9488, and #8b5cf6 across multiple elements, which are great candidates for tokens. The padding values like 16px and 8px 16px are also consistent and could be systematized. Since you're using shadcn, consider naming these tokens like --primary, --success, and --secondary for colors, and --spacing-md or --spacing-sm for padding.

Tip: Start by defining these tokens in your CSS or Tailwind config to replace inline styles.

💡 Tip: Add a design tokens file (CSS variables, TypeScript, or JSON) to your repo and Buoy will suggest exact replacements automatically.

_{4 issues · reply @ahoybuoy for help}