opui-css 2.1.0 → 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 +168 -161
- 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,168 @@ Lists meant to be used stand-alone or as part of Select elements
|
|
|
4305
4148
|
}
|
|
4306
4149
|
}
|
|
4307
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
|
+
}
|
|
4308
4315
|
}
|
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