refactor: [BD-46] Component generator refactoring (#3076)

.stylelintignore

@@ -0,0 +1,2 @@
+component-generator/**
+example/**

README.md

@@ -285,8 +285,7 @@ This will create a directory in `/src/` that will contain templates for all nece
 MyComponent
 ├── index.jsx
 ├── README.md
-├── MyComponent.scss
-├── _variables.scss
+├── index.scss
 └── MyComponent.test.jsx
 ```
 
@@ -325,11 +324,10 @@ export default MyComponent;
 ##### 4. (Optional) Add styles to your component.
 
 If your component requires additional styling (which most likely is the case), edit created SCSS style sheet in your
-component's directory `/src/MyComponent/MyComponent.scss` which by default contains an empty class for your component.
+component's directory `/src/MyComponent/index.scss` which by default contains an empty class for your component.
 
-If you wish to use SASS variables (which is the preferred way of styling the components since values can be
-easily overridden and customized by the consumers of Paragon), add them in `/src/MyComponent/_variables.scss` (this file should contain all variables specific to your component).
-This way the variables will also get automatically picked up by documentation site and displayed on your component's page.
+If you wish to use CSS variables (which is the preferred way of styling the components since values can be
+easily overridden and customized by the consumers of Paragon), you can do so by utilizing [design tokens](/tokens).
 
 **Please note that you need to follow [Paragon's CSS styling conventions](docs/decisions/0012-css-styling-conventions).**
 

component-generator/constants.js

@@ -14,10 +14,6 @@ exports.COMPONENT_FILES = [
     targetPath: path.resolve(__dirname, '../src/componentName/index.jsx'),
     templatePath: path.resolve(__dirname, './templates/index.jsx'),
   },
-  {
-    targetPath: path.resolve(__dirname, '../src/componentName/_variables.scss'),
-    templatePath: path.resolve(__dirname, './templates/_variables.scss'),
-  },
   {
     targetPath: path.resolve(__dirname, '../src/componentName/README.md'),
     templatePath: path.resolve(__dirname, './templates/README.md'),

component-generator/templates/index.scss

@@ -1,6 +1,5 @@
-// Put styles related to your component here
-
-@import "variables";
+// Put design tokens in `tokens` directory if you need to create variables related to your component,
+// you can safely delete this file if you do not intend to use any styles
 
 .pgn__css-class {
 

tokens/README.md

@@ -1,7 +1,6 @@
 # Design Tokens
 
-This module is responsible for handling design tokens in Paragon, for rationale behind design tokens see [Scaling Paragon's styles architecture with design tokens](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3630923811/Scaling+Paragon+s+styles+architecture+with+design+tokens)
-and relevant ADR(TODO: add link when we merge an ADR). 
+This module is responsible for handling design tokens in Paragon, for rationale behind design tokens see [Scaling Paragon's styles architecture with design tokens](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3630923811/Scaling+Paragon+s+styles+architecture+with+design+tokens). 
 
 ## Overview
 

www/src/pages/tools/component-generator.mdx

@@ -30,8 +30,7 @@ This will create a directory in `/src/` that will contain templates for all nece
 MyComponent
 ├── index.jsx
 ├── README.md
-├── MyComponent.scss
-├── _variables.scss
+├── index.scss
 └── MyComponent.test.jsx
 ```
 
@@ -70,11 +69,10 @@ export default MyComponent;
 ## 4. (Optional) Add styles to your component.
 
 If your component requires additional styling (which most likely is the case), edit created SCSS style sheet in your
-component's directory `/src/MyComponent/MyComponent.scss` which by default contains an empty class for your component.
+component's directory `/src/MyComponent/index.scss` which by default contains an empty class for your component.
 
-If you wish to use SASS variables (which is the preferred way of styling the components since values can be
-easily overridden and customized by the consumers of Paragon), add them in `/src/MyComponent/_variables.scss` (this file should contain all variables specific to your component).
-This way the variables will also get automatically picked up by documentation site and displayed on your component's page.
+If you wish to use CSS variables (which is the preferred way of styling the components since values can be
+easily overridden and customized by the consumers of Paragon), you can do so by utilizing [design tokens](/tokens).
 
 **Please note that you need to follow [Paragon's CSS styling conventions](https://github.com/openedx/paragon/blob/master/docs/decisions/0012-css-styling-conventions).**