@rolemodel/optics 0.3.1 → 0.4.1

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 (37) hide show
  1. package/.babelrc.json +14 -0
  2. package/.github/pull_request_template.md +1 -0
  3. package/.github/workflows/publish-storybook.yml +1 -1
  4. package/.prettierignore +2 -0
  5. package/README.md +10 -14
  6. package/dist/css/optics.css +961 -446
  7. package/dist/css/optics.css.map +1 -1
  8. package/dist/scss/addons/tom-select.scss +1 -4
  9. package/dist/scss/components/alert.scss +56 -38
  10. package/dist/scss/components/avatar.scss +96 -0
  11. package/dist/scss/components/badge.scss +8 -3
  12. package/dist/scss/components/button.scss +168 -97
  13. package/dist/scss/components/button_group.scss +23 -5
  14. package/dist/scss/components/confirm-dialog.scss +88 -0
  15. package/dist/scss/components/divider.scss +59 -0
  16. package/dist/scss/components/form.scss +180 -49
  17. package/dist/scss/components/index.scss +6 -1
  18. package/dist/scss/components/modal.scss +156 -0
  19. package/dist/scss/components/pagination.scss +28 -0
  20. package/dist/scss/components/sidebar.scss +83 -159
  21. package/dist/scss/components/table.scss +22 -17
  22. package/dist/scss/components/tooltip.scss +136 -0
  23. package/dist/scss/core/tokens/base_tokens.scss +10 -5
  24. package/dist/scss/recipes/16six-sidebar.scss +32 -61
  25. package/dist/scss/recipes/domains-sidebar.scss +24 -44
  26. package/dist/tokens/tokens.json +9 -8
  27. package/package.json +30 -24
  28. package/.storybook/ModeSwitcher.jsx +0 -98
  29. package/.storybook/documentation.scss +0 -93
  30. package/.storybook/main.js +0 -11
  31. package/.storybook/manager.js +0 -22
  32. package/.storybook/preview.js +0 -12
  33. package/.storybook/rolemodelTheme.js +0 -10
  34. package/dist/scss/addons/rails-modal-and-panel/index.scss +0 -2
  35. package/dist/scss/addons/rails-modal-and-panel/modal.scss +0 -111
  36. package/dist/scss/components/flash.scss +0 -58
  37. /package/dist/scss/addons/{rails-modal-and-panel/panel.scss → panel.scss} +0 -0
package/dist/scss/addons/rails-modal-and-panel/modal.scss DELETED
@@ -1,111 +0,0 @@
1
- .modal {
2
- // Modals
3
- --op-modal-width: 564px;
4
-
5
- position: fixed;
6
- z-index: var(--op-z-index-dialog);
7
- top: 0;
8
- right: 0;
9
- bottom: 0;
10
- left: 0;
11
- display: flex;
12
- overflow: hidden;
13
- align-items: center;
14
- justify-content: center;
15
-
16
- // Prevent Chrome on Windows from adding a focus outline. For details, see
17
- // https://github.com/twbs/bootstrap/pull/10951.
18
- outline: 0;
19
- visibility: hidden;
20
-
21
- /* We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
22
- gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
23
- See also https://github.com/twbs/bootstrap/issues/17695 */
24
- }
25
-
26
- .modal__backdrop {
27
- position: fixed;
28
- z-index: var(--op-z-index-dialog-backdrop);
29
- top: 0;
30
- right: 0;
31
- bottom: 0;
32
- left: 0;
33
- background: black;
34
- opacity: 0;
35
- transition: var(--op-transition-modal);
36
- visibility: hidden;
37
- }
38
-
39
- .modal__content {
40
- z-index: var(--op-z-index-dialog-content);
41
- width: var(--op-modal-width);
42
- max-height: 500px;
43
- padding: var(--op-space-large);
44
- border-radius: var(--op-radius-large);
45
- background: var(--op-color-background);
46
- color: var(--op-color-on-background);
47
- opacity: 0;
48
- overflow-y: auto;
49
- transform: scale(0.7);
50
- transition: var(--op-transition-modal);
51
- }
52
-
53
- .modal--active {
54
- display: flex;
55
- visibility: visible;
56
-
57
- .modal__content {
58
- opacity: 1;
59
- transform: scale(1);
60
- }
61
-
62
- .modal__backdrop {
63
- opacity: 0.5;
64
- visibility: visible;
65
- }
66
- }
67
-
68
- .modal__body {
69
- overflow-y: auto;
70
- }
71
-
72
- .modal__close {
73
- /* stylelint-disable scss/at-extend-no-missing-placeholder */
74
- @extend .btn--icon;
75
- @extend .btn--no-border;
76
-
77
- color: var(--op-color-neutral-minus-seven);
78
- cursor: pointer;
79
- /* stylelint-enable scss/at-extend-no-missing-placeholder */
80
-
81
- float: right;
82
-
83
- &:hover:not(:disabled, .btn--disabled) {
84
- color: var(--op-color-neutral-minus-seven);
85
- }
86
- }
87
-
88
- @mixin modal-dark {
89
- .modal__content {
90
- background: var(--op-color-neutral-plus-seven);
91
- color: var(--op-color-neutral-on-plus-seven);
92
- }
93
-
94
- .modal__close {
95
- &:hover {
96
- background: var(--op-color-background);
97
- }
98
- }
99
- }
100
-
101
- // Follow system preference unless forced to light
102
- @media (prefers-color-scheme: dark) {
103
- :root:not([data-theme-mode='light']) {
104
- @include modal-dark;
105
- }
106
- }
107
-
108
- // Force design system to dark
109
- :root[data-theme-mode='dark'] {
110
- @include modal-dark;
111
- }
package/dist/scss/components/flash.scss DELETED
@@ -1,58 +0,0 @@
1
- %flash-global {
2
- position: fixed;
3
- z-index: var(--op-z-index-alert-group);
4
- top: var(--op-space-large);
5
- right: var(--op-space-large);
6
- display: inline-grid;
7
- width: auto;
8
- align-items: center;
9
- justify-content: center;
10
- padding: var(--op-space-x-small) var(--op-space-medium);
11
- border-color: var(--op-color-on-background);
12
- border-radius: var(--op-radius-small);
13
- border-left-width: var(--op-border-width-x-large);
14
- border-left-style: solid;
15
- animation: var(--op-animation-flash);
16
- background: var(--op-color-background);
17
- box-shadow: var(--op-shadow-x-small);
18
- color: var(--op-color-on-background);
19
- font-size: var(--op-font-small);
20
- gap: var(--op-space-small);
21
- grid-auto-flow: column;
22
-
23
- // Modifiers
24
- &.flash--notice {
25
- border-color: var(--op-color-alerts-notice-base);
26
- color: var(--op-color-alerts-notice-base);
27
- }
28
-
29
- &.flash--info {
30
- border-color: var(--op-color-alerts-info-base);
31
- color: var(--op-color-alerts-info-base);
32
- }
33
-
34
- &.flash--alert {
35
- border-color: var(--op-color-alerts-danger-base);
36
- color: var(--op-color-alerts-danger-base);
37
- }
38
-
39
- &.flash--warning {
40
- border-color: var(--op-color-alerts-warning-base);
41
- color: var(--op-color-alerts-warning-base);
42
- }
43
-
44
- // Elements
45
- .flash__message-type {
46
- color: var(--op-color-on-background);
47
- font-weight: bold;
48
- }
49
-
50
- .flash__message {
51
- color: var(--op-color-on-background);
52
- font-size: var(--op-font-x-small);
53
- }
54
- }
55
-
56
- .flash {
57
- @extend %flash-global;
58
- }