@bcc-code/component-library-vue 0.0.0-dev.883df16 → 0.0.0-dev.892612c

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 (39) 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 +13191 -12149
  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 +670 -682
  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/BccLightbox.vue.d.ts +3 -0
  19. package/dist-types/components/custom/BccLightbox/BccLightboxMedia.vue.d.ts +18 -0
  20. package/dist-types/components/custom/BccLightbox/composables.d.ts +23 -0
  21. package/dist-types/components/custom/BccLightbox/detectMedia.d.ts +4 -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 +10 -8
  29. package/dist-types/components/custom/index.d.ts +5 -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/BccMessage.vue.d.ts +6 -1
  33. package/dist-types/components/wrapped/BccRadioButton.vue.d.ts +2 -0
  34. package/dist-types/components/wrapped/BccSelectButton.vue.d.ts +5 -2
  35. package/dist-types/components/wrapped/index.d.ts +0 -2
  36. package/dist-types/index.d.ts +1 -0
  37. package/package.json +111 -103
  38. package/dist-types/components/custom/BccCircleLoader/BccCircleLoader.vue.d.ts +0 -11
  39. package/dist-types/components/wrapped/BccImage.vue.d.ts +0 -17
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,16 +702,12 @@
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 {
@@ -778,16 +715,12 @@
778
715
  --ctx-text-bold: var(--color-default-neutral-0);
779
716
  --ctx-background: var(--color-default-bcc-800);
780
717
  --ctx-gradient: var(--color-default-bcc-900);
781
- --ctx-border: var(--color-default-bcc-700);
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
721
  --ctx-text-hover: var(--color-default-neutral-0);
784
- --ctx-text-pressed: var(--color-default-neutral-0);
785
722
  --ctx-background-hover: var(--color-default-bcc-900);
786
- --ctx-background-pressed: var(--color-default-bcc-1000);
787
- --ctx-gradient-hover: var(--color-default-bcc-1000);
788
- --ctx-gradient-pressed: var(--color-default-bcc-1000);
789
- --ctx-border-hover: var(--color-default-bcc-700);
790
- --ctx-border-pressed: var(--color-default-bcc-700);
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,15 +859,11 @@
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 {
@@ -982,16 +871,12 @@
982
871
  --ctx-text-bold: var(--color-default-neutral-100);
983
872
  --ctx-background: var(--color-default-neutral-700);
984
873
  --ctx-gradient: var(--color-default-neutral-800);
985
- --ctx-border: var(--color-default-neutral-700);
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
878
  --ctx-background-hover: var(--color-default-neutral-800);
990
- --ctx-background-pressed: var(--color-default-neutral-900);
991
- --ctx-gradient-hover: var(--color-default-neutral-900);
992
- --ctx-gradient-pressed: var(--color-default-neutral-900);
993
- --ctx-border-hover: var(--color-default-neutral-700);
994
- --ctx-border-pressed: var(--color-default-neutral-700);
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,16 +1430,12 @@
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
 
@@ -1826,27 +1539,12 @@
1826
1539
 
1827
1540
 
1828
1541
 
1829
- /* === ./styles/fonts.css === */
1830
- @utility heading-xs { font: var(--heading-xs); }
1831
- @utility heading-sm { font: var(--heading-sm); }
1832
- @utility heading-md { font: var(--heading-md); }
1833
- @utility heading-lg { font: var(--heading-lg); }
1834
- @utility heading-xl { font: var(--heading-xl); }
1835
- @utility heading-2xl { font: var(--heading-2xl); }
1836
- @utility heading-3xl { font: var(--heading-3xl); }
1837
- @utility heading-4xl { font: var(--heading-4xl); }
1838
- @utility heading-5xl { font: var(--heading-5xl); }
1839
- @utility body-sm { font: var(--body-sm); }
1840
- @utility body-md { font: var(--body-md); }
1841
- @utility body-lg { font: var(--body-lg); }
1842
-
1843
-
1844
-
1845
1542
  /* === ./styles/component-overrides.css === */
1846
1543
  /** Custom styles to fix primevue components that are not custom or wrapped. */
1847
1544
 
1848
1545
  :root {
1849
- --p-toast-width: min(85vw, 400px);
1546
+ --p-toast-width: min(85vw, calc(var(--spacing) * 100));
1547
+ --p-tooltip-max-width: min(85vw, calc(var(--spacing) * 100));
1850
1548
  }
1851
1549
 
1852
1550
  /**
@@ -1947,6 +1645,156 @@
1947
1645
  font-size: var(--text-md);
1948
1646
  }
1949
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
+
1950
1798
 
1951
1799
 
1952
1800
 
@@ -1962,29 +1810,27 @@
1962
1810
  }
1963
1811
 
1964
1812
  .bcc-app-nav-item {
1965
- @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;
1966
1814
  }
1967
1815
 
1968
1816
  .bcc-nav-item-icon {
1969
- @apply size-6 opacity-50;
1817
+ @apply size-6 icon-subtlest;
1970
1818
  }
1971
1819
 
1972
1820
  .bcc-nav-item-badge {
1973
- @apply absolute top-0 right-1 opacity-75;
1821
+ @apply absolute top-0 right-1;
1974
1822
  }
1975
1823
 
1976
1824
  .bcc-nav-item-title {
1977
- @apply text-heading-xs text-center opacity-50;
1825
+ @apply heading-xs text-center text-subtlest opacity-75;
1978
1826
  }
1979
1827
 
1980
- .bcc-app-nav-item--active {
1981
- @apply text-selected;
1828
+ .bcc-app-nav-item--active .bcc-nav-item-title {
1829
+ @apply text-selected opacity-100;
1982
1830
  }
1983
1831
 
1984
- .bcc-app-nav-item--active .bcc-nav-item-icon,
1985
- .bcc-app-nav-item--active .bcc-nav-item-badge,
1986
- .bcc-app-nav-item--active .bcc-nav-item-title {
1987
- @apply opacity-100;
1832
+ .bcc-app-nav-item--active .bcc-nav-item-icon {
1833
+ @apply text-selected;
1988
1834
  }
1989
1835
  }
1990
1836
 
@@ -1993,24 +1839,27 @@
1993
1839
  /* from ./BccBadge/BccBadge.css */
1994
1840
  @layer components {
1995
1841
  .bcc-badge {
1996
- @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;
1997
1843
 
1998
1844
  @apply bg-ctx text-ctx;
1999
1845
  }
1846
+ .bcc-badge span:empty {
1847
+ display: none;
1848
+ }
2000
1849
  .bcc-badge.gradient {
2001
1850
  @apply ctx-gradient;
2002
1851
  }
2003
1852
  .bcc-badge.sm {
2004
- @apply text-heading-xs h-4 w-4;
1853
+ @apply heading-xs h-4 w-4;
2005
1854
  }
2006
1855
  .bcc-badge.md {
2007
- @apply text-heading-sm h-5 w-5;
1856
+ @apply heading-sm h-5 w-5;
2008
1857
  }
2009
1858
  .bcc-badge.lg {
2010
- @apply text-heading-md h-6 w-6;
1859
+ @apply heading-md h-6 w-6;
2011
1860
  }
2012
1861
  .bcc-badge.xl {
2013
- @apply text-heading-md h-8 w-8;
1862
+ @apply heading-md h-8 w-8;
2014
1863
  }
2015
1864
 
2016
1865
  .bcc-badge .bcc-badge-icon {
@@ -2058,163 +1907,284 @@
2058
1907
 
2059
1908
  /* from ./BccCapacityIndicator/BccCapacityIndicator.css */
2060
1909
  @layer components {
2061
- .bcc-capacity-indicator {
2062
- @apply text-base;
2063
- }
1910
+ .bcc-capacity-indicator {
1911
+ @apply text-base;
1912
+ }
2064
1913
 
2065
- .bcc-capacity-indicator.xs {
2066
- @apply text-xs;
2067
- }
1914
+ .bcc-capacity-indicator.xs {
1915
+ @apply text-xs;
1916
+ }
2068
1917
 
2069
- .bcc-capacity-indicator.sm {
2070
- @apply text-sm;
2071
- }
1918
+ .bcc-capacity-indicator.sm {
1919
+ @apply text-sm;
1920
+ }
2072
1921
 
2073
- .bcc-capacity-indicator.lg {
2074
- @apply text-xl;
2075
- }
1922
+ .bcc-capacity-indicator.lg {
1923
+ @apply text-xl;
1924
+ }
2076
1925
 
2077
- .bcc-capacity-indicator {
2078
- --bcc-capacity-indicator-background: transparent;
2079
- --bcc-capacity-indicator-text: var(--ctx-text);
2080
- --bcc-capacity-indicator-circle: var(--ctx-background-pressed);
2081
- --bcc-capacity-indicator-circle-used: var(--ctx-border);
2082
- background: var(--bcc-capacity-indicator-background);
2083
- @apply ctx-gray-subtlest;
2084
- }
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
+ }
2085
1934
 
2086
- .bcc-capacity-indicator.colored {
2087
- --bcc-capacity-indicator-background: var(--ctx-background);
2088
- @apply ctx-blue-subtlest;
2089
- }
1935
+ .bcc-capacity-indicator.colored {
1936
+ --bcc-capacity-indicator-background: var(--ctx-background);
1937
+ @apply ctx-blue-subtlest;
1938
+ }
2090
1939
 
2091
- .bcc-capacity-indicator .text {
2092
- color: var(--bcc-capacity-indicator-text);
2093
- }
2094
- .bcc-capacity-indicator .circle {
2095
- stroke: var(--bcc-capacity-indicator-circle);
2096
- }
2097
- .bcc-capacity-indicator .circle-used {
2098
- stroke: var(--bcc-capacity-indicator-circle-used);
2099
- }
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
+ }
2100
1949
 
2101
- .bcc-capacity-indicator.is-warning {
2102
- @apply ctx-yellow-subtlest;
2103
- --bcc-capacity-indicator-circle: var(--ctx-background);
2104
- }
1950
+ .bcc-capacity-indicator.is-warning {
1951
+ @apply ctx-yellow-subtlest;
1952
+ }
2105
1953
 
2106
- .bcc-capacity-indicator.is-full {
2107
- @apply ctx-red-subtlest;
2108
- }
1954
+ .bcc-capacity-indicator.is-full {
1955
+ @apply ctx-red-subtlest;
1956
+ --bcc-capacity-indicator-background: var(--ctx-background);
1957
+ }
2109
1958
  }
2110
1959
 
2111
1960
 
1961
+
2112
1962
  /* from ./BccDialKnob/BccDialKnob.css */
2113
1963
  @layer components {
2114
- .bcc-knob {
2115
- @apply relative mx-auto inline-flex touch-none select-none items-center justify-center p-2;
2116
-
2117
- --bcc-knob-arc-bg: var(--color-background-neutral-default);
2118
- --bcc-knob-head: var(--color-background-brand-bolder-default);
2119
- --bcc-knob-tail: var(--color-background-brand-subtle-default);
2120
-
2121
- --bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
2122
- --bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
2123
-
2124
- --bcc-knob-right-head: var(--color-background-accent-green-bolder-default);
2125
- --bcc-knob-right-tail: var(--color-background-accent-green-subtle-default);
2126
- }
1964
+ .bcc-knob {
1965
+ @apply relative mx-auto inline-flex touch-none items-center justify-center p-2 select-none;
2127
1966
 
2128
- .bcc-knob-label {
2129
- @apply pointer-events-none absolute inset-0 flex select-none flex-col items-center justify-center;
2130
- }
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);
2131
1970
 
2132
- .bcc-knob-top-left {
2133
- @apply absolute top-0 left-0 text-left;
2134
- }
1971
+ --bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
1972
+ --bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
2135
1973
 
2136
- .bcc-knob-top-right {
2137
- @apply absolute top-0 right-0 text-right;
2138
- }
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
+ }
2139
1989
  }
2140
1990
 
2141
1991
 
2142
1992
 
2143
1993
  /* from ./BccFrame/BccFrame.css */
2144
1994
  @layer components {
2145
- .bcc-frame {
2146
- @apply ctx ctx-default w-full;
2147
- }
1995
+ .bcc-frame {
1996
+ @apply ctx ctx-default w-full border border-transparent;
1997
+ }
2148
1998
 
2149
- .bcc-frame.bcc-frame--shadow {
2150
- @apply shadow shadow-ctx;
2151
- }
1999
+ .bcc-frame.bcc-frame--shadow {
2000
+ @apply shadow-ctx shadow;
2001
+ }
2152
2002
 
2153
- .bcc-frame--raised {
2154
- --ctx-background: var(--color-elevation-surface-raised-default);
2155
- }
2156
- .bcc-frame--rounded {
2157
- @apply rounded-md;
2158
- }
2159
- .bcc-frame--raised.bcc-frame--shadow {
2160
- @apply shadow-raised;
2161
- }
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
+ }
2162
2012
 
2163
- .bcc-frame--overlay {
2164
- --ctx-background: var(--color-elevation-surface-overlay-default);
2165
- }
2166
- .bcc-frame--overlay.bcc-frame--shadow {
2167
- @apply shadow-overlay;
2168
- }
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
+ }
2169
2020
 
2170
- .bcc-frame--sunken {
2171
- --ctx-background: var(--color-elevation-surface-sunken-default);
2172
- }
2173
- .bcc-frame--sunken.bcc-frame--shadow {
2174
- @apply shadow-inner;
2175
- }
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
+ }
2176
2028
  }
2177
2029
 
2178
2030
 
2031
+
2179
2032
  /* from ./BccGraphic/BccGraphic.css */
2180
2033
  @layer components {
2181
- .bcc-graphic .corner,
2182
- .bcc-graphic .center-slot {
2183
- @apply absolute z-10;
2184
- }
2185
- .bcc-graphic .corner.top-left {
2186
- @apply left-4 top-4;
2187
- }
2188
- .bcc-graphic .corner.top-right {
2189
- @apply right-4 top-4;
2190
- }
2191
- .bcc-graphic .corner.bottom-right {
2192
- @apply bottom-4 right-4;
2193
- }
2194
- .bcc-graphic .corner.bottom-left {
2195
- @apply bottom-4 left-4;
2196
- }
2197
- .bcc-graphic .center-slot {
2198
- @apply inset-1/4 h-1/2 w-1/2 flex items-center justify-center;
2199
- }
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
+ }
2200
2053
 
2201
- .bcc-graphic {
2202
- @apply relative flex max-h-full w-full bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
2203
- }
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
+ }
2204
2057
 
2205
- .bcc-graphic-banner {
2206
- @apply absolute inset-0 h-full w-full object-cover object-center;
2207
- }
2208
- .bcc-graphic-banner--loading {
2209
- @apply animate-pulse bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
2210
- }
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
+ }
2211
2064
 
2212
- .bcc-graphic-logo {
2213
- @apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center;
2214
- }
2215
- .bcc-graphic-logo--loading {
2216
- @apply animate-pulse bg-black opacity-10 blur-sm;
2217
- }
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
+ }
2218
2188
  }
2219
2189
 
2220
2190
 
@@ -2279,60 +2249,60 @@
2279
2249
 
2280
2250
  /* from ./BccNpsScore/BccNpsScore.css */
2281
2251
  @layer components {
2282
- .bcc-nps-score {
2283
- @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2 select-none;
2284
- }
2252
+ .bcc-nps-score {
2253
+ @apply body-sm flex min-w-70 flex-col gap-y-2 p-4 select-none;
2254
+ }
2285
2255
 
2286
- .bcc-nps-score--heading {
2287
- @apply flex items-center justify-between;
2288
- }
2256
+ .bcc-nps-score--heading {
2257
+ @apply flex items-center justify-between;
2258
+ }
2289
2259
 
2290
- .bcc-nps-score--label {
2291
- @apply flex-1 truncate;
2292
- }
2260
+ .bcc-nps-score--label {
2261
+ @apply flex-1 truncate;
2262
+ }
2293
2263
 
2294
- .bcc-nps-score--bar {
2295
- @apply flex justify-evenly rounded-xl text-white pointer-events-none;
2296
- @apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
2297
- }
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
+ }
2298
2268
 
2299
- .bcc-nps-score--bar.reverse {
2300
- @apply bg-linear-to-l;
2301
- }
2269
+ .bcc-nps-score--bar.reverse {
2270
+ @apply bg-linear-to-l;
2271
+ }
2302
2272
 
2303
- .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
2304
- @apply bg-ctx ctx-gray-subtlest text-disabled;
2305
- }
2273
+ .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
2274
+ @apply bg-ctx ctx-gray-subtlest text-disabled;
2275
+ }
2306
2276
 
2307
- .bcc-nps-score--number {
2308
- @apply border-border-inverse;
2309
- @apply flex h-8 flex-1 items-center justify-center border-r-2 font-bold text-sm leading-none;
2310
- @apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
2311
- }
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
+ }
2312
2282
 
2313
- .bcc-nps-score--number:disabled {
2314
- @apply cursor-not-allowed;
2315
- }
2283
+ .bcc-nps-score--number:disabled {
2284
+ @apply cursor-not-allowed;
2285
+ }
2316
2286
 
2317
- .bcc-nps-score--number.active {
2318
- @apply pointer-events-none;
2319
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2320
- }
2287
+ .bcc-nps-score--number.active {
2288
+ @apply pointer-events-none;
2289
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2290
+ }
2321
2291
 
2322
- .bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
2323
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2324
- }
2292
+ .bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
2293
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2294
+ }
2325
2295
 
2326
- .bcc-nps-score--number.inactive {
2327
- @apply bg-ctx text-ctx ctx-gray-subtler;
2328
- }
2296
+ .bcc-nps-score--number.inactive {
2297
+ @apply bg-ctx text-ctx ctx-gray-subtler;
2298
+ }
2329
2299
 
2330
- .bcc-nps-score--number:first-child {
2331
- @apply rounded-l-xl pl-0.5;
2332
- }
2333
- .bcc-nps-score--number:last-child{
2334
- @apply rounded-r-xl border-r-0 pr-0.5;
2335
- }
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
+ }
2336
2306
  }
2337
2307
 
2338
2308
 
@@ -2417,10 +2387,13 @@
2417
2387
  }
2418
2388
 
2419
2389
  .bcc-react-emoji-list-item {
2420
- @apply ctx clickable flex items-center justify-center rounded-full p-1 text-2xl leading-none drop-shadow transition-all hover:scale-105;
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;
2421
2391
  /* Default --not-selected */
2422
2392
  @apply ctx-neutral-subtlest;
2423
2393
  }
2394
+ .bcc-react-emoji-list-item span {
2395
+ @apply leading-none;
2396
+ }
2424
2397
  .bcc-react-emoji-list-item.selected {
2425
2398
  @apply ctx-neutral-subtle;
2426
2399
  }
@@ -2429,27 +2402,28 @@
2429
2402
 
2430
2403
 
2431
2404
  /* from ./BccTag/BccTag.css */
2432
-
2433
2405
  @layer components {
2434
2406
  .bcc-tag.bcc-badge {
2435
2407
  @apply w-auto;
2436
2408
  }
2437
2409
  .bcc-tag.bcc-badge.md {
2438
- @apply font-regular h-6;
2410
+ @apply body-md h-6;
2439
2411
  }
2440
2412
  .bcc-tag.bcc-badge.sm {
2441
- @apply font-regular h-5;
2413
+ @apply body-sm h-5;
2442
2414
  }
2443
2415
  .bcc-tag.bcc-badge.lg {
2444
- @apply font-regular h-8;
2416
+ @apply body-md h-8;
2445
2417
  }
2446
2418
  .bcc-tag.bcc-badge.xl {
2447
- @apply font-regular h-10;
2419
+ @apply body-lg h-10;
2448
2420
  }
2449
2421
  }
2450
2422
 
2451
2423
 
2452
2424
 
2425
+
2426
+
2453
2427
  /* === ./components/wrapped/styles.css === */
2454
2428
 
2455
2429
  /* from ./BccAvatar/BccAvatar.css */
@@ -2543,6 +2517,9 @@
2543
2517
  .bcc-tabs-fluid.p-tabs {
2544
2518
  width: 100%;
2545
2519
  }
2520
+ .p-tabs .p-tab {
2521
+ @apply heading-sm;
2522
+ }
2546
2523
  }
2547
2524
 
2548
2525
 
@@ -2575,20 +2552,31 @@
2575
2552
  font-kerning: normal;
2576
2553
  }
2577
2554
 
2578
- hr {
2579
- border-color: var(--color-border-default);
2580
- }
2555
+ @layer base {
2556
+ hr {
2557
+ border-color: var(--color-border-default);
2558
+ }
2581
2559
 
2582
- b,
2583
- strong,
2584
- .bold {
2585
- font-weight: bold;
2586
- --ctx-text: var(--ctx-text-bold);
2587
- }
2560
+ b,
2561
+ strong,
2562
+ .bold {
2563
+ font-weight: bold;
2564
+ --ctx-text: var(--ctx-text-bold);
2565
+ }
2588
2566
 
2589
- /* Disable state */
2590
- :disabled,
2591
- .disabled {
2592
- cursor: not-allowed;
2593
- pointer-events: none;
2567
+ /* Disable state */
2568
+ :disabled,
2569
+ .disabled {
2570
+ cursor: not-allowed;
2571
+ pointer-events: none;
2572
+ }
2594
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';