@paraxe/design 1.0.0 → 1.4.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.
Files changed (8) hide show
  1. package/dist/.loba-build.json +3 -3
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts.map +1 -1
  4. package/package.json +48 -49
  5. package/src/components.css +3747 -20
  6. package/src/index.ts +0 -1
  7. package/src/style.css +5 -0
  8. package/src/tokens.css +162 -0
package/src/index.ts CHANGED
@@ -350,5 +350,4 @@ export function token(name: TokenName | ColorTokenName): string {
350
350
  import "./tokens.css"
351
351
  import "./themes/default.css"
352
352
  import "./presets/default.css"
353
- import "./components.css"
354
353
 
package/src/style.css ADDED
@@ -0,0 +1,5 @@
1
+ /* @paraxe/design/style.css */
2
+
3
+ @import "./tokens.css";
4
+ @import "./themes/default.css";
5
+ @import "./components.css";
package/src/tokens.css CHANGED
@@ -434,7 +434,169 @@
434
434
  --transition-slow:
435
435
  all var(--motion-duration-slow) var(--motion-ease-smooth);
436
436
 
437
+ --alert-info-background: color-mix(
438
+ in srgb,
439
+ var(--color-info) 10%,
440
+ transparent
441
+ );
437
442
 
443
+ --alert-info-border: color-mix(
444
+ in srgb,
445
+ var(--color-info) 28%,
446
+ transparent
447
+ );
448
+
449
+ --alert-info-text: var(--color-info);
450
+
451
+
452
+ --alert-success-background: color-mix(
453
+ in srgb,
454
+ var(--color-success) 10%,
455
+ transparent
456
+ );
457
+
458
+ --alert-success-border: color-mix(
459
+ in srgb,
460
+ var(--color-success) 28%,
461
+ transparent
462
+ );
463
+
464
+ --alert-success-text: var(--color-success);
465
+
466
+
467
+ --alert-warning-background: color-mix(
468
+ in srgb,
469
+ var(--color-warning) 10%,
470
+ transparent
471
+ );
472
+
473
+ --alert-warning-border: color-mix(
474
+ in srgb,
475
+ var(--color-warning) 28%,
476
+ transparent
477
+ );
478
+
479
+ --alert-warning-text: var(--color-warning);
480
+
481
+
482
+ --alert-danger-background: color-mix(
483
+ in srgb,
484
+ var(--color-danger) 10%,
485
+ transparent
486
+ );
487
+
488
+ --alert-danger-border: color-mix(
489
+ in srgb,
490
+ var(--color-danger) 28%,
491
+ transparent
492
+ );
493
+
494
+ --alert-danger-text: var(--color-danger);
495
+ /* =====================================================
496
+ BADGES
497
+ ===================================================== */
498
+
499
+ --badge-background: color-mix(
500
+ in srgb,
501
+ var(--surface-raised),
502
+ var(--text-primary) 8%
503
+ );
504
+ --badge-border: var(--border-default);
505
+ --badge-text: var(--text-secondary);
506
+
507
+
508
+ /* =====================================================
509
+ BADGES
510
+ ===================================================== */
511
+
512
+ --badge-background: color-mix(
513
+ in srgb,
514
+ var(--surface-raised),
515
+ var(--text-primary) 8%
516
+ );
517
+
518
+ --badge-border: var(--border-default);
519
+ --badge-text: var(--text-secondary);
520
+
521
+
522
+ /* -----------------------------------------------------
523
+ BADGE VARIANTS
524
+ ----------------------------------------------------- */
525
+
526
+ --badge-default-background: color-mix(
527
+ in srgb,
528
+ var(--surface-raised),
529
+ var(--text-primary) 8%
530
+ );
531
+ --badge-default-border: var(--border-default);
532
+ --badge-default-text: var(--text-secondary);
533
+
534
+ --badge-success-background: color-mix(
535
+ in srgb,
536
+ var(--color-success) 10%,
537
+ transparent
538
+ );
539
+ --badge-success-border: color-mix(
540
+ in srgb,
541
+ var(--color-success) 28%,
542
+ transparent
543
+ );
544
+ --badge-success-text: var(--color-success);
545
+
546
+ --badge-warning-background: color-mix(
547
+ in srgb,
548
+ var(--color-warning) 10%,
549
+ transparent
550
+ );
551
+ --badge-warning-border: color-mix(
552
+ in srgb,
553
+ var(--color-warning) 28%,
554
+ transparent
555
+ );
556
+ --badge-warning-text: var(--color-warning);
557
+
558
+ --badge-danger-background: color-mix(
559
+ in srgb,
560
+ var(--color-danger) 10%,
561
+ transparent
562
+ );
563
+ --badge-danger-border: color-mix(
564
+ in srgb,
565
+ var(--color-danger) 28%,
566
+ transparent
567
+ );
568
+ --badge-danger-text: var(--color-danger);
569
+
570
+ --badge-info-background: color-mix(
571
+ in srgb,
572
+ var(--color-info) 10%,
573
+ transparent
574
+ );
575
+ --badge-info-border: color-mix(
576
+ in srgb,
577
+ var(--color-info) 28%,
578
+ transparent
579
+ );
580
+ --badge-info-text: var(--color-info);
581
+
582
+ --badge-brand-background: color-mix(
583
+ in srgb,
584
+ var(--brand-primary) 10%,
585
+ transparent
586
+ );
587
+ --badge-brand-border: color-mix(
588
+ in srgb,
589
+ var(--brand-primary) 28%,
590
+ transparent
591
+ );
592
+ --badge-brand-text: var(--brand-primary);
593
+ /* =====================================================
594
+ TAGS
595
+ ===================================================== */
596
+
597
+ --tag-background: var(--surface-raised);
598
+ --tag-border: var(--border-subtle);
599
+ --tag-text: var(--text-muted);
438
600
  /* =====================================================
439
601
  COMPONENT STRUCTURE — BUTTONS
440
602
  ===================================================== */