@rolemodel/optics 0.2.4 → 0.3.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 (30) hide show
  1. package/.github/release.yml +53 -0
  2. package/.github/workflows/publish-storybook.yml +11 -3
  3. package/.storybook/documentation.scss +64 -36
  4. package/.storybook/main.js +1 -0
  5. package/.stylelintrc.json +1 -1
  6. package/README.md +15 -0
  7. package/dist/css/optics.css +1911 -1325
  8. package/dist/css/optics.css.map +1 -1
  9. package/dist/scss/addons/rails-modal-and-panel/modal.scss +38 -13
  10. package/dist/scss/addons/rails-modal-and-panel/panel.scss +38 -13
  11. package/dist/scss/addons/tom-select.scss +22 -22
  12. package/dist/scss/components/alert.scss +48 -48
  13. package/dist/scss/components/badge.scss +20 -20
  14. package/dist/scss/components/button.scss +72 -72
  15. package/dist/scss/components/card.scss +14 -14
  16. package/dist/scss/components/flash.scss +24 -24
  17. package/dist/scss/components/form.scss +48 -48
  18. package/dist/scss/components/icon.scss +32 -32
  19. package/dist/scss/components/sidebar.scss +67 -67
  20. package/dist/scss/components/table.scss +26 -26
  21. package/dist/scss/core/base.scss +16 -16
  22. package/dist/scss/core/layout.scss +8 -8
  23. package/dist/scss/core/tokens/base_tokens.scss +223 -123
  24. package/dist/scss/core/tokens/dark_mode_tokens.scss +409 -262
  25. package/dist/scss/core/tokens/scale_color_tokens.scss +408 -240
  26. package/dist/scss/core/utilities.scss +74 -70
  27. package/dist/scss/recipes/16six-sidebar.scss +17 -17
  28. package/dist/scss/recipes/domains-sidebar.scss +9 -9
  29. package/dist/tokens/tokens.json +567 -276
  30. package/package.json +4 -2
package/dist/scss/components/button.scss CHANGED
@@ -1,64 +1,64 @@
1
1
  %btn-focus-state {
2
- box-shadow: var(--rm-input-focus);
2
+ box-shadow: var(--op-input-focus);
3
3
  outline: none;
4
4
  }
5
5
 
6
6
  %btn-global {
7
7
  // Public API (allowed to be overridden)
8
- --_rm-btn-height-small: var(--rm-input-height-small);
9
- --_rm-btn-height-medium: var(--rm-input-height-medium);
10
- --_rm-btn-height-large: var(--rm-input-height-large);
11
- --_rm-font-small: var(--rm-font-x-small);
12
- --_rm-font-medium: var(--rm-font-small);
13
- --_rm-font-large: var(--rm-font-medium);
8
+ --_op-btn-height-small: var(--op-input-height-small);
9
+ --_op-btn-height-medium: var(--op-input-height-medium);
10
+ --_op-btn-height-large: var(--op-input-height-large);
11
+ --_op-btn-font-small: var(--op-font-x-small);
12
+ --_op-btn-font-medium: var(--op-font-small);
13
+ --_op-btn-font-large: var(--op-font-medium);
14
14
 
15
15
  // Private API (don't touch these)
16
- --__rm-btn-height: var(--_rm-btn-height-medium);
17
- --__rm-btn-font-size: var(--_rm-font-medium);
16
+ --__op-btn-height: var(--_op-btn-height-medium);
17
+ --__op-btn-font-size: var(--_op-btn-font-medium);
18
18
 
19
19
  display: inline-flex;
20
- height: var(--__rm-btn-height);
20
+ height: var(--__op-btn-height);
21
21
  align-items: center;
22
22
  justify-content: center;
23
- padding: 0 var(--rm-space-medium);
24
- border-radius: var(--rm-radius-large);
23
+ padding: 0 var(--op-space-medium);
24
+ border-radius: var(--op-radius-large);
25
25
  appearance: none;
26
26
  cursor: pointer;
27
- font-size: var(--__rm-btn-font-size);
28
- font-weight: var(--rm-font-weight-medium);
29
- gap: var(--rm-space-x-small);
27
+ font-size: var(--__op-btn-font-size);
28
+ font-weight: var(--op-font-weight-medium);
29
+ gap: var(--op-space-x-small);
30
30
  text-align: center;
31
31
  text-decoration: none;
32
- transition: all var(--rm-transition-input);
32
+ transition: var(--op-transition-input);
33
33
  white-space: nowrap;
34
34
 
35
35
  // Pill Modifier
36
36
  &.btn--pill {
37
- border-radius: var(--rm-radius-pill);
37
+ border-radius: var(--op-radius-pill);
38
38
  }
39
39
 
40
40
  // Icon Modifier
41
41
  &.btn--icon {
42
- width: var(--__rm-btn-height);
43
- min-width: var(--__rm-btn-height);
42
+ width: var(--__op-btn-height);
43
+ min-width: var(--__op-btn-height);
44
44
  padding: 0;
45
- border-radius: var(--rm-radius-circle);
45
+ border-radius: var(--op-radius-circle);
46
46
  }
47
47
 
48
48
  // Size Modifiers
49
49
  &.btn--small {
50
- --__rm-btn-height: var(--_rm-btn-height-small);
51
- --__rm-btn-font-size: var(--_rm-font-small);
50
+ --__op-btn-height: var(--_op-btn-height-small);
51
+ --__op-btn-font-size: var(--_op-btn-font-small);
52
52
  }
53
53
 
54
54
  &.btn--medium {
55
- --__rm-btn-height: var(--_rm-btn-height-medium);
56
- --__rm-btn-font-size: var(--_rm-font-medium);
55
+ --__op-btn-height: var(--_op-btn-height-medium);
56
+ --__op-btn-font-size: var(--_op-btn-font-medium);
57
57
  }
58
58
 
59
59
  &.btn--large {
60
- --__rm-btn-height: var(--_rm-btn-height-large);
61
- --__rm-btn-font-size: var(--_rm-font-large);
60
+ --__op-btn-height: var(--_op-btn-height-large);
61
+ --__op-btn-font-size: var(--_op-btn-font-large);
62
62
  }
63
63
 
64
64
  // Disabled Modifier
@@ -98,14 +98,14 @@
98
98
 
99
99
  // https://uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/
100
100
  @media (max-width: $breakpoint-small) {
101
- --__rm-btn-height: var(--_rm-btn-height-large);
102
- --__rm-btn-font-size: var(--_rm-font-large);
101
+ --__op-btn-height: var(--_op-btn-height-large);
102
+ --__op-btn-font-size: var(--_op-btn-font-large);
103
103
 
104
104
  &.btn--small,
105
105
  &.btn--medium,
106
106
  &.btn--large {
107
- --__rm-btn-height: var(--_rm-btn-height-large);
108
- --__rm-btn-font-size: var(--_rm-font-large);
107
+ --__op-btn-height: var(--_op-btn-height-large);
108
+ --__op-btn-font-size: var(--_op-btn-font-large);
109
109
  }
110
110
  }
111
111
  }
@@ -114,20 +114,20 @@
114
114
  @extend %btn-global;
115
115
 
116
116
  background-color: transparent;
117
- box-shadow: var(--rm-border-all) var(--rm-border-color);
118
- color: var(--rm-color-neutral-minus-max);
117
+ box-shadow: var(--op-border-all) var(--op-border-color);
118
+ color: var(--op-color-neutral-minus-max);
119
119
 
120
120
  &:not(:disabled, .btn--disabled):hover {
121
- background-color: var(--rm-color-neutral-plus-seven);
122
- color: var(--rm-color-neutral-on-plus-seven);
121
+ background-color: var(--op-color-neutral-plus-seven);
122
+ color: var(--op-color-neutral-on-plus-seven);
123
123
  }
124
124
 
125
125
  &.btn--no-border {
126
- box-shadow: var(--rm-border-all) transparent;
126
+ box-shadow: var(--op-border-all) transparent;
127
127
 
128
128
  &:not(:disabled, .btn--disabled):hover {
129
129
  background-color: transparent;
130
- color: var(--rm-color-neutral-minus-three);
130
+ color: var(--op-color-neutral-minus-three);
131
131
  }
132
132
  }
133
133
  }
@@ -135,37 +135,37 @@
135
135
  .btn-primary {
136
136
  @extend %btn-global;
137
137
 
138
- background-color: var(--rm-color-primary-base);
139
- box-shadow: var(--rm-border-all) var(--rm-color-primary-base);
140
- color: var(--rm-color-primary-on-base);
138
+ background-color: var(--op-color-primary-base);
139
+ box-shadow: var(--op-border-all) var(--op-color-primary-base);
140
+ color: var(--op-color-primary-on-base);
141
141
 
142
142
  &:not(:disabled, .btn--disabled):hover {
143
- background-color: var(--rm-color-primary-plus-one);
144
- box-shadow: var(--rm-border-all) var(--rm-color-primary-plus-one);
145
- color: var(--rm-color-primary-on-plus-one);
143
+ background-color: var(--op-color-primary-plus-one);
144
+ box-shadow: var(--op-border-all) var(--op-color-primary-plus-one);
145
+ color: var(--op-color-primary-on-plus-one);
146
146
  }
147
147
 
148
148
  &.btn--no-border {
149
149
  background-color: transparent;
150
150
  box-shadow: none;
151
- color: var(--rm-color-primary-base);
151
+ color: var(--op-color-primary-base);
152
152
 
153
153
  &:not(:disabled, .btn--disabled):hover {
154
154
  background-color: transparent;
155
155
  box-shadow: none;
156
- color: var(--rm-color-primary-plus-one);
156
+ color: var(--op-color-primary-plus-one);
157
157
  }
158
158
  }
159
159
 
160
160
  &.btn--outline {
161
- background-color: var(--rm-color-primary-plus-seven);
162
- box-shadow: var(--rm-border-all) var(--rm-color-primary-on-plus-seven);
163
- color: var(--rm-color-primary-on-plus-seven);
161
+ background-color: var(--op-color-primary-plus-seven);
162
+ box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
163
+ color: var(--op-color-primary-on-plus-seven);
164
164
 
165
165
  &:not(:disabled, .btn--disabled):hover {
166
- background-color: var(--rm-color-primary-plus-four);
167
- box-shadow: var(--rm-border-all) var(--rm-color-primary-on-plus-seven);
168
- color: var(--rm-color-primary-on-plus-four);
166
+ background-color: var(--op-color-primary-plus-four);
167
+ box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
168
+ color: var(--op-color-primary-on-plus-four);
169
169
  }
170
170
  }
171
171
  }
@@ -173,25 +173,25 @@
173
173
  .btn-secondary {
174
174
  @extend %btn-global;
175
175
 
176
- background-color: var(--rm-color-primary-plus-seven);
177
- box-shadow: var(--rm-border-all) var(--rm-color-primary-on-plus-seven);
178
- color: var(--rm-color-primary-on-plus-seven);
176
+ background-color: var(--op-color-primary-plus-seven);
177
+ box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
178
+ color: var(--op-color-primary-on-plus-seven);
179
179
 
180
180
  &:not(:disabled, .btn--disabled):hover {
181
- background-color: var(--rm-color-primary-plus-four);
182
- box-shadow: var(--rm-border-all) var(--rm-color-primary-on-plus-seven);
183
- color: var(--rm-color-primary-on-plus-four);
181
+ background-color: var(--op-color-primary-plus-four);
182
+ box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
183
+ color: var(--op-color-primary-on-plus-four);
184
184
  }
185
185
 
186
186
  &.btn--no-border {
187
187
  background-color: transparent;
188
188
  box-shadow: none;
189
- color: var(--rm-color-primary-base);
189
+ color: var(--op-color-primary-base);
190
190
 
191
191
  &:not(:disabled, .btn--disabled):hover {
192
192
  background-color: transparent;
193
193
  box-shadow: none;
194
- color: var(--rm-color-primary-plus-one);
194
+ color: var(--op-color-primary-plus-one);
195
195
  }
196
196
  }
197
197
  }
@@ -199,37 +199,37 @@
199
199
  .btn-delete {
200
200
  @extend %btn-global;
201
201
 
202
- background-color: var(--rm-color-alerts-danger-base);
203
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-danger-base);
204
- color: var(--rm-color-alerts-danger-on-base);
202
+ background-color: var(--op-color-alerts-danger-base);
203
+ box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
204
+ color: var(--op-color-alerts-danger-on-base);
205
205
 
206
206
  &:not(:disabled, .btn--disabled):hover {
207
- background-color: var(--rm-color-alerts-danger-plus-one);
208
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-danger-plus-one);
209
- color: var(--rm-color-alerts-danger-on-plus-one);
207
+ background-color: var(--op-color-alerts-danger-plus-one);
208
+ box-shadow: var(--op-border-all) var(--op-color-alerts-danger-plus-one);
209
+ color: var(--op-color-alerts-danger-on-plus-one);
210
210
  }
211
211
 
212
212
  &.btn--no-border {
213
213
  background-color: transparent;
214
214
  box-shadow: none;
215
- color: var(--rm-color-alerts-danger-base);
215
+ color: var(--op-color-alerts-danger-base);
216
216
 
217
217
  &:not(:disabled, .btn--disabled):hover {
218
218
  background-color: transparent;
219
219
  box-shadow: none;
220
- color: var(--rm-color-alerts-danger-plus-one);
220
+ color: var(--op-color-alerts-danger-plus-one);
221
221
  }
222
222
  }
223
223
 
224
224
  &.btn--outline {
225
- background-color: var(--rm-color-alerts-danger-plus-seven);
226
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-danger-on-plus-seven);
227
- color: var(--rm-color-alerts-danger-on-plus-seven);
225
+ background-color: var(--op-color-alerts-danger-plus-seven);
226
+ box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
227
+ color: var(--op-color-alerts-danger-on-plus-seven);
228
228
 
229
229
  &:not(:disabled, .btn--disabled):hover {
230
- background-color: var(--rm-color-alerts-danger-plus-four);
231
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-danger-on-plus-seven);
232
- color: var(--rm-color-alerts-danger-on-plus-four);
230
+ background-color: var(--op-color-alerts-danger-plus-four);
231
+ box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
232
+ color: var(--op-color-alerts-danger-on-plus-four);
233
233
  }
234
234
  }
235
235
  }
package/dist/scss/components/card.scss CHANGED
@@ -1,45 +1,45 @@
1
1
  %card-global {
2
2
  position: relative;
3
- border-radius: var(--rm-radius-medium);
4
- background-color: var(--rm-color-background);
5
- box-shadow: var(--rm-border-all) var(--rm-border-color);
6
- color: var(--rm-color-on-background);
3
+ border-radius: var(--op-radius-medium);
4
+ background-color: var(--op-color-background);
5
+ box-shadow: var(--op-border-all) var(--op-border-color);
6
+ color: var(--op-color-on-background);
7
7
  contain: paint;
8
- font-size: var(--rm-font-medium);
9
- line-height: var(--rm-line-height-base);
8
+ font-size: var(--op-font-medium);
9
+ line-height: var(--op-line-height-base);
10
10
 
11
11
  // Modifiers
12
12
  &.card--condensed {
13
13
  @include spacing-scales;
14
14
 
15
- --rm-space-scale-unit: 0.5rem;
15
+ --op-space-scale-unit: 0.5rem;
16
16
  }
17
17
 
18
18
  &.card--shadow-x-small {
19
- box-shadow: var(--rm-border-all) var(--rm-border-color), var(--rm-shadow-x-small);
19
+ box-shadow: var(--op-border-all) var(--op-border-color), var(--op-shadow-x-small);
20
20
  }
21
21
 
22
22
  &.card--shadow-small {
23
- box-shadow: var(--rm-border-all) var(--rm-border-color), var(--rm-shadow-small);
23
+ box-shadow: var(--op-border-all) var(--op-border-color), var(--op-shadow-small);
24
24
  }
25
25
 
26
26
  &.card--shadow-medium {
27
- box-shadow: var(--rm-border-all) var(--rm-border-color), var(--rm-shadow-medium);
27
+ box-shadow: var(--op-border-all) var(--op-border-color), var(--op-shadow-medium);
28
28
  }
29
29
 
30
30
  &.card--shadow-large {
31
- box-shadow: var(--rm-border-all) var(--rm-border-color), var(--rm-shadow-large);
31
+ box-shadow: var(--op-border-all) var(--op-border-color), var(--op-shadow-large);
32
32
  }
33
33
 
34
34
  &.card--shadow-x-large {
35
- box-shadow: var(--rm-border-all) var(--rm-border-color), var(--rm-shadow-x-large);
35
+ box-shadow: var(--op-border-all) var(--op-border-color), var(--op-shadow-x-large);
36
36
  }
37
37
 
38
38
  // Elements
39
39
  .card__header,
40
40
  .card__body,
41
41
  .card__footer {
42
- padding: var(--rm-space-medium);
42
+ padding: var(--op-space-medium);
43
43
  }
44
44
 
45
45
  .card__header {
@@ -61,5 +61,5 @@
61
61
  .card-padded {
62
62
  @extend %card-global;
63
63
 
64
- padding: var(--rm-space-medium);
64
+ padding: var(--op-space-medium);
65
65
  }
package/dist/scss/components/flash.scss CHANGED
@@ -1,55 +1,55 @@
1
1
  %flash-global {
2
2
  position: fixed;
3
- z-index: var(--rm-z-index-alert-group);
4
- top: var(--rm-space-large);
5
- right: var(--rm-space-large);
3
+ z-index: var(--op-z-index-alert-group);
4
+ top: var(--op-space-large);
5
+ right: var(--op-space-large);
6
6
  display: inline-grid;
7
7
  width: auto;
8
8
  align-items: center;
9
9
  justify-content: center;
10
- padding: var(--rm-space-x-small) var(--rm-space-medium);
11
- border-color: var(--rm-color-on-background);
12
- border-radius: var(--rm-radius-small);
13
- border-left-width: var(--rm-border-width-x-large);
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
14
  border-left-style: solid;
15
- animation: rm-slide-in-out-flash var(--rm-transition-flash) normal forwards;
16
- background: var(--rm-color-background);
17
- box-shadow: var(--rm-shadow-x-small);
18
- color: var(--rm-color-on-background);
19
- font-size: var(--rm-font-small);
20
- gap: var(--rm-space-small);
15
+ animation: var(--op-transition-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
21
  grid-auto-flow: column;
22
22
 
23
23
  // Modifiers
24
24
  &.flash--notice {
25
- border-color: var(--rm-color-alerts-notice-base);
26
- color: var(--rm-color-alerts-notice-base);
25
+ border-color: var(--op-color-alerts-notice-base);
26
+ color: var(--op-color-alerts-notice-base);
27
27
  }
28
28
 
29
29
  &.flash--info {
30
- border-color: var(--rm-color-alerts-info-base);
31
- color: var(--rm-color-alerts-info-base);
30
+ border-color: var(--op-color-alerts-info-base);
31
+ color: var(--op-color-alerts-info-base);
32
32
  }
33
33
 
34
34
  &.flash--alert {
35
- border-color: var(--rm-color-alerts-danger-base);
36
- color: var(--rm-color-alerts-danger-base);
35
+ border-color: var(--op-color-alerts-danger-base);
36
+ color: var(--op-color-alerts-danger-base);
37
37
  }
38
38
 
39
39
  &.flash--warning {
40
- border-color: var(--rm-color-alerts-warning-base);
41
- color: var(--rm-color-alerts-warning-base);
40
+ border-color: var(--op-color-alerts-warning-base);
41
+ color: var(--op-color-alerts-warning-base);
42
42
  }
43
43
 
44
44
  // Elements
45
45
  .flash__message-type {
46
- color: var(--rm-color-on-background);
46
+ color: var(--op-color-on-background);
47
47
  font-weight: bold;
48
48
  }
49
49
 
50
50
  .flash__message {
51
- color: var(--rm-color-on-background);
52
- font-size: var(--rm-font-x-small);
51
+ color: var(--op-color-on-background);
52
+ font-size: var(--op-font-x-small);
53
53
  }
54
54
  }
55
55
 
package/dist/scss/components/form.scss CHANGED
@@ -1,50 +1,50 @@
1
1
  %standard-input {
2
2
  // Private API (don't touch these)
3
- --__rm-input-height: var(--rm-input-height-large);
3
+ --__op-input-height: var(--op-input-height-large);
4
4
 
5
5
  display: block;
6
6
  width: 100%;
7
- min-width: var(--__rm-input-height);
8
- height: var(--__rm-input-height);
9
- padding: var(--rm-space-small) var(--rm-space-medium);
7
+ min-width: var(--__op-input-height);
8
+ height: var(--__op-input-height);
9
+ padding: var(--op-space-small) var(--op-space-medium);
10
10
  border: none;
11
- border-radius: var(--rm-radius-large);
12
- background-color: var(--rm-color-neutral-plus-max);
13
- box-shadow: var(--rm-border-all) var(--rm-border-color);
14
- color: var(--rm-color-neutral-on-plus-max);
11
+ border-radius: var(--op-radius-large);
12
+ background-color: var(--op-color-neutral-plus-max);
13
+ box-shadow: var(--op-border-all) var(--op-border-color);
14
+ color: var(--op-color-neutral-on-plus-max);
15
15
  cursor: text;
16
- font-size: var(--rm-font-small);
17
- font-weight: var(--rm-font-weight-light);
18
- line-height: var(--rm-line-height-base);
16
+ font-size: var(--op-font-small);
17
+ font-weight: var(--op-font-weight-light);
18
+ line-height: var(--op-line-height-base);
19
19
 
20
20
  &.form-control--read-only {
21
21
  height: fit-content;
22
- background-color: var(--rm-color-neutral-plus-seven);
22
+ background-color: var(--op-color-neutral-plus-seven);
23
23
  background-image: none;
24
24
  box-shadow: none;
25
- color: var(--rm-color-neutral-on-plus-seven);
25
+ color: var(--op-color-neutral-on-plus-seven);
26
26
  cursor: unset;
27
27
 
28
28
  &[type='color'] {
29
- height: var(--__rm-input-height);
29
+ height: var(--__op-input-height);
30
30
  }
31
31
  }
32
32
  }
33
33
 
34
34
  %dropdown-arrow {
35
- padding-right: var(--rm-space-3x-large);
35
+ padding-right: var(--op-space-3x-large);
36
36
  appearance: none;
37
- background: var(--rm-form-dropdown-arrow) center right no-repeat;
38
- background-position-x: calc(100% - ((var(--rm-space-3x-large) / 2) - (var(--rm-form-dropdown-arrow-width) / 2)));
37
+ background: var(--op-form-dropdown-arrow) center right no-repeat;
38
+ background-position-x: calc(100% - ((var(--op-space-3x-large) / 2) - (var(--op-form-dropdown-arrow-width) / 2)));
39
39
  cursor: pointer;
40
40
  }
41
41
 
42
42
  .form-label {
43
- color: var(--rm-color-on-background);
44
- font-size: var(--rm-font-small);
45
- font-weight: var(--rm-font-weight-normal);
46
- letter-spacing: var(--rm-letter-spacing-label);
47
- line-height: var(--rm-line-height-base);
43
+ color: var(--op-color-on-background);
44
+ font-size: var(--op-font-small);
45
+ font-weight: var(--op-font-weight-normal);
46
+ letter-spacing: var(--op-letter-spacing-label);
47
+ line-height: var(--op-line-height-base);
48
48
  }
49
49
 
50
50
  .form-control {
@@ -58,11 +58,11 @@
58
58
 
59
59
  &[type='radio'],
60
60
  &[type='checkbox'] {
61
- width: var(--rm-space-large);
62
- height: var(--rm-space-large);
61
+ width: var(--op-space-large);
62
+ height: var(--op-space-large);
63
63
  align-self: center;
64
64
  margin: 0;
65
- accent-color: var(--rm-color-primary-base);
65
+ accent-color: var(--op-color-primary-base);
66
66
  cursor: pointer;
67
67
  }
68
68
 
@@ -74,11 +74,11 @@
74
74
  &:focus-within,
75
75
  &:focus-visible,
76
76
  &:active {
77
- box-shadow: 0 0 0 var(--rm-border-width-large) var(--rm-color-primary-plus-four), var(--rm-input-focus);
77
+ box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-four), var(--op-input-focus);
78
78
  outline: none;
79
79
 
80
80
  &:hover:not(:disabled) {
81
- box-shadow: 0 0 0 var(--rm-border-width-large) var(--rm-color-primary-plus-four), var(--rm-input-focus);
81
+ box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-four), var(--op-input-focus);
82
82
  }
83
83
  }
84
84
  }
@@ -88,29 +88,29 @@ select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
88
88
  }
89
89
 
90
90
  select.form-control[multiple] {
91
- min-height: calc(2 * var(--__rm-input-height));
91
+ min-height: calc(2 * var(--__op-input-height));
92
92
  }
93
93
 
94
94
  textarea.form-control {
95
95
  @extend %standard-input;
96
96
 
97
- min-width: var(--__rm-input-height);
97
+ min-width: var(--__op-input-height);
98
98
  max-width: 100%;
99
- min-height: var(--__rm-input-height);
99
+ min-height: var(--__op-input-height);
100
100
  }
101
101
 
102
102
  .form-group--error {
103
103
  /* stylelint-disable no-descending-specificity */
104
104
  .form-control {
105
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-danger-minus-three);
105
+ box-shadow: var(--op-border-all) var(--op-color-alerts-danger-minus-three);
106
106
 
107
107
  &[type='radio'],
108
108
  &[type='checkbox'] {
109
109
  box-shadow: none;
110
110
 
111
111
  & + label {
112
- color: var(--rm-color-alerts-danger-minus-three);
113
- font-weight: var(--rm-font-weight-bold);
112
+ color: var(--op-color-alerts-danger-minus-three);
113
+ font-weight: var(--op-font-weight-bold);
114
114
  }
115
115
  }
116
116
  }
@@ -119,29 +119,29 @@ textarea.form-control {
119
119
 
120
120
  .form-error {
121
121
  width: fit-content;
122
- padding: var(--rm-space-2x-small) var(--rm-space-x-small);
123
- border-radius: var(--rm-radius-medium);
124
- background: var(--rm-color-alerts-danger-plus-seven);
125
- color: var(--rm-color-alerts-danger-on-plus-seven);
126
- font-size: var(--rm-font-x-small);
122
+ padding: var(--op-space-2x-small) var(--op-space-x-small);
123
+ border-radius: var(--op-radius-medium);
124
+ background: var(--op-color-alerts-danger-plus-seven);
125
+ color: var(--op-color-alerts-danger-on-plus-seven);
126
+ font-size: var(--op-font-x-small);
127
127
  }
128
128
 
129
129
  .form-hint {
130
130
  display: block;
131
- font-size: var(--rm-font-small);
131
+ font-size: var(--op-font-small);
132
132
  font-style: italic;
133
133
  }
134
134
 
135
135
  .form-error-summary {
136
- padding: var(--rm-space-large);
137
- border-radius: var(--rm-radius-large);
138
- margin-bottom: var(--rm-space-large);
139
- background-color: var(--rm-color-alerts-danger-plus-seven);
140
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-danger-on-plus-seven);
141
- color: var(--rm-color-alerts-danger-on-plus-seven);
136
+ padding: var(--op-space-large);
137
+ border-radius: var(--op-radius-large);
138
+ margin-bottom: var(--op-space-large);
139
+ background-color: var(--op-color-alerts-danger-plus-seven);
140
+ box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
141
+ color: var(--op-color-alerts-danger-on-plus-seven);
142
142
 
143
143
  h2 {
144
- font-size: var(--rm-font-medium);
144
+ font-size: var(--op-font-medium);
145
145
  }
146
146
 
147
147
  ul {
@@ -152,8 +152,8 @@ textarea.form-control {
152
152
  .form-group {
153
153
  display: grid;
154
154
  align-content: baseline;
155
- padding: var(--rm-space-small) 0;
156
- gap: var(--rm-space-x-small);
155
+ padding: var(--op-space-small) 0;
156
+ gap: var(--op-space-x-small);
157
157
  grid-auto-rows: auto;
158
158
  grid-template-columns: auto 1fr;
159
159