@rolemodel/optics 0.2.3

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.
Files changed (48) hide show
  1. package/.eslintrc.json +14 -0
  2. package/.github/ISSUE_TEMPLATE/bug_report.md +40 -0
  3. package/.github/ISSUE_TEMPLATE/feature_request.md +19 -0
  4. package/.github/pull_request_template.md +30 -0
  5. package/.github/workflows/linting.yml +38 -0
  6. package/.github/workflows/publish-storybook.yml +26 -0
  7. package/.github/workflows/release-package.yml +33 -0
  8. package/.prettierignore +0 -0
  9. package/.prettierrc.json +8 -0
  10. package/.storybook/ModeSwitcher.jsx +98 -0
  11. package/.storybook/documentation.scss +65 -0
  12. package/.storybook/main.js +10 -0
  13. package/.storybook/manager.js +22 -0
  14. package/.storybook/preview.js +12 -0
  15. package/.storybook/rolemodelTheme.js +10 -0
  16. package/.stylelintrc.json +15 -0
  17. package/LICENSE +21 -0
  18. package/README.md +57 -0
  19. package/build_token_json.js +149 -0
  20. package/dist/css/optics.css +2586 -0
  21. package/dist/css/optics.css.map +1 -0
  22. package/dist/scss/addons/rails-modal-and-panel/index.scss +2 -0
  23. package/dist/scss/addons/rails-modal-and-panel/modal.scss +86 -0
  24. package/dist/scss/addons/rails-modal-and-panel/panel.scss +36 -0
  25. package/dist/scss/addons/tom-select.scss +77 -0
  26. package/dist/scss/components/alert.scss +158 -0
  27. package/dist/scss/components/badge.scss +80 -0
  28. package/dist/scss/components/button.scss +235 -0
  29. package/dist/scss/components/button_group.scss +35 -0
  30. package/dist/scss/components/card.scss +65 -0
  31. package/dist/scss/components/flash.scss +58 -0
  32. package/dist/scss/components/form.scss +178 -0
  33. package/dist/scss/components/icon.scss +109 -0
  34. package/dist/scss/components/index.scss +10 -0
  35. package/dist/scss/components/sidebar.scss +255 -0
  36. package/dist/scss/components/table.scss +132 -0
  37. package/dist/scss/core/base.scss +95 -0
  38. package/dist/scss/core/layout.scss +36 -0
  39. package/dist/scss/core/tokens/base_tokens.scss +251 -0
  40. package/dist/scss/core/tokens/dark_mode_tokens.scss +324 -0
  41. package/dist/scss/core/tokens/index.scss +3 -0
  42. package/dist/scss/core/tokens/scale_color_tokens.scss +303 -0
  43. package/dist/scss/core/utilities.scss +548 -0
  44. package/dist/scss/optics.scss +13 -0
  45. package/dist/scss/recipes/16six-sidebar.scss +97 -0
  46. package/dist/scss/recipes/domains-sidebar.scss +60 -0
  47. package/dist/tokens/tokens.json +391 -0
  48. package/package.json +80 -0
package/dist/tokens/tokens.json ADDED
@@ -0,0 +1,391 @@
1
+ {
2
+ "rm": {
3
+ "color": {
4
+ "white": "hsl(0deg 100% 100%)",
5
+ "black": "hsl(0deg 0% 0%)",
6
+ "primary": {
7
+ "h": "216",
8
+ "s": "58%",
9
+ "l": "48%",
10
+ "original": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) var(--rm-color-primary-l))",
11
+ "plus-max": "var(--rm-color-white)",
12
+ "plus-eight": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 98%)",
13
+ "plus-seven": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 96%)",
14
+ "plus-six": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 94%)",
15
+ "plus-five": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 90%)",
16
+ "plus-four": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 84%)",
17
+ "plus-three": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 70%)",
18
+ "plus-two": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 64%)",
19
+ "plus-one": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 52%)",
20
+ "base": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 40%)",
21
+ "minus-one": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 36%)",
22
+ "minus-two": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 32%)",
23
+ "minus-three": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 28%)",
24
+ "minus-four": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 24%)",
25
+ "minus-five": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 20%)",
26
+ "minus-six": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 16%)",
27
+ "minus-seven": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%)",
28
+ "minus-eight": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%)",
29
+ "minus-max": "var(--rm-color-black)",
30
+ "on-plus-max": "var(--rm-color-black)",
31
+ "on-plus-eight": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%)",
32
+ "on-plus-seven": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%)",
33
+ "on-plus-six": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 16%)",
34
+ "on-plus-five": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 20%)",
35
+ "on-plus-four": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 24%)",
36
+ "on-plus-three": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 20%)",
37
+ "on-plus-two": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 16%)",
38
+ "on-plus-one": "var(--rm-color-white)",
39
+ "on-base": "var(--rm-color-white)",
40
+ "on-minus-one": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 94%)",
41
+ "on-minus-two": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 90%)",
42
+ "on-minus-three": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 86%)",
43
+ "on-minus-four": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 84%)",
44
+ "on-minus-five": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%)",
45
+ "on-minus-six": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 94%)",
46
+ "on-minus-seven": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 96%)",
47
+ "on-minus-eight": "hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 98%)",
48
+ "on-minus-max": "var(--rm-color-white)"
49
+ },
50
+ "neutral": {
51
+ "h": "var(--rm-color-primary-h)",
52
+ "s": "4%",
53
+ "l": "var(--rm-color-primary-l)",
54
+ "original": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) var(--rm-color-neutral-l))",
55
+ "plus-max": "var(--rm-color-white)",
56
+ "plus-eight": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 98%)",
57
+ "plus-seven": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 96%)",
58
+ "plus-six": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 94%)",
59
+ "plus-five": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 90%)",
60
+ "plus-four": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 84%)",
61
+ "plus-three": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 70%)",
62
+ "plus-two": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 64%)",
63
+ "plus-one": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 52%)",
64
+ "base": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 40%)",
65
+ "minus-one": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 36%)",
66
+ "minus-two": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 32%)",
67
+ "minus-three": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 28%)",
68
+ "minus-four": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 24%)",
69
+ "minus-five": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 20%)",
70
+ "minus-six": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 16%)",
71
+ "minus-seven": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%)",
72
+ "minus-eight": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%)",
73
+ "minus-max": "var(--rm-color-black)",
74
+ "on-plus-max": "var(--rm-color-black)",
75
+ "on-plus-eight": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%)",
76
+ "on-plus-seven": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%)",
77
+ "on-plus-six": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 16%)",
78
+ "on-plus-five": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 20%)",
79
+ "on-plus-four": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 24%)",
80
+ "on-plus-three": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 20%)",
81
+ "on-plus-two": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 16%)",
82
+ "on-plus-one": "var(--rm-color-black)",
83
+ "on-base": "var(--rm-color-white)",
84
+ "on-minus-one": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 94%)",
85
+ "on-minus-two": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 90%)",
86
+ "on-minus-three": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 86%)",
87
+ "on-minus-four": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 84%)",
88
+ "on-minus-five": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%)",
89
+ "on-minus-six": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 94%)",
90
+ "on-minus-seven": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 96%)",
91
+ "on-minus-eight": "hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 98%)",
92
+ "on-minus-max": "var(--rm-color-white)"
93
+ },
94
+ "alerts": {
95
+ "warning": {
96
+ "h": "47",
97
+ "s": "100%",
98
+ "l": "61%",
99
+ "plus-max": "var(--rm-color-white)",
100
+ "plus-eight": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 98%)",
101
+ "plus-seven": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 96%)",
102
+ "plus-six": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 94%)",
103
+ "plus-five": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 90%)",
104
+ "plus-four": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 84%)",
105
+ "plus-three": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 70%)",
106
+ "plus-two": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 64%)",
107
+ "plus-one": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 52%)",
108
+ "base": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 40%)",
109
+ "minus-one": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 36%)",
110
+ "minus-two": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 32%)",
111
+ "minus-three": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 28%)",
112
+ "minus-four": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 24%)",
113
+ "minus-five": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 20%)",
114
+ "minus-six": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 16%)",
115
+ "minus-seven": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%)",
116
+ "minus-eight": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%)",
117
+ "minus-max": "var(--rm-color-black)",
118
+ "on-plus-max": "var(--rm-color-black)",
119
+ "on-plus-eight": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%)",
120
+ "on-plus-seven": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%)",
121
+ "on-plus-six": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 16%)",
122
+ "on-plus-five": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 20%)",
123
+ "on-plus-four": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 24%)",
124
+ "on-plus-three": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 20%)",
125
+ "on-plus-two": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 16%)",
126
+ "on-plus-one": "var(--rm-color-white)",
127
+ "on-base": "var(--rm-color-white)",
128
+ "on-minus-one": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 94%)",
129
+ "on-minus-two": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 90%)",
130
+ "on-minus-three": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 86%)",
131
+ "on-minus-four": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 84%)",
132
+ "on-minus-five": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%)",
133
+ "on-minus-six": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 94%)",
134
+ "on-minus-seven": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 96%)",
135
+ "on-minus-eight": "hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 98%)",
136
+ "on-minus-max": "var(--rm-color-white)"
137
+ },
138
+ "danger": {
139
+ "h": "0",
140
+ "s": "99%",
141
+ "l": "76%",
142
+ "plus-max": "var(--rm-color-white)",
143
+ "plus-eight": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 98%)",
144
+ "plus-seven": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 96%)",
145
+ "plus-six": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 94%)",
146
+ "plus-five": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 90%)",
147
+ "plus-four": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 84%)",
148
+ "plus-three": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 70%)",
149
+ "plus-two": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 64%)",
150
+ "plus-one": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 52%)",
151
+ "base": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 40%)",
152
+ "minus-one": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 36%)",
153
+ "minus-two": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 32%)",
154
+ "minus-three": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 28%)",
155
+ "minus-four": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 24%)",
156
+ "minus-five": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 20%)",
157
+ "minus-six": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 16%)",
158
+ "minus-seven": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%)",
159
+ "minus-eight": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%)",
160
+ "minus-max": "var(--rm-color-black)",
161
+ "on-plus-max": "var(--rm-color-black)",
162
+ "on-plus-eight": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%)",
163
+ "on-plus-seven": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%)",
164
+ "on-plus-six": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 16%)",
165
+ "on-plus-five": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 20%)",
166
+ "on-plus-four": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 24%)",
167
+ "on-plus-three": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 20%)",
168
+ "on-plus-two": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 16%)",
169
+ "on-plus-one": "var(--rm-color-white)",
170
+ "on-base": "var(--rm-color-white)",
171
+ "on-minus-one": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 94%)",
172
+ "on-minus-two": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 90%)",
173
+ "on-minus-three": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 86%)",
174
+ "on-minus-four": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 84%)",
175
+ "on-minus-five": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%)",
176
+ "on-minus-six": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 94%)",
177
+ "on-minus-seven": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 96%)",
178
+ "on-minus-eight": "hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 98%)",
179
+ "on-minus-max": "var(--rm-color-white)"
180
+ },
181
+ "info": {
182
+ "h": "216",
183
+ "s": "58%",
184
+ "l": "48%",
185
+ "plus-max": "var(--rm-color-white)",
186
+ "plus-eight": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 98%)",
187
+ "plus-seven": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 96%)",
188
+ "plus-six": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 94%)",
189
+ "plus-five": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 90%)",
190
+ "plus-four": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 84%)",
191
+ "plus-three": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 70%)",
192
+ "plus-two": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 64%)",
193
+ "plus-one": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 52%)",
194
+ "base": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 40%)",
195
+ "minus-one": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 36%)",
196
+ "minus-two": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 32%)",
197
+ "minus-three": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 28%)",
198
+ "minus-four": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 24%)",
199
+ "minus-five": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 20%)",
200
+ "minus-six": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 16%)",
201
+ "minus-seven": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%)",
202
+ "minus-eight": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%)",
203
+ "minus-max": "var(--rm-color-black)",
204
+ "on-plus-max": "var(--rm-color-black)",
205
+ "on-plus-eight": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%)",
206
+ "on-plus-seven": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%)",
207
+ "on-plus-six": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 16%)",
208
+ "on-plus-five": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 20%)",
209
+ "on-plus-four": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 24%)",
210
+ "on-plus-three": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 20%)",
211
+ "on-plus-two": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 16%)",
212
+ "on-plus-one": "var(--rm-color-white)",
213
+ "on-base": "var(--rm-color-white)",
214
+ "on-minus-one": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 94%)",
215
+ "on-minus-two": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 90%)",
216
+ "on-minus-three": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 86%)",
217
+ "on-minus-four": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 84%)",
218
+ "on-minus-five": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%)",
219
+ "on-minus-six": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 94%)",
220
+ "on-minus-seven": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 96%)",
221
+ "on-minus-eight": "hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 98%)",
222
+ "on-minus-max": "var(--rm-color-white)"
223
+ },
224
+ "notice": {
225
+ "h": "130",
226
+ "s": "61%",
227
+ "l": "64%",
228
+ "plus-max": "var(--rm-color-white)",
229
+ "plus-eight": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 98%)",
230
+ "plus-seven": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 96%)",
231
+ "plus-six": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 94%)",
232
+ "plus-five": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 90%)",
233
+ "plus-four": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 84%)",
234
+ "plus-three": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 70%)",
235
+ "plus-two": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 64%)",
236
+ "plus-one": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 52%)",
237
+ "base": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 40%)",
238
+ "minus-one": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 36%)",
239
+ "minus-two": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 32%)",
240
+ "minus-three": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 28%)",
241
+ "minus-four": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 24%)",
242
+ "minus-five": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 20%)",
243
+ "minus-six": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 16%)",
244
+ "minus-seven": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%)",
245
+ "minus-eight": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%)",
246
+ "minus-max": "var(--rm-color-black)",
247
+ "on-plus-max": "var(--rm-color-black)",
248
+ "on-plus-eight": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%)",
249
+ "on-plus-seven": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%)",
250
+ "on-plus-six": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 16%)",
251
+ "on-plus-five": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 20%)",
252
+ "on-plus-four": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 24%)",
253
+ "on-plus-three": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 20%)",
254
+ "on-plus-two": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 16%)",
255
+ "on-plus-one": "var(--rm-color-white)",
256
+ "on-base": "var(--rm-color-white)",
257
+ "on-minus-one": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 94%)",
258
+ "on-minus-two": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 90%)",
259
+ "on-minus-three": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 86%)",
260
+ "on-minus-four": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 84%)",
261
+ "on-minus-five": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%)",
262
+ "on-minus-six": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 94%)",
263
+ "on-minus-seven": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 96%)",
264
+ "on-minus-eight": "hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 98%)",
265
+ "on-minus-max": "var(--rm-color-white)"
266
+ }
267
+ },
268
+ "background": "var(--rm-color-neutral-plus-eight)",
269
+ "on-background": "var(--rm-color-neutral-on-plus-eight)"
270
+ },
271
+ "radius": {
272
+ "small": "2px",
273
+ "medium": "4px",
274
+ "large": "8px",
275
+ "x-large": "16px",
276
+ "circle": "50%",
277
+ "pill": "9999px"
278
+ },
279
+ "border": {
280
+ "width": "1px",
281
+ "width-large": "2px",
282
+ "width-x-large": "4px",
283
+ "color": "var(--rm-color-neutral-plus-three)",
284
+ "none": "0 0 0 0",
285
+ "all": "0 0 0 var(--rm-border-width)",
286
+ "top": "0 calc(-1 * var(--rm-border-width)) 0 0",
287
+ "right": "var(--rm-border-width) 0 0 0",
288
+ "bottom": "0 var(--rm-border-width) 0 0",
289
+ "left": "calc(-1 * var(--rm-border-width)) 0 0 0",
290
+ "y": "var(--rm-border-top) var(--rm-border-color), var(--rm-border-bottom) var(--rm-border-color)",
291
+ "x": "var(--rm-border-left) var(--rm-border-color), var(--rm-border-right) var(--rm-border-color)"
292
+ },
293
+ "font": {
294
+ "scale-unit": "1rem",
295
+ "x-small": "calc(var(--rm-font-scale-unit) * 1.2)",
296
+ "small": "calc(var(--rm-font-scale-unit) * 1.4)",
297
+ "medium": "calc(var(--rm-font-scale-unit) * 1.6)",
298
+ "large": "calc(var(--rm-font-scale-unit) * 1.8)",
299
+ "x-large": "calc(var(--rm-font-scale-unit) * 2.4)",
300
+ "2x-large": "calc(var(--rm-font-scale-unit) * 2.8)",
301
+ "3x-large": "calc(var(--rm-font-scale-unit) * 3.2)",
302
+ "4x-large": "calc(var(--rm-font-scale-unit) * 3.6)",
303
+ "5x-large": "calc(var(--rm-font-scale-unit) * 4.8)",
304
+ "weight": {
305
+ "thin": "100",
306
+ "extra-light": "200",
307
+ "light": "300",
308
+ "normal": "400",
309
+ "medium": "500",
310
+ "semi-bold": "600",
311
+ "bold": "700",
312
+ "extra-bold": "800",
313
+ "black": "900"
314
+ },
315
+ "family": "'Noto Sans', 'Noto Serif', sans-serif"
316
+ },
317
+ "line-height": {
318
+ "none": "0",
319
+ "densest": "1",
320
+ "denser": "1.15",
321
+ "dense": "1.3",
322
+ "base": "1.5",
323
+ "loose": "1.6",
324
+ "looser": "1.7",
325
+ "loosest": "1.8"
326
+ },
327
+ "letter-spacing": {
328
+ "navigation": "0.01rem",
329
+ "label": "0.04rem"
330
+ },
331
+ "transition": {
332
+ "input": "120ms",
333
+ "navigation": "200ms",
334
+ "sidebar": "300ms",
335
+ "modal": "300ms",
336
+ "panel": "400ms",
337
+ "flash": "5s"
338
+ },
339
+ "form": {
340
+ "dropdown": {
341
+ "arrow": "url(\"data"
342
+ }
343
+ },
344
+ "space": {
345
+ "scale-unit": "1rem",
346
+ "3x-small": "calc(var(--rm-space-scale-unit) * 0.2)",
347
+ "2x-small": "calc(var(--rm-space-scale-unit) * 0.4)",
348
+ "x-small": "calc(var(--rm-space-scale-unit) * 0.8)",
349
+ "small": "calc(var(--rm-space-scale-unit) * 1.2)",
350
+ "medium": "calc(var(--rm-space-scale-unit) * 1.6)",
351
+ "large": "calc(var(--rm-space-scale-unit) * 2)",
352
+ "x-large": "calc(var(--rm-space-scale-unit) * 2.4)",
353
+ "2x-large": "calc(var(--rm-space-scale-unit) * 2.8)",
354
+ "3x-large": "calc(var(--rm-space-scale-unit) * 4)",
355
+ "4x-large": "calc(var(--rm-space-scale-unit) * 8)"
356
+ },
357
+ "shadow": {
358
+ "x-small": "0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%)",
359
+ "small": "0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%)",
360
+ "medium": "0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%)",
361
+ "large": "0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%)",
362
+ "x-large": "0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%)"
363
+ },
364
+ "z-index": {
365
+ "header": "500",
366
+ "footer": "500",
367
+ "drawer": "700",
368
+ "dialog": "800",
369
+ "dialog-backdrop": "801",
370
+ "dialog-content": "802",
371
+ "dropdown": "900",
372
+ "alert-group": "950",
373
+ "tooltip": "1000"
374
+ },
375
+ "input-height": {
376
+ "small": "2.4rem",
377
+ "medium": "3.2rem",
378
+ "large": "4.4rem",
379
+ "x-large": "5.6rem"
380
+ },
381
+ "input": {
382
+ "outer": {
383
+ "focus": "0 0 0 var(--rm-border-width-large) var(--rm-color-primary-plus-four)"
384
+ },
385
+ "inner": {
386
+ "focus": "inset var(--rm-border-all) var(--rm-color-primary-minus-three)"
387
+ },
388
+ "focus": "var(--rm-input-inner-focus), var(--rm-input-outer-focus)"
389
+ }
390
+ }
391
+ }
package/package.json ADDED
@@ -0,0 +1,80 @@
1
+ {
2
+ "name": "@rolemodel/optics",
3
+ "version": "0.2.3",
4
+ "description": "Optics is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.",
5
+ "main": "dist/scss/optics.scss",
6
+ "scripts": {
7
+ "test": "exit 0",
8
+ "build": "npm run build:css && npm run build:scss && npm run build:tokens",
9
+ "build:css": "sass src/optics.scss dist/css/optics.css --load-path=node_modules/",
10
+ "build:scss": "rsync -a src/ dist/scss --exclude stories",
11
+ "build:tokens": "node build_token_json --source=src/core/tokens --output=dist/tokens/tokens.json",
12
+ "storybook": "start-storybook -p 6006",
13
+ "build-storybook": "build-storybook -o docs-build",
14
+ "lint": "npm run lint:js && npm run lint:css",
15
+ "lint-fix": "npm run lint:js --fix && npm run lint:css --fix",
16
+ "lint:js": "eslint 'src/stories/**/*.js'",
17
+ "lint:css": "stylelint 'src/**/*.(scss|css)'",
18
+ "prettier": "prettier -w .",
19
+ "prettier-check": "prettier -c ."
20
+ },
21
+ "repository": {
22
+ "type": "git",
23
+ "url": "git+https://github.com/RoleModel/optics.git"
24
+ },
25
+ "keywords": [
26
+ "Design",
27
+ "CSS",
28
+ "System",
29
+ "RoleModel",
30
+ "SCSS",
31
+ "Optics"
32
+ ],
33
+ "author": "RoleModel Software",
34
+ "license": "MIT",
35
+ "bugs": {
36
+ "url": "https://github.com/RoleModel/optics/issues"
37
+ },
38
+ "homepage": "https://github.com/RoleModel/optics#readme",
39
+ "publishConfig": {
40
+ "@RoleModel:registry": "https://npm.pkg.github.com"
41
+ },
42
+ "dependencies": {
43
+ "modern-css-reset": "^1.4.0",
44
+ "tom-select": "^2.0.0"
45
+ },
46
+ "devDependencies": {
47
+ "@babel/core": "^7.18.9",
48
+ "@storybook/addon-actions": "^6.5.9",
49
+ "@storybook/addon-docs": "^6.5.9",
50
+ "@storybook/addon-essentials": "^6.5.9",
51
+ "@storybook/addon-interactions": "^6.5.9",
52
+ "@storybook/addon-links": "^6.5.9",
53
+ "@storybook/addons": "^6.5.9",
54
+ "@storybook/builder-webpack4": "^6.5.9",
55
+ "@storybook/html": "^6.5.9",
56
+ "@storybook/manager-webpack4": "^6.5.9",
57
+ "@storybook/preset-scss": "^1.0.3",
58
+ "@storybook/testing-library": "^0.0.13",
59
+ "@storybook/theming": "^6.5.9",
60
+ "babel-loader": "^8.2.5",
61
+ "css-loader": "^5.2.7",
62
+ "eslint": "^8.29.0",
63
+ "eslint-config-prettier": "^8.5.0",
64
+ "eslint-config-standard": "^17.0.0",
65
+ "eslint-plugin-import": "^2.26.0",
66
+ "eslint-plugin-n": "^15.6.0",
67
+ "eslint-plugin-promise": "^6.1.1",
68
+ "postcss-scss": "^4.0.6",
69
+ "prettier": "^2.8.1",
70
+ "sass": "^1.53.0",
71
+ "sass-loader": "^10.1.1",
72
+ "style-loader": "^2.0.0",
73
+ "stylelint": "^14.16.0",
74
+ "stylelint-config-idiomatic-order": "^9.0.0",
75
+ "stylelint-config-prettier-scss": "^0.0.1",
76
+ "stylelint-config-standard-scss": "^6.1.0",
77
+ "stylelint-prettier": "^2.0.0",
78
+ "stylelint-scss": "^4.3.0"
79
+ }
80
+ }