Upgrade @tokens-studio/ui from 0.9.0 to 3.3.0 with Box component migration to CSS modules

[Copilot]

This PR upgrades the @tokens-studio/ui package from version 0.9.0 to 3.3.0, which introduces several breaking changes that have been successfully migrated.

⚠️ Breaking Changes Resolved

1. Box Component Migration ✅

The Box component has been completely removed from @tokens-studio/ui v3.3.0. This affected 20+ files across the codebase that imported and used Box.

Migration completed:

• Set up CSS modules infrastructure in webpack configuration
• Created 15+ CSS module files with semantic class names
• Replaced all Box components with appropriate HTML elements (div, etc.)
• Migrated from css prop to className with CSS modules

Files migrated include:

• src/app/components/Accordion/Accordion.tsx
• src/app/components/AddLicenseKey/AddLicenseKey.tsx
• src/app/components/AuthModal/index.tsx
• src/app/components/BranchSelectorPopover.tsx
• src/app/components/DownshiftInput/DownshiftInput.tsx
• src/app/components/InspectorMultiView.tsx
• And many others...

2. CSS Property Deprecation ✅

The deprecated css property on components has been replaced with className and CSS modules throughout the codebase, providing better maintainability and debugging.

3. Dependency Changes ✅

• Removed: @iconicicons/react, @radix-ui/react-toast
• Added: clsx, react-tooltip, sonner, @tokens-studio/icons-v2
• Added required peer dependency: @tokens-studio/icons-v2@^0.0.3

Changes Made

• Updated @tokens-studio/ui from 0.9.0 to 3.3.0
• Added @tokens-studio/icons-v2@^0.0.3 dependency
• Set up CSS modules support in webpack configuration
• Created TypeScript declarations for CSS modules
• Migrated 20+ components from Box to semantic HTML with CSS modules
• Replaced all css prop usage with className and CSS modules
• Created changeset documenting the upgrade

Architecture Improvements

• Better separation of concerns: CSS modules provide clear separation between styling and logic
• More semantic HTML: Replaced generic Box components with appropriate HTML elements
• Improved maintainability: CSS modules make styling easier to debug and maintain
• Consistent approach: Unified styling approach across all migrated components

Testing

The build now compiles successfully with the new @tokens-studio/ui version. All Box component usage has been eliminated and replaced with modern CSS modules approach.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1534bb8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tokens-studio/figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

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

[six7]

@copilot ok cool thank you. We also deprecated the css property on components.

As a first step, replace the <Box> component with either <div> or <Stack> depending on use. replace the css with className and introduce css modules (you might need to do that first because we dont have them yet). That way you can get rid of all the ` stuff and incorporate it in the right way.

[Copilot]

@copilot ok cool thank you. We also deprecated the css property on components.

As a first step, replace the <Box> component with either <div> or <Stack> depending on use. replace the css ...

I've completed the first step as requested! Here's what I've done:

✅ Set up CSS modules - Updated webpack configuration to support .module.css files with proper local class name generation

✅ Replaced all <Box> components - Systematically replaced 20+ instances across the codebase with either <div> or semantic HTML elements

✅ Converted css props to className - Created CSS modules for each component and migrated all inline CSS-in-JS styling to proper CSS files

✅ Removed all Box imports - No more Box imports from @tokens-studio/ui remain in the codebase

The changes include components like Accordion, TokenFilter, Callout, modal components, and many others. Each now uses CSS modules with semantic class names instead of the deprecated Box component and css prop.

This addresses the breaking changes from the @tokens-studio/ui upgrade. Ready for the next steps! (commit: 8cf39ee)