@bcc-code/component-library-vue 0.0.0-dev.f3f88c3 → 0.0.0-dev.f41f3d5

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 (40) 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 +13516 -12428
  9. package/dist/component-library.umd.cjs +1294 -399
  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 +808 -800
  15. package/dist-types/components/custom/BccAppNavigation/BccAppNavigation.vue.d.ts +1 -0
  16. package/dist-types/components/custom/BccGraphic/BccGraphic.vue.d.ts +7 -4
  17. package/dist-types/components/custom/BccImage/BccImage.vue.d.ts +54 -0
  18. package/dist-types/components/custom/BccLightbox/BccLightboxMedia.vue.d.ts +18 -0
  19. package/dist-types/components/custom/BccLightbox/composables.d.ts +23 -0
  20. package/dist-types/components/custom/BccLightbox/detectMedia.d.ts +4 -0
  21. package/dist-types/components/custom/BccLightbox/index.d.ts +6 -0
  22. package/dist-types/components/custom/BccLightbox/state.d.ts +33 -0
  23. package/dist-types/components/custom/BccLightbox/types.d.ts +31 -0
  24. package/dist-types/components/custom/BccNpsScore/BccNpsScore.vue.d.ts +1 -1
  25. package/dist-types/components/custom/BccReact/BccReact.vue.d.ts +3 -2
  26. package/dist-types/components/custom/BccStepIndicator/BccStepIndicator.vue.d.ts +3 -3
  27. package/dist-types/components/custom/BccTag/BccTag.vue.d.ts +1 -0
  28. package/dist-types/components/custom/BccTopNavigation/BccTopNavigation.vue.d.ts +14 -4
  29. package/dist-types/components/custom/index.d.ts +3 -1
  30. package/dist-types/components/wrapped/BccButton.vue.d.ts +4 -3
  31. package/dist-types/components/wrapped/BccCheckbox.vue.d.ts +3 -0
  32. package/dist-types/components/wrapped/BccMenu/BccMenu.vue.d.ts +15 -1
  33. package/dist-types/components/wrapped/BccMessage.vue.d.ts +6 -1
  34. package/dist-types/components/wrapped/BccRadioButton.vue.d.ts +3 -0
  35. package/dist-types/components/wrapped/BccSelectButton.vue.d.ts +5 -2
  36. package/dist-types/components/wrapped/index.d.ts +0 -2
  37. package/dist-types/index.d.ts +1 -0
  38. package/package.json +111 -103
  39. package/dist-types/components/wrapped/BccImage.vue.d.ts +0 -17
  40. /package/dist-types/components/custom/{BccCircleLoader/BccCircleLoader.vue.d.ts → BccLightbox/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 === */
@@ -677,15 +638,11 @@
677
638
  --ctx-background: var(--color-default-neutral-0);
678
639
  --ctx-gradient: var(--color-default-neutral-100);
679
640
  --ctx-border: var(--color-default-neutral-300);
641
+ --ctx-border-bold: var(--color-default-neutral-800);
680
642
  --ctx-shadow: var(--color-neutral-alpha-500A);
681
643
  --ctx-text-hover: var(--color-default-neutral-1000);
682
- --ctx-text-pressed: var(--color-default-neutral-1000);
683
644
  --ctx-background-hover: var(--color-default-neutral-100);
684
- --ctx-background-pressed: var(--color-default-neutral-200);
685
- --ctx-gradient-hover: var(--color-default-neutral-200);
686
- --ctx-gradient-pressed: var(--color-default-neutral-200);
687
645
  --ctx-border-hover: var(--color-default-neutral-300);
688
- --ctx-border-pressed: var(--color-default-neutral-300);
689
646
  }
690
647
 
691
648
  @utility ctx-blue-bolder {
@@ -693,16 +650,12 @@
693
650
  --ctx-text-bold: var(--color-default-blue-100);
694
651
  --ctx-background: var(--color-default-blue-700);
695
652
  --ctx-gradient: var(--color-default-blue-800);
696
- --ctx-border: var(--color-default-blue-700);
653
+ --ctx-border: var(--color-default-blue-800);
654
+ --ctx-border-bold: var(--color-default-blue-600);
697
655
  --ctx-shadow: var(--color-neutral-alpha-500A);
698
656
  --ctx-text-hover: var(--color-default-blue-200);
699
- --ctx-text-pressed: var(--color-default-blue-200);
700
657
  --ctx-background-hover: var(--color-default-blue-800);
701
- --ctx-background-pressed: var(--color-default-blue-900);
702
- --ctx-gradient-hover: var(--color-default-blue-900);
703
- --ctx-gradient-pressed: var(--color-default-blue-900);
704
- --ctx-border-hover: var(--color-default-blue-700);
705
- --ctx-border-pressed: var(--color-default-blue-700);
658
+ --ctx-border-hover: var(--color-default-blue-800);
706
659
  }
707
660
 
708
661
  @utility ctx-blue-subtle {
@@ -711,15 +664,11 @@
711
664
  --ctx-background: var(--color-default-blue-400);
712
665
  --ctx-gradient: var(--color-default-blue-300);
713
666
  --ctx-border: var(--color-default-blue-500);
667
+ --ctx-border-bold: var(--color-default-blue-700);
714
668
  --ctx-shadow: var(--color-neutral-alpha-500A);
715
669
  --ctx-text-hover: var(--color-default-blue-900);
716
- --ctx-text-pressed: var(--color-default-blue-900);
717
670
  --ctx-background-hover: var(--color-default-blue-300);
718
- --ctx-background-pressed: var(--color-default-blue-200);
719
- --ctx-gradient-hover: var(--color-default-blue-200);
720
- --ctx-gradient-pressed: var(--color-default-blue-200);
721
671
  --ctx-border-hover: var(--color-default-blue-500);
722
- --ctx-border-pressed: var(--color-default-blue-500);
723
672
  }
724
673
 
725
674
  @utility ctx-blue-subtler {
@@ -727,16 +676,12 @@
727
676
  --ctx-text-bold: var(--color-default-blue-900);
728
677
  --ctx-background: var(--color-default-blue-200);
729
678
  --ctx-gradient: var(--color-default-blue-300);
730
- --ctx-border: var(--color-default-blue-400);
679
+ --ctx-border: var(--color-default-blue-300);
680
+ --ctx-border-bold: var(--color-default-blue-500);
731
681
  --ctx-shadow: var(--color-neutral-alpha-500A);
732
682
  --ctx-text-hover: var(--color-default-blue-800);
733
- --ctx-text-pressed: var(--color-default-blue-800);
734
683
  --ctx-background-hover: var(--color-default-blue-300);
735
- --ctx-background-pressed: var(--color-default-blue-400);
736
- --ctx-gradient-hover: var(--color-default-blue-400);
737
- --ctx-gradient-pressed: var(--color-default-blue-400);
738
- --ctx-border-hover: var(--color-default-blue-400);
739
- --ctx-border-pressed: var(--color-default-blue-400);
684
+ --ctx-border-hover: var(--color-default-blue-300);
740
685
  }
741
686
 
742
687
  @utility ctx-blue-subtlest {
@@ -744,16 +689,12 @@
744
689
  --ctx-text-bold: var(--color-default-blue-900);
745
690
  --ctx-background: var(--color-default-blue-100);
746
691
  --ctx-gradient: var(--color-default-blue-200);
747
- --ctx-border: var(--color-default-blue-300);
692
+ --ctx-border: var(--color-default-blue-200);
693
+ --ctx-border-bold: var(--color-default-blue-400);
748
694
  --ctx-shadow: var(--color-neutral-alpha-500A);
749
695
  --ctx-text-hover: var(--color-default-blue-800);
750
- --ctx-text-pressed: var(--color-default-blue-800);
751
696
  --ctx-background-hover: var(--color-default-blue-200);
752
- --ctx-background-pressed: var(--color-default-blue-300);
753
- --ctx-gradient-hover: var(--color-default-blue-300);
754
- --ctx-gradient-pressed: var(--color-default-blue-300);
755
- --ctx-border-hover: var(--color-default-blue-300);
756
- --ctx-border-pressed: var(--color-default-blue-300);
697
+ --ctx-border-hover: var(--color-default-blue-200);
757
698
  }
758
699
 
759
700
  @utility ctx-brand-bold {
@@ -761,33 +702,25 @@
761
702
  --ctx-text-bold: var(--color-default-neutral-100);
762
703
  --ctx-background: var(--color-default-bcc-600);
763
704
  --ctx-gradient: var(--color-default-bcc-700);
764
- --ctx-border: var(--color-default-bcc-600);
705
+ --ctx-border: var(--color-default-bcc-700);
706
+ --ctx-border-bold: var(--color-default-bcc-500);
765
707
  --ctx-shadow: var(--color-neutral-alpha-500A);
766
708
  --ctx-text-hover: var(--color-default-bcc-200);
767
- --ctx-text-pressed: var(--color-default-bcc-200);
768
709
  --ctx-background-hover: var(--color-default-bcc-700);
769
- --ctx-background-pressed: var(--color-default-bcc-800);
770
- --ctx-gradient-hover: var(--color-default-bcc-800);
771
- --ctx-gradient-pressed: var(--color-default-bcc-800);
772
- --ctx-border-hover: var(--color-default-bcc-600);
773
- --ctx-border-pressed: var(--color-default-bcc-600);
710
+ --ctx-border-hover: var(--color-default-bcc-700);
774
711
  }
775
712
 
776
713
  @utility ctx-brand-bolder {
777
- --ctx-text: var(--color-default-bcc-100);
714
+ --ctx-text: var(--color-default-neutral-0);
778
715
  --ctx-text-bold: var(--color-default-neutral-0);
779
- --ctx-background: var(--color-default-bcc-700);
780
- --ctx-gradient: var(--color-default-bcc-800);
781
- --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);
782
720
  --ctx-shadow: var(--color-neutral-alpha-500A);
783
- --ctx-text-hover: var(--color-default-bcc-100);
784
- --ctx-text-pressed: var(--color-default-bcc-100);
785
- --ctx-background-hover: var(--color-default-bcc-800);
786
- --ctx-background-pressed: var(--color-default-bcc-900);
787
- --ctx-gradient-hover: var(--color-default-bcc-900);
788
- --ctx-gradient-pressed: var(--color-default-bcc-900);
789
- --ctx-border-hover: var(--color-default-bcc-700);
790
- --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);
791
724
  }
792
725
 
793
726
  @utility ctx-brand-boldest {
@@ -796,15 +729,11 @@
796
729
  --ctx-background: var(--color-default-bcc-1000);
797
730
  --ctx-gradient: var(--color-default-bcc-900);
798
731
  --ctx-border: var(--color-default-bcc-800);
732
+ --ctx-border-bold: var(--color-default-bcc-600);
799
733
  --ctx-shadow: var(--color-neutral-alpha-500A);
800
734
  --ctx-text-hover: var(--color-default-neutral-0);
801
- --ctx-text-pressed: var(--color-default-neutral-0);
802
735
  --ctx-background-hover: var(--color-default-bcc-900);
803
- --ctx-background-pressed: var(--color-default-bcc-800);
804
- --ctx-gradient-hover: var(--color-default-bcc-800);
805
- --ctx-gradient-pressed: var(--color-default-bcc-800);
806
736
  --ctx-border-hover: var(--color-default-bcc-800);
807
- --ctx-border-pressed: var(--color-default-bcc-800);
808
737
  }
809
738
 
810
739
  @utility ctx-brand-default {
@@ -813,15 +742,11 @@
813
742
  --ctx-background: var(--color-default-neutral-0);
814
743
  --ctx-gradient: var(--color-default-neutral-0);
815
744
  --ctx-border: var(--color-default-neutral-700);
745
+ --ctx-border-bold: var(--color-default-neutral-800);
816
746
  --ctx-shadow: var(--color-neutral-alpha-500A);
817
747
  --ctx-text-hover: var(--color-default-neutral-1000);
818
- --ctx-text-pressed: var(--color-default-neutral-1000);
819
748
  --ctx-background-hover: var(--color-default-neutral-0);
820
- --ctx-background-pressed: var(--color-default-neutral-0);
821
- --ctx-gradient-hover: var(--color-default-neutral-0);
822
- --ctx-gradient-pressed: var(--color-default-neutral-0);
823
749
  --ctx-border-hover: var(--color-default-neutral-700);
824
- --ctx-border-pressed: var(--color-default-neutral-700);
825
750
  }
826
751
 
827
752
  @utility ctx-brand-subtle {
@@ -830,15 +755,11 @@
830
755
  --ctx-background: var(--color-default-bcc-400);
831
756
  --ctx-gradient: var(--color-default-bcc-300);
832
757
  --ctx-border: var(--color-default-bcc-500);
758
+ --ctx-border-bold: var(--color-default-bcc-700);
833
759
  --ctx-shadow: var(--color-neutral-alpha-500A);
834
760
  --ctx-text-hover: var(--color-default-bcc-1000);
835
- --ctx-text-pressed: var(--color-default-bcc-1000);
836
761
  --ctx-background-hover: var(--color-default-bcc-300);
837
- --ctx-background-pressed: var(--color-default-bcc-200);
838
- --ctx-gradient-hover: var(--color-default-bcc-200);
839
- --ctx-gradient-pressed: var(--color-default-bcc-200);
840
762
  --ctx-border-hover: var(--color-default-bcc-500);
841
- --ctx-border-pressed: var(--color-default-bcc-500);
842
763
  }
843
764
 
844
765
  @utility ctx-brand-subtler {
@@ -846,16 +767,12 @@
846
767
  --ctx-text-bold: var(--color-default-bcc-800);
847
768
  --ctx-background: var(--color-default-bcc-200);
848
769
  --ctx-gradient: var(--color-default-bcc-300);
849
- --ctx-border: var(--color-default-bcc-400);
770
+ --ctx-border: var(--color-default-bcc-300);
771
+ --ctx-border-bold: var(--color-default-bcc-500);
850
772
  --ctx-shadow: var(--color-neutral-alpha-500A);
851
773
  --ctx-text-hover: var(--color-default-bcc-900);
852
- --ctx-text-pressed: var(--color-default-bcc-900);
853
774
  --ctx-background-hover: var(--color-default-bcc-300);
854
- --ctx-background-pressed: var(--color-default-bcc-400);
855
- --ctx-gradient-hover: var(--color-default-bcc-400);
856
- --ctx-gradient-pressed: var(--color-default-bcc-400);
857
- --ctx-border-hover: var(--color-default-bcc-400);
858
- --ctx-border-pressed: var(--color-default-bcc-400);
775
+ --ctx-border-hover: var(--color-default-bcc-300);
859
776
  }
860
777
 
861
778
  @utility ctx-brand-subtlest {
@@ -863,16 +780,12 @@
863
780
  --ctx-text-bold: var(--color-default-bcc-700);
864
781
  --ctx-background: var(--color-default-bcc-100);
865
782
  --ctx-gradient: var(--color-default-bcc-200);
866
- --ctx-border: var(--color-default-bcc-300);
783
+ --ctx-border: var(--color-default-bcc-200);
784
+ --ctx-border-bold: var(--color-default-bcc-400);
867
785
  --ctx-shadow: var(--color-neutral-alpha-500A);
868
786
  --ctx-text-hover: var(--color-default-bcc-800);
869
- --ctx-text-pressed: var(--color-default-bcc-800);
870
787
  --ctx-background-hover: var(--color-default-bcc-200);
871
- --ctx-background-pressed: var(--color-default-bcc-300);
872
- --ctx-gradient-hover: var(--color-default-bcc-300);
873
- --ctx-gradient-pressed: var(--color-default-bcc-300);
874
- --ctx-border-hover: var(--color-default-bcc-300);
875
- --ctx-border-pressed: var(--color-default-bcc-300);
788
+ --ctx-border-hover: var(--color-default-bcc-200);
876
789
  }
877
790
 
878
791
  @utility ctx-brown-bolder {
@@ -880,16 +793,12 @@
880
793
  --ctx-text-bold: var(--color-default-brown-100);
881
794
  --ctx-background: var(--color-default-brown-700);
882
795
  --ctx-gradient: var(--color-default-brown-800);
883
- --ctx-border: var(--color-default-brown-700);
796
+ --ctx-border: var(--color-default-brown-800);
797
+ --ctx-border-bold: var(--color-default-brown-600);
884
798
  --ctx-shadow: var(--color-neutral-alpha-500A);
885
799
  --ctx-text-hover: var(--color-default-brown-200);
886
- --ctx-text-pressed: var(--color-default-brown-200);
887
800
  --ctx-background-hover: var(--color-default-brown-800);
888
- --ctx-background-pressed: var(--color-default-brown-900);
889
- --ctx-gradient-hover: var(--color-default-brown-900);
890
- --ctx-gradient-pressed: var(--color-default-brown-900);
891
- --ctx-border-hover: var(--color-default-brown-700);
892
- --ctx-border-pressed: var(--color-default-brown-700);
801
+ --ctx-border-hover: var(--color-default-brown-800);
893
802
  }
894
803
 
895
804
  @utility ctx-brown-subtle {
@@ -898,15 +807,11 @@
898
807
  --ctx-background: var(--color-default-brown-400);
899
808
  --ctx-gradient: var(--color-default-brown-300);
900
809
  --ctx-border: var(--color-default-brown-500);
810
+ --ctx-border-bold: var(--color-default-brown-700);
901
811
  --ctx-shadow: var(--color-neutral-alpha-500A);
902
812
  --ctx-text-hover: var(--color-default-brown-900);
903
- --ctx-text-pressed: var(--color-default-brown-900);
904
813
  --ctx-background-hover: var(--color-default-brown-300);
905
- --ctx-background-pressed: var(--color-default-brown-200);
906
- --ctx-gradient-hover: var(--color-default-brown-200);
907
- --ctx-gradient-pressed: var(--color-default-brown-200);
908
814
  --ctx-border-hover: var(--color-default-brown-500);
909
- --ctx-border-pressed: var(--color-default-brown-500);
910
815
  }
911
816
 
912
817
  @utility ctx-brown-subtler {
@@ -914,16 +819,12 @@
914
819
  --ctx-text-bold: var(--color-default-brown-900);
915
820
  --ctx-background: var(--color-default-brown-200);
916
821
  --ctx-gradient: var(--color-default-brown-300);
917
- --ctx-border: var(--color-default-brown-400);
822
+ --ctx-border: var(--color-default-brown-300);
823
+ --ctx-border-bold: var(--color-default-brown-500);
918
824
  --ctx-shadow: var(--color-neutral-alpha-500A);
919
825
  --ctx-text-hover: var(--color-default-brown-800);
920
- --ctx-text-pressed: var(--color-default-brown-800);
921
826
  --ctx-background-hover: var(--color-default-brown-300);
922
- --ctx-background-pressed: var(--color-default-brown-400);
923
- --ctx-gradient-hover: var(--color-default-brown-400);
924
- --ctx-gradient-pressed: var(--color-default-brown-400);
925
- --ctx-border-hover: var(--color-default-brown-400);
926
- --ctx-border-pressed: var(--color-default-brown-400);
827
+ --ctx-border-hover: var(--color-default-brown-300);
927
828
  }
928
829
 
929
830
  @utility ctx-brown-subtlest {
@@ -931,16 +832,12 @@
931
832
  --ctx-text-bold: var(--color-default-brown-900);
932
833
  --ctx-background: var(--color-default-brown-100);
933
834
  --ctx-gradient: var(--color-default-brown-200);
934
- --ctx-border: var(--color-default-brown-300);
835
+ --ctx-border: var(--color-default-brown-200);
836
+ --ctx-border-bold: var(--color-default-brown-400);
935
837
  --ctx-shadow: var(--color-neutral-alpha-500A);
936
838
  --ctx-text-hover: var(--color-default-brown-800);
937
- --ctx-text-pressed: var(--color-default-brown-800);
938
839
  --ctx-background-hover: var(--color-default-brown-200);
939
- --ctx-background-pressed: var(--color-default-brown-300);
940
- --ctx-gradient-hover: var(--color-default-brown-300);
941
- --ctx-gradient-pressed: var(--color-default-brown-300);
942
- --ctx-border-hover: var(--color-default-brown-300);
943
- --ctx-border-pressed: var(--color-default-brown-300);
840
+ --ctx-border-hover: var(--color-default-brown-200);
944
841
  }
945
842
 
946
843
  @utility ctx-danger-bolder {
@@ -949,15 +846,11 @@
949
846
  --ctx-background: var(--color-default-red-700);
950
847
  --ctx-gradient: var(--color-default-red-800);
951
848
  --ctx-border: var(--color-default-red-700);
849
+ --ctx-border-bold: var(--color-default-red-400);
952
850
  --ctx-shadow: var(--color-neutral-alpha-500A);
953
851
  --ctx-text-hover: var(--color-default-red-200);
954
- --ctx-text-pressed: var(--color-default-red-200);
955
852
  --ctx-background-hover: var(--color-default-red-800);
956
- --ctx-background-pressed: var(--color-default-red-900);
957
- --ctx-gradient-hover: var(--color-default-red-900);
958
- --ctx-gradient-pressed: var(--color-default-red-900);
959
853
  --ctx-border-hover: var(--color-default-red-700);
960
- --ctx-border-pressed: var(--color-default-red-700);
961
854
  }
962
855
 
963
856
  @utility ctx-danger-subtlest {
@@ -966,32 +859,24 @@
966
859
  --ctx-background: var(--color-default-red-100);
967
860
  --ctx-gradient: var(--color-default-red-200);
968
861
  --ctx-border: var(--color-default-red-300);
862
+ --ctx-border-bold: var(--color-default-red-800);
969
863
  --ctx-shadow: var(--color-neutral-alpha-500A);
970
864
  --ctx-text-hover: var(--color-default-red-800);
971
- --ctx-text-pressed: var(--color-default-red-800);
972
865
  --ctx-background-hover: var(--color-default-red-200);
973
- --ctx-background-pressed: var(--color-default-red-300);
974
- --ctx-gradient-hover: var(--color-default-red-300);
975
- --ctx-gradient-pressed: var(--color-default-red-300);
976
866
  --ctx-border-hover: var(--color-default-red-300);
977
- --ctx-border-pressed: var(--color-default-red-300);
978
867
  }
979
868
 
980
869
  @utility ctx-gray-bolder {
981
870
  --ctx-text: var(--color-default-neutral-200);
982
871
  --ctx-text-bold: var(--color-default-neutral-100);
983
- --ctx-background: var(--color-default-neutral-800);
984
- --ctx-gradient: var(--color-default-neutral-700);
985
- --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);
986
876
  --ctx-shadow: var(--color-neutral-alpha-500A);
987
877
  --ctx-text-hover: var(--color-default-neutral-200);
988
- --ctx-text-pressed: var(--color-default-neutral-200);
989
- --ctx-background-hover: var(--color-default-neutral-700);
990
- --ctx-background-pressed: var(--color-default-neutral-600);
991
- --ctx-gradient-hover: var(--color-default-neutral-600);
992
- --ctx-gradient-pressed: var(--color-default-neutral-600);
993
- --ctx-border-hover: var(--color-default-neutral-700);
994
- --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);
995
880
  }
996
881
 
997
882
  @utility ctx-gray-subtle {
@@ -1000,15 +885,11 @@
1000
885
  --ctx-background: var(--color-default-neutral-400);
1001
886
  --ctx-gradient: var(--color-default-neutral-300);
1002
887
  --ctx-border: var(--color-default-neutral-500);
888
+ --ctx-border-bold: var(--color-default-neutral-700);
1003
889
  --ctx-shadow: var(--color-neutral-alpha-500A);
1004
890
  --ctx-text-hover: var(--color-default-neutral-900);
1005
- --ctx-text-pressed: var(--color-default-neutral-900);
1006
891
  --ctx-background-hover: var(--color-default-neutral-300);
1007
- --ctx-background-pressed: var(--color-default-neutral-200);
1008
- --ctx-gradient-hover: var(--color-default-neutral-200);
1009
- --ctx-gradient-pressed: var(--color-default-neutral-200);
1010
892
  --ctx-border-hover: var(--color-default-neutral-500);
1011
- --ctx-border-pressed: var(--color-default-neutral-500);
1012
893
  }
1013
894
 
1014
895
  @utility ctx-gray-subtler {
@@ -1016,16 +897,12 @@
1016
897
  --ctx-text-bold: var(--color-default-neutral-900);
1017
898
  --ctx-background: var(--color-default-neutral-200);
1018
899
  --ctx-gradient: var(--color-default-neutral-300);
1019
- --ctx-border: var(--color-default-neutral-400);
900
+ --ctx-border: var(--color-default-neutral-300);
901
+ --ctx-border-bold: var(--color-default-neutral-500);
1020
902
  --ctx-shadow: var(--color-neutral-alpha-500A);
1021
903
  --ctx-text-hover: var(--color-default-neutral-800);
1022
- --ctx-text-pressed: var(--color-default-neutral-800);
1023
904
  --ctx-background-hover: var(--color-default-neutral-300);
1024
- --ctx-background-pressed: var(--color-default-neutral-400);
1025
- --ctx-gradient-hover: var(--color-default-neutral-400);
1026
- --ctx-gradient-pressed: var(--color-default-neutral-400);
1027
- --ctx-border-hover: var(--color-default-neutral-400);
1028
- --ctx-border-pressed: var(--color-default-neutral-400);
905
+ --ctx-border-hover: var(--color-default-neutral-300);
1029
906
  }
1030
907
 
1031
908
  @utility ctx-gray-subtlest {
@@ -1033,16 +910,12 @@
1033
910
  --ctx-text-bold: var(--color-default-neutral-900);
1034
911
  --ctx-background: var(--color-default-neutral-100);
1035
912
  --ctx-gradient: var(--color-default-neutral-200);
1036
- --ctx-border: var(--color-default-neutral-300);
913
+ --ctx-border: var(--color-default-neutral-200);
914
+ --ctx-border-bold: var(--color-default-neutral-400);
1037
915
  --ctx-shadow: var(--color-neutral-alpha-500A);
1038
916
  --ctx-text-hover: var(--color-default-neutral-800);
1039
- --ctx-text-pressed: var(--color-default-neutral-800);
1040
917
  --ctx-background-hover: var(--color-default-neutral-200);
1041
- --ctx-background-pressed: var(--color-default-neutral-300);
1042
- --ctx-gradient-hover: var(--color-default-neutral-300);
1043
- --ctx-gradient-pressed: var(--color-default-neutral-300);
1044
- --ctx-border-hover: var(--color-default-neutral-300);
1045
- --ctx-border-pressed: var(--color-default-neutral-300);
918
+ --ctx-border-hover: var(--color-default-neutral-200);
1046
919
  }
1047
920
 
1048
921
  @utility ctx-green-bolder {
@@ -1050,16 +923,12 @@
1050
923
  --ctx-text-bold: var(--color-default-green-100);
1051
924
  --ctx-background: var(--color-default-green-700);
1052
925
  --ctx-gradient: var(--color-default-green-800);
1053
- --ctx-border: var(--color-default-green-700);
926
+ --ctx-border: var(--color-default-green-800);
927
+ --ctx-border-bold: var(--color-default-green-600);
1054
928
  --ctx-shadow: var(--color-neutral-alpha-500A);
1055
929
  --ctx-text-hover: var(--color-default-green-200);
1056
- --ctx-text-pressed: var(--color-default-green-200);
1057
930
  --ctx-background-hover: var(--color-default-green-800);
1058
- --ctx-background-pressed: var(--color-default-green-900);
1059
- --ctx-gradient-hover: var(--color-default-green-900);
1060
- --ctx-gradient-pressed: var(--color-default-green-900);
1061
- --ctx-border-hover: var(--color-default-green-700);
1062
- --ctx-border-pressed: var(--color-default-green-700);
931
+ --ctx-border-hover: var(--color-default-green-800);
1063
932
  }
1064
933
 
1065
934
  @utility ctx-green-subtle {
@@ -1068,15 +937,11 @@
1068
937
  --ctx-background: var(--color-default-green-400);
1069
938
  --ctx-gradient: var(--color-default-green-300);
1070
939
  --ctx-border: var(--color-default-green-500);
940
+ --ctx-border-bold: var(--color-default-green-700);
1071
941
  --ctx-shadow: var(--color-neutral-alpha-500A);
1072
942
  --ctx-text-hover: var(--color-default-green-900);
1073
- --ctx-text-pressed: var(--color-default-green-900);
1074
943
  --ctx-background-hover: var(--color-default-green-300);
1075
- --ctx-background-pressed: var(--color-default-green-200);
1076
- --ctx-gradient-hover: var(--color-default-green-200);
1077
- --ctx-gradient-pressed: var(--color-default-green-200);
1078
944
  --ctx-border-hover: var(--color-default-green-500);
1079
- --ctx-border-pressed: var(--color-default-green-500);
1080
945
  }
1081
946
 
1082
947
  @utility ctx-green-subtler {
@@ -1084,16 +949,12 @@
1084
949
  --ctx-text-bold: var(--color-default-green-900);
1085
950
  --ctx-background: var(--color-default-green-200);
1086
951
  --ctx-gradient: var(--color-default-green-300);
1087
- --ctx-border: var(--color-default-green-400);
952
+ --ctx-border: var(--color-default-green-300);
953
+ --ctx-border-bold: var(--color-default-green-500);
1088
954
  --ctx-shadow: var(--color-neutral-alpha-500A);
1089
955
  --ctx-text-hover: var(--color-default-green-800);
1090
- --ctx-text-pressed: var(--color-default-green-800);
1091
956
  --ctx-background-hover: var(--color-default-green-300);
1092
- --ctx-background-pressed: var(--color-default-green-400);
1093
- --ctx-gradient-hover: var(--color-default-green-400);
1094
- --ctx-gradient-pressed: var(--color-default-green-400);
1095
- --ctx-border-hover: var(--color-default-green-400);
1096
- --ctx-border-pressed: var(--color-default-green-400);
957
+ --ctx-border-hover: var(--color-default-green-300);
1097
958
  }
1098
959
 
1099
960
  @utility ctx-green-subtlest {
@@ -1101,16 +962,12 @@
1101
962
  --ctx-text-bold: var(--color-default-green-900);
1102
963
  --ctx-background: var(--color-default-green-100);
1103
964
  --ctx-gradient: var(--color-default-green-200);
1104
- --ctx-border: var(--color-default-green-300);
965
+ --ctx-border: var(--color-default-green-200);
966
+ --ctx-border-bold: var(--color-default-green-400);
1105
967
  --ctx-shadow: var(--color-neutral-alpha-500A);
1106
968
  --ctx-text-hover: var(--color-default-green-800);
1107
- --ctx-text-pressed: var(--color-default-green-800);
1108
969
  --ctx-background-hover: var(--color-default-green-200);
1109
- --ctx-background-pressed: var(--color-default-green-300);
1110
- --ctx-gradient-hover: var(--color-default-green-300);
1111
- --ctx-gradient-pressed: var(--color-default-green-300);
1112
- --ctx-border-hover: var(--color-default-green-300);
1113
- --ctx-border-pressed: var(--color-default-green-300);
970
+ --ctx-border-hover: var(--color-default-green-200);
1114
971
  }
1115
972
 
1116
973
  @utility ctx-info-bolder {
@@ -1119,15 +976,11 @@
1119
976
  --ctx-background: var(--color-default-blue-700);
1120
977
  --ctx-gradient: var(--color-default-blue-800);
1121
978
  --ctx-border: var(--color-default-blue-700);
979
+ --ctx-border-bold: var(--color-default-blue-400);
1122
980
  --ctx-shadow: var(--color-neutral-alpha-500A);
1123
981
  --ctx-text-hover: var(--color-default-blue-200);
1124
- --ctx-text-pressed: var(--color-default-blue-200);
1125
982
  --ctx-background-hover: var(--color-default-blue-800);
1126
- --ctx-background-pressed: var(--color-default-blue-900);
1127
- --ctx-gradient-hover: var(--color-default-blue-900);
1128
- --ctx-gradient-pressed: var(--color-default-blue-900);
1129
983
  --ctx-border-hover: var(--color-default-blue-700);
1130
- --ctx-border-pressed: var(--color-default-blue-700);
1131
984
  }
1132
985
 
1133
986
  @utility ctx-info-subtlest {
@@ -1136,15 +989,11 @@
1136
989
  --ctx-background: var(--color-default-blue-100);
1137
990
  --ctx-gradient: var(--color-default-blue-200);
1138
991
  --ctx-border: var(--color-default-blue-300);
992
+ --ctx-border-bold: var(--color-default-blue-800);
1139
993
  --ctx-shadow: var(--color-neutral-alpha-500A);
1140
994
  --ctx-text-hover: var(--color-default-blue-800);
1141
- --ctx-text-pressed: var(--color-default-blue-800);
1142
995
  --ctx-background-hover: var(--color-default-blue-200);
1143
- --ctx-background-pressed: var(--color-default-blue-300);
1144
- --ctx-gradient-hover: var(--color-default-blue-300);
1145
- --ctx-gradient-pressed: var(--color-default-blue-300);
1146
996
  --ctx-border-hover: var(--color-default-blue-300);
1147
- --ctx-border-pressed: var(--color-default-blue-300);
1148
997
  }
1149
998
 
1150
999
  @utility ctx-magenta-bolder {
@@ -1152,16 +1001,12 @@
1152
1001
  --ctx-text-bold: var(--color-default-magenta-100);
1153
1002
  --ctx-background: var(--color-default-magenta-700);
1154
1003
  --ctx-gradient: var(--color-default-magenta-800);
1155
- --ctx-border: var(--color-default-magenta-700);
1004
+ --ctx-border: var(--color-default-magenta-800);
1005
+ --ctx-border-bold: var(--color-default-magenta-600);
1156
1006
  --ctx-shadow: var(--color-neutral-alpha-500A);
1157
1007
  --ctx-text-hover: var(--color-default-magenta-200);
1158
- --ctx-text-pressed: var(--color-default-magenta-200);
1159
1008
  --ctx-background-hover: var(--color-default-magenta-800);
1160
- --ctx-background-pressed: var(--color-default-magenta-900);
1161
- --ctx-gradient-hover: var(--color-default-magenta-900);
1162
- --ctx-gradient-pressed: var(--color-default-magenta-900);
1163
- --ctx-border-hover: var(--color-default-magenta-700);
1164
- --ctx-border-pressed: var(--color-default-magenta-700);
1009
+ --ctx-border-hover: var(--color-default-magenta-800);
1165
1010
  }
1166
1011
 
1167
1012
  @utility ctx-magenta-subtle {
@@ -1170,15 +1015,11 @@
1170
1015
  --ctx-background: var(--color-default-magenta-400);
1171
1016
  --ctx-gradient: var(--color-default-magenta-300);
1172
1017
  --ctx-border: var(--color-default-magenta-500);
1018
+ --ctx-border-bold: var(--color-default-magenta-700);
1173
1019
  --ctx-shadow: var(--color-neutral-alpha-500A);
1174
1020
  --ctx-text-hover: var(--color-default-magenta-900);
1175
- --ctx-text-pressed: var(--color-default-magenta-900);
1176
1021
  --ctx-background-hover: var(--color-default-magenta-300);
1177
- --ctx-background-pressed: var(--color-default-magenta-200);
1178
- --ctx-gradient-hover: var(--color-default-magenta-200);
1179
- --ctx-gradient-pressed: var(--color-default-magenta-200);
1180
1022
  --ctx-border-hover: var(--color-default-magenta-500);
1181
- --ctx-border-pressed: var(--color-default-magenta-500);
1182
1023
  }
1183
1024
 
1184
1025
  @utility ctx-magenta-subtler {
@@ -1186,16 +1027,12 @@
1186
1027
  --ctx-text-bold: var(--color-default-magenta-900);
1187
1028
  --ctx-background: var(--color-default-magenta-200);
1188
1029
  --ctx-gradient: var(--color-default-magenta-300);
1189
- --ctx-border: var(--color-default-magenta-400);
1030
+ --ctx-border: var(--color-default-magenta-300);
1031
+ --ctx-border-bold: var(--color-default-magenta-500);
1190
1032
  --ctx-shadow: var(--color-neutral-alpha-500A);
1191
1033
  --ctx-text-hover: var(--color-default-magenta-800);
1192
- --ctx-text-pressed: var(--color-default-magenta-800);
1193
1034
  --ctx-background-hover: var(--color-default-magenta-300);
1194
- --ctx-background-pressed: var(--color-default-magenta-400);
1195
- --ctx-gradient-hover: var(--color-default-magenta-400);
1196
- --ctx-gradient-pressed: var(--color-default-magenta-400);
1197
- --ctx-border-hover: var(--color-default-magenta-400);
1198
- --ctx-border-pressed: var(--color-default-magenta-400);
1035
+ --ctx-border-hover: var(--color-default-magenta-300);
1199
1036
  }
1200
1037
 
1201
1038
  @utility ctx-magenta-subtlest {
@@ -1203,16 +1040,12 @@
1203
1040
  --ctx-text-bold: var(--color-default-magenta-900);
1204
1041
  --ctx-background: var(--color-default-magenta-100);
1205
1042
  --ctx-gradient: var(--color-default-magenta-200);
1206
- --ctx-border: var(--color-default-magenta-300);
1043
+ --ctx-border: var(--color-default-magenta-200);
1044
+ --ctx-border-bold: var(--color-default-magenta-400);
1207
1045
  --ctx-shadow: var(--color-neutral-alpha-500A);
1208
1046
  --ctx-text-hover: var(--color-default-magenta-800);
1209
- --ctx-text-pressed: var(--color-default-magenta-800);
1210
1047
  --ctx-background-hover: var(--color-default-magenta-200);
1211
- --ctx-background-pressed: var(--color-default-magenta-300);
1212
- --ctx-gradient-hover: var(--color-default-magenta-300);
1213
- --ctx-gradient-pressed: var(--color-default-magenta-300);
1214
- --ctx-border-hover: var(--color-default-magenta-300);
1215
- --ctx-border-pressed: var(--color-default-magenta-300);
1048
+ --ctx-border-hover: var(--color-default-magenta-200);
1216
1049
  }
1217
1050
 
1218
1051
  @utility ctx-neutral-bold {
@@ -1221,15 +1054,11 @@
1221
1054
  --ctx-background: var(--color-default-neutral-900);
1222
1055
  --ctx-gradient: var(--color-default-neutral-800);
1223
1056
  --ctx-border: var(--color-default-neutral-600);
1057
+ --ctx-border-bold: var(--color-default-neutral-500);
1224
1058
  --ctx-shadow: var(--color-neutral-alpha-500A);
1225
1059
  --ctx-text-hover: var(--color-default-neutral-300);
1226
- --ctx-text-pressed: var(--color-default-neutral-300);
1227
1060
  --ctx-background-hover: var(--color-default-neutral-800);
1228
- --ctx-background-pressed: var(--color-default-neutral-700);
1229
- --ctx-gradient-hover: var(--color-default-neutral-700);
1230
- --ctx-gradient-pressed: var(--color-default-neutral-700);
1231
1061
  --ctx-border-hover: var(--color-default-neutral-600);
1232
- --ctx-border-pressed: var(--color-default-neutral-600);
1233
1062
  }
1234
1063
 
1235
1064
  @utility ctx-neutral-bolder {
@@ -1238,15 +1067,11 @@
1238
1067
  --ctx-background: var(--color-default-neutral-1000);
1239
1068
  --ctx-gradient: var(--color-default-neutral-900);
1240
1069
  --ctx-border: var(--color-default-neutral-700);
1070
+ --ctx-border-bold: var(--color-default-neutral-400);
1241
1071
  --ctx-shadow: var(--color-neutral-alpha-500A);
1242
1072
  --ctx-text-hover: var(--color-default-neutral-200);
1243
- --ctx-text-pressed: var(--color-default-neutral-200);
1244
1073
  --ctx-background-hover: var(--color-default-neutral-900);
1245
- --ctx-background-pressed: var(--color-default-neutral-800);
1246
- --ctx-gradient-hover: var(--color-default-neutral-800);
1247
- --ctx-gradient-pressed: var(--color-default-neutral-800);
1248
1074
  --ctx-border-hover: var(--color-default-neutral-700);
1249
- --ctx-border-pressed: var(--color-default-neutral-700);
1250
1075
  }
1251
1076
 
1252
1077
  @utility ctx-neutral-boldest {
@@ -1255,15 +1080,11 @@
1255
1080
  --ctx-background: var(--color-default-neutral-1100);
1256
1081
  --ctx-gradient: var(--color-default-neutral-1000);
1257
1082
  --ctx-border: var(--color-default-neutral-800);
1083
+ --ctx-border-bold: var(--color-default-neutral-300);
1258
1084
  --ctx-shadow: var(--color-neutral-alpha-500A);
1259
1085
  --ctx-text-hover: var(--color-default-neutral-100);
1260
- --ctx-text-pressed: var(--color-default-neutral-100);
1261
1086
  --ctx-background-hover: var(--color-default-neutral-1000);
1262
- --ctx-background-pressed: var(--color-default-neutral-900);
1263
- --ctx-gradient-hover: var(--color-default-neutral-900);
1264
- --ctx-gradient-pressed: var(--color-default-neutral-900);
1265
1087
  --ctx-border-hover: var(--color-default-neutral-800);
1266
- --ctx-border-pressed: var(--color-default-neutral-800);
1267
1088
  }
1268
1089
 
1269
1090
  @utility ctx-neutral-subtle {
@@ -1272,15 +1093,11 @@
1272
1093
  --ctx-background: var(--color-default-neutral-200);
1273
1094
  --ctx-gradient: var(--color-default-neutral-300);
1274
1095
  --ctx-border: var(--color-default-neutral-500);
1096
+ --ctx-border-bold: var(--color-default-neutral-600);
1275
1097
  --ctx-shadow: var(--color-neutral-alpha-500A);
1276
1098
  --ctx-text-hover: var(--color-default-neutral-800);
1277
- --ctx-text-pressed: var(--color-default-neutral-800);
1278
1099
  --ctx-background-hover: var(--color-default-neutral-300);
1279
- --ctx-background-pressed: var(--color-default-neutral-400);
1280
- --ctx-gradient-hover: var(--color-default-neutral-400);
1281
- --ctx-gradient-pressed: var(--color-default-neutral-400);
1282
1100
  --ctx-border-hover: var(--color-default-neutral-500);
1283
- --ctx-border-pressed: var(--color-default-neutral-500);
1284
1101
  }
1285
1102
 
1286
1103
  @utility ctx-neutral-subtler {
@@ -1289,15 +1106,11 @@
1289
1106
  --ctx-background: var(--color-default-neutral-100);
1290
1107
  --ctx-gradient: var(--color-default-neutral-200);
1291
1108
  --ctx-border: var(--color-default-neutral-400);
1109
+ --ctx-border-bold: var(--color-default-neutral-700);
1292
1110
  --ctx-shadow: var(--color-neutral-alpha-500A);
1293
1111
  --ctx-text-hover: var(--color-default-neutral-900);
1294
- --ctx-text-pressed: var(--color-default-neutral-900);
1295
1112
  --ctx-background-hover: var(--color-default-neutral-200);
1296
- --ctx-background-pressed: var(--color-default-neutral-300);
1297
- --ctx-gradient-hover: var(--color-default-neutral-300);
1298
- --ctx-gradient-pressed: var(--color-default-neutral-300);
1299
1113
  --ctx-border-hover: var(--color-default-neutral-400);
1300
- --ctx-border-pressed: var(--color-default-neutral-400);
1301
1114
  }
1302
1115
 
1303
1116
  @utility ctx-neutral-subtlest {
@@ -1306,15 +1119,11 @@
1306
1119
  --ctx-background: var(--color-default-neutral-0);
1307
1120
  --ctx-gradient: var(--color-default-neutral-100);
1308
1121
  --ctx-border: var(--color-default-neutral-300);
1122
+ --ctx-border-bold: var(--color-default-neutral-800);
1309
1123
  --ctx-shadow: var(--color-neutral-alpha-500A);
1310
1124
  --ctx-text-hover: var(--color-default-neutral-1000);
1311
- --ctx-text-pressed: var(--color-default-neutral-1000);
1312
1125
  --ctx-background-hover: var(--color-default-neutral-100);
1313
- --ctx-background-pressed: var(--color-default-neutral-200);
1314
- --ctx-gradient-hover: var(--color-default-neutral-200);
1315
- --ctx-gradient-pressed: var(--color-default-neutral-200);
1316
1126
  --ctx-border-hover: var(--color-default-neutral-300);
1317
- --ctx-border-pressed: var(--color-default-neutral-300);
1318
1127
  }
1319
1128
 
1320
1129
  @utility ctx-orange-bolder {
@@ -1322,16 +1131,12 @@
1322
1131
  --ctx-text-bold: var(--color-default-orange-100);
1323
1132
  --ctx-background: var(--color-default-orange-700);
1324
1133
  --ctx-gradient: var(--color-default-orange-800);
1325
- --ctx-border: var(--color-default-orange-700);
1134
+ --ctx-border: var(--color-default-orange-800);
1135
+ --ctx-border-bold: var(--color-default-orange-600);
1326
1136
  --ctx-shadow: var(--color-neutral-alpha-500A);
1327
1137
  --ctx-text-hover: var(--color-default-orange-200);
1328
- --ctx-text-pressed: var(--color-default-orange-200);
1329
1138
  --ctx-background-hover: var(--color-default-orange-800);
1330
- --ctx-background-pressed: var(--color-default-orange-900);
1331
- --ctx-gradient-hover: var(--color-default-orange-900);
1332
- --ctx-gradient-pressed: var(--color-default-orange-900);
1333
- --ctx-border-hover: var(--color-default-orange-700);
1334
- --ctx-border-pressed: var(--color-default-orange-700);
1139
+ --ctx-border-hover: var(--color-default-orange-800);
1335
1140
  }
1336
1141
 
1337
1142
  @utility ctx-orange-subtle {
@@ -1340,15 +1145,11 @@
1340
1145
  --ctx-background: var(--color-default-orange-400);
1341
1146
  --ctx-gradient: var(--color-default-orange-300);
1342
1147
  --ctx-border: var(--color-default-orange-500);
1148
+ --ctx-border-bold: var(--color-default-orange-700);
1343
1149
  --ctx-shadow: var(--color-neutral-alpha-500A);
1344
1150
  --ctx-text-hover: var(--color-default-orange-900);
1345
- --ctx-text-pressed: var(--color-default-orange-900);
1346
1151
  --ctx-background-hover: var(--color-default-orange-300);
1347
- --ctx-background-pressed: var(--color-default-orange-200);
1348
- --ctx-gradient-hover: var(--color-default-orange-200);
1349
- --ctx-gradient-pressed: var(--color-default-orange-200);
1350
1152
  --ctx-border-hover: var(--color-default-orange-500);
1351
- --ctx-border-pressed: var(--color-default-orange-500);
1352
1153
  }
1353
1154
 
1354
1155
  @utility ctx-orange-subtler {
@@ -1356,16 +1157,12 @@
1356
1157
  --ctx-text-bold: var(--color-default-orange-900);
1357
1158
  --ctx-background: var(--color-default-orange-200);
1358
1159
  --ctx-gradient: var(--color-default-orange-300);
1359
- --ctx-border: var(--color-default-orange-400);
1160
+ --ctx-border: var(--color-default-orange-300);
1161
+ --ctx-border-bold: var(--color-default-orange-500);
1360
1162
  --ctx-shadow: var(--color-neutral-alpha-500A);
1361
1163
  --ctx-text-hover: var(--color-default-orange-800);
1362
- --ctx-text-pressed: var(--color-default-orange-800);
1363
1164
  --ctx-background-hover: var(--color-default-orange-300);
1364
- --ctx-background-pressed: var(--color-default-orange-400);
1365
- --ctx-gradient-hover: var(--color-default-orange-400);
1366
- --ctx-gradient-pressed: var(--color-default-orange-400);
1367
- --ctx-border-hover: var(--color-default-orange-400);
1368
- --ctx-border-pressed: var(--color-default-orange-400);
1165
+ --ctx-border-hover: var(--color-default-orange-300);
1369
1166
  }
1370
1167
 
1371
1168
  @utility ctx-orange-subtlest {
@@ -1373,16 +1170,12 @@
1373
1170
  --ctx-text-bold: var(--color-default-orange-900);
1374
1171
  --ctx-background: var(--color-default-orange-100);
1375
1172
  --ctx-gradient: var(--color-default-orange-200);
1376
- --ctx-border: var(--color-default-orange-300);
1173
+ --ctx-border: var(--color-default-orange-200);
1174
+ --ctx-border-bold: var(--color-default-orange-400);
1377
1175
  --ctx-shadow: var(--color-neutral-alpha-500A);
1378
1176
  --ctx-text-hover: var(--color-default-orange-800);
1379
- --ctx-text-pressed: var(--color-default-orange-800);
1380
1177
  --ctx-background-hover: var(--color-default-orange-200);
1381
- --ctx-background-pressed: var(--color-default-orange-300);
1382
- --ctx-gradient-hover: var(--color-default-orange-300);
1383
- --ctx-gradient-pressed: var(--color-default-orange-300);
1384
- --ctx-border-hover: var(--color-default-orange-300);
1385
- --ctx-border-pressed: var(--color-default-orange-300);
1178
+ --ctx-border-hover: var(--color-default-orange-200);
1386
1179
  }
1387
1180
 
1388
1181
  @utility ctx-purple-bolder {
@@ -1390,16 +1183,12 @@
1390
1183
  --ctx-text-bold: var(--color-default-purple-100);
1391
1184
  --ctx-background: var(--color-default-purple-700);
1392
1185
  --ctx-gradient: var(--color-default-purple-800);
1393
- --ctx-border: var(--color-default-purple-700);
1186
+ --ctx-border: var(--color-default-purple-800);
1187
+ --ctx-border-bold: var(--color-default-purple-600);
1394
1188
  --ctx-shadow: var(--color-neutral-alpha-500A);
1395
1189
  --ctx-text-hover: var(--color-default-purple-200);
1396
- --ctx-text-pressed: var(--color-default-purple-200);
1397
1190
  --ctx-background-hover: var(--color-default-purple-800);
1398
- --ctx-background-pressed: var(--color-default-purple-900);
1399
- --ctx-gradient-hover: var(--color-default-purple-900);
1400
- --ctx-gradient-pressed: var(--color-default-purple-900);
1401
- --ctx-border-hover: var(--color-default-purple-700);
1402
- --ctx-border-pressed: var(--color-default-purple-700);
1191
+ --ctx-border-hover: var(--color-default-purple-800);
1403
1192
  }
1404
1193
 
1405
1194
  @utility ctx-purple-subtle {
@@ -1408,15 +1197,11 @@
1408
1197
  --ctx-background: var(--color-default-purple-400);
1409
1198
  --ctx-gradient: var(--color-default-purple-300);
1410
1199
  --ctx-border: var(--color-default-purple-500);
1200
+ --ctx-border-bold: var(--color-default-purple-700);
1411
1201
  --ctx-shadow: var(--color-neutral-alpha-500A);
1412
1202
  --ctx-text-hover: var(--color-default-purple-900);
1413
- --ctx-text-pressed: var(--color-default-purple-900);
1414
1203
  --ctx-background-hover: var(--color-default-purple-300);
1415
- --ctx-background-pressed: var(--color-default-purple-200);
1416
- --ctx-gradient-hover: var(--color-default-purple-200);
1417
- --ctx-gradient-pressed: var(--color-default-purple-200);
1418
1204
  --ctx-border-hover: var(--color-default-purple-500);
1419
- --ctx-border-pressed: var(--color-default-purple-500);
1420
1205
  }
1421
1206
 
1422
1207
  @utility ctx-purple-subtler {
@@ -1424,16 +1209,12 @@
1424
1209
  --ctx-text-bold: var(--color-default-purple-900);
1425
1210
  --ctx-background: var(--color-default-purple-200);
1426
1211
  --ctx-gradient: var(--color-default-purple-300);
1427
- --ctx-border: var(--color-default-purple-400);
1212
+ --ctx-border: var(--color-default-purple-300);
1213
+ --ctx-border-bold: var(--color-default-purple-500);
1428
1214
  --ctx-shadow: var(--color-neutral-alpha-500A);
1429
1215
  --ctx-text-hover: var(--color-default-purple-800);
1430
- --ctx-text-pressed: var(--color-default-purple-800);
1431
1216
  --ctx-background-hover: var(--color-default-purple-300);
1432
- --ctx-background-pressed: var(--color-default-purple-400);
1433
- --ctx-gradient-hover: var(--color-default-purple-400);
1434
- --ctx-gradient-pressed: var(--color-default-purple-400);
1435
- --ctx-border-hover: var(--color-default-purple-400);
1436
- --ctx-border-pressed: var(--color-default-purple-400);
1217
+ --ctx-border-hover: var(--color-default-purple-300);
1437
1218
  }
1438
1219
 
1439
1220
  @utility ctx-purple-subtlest {
@@ -1441,16 +1222,12 @@
1441
1222
  --ctx-text-bold: var(--color-default-purple-900);
1442
1223
  --ctx-background: var(--color-default-purple-100);
1443
1224
  --ctx-gradient: var(--color-default-purple-200);
1444
- --ctx-border: var(--color-default-purple-300);
1225
+ --ctx-border: var(--color-default-purple-200);
1226
+ --ctx-border-bold: var(--color-default-purple-400);
1445
1227
  --ctx-shadow: var(--color-neutral-alpha-500A);
1446
1228
  --ctx-text-hover: var(--color-default-purple-800);
1447
- --ctx-text-pressed: var(--color-default-purple-800);
1448
1229
  --ctx-background-hover: var(--color-default-purple-200);
1449
- --ctx-background-pressed: var(--color-default-purple-300);
1450
- --ctx-gradient-hover: var(--color-default-purple-300);
1451
- --ctx-gradient-pressed: var(--color-default-purple-300);
1452
- --ctx-border-hover: var(--color-default-purple-300);
1453
- --ctx-border-pressed: var(--color-default-purple-300);
1230
+ --ctx-border-hover: var(--color-default-purple-200);
1454
1231
  }
1455
1232
 
1456
1233
  @utility ctx-red-bolder {
@@ -1458,16 +1235,12 @@
1458
1235
  --ctx-text-bold: var(--color-default-red-100);
1459
1236
  --ctx-background: var(--color-default-red-700);
1460
1237
  --ctx-gradient: var(--color-default-red-800);
1461
- --ctx-border: var(--color-default-red-700);
1238
+ --ctx-border: var(--color-default-red-800);
1239
+ --ctx-border-bold: var(--color-default-red-600);
1462
1240
  --ctx-shadow: var(--color-neutral-alpha-500A);
1463
1241
  --ctx-text-hover: var(--color-default-red-200);
1464
- --ctx-text-pressed: var(--color-default-red-200);
1465
1242
  --ctx-background-hover: var(--color-default-red-800);
1466
- --ctx-background-pressed: var(--color-default-red-900);
1467
- --ctx-gradient-hover: var(--color-default-red-900);
1468
- --ctx-gradient-pressed: var(--color-default-red-900);
1469
- --ctx-border-hover: var(--color-default-red-700);
1470
- --ctx-border-pressed: var(--color-default-red-700);
1243
+ --ctx-border-hover: var(--color-default-red-800);
1471
1244
  }
1472
1245
 
1473
1246
  @utility ctx-red-subtle {
@@ -1476,15 +1249,11 @@
1476
1249
  --ctx-background: var(--color-default-red-400);
1477
1250
  --ctx-gradient: var(--color-default-red-300);
1478
1251
  --ctx-border: var(--color-default-red-500);
1252
+ --ctx-border-bold: var(--color-default-red-700);
1479
1253
  --ctx-shadow: var(--color-neutral-alpha-500A);
1480
1254
  --ctx-text-hover: var(--color-default-red-900);
1481
- --ctx-text-pressed: var(--color-default-red-900);
1482
1255
  --ctx-background-hover: var(--color-default-red-300);
1483
- --ctx-background-pressed: var(--color-default-red-200);
1484
- --ctx-gradient-hover: var(--color-default-red-200);
1485
- --ctx-gradient-pressed: var(--color-default-red-200);
1486
1256
  --ctx-border-hover: var(--color-default-red-500);
1487
- --ctx-border-pressed: var(--color-default-red-500);
1488
1257
  }
1489
1258
 
1490
1259
  @utility ctx-red-subtler {
@@ -1492,16 +1261,12 @@
1492
1261
  --ctx-text-bold: var(--color-default-red-900);
1493
1262
  --ctx-background: var(--color-default-red-200);
1494
1263
  --ctx-gradient: var(--color-default-red-300);
1495
- --ctx-border: var(--color-default-red-400);
1264
+ --ctx-border: var(--color-default-red-300);
1265
+ --ctx-border-bold: var(--color-default-red-500);
1496
1266
  --ctx-shadow: var(--color-neutral-alpha-500A);
1497
1267
  --ctx-text-hover: var(--color-default-red-800);
1498
- --ctx-text-pressed: var(--color-default-red-800);
1499
1268
  --ctx-background-hover: var(--color-default-red-300);
1500
- --ctx-background-pressed: var(--color-default-red-400);
1501
- --ctx-gradient-hover: var(--color-default-red-400);
1502
- --ctx-gradient-pressed: var(--color-default-red-400);
1503
- --ctx-border-hover: var(--color-default-red-400);
1504
- --ctx-border-pressed: var(--color-default-red-400);
1269
+ --ctx-border-hover: var(--color-default-red-300);
1505
1270
  }
1506
1271
 
1507
1272
  @utility ctx-red-subtlest {
@@ -1509,16 +1274,12 @@
1509
1274
  --ctx-text-bold: var(--color-default-red-900);
1510
1275
  --ctx-background: var(--color-default-red-100);
1511
1276
  --ctx-gradient: var(--color-default-red-200);
1512
- --ctx-border: var(--color-default-red-300);
1277
+ --ctx-border: var(--color-default-red-200);
1278
+ --ctx-border-bold: var(--color-default-red-400);
1513
1279
  --ctx-shadow: var(--color-neutral-alpha-500A);
1514
1280
  --ctx-text-hover: var(--color-default-red-800);
1515
- --ctx-text-pressed: var(--color-default-red-800);
1516
1281
  --ctx-background-hover: var(--color-default-red-200);
1517
- --ctx-background-pressed: var(--color-default-red-300);
1518
- --ctx-gradient-hover: var(--color-default-red-300);
1519
- --ctx-gradient-pressed: var(--color-default-red-300);
1520
- --ctx-border-hover: var(--color-default-red-300);
1521
- --ctx-border-pressed: var(--color-default-red-300);
1282
+ --ctx-border-hover: var(--color-default-red-200);
1522
1283
  }
1523
1284
 
1524
1285
  @utility ctx-success-bolder {
@@ -1527,15 +1288,11 @@
1527
1288
  --ctx-background: var(--color-default-green-700);
1528
1289
  --ctx-gradient: var(--color-default-green-800);
1529
1290
  --ctx-border: var(--color-default-green-700);
1291
+ --ctx-border-bold: var(--color-default-green-400);
1530
1292
  --ctx-shadow: var(--color-neutral-alpha-500A);
1531
1293
  --ctx-text-hover: var(--color-default-green-200);
1532
- --ctx-text-pressed: var(--color-default-green-200);
1533
1294
  --ctx-background-hover: var(--color-default-green-800);
1534
- --ctx-background-pressed: var(--color-default-green-900);
1535
- --ctx-gradient-hover: var(--color-default-green-900);
1536
- --ctx-gradient-pressed: var(--color-default-green-900);
1537
1295
  --ctx-border-hover: var(--color-default-green-700);
1538
- --ctx-border-pressed: var(--color-default-green-700);
1539
1296
  }
1540
1297
 
1541
1298
  @utility ctx-success-subtlest {
@@ -1544,15 +1301,11 @@
1544
1301
  --ctx-background: var(--color-default-green-100);
1545
1302
  --ctx-gradient: var(--color-default-green-200);
1546
1303
  --ctx-border: var(--color-default-green-300);
1304
+ --ctx-border-bold: var(--color-default-green-800);
1547
1305
  --ctx-shadow: var(--color-neutral-alpha-500A);
1548
1306
  --ctx-text-hover: var(--color-default-green-800);
1549
- --ctx-text-pressed: var(--color-default-green-800);
1550
1307
  --ctx-background-hover: var(--color-default-green-200);
1551
- --ctx-background-pressed: var(--color-default-green-300);
1552
- --ctx-gradient-hover: var(--color-default-green-300);
1553
- --ctx-gradient-pressed: var(--color-default-green-300);
1554
1308
  --ctx-border-hover: var(--color-default-green-300);
1555
- --ctx-border-pressed: var(--color-default-green-300);
1556
1309
  }
1557
1310
 
1558
1311
  @utility ctx-teal-bolder {
@@ -1560,16 +1313,12 @@
1560
1313
  --ctx-text-bold: var(--color-default-teal-100);
1561
1314
  --ctx-background: var(--color-default-teal-700);
1562
1315
  --ctx-gradient: var(--color-default-teal-800);
1563
- --ctx-border: var(--color-default-teal-700);
1316
+ --ctx-border: var(--color-default-teal-800);
1317
+ --ctx-border-bold: var(--color-default-teal-600);
1564
1318
  --ctx-shadow: var(--color-neutral-alpha-500A);
1565
1319
  --ctx-text-hover: var(--color-default-teal-200);
1566
- --ctx-text-pressed: var(--color-default-teal-200);
1567
1320
  --ctx-background-hover: var(--color-default-teal-800);
1568
- --ctx-background-pressed: var(--color-default-teal-900);
1569
- --ctx-gradient-hover: var(--color-default-teal-900);
1570
- --ctx-gradient-pressed: var(--color-default-teal-900);
1571
- --ctx-border-hover: var(--color-default-teal-700);
1572
- --ctx-border-pressed: var(--color-default-teal-700);
1321
+ --ctx-border-hover: var(--color-default-teal-800);
1573
1322
  }
1574
1323
 
1575
1324
  @utility ctx-teal-subtle {
@@ -1578,15 +1327,11 @@
1578
1327
  --ctx-background: var(--color-default-teal-400);
1579
1328
  --ctx-gradient: var(--color-default-teal-300);
1580
1329
  --ctx-border: var(--color-default-teal-500);
1330
+ --ctx-border-bold: var(--color-default-teal-700);
1581
1331
  --ctx-shadow: var(--color-neutral-alpha-500A);
1582
1332
  --ctx-text-hover: var(--color-default-teal-900);
1583
- --ctx-text-pressed: var(--color-default-teal-900);
1584
1333
  --ctx-background-hover: var(--color-default-teal-300);
1585
- --ctx-background-pressed: var(--color-default-teal-200);
1586
- --ctx-gradient-hover: var(--color-default-teal-200);
1587
- --ctx-gradient-pressed: var(--color-default-teal-200);
1588
1334
  --ctx-border-hover: var(--color-default-teal-500);
1589
- --ctx-border-pressed: var(--color-default-teal-500);
1590
1335
  }
1591
1336
 
1592
1337
  @utility ctx-teal-subtler {
@@ -1594,16 +1339,12 @@
1594
1339
  --ctx-text-bold: var(--color-default-teal-900);
1595
1340
  --ctx-background: var(--color-default-teal-200);
1596
1341
  --ctx-gradient: var(--color-default-teal-300);
1597
- --ctx-border: var(--color-default-teal-400);
1342
+ --ctx-border: var(--color-default-teal-300);
1343
+ --ctx-border-bold: var(--color-default-teal-500);
1598
1344
  --ctx-shadow: var(--color-neutral-alpha-500A);
1599
1345
  --ctx-text-hover: var(--color-default-teal-800);
1600
- --ctx-text-pressed: var(--color-default-teal-800);
1601
1346
  --ctx-background-hover: var(--color-default-teal-300);
1602
- --ctx-background-pressed: var(--color-default-teal-400);
1603
- --ctx-gradient-hover: var(--color-default-teal-400);
1604
- --ctx-gradient-pressed: var(--color-default-teal-400);
1605
- --ctx-border-hover: var(--color-default-teal-400);
1606
- --ctx-border-pressed: var(--color-default-teal-400);
1347
+ --ctx-border-hover: var(--color-default-teal-300);
1607
1348
  }
1608
1349
 
1609
1350
  @utility ctx-teal-subtlest {
@@ -1611,16 +1352,12 @@
1611
1352
  --ctx-text-bold: var(--color-default-teal-900);
1612
1353
  --ctx-background: var(--color-default-teal-100);
1613
1354
  --ctx-gradient: var(--color-default-teal-200);
1614
- --ctx-border: var(--color-default-teal-300);
1355
+ --ctx-border: var(--color-default-teal-200);
1356
+ --ctx-border-bold: var(--color-default-teal-400);
1615
1357
  --ctx-shadow: var(--color-neutral-alpha-500A);
1616
1358
  --ctx-text-hover: var(--color-default-teal-800);
1617
- --ctx-text-pressed: var(--color-default-teal-800);
1618
1359
  --ctx-background-hover: var(--color-default-teal-200);
1619
- --ctx-background-pressed: var(--color-default-teal-300);
1620
- --ctx-gradient-hover: var(--color-default-teal-300);
1621
- --ctx-gradient-pressed: var(--color-default-teal-300);
1622
- --ctx-border-hover: var(--color-default-teal-300);
1623
- --ctx-border-pressed: var(--color-default-teal-300);
1360
+ --ctx-border-hover: var(--color-default-teal-200);
1624
1361
  }
1625
1362
 
1626
1363
  @utility ctx-warning-bolder {
@@ -1629,15 +1366,11 @@
1629
1366
  --ctx-background: var(--color-default-yellow-700);
1630
1367
  --ctx-gradient: var(--color-default-yellow-800);
1631
1368
  --ctx-border: var(--color-default-yellow-700);
1369
+ --ctx-border-bold: var(--color-default-yellow-400);
1632
1370
  --ctx-shadow: var(--color-neutral-alpha-500A);
1633
1371
  --ctx-text-hover: var(--color-default-yellow-200);
1634
- --ctx-text-pressed: var(--color-default-yellow-200);
1635
1372
  --ctx-background-hover: var(--color-default-yellow-800);
1636
- --ctx-background-pressed: var(--color-default-yellow-900);
1637
- --ctx-gradient-hover: var(--color-default-yellow-900);
1638
- --ctx-gradient-pressed: var(--color-default-yellow-900);
1639
1373
  --ctx-border-hover: var(--color-default-yellow-700);
1640
- --ctx-border-pressed: var(--color-default-yellow-700);
1641
1374
  }
1642
1375
 
1643
1376
  @utility ctx-warning-subtlest {
@@ -1646,15 +1379,11 @@
1646
1379
  --ctx-background: var(--color-default-yellow-100);
1647
1380
  --ctx-gradient: var(--color-default-yellow-200);
1648
1381
  --ctx-border: var(--color-default-yellow-300);
1382
+ --ctx-border-bold: var(--color-default-yellow-800);
1649
1383
  --ctx-shadow: var(--color-neutral-alpha-500A);
1650
1384
  --ctx-text-hover: var(--color-default-yellow-800);
1651
- --ctx-text-pressed: var(--color-default-yellow-800);
1652
1385
  --ctx-background-hover: var(--color-default-yellow-200);
1653
- --ctx-background-pressed: var(--color-default-yellow-300);
1654
- --ctx-gradient-hover: var(--color-default-yellow-300);
1655
- --ctx-gradient-pressed: var(--color-default-yellow-300);
1656
1386
  --ctx-border-hover: var(--color-default-yellow-300);
1657
- --ctx-border-pressed: var(--color-default-yellow-300);
1658
1387
  }
1659
1388
 
1660
1389
  @utility ctx-yellow-bolder {
@@ -1662,16 +1391,12 @@
1662
1391
  --ctx-text-bold: var(--color-default-yellow-100);
1663
1392
  --ctx-background: var(--color-default-yellow-700);
1664
1393
  --ctx-gradient: var(--color-default-yellow-800);
1665
- --ctx-border: var(--color-default-yellow-700);
1394
+ --ctx-border: var(--color-default-yellow-800);
1395
+ --ctx-border-bold: var(--color-default-yellow-600);
1666
1396
  --ctx-shadow: var(--color-neutral-alpha-500A);
1667
1397
  --ctx-text-hover: var(--color-default-yellow-200);
1668
- --ctx-text-pressed: var(--color-default-yellow-200);
1669
1398
  --ctx-background-hover: var(--color-default-yellow-800);
1670
- --ctx-background-pressed: var(--color-default-yellow-900);
1671
- --ctx-gradient-hover: var(--color-default-yellow-900);
1672
- --ctx-gradient-pressed: var(--color-default-yellow-900);
1673
- --ctx-border-hover: var(--color-default-yellow-700);
1674
- --ctx-border-pressed: var(--color-default-yellow-700);
1399
+ --ctx-border-hover: var(--color-default-yellow-800);
1675
1400
  }
1676
1401
 
1677
1402
  @utility ctx-yellow-subtle {
@@ -1680,15 +1405,11 @@
1680
1405
  --ctx-background: var(--color-default-yellow-400);
1681
1406
  --ctx-gradient: var(--color-default-yellow-300);
1682
1407
  --ctx-border: var(--color-default-yellow-500);
1408
+ --ctx-border-bold: var(--color-default-yellow-700);
1683
1409
  --ctx-shadow: var(--color-neutral-alpha-500A);
1684
1410
  --ctx-text-hover: var(--color-default-yellow-900);
1685
- --ctx-text-pressed: var(--color-default-yellow-900);
1686
1411
  --ctx-background-hover: var(--color-default-yellow-300);
1687
- --ctx-background-pressed: var(--color-default-yellow-200);
1688
- --ctx-gradient-hover: var(--color-default-yellow-200);
1689
- --ctx-gradient-pressed: var(--color-default-yellow-200);
1690
1412
  --ctx-border-hover: var(--color-default-yellow-500);
1691
- --ctx-border-pressed: var(--color-default-yellow-500);
1692
1413
  }
1693
1414
 
1694
1415
  @utility ctx-yellow-subtler {
@@ -1696,16 +1417,12 @@
1696
1417
  --ctx-text-bold: var(--color-default-yellow-900);
1697
1418
  --ctx-background: var(--color-default-yellow-200);
1698
1419
  --ctx-gradient: var(--color-default-yellow-300);
1699
- --ctx-border: var(--color-default-yellow-400);
1420
+ --ctx-border: var(--color-default-yellow-300);
1421
+ --ctx-border-bold: var(--color-default-yellow-500);
1700
1422
  --ctx-shadow: var(--color-neutral-alpha-500A);
1701
1423
  --ctx-text-hover: var(--color-default-yellow-800);
1702
- --ctx-text-pressed: var(--color-default-yellow-800);
1703
1424
  --ctx-background-hover: var(--color-default-yellow-300);
1704
- --ctx-background-pressed: var(--color-default-yellow-400);
1705
- --ctx-gradient-hover: var(--color-default-yellow-400);
1706
- --ctx-gradient-pressed: var(--color-default-yellow-400);
1707
- --ctx-border-hover: var(--color-default-yellow-400);
1708
- --ctx-border-pressed: var(--color-default-yellow-400);
1425
+ --ctx-border-hover: var(--color-default-yellow-300);
1709
1426
  }
1710
1427
 
1711
1428
  @utility ctx-yellow-subtlest {
@@ -1713,122 +1430,123 @@
1713
1430
  --ctx-text-bold: var(--color-default-yellow-900);
1714
1431
  --ctx-background: var(--color-default-yellow-100);
1715
1432
  --ctx-gradient: var(--color-default-yellow-200);
1716
- --ctx-border: var(--color-default-yellow-300);
1433
+ --ctx-border: var(--color-default-yellow-200);
1434
+ --ctx-border-bold: var(--color-default-yellow-400);
1717
1435
  --ctx-shadow: var(--color-neutral-alpha-500A);
1718
1436
  --ctx-text-hover: var(--color-default-yellow-800);
1719
- --ctx-text-pressed: var(--color-default-yellow-800);
1720
1437
  --ctx-background-hover: var(--color-default-yellow-200);
1721
- --ctx-background-pressed: var(--color-default-yellow-300);
1722
- --ctx-gradient-hover: var(--color-default-yellow-300);
1723
- --ctx-gradient-pressed: var(--color-default-yellow-300);
1724
- --ctx-border-hover: var(--color-default-yellow-300);
1725
- --ctx-border-pressed: var(--color-default-yellow-300);
1438
+ --ctx-border-hover: var(--color-default-yellow-200);
1726
1439
  }
1727
1440
 
1728
1441
 
1729
1442
 
1730
1443
  /* === ./styles/context.css === */
1731
-
1732
1444
  @theme {
1733
- --color-brand-100: var(--color-bcc-100);
1734
- --color-brand-200: var(--color-bcc-200);
1735
- --color-brand-300: var(--color-bcc-300);
1736
- --color-brand-400: var(--color-bcc-400);
1737
- --color-brand-500: var(--color-bcc-500);
1738
- --color-brand-600: var(--color-bcc-600);
1739
- --color-brand-700: var(--color-bcc-700);
1740
- --color-brand-800: var(--color-bcc-800);
1741
- --color-brand-900: var(--color-bcc-900);
1742
- --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);
1743
1455
  }
1744
1456
 
1745
1457
  /** DEFAULT CONTEXTS */
1746
1458
  @utility ctx-default {
1747
- @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;
1748
1472
  }
1749
- @utility ctx-success { @apply ctx-success-subtlest; }
1750
- @utility ctx-danger { @apply ctx-danger-subtlest; }
1751
- @utility ctx-warning { @apply ctx-warning-subtlest; }
1752
- @utility ctx-info { @apply ctx-info-subtlest; }
1753
1473
 
1754
1474
  @utility text-ctx {
1755
- color: var(--ctx-text);
1475
+ color: var(--ctx-text);
1756
1476
  }
1757
1477
 
1758
1478
  @utility text-ctx-bold {
1759
- color: var(--ctx-text-bold);
1479
+ color: var(--ctx-text-bold);
1760
1480
  }
1761
1481
 
1762
1482
  @utility bg-ctx {
1763
- background-color: var(--ctx-background);
1483
+ background-color: var(--ctx-background);
1764
1484
  }
1765
1485
 
1766
1486
  @utility border-ctx {
1767
- border-color: var(--ctx-border);
1487
+ border-color: var(--ctx-border);
1768
1488
  }
1769
1489
 
1770
1490
  @utility shadow-ctx {
1771
- --tw-shadow-color: var(--ctx-shadow);
1491
+ --tw-shadow-color: var(--ctx-shadow);
1772
1492
  }
1773
1493
 
1774
1494
  @utility ctx {
1775
- background-color: var(--ctx-background);
1776
- color: var(--ctx-text);
1777
- border-color: var(--ctx-border);
1495
+ background-color: var(--ctx-background);
1496
+ color: var(--ctx-text);
1497
+ border-color: var(--ctx-border);
1778
1498
  }
1779
1499
 
1780
1500
  @utility ctx-gradient {
1781
- 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
+ }
1782
1506
  }
1783
1507
 
1784
1508
  @utility ctx-raised {
1785
- 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);
1786
1512
  }
1787
1513
 
1788
1514
  @utility ctx-flat {
1789
- --ctx-background: transparent;
1515
+ --ctx-background: transparent;
1790
1516
 
1791
- @variant hover {
1792
- --ctx-background: var(--ctx-background-hover);
1793
- }
1517
+ @variant hover {
1518
+ --ctx-background: var(--ctx-background-hover);
1519
+ }
1794
1520
  }
1795
1521
 
1796
1522
  @utility clickable {
1797
- cursor: pointer;
1523
+ cursor: pointer;
1798
1524
  }
1799
1525
 
1800
- .clickable:hover {
1801
- --ctx-background: var(--ctx-background-hover);
1802
- --ctx-text: var(--ctx-text-hover);
1803
- --ctx-border: var(--ctx-border-hover);
1804
- }
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
+ }
1805
1532
 
1806
- .clickable:active {
1807
- --ctx-background: var(--ctx-background-pressed);
1808
- --ctx-text: var(--ctx-text-pressed);
1809
- --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
+ }
1810
1538
  }
1811
1539
 
1812
1540
 
1813
- /* === ./styles/fonts.css === */
1814
- @utility heading-xs { font: var(--heading-xs); }
1815
- @utility heading-sm { font: var(--heading-sm); }
1816
- @utility heading-md { font: var(--heading-md); }
1817
- @utility heading-lg { font: var(--heading-lg); }
1818
- @utility heading-xl { font: var(--heading-xl); }
1819
- @utility heading-2xl { font: var(--heading-2xl); }
1820
- @utility heading-3xl { font: var(--heading-3xl); }
1821
- @utility heading-4xl { font: var(--heading-4xl); }
1822
- @utility heading-5xl { font: var(--heading-5xl); }
1823
- @utility body-sm { font: var(--body-sm); }
1824
- @utility body-md { font: var(--body-md); }
1825
- @utility body-lg { font: var(--body-lg); }
1826
-
1827
-
1828
1541
 
1829
1542
  /* === ./styles/component-overrides.css === */
1830
1543
  /** Custom styles to fix primevue components that are not custom or wrapped. */
1831
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
+
1832
1550
  /**
1833
1551
  * GUTTER FIX
1834
1552
  * Primevue's dropwdown components are all missing the gap between input and dropdown
@@ -1927,6 +1645,156 @@
1927
1645
  font-size: var(--text-md);
1928
1646
  }
1929
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
+
1930
1798
 
1931
1799
 
1932
1800
 
@@ -1942,29 +1810,27 @@
1942
1810
  }
1943
1811
 
1944
1812
  .bcc-app-nav-item {
1945
- @apply ctx-gray-subtlest text-ctx relative flex h-12 flex-1 flex-col items-center justify-center gap-1 transition-colors focus:ring-0 focus:outline-none;
1813
+ @apply relative flex h-12 flex-1 flex-col items-center justify-center gap-1 transition-colors focus:ring-0 focus:outline-none;
1946
1814
  }
1947
1815
 
1948
1816
  .bcc-nav-item-icon {
1949
- @apply size-6 opacity-50;
1817
+ @apply size-6 icon-subtlest;
1950
1818
  }
1951
1819
 
1952
1820
  .bcc-nav-item-badge {
1953
- @apply absolute top-0 right-1 opacity-75;
1821
+ @apply absolute top-0 right-1;
1954
1822
  }
1955
1823
 
1956
1824
  .bcc-nav-item-title {
1957
- @apply text-heading-xs text-center opacity-50;
1825
+ @apply heading-xs text-center text-subtlest opacity-75;
1958
1826
  }
1959
1827
 
1960
- .bcc-app-nav-item--active {
1961
- @apply text-selected;
1828
+ .bcc-app-nav-item--active .bcc-nav-item-title {
1829
+ @apply text-selected opacity-100;
1962
1830
  }
1963
1831
 
1964
- .bcc-app-nav-item--active .bcc-nav-item-icon,
1965
- .bcc-app-nav-item--active .bcc-nav-item-badge,
1966
- .bcc-app-nav-item--active .bcc-nav-item-title {
1967
- @apply opacity-100;
1832
+ .bcc-app-nav-item--active .bcc-nav-item-icon {
1833
+ @apply text-selected;
1968
1834
  }
1969
1835
  }
1970
1836
 
@@ -1973,24 +1839,27 @@
1973
1839
  /* from ./BccBadge/BccBadge.css */
1974
1840
  @layer components {
1975
1841
  .bcc-badge {
1976
- @apply inline-flex shrink-0 items-center justify-center gap-1 rounded-full leading-none whitespace-nowrap;
1842
+ @apply inline-flex shrink-0 items-center justify-center gap-1 rounded-full leading-none font-medium! whitespace-nowrap;
1977
1843
 
1978
1844
  @apply bg-ctx text-ctx;
1979
1845
  }
1846
+ .bcc-badge span:empty {
1847
+ display: none;
1848
+ }
1980
1849
  .bcc-badge.gradient {
1981
1850
  @apply ctx-gradient;
1982
1851
  }
1983
1852
  .bcc-badge.sm {
1984
- @apply text-heading-xs h-4 w-4;
1853
+ @apply heading-xs h-4 w-4;
1985
1854
  }
1986
1855
  .bcc-badge.md {
1987
- @apply text-heading-sm h-5 w-5;
1856
+ @apply heading-sm h-5 w-5;
1988
1857
  }
1989
1858
  .bcc-badge.lg {
1990
- @apply text-heading-md h-6 w-6;
1859
+ @apply heading-md h-6 w-6;
1991
1860
  }
1992
1861
  .bcc-badge.xl {
1993
- @apply text-heading-md h-8 w-8;
1862
+ @apply heading-md h-8 w-8;
1994
1863
  }
1995
1864
 
1996
1865
  .bcc-badge .bcc-badge-icon {
@@ -2038,163 +1907,284 @@
2038
1907
 
2039
1908
  /* from ./BccCapacityIndicator/BccCapacityIndicator.css */
2040
1909
  @layer components {
2041
- .bcc-capacity-indicator {
2042
- @apply text-base;
2043
- }
1910
+ .bcc-capacity-indicator {
1911
+ @apply text-base;
1912
+ }
2044
1913
 
2045
- .bcc-capacity-indicator.xs {
2046
- @apply text-xs;
2047
- }
1914
+ .bcc-capacity-indicator.xs {
1915
+ @apply text-xs;
1916
+ }
2048
1917
 
2049
- .bcc-capacity-indicator.sm {
2050
- @apply text-sm;
2051
- }
1918
+ .bcc-capacity-indicator.sm {
1919
+ @apply text-sm;
1920
+ }
2052
1921
 
2053
- .bcc-capacity-indicator.lg {
2054
- @apply text-xl;
2055
- }
1922
+ .bcc-capacity-indicator.lg {
1923
+ @apply text-xl;
1924
+ }
2056
1925
 
2057
- .bcc-capacity-indicator {
2058
- --bcc-capacity-indicator-background: transparent;
2059
- --bcc-capacity-indicator-text: var(--ctx-text);
2060
- --bcc-capacity-indicator-circle: var(--ctx-background-pressed);
2061
- --bcc-capacity-indicator-circle-used: var(--ctx-border);
2062
- background: var(--bcc-capacity-indicator-background);
2063
- @apply ctx-gray-subtlest;
2064
- }
1926
+ .bcc-capacity-indicator {
1927
+ --bcc-capacity-indicator-background: transparent;
1928
+ --bcc-capacity-indicator-text: var(--ctx-text);
1929
+ --bcc-capacity-indicator-circle: var(--ctx-border);
1930
+ --bcc-capacity-indicator-circle-used: var(--ctx-border-bold);
1931
+ background: var(--bcc-capacity-indicator-background);
1932
+ @apply ctx-gray-subtler;
1933
+ }
2065
1934
 
2066
- .bcc-capacity-indicator.colored {
2067
- --bcc-capacity-indicator-background: var(--ctx-background);
2068
- @apply ctx-blue-subtlest;
2069
- }
1935
+ .bcc-capacity-indicator.colored {
1936
+ --bcc-capacity-indicator-background: var(--ctx-background);
1937
+ @apply ctx-blue-subtlest;
1938
+ }
2070
1939
 
2071
- .bcc-capacity-indicator .text {
2072
- color: var(--bcc-capacity-indicator-text);
2073
- }
2074
- .bcc-capacity-indicator .circle {
2075
- stroke: var(--bcc-capacity-indicator-circle);
2076
- }
2077
- .bcc-capacity-indicator .circle-used {
2078
- stroke: var(--bcc-capacity-indicator-circle-used);
2079
- }
1940
+ .bcc-capacity-indicator .text {
1941
+ color: var(--bcc-capacity-indicator-text);
1942
+ }
1943
+ .bcc-capacity-indicator .circle {
1944
+ stroke: var(--bcc-capacity-indicator-circle);
1945
+ }
1946
+ .bcc-capacity-indicator .circle-used {
1947
+ stroke: var(--bcc-capacity-indicator-circle-used);
1948
+ }
2080
1949
 
2081
- .bcc-capacity-indicator.is-warning {
2082
- @apply ctx-yellow-subtlest;
2083
- --bcc-capacity-indicator-circle: var(--ctx-background);
2084
- }
1950
+ .bcc-capacity-indicator.is-warning {
1951
+ @apply ctx-yellow-subtlest;
1952
+ }
2085
1953
 
2086
- .bcc-capacity-indicator.is-full {
2087
- @apply ctx-red-subtlest;
2088
- }
1954
+ .bcc-capacity-indicator.is-full {
1955
+ @apply ctx-red-subtlest;
1956
+ --bcc-capacity-indicator-background: var(--ctx-background);
1957
+ }
2089
1958
  }
2090
1959
 
2091
1960
 
1961
+
2092
1962
  /* from ./BccDialKnob/BccDialKnob.css */
2093
1963
  @layer components {
2094
- .bcc-knob {
2095
- @apply relative mx-auto inline-flex touch-none select-none items-center justify-center p-2;
2096
-
2097
- --bcc-knob-arc-bg: var(--color-background-neutral-default);
2098
- --bcc-knob-head: var(--color-background-brand-bolder-default);
2099
- --bcc-knob-tail: var(--color-background-brand-subtle-default);
2100
-
2101
- --bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
2102
- --bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
2103
-
2104
- --bcc-knob-right-head: var(--color-background-accent-green-bolder-default);
2105
- --bcc-knob-right-tail: var(--color-background-accent-green-subtle-default);
2106
- }
1964
+ .bcc-knob {
1965
+ @apply relative mx-auto inline-flex touch-none items-center justify-center p-2 select-none;
2107
1966
 
2108
- .bcc-knob-label {
2109
- @apply pointer-events-none absolute inset-0 flex select-none flex-col items-center justify-center;
2110
- }
1967
+ --bcc-knob-arc-bg: var(--color-background-accent-gray-default);
1968
+ --bcc-knob-head: var(--color-background-brand-bolder-default);
1969
+ --bcc-knob-tail: var(--color-background-brand-subtle-default);
2111
1970
 
2112
- .bcc-knob-top-left {
2113
- @apply absolute top-0 left-0 text-left;
2114
- }
1971
+ --bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
1972
+ --bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
2115
1973
 
2116
- .bcc-knob-top-right {
2117
- @apply absolute top-0 right-0 text-right;
2118
- }
1974
+ --bcc-knob-right-head: var(--color-background-accent-green-bolder-default);
1975
+ --bcc-knob-right-tail: var(--color-background-accent-green-subtle-default);
1976
+ }
1977
+
1978
+ .bcc-knob-label {
1979
+ @apply pointer-events-none absolute inset-0 flex flex-col items-center justify-center select-none;
1980
+ }
1981
+
1982
+ .bcc-knob-top-left {
1983
+ @apply absolute top-0 left-0 text-left;
1984
+ }
1985
+
1986
+ .bcc-knob-top-right {
1987
+ @apply absolute top-0 right-0 text-right;
1988
+ }
2119
1989
  }
2120
1990
 
2121
1991
 
2122
1992
 
2123
1993
  /* from ./BccFrame/BccFrame.css */
2124
1994
  @layer components {
2125
- .bcc-frame {
2126
- @apply ctx ctx-default w-full;
2127
- }
1995
+ .bcc-frame {
1996
+ @apply ctx ctx-default w-full border border-transparent;
1997
+ }
2128
1998
 
2129
- .bcc-frame.bcc-frame--shadow {
2130
- @apply shadow shadow-ctx;
2131
- }
1999
+ .bcc-frame.bcc-frame--shadow {
2000
+ @apply shadow-ctx shadow;
2001
+ }
2132
2002
 
2133
- .bcc-frame--raised {
2134
- --ctx-background: var(--color-elevation-surface-raised-default);
2135
- }
2136
- .bcc-frame--rounded {
2137
- @apply rounded-md;
2138
- }
2139
- .bcc-frame--raised.bcc-frame--shadow {
2140
- @apply shadow-raised;
2141
- }
2003
+ .bcc-frame--raised {
2004
+ --ctx-background: var(--color-elevation-surface-raised-default);
2005
+ }
2006
+ .bcc-frame--rounded {
2007
+ @apply rounded-md;
2008
+ }
2009
+ .bcc-frame--raised.bcc-frame--shadow {
2010
+ @apply shadow-raised dark:border-default;
2011
+ }
2142
2012
 
2143
- .bcc-frame--overlay {
2144
- --ctx-background: var(--color-elevation-surface-overlay-default);
2145
- }
2146
- .bcc-frame--overlay.bcc-frame--shadow {
2147
- @apply shadow-overlay;
2148
- }
2013
+ .bcc-frame--overlay {
2014
+ --ctx-background: var(--color-elevation-surface-overlay-default);
2015
+ @apply border;
2016
+ }
2017
+ .bcc-frame--overlay.bcc-frame--shadow {
2018
+ @apply shadow-overlay dark:border-default;
2019
+ }
2149
2020
 
2150
- .bcc-frame--sunken {
2151
- --ctx-background: var(--color-elevation-surface-sunken-default);
2152
- }
2153
- .bcc-frame--sunken.bcc-frame--shadow {
2154
- @apply shadow-inner;
2155
- }
2021
+ .bcc-frame--sunken {
2022
+ --ctx-background: var(--color-elevation-surface-sunken-default);
2023
+ @apply border;
2024
+ }
2025
+ .bcc-frame--sunken.bcc-frame--shadow {
2026
+ @apply dark:border-default shadow-inner;
2027
+ }
2156
2028
  }
2157
2029
 
2158
2030
 
2031
+
2159
2032
  /* from ./BccGraphic/BccGraphic.css */
2160
2033
  @layer components {
2161
- .bcc-graphic .corner,
2162
- .bcc-graphic .center-slot {
2163
- @apply absolute z-10;
2164
- }
2165
- .bcc-graphic .corner.top-left {
2166
- @apply left-4 top-4;
2167
- }
2168
- .bcc-graphic .corner.top-right {
2169
- @apply right-4 top-4;
2170
- }
2171
- .bcc-graphic .corner.bottom-right {
2172
- @apply bottom-4 right-4;
2173
- }
2174
- .bcc-graphic .corner.bottom-left {
2175
- @apply bottom-4 left-4;
2176
- }
2177
- .bcc-graphic .center-slot {
2178
- @apply inset-1/4 h-1/2 w-1/2 flex items-center justify-center;
2179
- }
2034
+ .bcc-graphic .corner,
2035
+ .bcc-graphic .center-slot {
2036
+ @apply absolute z-10;
2037
+ }
2038
+ .bcc-graphic .corner.top-left {
2039
+ @apply top-4 left-4;
2040
+ }
2041
+ .bcc-graphic .corner.top-right {
2042
+ @apply top-4 right-4;
2043
+ }
2044
+ .bcc-graphic .corner.bottom-right {
2045
+ @apply right-4 bottom-4;
2046
+ }
2047
+ .bcc-graphic .corner.bottom-left {
2048
+ @apply bottom-4 left-4;
2049
+ }
2050
+ .bcc-graphic .center-slot {
2051
+ @apply inset-1/4 flex h-1/2 w-1/2 items-center justify-center;
2052
+ }
2180
2053
 
2181
- .bcc-graphic {
2182
- @apply relative flex max-h-full w-full bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
2183
- }
2054
+ .bcc-graphic {
2055
+ @apply from-background-brand-bolder-default to-background-brand-subtle-default relative flex max-h-full w-full bg-linear-to-tr;
2056
+ }
2184
2057
 
2185
- .bcc-graphic-banner {
2186
- @apply absolute inset-0 h-full w-full object-cover object-center;
2187
- }
2188
- .bcc-graphic-banner--loading {
2189
- @apply animate-pulse bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
2190
- }
2058
+ .bcc-graphic-banner {
2059
+ @apply absolute inset-0 h-full w-full object-cover object-center;
2060
+ }
2061
+ .bcc-graphic-banner--loading {
2062
+ @apply from-background-brand-bolder-default to-background-brand-subtle-default animate-pulse bg-linear-to-tr;
2063
+ }
2191
2064
 
2192
- .bcc-graphic-logo {
2193
- @apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center;
2194
- }
2195
- .bcc-graphic-logo--loading {
2196
- @apply animate-pulse bg-black opacity-10 blur-sm;
2197
- }
2065
+ .bcc-graphic-logo {
2066
+ @apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center;
2067
+ }
2068
+ .bcc-graphic-logo--loading {
2069
+ @apply animate-pulse bg-black opacity-10 blur-sm;
2070
+ }
2071
+
2072
+ .bcc-graphic.bcc-gb-grayscale .bcc-graphic-banner,
2073
+ .bcc-graphic.bcc-gb-grayscale .bcc-graphic-logo {
2074
+ @apply brightness-75 grayscale;
2075
+ }
2076
+ .bcc-graphic.bcc-gb-highlight .bcc-graphic-banner,
2077
+ .bcc-graphic.bcc-gb-highlight .bcc-graphic-logo {
2078
+ @apply brightness-150;
2079
+ }
2080
+ }
2081
+
2082
+
2083
+
2084
+ /* from ./BccImage/BccImage.css */
2085
+ @layer components {
2086
+ .bcc-image {
2087
+ @apply relative inline-block overflow-hidden leading-none;
2088
+ }
2089
+
2090
+ .bcc-image__img {
2091
+ @apply block max-w-full align-middle;
2092
+ }
2093
+
2094
+ .bcc-image--preview {
2095
+ @apply cursor-zoom-in;
2096
+ }
2097
+
2098
+ .bcc-image__preview-mask {
2099
+ @apply absolute inset-0 m-0 flex cursor-pointer items-center justify-center border-0 bg-black/40 p-0 opacity-0 transition-opacity;
2100
+ }
2101
+
2102
+ .bcc-image--preview:hover .bcc-image__preview-mask,
2103
+ .bcc-image--preview:focus-within .bcc-image__preview-mask {
2104
+ @apply opacity-100;
2105
+ }
2106
+
2107
+ .bcc-image__preview-icon {
2108
+ @apply size-6 text-white;
2109
+ }
2110
+ }
2111
+
2112
+
2113
+
2114
+ /* from ./BccLightbox/BccLightbox.css */
2115
+ @layer components {
2116
+ .bcc-lightbox {
2117
+ @apply fixed inset-0 z-9999 flex touch-none items-center justify-center;
2118
+ }
2119
+
2120
+ .bcc-lightbox__backdrop {
2121
+ @apply absolute inset-0 bg-black/75;
2122
+ }
2123
+
2124
+ .bcc-lightbox__header {
2125
+ @apply top-inset-top pointer-events-none absolute inset-x-0 z-20 flex items-center justify-end gap-3 p-3;
2126
+ }
2127
+
2128
+ .bcc-lightbox__counter {
2129
+ @apply body-sm pointer-events-none mr-auto rounded-md bg-black/50 px-2.5 py-1 text-white;
2130
+ }
2131
+
2132
+ .bcc-lightbox__control {
2133
+ @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;
2134
+ }
2135
+
2136
+ .bcc-lightbox__icon {
2137
+ @apply size-6 shrink-0;
2138
+ }
2139
+
2140
+ .bcc-lightbox__nav {
2141
+ @apply absolute top-1/2 z-20 -translate-y-1/2;
2142
+ }
2143
+
2144
+ .bcc-lightbox__nav--prev {
2145
+ @apply left-1 sm:left-3;
2146
+ }
2147
+
2148
+ .bcc-lightbox__nav--next {
2149
+ @apply right-1 sm:right-3;
2150
+ }
2151
+
2152
+ .bcc-lightbox__stage {
2153
+ @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;
2154
+ }
2155
+
2156
+ .bcc-lightbox__toolbar {
2157
+ @apply center bottom-inset-bottom-4 pointer-events-none absolute z-20 flex gap-1 rounded-md bg-black/50 p-1;
2158
+ }
2159
+
2160
+ .bcc-lightbox__toolbar-btn {
2161
+ @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;
2162
+ }
2163
+
2164
+ .bcc-lightbox__media {
2165
+ @apply flex max-h-[calc(100vh-7rem)] w-full touch-none flex-col items-center justify-center;
2166
+ }
2167
+
2168
+ .bcc-lightbox__media--zoomable {
2169
+ @apply cursor-grab active:cursor-grabbing;
2170
+ }
2171
+
2172
+ .bcc-lightbox__transform {
2173
+ @apply flex origin-center items-center justify-center will-change-transform;
2174
+ }
2175
+
2176
+ .bcc-lightbox__image,
2177
+ .bcc-lightbox__video {
2178
+ @apply block h-auto max-h-[calc(100vh-8rem)] w-auto max-w-[min(92vw,68rem)] object-contain select-none;
2179
+ }
2180
+
2181
+ .bcc-lightbox__video {
2182
+ @apply bg-black;
2183
+ }
2184
+
2185
+ .bcc-lightbox__caption {
2186
+ @apply body-sm mt-3 max-w-[min(92vw,40rem)] text-center text-white;
2187
+ }
2198
2188
  }
2199
2189
 
2200
2190
 
@@ -2259,177 +2249,181 @@
2259
2249
 
2260
2250
  /* from ./BccNpsScore/BccNpsScore.css */
2261
2251
  @layer components {
2262
- .bcc-nps-score {
2263
- @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2 select-none;
2264
- }
2252
+ .bcc-nps-score {
2253
+ @apply body-sm flex min-w-70 flex-col gap-y-2 p-4 select-none;
2254
+ }
2265
2255
 
2266
- .bcc-nps-score--heading {
2267
- @apply flex items-center justify-between;
2268
- }
2256
+ .bcc-nps-score--heading {
2257
+ @apply flex items-center justify-between;
2258
+ }
2269
2259
 
2270
- .bcc-nps-score--label {
2271
- @apply flex-1 truncate;
2272
- }
2260
+ .bcc-nps-score--label {
2261
+ @apply flex-1 truncate;
2262
+ }
2273
2263
 
2274
- .bcc-nps-score--bar {
2275
- @apply flex justify-evenly rounded-xl text-white pointer-events-none;
2276
- @apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
2277
- }
2264
+ .bcc-nps-score--bar {
2265
+ @apply pointer-events-none flex justify-evenly rounded-xl text-white;
2266
+ @apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
2267
+ }
2278
2268
 
2279
- .bcc-nps-score--bar.reverse {
2280
- @apply bg-linear-to-l;
2281
- }
2269
+ .bcc-nps-score--bar.reverse {
2270
+ @apply bg-linear-to-l;
2271
+ }
2282
2272
 
2283
- .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
2284
- @apply bg-ctx ctx-gray-subtlest text-disabled;
2285
- }
2273
+ .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
2274
+ @apply bg-ctx ctx-gray-subtlest text-disabled;
2275
+ }
2286
2276
 
2287
- .bcc-nps-score--number {
2288
- @apply border-border-inverse;
2289
- @apply flex h-8 flex-1 items-center justify-center border-r-2 font-bold text-sm leading-none;
2290
- @apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
2291
- }
2277
+ .bcc-nps-score--number {
2278
+ @apply border-inverse;
2279
+ @apply flex h-8 flex-1 items-center justify-center border-r-2 text-sm leading-none font-bold;
2280
+ @apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
2281
+ }
2292
2282
 
2293
- .bcc-nps-score--number:disabled {
2294
- @apply cursor-not-allowed;
2295
- }
2283
+ .bcc-nps-score--number:disabled {
2284
+ @apply cursor-not-allowed;
2285
+ }
2296
2286
 
2297
- .bcc-nps-score--number.active {
2298
- @apply pointer-events-none;
2299
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2300
- }
2287
+ .bcc-nps-score--number.active {
2288
+ @apply pointer-events-none;
2289
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2290
+ }
2301
2291
 
2302
- .bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
2303
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2304
- }
2292
+ .bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
2293
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2294
+ }
2305
2295
 
2306
- .bcc-nps-score--number.inactive {
2307
- @apply bg-ctx text-ctx ctx-gray-subtler;
2308
- }
2296
+ .bcc-nps-score--number.inactive {
2297
+ @apply bg-ctx text-ctx ctx-gray-subtler;
2298
+ }
2309
2299
 
2310
- .bcc-nps-score--number:first-child {
2311
- @apply rounded-l-xl pl-0.5;
2312
- }
2313
- .bcc-nps-score--number:last-child{
2314
- @apply rounded-r-xl border-r-0 pr-0.5;
2315
- }
2300
+ .bcc-nps-score--number:first-child {
2301
+ @apply rounded-l-xl pl-0.5;
2302
+ }
2303
+ .bcc-nps-score--number:last-child {
2304
+ @apply rounded-r-xl border-r-0 pr-0.5;
2305
+ }
2316
2306
  }
2317
2307
 
2318
2308
 
2319
2309
 
2320
2310
  /* from ./BccReact/BccReact.css */
2321
2311
  @layer components {
2322
- .bcc-react {
2323
- @apply relative flex w-full items-center overflow-visible;
2324
- }
2325
- .bcc-react-toggle {
2326
- @apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition;
2327
- }
2328
- .bcc-react-list {
2329
- @apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
2330
- }
2331
- .bcc-react-empty {
2332
- @apply heading-xs flex items-center;
2333
- }
2312
+ .bcc-react {
2313
+ @apply relative flex w-full items-center overflow-visible;
2314
+ }
2315
+ .bcc-react-toggle {
2316
+ @apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 transition;
2317
+ }
2318
+ .bcc-react-list {
2319
+ @apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
2320
+ }
2321
+ .bcc-react-empty {
2322
+ @apply heading-xs flex items-center;
2323
+ }
2334
2324
 
2335
- .bcc-react-selector-container {
2336
- @apply absolute z-50 h-9;
2337
- @apply top-11 origin-top-left;
2338
- }
2325
+ .bcc-react-selector-container {
2326
+ @apply absolute z-50 h-9;
2327
+ @apply top-11 origin-top-left;
2328
+ }
2339
2329
 
2340
- .bcc-react-selector-container--top {
2341
- @apply -top-10 origin-bottom-left;
2342
- }
2330
+ .bcc-react-selector-container--top {
2331
+ @apply -top-10 origin-bottom-left;
2332
+ }
2343
2333
 
2344
- .bcc-react-selector {
2345
- @apply flex h-9 flex-col overflow-hidden bg-neutral-100 px-0 shadow-md;
2346
- border-radius: 18px;
2347
- }
2334
+ .bcc-react-selector {
2335
+ @apply flex h-9 flex-col overflow-hidden bg-neutral-100 px-0 shadow-md;
2336
+ border-radius: 18px;
2337
+ }
2348
2338
 
2349
- .bcc-react-selector-emojis-container {
2350
- @apply flex items-center bg-neutral-100 px-1;
2351
- }
2339
+ .bcc-react-selector-emojis-container {
2340
+ @apply flex items-center bg-neutral-100 px-1;
2341
+ }
2352
2342
 
2353
- .bcc-react-selector-more {
2354
- @apply flex w-9 items-center justify-center;
2355
- }
2356
- .bcc-react-selector-more-btn {
2357
- @apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-200;
2358
- }
2343
+ .bcc-react-selector-more {
2344
+ @apply flex w-9 items-center justify-center;
2345
+ }
2346
+ .bcc-react-selector-more-btn {
2347
+ @apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-200;
2348
+ }
2359
2349
 
2360
- .bcc-react-dropdown-container {
2361
- @apply left-0 top-0 -z-10 w-full max-w-full;
2362
- width: 296px;
2363
- }
2364
- .bcc-react-dropdown-container--top {
2365
- @apply bottom-0 top-auto pb-0;
2366
- }
2350
+ .bcc-react-dropdown-container {
2351
+ @apply top-0 left-0 -z-10 w-full max-w-full;
2352
+ width: 296px;
2353
+ }
2354
+ .bcc-react-dropdown-container--top {
2355
+ @apply top-auto bottom-0 pb-0;
2356
+ }
2367
2357
 
2368
- .bcc-react-dropdown {
2369
- @apply -z-10 flex w-full flex-wrap overflow-hidden px-1;
2370
- }
2358
+ .bcc-react-dropdown {
2359
+ @apply -z-10 flex w-full flex-wrap overflow-hidden px-1;
2360
+ }
2371
2361
 
2372
- .bcc-react-arrow-down-icon {
2373
- @apply h-6 w-6 text-slate-600;
2374
- transition: transform 0.3s ease;
2375
- }
2376
- .bcc-react-arrow-down-icon.open {
2377
- transform: rotate(-180deg);
2378
- }
2362
+ .bcc-react-arrow-down-icon {
2363
+ @apply h-6 w-6 text-slate-600;
2364
+ transition: transform 0.3s ease;
2365
+ }
2366
+ .bcc-react-arrow-down-icon.open {
2367
+ transform: rotate(-180deg);
2368
+ }
2379
2369
 
2380
- .bcc-react-selector-item {
2381
- @apply p-2 text-xl leading-none transition-transform duration-200 ease-out h-9 w-9 relative;
2382
- }
2370
+ .bcc-react-selector-item {
2371
+ @apply relative h-9 w-9 p-2 text-xl leading-none transition-transform duration-200 ease-out;
2372
+ }
2383
2373
 
2384
- .bcc-react-selector-item--clicked {
2385
- animation: scaleFadeOut 300ms forwards;
2386
- }
2374
+ .bcc-react-selector-item--clicked {
2375
+ animation: scaleFadeOut 300ms forwards;
2376
+ }
2387
2377
 
2388
- @keyframes scaleFadeOut {
2389
- 0% {
2390
- transform: scale(1);
2391
- opacity: 1;
2392
- }
2393
- 100% {
2394
- transform: scale(1.4);
2395
- opacity: 0;
2396
- }
2397
- }
2378
+ @keyframes scaleFadeOut {
2379
+ 0% {
2380
+ transform: scale(1);
2381
+ opacity: 1;
2382
+ }
2383
+ 100% {
2384
+ transform: scale(1.4);
2385
+ opacity: 0;
2386
+ }
2387
+ }
2398
2388
 
2399
- .bcc-react-emoji-list-item {
2400
- @apply flex ctx clickable items-center justify-center rounded-full p-1 text-2xl leading-none drop-shadow transition-all hover:scale-105;
2401
- /* Default --not-selected */
2402
- @apply ctx-neutral-subtlest;
2403
- }
2404
- .bcc-react-emoji-list-item.selected {
2405
- @apply ctx-neutral-subtle;
2406
- }
2389
+ .bcc-react-emoji-list-item {
2390
+ @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;
2391
+ /* Default --not-selected */
2392
+ @apply ctx-neutral-subtlest;
2393
+ }
2394
+ .bcc-react-emoji-list-item span {
2395
+ @apply leading-none;
2396
+ }
2397
+ .bcc-react-emoji-list-item.selected {
2398
+ @apply ctx-neutral-subtle;
2399
+ }
2407
2400
  }
2408
2401
 
2409
2402
 
2410
2403
 
2411
2404
  /* from ./BccTag/BccTag.css */
2412
-
2413
2405
  @layer components {
2414
2406
  .bcc-tag.bcc-badge {
2415
2407
  @apply w-auto;
2416
2408
  }
2417
2409
  .bcc-tag.bcc-badge.md {
2418
- @apply font-regular h-6;
2410
+ @apply body-md h-6;
2419
2411
  }
2420
2412
  .bcc-tag.bcc-badge.sm {
2421
- @apply font-regular h-5;
2413
+ @apply body-sm h-5;
2422
2414
  }
2423
2415
  .bcc-tag.bcc-badge.lg {
2424
- @apply font-regular h-8;
2416
+ @apply body-md h-8;
2425
2417
  }
2426
2418
  .bcc-tag.bcc-badge.xl {
2427
- @apply font-regular h-10;
2419
+ @apply body-lg h-10;
2428
2420
  }
2429
2421
  }
2430
2422
 
2431
2423
 
2432
2424
 
2425
+
2426
+
2433
2427
  /* === ./components/wrapped/styles.css === */
2434
2428
 
2435
2429
  /* from ./BccAvatar/BccAvatar.css */
@@ -2523,6 +2517,9 @@
2523
2517
  .bcc-tabs-fluid.p-tabs {
2524
2518
  width: 100%;
2525
2519
  }
2520
+ .p-tabs .p-tab {
2521
+ @apply heading-sm;
2522
+ }
2526
2523
  }
2527
2524
 
2528
2525
 
@@ -2555,20 +2552,31 @@
2555
2552
  font-kerning: normal;
2556
2553
  }
2557
2554
 
2558
- hr {
2559
- border-color: var(--color-border-default);
2560
- }
2555
+ @layer base {
2556
+ hr {
2557
+ border-color: var(--color-border-default);
2558
+ }
2561
2559
 
2562
- b,
2563
- strong,
2564
- .bold {
2565
- font-weight: bold;
2566
- --ctx-text: var(--ctx-text-bold);
2567
- }
2560
+ b,
2561
+ strong,
2562
+ .bold {
2563
+ font-weight: bold;
2564
+ --ctx-text: var(--ctx-text-bold);
2565
+ }
2568
2566
 
2569
- /* Disable state */
2570
- :disabled,
2571
- .disabled {
2572
- cursor: not-allowed;
2573
- pointer-events: none;
2567
+ /* Disable state */
2568
+ :disabled,
2569
+ .disabled {
2570
+ cursor: not-allowed;
2571
+ pointer-events: none;
2572
+ }
2574
2573
  }
2574
+
2575
+
2576
+ /* SFC <style> blocks extracted all .vue components */
2577
+ @import './sfc-styles.css';
2578
+
2579
+ /* Library utility classes, compiled from the library's own components.
2580
+ Contains only the utility class rules used inside the library — no preflight,
2581
+ no @theme variables, no design tokens, since theme.css already provides those. */
2582
+ @import './library-utilities.css';