Batch of makeStyles removal

[lkostrowski]

No description provided.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 52e65cb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Copilot]

Pull request overview

This PR migrates 11 shared component files from Material-UI's makeStyles to CSS Modules, continuing the project-wide effort to remove JSS-based styling. The changes convert inline JSS styles to CSS modules while maintaining visual appearance through the use of Macaw-UI CSS variables.

Key Changes:

• Removed makeStyles hooks from 11 component files
• Created corresponding .module.css files with converted styles
• Added comprehensive migration documentation

Reviewed changes

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

Show a summary per file

File	Description
src/components/VerticalSpacer/VerticalSpacer.tsx	Converted dynamic spacing to inline styles with hardcoded 8px multiplier
src/components/Pill/Pill.tsx	Migrated JSS styles to CSS module
src/components/Pill/Pill.module.css	New CSS module with converted Pill styles
src/components/Money/Money.tsx	Migrated JSS styles to CSS module
src/components/Money/Money.module.css	New CSS module with converted Money styles
src/components/Link.tsx	Migrated JSS styles to CSS module
src/components/Link.module.css	New CSS module with converted Link styles using CSS variables
src/components/HorizontalSpacer/HorizontalSpacer.tsx	Converted dynamic spacing to inline styles with hardcoded 8px multiplier
src/components/FormSpacer.tsx	Migrated JSS styles to CSS module
src/components/FormSpacer.module.css	New CSS module with converted FormSpacer styles
src/components/Filter/FilterKeyValueField.tsx	Migrated JSS styles to CSS module
src/components/Filter/FilterKeyValueField.module.css	New CSS module with converted FilterKeyValueField styles
src/components/ExternalLink/ExternalLink.tsx	Migrated JSS styles to CSS module
src/components/ExternalLink/ExternalLink.module.css	New CSS module with converted ExternalLink styles
src/components/Chip/Chip.tsx	Migrated JSS styles to CSS module and removed Material-UI alpha import
src/components/Chip/Chip.module.css	New CSS module with converted Chip styles using color-mix
src/components/Checkbox/Checkbox.tsx	Migrated JSS styles to CSS module
src/components/Checkbox/Checkbox.module.css	New CSS module with converted Checkbox styles
src/components/CardSpacer.tsx	Migrated JSS styles to CSS module including media queries
src/components/CardSpacer.module.css	New CSS module with converted CardSpacer styles and responsive breakpoints
MIGRATION_QUICK_START.md	Added quick reference guide for continuing the migration
MAKESTYLES_TO_CSS_MODULES_MIGRATION.md	Added comprehensive migration plan and progress tracking

---

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

[Copilot]

The hardcoded multiplier 8 is a magic number representing the theme's base spacing unit. Consider extracting this to a named constant (e.g., SPACING_UNIT = 8) to improve maintainability and make the spacing system explicit.

[Copilot]

The hardcoded multiplier 8 is a magic number representing the theme's base spacing unit. Consider extracting this to a named constant (e.g., SPACING_UNIT = 8) to improve maintainability and make the spacing system explicit.

[codecov]

Codecov Report

❌ Patch coverage is 83.33333% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 40.36%. Comparing base (33d7143) to head (d388826).

Files with missing lines	Patch %	Lines
src/components/Checkbox/Checkbox.tsx	50.00%	1 Missing ⚠️
src/components/Filter/FilterKeyValueField.tsx	66.66%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6216   +/-   ##
=======================================
  Coverage   40.36%   40.36%           
=======================================
  Files        2428     2428           
  Lines       40528    40498   -30     
  Branches     8975     8975           
=======================================
- Hits        16360    16348   -12     
+ Misses      24140    24122   -18     
  Partials       28       28           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.