material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
397 stars 27 forks source link

CSS module export could use camelCase for class names #202

Closed Innders closed 8 months ago

Innders commented 1 year ago

Describe the bug The class names in the generated css module files use kebab-case when camelCase would be more appropriate.

To Reproduce Steps to reproduce the behavior:

  1. Create theme in figma
  2. Export theme Web CSS
  3. Open a *.module.css file

Expected behavior

Class names should be camelCase not kebab-case. .display-medium -> .displayMedium

kebab-case causes issues when using css modules in frameworks like React.

<h2 className={Typography.display-medium}>Header Text</h2> is invalid and a better practice is <h2 className={Typography.displayMedium}>Header Text</h2>

jwill commented 8 months ago

Typography is not being exported at this time in the version under active development located here: https://material-foundation.github.io/material-theme-builder/

But will take the report into consideration if we do export typography in the future.