@refinn/core-ui 0.1.0 → 0.1.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/index.d.mts +109 -2
- package/dist/index.d.ts +109 -2
- package/dist/index.js +1021 -25
- package/dist/index.mjs +1027 -26
- package/dist/theme.css +267 -0
- package/package.json +1 -1
package/dist/theme.css
CHANGED
|
@@ -458,6 +458,166 @@
|
|
|
458
458
|
--color-checkbox-contrast-description: var(--color-white-65);
|
|
459
459
|
--color-checkbox-contrast-ring: var(--color-white-100);
|
|
460
460
|
|
|
461
|
+
/* ========================================
|
|
462
|
+
* Radio
|
|
463
|
+
* ========================================
|
|
464
|
+
* To rebrand: swap the var() references below.
|
|
465
|
+
* ======================================== */
|
|
466
|
+
|
|
467
|
+
/* Default (unselected) */
|
|
468
|
+
--color-radio-bg: var(--color-white-100);
|
|
469
|
+
--color-radio-border: var(--color-gray-400);
|
|
470
|
+
--color-radio-hover-border: var(--color-blue-600);
|
|
471
|
+
|
|
472
|
+
/* Selected */
|
|
473
|
+
--color-radio-selected-bg: var(--color-blue-600);
|
|
474
|
+
--color-radio-selected-border: var(--color-blue-600);
|
|
475
|
+
--color-radio-selected-dot: var(--color-white-100);
|
|
476
|
+
|
|
477
|
+
/* Focus ring */
|
|
478
|
+
--color-radio-ring: var(--color-blue-500);
|
|
479
|
+
|
|
480
|
+
/* Disabled */
|
|
481
|
+
--color-radio-disabled-bg: var(--color-gray-100);
|
|
482
|
+
--color-radio-disabled-border: var(--color-gray-300);
|
|
483
|
+
--color-radio-disabled-selected-bg: var(--color-gray-300);
|
|
484
|
+
--color-radio-disabled-dot: var(--color-gray-400);
|
|
485
|
+
|
|
486
|
+
/* Error */
|
|
487
|
+
--color-radio-error-border: var(--color-red-500);
|
|
488
|
+
--color-radio-error-bg: var(--color-white-100);
|
|
489
|
+
--color-radio-error-ring: var(--color-red-400);
|
|
490
|
+
|
|
491
|
+
/* Label / description */
|
|
492
|
+
--color-radio-label: var(--color-gray-900);
|
|
493
|
+
--color-radio-description: var(--color-gray-500);
|
|
494
|
+
--color-radio-label-disabled: var(--color-gray-400);
|
|
495
|
+
--color-radio-label-error: var(--color-red-600);
|
|
496
|
+
|
|
497
|
+
/* Contrast (on dark bg) */
|
|
498
|
+
--color-radio-contrast-bg: transparent;
|
|
499
|
+
--color-radio-contrast-border: var(--color-white-65);
|
|
500
|
+
--color-radio-contrast-selected-bg: var(--color-white-100);
|
|
501
|
+
--color-radio-contrast-selected-dot: var(--color-blue-700);
|
|
502
|
+
--color-radio-contrast-label: var(--color-white-100);
|
|
503
|
+
--color-radio-contrast-description: var(--color-white-65);
|
|
504
|
+
--color-radio-contrast-ring: var(--color-white-100);
|
|
505
|
+
|
|
506
|
+
/* ========================================
|
|
507
|
+
* Accordion
|
|
508
|
+
* ========================================
|
|
509
|
+
* To rebrand: swap the var() references below.
|
|
510
|
+
* ======================================== */
|
|
511
|
+
|
|
512
|
+
/* Background */
|
|
513
|
+
--color-accordion-bg: var(--color-white-100);
|
|
514
|
+
--color-accordion-bg-hover: var(--color-gray-50);
|
|
515
|
+
--color-accordion-bg-active: var(--color-gray-100);
|
|
516
|
+
--color-accordion-bg-disabled: var(--color-white-100);
|
|
517
|
+
|
|
518
|
+
/* Text */
|
|
519
|
+
--color-accordion-text: var(--color-gray-900);
|
|
520
|
+
--color-accordion-text-secondary: var(--color-gray-600);
|
|
521
|
+
--color-accordion-text-disabled: var(--color-gray-400);
|
|
522
|
+
|
|
523
|
+
/* Border */
|
|
524
|
+
--color-accordion-border: var(--color-gray-100);
|
|
525
|
+
--color-accordion-border-focus: var(--color-blue-500);
|
|
526
|
+
|
|
527
|
+
/* Icon */
|
|
528
|
+
--color-accordion-icon: var(--color-gray-500);
|
|
529
|
+
--color-accordion-icon-disabled: var(--color-gray-300);
|
|
530
|
+
|
|
531
|
+
/* ========================================
|
|
532
|
+
* Badge
|
|
533
|
+
* ========================================
|
|
534
|
+
* To rebrand: swap the var() references below.
|
|
535
|
+
* ======================================== */
|
|
536
|
+
|
|
537
|
+
/* ── Minimal (text only, transparent bg) ── */
|
|
538
|
+
--color-badge-minimal-common-text: var(--color-gray-600);
|
|
539
|
+
--color-badge-minimal-success-text: var(--color-green-700);
|
|
540
|
+
--color-badge-minimal-warning-text: var(--color-amber-700);
|
|
541
|
+
--color-badge-minimal-info-text: var(--color-ocean-700);
|
|
542
|
+
--color-badge-minimal-brand-text: var(--color-blue-700);
|
|
543
|
+
--color-badge-minimal-danger-text: var(--color-red-600);
|
|
544
|
+
|
|
545
|
+
--color-badge-minimal-common-border: var(--color-gray-300);
|
|
546
|
+
--color-badge-minimal-success-border: var(--color-green-300);
|
|
547
|
+
--color-badge-minimal-warning-border: var(--color-amber-300);
|
|
548
|
+
--color-badge-minimal-info-border: var(--color-ocean-300);
|
|
549
|
+
--color-badge-minimal-brand-border: var(--color-blue-300);
|
|
550
|
+
--color-badge-minimal-danger-border: var(--color-red-300);
|
|
551
|
+
|
|
552
|
+
--color-badge-minimal-common-dot: var(--color-gray-400);
|
|
553
|
+
--color-badge-minimal-success-dot: var(--color-green-500);
|
|
554
|
+
--color-badge-minimal-warning-dot: var(--color-amber-500);
|
|
555
|
+
--color-badge-minimal-info-dot: var(--color-ocean-500);
|
|
556
|
+
--color-badge-minimal-brand-dot: var(--color-blue-500);
|
|
557
|
+
--color-badge-minimal-danger-dot: var(--color-red-500);
|
|
558
|
+
|
|
559
|
+
/* ── Subtle (soft bg + tinted text) ── */
|
|
560
|
+
--color-badge-subtle-common-bg: var(--color-gray-100);
|
|
561
|
+
--color-badge-subtle-success-bg: var(--color-green-100);
|
|
562
|
+
--color-badge-subtle-warning-bg: var(--color-amber-100);
|
|
563
|
+
--color-badge-subtle-info-bg: var(--color-ocean-100);
|
|
564
|
+
--color-badge-subtle-brand-bg: var(--color-blue-100);
|
|
565
|
+
--color-badge-subtle-danger-bg: var(--color-red-100);
|
|
566
|
+
|
|
567
|
+
--color-badge-subtle-common-text: var(--color-gray-900);
|
|
568
|
+
--color-badge-subtle-success-text: var(--color-green-700);
|
|
569
|
+
--color-badge-subtle-warning-text: var(--color-amber-700);
|
|
570
|
+
--color-badge-subtle-info-text: var(--color-ocean-700);
|
|
571
|
+
--color-badge-subtle-brand-text: var(--color-blue-700);
|
|
572
|
+
--color-badge-subtle-danger-text: var(--color-red-600);
|
|
573
|
+
|
|
574
|
+
--color-badge-subtle-common-dot: var(--color-gray-400);
|
|
575
|
+
--color-badge-subtle-success-dot: var(--color-green-600);
|
|
576
|
+
--color-badge-subtle-warning-dot: var(--color-amber-500);
|
|
577
|
+
--color-badge-subtle-info-dot: var(--color-ocean-500);
|
|
578
|
+
--color-badge-subtle-brand-dot: var(--color-blue-600);
|
|
579
|
+
--color-badge-subtle-danger-dot: var(--color-red-500);
|
|
580
|
+
|
|
581
|
+
/* ── Bold (solid bg + white text) ── */
|
|
582
|
+
--color-badge-bold-common-bg: var(--color-gray-400);
|
|
583
|
+
--color-badge-bold-success-bg: var(--color-green-600);
|
|
584
|
+
--color-badge-bold-warning-bg: var(--color-amber-500);
|
|
585
|
+
--color-badge-bold-info-bg: var(--color-ocean-500);
|
|
586
|
+
--color-badge-bold-brand-bg: var(--color-blue-600);
|
|
587
|
+
--color-badge-bold-danger-bg: var(--color-red-500);
|
|
588
|
+
|
|
589
|
+
--color-badge-bold-text: var(--color-white-100);
|
|
590
|
+
|
|
591
|
+
--color-badge-bold-common-dot: var(--color-white-80);
|
|
592
|
+
--color-badge-bold-success-dot: var(--color-white-80);
|
|
593
|
+
--color-badge-bold-warning-dot: var(--color-white-80);
|
|
594
|
+
--color-badge-bold-info-dot: var(--color-white-80);
|
|
595
|
+
--color-badge-bold-brand-dot: var(--color-white-80);
|
|
596
|
+
--color-badge-bold-danger-dot: var(--color-white-80);
|
|
597
|
+
|
|
598
|
+
/* ========================================
|
|
599
|
+
* Avatar
|
|
600
|
+
* ========================================
|
|
601
|
+
* To rebrand: swap the var() references below.
|
|
602
|
+
* ======================================== */
|
|
603
|
+
|
|
604
|
+
/* Background */
|
|
605
|
+
--color-avatar-bg: var(--color-blue-600);
|
|
606
|
+
--color-avatar-bg-hover: var(--color-blue-700);
|
|
607
|
+
--color-avatar-bg-active: var(--color-blue-800);
|
|
608
|
+
|
|
609
|
+
/* Text */
|
|
610
|
+
--color-avatar-text: var(--color-white-100);
|
|
611
|
+
|
|
612
|
+
/* Focus ring */
|
|
613
|
+
--color-avatar-ring: var(--color-blue-500);
|
|
614
|
+
|
|
615
|
+
/* Status indicator */
|
|
616
|
+
--color-avatar-status-online: var(--color-green-500);
|
|
617
|
+
--color-avatar-status-offline: var(--color-gray-400);
|
|
618
|
+
--color-avatar-status-busy: var(--color-red-500);
|
|
619
|
+
--color-avatar-status-border: var(--color-white-100);
|
|
620
|
+
|
|
461
621
|
/* ========================================
|
|
462
622
|
* Border Radius
|
|
463
623
|
* ======================================== */
|
|
@@ -472,6 +632,113 @@
|
|
|
472
632
|
--radius-4xl: 32px;
|
|
473
633
|
--radius-full: 9999px;
|
|
474
634
|
|
|
635
|
+
/* ========================================
|
|
636
|
+
* Toast
|
|
637
|
+
* ========================================
|
|
638
|
+
* To rebrand: swap the var() references below.
|
|
639
|
+
* ======================================== */
|
|
640
|
+
|
|
641
|
+
/* Default */
|
|
642
|
+
--color-toast-default-bg: var(--color-gray-900);
|
|
643
|
+
--color-toast-default-text: var(--color-white-100);
|
|
644
|
+
--color-toast-default-icon: var(--color-white-100);
|
|
645
|
+
|
|
646
|
+
/* Error */
|
|
647
|
+
--color-toast-error-bg: var(--color-red-500);
|
|
648
|
+
--color-toast-error-text: var(--color-white-100);
|
|
649
|
+
--color-toast-error-icon: var(--color-white-100);
|
|
650
|
+
|
|
651
|
+
/* Progress */
|
|
652
|
+
--color-toast-progress-bg: var(--color-gray-900);
|
|
653
|
+
--color-toast-progress-text: var(--color-white-100);
|
|
654
|
+
--color-toast-progress-icon: var(--color-white-80);
|
|
655
|
+
|
|
656
|
+
/* Action button */
|
|
657
|
+
--color-toast-action-text: var(--color-white-100);
|
|
658
|
+
--color-toast-action-bg-hover: var(--color-white-10);
|
|
659
|
+
|
|
660
|
+
/* Dismiss */
|
|
661
|
+
--color-toast-dismiss: var(--color-white-65);
|
|
662
|
+
--color-toast-dismiss-hover: var(--color-white-100);
|
|
663
|
+
|
|
664
|
+
/* ========================================
|
|
665
|
+
* Alert Banner
|
|
666
|
+
* ========================================
|
|
667
|
+
* To rebrand: swap the var() references below.
|
|
668
|
+
* ======================================== */
|
|
669
|
+
|
|
670
|
+
/* Inline backgrounds */
|
|
671
|
+
--color-alert-inline-info-bg: var(--color-ocean-50);
|
|
672
|
+
--color-alert-inline-success-bg: var(--color-green-50);
|
|
673
|
+
--color-alert-inline-warning-bg: var(--color-amber-50);
|
|
674
|
+
--color-alert-inline-danger-bg: var(--color-red-50);
|
|
675
|
+
--color-alert-inline-common-bg: var(--color-gray-50);
|
|
676
|
+
|
|
677
|
+
/* Inline borders */
|
|
678
|
+
--color-alert-inline-info-border: var(--color-ocean-500);
|
|
679
|
+
--color-alert-inline-success-border: var(--color-green-600);
|
|
680
|
+
--color-alert-inline-warning-border: var(--color-amber-500);
|
|
681
|
+
--color-alert-inline-danger-border: var(--color-red-500);
|
|
682
|
+
--color-alert-inline-common-border: var(--color-gray-400);
|
|
683
|
+
|
|
684
|
+
/* Inline icons */
|
|
685
|
+
--color-alert-inline-info-icon: var(--color-ocean-600);
|
|
686
|
+
--color-alert-inline-success-icon: var(--color-green-600);
|
|
687
|
+
--color-alert-inline-warning-icon: var(--color-amber-600);
|
|
688
|
+
--color-alert-inline-danger-icon: var(--color-red-600);
|
|
689
|
+
--color-alert-inline-common-icon: var(--color-gray-600);
|
|
690
|
+
|
|
691
|
+
/* Page backgrounds */
|
|
692
|
+
--color-alert-page-info-bg: var(--color-ocean-600);
|
|
693
|
+
--color-alert-page-success-bg: var(--color-green-600);
|
|
694
|
+
--color-alert-page-warning-bg: var(--color-amber-500);
|
|
695
|
+
--color-alert-page-danger-bg: var(--color-red-600);
|
|
696
|
+
--color-alert-page-common-bg: var(--color-gray-600);
|
|
697
|
+
|
|
698
|
+
/* Text */
|
|
699
|
+
--color-alert-text-primary: var(--color-gray-900);
|
|
700
|
+
--color-alert-text-secondary: var(--color-gray-600);
|
|
701
|
+
--color-alert-text-primary-inverse: var(--color-white-100);
|
|
702
|
+
--color-alert-text-secondary-inverse: var(--color-white-90);
|
|
703
|
+
|
|
704
|
+
/* Close button */
|
|
705
|
+
--color-alert-close: var(--color-gray-500);
|
|
706
|
+
--color-alert-close-hover: var(--color-gray-700);
|
|
707
|
+
--color-alert-close-inverse: var(--color-white-80);
|
|
708
|
+
--color-alert-close-inverse-hover: var(--color-white-100);
|
|
709
|
+
|
|
710
|
+
/* ========================================
|
|
711
|
+
* Slider
|
|
712
|
+
* ========================================
|
|
713
|
+
* To rebrand: swap the var() references below.
|
|
714
|
+
* ======================================== */
|
|
715
|
+
|
|
716
|
+
/* Track */
|
|
717
|
+
--color-slider-track: var(--color-gray-200);
|
|
718
|
+
--color-slider-track-disabled: var(--color-gray-100);
|
|
719
|
+
|
|
720
|
+
/* Fill (active portion) */
|
|
721
|
+
--color-slider-fill: var(--color-blue-600);
|
|
722
|
+
--color-slider-fill-disabled: var(--color-gray-300);
|
|
723
|
+
--color-slider-fill-error: var(--color-red-500);
|
|
724
|
+
|
|
725
|
+
/* Thumb */
|
|
726
|
+
--color-slider-thumb: var(--color-white-100);
|
|
727
|
+
--color-slider-thumb-disabled: var(--color-gray-100);
|
|
728
|
+
--color-slider-thumb-border: var(--color-blue-600);
|
|
729
|
+
--color-slider-thumb-border-disabled: var(--color-gray-300);
|
|
730
|
+
--color-slider-thumb-border-error: var(--color-red-500);
|
|
731
|
+
|
|
732
|
+
/* Focus ring */
|
|
733
|
+
--color-slider-ring: var(--color-blue-500);
|
|
734
|
+
--color-slider-ring-error: var(--color-red-400);
|
|
735
|
+
|
|
736
|
+
/* Label */
|
|
737
|
+
--color-slider-label: var(--color-gray-900);
|
|
738
|
+
--color-slider-description: var(--color-gray-500);
|
|
739
|
+
--color-slider-label-disabled: var(--color-gray-400);
|
|
740
|
+
--color-slider-label-error: var(--color-red-600);
|
|
741
|
+
|
|
475
742
|
/* ========================================
|
|
476
743
|
* Box Shadow
|
|
477
744
|
* ======================================== */
|