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

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