@rolemodel/optics 0.4.1 → 0.5.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.
- package/NEW_COMPONENT.md +59 -0
- package/README.md +12 -0
- package/dist/css/optics.css +607 -220
- package/dist/css/optics.css.map +1 -1
- package/dist/scss/components/accordion.scss +38 -0
- package/dist/scss/components/avatar.scss +7 -6
- package/dist/scss/components/button.scss +1 -29
- package/dist/scss/components/card.scss +15 -5
- package/dist/scss/components/confirm-dialog.scss +7 -13
- package/dist/scss/components/form.scss +25 -2
- package/dist/scss/components/icon.scss +4 -1
- package/dist/scss/components/index.scss +7 -0
- package/dist/scss/components/modal.scss +16 -23
- package/dist/scss/components/navbar.scss +61 -0
- package/dist/scss/components/side_panel.scss +94 -0
- package/dist/scss/components/sidebar.scss +6 -6
- package/dist/scss/components/spinner.scss +55 -0
- package/dist/scss/components/switch.scss +106 -0
- package/dist/scss/components/tab.scss +84 -0
- package/dist/scss/components/table.scss +3 -3
- package/dist/scss/components/tag.scss +174 -0
- package/dist/scss/components/tooltip.scss +3 -3
- package/dist/scss/core/layout.scss +8 -1
- package/dist/scss/core/tokens/base_tokens.scss +57 -16
- package/dist/scss/core/tokens/dark_mode_tokens.scss +47 -42
- package/dist/scss/core/tokens/scale_color_tokens.scss +48 -51
- package/dist/scss/core/utilities.scss +15 -3
- package/dist/tokens/tokens.json +63 -2
- package/package.json +25 -24
|
@@ -165,27 +165,27 @@
|
|
|
165
165
|
--op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
166
166
|
--op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%);
|
|
167
167
|
--op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
);
|
|
168
|
+
|
|
169
|
+
// prettier-ignore
|
|
170
|
+
--op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
171
171
|
--op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
);
|
|
172
|
+
|
|
173
|
+
// prettier-ignore
|
|
174
|
+
--op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
|
|
175
175
|
--op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
|
|
176
176
|
--op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
|
|
177
177
|
--op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
);
|
|
178
|
+
|
|
179
|
+
// prettier-ignore
|
|
180
|
+
--op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
|
|
181
181
|
--op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
);
|
|
182
|
+
|
|
183
|
+
// prettier-ignore
|
|
184
|
+
--op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
|
|
185
185
|
--op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
);
|
|
186
|
+
|
|
187
|
+
// prettier-ignore
|
|
188
|
+
--op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
189
189
|
--op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
190
190
|
--op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
191
191
|
--op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
|
|
@@ -193,41 +193,41 @@
|
|
|
193
193
|
--op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
194
194
|
--op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
|
|
195
195
|
--op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
);
|
|
196
|
+
|
|
197
|
+
// prettier-ignore
|
|
198
|
+
--op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
199
199
|
--op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
);
|
|
200
|
+
|
|
201
|
+
// prettier-ignore
|
|
202
|
+
--op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
|
|
203
203
|
--op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
);
|
|
204
|
+
|
|
205
|
+
// prettier-ignore
|
|
206
|
+
--op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
207
207
|
--op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
);
|
|
208
|
+
|
|
209
|
+
// prettier-ignore
|
|
210
|
+
--op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
211
211
|
--op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
);
|
|
212
|
+
|
|
213
|
+
// prettier-ignore
|
|
214
|
+
--op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%);
|
|
215
215
|
--op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
);
|
|
216
|
+
|
|
217
|
+
// prettier-ignore
|
|
218
|
+
--op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
|
|
219
219
|
--op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
);
|
|
220
|
+
|
|
221
|
+
// prettier-ignore
|
|
222
|
+
--op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
|
|
223
223
|
--op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
);
|
|
224
|
+
|
|
225
|
+
// prettier-ignore
|
|
226
|
+
--op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
|
|
227
227
|
--op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
);
|
|
228
|
+
|
|
229
|
+
// prettier-ignore
|
|
230
|
+
--op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
|
|
231
231
|
}
|
|
232
232
|
|
|
233
233
|
@mixin alerts-danger-semantic-scale-dark {
|
|
@@ -446,6 +446,10 @@
|
|
|
446
446
|
--op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
|
|
447
447
|
}
|
|
448
448
|
|
|
449
|
+
@mixin encoded-images {
|
|
450
|
+
--op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
|
|
451
|
+
}
|
|
452
|
+
|
|
449
453
|
@mixin all-tokens-dark {
|
|
450
454
|
@include primary-semantic-scale-dark;
|
|
451
455
|
@include neutral-semantic-scale-dark;
|
|
@@ -456,6 +460,7 @@
|
|
|
456
460
|
@include alerts-notice-semantic-scale-dark;
|
|
457
461
|
|
|
458
462
|
@include shadows-dark;
|
|
463
|
+
@include encoded-images;
|
|
459
464
|
}
|
|
460
465
|
|
|
461
466
|
// Follow system preference unless forced to light
|
|
@@ -141,9 +141,8 @@
|
|
|
141
141
|
* @tokens Alerts Warning Colors
|
|
142
142
|
* @presenter Color
|
|
143
143
|
*/
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
);
|
|
144
|
+
// prettier-ignore
|
|
145
|
+
--op-color-alerts-warning-original: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l));
|
|
147
146
|
|
|
148
147
|
// Main Scale
|
|
149
148
|
--op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
|
|
@@ -170,25 +169,25 @@
|
|
|
170
169
|
--op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
171
170
|
--op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
172
171
|
--op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
);
|
|
172
|
+
|
|
173
|
+
// prettier-ignore
|
|
174
|
+
--op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
|
|
176
175
|
--op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
);
|
|
176
|
+
|
|
177
|
+
// prettier-ignore
|
|
178
|
+
--op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%);
|
|
180
179
|
--op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
|
|
181
180
|
--op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
|
|
182
181
|
--op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
);
|
|
182
|
+
|
|
183
|
+
// prettier-ignore
|
|
184
|
+
--op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%);
|
|
186
185
|
--op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
187
186
|
--op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
188
187
|
--op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
);
|
|
188
|
+
|
|
189
|
+
// prettier-ignore
|
|
190
|
+
--op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
|
|
192
191
|
--op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
|
|
193
192
|
--op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
|
|
194
193
|
--op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
@@ -196,41 +195,41 @@
|
|
|
196
195
|
--op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
|
|
197
196
|
--op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
198
197
|
--op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
);
|
|
198
|
+
|
|
199
|
+
// prettier-ignore
|
|
200
|
+
--op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
202
201
|
--op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
);
|
|
202
|
+
|
|
203
|
+
// prettier-ignore
|
|
204
|
+
--op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%);
|
|
206
205
|
--op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%);
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
);
|
|
206
|
+
|
|
207
|
+
// prettier-ignore
|
|
208
|
+
--op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
|
|
210
209
|
--op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
);
|
|
210
|
+
|
|
211
|
+
// prettier-ignore
|
|
212
|
+
--op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%);
|
|
214
213
|
--op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
);
|
|
214
|
+
|
|
215
|
+
// prettier-ignore
|
|
216
|
+
--op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%);
|
|
218
217
|
--op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%);
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
);
|
|
218
|
+
|
|
219
|
+
// prettier-ignore
|
|
220
|
+
--op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%);
|
|
222
221
|
--op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
);
|
|
222
|
+
|
|
223
|
+
// prettier-ignore
|
|
224
|
+
--op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%);
|
|
226
225
|
--op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%);
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
);
|
|
226
|
+
|
|
227
|
+
// prettier-ignore
|
|
228
|
+
--op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%);
|
|
230
229
|
--op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
);
|
|
230
|
+
|
|
231
|
+
// prettier-ignore
|
|
232
|
+
--op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
234
233
|
}
|
|
235
234
|
|
|
236
235
|
@mixin alerts-danger-semantic-scale {
|
|
@@ -238,9 +237,8 @@
|
|
|
238
237
|
* @tokens Alerts Danger Colors
|
|
239
238
|
* @presenter Color
|
|
240
239
|
*/
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
);
|
|
240
|
+
// prettier-ignore
|
|
241
|
+
--op-color-alerts-danger-original: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l));
|
|
244
242
|
|
|
245
243
|
// Main Scale
|
|
246
244
|
--op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
|
|
@@ -309,9 +307,8 @@
|
|
|
309
307
|
* @tokens Alerts Info Colors
|
|
310
308
|
* @presenter Color
|
|
311
309
|
*/
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
);
|
|
310
|
+
// prettier-ignore
|
|
311
|
+
--op-color-alerts-info-original: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l));
|
|
315
312
|
|
|
316
313
|
// Main Scale
|
|
317
314
|
--op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
|
|
@@ -380,9 +377,8 @@
|
|
|
380
377
|
* @tokens Alerts Notice Colors
|
|
381
378
|
* @presenter Color
|
|
382
379
|
*/
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
);
|
|
380
|
+
// prettier-ignore
|
|
381
|
+
--op-color-alerts-notice-original: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l));
|
|
386
382
|
|
|
387
383
|
// Main Scale
|
|
388
384
|
--op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
|
|
@@ -453,6 +449,7 @@
|
|
|
453
449
|
*/
|
|
454
450
|
--op-color-background: var(--op-color-neutral-plus-eight);
|
|
455
451
|
--op-color-on-background: var(--op-color-neutral-on-plus-eight);
|
|
452
|
+
--op-color-on-background-alt: var(--op-color-neutral-on-plus-eight-alt);
|
|
456
453
|
}
|
|
457
454
|
|
|
458
455
|
:root {
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
.container {
|
|
4
4
|
width: 100%;
|
|
5
|
-
max-width:
|
|
5
|
+
max-width: var(--op-breakpoint-medium);
|
|
6
6
|
padding: 0 var(--op-space-large);
|
|
7
7
|
margin: 0 auto;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.container--sm {
|
|
11
|
-
max-width:
|
|
11
|
+
max-width: var(--op-breakpoint-small);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.container--md-padding {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
.container--xs {
|
|
23
|
-
max-width:
|
|
23
|
+
max-width: var(--op-breakpoint-x-small);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
// Width Properties
|
|
@@ -550,3 +550,15 @@
|
|
|
550
550
|
}
|
|
551
551
|
}
|
|
552
552
|
}
|
|
553
|
+
|
|
554
|
+
// Accessibility
|
|
555
|
+
// Use the following class to hide accessibility text that is needed for screenreaders but needs to be hidden from regular users.
|
|
556
|
+
// https: //snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
|
557
|
+
.sr-only {
|
|
558
|
+
position: absolute !important;
|
|
559
|
+
overflow: hidden;
|
|
560
|
+
width: 1px;
|
|
561
|
+
height: 1px;
|
|
562
|
+
clip: rect(1px 1px 1px 1px);
|
|
563
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
564
|
+
}
|
package/dist/tokens/tokens.json
CHANGED
|
@@ -204,6 +204,7 @@
|
|
|
204
204
|
"h": "47",
|
|
205
205
|
"s": "100%",
|
|
206
206
|
"l": "61%",
|
|
207
|
+
"original": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l))",
|
|
207
208
|
"plus-max": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%)",
|
|
208
209
|
"plus-eight": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%)",
|
|
209
210
|
"plus-seven": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%)",
|
|
@@ -228,17 +229,29 @@
|
|
|
228
229
|
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)"
|
|
229
230
|
},
|
|
230
231
|
"on-plus-eight": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)",
|
|
232
|
+
"on-plus-eight-alt": {
|
|
233
|
+
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)"
|
|
234
|
+
},
|
|
231
235
|
"on-plus-seven": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)",
|
|
236
|
+
"on-plus-seven-alt": {
|
|
237
|
+
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%)"
|
|
238
|
+
},
|
|
232
239
|
"on-plus-six": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%)",
|
|
233
240
|
"on-plus-six-alt": {
|
|
234
241
|
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%)"
|
|
235
242
|
},
|
|
236
243
|
"on-plus-five": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)",
|
|
244
|
+
"on-plus-five-alt": {
|
|
245
|
+
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%)"
|
|
246
|
+
},
|
|
237
247
|
"on-plus-four": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)",
|
|
238
248
|
"on-plus-four-alt": {
|
|
239
249
|
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)"
|
|
240
250
|
},
|
|
241
251
|
"on-plus-three": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)",
|
|
252
|
+
"on-plus-three-alt": {
|
|
253
|
+
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)"
|
|
254
|
+
},
|
|
242
255
|
"on-plus-two": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%)",
|
|
243
256
|
"on-plus-two-alt": {
|
|
244
257
|
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%)"
|
|
@@ -249,19 +262,47 @@
|
|
|
249
262
|
},
|
|
250
263
|
"on-base": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)",
|
|
251
264
|
"on-minus-one": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%)",
|
|
265
|
+
"on-minus-one-alt": {
|
|
266
|
+
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)"
|
|
267
|
+
},
|
|
252
268
|
"on-minus-two": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%)",
|
|
269
|
+
"on-minus-two-alt": {
|
|
270
|
+
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%)"
|
|
271
|
+
},
|
|
253
272
|
"on-minus-three": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%)",
|
|
273
|
+
"on-minus-three-alt": {
|
|
274
|
+
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)"
|
|
275
|
+
},
|
|
254
276
|
"on-minus-four": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)",
|
|
277
|
+
"on-minus-four-alt": {
|
|
278
|
+
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%)"
|
|
279
|
+
},
|
|
255
280
|
"on-minus-five": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)",
|
|
281
|
+
"on-minus-five-alt": {
|
|
282
|
+
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%)"
|
|
283
|
+
},
|
|
256
284
|
"on-minus-six": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%)",
|
|
285
|
+
"on-minus-six-alt": {
|
|
286
|
+
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%)"
|
|
287
|
+
},
|
|
257
288
|
"on-minus-seven": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%)",
|
|
289
|
+
"on-minus-seven-alt": {
|
|
290
|
+
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%)"
|
|
291
|
+
},
|
|
258
292
|
"on-minus-eight": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%)",
|
|
259
|
-
"on-minus-
|
|
293
|
+
"on-minus-eight-alt": {
|
|
294
|
+
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%)"
|
|
295
|
+
},
|
|
296
|
+
"on-minus-max": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%)",
|
|
297
|
+
"on-minus-max-alt": {
|
|
298
|
+
"alt": "hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)"
|
|
299
|
+
}
|
|
260
300
|
},
|
|
261
301
|
"danger": {
|
|
262
302
|
"h": "0",
|
|
263
303
|
"s": "99%",
|
|
264
304
|
"l": "76%",
|
|
305
|
+
"original": "hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l))",
|
|
265
306
|
"plus-max": "hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)",
|
|
266
307
|
"plus-eight": "hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%)",
|
|
267
308
|
"plus-seven": "hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)",
|
|
@@ -359,6 +400,7 @@
|
|
|
359
400
|
"h": "216",
|
|
360
401
|
"s": "58%",
|
|
361
402
|
"l": "48%",
|
|
403
|
+
"original": "hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l))",
|
|
362
404
|
"plus-max": "hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)",
|
|
363
405
|
"plus-eight": "hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)",
|
|
364
406
|
"plus-seven": "hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)",
|
|
@@ -456,6 +498,7 @@
|
|
|
456
498
|
"h": "130",
|
|
457
499
|
"s": "61%",
|
|
458
500
|
"l": "64%",
|
|
501
|
+
"original": "hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l))",
|
|
459
502
|
"plus-max": "hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)",
|
|
460
503
|
"plus-eight": "hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)",
|
|
461
504
|
"plus-seven": "hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%)",
|
|
@@ -553,6 +596,20 @@
|
|
|
553
596
|
"background": "var(--op-color-neutral-plus-eight)",
|
|
554
597
|
"on-background": "var(--op-color-neutral-on-plus-eight)"
|
|
555
598
|
},
|
|
599
|
+
"opacity": {
|
|
600
|
+
"none": "0",
|
|
601
|
+
"overlay": "0.2",
|
|
602
|
+
"disabled": "0.4",
|
|
603
|
+
"half": "0.5",
|
|
604
|
+
"full": "1"
|
|
605
|
+
},
|
|
606
|
+
"breakpoint": {
|
|
607
|
+
"x-small": "512px",
|
|
608
|
+
"small": "768px",
|
|
609
|
+
"medium": "1024px",
|
|
610
|
+
"large": "1280px",
|
|
611
|
+
"x-large": "1440px"
|
|
612
|
+
},
|
|
556
613
|
"radius": {
|
|
557
614
|
"small": "2px",
|
|
558
615
|
"medium": "4px",
|
|
@@ -619,6 +676,7 @@
|
|
|
619
676
|
"label": "0.04rem"
|
|
620
677
|
},
|
|
621
678
|
"transition": {
|
|
679
|
+
"accordion": "rotate 120ms ease-in",
|
|
622
680
|
"input": "all 120ms ease-in",
|
|
623
681
|
"sidebar": "all 200ms ease-in-out",
|
|
624
682
|
"modal": "all 300ms ease-in",
|
|
@@ -630,7 +688,7 @@
|
|
|
630
688
|
"encoded": {
|
|
631
689
|
"images": {
|
|
632
690
|
"dropdown": {
|
|
633
|
-
"arrow": "url(
|
|
691
|
+
"arrow": "url('data"
|
|
634
692
|
}
|
|
635
693
|
}
|
|
636
694
|
},
|
|
@@ -647,6 +705,9 @@
|
|
|
647
705
|
"3x-large": "calc(var(--op-space-scale-unit) * 4)",
|
|
648
706
|
"4x-large": "calc(var(--op-space-scale-unit) * 8)"
|
|
649
707
|
},
|
|
708
|
+
"size": {
|
|
709
|
+
"unit": "0.4rem"
|
|
710
|
+
},
|
|
650
711
|
"shadow": {
|
|
651
712
|
"x-small": "0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%)",
|
|
652
713
|
"small": "0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%)",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rolemodel/optics",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
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
5
|
"main": "dist/scss/optics.scss",
|
|
6
6
|
"scripts": {
|
|
@@ -46,36 +46,37 @@
|
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@babel/preset-env": "^7.21.5",
|
|
49
|
-
"@storybook/addon-essentials": "^7.0
|
|
50
|
-
"@storybook/addon-links": "^7.0
|
|
51
|
-
"@storybook/addon-
|
|
52
|
-
"@storybook/
|
|
53
|
-
"@storybook/
|
|
54
|
-
"@storybook/html
|
|
55
|
-
"@storybook/
|
|
56
|
-
"
|
|
57
|
-
"eslint
|
|
58
|
-
"eslint-config-
|
|
59
|
-
"eslint-
|
|
60
|
-
"eslint-plugin-
|
|
49
|
+
"@storybook/addon-essentials": "^7.1.0",
|
|
50
|
+
"@storybook/addon-links": "^7.1.0",
|
|
51
|
+
"@storybook/addon-mdx-gfm": "^7.1.0",
|
|
52
|
+
"@storybook/addon-styling": "^1.3.4",
|
|
53
|
+
"@storybook/blocks": "^7.1.0",
|
|
54
|
+
"@storybook/html": "^7.1.0",
|
|
55
|
+
"@storybook/html-webpack5": "^7.1.0",
|
|
56
|
+
"@storybook/testing-library": "^0.2.0",
|
|
57
|
+
"eslint": "^8.45.0",
|
|
58
|
+
"eslint-config-prettier": "^8.8.0",
|
|
59
|
+
"eslint-config-standard": "^17.1.0",
|
|
60
|
+
"eslint-plugin-import": "^2.27.5",
|
|
61
|
+
"eslint-plugin-n": "^16.0.1",
|
|
61
62
|
"eslint-plugin-promise": "^6.1.1",
|
|
62
|
-
"eslint-plugin-storybook": "^0.6.
|
|
63
|
+
"eslint-plugin-storybook": "^0.6.13",
|
|
63
64
|
"generate-template-files": "^3.2.1",
|
|
64
65
|
"postcss-scss": "^4.0.6",
|
|
65
|
-
"prettier": "^
|
|
66
|
+
"prettier": "^3.0.0",
|
|
66
67
|
"react": "^18.2.0",
|
|
67
68
|
"react-dom": "^18.2.0",
|
|
68
|
-
"sass": "^1.
|
|
69
|
-
"sass-loader": "^13.
|
|
70
|
-
"storybook": "^7.0
|
|
69
|
+
"sass": "^1.64.0",
|
|
70
|
+
"sass-loader": "^13.3.2",
|
|
71
|
+
"storybook": "^7.1.0",
|
|
71
72
|
"storybook-design-token": "^3.0.0-beta.3",
|
|
72
|
-
"style-loader": "^
|
|
73
|
-
"stylelint": "^
|
|
73
|
+
"style-loader": "^3.3.3",
|
|
74
|
+
"stylelint": "^15.10.1",
|
|
74
75
|
"stylelint-config-idiomatic-order": "^9.0.0",
|
|
75
|
-
"stylelint-config-prettier-scss": "^0.0
|
|
76
|
-
"stylelint-config-standard-scss": "^
|
|
77
|
-
"stylelint-prettier": "^
|
|
78
|
-
"stylelint-scss": "^
|
|
76
|
+
"stylelint-config-prettier-scss": "^1.0.0",
|
|
77
|
+
"stylelint-config-standard-scss": "^10.0.0",
|
|
78
|
+
"stylelint-prettier": "^4.0.0",
|
|
79
|
+
"stylelint-scss": "^5.0.1"
|
|
79
80
|
},
|
|
80
81
|
"peerDependencies": {
|
|
81
82
|
"tom-select": "^2.0.0"
|