@g1cloud/open-bluesea-core 1.0.0-alpha.7 → 1.0.0-alpha.9

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.
@@ -8,8 +8,7 @@
8
8
  --tw-skew-x: initial;
9
9
  --tw-skew-y: initial;
10
10
  --tw-border-style: solid;
11
- --tw-leading: initial;
12
- --tw-font-weight: initial;
11
+ --tw-outline-style: solid;
13
12
  --tw-blur: initial;
14
13
  --tw-brightness: initial;
15
14
  --tw-contrast: initial;
@@ -23,7 +22,9 @@
23
22
  --tw-drop-shadow-color: initial;
24
23
  --tw-drop-shadow-alpha: 100%;
25
24
  --tw-drop-shadow-size: initial;
25
+ --tw-leading: initial;
26
26
  --tw-duration: initial;
27
+ --tw-font-weight: initial;
27
28
  --tw-ease: initial;
28
29
  --tw-translate-x: 0;
29
30
  --tw-translate-y: 0;
@@ -36,17 +37,7 @@
36
37
  :root, :host {
37
38
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
38
39
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
39
- --color-black: #000;
40
40
  --spacing: .25rem;
41
- --text-xs: .75rem;
42
- --text-xs--line-height: calc(1 / .75);
43
- --text-sm: .875rem;
44
- --text-sm--line-height: calc(1.25 / .875);
45
- --text-base: 1rem;
46
- --text-base--line-height: calc(1.5 / 1);
47
- --text-xl: 1.25rem;
48
- --text-xl--line-height: calc(1.75 / 1.25);
49
- --font-weight-normal: 400;
50
41
  --font-weight-medium: 500;
51
42
  --leading-relaxed: 1.625;
52
43
  --radius-sm: .25rem;
@@ -308,42 +299,10 @@
308
299
  @layer components;
309
300
 
310
301
  @layer utilities {
311
- .absolute {
312
- position: absolute;
313
- }
314
-
315
302
  .fixed {
316
303
  position: fixed;
317
304
  }
318
305
 
319
- .relative {
320
- position: relative;
321
- }
322
-
323
- .inset-0 {
324
- inset: calc(var(--spacing) * 0);
325
- }
326
-
327
- .top-\[50px\] {
328
- top: 50px;
329
- }
330
-
331
- .right-0\.5 {
332
- right: calc(var(--spacing) * .5);
333
- }
334
-
335
- .bottom-5 {
336
- bottom: calc(var(--spacing) * 5);
337
- }
338
-
339
- .left-1\/2 {
340
- left: 50%;
341
- }
342
-
343
- .z-250 {
344
- z-index: 250;
345
- }
346
-
347
306
  .container {
348
307
  width: 100%;
349
308
  }
@@ -378,14 +337,6 @@
378
337
  }
379
338
  }
380
339
 
381
- .mx-1\.5 {
382
- margin-inline: calc(var(--spacing) * 1.5);
383
- }
384
-
385
- .mt-2 {
386
- margin-top: calc(var(--spacing) * 2);
387
- }
388
-
389
340
  .mr-1 {
390
341
  margin-right: calc(var(--spacing) * 1);
391
342
  }
@@ -406,10 +357,6 @@
406
357
  display: none;
407
358
  }
408
359
 
409
- .inline-block {
410
- display: inline-block;
411
- }
412
-
413
360
  .inline-flex {
414
361
  display: inline-flex;
415
362
  }
@@ -418,83 +365,19 @@
418
365
  display: table;
419
366
  }
420
367
 
421
- .h-3 {
422
- height: calc(var(--spacing) * 3);
423
- }
424
-
425
- .h-4 {
426
- height: calc(var(--spacing) * 4);
427
- }
428
-
429
- .h-7 {
430
- height: calc(var(--spacing) * 7);
431
- }
432
-
433
- .h-11 {
434
- height: calc(var(--spacing) * 11);
435
- }
436
-
437
- .h-\[1\.0769em\] {
438
- height: 1.0769em;
439
- }
440
-
441
- .h-\[26px\] {
442
- height: 26px;
443
- }
444
-
445
- .h-\[34px\] {
446
- height: 34px;
447
- }
448
-
449
- .h-full {
450
- height: 100%;
451
- }
452
-
453
- .max-h-\[300px\] {
454
- max-height: 300px;
455
- }
456
-
457
- .w-3 {
458
- width: calc(var(--spacing) * 3);
459
- }
460
-
461
- .w-4 {
462
- width: calc(var(--spacing) * 4);
463
- }
464
-
465
- .w-5 {
466
- width: calc(var(--spacing) * 5);
467
- }
468
-
469
- .w-\[1\.0769em\] {
470
- width: 1.0769em;
471
- }
472
-
473
368
  .w-full {
474
369
  width: 100%;
475
370
  }
476
371
 
477
- .max-w-60 {
478
- max-width: calc(var(--spacing) * 60);
479
- }
480
-
481
- .min-w-12 {
482
- min-width: calc(var(--spacing) * 12);
483
- }
484
-
485
- .min-w-30 {
486
- min-width: calc(var(--spacing) * 30);
487
- }
488
-
489
372
  .min-w-80 {
490
373
  min-width: calc(var(--spacing) * 80);
491
374
  }
492
375
 
493
- .min-w-\[34px\] {
494
- min-width: 34px;
376
+ .min-w-\[2em\] {
377
+ min-width: 2em;
495
378
  }
496
379
 
497
- .grow {
380
+ .flex-grow, .grow {
498
381
  flex-grow: 1;
499
382
  }
500
383
 
@@ -502,14 +385,6 @@
502
385
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
503
386
  }
504
387
 
505
- .cursor-default {
506
- cursor: default;
507
- }
508
-
509
- .cursor-move {
510
- cursor: move;
511
- }
512
-
513
388
  .cursor-pointer {
514
389
  cursor: pointer;
515
390
  }
@@ -534,10 +409,6 @@
534
409
  align-items: flex-start;
535
410
  }
536
411
 
537
- .justify-between {
538
- justify-content: space-between;
539
- }
540
-
541
412
  .justify-center {
542
413
  justify-content: center;
543
414
  }
@@ -550,10 +421,6 @@
550
421
  justify-content: flex-start;
551
422
  }
552
423
 
553
- .gap-0\.5 {
554
- gap: calc(var(--spacing) * .5);
555
- }
556
-
557
424
  .gap-1 {
558
425
  gap: calc(var(--spacing) * 1);
559
426
  }
@@ -562,10 +429,6 @@
562
429
  gap: calc(var(--spacing) * 2);
563
430
  }
564
431
 
565
- .self-stretch {
566
- align-self: stretch;
567
- }
568
-
569
432
  .truncate {
570
433
  text-overflow: ellipsis;
571
434
  white-space: nowrap;
@@ -576,22 +439,6 @@
576
439
  overflow: auto;
577
440
  }
578
441
 
579
- .overflow-hidden {
580
- overflow: hidden;
581
- }
582
-
583
- .rounded {
584
- border-radius: .25rem;
585
- }
586
-
587
- .rounded-none {
588
- border-radius: 0;
589
- }
590
-
591
- .rounded-sm {
592
- border-radius: var(--radius-sm);
593
- }
594
-
595
442
  .border {
596
443
  border-style: var(--tw-border-style);
597
444
  border-width: 1px;
@@ -602,42 +449,6 @@
602
449
  border-width: 0;
603
450
  }
604
451
 
605
- .bg-black {
606
- background-color: var(--color-black);
607
- }
608
-
609
- .p-0 {
610
- padding: calc(var(--spacing) * 0);
611
- }
612
-
613
- .p-0\.5 {
614
- padding: calc(var(--spacing) * .5);
615
- }
616
-
617
- .p-2 {
618
- padding: calc(var(--spacing) * 2);
619
- }
620
-
621
- .p-6 {
622
- padding: calc(var(--spacing) * 6);
623
- }
624
-
625
- .px-1 {
626
- padding-inline: calc(var(--spacing) * 1);
627
- }
628
-
629
- .px-1\.5 {
630
- padding-inline: calc(var(--spacing) * 1.5);
631
- }
632
-
633
- .px-2 {
634
- padding-inline: calc(var(--spacing) * 2);
635
- }
636
-
637
- .px-3 {
638
- padding-inline: calc(var(--spacing) * 3);
639
- }
640
-
641
452
  .px-4 {
642
453
  padding-inline: calc(var(--spacing) * 4);
643
454
  }
@@ -646,100 +457,21 @@
646
457
  padding-inline: calc(var(--spacing) * 16);
647
458
  }
648
459
 
649
- .py-0 {
650
- padding-block: calc(var(--spacing) * 0);
651
- }
652
-
653
- .py-0\.5 {
654
- padding-block: calc(var(--spacing) * .5);
655
- }
656
-
657
- .py-1 {
658
- padding-block: calc(var(--spacing) * 1);
659
- }
660
-
661
- .py-1\.5 {
662
- padding-block: calc(var(--spacing) * 1.5);
663
- }
664
-
665
- .py-2 {
666
- padding-block: calc(var(--spacing) * 2);
667
- }
668
-
669
460
  .py-8 {
670
461
  padding-block: calc(var(--spacing) * 8);
671
462
  }
672
463
 
673
- .py-\[11px\] {
674
- padding-block: 11px;
675
- }
676
-
677
- .pr-2 {
678
- padding-right: calc(var(--spacing) * 2);
679
- }
680
-
681
- .pl-0 {
682
- padding-left: calc(var(--spacing) * 0);
683
- }
684
-
685
- .text-center {
686
- text-align: center;
687
- }
688
-
689
464
  .text-right {
690
465
  text-align: right;
691
466
  }
692
467
 
693
- .align-middle {
694
- vertical-align: middle;
695
- }
696
-
697
- .text-base {
698
- font-size: var(--text-base);
699
- line-height: var(--tw-leading, var(--text-base--line-height));
700
- }
701
-
702
- .text-xs {
703
- font-size: var(--text-xs);
704
- line-height: var(--tw-leading, var(--text-xs--line-height));
705
- }
706
-
707
- .text-\[1\.2rem\] {
708
- font-size: 1.2rem;
709
- }
710
-
711
- .text-\[1\.4rem\] {
712
- font-size: 1.4rem;
713
- }
714
-
715
- .text-\[52px\] {
716
- font-size: 52px;
717
- }
718
-
719
- .leading-none {
720
- --tw-leading: 1;
721
- line-height: 1;
722
- }
723
-
724
- .font-normal {
725
- --tw-font-weight: var(--font-weight-normal);
726
- font-weight: var(--font-weight-normal);
727
- }
728
-
729
- .whitespace-nowrap {
730
- white-space: nowrap;
731
- }
732
-
733
- .no-underline {
734
- text-decoration-line: none;
735
- }
736
-
737
468
  .underline {
738
469
  text-decoration-line: underline;
739
470
  }
740
471
 
741
- .opacity-30 {
742
- opacity: .3;
472
+ .outline {
473
+ outline-style: var(--tw-outline-style);
474
+ outline-width: 1px;
743
475
  }
744
476
 
745
477
  .blur {
@@ -751,8 +483,8 @@
751
483
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
752
484
  }
753
485
 
754
- .transition-transform {
755
- transition-property: transform, translate, scale, rotate;
486
+ .transition {
487
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
756
488
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
757
489
  transition-duration: var(--tw-duration, var(--default-transition-duration));
758
490
  }
@@ -761,90 +493,192 @@
761
493
  --tw-outline-style: none;
762
494
  outline-style: none;
763
495
  }
496
+ }
764
497
 
765
- .select-none {
766
- -webkit-user-select: none;
767
- user-select: none;
768
- }
769
- }
770
-
771
- :root {
772
- --white: #fff;
773
- --black: #000;
774
- --gray-100: #fafafa;
775
- --gray-200: #eaeaea;
776
- --gray-300: #ccc;
777
- --gray-400: #a9a9a9;
778
- --gray-500: #666;
779
- --gray-600: #555;
780
- --gray-700: #444;
781
- --gray-800: #292929;
782
- --primary-100: #eaf1fe;
783
- --primary-200: #def;
784
- --primary-300: #b7d2fa;
785
- --primary-400: #a4b4ff;
786
- --primary-500: #5672ef;
787
- --primary-600: #232e8f;
788
- --blue: #5672ef;
789
- --blue-bg: #def;
790
- --red: #eb0000;
791
- --red-bg: #ffe3e2;
792
- --orange: #f99341;
793
- --orange-bg: #fff8de;
794
- --green: #2fa04d;
795
- --green-bg: #e9fee7;
796
- --purple: #945bd9;
797
- --purple-bg: #ead8ff;
798
- --gray-bg: #eaeaea;
799
- --color-text: #555;
800
- --color-text-light: #a9a9a9;
801
- --color-gray: #666;
802
- --color-gray-border: #ccc;
803
- --color-icon-light: #d5d5d5;
804
- --color-hover: #e8eefc;
805
- --color-focus: #5672ef;
806
- --color-error: #eb0000;
807
- --primary: #5672ef;
808
- --secondary: #f99341;
809
- --success: #2fa04d;
810
- --info: #5672ef;
811
- --warning: #f99341;
812
- --danger: #eb0000;
813
- --light: #fafafa;
814
- --dark: #444;
815
- --gray: #a9a9a9;
816
- --border: #ccc;
817
- --border-light: #eaeaea;
818
- --border-hover: #000;
819
- --border-width: 1px;
820
- --border-radius: .25rem;
821
- --border-radius-lg: .3rem;
822
- --border-radius-sm: .2rem;
823
- --rounded-pill: 50rem;
824
- --rounded-circle: 50%;
825
- --border-input: .8px solid #eaeaea;
826
- --header-bg: #5672ef;
827
- --header-text: #fff;
828
- --body-bg: #fff;
829
- --body-text: #000;
830
- --button-default-bg: #fff;
831
- --button-default-text: #555;
832
- --header-tab-bg: #a4b4ff;
833
- --header-tab-selected: #fff;
834
- --header-tab-text: #555;
835
- --colored-bg: #eaf1fe;
836
- --radio-group: #a9a9a9;
837
- --icon-font-family: Material Symbols Outlined, monospace;
838
- }
839
-
840
- [data-theme="dark"] {
841
- --body-bg: #1a1a1a;
842
- --body-text: #fff;
843
- --button-default-bg: #333;
844
- --button-default-text: #fff;
845
- --border-hover: #fff;
846
- --color-hover: #2a2a2a;
847
- --colored-bg: #2a2a2a;
498
+ @layer bluesea-base {
499
+ :root {
500
+ --bs-white: #fff;
501
+ --bs-gray-100: #fafafa;
502
+ --bs-gray-200: #eaeaea;
503
+ --bs-gray-400: #a9a9a9;
504
+ --bs-gray-500: #666;
505
+ --bs-gray-700: #444;
506
+ --bs-gray-800: #292929;
507
+ --bs-primary: #5672ef;
508
+ --bs-primary-400: #a4b4ff;
509
+ --bs-blue-bg: #def;
510
+ --bs-red-bg: #ffe3e2;
511
+ --bs-orange-bg: #fff8de;
512
+ --bs-green-bg: #e9fee7;
513
+ --bs-gray-bg: #eaeaea;
514
+ --bs-color-text: #555;
515
+ --bs-color-text-light: #a9a9a9;
516
+ --bs-color-hover: #e8eefc;
517
+ --bs-color-focus: #5672ef;
518
+ --bs-color-error: #eb0000;
519
+ --bs-border: #ccc;
520
+ --bs-border-light: #eaeaea;
521
+ --bs-body-bg: #fff;
522
+ --bs-body-text: #000;
523
+ --bs-input-height: 1.8rem;
524
+ --bs-border-radius: .25rem;
525
+ --bs-font-size: 1rem;
526
+ --bs-font-size-sm: .9em;
527
+ --bs-button-height: 1.8rem;
528
+ --bs-button-padding-x: .75rem;
529
+ --bs-button-padding-y: 0;
530
+ --bs-button-border-radius: var(--bs-border-radius);
531
+ --bs-button-font-size: var(--bs-font-size);
532
+ --bs-button-bg: #fff;
533
+ --bs-button-text: #555;
534
+ --bs-button-border: var(--bs-border);
535
+ --bs-button-blue-bg: #5672ef;
536
+ --bs-button-blue-text: var(--bs-white);
537
+ --bs-button-red-bg: #eb0000;
538
+ --bs-button-red-text: var(--bs-white);
539
+ --bs-button-orange-bg: #f99341;
540
+ --bs-button-orange-text: var(--bs-white);
541
+ --bs-button-green-bg: #2fa04d;
542
+ --bs-button-green-text: var(--bs-white);
543
+ --bs-button-gray-bg: #a9a9a9;
544
+ --bs-button-gray-text: var(--bs-white);
545
+ --bs-button-black-bg: #000;
546
+ --bs-button-black-text: var(--bs-white);
547
+ --bs-input-bg: var(--bs-body-bg);
548
+ --bs-input-text: var(--bs-body-text);
549
+ --bs-input-border: var(--bs-border);
550
+ --bs-input-border-hover: #000;
551
+ --bs-input-border-focus: var(--bs-color-focus);
552
+ --bs-input-border-radius: var(--bs-border-radius);
553
+ --bs-input-padding-x: .375rem;
554
+ --bs-input-padding-y: .125rem;
555
+ --bs-input-placeholder: var(--bs-gray-400);
556
+ --bs-input-disabled-bg: var(--bs-gray-100);
557
+ --bs-input-disabled-text: var(--bs-gray-400);
558
+ --bs-input-disabled-border: var(--bs-border);
559
+ --bs-input-modified-border: #945bd9;
560
+ --bs-input-error-border: #eb0000;
561
+ --bs-input-error-text: #eb0000;
562
+ --bs-input-affix-bg: var(--bs-gray-200);
563
+ --bs-input-affix-text: var(--bs-body-text);
564
+ --bs-input-affix-font-size: var(--bs-font-size-sm);
565
+ --bs-check-icon-size: 1.25rem;
566
+ --bs-check-icon-color: var(--bs-body-text);
567
+ --bs-check-icon-hover: var(--bs-gray-500);
568
+ --bs-check-icon-focus: var(--bs-color-focus);
569
+ --bs-check-icon-disabled: var(--bs-gray-400);
570
+ --bs-check-icon-modified: #945bd9;
571
+ --bs-check-icon-error: #eb0000;
572
+ --bs-check-label-padding-x: .125rem;
573
+ --bs-check-label-padding-y: .25rem;
574
+ --bs-select-height: var(--bs-input-height);
575
+ --bs-select-bg: var(--bs-body-bg);
576
+ --bs-select-text: var(--bs-body-text);
577
+ --bs-select-border: var(--bs-border);
578
+ --bs-select-border-hover: #000;
579
+ --bs-select-border-focus: var(--bs-color-focus);
580
+ --bs-select-border-radius: var(--bs-border-radius);
581
+ --bs-select-padding-x: .375rem;
582
+ --bs-select-placeholder: var(--bs-gray-400);
583
+ --bs-select-disabled-bg: var(--bs-gray-100);
584
+ --bs-select-disabled-text: var(--bs-gray-500);
585
+ --bs-select-disabled-border: var(--bs-border);
586
+ --bs-select-modified-border: #945bd9;
587
+ --bs-select-error-border: #eb0000;
588
+ --bs-select-error-text: #eb0000;
589
+ --bs-check-group-gap-x: .5rem;
590
+ --bs-check-group-gap-y: .25rem;
591
+ --bs-radio-switch-bg: var(--bs-body-bg);
592
+ --bs-radio-switch-active-bg: #000;
593
+ --bs-radio-switch-active-text: var(--bs-white);
594
+ --bs-radio-switch-inactive-text: #999;
595
+ --bs-radio-switch-disabled-bg: var(--bs-gray-400);
596
+ --bs-radio-button-bg: transparent;
597
+ --bs-radio-button-text: var(--bs-body-text);
598
+ --bs-radio-button-border: var(--bs-border);
599
+ --bs-radio-button-active-bg: #a9a9a9;
600
+ --bs-radio-button-active-text: var(--bs-white);
601
+ --bs-radio-button-active-border: #a9a9a9;
602
+ --bs-date-input-width: 200px;
603
+ --bs-date-input-height: var(--bs-input-height);
604
+ --bs-date-input-bg: var(--bs-body-bg);
605
+ --bs-date-input-text: var(--bs-body-text);
606
+ --bs-date-input-border: var(--bs-border);
607
+ --bs-date-input-border-hover: #000;
608
+ --bs-date-input-border-focus: var(--bs-color-focus);
609
+ --bs-date-input-border-radius: var(--bs-border-radius);
610
+ --bs-date-input-icon-size: .875rem;
611
+ --bs-popup-bg: var(--bs-body-bg);
612
+ --bs-popup-border: var(--bs-border);
613
+ --bs-popup-border-radius: var(--bs-border-radius);
614
+ --bs-popup-shadow: 2px 2px 8px #0000001a;
615
+ --bs-page-nav-button-size: 24px;
616
+ --bs-page-nav-button-bg: transparent;
617
+ --bs-page-nav-button-text: var(--bs-body-text);
618
+ --bs-page-nav-button-hover-bg: var(--bs-color-hover);
619
+ --bs-page-nav-button-active-bg: var(--bs-primary);
620
+ --bs-page-nav-button-active-text: var(--bs-white);
621
+ --bs-page-nav-button-border-radius: var(--bs-border-radius);
622
+ --bs-card-bg: var(--bs-body-bg);
623
+ --bs-card-border: var(--bs-border);
624
+ --bs-card-border-radius: var(--bs-border-radius);
625
+ --bs-card-header-bg: var(--bs-gray-200);
626
+ --bs-card-header-text: var(--bs-body-text);
627
+ --bs-card-header-padding-x: .75rem;
628
+ --bs-card-header-padding-y: .5rem;
629
+ --bs-tooltip-bg: var(--bs-gray-800);
630
+ --bs-tooltip-text: var(--bs-white);
631
+ --bs-tooltip-border-radius: var(--bs-border-radius);
632
+ --bs-tooltip-padding-x: .5rem;
633
+ --bs-tooltip-padding-y: .25rem;
634
+ --bs-tooltip-font-size: .875rem;
635
+ --bs-loading-color: var(--bs-primary);
636
+ --bs-loading-size: 1.5rem;
637
+ --bs-notification-bg: var(--bs-body-bg);
638
+ --bs-notification-text: var(--bs-body-text);
639
+ --bs-notification-border-radius: .25rem;
640
+ --bs-notification-shadow: 2px 2px 8px #00000026;
641
+ --bs-notification-success-accent: #2fa04d;
642
+ --bs-notification-error-accent: #eb0000;
643
+ --bs-notification-warning-accent: #f99341;
644
+ --bs-notification-info-accent: #5672ef;
645
+ --bs-modal-bg: var(--bs-body-bg);
646
+ --bs-modal-text: var(--bs-body-text);
647
+ --bs-modal-border-radius: .25rem;
648
+ --bs-modal-shadow: 0 4px 20px #00000026;
649
+ --bs-modal-header-bg: var(--bs-primary);
650
+ --bs-modal-header-text: var(--bs-white);
651
+ --bs-modal-overlay-bg: #00000080;
652
+ --bs-context-menu-bg: var(--bs-body-bg);
653
+ --bs-context-menu-text: var(--bs-body-text);
654
+ --bs-context-menu-border: var(--bs-border);
655
+ --bs-context-menu-border-radius: var(--bs-border-radius);
656
+ --bs-context-menu-shadow: 2px 2px 8px #0000001a;
657
+ --bs-context-menu-item-hover-bg: var(--bs-color-hover);
658
+ --bs-context-menu-separator: var(--bs-border-light);
659
+ --bs-calendar-bg: var(--bs-body-bg);
660
+ --bs-calendar-text: var(--bs-body-text);
661
+ --bs-calendar-today-bg: var(--bs-gray-200);
662
+ --bs-calendar-selected-bg: #5672ef;
663
+ --bs-calendar-selected-text: var(--bs-white);
664
+ --bs-calendar-sunday-text: #eb0000;
665
+ --bs-calendar-saturday-text: #5672ef;
666
+ --bs-calendar-other-month-opacity: .5;
667
+ --bs-calendar-disabled-bg: var(--bs-gray-200);
668
+ --bs-calendar-weekdays-border: var(--bs-gray-200);
669
+ --bs-calendar-time-bg: var(--bs-gray-100);
670
+ }
671
+
672
+ [data-theme="dark"] {
673
+ --bs-body-bg: #1a1a1a;
674
+ --bs-body-text: #fff;
675
+ --bs-color-hover: #2a2a2a;
676
+ --bs-button-bg: #333;
677
+ --bs-button-text: #fff;
678
+ --bs-input-border-hover: #fff;
679
+ --bs-select-border-hover: #fff;
680
+ --bs-date-input-border-hover: #fff;
681
+ }
848
682
  }
849
683
 
850
684
  .bs-clickable {
@@ -873,15 +707,15 @@
873
707
  }
874
708
 
875
709
  .bs-box-component-wrap .message {
710
+ font-size: var(--bs-font-size-sm);
876
711
  margin-top: calc(var(--spacing) * 1);
877
- font-size: .9em;
878
712
  }
879
713
 
880
714
  .bs-box-component-base {
881
- background-color: var(--body-bg);
715
+ height: var(--bs-input-height);
716
+ background-color: var(--bs-input-bg);
882
717
  justify-content: flex-start;
883
718
  align-items: center;
884
- height: 26px;
885
719
  display: inline-flex;
886
720
  }
887
721
 
@@ -893,20 +727,20 @@
893
727
  }
894
728
 
895
729
  .bs-input-wrap .message {
730
+ font-size: var(--bs-font-size-sm);
896
731
  margin-top: calc(var(--spacing) * 1);
897
- font-size: .9em;
898
732
  }
899
733
 
900
734
  .bs-input-wrap .suffix, .bs-input-wrap .prefix {
735
+ font-size: var(--bs-input-affix-font-size);
736
+ background-color: var(--bs-input-affix-bg);
737
+ color: var(--bs-input-affix-text);
901
738
  margin-inline: calc(var(--spacing) * 1);
902
739
  border-radius: var(--radius-sm);
903
740
  padding-inline: calc(var(--spacing) * 1);
904
741
  padding-block: calc(var(--spacing) * .5);
905
742
  --tw-leading: 1;
906
743
  white-space: nowrap;
907
- background-color: var(--gray-200);
908
- color: var(--body-text);
909
- font-size: .9em;
910
744
  line-height: 1;
911
745
  }
912
746
 
@@ -914,8 +748,8 @@
914
748
  margin-left: calc(var(--spacing) * 1);
915
749
  }
916
750
 
917
- .bs-input-wrap .suffix .font-icon, .bs-input-wrap .prefix .font-icon {
918
- font-size: .9em;
751
+ .bs-input-wrap .suffix .bs-icon, .bs-input-wrap .prefix .bs-icon {
752
+ font-size: var(--bs-input-affix-font-size);
919
753
  }
920
754
 
921
755
  .bs-input-wrap .suffix img, .bs-input-wrap .prefix img {
@@ -928,21 +762,20 @@
928
762
  }
929
763
 
930
764
  .bs-input-base {
931
- border-radius: var(--radius-sm);
932
- border: 1px solid var(--border);
933
- background-color: var(--body-bg);
765
+ height: var(--bs-input-height);
766
+ border: 1px solid var(--bs-input-border);
767
+ border-radius: var(--bs-input-border-radius);
768
+ background-color: var(--bs-input-bg);
934
769
  justify-content: flex-start;
935
770
  align-items: center;
936
- height: 26px;
937
771
  display: inline-flex;
938
772
  }
939
773
 
940
774
  .bs-input-base > input {
775
+ padding: var(--bs-input-padding-y) var(--bs-input-padding-x);
776
+ color: var(--bs-input-text);
941
777
  border-style: var(--tw-border-style);
942
- width: 100%;
943
- padding-inline: calc(var(--spacing) * 1.5);
944
778
  --tw-outline-style: none;
945
- color: var(--body-text);
946
779
  background-color: #0000;
947
780
  border-width: 0;
948
781
  border-radius: 0;
@@ -950,17 +783,18 @@
950
783
  flex-grow: 1;
951
784
  flex-basis: 1em;
952
785
  align-self: stretch;
786
+ width: 100%;
953
787
  }
954
788
 
955
789
  .bs-input-base > textarea {
790
+ background-color: var(--bs-input-bg);
791
+ color: var(--bs-input-text);
956
792
  border-style: var(--tw-border-style);
957
793
  padding: calc(var(--spacing) * 1.5);
958
794
  font-family: var(--font-sans);
959
795
  --tw-leading: var(--leading-relaxed);
960
796
  line-height: var(--leading-relaxed);
961
797
  --tw-outline-style: none;
962
- background-color: var(--body-bg);
963
- color: var(--body-text);
964
798
  border-width: 0;
965
799
  border-radius: .25rem;
966
800
  outline-style: none;
@@ -969,11 +803,11 @@
969
803
  }
970
804
 
971
805
  .bs-input-base:hover {
972
- border-color: var(--border-hover);
806
+ border-color: var(--bs-input-border-hover);
973
807
  }
974
808
 
975
809
  .bs-input-base:has(:focus) {
976
- border-color: var(--color-focus);
810
+ border-color: var(--bs-input-border-focus);
977
811
  border-width: 1px;
978
812
  }
979
813
 
@@ -985,38 +819,37 @@
985
819
  }
986
820
 
987
821
  .bs-text-input > .input-area {
988
- border-radius: var(--radius-sm);
989
- border: 1px solid var(--border);
990
- background-color: var(--body-bg);
822
+ height: var(--bs-input-height);
823
+ border: 1px solid var(--bs-input-border);
824
+ border-radius: var(--bs-input-border-radius);
825
+ background-color: var(--bs-input-bg);
991
826
  justify-content: flex-start;
992
827
  align-items: center;
993
828
  width: 100%;
994
- height: 26px;
995
829
  display: inline-flex;
996
830
  }
997
831
 
998
832
  .bs-text-input > .input-area:hover {
999
- border-color: var(--border-hover);
833
+ border-color: var(--bs-input-border-hover);
1000
834
  }
1001
835
 
1002
836
  .bs-text-input > .input-area:has(:focus) {
1003
- border-color: var(--color-focus);
837
+ border-color: var(--bs-input-border-focus);
1004
838
  }
1005
839
 
1006
840
  .bs-text-input > .input-area > input {
1007
- border-radius: 0;
1008
- border-radius: var(--radius-sm);
841
+ padding: var(--bs-input-padding-y) var(--bs-input-padding-x);
842
+ border-radius: var(--bs-input-border-radius);
843
+ color: var(--bs-input-text);
1009
844
  border-style: var(--tw-border-style);
1010
- width: 100%;
1011
- padding-inline: calc(var(--spacing) * 1.5);
1012
845
  --tw-outline-style: none;
1013
- color: var(--body-text);
1014
846
  background-color: #0000;
1015
847
  border-width: 0;
1016
848
  outline-style: none;
1017
849
  flex-grow: 1;
1018
850
  flex-basis: 1em;
1019
851
  align-self: stretch;
852
+ width: 100%;
1020
853
  }
1021
854
 
1022
855
  .bs-number-input {
@@ -1027,30 +860,29 @@
1027
860
  }
1028
861
 
1029
862
  .bs-number-input > .input-area {
1030
- border-radius: var(--radius-sm);
1031
- border: 1px solid var(--border);
1032
- background-color: var(--body-bg);
863
+ height: var(--bs-input-height);
864
+ border: 1px solid var(--bs-input-border);
865
+ border-radius: var(--bs-input-border-radius);
866
+ background-color: var(--bs-input-bg);
1033
867
  justify-content: flex-start;
1034
868
  align-items: center;
1035
869
  width: 100%;
1036
- height: 26px;
1037
870
  display: inline-flex;
1038
871
  }
1039
872
 
1040
873
  .bs-number-input > .input-area:hover {
1041
- border-color: var(--border-hover);
874
+ border-color: var(--bs-input-border-hover);
1042
875
  }
1043
876
 
1044
877
  .bs-number-input > .input-area:has(:focus) {
1045
- border-color: var(--color-focus);
878
+ border-color: var(--bs-input-border-focus);
1046
879
  }
1047
880
 
1048
881
  .bs-number-input > .input-area > input {
882
+ padding: var(--bs-input-padding-y) var(--bs-input-padding-x);
883
+ color: var(--bs-input-text);
1049
884
  border-style: var(--tw-border-style);
1050
- width: 100%;
1051
- padding-inline: calc(var(--spacing) * 1.5);
1052
885
  --tw-outline-style: none;
1053
- color: var(--body-text);
1054
886
  background-color: #0000;
1055
887
  border-width: 0;
1056
888
  border-radius: 0;
@@ -1058,6 +890,7 @@
1058
890
  flex-grow: 1;
1059
891
  flex-basis: 1em;
1060
892
  align-self: stretch;
893
+ width: 100%;
1061
894
  }
1062
895
 
1063
896
  .bs-text-area {
@@ -1068,9 +901,9 @@
1068
901
  }
1069
902
 
1070
903
  .bs-text-area .input-area {
1071
- border-radius: var(--radius-sm);
1072
- border: 1px solid var(--border);
1073
- background-color: var(--body-bg);
904
+ border: 1px solid var(--bs-input-border);
905
+ border-radius: var(--bs-input-border-radius);
906
+ background-color: var(--bs-input-bg);
1074
907
  justify-content: flex-start;
1075
908
  align-items: flex-start;
1076
909
  width: 100%;
@@ -1079,16 +912,16 @@
1079
912
  }
1080
913
 
1081
914
  .bs-text-area .input-area > textarea {
1082
- border-radius: var(--radius-sm);
915
+ border-radius: var(--bs-input-border-radius);
1083
916
  padding: calc(var(--spacing) * 2);
1084
917
  }
1085
918
 
1086
919
  .bs-text-area .input-area:hover {
1087
- border-color: var(--border-hover);
920
+ border-color: var(--bs-input-border-hover);
1088
921
  }
1089
922
 
1090
923
  .bs-text-area .input-area:has(:focus) {
1091
- border-color: var(--color-focus);
924
+ border-color: var(--bs-input-border-focus);
1092
925
  }
1093
926
 
1094
927
  .bs-text-area .input-area .prefix, .bs-text-area .input-area .suffix {
@@ -1103,8 +936,8 @@
1103
936
  }
1104
937
 
1105
938
  .bs-checkbox {
939
+ color: var(--bs-check-icon-color);
1106
940
  white-space: nowrap;
1107
- color: var(--body-text);
1108
941
  display: inline-block;
1109
942
  }
1110
943
 
@@ -1113,57 +946,50 @@
1113
946
  appearance: none;
1114
947
  --tw-outline-style: none;
1115
948
  outline-style: none;
949
+ position: absolute;
1116
950
  }
1117
951
 
1118
- .bs-checkbox input:before {
1119
- content: "check_box_outline_blank";
952
+ .bs-checkbox .icon-label {
1120
953
  cursor: pointer;
1121
- vertical-align: middle;
1122
- font-size: var(--text-xl);
1123
- line-height: var(--tw-leading, var(--text-xl--line-height));
1124
- font-family: var(--icon-font-family);
1125
- color: var(--body-text);
1126
- }
1127
-
1128
- .bs-checkbox input:hover, .bs-checkbox input:hover ~ label {
1129
- color: var(--gray-500);
1130
954
  }
1131
955
 
1132
- .bs-checkbox input:focus:before, .bs-checkbox input:focus ~ label {
1133
- color: var(--color-focus);
956
+ .bs-checkbox .icon-label .bs-icon {
957
+ font-size: var(--bs-check-icon-size);
958
+ color: var(--bs-check-icon-color);
959
+ cursor: pointer;
960
+ vertical-align: middle;
1134
961
  }
1135
962
 
1136
- .bs-checkbox.checked input:before {
1137
- content: "check_box";
963
+ .bs-checkbox:hover .icon-label .bs-icon, .bs-checkbox:hover .text-label {
964
+ color: var(--bs-check-icon-hover);
1138
965
  }
1139
966
 
1140
- .bs-checkbox.reverted.checked input:before {
1141
- font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
967
+ .bs-checkbox input:focus ~ .icon-label .bs-icon, .bs-checkbox input:focus ~ label {
968
+ color: var(--bs-check-icon-focus);
1142
969
  }
1143
970
 
1144
- .bs-checkbox.modified input:before, .bs-checkbox.modified input ~ label {
1145
- color: var(--purple) !important;
971
+ .bs-checkbox.modified .icon-label .bs-icon, .bs-checkbox.modified .text-label {
972
+ color: var(--bs-check-icon-modified) !important;
1146
973
  }
1147
974
 
1148
- .bs-checkbox.error input:before, .bs-checkbox.error input ~ label {
1149
- color: var(--danger) !important;
975
+ .bs-checkbox.error .icon-label .bs-icon, .bs-checkbox.error .text-label {
976
+ color: var(--bs-check-icon-error) !important;
1150
977
  }
1151
978
 
1152
- .bs-checkbox.disabled input:before, .bs-checkbox.disabled input ~ label {
1153
- color: var(--gray-400) !important;
979
+ .bs-checkbox.disabled .icon-label .bs-icon, .bs-checkbox.disabled .text-label {
980
+ color: var(--bs-check-icon-disabled) !important;
1154
981
  }
1155
982
 
1156
983
  .bs-checkbox label {
984
+ padding: var(--bs-check-label-padding-y) var(--bs-check-label-padding-x);
1157
985
  cursor: pointer;
1158
- padding-inline: calc(var(--spacing) * .5);
1159
- padding-block: calc(var(--spacing) * 1);
1160
986
  vertical-align: middle;
1161
987
  display: inline-block;
1162
988
  }
1163
989
 
1164
990
  .bs-radio-button {
991
+ color: var(--bs-check-icon-color);
1165
992
  white-space: nowrap;
1166
- color: var(--body-text);
1167
993
  display: inline-block;
1168
994
  }
1169
995
 
@@ -1172,31 +998,37 @@
1172
998
  appearance: none;
1173
999
  --tw-outline-style: none;
1174
1000
  outline-style: none;
1001
+ position: absolute;
1002
+ }
1003
+
1004
+ .bs-radio-button .icon-label {
1005
+ cursor: pointer;
1175
1006
  }
1176
1007
 
1177
- .bs-radio-button input:before {
1178
- content: "radio_button_unchecked";
1008
+ .bs-radio-button .icon-label .bs-icon {
1009
+ font-size: var(--bs-check-icon-size);
1010
+ color: var(--bs-check-icon-color);
1179
1011
  cursor: pointer;
1180
1012
  vertical-align: middle;
1181
- font-size: var(--text-xl);
1182
- line-height: var(--tw-leading, var(--text-xl--line-height));
1183
- font-family: var(--icon-font-family);
1184
- color: var(--body-text);
1185
1013
  }
1186
1014
 
1187
- .bs-radio-button .font-icon, .bs-radio-button .text-label {
1015
+ .bs-radio-button .bs-icon, .bs-radio-button .text-label {
1188
1016
  vertical-align: middle;
1189
1017
  }
1190
1018
 
1191
- .bs-radio-button.checked input:before {
1192
- content: "radio_button_checked";
1019
+ .bs-radio-button:hover .icon-label .bs-icon, .bs-radio-button:hover .text-label {
1020
+ color: var(--bs-check-icon-hover);
1021
+ }
1022
+
1023
+ .bs-radio-button input:focus ~ .icon-label .bs-icon, .bs-radio-button input:focus ~ label {
1024
+ color: var(--bs-check-icon-focus);
1193
1025
  }
1194
1026
 
1195
1027
  .bs-select {
1028
+ background-color: var(--bs-select-bg);
1029
+ color: var(--bs-select-text);
1196
1030
  min-width: calc(var(--spacing) * 16);
1197
1031
  --tw-outline-style: none;
1198
- background-color: var(--body-bg);
1199
- color: var(--body-text);
1200
1032
  outline-style: none;
1201
1033
  flex-direction: column;
1202
1034
  justify-content: flex-start;
@@ -1206,23 +1038,24 @@
1206
1038
  }
1207
1039
 
1208
1040
  .bs-select:hover > .selected {
1209
- border-color: var(--border-hover);
1041
+ border-color: var(--bs-select-border-hover);
1210
1042
  }
1211
1043
 
1212
1044
  .bs-select:focus > .selected {
1213
- border-color: var(--color-focus);
1045
+ border-color: var(--bs-select-border-focus);
1214
1046
  }
1215
1047
 
1216
1048
  .bs-select > .selected {
1049
+ height: var(--bs-select-height);
1050
+ border: 1px solid var(--bs-select-border);
1051
+ border-radius: var(--bs-select-border-radius);
1052
+ padding-left: var(--bs-select-padding-x);
1053
+ padding-right: var(--bs-select-padding-x);
1054
+ background-color: var(--bs-select-bg);
1217
1055
  cursor: pointer;
1218
- border-radius: var(--radius-sm);
1219
- min-width: 100%;
1220
- height: 26px;
1221
- padding-inline: calc(var(--spacing) * 1.5);
1222
- border: 1px solid var(--border);
1223
- background-color: var(--body-bg);
1224
1056
  justify-content: flex-start;
1225
1057
  align-items: center;
1058
+ min-width: 100%;
1226
1059
  display: inline-flex;
1227
1060
  }
1228
1061
 
@@ -1234,12 +1067,13 @@
1234
1067
  }
1235
1068
 
1236
1069
  .bs-select > .selected .placeholder {
1070
+ color: var(--bs-select-placeholder);
1237
1071
  text-overflow: ellipsis;
1238
- color: var(--gray-400);
1239
1072
  overflow: hidden;
1240
1073
  }
1241
1074
 
1242
1075
  .bs-select > .selected .dropdown-btn {
1076
+ font-family: var(--bs-icon-font-family);
1243
1077
  margin-right: calc(var(--spacing) * -1);
1244
1078
  margin-left: calc(var(--spacing) * 1);
1245
1079
  transition-property: transform, translate, scale, rotate;
@@ -1248,7 +1082,6 @@
1248
1082
  --tw-duration: .2s;
1249
1083
  -webkit-user-select: none;
1250
1084
  user-select: none;
1251
- font-family: var(--icon-font-family);
1252
1085
  transition-duration: .2s;
1253
1086
  }
1254
1087
 
@@ -1257,18 +1090,18 @@
1257
1090
  }
1258
1091
 
1259
1092
  .bs-select.modified > .selected {
1260
- border-color: var(--purple) !important;
1093
+ border-color: var(--bs-select-modified-border) !important;
1261
1094
  }
1262
1095
 
1263
1096
  .bs-select.error > .selected {
1264
- border-color: var(--danger) !important;
1265
- color: var(--danger) !important;
1097
+ border-color: var(--bs-select-error-border) !important;
1098
+ color: var(--bs-select-error-text) !important;
1266
1099
  }
1267
1100
 
1268
1101
  .bs-select.disabled > .selected {
1269
- border-color: var(--border) !important;
1270
- background-color: var(--gray-100) !important;
1271
- color: var(--gray-500) !important;
1102
+ border-color: var(--bs-select-disabled-border) !important;
1103
+ background-color: var(--bs-select-disabled-bg) !important;
1104
+ color: var(--bs-select-disabled-text) !important;
1272
1105
  }
1273
1106
 
1274
1107
  .bs-select.view-mode {
@@ -1276,21 +1109,21 @@
1276
1109
  }
1277
1110
 
1278
1111
  .bs-select .small-progress {
1112
+ font-size: var(--bs-font-size-sm);
1113
+ font-family: var(--bs-icon-font-family);
1114
+ color: var(--bs-select-placeholder);
1279
1115
  top: calc(var(--spacing) * 0);
1280
1116
  padding-inline: calc(var(--spacing) * .5);
1281
- font-size: .9em;
1282
- font-family: var(--icon-font-family);
1283
- color: var(--gray-400);
1284
1117
  animation: 1s linear infinite spin;
1285
1118
  position: absolute;
1286
1119
  left: 100%;
1287
1120
  }
1288
1121
 
1289
1122
  .bs-multi-select {
1123
+ background-color: var(--bs-select-bg);
1124
+ color: var(--bs-select-text);
1290
1125
  min-width: calc(var(--spacing) * 16);
1291
1126
  --tw-outline-style: none;
1292
- background-color: var(--body-bg);
1293
- color: var(--body-text);
1294
1127
  outline-style: none;
1295
1128
  flex-direction: column;
1296
1129
  justify-content: flex-start;
@@ -1300,23 +1133,24 @@
1300
1133
  }
1301
1134
 
1302
1135
  .bs-multi-select:hover > .selected {
1303
- border-color: var(--border-hover);
1136
+ border-color: var(--bs-select-border-hover);
1304
1137
  }
1305
1138
 
1306
1139
  .bs-multi-select:focus > .selected {
1307
- border-color: var(--color-focus);
1140
+ border-color: var(--bs-select-border-focus);
1308
1141
  }
1309
1142
 
1310
1143
  .bs-multi-select > .selected {
1144
+ height: var(--bs-select-height);
1145
+ border: 1px solid var(--bs-select-border);
1146
+ border-radius: var(--bs-select-border-radius);
1147
+ padding-left: var(--bs-select-padding-x);
1148
+ padding-right: var(--bs-select-padding-x);
1149
+ background-color: var(--bs-select-bg);
1311
1150
  cursor: pointer;
1312
- border-radius: var(--radius-sm);
1313
- min-width: 100%;
1314
- height: 26px;
1315
- padding-inline: calc(var(--spacing) * 1.5);
1316
- border: 1px solid var(--border);
1317
- background-color: var(--body-bg);
1318
1151
  justify-content: flex-start;
1319
1152
  align-items: center;
1153
+ min-width: 100%;
1320
1154
  display: inline-flex;
1321
1155
  }
1322
1156
 
@@ -1329,12 +1163,13 @@
1329
1163
  }
1330
1164
 
1331
1165
  .bs-multi-select > .selected .placeholder {
1166
+ color: var(--bs-select-placeholder);
1332
1167
  text-overflow: ellipsis;
1333
- color: var(--gray-400);
1334
1168
  overflow: hidden;
1335
1169
  }
1336
1170
 
1337
1171
  .bs-multi-select > .selected .dropdown-btn {
1172
+ font-family: var(--bs-icon-font-family);
1338
1173
  margin-right: calc(var(--spacing) * -1);
1339
1174
  margin-left: calc(var(--spacing) * 1);
1340
1175
  transition-property: transform, translate, scale, rotate;
@@ -1343,7 +1178,6 @@
1343
1178
  --tw-duration: .2s;
1344
1179
  -webkit-user-select: none;
1345
1180
  user-select: none;
1346
- font-family: var(--icon-font-family);
1347
1181
  transition-duration: .2s;
1348
1182
  }
1349
1183
 
@@ -1352,26 +1186,26 @@
1352
1186
  }
1353
1187
 
1354
1188
  .bs-multi-select.modified > .selected {
1355
- border-color: var(--purple) !important;
1189
+ border-color: var(--bs-select-modified-border) !important;
1356
1190
  }
1357
1191
 
1358
1192
  .bs-multi-select.error > .selected {
1359
- border-color: var(--danger) !important;
1360
- color: var(--danger) !important;
1193
+ border-color: var(--bs-select-error-border) !important;
1194
+ color: var(--bs-select-error-text) !important;
1361
1195
  }
1362
1196
 
1363
1197
  .bs-multi-select.disabled > .selected {
1364
- border-color: var(--border) !important;
1365
- background-color: var(--gray-100) !important;
1366
- color: var(--gray-500) !important;
1198
+ border-color: var(--bs-select-disabled-border) !important;
1199
+ background-color: var(--bs-select-disabled-bg) !important;
1200
+ color: var(--bs-select-disabled-text) !important;
1367
1201
  }
1368
1202
 
1369
1203
  .bs-multi-select .small-progress {
1204
+ font-size: var(--bs-font-size-sm);
1205
+ font-family: var(--bs-icon-font-family);
1206
+ color: var(--bs-select-placeholder);
1370
1207
  top: calc(var(--spacing) * 0);
1371
1208
  padding-inline: calc(var(--spacing) * .5);
1372
- font-size: .9em;
1373
- font-family: var(--icon-font-family);
1374
- color: var(--gray-400);
1375
1209
  animation: 1s linear infinite spin;
1376
1210
  position: absolute;
1377
1211
  left: 100%;
@@ -1382,8 +1216,7 @@
1382
1216
  }
1383
1217
 
1384
1218
  .bs-checkbox-group > .items {
1385
- column-gap: calc(var(--spacing) * 2);
1386
- row-gap: calc(var(--spacing) * 1);
1219
+ gap: var(--bs-check-group-gap-y) var(--bs-check-group-gap-x);
1387
1220
  flex-wrap: wrap;
1388
1221
  display: flex;
1389
1222
  }
@@ -1403,8 +1236,7 @@
1403
1236
  }
1404
1237
 
1405
1238
  .bs-radio-button-group > .radio-button-group {
1406
- column-gap: calc(var(--spacing) * 2);
1407
- row-gap: calc(var(--spacing) * 1);
1239
+ gap: var(--bs-check-group-gap-y) var(--bs-check-group-gap-x);
1408
1240
  flex-wrap: wrap;
1409
1241
  display: flex;
1410
1242
  }
@@ -1420,8 +1252,8 @@
1420
1252
  }
1421
1253
 
1422
1254
  .bs-radio-button-group.switch-style .radio-button-group {
1255
+ background-color: var(--bs-radio-switch-bg);
1423
1256
  gap: calc(var(--spacing) * 0);
1424
- background-color: var(--body-bg);
1425
1257
  border-radius: .25rem;
1426
1258
  overflow: hidden;
1427
1259
  }
@@ -1436,11 +1268,11 @@
1436
1268
  }
1437
1269
 
1438
1270
  .bs-radio-button-group.switch-style .bs-radio-button label {
1271
+ color: var(--bs-radio-switch-inactive-text);
1439
1272
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1440
1273
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1441
1274
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1442
1275
  --tw-duration: .4s;
1443
- color: #999;
1444
1276
  padding: 7px;
1445
1277
  transition-duration: .4s;
1446
1278
  position: relative;
@@ -1448,9 +1280,9 @@
1448
1280
 
1449
1281
  .bs-radio-button-group.switch-style .bs-radio-button label:after {
1450
1282
  content: "";
1451
- top: calc(var(--spacing) * 0);
1283
+ background-color: var(--bs-radio-switch-active-bg);
1452
1284
  z-index: -1;
1453
- background-color: #000;
1285
+ top: calc(var(--spacing) * 0);
1454
1286
  border-radius: .25rem;
1455
1287
  width: 100%;
1456
1288
  height: 100%;
@@ -1467,10 +1299,10 @@
1467
1299
  }
1468
1300
 
1469
1301
  .bs-radio-button-group.switch-style .bs-radio-button.checked label {
1302
+ color: var(--bs-radio-switch-active-text);
1470
1303
  z-index: 1;
1471
1304
  --tw-font-weight: var(--font-weight-medium);
1472
1305
  font-weight: var(--font-weight-medium);
1473
- color: var(--white);
1474
1306
  position: relative;
1475
1307
  }
1476
1308
 
@@ -1479,11 +1311,11 @@
1479
1311
  }
1480
1312
 
1481
1313
  .bs-radio-button-group.switch-style.disabled .bs-radio-button.checked label {
1482
- color: var(--white) !important;
1314
+ color: var(--bs-radio-switch-active-text) !important;
1483
1315
  }
1484
1316
 
1485
1317
  .bs-radio-button-group.switch-style.disabled .bs-radio-button.checked label:after {
1486
- background-color: var(--gray-400);
1318
+ background-color: var(--bs-radio-switch-disabled-bg);
1487
1319
  }
1488
1320
 
1489
1321
  .bs-radio-button-group.button-style .radio-button-group {
@@ -1496,31 +1328,31 @@
1496
1328
  }
1497
1329
 
1498
1330
  .bs-radio-button-group.button-style .bs-radio-button label {
1499
- border-radius: var(--radius-sm);
1331
+ border: 1px solid var(--bs-radio-button-border);
1332
+ border-radius: var(--bs-input-border-radius);
1333
+ color: var(--bs-radio-button-text);
1500
1334
  padding-inline: calc(var(--spacing) * 2);
1501
1335
  white-space: nowrap;
1502
- border: 1px solid var(--border);
1503
- color: var(--body-text);
1504
1336
  line-height: 22.9px;
1505
1337
  }
1506
1338
 
1507
1339
  .bs-radio-button-group.button-style .bs-radio-button.checked label {
1508
- background-color: var(--radio-group);
1509
- border-color: var(--radio-group);
1340
+ background-color: var(--bs-radio-button-active-bg);
1341
+ border-color: var(--bs-radio-button-active-border);
1510
1342
  }
1511
1343
 
1512
1344
  .bs-radio-button-group.button-style .bs-radio-button.checked label span {
1513
- color: var(--white);
1345
+ color: var(--bs-radio-button-active-text);
1514
1346
  }
1515
1347
 
1516
1348
  .bs-radio-button-group.button-style.disabled .bs-radio-button.checked label {
1517
- color: var(--white) !important;
1349
+ color: var(--bs-radio-button-active-text) !important;
1518
1350
  }
1519
1351
 
1520
1352
  .bs-radio-button-group.button-style.modified .bs-radio-button.checked label {
1521
- background-color: var(--purple);
1522
- border-color: var(--purple);
1523
- color: var(--white) !important;
1353
+ background-color: var(--bs-check-icon-modified);
1354
+ border-color: var(--bs-check-icon-modified);
1355
+ color: var(--bs-radio-button-active-text) !important;
1524
1356
  }
1525
1357
 
1526
1358
  .bs-radio-button-group.button-group-style .radio-button-group {
@@ -1533,10 +1365,10 @@
1533
1365
  }
1534
1366
 
1535
1367
  .bs-radio-button-group.button-group-style .bs-radio-button label {
1368
+ border: 1px solid var(--bs-radio-button-border);
1369
+ color: var(--bs-radio-button-text);
1536
1370
  padding-inline: calc(var(--spacing) * 2);
1537
1371
  white-space: nowrap;
1538
- border: 1px solid var(--border);
1539
- color: var(--body-text);
1540
1372
  border-radius: 0;
1541
1373
  line-height: 22.9px;
1542
1374
  }
@@ -1550,89 +1382,86 @@
1550
1382
  }
1551
1383
 
1552
1384
  .bs-radio-button-group.button-group-style .bs-radio-button.checked label {
1553
- background-color: var(--radio-group);
1554
- border-color: var(--radio-group);
1385
+ background-color: var(--bs-radio-button-active-bg);
1386
+ border-color: var(--bs-radio-button-active-border);
1555
1387
  }
1556
1388
 
1557
1389
  .bs-radio-button-group.button-group-style .bs-radio-button.checked label span {
1558
- color: var(--white);
1390
+ color: var(--bs-radio-button-active-text);
1559
1391
  }
1560
1392
 
1561
1393
  .bs-radio-button-group.button-group-style .bs-radio-button:first-child > label {
1562
- border-top-left-radius: var(--radius-sm);
1563
- border-bottom-left-radius: var(--radius-sm);
1394
+ border-radius: var(--bs-input-border-radius) 0 0 var(--bs-input-border-radius);
1564
1395
  }
1565
1396
 
1566
1397
  .bs-radio-button-group.button-group-style .bs-radio-button:last-child > label {
1567
- border-top-right-radius: var(--radius-sm);
1568
- border-bottom-right-radius: var(--radius-sm);
1398
+ border-radius: 0 var(--bs-input-border-radius) var(--bs-input-border-radius) 0;
1569
1399
  }
1570
1400
 
1571
1401
  .bs-radio-button-group.button-group-style.disabled .bs-radio-button.checked label {
1572
- color: var(--white) !important;
1402
+ color: var(--bs-radio-button-active-text) !important;
1573
1403
  }
1574
1404
 
1575
1405
  .bs-radio-button-group.button-group-style.modified .radio-button-group, .bs-radio-button-group.button-group-style.modified .bs-radio-button {
1576
- border-color: var(--purple);
1406
+ border-color: var(--bs-check-icon-modified);
1577
1407
  }
1578
1408
 
1579
1409
  .bs-radio-button-group.button-group-style.modified .bs-radio-button.checked label {
1580
- background-color: var(--purple);
1581
- color: var(--white) !important;
1410
+ background-color: var(--bs-check-icon-modified);
1411
+ color: var(--bs-radio-button-active-text) !important;
1582
1412
  }
1583
1413
 
1584
1414
  .bs-date-input {
1415
+ width: var(--bs-date-input-width);
1585
1416
  flex-direction: column;
1586
1417
  justify-content: flex-start;
1587
1418
  align-items: flex-start;
1588
- width: 200px;
1589
1419
  display: inline-flex;
1590
1420
  }
1591
1421
 
1592
1422
  .bs-date-input .input-area {
1593
- border-radius: var(--radius-sm);
1594
- border: 1px solid var(--border);
1595
- background-color: var(--body-bg);
1423
+ height: var(--bs-date-input-height);
1424
+ border: 1px solid var(--bs-date-input-border);
1425
+ border-radius: var(--bs-date-input-border-radius);
1426
+ background-color: var(--bs-date-input-bg);
1596
1427
  justify-content: flex-start;
1597
1428
  align-items: center;
1598
1429
  width: 100%;
1599
- height: 26px;
1600
1430
  display: inline-flex;
1601
1431
  }
1602
1432
 
1603
1433
  .bs-date-input .input-area:hover {
1604
- border-color: var(--border-hover);
1434
+ border-color: var(--bs-date-input-border-hover);
1605
1435
  }
1606
1436
 
1607
1437
  .bs-date-input .input-area:has(:focus) {
1608
- border-color: var(--color-focus);
1438
+ border-color: var(--bs-date-input-border-focus);
1609
1439
  }
1610
1440
 
1611
- .bs-date-input .input-area .font-icon {
1441
+ .bs-date-input .input-area .bs-icon {
1442
+ font-size: var(--bs-date-input-icon-size);
1612
1443
  min-width: 26px;
1613
1444
  padding-inline: calc(var(--spacing) * 1.5);
1614
- font-size: var(--text-sm);
1615
- line-height: var(--tw-leading, var(--text-sm--line-height));
1616
1445
  }
1617
1446
 
1618
1447
  .bs-date-input .input-area input {
1448
+ padding: var(--bs-input-padding-y) var(--bs-input-padding-x);
1449
+ border-left: 1px solid var(--bs-date-input-border);
1450
+ color: var(--bs-date-input-text);
1619
1451
  border-style: var(--tw-border-style);
1620
- width: 100%;
1621
- padding-inline: calc(var(--spacing) * 1.5);
1622
1452
  --tw-outline-style: none;
1623
- border-width: 0;
1624
- border-left: 1px solid var(--border);
1625
- color: var(--body-text);
1626
1453
  background-color: #0000;
1454
+ border-width: 0;
1627
1455
  border-radius: 0;
1628
1456
  outline-style: none;
1629
1457
  flex-grow: 1;
1630
1458
  flex-basis: 1em;
1631
1459
  align-self: stretch;
1460
+ width: 100%;
1632
1461
  }
1633
1462
 
1634
- .bs-date-input.disabled .font-icon {
1635
- color: var(--gray-400);
1463
+ .bs-date-input.disabled .bs-icon {
1464
+ color: var(--bs-input-disabled-text);
1636
1465
  }
1637
1466
 
1638
1467
  .bs-date-range {
@@ -1643,42 +1472,42 @@
1643
1472
  }
1644
1473
 
1645
1474
  .bs-date-range .input-area {
1646
- border-radius: var(--radius-sm);
1475
+ height: var(--bs-date-input-height);
1476
+ border: 1px solid var(--bs-date-input-border);
1477
+ border-radius: var(--bs-date-input-border-radius);
1478
+ background-color: var(--bs-date-input-bg);
1647
1479
  width: 100%;
1648
- height: 26px;
1649
1480
  padding-right: calc(var(--spacing) * 2);
1650
- border: 1px solid var(--border);
1651
- background-color: var(--body-bg);
1652
1481
  justify-content: flex-start;
1653
1482
  align-items: center;
1654
1483
  display: inline-flex;
1655
1484
  }
1656
1485
 
1657
1486
  .bs-date-range .input-area:hover {
1658
- border-color: var(--border-hover);
1487
+ border-color: var(--bs-date-input-border-hover);
1659
1488
  }
1660
1489
 
1661
1490
  .bs-date-range .input-area:has(:focus) {
1662
- border-color: var(--color-focus);
1491
+ border-color: var(--bs-date-input-border-focus);
1663
1492
  }
1664
1493
 
1665
- .bs-date-range .input-area .font-icon {
1494
+ .bs-date-range .input-area .bs-icon {
1495
+ font-size: var(--bs-date-input-icon-size);
1666
1496
  min-width: 26px;
1667
1497
  padding-inline: calc(var(--spacing) * 1.5);
1668
- font-size: var(--text-sm);
1669
- line-height: var(--tw-leading, var(--text-sm--line-height));
1670
1498
  }
1671
1499
 
1672
- .bs-date-range .input-area .font-icon + input {
1673
- border-left: 1px solid var(--border);
1500
+ .bs-date-range .input-area .bs-icon + input {
1501
+ border-left: 1px solid var(--bs-date-input-border);
1674
1502
  }
1675
1503
 
1676
1504
  .bs-date-range .input-area input {
1505
+ padding: var(--bs-input-padding-y) var(--bs-input-padding-x);
1506
+ color: var(--bs-date-input-text);
1677
1507
  width: calc(var(--spacing) * 16);
1678
1508
  border-style: var(--tw-border-style);
1679
1509
  padding-right: calc(var(--spacing) * 0);
1680
1510
  --tw-outline-style: none;
1681
- color: var(--body-text);
1682
1511
  background-color: #0000;
1683
1512
  border-width: 0;
1684
1513
  border-radius: 0;
@@ -1689,39 +1518,39 @@
1689
1518
  }
1690
1519
 
1691
1520
  .bs-date-range .input-area input:disabled {
1692
- color: var(--gray-400);
1693
- background-color: var(--gray-100) !important;
1521
+ color: var(--bs-input-disabled-text);
1522
+ background-color: var(--bs-input-disabled-bg) !important;
1694
1523
  }
1695
1524
 
1696
- .bs-date-range.disabled .font-icon {
1697
- color: var(--gray-400);
1525
+ .bs-date-range.disabled .bs-icon {
1526
+ color: var(--bs-input-disabled-text);
1698
1527
  }
1699
1528
 
1700
1529
  .bs-text-input.modified > .input-area, .bs-number-input.modified > .input-area, .bs-price-input.modified > .input-area, .bs-date-input.modified > .input-area, .bs-date-range.modified > .input-area, .bs-multi-lang-text-input.modified > .input-area, .bs-multi-lang-text-area.modified > .input-area, .bs-multi-lang-rich-text.modified > .input-area, .bs-text-area.modified > .input-area, .bs-rich-text.modified > .input-area {
1701
- border-color: var(--purple) !important;
1530
+ border-color: var(--bs-input-modified-border) !important;
1702
1531
  }
1703
1532
 
1704
1533
  .bs-text-input.error > .input-area, .bs-number-input.error > .input-area, .bs-price-input.error > .input-area, .bs-date-input.error > .input-area, .bs-date-range.error > .input-area, .bs-multi-lang-text-input.error > .input-area, .bs-multi-lang-text-area.error > .input-area, .bs-multi-lang-rich-text.error > .input-area, .bs-text-area.error > .input-area, .bs-rich-text.error > .input-area {
1705
- border-color: var(--danger) !important;
1534
+ border-color: var(--bs-input-error-border) !important;
1706
1535
  }
1707
1536
 
1708
1537
  .bs-text-input.error > .input-area > input, .bs-number-input.error > .input-area > input, .bs-price-input.error > .input-area > input, .bs-date-input.error > .input-area > input, .bs-date-range.error > .input-area > input {
1709
- color: var(--danger) !important;
1538
+ color: var(--bs-input-error-text) !important;
1710
1539
  }
1711
1540
 
1712
1541
  .bs-text-input.disabled > .input-area, .bs-number-input.disabled > .input-area, .bs-price-input.disabled > .input-area, .bs-date-input.disabled > .input-area, .bs-date-range.disabled > .input-area, .bs-multi-lang-text-input.disabled > .input-area, .bs-multi-lang-text-area.disabled > .input-area, .bs-multi-lang-rich-text.disabled > .input-area, .bs-text-area.disabled > .input-area, .bs-rich-text.disabled > .input-area {
1713
- border-color: var(--border) !important;
1714
- background-color: var(--gray-100) !important;
1715
- color: var(--gray-400) !important;
1542
+ border-color: var(--bs-input-disabled-border) !important;
1543
+ background-color: var(--bs-input-disabled-bg) !important;
1544
+ color: var(--bs-input-disabled-text) !important;
1716
1545
  }
1717
1546
 
1718
1547
  .bs-text-input.disabled > .input-area > input, .bs-number-input.disabled > .input-area > input, .bs-price-input.disabled > .input-area > input, .bs-date-input.disabled > .input-area > input, .bs-date-range.disabled > .input-area > input {
1719
- color: var(--gray-400) !important;
1720
- background-color: var(--gray-100) !important;
1548
+ color: var(--bs-input-disabled-text) !important;
1549
+ background-color: var(--bs-input-disabled-bg) !important;
1721
1550
  }
1722
1551
 
1723
1552
  .bs-text-area.disabled > .input-area > textarea, .bs-rich-text.disabled > .input-area > textarea {
1724
- background-color: var(--gray-100) !important;
1553
+ background-color: var(--bs-input-disabled-bg) !important;
1725
1554
  }
1726
1555
 
1727
1556
  .bs-date-input .view-mode, .bs-date-range .view-mode {
@@ -1734,12 +1563,12 @@
1734
1563
  .bs-date-input .view-mode:before, .bs-date-range .view-mode:before {
1735
1564
  content: "calendar_month";
1736
1565
  width: 1em;
1737
- font-family: var(--icon-font-family);
1566
+ font-family: var(--bs-icon-font-family);
1738
1567
  }
1739
1568
 
1740
1569
  .bs-date-input .extra-dates, .bs-date-range .extra-dates, .bs-calendar .extra-dates, .bs-calendar-range .extra-dates {
1741
1570
  margin-top: calc(var(--spacing) * 1);
1742
- color: var(--body-text);
1571
+ color: var(--bs-body-text);
1743
1572
  }
1744
1573
 
1745
1574
  .bs-date-input .extra-dates .extra-date, .bs-date-range .extra-dates .extra-date, .bs-calendar .extra-dates .extra-date, .bs-calendar-range .extra-dates .extra-date {
@@ -1753,17 +1582,17 @@
1753
1582
  .bs-date-input .extra-dates .extra-date:before, .bs-date-range .extra-dates .extra-date:before, .bs-calendar .extra-dates .extra-date:before, .bs-calendar-range .extra-dates .extra-date:before {
1754
1583
  content: "globe";
1755
1584
  width: 1em;
1756
- font-family: var(--icon-font-family);
1585
+ font-family: var(--bs-icon-font-family);
1757
1586
  }
1758
1587
 
1759
1588
  .bs-calendar .extra-dates, .bs-calendar-range .extra-dates {
1760
1589
  padding-top: calc(var(--spacing) * 2);
1761
- border-top: 1px solid var(--border);
1590
+ border-top: 1px solid var(--bs-border);
1762
1591
  }
1763
1592
 
1764
1593
  .bs-checkbox-base {
1594
+ color: var(--bs-check-icon-color);
1765
1595
  white-space: nowrap;
1766
- color: var(--body-text);
1767
1596
  display: inline-block;
1768
1597
  }
1769
1598
 
@@ -1775,59 +1604,57 @@
1775
1604
  }
1776
1605
 
1777
1606
  .bs-checkbox-base input:before {
1607
+ font-size: var(--bs-check-icon-size);
1608
+ font-family: var(--bs-icon-font-family);
1609
+ color: var(--bs-check-icon-color);
1778
1610
  cursor: pointer;
1779
1611
  vertical-align: middle;
1780
- font-size: var(--text-xl);
1781
- line-height: var(--tw-leading, var(--text-xl--line-height));
1782
- font-family: var(--icon-font-family);
1783
- color: var(--body-text);
1784
1612
  }
1785
1613
 
1786
1614
  .bs-checkbox-base input:hover, .bs-checkbox-base input:hover ~ label {
1787
- color: var(--gray-500);
1615
+ color: var(--bs-check-icon-hover);
1788
1616
  }
1789
1617
 
1790
1618
  .bs-checkbox-base input:focus:before, .bs-checkbox-base input:focus ~ label {
1791
- color: var(--color-focus);
1619
+ color: var(--bs-check-icon-focus);
1792
1620
  }
1793
1621
 
1794
1622
  .bs-checkbox-base.modified input:before, .bs-checkbox-base.modified input ~ label {
1795
- color: var(--purple) !important;
1623
+ color: var(--bs-check-icon-modified) !important;
1796
1624
  }
1797
1625
 
1798
1626
  .bs-checkbox-base.error input:before, .bs-checkbox-base.error input ~ label {
1799
- color: var(--danger) !important;
1627
+ color: var(--bs-check-icon-error) !important;
1800
1628
  }
1801
1629
 
1802
1630
  .bs-checkbox-base.disabled input:before, .bs-checkbox-base.disabled input ~ label {
1803
- color: var(--gray-400) !important;
1631
+ color: var(--bs-check-icon-disabled) !important;
1804
1632
  }
1805
1633
 
1806
1634
  .bs-checkbox-base label {
1635
+ padding: var(--bs-check-label-padding-y) var(--bs-check-label-padding-x);
1807
1636
  cursor: pointer;
1808
- padding-inline: calc(var(--spacing) * .5);
1809
- padding-block: calc(var(--spacing) * 1);
1810
1637
  vertical-align: middle;
1811
1638
  display: inline-block;
1812
1639
  }
1813
1640
 
1814
- .bs-checkbox-group.modified .bs-checkbox:not(.disabled) input:before, .bs-checkbox-group.modified .bs-checkbox:not(.disabled) input ~ label, .bs-radio-button-group.modified .bs-radio-button:not(.disabled) input:before, .bs-radio-button-group.modified .bs-radio-button:not(.disabled) input ~ label {
1815
- color: var(--purple) !important;
1641
+ .bs-checkbox-group.modified .bs-checkbox:not(.disabled) .icon-label .bs-icon, .bs-checkbox-group.modified .bs-checkbox:not(.disabled) .text-label, .bs-radio-button-group.modified .bs-radio-button:not(.disabled) .icon-label .bs-icon, .bs-radio-button-group.modified .bs-radio-button:not(.disabled) .text-label {
1642
+ color: var(--bs-check-icon-modified) !important;
1816
1643
  }
1817
1644
 
1818
- .bs-checkbox-group.error .bs-checkbox:not(.disabled) input:before, .bs-checkbox-group.error .bs-checkbox:not(.disabled) input ~ label, .bs-radio-button-group.error .bs-radio-button:not(.disabled) input:before, .bs-radio-button-group.error .bs-radio-button:not(.disabled) input ~ label {
1819
- color: var(--danger) !important;
1645
+ .bs-checkbox-group.error .bs-checkbox:not(.disabled) .icon-label .bs-icon, .bs-checkbox-group.error .bs-checkbox:not(.disabled) .text-label, .bs-radio-button-group.error .bs-radio-button:not(.disabled) .icon-label .bs-icon, .bs-radio-button-group.error .bs-radio-button:not(.disabled) .text-label {
1646
+ color: var(--bs-check-icon-error) !important;
1820
1647
  }
1821
1648
 
1822
- .bs-checkbox-group.disabled input:before, .bs-checkbox-group.disabled input ~ label, .bs-radio-button-group.disabled input:before, .bs-radio-button-group.disabled input ~ label {
1823
- color: var(--gray-400) !important;
1649
+ .bs-checkbox-group.disabled .icon-label .bs-icon, .bs-checkbox-group.disabled .text-label, .bs-radio-button-group.disabled .icon-label .bs-icon, .bs-radio-button-group.disabled .text-label {
1650
+ color: var(--bs-check-icon-disabled) !important;
1824
1651
  }
1825
1652
 
1826
1653
  .bs-select-wrap {
1654
+ background-color: var(--bs-select-bg);
1655
+ color: var(--bs-select-text);
1827
1656
  min-width: calc(var(--spacing) * 16);
1828
1657
  --tw-outline-style: none;
1829
- background-color: var(--body-bg);
1830
- color: var(--body-text);
1831
1658
  outline-style: none;
1832
1659
  flex-direction: column;
1833
1660
  justify-content: flex-start;
@@ -1837,28 +1664,29 @@
1837
1664
  }
1838
1665
 
1839
1666
  .bs-select-wrap .message {
1667
+ font-size: var(--bs-font-size-sm);
1840
1668
  margin-top: calc(var(--spacing) * 1);
1841
- font-size: .9em;
1842
1669
  }
1843
1670
 
1844
1671
  .bs-select-wrap:hover > .selected {
1845
- border-color: var(--border-hover);
1672
+ border-color: var(--bs-select-border-hover);
1846
1673
  }
1847
1674
 
1848
1675
  .bs-select-wrap:focus > .selected {
1849
- border-color: var(--color-focus);
1676
+ border-color: var(--bs-select-border-focus);
1850
1677
  }
1851
1678
 
1852
1679
  .bs-select-wrap > .selected {
1680
+ height: var(--bs-select-height);
1681
+ border: 1px solid var(--bs-select-border);
1682
+ border-radius: var(--bs-select-border-radius);
1683
+ padding-left: var(--bs-select-padding-x);
1684
+ padding-right: var(--bs-select-padding-x);
1685
+ background-color: var(--bs-select-bg);
1853
1686
  cursor: pointer;
1854
- border-radius: var(--radius-sm);
1855
- min-width: 100%;
1856
- height: 26px;
1857
- padding-inline: calc(var(--spacing) * 1.5);
1858
- border: 1px solid var(--border);
1859
- background-color: var(--body-bg);
1860
1687
  justify-content: flex-start;
1861
1688
  align-items: center;
1689
+ min-width: 100%;
1862
1690
  display: flex;
1863
1691
  }
1864
1692
 
@@ -1870,12 +1698,13 @@
1870
1698
  }
1871
1699
 
1872
1700
  .bs-select-wrap > .selected .placeholder {
1701
+ color: var(--bs-select-placeholder);
1873
1702
  text-overflow: ellipsis;
1874
- color: var(--gray-400);
1875
1703
  overflow: hidden;
1876
1704
  }
1877
1705
 
1878
1706
  .bs-select-wrap > .selected .dropdown-btn {
1707
+ font-family: var(--bs-icon-font-family);
1879
1708
  margin-right: calc(var(--spacing) * -1);
1880
1709
  margin-left: calc(var(--spacing) * 1);
1881
1710
  transition-property: transform, translate, scale, rotate;
@@ -1884,7 +1713,6 @@
1884
1713
  --tw-duration: .2s;
1885
1714
  -webkit-user-select: none;
1886
1715
  user-select: none;
1887
- font-family: var(--icon-font-family);
1888
1716
  transition-duration: .2s;
1889
1717
  }
1890
1718
 
@@ -1893,18 +1721,18 @@
1893
1721
  }
1894
1722
 
1895
1723
  .bs-select-wrap.modified > .selected {
1896
- border-color: var(--purple) !important;
1724
+ border-color: var(--bs-select-modified-border) !important;
1897
1725
  }
1898
1726
 
1899
1727
  .bs-select-wrap.error > .selected {
1900
- border-color: var(--danger) !important;
1901
- color: var(--danger) !important;
1728
+ border-color: var(--bs-select-error-border) !important;
1729
+ color: var(--bs-select-error-text) !important;
1902
1730
  }
1903
1731
 
1904
1732
  .bs-select-wrap.disabled > .selected {
1905
- border-color: var(--border) !important;
1906
- background-color: var(--gray-100) !important;
1907
- color: var(--gray-500) !important;
1733
+ border-color: var(--bs-select-disabled-border) !important;
1734
+ background-color: var(--bs-select-disabled-bg) !important;
1735
+ color: var(--bs-select-disabled-text) !important;
1908
1736
  }
1909
1737
 
1910
1738
  .bs-select-wrap.view-mode {
@@ -1912,11 +1740,11 @@
1912
1740
  }
1913
1741
 
1914
1742
  .bs-select-wrap .small-progress {
1743
+ font-size: var(--bs-font-size-sm);
1744
+ font-family: var(--bs-icon-font-family);
1745
+ color: var(--bs-select-placeholder);
1915
1746
  top: calc(var(--spacing) * 0);
1916
1747
  padding-inline: calc(var(--spacing) * .5);
1917
- font-size: .9em;
1918
- font-family: var(--icon-font-family);
1919
- color: var(--gray-400);
1920
1748
  animation: 1s linear infinite spin;
1921
1749
  position: absolute;
1922
1750
  left: 100%;
@@ -1924,28 +1752,17 @@
1924
1752
 
1925
1753
  .bs-field-error {
1926
1754
  margin-top: calc(var(--spacing) * 1);
1927
- color: var(--color-error);
1755
+ color: var(--bs-color-error);
1928
1756
  }
1929
1757
 
1930
1758
  .component-shadow-base {
1931
- box-shadow: 2px 2px 8px #0000001a;
1759
+ box-shadow: var(--bs-popup-shadow);
1932
1760
  }
1933
1761
 
1934
1762
  [data-theme="dark"] .component-shadow-base {
1935
1763
  box-shadow: 2px 2px 8px #ffffff1a;
1936
1764
  }
1937
1765
 
1938
- .font-icon {
1939
- max-width: 1em;
1940
- font-size: var(--text-base);
1941
- line-height: var(--tw-leading, var(--text-base--line-height));
1942
- font-family: var(--icon-font-family);
1943
- }
1944
-
1945
- .font-icon.filled {
1946
- font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48;
1947
- }
1948
-
1949
1766
  .fade-enter-active, .fade-leave-active {
1950
1767
  transition-property: opacity;
1951
1768
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1960,7 +1777,7 @@
1960
1777
 
1961
1778
  .text-description {
1962
1779
  margin-top: calc(var(--spacing) * .5);
1963
- color: var(--gray-400);
1780
+ color: var(--bs-gray-400);
1964
1781
  font-size: .923em;
1965
1782
  }
1966
1783
 
@@ -1968,8 +1785,8 @@
1968
1785
  z-index: 100;
1969
1786
  border-radius: var(--radius-sm);
1970
1787
  opacity: .7;
1971
- border: 1px solid var(--primary);
1972
- background-color: var(--primary-400);
1788
+ border: 1px solid var(--bs-primary);
1789
+ background-color: var(--bs-primary-400);
1973
1790
  position: absolute;
1974
1791
  }
1975
1792
 
@@ -2064,14 +1881,10 @@
2064
1881
  initial-value: solid;
2065
1882
  }
2066
1883
 
2067
- @property --tw-leading {
2068
- syntax: "*";
2069
- inherits: false
2070
- }
2071
-
2072
- @property --tw-font-weight {
1884
+ @property --tw-outline-style {
2073
1885
  syntax: "*";
2074
- inherits: false
1886
+ inherits: false;
1887
+ initial-value: solid;
2075
1888
  }
2076
1889
 
2077
1890
  @property --tw-blur {
@@ -2140,11 +1953,21 @@
2140
1953
  inherits: false
2141
1954
  }
2142
1955
 
1956
+ @property --tw-leading {
1957
+ syntax: "*";
1958
+ inherits: false
1959
+ }
1960
+
2143
1961
  @property --tw-duration {
2144
1962
  syntax: "*";
2145
1963
  inherits: false
2146
1964
  }
2147
1965
 
1966
+ @property --tw-font-weight {
1967
+ syntax: "*";
1968
+ inherits: false
1969
+ }
1970
+
2148
1971
  @property --tw-ease {
2149
1972
  syntax: "*";
2150
1973
  inherits: false
@@ -2167,360 +1990,234 @@
2167
1990
  inherits: false;
2168
1991
  initial-value: 0;
2169
1992
  }
2170
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2171
- @layer properties {
2172
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2173
- *, :before, :after, ::backdrop {
2174
- --tw-leading: initial;
2175
- --tw-font-weight: initial;
2176
- }
2177
- }
2178
- }
1993
+
2179
1994
  .bs-button {
2180
- cursor: pointer;
2181
- border-radius: var(--radius-sm, .25rem);
2182
- height: 26px;
2183
- padding-inline: calc(var(--spacing, .25rem) * 2);
2184
- padding-block: calc(var(--spacing, .25rem) * 1);
2185
- vertical-align: middle;
2186
- --tw-leading: 1;
2187
- --tw-font-weight: var(--font-weight-normal, 400);
2188
- line-height: 1;
2189
- font-weight: var(--font-weight-normal, 400);
2190
- white-space: nowrap;
2191
- color: var(--color-text);
1995
+ height: var(--bs-button-height);
1996
+ padding: var(--bs-button-padding-y) var(--bs-button-padding-x);
1997
+ border-radius: var(--bs-button-border-radius);
1998
+ font-size: var(--bs-button-font-size);
1999
+ color: var(--bs-color-text);
2192
2000
  border: none;
2193
- justify-content: center;
2194
- align-items: center;
2195
2001
  margin-right: 1px;
2196
- text-decoration-line: none;
2197
2002
  display: inline-flex;
2003
+ align-items: center;
2004
+ justify-content: center;
2005
+ line-height: 1;
2006
+ vertical-align: middle;
2007
+ white-space: nowrap;
2008
+ text-decoration-line: none;
2009
+ font-weight: 400;
2010
+ cursor: pointer;
2198
2011
  }
2199
- .bs-button.border-0 > .font-icon.left {
2200
- margin-right: 0;
2012
+ .bs-button.border-0 > .bs-icon.left { margin-right: 0;
2201
2013
  }
2202
- .bs-button.border-0 > .font-icon.right {
2203
- margin-left: 0;
2014
+ .bs-button.border-0 > .bs-icon.right { margin-left: 0;
2204
2015
  }
2205
- .bs-button.bg-transparent:not(:disabled):hover, .bs-button.bg-transparent:not(:disabled):active {
2206
- opacity: .8;
2016
+ .bs-button.bg-transparent:not(:disabled):hover,
2017
+ .bs-button.bg-transparent:not(:disabled):active { opacity: 0.8;
2207
2018
  }
2208
- .bs-button:disabled {
2209
- cursor: default;
2210
- opacity: .6;
2019
+ .bs-button:disabled { cursor: default; opacity: 0.6;
2211
2020
  }
2021
+
2022
+ /* Default */
2212
2023
  .bs-button.default {
2213
- background-color: var(--button-default-bg);
2214
- border: 1px solid var(--border);
2215
- color: var(--button-default-text);
2024
+ background-color: var(--bs-button-bg);
2025
+ border: 1px solid var(--bs-button-border);
2026
+ color: var(--bs-button-text);
2216
2027
  }
2217
- .bs-button.default:not(:disabled):hover {
2218
- background-color: var(--gray-100);
2028
+ .bs-button.default:not(:disabled):hover { background-color: var(--bs-gray-100);
2219
2029
  }
2220
- .bs-button.default:not(:disabled):active {
2221
- background-color: var(--gray-200);
2030
+ .bs-button.default:not(:disabled):active { background-color: var(--bs-gray-200);
2222
2031
  }
2032
+
2033
+ /* Blue */
2223
2034
  .bs-button.blue {
2224
- background-color: var(--blue);
2225
- border: 1px solid var(--blue);
2226
- color: var(--white);
2035
+ background-color: var(--bs-button-blue-bg);
2036
+ border: 1px solid var(--bs-button-blue-bg);
2037
+ color: var(--bs-button-blue-text);
2227
2038
  }
2228
- .bs-button.blue:not(:disabled):hover {
2229
- background-color: var(--blue);
2039
+ .bs-button.blue:not(:disabled):hover { background-color: color-mix(in srgb, var(--bs-button-blue-bg) 90%, black 10%);
2230
2040
  }
2231
- @supports (color: color-mix(in lab, red, red)) {
2232
- .bs-button.blue:not(:disabled):hover {
2233
- background-color: color-mix(in srgb, var(--blue) 90%, black 10%);
2041
+ .bs-button.blue:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-blue-bg) 80%, black 20%);
2234
2042
  }
2043
+
2044
+ /* Red */
2045
+ .bs-button.red { background-color: var(--bs-button-red-bg); color: var(--bs-button-red-text);
2235
2046
  }
2236
- .bs-button.blue:not(:disabled):active {
2237
- background-color: var(--blue);
2047
+ .bs-button.red:not(:disabled):hover { background-color: color-mix(in srgb, var(--bs-button-red-bg) 90%, black 10%);
2238
2048
  }
2239
- @supports (color: color-mix(in lab, red, red)) {
2240
- .bs-button.blue:not(:disabled):active {
2241
- background-color: color-mix(in srgb, var(--blue) 80%, black 20%);
2049
+ .bs-button.red:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-red-bg) 80%, black 20%);
2242
2050
  }
2051
+
2052
+ /* Orange */
2053
+ .bs-button.orange { background-color: var(--bs-button-orange-bg); color: var(--bs-button-orange-text);
2243
2054
  }
2244
- .bs-button.red {
2245
- background-color: var(--red);
2246
- color: var(--white);
2055
+ .bs-button.orange:not(:disabled):hover { background-color: color-mix(in srgb, var(--bs-button-orange-bg) 90%, black 10%);
2247
2056
  }
2248
- .bs-button.red:not(:disabled):hover {
2249
- background-color: var(--red);
2057
+ .bs-button.orange:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-orange-bg) 80%, black 20%);
2250
2058
  }
2251
- @supports (color: color-mix(in lab, red, red)) {
2252
- .bs-button.red:not(:disabled):hover {
2253
- background-color: color-mix(in srgb, var(--red) 90%, black 10%);
2059
+
2060
+ /* Green */
2061
+ .bs-button.green { background-color: var(--bs-button-green-bg); color: var(--bs-button-green-text);
2254
2062
  }
2063
+ .bs-button.green:not(:disabled):hover { background-color: color-mix(in srgb, var(--bs-button-green-bg) 90%, black 10%);
2255
2064
  }
2256
- .bs-button.red:not(:disabled):active {
2257
- background-color: var(--red);
2065
+ .bs-button.green:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-green-bg) 80%, black 20%);
2258
2066
  }
2259
- @supports (color: color-mix(in lab, red, red)) {
2260
- .bs-button.red:not(:disabled):active {
2261
- background-color: color-mix(in srgb, var(--red) 80%, black 20%);
2067
+
2068
+ /* Gray */
2069
+ .bs-button.gray { background-color: var(--bs-button-gray-bg); color: var(--bs-button-gray-text);
2262
2070
  }
2071
+ .bs-button.gray:not(:disabled):hover { background-color: color-mix(in srgb, var(--bs-button-gray-bg) 90%, black 10%);
2263
2072
  }
2264
- .bs-button.orange {
2265
- background-color: var(--orange);
2266
- color: var(--white);
2073
+ .bs-button.gray:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-gray-bg) 80%, black 20%);
2267
2074
  }
2268
- .bs-button.orange:not(:disabled):hover {
2269
- background-color: var(--orange);
2075
+
2076
+ /* Black */
2077
+ .bs-button.black { background-color: var(--bs-button-black-bg); color: var(--bs-button-black-text);
2270
2078
  }
2271
- @supports (color: color-mix(in lab, red, red)) {
2272
- .bs-button.orange:not(:disabled):hover {
2273
- background-color: color-mix(in srgb, var(--orange) 90%, black 10%);
2079
+ .bs-button.black:not(:disabled):hover { background-color: color-mix(in srgb, var(--bs-button-black-bg) 90%, black 10%);
2274
2080
  }
2081
+ .bs-button.black:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-black-bg) 80%, black 20%);
2275
2082
  }
2276
- .bs-button.orange:not(:disabled):active {
2277
- background-color: var(--orange);
2083
+
2084
+ /* Underline */
2085
+ .bs-button.underline {
2086
+ padding: 0 0.5rem;
2087
+ border-radius: 0;
2088
+ text-decoration-line: underline;
2089
+ text-underline-offset: 2px;
2090
+ background-color: var(--bs-button-bg);
2091
+ color: var(--bs-button-text);
2092
+ border: 0 none;
2278
2093
  }
2279
- @supports (color: color-mix(in lab, red, red)) {
2280
- .bs-button.orange:not(:disabled):active {
2281
- background-color: color-mix(in srgb, var(--orange) 80%, black 20%);
2094
+ .bs-button.underline.blue:not(:disabled):hover { background-color: color-mix(in srgb, var(--bs-button-blue-bg) 95%, black 5%);
2282
2095
  }
2096
+ .bs-button.underline.blue:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-blue-bg) 90%, black 10%);
2283
2097
  }
2284
- .bs-button.green {
2285
- background-color: var(--green);
2286
- color: var(--white);
2098
+ .bs-button.underline.red:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-red-bg) 90%, black 10%);
2287
2099
  }
2288
- .bs-button.green:not(:disabled):hover {
2289
- background-color: var(--green);
2100
+ .bs-button.underline.orange:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-orange-bg) 90%, black 10%);
2290
2101
  }
2291
- @supports (color: color-mix(in lab, red, red)) {
2292
- .bs-button.green:not(:disabled):hover {
2293
- background-color: color-mix(in srgb, var(--green) 90%, black 10%);
2102
+ .bs-button.underline.green:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-green-bg) 90%, black 10%);
2294
2103
  }
2104
+ .bs-button.underline.gray:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-gray-bg) 90%, black 10%);
2295
2105
  }
2296
- .bs-button.green:not(:disabled):active {
2297
- background-color: var(--green);
2106
+ .bs-button.border-0 { border: 0;
2298
2107
  }
2299
- @supports (color: color-mix(in lab, red, red)) {
2300
- .bs-button.green:not(:disabled):active {
2301
- background-color: color-mix(in srgb, var(--green) 80%, black 20%);
2108
+
2109
+ /* Dark theme */
2110
+ [data-theme="dark"] .bs-button.default:not(:disabled):hover { background-color: var(--bs-gray-800);
2302
2111
  }
2112
+ [data-theme="dark"] .bs-button.default:not(:disabled):active { background-color: var(--bs-gray-700);
2303
2113
  }
2304
- .bs-button.gray {
2305
- background-color: var(--gray);
2306
- color: var(--white);
2307
- }
2308
- .bs-button.gray:not(:disabled):hover {
2309
- background-color: var(--gray);
2310
- }
2311
- @supports (color: color-mix(in lab, red, red)) {
2312
- .bs-button.gray:not(:disabled):hover {
2313
- background-color: color-mix(in srgb, var(--gray) 90%, black 10%);
2314
- }
2315
- }
2316
- .bs-button.gray:not(:disabled):active {
2317
- background-color: var(--gray);
2318
- }
2319
- @supports (color: color-mix(in lab, red, red)) {
2320
- .bs-button.gray:not(:disabled):active {
2321
- background-color: color-mix(in srgb, var(--gray) 80%, black 20%);
2322
- }
2323
- }
2324
- .bs-button.black {
2325
- background-color: var(--black);
2326
- color: var(--white);
2327
- }
2328
- .bs-button.black:not(:disabled):hover {
2329
- background-color: var(--black);
2330
- }
2331
- @supports (color: color-mix(in lab, red, red)) {
2332
- .bs-button.black:not(:disabled):hover {
2333
- background-color: color-mix(in srgb, var(--black) 90%, black 10%);
2334
- }
2335
- }
2336
- .bs-button.black:not(:disabled):active {
2337
- background-color: var(--black);
2338
- }
2339
- @supports (color: color-mix(in lab, red, red)) {
2340
- .bs-button.black:not(:disabled):active {
2341
- background-color: color-mix(in srgb, var(--black) 80%, black 20%);
2342
- }
2343
- }
2344
- .bs-button.underline {
2345
- padding-inline: calc(var(--spacing, .25rem) * 2);
2346
- padding-block: calc(var(--spacing, .25rem) * 0);
2347
- text-underline-offset: 2px;
2348
- background-color: var(--button-default-bg);
2349
- color: var(--button-default-text);
2350
- border: 0;
2351
- border-radius: 0;
2352
- text-decoration-line: underline;
2353
- }
2354
- .bs-button.underline.blue:not(:disabled):hover {
2355
- background-color: var(--blue);
2356
- }
2357
- @supports (color: color-mix(in lab, red, red)) {
2358
- .bs-button.underline.blue:not(:disabled):hover {
2359
- background-color: color-mix(in srgb, var(--blue) 95%, black 5%);
2360
- }
2361
- }
2362
- .bs-button.underline.blue:not(:disabled):active {
2363
- background-color: var(--blue);
2364
- }
2365
- @supports (color: color-mix(in lab, red, red)) {
2366
- .bs-button.underline.blue:not(:disabled):active {
2367
- background-color: color-mix(in srgb, var(--blue) 90%, black 10%);
2368
- }
2369
- }
2370
- .bs-button.underline.red:not(:disabled):active {
2371
- background-color: var(--red);
2372
- }
2373
- @supports (color: color-mix(in lab, red, red)) {
2374
- .bs-button.underline.red:not(:disabled):active {
2375
- background-color: color-mix(in srgb, var(--red) 90%, black 10%);
2376
- }
2377
- }
2378
- .bs-button.underline.orange:not(:disabled):active {
2379
- background-color: var(--orange);
2380
- }
2381
- @supports (color: color-mix(in lab, red, red)) {
2382
- .bs-button.underline.orange:not(:disabled):active {
2383
- background-color: color-mix(in srgb, var(--orange) 90%, black 10%);
2384
- }
2385
- }
2386
- .bs-button.underline.green:not(:disabled):active {
2387
- background-color: var(--green);
2388
- }
2389
- @supports (color: color-mix(in lab, red, red)) {
2390
- .bs-button.underline.green:not(:disabled):active {
2391
- background-color: color-mix(in srgb, var(--green) 90%, black 10%);
2392
- }
2393
- }
2394
- .bs-button.underline.gray:not(:disabled):active {
2395
- background-color: var(--gray);
2396
- }
2397
- @supports (color: color-mix(in lab, red, red)) {
2398
- .bs-button.underline.gray:not(:disabled):active {
2399
- background-color: color-mix(in srgb, var(--gray) 90%, black 10%);
2400
- }
2401
- }
2402
- [data-theme="dark"] .bs-button.default:not(:disabled):hover {
2403
- background-color: var(--gray-800);
2404
- }
2405
- [data-theme="dark"] .bs-button.default:not(:disabled):active {
2406
- background-color: var(--gray-700);
2407
- }
2408
- @property --tw-leading {
2409
- syntax: "*";
2410
- inherits: false
2411
- }
2412
- @property --tw-font-weight {
2413
- syntax: "*";
2414
- inherits: false
2415
- }
2416
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2417
- @layer properties {
2418
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2419
- *, :before, :after, ::backdrop {
2420
- --tw-leading: initial;
2114
+
2115
+ .bs-icon {
2116
+ display: inline-flex;
2117
+ align-items: center;
2118
+ justify-content: center;
2119
+ width: 1em;
2120
+ height: 1em;
2421
2121
  }
2122
+ .bs-icon > svg {
2123
+ width: 100%;
2124
+ height: 100%;
2125
+ fill: currentColor;
2422
2126
  }
2127
+ .bs-icon.spin {
2128
+ animation: spin 1s linear infinite;
2423
2129
  }
2130
+
2424
2131
  .page-navigation {
2425
- justify-content: center;
2132
+ padding: 0.5rem;
2133
+ display: flex;
2134
+ gap: 0.125rem;
2426
2135
  align-items: center;
2427
- gap: calc(var(--spacing, .25rem) * .5);
2428
- padding: calc(var(--spacing, .25rem) * 2);
2429
- --tw-leading: 1;
2430
- color: var(--body-text);
2136
+ justify-content: center;
2431
2137
  line-height: 1;
2432
- display: flex;
2138
+ color: var(--bs-page-nav-button-text);
2433
2139
  }
2434
2140
  .page-navigation > span {
2435
- cursor: pointer;
2436
- padding-inline: calc(var(--spacing, .25rem) * 1.5);
2437
- padding-block: calc(var(--spacing, .25rem) * 1);
2438
- -webkit-user-select: none;
2439
- user-select: none;
2440
- justify-content: center;
2441
- align-items: center;
2442
2141
  display: inline-flex;
2142
+ align-items: center;
2143
+ justify-content: center;
2144
+ user-select: none;
2145
+ cursor: pointer;
2146
+ width: var(--bs-page-nav-button-size);
2147
+ height: var(--bs-page-nav-button-size);
2148
+ background-color: var(--bs-page-nav-button-bg);
2149
+ border-radius: var(--bs-page-nav-button-border-radius);
2443
2150
  }
2444
2151
  .page-navigation > span:hover {
2445
- filter: opacity(75%);
2152
+ background-color: var(--bs-page-nav-button-hover-bg);
2446
2153
  }
2447
2154
  .page-navigation > span:active {
2448
2155
  filter: opacity(50%);
2449
2156
  }
2450
2157
  .page-navigation > span.on {
2451
- border-radius: var(--radius-sm, .25rem);
2452
- background-color: var(--primary-300);
2158
+ background-color: var(--bs-page-nav-button-active-bg);
2159
+ color: var(--bs-page-nav-button-active-text);
2453
2160
  }
2454
- .page-navigation > span:not(.page) {
2455
- padding: calc(var(--spacing, .25rem) * .5);
2161
+ .page-navigation > span.nav-icon {
2456
2162
  font-size: 1.4em;
2457
2163
  }
2458
2164
  .page-navigation > span.disabled {
2459
2165
  cursor: default;
2460
- color: var(--gray-400);
2166
+ color: var(--bs-gray-400);
2461
2167
  filter: opacity(40%);
2462
2168
  }
2463
2169
  .page-navigation > span:not(.disabled):hover {
2464
- border-radius: var(--radius-sm, .25rem);
2170
+ border-radius: var(--bs-page-nav-button-border-radius);
2465
2171
  }
2466
- @property --tw-leading {
2467
- syntax: "*";
2468
- inherits: false
2469
- }
2470
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2172
+
2471
2173
  .bs-loading-icon {
2472
- justify-content: center;
2473
- align-items: center;
2474
2174
  display: flex;
2175
+ align-items: center;
2176
+ justify-content: center;
2177
+ color: var(--bs-loading-color);
2178
+ font-size: var(--bs-loading-size);
2475
2179
  }
2476
- .bs-loading-icon > .font-icon {
2477
- animation: 1s linear infinite spin;
2478
- }
2479
- @keyframes spin {
2480
- to {
2481
- transform: rotate(360deg);
2482
- }
2483
- }
2484
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2180
+
2485
2181
  .bs-popup {
2486
- min-height: calc(var(--spacing, .25rem) * 6);
2487
- min-width: calc(var(--spacing, .25rem) * 12);
2488
- border: 1px solid var(--border);
2489
- background-color: var(--body-bg);
2490
- color: var(--body-text);
2491
- z-index: 300;
2492
- border-radius: .25rem;
2493
2182
  position: fixed;
2494
- box-shadow: 2px 2px 8px #0000001a;
2183
+ min-width: 3rem;
2184
+ min-height: 1.5rem;
2185
+ border: 1px solid var(--bs-popup-border);
2186
+ border-radius: var(--bs-popup-border-radius);
2187
+ background-color: var(--bs-popup-bg);
2188
+ color: var(--bs-body-text);
2189
+ z-index: 300;
2190
+ box-shadow: var(--bs-popup-shadow);
2495
2191
  }
2496
2192
  [data-theme="dark"] .bs-popup {
2497
- box-shadow: 2px 2px 8px #ffffff1a;
2193
+ box-shadow: 2px 2px 8px rgba(255, 255, 255, 0.1);
2498
2194
  }
2499
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2195
+
2500
2196
  .bs-tooltip {
2501
- max-width: calc(var(--spacing, .25rem) * 60);
2502
- padding: calc(var(--spacing, .25rem) * 2);
2503
- z-index: 10000;
2504
- border: 1px solid var(--primary);
2505
- background-color: var(--body-bg);
2506
- color: var(--body-text);
2507
- border-radius: .25rem;
2508
2197
  position: fixed;
2509
- box-shadow: 0 1px 3px #0003, 0 1px 2px -1px #0003;
2198
+ max-width: 15rem;
2199
+ z-index: 10000;
2200
+ padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
2201
+ border-radius: var(--bs-tooltip-border-radius);
2202
+ border: 1px solid var(--bs-primary);
2203
+ background-color: var(--bs-tooltip-bg);
2204
+ color: var(--bs-tooltip-text);
2205
+ font-size: var(--bs-tooltip-font-size);
2206
+ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
2510
2207
  }
2511
2208
  .bs-tooltip:before {
2512
- height: calc(var(--spacing, .25rem) * 3);
2513
- width: calc(var(--spacing, .25rem) * 3);
2514
- border-radius: var(--radius-sm, .25rem);
2515
- content: " ";
2516
- border: 1px solid var(--primary);
2517
- background-color: var(--body-bg);
2518
- clip-path: polygon(0% 10%, 0% 100%, 90% 100%);
2519
- z-index: -1;
2520
2209
  position: absolute;
2521
- top: -6px;
2210
+ width: 0.75rem;
2211
+ height: 0.75rem;
2212
+ border-radius: 0.125rem;
2213
+ content: " ";
2522
2214
  left: calc(50% - 6px);
2215
+ top: -6px;
2216
+ border: 1px solid var(--bs-primary);
2217
+ background-color: var(--bs-tooltip-bg);
2523
2218
  transform: rotate(135deg);
2219
+ clip-path: polygon(0% 10%, 0% 100%, 90% 100%);
2220
+ z-index: -1;
2524
2221
  }
2525
2222
  .bs-tooltip.center {
2526
2223
  transform: translateX(-50%);
@@ -2528,238 +2225,111 @@ to {
2528
2225
  .bs-tooltip > div {
2529
2226
  overflow: auto;
2530
2227
  }
2531
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2532
- @layer properties {
2533
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2534
- *, :before, :after, ::backdrop {
2535
- --tw-leading: initial;
2536
- --tw-outline-style: solid;
2537
- }
2538
- }
2539
- }
2228
+
2540
2229
  .bs-select-popup {
2230
+ min-width: 7.5rem;
2541
2231
  max-height: 300px;
2542
- min-width: calc(var(--spacing, .25rem) * 30);
2543
- --tw-leading: 1;
2544
- line-height: 1;
2545
2232
  overflow: hidden;
2233
+ line-height: 1;
2546
2234
  }
2547
- .bs-select-popup > .popup-search {
2548
- padding: calc(var(--spacing, .25rem) * 1);
2235
+ .bs-select-popup > .popup-search { padding: 0.25rem;
2549
2236
  }
2550
2237
  .bs-select-popup > .popup-search > input {
2551
- border-radius: var(--radius-sm, .25rem);
2238
+ border-radius: 0.125rem;
2239
+ padding: 0.125rem 0.25rem;
2552
2240
  width: 100%;
2553
- padding-inline: calc(var(--spacing, .25rem) * 1);
2554
- padding-block: calc(var(--spacing, .25rem) * .5);
2555
- outline-style: var(--tw-outline-style);
2556
- border: 1px solid var(--border);
2557
- background-color: var(--body-bg);
2558
- color: var(--body-text);
2559
- outline-width: 0;
2560
- }
2561
- .bs-select-popup > .popup-search > input:focus {
2562
- border-color: var(--color-focus);
2563
- }
2564
- .bs-select-popup > .popup-items {
2565
- flex-grow: 1;
2566
- height: 100%;
2567
- overflow: auto;
2241
+ outline: 0;
2242
+ border: 1px solid var(--bs-border);
2243
+ background-color: var(--bs-body-bg);
2244
+ color: var(--bs-body-text);
2568
2245
  }
2569
- .bs-select-popup > .popup-items > .popup-item {
2570
- height: calc(var(--spacing, .25rem) * 7);
2571
- cursor: pointer;
2572
- padding-inline: calc(var(--spacing, .25rem) * 4);
2573
- padding-block: calc(var(--spacing, .25rem) * 1.5);
2574
- align-items: center;
2575
- display: flex;
2576
- }
2577
- .bs-select-popup > .popup-items > .popup-item .checkbox {
2578
- margin-left: calc(var(--spacing, .25rem) * -2.5);
2579
- width: calc(var(--spacing, .25rem) * 5);
2580
- display: inline-flex;
2581
- }
2582
- .bs-select-popup > .popup-items > .popup-item .checkbox:before {
2583
- content: "";
2584
- margin-right: calc(var(--spacing, .25rem) * .5);
2585
- font-size: var(--text-base, 1rem);
2586
- line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
2587
- font-family: var(--icon-font-family);
2588
- color: var(--color-text);
2246
+ .bs-select-popup > .popup-search > input:focus { border-color: var(--bs-color-focus);
2589
2247
  }
2590
- .bs-select-popup > .popup-items > .popup-item .label {
2591
- cursor: pointer;
2592
- white-space: nowrap;
2593
- flex-grow: 1;
2248
+ .bs-select-popup > .popup-items { flex-grow: 1; height: 100%; overflow: auto;
2594
2249
  }
2595
- .bs-select-popup > .popup-items > .popup-item .label.null-label {
2596
- color: var(--color-text-light);
2250
+ .bs-select-popup > .popup-items > .popup-item { padding: 0.375rem 1rem; height: 1.75rem; cursor: pointer; display: flex; align-items: center;
2597
2251
  }
2598
- .bs-select-popup > .popup-items > .popup-item.hovered {
2599
- background-color: var(--color-hover);
2252
+ .bs-select-popup > .popup-items > .popup-item .checkbox { display: inline-flex; width: 1.25rem; margin-left: -0.625rem;
2600
2253
  }
2601
- .bs-select-popup > .popup-items > .popup-item.selected-item {
2602
- color: var(--primary);
2603
- font-weight: bold;
2254
+ .bs-select-popup > .popup-items > .popup-item .label { flex-grow: 1; white-space: nowrap; cursor: pointer;
2604
2255
  }
2605
- .bs-select-popup > .popup-items > .popup-item.selected-item .checkbox:before {
2606
- content: "check";
2607
- color: var(--primary);
2256
+ .bs-select-popup > .popup-items > .popup-item .label.null-label { color: var(--bs-color-text-light);
2608
2257
  }
2609
- [data-theme="dark"] .bs-select-popup > .popup-items > .popup-item.selected-item, [data-theme="dark"] .bs-select-popup > .popup-items > .popup-item.selected-item .checkbox:before {
2610
- color: var(--primary-400);
2258
+ .bs-select-popup > .popup-items > .popup-item.hovered { background-color: var(--bs-color-hover);
2611
2259
  }
2612
- @property --tw-leading {
2613
- syntax: "*";
2614
- inherits: false
2260
+ .bs-select-popup > .popup-items > .popup-item.selected-item { color: var(--bs-primary); font-weight: bold;
2615
2261
  }
2616
- @property --tw-outline-style {
2617
- syntax: "*";
2618
- inherits: false;
2619
- initial-value: solid;
2262
+ [data-theme="dark"] .bs-select-popup > .popup-items > .popup-item.selected-item { color: var(--bs-primary-400);
2620
2263
  }
2621
2264
 
2622
2265
  /* Styles defined in components.css */
2623
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2624
- @layer properties {
2625
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2626
- *, :before, :after, ::backdrop {
2627
- --tw-font-weight: initial;
2628
- }
2629
- }
2630
- }
2631
- .bs-calendar {
2632
- flex-direction: column;
2633
- align-items: center;
2634
- display: inline-flex;
2266
+
2267
+ .bs-calendar { display: inline-flex; flex-direction: column; align-items: center;
2635
2268
  }
2636
- .bs-calendar .bs-calendar-head {
2637
- justify-content: space-between;
2638
- align-items: center;
2639
- gap: calc(var(--spacing, .25rem) * 2);
2640
- flex-direction: row;
2641
- display: flex;
2269
+ .bs-calendar .bs-calendar-head { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 0.5rem;
2642
2270
  }
2643
- .bs-calendar .year-month {
2644
- gap: calc(var(--spacing, .25rem) * 1);
2645
- padding-block: calc(var(--spacing, .25rem) * 2);
2646
- padding-right: calc(var(--spacing, .25rem) * 2);
2647
- padding-left: calc(var(--spacing, .25rem) * 0);
2648
- display: flex;
2271
+ .bs-calendar .year-month { padding: 0.5rem 0.5rem 0.5rem 0; display: flex; gap: 0.25rem;
2649
2272
  }
2650
- .bs-calendar .year-month .bs-button {
2651
- border: 0;
2652
- padding: 0;
2273
+ .bs-calendar .year-month .bs-button { border: 0; padding: 0;
2653
2274
  }
2654
- .bs-calendar table {
2655
- font-size: var(--text-xs, .75rem);
2656
- line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));
2657
- display: inline-table;
2275
+ .bs-calendar table { font-size: 0.75rem; line-height: 1rem; display: inline-table;
2658
2276
  }
2659
- .bs-calendar table tr th, .bs-calendar table tr td {
2660
- height: 34px;
2661
- padding-top: calc(var(--spacing, .25rem) * 1);
2662
- text-align: center;
2663
- vertical-align: middle;
2277
+ .bs-calendar table tr th,
2278
+ .bs-calendar table tr td { height: 34px; text-align: center; vertical-align: middle; padding-top: 0.25rem;
2664
2279
  }
2665
- .bs-calendar table tr th {
2666
- --tw-font-weight: var(--font-weight-medium, 500);
2667
- font-weight: var(--font-weight-medium, 500);
2280
+ .bs-calendar table tr th { font-weight: 500;
2668
2281
  }
2669
- .bs-calendar table tr td {
2670
- cursor: pointer;
2671
- text-align: center;
2672
- -webkit-user-select: none;
2673
- user-select: none;
2282
+ .bs-calendar table tr td { cursor: pointer; user-select: none; text-align: center;
2674
2283
  }
2675
- .bs-calendar table tr td > div {
2676
- aspect-ratio: 1;
2677
- justify-content: center;
2678
- align-items: center;
2679
- min-width: 34px;
2680
- height: 34px;
2681
- display: inline-flex;
2284
+ .bs-calendar table tr td > div { min-width: 34px; height: 34px; display: inline-flex; justify-content: center; align-items: center; aspect-ratio: 1;
2682
2285
  }
2683
- .bs-calendar table tr td.today > div {
2684
- background-color: var(--gray-200);
2685
- border-radius: 50%;
2286
+ .bs-calendar table tr td.today > div { background-color: var(--bs-calendar-today-bg); border-radius: 50%;
2686
2287
  }
2687
- .bs-calendar table tr td.other-month > div {
2688
- opacity: .5;
2288
+ .bs-calendar table tr td.other-month > div { opacity: var(--bs-calendar-other-month-opacity);
2689
2289
  }
2690
- .bs-calendar table tr td.dow-0 > div {
2691
- color: var(--red);
2290
+ .bs-calendar table tr td.dow-0 > div { color: var(--bs-calendar-sunday-text);
2692
2291
  }
2693
- .bs-calendar table tr td.dow-6 > div {
2694
- color: var(--blue);
2292
+ .bs-calendar table tr td.dow-6 > div { color: var(--bs-calendar-saturday-text);
2695
2293
  }
2696
- .bs-calendar table tr td.selected > div {
2697
- background-color: var(--blue);
2698
- color: var(--white);
2699
- border-radius: 50%;
2294
+ .bs-calendar table tr td.selected > div { background-color: var(--bs-calendar-selected-bg); color: var(--bs-calendar-selected-text); border-radius: 50%;
2700
2295
  }
2701
- .bs-calendar table tr td.range-selected > div {
2702
- background-color: var(--blue);
2703
- color: var(--white);
2704
- border-radius: 0;
2296
+ .bs-calendar table tr td.range-selected > div { background-color: var(--bs-calendar-selected-bg); color: var(--bs-calendar-selected-text); border-radius: 0;
2705
2297
  }
2706
- .bs-calendar table tr td:first-child.range-selected > div, .bs-calendar table tr td.range-selected-start > div {
2707
- border-radius: 50% 0 0 50%;
2298
+ .bs-calendar table tr td:first-child.range-selected > div,
2299
+ .bs-calendar table tr td.range-selected-start > div { border-radius: 50% 0 0 50%;
2708
2300
  }
2709
- .bs-calendar table tr td:last-child.range-selected > div, .bs-calendar table tr td.range-selected-end > div {
2710
- border-radius: 0 50% 50% 0;
2301
+ .bs-calendar table tr td:last-child.range-selected > div,
2302
+ .bs-calendar table tr td.range-selected-end > div { border-radius: 0 50% 50% 0;
2711
2303
  }
2712
- .bs-calendar table tr td.range-selected-start.range-selected-end > div, .bs-calendar table tr td:first-child.range-selected-end > div, .bs-calendar table tr td:last-child.range-selected-start > div {
2713
- border-radius: 50%;
2304
+ .bs-calendar table tr td.range-selected-start.range-selected-end > div,
2305
+ .bs-calendar table tr td:first-child.range-selected-end > div,
2306
+ .bs-calendar table tr td:last-child.range-selected-start > div { border-radius: 50%;
2714
2307
  }
2715
- .bs-calendar table tr.weekdays {
2716
- border-bottom: 1px solid var(--gray-200);
2308
+ .bs-calendar table tr.weekdays { border-bottom: 1px solid var(--bs-calendar-weekdays-border);
2717
2309
  }
2718
- .bs-calendar table.disabled {
2719
- background-color: var(--gray-200);
2720
- opacity: .7;
2721
- border-radius: 4px;
2310
+ .bs-calendar table.disabled { background-color: var(--bs-calendar-disabled-bg); border-radius: 4px; opacity: 0.7;
2722
2311
  }
2723
- .bs-calendar table.disabled tr > td {
2724
- cursor: default;
2312
+ .bs-calendar table.disabled tr > td { cursor: default;
2725
2313
  }
2726
- .bs-calendar .bs-calendar-time {
2727
- margin-top: calc(var(--spacing, .25rem) * 2);
2728
- padding: calc(var(--spacing, .25rem) * 2);
2729
- flex-direction: row;
2730
- justify-content: center;
2731
- align-self: stretch;
2732
- align-items: center;
2733
- display: flex;
2734
- }
2735
- .bs-calendar .bs-calendar-time .select-wrap {
2736
- width: 100%;
2737
- padding: calc(var(--spacing, .25rem) * 2);
2738
- background-color: var(--gray-100);
2739
- justify-content: center;
2740
- align-items: center;
2741
- display: flex;
2314
+ .bs-calendar .bs-calendar-time { margin-top: 0.5rem; align-self: stretch; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0.5rem;
2742
2315
  }
2743
- .bs-calendar .bs-calendar-time .select-wrap > span {
2744
- padding-inline: calc(var(--spacing, .25rem) * 1);
2316
+ .bs-calendar .bs-calendar-time .select-wrap { width: 100%; display: flex; justify-content: center; align-items: center; padding: 0.5rem; background-color: var(--bs-calendar-time-bg);
2745
2317
  }
2746
- @property --tw-font-weight {
2747
- syntax: "*";
2748
- inherits: false
2318
+ .bs-calendar .bs-calendar-time .select-wrap > span { padding: 0 0.25rem;
2749
2319
  }
2750
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2320
+
2751
2321
  .bs-calendar-range .tilde {
2752
- padding: calc(var(--spacing, .25rem) * 2);
2753
2322
  font-size: 1.2rem;
2323
+ padding: 0.5rem;
2754
2324
  }
2755
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2325
+
2756
2326
  .bs-text-input.value-right input {
2757
2327
  text-align: right;
2758
2328
  }
2759
2329
  .bs-text-input.value-center input {
2760
2330
  text-align: center;
2761
2331
  }
2762
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2332
+
2763
2333
  .bs-number-input.value-right input {
2764
2334
  text-align: right;
2765
2335
  }
@@ -2778,160 +2348,131 @@ to {
2778
2348
  /* Styles defined in components.css */
2779
2349
 
2780
2350
  /* Styles defined in components.css */
2781
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2351
+
2782
2352
  .bs-date-input-popup {
2783
- padding-inline: calc(var(--spacing, .25rem) * 4);
2784
- padding-block: calc(var(--spacing, .25rem) * 2);
2353
+ padding: 0.5rem 1rem;
2785
2354
  }
2786
2355
  .bs-date-input-popup .buttons {
2787
- margin-top: calc(var(--spacing, .25rem) * 2);
2356
+ display: flex;
2357
+ gap: 0.25rem;
2788
2358
  justify-content: center;
2789
2359
  align-items: center;
2790
- gap: calc(var(--spacing, .25rem) * 1);
2791
- display: flex;
2360
+ margin-top: 0.5rem;
2792
2361
  }
2793
2362
  .bs-date-input-popup .buttons .bs-button {
2794
- min-width: calc(var(--spacing, .25rem) * 20);
2363
+ min-width: 5rem;
2795
2364
  }
2796
2365
 
2797
2366
  /* Styles defined in components.css */
2798
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2367
+
2799
2368
  .bs-date-range-popup {
2800
- padding-inline: calc(var(--spacing, .25rem) * 4);
2801
- padding-block: calc(var(--spacing, .25rem) * 2);
2802
2369
  display: flex;
2370
+ padding: 0.5rem 1rem;
2803
2371
  }
2804
2372
  .bs-date-range-popup .buttons {
2805
- margin-top: calc(var(--spacing, .25rem) * 2);
2373
+ display: flex;
2374
+ gap: 0.25rem;
2806
2375
  justify-content: center;
2807
2376
  align-items: center;
2808
- gap: calc(var(--spacing, .25rem) * 1);
2809
- display: flex;
2377
+ margin-top: 0.5rem;
2810
2378
  }
2811
2379
  .bs-date-range-popup .buttons .bs-button {
2812
- min-width: calc(var(--spacing, .25rem) * 20);
2380
+ min-width: 5rem;
2813
2381
  }
2814
2382
 
2815
2383
  /* Styles defined in components.css */
2816
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2817
- @layer properties {
2818
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2819
- *, :before, :after, ::backdrop {
2820
- --tw-duration: initial;
2821
- }
2822
- }
2823
- }
2384
+
2824
2385
  .bs-card-layout {
2825
- border: 1px solid var(--border);
2826
2386
  width: 100%;
2827
- box-shadow: 4px 4px 4px var(--gray-100);
2828
- border-radius: .25rem;
2387
+ border: 1px solid var(--bs-card-border);
2388
+ border-radius: var(--bs-card-border-radius);
2389
+ background-color: var(--bs-card-bg);
2390
+ box-shadow: 4px 4px 4px var(--bs-gray-100);
2829
2391
  }
2830
2392
  .bs-card-layout > .card-layout-header {
2831
- height: calc(var(--spacing, .25rem) * 11);
2832
- padding-inline: calc(var(--spacing, .25rem) * 2);
2833
- background-color: var(--body-bg);
2834
- border-radius: .25rem;
2393
+ height: 2.75rem;
2394
+ border-radius: 0.25rem;
2395
+ padding: var(--bs-card-header-padding-y) var(--bs-card-header-padding-x);
2396
+ background-color: var(--bs-card-header-bg);
2397
+ color: var(--bs-card-header-text);
2835
2398
  }
2836
2399
  .bs-card-layout.expanded > .card-layout-header {
2837
- border-bottom: 1px solid var(--border-light);
2838
- border-bottom-right-radius: 0;
2400
+ border-bottom: 1px solid var(--bs-border-light);
2839
2401
  border-bottom-left-radius: 0;
2402
+ border-bottom-right-radius: 0;
2840
2403
  }
2841
- .bs-card-layout .card-layout-title {
2842
- margin-left: calc(var(--spacing, .25rem) * 1.5);
2843
- font-size: var(--text-base, 1rem);
2844
- line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
2404
+ .bs-card-layout .card-layout-title { font-size: 1rem; line-height: 1.5rem; margin-left: 0.375rem;
2845
2405
  }
2846
2406
  .bs-card-layout .expand-btn {
2847
- transition-property: transform, translate, scale, rotate;
2848
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
2849
- transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
2850
- --tw-duration: .2s;
2851
- font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48;
2852
- color: var(--gray-500);
2853
- font-size: 1.4rem;
2854
- transition-duration: .2s;
2855
2407
  display: inline-block;
2408
+ font-size: 1.4rem;
2409
+ transition: transform 200ms;
2856
2410
  transform: rotate(0);
2411
+ color: var(--bs-gray-500);
2857
2412
  }
2858
- .bs-card-layout.expanded .expand-btn {
2859
- transform: rotate(90deg);
2413
+ .bs-card-layout.expanded .expand-btn { transform: rotate(90deg);
2860
2414
  }
2861
2415
  .bs-card-layout .title-icon {
2862
- color: var(--gray-700);
2863
- font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48;
2864
2416
  font-size: 1.4rem;
2417
+ color: var(--bs-gray-700);
2865
2418
  }
2866
2419
  .bs-card-layout .title-icon-box {
2867
- margin-inline: calc(var(--spacing, .25rem) * 1.5);
2868
- margin-left: calc(var(--spacing, .25rem) * 1);
2869
- height: calc(var(--spacing, .25rem) * 4);
2870
- width: calc(var(--spacing, .25rem) * 4);
2871
- border-radius: var(--radius-sm, .25rem);
2872
- background-color: var(--gray-700);
2873
- }
2874
- .bs-card-layout.blue > .card-layout-header {
2875
- background-color: var(--blue-bg);
2420
+ width: 1rem;
2421
+ height: 1rem;
2422
+ border-radius: 0.125rem;
2423
+ margin: 0 0.375rem 0 0.25rem;
2424
+ background-color: var(--bs-gray-700);
2876
2425
  }
2877
- .bs-card-layout.red > .card-layout-header {
2878
- background-color: var(--red-bg);
2426
+ .bs-card-layout.blue > .card-layout-header { background-color: var(--bs-blue-bg);
2879
2427
  }
2880
- .bs-card-layout.orange > .card-layout-header {
2881
- background-color: var(--orange-bg);
2428
+ .bs-card-layout.red > .card-layout-header { background-color: var(--bs-red-bg);
2882
2429
  }
2883
- .bs-card-layout.green > .card-layout-header {
2884
- background-color: var(--green-bg);
2430
+ .bs-card-layout.orange > .card-layout-header { background-color: var(--bs-orange-bg);
2885
2431
  }
2886
- .bs-card-layout.gray > .card-layout-header {
2887
- background-color: var(--gray-bg);
2432
+ .bs-card-layout.green > .card-layout-header { background-color: var(--bs-green-bg);
2888
2433
  }
2889
- @property --tw-duration {
2890
- syntax: "*";
2891
- inherits: false
2434
+ .bs-card-layout.gray > .card-layout-header { background-color: var(--bs-gray-bg);
2892
2435
  }
2893
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2436
+
2894
2437
  .modal-wrapper {
2895
- inset: calc(var(--spacing, .25rem) * 0);
2896
- z-index: 201;
2897
2438
  position: fixed;
2439
+ inset: 0;
2440
+ z-index: 201;
2898
2441
  }
2899
2442
  .modal-wrapper > .modal-panel {
2443
+ padding: 1.5rem;
2444
+ outline: none;
2900
2445
  cursor: move;
2901
- padding: calc(var(--spacing, .25rem) * 6);
2902
- --tw-outline-style: none;
2903
- background-color: var(--body-bg);
2904
- color: var(--body-text);
2905
- border: 1px solid var(--border);
2906
- border-radius: .25rem;
2907
- outline-style: none;
2908
2446
  position: relative;
2909
- box-shadow: 0 4px 8px #0003;
2447
+ background-color: var(--bs-modal-bg);
2448
+ color: var(--bs-modal-text);
2449
+ border: 1px solid var(--bs-border);
2450
+ border-radius: var(--bs-modal-border-radius);
2451
+ box-shadow: var(--bs-modal-shadow);
2910
2452
  }
2911
2453
  .modal-wrapper > .modal-panel.maximized {
2912
- margin: calc(var(--spacing, .25rem) * 2);
2913
2454
  cursor: default;
2455
+ margin: 0.5rem;
2914
2456
  width: calc(100% - 16px) !important;
2915
2457
  height: calc(100% - 16px) !important;
2916
2458
  }
2917
2459
  [data-theme="dark"] .modal-wrapper > .modal-panel {
2918
- box-shadow: 0 4px 8px #ffffff1a;
2460
+ box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
2919
2461
  }
2920
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2462
+
2921
2463
  .bs-modal-container .modal-curtain {
2922
- inset: calc(var(--spacing, .25rem) * 0);
2923
- z-index: 200;
2924
- background-color: var(--color-black, #000);
2925
- opacity: .3;
2926
2464
  position: fixed;
2465
+ inset: 0;
2466
+ z-index: 200;
2467
+ background-color: var(--bs-modal-overlay-bg);
2927
2468
  }
2928
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2469
+
2929
2470
  .bs-modal-frame {
2930
2471
  cursor: default;
2931
2472
  height: 100%;
2932
2473
  }
2933
2474
  .bs-modal-frame > .title-bar {
2934
- padding-bottom: calc(var(--spacing, .25rem) * 6);
2475
+ padding-bottom: 1.5rem;
2935
2476
  }
2936
2477
  .bs-modal-frame > .title-bar .title {
2937
2478
  font-size: 1.3846em;
@@ -2940,154 +2481,118 @@ to {
2940
2481
  text-align: right;
2941
2482
  }
2942
2483
  .bs-modal-frame > .title-bar .close-btn {
2943
- padding: calc(var(--spacing, .25rem) * 1);
2484
+ padding: 0.25rem;
2944
2485
  }
2945
- .bs-modal-frame > .title-bar .close-btn .font-icon {
2486
+ .bs-modal-frame > .title-bar .close-btn .bs-icon {
2946
2487
  font-size: 1.6em;
2947
2488
  }
2948
2489
  .bs-modal-frame > .buttons {
2949
- padding-top: calc(var(--spacing, .25rem) * 6);
2950
- }
2951
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2952
- @layer properties {
2953
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2954
- *, :before, :after, ::backdrop {
2955
- --tw-translate-x: 0;
2956
- --tw-translate-y: 0;
2957
- --tw-translate-z: 0;
2958
- --tw-leading: initial;
2959
- }
2960
- }
2490
+ padding-top: 1.5rem;
2961
2491
  }
2492
+
2962
2493
  .bs-notification-container > .top-notification {
2963
- z-index: 250;
2964
- --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
2965
- translate: var(--tw-translate-x) var(--tw-translate-y);
2966
2494
  position: fixed;
2495
+ z-index: 250;
2967
2496
  top: 50px;
2968
2497
  left: 50%;
2498
+ transform: translateX(-50%);
2969
2499
  }
2970
2500
  .bs-notification-container > .top-notification > div {
2971
- padding-inline: calc(var(--spacing, .25rem) * 3);
2972
- --tw-leading: 1.4;
2973
- border: 1px solid var(--green);
2974
- color: var(--green);
2975
- background-color: var(--body-bg);
2976
- border-radius: .25rem;
2977
- justify-content: center;
2501
+ position: relative;
2502
+ display: flex;
2978
2503
  align-items: center;
2979
- padding-block: 11px;
2504
+ justify-content: center;
2505
+ padding: 11px 0.75rem;
2980
2506
  line-height: 1.4;
2981
- display: flex;
2982
- position: relative;
2983
- box-shadow: 0 4px 4px #0003;
2507
+ border: 1px solid var(--bs-notification-success-accent);
2508
+ border-radius: var(--bs-notification-border-radius);
2509
+ color: var(--bs-notification-success-accent);
2510
+ background-color: var(--bs-notification-bg);
2511
+ box-shadow: var(--bs-notification-shadow);
2984
2512
  }
2985
- .bs-notification-container > .top-notification > div:before {
2986
- content: "check_circle";
2987
- margin-right: calc(var(--spacing, .25rem) * 1.5);
2513
+ .bs-notification-container > .top-notification > div .notification-icon {
2988
2514
  width: 1.0769em;
2989
2515
  height: 1.0769em;
2990
- font-family: var(--icon-font-family);
2991
- font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48;
2992
- display: inline-block;
2516
+ margin-right: 0.375rem;
2993
2517
  }
2994
2518
  .bs-notification-container > .top-notification > div.error {
2995
- border: 1px solid var(--red);
2996
- color: var(--red);
2997
- }
2998
- .bs-notification-container > .top-notification > div.error:before {
2999
- content: "cancel";
2519
+ border: 1px solid var(--bs-notification-error-accent);
2520
+ color: var(--bs-notification-error-accent);
3000
2521
  }
3001
2522
  .bs-notification-container > .bottom-notification {
3002
- right: calc(var(--spacing, .25rem) * 5);
3003
- bottom: calc(var(--spacing, .25rem) * 5);
3004
- z-index: 250;
3005
2523
  position: fixed;
2524
+ z-index: 250;
2525
+ bottom: 1.25rem;
2526
+ right: 1.25rem;
3006
2527
  }
3007
2528
  .bs-notification-container > .bs-loading-icon {
3008
- inset: calc(var(--spacing, .25rem) * 0);
2529
+ position: fixed;
2530
+ inset: 0;
3009
2531
  z-index: 300;
3010
- opacity: .1;
3011
2532
  background-color: #000;
3012
- position: fixed;
2533
+ opacity: 0.1;
3013
2534
  }
3014
- .bs-notification-container > .bs-loading-icon > .font-icon {
3015
- opacity: 1;
3016
- color: var(--white);
2535
+ .bs-notification-container > .bs-loading-icon > .bs-icon {
3017
2536
  font-size: 52px;
2537
+ opacity: 1;
2538
+ color: var(--bs-white);
3018
2539
  }
3019
2540
  [data-theme="dark"] .bs-notification-container > .top-notification > div {
3020
- box-shadow: 0 4px 4px #ffffff1a;
2541
+ box-shadow: 0 4px 4px rgba(255, 255, 255, 0.1);
3021
2542
  }
3022
- @property --tw-translate-x {
3023
- syntax: "*";
3024
- inherits: false;
3025
- initial-value: 0;
3026
- }
3027
- @property --tw-translate-y {
3028
- syntax: "*";
3029
- inherits: false;
3030
- initial-value: 0;
3031
- }
3032
- @property --tw-translate-z {
3033
- syntax: "*";
3034
- inherits: false;
3035
- initial-value: 0;
3036
- }
3037
- @property --tw-leading {
3038
- syntax: "*";
3039
- inherits: false
3040
- }
3041
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2543
+
3042
2544
  .bs-context-menu {
3043
- min-width: calc(var(--spacing, .25rem) * 30);
2545
+ padding: 0.25rem 0;
2546
+ min-width: 7.5rem;
2547
+ overflow: auto;
3044
2548
  cursor: default;
3045
- padding-block: calc(var(--spacing, .25rem) * 1);
3046
2549
  min-height: auto;
3047
2550
  max-height: 500px;
3048
- overflow: auto;
2551
+ background-color: var(--bs-context-menu-bg);
2552
+ color: var(--bs-context-menu-text);
2553
+ border: 1px solid var(--bs-context-menu-border);
2554
+ border-radius: var(--bs-context-menu-border-radius);
2555
+ box-shadow: var(--bs-context-menu-shadow);
3049
2556
  }
3050
2557
  .bs-context-menu > .menu {
3051
- cursor: pointer;
3052
- padding-inline: calc(var(--spacing, .25rem) * 3);
3053
- padding-block: calc(var(--spacing, .25rem) * 1.5);
3054
- white-space: nowrap;
3055
- align-items: flex-start;
2558
+ padding: 0.375rem 0.75rem;
3056
2559
  display: flex;
2560
+ align-items: flex-start;
2561
+ white-space: nowrap;
2562
+ cursor: pointer;
3057
2563
  }
3058
2564
  .bs-context-menu > .menu.disabled {
3059
- color: var(--gray-400);
2565
+ color: var(--bs-gray-400);
3060
2566
  }
3061
2567
  .bs-context-menu > .menu:not(.disabled):hover {
3062
- background-color: var(--color-hover);
2568
+ background-color: var(--bs-context-menu-item-hover-bg);
3063
2569
  }
3064
- .bs-context-menu > .menu.has-submenu:after {
2570
+ .bs-context-menu > .menu.has-submenu::after {
3065
2571
  content: "chevron_right";
3066
- right: calc(var(--spacing, .25rem) * .5);
3067
- max-width: 1em;
3068
- font-size: var(--text-base, 1rem);
3069
- line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
3070
- font-family: var(--icon-font-family);
3071
2572
  position: absolute;
2573
+ right: 0.125rem;
2574
+ font-size: 1rem;
2575
+ line-height: 1.5rem;
2576
+ max-width: 1em;
2577
+ font-family: var(--bs-icon-font-family);
3072
2578
  }
3073
2579
  .bs-context-menu > .menu.separator {
3074
- margin-block: calc(var(--spacing, .25rem) * 1);
3075
- padding: calc(var(--spacing, .25rem) * 0);
3076
- border-bottom: 1px solid var(--border);
2580
+ padding: 0;
2581
+ margin: 0.25rem 0;
2582
+ border-bottom: 1px solid var(--bs-context-menu-separator);
3077
2583
  }
3078
2584
  .bs-context-menu > .menu.no-padding {
3079
- padding: calc(var(--spacing, .25rem) * 0);
2585
+ padding: 0;
3080
2586
  }
3081
2587
  .bs-context-menu > .menu a {
3082
- width: 100%;
3083
- padding-inline: calc(var(--spacing, .25rem) * 3);
3084
- padding-block: calc(var(--spacing, .25rem) * 1.5);
3085
- color: var(--body-text);
3086
2588
  text-decoration-line: none;
2589
+ width: 100%;
2590
+ padding: 0.375rem 0.75rem;
2591
+ color: var(--bs-context-menu-text);
3087
2592
  }
3088
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2593
+
3089
2594
  .bs-context-menu-container .context-menu-curtain {
3090
- inset: calc(var(--spacing, .25rem) * 0);
3091
- z-index: 300;
3092
2595
  position: fixed;
2596
+ inset: 0;
2597
+ z-index: 300;
3093
2598
  }