@rolemodel/optics 1.12.0 → 2.0.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.
Files changed (52) hide show
  1. package/.github/workflows/linting.yml +0 -2
  2. package/.stylelintrc.json +9 -9
  3. package/.yarn/install-state.gz +0 -0
  4. package/NEW_COMPONENT.md +23 -33
  5. package/README.md +9 -11
  6. package/build_token_json.js +1 -6
  7. package/dist/css/addons/panel.css +65 -0
  8. package/dist/{scss/addons/tom-select.scss → css/addons/tom-select.css} +13 -15
  9. package/dist/{scss → css}/components/form.css +1 -1
  10. package/dist/{scss/components/icon.scss → css/components/icon.css} +10 -8
  11. package/dist/{scss → css}/components/sidebar.css +1 -1
  12. package/dist/{scss/core/base.scss → css/core/base.css} +3 -3
  13. package/dist/{scss/core/tokens/base_tokens.scss → css/core/tokens/base_tokens.css} +102 -160
  14. package/dist/{scss/core/tokens/index.scss → css/core/tokens/index.css} +0 -1
  15. package/dist/css/core/tokens/scale_color_tokens.css +1498 -0
  16. package/dist/{scss/core/utilities.scss → css/core/utilities.css} +20 -18
  17. package/dist/css/optics.css +10 -4223
  18. package/dist/css/optics.min.css +4907 -0
  19. package/dist/{scss/recipes/aligned-header.scss → css/recipes/aligned-header.css} +2 -6
  20. package/dist/tokens/tokens.json +14 -566
  21. package/package.json +9 -14
  22. package/postcss.config.js +3 -0
  23. package/dist/css/optics.css.map +0 -1
  24. package/dist/scss/addons/panel.scss +0 -61
  25. package/dist/scss/core/tokens/dark_mode_tokens.scss +0 -479
  26. package/dist/scss/core/tokens/scale_color_tokens.scss +0 -468
  27. package/dist/scss/optics.scss +0 -13
  28. /package/dist/{scss → css}/components/accordion.css +0 -0
  29. /package/dist/{scss → css}/components/alert.css +0 -0
  30. /package/dist/{scss → css}/components/avatar.css +0 -0
  31. /package/dist/{scss → css}/components/badge.css +0 -0
  32. /package/dist/{scss → css}/components/breadcrumbs.css +0 -0
  33. /package/dist/{scss → css}/components/button.css +0 -0
  34. /package/dist/{scss → css}/components/button_group.css +0 -0
  35. /package/dist/{scss → css}/components/card.css +0 -0
  36. /package/dist/{scss → css}/components/confirm-dialog.css +0 -0
  37. /package/dist/{scss → css}/components/divider.css +0 -0
  38. /package/dist/{scss/components/index.scss → css/components/index.css} +0 -0
  39. /package/dist/{scss → css}/components/modal.css +0 -0
  40. /package/dist/{scss → css}/components/navbar.css +0 -0
  41. /package/dist/{scss → css}/components/pagination.css +0 -0
  42. /package/dist/{scss → css}/components/side_panel.css +0 -0
  43. /package/dist/{scss → css}/components/spinner.css +0 -0
  44. /package/dist/{scss → css}/components/switch.css +0 -0
  45. /package/dist/{scss → css}/components/tab.css +0 -0
  46. /package/dist/{scss → css}/components/table.css +0 -0
  47. /package/dist/{scss → css}/components/tag.css +0 -0
  48. /package/dist/{scss → css}/components/text_pair.css +0 -0
  49. /package/dist/{scss → css}/components/tooltip.css +0 -0
  50. /package/dist/{scss/core/layout.scss → css/core/layout.css} +0 -0
  51. /package/dist/{scss → css}/recipes/16six-sidebar.css +0 -0
  52. /package/dist/{scss → css}/recipes/domains-sidebar.css +0 -0
package/dist/{scss/core/utilities.scss → css/core/utilities.css} RENAMED
@@ -1,4 +1,4 @@
1
- // Container Properties
1
+ /* Container Properties */
2
2
 
3
3
  .container {
4
4
  width: 100%;
@@ -23,7 +23,7 @@
23
23
  max-width: var(--op-breakpoint-x-small);
24
24
  }
25
25
 
26
- // Width Properties
26
+ /* Width Properties */
27
27
 
28
28
  .full-width {
29
29
  width: 100%;
@@ -65,7 +65,7 @@
65
65
  width: calc(100% * 1 / 3);
66
66
  }
67
67
 
68
- // Flex Properties
68
+ /* Flex Properties */
69
69
 
70
70
  .flex {
71
71
  display: flex;
@@ -91,7 +91,7 @@
91
91
  flex-grow: 1;
92
92
  }
93
93
 
94
- // Gap Properties
94
+ /* Gap Properties */
95
95
  .gap-xxs {
96
96
  gap: var(--op-space-2x-small);
97
97
 
@@ -128,7 +128,7 @@
128
128
  --op-gap: var(--op-space-x-large);
129
129
  }
130
130
 
131
- // Justify Content
131
+ /* Justify Content */
132
132
 
133
133
  .justify-start {
134
134
  justify-content: flex-start;
@@ -150,7 +150,7 @@
150
150
  justify-content: space-around;
151
151
  }
152
152
 
153
- // Align Items
153
+ /* Align Items */
154
154
 
155
155
  .items-stretch {
156
156
  align-items: stretch;
@@ -172,7 +172,7 @@
172
172
  align-items: baseline;
173
173
  }
174
174
 
175
- // Align Self
175
+ /* Align Self */
176
176
 
177
177
  .self-auto {
178
178
  align-self: auto;
@@ -198,7 +198,7 @@
198
198
  align-self: baseline;
199
199
  }
200
200
 
201
- // Text Alignment
201
+ /* Text Alignment */
202
202
 
203
203
  .text-left {
204
204
  text-align: left;
@@ -216,7 +216,7 @@
216
216
  text-align: justify;
217
217
  }
218
218
 
219
- // Box Margin
219
+ /* Box Margin */
220
220
 
221
221
  .margin-xl {
222
222
  margin: var(--op-space-x-large);
@@ -246,7 +246,7 @@
246
246
  margin: auto;
247
247
  }
248
248
 
249
- // Vertical Margin
249
+ /* Vertical Margin */
250
250
 
251
251
  .margin-y-xl {
252
252
  margin-top: var(--op-space-x-large);
@@ -278,7 +278,7 @@
278
278
  margin-bottom: 0;
279
279
  }
280
280
 
281
- // Horizontal Margin
281
+ /* Horizontal Margin */
282
282
 
283
283
  .margin-x-xl {
284
284
  margin-right: var(--op-space-x-large);
@@ -310,7 +310,7 @@
310
310
  margin-left: 0;
311
311
  }
312
312
 
313
- // Top Margin
313
+ /* Top Margin */
314
314
 
315
315
  .margin-top-xl {
316
316
  margin-top: var(--op-space-x-large);
@@ -336,7 +336,7 @@
336
336
  margin-top: 0;
337
337
  }
338
338
 
339
- // Bottom Margin
339
+ /* Bottom Margin */
340
340
 
341
341
  .margin-bottom-xl {
342
342
  margin-bottom: var(--op-space-x-large);
@@ -362,7 +362,7 @@
362
362
  margin-bottom: 0;
363
363
  }
364
364
 
365
- // Right Margin
365
+ /* Right Margin */
366
366
 
367
367
  .margin-right-xl {
368
368
  margin-right: var(--op-space-x-large);
@@ -388,7 +388,7 @@
388
388
  margin-left: 0;
389
389
  }
390
390
 
391
- // Left Margin
391
+ /* Left Margin */
392
392
 
393
393
  .margin-left-xl {
394
394
  margin-left: var(--op-space-x-large);
@@ -414,9 +414,11 @@
414
414
  margin-left: 0;
415
415
  }
416
416
 
417
- // Accessibility
418
- // Use the following class to hide accessibility text that is needed for screenreaders but needs to be hidden from regular users.
419
- // https: //snook.ca/archives/html_and_css/hiding-content-for-accessibility
417
+ /*
418
+ Accessibility
419
+ Use the following class to hide accessibility text that is needed for screen readers but needs to be hidden from regular users.
420
+ https: //snook.ca/archives/html_and_css/hiding-content-for-accessibility
421
+ */
420
422
  .sr-only {
421
423
  position: absolute !important;
422
424
  overflow: hidden;