@rolemodel/optics 0.4.2 → 0.5.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.
- package/NEW_COMPONENT.md +59 -0
- package/README.md +12 -0
- package/dist/css/optics.css +688 -233
- package/dist/css/optics.css.map +1 -1
- package/dist/scss/components/accordion.scss +7 -1
- package/dist/scss/components/avatar.scss +7 -6
- package/dist/scss/components/breadcrumbs.scss +41 -0
- 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 +48 -2
- package/dist/scss/components/icon.scss +4 -1
- package/dist/scss/components/index.scss +8 -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 +111 -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/text_pair.scss +59 -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 +64 -3
- package/package.json +25 -24
|
@@ -64,6 +64,41 @@
|
|
|
64
64
|
--op-color-alerts-notice-l: 64%;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
+
@mixin opacities {
|
|
68
|
+
/**
|
|
69
|
+
* @tokens Opacities
|
|
70
|
+
* @presenter Opacity
|
|
71
|
+
*/
|
|
72
|
+
--op-opacity-none: 0;
|
|
73
|
+
--op-opacity-overlay: 0.2;
|
|
74
|
+
--op-opacity-disabled: 0.4;
|
|
75
|
+
--op-opacity-half: 0.5;
|
|
76
|
+
--op-opacity-full: 1;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Breakpoints are duplicated here for use as variables with calculations and for use in @media queries.
|
|
80
|
+
// We use SCSS variables outside the root since support for custom properties / css variables
|
|
81
|
+
// is not yet available
|
|
82
|
+
// https://drafts.csswg.org/css-env-1/
|
|
83
|
+
// https://bholmes.dev/blog/alternative-to-css-variable-media-queries/
|
|
84
|
+
@mixin breakpoints {
|
|
85
|
+
/**
|
|
86
|
+
* @tokens Breakpoints
|
|
87
|
+
* @presenter Spacing
|
|
88
|
+
*/
|
|
89
|
+
--op-breakpoint-x-small: 512px; // vertical phone
|
|
90
|
+
--op-breakpoint-small: 768px; // vertical ipad
|
|
91
|
+
--op-breakpoint-medium: 1024px; // landscape ipad
|
|
92
|
+
--op-breakpoint-large: 1280px; // small laptop
|
|
93
|
+
--op-breakpoint-x-large: 1440px; // medium laptop
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
$breakpoint-x-small: 512px; // vertical phone
|
|
97
|
+
$breakpoint-small: 768px; // vertical ipad
|
|
98
|
+
$breakpoint-medium: 1024px; // landscape ipad
|
|
99
|
+
$breakpoint-large: 1280px; // small laptop
|
|
100
|
+
$breakpoint-x-large: 1440px; // medium laptop
|
|
101
|
+
|
|
67
102
|
@mixin border-radius {
|
|
68
103
|
/**
|
|
69
104
|
* @tokens Border Radius
|
|
@@ -181,6 +216,7 @@
|
|
|
181
216
|
--op-transition-sidebar: all 200ms ease-in-out;
|
|
182
217
|
--op-transition-modal: all 300ms ease-in;
|
|
183
218
|
--op-transition-panel: right 400ms ease-in;
|
|
219
|
+
--op-transition-tooltip: all 300ms ease-in 300ms;
|
|
184
220
|
}
|
|
185
221
|
|
|
186
222
|
@mixin animations {
|
|
@@ -195,8 +231,8 @@
|
|
|
195
231
|
/**
|
|
196
232
|
* @tokens Encoded Images
|
|
197
233
|
*/
|
|
198
|
-
--op-encoded-images-dropdown-arrow-width: var(--op-space-scale-unit); // No way to string interpolate
|
|
199
|
-
--op-encoded-images-dropdown-arrow: url(
|
|
234
|
+
--op-encoded-images-dropdown-arrow-width: calc(1.2 * var(--op-space-scale-unit)); // 12px No way to string interpolate
|
|
235
|
+
--op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiMwQTBBMEIiLz4KPC9zdmc+Cg==');
|
|
200
236
|
}
|
|
201
237
|
|
|
202
238
|
@mixin fonts {
|
|
@@ -225,6 +261,14 @@
|
|
|
225
261
|
--op-space-4x-large: calc(var(--op-space-scale-unit) * 8); // 80px
|
|
226
262
|
}
|
|
227
263
|
|
|
264
|
+
@mixin sizing-scales {
|
|
265
|
+
/**
|
|
266
|
+
* @tokens Size Scale
|
|
267
|
+
* @presenter Spacing
|
|
268
|
+
*/
|
|
269
|
+
--op-size-unit: 0.4rem; // 4px;
|
|
270
|
+
}
|
|
271
|
+
|
|
228
272
|
@mixin shadows {
|
|
229
273
|
/**
|
|
230
274
|
* @tokens Shadows
|
|
@@ -273,29 +317,25 @@
|
|
|
273
317
|
--op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
|
|
274
318
|
--op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-plus-two),
|
|
275
319
|
var(--op-input-outer-focus) var(--op-color-primary-plus-five);
|
|
320
|
+
--op-input-focus-neutral: var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
|
|
321
|
+
var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
|
|
276
322
|
--op-input-focus-danger: var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
|
|
277
323
|
var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
|
|
278
324
|
--op-input-focus-warning: var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
|
|
279
325
|
var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
|
|
326
|
+
--op-input-focus-info: var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
|
|
327
|
+
var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
|
|
328
|
+
--op-input-focus-notice: var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
|
|
329
|
+
var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
|
|
280
330
|
}
|
|
281
331
|
|
|
282
|
-
// We use SCSS variables outside the root since support for custom properties / css variables
|
|
283
|
-
// is not yet available
|
|
284
|
-
// https://drafts.csswg.org/css-env-1/
|
|
285
|
-
// https://bholmes.dev/blog/alternative-to-css-variable-media-queries/
|
|
286
|
-
|
|
287
|
-
/**
|
|
288
|
-
* @tokens Breakpoints
|
|
289
|
-
*/
|
|
290
|
-
$breakpoint-x-small: 512px; // vertical phone
|
|
291
|
-
$breakpoint-small: 768px; // vertical ipad
|
|
292
|
-
$breakpoint-medium: 1024px; // landscape ipad
|
|
293
|
-
$breakpoint-large: 1280px; // small laptop
|
|
294
|
-
$breakpoint-x-large: 1440px; // medium laptop
|
|
295
|
-
|
|
296
332
|
:root {
|
|
297
333
|
// Color HSLs
|
|
298
334
|
@include color-varieties;
|
|
335
|
+
@include opacities;
|
|
336
|
+
|
|
337
|
+
// Breakpoints
|
|
338
|
+
@include breakpoints;
|
|
299
339
|
|
|
300
340
|
// Border
|
|
301
341
|
@include border-radius;
|
|
@@ -320,6 +360,7 @@ $breakpoint-x-large: 1440px; // medium laptop
|
|
|
320
360
|
@include encoded-images;
|
|
321
361
|
|
|
322
362
|
// Spacing
|
|
363
|
+
@include sizing-scales;
|
|
323
364
|
@include spacing-scales;
|
|
324
365
|
|
|
325
366
|
// Shadows
|
|
@@ -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",
|
|
@@ -623,7 +680,8 @@
|
|
|
623
680
|
"input": "all 120ms ease-in",
|
|
624
681
|
"sidebar": "all 200ms ease-in-out",
|
|
625
682
|
"modal": "all 300ms ease-in",
|
|
626
|
-
"panel": "right 400ms ease-in"
|
|
683
|
+
"panel": "right 400ms ease-in",
|
|
684
|
+
"tooltip": "all 300ms ease-in 300ms"
|
|
627
685
|
},
|
|
628
686
|
"animation": {
|
|
629
687
|
"flash": "rm-slide-in-out-flash 5s normal forwards"
|
|
@@ -631,7 +689,7 @@
|
|
|
631
689
|
"encoded": {
|
|
632
690
|
"images": {
|
|
633
691
|
"dropdown": {
|
|
634
|
-
"arrow": "url(
|
|
692
|
+
"arrow": "url('data"
|
|
635
693
|
}
|
|
636
694
|
}
|
|
637
695
|
},
|
|
@@ -648,6 +706,9 @@
|
|
|
648
706
|
"3x-large": "calc(var(--op-space-scale-unit) * 4)",
|
|
649
707
|
"4x-large": "calc(var(--op-space-scale-unit) * 8)"
|
|
650
708
|
},
|
|
709
|
+
"size": {
|
|
710
|
+
"unit": "0.4rem"
|
|
711
|
+
},
|
|
651
712
|
"shadow": {
|
|
652
713
|
"x-small": "0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%)",
|
|
653
714
|
"small": "0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%)",
|