colors icon indicating copy to clipboard operation
colors copied to clipboard

✨ Update script to build scss files along css files

Open chtushar opened this issue 3 years ago • 3 comments

This PR will rename scripts/build-css-modules.js to scripts/build-stylesheets.js and update the script to export scss files along with css files.

Fix

Fixes #18

Checklist:

  • [x] Give a generic name to the script file build-css-modules.
  • [x] Update code to generate scss files.
  • [x] Update the build script.
  • [x] Check if files are being build successfully.

chtushar avatar Dec 11 '21 19:12 chtushar

Fixing this🔩.. It didn't appear on my vim setup.

chtushar avatar Dec 13 '21 17:12 chtushar

@vladmoroz Fixed it. Please do have a look.

chtushar avatar Dec 13 '21 17:12 chtushar

I think the commit below resolves the theming issue as it allows you to import the identical-to-css data with css custom props you can continue to dynamically use based on class selector, BUT it also allows you to:

  • change the scope name from dark-theme and also add custom scope to light theme
  • use sass variables separately from the light/dark theme css custom props
  • override any specific color

For example, these imports allows overriding gray4 color and use :root.light for the light theme and :root:not(.light) for the dark one

@use "path/to/radix-ui-colors/gray"    	with ($root:":root.light"      , $gray4:red)
@use "path/to/radix-ui-colors/grayDark"	with ($root:":root:not(.light)", $gray4:red)

https://github.com/eugenesvk/colors/commit/3fded5881ba24186b5143ea6bc748e4a92790ff1

eugenesvk avatar Apr 26 '23 10:04 eugenesvk