@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/icon.scss CHANGED
@@ -7,95 +7,95 @@
7
7
 
8
8
  .material-symbols-outlined,
9
9
  .material-symbols {
10
- --rm-mso-fill: 0;
11
- --rm-mso-weight: var(--rm-font-weight-normal);
12
- --rm-mso-grade: 0;
13
- --rm-mso-optical-sizing: 20;
14
-
15
- font-size: var(--rm-font-medium);
16
- font-variation-settings: 'FILL' var(--rm-mso-fill), 'wght' var(--rm-mso-weight), 'GRAD' var(--rm-mso-grade),
17
- 'opsz' var(--rm-mso-optical-sizing);
18
- line-height: var(--rm-line-height-densest);
10
+ --op-mso-fill: 0;
11
+ --op-mso-weight: var(--op-font-weight-normal);
12
+ --op-mso-grade: 0;
13
+ --op-mso-optical-sizing: 20;
14
+
15
+ font-size: var(--op-font-medium);
16
+ font-variation-settings: 'FILL' var(--op-mso-fill), 'wght' var(--op-mso-weight), 'GRAD' var(--op-mso-grade),
17
+ 'opsz' var(--op-mso-optical-sizing);
18
+ line-height: var(--op-line-height-densest);
19
19
  vertical-align: middle;
20
20
  }
21
21
 
22
22
  // Fill
23
23
  .icon--outlined {
24
- --rm-mso-fill: 0;
24
+ --op-mso-fill: 0;
25
25
  }
26
26
 
27
27
  .icon--filled {
28
- --rm-mso-fill: 1;
28
+ --op-mso-fill: 1;
29
29
  }
30
30
 
31
31
  // Weight
32
32
  .icon--weight-light {
33
- --rm-mso-weight: var(--rm-font-weight-light);
33
+ --op-mso-weight: var(--op-font-weight-light);
34
34
  }
35
35
 
36
36
  .icon--weight-normal {
37
- --rm-mso-weight: var(--rm-font-weight-normal);
37
+ --op-mso-weight: var(--op-font-weight-normal);
38
38
  }
39
39
 
40
40
  .icon--weight-semi-bold {
41
- --rm-mso-weight: var(--rm-font-weight-semi-bold);
41
+ --op-mso-weight: var(--op-font-weight-semi-bold);
42
42
  }
43
43
 
44
44
  .icon--weight-bold {
45
- --rm-mso-weight: var(--rm-font-weight-bold);
45
+ --op-mso-weight: var(--op-font-weight-bold);
46
46
  }
47
47
 
48
48
  // Emphasis
49
49
  .icon--low-emphasis {
50
- --rm-mso-grade: -20;
50
+ --op-mso-grade: -20;
51
51
  }
52
52
 
53
53
  .icon--normal-emphasis {
54
- --rm-mso-grade: 0;
54
+ --op-mso-grade: 0;
55
55
  }
56
56
 
57
57
  .icon--high-emphasis {
58
- --rm-mso-grade: 200;
58
+ --op-mso-grade: 200;
59
59
  }
60
60
 
61
61
  // Size
62
62
  .icon--medium {
63
- font-size: var(--rm-font-medium);
63
+ font-size: var(--op-font-medium);
64
64
 
65
- --rm-mso-optical-sizing: 20;
65
+ --op-mso-optical-sizing: 20;
66
66
  }
67
67
 
68
68
  .icon--large {
69
- font-size: var(--rm-font-large);
69
+ font-size: var(--op-font-large);
70
70
 
71
- --rm-mso-optical-sizing: 40;
71
+ --op-mso-optical-sizing: 40;
72
72
  }
73
73
 
74
74
  .icon--x-large {
75
- font-size: var(--rm-font-x-large);
75
+ font-size: var(--op-font-2x-large);
76
76
 
77
- --rm-mso-optical-sizing: 48;
77
+ --op-mso-optical-sizing: 48;
78
78
  }
79
79
 
80
80
  .custom-icons {
81
81
  display: inline-block;
82
- width: var(--rm-font-x-large);
83
- height: var(--rm-font-x-large);
82
+ width: var(--op-font-2x-large);
83
+ height: var(--op-font-2x-large);
84
84
 
85
85
  &.icon--medium {
86
- font-size: var(--rm-font-small);
86
+ font-size: var(--op-font-small);
87
87
 
88
- --rm-mso-optical-sizing: 20;
88
+ --op-mso-optical-sizing: 20;
89
89
  }
90
90
 
91
91
  &.icon--large {
92
- width: var(--rm-font-large);
93
- height: var(--rm-font-large);
92
+ width: var(--op-font-large);
93
+ height: var(--op-font-large);
94
94
  }
95
95
 
96
96
  &.icon--x-large {
97
- width: var(--rm-font-2x-large);
98
- height: var(--rm-font-2x-large);
97
+ width: var(--op-font-3x-large);
98
+ height: var(--op-font-3x-large);
99
99
  }
100
100
  }
101
101
 
package/dist/scss/components/sidebar.scss CHANGED
@@ -1,10 +1,10 @@
1
1
  @mixin sidebar-rail-global {
2
2
  // Private API
3
- --__rm-sidebar-width: var(--_rm-sidebar-rail-width);
3
+ --__op-sidebar-width: var(--_op-sidebar-rail-width);
4
4
 
5
5
  // Elements
6
6
  .sidebar__content {
7
- gap: var(--_rm-sidebar-link-spacing);
7
+ gap: var(--_op-sidebar-link-spacing);
8
8
  }
9
9
 
10
10
  .sidebar__section-title,
@@ -14,75 +14,75 @@
14
14
 
15
15
  .sidebar__item {
16
16
  flex-direction: column;
17
- gap: var(--rm-space-2x-small);
17
+ gap: var(--op-space-2x-small);
18
18
 
19
19
  .sidebar__item-icon {
20
- padding: var(--rm-space-2x-small) var(--rm-space-medium);
21
- transition: var(--_rm-sidebar-transition);
20
+ padding: var(--op-space-2x-small) var(--op-space-medium);
21
+ transition: var(--_op-sidebar-transition);
22
22
  }
23
23
 
24
24
  &:hover .sidebar__item-icon {
25
- background-color: var(--_rm-sidebar-icon-background-hover-color);
25
+ background-color: var(--_op-sidebar-icon-background-hover-color);
26
26
  }
27
27
 
28
28
  &.active .sidebar__item-icon {
29
- background-color: var(--_rm-sidebar-icon-background-active-color);
29
+ background-color: var(--_op-sidebar-icon-background-active-color);
30
30
  }
31
31
 
32
32
  .sidebar__item-label {
33
- font-size: var(--rm-font-x-small);
33
+ font-size: var(--op-font-x-small);
34
34
  }
35
35
  }
36
36
  }
37
37
 
38
38
  @mixin sidebar-drawer-global {
39
39
  // Private API
40
- --__rm-sidebar-width: var(--_rm-sidebar-drawer-width);
40
+ --__op-sidebar-width: var(--_op-sidebar-drawer-width);
41
41
 
42
42
  .sidebar__content {
43
- padding: 0 var(--_rm-sidebar-spacing);
43
+ padding: 0 var(--_op-sidebar-spacing);
44
44
  }
45
45
 
46
46
  .sidebar__section-title {
47
47
  overflow: hidden;
48
- height: var(--rm-input-height-large);
49
- padding: var(--rm-space-small) var(--rm-space-medium);
50
- color: var(--_rm-sidebar-text-color);
51
- font-size: var(--rm-font-small);
52
- font-weight: var(--rm-font-weight-bold);
48
+ height: var(--op-input-height-large);
49
+ padding: var(--op-space-small) var(--op-space-medium);
50
+ color: var(--_op-sidebar-text-color);
51
+ font-size: var(--op-font-small);
52
+ font-weight: var(--op-font-weight-bold);
53
53
  text-overflow: ellipsis;
54
54
  white-space: nowrap;
55
55
  }
56
56
 
57
57
  .sidebar__section-divider {
58
- border-bottom: var(--rm-border-width) solid var(--_rm-sidebar-text-color);
59
- margin: 0 var(--_rm-sidebar-spacing);
58
+ border-bottom: var(--op-border-width) solid var(--_op-sidebar-text-color);
59
+ margin: 0 var(--_op-sidebar-spacing);
60
60
  }
61
61
 
62
62
  .sidebar__item {
63
- height: var(--rm-input-height-large);
63
+ height: var(--op-input-height-large);
64
64
  flex-direction: row;
65
- padding: var(--rm-space-x-small) var(--rm-space-medium);
66
- border-radius: var(--rm-radius-pill);
67
- gap: var(--_rm-sidebar-link-spacing);
65
+ padding: var(--op-space-x-small) var(--op-space-medium);
66
+ border-radius: var(--op-radius-pill);
67
+ gap: var(--_op-sidebar-link-spacing);
68
68
 
69
69
  &:hover,
70
70
  &.active {
71
- transition: var(--_rm-sidebar-transition);
71
+ transition: var(--_op-sidebar-transition);
72
72
  }
73
73
 
74
74
  &:hover {
75
- background-color: var(--_rm-sidebar-icon-background-hover-color);
76
- color: var(--_rm-sidebar-icon-text-hover-color);
75
+ background-color: var(--_op-sidebar-icon-background-hover-color);
76
+ color: var(--_op-sidebar-icon-text-hover-color);
77
77
 
78
78
  .sidebar__item-icon {
79
- color: var(--_rm-sidebar-icon-text-hover-color);
79
+ color: var(--_op-sidebar-icon-text-hover-color);
80
80
  }
81
81
  }
82
82
 
83
83
  &.active {
84
- background-color: var(--_rm-sidebar-icon-background-active-color);
85
- color: var(--_rm-sidebar-icon-text-active-color);
84
+ background-color: var(--_op-sidebar-icon-background-active-color);
85
+ color: var(--_op-sidebar-icon-text-active-color);
86
86
  }
87
87
  }
88
88
  }
@@ -90,45 +90,45 @@
90
90
  %sidebar-global {
91
91
  // Public API
92
92
  // Normal
93
- --_rm-sidebar-background-color: var(--rm-color-neutral-plus-seven);
94
- --_rm-sidebar-text-color: var(--rm-color-neutral-on-plus-seven);
93
+ --_op-sidebar-background-color: var(--op-color-neutral-plus-seven);
94
+ --_op-sidebar-text-color: var(--op-color-neutral-on-plus-seven);
95
95
 
96
96
  // Active
97
- --_rm-sidebar-icon-background-active-color: var(--rm-color-neutral-plus-three);
98
- --_rm-sidebar-icon-text-active-color: var(--rm-color-neutral-on-plus-three);
97
+ --_op-sidebar-icon-background-active-color: var(--op-color-neutral-plus-three);
98
+ --_op-sidebar-icon-text-active-color: var(--op-color-neutral-on-plus-three);
99
99
 
100
100
  // Hover
101
- --_rm-sidebar-icon-background-hover-color: var(--rm-color-neutral-plus-four);
102
- --_rm-sidebar-icon-text-hover-color: var(--rm-color-neutral-on-plus-four);
101
+ --_op-sidebar-icon-background-hover-color: var(--op-color-neutral-plus-four);
102
+ --_op-sidebar-icon-text-hover-color: var(--op-color-neutral-on-plus-four);
103
103
 
104
104
  // Width
105
- --_rm-sidebar-rail-width: 8.8rem;
106
- --_rm-sidebar-drawer-width: 25rem;
105
+ --_op-sidebar-rail-width: 8.8rem;
106
+ --_op-sidebar-drawer-width: 25rem;
107
107
 
108
108
  // Spacing
109
- --_rm-sidebar-spacing: var(--rm-space-medium);
110
- --_rm-sidebar-link-spacing: var(--rm-space-large);
109
+ --_op-sidebar-spacing: var(--op-space-medium);
110
+ --_op-sidebar-link-spacing: var(--op-space-large);
111
111
 
112
112
  // Animation
113
- --_rm-sidebar-transition: all var(--rm-transition-navigation) ease-in-out;
113
+ --_op-sidebar-transition: var(--op-transition-sidebar);
114
114
 
115
115
  // Private API
116
- --__rm-sidebar-width: var(--_rm-sidebar-drawer-width);
116
+ --__op-sidebar-width: var(--_op-sidebar-drawer-width);
117
117
 
118
118
  display: flex;
119
- width: var(--__rm-sidebar-width);
119
+ width: var(--__op-sidebar-width);
120
120
  flex-direction: column;
121
- padding: var(--_rm-sidebar-spacing) 0;
122
- background-color: var(--_rm-sidebar-background-color);
123
- color: var(--_rm-sidebar-text-color);
124
- gap: var(--_rm-sidebar-spacing);
121
+ padding: var(--_op-sidebar-spacing) 0;
122
+ background-color: var(--_op-sidebar-background-color);
123
+ color: var(--_op-sidebar-text-color);
124
+ gap: var(--_op-sidebar-spacing);
125
125
  overflow-y: auto;
126
- transition: var(--_rm-sidebar-transition);
126
+ transition: var(--_op-sidebar-transition);
127
127
 
128
128
  // Elements
129
129
  .sidebar__brand {
130
130
  display: block;
131
- padding: 0 var(--_rm-sidebar-spacing);
131
+ padding: 0 var(--_op-sidebar-spacing);
132
132
  }
133
133
 
134
134
  .sidebar__content {
@@ -152,24 +152,24 @@
152
152
  .sidebar__item {
153
153
  display: flex;
154
154
  align-items: center;
155
- color: var(--_rm-sidebar-text-color);
155
+ color: var(--_op-sidebar-text-color);
156
156
  cursor: pointer;
157
157
  text-align: center;
158
158
  text-decoration: none;
159
159
 
160
160
  &:visited {
161
- color: var(--_rm-sidebar-text-color);
161
+ color: var(--_op-sidebar-text-color);
162
162
  }
163
163
 
164
164
  &:hover,
165
165
  &.active {
166
166
  .sidebar__item-icon {
167
- --rm-mso-weight: var(--rm-font-weight-bold);
167
+ --op-mso-weight: var(--op-font-weight-bold);
168
168
  }
169
169
  }
170
170
 
171
171
  &:hover .sidebar__item-icon {
172
- color: var(--_rm-sidebar-text-color);
172
+ color: var(--_op-sidebar-text-color);
173
173
  }
174
174
 
175
175
  .sidebar__item-icon {
@@ -177,20 +177,20 @@
177
177
  @extend .icon--x-large;
178
178
  /* stylelint-enable scss/at-extend-no-missing-placeholder */
179
179
 
180
- --rm-mso-weight: var(--rm-font-weight-medium);
180
+ --op-mso-weight: var(--op-font-weight-medium);
181
181
 
182
182
  display: flex;
183
183
  align-items: center;
184
184
  justify-content: center;
185
- border-radius: var(--rm-radius-pill);
185
+ border-radius: var(--op-radius-pill);
186
186
  }
187
187
 
188
188
  .sidebar__item-label {
189
189
  overflow: hidden;
190
190
  max-width: 90%;
191
- font-weight: var(--rm-font-weight-medium);
192
- letter-spacing: var(--rm-letter-spacing-navigation);
193
- line-height: var(--rm-line-height-dense);
191
+ font-weight: var(--op-font-weight-medium);
192
+ letter-spacing: var(--op-letter-spacing-navigation);
193
+ line-height: var(--op-line-height-dense);
194
194
  text-overflow: ellipsis;
195
195
  white-space: nowrap;
196
196
  }
@@ -225,16 +225,16 @@
225
225
  @extend %sidebar-global;
226
226
 
227
227
  // Normal
228
- --_rm-sidebar-background-color: var(--rm-color-primary-plus-seven);
229
- --_rm-sidebar-text-color: var(--rm-color-primary-on-plus-seven);
228
+ --_op-sidebar-background-color: var(--op-color-primary-plus-seven);
229
+ --_op-sidebar-text-color: var(--op-color-primary-on-plus-seven);
230
230
 
231
231
  // Active
232
- --_rm-sidebar-icon-background-active-color: var(--rm-color-primary-plus-three);
233
- --_rm-sidebar-icon-text-active-color: var(--rm-color-primary-on-plus-three);
232
+ --_op-sidebar-icon-background-active-color: var(--op-color-primary-plus-three);
233
+ --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-plus-three);
234
234
 
235
235
  // Hover
236
- --_rm-sidebar-icon-background-hover-color: var(--rm-color-primary-plus-four);
237
- --_rm-sidebar-icon-text-hover-color: var(--rm-color-primary-on-plus-four);
236
+ --_op-sidebar-icon-background-hover-color: var(--op-color-primary-plus-four);
237
+ --_op-sidebar-icon-text-hover-color: var(--op-color-primary-on-plus-four);
238
238
  }
239
239
 
240
240
  // Subtle Primary
@@ -242,14 +242,14 @@
242
242
  @extend %sidebar-global;
243
243
 
244
244
  // Normal
245
- --_rm-sidebar-background-color: var(--rm-color-primary-plus-max);
246
- --_rm-sidebar-text-color: var(--rm-color-primary-on-plus-max);
245
+ --_op-sidebar-background-color: var(--op-color-primary-plus-max);
246
+ --_op-sidebar-text-color: var(--op-color-primary-on-plus-max);
247
247
 
248
248
  // Active
249
- --_rm-sidebar-icon-background-active-color: var(--rm-color-primary-plus-three);
250
- --_rm-sidebar-icon-text-active-color: var(--rm-color-primary-on-plus-three);
249
+ --_op-sidebar-icon-background-active-color: var(--op-color-primary-plus-three);
250
+ --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-plus-three);
251
251
 
252
252
  // Hover
253
- --_rm-sidebar-icon-background-hover-color: var(--rm-color-primary-plus-four);
254
- --_rm-sidebar-icon-text-hover-color: var(--rm-color-primary-on-plus-four);
253
+ --_op-sidebar-icon-background-hover-color: var(--op-color-primary-plus-four);
254
+ --_op-sidebar-icon-text-hover-color: var(--op-color-primary-on-plus-four);
255
255
  }
package/dist/scss/components/table.scss CHANGED
@@ -3,50 +3,50 @@
3
3
  %table-global {
4
4
  // Public API
5
5
  // Cells (for padding, the appropriate variable is used when using the density modifiers)
6
- --_rm-table-cell-padding-default: var(--rm-space-small) var(--rm-space-x-small);
7
- --_rm-table-cell-padding-comfortable: var(--rm-space-medium) var(--rm-space-small);
8
- --_rm-table-cell-padding-compact: var(--rm-space-x-small) var(--rm-space-2x-small);
6
+ --_op-table-cell-padding-default: var(--op-space-small) var(--op-space-x-small);
7
+ --_op-table-cell-padding-comfortable: var(--op-space-medium) var(--op-space-small);
8
+ --_op-table-cell-padding-compact: var(--op-space-x-small) var(--op-space-2x-small);
9
9
 
10
10
  // Private API
11
11
  // These allow for overriding specific padding versions easier.
12
- --__rm-table-cell-padding: var(--_rm-table-cell-padding-default);
12
+ --__op-table-cell-padding: var(--_op-table-cell-padding-default);
13
13
 
14
14
  width: 100%;
15
- border-radius: var(--rm-radius-medium);
15
+ border-radius: var(--op-radius-medium);
16
16
  border-collapse: collapse;
17
- box-shadow: var(--rm-border-all) var(--rm-border-color);
17
+ box-shadow: var(--op-border-all) var(--op-border-color);
18
18
  contain: paint;
19
19
  table-layout: auto;
20
20
 
21
21
  thead {
22
- background-color: var(--rm-color-neutral-plus-four);
23
- color: var(--rm-color-neutral-on-plus-four);
22
+ background-color: var(--op-color-neutral-plus-four);
23
+ color: var(--op-color-neutral-on-plus-four);
24
24
  }
25
25
 
26
26
  th {
27
- font-weight: var(--rm-font-weight-normal);
27
+ font-weight: var(--op-font-weight-normal);
28
28
  text-align: left;
29
29
  text-transform: uppercase;
30
30
  }
31
31
 
32
32
  tbody,
33
33
  tfoot {
34
- background-color: var(--rm-color-background);
35
- color: var(--rm-color-on-background);
34
+ background-color: var(--op-color-background);
35
+ color: var(--op-color-on-background);
36
36
  }
37
37
 
38
38
  th,
39
39
  td {
40
- padding: var(--__rm-table-cell-padding);
41
- font-size: var(--rm-font-small);
40
+ padding: var(--__op-table-cell-padding);
41
+ font-size: var(--op-font-small);
42
42
  }
43
43
 
44
44
  tr:not(:last-child) {
45
- box-shadow: inset var(--rm-border-top) var(--rm-border-color);
45
+ box-shadow: inset var(--op-border-top) var(--op-border-color);
46
46
  }
47
47
 
48
48
  tfoot tr {
49
- box-shadow: var(--rm-border-top) var(--rm-border-color);
49
+ box-shadow: var(--op-border-top) var(--op-border-color);
50
50
  }
51
51
 
52
52
  // Layout Modifiers
@@ -60,29 +60,29 @@
60
60
 
61
61
  // Table Density Modifiers
62
62
  &.table--default-density {
63
- --__rm-table-cell-padding: var(--_rm-table-cell-padding-default);
63
+ --__op-table-cell-padding: var(--_op-table-cell-padding-default);
64
64
  }
65
65
 
66
66
  &.table--comfortable-density {
67
- --__rm-table-cell-padding: var(--_rm-table-cell-padding-comfortable);
67
+ --__op-table-cell-padding: var(--_op-table-cell-padding-comfortable);
68
68
  }
69
69
 
70
70
  &.table--compact-density {
71
- --__rm-table-cell-padding: var(--_rm-table-cell-padding-compact);
71
+ --__op-table-cell-padding: var(--_op-table-cell-padding-compact);
72
72
  }
73
73
 
74
74
  // Striped Modifiers
75
75
  &.table--even-striped {
76
76
  tbody tr:nth-child(even) {
77
- background-color: var(--rm-color-neutral-plus-seven);
78
- color: var(--rm-color-neutral-on-plus-seven);
77
+ background-color: var(--op-color-neutral-plus-seven);
78
+ color: var(--op-color-neutral-on-plus-seven);
79
79
  }
80
80
  }
81
81
 
82
82
  &.table--odd-striped {
83
83
  tbody tr:nth-child(odd) {
84
- background-color: var(--rm-color-neutral-plus-seven);
85
- color: var(--rm-color-neutral-on-plus-seven);
84
+ background-color: var(--op-color-neutral-plus-seven);
85
+ color: var(--op-color-neutral-on-plus-seven);
86
86
  }
87
87
  }
88
88
 
@@ -109,8 +109,8 @@
109
109
  @extend %table-global;
110
110
 
111
111
  thead {
112
- background-color: var(--rm-color-primary-plus-seven);
113
- color: var(--rm-color-primary-on-plus-seven);
112
+ background-color: var(--op-color-primary-plus-seven);
113
+ color: var(--op-color-primary-on-plus-seven);
114
114
  }
115
115
  }
116
116
 
@@ -119,8 +119,8 @@
119
119
  @extend %table-global;
120
120
 
121
121
  thead {
122
- background-color: var(--rm-color-alerts-danger-plus-seven);
123
- color: var(--rm-color-alerts-danger-on-plus-seven);
122
+ background-color: var(--op-color-alerts-danger-plus-seven);
123
+ color: var(--op-color-alerts-danger-on-plus-seven);
124
124
  }
125
125
  }
126
126
 
package/dist/scss/core/base.scss CHANGED
@@ -2,16 +2,16 @@
2
2
 
3
3
  html {
4
4
  overflow: hidden; // Needed to prevent flash messages and panels from causing overflow
5
- font-family: var(--rm-font-family);
5
+ font-family: var(--op-font-family);
6
6
  font-size: 62.5%; // 1rem = 10px
7
7
  }
8
8
 
9
9
  body {
10
10
  overflow: auto;
11
11
  height: 100vh;
12
- background: var(--rm-color-background);
13
- color: var(--rm-color-on-background);
14
- font-size: var(--rm-font-medium);
12
+ background: var(--op-color-background);
13
+ color: var(--op-color-on-background);
14
+ font-size: var(--op-font-medium);
15
15
  }
16
16
 
17
17
  button {
@@ -33,7 +33,7 @@ label {
33
33
  }
34
34
 
35
35
  a {
36
- color: var(--rm-color-primary-original);
36
+ color: var(--op-color-primary-original);
37
37
  }
38
38
 
39
39
  blockquote,
@@ -57,39 +57,39 @@ h4,
57
57
  h5,
58
58
  h6 {
59
59
  margin-top: 0;
60
- margin-bottom: var(--rm-space-small);
61
- font-weight: var(--rm-font-weight-normal);
60
+ margin-bottom: var(--op-space-small);
61
+ font-weight: var(--op-font-weight-normal);
62
62
  }
63
63
 
64
64
  h1 {
65
- font-size: var(--rm-font-2x-large);
65
+ font-size: var(--op-font-3x-large);
66
66
  }
67
67
 
68
68
  h2 {
69
- font-size: var(--rm-font-x-large);
69
+ font-size: var(--op-font-2x-large);
70
70
  }
71
71
 
72
72
  h3 {
73
- font-size: var(--rm-font-large);
73
+ font-size: var(--op-font-large);
74
74
  }
75
75
 
76
76
  h4 {
77
- font-size: var(--rm-font-medium);
77
+ font-size: var(--op-font-medium);
78
78
  }
79
79
 
80
80
  h5 {
81
- font-size: var(--rm-font-small);
81
+ font-size: var(--op-font-small);
82
82
  }
83
83
 
84
84
  h6 {
85
- font-size: var(--rm-font-x-small);
85
+ font-size: var(--op-font-x-small);
86
86
  }
87
87
 
88
88
  p {
89
- margin-bottom: var(--rm-space-small);
90
- font-size: var(--rm-font-medium);
89
+ margin-bottom: var(--op-space-small);
90
+ font-size: var(--op-font-medium);
91
91
  }
92
92
 
93
93
  small {
94
- font-size: var(--rm-font-small);
94
+ font-size: var(--op-font-small);
95
95
  }
package/dist/scss/core/layout.scss CHANGED
@@ -1,35 +1,35 @@
1
- .app-wrapper {
1
+ .app-with-sidebar {
2
2
  display: grid;
3
3
  width: 100%;
4
4
  height: 100vh;
5
5
  grid-template-columns: auto 1fr auto;
6
6
  }
7
7
 
8
- .app__main {
8
+ .app-body {
9
9
  display: flex;
10
10
  overflow: auto;
11
11
  flex-direction: column;
12
12
  }
13
13
 
14
- .page__header {
14
+ .app__header {
15
15
  position: sticky;
16
- z-index: var(--rm-z-index-header);
16
+ z-index: var(--op-z-index-header);
17
17
  top: 0;
18
18
  flex-grow: 0;
19
19
  flex-shrink: 0;
20
20
  }
21
21
 
22
- .page__content {
22
+ .app__content {
23
23
  width: 100%;
24
24
  max-width: $breakpoint-medium;
25
25
  flex-grow: 1;
26
- padding: 0 var(--rm-space-large);
26
+ padding: 0 var(--op-space-large);
27
27
  margin: 0 auto;
28
28
  }
29
29
 
30
- .page__footer {
30
+ .app__footer {
31
31
  position: sticky;
32
- z-index: var(--rm-z-index-footer);
32
+ z-index: var(--op-z-index-footer);
33
33
  bottom: 0;
34
34
  flex-grow: 0;
35
35
  flex-shrink: 0;