opui-css 2.1.0 → 2.2.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/dist/op+ui.css +7 -162
- package/dist/ui.css +0 -163
- package/package.json +1 -1
- package/src/main.css +8 -0
- package/src/opui.css +0 -3
- package/src/{core/theme.css → theme.css} +3 -0
package/dist/op+ui.css
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
@layer openprops, normalize, utils, theme, components.root, components.extended;
|
|
2
|
+
/*
|
|
3
|
+
This main.css file represents whatever file you choose to use as an entry point for OPUI
|
|
4
|
+
Ideally it's the root/entry CSS file in your project.
|
|
5
|
+
*/
|
|
2
6
|
/* Open Props imports */
|
|
3
7
|
/*
|
|
4
8
|
* Open Props
|
|
@@ -342,167 +346,6 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
342
346
|
}
|
|
343
347
|
}
|
|
344
348
|
}
|
|
345
|
-
/* Theme */
|
|
346
|
-
@layer theme {
|
|
347
|
-
.light {
|
|
348
|
-
--color-scheme: light;
|
|
349
|
-
}
|
|
350
|
-
.dark {
|
|
351
|
-
--color-scheme: dark;
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
:where(html) {
|
|
355
|
-
color-scheme: var(--color-scheme, light dark);
|
|
356
|
-
|
|
357
|
-
--palette-hue: var(--oklch-teal);
|
|
358
|
-
--palette-hue-rotate-by: 5;
|
|
359
|
-
--palette-chroma: 0.89;
|
|
360
|
-
|
|
361
|
-
/* Primary */
|
|
362
|
-
--primary: var(--color-8);
|
|
363
|
-
--primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
|
|
364
|
-
--primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
|
|
365
|
-
--primary-contrast: var(--gray-1);
|
|
366
|
-
|
|
367
|
-
/* Text */
|
|
368
|
-
--text-color-1: light-dark(var(--gray-15), var(--gray-1));
|
|
369
|
-
--text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
|
|
370
|
-
--text-color-2: light-dark(var(--gray-13), var(--gray-4));
|
|
371
|
-
--text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));
|
|
372
|
-
|
|
373
|
-
/* Surface */
|
|
374
|
-
--surface-default: light-dark(var(--gray-1), var(--gray-13));
|
|
375
|
-
--surface-filled: light-dark(var(--gray-3), var(--gray-15));
|
|
376
|
-
--surface-tonal: light-dark(var(--gray-3), var(--gray-12));
|
|
377
|
-
--surface-elevated: light-dark(var(--gray-1), var(--gray-12));
|
|
378
|
-
|
|
379
|
-
/* Shadows */
|
|
380
|
-
--shadow-color: light-dark(220 3% 15%, 220 40% 2%);
|
|
381
|
-
--shadow-strength: light-dark(1%, 10%);
|
|
382
|
-
--inner-shadow-highlight: light-dark(
|
|
383
|
-
inset 0 -0.5px 0 0 #fff,
|
|
384
|
-
inset 0 0.5px 0 0 #0001,
|
|
385
|
-
inset 0 -0.5px 0 0 #fff1,
|
|
386
|
-
inset 0 0.5px 0 0 #0007
|
|
387
|
-
);
|
|
388
|
-
|
|
389
|
-
/* Typography */
|
|
390
|
-
--font-size-h1: var(--font-size-fluid-3, 3.5rem);
|
|
391
|
-
--font-size-h2: var(--font-size-fluid-2, 2rem);
|
|
392
|
-
--font-size-h3: var(--font-size-fluid-1, 1.5rem);
|
|
393
|
-
--font-size-h4: var(--font-size-3, 1.25rem);
|
|
394
|
-
--font-size-h5: var(--font-size-2, 1.1rem);
|
|
395
|
-
--font-size-h6: var(--font-size-fluid-0, 1rem);
|
|
396
|
-
--font-size-lg: var(--font-size-3, 1.25rem);
|
|
397
|
-
--font-size-md: var(--font-size-fluid-0, 1rem);
|
|
398
|
-
--font-size-sm: 0.875rem;
|
|
399
|
-
--font-size-xs: var(--font-size-0, 0.75rem);
|
|
400
|
-
|
|
401
|
-
/* Borders */
|
|
402
|
-
--border-color: light-dark(var(--gray-4), var(--gray-12));
|
|
403
|
-
--border-radius: var(--size-1);
|
|
404
|
-
--border-width: 1px;
|
|
405
|
-
|
|
406
|
-
/* Input Field */
|
|
407
|
-
--field-border-color: var(--border-color);
|
|
408
|
-
--field-border-radius: var(--size-1);
|
|
409
|
-
--field-border-width: 1px;
|
|
410
|
-
--field-size: 2.3lh;
|
|
411
|
-
--field-size-small: 1.9lh;
|
|
412
|
-
|
|
413
|
-
/* Button */
|
|
414
|
-
--button-border-radius: var(--radius-round);
|
|
415
|
-
/* Ripple effect */
|
|
416
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
417
|
-
--button-ripple-size: 100%;
|
|
418
|
-
--button-ripple-duration: 0.5s;
|
|
419
|
-
}
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
/* Highlight colors */
|
|
423
|
-
:where(.red, .error, del) {
|
|
424
|
-
--palette-hue: var(--oklch-red, 25);
|
|
425
|
-
--palette-chroma: 1;
|
|
426
|
-
--palette-hue-rotate-by: 1;
|
|
427
|
-
}
|
|
428
|
-
:where(.blue, .ok, abbr, dfn) {
|
|
429
|
-
--palette-hue: var(--oklch-blue, 210);
|
|
430
|
-
--palette-chroma: 1;
|
|
431
|
-
--palette-hue-rotate-by: 1;
|
|
432
|
-
}
|
|
433
|
-
:where(.green, .good, ins) {
|
|
434
|
-
--palette-hue: var(--oklch-green, 145);
|
|
435
|
-
--palette-chroma: 1;
|
|
436
|
-
--palette-hue-rotate-by: 1;
|
|
437
|
-
}
|
|
438
|
-
:where(.orange, .warning) {
|
|
439
|
-
--palette-hue: var(--oklch-orange, 75);
|
|
440
|
-
--palette-chroma: 1;
|
|
441
|
-
--palette-hue-rotate-by: 1;
|
|
442
|
-
}
|
|
443
|
-
|
|
444
|
-
:where(html) {
|
|
445
|
-
--red: oklch(from var(--color-9) l 0.2 25);
|
|
446
|
-
--blue: oklch(from var(--color-9) l 0.2 210);
|
|
447
|
-
--green: oklch(from var(--color-9) l 0.2 145);
|
|
448
|
-
--orange: oklch(from var(--color-7) l 0.2 75);
|
|
449
|
-
}
|
|
450
|
-
|
|
451
|
-
/* Gray palette */
|
|
452
|
-
:where(html) {
|
|
453
|
-
--gray-chroma: 0.01;
|
|
454
|
-
--gray-lightness: 255;
|
|
455
|
-
|
|
456
|
-
--gray-1: oklch(
|
|
457
|
-
from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
|
|
458
|
-
);
|
|
459
|
-
--gray-2: oklch(
|
|
460
|
-
from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
|
|
461
|
-
);
|
|
462
|
-
--gray-3: oklch(
|
|
463
|
-
from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
|
|
464
|
-
);
|
|
465
|
-
--gray-4: oklch(
|
|
466
|
-
from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
|
|
467
|
-
);
|
|
468
|
-
--gray-5: oklch(
|
|
469
|
-
from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
|
|
470
|
-
);
|
|
471
|
-
--gray-6: oklch(
|
|
472
|
-
from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
|
|
473
|
-
);
|
|
474
|
-
--gray-7: oklch(
|
|
475
|
-
from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
|
|
476
|
-
);
|
|
477
|
-
--gray-8: oklch(
|
|
478
|
-
from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
|
|
479
|
-
);
|
|
480
|
-
--gray-9: oklch(
|
|
481
|
-
from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
|
|
482
|
-
);
|
|
483
|
-
--gray-10: oklch(
|
|
484
|
-
from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
|
|
485
|
-
);
|
|
486
|
-
--gray-11: oklch(
|
|
487
|
-
from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
|
|
488
|
-
);
|
|
489
|
-
--gray-12: oklch(
|
|
490
|
-
from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
|
|
491
|
-
);
|
|
492
|
-
--gray-13: oklch(
|
|
493
|
-
from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
|
|
494
|
-
);
|
|
495
|
-
--gray-14: oklch(
|
|
496
|
-
from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
|
|
497
|
-
);
|
|
498
|
-
--gray-15: oklch(
|
|
499
|
-
from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
|
|
500
|
-
);
|
|
501
|
-
--gray-16: oklch(
|
|
502
|
-
from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
|
|
503
|
-
);
|
|
504
|
-
}
|
|
505
|
-
}
|
|
506
349
|
/* Components */
|
|
507
350
|
/*
|
|
508
351
|
* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
|
|
@@ -4305,4 +4148,6 @@ Lists meant to be used stand-alone or as part of Select elements
|
|
|
4305
4148
|
}
|
|
4306
4149
|
}
|
|
4307
4150
|
}
|
|
4308
|
-
}
|
|
4151
|
+
}
|
|
4152
|
+
/* Theme (example) */
|
|
4153
|
+
/* @import "./theme.css"; */
|
package/dist/ui.css
CHANGED
|
@@ -260,169 +260,6 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
262
|
|
|
263
|
-
/* Theme */
|
|
264
|
-
|
|
265
|
-
@layer theme {
|
|
266
|
-
.light {
|
|
267
|
-
--color-scheme: light;
|
|
268
|
-
}
|
|
269
|
-
.dark {
|
|
270
|
-
--color-scheme: dark;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
:where(html) {
|
|
274
|
-
color-scheme: var(--color-scheme, light dark);
|
|
275
|
-
|
|
276
|
-
--palette-hue: var(--oklch-teal);
|
|
277
|
-
--palette-hue-rotate-by: 5;
|
|
278
|
-
--palette-chroma: 0.89;
|
|
279
|
-
|
|
280
|
-
/* Primary */
|
|
281
|
-
--primary: var(--color-8);
|
|
282
|
-
--primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
|
|
283
|
-
--primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
|
|
284
|
-
--primary-contrast: var(--gray-1);
|
|
285
|
-
|
|
286
|
-
/* Text */
|
|
287
|
-
--text-color-1: light-dark(var(--gray-15), var(--gray-1));
|
|
288
|
-
--text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
|
|
289
|
-
--text-color-2: light-dark(var(--gray-13), var(--gray-4));
|
|
290
|
-
--text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));
|
|
291
|
-
|
|
292
|
-
/* Surface */
|
|
293
|
-
--surface-default: light-dark(var(--gray-1), var(--gray-13));
|
|
294
|
-
--surface-filled: light-dark(var(--gray-3), var(--gray-15));
|
|
295
|
-
--surface-tonal: light-dark(var(--gray-3), var(--gray-12));
|
|
296
|
-
--surface-elevated: light-dark(var(--gray-1), var(--gray-12));
|
|
297
|
-
|
|
298
|
-
/* Shadows */
|
|
299
|
-
--shadow-color: light-dark(220 3% 15%, 220 40% 2%);
|
|
300
|
-
--shadow-strength: light-dark(1%, 10%);
|
|
301
|
-
--inner-shadow-highlight: light-dark(
|
|
302
|
-
inset 0 -0.5px 0 0 #fff,
|
|
303
|
-
inset 0 0.5px 0 0 #0001,
|
|
304
|
-
inset 0 -0.5px 0 0 #fff1,
|
|
305
|
-
inset 0 0.5px 0 0 #0007
|
|
306
|
-
);
|
|
307
|
-
|
|
308
|
-
/* Typography */
|
|
309
|
-
--font-size-h1: var(--font-size-fluid-3, 3.5rem);
|
|
310
|
-
--font-size-h2: var(--font-size-fluid-2, 2rem);
|
|
311
|
-
--font-size-h3: var(--font-size-fluid-1, 1.5rem);
|
|
312
|
-
--font-size-h4: var(--font-size-3, 1.25rem);
|
|
313
|
-
--font-size-h5: var(--font-size-2, 1.1rem);
|
|
314
|
-
--font-size-h6: var(--font-size-fluid-0, 1rem);
|
|
315
|
-
--font-size-lg: var(--font-size-3, 1.25rem);
|
|
316
|
-
--font-size-md: var(--font-size-fluid-0, 1rem);
|
|
317
|
-
--font-size-sm: 0.875rem;
|
|
318
|
-
--font-size-xs: var(--font-size-0, 0.75rem);
|
|
319
|
-
|
|
320
|
-
/* Borders */
|
|
321
|
-
--border-color: light-dark(var(--gray-4), var(--gray-12));
|
|
322
|
-
--border-radius: var(--size-1);
|
|
323
|
-
--border-width: 1px;
|
|
324
|
-
|
|
325
|
-
/* Input Field */
|
|
326
|
-
--field-border-color: var(--border-color);
|
|
327
|
-
--field-border-radius: var(--size-1);
|
|
328
|
-
--field-border-width: 1px;
|
|
329
|
-
--field-size: 2.3lh;
|
|
330
|
-
--field-size-small: 1.9lh;
|
|
331
|
-
|
|
332
|
-
/* Button */
|
|
333
|
-
--button-border-radius: var(--radius-round);
|
|
334
|
-
/* Ripple effect */
|
|
335
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
336
|
-
--button-ripple-size: 100%;
|
|
337
|
-
--button-ripple-duration: 0.5s;
|
|
338
|
-
}
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
/* Highlight colors */
|
|
342
|
-
:where(.red, .error, del) {
|
|
343
|
-
--palette-hue: var(--oklch-red, 25);
|
|
344
|
-
--palette-chroma: 1;
|
|
345
|
-
--palette-hue-rotate-by: 1;
|
|
346
|
-
}
|
|
347
|
-
:where(.blue, .ok, abbr, dfn) {
|
|
348
|
-
--palette-hue: var(--oklch-blue, 210);
|
|
349
|
-
--palette-chroma: 1;
|
|
350
|
-
--palette-hue-rotate-by: 1;
|
|
351
|
-
}
|
|
352
|
-
:where(.green, .good, ins) {
|
|
353
|
-
--palette-hue: var(--oklch-green, 145);
|
|
354
|
-
--palette-chroma: 1;
|
|
355
|
-
--palette-hue-rotate-by: 1;
|
|
356
|
-
}
|
|
357
|
-
:where(.orange, .warning) {
|
|
358
|
-
--palette-hue: var(--oklch-orange, 75);
|
|
359
|
-
--palette-chroma: 1;
|
|
360
|
-
--palette-hue-rotate-by: 1;
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
:where(html) {
|
|
364
|
-
--red: oklch(from var(--color-9) l 0.2 25);
|
|
365
|
-
--blue: oklch(from var(--color-9) l 0.2 210);
|
|
366
|
-
--green: oklch(from var(--color-9) l 0.2 145);
|
|
367
|
-
--orange: oklch(from var(--color-7) l 0.2 75);
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
/* Gray palette */
|
|
371
|
-
:where(html) {
|
|
372
|
-
--gray-chroma: 0.01;
|
|
373
|
-
--gray-lightness: 255;
|
|
374
|
-
|
|
375
|
-
--gray-1: oklch(
|
|
376
|
-
from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
|
|
377
|
-
);
|
|
378
|
-
--gray-2: oklch(
|
|
379
|
-
from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
|
|
380
|
-
);
|
|
381
|
-
--gray-3: oklch(
|
|
382
|
-
from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
|
|
383
|
-
);
|
|
384
|
-
--gray-4: oklch(
|
|
385
|
-
from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
|
|
386
|
-
);
|
|
387
|
-
--gray-5: oklch(
|
|
388
|
-
from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
|
|
389
|
-
);
|
|
390
|
-
--gray-6: oklch(
|
|
391
|
-
from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
|
|
392
|
-
);
|
|
393
|
-
--gray-7: oklch(
|
|
394
|
-
from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
|
|
395
|
-
);
|
|
396
|
-
--gray-8: oklch(
|
|
397
|
-
from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
|
|
398
|
-
);
|
|
399
|
-
--gray-9: oklch(
|
|
400
|
-
from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
|
|
401
|
-
);
|
|
402
|
-
--gray-10: oklch(
|
|
403
|
-
from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
|
|
404
|
-
);
|
|
405
|
-
--gray-11: oklch(
|
|
406
|
-
from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
|
|
407
|
-
);
|
|
408
|
-
--gray-12: oklch(
|
|
409
|
-
from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
|
|
410
|
-
);
|
|
411
|
-
--gray-13: oklch(
|
|
412
|
-
from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
|
|
413
|
-
);
|
|
414
|
-
--gray-14: oklch(
|
|
415
|
-
from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
|
|
416
|
-
);
|
|
417
|
-
--gray-15: oklch(
|
|
418
|
-
from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
|
|
419
|
-
);
|
|
420
|
-
--gray-16: oklch(
|
|
421
|
-
from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
|
|
422
|
-
);
|
|
423
|
-
}
|
|
424
|
-
}
|
|
425
|
-
|
|
426
263
|
/* Components */
|
|
427
264
|
|
|
428
265
|
/*
|
package/package.json
CHANGED
package/src/main.css
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
|
+
/*
|
|
2
|
+
This main.css file represents whatever file you choose to use as an entry point for OPUI
|
|
3
|
+
Ideally it's the root/entry CSS file in your project.
|
|
4
|
+
*/
|
|
5
|
+
|
|
1
6
|
/* Open Props imports */
|
|
2
7
|
@import "./open-props.css";
|
|
3
8
|
|
|
4
9
|
/* OPUI Core */
|
|
5
10
|
@import "./opui.css";
|
|
11
|
+
|
|
12
|
+
/* Theme (example) */
|
|
13
|
+
/* @import "./theme.css"; */
|
package/src/opui.css
CHANGED