@g1cloud/open-bluesea-core 1.0.0-alpha.8 → 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,43 +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
- padding-inline: calc(var(--spacing) * 1.5);
1680
1509
  padding-right: calc(var(--spacing) * 0);
1681
1510
  --tw-outline-style: none;
1682
- color: var(--body-text);
1683
1511
  background-color: #0000;
1684
1512
  border-width: 0;
1685
1513
  border-radius: 0;
@@ -1690,39 +1518,39 @@
1690
1518
  }
1691
1519
 
1692
1520
  .bs-date-range .input-area input:disabled {
1693
- color: var(--gray-400);
1694
- background-color: var(--gray-100) !important;
1521
+ color: var(--bs-input-disabled-text);
1522
+ background-color: var(--bs-input-disabled-bg) !important;
1695
1523
  }
1696
1524
 
1697
- .bs-date-range.disabled .font-icon {
1698
- color: var(--gray-400);
1525
+ .bs-date-range.disabled .bs-icon {
1526
+ color: var(--bs-input-disabled-text);
1699
1527
  }
1700
1528
 
1701
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 {
1702
- border-color: var(--purple) !important;
1530
+ border-color: var(--bs-input-modified-border) !important;
1703
1531
  }
1704
1532
 
1705
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 {
1706
- border-color: var(--danger) !important;
1534
+ border-color: var(--bs-input-error-border) !important;
1707
1535
  }
1708
1536
 
1709
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 {
1710
- color: var(--danger) !important;
1538
+ color: var(--bs-input-error-text) !important;
1711
1539
  }
1712
1540
 
1713
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 {
1714
- border-color: var(--border) !important;
1715
- background-color: var(--gray-100) !important;
1716
- 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;
1717
1545
  }
1718
1546
 
1719
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 {
1720
- color: var(--gray-400) !important;
1721
- background-color: var(--gray-100) !important;
1548
+ color: var(--bs-input-disabled-text) !important;
1549
+ background-color: var(--bs-input-disabled-bg) !important;
1722
1550
  }
1723
1551
 
1724
1552
  .bs-text-area.disabled > .input-area > textarea, .bs-rich-text.disabled > .input-area > textarea {
1725
- background-color: var(--gray-100) !important;
1553
+ background-color: var(--bs-input-disabled-bg) !important;
1726
1554
  }
1727
1555
 
1728
1556
  .bs-date-input .view-mode, .bs-date-range .view-mode {
@@ -1735,12 +1563,12 @@
1735
1563
  .bs-date-input .view-mode:before, .bs-date-range .view-mode:before {
1736
1564
  content: "calendar_month";
1737
1565
  width: 1em;
1738
- font-family: var(--icon-font-family);
1566
+ font-family: var(--bs-icon-font-family);
1739
1567
  }
1740
1568
 
1741
1569
  .bs-date-input .extra-dates, .bs-date-range .extra-dates, .bs-calendar .extra-dates, .bs-calendar-range .extra-dates {
1742
1570
  margin-top: calc(var(--spacing) * 1);
1743
- color: var(--body-text);
1571
+ color: var(--bs-body-text);
1744
1572
  }
1745
1573
 
1746
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 {
@@ -1754,17 +1582,17 @@
1754
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 {
1755
1583
  content: "globe";
1756
1584
  width: 1em;
1757
- font-family: var(--icon-font-family);
1585
+ font-family: var(--bs-icon-font-family);
1758
1586
  }
1759
1587
 
1760
1588
  .bs-calendar .extra-dates, .bs-calendar-range .extra-dates {
1761
1589
  padding-top: calc(var(--spacing) * 2);
1762
- border-top: 1px solid var(--border);
1590
+ border-top: 1px solid var(--bs-border);
1763
1591
  }
1764
1592
 
1765
1593
  .bs-checkbox-base {
1594
+ color: var(--bs-check-icon-color);
1766
1595
  white-space: nowrap;
1767
- color: var(--body-text);
1768
1596
  display: inline-block;
1769
1597
  }
1770
1598
 
@@ -1776,59 +1604,57 @@
1776
1604
  }
1777
1605
 
1778
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);
1779
1610
  cursor: pointer;
1780
1611
  vertical-align: middle;
1781
- font-size: var(--text-xl);
1782
- line-height: var(--tw-leading, var(--text-xl--line-height));
1783
- font-family: var(--icon-font-family);
1784
- color: var(--body-text);
1785
1612
  }
1786
1613
 
1787
1614
  .bs-checkbox-base input:hover, .bs-checkbox-base input:hover ~ label {
1788
- color: var(--gray-500);
1615
+ color: var(--bs-check-icon-hover);
1789
1616
  }
1790
1617
 
1791
1618
  .bs-checkbox-base input:focus:before, .bs-checkbox-base input:focus ~ label {
1792
- color: var(--color-focus);
1619
+ color: var(--bs-check-icon-focus);
1793
1620
  }
1794
1621
 
1795
1622
  .bs-checkbox-base.modified input:before, .bs-checkbox-base.modified input ~ label {
1796
- color: var(--purple) !important;
1623
+ color: var(--bs-check-icon-modified) !important;
1797
1624
  }
1798
1625
 
1799
1626
  .bs-checkbox-base.error input:before, .bs-checkbox-base.error input ~ label {
1800
- color: var(--danger) !important;
1627
+ color: var(--bs-check-icon-error) !important;
1801
1628
  }
1802
1629
 
1803
1630
  .bs-checkbox-base.disabled input:before, .bs-checkbox-base.disabled input ~ label {
1804
- color: var(--gray-400) !important;
1631
+ color: var(--bs-check-icon-disabled) !important;
1805
1632
  }
1806
1633
 
1807
1634
  .bs-checkbox-base label {
1635
+ padding: var(--bs-check-label-padding-y) var(--bs-check-label-padding-x);
1808
1636
  cursor: pointer;
1809
- padding-inline: calc(var(--spacing) * .5);
1810
- padding-block: calc(var(--spacing) * 1);
1811
1637
  vertical-align: middle;
1812
1638
  display: inline-block;
1813
1639
  }
1814
1640
 
1815
- .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 {
1816
- 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;
1817
1643
  }
1818
1644
 
1819
- .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 {
1820
- 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;
1821
1647
  }
1822
1648
 
1823
- .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 {
1824
- 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;
1825
1651
  }
1826
1652
 
1827
1653
  .bs-select-wrap {
1654
+ background-color: var(--bs-select-bg);
1655
+ color: var(--bs-select-text);
1828
1656
  min-width: calc(var(--spacing) * 16);
1829
1657
  --tw-outline-style: none;
1830
- background-color: var(--body-bg);
1831
- color: var(--body-text);
1832
1658
  outline-style: none;
1833
1659
  flex-direction: column;
1834
1660
  justify-content: flex-start;
@@ -1838,28 +1664,29 @@
1838
1664
  }
1839
1665
 
1840
1666
  .bs-select-wrap .message {
1667
+ font-size: var(--bs-font-size-sm);
1841
1668
  margin-top: calc(var(--spacing) * 1);
1842
- font-size: .9em;
1843
1669
  }
1844
1670
 
1845
1671
  .bs-select-wrap:hover > .selected {
1846
- border-color: var(--border-hover);
1672
+ border-color: var(--bs-select-border-hover);
1847
1673
  }
1848
1674
 
1849
1675
  .bs-select-wrap:focus > .selected {
1850
- border-color: var(--color-focus);
1676
+ border-color: var(--bs-select-border-focus);
1851
1677
  }
1852
1678
 
1853
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);
1854
1686
  cursor: pointer;
1855
- border-radius: var(--radius-sm);
1856
- min-width: 100%;
1857
- height: 26px;
1858
- padding-inline: calc(var(--spacing) * 1.5);
1859
- border: 1px solid var(--border);
1860
- background-color: var(--body-bg);
1861
1687
  justify-content: flex-start;
1862
1688
  align-items: center;
1689
+ min-width: 100%;
1863
1690
  display: flex;
1864
1691
  }
1865
1692
 
@@ -1871,12 +1698,13 @@
1871
1698
  }
1872
1699
 
1873
1700
  .bs-select-wrap > .selected .placeholder {
1701
+ color: var(--bs-select-placeholder);
1874
1702
  text-overflow: ellipsis;
1875
- color: var(--gray-400);
1876
1703
  overflow: hidden;
1877
1704
  }
1878
1705
 
1879
1706
  .bs-select-wrap > .selected .dropdown-btn {
1707
+ font-family: var(--bs-icon-font-family);
1880
1708
  margin-right: calc(var(--spacing) * -1);
1881
1709
  margin-left: calc(var(--spacing) * 1);
1882
1710
  transition-property: transform, translate, scale, rotate;
@@ -1885,7 +1713,6 @@
1885
1713
  --tw-duration: .2s;
1886
1714
  -webkit-user-select: none;
1887
1715
  user-select: none;
1888
- font-family: var(--icon-font-family);
1889
1716
  transition-duration: .2s;
1890
1717
  }
1891
1718
 
@@ -1894,18 +1721,18 @@
1894
1721
  }
1895
1722
 
1896
1723
  .bs-select-wrap.modified > .selected {
1897
- border-color: var(--purple) !important;
1724
+ border-color: var(--bs-select-modified-border) !important;
1898
1725
  }
1899
1726
 
1900
1727
  .bs-select-wrap.error > .selected {
1901
- border-color: var(--danger) !important;
1902
- color: var(--danger) !important;
1728
+ border-color: var(--bs-select-error-border) !important;
1729
+ color: var(--bs-select-error-text) !important;
1903
1730
  }
1904
1731
 
1905
1732
  .bs-select-wrap.disabled > .selected {
1906
- border-color: var(--border) !important;
1907
- background-color: var(--gray-100) !important;
1908
- 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;
1909
1736
  }
1910
1737
 
1911
1738
  .bs-select-wrap.view-mode {
@@ -1913,11 +1740,11 @@
1913
1740
  }
1914
1741
 
1915
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);
1916
1746
  top: calc(var(--spacing) * 0);
1917
1747
  padding-inline: calc(var(--spacing) * .5);
1918
- font-size: .9em;
1919
- font-family: var(--icon-font-family);
1920
- color: var(--gray-400);
1921
1748
  animation: 1s linear infinite spin;
1922
1749
  position: absolute;
1923
1750
  left: 100%;
@@ -1925,28 +1752,17 @@
1925
1752
 
1926
1753
  .bs-field-error {
1927
1754
  margin-top: calc(var(--spacing) * 1);
1928
- color: var(--color-error);
1755
+ color: var(--bs-color-error);
1929
1756
  }
1930
1757
 
1931
1758
  .component-shadow-base {
1932
- box-shadow: 2px 2px 8px #0000001a;
1759
+ box-shadow: var(--bs-popup-shadow);
1933
1760
  }
1934
1761
 
1935
1762
  [data-theme="dark"] .component-shadow-base {
1936
1763
  box-shadow: 2px 2px 8px #ffffff1a;
1937
1764
  }
1938
1765
 
1939
- .font-icon {
1940
- max-width: 1em;
1941
- font-size: var(--text-base);
1942
- line-height: var(--tw-leading, var(--text-base--line-height));
1943
- font-family: var(--icon-font-family);
1944
- }
1945
-
1946
- .font-icon.filled {
1947
- font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48;
1948
- }
1949
-
1950
1766
  .fade-enter-active, .fade-leave-active {
1951
1767
  transition-property: opacity;
1952
1768
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1961,7 +1777,7 @@
1961
1777
 
1962
1778
  .text-description {
1963
1779
  margin-top: calc(var(--spacing) * .5);
1964
- color: var(--gray-400);
1780
+ color: var(--bs-gray-400);
1965
1781
  font-size: .923em;
1966
1782
  }
1967
1783
 
@@ -1969,8 +1785,8 @@
1969
1785
  z-index: 100;
1970
1786
  border-radius: var(--radius-sm);
1971
1787
  opacity: .7;
1972
- border: 1px solid var(--primary);
1973
- background-color: var(--primary-400);
1788
+ border: 1px solid var(--bs-primary);
1789
+ background-color: var(--bs-primary-400);
1974
1790
  position: absolute;
1975
1791
  }
1976
1792
 
@@ -2065,14 +1881,10 @@
2065
1881
  initial-value: solid;
2066
1882
  }
2067
1883
 
2068
- @property --tw-leading {
2069
- syntax: "*";
2070
- inherits: false
2071
- }
2072
-
2073
- @property --tw-font-weight {
1884
+ @property --tw-outline-style {
2074
1885
  syntax: "*";
2075
- inherits: false
1886
+ inherits: false;
1887
+ initial-value: solid;
2076
1888
  }
2077
1889
 
2078
1890
  @property --tw-blur {
@@ -2141,11 +1953,21 @@
2141
1953
  inherits: false
2142
1954
  }
2143
1955
 
1956
+ @property --tw-leading {
1957
+ syntax: "*";
1958
+ inherits: false
1959
+ }
1960
+
2144
1961
  @property --tw-duration {
2145
1962
  syntax: "*";
2146
1963
  inherits: false
2147
1964
  }
2148
1965
 
1966
+ @property --tw-font-weight {
1967
+ syntax: "*";
1968
+ inherits: false
1969
+ }
1970
+
2149
1971
  @property --tw-ease {
2150
1972
  syntax: "*";
2151
1973
  inherits: false
@@ -2168,360 +1990,234 @@
2168
1990
  inherits: false;
2169
1991
  initial-value: 0;
2170
1992
  }
2171
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2172
- @layer properties {
2173
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2174
- *, :before, :after, ::backdrop {
2175
- --tw-leading: initial;
2176
- --tw-font-weight: initial;
2177
- }
2178
- }
2179
- }
1993
+
2180
1994
  .bs-button {
2181
- cursor: pointer;
2182
- border-radius: var(--radius-sm, .25rem);
2183
- height: 26px;
2184
- padding-inline: calc(var(--spacing, .25rem) * 2);
2185
- padding-block: calc(var(--spacing, .25rem) * 1);
2186
- vertical-align: middle;
2187
- --tw-leading: 1;
2188
- --tw-font-weight: var(--font-weight-normal, 400);
2189
- line-height: 1;
2190
- font-weight: var(--font-weight-normal, 400);
2191
- white-space: nowrap;
2192
- 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);
2193
2000
  border: none;
2194
- justify-content: center;
2195
- align-items: center;
2196
2001
  margin-right: 1px;
2197
- text-decoration-line: none;
2198
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;
2199
2011
  }
2200
- .bs-button.border-0 > .font-icon.left {
2201
- margin-right: 0;
2012
+ .bs-button.border-0 > .bs-icon.left { margin-right: 0;
2202
2013
  }
2203
- .bs-button.border-0 > .font-icon.right {
2204
- margin-left: 0;
2014
+ .bs-button.border-0 > .bs-icon.right { margin-left: 0;
2205
2015
  }
2206
- .bs-button.bg-transparent:not(:disabled):hover, .bs-button.bg-transparent:not(:disabled):active {
2207
- opacity: .8;
2016
+ .bs-button.bg-transparent:not(:disabled):hover,
2017
+ .bs-button.bg-transparent:not(:disabled):active { opacity: 0.8;
2208
2018
  }
2209
- .bs-button:disabled {
2210
- cursor: default;
2211
- opacity: .6;
2019
+ .bs-button:disabled { cursor: default; opacity: 0.6;
2212
2020
  }
2021
+
2022
+ /* Default */
2213
2023
  .bs-button.default {
2214
- background-color: var(--button-default-bg);
2215
- border: 1px solid var(--border);
2216
- 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);
2217
2027
  }
2218
- .bs-button.default:not(:disabled):hover {
2219
- background-color: var(--gray-100);
2028
+ .bs-button.default:not(:disabled):hover { background-color: var(--bs-gray-100);
2220
2029
  }
2221
- .bs-button.default:not(:disabled):active {
2222
- background-color: var(--gray-200);
2030
+ .bs-button.default:not(:disabled):active { background-color: var(--bs-gray-200);
2223
2031
  }
2032
+
2033
+ /* Blue */
2224
2034
  .bs-button.blue {
2225
- background-color: var(--blue);
2226
- border: 1px solid var(--blue);
2227
- 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);
2228
2038
  }
2229
- .bs-button.blue:not(:disabled):hover {
2230
- 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%);
2231
2040
  }
2232
- @supports (color: color-mix(in lab, red, red)) {
2233
- .bs-button.blue:not(:disabled):hover {
2234
- 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%);
2235
2042
  }
2043
+
2044
+ /* Red */
2045
+ .bs-button.red { background-color: var(--bs-button-red-bg); color: var(--bs-button-red-text);
2236
2046
  }
2237
- .bs-button.blue:not(:disabled):active {
2238
- 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%);
2239
2048
  }
2240
- @supports (color: color-mix(in lab, red, red)) {
2241
- .bs-button.blue:not(:disabled):active {
2242
- 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%);
2243
2050
  }
2051
+
2052
+ /* Orange */
2053
+ .bs-button.orange { background-color: var(--bs-button-orange-bg); color: var(--bs-button-orange-text);
2244
2054
  }
2245
- .bs-button.red {
2246
- background-color: var(--red);
2247
- color: var(--white);
2055
+ .bs-button.orange:not(:disabled):hover { background-color: color-mix(in srgb, var(--bs-button-orange-bg) 90%, black 10%);
2248
2056
  }
2249
- .bs-button.red:not(:disabled):hover {
2250
- 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%);
2251
2058
  }
2252
- @supports (color: color-mix(in lab, red, red)) {
2253
- .bs-button.red:not(:disabled):hover {
2254
- 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);
2255
2062
  }
2063
+ .bs-button.green:not(:disabled):hover { background-color: color-mix(in srgb, var(--bs-button-green-bg) 90%, black 10%);
2256
2064
  }
2257
- .bs-button.red:not(:disabled):active {
2258
- 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%);
2259
2066
  }
2260
- @supports (color: color-mix(in lab, red, red)) {
2261
- .bs-button.red:not(:disabled):active {
2262
- 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);
2263
2070
  }
2071
+ .bs-button.gray:not(:disabled):hover { background-color: color-mix(in srgb, var(--bs-button-gray-bg) 90%, black 10%);
2264
2072
  }
2265
- .bs-button.orange {
2266
- background-color: var(--orange);
2267
- color: var(--white);
2073
+ .bs-button.gray:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-gray-bg) 80%, black 20%);
2268
2074
  }
2269
- .bs-button.orange:not(:disabled):hover {
2270
- background-color: var(--orange);
2075
+
2076
+ /* Black */
2077
+ .bs-button.black { background-color: var(--bs-button-black-bg); color: var(--bs-button-black-text);
2271
2078
  }
2272
- @supports (color: color-mix(in lab, red, red)) {
2273
- .bs-button.orange:not(:disabled):hover {
2274
- 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%);
2275
2080
  }
2081
+ .bs-button.black:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-black-bg) 80%, black 20%);
2276
2082
  }
2277
- .bs-button.orange:not(:disabled):active {
2278
- 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;
2279
2093
  }
2280
- @supports (color: color-mix(in lab, red, red)) {
2281
- .bs-button.orange:not(:disabled):active {
2282
- 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%);
2283
2095
  }
2096
+ .bs-button.underline.blue:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-blue-bg) 90%, black 10%);
2284
2097
  }
2285
- .bs-button.green {
2286
- background-color: var(--green);
2287
- 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%);
2288
2099
  }
2289
- .bs-button.green:not(:disabled):hover {
2290
- 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%);
2291
2101
  }
2292
- @supports (color: color-mix(in lab, red, red)) {
2293
- .bs-button.green:not(:disabled):hover {
2294
- 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%);
2295
2103
  }
2104
+ .bs-button.underline.gray:not(:disabled):active { background-color: color-mix(in srgb, var(--bs-button-gray-bg) 90%, black 10%);
2296
2105
  }
2297
- .bs-button.green:not(:disabled):active {
2298
- background-color: var(--green);
2106
+ .bs-button.border-0 { border: 0;
2299
2107
  }
2300
- @supports (color: color-mix(in lab, red, red)) {
2301
- .bs-button.green:not(:disabled):active {
2302
- background-color: color-mix(in srgb, var(--green) 80%, black 20%);
2303
- }
2304
- }
2305
- .bs-button.gray {
2306
- background-color: var(--gray);
2307
- color: var(--white);
2308
- }
2309
- .bs-button.gray:not(:disabled):hover {
2310
- background-color: var(--gray);
2311
- }
2312
- @supports (color: color-mix(in lab, red, red)) {
2313
- .bs-button.gray:not(:disabled):hover {
2314
- background-color: color-mix(in srgb, var(--gray) 90%, black 10%);
2315
- }
2316
- }
2317
- .bs-button.gray:not(:disabled):active {
2318
- background-color: var(--gray);
2319
- }
2320
- @supports (color: color-mix(in lab, red, red)) {
2321
- .bs-button.gray:not(:disabled):active {
2322
- background-color: color-mix(in srgb, var(--gray) 80%, black 20%);
2323
- }
2324
- }
2325
- .bs-button.black {
2326
- background-color: var(--black);
2327
- color: var(--white);
2328
- }
2329
- .bs-button.black:not(:disabled):hover {
2330
- background-color: var(--black);
2331
- }
2332
- @supports (color: color-mix(in lab, red, red)) {
2333
- .bs-button.black:not(:disabled):hover {
2334
- background-color: color-mix(in srgb, var(--black) 90%, black 10%);
2335
- }
2336
- }
2337
- .bs-button.black:not(:disabled):active {
2338
- background-color: var(--black);
2339
- }
2340
- @supports (color: color-mix(in lab, red, red)) {
2341
- .bs-button.black:not(:disabled):active {
2342
- background-color: color-mix(in srgb, var(--black) 80%, black 20%);
2343
- }
2344
- }
2345
- .bs-button.underline {
2346
- padding-inline: calc(var(--spacing, .25rem) * 2);
2347
- padding-block: calc(var(--spacing, .25rem) * 0);
2348
- text-underline-offset: 2px;
2349
- background-color: var(--button-default-bg);
2350
- color: var(--button-default-text);
2351
- border: 0;
2352
- border-radius: 0;
2353
- text-decoration-line: underline;
2354
- }
2355
- .bs-button.underline.blue:not(:disabled):hover {
2356
- background-color: var(--blue);
2357
- }
2358
- @supports (color: color-mix(in lab, red, red)) {
2359
- .bs-button.underline.blue:not(:disabled):hover {
2360
- background-color: color-mix(in srgb, var(--blue) 95%, black 5%);
2361
- }
2362
- }
2363
- .bs-button.underline.blue:not(:disabled):active {
2364
- background-color: var(--blue);
2365
- }
2366
- @supports (color: color-mix(in lab, red, red)) {
2367
- .bs-button.underline.blue:not(:disabled):active {
2368
- background-color: color-mix(in srgb, var(--blue) 90%, black 10%);
2369
- }
2370
- }
2371
- .bs-button.underline.red:not(:disabled):active {
2372
- background-color: var(--red);
2373
- }
2374
- @supports (color: color-mix(in lab, red, red)) {
2375
- .bs-button.underline.red:not(:disabled):active {
2376
- background-color: color-mix(in srgb, var(--red) 90%, black 10%);
2377
- }
2378
- }
2379
- .bs-button.underline.orange:not(:disabled):active {
2380
- background-color: var(--orange);
2381
- }
2382
- @supports (color: color-mix(in lab, red, red)) {
2383
- .bs-button.underline.orange:not(:disabled):active {
2384
- background-color: color-mix(in srgb, var(--orange) 90%, black 10%);
2385
- }
2386
- }
2387
- .bs-button.underline.green:not(:disabled):active {
2388
- background-color: var(--green);
2389
- }
2390
- @supports (color: color-mix(in lab, red, red)) {
2391
- .bs-button.underline.green:not(:disabled):active {
2392
- background-color: color-mix(in srgb, var(--green) 90%, black 10%);
2393
- }
2394
- }
2395
- .bs-button.underline.gray:not(:disabled):active {
2396
- background-color: var(--gray);
2397
- }
2398
- @supports (color: color-mix(in lab, red, red)) {
2399
- .bs-button.underline.gray:not(:disabled):active {
2400
- background-color: color-mix(in srgb, var(--gray) 90%, black 10%);
2401
- }
2402
- }
2403
- [data-theme="dark"] .bs-button.default:not(:disabled):hover {
2404
- background-color: var(--gray-800);
2405
- }
2406
- [data-theme="dark"] .bs-button.default:not(:disabled):active {
2407
- background-color: var(--gray-700);
2108
+
2109
+ /* Dark theme */
2110
+ [data-theme="dark"] .bs-button.default:not(:disabled):hover { background-color: var(--bs-gray-800);
2408
2111
  }
2409
- @property --tw-leading {
2410
- syntax: "*";
2411
- inherits: false
2112
+ [data-theme="dark"] .bs-button.default:not(:disabled):active { background-color: var(--bs-gray-700);
2412
2113
  }
2413
- @property --tw-font-weight {
2414
- syntax: "*";
2415
- inherits: false
2416
- }
2417
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2418
- @layer properties {
2419
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2420
- *, :before, :after, ::backdrop {
2421
- --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;
2422
2121
  }
2122
+ .bs-icon > svg {
2123
+ width: 100%;
2124
+ height: 100%;
2125
+ fill: currentColor;
2423
2126
  }
2127
+ .bs-icon.spin {
2128
+ animation: spin 1s linear infinite;
2424
2129
  }
2130
+
2425
2131
  .page-navigation {
2426
- justify-content: center;
2132
+ padding: 0.5rem;
2133
+ display: flex;
2134
+ gap: 0.125rem;
2427
2135
  align-items: center;
2428
- gap: calc(var(--spacing, .25rem) * .5);
2429
- padding: calc(var(--spacing, .25rem) * 2);
2430
- --tw-leading: 1;
2431
- color: var(--body-text);
2136
+ justify-content: center;
2432
2137
  line-height: 1;
2433
- display: flex;
2138
+ color: var(--bs-page-nav-button-text);
2434
2139
  }
2435
2140
  .page-navigation > span {
2436
- cursor: pointer;
2437
- padding-inline: calc(var(--spacing, .25rem) * 1.5);
2438
- padding-block: calc(var(--spacing, .25rem) * 1);
2439
- -webkit-user-select: none;
2440
- user-select: none;
2441
- justify-content: center;
2442
- align-items: center;
2443
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);
2444
2150
  }
2445
2151
  .page-navigation > span:hover {
2446
- filter: opacity(75%);
2152
+ background-color: var(--bs-page-nav-button-hover-bg);
2447
2153
  }
2448
2154
  .page-navigation > span:active {
2449
2155
  filter: opacity(50%);
2450
2156
  }
2451
2157
  .page-navigation > span.on {
2452
- border-radius: var(--radius-sm, .25rem);
2453
- background-color: var(--primary-300);
2158
+ background-color: var(--bs-page-nav-button-active-bg);
2159
+ color: var(--bs-page-nav-button-active-text);
2454
2160
  }
2455
- .page-navigation > span:not(.page) {
2456
- padding: calc(var(--spacing, .25rem) * .5);
2161
+ .page-navigation > span.nav-icon {
2457
2162
  font-size: 1.4em;
2458
2163
  }
2459
2164
  .page-navigation > span.disabled {
2460
2165
  cursor: default;
2461
- color: var(--gray-400);
2166
+ color: var(--bs-gray-400);
2462
2167
  filter: opacity(40%);
2463
2168
  }
2464
2169
  .page-navigation > span:not(.disabled):hover {
2465
- border-radius: var(--radius-sm, .25rem);
2170
+ border-radius: var(--bs-page-nav-button-border-radius);
2466
2171
  }
2467
- @property --tw-leading {
2468
- syntax: "*";
2469
- inherits: false
2470
- }
2471
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2172
+
2472
2173
  .bs-loading-icon {
2473
- justify-content: center;
2474
- align-items: center;
2475
2174
  display: flex;
2175
+ align-items: center;
2176
+ justify-content: center;
2177
+ color: var(--bs-loading-color);
2178
+ font-size: var(--bs-loading-size);
2476
2179
  }
2477
- .bs-loading-icon > .font-icon {
2478
- animation: 1s linear infinite spin;
2479
- }
2480
- @keyframes spin {
2481
- to {
2482
- transform: rotate(360deg);
2483
- }
2484
- }
2485
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2180
+
2486
2181
  .bs-popup {
2487
- min-height: calc(var(--spacing, .25rem) * 6);
2488
- min-width: calc(var(--spacing, .25rem) * 12);
2489
- border: 1px solid var(--border);
2490
- background-color: var(--body-bg);
2491
- color: var(--body-text);
2492
- z-index: 300;
2493
- border-radius: .25rem;
2494
2182
  position: fixed;
2495
- 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);
2496
2191
  }
2497
2192
  [data-theme="dark"] .bs-popup {
2498
- box-shadow: 2px 2px 8px #ffffff1a;
2193
+ box-shadow: 2px 2px 8px rgba(255, 255, 255, 0.1);
2499
2194
  }
2500
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2195
+
2501
2196
  .bs-tooltip {
2502
- max-width: calc(var(--spacing, .25rem) * 60);
2503
- padding: calc(var(--spacing, .25rem) * 2);
2504
- z-index: 10000;
2505
- border: 1px solid var(--primary);
2506
- background-color: var(--body-bg);
2507
- color: var(--body-text);
2508
- border-radius: .25rem;
2509
2197
  position: fixed;
2510
- 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);
2511
2207
  }
2512
2208
  .bs-tooltip:before {
2513
- height: calc(var(--spacing, .25rem) * 3);
2514
- width: calc(var(--spacing, .25rem) * 3);
2515
- border-radius: var(--radius-sm, .25rem);
2516
- content: " ";
2517
- border: 1px solid var(--primary);
2518
- background-color: var(--body-bg);
2519
- clip-path: polygon(0% 10%, 0% 100%, 90% 100%);
2520
- z-index: -1;
2521
2209
  position: absolute;
2522
- top: -6px;
2210
+ width: 0.75rem;
2211
+ height: 0.75rem;
2212
+ border-radius: 0.125rem;
2213
+ content: " ";
2523
2214
  left: calc(50% - 6px);
2215
+ top: -6px;
2216
+ border: 1px solid var(--bs-primary);
2217
+ background-color: var(--bs-tooltip-bg);
2524
2218
  transform: rotate(135deg);
2219
+ clip-path: polygon(0% 10%, 0% 100%, 90% 100%);
2220
+ z-index: -1;
2525
2221
  }
2526
2222
  .bs-tooltip.center {
2527
2223
  transform: translateX(-50%);
@@ -2529,238 +2225,111 @@ to {
2529
2225
  .bs-tooltip > div {
2530
2226
  overflow: auto;
2531
2227
  }
2532
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2533
- @layer properties {
2534
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2535
- *, :before, :after, ::backdrop {
2536
- --tw-leading: initial;
2537
- --tw-outline-style: solid;
2538
- }
2539
- }
2540
- }
2228
+
2541
2229
  .bs-select-popup {
2230
+ min-width: 7.5rem;
2542
2231
  max-height: 300px;
2543
- min-width: calc(var(--spacing, .25rem) * 30);
2544
- --tw-leading: 1;
2545
- line-height: 1;
2546
2232
  overflow: hidden;
2233
+ line-height: 1;
2547
2234
  }
2548
- .bs-select-popup > .popup-search {
2549
- padding: calc(var(--spacing, .25rem) * 1);
2235
+ .bs-select-popup > .popup-search { padding: 0.25rem;
2550
2236
  }
2551
2237
  .bs-select-popup > .popup-search > input {
2552
- border-radius: var(--radius-sm, .25rem);
2238
+ border-radius: 0.125rem;
2239
+ padding: 0.125rem 0.25rem;
2553
2240
  width: 100%;
2554
- padding-inline: calc(var(--spacing, .25rem) * 1);
2555
- padding-block: calc(var(--spacing, .25rem) * .5);
2556
- outline-style: var(--tw-outline-style);
2557
- border: 1px solid var(--border);
2558
- background-color: var(--body-bg);
2559
- color: var(--body-text);
2560
- outline-width: 0;
2561
- }
2562
- .bs-select-popup > .popup-search > input:focus {
2563
- border-color: var(--color-focus);
2564
- }
2565
- .bs-select-popup > .popup-items {
2566
- flex-grow: 1;
2567
- height: 100%;
2568
- overflow: auto;
2569
- }
2570
- .bs-select-popup > .popup-items > .popup-item {
2571
- height: calc(var(--spacing, .25rem) * 7);
2572
- cursor: pointer;
2573
- padding-inline: calc(var(--spacing, .25rem) * 4);
2574
- padding-block: calc(var(--spacing, .25rem) * 1.5);
2575
- align-items: center;
2576
- display: flex;
2577
- }
2578
- .bs-select-popup > .popup-items > .popup-item .checkbox {
2579
- margin-left: calc(var(--spacing, .25rem) * -2.5);
2580
- width: calc(var(--spacing, .25rem) * 5);
2581
- display: inline-flex;
2241
+ outline: 0;
2242
+ border: 1px solid var(--bs-border);
2243
+ background-color: var(--bs-body-bg);
2244
+ color: var(--bs-body-text);
2582
2245
  }
2583
- .bs-select-popup > .popup-items > .popup-item .checkbox:before {
2584
- content: "";
2585
- margin-right: calc(var(--spacing, .25rem) * .5);
2586
- font-size: var(--text-base, 1rem);
2587
- line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
2588
- font-family: var(--icon-font-family);
2589
- color: var(--color-text);
2246
+ .bs-select-popup > .popup-search > input:focus { border-color: var(--bs-color-focus);
2590
2247
  }
2591
- .bs-select-popup > .popup-items > .popup-item .label {
2592
- cursor: pointer;
2593
- white-space: nowrap;
2594
- flex-grow: 1;
2248
+ .bs-select-popup > .popup-items { flex-grow: 1; height: 100%; overflow: auto;
2595
2249
  }
2596
- .bs-select-popup > .popup-items > .popup-item .label.null-label {
2597
- 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;
2598
2251
  }
2599
- .bs-select-popup > .popup-items > .popup-item.hovered {
2600
- background-color: var(--color-hover);
2252
+ .bs-select-popup > .popup-items > .popup-item .checkbox { display: inline-flex; width: 1.25rem; margin-left: -0.625rem;
2601
2253
  }
2602
- .bs-select-popup > .popup-items > .popup-item.selected-item {
2603
- color: var(--primary);
2604
- font-weight: bold;
2254
+ .bs-select-popup > .popup-items > .popup-item .label { flex-grow: 1; white-space: nowrap; cursor: pointer;
2605
2255
  }
2606
- .bs-select-popup > .popup-items > .popup-item.selected-item .checkbox:before {
2607
- content: "check";
2608
- color: var(--primary);
2256
+ .bs-select-popup > .popup-items > .popup-item .label.null-label { color: var(--bs-color-text-light);
2609
2257
  }
2610
- [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 {
2611
- color: var(--primary-400);
2258
+ .bs-select-popup > .popup-items > .popup-item.hovered { background-color: var(--bs-color-hover);
2612
2259
  }
2613
- @property --tw-leading {
2614
- syntax: "*";
2615
- inherits: false
2260
+ .bs-select-popup > .popup-items > .popup-item.selected-item { color: var(--bs-primary); font-weight: bold;
2616
2261
  }
2617
- @property --tw-outline-style {
2618
- syntax: "*";
2619
- inherits: false;
2620
- initial-value: solid;
2262
+ [data-theme="dark"] .bs-select-popup > .popup-items > .popup-item.selected-item { color: var(--bs-primary-400);
2621
2263
  }
2622
2264
 
2623
2265
  /* Styles defined in components.css */
2624
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2625
- @layer properties {
2626
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2627
- *, :before, :after, ::backdrop {
2628
- --tw-font-weight: initial;
2629
- }
2630
- }
2631
- }
2632
- .bs-calendar {
2633
- flex-direction: column;
2634
- align-items: center;
2635
- display: inline-flex;
2266
+
2267
+ .bs-calendar { display: inline-flex; flex-direction: column; align-items: center;
2636
2268
  }
2637
- .bs-calendar .bs-calendar-head {
2638
- justify-content: space-between;
2639
- align-items: center;
2640
- gap: calc(var(--spacing, .25rem) * 2);
2641
- flex-direction: row;
2642
- display: flex;
2269
+ .bs-calendar .bs-calendar-head { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 0.5rem;
2643
2270
  }
2644
- .bs-calendar .year-month {
2645
- gap: calc(var(--spacing, .25rem) * 1);
2646
- padding-block: calc(var(--spacing, .25rem) * 2);
2647
- padding-right: calc(var(--spacing, .25rem) * 2);
2648
- padding-left: calc(var(--spacing, .25rem) * 0);
2649
- display: flex;
2271
+ .bs-calendar .year-month { padding: 0.5rem 0.5rem 0.5rem 0; display: flex; gap: 0.25rem;
2650
2272
  }
2651
- .bs-calendar .year-month .bs-button {
2652
- border: 0;
2653
- padding: 0;
2273
+ .bs-calendar .year-month .bs-button { border: 0; padding: 0;
2654
2274
  }
2655
- .bs-calendar table {
2656
- font-size: var(--text-xs, .75rem);
2657
- line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));
2658
- display: inline-table;
2275
+ .bs-calendar table { font-size: 0.75rem; line-height: 1rem; display: inline-table;
2659
2276
  }
2660
- .bs-calendar table tr th, .bs-calendar table tr td {
2661
- height: 34px;
2662
- padding-top: calc(var(--spacing, .25rem) * 1);
2663
- text-align: center;
2664
- 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;
2665
2279
  }
2666
- .bs-calendar table tr th {
2667
- --tw-font-weight: var(--font-weight-medium, 500);
2668
- font-weight: var(--font-weight-medium, 500);
2280
+ .bs-calendar table tr th { font-weight: 500;
2669
2281
  }
2670
- .bs-calendar table tr td {
2671
- cursor: pointer;
2672
- text-align: center;
2673
- -webkit-user-select: none;
2674
- user-select: none;
2282
+ .bs-calendar table tr td { cursor: pointer; user-select: none; text-align: center;
2675
2283
  }
2676
- .bs-calendar table tr td > div {
2677
- aspect-ratio: 1;
2678
- justify-content: center;
2679
- align-items: center;
2680
- min-width: 34px;
2681
- height: 34px;
2682
- 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;
2683
2285
  }
2684
- .bs-calendar table tr td.today > div {
2685
- background-color: var(--gray-200);
2686
- border-radius: 50%;
2286
+ .bs-calendar table tr td.today > div { background-color: var(--bs-calendar-today-bg); border-radius: 50%;
2687
2287
  }
2688
- .bs-calendar table tr td.other-month > div {
2689
- opacity: .5;
2288
+ .bs-calendar table tr td.other-month > div { opacity: var(--bs-calendar-other-month-opacity);
2690
2289
  }
2691
- .bs-calendar table tr td.dow-0 > div {
2692
- color: var(--red);
2290
+ .bs-calendar table tr td.dow-0 > div { color: var(--bs-calendar-sunday-text);
2693
2291
  }
2694
- .bs-calendar table tr td.dow-6 > div {
2695
- color: var(--blue);
2292
+ .bs-calendar table tr td.dow-6 > div { color: var(--bs-calendar-saturday-text);
2696
2293
  }
2697
- .bs-calendar table tr td.selected > div {
2698
- background-color: var(--blue);
2699
- color: var(--white);
2700
- 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%;
2701
2295
  }
2702
- .bs-calendar table tr td.range-selected > div {
2703
- background-color: var(--blue);
2704
- color: var(--white);
2705
- 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;
2706
2297
  }
2707
- .bs-calendar table tr td:first-child.range-selected > div, .bs-calendar table tr td.range-selected-start > div {
2708
- 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%;
2709
2300
  }
2710
- .bs-calendar table tr td:last-child.range-selected > div, .bs-calendar table tr td.range-selected-end > div {
2711
- 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;
2712
2303
  }
2713
- .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 {
2714
- 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%;
2715
2307
  }
2716
- .bs-calendar table tr.weekdays {
2717
- border-bottom: 1px solid var(--gray-200);
2308
+ .bs-calendar table tr.weekdays { border-bottom: 1px solid var(--bs-calendar-weekdays-border);
2718
2309
  }
2719
- .bs-calendar table.disabled {
2720
- background-color: var(--gray-200);
2721
- opacity: .7;
2722
- border-radius: 4px;
2310
+ .bs-calendar table.disabled { background-color: var(--bs-calendar-disabled-bg); border-radius: 4px; opacity: 0.7;
2723
2311
  }
2724
- .bs-calendar table.disabled tr > td {
2725
- cursor: default;
2312
+ .bs-calendar table.disabled tr > td { cursor: default;
2726
2313
  }
2727
- .bs-calendar .bs-calendar-time {
2728
- margin-top: calc(var(--spacing, .25rem) * 2);
2729
- padding: calc(var(--spacing, .25rem) * 2);
2730
- flex-direction: row;
2731
- justify-content: center;
2732
- align-self: stretch;
2733
- align-items: center;
2734
- display: flex;
2735
- }
2736
- .bs-calendar .bs-calendar-time .select-wrap {
2737
- width: 100%;
2738
- padding: calc(var(--spacing, .25rem) * 2);
2739
- background-color: var(--gray-100);
2740
- justify-content: center;
2741
- align-items: center;
2742
- 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;
2743
2315
  }
2744
- .bs-calendar .bs-calendar-time .select-wrap > span {
2745
- 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);
2746
2317
  }
2747
- @property --tw-font-weight {
2748
- syntax: "*";
2749
- inherits: false
2318
+ .bs-calendar .bs-calendar-time .select-wrap > span { padding: 0 0.25rem;
2750
2319
  }
2751
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2320
+
2752
2321
  .bs-calendar-range .tilde {
2753
- padding: calc(var(--spacing, .25rem) * 2);
2754
2322
  font-size: 1.2rem;
2323
+ padding: 0.5rem;
2755
2324
  }
2756
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2325
+
2757
2326
  .bs-text-input.value-right input {
2758
2327
  text-align: right;
2759
2328
  }
2760
2329
  .bs-text-input.value-center input {
2761
2330
  text-align: center;
2762
2331
  }
2763
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2332
+
2764
2333
  .bs-number-input.value-right input {
2765
2334
  text-align: right;
2766
2335
  }
@@ -2779,160 +2348,131 @@ to {
2779
2348
  /* Styles defined in components.css */
2780
2349
 
2781
2350
  /* Styles defined in components.css */
2782
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2351
+
2783
2352
  .bs-date-input-popup {
2784
- padding-inline: calc(var(--spacing, .25rem) * 4);
2785
- padding-block: calc(var(--spacing, .25rem) * 2);
2353
+ padding: 0.5rem 1rem;
2786
2354
  }
2787
2355
  .bs-date-input-popup .buttons {
2788
- margin-top: calc(var(--spacing, .25rem) * 2);
2356
+ display: flex;
2357
+ gap: 0.25rem;
2789
2358
  justify-content: center;
2790
2359
  align-items: center;
2791
- gap: calc(var(--spacing, .25rem) * 1);
2792
- display: flex;
2360
+ margin-top: 0.5rem;
2793
2361
  }
2794
2362
  .bs-date-input-popup .buttons .bs-button {
2795
- min-width: calc(var(--spacing, .25rem) * 20);
2363
+ min-width: 5rem;
2796
2364
  }
2797
2365
 
2798
2366
  /* Styles defined in components.css */
2799
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2367
+
2800
2368
  .bs-date-range-popup {
2801
- padding-inline: calc(var(--spacing, .25rem) * 4);
2802
- padding-block: calc(var(--spacing, .25rem) * 2);
2803
2369
  display: flex;
2370
+ padding: 0.5rem 1rem;
2804
2371
  }
2805
2372
  .bs-date-range-popup .buttons {
2806
- margin-top: calc(var(--spacing, .25rem) * 2);
2373
+ display: flex;
2374
+ gap: 0.25rem;
2807
2375
  justify-content: center;
2808
2376
  align-items: center;
2809
- gap: calc(var(--spacing, .25rem) * 1);
2810
- display: flex;
2377
+ margin-top: 0.5rem;
2811
2378
  }
2812
2379
  .bs-date-range-popup .buttons .bs-button {
2813
- min-width: calc(var(--spacing, .25rem) * 20);
2380
+ min-width: 5rem;
2814
2381
  }
2815
2382
 
2816
2383
  /* Styles defined in components.css */
2817
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2818
- @layer properties {
2819
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2820
- *, :before, :after, ::backdrop {
2821
- --tw-duration: initial;
2822
- }
2823
- }
2824
- }
2384
+
2825
2385
  .bs-card-layout {
2826
- border: 1px solid var(--border);
2827
2386
  width: 100%;
2828
- box-shadow: 4px 4px 4px var(--gray-100);
2829
- 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);
2830
2391
  }
2831
2392
  .bs-card-layout > .card-layout-header {
2832
- height: calc(var(--spacing, .25rem) * 11);
2833
- padding-inline: calc(var(--spacing, .25rem) * 2);
2834
- background-color: var(--body-bg);
2835
- 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);
2836
2398
  }
2837
2399
  .bs-card-layout.expanded > .card-layout-header {
2838
- border-bottom: 1px solid var(--border-light);
2839
- border-bottom-right-radius: 0;
2400
+ border-bottom: 1px solid var(--bs-border-light);
2840
2401
  border-bottom-left-radius: 0;
2402
+ border-bottom-right-radius: 0;
2841
2403
  }
2842
- .bs-card-layout .card-layout-title {
2843
- margin-left: calc(var(--spacing, .25rem) * 1.5);
2844
- font-size: var(--text-base, 1rem);
2845
- 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;
2846
2405
  }
2847
2406
  .bs-card-layout .expand-btn {
2848
- transition-property: transform, translate, scale, rotate;
2849
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
2850
- transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
2851
- --tw-duration: .2s;
2852
- font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48;
2853
- color: var(--gray-500);
2854
- font-size: 1.4rem;
2855
- transition-duration: .2s;
2856
2407
  display: inline-block;
2408
+ font-size: 1.4rem;
2409
+ transition: transform 200ms;
2857
2410
  transform: rotate(0);
2411
+ color: var(--bs-gray-500);
2858
2412
  }
2859
- .bs-card-layout.expanded .expand-btn {
2860
- transform: rotate(90deg);
2413
+ .bs-card-layout.expanded .expand-btn { transform: rotate(90deg);
2861
2414
  }
2862
2415
  .bs-card-layout .title-icon {
2863
- color: var(--gray-700);
2864
- font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48;
2865
2416
  font-size: 1.4rem;
2417
+ color: var(--bs-gray-700);
2866
2418
  }
2867
2419
  .bs-card-layout .title-icon-box {
2868
- margin-inline: calc(var(--spacing, .25rem) * 1.5);
2869
- margin-left: calc(var(--spacing, .25rem) * 1);
2870
- height: calc(var(--spacing, .25rem) * 4);
2871
- width: calc(var(--spacing, .25rem) * 4);
2872
- border-radius: var(--radius-sm, .25rem);
2873
- background-color: var(--gray-700);
2874
- }
2875
- .bs-card-layout.blue > .card-layout-header {
2876
- 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);
2877
2425
  }
2878
- .bs-card-layout.red > .card-layout-header {
2879
- background-color: var(--red-bg);
2426
+ .bs-card-layout.blue > .card-layout-header { background-color: var(--bs-blue-bg);
2880
2427
  }
2881
- .bs-card-layout.orange > .card-layout-header {
2882
- background-color: var(--orange-bg);
2428
+ .bs-card-layout.red > .card-layout-header { background-color: var(--bs-red-bg);
2883
2429
  }
2884
- .bs-card-layout.green > .card-layout-header {
2885
- background-color: var(--green-bg);
2430
+ .bs-card-layout.orange > .card-layout-header { background-color: var(--bs-orange-bg);
2886
2431
  }
2887
- .bs-card-layout.gray > .card-layout-header {
2888
- background-color: var(--gray-bg);
2432
+ .bs-card-layout.green > .card-layout-header { background-color: var(--bs-green-bg);
2889
2433
  }
2890
- @property --tw-duration {
2891
- syntax: "*";
2892
- inherits: false
2434
+ .bs-card-layout.gray > .card-layout-header { background-color: var(--bs-gray-bg);
2893
2435
  }
2894
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2436
+
2895
2437
  .modal-wrapper {
2896
- inset: calc(var(--spacing, .25rem) * 0);
2897
- z-index: 201;
2898
2438
  position: fixed;
2439
+ inset: 0;
2440
+ z-index: 201;
2899
2441
  }
2900
2442
  .modal-wrapper > .modal-panel {
2443
+ padding: 1.5rem;
2444
+ outline: none;
2901
2445
  cursor: move;
2902
- padding: calc(var(--spacing, .25rem) * 6);
2903
- --tw-outline-style: none;
2904
- background-color: var(--body-bg);
2905
- color: var(--body-text);
2906
- border: 1px solid var(--border);
2907
- border-radius: .25rem;
2908
- outline-style: none;
2909
2446
  position: relative;
2910
- 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);
2911
2452
  }
2912
2453
  .modal-wrapper > .modal-panel.maximized {
2913
- margin: calc(var(--spacing, .25rem) * 2);
2914
2454
  cursor: default;
2455
+ margin: 0.5rem;
2915
2456
  width: calc(100% - 16px) !important;
2916
2457
  height: calc(100% - 16px) !important;
2917
2458
  }
2918
2459
  [data-theme="dark"] .modal-wrapper > .modal-panel {
2919
- box-shadow: 0 4px 8px #ffffff1a;
2460
+ box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
2920
2461
  }
2921
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2462
+
2922
2463
  .bs-modal-container .modal-curtain {
2923
- inset: calc(var(--spacing, .25rem) * 0);
2924
- z-index: 200;
2925
- background-color: var(--color-black, #000);
2926
- opacity: .3;
2927
2464
  position: fixed;
2465
+ inset: 0;
2466
+ z-index: 200;
2467
+ background-color: var(--bs-modal-overlay-bg);
2928
2468
  }
2929
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2469
+
2930
2470
  .bs-modal-frame {
2931
2471
  cursor: default;
2932
2472
  height: 100%;
2933
2473
  }
2934
2474
  .bs-modal-frame > .title-bar {
2935
- padding-bottom: calc(var(--spacing, .25rem) * 6);
2475
+ padding-bottom: 1.5rem;
2936
2476
  }
2937
2477
  .bs-modal-frame > .title-bar .title {
2938
2478
  font-size: 1.3846em;
@@ -2941,154 +2481,118 @@ to {
2941
2481
  text-align: right;
2942
2482
  }
2943
2483
  .bs-modal-frame > .title-bar .close-btn {
2944
- padding: calc(var(--spacing, .25rem) * 1);
2484
+ padding: 0.25rem;
2945
2485
  }
2946
- .bs-modal-frame > .title-bar .close-btn .font-icon {
2486
+ .bs-modal-frame > .title-bar .close-btn .bs-icon {
2947
2487
  font-size: 1.6em;
2948
2488
  }
2949
2489
  .bs-modal-frame > .buttons {
2950
- padding-top: calc(var(--spacing, .25rem) * 6);
2951
- }
2952
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2953
- @layer properties {
2954
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
2955
- *, :before, :after, ::backdrop {
2956
- --tw-translate-x: 0;
2957
- --tw-translate-y: 0;
2958
- --tw-translate-z: 0;
2959
- --tw-leading: initial;
2960
- }
2961
- }
2490
+ padding-top: 1.5rem;
2962
2491
  }
2492
+
2963
2493
  .bs-notification-container > .top-notification {
2964
- z-index: 250;
2965
- --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
2966
- translate: var(--tw-translate-x) var(--tw-translate-y);
2967
2494
  position: fixed;
2495
+ z-index: 250;
2968
2496
  top: 50px;
2969
2497
  left: 50%;
2498
+ transform: translateX(-50%);
2970
2499
  }
2971
2500
  .bs-notification-container > .top-notification > div {
2972
- padding-inline: calc(var(--spacing, .25rem) * 3);
2973
- --tw-leading: 1.4;
2974
- border: 1px solid var(--green);
2975
- color: var(--green);
2976
- background-color: var(--body-bg);
2977
- border-radius: .25rem;
2978
- justify-content: center;
2501
+ position: relative;
2502
+ display: flex;
2979
2503
  align-items: center;
2980
- padding-block: 11px;
2504
+ justify-content: center;
2505
+ padding: 11px 0.75rem;
2981
2506
  line-height: 1.4;
2982
- display: flex;
2983
- position: relative;
2984
- 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);
2985
2512
  }
2986
- .bs-notification-container > .top-notification > div:before {
2987
- content: "check_circle";
2988
- margin-right: calc(var(--spacing, .25rem) * 1.5);
2513
+ .bs-notification-container > .top-notification > div .notification-icon {
2989
2514
  width: 1.0769em;
2990
2515
  height: 1.0769em;
2991
- font-family: var(--icon-font-family);
2992
- font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48;
2993
- display: inline-block;
2516
+ margin-right: 0.375rem;
2994
2517
  }
2995
2518
  .bs-notification-container > .top-notification > div.error {
2996
- border: 1px solid var(--red);
2997
- color: var(--red);
2998
- }
2999
- .bs-notification-container > .top-notification > div.error:before {
3000
- content: "cancel";
2519
+ border: 1px solid var(--bs-notification-error-accent);
2520
+ color: var(--bs-notification-error-accent);
3001
2521
  }
3002
2522
  .bs-notification-container > .bottom-notification {
3003
- right: calc(var(--spacing, .25rem) * 5);
3004
- bottom: calc(var(--spacing, .25rem) * 5);
3005
- z-index: 250;
3006
2523
  position: fixed;
2524
+ z-index: 250;
2525
+ bottom: 1.25rem;
2526
+ right: 1.25rem;
3007
2527
  }
3008
2528
  .bs-notification-container > .bs-loading-icon {
3009
- inset: calc(var(--spacing, .25rem) * 0);
2529
+ position: fixed;
2530
+ inset: 0;
3010
2531
  z-index: 300;
3011
- opacity: .1;
3012
2532
  background-color: #000;
3013
- position: fixed;
2533
+ opacity: 0.1;
3014
2534
  }
3015
- .bs-notification-container > .bs-loading-icon > .font-icon {
3016
- opacity: 1;
3017
- color: var(--white);
2535
+ .bs-notification-container > .bs-loading-icon > .bs-icon {
3018
2536
  font-size: 52px;
2537
+ opacity: 1;
2538
+ color: var(--bs-white);
3019
2539
  }
3020
2540
  [data-theme="dark"] .bs-notification-container > .top-notification > div {
3021
- box-shadow: 0 4px 4px #ffffff1a;
2541
+ box-shadow: 0 4px 4px rgba(255, 255, 255, 0.1);
3022
2542
  }
3023
- @property --tw-translate-x {
3024
- syntax: "*";
3025
- inherits: false;
3026
- initial-value: 0;
3027
- }
3028
- @property --tw-translate-y {
3029
- syntax: "*";
3030
- inherits: false;
3031
- initial-value: 0;
3032
- }
3033
- @property --tw-translate-z {
3034
- syntax: "*";
3035
- inherits: false;
3036
- initial-value: 0;
3037
- }
3038
- @property --tw-leading {
3039
- syntax: "*";
3040
- inherits: false
3041
- }
3042
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2543
+
3043
2544
  .bs-context-menu {
3044
- min-width: calc(var(--spacing, .25rem) * 30);
2545
+ padding: 0.25rem 0;
2546
+ min-width: 7.5rem;
2547
+ overflow: auto;
3045
2548
  cursor: default;
3046
- padding-block: calc(var(--spacing, .25rem) * 1);
3047
2549
  min-height: auto;
3048
2550
  max-height: 500px;
3049
- 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);
3050
2556
  }
3051
2557
  .bs-context-menu > .menu {
3052
- cursor: pointer;
3053
- padding-inline: calc(var(--spacing, .25rem) * 3);
3054
- padding-block: calc(var(--spacing, .25rem) * 1.5);
3055
- white-space: nowrap;
3056
- align-items: flex-start;
2558
+ padding: 0.375rem 0.75rem;
3057
2559
  display: flex;
2560
+ align-items: flex-start;
2561
+ white-space: nowrap;
2562
+ cursor: pointer;
3058
2563
  }
3059
2564
  .bs-context-menu > .menu.disabled {
3060
- color: var(--gray-400);
2565
+ color: var(--bs-gray-400);
3061
2566
  }
3062
2567
  .bs-context-menu > .menu:not(.disabled):hover {
3063
- background-color: var(--color-hover);
2568
+ background-color: var(--bs-context-menu-item-hover-bg);
3064
2569
  }
3065
- .bs-context-menu > .menu.has-submenu:after {
2570
+ .bs-context-menu > .menu.has-submenu::after {
3066
2571
  content: "chevron_right";
3067
- right: calc(var(--spacing, .25rem) * .5);
3068
- max-width: 1em;
3069
- font-size: var(--text-base, 1rem);
3070
- line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
3071
- font-family: var(--icon-font-family);
3072
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);
3073
2578
  }
3074
2579
  .bs-context-menu > .menu.separator {
3075
- margin-block: calc(var(--spacing, .25rem) * 1);
3076
- padding: calc(var(--spacing, .25rem) * 0);
3077
- border-bottom: 1px solid var(--border);
2580
+ padding: 0;
2581
+ margin: 0.25rem 0;
2582
+ border-bottom: 1px solid var(--bs-context-menu-separator);
3078
2583
  }
3079
2584
  .bs-context-menu > .menu.no-padding {
3080
- padding: calc(var(--spacing, .25rem) * 0);
2585
+ padding: 0;
3081
2586
  }
3082
2587
  .bs-context-menu > .menu a {
3083
- width: 100%;
3084
- padding-inline: calc(var(--spacing, .25rem) * 3);
3085
- padding-block: calc(var(--spacing, .25rem) * 1.5);
3086
- color: var(--body-text);
3087
2588
  text-decoration-line: none;
2589
+ width: 100%;
2590
+ padding: 0.375rem 0.75rem;
2591
+ color: var(--bs-context-menu-text);
3088
2592
  }
3089
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2593
+
3090
2594
  .bs-context-menu-container .context-menu-curtain {
3091
- inset: calc(var(--spacing, .25rem) * 0);
3092
- z-index: 300;
3093
2595
  position: fixed;
2596
+ inset: 0;
2597
+ z-index: 300;
3094
2598
  }