test: container scan drift by dylantarre · Pull Request #4 · ahoybuoy/08-multi-framework

dylantarre · 2026-02-10T23:45:40Z

Testing container-based PR scanning with @buoy-design/scanners

ahoybuoy · 2026-02-10T23:45:46Z

🛟 Buoy Design Review

29 issues found — mostly arbitrary Tailwind values and inline styles. Let's clean this up and turn these patterns into tokens.

1. Color: Dark Backgrounds

TestDrift.tsx:6, 11, 16, 18, 20, 26 — #18181b, #27272a, #09090b

You're using three similar dark colors for backgrounds. Pick one and stick with it. Suggested token: bg-dark-primary for #18181b.

2. Color: Text and Accents

TestDrift.tsx:10, 11, 17, 18, 21, 22, 28 — #fafafa, #a1a1aa, #71717a, #22c55e, #ef4444

These colors are used for text and accents. Let's systematize them:

#fafafa → text-light-primary
#a1a1aa → text-light-secondary
#71717a → text-dark-secondary
#22c55e → color-success
#ef4444 → color-error

3. Spacing: Padding and Margins

TestDrift.tsx:6, 9, 11, 16, 17, 20, 25 — p-[24px], mb-[16px], px-[8px], py-[2px], p-[12px], gap-[12px]

You're using a mix of spacing values. Let's standardize:

24px → spacing-lg
16px → spacing-md
12px → spacing-sm
8px → spacing-xs
2px → spacing-xxs

4. Border Radius

TestDrift.tsx:6, 11, 15, 16, 18, 19, 20, 26, 27 — rounded-[12px], rounded-[4px], rounded-[8px]

You've got three border radius values. Let's name them:

12px → radius-lg
8px → radius-md
4px → radius-sm

5. Typography: Font Sizes and Weights

TestDrift.tsx:10, 11, 18, 21, 23, 24 — text-[20px], text-[12px], text-[24px], font-[700], font-[800]

Standardize your typography:

24px → font-size-xl
20px → font-size-lg
12px → font-size-sm
700 → font-weight-bold
800 → font-weight-extrabold

6. Inline Styles

TestDrift.tsx:7, 22 — border: '1px solid #27272a', boxShadow: '0 4px 6px -1px #0000001a', color: '#ef4444', fontSize: '24px', fontWeight: 800

Avoid inline styles. Move these to your design system:

border: '1px solid #27272a' → Use border-dark token.
boxShadow: '0 4px 6px -1px #0000001a' → Use shadow-md token.
color: '#ef4444' → Use color-error token.
fontSize: '24px' → Use font-size-xl token.
fontWeight: 800 → Use font-weight-extrabold token.

7. Good Pattern: Grid Layout

TestDrift.tsx:15 — grid grid-cols-2 gap-[12px]

You're using a grid layout with consistent spacing. This is a solid foundation for a layout system. Consider naming this pattern, e.g., grid-layout.

Tip: Start by defining tokens for colors and spacing. These are the most repeated patterns and will give you the biggest consistency win.

Looking good overall — you're on the right track! Let me know if you need help setting up these tokens.

ahoybuoy

🛟 Buoy Design Review

29 issues in 1 file

File	Line	Issue	Fix
`TestDrift.tsx`	7	inline-style: border: '1px solid #27272a', boxShadow: '0 4px 6px -1px #0000001a'	—
`TestDrift.tsx`	22	inline-style: color: '#ef4444', fontSize: '24px', fontWeight: 800	—
`TestDrift.tsx`	6	arbitrary-tailwind: bg-[#18181b]	—
`TestDrift.tsx`	6	arbitrary-tailwind: p-[24px]	`p-6`
`TestDrift.tsx`	6	arbitrary-tailwind: rounded-[12px]	`rounded-xl`
`TestDrift.tsx`	9	arbitrary-tailwind: mb-[16px]	`mb-4`
`TestDrift.tsx`	10	arbitrary-tailwind: text-[#fafafa]	—
`TestDrift.tsx`	10	arbitrary-tailwind: text-[20px]	`text-xl`
`TestDrift.tsx`	10	arbitrary-tailwind: font-[700]	`font-bold`
`TestDrift.tsx`	11	arbitrary-tailwind: text-[12px]	`text-xs`
`TestDrift.tsx`	11	arbitrary-tailwind: text-[#a1a1aa]	—
`TestDrift.tsx`	11	arbitrary-tailwind: bg-[#27272a]	—
`TestDrift.tsx`	11	arbitrary-tailwind: px-[8px]	`px-2`
`TestDrift.tsx`	11	arbitrary-tailwind: py-[2px]	`py-0.5`
`TestDrift.tsx`	11	arbitrary-tailwind: rounded-[4px]	`rounded`
`TestDrift.tsx`	15	arbitrary-tailwind: gap-[12px]	`gap-3`
`TestDrift.tsx`	16	arbitrary-tailwind: p-[12px]	`p-3`
`TestDrift.tsx`	16	arbitrary-tailwind: bg-[#09090b]	—
`TestDrift.tsx`	16	arbitrary-tailwind: rounded-[8px]	`rounded-lg`
`TestDrift.tsx`	17	arbitrary-tailwind: text-[#71717a]	—
`TestDrift.tsx`	17	arbitrary-tailwind: text-[12px]	`text-xs`
`TestDrift.tsx`	18	arbitrary-tailwind: text-[#22c55e]	—
`TestDrift.tsx`	18	arbitrary-tailwind: text-[24px]	`text-2xl`
`TestDrift.tsx`	18	arbitrary-tailwind: font-[800]	`font-extrabold`
`TestDrift.tsx`	20	arbitrary-tailwind: p-[12px]	`p-3`
`TestDrift.tsx`	20	arbitrary-tailwind: bg-[#09090b]	—
`TestDrift.tsx`	20	arbitrary-tailwind: rounded-[8px]	`rounded-lg`
`TestDrift.tsx`	21	arbitrary-tailwind: text-[#71717a]	—
`TestDrift.tsx`	21	arbitrary-tailwind: text-[12px]	`text-xs`

You're using three similar dark colors (#18181b, #27272a, #09090b) and repeating text-[12px] in multiple places. These are perfect candidates for tokens. Since you're using Tailwind, consider defining these as --background, --background-secondary, and --background-tertiary for the dark colors, and --text-xs for the 12px text size. This will keep your design system scalable and consistent.

Tip: Start by adding these tokens to your Tailwind config and replace the arbitrary values with the token references.

_{29 issues · 18 suggestions · reply @ahoybuoy for help}

I've left committable suggestions inline — you can apply them directly from this PR.

ahoybuoy · 2026-02-11T21:48:40Z

+export function TestDrift() {
+  return (
+    <div
+      className="bg-[#18181b] p-[24px] rounded-[12px]"


🔵 Arbitrary Tailwind

p-[24px] → p-6

Suggested change

className="bg-[#18181b] p-[24px] rounded-[12px]"

className="bg-[#18181b] p-6 rounded-[12px]"

ahoybuoy · 2026-02-11T21:48:40Z

+export function TestDrift() {
+  return (
+    <div
+      className="bg-[#18181b] p-[24px] rounded-[12px]"


🔵 Arbitrary Tailwind

rounded-[12px] → rounded-xl

Suggested change

className="bg-[#18181b] p-[24px] rounded-[12px]"

className="bg-[#18181b] p-[24px] rounded-xl"

ahoybuoy · 2026-02-11T21:48:40Z

+      className="bg-[#18181b] p-[24px] rounded-[12px]"
+      style={{ border: '1px solid #27272a', boxShadow: '0 4px 6px -1px #0000001a' }}
+    >
+      <header className="flex justify-between items-center mb-[16px]">


🔵 Arbitrary Tailwind

mb-[16px] → mb-4

Suggested change

<header className="flex justify-between items-center mb-[16px]">

<header className="flex justify-between items-center mb-4">

ahoybuoy · 2026-02-11T21:48:41Z

+      style={{ border: '1px solid #27272a', boxShadow: '0 4px 6px -1px #0000001a' }}
+    >
+      <header className="flex justify-between items-center mb-[16px]">
+        <h2 className="text-[#fafafa] text-[20px] font-[700]">Metrics</h2>


🔵 Arbitrary Tailwind

text-[20px] → text-xl

Suggested change

<h2 className="text-[#fafafa] text-[20px] font-[700]">Metrics</h2>

<h2 className="text-[#fafafa] text-xl font-[700]">Metrics</h2>

ahoybuoy · 2026-02-11T21:48:41Z

+      style={{ border: '1px solid #27272a', boxShadow: '0 4px 6px -1px #0000001a' }}
+    >
+      <header className="flex justify-between items-center mb-[16px]">
+        <h2 className="text-[#fafafa] text-[20px] font-[700]">Metrics</h2>


🔵 Arbitrary Tailwind

font-[700] → font-bold

Suggested change

<h2 className="text-[#fafafa] text-[20px] font-[700]">Metrics</h2>

<h2 className="text-[#fafafa] text-[20px] font-bold">Metrics</h2>

ahoybuoy · 2026-02-11T21:48:41Z

+      <div className="grid grid-cols-2 gap-[12px]">
+        <div className="p-[12px] bg-[#09090b] rounded-[8px]">
+          <p className="text-[#71717a] text-[12px]">Uptime</p>
+          <p className="text-[#22c55e] text-[24px] font-[800]">99.9%</p>


🔵 Arbitrary Tailwind

text-[24px] → text-2xl

Suggested change

<p className="text-[#22c55e] text-[24px] font-[800]">99.9%</p>

<p className="text-[#22c55e] text-2xl font-[800]">99.9%</p>

ahoybuoy · 2026-02-11T21:48:41Z

+      <div className="grid grid-cols-2 gap-[12px]">
+        <div className="p-[12px] bg-[#09090b] rounded-[8px]">
+          <p className="text-[#71717a] text-[12px]">Uptime</p>
+          <p className="text-[#22c55e] text-[24px] font-[800]">99.9%</p>


🔵 Arbitrary Tailwind

font-[800] → font-extrabold

Suggested change

<p className="text-[#22c55e] text-[24px] font-[800]">99.9%</p>

<p className="text-[#22c55e] text-[24px] font-extrabold">99.9%</p>

ahoybuoy · 2026-02-11T21:48:41Z

+          <p className="text-[#71717a] text-[12px]">Uptime</p>
+          <p className="text-[#22c55e] text-[24px] font-[800]">99.9%</p>
+        </div>
+        <div className="p-[12px] bg-[#09090b] rounded-[8px]">


🔵 Arbitrary Tailwind

p-[12px] → p-3

Suggested change

<div className="p-[12px] bg-[#09090b] rounded-[8px]">

<div className="p-3 bg-[#09090b] rounded-[8px]">

ahoybuoy · 2026-02-11T21:48:41Z

+          <p className="text-[#71717a] text-[12px]">Uptime</p>
+          <p className="text-[#22c55e] text-[24px] font-[800]">99.9%</p>
+        </div>
+        <div className="p-[12px] bg-[#09090b] rounded-[8px]">


🔵 Arbitrary Tailwind

rounded-[8px] → rounded-lg

Suggested change

<div className="p-[12px] bg-[#09090b] rounded-[8px]">

<div className="p-[12px] bg-[#09090b] rounded-lg">

ahoybuoy · 2026-02-11T21:48:42Z

+          <p className="text-[#22c55e] text-[24px] font-[800]">99.9%</p>
+        </div>
+        <div className="p-[12px] bg-[#09090b] rounded-[8px]">
+          <p className="text-[#71717a] text-[12px]">Errors</p>


🔵 Arbitrary Tailwind

text-[12px] → text-xs

Suggested change

<p className="text-[#71717a] text-[12px]">Errors</p>

<p className="text-[#71717a] text-xs">Errors</p>

test: add drift for container scan testing

ecdc996

chore: trigger rescan for dashboard issues

eaf9178

ahoybuoy Bot reviewed Feb 11, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

test: container scan drift#4

test: container scan drift#4
dylantarre wants to merge 2 commits into
mainfrom
test/container-scan

dylantarre commented Feb 10, 2026

Uh oh!

ahoybuoy Bot commented Feb 10, 2026 •

edited

Loading

Uh oh!

ahoybuoy Bot left a comment

Uh oh!

ahoybuoy Bot Feb 11, 2026

Uh oh!

ahoybuoy Bot Feb 11, 2026

Uh oh!

ahoybuoy Bot Feb 11, 2026

Uh oh!

ahoybuoy Bot Feb 11, 2026

Uh oh!

ahoybuoy Bot Feb 11, 2026

Uh oh!

ahoybuoy Bot Feb 11, 2026

Uh oh!

ahoybuoy Bot Feb 11, 2026

Uh oh!

ahoybuoy Bot Feb 11, 2026

Uh oh!

ahoybuoy Bot Feb 11, 2026

Uh oh!

ahoybuoy Bot Feb 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	className="bg-[#18181b] p-[24px] rounded-[12px]"
	className="bg-[#18181b] p-6 rounded-[12px]"

	<header className="flex justify-between items-center mb-[16px]">
	<header className="flex justify-between items-center mb-4">

	<h2 className="text-[#fafafa] text-[20px] font-[700]">Metrics</h2>
	<h2 className="text-[#fafafa] text-xl font-[700]">Metrics</h2>

	<p className="text-[#22c55e] text-[24px] font-[800]">99.9%</p>
	<p className="text-[#22c55e] text-2xl font-[800]">99.9%</p>

	<div className="p-[12px] bg-[#09090b] rounded-[8px]">
	<div className="p-3 bg-[#09090b] rounded-[8px]">

	<p className="text-[#71717a] text-[12px]">Errors</p>
	<p className="text-[#71717a] text-xs">Errors</p>

Conversation

dylantarre commented Feb 10, 2026

Uh oh!

ahoybuoy Bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛟 Buoy Design Review

1. Color: Dark Backgrounds

2. Color: Text and Accents

3. Spacing: Padding and Margins

4. Border Radius

5. Typography: Font Sizes and Weights

6. Inline Styles

7. Good Pattern: Grid Layout

Uh oh!

ahoybuoy Bot left a comment

Choose a reason for hiding this comment

🛟 Buoy Design Review

Uh oh!

ahoybuoy Bot Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

ahoybuoy Bot Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

ahoybuoy Bot Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

ahoybuoy Bot Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

ahoybuoy Bot Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

ahoybuoy Bot Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

ahoybuoy Bot Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

ahoybuoy Bot Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

ahoybuoy Bot Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

ahoybuoy Bot Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

ahoybuoy Bot commented Feb 10, 2026 •

edited

Loading