Repository navigation
refactor: rebuild SCL with pure Radix primitives and vanilla CSS - #1
Conversation
Remove shadcn/ui patterns and Tailwind CSS in favor of vanilla CSS with CSS custom properties. All components now use Radix primitives directly with component-specific CSS files using BEM-like naming (scl-*). Changes: - Replace Tailwind utility classes with vanilla CSS - Replace class-variance-authority (CVA) with simple CSS modifiers - Replace cn() (clsx + tailwind-merge) with cx() utility - Create component-specific CSS files (e.g., button.css, dialog.css) - Use CSS custom properties for design tokens (--scl-*) - Remove tailwind.config.ts and postcss.config.js - Update vite.config.ts to build CSS properly Removed components (depended on removed libraries): - alert-dialog, combobox, command (used cmdk) - form (used react-hook-form) - sheet, dropdown-menu (used lucide-react) - dithered-image, statusline, terminal-textarea Updated tests to use new CSS class naming conventions. BREAKING CHANGE: API changes to variant props and CSS class names
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Welcome to Codecov 🎉Once you merge this PR into your default branch, you're all set! Codecov will compare coverage reports and display results in all future pull requests. ℹ️ You can also turn on project coverage checks and project coverage reporting on Pull Request comment Thanks for integrating Codecov - We've got you covered ☂️ |
There was a problem hiding this comment.
Pull request overview
This PR represents a major architectural refactor of the SCL component library, migrating from Tailwind CSS and shadcn/ui patterns to pure vanilla CSS with direct Radix primitive usage. The refactor removes dependencies on Tailwind, CVA (class-variance-authority), and associated tooling, replacing them with BEM-like CSS class naming (scl-*) and CSS custom properties for theming.
Key Changes:
- Replaced Tailwind utility classes with component-specific CSS files using CSS custom properties
- Replaced CVA variant system with simple CSS modifiers
- Removed 8 components that depended on external libraries (lucide-react, cmdk, react-hook-form)
- Updated ~25 components to use new CSS class naming conventions
- Created comprehensive CSS custom property system for design tokens
Reviewed changes
Copilot reviewed 104 out of 105 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Added CSS build configuration, removed PostCSS/Tailwind |
| tailwind.config.ts | Removed entire Tailwind configuration |
| postcss.config.js | Removed PostCSS configuration |
| package.json | Bumped to v0.3.0, removed 20+ dependencies, updated description |
| src/styles/globals.css | Replaced Tailwind directives with CSS custom properties system |
| src/lib/utils.ts | Replaced cn() with cx() utility, removed tailwind-merge |
| src/index.ts | Removed exports for 8 deleted components |
| src/components/ui/button/* | Refactored to use CSS classes instead of CVA, renamed 'default' to 'primary' |
| src/components/ui/*/*.css | Added 20+ new component-specific CSS files |
| src/components/ui/*/*.tsx | Updated all components to use cx() and new CSS classes |
| src/components/ui/*/*.test.tsx | Updated test assertions for new CSS class names |
| @font-face { | ||
| font-family: 'BigBlueTerm437'; |
There was a problem hiding this comment.
The CSS variable for skeleton uses rgba() incorrectly. rgba(var(--scl-color-green), 0.3) won't work because --scl-color-green is defined as hsl(120, 100%, 50%) not as comma-separated RGB values. This should use the hsl color directly with opacity, or the variable should be defined differently.
|
|
||
| .scl-table__footer { | ||
| border-top: 2px solid var(--scl-primary); | ||
| background-color: rgba(var(--scl-muted), 0.5); |
There was a problem hiding this comment.
The CSS variable usage rgba(var(--scl-muted), 0.5) is incorrect. The --scl-muted variable is defined as hsl(0, 0%, 8%) not as RGB values. This will not produce the expected semi-transparent background. Consider using the hsl color directly with alpha channel or defining the variable differently.
| export type ButtonVariant = | ||
| | 'primary' | ||
| | 'secondary' | ||
| | 'outline' | ||
| | 'secondary-outline' | ||
| | 'ghost' | ||
| | 'link' | ||
| | 'destructive' | ||
| | 'destructive-outline'; |
There was a problem hiding this comment.
The button variant 'default' has been renamed to 'primary', but this is a breaking API change that should be clearly documented in the migration guide. Consumers of this library will need to update all instances of variant="default" to variant="primary".
- Fix CSS rgba() usage with HSL variables in table.css and skeleton.css (rgba() doesn't work with full hsl() values, switched to hsla()) - Add MIGRATION.md documenting breaking changes for 0.3.0: - Button variant 'default' renamed to 'primary' - New CSS class naming convention (scl-*) - Removed components and dependencies
- Use `import type` for type-only React imports (badge, skeleton) - Fix invalid anchor href="#" to href="/docs" in button stories - Add aria-hidden="true" to decorative SVG icons for accessibility (accordion, checkbox, dialog, select)
Remove shadcn/ui patterns and Tailwind CSS in favor of vanilla CSS with
CSS custom properties. All components now use Radix primitives directly
with component-specific CSS files using BEM-like naming (scl-*).
Changes:
Removed components (depended on removed libraries):
Updated tests to use new CSS class naming conventions.
BREAKING CHANGE: API changes to variant props and CSS class names