@rolemodel/optics 0.3.1 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc.json +14 -0
- package/.prettierignore +2 -0
- package/README.md +8 -14
- package/dist/css/optics.css +701 -439
- package/dist/css/optics.css.map +1 -1
- package/dist/scss/addons/tom-select.scss +1 -1
- package/dist/scss/components/alert.scss +53 -37
- package/dist/scss/components/badge.scss +8 -3
- package/dist/scss/components/button.scss +160 -97
- package/dist/scss/components/button_group.scss +23 -5
- package/dist/scss/components/confirm-dialog.scss +88 -0
- package/dist/scss/components/form.scss +180 -49
- package/dist/scss/components/index.scss +2 -1
- package/dist/scss/components/modal.scss +156 -0
- package/dist/scss/components/sidebar.scss +83 -159
- package/dist/scss/components/table.scss +22 -15
- package/dist/scss/core/tokens/base_tokens.scss +10 -5
- package/dist/tokens/tokens.json +9 -8
- package/package.json +21 -22
- package/.storybook/ModeSwitcher.jsx +0 -98
- package/.storybook/documentation.scss +0 -93
- package/.storybook/main.js +0 -11
- package/.storybook/manager.js +0 -22
- package/.storybook/preview.js +0 -12
- package/.storybook/rolemodelTheme.js +0 -10
- package/dist/scss/addons/rails-modal-and-panel/index.scss +0 -2
- package/dist/scss/addons/rails-modal-and-panel/modal.scss +0 -111
- package/dist/scss/components/flash.scss +0 -58
- /package/dist/scss/addons/{rails-modal-and-panel/panel.scss → panel.scss} +0 -0
package/.babelrc.json
ADDED
package/.prettierignore
CHANGED
package/README.md
CHANGED
|
@@ -38,20 +38,6 @@ We use [Storybook](https://storybook.js.org/docs/html/get-started/introduction)
|
|
|
38
38
|
|
|
39
39
|
It can be found here [Optics Documentation](https://docs.optics.rolemodel.design/)
|
|
40
40
|
|
|
41
|
-
## Tokens
|
|
42
|
-
|
|
43
|
-
Tokens are defined in `src/core/tokens`
|
|
44
|
-
|
|
45
|
-
- All core tokens are defined in `src/core/tokens/base_tokens.scss`
|
|
46
|
-
- Basic color tokens are defined in `src/core/tokens/example_color_tokens.scss`
|
|
47
|
-
- Color scale tokens are defined in `src/core/tokens/scale_color_tokens.scss`
|
|
48
|
-
- Alert color tokens are defined in `src/core/tokens/alert_color_tokens.scss`
|
|
49
|
-
- Dark mode tokens are defined in `src/core/tokens/dark_mode_tokens.scss`
|
|
50
|
-
|
|
51
|
-
There are also a few component specific tokens that are defined in their respective component file, but those are not indented to be global or used outside of that file.
|
|
52
|
-
|
|
53
|
-
There is a JSON file in `docs/token_structure.json` that lists all the current tokens in one place and shows how the names indicate organization.
|
|
54
|
-
|
|
55
41
|
### Token Documentation
|
|
56
42
|
|
|
57
43
|
We use the Storybook Design Token for showing design tokens in the documentation. This allows us to tag groups of tokens with a category and a presenter.
|
|
@@ -67,6 +53,14 @@ Add the following above a group to categorize the tokens.
|
|
|
67
53
|
*/
|
|
68
54
|
```
|
|
69
55
|
|
|
56
|
+
### Component Documentation
|
|
57
|
+
|
|
58
|
+
Additional stories can be added using the following command, or copying an existing story.
|
|
59
|
+
|
|
60
|
+
```sh
|
|
61
|
+
npm run generate
|
|
62
|
+
```
|
|
63
|
+
|
|
70
64
|
## License
|
|
71
65
|
|
|
72
66
|
[MIT](LICENSE)
|