[egdev6]

Summary

Refines the Chip visual treatment so the default reads as a compact solid primary chip, not a rounded button, and improves visual review coverage.

Closes #145

Type of change

• 🧩 New component
• 🐛 Bug fix
• 🎨 Design tokens
• ♿ Accessibility
• 🏗️ Infrastructure
• 📚 Documentation

Component checklist (skip if not applicable)

• Follows the 5-file structure (types.ts, use*.ts, Component.tsx, index.ts, *.stories.tsx)
• CVA variants defined in types.ts, not inline
• No hardcoded colors — uses tokens from theme.css
• No any types — TypeScript strict
• ARIA attributes present and correct
• Keyboard navigable (Tab, Enter, Escape where applicable)
• Dark mode works correctly
• Storybook stories cover: default, variants, states (hover, focus, disabled)
• Tests added or updated

Changes

File	Change
src/components/atoms/chip/types.ts	Reworked Chip visual variants around shared CSS variables and solid primary medium defaults.
src/components/atoms/chip/useChip.ts	Tightened close/action slots, removed visible min-h-11 sizing, and preserved expanded hit areas without changing visual height.
src/components/atoms/chip/Chip.stories.tsx	Added usage-review examples and simplified the visual matrix to rely on Storybook theme switching.
src/styles/theme.css	Added Chip avatar sizing tokens used by the refreshed component.

How to test

• pnpm test
• pnpm exec vitest run src/components/atoms/chip/Chip.test.tsx
• pnpm exec tsc --noEmit
• pnpm run storybook-build
• git diff --check

Manual review:

1. pnpm run storybook
2. Open Atoms/Chip / UsageReview and Atoms/Chip / Stress.
3. Verify default, closable, stress, filter, and status chips feel compact and behave correctly in light/dark mode.

Screenshots / recordings (if applicable)

Not attached.

Notes for reviewer

• The visible 44px min-h-11 target sizing was removed because Storybook action injection made the default chip render too tall.
• Interactive and close targets now use non-layout pseudo-element hit areas, preserving compact visual sizing.
• The repository has a known mismatch where Biome is configured for CRLF while committed files are LF; this PR keeps touched files LF to avoid line-ending churn.

[Copilot]

Pull request overview

This PR refines the Chip component’s visual styling to read as a compact chip (vs. a rounded button), and expands Storybook visual-review coverage to better validate variants across themes.

Changes:

• Reworked chipVariants to centralize chip styling via shared CSS variables and updated size/variant definitions.
• Updated useChip slot classes (avatar/dot/close/action) and replaced explicit min-h-11 sizing with pseudo-element hit areas.
• Added Storybook “VisualReviewMatrix” and “UsageReview” stories, plus theme utilities/tokens needed for chip avatar sizing and focus shadow aliases.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
src/styles/theme.css	Adds focus-shadow alias variables and chip avatar sizing utilities backed by chip sizing tokens.
src/components/atoms/chip/useChip.ts	Updates slot styling and introduces pseudo-element based hit-area expansion for interactive regions.
src/components/atoms/chip/types.ts	Refactors chip CVA variants to use CSS variables for tone/soft/solid styling and adjusts size/variant definitions.
src/components/atoms/chip/Chip.stories.tsx	Adds visual review stories and updates docs copy to support manual review workflows.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.