Search code, repositories, users, issues, pull requests...

Copy link

Collaborator

@vineethasok vineethasok commented Dec 16, 2025

Refactored Separator and Spacer components to use SCSS modules for styling instead of styled-components. Added new SCSS files, updated Storybook configuration and preview to support SCSS, and introduced a script to generate a filtered CSS theme for SCSS-migrated components. Updated package.json, .gitignore, and index.ts to ensure proper CSS variable imports and side effects. Also added utility functions and mixins for SCSS, and improved Storybook controls for these components.

Note: This is the first step to migrating components to scss one


 Migrate Separator and Spacer to SCSS modules

fd0e402

Refactored Separator and Spacer components to use SCSS modules for styling instead of styled-components. Added new SCSS files, updated Storybook configuration and preview to support SCSS, and introduced a script to generate a filtered CSS theme for SCSS-migrated components. Updated package.json, .gitignore, and index.ts to ensure proper CSS variable imports and side effects. Also added utility functions and mixins for SCSS, and improved Storybook controls for these components.

@vineethasok vineethasok requested review from Kinzeng, Copilot, gjones and hoorayimhelping

December 16, 2025 23:26

@vineethasok vineethasok self-assigned this

Dec 16, 2025

@vercel

Copy link

vercel bot commented Dec 16, 2025 •

edited

Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
click-ui	Ready Ready	Preview, Comment	Dec 17, 2025 0:24am

@vercel vercel bot deployed to Preview

December 16, 2025 23:26

Copilot AI reviewed

Dec 16, 2025

Copy link

Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR migrates the Separator and Spacer components from styled-components to SCSS modules as the first step in a broader SCSS migration strategy. The changes introduce SCSS infrastructure, build tooling, and utility functions to support this transition while maintaining compatibility with the existing design system.

Key changes:

Refactored Separator and Spacer components to use SCSS modules with CSS variables
Added SCSS build infrastructure including mixins, variants, and theme generation
Updated Storybook configuration to support SCSS compilation

Reviewed changes

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

Show a summary per file

File	Description
vite.config.ts	Added copyCSSPlugin to bundle SCSS theme CSS and configured SCSS import aliases
src/utils/capitalize.ts	Added utility function to convert strings and kebab-case to PascalCase
src/utils/capitalize.test.ts	Added comprehensive test coverage for capitalize utility
src/theme/tokens/variables.json	Reordered JSON properties and updated color values (no functional changes)
src/theme/tokens/types.ts	Reordered TypeScript interface properties to match JSON structure
src/styles/cui.css	Added main CSS entry point with theme imports
src/styles/cui-scss-theme.css	Generated filtered CSS variables for SCSS-migrated components
src/styles/_mixins.scss	Added comprehensive SCSS mixins library for component styling
src/styles/_cui-variants.scss	Added SCSS variant mixins using :where() for low specificity
src/index.ts	Added auto-import of SCSS theme CSS
src/components/Typography/Text/Text.tsx	Fixed TypeScript type casting for forwardRef
src/components/Spacer/Spacer.tsx	Migrated from styled-components to SCSS modules
src/components/Spacer/Spacer.stories.tsx	Updated story controls and removed TypeScript story types
src/components/Spacer/Spacer.module.scss	Added SCSS module with size variants
src/components/Separator/Separator.tsx	Migrated from Radix primitives to SCSS with semantic HTML
src/components/Separator/Separator.stories.tsx	Updated story controls and removed TypeScript story types
src/components/Separator/Separator.module.scss	Added SCSS module with orientation and size variants
scripts/generate-scss-theme.js	Added script to generate filtered CSS theme for migrated components
package.json	Added SCSS dependencies, sideEffects field, and CSS export path
build-tokens.js	Removed lodash dependency, implemented custom setWith function
.storybook/preview.tsx	Migrated ThemeBlock from styled-components to SCSS module
.storybook/preview.module.scss	Added SCSS module for Storybook preview layout
.storybook/main.ts	Added SCSS preprocessor configuration with modern-compiler API

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

src/components/Separator/Separator.tsx

return (

<div

role={decorative ? "none" : "separator"}

Copy link

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When role="separator", the aria-orientation attribute must be set even when orientation is "horizontal". The current condition orientation !== "horizontal" incorrectly omits aria-orientation for horizontal non-decorative separators, violating ARIA requirements.

Copilot uses AI. Check for mistakes.

src/components/Typography/Text/Text.tsx

Comment on lines +84 to +85

// eslint-disable-next-line @typescript-eslint/no-explicit-any

_Text as any

Copy link

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using 'any' type defeats TypeScript's type safety. Consider using a more specific type or properly typing the forwardRef generic parameters to avoid type casting.

Copilot uses AI. Check for mistakes.

.storybook/preview.module.scss Outdated

.cuiThemeBlock {

position: absolute;

top: 0.5rem;

width: 96vw;

Copy link

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The magic number 96vw is unclear. Consider using a CSS variable or adding a comment explaining why 96vw is used instead of 100vw or 100%.

Copilot uses AI. Check for mistakes.

scripts/generate-scss-theme.js

if (inRootBlock) {

// Check if this line contains a CSS variable for a migrated component

const isRelevantVariable = MIGRATED_COMPONENTS.some(component => {

const pattern = `--click-${component}`;

Copy link

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hardcoded prefix '--click-' is duplicated throughout the codebase. Consider extracting this as a constant at the top of the file for easier maintenance if the prefix changes.

Copilot uses AI. Check for mistakes.


 Improve Storybook theme support and SCSS theme generation

d6e16a1

Refactored ThemeBlock in Storybook to accept a theme prop and set color-scheme for better light/dark support. Updated SCSS theme generation script to always include Storybook-specific variables. Added --click-storybook-global-background to SCSS theme and improved preview styles for better layout handling.

@vercel vercel bot deployed to Preview

December 17, 2025 00:05


 Set color-scheme and data-theme on document root

6831cc3

Added a useEffect to update the document root's color-scheme and data-theme attributes based on the selected theme. This enables support for the CSS light-dark() function and improves theme handling.

@vercel vercel bot deployed to Preview

December 17, 2025 00:15


 Fix the chromatic UI diff error

9fde7a4

@vercel vercel bot deployed to Preview

December 17, 2025 00:24

gjones

gjones reviewed

Dec 17, 2025

build-tokens.js

StyleDictionary.extend({

source: [`./tokens/**/!(${themes.join("|*.")}).json`],

source: [`./tokens/**/*.json`],

Copy link

Collaborator

@gjones gjones Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes me a little nervous

Copy link

Collaborator Author

@vineethasok vineethasok Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue I faced was missing types when the types where generated so I had to combine all the theme json to complete the complete list of the types we are using
This was identified when I worked on the scss migration branch

Copy link

Collaborator Author

@vineethasok vineethasok Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could actually remove the css from being build as we are not using it at all
Also separate the logic for variable json and the types to 2 calls which would not cause any problems at all

gjones

gjones reviewed

Dec 17, 2025

build-tokens.js

const generateThemeFromDictionary = (dictionary, valueFunc = value => value) => {

const theme = {};

dictionary.allTokens.forEach((token) => {

_.setWith(theme, token.name, valueFunc(token.value), Object)

Copy link

Collaborator

@gjones gjones Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Calling @serdec as there's quite a lot of changes to the build-tokens.js and I don't know why.

Copy link

Collaborator Author

@vineethasok vineethasok Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we are only using lodash increases the packages size and we are only using lodash for only here and one another place
So I was thinking like it would be better to remove these to remove dependencies and reduce the package size

gjones

gjones approved these changes

Dec 17, 2025