opui-css 2.0.1 → 2.2.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/dist/op+ui.css +172 -164
- package/dist/op.css +85 -0
- package/dist/ui.css +0 -163
- package/package.json +3 -3
- package/src/main.css +8 -8
- package/src/open-props.css +10 -0
- package/src/opui.css +0 -3
- package/src/{core/theme.css → theme.css} +3 -0
package/dist/op+ui.css
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
@layer openprops, normalize, utils, theme, components.root, components.extended;
|
|
2
2
|
/*
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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
|
+
*/
|
|
6
|
+
/* Open Props imports */
|
|
7
|
+
/*
|
|
8
|
+
* Open Props
|
|
9
|
+
* Import as many props as you need here.
|
|
10
|
+
* https://unpkg.com/browse/open-props@2.0.0-beta.5/css
|
|
6
11
|
*/
|
|
7
12
|
@custom-media --motionOK (prefers-reduced-motion: no-preference);
|
|
8
13
|
@custom-media --motionNotOK (prefers-reduced-motion: reduce);
|
|
@@ -341,167 +346,6 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
341
346
|
}
|
|
342
347
|
}
|
|
343
348
|
}
|
|
344
|
-
/* Theme */
|
|
345
|
-
@layer theme {
|
|
346
|
-
.light {
|
|
347
|
-
--color-scheme: light;
|
|
348
|
-
}
|
|
349
|
-
.dark {
|
|
350
|
-
--color-scheme: dark;
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
:where(html) {
|
|
354
|
-
color-scheme: var(--color-scheme, light dark);
|
|
355
|
-
|
|
356
|
-
--palette-hue: var(--oklch-teal);
|
|
357
|
-
--palette-hue-rotate-by: 5;
|
|
358
|
-
--palette-chroma: 0.89;
|
|
359
|
-
|
|
360
|
-
/* Primary */
|
|
361
|
-
--primary: var(--color-8);
|
|
362
|
-
--primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
|
|
363
|
-
--primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
|
|
364
|
-
--primary-contrast: var(--gray-1);
|
|
365
|
-
|
|
366
|
-
/* Text */
|
|
367
|
-
--text-color-1: light-dark(var(--gray-15), var(--gray-1));
|
|
368
|
-
--text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
|
|
369
|
-
--text-color-2: light-dark(var(--gray-13), var(--gray-4));
|
|
370
|
-
--text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));
|
|
371
|
-
|
|
372
|
-
/* Surface */
|
|
373
|
-
--surface-default: light-dark(var(--gray-1), var(--gray-13));
|
|
374
|
-
--surface-filled: light-dark(var(--gray-3), var(--gray-15));
|
|
375
|
-
--surface-tonal: light-dark(var(--gray-3), var(--gray-12));
|
|
376
|
-
--surface-elevated: light-dark(var(--gray-1), var(--gray-12));
|
|
377
|
-
|
|
378
|
-
/* Shadows */
|
|
379
|
-
--shadow-color: light-dark(220 3% 15%, 220 40% 2%);
|
|
380
|
-
--shadow-strength: light-dark(1%, 10%);
|
|
381
|
-
--inner-shadow-highlight: light-dark(
|
|
382
|
-
inset 0 -0.5px 0 0 #fff,
|
|
383
|
-
inset 0 0.5px 0 0 #0001,
|
|
384
|
-
inset 0 -0.5px 0 0 #fff1,
|
|
385
|
-
inset 0 0.5px 0 0 #0007
|
|
386
|
-
);
|
|
387
|
-
|
|
388
|
-
/* Typography */
|
|
389
|
-
--font-size-h1: var(--font-size-fluid-3, 3.5rem);
|
|
390
|
-
--font-size-h2: var(--font-size-fluid-2, 2rem);
|
|
391
|
-
--font-size-h3: var(--font-size-fluid-1, 1.5rem);
|
|
392
|
-
--font-size-h4: var(--font-size-3, 1.25rem);
|
|
393
|
-
--font-size-h5: var(--font-size-2, 1.1rem);
|
|
394
|
-
--font-size-h6: var(--font-size-fluid-0, 1rem);
|
|
395
|
-
--font-size-lg: var(--font-size-3, 1.25rem);
|
|
396
|
-
--font-size-md: var(--font-size-fluid-0, 1rem);
|
|
397
|
-
--font-size-sm: 0.875rem;
|
|
398
|
-
--font-size-xs: var(--font-size-0, 0.75rem);
|
|
399
|
-
|
|
400
|
-
/* Borders */
|
|
401
|
-
--border-color: light-dark(var(--gray-4), var(--gray-12));
|
|
402
|
-
--border-radius: var(--size-1);
|
|
403
|
-
--border-width: 1px;
|
|
404
|
-
|
|
405
|
-
/* Input Field */
|
|
406
|
-
--field-border-color: var(--border-color);
|
|
407
|
-
--field-border-radius: var(--size-1);
|
|
408
|
-
--field-border-width: 1px;
|
|
409
|
-
--field-size: 2.3lh;
|
|
410
|
-
--field-size-small: 1.9lh;
|
|
411
|
-
|
|
412
|
-
/* Button */
|
|
413
|
-
--button-border-radius: var(--radius-round);
|
|
414
|
-
/* Ripple effect */
|
|
415
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
416
|
-
--button-ripple-size: 100%;
|
|
417
|
-
--button-ripple-duration: 0.5s;
|
|
418
|
-
}
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
/* Highlight colors */
|
|
422
|
-
:where(.red, .error, del) {
|
|
423
|
-
--palette-hue: var(--oklch-red, 25);
|
|
424
|
-
--palette-chroma: 1;
|
|
425
|
-
--palette-hue-rotate-by: 1;
|
|
426
|
-
}
|
|
427
|
-
:where(.blue, .ok, abbr, dfn) {
|
|
428
|
-
--palette-hue: var(--oklch-blue, 210);
|
|
429
|
-
--palette-chroma: 1;
|
|
430
|
-
--palette-hue-rotate-by: 1;
|
|
431
|
-
}
|
|
432
|
-
:where(.green, .good, ins) {
|
|
433
|
-
--palette-hue: var(--oklch-green, 145);
|
|
434
|
-
--palette-chroma: 1;
|
|
435
|
-
--palette-hue-rotate-by: 1;
|
|
436
|
-
}
|
|
437
|
-
:where(.orange, .warning) {
|
|
438
|
-
--palette-hue: var(--oklch-orange, 75);
|
|
439
|
-
--palette-chroma: 1;
|
|
440
|
-
--palette-hue-rotate-by: 1;
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
:where(html) {
|
|
444
|
-
--red: oklch(from var(--color-9) l 0.2 25);
|
|
445
|
-
--blue: oklch(from var(--color-9) l 0.2 210);
|
|
446
|
-
--green: oklch(from var(--color-9) l 0.2 145);
|
|
447
|
-
--orange: oklch(from var(--color-7) l 0.2 75);
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
/* Gray palette */
|
|
451
|
-
:where(html) {
|
|
452
|
-
--gray-chroma: 0.01;
|
|
453
|
-
--gray-lightness: 255;
|
|
454
|
-
|
|
455
|
-
--gray-1: oklch(
|
|
456
|
-
from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
|
|
457
|
-
);
|
|
458
|
-
--gray-2: oklch(
|
|
459
|
-
from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
|
|
460
|
-
);
|
|
461
|
-
--gray-3: oklch(
|
|
462
|
-
from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
|
|
463
|
-
);
|
|
464
|
-
--gray-4: oklch(
|
|
465
|
-
from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
|
|
466
|
-
);
|
|
467
|
-
--gray-5: oklch(
|
|
468
|
-
from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
|
|
469
|
-
);
|
|
470
|
-
--gray-6: oklch(
|
|
471
|
-
from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
|
|
472
|
-
);
|
|
473
|
-
--gray-7: oklch(
|
|
474
|
-
from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
|
|
475
|
-
);
|
|
476
|
-
--gray-8: oklch(
|
|
477
|
-
from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
|
|
478
|
-
);
|
|
479
|
-
--gray-9: oklch(
|
|
480
|
-
from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
|
|
481
|
-
);
|
|
482
|
-
--gray-10: oklch(
|
|
483
|
-
from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
|
|
484
|
-
);
|
|
485
|
-
--gray-11: oklch(
|
|
486
|
-
from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
|
|
487
|
-
);
|
|
488
|
-
--gray-12: oklch(
|
|
489
|
-
from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
|
|
490
|
-
);
|
|
491
|
-
--gray-13: oklch(
|
|
492
|
-
from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
|
|
493
|
-
);
|
|
494
|
-
--gray-14: oklch(
|
|
495
|
-
from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
|
|
496
|
-
);
|
|
497
|
-
--gray-15: oklch(
|
|
498
|
-
from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
|
|
499
|
-
);
|
|
500
|
-
--gray-16: oklch(
|
|
501
|
-
from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
|
|
502
|
-
);
|
|
503
|
-
}
|
|
504
|
-
}
|
|
505
349
|
/* Components */
|
|
506
350
|
/*
|
|
507
351
|
* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
|
|
@@ -4304,4 +4148,168 @@ Lists meant to be used stand-alone or as part of Select elements
|
|
|
4304
4148
|
}
|
|
4305
4149
|
}
|
|
4306
4150
|
}
|
|
4151
|
+
}
|
|
4152
|
+
/* Theme (example) */
|
|
4153
|
+
/*
|
|
4154
|
+
OPUI default theme
|
|
4155
|
+
*/
|
|
4156
|
+
@layer theme {
|
|
4157
|
+
.light {
|
|
4158
|
+
--color-scheme: light;
|
|
4159
|
+
}
|
|
4160
|
+
.dark {
|
|
4161
|
+
--color-scheme: dark;
|
|
4162
|
+
}
|
|
4163
|
+
|
|
4164
|
+
:where(html) {
|
|
4165
|
+
color-scheme: var(--color-scheme, light dark);
|
|
4166
|
+
|
|
4167
|
+
--palette-hue: var(--oklch-teal);
|
|
4168
|
+
--palette-hue-rotate-by: 5;
|
|
4169
|
+
--palette-chroma: 0.89;
|
|
4170
|
+
|
|
4171
|
+
/* Primary */
|
|
4172
|
+
--primary: var(--color-8);
|
|
4173
|
+
--primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
|
|
4174
|
+
--primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
|
|
4175
|
+
--primary-contrast: var(--gray-1);
|
|
4176
|
+
|
|
4177
|
+
/* Text */
|
|
4178
|
+
--text-color-1: light-dark(var(--gray-15), var(--gray-1));
|
|
4179
|
+
--text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
|
|
4180
|
+
--text-color-2: light-dark(var(--gray-13), var(--gray-4));
|
|
4181
|
+
--text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));
|
|
4182
|
+
|
|
4183
|
+
/* Surface */
|
|
4184
|
+
--surface-default: light-dark(var(--gray-1), var(--gray-13));
|
|
4185
|
+
--surface-filled: light-dark(var(--gray-3), var(--gray-15));
|
|
4186
|
+
--surface-tonal: light-dark(var(--gray-3), var(--gray-12));
|
|
4187
|
+
--surface-elevated: light-dark(var(--gray-1), var(--gray-12));
|
|
4188
|
+
|
|
4189
|
+
/* Shadows */
|
|
4190
|
+
--shadow-color: light-dark(220 3% 15%, 220 40% 2%);
|
|
4191
|
+
--shadow-strength: light-dark(1%, 10%);
|
|
4192
|
+
--inner-shadow-highlight: light-dark(
|
|
4193
|
+
inset 0 -0.5px 0 0 #fff,
|
|
4194
|
+
inset 0 0.5px 0 0 #0001,
|
|
4195
|
+
inset 0 -0.5px 0 0 #fff1,
|
|
4196
|
+
inset 0 0.5px 0 0 #0007
|
|
4197
|
+
);
|
|
4198
|
+
|
|
4199
|
+
/* Typography */
|
|
4200
|
+
--font-size-h1: var(--font-size-fluid-3, 3.5rem);
|
|
4201
|
+
--font-size-h2: var(--font-size-fluid-2, 2rem);
|
|
4202
|
+
--font-size-h3: var(--font-size-fluid-1, 1.5rem);
|
|
4203
|
+
--font-size-h4: var(--font-size-3, 1.25rem);
|
|
4204
|
+
--font-size-h5: var(--font-size-2, 1.1rem);
|
|
4205
|
+
--font-size-h6: var(--font-size-fluid-0, 1rem);
|
|
4206
|
+
--font-size-lg: var(--font-size-3, 1.25rem);
|
|
4207
|
+
--font-size-md: var(--font-size-fluid-0, 1rem);
|
|
4208
|
+
--font-size-sm: 0.875rem;
|
|
4209
|
+
--font-size-xs: var(--font-size-0, 0.75rem);
|
|
4210
|
+
|
|
4211
|
+
/* Borders */
|
|
4212
|
+
--border-color: light-dark(var(--gray-4), var(--gray-12));
|
|
4213
|
+
--border-radius: var(--size-1);
|
|
4214
|
+
--border-width: 1px;
|
|
4215
|
+
|
|
4216
|
+
/* Input Field */
|
|
4217
|
+
--field-border-color: var(--border-color);
|
|
4218
|
+
--field-border-radius: var(--size-1);
|
|
4219
|
+
--field-border-width: 1px;
|
|
4220
|
+
--field-size: 2.3lh;
|
|
4221
|
+
--field-size-small: 1.9lh;
|
|
4222
|
+
|
|
4223
|
+
/* Button */
|
|
4224
|
+
--button-border-radius: var(--radius-round);
|
|
4225
|
+
/* Ripple effect */
|
|
4226
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
4227
|
+
--button-ripple-size: 100%;
|
|
4228
|
+
--button-ripple-duration: 0.5s;
|
|
4229
|
+
}
|
|
4230
|
+
}
|
|
4231
|
+
|
|
4232
|
+
/* Highlight colors */
|
|
4233
|
+
:where(.red, .error, del) {
|
|
4234
|
+
--palette-hue: var(--oklch-red, 25);
|
|
4235
|
+
--palette-chroma: 1;
|
|
4236
|
+
--palette-hue-rotate-by: 1;
|
|
4237
|
+
}
|
|
4238
|
+
:where(.blue, .ok, abbr, dfn) {
|
|
4239
|
+
--palette-hue: var(--oklch-blue, 210);
|
|
4240
|
+
--palette-chroma: 1;
|
|
4241
|
+
--palette-hue-rotate-by: 1;
|
|
4242
|
+
}
|
|
4243
|
+
:where(.green, .good, ins) {
|
|
4244
|
+
--palette-hue: var(--oklch-green, 145);
|
|
4245
|
+
--palette-chroma: 1;
|
|
4246
|
+
--palette-hue-rotate-by: 1;
|
|
4247
|
+
}
|
|
4248
|
+
:where(.orange, .warning) {
|
|
4249
|
+
--palette-hue: var(--oklch-orange, 75);
|
|
4250
|
+
--palette-chroma: 1;
|
|
4251
|
+
--palette-hue-rotate-by: 1;
|
|
4252
|
+
}
|
|
4253
|
+
|
|
4254
|
+
:where(html) {
|
|
4255
|
+
--red: oklch(from var(--color-9) l 0.2 25);
|
|
4256
|
+
--blue: oklch(from var(--color-9) l 0.2 210);
|
|
4257
|
+
--green: oklch(from var(--color-9) l 0.2 145);
|
|
4258
|
+
--orange: oklch(from var(--color-7) l 0.2 75);
|
|
4259
|
+
}
|
|
4260
|
+
|
|
4261
|
+
/* Gray palette */
|
|
4262
|
+
:where(html) {
|
|
4263
|
+
--gray-chroma: 0.01;
|
|
4264
|
+
--gray-lightness: 255;
|
|
4265
|
+
|
|
4266
|
+
--gray-1: oklch(
|
|
4267
|
+
from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
|
|
4268
|
+
);
|
|
4269
|
+
--gray-2: oklch(
|
|
4270
|
+
from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
|
|
4271
|
+
);
|
|
4272
|
+
--gray-3: oklch(
|
|
4273
|
+
from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
|
|
4274
|
+
);
|
|
4275
|
+
--gray-4: oklch(
|
|
4276
|
+
from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
|
|
4277
|
+
);
|
|
4278
|
+
--gray-5: oklch(
|
|
4279
|
+
from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
|
|
4280
|
+
);
|
|
4281
|
+
--gray-6: oklch(
|
|
4282
|
+
from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
|
|
4283
|
+
);
|
|
4284
|
+
--gray-7: oklch(
|
|
4285
|
+
from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
|
|
4286
|
+
);
|
|
4287
|
+
--gray-8: oklch(
|
|
4288
|
+
from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
|
|
4289
|
+
);
|
|
4290
|
+
--gray-9: oklch(
|
|
4291
|
+
from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
|
|
4292
|
+
);
|
|
4293
|
+
--gray-10: oklch(
|
|
4294
|
+
from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
|
|
4295
|
+
);
|
|
4296
|
+
--gray-11: oklch(
|
|
4297
|
+
from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
|
|
4298
|
+
);
|
|
4299
|
+
--gray-12: oklch(
|
|
4300
|
+
from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
|
|
4301
|
+
);
|
|
4302
|
+
--gray-13: oklch(
|
|
4303
|
+
from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
|
|
4304
|
+
);
|
|
4305
|
+
--gray-14: oklch(
|
|
4306
|
+
from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
|
|
4307
|
+
);
|
|
4308
|
+
--gray-15: oklch(
|
|
4309
|
+
from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
|
|
4310
|
+
);
|
|
4311
|
+
--gray-16: oklch(
|
|
4312
|
+
from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
|
|
4313
|
+
);
|
|
4314
|
+
}
|
|
4307
4315
|
}
|
package/dist/op.css
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Open Props
|
|
3
|
+
* Import as many props as you need here.
|
|
4
|
+
* https://unpkg.com/browse/open-props@2.0.0-beta.5/css
|
|
5
|
+
*/
|
|
6
|
+
@custom-media --motionOK (prefers-reduced-motion: no-preference);
|
|
7
|
+
@custom-media --motionNotOK (prefers-reduced-motion: reduce);
|
|
8
|
+
@custom-media --opacityOK (prefers-reduced-transparency: no-preference);
|
|
9
|
+
@custom-media --opacityNotOK (prefers-reduced-transparency: reduce);
|
|
10
|
+
@custom-media --useDataOK (prefers-reduced-data: no-preference);
|
|
11
|
+
@custom-media --useDataNotOK (prefers-reduced-data: reduce);
|
|
12
|
+
@custom-media --OSdark (prefers-color-scheme: dark);
|
|
13
|
+
@custom-media --OSlight (prefers-color-scheme: light);
|
|
14
|
+
@custom-media --highContrast (prefers-contrast: more);
|
|
15
|
+
@custom-media --lowContrast (prefers-contrast: less);
|
|
16
|
+
@custom-media --portrait (orientation: portrait);
|
|
17
|
+
@custom-media --landscape (orientation: landscape);
|
|
18
|
+
@custom-media --HDcolor (dynamic-range: high);
|
|
19
|
+
@custom-media --touch (hover: none) and (pointer: coarse);
|
|
20
|
+
@custom-media --stylus (hover: none) and (pointer: fine);
|
|
21
|
+
@custom-media --pointer (hover) and (pointer: coarse);
|
|
22
|
+
@custom-media --mouse (hover) and (pointer: fine);
|
|
23
|
+
@custom-media --xxs-only (0px <= width <= 240px);
|
|
24
|
+
@custom-media --xxs-n-above (width >= 240px);
|
|
25
|
+
@custom-media --xxs-n-below (width < 240px);
|
|
26
|
+
@custom-media --xxs-phone (--xxs-only) and (--portrait);
|
|
27
|
+
@custom-media --xs-only (240px <= width <= 360px);
|
|
28
|
+
@custom-media --xs-n-above (width >= 360px);
|
|
29
|
+
@custom-media --xs-n-below (width < 360px);
|
|
30
|
+
@custom-media --xs-phone (--xs-only) and (--portrait);
|
|
31
|
+
@custom-media --sm-only (360px <= width <= 480px);
|
|
32
|
+
@custom-media --sm-n-above (width >= 480px);
|
|
33
|
+
@custom-media --sm-n-below (width < 480px);
|
|
34
|
+
@custom-media --sm-phone (--sm-only) and (--portrait);
|
|
35
|
+
@custom-media --md-only (480px <= width <= 768px);
|
|
36
|
+
@custom-media --md-n-above (width >= 768px);
|
|
37
|
+
@custom-media --md-n-below (width < 768px);
|
|
38
|
+
@custom-media --md-phone (--md-only) and (--portrait);
|
|
39
|
+
@custom-media --lg-only (768px <= width <= 1024px);
|
|
40
|
+
@custom-media --lg-n-above (width >= 1024px);
|
|
41
|
+
@custom-media --lg-n-below (width < 1024px);
|
|
42
|
+
@custom-media --lg-phone (--lg-only) and (--portrait);
|
|
43
|
+
@custom-media --xl-only (1024px <= width <= 1440px);
|
|
44
|
+
@custom-media --xl-n-above (width >= 1440px);
|
|
45
|
+
@custom-media --xl-n-below (width < 1440px);
|
|
46
|
+
@custom-media --xxl-only (1440px <= width <= 1920px);
|
|
47
|
+
@custom-media --xxl-n-above (width >= 1920px);
|
|
48
|
+
@custom-media --xxl-n-below (width < 1920px);
|
|
49
|
+
@layer openprops{
|
|
50
|
+
:where(:root){--font-sans:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-serif:ui-serif,serif;--font-mono:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:clamp(.75rem,2vw,1rem);--font-size-fluid-1:clamp(1rem,4vw,1.5rem);--font-size-fluid-2:clamp(1.5rem,6vw,2.5rem);--font-size-fluid-3:clamp(2rem,9vw,3.5rem);--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-fluid-1:clamp(.5rem,1vw,1rem);--size-fluid-2:clamp(1rem,2vw,1.5rem);--size-fluid-3:clamp(1.5rem,3vw,2rem);--size-fluid-4:clamp(2rem,4vw,3rem);--size-fluid-5:clamp(4rem,5vw,5rem);--size-fluid-6:clamp(5rem,7vw,7.5rem);--size-fluid-7:clamp(7.5rem,10vw,10rem);--size-fluid-8:clamp(10rem,20vw,15rem);--size-fluid-9:clamp(15rem,30vw,20rem);--size-fluid-10:clamp(20rem,40vw,30rem);--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.618/1;--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-bottom:var(--layer-1);--layer-top:var(--layer-5);--layer-important:2147480000;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-round:100000px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%)*100000,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%)*100000,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%)*100000,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%)*100000,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%)*100000,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%)*100000,var(--radius-6))}*{--shadow-strength:1%;--shadow-chroma:3%;--shadow-hue:var(--shadow-tint,var(--palette-hue));--shadow-color:15% var(--shadow-chroma)var(--shadow-hue);--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 #0001;--shadow-1:0 1px 2px -1px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight)}@media (prefers-color-scheme:dark){*{--shadow-strength:25%;--shadow-chroma:10%;--shadow-hue:var(--shadow-tint,var(--palette-hue));--shadow-color:15% var(--shadow-chroma)var(--shadow-hue);--inner-shadow-highlight:inset 0 -.5px 0 0 #fff1,inset 0 .5px 0 0 #0007}}:where(:root){--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.5,0,1,1);--ease-in-3:cubic-bezier(.7,0,1,1);--ease-in-4:cubic-bezier(.9,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.5,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-.5,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-spring-1:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,.007,.029 2.2%,.118 4.7%,.625 14.4%,.826 19%,.902,.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,.999 61.6%,.995 71.2%,1);--ease-spring-3:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,.009,.037 1.7%,.153 3.6%,.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,.973,.955 39.2%,.953 41.1%,.957 43.3%,.998 53.3%,1.009 59.1% 63.7%,.998 78.9%,1);--ease-spring-5:linear(0,.01,.04 1.6%,.161 3.3%,.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,.999 29.4%,.955 32.1%,.942,.935 34.9%,.933,.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,.004,.016,.035,.063,.098,.141,.191,.25,.316,.391 36.8%,.563,.766,1 58.8%,.946,.908 69.1%,.895,.885,.879,.878,.879,.885,.895,.908 89.7%,.946,1);--ease-bounce-2:linear(0,.004,.016,.035,.063,.098,.141 15.1%,.25,.391,.562,.765,1,.892 45.2%,.849,.815,.788,.769,.757,.753,.757,.769,.788,.815,.85,.892 75.2%,1 80.2%,.973,.954,.943,.939,.943,.954,.973,1);--ease-bounce-3:linear(0,.004,.016,.035,.062,.098,.141 11.4%,.25,.39,.562,.764,1 30.3%,.847 34.8%,.787,.737,.699,.672,.655,.65,.656,.672,.699,.738,.787,.847 61.7%,1 66.2%,.946,.908,.885 74.2%,.879,.878,.879,.885 79.5%,.908,.946,1 87.4%,.981,.968,.96,.957,.96,.968,.981,1);--ease-bounce-4:linear(0,.004,.016 3%,.062,.141,.25,.391,.562 18.2%,1 24.3%,.81,.676 32.3%,.629,.595,.575,.568,.575,.595,.629,.676 48.2%,.811,1 56.2%,.918,.86,.825,.814,.825,.86,.918,1 77.2%,.94 80.6%,.925,.92,.925,.94 87.5%,1 90.9%,.974,.965,.974,1);--ease-bounce-5:linear(0,.004,.016 2.5%,.063,.141,.25 10.1%,.562,1 20.2%,.783,.627,.534 30.9%,.511,.503,.511,.534 38%,.627,.782,1 48.7%,.892,.815,.769 56.3%,.757,.753,.757,.769 61.3%,.815,.892,1 68.8%,.908 72.4%,.885,.878,.885,.908 79.4%,1 83%,.954 85.5%,.943,.939,.943,.954 90.5%,1 93%,.977,.97,.977,1)}:where(:root){--palette-hue:250;--palette-hue-rotate-by:0;--palette-chroma:.15}*{--color-1:oklch(98% calc(.03*var(--palette-chroma,1))calc(var(--palette-hue) + (0*var(--palette-hue-rotate-by))));--color-2:oklch(97% calc(.06*var(--palette-chroma,1))calc(var(--palette-hue) + (1*var(--palette-hue-rotate-by))));--color-3:oklch(93% calc(.1*var(--palette-chroma,1))calc(var(--palette-hue) + (2*var(--palette-hue-rotate-by))));--color-4:oklch(84% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (3*var(--palette-hue-rotate-by))));--color-5:oklch(80% calc(.16*var(--palette-chroma,1))calc(var(--palette-hue) + (4*var(--palette-hue-rotate-by))));--color-6:oklch(71% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (5*var(--palette-hue-rotate-by))));--color-7:oklch(66% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (6*var(--palette-hue-rotate-by))));--color-8:oklch(58% calc(.21*var(--palette-chroma,1))calc(var(--palette-hue) + (7*var(--palette-hue-rotate-by))));--color-9:oklch(53% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (8*var(--palette-hue-rotate-by))));--color-10:oklch(49% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (9*var(--palette-hue-rotate-by))));--color-11:oklch(42% calc(.17*var(--palette-chroma,1))calc(var(--palette-hue) + (10*var(--palette-hue-rotate-by))));--color-12:oklch(35% calc(.15*var(--palette-chroma,1))calc(var(--palette-hue) + (11*var(--palette-hue-rotate-by))));--color-13:oklch(27% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (12*var(--palette-hue-rotate-by))));--color-14:oklch(20% calc(.09*var(--palette-chroma,1))calc(var(--palette-hue) + (13*var(--palette-hue-rotate-by))));--color-15:oklch(16% calc(.07*var(--palette-chroma,1))calc(var(--palette-hue) + (14*var(--palette-hue-rotate-by))));--color-16:oklch(10% calc(.05*var(--palette-chroma,1))calc(var(--palette-hue) + (15*var(--palette-hue-rotate-by))))}}
|
|
51
|
+
@layer openprops{
|
|
52
|
+
:where(:root) {
|
|
53
|
+
--size-xxs: 240px;
|
|
54
|
+
--size-xs: 360px;
|
|
55
|
+
--size-sm: 480px;
|
|
56
|
+
--size-md: 768px;
|
|
57
|
+
--size-lg: 1024px;
|
|
58
|
+
--size-xl: 1440px;
|
|
59
|
+
--size-xxl: 1920px;
|
|
60
|
+
}}
|
|
61
|
+
@layer openprops{
|
|
62
|
+
:where(:root) {
|
|
63
|
+
--font-lineheight-00: 0.95;
|
|
64
|
+
--font-lineheight-0: 1.1;
|
|
65
|
+
--font-lineheight-1: 1.25;
|
|
66
|
+
--font-lineheight-2: 1.375;
|
|
67
|
+
--font-lineheight-3: 1.5;
|
|
68
|
+
--font-lineheight-4: 1.75;
|
|
69
|
+
--font-lineheight-5: 2;
|
|
70
|
+
}}
|
|
71
|
+
@layer openprops{
|
|
72
|
+
:where(:root) {
|
|
73
|
+
--oklch-red: 25;
|
|
74
|
+
--oklch-pink: 350;
|
|
75
|
+
--oklch-purple: 310;
|
|
76
|
+
--oklch-violet: 290;
|
|
77
|
+
--oklch-indigo: 270;
|
|
78
|
+
--oklch-blue: 240;
|
|
79
|
+
--oklch-cyan: 210;
|
|
80
|
+
--oklch-teal: 185;
|
|
81
|
+
--oklch-green: 145;
|
|
82
|
+
--oklch-lime: 125;
|
|
83
|
+
--oklch-yellow: 100;
|
|
84
|
+
--oklch-orange: 75;
|
|
85
|
+
}}
|
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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "opui-css",
|
|
3
|
-
"version": "2.0
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"shx": "^0.4.0"
|
|
28
28
|
},
|
|
29
29
|
"scripts": {
|
|
30
|
-
"build:css": "pnpm run clean && pnpm exec shx mkdir -p dist && postcss src/main.css -o dist/op+ui.css && postcss src/opui.css -o dist/ui.css",
|
|
30
|
+
"build:css": "pnpm run clean && pnpm exec shx mkdir -p dist && postcss src/main.css -o dist/op+ui.css && postcss src/opui.css -o dist/ui.css && postcss src/open-props.css -o dist/op.css",
|
|
31
31
|
"clean": "pnpm exec shx rm -rf dist",
|
|
32
|
-
"dev:css": "pnpm run clean && pnpm exec shx mkdir -p dist && postcss src/main.css -o dist/op+ui.css -w & postcss src/opui.css -o dist/ui.css -w",
|
|
32
|
+
"dev:css": "pnpm run clean && pnpm exec shx mkdir -p dist && postcss src/main.css -o dist/op+ui.css -w & postcss src/opui.css -o dist/ui.css -w & postcss src/open-props.css -o dist/op.css -w",
|
|
33
33
|
"build": "pnpm run build:css"
|
|
34
34
|
}
|
|
35
35
|
}
|
package/src/main.css
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/*
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
* https://unpkg.com/browse/open-props@2.0.0-beta.5/css
|
|
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.
|
|
5
4
|
*/
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
@import "open-props
|
|
9
|
-
@import "open-props/css/font/lineheight.css" layer(openprops);
|
|
10
|
-
@import "open-props/css/color/hues.oklch.css" layer(openprops);
|
|
5
|
+
|
|
6
|
+
/* Open Props imports */
|
|
7
|
+
@import "./open-props.css";
|
|
11
8
|
|
|
12
9
|
/* OPUI Core */
|
|
13
10
|
@import "./opui.css";
|
|
11
|
+
|
|
12
|
+
/* Theme (example) */
|
|
13
|
+
@import "./theme.css";
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Open Props
|
|
3
|
+
* Import as many props as you need here.
|
|
4
|
+
* https://unpkg.com/browse/open-props@2.0.0-beta.5/css
|
|
5
|
+
*/
|
|
6
|
+
@import "open-props/css/media-queries.css";
|
|
7
|
+
@import "open-props/index.css" layer(openprops);
|
|
8
|
+
@import "open-props/css/sizes/media.css" layer(openprops);
|
|
9
|
+
@import "open-props/css/font/lineheight.css" layer(openprops);
|
|
10
|
+
@import "open-props/css/color/hues.oklch.css" layer(openprops);
|
package/src/opui.css
CHANGED