@bcc-code/component-library-vue 0.0.0-dev.d519e03 → 0.0.0-dev.d6deb51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/README.md +33 -35
  2. package/dist/archivo-font/archivo-v25-latin-500.woff2 +0 -0
  3. package/dist/archivo-font/archivo-v25-latin-600.woff2 +0 -0
  4. package/dist/archivo-font/archivo-v25-latin-600italic.woff2 +0 -0
  5. package/dist/archivo-font/archivo-v25-latin-italic.woff2 +0 -0
  6. package/dist/archivo-font/archivo-v25-latin-regular.woff2 +0 -0
  7. package/dist/archivo-font.css +40 -0
  8. package/dist/component-library.js +17735 -14139
  9. package/dist/component-library.umd.cjs +2525 -1630
  10. package/dist/index.css +1 -1
  11. package/dist/library-utilities.css +2 -0
  12. package/dist/quill-BfNQeuzX.js +7524 -0
  13. package/dist/sfc-styles.css +1 -0
  14. package/dist/theme.css +1020 -963
  15. package/dist-types/components/custom/BccAppNavigation/BccAppNavigation.vue.d.ts +33 -0
  16. package/dist-types/components/custom/BccCapacityIndicator/BccCapacityIndicator.vue.d.ts +3 -0
  17. package/dist-types/components/custom/BccDialKnob/BccDialKnob.vue.d.ts +1 -1
  18. package/dist-types/components/custom/BccGraphic/BccGraphic.vue.d.ts +7 -4
  19. package/dist-types/components/custom/BccImage/BccImage.vue.d.ts +54 -0
  20. package/dist-types/components/custom/BccNpsScore/BccNpsScore.vue.d.ts +1 -1
  21. package/dist-types/components/custom/BccReact/BccReact.vue.d.ts +2 -1
  22. package/dist-types/components/custom/BccStepIndicator/BccStepIndicator.vue.d.ts +3 -3
  23. package/dist-types/components/custom/BccTag/BccTag.vue.d.ts +1 -0
  24. package/dist-types/components/custom/BccTopNavigation/BccTopNavigation.vue.d.ts +57 -0
  25. package/dist-types/components/custom/index.d.ts +6 -1
  26. package/dist-types/components/wrapped/BccButton.vue.d.ts +4 -3
  27. package/dist-types/components/wrapped/BccCheckbox.vue.d.ts +3 -0
  28. package/dist-types/components/wrapped/BccMenu/BccMenu.vue.d.ts +16 -6
  29. package/dist-types/components/wrapped/BccMessage.vue.d.ts +8 -2
  30. package/dist-types/components/wrapped/BccRadioButton.vue.d.ts +21 -0
  31. package/dist-types/components/wrapped/BccSelectButton.vue.d.ts +20 -0
  32. package/dist-types/components/wrapped/BccTabs/BccTabs.vue.d.ts +2 -0
  33. package/dist-types/components/wrapped/BccToggle/BccToggle.vue.d.ts +7 -2
  34. package/dist-types/components/wrapped/index.d.ts +4 -0
  35. package/dist-types/index.d.ts +2 -3
  36. package/dist-types/lightbox/BccLightboxMedia.vue.d.ts +18 -0
  37. package/dist-types/lightbox/composables.d.ts +23 -0
  38. package/dist-types/lightbox/detectMedia.d.ts +4 -0
  39. package/dist-types/lightbox/index.d.ts +7 -0
  40. package/dist-types/lightbox/state.d.ts +30 -0
  41. package/dist-types/lightbox/types.d.ts +24 -0
  42. package/package.json +111 -103
  43. /package/dist-types/{components/custom/BccCircleLoader/BccCircleLoader.vue.d.ts → lightbox/BccLightbox.vue.d.ts} +0 -0
package/dist/theme.css CHANGED
@@ -1,99 +1,60 @@
1
1
  /* Layer order: Tailwind base/utilities first, then PrimeVue so component styles win */
2
- @layer theme, base, tailwind, primevue;
2
+ @layer theme, base, component, library-utilities, utilities, primevue;
3
3
  @import '@bcc-code/design-tokens/css';
4
4
 
5
5
  @import 'tailwindcss';
6
6
  @import '@bcc-code/design-tokens/tailwind';
7
- @import '@bcc-code/design-tokens/primevue/overrides';
8
7
 
9
8
 
10
9
  /* === ./styles/theme.css === */
11
10
  @theme {
11
+ /* spacing variables */
12
+ --spacing-inset-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0px));
13
+ --spacing-inset-top-1: max(0.25rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
14
+ --spacing-inset-top-2: max(0.5rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
15
+ --spacing-inset-top-4: max(1rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
16
+ --spacing-inset-bottom: env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px));
17
+ --spacing-inset-bottom-1: max(0.25rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
18
+ --spacing-inset-bottom-2: max(0.5rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
19
+ --spacing-inset-bottom-4: max(1rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
20
+ --spacing-inset-left: env(safe-area-inset-left, var(--safe-area-inset-left, 0px));
21
+ --spacing-inset-right: env(safe-area-inset-right, var(--safe-area-inset-right, 0px));
22
+
23
+ --spacing-18: 4.5rem;
24
+ }
25
+
26
+ /*
27
+ * Force-emit ctx-* utilities that components construct dynamically (e.g.
28
+ * `:class="\`ctx-${context}\`"` in BccBadge, BccStepIndicator, BccCapacityIndicator).
29
+ * Tailwind cannot see those class names by scanning source, so without this list
30
+ * they would never be emitted into the utilities layer.
31
+ *
32
+ * Source of truth: the @utility ctx-* definitions in ./contexts.css (auto-generated
33
+ * by `pnpm run generate:context-css`). Keep this list in sync with that file.
34
+ */
35
+ @source inline("ctx-default ctx-{blue,brown,gray,green,magenta,orange,purple,red,teal,yellow}-{bolder,subtle,subtler,subtlest} ctx-{danger,info,success,warning}-{bolder,subtlest} ctx-brand-{bold,bolder,boldest,default,subtle,subtler,subtlest} ctx-neutral-{bold,bolder,boldest,subtle,subtler,subtlest}");
36
+
37
+ /*
38
+ * Aliases for semantic context names. Plain @apply wrappers are kept because
39
+ * `.ctx-success` etc. are aliases (point at -subtlest variants), not standalone
40
+ * @utility definitions. Wrapped in @layer utilities so they participate in the
41
+ * cascade alongside other utilities.
42
+ */
43
+ @layer utilities {
44
+ .ctx-success {
45
+ @apply ctx-success-subtlest;
46
+ }
47
+ .ctx-danger {
48
+ @apply ctx-danger-subtlest;
49
+ }
50
+ .ctx-warning {
51
+ @apply ctx-warning-subtlest;
52
+ }
53
+ .ctx-info {
54
+ @apply ctx-info-subtlest;
55
+ }
56
+ }
12
57
 
13
- /* spacing variables */
14
- --spacing-inset-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0px));
15
- --spacing-inset-top-1: max(0.25rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
16
- --spacing-inset-top-2: max(0.5rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
17
- --spacing-inset-top-4: max(1rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
18
- --spacing-inset-bottom: env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px));
19
- --spacing-inset-bottom-1: max(0.25rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
20
- --spacing-inset-bottom-2: max(0.5rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
21
- --spacing-inset-bottom-4: max(1rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
22
- --spacing-inset-left: env(safe-area-inset-left, var(--safe-area-inset-left, 0px));
23
- --spacing-inset-right: env(safe-area-inset-right, var(--safe-area-inset-right, 0px));
24
-
25
- --spacing-18: 4.5rem;
26
-
27
- /* color variables */
28
- --color-overlay: rgba(17, 24, 39, 0.85);
29
- }
30
-
31
- .ctx-default { @apply ctx-default; }
32
- .ctx-success { @apply ctx-success-subtlest; }
33
- .ctx-danger { @apply ctx-danger-subtlest; }
34
- .ctx-warning { @apply ctx-warning-subtlest; }
35
- .ctx-info { @apply ctx-info-subtlest; }
36
-
37
- .ctx-blue-bolder { @apply ctx-blue-bolder; }
38
- .ctx-blue-subtle { @apply ctx-blue-subtle; }
39
- .ctx-blue-subtler { @apply ctx-blue-subtler; }
40
- .ctx-blue-subtlest { @apply ctx-blue-subtlest; }
41
- .ctx-brand-boldest { @apply ctx-brand-boldest; }
42
- .ctx-brand-bolder { @apply ctx-brand-bolder; }
43
- .ctx-brand-bold { @apply ctx-brand-bold; }
44
- .ctx-brand-subtle { @apply ctx-brand-subtle; }
45
- .ctx-brand-subtler { @apply ctx-brand-subtler; }
46
- .ctx-brand-subtlest { @apply ctx-brand-subtlest; }
47
- .ctx-brown-bolder { @apply ctx-brown-bolder; }
48
- .ctx-brown-subtle { @apply ctx-brown-subtle; }
49
- .ctx-brown-subtler { @apply ctx-brown-subtler; }
50
- .ctx-brown-subtlest { @apply ctx-brown-subtlest; }
51
- .ctx-danger-subtlest { @apply ctx-danger; }
52
- .ctx-danger-bolder { @apply ctx-danger-bolder; }
53
- .ctx-gray-bolder { @apply ctx-gray-bolder; }
54
- .ctx-gray-subtle { @apply ctx-gray-subtle; }
55
- .ctx-gray-subtler { @apply ctx-gray-subtler; }
56
- .ctx-gray-subtlest { @apply ctx-gray-subtlest; }
57
- .ctx-green-bolder { @apply ctx-green-bolder; }
58
- .ctx-green-subtle { @apply ctx-green-subtle; }
59
- .ctx-green-subtler { @apply ctx-green-subtler; }
60
- .ctx-green-subtlest { @apply ctx-green-subtlest; }
61
- .ctx-info-subtlest { @apply ctx-info; }
62
- .ctx-info-bolder { @apply ctx-info-bolder; }
63
- .ctx-magenta-bolder { @apply ctx-magenta-bolder; }
64
- .ctx-magenta-subtle { @apply ctx-magenta-subtle; }
65
- .ctx-magenta-subtler { @apply ctx-magenta-subtler; }
66
- .ctx-magenta-subtlest { @apply ctx-magenta-subtlest; }
67
- .ctx-neutral-boldest { @apply ctx-neutral-boldest; }
68
- .ctx-neutral-bolder { @apply ctx-neutral-bolder; }
69
- .ctx-neutral-bold { @apply ctx-neutral-bold; }
70
- .ctx-neutral-subtle { @apply ctx-neutral-subtle; }
71
- .ctx-neutral-subtler { @apply ctx-neutral-subtler; }
72
- .ctx-neutral-subtlest { @apply ctx-neutral-subtlest; }
73
- .ctx-orange-bolder { @apply ctx-orange-bolder; }
74
- .ctx-orange-subtle { @apply ctx-orange-subtle; }
75
- .ctx-orange-subtler { @apply ctx-orange-subtler; }
76
- .ctx-orange-subtlest { @apply ctx-orange-subtlest; }
77
- .ctx-purple-bolder { @apply ctx-purple-bolder; }
78
- .ctx-purple-subtle { @apply ctx-purple-subtle; }
79
- .ctx-purple-subtler { @apply ctx-purple-subtler; }
80
- .ctx-purple-subtlest { @apply ctx-purple-subtlest; }
81
- .ctx-red-bolder { @apply ctx-red-bolder; }
82
- .ctx-red-subtle { @apply ctx-red-subtle; }
83
- .ctx-red-subtler { @apply ctx-red-subtler; }
84
- .ctx-red-subtlest { @apply ctx-red-subtlest; }
85
- .ctx-success-subtlest { @apply ctx-success; }
86
- .ctx-success-bolder { @apply ctx-success-bolder; }
87
- .ctx-teal-bolder { @apply ctx-teal-bolder; }
88
- .ctx-teal-subtle { @apply ctx-teal-subtle; }
89
- .ctx-teal-subtler { @apply ctx-teal-subtler; }
90
- .ctx-teal-subtlest { @apply ctx-teal-subtlest; }
91
- .ctx-warning-subtlest { @apply ctx-warning; }
92
- .ctx-warning-bolder { @apply ctx-warning-bolder; }
93
- .ctx-yellow-bolder { @apply ctx-yellow-bolder; }
94
- .ctx-yellow-subtle { @apply ctx-yellow-subtle; }
95
- .ctx-yellow-subtler { @apply ctx-yellow-subtler; }
96
- .ctx-yellow-subtlest { @apply ctx-yellow-subtlest; }
97
58
 
98
59
 
99
60
  /* === ./styles/semantic.css === */
@@ -590,78 +551,83 @@
590
551
 
591
552
  /* === ./styles/utilities.css === */
592
553
  @utility center {
593
- @apply flex items-center justify-center;
594
-
595
- &.top {
596
- @apply items-start;
597
- }
554
+ @apply flex items-center justify-center;
598
555
 
599
- &.bottom {
600
- @apply items-end;
601
- }
556
+ &.top {
557
+ @apply items-start;
558
+ }
602
559
 
603
- &.left {
604
- @apply justify-start;
605
- }
560
+ &.bottom {
561
+ @apply items-end;
562
+ }
606
563
 
607
- &.right {
608
- @apply justify-end;
609
- }
564
+ &.left {
565
+ @apply justify-start;
566
+ }
610
567
 
611
- &.stretch {
612
- @apply items-stretch;
613
- }
568
+ &.right {
569
+ @apply justify-end;
570
+ }
571
+
572
+ &.stretch {
573
+ @apply items-stretch;
574
+ }
614
575
  }
615
576
 
616
577
  @utility col {
617
- @apply flex flex-col items-center justify-center;
578
+ @apply flex flex-col items-center justify-center;
618
579
 
619
- &.left {
620
- @apply items-start;
621
- }
580
+ &.left {
581
+ @apply items-start;
582
+ }
622
583
 
623
- &.right {
624
- @apply items-end;
625
- }
584
+ &.right {
585
+ @apply items-end;
586
+ }
626
587
 
627
- &.top {
628
- @apply justify-start;
629
- }
588
+ &.top {
589
+ @apply justify-start;
590
+ }
630
591
 
631
- &.bottom {
632
- @apply justify-end;
633
- }
592
+ &.bottom {
593
+ @apply justify-end;
594
+ }
634
595
  }
635
596
 
636
597
  @utility between {
637
- @apply justify-between;
598
+ @apply justify-between;
638
599
  }
639
600
 
640
601
  @utility hide-scrollbar {
641
- -ms-overflow-style: none; /* for Internet Explorer, Edge */
642
- scrollbar-width: none; /* for Firefox */
643
- overflow-y: scroll;
602
+ -ms-overflow-style: none; /* for Internet Explorer, Edge */
603
+ scrollbar-width: none; /* for Firefox */
604
+ overflow-y: scroll;
644
605
 
645
- &::-webkit-scrollbar {
646
- display: none; /* for Chrome, Safari, and Opera */
647
- }
606
+ &::-webkit-scrollbar {
607
+ display: none; /* for Chrome, Safari, and Opera */
608
+ }
648
609
  }
649
610
 
650
611
  /* Capitalize first letter */
651
612
  @utility capital {
652
- @apply inline-block;
613
+ @apply inline-block;
653
614
 
654
- &::first-letter {
655
- text-transform: uppercase;
656
- }
615
+ &::first-letter {
616
+ text-transform: uppercase;
617
+ }
618
+
619
+ &.bcc-badge {
620
+ @apply inline-flex;
621
+ }
657
622
  }
658
623
 
659
624
  /* Inset 0 */
660
625
  @utility inset-0 {
661
- @apply left-0 right-0 top-0 bottom-0;
626
+ @apply top-0 right-0 bottom-0 left-0;
662
627
  }
663
628
 
664
629
 
630
+
665
631
  /* === ./styles/contexts.css === */
666
632
  /* Auto-generated from src/figma-modes. Do not edit by hand. */
667
633
  /* Run: pnpm run generate:context-css */
@@ -672,15 +638,11 @@
672
638
  --ctx-background: var(--color-default-neutral-0);
673
639
  --ctx-gradient: var(--color-default-neutral-100);
674
640
  --ctx-border: var(--color-default-neutral-300);
641
+ --ctx-border-bold: var(--color-default-neutral-800);
675
642
  --ctx-shadow: var(--color-neutral-alpha-500A);
676
643
  --ctx-text-hover: var(--color-default-neutral-1000);
677
- --ctx-text-pressed: var(--color-default-neutral-1000);
678
644
  --ctx-background-hover: var(--color-default-neutral-100);
679
- --ctx-background-pressed: var(--color-default-neutral-200);
680
- --ctx-gradient-hover: var(--color-default-neutral-200);
681
- --ctx-gradient-pressed: var(--color-default-neutral-200);
682
645
  --ctx-border-hover: var(--color-default-neutral-300);
683
- --ctx-border-pressed: var(--color-default-neutral-300);
684
646
  }
685
647
 
686
648
  @utility ctx-blue-bolder {
@@ -688,16 +650,12 @@
688
650
  --ctx-text-bold: var(--color-default-blue-100);
689
651
  --ctx-background: var(--color-default-blue-700);
690
652
  --ctx-gradient: var(--color-default-blue-800);
691
- --ctx-border: var(--color-default-blue-700);
653
+ --ctx-border: var(--color-default-blue-800);
654
+ --ctx-border-bold: var(--color-default-blue-600);
692
655
  --ctx-shadow: var(--color-neutral-alpha-500A);
693
656
  --ctx-text-hover: var(--color-default-blue-200);
694
- --ctx-text-pressed: var(--color-default-blue-200);
695
657
  --ctx-background-hover: var(--color-default-blue-800);
696
- --ctx-background-pressed: var(--color-default-blue-900);
697
- --ctx-gradient-hover: var(--color-default-blue-900);
698
- --ctx-gradient-pressed: var(--color-default-blue-900);
699
- --ctx-border-hover: var(--color-default-blue-700);
700
- --ctx-border-pressed: var(--color-default-blue-700);
658
+ --ctx-border-hover: var(--color-default-blue-800);
701
659
  }
702
660
 
703
661
  @utility ctx-blue-subtle {
@@ -706,15 +664,11 @@
706
664
  --ctx-background: var(--color-default-blue-400);
707
665
  --ctx-gradient: var(--color-default-blue-300);
708
666
  --ctx-border: var(--color-default-blue-500);
667
+ --ctx-border-bold: var(--color-default-blue-700);
709
668
  --ctx-shadow: var(--color-neutral-alpha-500A);
710
669
  --ctx-text-hover: var(--color-default-blue-900);
711
- --ctx-text-pressed: var(--color-default-blue-900);
712
670
  --ctx-background-hover: var(--color-default-blue-300);
713
- --ctx-background-pressed: var(--color-default-blue-200);
714
- --ctx-gradient-hover: var(--color-default-blue-200);
715
- --ctx-gradient-pressed: var(--color-default-blue-200);
716
671
  --ctx-border-hover: var(--color-default-blue-500);
717
- --ctx-border-pressed: var(--color-default-blue-500);
718
672
  }
719
673
 
720
674
  @utility ctx-blue-subtler {
@@ -722,16 +676,12 @@
722
676
  --ctx-text-bold: var(--color-default-blue-900);
723
677
  --ctx-background: var(--color-default-blue-200);
724
678
  --ctx-gradient: var(--color-default-blue-300);
725
- --ctx-border: var(--color-default-blue-400);
679
+ --ctx-border: var(--color-default-blue-300);
680
+ --ctx-border-bold: var(--color-default-blue-500);
726
681
  --ctx-shadow: var(--color-neutral-alpha-500A);
727
682
  --ctx-text-hover: var(--color-default-blue-800);
728
- --ctx-text-pressed: var(--color-default-blue-800);
729
683
  --ctx-background-hover: var(--color-default-blue-300);
730
- --ctx-background-pressed: var(--color-default-blue-400);
731
- --ctx-gradient-hover: var(--color-default-blue-400);
732
- --ctx-gradient-pressed: var(--color-default-blue-400);
733
- --ctx-border-hover: var(--color-default-blue-400);
734
- --ctx-border-pressed: var(--color-default-blue-400);
684
+ --ctx-border-hover: var(--color-default-blue-300);
735
685
  }
736
686
 
737
687
  @utility ctx-blue-subtlest {
@@ -739,16 +689,12 @@
739
689
  --ctx-text-bold: var(--color-default-blue-900);
740
690
  --ctx-background: var(--color-default-blue-100);
741
691
  --ctx-gradient: var(--color-default-blue-200);
742
- --ctx-border: var(--color-default-blue-300);
692
+ --ctx-border: var(--color-default-blue-200);
693
+ --ctx-border-bold: var(--color-default-blue-400);
743
694
  --ctx-shadow: var(--color-neutral-alpha-500A);
744
695
  --ctx-text-hover: var(--color-default-blue-800);
745
- --ctx-text-pressed: var(--color-default-blue-800);
746
696
  --ctx-background-hover: var(--color-default-blue-200);
747
- --ctx-background-pressed: var(--color-default-blue-300);
748
- --ctx-gradient-hover: var(--color-default-blue-300);
749
- --ctx-gradient-pressed: var(--color-default-blue-300);
750
- --ctx-border-hover: var(--color-default-blue-300);
751
- --ctx-border-pressed: var(--color-default-blue-300);
697
+ --ctx-border-hover: var(--color-default-blue-200);
752
698
  }
753
699
 
754
700
  @utility ctx-brand-bold {
@@ -756,33 +702,25 @@
756
702
  --ctx-text-bold: var(--color-default-neutral-100);
757
703
  --ctx-background: var(--color-default-bcc-600);
758
704
  --ctx-gradient: var(--color-default-bcc-700);
759
- --ctx-border: var(--color-default-bcc-600);
705
+ --ctx-border: var(--color-default-bcc-700);
706
+ --ctx-border-bold: var(--color-default-bcc-500);
760
707
  --ctx-shadow: var(--color-neutral-alpha-500A);
761
708
  --ctx-text-hover: var(--color-default-bcc-200);
762
- --ctx-text-pressed: var(--color-default-bcc-200);
763
709
  --ctx-background-hover: var(--color-default-bcc-700);
764
- --ctx-background-pressed: var(--color-default-bcc-800);
765
- --ctx-gradient-hover: var(--color-default-bcc-800);
766
- --ctx-gradient-pressed: var(--color-default-bcc-800);
767
- --ctx-border-hover: var(--color-default-bcc-600);
768
- --ctx-border-pressed: var(--color-default-bcc-600);
710
+ --ctx-border-hover: var(--color-default-bcc-700);
769
711
  }
770
712
 
771
713
  @utility ctx-brand-bolder {
772
- --ctx-text: var(--color-default-bcc-100);
714
+ --ctx-text: var(--color-default-neutral-0);
773
715
  --ctx-text-bold: var(--color-default-neutral-0);
774
- --ctx-background: var(--color-default-bcc-700);
775
- --ctx-gradient: var(--color-default-bcc-800);
776
- --ctx-border: var(--color-default-bcc-700);
716
+ --ctx-background: var(--color-default-bcc-800);
717
+ --ctx-gradient: var(--color-default-bcc-900);
718
+ --ctx-border: var(--color-default-bcc-900);
719
+ --ctx-border-bold: var(--color-default-bcc-700);
777
720
  --ctx-shadow: var(--color-neutral-alpha-500A);
778
- --ctx-text-hover: var(--color-default-bcc-100);
779
- --ctx-text-pressed: var(--color-default-bcc-100);
780
- --ctx-background-hover: var(--color-default-bcc-800);
781
- --ctx-background-pressed: var(--color-default-bcc-900);
782
- --ctx-gradient-hover: var(--color-default-bcc-900);
783
- --ctx-gradient-pressed: var(--color-default-bcc-900);
784
- --ctx-border-hover: var(--color-default-bcc-700);
785
- --ctx-border-pressed: var(--color-default-bcc-700);
721
+ --ctx-text-hover: var(--color-default-neutral-0);
722
+ --ctx-background-hover: var(--color-default-bcc-900);
723
+ --ctx-border-hover: var(--color-default-bcc-900);
786
724
  }
787
725
 
788
726
  @utility ctx-brand-boldest {
@@ -791,15 +729,11 @@
791
729
  --ctx-background: var(--color-default-bcc-1000);
792
730
  --ctx-gradient: var(--color-default-bcc-900);
793
731
  --ctx-border: var(--color-default-bcc-800);
732
+ --ctx-border-bold: var(--color-default-bcc-600);
794
733
  --ctx-shadow: var(--color-neutral-alpha-500A);
795
734
  --ctx-text-hover: var(--color-default-neutral-0);
796
- --ctx-text-pressed: var(--color-default-neutral-0);
797
735
  --ctx-background-hover: var(--color-default-bcc-900);
798
- --ctx-background-pressed: var(--color-default-bcc-800);
799
- --ctx-gradient-hover: var(--color-default-bcc-800);
800
- --ctx-gradient-pressed: var(--color-default-bcc-800);
801
736
  --ctx-border-hover: var(--color-default-bcc-800);
802
- --ctx-border-pressed: var(--color-default-bcc-800);
803
737
  }
804
738
 
805
739
  @utility ctx-brand-default {
@@ -808,15 +742,11 @@
808
742
  --ctx-background: var(--color-default-neutral-0);
809
743
  --ctx-gradient: var(--color-default-neutral-0);
810
744
  --ctx-border: var(--color-default-neutral-700);
745
+ --ctx-border-bold: var(--color-default-neutral-800);
811
746
  --ctx-shadow: var(--color-neutral-alpha-500A);
812
747
  --ctx-text-hover: var(--color-default-neutral-1000);
813
- --ctx-text-pressed: var(--color-default-neutral-1000);
814
748
  --ctx-background-hover: var(--color-default-neutral-0);
815
- --ctx-background-pressed: var(--color-default-neutral-0);
816
- --ctx-gradient-hover: var(--color-default-neutral-0);
817
- --ctx-gradient-pressed: var(--color-default-neutral-0);
818
749
  --ctx-border-hover: var(--color-default-neutral-700);
819
- --ctx-border-pressed: var(--color-default-neutral-700);
820
750
  }
821
751
 
822
752
  @utility ctx-brand-subtle {
@@ -825,15 +755,11 @@
825
755
  --ctx-background: var(--color-default-bcc-400);
826
756
  --ctx-gradient: var(--color-default-bcc-300);
827
757
  --ctx-border: var(--color-default-bcc-500);
758
+ --ctx-border-bold: var(--color-default-bcc-700);
828
759
  --ctx-shadow: var(--color-neutral-alpha-500A);
829
760
  --ctx-text-hover: var(--color-default-bcc-1000);
830
- --ctx-text-pressed: var(--color-default-bcc-1000);
831
761
  --ctx-background-hover: var(--color-default-bcc-300);
832
- --ctx-background-pressed: var(--color-default-bcc-200);
833
- --ctx-gradient-hover: var(--color-default-bcc-200);
834
- --ctx-gradient-pressed: var(--color-default-bcc-200);
835
762
  --ctx-border-hover: var(--color-default-bcc-500);
836
- --ctx-border-pressed: var(--color-default-bcc-500);
837
763
  }
838
764
 
839
765
  @utility ctx-brand-subtler {
@@ -841,16 +767,12 @@
841
767
  --ctx-text-bold: var(--color-default-bcc-800);
842
768
  --ctx-background: var(--color-default-bcc-200);
843
769
  --ctx-gradient: var(--color-default-bcc-300);
844
- --ctx-border: var(--color-default-bcc-400);
770
+ --ctx-border: var(--color-default-bcc-300);
771
+ --ctx-border-bold: var(--color-default-bcc-500);
845
772
  --ctx-shadow: var(--color-neutral-alpha-500A);
846
773
  --ctx-text-hover: var(--color-default-bcc-900);
847
- --ctx-text-pressed: var(--color-default-bcc-900);
848
774
  --ctx-background-hover: var(--color-default-bcc-300);
849
- --ctx-background-pressed: var(--color-default-bcc-400);
850
- --ctx-gradient-hover: var(--color-default-bcc-400);
851
- --ctx-gradient-pressed: var(--color-default-bcc-400);
852
- --ctx-border-hover: var(--color-default-bcc-400);
853
- --ctx-border-pressed: var(--color-default-bcc-400);
775
+ --ctx-border-hover: var(--color-default-bcc-300);
854
776
  }
855
777
 
856
778
  @utility ctx-brand-subtlest {
@@ -858,16 +780,12 @@
858
780
  --ctx-text-bold: var(--color-default-bcc-700);
859
781
  --ctx-background: var(--color-default-bcc-100);
860
782
  --ctx-gradient: var(--color-default-bcc-200);
861
- --ctx-border: var(--color-default-bcc-300);
783
+ --ctx-border: var(--color-default-bcc-200);
784
+ --ctx-border-bold: var(--color-default-bcc-400);
862
785
  --ctx-shadow: var(--color-neutral-alpha-500A);
863
786
  --ctx-text-hover: var(--color-default-bcc-800);
864
- --ctx-text-pressed: var(--color-default-bcc-800);
865
787
  --ctx-background-hover: var(--color-default-bcc-200);
866
- --ctx-background-pressed: var(--color-default-bcc-300);
867
- --ctx-gradient-hover: var(--color-default-bcc-300);
868
- --ctx-gradient-pressed: var(--color-default-bcc-300);
869
- --ctx-border-hover: var(--color-default-bcc-300);
870
- --ctx-border-pressed: var(--color-default-bcc-300);
788
+ --ctx-border-hover: var(--color-default-bcc-200);
871
789
  }
872
790
 
873
791
  @utility ctx-brown-bolder {
@@ -875,16 +793,12 @@
875
793
  --ctx-text-bold: var(--color-default-brown-100);
876
794
  --ctx-background: var(--color-default-brown-700);
877
795
  --ctx-gradient: var(--color-default-brown-800);
878
- --ctx-border: var(--color-default-brown-700);
796
+ --ctx-border: var(--color-default-brown-800);
797
+ --ctx-border-bold: var(--color-default-brown-600);
879
798
  --ctx-shadow: var(--color-neutral-alpha-500A);
880
799
  --ctx-text-hover: var(--color-default-brown-200);
881
- --ctx-text-pressed: var(--color-default-brown-200);
882
800
  --ctx-background-hover: var(--color-default-brown-800);
883
- --ctx-background-pressed: var(--color-default-brown-900);
884
- --ctx-gradient-hover: var(--color-default-brown-900);
885
- --ctx-gradient-pressed: var(--color-default-brown-900);
886
- --ctx-border-hover: var(--color-default-brown-700);
887
- --ctx-border-pressed: var(--color-default-brown-700);
801
+ --ctx-border-hover: var(--color-default-brown-800);
888
802
  }
889
803
 
890
804
  @utility ctx-brown-subtle {
@@ -893,15 +807,11 @@
893
807
  --ctx-background: var(--color-default-brown-400);
894
808
  --ctx-gradient: var(--color-default-brown-300);
895
809
  --ctx-border: var(--color-default-brown-500);
810
+ --ctx-border-bold: var(--color-default-brown-700);
896
811
  --ctx-shadow: var(--color-neutral-alpha-500A);
897
812
  --ctx-text-hover: var(--color-default-brown-900);
898
- --ctx-text-pressed: var(--color-default-brown-900);
899
813
  --ctx-background-hover: var(--color-default-brown-300);
900
- --ctx-background-pressed: var(--color-default-brown-200);
901
- --ctx-gradient-hover: var(--color-default-brown-200);
902
- --ctx-gradient-pressed: var(--color-default-brown-200);
903
814
  --ctx-border-hover: var(--color-default-brown-500);
904
- --ctx-border-pressed: var(--color-default-brown-500);
905
815
  }
906
816
 
907
817
  @utility ctx-brown-subtler {
@@ -909,16 +819,12 @@
909
819
  --ctx-text-bold: var(--color-default-brown-900);
910
820
  --ctx-background: var(--color-default-brown-200);
911
821
  --ctx-gradient: var(--color-default-brown-300);
912
- --ctx-border: var(--color-default-brown-400);
822
+ --ctx-border: var(--color-default-brown-300);
823
+ --ctx-border-bold: var(--color-default-brown-500);
913
824
  --ctx-shadow: var(--color-neutral-alpha-500A);
914
825
  --ctx-text-hover: var(--color-default-brown-800);
915
- --ctx-text-pressed: var(--color-default-brown-800);
916
826
  --ctx-background-hover: var(--color-default-brown-300);
917
- --ctx-background-pressed: var(--color-default-brown-400);
918
- --ctx-gradient-hover: var(--color-default-brown-400);
919
- --ctx-gradient-pressed: var(--color-default-brown-400);
920
- --ctx-border-hover: var(--color-default-brown-400);
921
- --ctx-border-pressed: var(--color-default-brown-400);
827
+ --ctx-border-hover: var(--color-default-brown-300);
922
828
  }
923
829
 
924
830
  @utility ctx-brown-subtlest {
@@ -926,16 +832,12 @@
926
832
  --ctx-text-bold: var(--color-default-brown-900);
927
833
  --ctx-background: var(--color-default-brown-100);
928
834
  --ctx-gradient: var(--color-default-brown-200);
929
- --ctx-border: var(--color-default-brown-300);
835
+ --ctx-border: var(--color-default-brown-200);
836
+ --ctx-border-bold: var(--color-default-brown-400);
930
837
  --ctx-shadow: var(--color-neutral-alpha-500A);
931
838
  --ctx-text-hover: var(--color-default-brown-800);
932
- --ctx-text-pressed: var(--color-default-brown-800);
933
839
  --ctx-background-hover: var(--color-default-brown-200);
934
- --ctx-background-pressed: var(--color-default-brown-300);
935
- --ctx-gradient-hover: var(--color-default-brown-300);
936
- --ctx-gradient-pressed: var(--color-default-brown-300);
937
- --ctx-border-hover: var(--color-default-brown-300);
938
- --ctx-border-pressed: var(--color-default-brown-300);
840
+ --ctx-border-hover: var(--color-default-brown-200);
939
841
  }
940
842
 
941
843
  @utility ctx-danger-bolder {
@@ -944,15 +846,11 @@
944
846
  --ctx-background: var(--color-default-red-700);
945
847
  --ctx-gradient: var(--color-default-red-800);
946
848
  --ctx-border: var(--color-default-red-700);
849
+ --ctx-border-bold: var(--color-default-red-400);
947
850
  --ctx-shadow: var(--color-neutral-alpha-500A);
948
851
  --ctx-text-hover: var(--color-default-red-200);
949
- --ctx-text-pressed: var(--color-default-red-200);
950
852
  --ctx-background-hover: var(--color-default-red-800);
951
- --ctx-background-pressed: var(--color-default-red-900);
952
- --ctx-gradient-hover: var(--color-default-red-900);
953
- --ctx-gradient-pressed: var(--color-default-red-900);
954
853
  --ctx-border-hover: var(--color-default-red-700);
955
- --ctx-border-pressed: var(--color-default-red-700);
956
854
  }
957
855
 
958
856
  @utility ctx-danger-subtlest {
@@ -961,32 +859,24 @@
961
859
  --ctx-background: var(--color-default-red-100);
962
860
  --ctx-gradient: var(--color-default-red-200);
963
861
  --ctx-border: var(--color-default-red-300);
862
+ --ctx-border-bold: var(--color-default-red-800);
964
863
  --ctx-shadow: var(--color-neutral-alpha-500A);
965
864
  --ctx-text-hover: var(--color-default-red-800);
966
- --ctx-text-pressed: var(--color-default-red-800);
967
865
  --ctx-background-hover: var(--color-default-red-200);
968
- --ctx-background-pressed: var(--color-default-red-300);
969
- --ctx-gradient-hover: var(--color-default-red-300);
970
- --ctx-gradient-pressed: var(--color-default-red-300);
971
866
  --ctx-border-hover: var(--color-default-red-300);
972
- --ctx-border-pressed: var(--color-default-red-300);
973
867
  }
974
868
 
975
869
  @utility ctx-gray-bolder {
976
870
  --ctx-text: var(--color-default-neutral-200);
977
871
  --ctx-text-bold: var(--color-default-neutral-100);
978
- --ctx-background: var(--color-default-neutral-800);
979
- --ctx-gradient: var(--color-default-neutral-700);
980
- --ctx-border: var(--color-default-neutral-700);
872
+ --ctx-background: var(--color-default-neutral-700);
873
+ --ctx-gradient: var(--color-default-neutral-800);
874
+ --ctx-border: var(--color-default-neutral-800);
875
+ --ctx-border-bold: var(--color-default-neutral-600);
981
876
  --ctx-shadow: var(--color-neutral-alpha-500A);
982
877
  --ctx-text-hover: var(--color-default-neutral-200);
983
- --ctx-text-pressed: var(--color-default-neutral-200);
984
- --ctx-background-hover: var(--color-default-neutral-700);
985
- --ctx-background-pressed: var(--color-default-neutral-600);
986
- --ctx-gradient-hover: var(--color-default-neutral-600);
987
- --ctx-gradient-pressed: var(--color-default-neutral-600);
988
- --ctx-border-hover: var(--color-default-neutral-700);
989
- --ctx-border-pressed: var(--color-default-neutral-700);
878
+ --ctx-background-hover: var(--color-default-neutral-800);
879
+ --ctx-border-hover: var(--color-default-neutral-800);
990
880
  }
991
881
 
992
882
  @utility ctx-gray-subtle {
@@ -995,15 +885,11 @@
995
885
  --ctx-background: var(--color-default-neutral-400);
996
886
  --ctx-gradient: var(--color-default-neutral-300);
997
887
  --ctx-border: var(--color-default-neutral-500);
888
+ --ctx-border-bold: var(--color-default-neutral-700);
998
889
  --ctx-shadow: var(--color-neutral-alpha-500A);
999
890
  --ctx-text-hover: var(--color-default-neutral-900);
1000
- --ctx-text-pressed: var(--color-default-neutral-900);
1001
891
  --ctx-background-hover: var(--color-default-neutral-300);
1002
- --ctx-background-pressed: var(--color-default-neutral-200);
1003
- --ctx-gradient-hover: var(--color-default-neutral-200);
1004
- --ctx-gradient-pressed: var(--color-default-neutral-200);
1005
892
  --ctx-border-hover: var(--color-default-neutral-500);
1006
- --ctx-border-pressed: var(--color-default-neutral-500);
1007
893
  }
1008
894
 
1009
895
  @utility ctx-gray-subtler {
@@ -1011,16 +897,12 @@
1011
897
  --ctx-text-bold: var(--color-default-neutral-900);
1012
898
  --ctx-background: var(--color-default-neutral-200);
1013
899
  --ctx-gradient: var(--color-default-neutral-300);
1014
- --ctx-border: var(--color-default-neutral-400);
900
+ --ctx-border: var(--color-default-neutral-300);
901
+ --ctx-border-bold: var(--color-default-neutral-500);
1015
902
  --ctx-shadow: var(--color-neutral-alpha-500A);
1016
903
  --ctx-text-hover: var(--color-default-neutral-800);
1017
- --ctx-text-pressed: var(--color-default-neutral-800);
1018
904
  --ctx-background-hover: var(--color-default-neutral-300);
1019
- --ctx-background-pressed: var(--color-default-neutral-400);
1020
- --ctx-gradient-hover: var(--color-default-neutral-400);
1021
- --ctx-gradient-pressed: var(--color-default-neutral-400);
1022
- --ctx-border-hover: var(--color-default-neutral-400);
1023
- --ctx-border-pressed: var(--color-default-neutral-400);
905
+ --ctx-border-hover: var(--color-default-neutral-300);
1024
906
  }
1025
907
 
1026
908
  @utility ctx-gray-subtlest {
@@ -1028,16 +910,12 @@
1028
910
  --ctx-text-bold: var(--color-default-neutral-900);
1029
911
  --ctx-background: var(--color-default-neutral-100);
1030
912
  --ctx-gradient: var(--color-default-neutral-200);
1031
- --ctx-border: var(--color-default-neutral-300);
913
+ --ctx-border: var(--color-default-neutral-200);
914
+ --ctx-border-bold: var(--color-default-neutral-400);
1032
915
  --ctx-shadow: var(--color-neutral-alpha-500A);
1033
916
  --ctx-text-hover: var(--color-default-neutral-800);
1034
- --ctx-text-pressed: var(--color-default-neutral-800);
1035
917
  --ctx-background-hover: var(--color-default-neutral-200);
1036
- --ctx-background-pressed: var(--color-default-neutral-300);
1037
- --ctx-gradient-hover: var(--color-default-neutral-300);
1038
- --ctx-gradient-pressed: var(--color-default-neutral-300);
1039
- --ctx-border-hover: var(--color-default-neutral-300);
1040
- --ctx-border-pressed: var(--color-default-neutral-300);
918
+ --ctx-border-hover: var(--color-default-neutral-200);
1041
919
  }
1042
920
 
1043
921
  @utility ctx-green-bolder {
@@ -1045,16 +923,12 @@
1045
923
  --ctx-text-bold: var(--color-default-green-100);
1046
924
  --ctx-background: var(--color-default-green-700);
1047
925
  --ctx-gradient: var(--color-default-green-800);
1048
- --ctx-border: var(--color-default-green-700);
926
+ --ctx-border: var(--color-default-green-800);
927
+ --ctx-border-bold: var(--color-default-green-600);
1049
928
  --ctx-shadow: var(--color-neutral-alpha-500A);
1050
929
  --ctx-text-hover: var(--color-default-green-200);
1051
- --ctx-text-pressed: var(--color-default-green-200);
1052
930
  --ctx-background-hover: var(--color-default-green-800);
1053
- --ctx-background-pressed: var(--color-default-green-900);
1054
- --ctx-gradient-hover: var(--color-default-green-900);
1055
- --ctx-gradient-pressed: var(--color-default-green-900);
1056
- --ctx-border-hover: var(--color-default-green-700);
1057
- --ctx-border-pressed: var(--color-default-green-700);
931
+ --ctx-border-hover: var(--color-default-green-800);
1058
932
  }
1059
933
 
1060
934
  @utility ctx-green-subtle {
@@ -1063,15 +937,11 @@
1063
937
  --ctx-background: var(--color-default-green-400);
1064
938
  --ctx-gradient: var(--color-default-green-300);
1065
939
  --ctx-border: var(--color-default-green-500);
940
+ --ctx-border-bold: var(--color-default-green-700);
1066
941
  --ctx-shadow: var(--color-neutral-alpha-500A);
1067
942
  --ctx-text-hover: var(--color-default-green-900);
1068
- --ctx-text-pressed: var(--color-default-green-900);
1069
943
  --ctx-background-hover: var(--color-default-green-300);
1070
- --ctx-background-pressed: var(--color-default-green-200);
1071
- --ctx-gradient-hover: var(--color-default-green-200);
1072
- --ctx-gradient-pressed: var(--color-default-green-200);
1073
944
  --ctx-border-hover: var(--color-default-green-500);
1074
- --ctx-border-pressed: var(--color-default-green-500);
1075
945
  }
1076
946
 
1077
947
  @utility ctx-green-subtler {
@@ -1079,16 +949,12 @@
1079
949
  --ctx-text-bold: var(--color-default-green-900);
1080
950
  --ctx-background: var(--color-default-green-200);
1081
951
  --ctx-gradient: var(--color-default-green-300);
1082
- --ctx-border: var(--color-default-green-400);
952
+ --ctx-border: var(--color-default-green-300);
953
+ --ctx-border-bold: var(--color-default-green-500);
1083
954
  --ctx-shadow: var(--color-neutral-alpha-500A);
1084
955
  --ctx-text-hover: var(--color-default-green-800);
1085
- --ctx-text-pressed: var(--color-default-green-800);
1086
956
  --ctx-background-hover: var(--color-default-green-300);
1087
- --ctx-background-pressed: var(--color-default-green-400);
1088
- --ctx-gradient-hover: var(--color-default-green-400);
1089
- --ctx-gradient-pressed: var(--color-default-green-400);
1090
- --ctx-border-hover: var(--color-default-green-400);
1091
- --ctx-border-pressed: var(--color-default-green-400);
957
+ --ctx-border-hover: var(--color-default-green-300);
1092
958
  }
1093
959
 
1094
960
  @utility ctx-green-subtlest {
@@ -1096,16 +962,12 @@
1096
962
  --ctx-text-bold: var(--color-default-green-900);
1097
963
  --ctx-background: var(--color-default-green-100);
1098
964
  --ctx-gradient: var(--color-default-green-200);
1099
- --ctx-border: var(--color-default-green-300);
965
+ --ctx-border: var(--color-default-green-200);
966
+ --ctx-border-bold: var(--color-default-green-400);
1100
967
  --ctx-shadow: var(--color-neutral-alpha-500A);
1101
968
  --ctx-text-hover: var(--color-default-green-800);
1102
- --ctx-text-pressed: var(--color-default-green-800);
1103
969
  --ctx-background-hover: var(--color-default-green-200);
1104
- --ctx-background-pressed: var(--color-default-green-300);
1105
- --ctx-gradient-hover: var(--color-default-green-300);
1106
- --ctx-gradient-pressed: var(--color-default-green-300);
1107
- --ctx-border-hover: var(--color-default-green-300);
1108
- --ctx-border-pressed: var(--color-default-green-300);
970
+ --ctx-border-hover: var(--color-default-green-200);
1109
971
  }
1110
972
 
1111
973
  @utility ctx-info-bolder {
@@ -1114,15 +976,11 @@
1114
976
  --ctx-background: var(--color-default-blue-700);
1115
977
  --ctx-gradient: var(--color-default-blue-800);
1116
978
  --ctx-border: var(--color-default-blue-700);
979
+ --ctx-border-bold: var(--color-default-blue-400);
1117
980
  --ctx-shadow: var(--color-neutral-alpha-500A);
1118
981
  --ctx-text-hover: var(--color-default-blue-200);
1119
- --ctx-text-pressed: var(--color-default-blue-200);
1120
982
  --ctx-background-hover: var(--color-default-blue-800);
1121
- --ctx-background-pressed: var(--color-default-blue-900);
1122
- --ctx-gradient-hover: var(--color-default-blue-900);
1123
- --ctx-gradient-pressed: var(--color-default-blue-900);
1124
983
  --ctx-border-hover: var(--color-default-blue-700);
1125
- --ctx-border-pressed: var(--color-default-blue-700);
1126
984
  }
1127
985
 
1128
986
  @utility ctx-info-subtlest {
@@ -1131,15 +989,11 @@
1131
989
  --ctx-background: var(--color-default-blue-100);
1132
990
  --ctx-gradient: var(--color-default-blue-200);
1133
991
  --ctx-border: var(--color-default-blue-300);
992
+ --ctx-border-bold: var(--color-default-blue-800);
1134
993
  --ctx-shadow: var(--color-neutral-alpha-500A);
1135
994
  --ctx-text-hover: var(--color-default-blue-800);
1136
- --ctx-text-pressed: var(--color-default-blue-800);
1137
995
  --ctx-background-hover: var(--color-default-blue-200);
1138
- --ctx-background-pressed: var(--color-default-blue-300);
1139
- --ctx-gradient-hover: var(--color-default-blue-300);
1140
- --ctx-gradient-pressed: var(--color-default-blue-300);
1141
996
  --ctx-border-hover: var(--color-default-blue-300);
1142
- --ctx-border-pressed: var(--color-default-blue-300);
1143
997
  }
1144
998
 
1145
999
  @utility ctx-magenta-bolder {
@@ -1147,16 +1001,12 @@
1147
1001
  --ctx-text-bold: var(--color-default-magenta-100);
1148
1002
  --ctx-background: var(--color-default-magenta-700);
1149
1003
  --ctx-gradient: var(--color-default-magenta-800);
1150
- --ctx-border: var(--color-default-magenta-700);
1004
+ --ctx-border: var(--color-default-magenta-800);
1005
+ --ctx-border-bold: var(--color-default-magenta-600);
1151
1006
  --ctx-shadow: var(--color-neutral-alpha-500A);
1152
1007
  --ctx-text-hover: var(--color-default-magenta-200);
1153
- --ctx-text-pressed: var(--color-default-magenta-200);
1154
1008
  --ctx-background-hover: var(--color-default-magenta-800);
1155
- --ctx-background-pressed: var(--color-default-magenta-900);
1156
- --ctx-gradient-hover: var(--color-default-magenta-900);
1157
- --ctx-gradient-pressed: var(--color-default-magenta-900);
1158
- --ctx-border-hover: var(--color-default-magenta-700);
1159
- --ctx-border-pressed: var(--color-default-magenta-700);
1009
+ --ctx-border-hover: var(--color-default-magenta-800);
1160
1010
  }
1161
1011
 
1162
1012
  @utility ctx-magenta-subtle {
@@ -1165,15 +1015,11 @@
1165
1015
  --ctx-background: var(--color-default-magenta-400);
1166
1016
  --ctx-gradient: var(--color-default-magenta-300);
1167
1017
  --ctx-border: var(--color-default-magenta-500);
1018
+ --ctx-border-bold: var(--color-default-magenta-700);
1168
1019
  --ctx-shadow: var(--color-neutral-alpha-500A);
1169
1020
  --ctx-text-hover: var(--color-default-magenta-900);
1170
- --ctx-text-pressed: var(--color-default-magenta-900);
1171
1021
  --ctx-background-hover: var(--color-default-magenta-300);
1172
- --ctx-background-pressed: var(--color-default-magenta-200);
1173
- --ctx-gradient-hover: var(--color-default-magenta-200);
1174
- --ctx-gradient-pressed: var(--color-default-magenta-200);
1175
1022
  --ctx-border-hover: var(--color-default-magenta-500);
1176
- --ctx-border-pressed: var(--color-default-magenta-500);
1177
1023
  }
1178
1024
 
1179
1025
  @utility ctx-magenta-subtler {
@@ -1181,16 +1027,12 @@
1181
1027
  --ctx-text-bold: var(--color-default-magenta-900);
1182
1028
  --ctx-background: var(--color-default-magenta-200);
1183
1029
  --ctx-gradient: var(--color-default-magenta-300);
1184
- --ctx-border: var(--color-default-magenta-400);
1030
+ --ctx-border: var(--color-default-magenta-300);
1031
+ --ctx-border-bold: var(--color-default-magenta-500);
1185
1032
  --ctx-shadow: var(--color-neutral-alpha-500A);
1186
1033
  --ctx-text-hover: var(--color-default-magenta-800);
1187
- --ctx-text-pressed: var(--color-default-magenta-800);
1188
1034
  --ctx-background-hover: var(--color-default-magenta-300);
1189
- --ctx-background-pressed: var(--color-default-magenta-400);
1190
- --ctx-gradient-hover: var(--color-default-magenta-400);
1191
- --ctx-gradient-pressed: var(--color-default-magenta-400);
1192
- --ctx-border-hover: var(--color-default-magenta-400);
1193
- --ctx-border-pressed: var(--color-default-magenta-400);
1035
+ --ctx-border-hover: var(--color-default-magenta-300);
1194
1036
  }
1195
1037
 
1196
1038
  @utility ctx-magenta-subtlest {
@@ -1198,16 +1040,12 @@
1198
1040
  --ctx-text-bold: var(--color-default-magenta-900);
1199
1041
  --ctx-background: var(--color-default-magenta-100);
1200
1042
  --ctx-gradient: var(--color-default-magenta-200);
1201
- --ctx-border: var(--color-default-magenta-300);
1043
+ --ctx-border: var(--color-default-magenta-200);
1044
+ --ctx-border-bold: var(--color-default-magenta-400);
1202
1045
  --ctx-shadow: var(--color-neutral-alpha-500A);
1203
1046
  --ctx-text-hover: var(--color-default-magenta-800);
1204
- --ctx-text-pressed: var(--color-default-magenta-800);
1205
1047
  --ctx-background-hover: var(--color-default-magenta-200);
1206
- --ctx-background-pressed: var(--color-default-magenta-300);
1207
- --ctx-gradient-hover: var(--color-default-magenta-300);
1208
- --ctx-gradient-pressed: var(--color-default-magenta-300);
1209
- --ctx-border-hover: var(--color-default-magenta-300);
1210
- --ctx-border-pressed: var(--color-default-magenta-300);
1048
+ --ctx-border-hover: var(--color-default-magenta-200);
1211
1049
  }
1212
1050
 
1213
1051
  @utility ctx-neutral-bold {
@@ -1216,15 +1054,11 @@
1216
1054
  --ctx-background: var(--color-default-neutral-900);
1217
1055
  --ctx-gradient: var(--color-default-neutral-800);
1218
1056
  --ctx-border: var(--color-default-neutral-600);
1057
+ --ctx-border-bold: var(--color-default-neutral-500);
1219
1058
  --ctx-shadow: var(--color-neutral-alpha-500A);
1220
1059
  --ctx-text-hover: var(--color-default-neutral-300);
1221
- --ctx-text-pressed: var(--color-default-neutral-300);
1222
1060
  --ctx-background-hover: var(--color-default-neutral-800);
1223
- --ctx-background-pressed: var(--color-default-neutral-700);
1224
- --ctx-gradient-hover: var(--color-default-neutral-700);
1225
- --ctx-gradient-pressed: var(--color-default-neutral-700);
1226
1061
  --ctx-border-hover: var(--color-default-neutral-600);
1227
- --ctx-border-pressed: var(--color-default-neutral-600);
1228
1062
  }
1229
1063
 
1230
1064
  @utility ctx-neutral-bolder {
@@ -1233,15 +1067,11 @@
1233
1067
  --ctx-background: var(--color-default-neutral-1000);
1234
1068
  --ctx-gradient: var(--color-default-neutral-900);
1235
1069
  --ctx-border: var(--color-default-neutral-700);
1070
+ --ctx-border-bold: var(--color-default-neutral-400);
1236
1071
  --ctx-shadow: var(--color-neutral-alpha-500A);
1237
1072
  --ctx-text-hover: var(--color-default-neutral-200);
1238
- --ctx-text-pressed: var(--color-default-neutral-200);
1239
1073
  --ctx-background-hover: var(--color-default-neutral-900);
1240
- --ctx-background-pressed: var(--color-default-neutral-800);
1241
- --ctx-gradient-hover: var(--color-default-neutral-800);
1242
- --ctx-gradient-pressed: var(--color-default-neutral-800);
1243
1074
  --ctx-border-hover: var(--color-default-neutral-700);
1244
- --ctx-border-pressed: var(--color-default-neutral-700);
1245
1075
  }
1246
1076
 
1247
1077
  @utility ctx-neutral-boldest {
@@ -1250,15 +1080,11 @@
1250
1080
  --ctx-background: var(--color-default-neutral-1100);
1251
1081
  --ctx-gradient: var(--color-default-neutral-1000);
1252
1082
  --ctx-border: var(--color-default-neutral-800);
1083
+ --ctx-border-bold: var(--color-default-neutral-300);
1253
1084
  --ctx-shadow: var(--color-neutral-alpha-500A);
1254
1085
  --ctx-text-hover: var(--color-default-neutral-100);
1255
- --ctx-text-pressed: var(--color-default-neutral-100);
1256
1086
  --ctx-background-hover: var(--color-default-neutral-1000);
1257
- --ctx-background-pressed: var(--color-default-neutral-900);
1258
- --ctx-gradient-hover: var(--color-default-neutral-900);
1259
- --ctx-gradient-pressed: var(--color-default-neutral-900);
1260
1087
  --ctx-border-hover: var(--color-default-neutral-800);
1261
- --ctx-border-pressed: var(--color-default-neutral-800);
1262
1088
  }
1263
1089
 
1264
1090
  @utility ctx-neutral-subtle {
@@ -1267,15 +1093,11 @@
1267
1093
  --ctx-background: var(--color-default-neutral-200);
1268
1094
  --ctx-gradient: var(--color-default-neutral-300);
1269
1095
  --ctx-border: var(--color-default-neutral-500);
1096
+ --ctx-border-bold: var(--color-default-neutral-600);
1270
1097
  --ctx-shadow: var(--color-neutral-alpha-500A);
1271
1098
  --ctx-text-hover: var(--color-default-neutral-800);
1272
- --ctx-text-pressed: var(--color-default-neutral-800);
1273
1099
  --ctx-background-hover: var(--color-default-neutral-300);
1274
- --ctx-background-pressed: var(--color-default-neutral-400);
1275
- --ctx-gradient-hover: var(--color-default-neutral-400);
1276
- --ctx-gradient-pressed: var(--color-default-neutral-400);
1277
1100
  --ctx-border-hover: var(--color-default-neutral-500);
1278
- --ctx-border-pressed: var(--color-default-neutral-500);
1279
1101
  }
1280
1102
 
1281
1103
  @utility ctx-neutral-subtler {
@@ -1284,15 +1106,11 @@
1284
1106
  --ctx-background: var(--color-default-neutral-100);
1285
1107
  --ctx-gradient: var(--color-default-neutral-200);
1286
1108
  --ctx-border: var(--color-default-neutral-400);
1109
+ --ctx-border-bold: var(--color-default-neutral-700);
1287
1110
  --ctx-shadow: var(--color-neutral-alpha-500A);
1288
1111
  --ctx-text-hover: var(--color-default-neutral-900);
1289
- --ctx-text-pressed: var(--color-default-neutral-900);
1290
1112
  --ctx-background-hover: var(--color-default-neutral-200);
1291
- --ctx-background-pressed: var(--color-default-neutral-300);
1292
- --ctx-gradient-hover: var(--color-default-neutral-300);
1293
- --ctx-gradient-pressed: var(--color-default-neutral-300);
1294
1113
  --ctx-border-hover: var(--color-default-neutral-400);
1295
- --ctx-border-pressed: var(--color-default-neutral-400);
1296
1114
  }
1297
1115
 
1298
1116
  @utility ctx-neutral-subtlest {
@@ -1301,15 +1119,11 @@
1301
1119
  --ctx-background: var(--color-default-neutral-0);
1302
1120
  --ctx-gradient: var(--color-default-neutral-100);
1303
1121
  --ctx-border: var(--color-default-neutral-300);
1122
+ --ctx-border-bold: var(--color-default-neutral-800);
1304
1123
  --ctx-shadow: var(--color-neutral-alpha-500A);
1305
1124
  --ctx-text-hover: var(--color-default-neutral-1000);
1306
- --ctx-text-pressed: var(--color-default-neutral-1000);
1307
1125
  --ctx-background-hover: var(--color-default-neutral-100);
1308
- --ctx-background-pressed: var(--color-default-neutral-200);
1309
- --ctx-gradient-hover: var(--color-default-neutral-200);
1310
- --ctx-gradient-pressed: var(--color-default-neutral-200);
1311
1126
  --ctx-border-hover: var(--color-default-neutral-300);
1312
- --ctx-border-pressed: var(--color-default-neutral-300);
1313
1127
  }
1314
1128
 
1315
1129
  @utility ctx-orange-bolder {
@@ -1317,16 +1131,12 @@
1317
1131
  --ctx-text-bold: var(--color-default-orange-100);
1318
1132
  --ctx-background: var(--color-default-orange-700);
1319
1133
  --ctx-gradient: var(--color-default-orange-800);
1320
- --ctx-border: var(--color-default-orange-700);
1134
+ --ctx-border: var(--color-default-orange-800);
1135
+ --ctx-border-bold: var(--color-default-orange-600);
1321
1136
  --ctx-shadow: var(--color-neutral-alpha-500A);
1322
1137
  --ctx-text-hover: var(--color-default-orange-200);
1323
- --ctx-text-pressed: var(--color-default-orange-200);
1324
1138
  --ctx-background-hover: var(--color-default-orange-800);
1325
- --ctx-background-pressed: var(--color-default-orange-900);
1326
- --ctx-gradient-hover: var(--color-default-orange-900);
1327
- --ctx-gradient-pressed: var(--color-default-orange-900);
1328
- --ctx-border-hover: var(--color-default-orange-700);
1329
- --ctx-border-pressed: var(--color-default-orange-700);
1139
+ --ctx-border-hover: var(--color-default-orange-800);
1330
1140
  }
1331
1141
 
1332
1142
  @utility ctx-orange-subtle {
@@ -1335,15 +1145,11 @@
1335
1145
  --ctx-background: var(--color-default-orange-400);
1336
1146
  --ctx-gradient: var(--color-default-orange-300);
1337
1147
  --ctx-border: var(--color-default-orange-500);
1148
+ --ctx-border-bold: var(--color-default-orange-700);
1338
1149
  --ctx-shadow: var(--color-neutral-alpha-500A);
1339
1150
  --ctx-text-hover: var(--color-default-orange-900);
1340
- --ctx-text-pressed: var(--color-default-orange-900);
1341
1151
  --ctx-background-hover: var(--color-default-orange-300);
1342
- --ctx-background-pressed: var(--color-default-orange-200);
1343
- --ctx-gradient-hover: var(--color-default-orange-200);
1344
- --ctx-gradient-pressed: var(--color-default-orange-200);
1345
1152
  --ctx-border-hover: var(--color-default-orange-500);
1346
- --ctx-border-pressed: var(--color-default-orange-500);
1347
1153
  }
1348
1154
 
1349
1155
  @utility ctx-orange-subtler {
@@ -1351,16 +1157,12 @@
1351
1157
  --ctx-text-bold: var(--color-default-orange-900);
1352
1158
  --ctx-background: var(--color-default-orange-200);
1353
1159
  --ctx-gradient: var(--color-default-orange-300);
1354
- --ctx-border: var(--color-default-orange-400);
1160
+ --ctx-border: var(--color-default-orange-300);
1161
+ --ctx-border-bold: var(--color-default-orange-500);
1355
1162
  --ctx-shadow: var(--color-neutral-alpha-500A);
1356
1163
  --ctx-text-hover: var(--color-default-orange-800);
1357
- --ctx-text-pressed: var(--color-default-orange-800);
1358
1164
  --ctx-background-hover: var(--color-default-orange-300);
1359
- --ctx-background-pressed: var(--color-default-orange-400);
1360
- --ctx-gradient-hover: var(--color-default-orange-400);
1361
- --ctx-gradient-pressed: var(--color-default-orange-400);
1362
- --ctx-border-hover: var(--color-default-orange-400);
1363
- --ctx-border-pressed: var(--color-default-orange-400);
1165
+ --ctx-border-hover: var(--color-default-orange-300);
1364
1166
  }
1365
1167
 
1366
1168
  @utility ctx-orange-subtlest {
@@ -1368,16 +1170,12 @@
1368
1170
  --ctx-text-bold: var(--color-default-orange-900);
1369
1171
  --ctx-background: var(--color-default-orange-100);
1370
1172
  --ctx-gradient: var(--color-default-orange-200);
1371
- --ctx-border: var(--color-default-orange-300);
1173
+ --ctx-border: var(--color-default-orange-200);
1174
+ --ctx-border-bold: var(--color-default-orange-400);
1372
1175
  --ctx-shadow: var(--color-neutral-alpha-500A);
1373
1176
  --ctx-text-hover: var(--color-default-orange-800);
1374
- --ctx-text-pressed: var(--color-default-orange-800);
1375
1177
  --ctx-background-hover: var(--color-default-orange-200);
1376
- --ctx-background-pressed: var(--color-default-orange-300);
1377
- --ctx-gradient-hover: var(--color-default-orange-300);
1378
- --ctx-gradient-pressed: var(--color-default-orange-300);
1379
- --ctx-border-hover: var(--color-default-orange-300);
1380
- --ctx-border-pressed: var(--color-default-orange-300);
1178
+ --ctx-border-hover: var(--color-default-orange-200);
1381
1179
  }
1382
1180
 
1383
1181
  @utility ctx-purple-bolder {
@@ -1385,16 +1183,12 @@
1385
1183
  --ctx-text-bold: var(--color-default-purple-100);
1386
1184
  --ctx-background: var(--color-default-purple-700);
1387
1185
  --ctx-gradient: var(--color-default-purple-800);
1388
- --ctx-border: var(--color-default-purple-700);
1186
+ --ctx-border: var(--color-default-purple-800);
1187
+ --ctx-border-bold: var(--color-default-purple-600);
1389
1188
  --ctx-shadow: var(--color-neutral-alpha-500A);
1390
1189
  --ctx-text-hover: var(--color-default-purple-200);
1391
- --ctx-text-pressed: var(--color-default-purple-200);
1392
1190
  --ctx-background-hover: var(--color-default-purple-800);
1393
- --ctx-background-pressed: var(--color-default-purple-900);
1394
- --ctx-gradient-hover: var(--color-default-purple-900);
1395
- --ctx-gradient-pressed: var(--color-default-purple-900);
1396
- --ctx-border-hover: var(--color-default-purple-700);
1397
- --ctx-border-pressed: var(--color-default-purple-700);
1191
+ --ctx-border-hover: var(--color-default-purple-800);
1398
1192
  }
1399
1193
 
1400
1194
  @utility ctx-purple-subtle {
@@ -1403,15 +1197,11 @@
1403
1197
  --ctx-background: var(--color-default-purple-400);
1404
1198
  --ctx-gradient: var(--color-default-purple-300);
1405
1199
  --ctx-border: var(--color-default-purple-500);
1200
+ --ctx-border-bold: var(--color-default-purple-700);
1406
1201
  --ctx-shadow: var(--color-neutral-alpha-500A);
1407
1202
  --ctx-text-hover: var(--color-default-purple-900);
1408
- --ctx-text-pressed: var(--color-default-purple-900);
1409
1203
  --ctx-background-hover: var(--color-default-purple-300);
1410
- --ctx-background-pressed: var(--color-default-purple-200);
1411
- --ctx-gradient-hover: var(--color-default-purple-200);
1412
- --ctx-gradient-pressed: var(--color-default-purple-200);
1413
1204
  --ctx-border-hover: var(--color-default-purple-500);
1414
- --ctx-border-pressed: var(--color-default-purple-500);
1415
1205
  }
1416
1206
 
1417
1207
  @utility ctx-purple-subtler {
@@ -1419,16 +1209,12 @@
1419
1209
  --ctx-text-bold: var(--color-default-purple-900);
1420
1210
  --ctx-background: var(--color-default-purple-200);
1421
1211
  --ctx-gradient: var(--color-default-purple-300);
1422
- --ctx-border: var(--color-default-purple-400);
1212
+ --ctx-border: var(--color-default-purple-300);
1213
+ --ctx-border-bold: var(--color-default-purple-500);
1423
1214
  --ctx-shadow: var(--color-neutral-alpha-500A);
1424
1215
  --ctx-text-hover: var(--color-default-purple-800);
1425
- --ctx-text-pressed: var(--color-default-purple-800);
1426
1216
  --ctx-background-hover: var(--color-default-purple-300);
1427
- --ctx-background-pressed: var(--color-default-purple-400);
1428
- --ctx-gradient-hover: var(--color-default-purple-400);
1429
- --ctx-gradient-pressed: var(--color-default-purple-400);
1430
- --ctx-border-hover: var(--color-default-purple-400);
1431
- --ctx-border-pressed: var(--color-default-purple-400);
1217
+ --ctx-border-hover: var(--color-default-purple-300);
1432
1218
  }
1433
1219
 
1434
1220
  @utility ctx-purple-subtlest {
@@ -1436,16 +1222,12 @@
1436
1222
  --ctx-text-bold: var(--color-default-purple-900);
1437
1223
  --ctx-background: var(--color-default-purple-100);
1438
1224
  --ctx-gradient: var(--color-default-purple-200);
1439
- --ctx-border: var(--color-default-purple-300);
1225
+ --ctx-border: var(--color-default-purple-200);
1226
+ --ctx-border-bold: var(--color-default-purple-400);
1440
1227
  --ctx-shadow: var(--color-neutral-alpha-500A);
1441
1228
  --ctx-text-hover: var(--color-default-purple-800);
1442
- --ctx-text-pressed: var(--color-default-purple-800);
1443
1229
  --ctx-background-hover: var(--color-default-purple-200);
1444
- --ctx-background-pressed: var(--color-default-purple-300);
1445
- --ctx-gradient-hover: var(--color-default-purple-300);
1446
- --ctx-gradient-pressed: var(--color-default-purple-300);
1447
- --ctx-border-hover: var(--color-default-purple-300);
1448
- --ctx-border-pressed: var(--color-default-purple-300);
1230
+ --ctx-border-hover: var(--color-default-purple-200);
1449
1231
  }
1450
1232
 
1451
1233
  @utility ctx-red-bolder {
@@ -1453,16 +1235,12 @@
1453
1235
  --ctx-text-bold: var(--color-default-red-100);
1454
1236
  --ctx-background: var(--color-default-red-700);
1455
1237
  --ctx-gradient: var(--color-default-red-800);
1456
- --ctx-border: var(--color-default-red-700);
1238
+ --ctx-border: var(--color-default-red-800);
1239
+ --ctx-border-bold: var(--color-default-red-600);
1457
1240
  --ctx-shadow: var(--color-neutral-alpha-500A);
1458
1241
  --ctx-text-hover: var(--color-default-red-200);
1459
- --ctx-text-pressed: var(--color-default-red-200);
1460
1242
  --ctx-background-hover: var(--color-default-red-800);
1461
- --ctx-background-pressed: var(--color-default-red-900);
1462
- --ctx-gradient-hover: var(--color-default-red-900);
1463
- --ctx-gradient-pressed: var(--color-default-red-900);
1464
- --ctx-border-hover: var(--color-default-red-700);
1465
- --ctx-border-pressed: var(--color-default-red-700);
1243
+ --ctx-border-hover: var(--color-default-red-800);
1466
1244
  }
1467
1245
 
1468
1246
  @utility ctx-red-subtle {
@@ -1471,15 +1249,11 @@
1471
1249
  --ctx-background: var(--color-default-red-400);
1472
1250
  --ctx-gradient: var(--color-default-red-300);
1473
1251
  --ctx-border: var(--color-default-red-500);
1252
+ --ctx-border-bold: var(--color-default-red-700);
1474
1253
  --ctx-shadow: var(--color-neutral-alpha-500A);
1475
1254
  --ctx-text-hover: var(--color-default-red-900);
1476
- --ctx-text-pressed: var(--color-default-red-900);
1477
1255
  --ctx-background-hover: var(--color-default-red-300);
1478
- --ctx-background-pressed: var(--color-default-red-200);
1479
- --ctx-gradient-hover: var(--color-default-red-200);
1480
- --ctx-gradient-pressed: var(--color-default-red-200);
1481
1256
  --ctx-border-hover: var(--color-default-red-500);
1482
- --ctx-border-pressed: var(--color-default-red-500);
1483
1257
  }
1484
1258
 
1485
1259
  @utility ctx-red-subtler {
@@ -1487,16 +1261,12 @@
1487
1261
  --ctx-text-bold: var(--color-default-red-900);
1488
1262
  --ctx-background: var(--color-default-red-200);
1489
1263
  --ctx-gradient: var(--color-default-red-300);
1490
- --ctx-border: var(--color-default-red-400);
1264
+ --ctx-border: var(--color-default-red-300);
1265
+ --ctx-border-bold: var(--color-default-red-500);
1491
1266
  --ctx-shadow: var(--color-neutral-alpha-500A);
1492
1267
  --ctx-text-hover: var(--color-default-red-800);
1493
- --ctx-text-pressed: var(--color-default-red-800);
1494
1268
  --ctx-background-hover: var(--color-default-red-300);
1495
- --ctx-background-pressed: var(--color-default-red-400);
1496
- --ctx-gradient-hover: var(--color-default-red-400);
1497
- --ctx-gradient-pressed: var(--color-default-red-400);
1498
- --ctx-border-hover: var(--color-default-red-400);
1499
- --ctx-border-pressed: var(--color-default-red-400);
1269
+ --ctx-border-hover: var(--color-default-red-300);
1500
1270
  }
1501
1271
 
1502
1272
  @utility ctx-red-subtlest {
@@ -1504,16 +1274,12 @@
1504
1274
  --ctx-text-bold: var(--color-default-red-900);
1505
1275
  --ctx-background: var(--color-default-red-100);
1506
1276
  --ctx-gradient: var(--color-default-red-200);
1507
- --ctx-border: var(--color-default-red-300);
1277
+ --ctx-border: var(--color-default-red-200);
1278
+ --ctx-border-bold: var(--color-default-red-400);
1508
1279
  --ctx-shadow: var(--color-neutral-alpha-500A);
1509
1280
  --ctx-text-hover: var(--color-default-red-800);
1510
- --ctx-text-pressed: var(--color-default-red-800);
1511
1281
  --ctx-background-hover: var(--color-default-red-200);
1512
- --ctx-background-pressed: var(--color-default-red-300);
1513
- --ctx-gradient-hover: var(--color-default-red-300);
1514
- --ctx-gradient-pressed: var(--color-default-red-300);
1515
- --ctx-border-hover: var(--color-default-red-300);
1516
- --ctx-border-pressed: var(--color-default-red-300);
1282
+ --ctx-border-hover: var(--color-default-red-200);
1517
1283
  }
1518
1284
 
1519
1285
  @utility ctx-success-bolder {
@@ -1522,15 +1288,11 @@
1522
1288
  --ctx-background: var(--color-default-green-700);
1523
1289
  --ctx-gradient: var(--color-default-green-800);
1524
1290
  --ctx-border: var(--color-default-green-700);
1291
+ --ctx-border-bold: var(--color-default-green-400);
1525
1292
  --ctx-shadow: var(--color-neutral-alpha-500A);
1526
1293
  --ctx-text-hover: var(--color-default-green-200);
1527
- --ctx-text-pressed: var(--color-default-green-200);
1528
1294
  --ctx-background-hover: var(--color-default-green-800);
1529
- --ctx-background-pressed: var(--color-default-green-900);
1530
- --ctx-gradient-hover: var(--color-default-green-900);
1531
- --ctx-gradient-pressed: var(--color-default-green-900);
1532
1295
  --ctx-border-hover: var(--color-default-green-700);
1533
- --ctx-border-pressed: var(--color-default-green-700);
1534
1296
  }
1535
1297
 
1536
1298
  @utility ctx-success-subtlest {
@@ -1539,15 +1301,11 @@
1539
1301
  --ctx-background: var(--color-default-green-100);
1540
1302
  --ctx-gradient: var(--color-default-green-200);
1541
1303
  --ctx-border: var(--color-default-green-300);
1304
+ --ctx-border-bold: var(--color-default-green-800);
1542
1305
  --ctx-shadow: var(--color-neutral-alpha-500A);
1543
1306
  --ctx-text-hover: var(--color-default-green-800);
1544
- --ctx-text-pressed: var(--color-default-green-800);
1545
1307
  --ctx-background-hover: var(--color-default-green-200);
1546
- --ctx-background-pressed: var(--color-default-green-300);
1547
- --ctx-gradient-hover: var(--color-default-green-300);
1548
- --ctx-gradient-pressed: var(--color-default-green-300);
1549
1308
  --ctx-border-hover: var(--color-default-green-300);
1550
- --ctx-border-pressed: var(--color-default-green-300);
1551
1309
  }
1552
1310
 
1553
1311
  @utility ctx-teal-bolder {
@@ -1555,16 +1313,12 @@
1555
1313
  --ctx-text-bold: var(--color-default-teal-100);
1556
1314
  --ctx-background: var(--color-default-teal-700);
1557
1315
  --ctx-gradient: var(--color-default-teal-800);
1558
- --ctx-border: var(--color-default-teal-700);
1316
+ --ctx-border: var(--color-default-teal-800);
1317
+ --ctx-border-bold: var(--color-default-teal-600);
1559
1318
  --ctx-shadow: var(--color-neutral-alpha-500A);
1560
1319
  --ctx-text-hover: var(--color-default-teal-200);
1561
- --ctx-text-pressed: var(--color-default-teal-200);
1562
1320
  --ctx-background-hover: var(--color-default-teal-800);
1563
- --ctx-background-pressed: var(--color-default-teal-900);
1564
- --ctx-gradient-hover: var(--color-default-teal-900);
1565
- --ctx-gradient-pressed: var(--color-default-teal-900);
1566
- --ctx-border-hover: var(--color-default-teal-700);
1567
- --ctx-border-pressed: var(--color-default-teal-700);
1321
+ --ctx-border-hover: var(--color-default-teal-800);
1568
1322
  }
1569
1323
 
1570
1324
  @utility ctx-teal-subtle {
@@ -1573,15 +1327,11 @@
1573
1327
  --ctx-background: var(--color-default-teal-400);
1574
1328
  --ctx-gradient: var(--color-default-teal-300);
1575
1329
  --ctx-border: var(--color-default-teal-500);
1330
+ --ctx-border-bold: var(--color-default-teal-700);
1576
1331
  --ctx-shadow: var(--color-neutral-alpha-500A);
1577
1332
  --ctx-text-hover: var(--color-default-teal-900);
1578
- --ctx-text-pressed: var(--color-default-teal-900);
1579
1333
  --ctx-background-hover: var(--color-default-teal-300);
1580
- --ctx-background-pressed: var(--color-default-teal-200);
1581
- --ctx-gradient-hover: var(--color-default-teal-200);
1582
- --ctx-gradient-pressed: var(--color-default-teal-200);
1583
1334
  --ctx-border-hover: var(--color-default-teal-500);
1584
- --ctx-border-pressed: var(--color-default-teal-500);
1585
1335
  }
1586
1336
 
1587
1337
  @utility ctx-teal-subtler {
@@ -1589,16 +1339,12 @@
1589
1339
  --ctx-text-bold: var(--color-default-teal-900);
1590
1340
  --ctx-background: var(--color-default-teal-200);
1591
1341
  --ctx-gradient: var(--color-default-teal-300);
1592
- --ctx-border: var(--color-default-teal-400);
1342
+ --ctx-border: var(--color-default-teal-300);
1343
+ --ctx-border-bold: var(--color-default-teal-500);
1593
1344
  --ctx-shadow: var(--color-neutral-alpha-500A);
1594
1345
  --ctx-text-hover: var(--color-default-teal-800);
1595
- --ctx-text-pressed: var(--color-default-teal-800);
1596
1346
  --ctx-background-hover: var(--color-default-teal-300);
1597
- --ctx-background-pressed: var(--color-default-teal-400);
1598
- --ctx-gradient-hover: var(--color-default-teal-400);
1599
- --ctx-gradient-pressed: var(--color-default-teal-400);
1600
- --ctx-border-hover: var(--color-default-teal-400);
1601
- --ctx-border-pressed: var(--color-default-teal-400);
1347
+ --ctx-border-hover: var(--color-default-teal-300);
1602
1348
  }
1603
1349
 
1604
1350
  @utility ctx-teal-subtlest {
@@ -1606,16 +1352,12 @@
1606
1352
  --ctx-text-bold: var(--color-default-teal-900);
1607
1353
  --ctx-background: var(--color-default-teal-100);
1608
1354
  --ctx-gradient: var(--color-default-teal-200);
1609
- --ctx-border: var(--color-default-teal-300);
1355
+ --ctx-border: var(--color-default-teal-200);
1356
+ --ctx-border-bold: var(--color-default-teal-400);
1610
1357
  --ctx-shadow: var(--color-neutral-alpha-500A);
1611
1358
  --ctx-text-hover: var(--color-default-teal-800);
1612
- --ctx-text-pressed: var(--color-default-teal-800);
1613
1359
  --ctx-background-hover: var(--color-default-teal-200);
1614
- --ctx-background-pressed: var(--color-default-teal-300);
1615
- --ctx-gradient-hover: var(--color-default-teal-300);
1616
- --ctx-gradient-pressed: var(--color-default-teal-300);
1617
- --ctx-border-hover: var(--color-default-teal-300);
1618
- --ctx-border-pressed: var(--color-default-teal-300);
1360
+ --ctx-border-hover: var(--color-default-teal-200);
1619
1361
  }
1620
1362
 
1621
1363
  @utility ctx-warning-bolder {
@@ -1624,15 +1366,11 @@
1624
1366
  --ctx-background: var(--color-default-yellow-700);
1625
1367
  --ctx-gradient: var(--color-default-yellow-800);
1626
1368
  --ctx-border: var(--color-default-yellow-700);
1369
+ --ctx-border-bold: var(--color-default-yellow-400);
1627
1370
  --ctx-shadow: var(--color-neutral-alpha-500A);
1628
1371
  --ctx-text-hover: var(--color-default-yellow-200);
1629
- --ctx-text-pressed: var(--color-default-yellow-200);
1630
1372
  --ctx-background-hover: var(--color-default-yellow-800);
1631
- --ctx-background-pressed: var(--color-default-yellow-900);
1632
- --ctx-gradient-hover: var(--color-default-yellow-900);
1633
- --ctx-gradient-pressed: var(--color-default-yellow-900);
1634
1373
  --ctx-border-hover: var(--color-default-yellow-700);
1635
- --ctx-border-pressed: var(--color-default-yellow-700);
1636
1374
  }
1637
1375
 
1638
1376
  @utility ctx-warning-subtlest {
@@ -1641,15 +1379,11 @@
1641
1379
  --ctx-background: var(--color-default-yellow-100);
1642
1380
  --ctx-gradient: var(--color-default-yellow-200);
1643
1381
  --ctx-border: var(--color-default-yellow-300);
1382
+ --ctx-border-bold: var(--color-default-yellow-800);
1644
1383
  --ctx-shadow: var(--color-neutral-alpha-500A);
1645
1384
  --ctx-text-hover: var(--color-default-yellow-800);
1646
- --ctx-text-pressed: var(--color-default-yellow-800);
1647
1385
  --ctx-background-hover: var(--color-default-yellow-200);
1648
- --ctx-background-pressed: var(--color-default-yellow-300);
1649
- --ctx-gradient-hover: var(--color-default-yellow-300);
1650
- --ctx-gradient-pressed: var(--color-default-yellow-300);
1651
1386
  --ctx-border-hover: var(--color-default-yellow-300);
1652
- --ctx-border-pressed: var(--color-default-yellow-300);
1653
1387
  }
1654
1388
 
1655
1389
  @utility ctx-yellow-bolder {
@@ -1657,16 +1391,12 @@
1657
1391
  --ctx-text-bold: var(--color-default-yellow-100);
1658
1392
  --ctx-background: var(--color-default-yellow-700);
1659
1393
  --ctx-gradient: var(--color-default-yellow-800);
1660
- --ctx-border: var(--color-default-yellow-700);
1394
+ --ctx-border: var(--color-default-yellow-800);
1395
+ --ctx-border-bold: var(--color-default-yellow-600);
1661
1396
  --ctx-shadow: var(--color-neutral-alpha-500A);
1662
1397
  --ctx-text-hover: var(--color-default-yellow-200);
1663
- --ctx-text-pressed: var(--color-default-yellow-200);
1664
1398
  --ctx-background-hover: var(--color-default-yellow-800);
1665
- --ctx-background-pressed: var(--color-default-yellow-900);
1666
- --ctx-gradient-hover: var(--color-default-yellow-900);
1667
- --ctx-gradient-pressed: var(--color-default-yellow-900);
1668
- --ctx-border-hover: var(--color-default-yellow-700);
1669
- --ctx-border-pressed: var(--color-default-yellow-700);
1399
+ --ctx-border-hover: var(--color-default-yellow-800);
1670
1400
  }
1671
1401
 
1672
1402
  @utility ctx-yellow-subtle {
@@ -1675,15 +1405,11 @@
1675
1405
  --ctx-background: var(--color-default-yellow-400);
1676
1406
  --ctx-gradient: var(--color-default-yellow-300);
1677
1407
  --ctx-border: var(--color-default-yellow-500);
1408
+ --ctx-border-bold: var(--color-default-yellow-700);
1678
1409
  --ctx-shadow: var(--color-neutral-alpha-500A);
1679
1410
  --ctx-text-hover: var(--color-default-yellow-900);
1680
- --ctx-text-pressed: var(--color-default-yellow-900);
1681
1411
  --ctx-background-hover: var(--color-default-yellow-300);
1682
- --ctx-background-pressed: var(--color-default-yellow-200);
1683
- --ctx-gradient-hover: var(--color-default-yellow-200);
1684
- --ctx-gradient-pressed: var(--color-default-yellow-200);
1685
1412
  --ctx-border-hover: var(--color-default-yellow-500);
1686
- --ctx-border-pressed: var(--color-default-yellow-500);
1687
1413
  }
1688
1414
 
1689
1415
  @utility ctx-yellow-subtler {
@@ -1691,16 +1417,12 @@
1691
1417
  --ctx-text-bold: var(--color-default-yellow-900);
1692
1418
  --ctx-background: var(--color-default-yellow-200);
1693
1419
  --ctx-gradient: var(--color-default-yellow-300);
1694
- --ctx-border: var(--color-default-yellow-400);
1420
+ --ctx-border: var(--color-default-yellow-300);
1421
+ --ctx-border-bold: var(--color-default-yellow-500);
1695
1422
  --ctx-shadow: var(--color-neutral-alpha-500A);
1696
1423
  --ctx-text-hover: var(--color-default-yellow-800);
1697
- --ctx-text-pressed: var(--color-default-yellow-800);
1698
1424
  --ctx-background-hover: var(--color-default-yellow-300);
1699
- --ctx-background-pressed: var(--color-default-yellow-400);
1700
- --ctx-gradient-hover: var(--color-default-yellow-400);
1701
- --ctx-gradient-pressed: var(--color-default-yellow-400);
1702
- --ctx-border-hover: var(--color-default-yellow-400);
1703
- --ctx-border-pressed: var(--color-default-yellow-400);
1425
+ --ctx-border-hover: var(--color-default-yellow-300);
1704
1426
  }
1705
1427
 
1706
1428
  @utility ctx-yellow-subtlest {
@@ -1708,122 +1430,123 @@
1708
1430
  --ctx-text-bold: var(--color-default-yellow-900);
1709
1431
  --ctx-background: var(--color-default-yellow-100);
1710
1432
  --ctx-gradient: var(--color-default-yellow-200);
1711
- --ctx-border: var(--color-default-yellow-300);
1433
+ --ctx-border: var(--color-default-yellow-200);
1434
+ --ctx-border-bold: var(--color-default-yellow-400);
1712
1435
  --ctx-shadow: var(--color-neutral-alpha-500A);
1713
1436
  --ctx-text-hover: var(--color-default-yellow-800);
1714
- --ctx-text-pressed: var(--color-default-yellow-800);
1715
1437
  --ctx-background-hover: var(--color-default-yellow-200);
1716
- --ctx-background-pressed: var(--color-default-yellow-300);
1717
- --ctx-gradient-hover: var(--color-default-yellow-300);
1718
- --ctx-gradient-pressed: var(--color-default-yellow-300);
1719
- --ctx-border-hover: var(--color-default-yellow-300);
1720
- --ctx-border-pressed: var(--color-default-yellow-300);
1438
+ --ctx-border-hover: var(--color-default-yellow-200);
1721
1439
  }
1722
1440
 
1723
1441
 
1724
1442
 
1725
1443
  /* === ./styles/context.css === */
1726
-
1727
1444
  @theme {
1728
- --color-brand-100: var(--color-bcc-100);
1729
- --color-brand-200: var(--color-bcc-200);
1730
- --color-brand-300: var(--color-bcc-300);
1731
- --color-brand-400: var(--color-bcc-400);
1732
- --color-brand-500: var(--color-bcc-500);
1733
- --color-brand-600: var(--color-bcc-600);
1734
- --color-brand-700: var(--color-bcc-700);
1735
- --color-brand-800: var(--color-bcc-800);
1736
- --color-brand-900: var(--color-bcc-900);
1737
- --color-brand-1000: var(--color-bcc-1000);
1445
+ --color-brand-100: var(--color-bcc-100);
1446
+ --color-brand-200: var(--color-bcc-200);
1447
+ --color-brand-300: var(--color-bcc-300);
1448
+ --color-brand-400: var(--color-bcc-400);
1449
+ --color-brand-500: var(--color-bcc-500);
1450
+ --color-brand-600: var(--color-bcc-600);
1451
+ --color-brand-700: var(--color-bcc-700);
1452
+ --color-brand-800: var(--color-bcc-800);
1453
+ --color-brand-900: var(--color-bcc-900);
1454
+ --color-brand-1000: var(--color-bcc-1000);
1738
1455
  }
1739
1456
 
1740
1457
  /** DEFAULT CONTEXTS */
1741
1458
  @utility ctx-default {
1742
- @apply ctx-neutral-subtlest;
1459
+ @apply ctx-neutral-subtlest;
1460
+ }
1461
+ @utility ctx-success {
1462
+ @apply ctx-success-subtlest;
1463
+ }
1464
+ @utility ctx-danger {
1465
+ @apply ctx-danger-subtlest;
1466
+ }
1467
+ @utility ctx-warning {
1468
+ @apply ctx-warning-subtlest;
1469
+ }
1470
+ @utility ctx-info {
1471
+ @apply ctx-info-subtlest;
1743
1472
  }
1744
- @utility ctx-success { @apply ctx-success-subtlest; }
1745
- @utility ctx-danger { @apply ctx-danger-subtlest; }
1746
- @utility ctx-warning { @apply ctx-warning-subtlest; }
1747
- @utility ctx-info { @apply ctx-info-subtlest; }
1748
1473
 
1749
1474
  @utility text-ctx {
1750
- color: var(--ctx-text);
1475
+ color: var(--ctx-text);
1751
1476
  }
1752
1477
 
1753
1478
  @utility text-ctx-bold {
1754
- color: var(--ctx-text-bold);
1479
+ color: var(--ctx-text-bold);
1755
1480
  }
1756
1481
 
1757
1482
  @utility bg-ctx {
1758
- background-color: var(--ctx-background);
1483
+ background-color: var(--ctx-background);
1759
1484
  }
1760
1485
 
1761
1486
  @utility border-ctx {
1762
- border-color: var(--ctx-border);
1487
+ border-color: var(--ctx-border);
1763
1488
  }
1764
1489
 
1765
1490
  @utility shadow-ctx {
1766
- --tw-shadow-color: var(--ctx-shadow);
1491
+ --tw-shadow-color: var(--ctx-shadow);
1767
1492
  }
1768
1493
 
1769
1494
  @utility ctx {
1770
- background-color: var(--ctx-background);
1771
- color: var(--ctx-text);
1772
- border-color: var(--ctx-border);
1495
+ background-color: var(--ctx-background);
1496
+ color: var(--ctx-text);
1497
+ border-color: var(--ctx-border);
1773
1498
  }
1774
1499
 
1775
1500
  @utility ctx-gradient {
1776
- background: linear-gradient(225deg, var(--ctx-background) 0%, var(--ctx-gradient) 100%);
1501
+ background: linear-gradient(225deg, var(--ctx-background) 0%, var(--ctx-gradient) 100%);
1502
+
1503
+ @variant dark {
1504
+ background: linear-gradient(225deg, var(--ctx-gradient) 0%, var(--ctx-background) 100%);
1505
+ }
1777
1506
  }
1778
1507
 
1779
1508
  @utility ctx-raised {
1780
- box-shadow: 0 1px 1px 0 var(--ctx-shadow), 0 0 1px 0 var(--ctx-shadow);
1509
+ box-shadow:
1510
+ 0 1px 1px 0 var(--ctx-shadow),
1511
+ 0 0 1px 0 var(--ctx-shadow);
1781
1512
  }
1782
1513
 
1783
1514
  @utility ctx-flat {
1784
- --ctx-background: transparent;
1515
+ --ctx-background: transparent;
1785
1516
 
1786
- @variant hover {
1787
- --ctx-background: var(--ctx-background-hover);
1788
- }
1517
+ @variant hover {
1518
+ --ctx-background: var(--ctx-background-hover);
1519
+ }
1789
1520
  }
1790
1521
 
1791
1522
  @utility clickable {
1792
- cursor: pointer;
1523
+ cursor: pointer;
1793
1524
  }
1794
1525
 
1795
- .clickable:hover {
1796
- --ctx-background: var(--ctx-background-hover);
1797
- --ctx-text: var(--ctx-text-hover);
1798
- --ctx-border: var(--ctx-border-hover);
1799
- }
1526
+ @media (hover: hover) and (pointer: fine) {
1527
+ .clickable:hover {
1528
+ --ctx-background: var(--ctx-background-hover);
1529
+ --ctx-text: var(--ctx-text-hover);
1530
+ --ctx-border: var(--ctx-border-hover);
1531
+ }
1800
1532
 
1801
- .clickable:active {
1802
- --ctx-background: var(--ctx-background-pressed);
1803
- --ctx-text: var(--ctx-text-pressed);
1804
- --ctx-border: var(--ctx-border-pressed);
1533
+ .clickable:active {
1534
+ --ctx-background: var(--ctx-background-pressed);
1535
+ --ctx-text: var(--ctx-text-pressed);
1536
+ --ctx-border: var(--ctx-border-pressed);
1537
+ }
1805
1538
  }
1806
1539
 
1807
1540
 
1808
- /* === ./styles/fonts.css === */
1809
- @utility heading-xs { font: var(--heading-xs); }
1810
- @utility heading-sm { font: var(--heading-sm); }
1811
- @utility heading-md { font: var(--heading-md); }
1812
- @utility heading-lg { font: var(--heading-lg); }
1813
- @utility heading-xl { font: var(--heading-xl); }
1814
- @utility heading-2xl { font: var(--heading-2xl); }
1815
- @utility heading-3xl { font: var(--heading-3xl); }
1816
- @utility heading-4xl { font: var(--heading-4xl); }
1817
- @utility heading-5xl { font: var(--heading-5xl); }
1818
- @utility body-sm { font: var(--body-sm); }
1819
- @utility body-md { font: var(--body-md); }
1820
- @utility body-lg { font: var(--body-lg); }
1821
-
1822
-
1823
1541
 
1824
1542
  /* === ./styles/component-overrides.css === */
1825
1543
  /** Custom styles to fix primevue components that are not custom or wrapped. */
1826
1544
 
1545
+ :root {
1546
+ --p-toast-width: min(85vw, calc(var(--spacing) * 100));
1547
+ --p-tooltip-max-width: min(85vw, calc(var(--spacing) * 100));
1548
+ }
1549
+
1827
1550
  /**
1828
1551
  * GUTTER FIX
1829
1552
  * Primevue's dropwdown components are all missing the gap between input and dropdown
@@ -1832,6 +1555,7 @@
1832
1555
  .p-menu-overlay,
1833
1556
  .p-multiselect-overlay,
1834
1557
  .p-select-overlay,
1558
+ .p-datepicker-panel,
1835
1559
  .p-treeselect-overlay {
1836
1560
  margin: var(--p-anchor-gutter) 0;
1837
1561
  }
@@ -1901,244 +1625,572 @@
1901
1625
  z-index: 2;
1902
1626
  }
1903
1627
 
1904
- .p-dialog-close-button .p-icon {
1905
- height: var(--icon-size-sm);
1906
- width: var(--icon-size-sm);
1628
+ .p-dialog-close-button {
1629
+ --p-icon-size: var(--icon-size-sm);
1907
1630
  }
1908
1631
  .p-dialog .p-button-icon:empty {
1909
1632
  display: none;
1910
1633
  }
1911
1634
 
1635
+ .p-togglebutton {
1636
+ font-size: var(--text-sm);
1637
+ border: 0;
1638
+ }
1639
+
1640
+ .p-togglebutton-sm {
1641
+ font-size: var(--text-sm);
1642
+ }
1643
+
1644
+ .p-togglebutton-lg {
1645
+ font-size: var(--text-md);
1646
+ }
1647
+
1648
+ /* primevue-overrides.css - CSS-level component overrides */
1649
+ @layer custom {
1650
+ .p-accordionheader {
1651
+ gap: var(--p-accordion-header-gap);
1652
+ }
1653
+
1654
+ .p-autocomplete-input-multiple {
1655
+ min-height: var(--p-autocomplete-input-multiple-min-height);
1656
+ gap: var(--p-autocomplete-input-multiple-gap);
1657
+ }
1658
+
1659
+ .p-badge-circle {
1660
+ border-radius: var(--p-badge-circle-border-radius);
1661
+ }
1662
+
1663
+ .p-button {
1664
+ min-height: var(--p-button-min-height);
1665
+ }
1666
+
1667
+ .p-button-sm {
1668
+ min-height: var(--p-button-sm-min-height);
1669
+ }
1670
+
1671
+ .p-button-lg {
1672
+ min-height: var(--p-button-lg-min-height);
1673
+ }
1674
+
1675
+ .p-button.p-button-icon-only {
1676
+ min-width: var(--p-button-icon-only-width);
1677
+ }
1678
+
1679
+ .p-button-sm.p-button-icon-only {
1680
+ min-width: var(--p-button-sm-icon-only-width);
1681
+ }
1682
+
1683
+ .p-button-lg.p-button-icon-only {
1684
+ min-width: var(--p-button-lg-icon-only-width);
1685
+ }
1686
+
1687
+ .p-divider {
1688
+ gap: var(--p-divider-content-gap);
1689
+ }
1690
+
1691
+ .p-inputgroupaddon {
1692
+ min-height: var(--p-inputgroup-addon-min-height);
1693
+ }
1694
+
1695
+ .p-inputtext {
1696
+ min-height: var(--p-inputtext-min-height);
1697
+ }
1698
+
1699
+ .p-inputtext-sm {
1700
+ min-height: var(--p-inputtext-sm-min-height);
1701
+ }
1702
+
1703
+ .p-inputtext-lg {
1704
+ min-height: var(--p-inputtext-lg-min-height);
1705
+ }
1706
+
1707
+ .p-message-text {
1708
+ line-height: 1;
1709
+ flex: 1 1 0;
1710
+ }
1711
+
1712
+ .p-multiselect {
1713
+ min-height: var(--p-multiselect-min-height);
1714
+ }
1715
+
1716
+ .p-multiselect-sm {
1717
+ min-height: var(--p-multiselect-sm-min-height);
1718
+ }
1719
+
1720
+ .p-multiselect-lg {
1721
+ min-height: var(--p-multiselect-lg-min-height);
1722
+ }
1723
+
1724
+ .p-multiselect-label-container {
1725
+ display: flex;
1726
+ align-items: center;
1727
+ }
1728
+
1729
+ .p-radiobutton {
1730
+ gap: var(--p-radiobutton-gap);
1731
+ border-radius: var(--p-radiobutton-border-radius);
1732
+ }
1733
+
1734
+ .p-radiobutton-icon {
1735
+ border-radius: var(--p-radiobutton-icon-border-radius);
1736
+ }
1737
+
1738
+ .p-radiobutton-icon-sm {
1739
+ border-radius: var(--p-radiobutton-icon-sm-border-radius);
1740
+ }
1741
+
1742
+ .p-radiobutton-icon-lg {
1743
+ border-radius: var(--p-radiobutton-icon-lg-border-radius);
1744
+ }
1745
+
1746
+ .p-select {
1747
+ min-height: var(--p-select-min-height);
1748
+ }
1749
+
1750
+ .p-select-sm {
1751
+ min-height: var(--p-select-sm-min-height);
1752
+ }
1753
+
1754
+ .p-select-lg {
1755
+ min-height: var(--p-select-lg-min-height);
1756
+ }
1757
+
1758
+ .p-select-label {
1759
+ display: flex;
1760
+ align-items: center;
1761
+ }
1762
+
1763
+ .p-select-option {
1764
+ gap: var(--p-select-option-gap);
1765
+ }
1766
+
1767
+ .p-textarea {
1768
+ min-height: var(--p-textarea-min-height);
1769
+ }
1770
+
1771
+ .p-togglebutton {
1772
+ min-height: var(--p-togglebutton-min-height);
1773
+ }
1774
+
1775
+ .p-togglebutton .p-togglebutton-sm {
1776
+ min-height: var(--p-togglebutton-sm-min-height);
1777
+ border-radius: var(--p-togglebutton-sm-border-radius);
1778
+ }
1779
+
1780
+ .p-togglebutton-lg {
1781
+ min-height: var(--p-togglebutton-lg-min-height);
1782
+ }
1783
+
1784
+ .p-togglebutton .p-togglebutton-content {
1785
+ min-height: var(--p-togglebutton-content-min-height);
1786
+ }
1787
+
1788
+ .p-togglebutton-sm .p-togglebutton-content {
1789
+ min-height: var(--p-togglebutton-content-sm-min-height);
1790
+ border-radius: var(--p-togglebutton-content-sm-border-radius);
1791
+ }
1792
+
1793
+ .p-togglebutton-lg .p-togglebutton-content {
1794
+ min-height: var(--p-togglebutton-content-lg-min-height);
1795
+ }
1796
+ }
1797
+
1798
+
1799
+
1800
+
1801
+ /* === ./lightbox/BccLightbox.css === */
1802
+ @layer components {
1803
+ .bcc-lightbox {
1804
+ @apply fixed inset-0 z-9999 flex touch-none items-center justify-center;
1805
+ }
1806
+
1807
+ .bcc-lightbox__backdrop {
1808
+ @apply absolute inset-0 bg-black/75;
1809
+ }
1810
+
1811
+ .bcc-lightbox__header {
1812
+ @apply top-inset-top pointer-events-none absolute inset-x-0 z-20 flex items-center justify-end gap-3 p-3;
1813
+ }
1814
+
1815
+ .bcc-lightbox__counter {
1816
+ @apply body-sm pointer-events-none mr-auto rounded-md bg-black/50 px-2.5 py-1 text-white;
1817
+ }
1818
+
1819
+ .bcc-lightbox__control {
1820
+ @apply pointer-events-auto flex cursor-pointer items-center justify-center rounded-md border-0 bg-black/50 p-2 text-white transition-colors hover:bg-black/65;
1821
+ }
1822
+
1823
+ .bcc-lightbox__icon {
1824
+ @apply size-6 shrink-0;
1825
+ }
1826
+
1827
+ .bcc-lightbox__nav {
1828
+ @apply absolute top-1/2 z-20 -translate-y-1/2;
1829
+ }
1830
+
1831
+ .bcc-lightbox__nav--prev {
1832
+ @apply left-1 sm:left-3;
1833
+ }
1834
+
1835
+ .bcc-lightbox__nav--next {
1836
+ @apply right-1 sm:right-3;
1837
+ }
1838
+
1839
+ .bcc-lightbox__stage {
1840
+ @apply relative z-10 box-border flex h-full w-full max-w-6xl items-center justify-center px-2 py-14 sm:px-12;
1841
+ }
1842
+
1843
+ .bcc-lightbox__toolbar {
1844
+ @apply center bottom-inset-bottom-4 pointer-events-none absolute z-20 flex gap-1 rounded-md bg-black/50 p-1;
1845
+ }
1846
+
1847
+ .bcc-lightbox__toolbar-btn {
1848
+ @apply pointer-events-auto flex cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent px-3 py-2 text-white transition-colors hover:bg-white/12;
1849
+ }
1850
+
1851
+ .bcc-lightbox__media {
1852
+ @apply flex max-h-[calc(100vh-7rem)] w-full touch-none flex-col items-center justify-center;
1853
+ }
1854
+
1855
+ .bcc-lightbox__media--zoomable {
1856
+ @apply cursor-grab active:cursor-grabbing;
1857
+ }
1858
+
1859
+ .bcc-lightbox__transform {
1860
+ @apply flex origin-center items-center justify-center will-change-transform;
1861
+ }
1862
+
1863
+ .bcc-lightbox__image,
1864
+ .bcc-lightbox__video {
1865
+ @apply block h-auto max-h-[calc(100vh-8rem)] w-auto max-w-[min(92vw,68rem)] object-contain select-none;
1866
+ }
1867
+
1868
+ .bcc-lightbox__video {
1869
+ @apply bg-black;
1870
+ }
1871
+
1872
+ .bcc-lightbox__caption {
1873
+ @apply body-sm mt-3 max-w-[min(92vw,40rem)] text-center text-white;
1874
+ }
1875
+ }
1912
1876
 
1913
1877
 
1914
1878
 
1915
1879
  /* === ./components/custom/styles.css === */
1916
1880
 
1881
+ /* from ./BccAppNavigation/BccAppNavigation.css */
1882
+ @layer components {
1883
+ .bcc-app-nav {
1884
+ @apply bg-elevation-surface-default dark:border-brand-800 sticky inset-x-0 bottom-0 z-20 overflow-visible shadow-md sm:rounded-t-xl dark:border-t;
1885
+ }
1886
+ .bcc-app-nav-container {
1887
+ @apply center pb-inset-bottom-1 mx-auto max-w-lg pt-1;
1888
+ }
1889
+
1890
+ .bcc-app-nav-item {
1891
+ @apply relative flex h-12 flex-1 flex-col items-center justify-center gap-1 transition-colors focus:ring-0 focus:outline-none;
1892
+ }
1893
+
1894
+ .bcc-nav-item-icon {
1895
+ @apply size-6 icon-subtlest;
1896
+ }
1897
+
1898
+ .bcc-nav-item-badge {
1899
+ @apply absolute top-0 right-1;
1900
+ }
1901
+
1902
+ .bcc-nav-item-title {
1903
+ @apply heading-xs text-center text-subtlest opacity-75;
1904
+ }
1905
+
1906
+ .bcc-app-nav-item--active .bcc-nav-item-title {
1907
+ @apply text-selected opacity-100;
1908
+ }
1909
+
1910
+ .bcc-app-nav-item--active .bcc-nav-item-icon {
1911
+ @apply text-selected;
1912
+ }
1913
+ }
1914
+
1915
+
1916
+
1917
1917
  /* from ./BccBadge/BccBadge.css */
1918
1918
  @layer components {
1919
- .bcc-badge {
1920
- @apply inline-flex shrink-0 gap-1 items-center justify-center rounded-full leading-none whitespace-nowrap;
1921
-
1922
- @apply bg-ctx text-ctx;
1923
- }
1919
+ .bcc-badge {
1920
+ @apply inline-flex shrink-0 items-center justify-center gap-1 rounded-full leading-none font-medium! whitespace-nowrap;
1924
1921
 
1925
- .bcc-badge.capital {
1926
- @apply inline-flex;
1927
- }
1928
- .bcc-badge.gradient {
1929
- @apply ctx-gradient;
1930
- }
1931
- .bcc-badge.sm {
1932
- @apply w-4 h-4 text-heading-xs;
1933
- }
1934
- .bcc-badge.md {
1935
- @apply h-5 w-5 text-heading-sm;
1936
- }
1937
- .bcc-badge.lg {
1938
- @apply w-6 h-6 text-heading-md;
1939
- }
1940
- .bcc-badge.xl {
1941
- @apply w-8 h-8 text-heading-md;
1942
- }
1922
+ @apply bg-ctx text-ctx;
1923
+ }
1924
+ .bcc-badge span:empty {
1925
+ display: none;
1926
+ }
1927
+ .bcc-badge.gradient {
1928
+ @apply ctx-gradient;
1929
+ }
1930
+ .bcc-badge.sm {
1931
+ @apply heading-xs h-4 w-4;
1932
+ }
1933
+ .bcc-badge.md {
1934
+ @apply heading-sm h-5 w-5;
1935
+ }
1936
+ .bcc-badge.lg {
1937
+ @apply heading-md h-6 w-6;
1938
+ }
1939
+ .bcc-badge.xl {
1940
+ @apply heading-md h-8 w-8;
1941
+ }
1943
1942
 
1944
- .bcc-badge .bcc-badge-icon {
1945
- @apply size-4;
1946
- }
1947
- .bcc-badge.lg .bcc-badge-icon {
1948
- @apply size-5;
1949
- }
1950
- .bcc-badge.xl .bcc-badge-icon {
1951
- @apply size-6;
1952
- }
1943
+ .bcc-badge .bcc-badge-icon {
1944
+ @apply size-4;
1945
+ }
1946
+ .bcc-badge.lg .bcc-badge-icon {
1947
+ @apply size-5;
1948
+ }
1949
+ .bcc-badge.xl .bcc-badge-icon {
1950
+ @apply size-6;
1951
+ }
1953
1952
 
1954
- .bcc-badge.bcc-badge-text {
1955
- @apply w-auto px-2;
1956
- }
1957
- .bcc-badge-text.lg, .bcc-badge-text.xl {
1958
- @apply px-3;
1959
- }
1960
- .bcc-badge-text.border.lg, .bcc-badge-text.border.xl {
1961
- @apply px-2;
1962
- }
1963
- .bcc-badge-text.bordered.lg, .bcc-badge-text.bordered.xl {
1964
- @apply px-1;
1965
- }
1953
+ .bcc-badge.bcc-badge-text {
1954
+ @apply w-auto px-2;
1955
+ }
1956
+ .bcc-badge-text.lg,
1957
+ .bcc-badge-text.xl {
1958
+ @apply px-3;
1959
+ }
1960
+ .bcc-badge-text.border.lg,
1961
+ .bcc-badge-text.border.xl {
1962
+ @apply px-2;
1963
+ }
1964
+ .bcc-badge-text.bordered.lg,
1965
+ .bcc-badge-text.bordered.xl {
1966
+ @apply px-1;
1967
+ }
1966
1968
 
1967
- .bcc-badge.border {
1968
- @apply border-1;
1969
- border-color: var(--ctx-background-pressed);
1970
- }
1969
+ .bcc-badge.border {
1970
+ @apply border-1;
1971
+ border-color: var(--ctx-background-pressed);
1972
+ }
1971
1973
 
1972
- .bcc-badge.bordered {
1973
- @apply border-2;
1974
- border-color: var(--ctx-background-pressed);
1975
- }
1974
+ .bcc-badge.bordered {
1975
+ @apply border-2;
1976
+ border-color: var(--ctx-background-pressed);
1977
+ }
1976
1978
 
1977
- .bcc-badge.squared {
1978
- @apply rounded-sm;
1979
- }
1979
+ .bcc-badge.squared {
1980
+ @apply rounded-sm;
1981
+ }
1980
1982
  }
1981
1983
 
1982
1984
 
1983
1985
 
1984
1986
  /* from ./BccCapacityIndicator/BccCapacityIndicator.css */
1985
1987
  @layer components {
1986
- .bcc-capacity-indicator {
1987
- @apply text-base;
1988
- }
1988
+ .bcc-capacity-indicator {
1989
+ @apply text-base;
1990
+ }
1989
1991
 
1990
- .bcc-capacity-indicator.xs {
1991
- @apply text-xs;
1992
- }
1992
+ .bcc-capacity-indicator.xs {
1993
+ @apply text-xs;
1994
+ }
1993
1995
 
1994
- .bcc-capacity-indicator.sm {
1995
- @apply text-sm;
1996
- }
1996
+ .bcc-capacity-indicator.sm {
1997
+ @apply text-sm;
1998
+ }
1997
1999
 
1998
- .bcc-capacity-indicator.lg {
1999
- @apply text-xl;
2000
- }
2000
+ .bcc-capacity-indicator.lg {
2001
+ @apply text-xl;
2002
+ }
2001
2003
 
2002
- .bcc-capacity-indicator {
2003
- --bcc-capacity-indicator-background: transparent;
2004
- --bcc-capacity-indicator-text: var(--ctx-text);
2005
- --bcc-capacity-indicator-circle: var(--ctx-background-pressed);
2006
- --bcc-capacity-indicator-circle-used: var(--ctx-border);
2007
- background: var(--bcc-capacity-indicator-background);
2008
- @apply ctx-gray-subtlest;
2009
- }
2004
+ .bcc-capacity-indicator {
2005
+ --bcc-capacity-indicator-background: transparent;
2006
+ --bcc-capacity-indicator-text: var(--ctx-text);
2007
+ --bcc-capacity-indicator-circle: var(--ctx-border);
2008
+ --bcc-capacity-indicator-circle-used: var(--ctx-border-bold);
2009
+ background: var(--bcc-capacity-indicator-background);
2010
+ @apply ctx-gray-subtler;
2011
+ }
2010
2012
 
2011
- .bcc-capacity-indicator.colored {
2012
- --bcc-capacity-indicator-background: var(--ctx-background);
2013
- @apply ctx-blue-subtlest;
2014
- }
2013
+ .bcc-capacity-indicator.colored {
2014
+ --bcc-capacity-indicator-background: var(--ctx-background);
2015
+ @apply ctx-blue-subtlest;
2016
+ }
2015
2017
 
2016
- .bcc-capacity-indicator .text {
2017
- color: var(--bcc-capacity-indicator-text);
2018
- }
2019
- .bcc-capacity-indicator .circle {
2020
- stroke: var(--bcc-capacity-indicator-circle);
2021
- }
2022
- .bcc-capacity-indicator .circle-used {
2023
- stroke: var(--bcc-capacity-indicator-circle-used);
2024
- }
2018
+ .bcc-capacity-indicator .text {
2019
+ color: var(--bcc-capacity-indicator-text);
2020
+ }
2021
+ .bcc-capacity-indicator .circle {
2022
+ stroke: var(--bcc-capacity-indicator-circle);
2023
+ }
2024
+ .bcc-capacity-indicator .circle-used {
2025
+ stroke: var(--bcc-capacity-indicator-circle-used);
2026
+ }
2025
2027
 
2026
- .bcc-capacity-indicator.is-warning {
2027
- @apply ctx-yellow-subtlest;
2028
- }
2028
+ .bcc-capacity-indicator.is-warning {
2029
+ @apply ctx-yellow-subtlest;
2030
+ }
2029
2031
 
2030
- .bcc-capacity-indicator.is-full {
2031
- @apply ctx-red-subtlest;
2032
- }
2032
+ .bcc-capacity-indicator.is-full {
2033
+ @apply ctx-red-subtlest;
2034
+ --bcc-capacity-indicator-background: var(--ctx-background);
2035
+ }
2033
2036
  }
2034
2037
 
2035
2038
 
2039
+
2036
2040
  /* from ./BccDialKnob/BccDialKnob.css */
2037
2041
  @layer components {
2038
- .bcc-knob {
2039
- @apply relative mx-auto inline-flex touch-none select-none items-center justify-center p-2;
2040
-
2041
- --bcc-knob-arc-bg: var(--color-background-neutral-default);
2042
- --bcc-knob-head: var(--color-background-brand-bolder-default);
2043
- --bcc-knob-tail: var(--color-background-brand-subtle-default);
2044
-
2045
- --bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
2046
- --bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
2047
-
2048
- --bcc-knob-right-head: var(--color-background-accent-green-bolder-default);
2049
- --bcc-knob-right-tail: var(--color-background-accent-green-subtle-default);
2050
- }
2042
+ .bcc-knob {
2043
+ @apply relative mx-auto inline-flex touch-none items-center justify-center p-2 select-none;
2051
2044
 
2052
- .bcc-knob-label {
2053
- @apply pointer-events-none absolute inset-0 flex select-none flex-col items-center justify-center;
2054
- }
2045
+ --bcc-knob-arc-bg: var(--color-background-accent-gray-default);
2046
+ --bcc-knob-head: var(--color-background-brand-bolder-default);
2047
+ --bcc-knob-tail: var(--color-background-brand-subtle-default);
2055
2048
 
2056
- .bcc-knob-top-left {
2057
- @apply absolute top-0 left-0 text-left;
2058
- }
2049
+ --bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
2050
+ --bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
2059
2051
 
2060
- .bcc-knob-top-right {
2061
- @apply absolute top-0 right-0 text-right;
2062
- }
2052
+ --bcc-knob-right-head: var(--color-background-accent-green-bolder-default);
2053
+ --bcc-knob-right-tail: var(--color-background-accent-green-subtle-default);
2054
+ }
2055
+
2056
+ .bcc-knob-label {
2057
+ @apply pointer-events-none absolute inset-0 flex flex-col items-center justify-center select-none;
2058
+ }
2059
+
2060
+ .bcc-knob-top-left {
2061
+ @apply absolute top-0 left-0 text-left;
2062
+ }
2063
+
2064
+ .bcc-knob-top-right {
2065
+ @apply absolute top-0 right-0 text-right;
2066
+ }
2063
2067
  }
2064
2068
 
2065
2069
 
2066
2070
 
2067
2071
  /* from ./BccFrame/BccFrame.css */
2068
2072
  @layer components {
2069
- .bcc-frame {
2070
- @apply ctx ctx-default w-full;
2071
- }
2073
+ .bcc-frame {
2074
+ @apply ctx ctx-default w-full border border-transparent;
2075
+ }
2072
2076
 
2073
- .bcc-frame.bcc-frame--shadow {
2074
- @apply shadow shadow-ctx;
2075
- }
2077
+ .bcc-frame.bcc-frame--shadow {
2078
+ @apply shadow-ctx shadow;
2079
+ }
2076
2080
 
2077
- .bcc-frame--raised {
2078
- --ctx-background: var(--color-elevation-surface-raised-default);
2079
- }
2080
- .bcc-frame--rounded {
2081
- @apply rounded-md;
2082
- }
2083
- .bcc-frame--raised.bcc-frame--shadow {
2084
- @apply shadow-raised;
2085
- }
2081
+ .bcc-frame--raised {
2082
+ --ctx-background: var(--color-elevation-surface-raised-default);
2083
+ }
2084
+ .bcc-frame--rounded {
2085
+ @apply rounded-md;
2086
+ }
2087
+ .bcc-frame--raised.bcc-frame--shadow {
2088
+ @apply shadow-raised dark:border-default;
2089
+ }
2086
2090
 
2087
- .bcc-frame--overlay {
2088
- --ctx-background: var(--color-elevation-surface-overlay-default);
2089
- }
2090
- .bcc-frame--overlay.bcc-frame--shadow {
2091
- @apply shadow-overlay;
2092
- }
2091
+ .bcc-frame--overlay {
2092
+ --ctx-background: var(--color-elevation-surface-overlay-default);
2093
+ @apply border;
2094
+ }
2095
+ .bcc-frame--overlay.bcc-frame--shadow {
2096
+ @apply shadow-overlay dark:border-default;
2097
+ }
2093
2098
 
2094
- .bcc-frame--sunken {
2095
- --ctx-background: var(--color-elevation-surface-sunken-default);
2096
- }
2097
- .bcc-frame--sunken.bcc-frame--shadow {
2098
- @apply shadow-inner;
2099
- }
2099
+ .bcc-frame--sunken {
2100
+ --ctx-background: var(--color-elevation-surface-sunken-default);
2101
+ @apply border;
2102
+ }
2103
+ .bcc-frame--sunken.bcc-frame--shadow {
2104
+ @apply dark:border-default shadow-inner;
2105
+ }
2100
2106
  }
2101
2107
 
2102
2108
 
2109
+
2103
2110
  /* from ./BccGraphic/BccGraphic.css */
2104
2111
  @layer components {
2105
- .bcc-graphic .corner,
2106
- .bcc-graphic .center-slot {
2107
- @apply absolute z-10;
2108
- }
2109
- .bcc-graphic .corner.top-left {
2110
- @apply left-4 top-4;
2111
- }
2112
- .bcc-graphic .corner.top-right {
2113
- @apply right-4 top-4;
2114
- }
2115
- .bcc-graphic .corner.bottom-right {
2116
- @apply bottom-4 right-4;
2117
- }
2118
- .bcc-graphic .corner.bottom-left {
2119
- @apply bottom-4 left-4;
2120
- }
2121
- .bcc-graphic .center-slot {
2122
- @apply inset-1/4 h-1/2 w-1/2 flex items-center justify-center;
2123
- }
2112
+ .bcc-graphic .corner,
2113
+ .bcc-graphic .center-slot {
2114
+ @apply absolute z-10;
2115
+ }
2116
+ .bcc-graphic .corner.top-left {
2117
+ @apply top-4 left-4;
2118
+ }
2119
+ .bcc-graphic .corner.top-right {
2120
+ @apply top-4 right-4;
2121
+ }
2122
+ .bcc-graphic .corner.bottom-right {
2123
+ @apply right-4 bottom-4;
2124
+ }
2125
+ .bcc-graphic .corner.bottom-left {
2126
+ @apply bottom-4 left-4;
2127
+ }
2128
+ .bcc-graphic .center-slot {
2129
+ @apply inset-1/4 flex h-1/2 w-1/2 items-center justify-center;
2130
+ }
2124
2131
 
2125
- .bcc-graphic {
2126
- @apply relative flex max-h-full w-full bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
2127
- }
2132
+ .bcc-graphic {
2133
+ @apply from-background-brand-bolder-default to-background-brand-subtle-default relative flex max-h-full w-full bg-linear-to-tr;
2134
+ }
2128
2135
 
2129
- .bcc-graphic-banner {
2130
- @apply absolute inset-0 h-full w-full object-cover object-center;
2131
- }
2132
- .bcc-graphic-banner--loading {
2133
- @apply animate-pulse bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
2134
- }
2136
+ .bcc-graphic-banner {
2137
+ @apply absolute inset-0 h-full w-full object-cover object-center;
2138
+ }
2139
+ .bcc-graphic-banner--loading {
2140
+ @apply from-background-brand-bolder-default to-background-brand-subtle-default animate-pulse bg-linear-to-tr;
2141
+ }
2135
2142
 
2136
- .bcc-graphic-logo {
2137
- @apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center;
2138
- }
2139
- .bcc-graphic-logo--loading {
2140
- @apply animate-pulse bg-black opacity-10 blur-sm;
2141
- }
2143
+ .bcc-graphic-logo {
2144
+ @apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center;
2145
+ }
2146
+ .bcc-graphic-logo--loading {
2147
+ @apply animate-pulse bg-black opacity-10 blur-sm;
2148
+ }
2149
+
2150
+ .bcc-graphic.bcc-gb-grayscale .bcc-graphic-banner,
2151
+ .bcc-graphic.bcc-gb-grayscale .bcc-graphic-logo {
2152
+ @apply brightness-75 grayscale;
2153
+ }
2154
+ .bcc-graphic.bcc-gb-highlight .bcc-graphic-banner,
2155
+ .bcc-graphic.bcc-gb-highlight .bcc-graphic-logo {
2156
+ @apply brightness-150;
2157
+ }
2158
+ }
2159
+
2160
+
2161
+
2162
+ /* from ./BccImage/BccImage.css */
2163
+ @layer components {
2164
+ .bcc-image {
2165
+ @apply relative inline-block leading-none;
2166
+ }
2167
+
2168
+ .bcc-image__img {
2169
+ @apply block max-w-full align-middle;
2170
+ }
2171
+
2172
+ .bcc-image--preview {
2173
+ @apply cursor-zoom-in;
2174
+ }
2175
+
2176
+ .bcc-image__preview-mask {
2177
+ @apply absolute inset-0 m-0 flex cursor-pointer items-center justify-center border-0 bg-black/40 p-0 opacity-0 transition-opacity;
2178
+ }
2179
+
2180
+ .bcc-image--preview:hover .bcc-image__preview-mask,
2181
+ .bcc-image--preview:focus-within .bcc-image__preview-mask {
2182
+ @apply opacity-100;
2183
+ }
2184
+
2185
+ .bcc-image__preview-icon {
2186
+ @apply size-6 text-white;
2187
+ }
2188
+
2189
+ @media (width < 750px) {
2190
+ .bcc-image--preview .bcc-image__preview-mask {
2191
+ @apply opacity-100;
2192
+ }
2193
+ }
2142
2194
  }
2143
2195
 
2144
2196
 
@@ -2203,266 +2255,252 @@
2203
2255
 
2204
2256
  /* from ./BccNpsScore/BccNpsScore.css */
2205
2257
  @layer components {
2206
- .bcc-nps-score {
2207
- @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2 select-none;
2208
- }
2258
+ .bcc-nps-score {
2259
+ @apply body-sm flex min-w-70 flex-col gap-y-2 p-4 select-none;
2260
+ }
2209
2261
 
2210
- .bcc-nps-score--heading {
2211
- @apply flex items-center justify-between;
2212
- }
2262
+ .bcc-nps-score--heading {
2263
+ @apply flex items-center justify-between;
2264
+ }
2213
2265
 
2214
- .bcc-nps-score--label {
2215
- @apply flex-1 truncate;
2216
- }
2266
+ .bcc-nps-score--label {
2267
+ @apply flex-1 truncate;
2268
+ }
2217
2269
 
2218
- .bcc-nps-score--bar {
2219
- @apply flex justify-evenly rounded-xl text-white pointer-events-none;
2220
- @apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
2221
- }
2270
+ .bcc-nps-score--bar {
2271
+ @apply pointer-events-none flex justify-evenly rounded-xl text-white;
2272
+ @apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
2273
+ }
2222
2274
 
2223
- .bcc-nps-score--bar.reverse {
2224
- @apply bg-linear-to-l;
2225
- }
2275
+ .bcc-nps-score--bar.reverse {
2276
+ @apply bg-linear-to-l;
2277
+ }
2226
2278
 
2227
- .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
2228
- @apply bg-ctx ctx-gray-subtlest text-disabled;
2229
- }
2279
+ .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
2280
+ @apply bg-ctx ctx-gray-subtlest text-disabled;
2281
+ }
2230
2282
 
2231
- .bcc-nps-score--number {
2232
- @apply border-border-inverse;
2233
- @apply flex h-8 flex-1 items-center justify-center border-r-2 font-bold text-sm leading-none;
2234
- @apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
2235
- }
2283
+ .bcc-nps-score--number {
2284
+ @apply border-inverse;
2285
+ @apply flex h-8 flex-1 items-center justify-center border-r-2 text-sm leading-none font-bold;
2286
+ @apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
2287
+ }
2236
2288
 
2237
- .bcc-nps-score--number:disabled {
2238
- @apply cursor-not-allowed;
2239
- }
2289
+ .bcc-nps-score--number:disabled {
2290
+ @apply cursor-not-allowed;
2291
+ }
2240
2292
 
2241
- .bcc-nps-score--number.active {
2242
- @apply pointer-events-none;
2243
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2244
- }
2293
+ .bcc-nps-score--number.active {
2294
+ @apply pointer-events-none;
2295
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2296
+ }
2245
2297
 
2246
- .bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
2247
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2248
- }
2298
+ .bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
2299
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2300
+ }
2249
2301
 
2250
- .bcc-nps-score--number.inactive {
2251
- @apply bg-ctx text-ctx ctx-gray-subtler;
2252
- }
2302
+ .bcc-nps-score--number.inactive {
2303
+ @apply bg-ctx text-ctx ctx-gray-subtler;
2304
+ }
2253
2305
 
2254
- .bcc-nps-score--number:first-child {
2255
- @apply rounded-l-xl pl-0.5;
2256
- }
2257
- .bcc-nps-score--number:last-child{
2258
- @apply rounded-r-xl border-r-0 pr-0.5;
2259
- }
2306
+ .bcc-nps-score--number:first-child {
2307
+ @apply rounded-l-xl pl-0.5;
2308
+ }
2309
+ .bcc-nps-score--number:last-child {
2310
+ @apply rounded-r-xl border-r-0 pr-0.5;
2311
+ }
2260
2312
  }
2261
2313
 
2262
2314
 
2263
2315
 
2264
2316
  /* from ./BccReact/BccReact.css */
2265
2317
  @layer components {
2266
- .bcc-react {
2267
- @apply relative flex w-full items-center overflow-visible;
2268
- }
2269
- .bcc-react-toggle {
2270
- @apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition;
2271
- }
2272
- .bcc-react-list {
2273
- @apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
2274
- }
2275
- .bcc-react-empty {
2276
- @apply heading-xs flex items-center;
2277
- }
2318
+ .bcc-react {
2319
+ @apply relative flex w-full items-center overflow-visible;
2320
+ }
2321
+ .bcc-react-toggle {
2322
+ @apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 transition;
2323
+ }
2324
+ .bcc-react-list {
2325
+ @apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
2326
+ }
2327
+ .bcc-react-empty {
2328
+ @apply heading-xs flex items-center;
2329
+ }
2278
2330
 
2279
- .bcc-react-selector-container {
2280
- @apply absolute z-50 h-9;
2281
- @apply top-11 origin-top-left;
2282
- }
2331
+ .bcc-react-selector-container {
2332
+ @apply absolute z-50 h-9;
2333
+ @apply top-11 origin-top-left;
2334
+ }
2283
2335
 
2284
- .bcc-react-selector-container--top {
2285
- @apply -top-10 origin-bottom-left;
2286
- }
2336
+ .bcc-react-selector-container--top {
2337
+ @apply -top-10 origin-bottom-left;
2338
+ }
2287
2339
 
2288
- .bcc-react-selector {
2289
- @apply flex h-9 flex-col overflow-hidden bg-neutral-100 px-0 shadow-md;
2290
- border-radius: 18px;
2291
- }
2340
+ .bcc-react-selector {
2341
+ @apply flex h-9 flex-col overflow-hidden bg-neutral-100 px-0 shadow-md;
2342
+ border-radius: 18px;
2343
+ }
2292
2344
 
2293
- .bcc-react-selector-emojis-container {
2294
- @apply flex items-center bg-neutral-100 px-1;
2295
- }
2345
+ .bcc-react-selector-emojis-container {
2346
+ @apply flex items-center bg-neutral-100 px-1;
2347
+ }
2296
2348
 
2297
- .bcc-react-selector-more {
2298
- @apply flex w-9 items-center justify-center;
2299
- }
2300
- .bcc-react-selector-more-btn {
2301
- @apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-200;
2302
- }
2349
+ .bcc-react-selector-more {
2350
+ @apply flex w-9 items-center justify-center;
2351
+ }
2352
+ .bcc-react-selector-more-btn {
2353
+ @apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-200;
2354
+ }
2303
2355
 
2304
- .bcc-react-dropdown-container {
2305
- @apply left-0 top-0 -z-10 w-full max-w-full;
2306
- width: 296px;
2307
- }
2308
- .bcc-react-dropdown-container--top {
2309
- @apply bottom-0 top-auto pb-0;
2310
- }
2356
+ .bcc-react-dropdown-container {
2357
+ @apply top-0 left-0 -z-10 w-full max-w-full;
2358
+ width: 296px;
2359
+ }
2360
+ .bcc-react-dropdown-container--top {
2361
+ @apply top-auto bottom-0 pb-0;
2362
+ }
2311
2363
 
2312
- .bcc-react-dropdown {
2313
- @apply -z-10 flex w-full flex-wrap overflow-hidden px-1;
2314
- }
2364
+ .bcc-react-dropdown {
2365
+ @apply -z-10 flex w-full flex-wrap overflow-hidden px-1;
2366
+ }
2315
2367
 
2316
- .bcc-react-arrow-down-icon {
2317
- @apply h-6 w-6 text-slate-600;
2318
- transition: transform 0.3s ease;
2319
- }
2320
- .bcc-react-arrow-down-icon.open {
2321
- transform: rotate(-180deg);
2322
- }
2368
+ .bcc-react-arrow-down-icon {
2369
+ @apply h-6 w-6 text-slate-600;
2370
+ transition: transform 0.3s ease;
2371
+ }
2372
+ .bcc-react-arrow-down-icon.open {
2373
+ transform: rotate(-180deg);
2374
+ }
2323
2375
 
2324
- .bcc-react-selector-item {
2325
- @apply p-2 text-xl leading-none transition-transform duration-200 ease-out h-9 w-9 relative;
2326
- }
2376
+ .bcc-react-selector-item {
2377
+ @apply relative h-9 w-9 p-2 text-xl leading-none transition-transform duration-200 ease-out;
2378
+ }
2327
2379
 
2328
- .bcc-react-selector-item--clicked {
2329
- animation: scaleFadeOut 300ms forwards;
2330
- }
2380
+ .bcc-react-selector-item--clicked {
2381
+ animation: scaleFadeOut 300ms forwards;
2382
+ }
2331
2383
 
2332
- @keyframes scaleFadeOut {
2333
- 0% {
2334
- transform: scale(1);
2335
- opacity: 1;
2336
- }
2337
- 100% {
2338
- transform: scale(1.4);
2339
- opacity: 0;
2340
- }
2341
- }
2384
+ @keyframes scaleFadeOut {
2385
+ 0% {
2386
+ transform: scale(1);
2387
+ opacity: 1;
2388
+ }
2389
+ 100% {
2390
+ transform: scale(1.4);
2391
+ opacity: 0;
2392
+ }
2393
+ }
2342
2394
 
2343
- .bcc-react-emoji-list-item {
2344
- @apply flex ctx clickable items-center justify-center rounded-full p-1 text-2xl leading-none drop-shadow transition-all hover:scale-105;
2345
- /* Default --not-selected */
2346
- @apply ctx-neutral-subtlest;
2347
- }
2348
- .bcc-react-emoji-list-item.selected {
2349
- @apply ctx-neutral-subtle;
2350
- }
2395
+ .bcc-react-emoji-list-item {
2396
+ @apply ctx clickable center h-7 min-w-7 shrink-0 rounded-full p-1 text-lg leading-none drop-shadow transition-all hover:scale-105;
2397
+ /* Default --not-selected */
2398
+ @apply ctx-neutral-subtlest;
2399
+ }
2400
+ .bcc-react-emoji-list-item span {
2401
+ @apply leading-none;
2402
+ }
2403
+ .bcc-react-emoji-list-item.selected {
2404
+ @apply ctx-neutral-subtle;
2405
+ }
2351
2406
  }
2352
2407
 
2353
2408
 
2354
2409
 
2355
2410
  /* from ./BccTag/BccTag.css */
2356
-
2357
2411
  @layer components {
2358
2412
  .bcc-tag.bcc-badge {
2359
2413
  @apply w-auto;
2360
2414
  }
2361
2415
  .bcc-tag.bcc-badge.md {
2362
- @apply font-regular h-6;
2416
+ @apply body-md h-6;
2363
2417
  }
2364
2418
  .bcc-tag.bcc-badge.sm {
2365
- @apply font-regular h-5;
2419
+ @apply body-sm h-5;
2366
2420
  }
2367
2421
  .bcc-tag.bcc-badge.lg {
2368
- @apply font-regular h-8;
2422
+ @apply body-md h-8;
2369
2423
  }
2370
2424
  .bcc-tag.bcc-badge.xl {
2371
- @apply font-regular h-10;
2425
+ @apply body-lg h-10;
2372
2426
  }
2373
2427
  }
2374
2428
 
2375
2429
 
2376
2430
 
2431
+
2377
2432
  /* === ./components/wrapped/styles.css === */
2378
2433
 
2379
2434
  /* from ./BccAvatar/BccAvatar.css */
2380
2435
  @layer components {
2381
- .bcc-avatar {
2382
- --p-avatar-background: var(--ctx-background);
2383
- --p-avatar-color: var(--ctx-text);
2384
- --bcc-avatar-border: var(--ctx-border);
2385
- @apply overflow-hidden shrink-0 ctx-gray-subtler text-sm;
2386
- }
2387
-
2388
- .bcc-avatar .icon {
2389
- height: var(--icon-size-sm);
2390
- }
2436
+ .bcc-avatar {
2437
+ --p-avatar-background: var(--ctx-background);
2438
+ --p-avatar-color: var(--ctx-text);
2439
+ --bcc-avatar-border: var(--ctx-border);
2440
+ --p-icon-size: var(--icon-size-sm);
2441
+ @apply ctx-gray-subtler shrink-0 overflow-hidden text-sm;
2442
+ }
2391
2443
 
2392
- .bcc-avatar.male,
2393
- .bcc-avatar.M {
2394
- @apply ctx-blue-subtler;
2395
- }
2396
- .bcc-avatar.female,
2397
- .bcc-avatar.F {
2398
- @apply ctx-purple-subtler;
2399
- }
2400
- .bcc-avatar.male.child,
2401
- .bcc-avatar.M.child {
2402
- @apply ctx-teal-subtler;
2403
- }
2404
- .bcc-avatar.female.child,
2405
- .bcc-avatar.F.child {
2406
- @apply ctx-magenta-subtler;
2407
- }
2408
- .bcc-avatar.bordered {
2409
- @apply border-2 border-ctx;
2410
- }
2411
- .bcc-avatar.xs {
2412
- @apply size-5 text-xs;
2413
- }
2414
- .bcc-avatar.xs .icon {
2415
- height: var(--icon-size-xs);
2416
- }
2417
- .bcc-avatar.sm {
2418
- @apply size-6 text-xs;
2419
- }
2420
- .bcc-avatar.sm .icon {
2421
- height: var(--icon-size-xs);
2422
- }
2423
- .bcc-avatar.md {
2424
- /* same as default */
2425
- }
2426
- .bcc-avatar.md .icon {
2427
- /* same as default */
2428
- }
2429
- .bcc-avatar.lg {
2430
- @apply size-10 text-md;
2431
- }
2432
- .bcc-avatar.lg .icon {
2433
- height: var(--icon-size-md);
2434
- }
2435
- .bcc-avatar.xl {
2436
- @apply size-12 text-xl;
2437
- }
2438
- .bcc-avatar.xl .icon {
2439
- height: var(--icon-size-lg);
2440
- }
2441
- .bcc-avatar.xxl {
2442
- @apply size-20 text-3xl;
2443
- }
2444
- .bcc-avatar.xxl .icon {
2445
- height: var(--icon-size-xl);
2446
- }
2447
- .bcc-avatar.xxxl {
2448
- @apply size-24 text-4xl;
2449
- }
2450
- .bcc-avatar.xxxl .icon {
2451
- height: var(--icon-size-xl);
2452
- }
2444
+ .bcc-avatar.male,
2445
+ .bcc-avatar.M {
2446
+ @apply ctx-blue-subtler;
2447
+ }
2448
+ .bcc-avatar.female,
2449
+ .bcc-avatar.F {
2450
+ @apply ctx-purple-subtler;
2451
+ }
2452
+ .bcc-avatar.male.child,
2453
+ .bcc-avatar.M.child {
2454
+ @apply ctx-teal-subtler;
2455
+ }
2456
+ .bcc-avatar.female.child,
2457
+ .bcc-avatar.F.child {
2458
+ @apply ctx-magenta-subtler;
2459
+ }
2460
+ .bcc-avatar.bordered {
2461
+ @apply border-ctx border-2;
2462
+ }
2463
+ .bcc-avatar.xs {
2464
+ @apply size-5 text-xs;
2465
+ --p-icon-size: var(--icon-size-xs);
2466
+ }
2467
+ .bcc-avatar.sm {
2468
+ @apply size-6 text-xs;
2469
+ --p-icon-size: var(--icon-size-xs);
2470
+ }
2471
+ /* .bcc-avatar.md {
2472
+ same as default
2473
+ }*/
2474
+ .bcc-avatar.lg {
2475
+ @apply text-md size-10;
2476
+ --p-icon-size: var(--icon-size-md);
2477
+ }
2478
+ .bcc-avatar.xl {
2479
+ @apply size-12 text-xl;
2480
+ --p-icon-size: var(--icon-size-lg);
2481
+ }
2482
+ .bcc-avatar.xxl {
2483
+ @apply size-20 text-3xl;
2484
+ --p-icon-size: var(--icon-size-xl);
2485
+ }
2486
+ .bcc-avatar.xxxl {
2487
+ @apply size-24 text-4xl;
2488
+ --p-icon-size: var(--icon-size-xl);
2489
+ }
2453
2490
 
2454
- .p-overlaybadge .bcc-avatar.p-avatar-circle.lg~.p-badge,
2455
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
2456
- transform: translate(40%, -40%);
2457
- }
2491
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.lg ~ .p-badge,
2492
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xl ~ .p-badge {
2493
+ transform: translate(40%, -40%);
2494
+ }
2458
2495
 
2459
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
2460
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge {
2461
- transform: translate(20%, -20%);
2462
- }
2496
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl ~ .p-badge,
2497
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl ~ .p-badge {
2498
+ transform: translate(20%, -20%);
2499
+ }
2463
2500
  }
2464
2501
 
2465
2502
 
2503
+
2466
2504
  /* from ./BccTabs/BccTabs.css */
2467
2505
  @layer components {
2468
2506
  .bcc-tabs-fill.p-tabs {
@@ -2481,6 +2519,12 @@
2481
2519
  height: 100%;
2482
2520
  overflow: auto;
2483
2521
  }
2522
+ .bcc-tabs-fluid.p-tabs {
2523
+ width: 100%;
2524
+ }
2525
+ .p-tabs .p-tab {
2526
+ @apply heading-sm;
2527
+ }
2484
2528
  }
2485
2529
 
2486
2530
 
@@ -2509,22 +2553,35 @@
2509
2553
  @apply m-0 p-0 font-sans antialiased;
2510
2554
  -webkit-font-smoothing: antialiased;
2511
2555
  -moz-osx-font-smoothing: grayscale;
2556
+ line-height: 1.2;
2557
+ font-kerning: normal;
2512
2558
  }
2513
2559
 
2514
- hr {
2515
- border-color: var(--color-border-default);
2516
- }
2560
+ @layer base {
2561
+ hr {
2562
+ border-color: var(--color-border-default);
2563
+ }
2517
2564
 
2518
- b,
2519
- strong,
2520
- .bold {
2521
- font-weight: bold;
2522
- --ctx-text: var(--ctx-text-bold);
2523
- }
2565
+ b,
2566
+ strong,
2567
+ .bold {
2568
+ font-weight: bold;
2569
+ --ctx-text: var(--ctx-text-bold);
2570
+ }
2524
2571
 
2525
- /* Disable state */
2526
- :disabled,
2527
- .disabled {
2528
- cursor: not-allowed;
2529
- pointer-events: none;
2572
+ /* Disable state */
2573
+ :disabled,
2574
+ .disabled {
2575
+ cursor: not-allowed;
2576
+ pointer-events: none;
2577
+ }
2530
2578
  }
2579
+
2580
+
2581
+ /* SFC <style> blocks extracted all .vue components */
2582
+ @import './sfc-styles.css';
2583
+
2584
+ /* Library utility classes, compiled from the library's own components.
2585
+ Contains only the utility class rules used inside the library — no preflight,
2586
+ no @theme variables, no design tokens, since theme.css already provides those. */
2587
+ @import './library-utilities.css';