@bcc-code/component-library-vue 0.0.0-dev.f421703 → 0.0.0-dev.f4380ac
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.
- package/README.md +29 -35
- package/dist/component-library.js +7540 -6333
- package/dist/component-library.umd.cjs +1214 -186
- package/dist/index.css +1 -1
- package/dist/library-utilities.css +2 -0
- package/dist/quill-BfNQeuzX.js +7524 -0
- package/dist/theme.css +651 -622
- package/dist-types/components/custom/BccAppNavigation/BccAppNavigation.vue.d.ts +1 -0
- package/dist-types/components/custom/BccGraphic/BccGraphic.vue.d.ts +7 -4
- package/dist-types/components/custom/BccReact/BccReact.vue.d.ts +1 -1
- package/dist-types/components/custom/BccTopNavigation/BccTopNavigation.vue.d.ts +1 -1
- package/dist-types/components/wrapped/BccCheckbox.vue.d.ts +3 -0
- package/dist-types/components/wrapped/BccMessage.vue.d.ts +5 -1
- package/dist-types/components/wrapped/BccRadioButton.vue.d.ts +2 -0
- package/dist-types/index.d.ts +1 -0
- package/package.json +109 -103
package/dist/theme.css
CHANGED
|
@@ -4,96 +4,222 @@
|
|
|
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
|
+
.ctx-default {
|
|
27
|
+
@apply ctx-default;
|
|
28
|
+
}
|
|
29
|
+
.ctx-success {
|
|
30
|
+
@apply ctx-success-subtlest;
|
|
31
|
+
}
|
|
32
|
+
.ctx-danger {
|
|
33
|
+
@apply ctx-danger-subtlest;
|
|
34
|
+
}
|
|
35
|
+
.ctx-warning {
|
|
36
|
+
@apply ctx-warning-subtlest;
|
|
37
|
+
}
|
|
38
|
+
.ctx-info {
|
|
39
|
+
@apply ctx-info-subtlest;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.ctx-blue-bolder {
|
|
43
|
+
@apply ctx-blue-bolder;
|
|
44
|
+
}
|
|
45
|
+
.ctx-blue-subtle {
|
|
46
|
+
@apply ctx-blue-subtle;
|
|
47
|
+
}
|
|
48
|
+
.ctx-blue-subtler {
|
|
49
|
+
@apply ctx-blue-subtler;
|
|
50
|
+
}
|
|
51
|
+
.ctx-blue-subtlest {
|
|
52
|
+
@apply ctx-blue-subtlest;
|
|
53
|
+
}
|
|
54
|
+
.ctx-brand-boldest {
|
|
55
|
+
@apply ctx-brand-boldest;
|
|
56
|
+
}
|
|
57
|
+
.ctx-brand-bolder {
|
|
58
|
+
@apply ctx-brand-bolder;
|
|
59
|
+
}
|
|
60
|
+
.ctx-brand-bold {
|
|
61
|
+
@apply ctx-brand-bold;
|
|
62
|
+
}
|
|
63
|
+
.ctx-brand-subtle {
|
|
64
|
+
@apply ctx-brand-subtle;
|
|
65
|
+
}
|
|
66
|
+
.ctx-brand-subtler {
|
|
67
|
+
@apply ctx-brand-subtler;
|
|
68
|
+
}
|
|
69
|
+
.ctx-brand-subtlest {
|
|
70
|
+
@apply ctx-brand-subtlest;
|
|
71
|
+
}
|
|
72
|
+
.ctx-brown-bolder {
|
|
73
|
+
@apply ctx-brown-bolder;
|
|
74
|
+
}
|
|
75
|
+
.ctx-brown-subtle {
|
|
76
|
+
@apply ctx-brown-subtle;
|
|
77
|
+
}
|
|
78
|
+
.ctx-brown-subtler {
|
|
79
|
+
@apply ctx-brown-subtler;
|
|
80
|
+
}
|
|
81
|
+
.ctx-brown-subtlest {
|
|
82
|
+
@apply ctx-brown-subtlest;
|
|
83
|
+
}
|
|
84
|
+
.ctx-danger-subtlest {
|
|
85
|
+
@apply ctx-danger;
|
|
86
|
+
}
|
|
87
|
+
.ctx-danger-bolder {
|
|
88
|
+
@apply ctx-danger-bolder;
|
|
89
|
+
}
|
|
90
|
+
.ctx-gray-bolder {
|
|
91
|
+
@apply ctx-gray-bolder;
|
|
92
|
+
}
|
|
93
|
+
.ctx-gray-subtle {
|
|
94
|
+
@apply ctx-gray-subtle;
|
|
95
|
+
}
|
|
96
|
+
.ctx-gray-subtler {
|
|
97
|
+
@apply ctx-gray-subtler;
|
|
98
|
+
}
|
|
99
|
+
.ctx-gray-subtlest {
|
|
100
|
+
@apply ctx-gray-subtlest;
|
|
101
|
+
}
|
|
102
|
+
.ctx-green-bolder {
|
|
103
|
+
@apply ctx-green-bolder;
|
|
104
|
+
}
|
|
105
|
+
.ctx-green-subtle {
|
|
106
|
+
@apply ctx-green-subtle;
|
|
107
|
+
}
|
|
108
|
+
.ctx-green-subtler {
|
|
109
|
+
@apply ctx-green-subtler;
|
|
110
|
+
}
|
|
111
|
+
.ctx-green-subtlest {
|
|
112
|
+
@apply ctx-green-subtlest;
|
|
113
|
+
}
|
|
114
|
+
.ctx-info-subtlest {
|
|
115
|
+
@apply ctx-info;
|
|
116
|
+
}
|
|
117
|
+
.ctx-info-bolder {
|
|
118
|
+
@apply ctx-info-bolder;
|
|
119
|
+
}
|
|
120
|
+
.ctx-magenta-bolder {
|
|
121
|
+
@apply ctx-magenta-bolder;
|
|
122
|
+
}
|
|
123
|
+
.ctx-magenta-subtle {
|
|
124
|
+
@apply ctx-magenta-subtle;
|
|
125
|
+
}
|
|
126
|
+
.ctx-magenta-subtler {
|
|
127
|
+
@apply ctx-magenta-subtler;
|
|
128
|
+
}
|
|
129
|
+
.ctx-magenta-subtlest {
|
|
130
|
+
@apply ctx-magenta-subtlest;
|
|
131
|
+
}
|
|
132
|
+
.ctx-neutral-boldest {
|
|
133
|
+
@apply ctx-neutral-boldest;
|
|
134
|
+
}
|
|
135
|
+
.ctx-neutral-bolder {
|
|
136
|
+
@apply ctx-neutral-bolder;
|
|
137
|
+
}
|
|
138
|
+
.ctx-neutral-bold {
|
|
139
|
+
@apply ctx-neutral-bold;
|
|
140
|
+
}
|
|
141
|
+
.ctx-neutral-subtle {
|
|
142
|
+
@apply ctx-neutral-subtle;
|
|
143
|
+
}
|
|
144
|
+
.ctx-neutral-subtler {
|
|
145
|
+
@apply ctx-neutral-subtler;
|
|
146
|
+
}
|
|
147
|
+
.ctx-neutral-subtlest {
|
|
148
|
+
@apply ctx-neutral-subtlest;
|
|
149
|
+
}
|
|
150
|
+
.ctx-orange-bolder {
|
|
151
|
+
@apply ctx-orange-bolder;
|
|
152
|
+
}
|
|
153
|
+
.ctx-orange-subtle {
|
|
154
|
+
@apply ctx-orange-subtle;
|
|
155
|
+
}
|
|
156
|
+
.ctx-orange-subtler {
|
|
157
|
+
@apply ctx-orange-subtler;
|
|
158
|
+
}
|
|
159
|
+
.ctx-orange-subtlest {
|
|
160
|
+
@apply ctx-orange-subtlest;
|
|
161
|
+
}
|
|
162
|
+
.ctx-purple-bolder {
|
|
163
|
+
@apply ctx-purple-bolder;
|
|
164
|
+
}
|
|
165
|
+
.ctx-purple-subtle {
|
|
166
|
+
@apply ctx-purple-subtle;
|
|
167
|
+
}
|
|
168
|
+
.ctx-purple-subtler {
|
|
169
|
+
@apply ctx-purple-subtler;
|
|
170
|
+
}
|
|
171
|
+
.ctx-purple-subtlest {
|
|
172
|
+
@apply ctx-purple-subtlest;
|
|
173
|
+
}
|
|
174
|
+
.ctx-red-bolder {
|
|
175
|
+
@apply ctx-red-bolder;
|
|
176
|
+
}
|
|
177
|
+
.ctx-red-subtle {
|
|
178
|
+
@apply ctx-red-subtle;
|
|
179
|
+
}
|
|
180
|
+
.ctx-red-subtler {
|
|
181
|
+
@apply ctx-red-subtler;
|
|
182
|
+
}
|
|
183
|
+
.ctx-red-subtlest {
|
|
184
|
+
@apply ctx-red-subtlest;
|
|
185
|
+
}
|
|
186
|
+
.ctx-success-subtlest {
|
|
187
|
+
@apply ctx-success;
|
|
188
|
+
}
|
|
189
|
+
.ctx-success-bolder {
|
|
190
|
+
@apply ctx-success-bolder;
|
|
191
|
+
}
|
|
192
|
+
.ctx-teal-bolder {
|
|
193
|
+
@apply ctx-teal-bolder;
|
|
194
|
+
}
|
|
195
|
+
.ctx-teal-subtle {
|
|
196
|
+
@apply ctx-teal-subtle;
|
|
197
|
+
}
|
|
198
|
+
.ctx-teal-subtler {
|
|
199
|
+
@apply ctx-teal-subtler;
|
|
200
|
+
}
|
|
201
|
+
.ctx-teal-subtlest {
|
|
202
|
+
@apply ctx-teal-subtlest;
|
|
203
|
+
}
|
|
204
|
+
.ctx-warning-subtlest {
|
|
205
|
+
@apply ctx-warning;
|
|
206
|
+
}
|
|
207
|
+
.ctx-warning-bolder {
|
|
208
|
+
@apply ctx-warning-bolder;
|
|
209
|
+
}
|
|
210
|
+
.ctx-yellow-bolder {
|
|
211
|
+
@apply ctx-yellow-bolder;
|
|
212
|
+
}
|
|
213
|
+
.ctx-yellow-subtle {
|
|
214
|
+
@apply ctx-yellow-subtle;
|
|
215
|
+
}
|
|
216
|
+
.ctx-yellow-subtler {
|
|
217
|
+
@apply ctx-yellow-subtler;
|
|
218
|
+
}
|
|
219
|
+
.ctx-yellow-subtlest {
|
|
220
|
+
@apply ctx-yellow-subtlest;
|
|
221
|
+
}
|
|
12
222
|
|
|
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
223
|
|
|
98
224
|
|
|
99
225
|
/* === ./styles/semantic.css === */
|
|
@@ -677,15 +803,11 @@
|
|
|
677
803
|
--ctx-background: var(--color-default-neutral-0);
|
|
678
804
|
--ctx-gradient: var(--color-default-neutral-100);
|
|
679
805
|
--ctx-border: var(--color-default-neutral-300);
|
|
806
|
+
--ctx-border-bold: var(--color-default-neutral-800);
|
|
680
807
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
681
808
|
--ctx-text-hover: var(--color-default-neutral-1000);
|
|
682
|
-
--ctx-text-pressed: var(--color-default-neutral-1000);
|
|
683
809
|
--ctx-background-hover: var(--color-default-neutral-100);
|
|
684
|
-
--ctx-background-pressed: var(--color-default-neutral-200);
|
|
685
|
-
--ctx-gradient-hover: var(--color-default-neutral-200);
|
|
686
|
-
--ctx-gradient-pressed: var(--color-default-neutral-200);
|
|
687
810
|
--ctx-border-hover: var(--color-default-neutral-300);
|
|
688
|
-
--ctx-border-pressed: var(--color-default-neutral-300);
|
|
689
811
|
}
|
|
690
812
|
|
|
691
813
|
@utility ctx-blue-bolder {
|
|
@@ -693,16 +815,12 @@
|
|
|
693
815
|
--ctx-text-bold: var(--color-default-blue-100);
|
|
694
816
|
--ctx-background: var(--color-default-blue-700);
|
|
695
817
|
--ctx-gradient: var(--color-default-blue-800);
|
|
696
|
-
--ctx-border: var(--color-default-blue-
|
|
818
|
+
--ctx-border: var(--color-default-blue-800);
|
|
819
|
+
--ctx-border-bold: var(--color-default-blue-600);
|
|
697
820
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
698
821
|
--ctx-text-hover: var(--color-default-blue-200);
|
|
699
|
-
--ctx-text-pressed: var(--color-default-blue-200);
|
|
700
822
|
--ctx-background-hover: var(--color-default-blue-800);
|
|
701
|
-
--ctx-
|
|
702
|
-
--ctx-gradient-hover: var(--color-default-blue-900);
|
|
703
|
-
--ctx-gradient-pressed: var(--color-default-blue-900);
|
|
704
|
-
--ctx-border-hover: var(--color-default-blue-700);
|
|
705
|
-
--ctx-border-pressed: var(--color-default-blue-700);
|
|
823
|
+
--ctx-border-hover: var(--color-default-blue-800);
|
|
706
824
|
}
|
|
707
825
|
|
|
708
826
|
@utility ctx-blue-subtle {
|
|
@@ -711,15 +829,11 @@
|
|
|
711
829
|
--ctx-background: var(--color-default-blue-400);
|
|
712
830
|
--ctx-gradient: var(--color-default-blue-300);
|
|
713
831
|
--ctx-border: var(--color-default-blue-500);
|
|
832
|
+
--ctx-border-bold: var(--color-default-blue-700);
|
|
714
833
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
715
834
|
--ctx-text-hover: var(--color-default-blue-900);
|
|
716
|
-
--ctx-text-pressed: var(--color-default-blue-900);
|
|
717
835
|
--ctx-background-hover: var(--color-default-blue-300);
|
|
718
|
-
--ctx-background-pressed: var(--color-default-blue-200);
|
|
719
|
-
--ctx-gradient-hover: var(--color-default-blue-200);
|
|
720
|
-
--ctx-gradient-pressed: var(--color-default-blue-200);
|
|
721
836
|
--ctx-border-hover: var(--color-default-blue-500);
|
|
722
|
-
--ctx-border-pressed: var(--color-default-blue-500);
|
|
723
837
|
}
|
|
724
838
|
|
|
725
839
|
@utility ctx-blue-subtler {
|
|
@@ -727,16 +841,12 @@
|
|
|
727
841
|
--ctx-text-bold: var(--color-default-blue-900);
|
|
728
842
|
--ctx-background: var(--color-default-blue-200);
|
|
729
843
|
--ctx-gradient: var(--color-default-blue-300);
|
|
730
|
-
--ctx-border: var(--color-default-blue-
|
|
844
|
+
--ctx-border: var(--color-default-blue-300);
|
|
845
|
+
--ctx-border-bold: var(--color-default-blue-500);
|
|
731
846
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
732
847
|
--ctx-text-hover: var(--color-default-blue-800);
|
|
733
|
-
--ctx-text-pressed: var(--color-default-blue-800);
|
|
734
848
|
--ctx-background-hover: var(--color-default-blue-300);
|
|
735
|
-
--ctx-
|
|
736
|
-
--ctx-gradient-hover: var(--color-default-blue-400);
|
|
737
|
-
--ctx-gradient-pressed: var(--color-default-blue-400);
|
|
738
|
-
--ctx-border-hover: var(--color-default-blue-400);
|
|
739
|
-
--ctx-border-pressed: var(--color-default-blue-400);
|
|
849
|
+
--ctx-border-hover: var(--color-default-blue-300);
|
|
740
850
|
}
|
|
741
851
|
|
|
742
852
|
@utility ctx-blue-subtlest {
|
|
@@ -744,16 +854,12 @@
|
|
|
744
854
|
--ctx-text-bold: var(--color-default-blue-900);
|
|
745
855
|
--ctx-background: var(--color-default-blue-100);
|
|
746
856
|
--ctx-gradient: var(--color-default-blue-200);
|
|
747
|
-
--ctx-border: var(--color-default-blue-
|
|
857
|
+
--ctx-border: var(--color-default-blue-200);
|
|
858
|
+
--ctx-border-bold: var(--color-default-blue-400);
|
|
748
859
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
749
860
|
--ctx-text-hover: var(--color-default-blue-800);
|
|
750
|
-
--ctx-text-pressed: var(--color-default-blue-800);
|
|
751
861
|
--ctx-background-hover: var(--color-default-blue-200);
|
|
752
|
-
--ctx-
|
|
753
|
-
--ctx-gradient-hover: var(--color-default-blue-300);
|
|
754
|
-
--ctx-gradient-pressed: var(--color-default-blue-300);
|
|
755
|
-
--ctx-border-hover: var(--color-default-blue-300);
|
|
756
|
-
--ctx-border-pressed: var(--color-default-blue-300);
|
|
862
|
+
--ctx-border-hover: var(--color-default-blue-200);
|
|
757
863
|
}
|
|
758
864
|
|
|
759
865
|
@utility ctx-brand-bold {
|
|
@@ -761,16 +867,12 @@
|
|
|
761
867
|
--ctx-text-bold: var(--color-default-neutral-100);
|
|
762
868
|
--ctx-background: var(--color-default-bcc-600);
|
|
763
869
|
--ctx-gradient: var(--color-default-bcc-700);
|
|
764
|
-
--ctx-border: var(--color-default-bcc-
|
|
870
|
+
--ctx-border: var(--color-default-bcc-700);
|
|
871
|
+
--ctx-border-bold: var(--color-default-bcc-500);
|
|
765
872
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
766
873
|
--ctx-text-hover: var(--color-default-bcc-200);
|
|
767
|
-
--ctx-text-pressed: var(--color-default-bcc-200);
|
|
768
874
|
--ctx-background-hover: var(--color-default-bcc-700);
|
|
769
|
-
--ctx-
|
|
770
|
-
--ctx-gradient-hover: var(--color-default-bcc-800);
|
|
771
|
-
--ctx-gradient-pressed: var(--color-default-bcc-800);
|
|
772
|
-
--ctx-border-hover: var(--color-default-bcc-600);
|
|
773
|
-
--ctx-border-pressed: var(--color-default-bcc-600);
|
|
875
|
+
--ctx-border-hover: var(--color-default-bcc-700);
|
|
774
876
|
}
|
|
775
877
|
|
|
776
878
|
@utility ctx-brand-bolder {
|
|
@@ -778,16 +880,12 @@
|
|
|
778
880
|
--ctx-text-bold: var(--color-default-neutral-0);
|
|
779
881
|
--ctx-background: var(--color-default-bcc-800);
|
|
780
882
|
--ctx-gradient: var(--color-default-bcc-900);
|
|
781
|
-
--ctx-border: var(--color-default-bcc-
|
|
883
|
+
--ctx-border: var(--color-default-bcc-900);
|
|
884
|
+
--ctx-border-bold: var(--color-default-bcc-700);
|
|
782
885
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
783
886
|
--ctx-text-hover: var(--color-default-neutral-0);
|
|
784
|
-
--ctx-text-pressed: var(--color-default-neutral-0);
|
|
785
887
|
--ctx-background-hover: var(--color-default-bcc-900);
|
|
786
|
-
--ctx-
|
|
787
|
-
--ctx-gradient-hover: var(--color-default-bcc-1000);
|
|
788
|
-
--ctx-gradient-pressed: var(--color-default-bcc-1000);
|
|
789
|
-
--ctx-border-hover: var(--color-default-bcc-700);
|
|
790
|
-
--ctx-border-pressed: var(--color-default-bcc-700);
|
|
888
|
+
--ctx-border-hover: var(--color-default-bcc-900);
|
|
791
889
|
}
|
|
792
890
|
|
|
793
891
|
@utility ctx-brand-boldest {
|
|
@@ -796,15 +894,11 @@
|
|
|
796
894
|
--ctx-background: var(--color-default-bcc-1000);
|
|
797
895
|
--ctx-gradient: var(--color-default-bcc-900);
|
|
798
896
|
--ctx-border: var(--color-default-bcc-800);
|
|
897
|
+
--ctx-border-bold: var(--color-default-bcc-600);
|
|
799
898
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
800
899
|
--ctx-text-hover: var(--color-default-neutral-0);
|
|
801
|
-
--ctx-text-pressed: var(--color-default-neutral-0);
|
|
802
900
|
--ctx-background-hover: var(--color-default-bcc-900);
|
|
803
|
-
--ctx-background-pressed: var(--color-default-bcc-800);
|
|
804
|
-
--ctx-gradient-hover: var(--color-default-bcc-800);
|
|
805
|
-
--ctx-gradient-pressed: var(--color-default-bcc-800);
|
|
806
901
|
--ctx-border-hover: var(--color-default-bcc-800);
|
|
807
|
-
--ctx-border-pressed: var(--color-default-bcc-800);
|
|
808
902
|
}
|
|
809
903
|
|
|
810
904
|
@utility ctx-brand-default {
|
|
@@ -813,15 +907,11 @@
|
|
|
813
907
|
--ctx-background: var(--color-default-neutral-0);
|
|
814
908
|
--ctx-gradient: var(--color-default-neutral-0);
|
|
815
909
|
--ctx-border: var(--color-default-neutral-700);
|
|
910
|
+
--ctx-border-bold: var(--color-default-neutral-800);
|
|
816
911
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
817
912
|
--ctx-text-hover: var(--color-default-neutral-1000);
|
|
818
|
-
--ctx-text-pressed: var(--color-default-neutral-1000);
|
|
819
913
|
--ctx-background-hover: var(--color-default-neutral-0);
|
|
820
|
-
--ctx-background-pressed: var(--color-default-neutral-0);
|
|
821
|
-
--ctx-gradient-hover: var(--color-default-neutral-0);
|
|
822
|
-
--ctx-gradient-pressed: var(--color-default-neutral-0);
|
|
823
914
|
--ctx-border-hover: var(--color-default-neutral-700);
|
|
824
|
-
--ctx-border-pressed: var(--color-default-neutral-700);
|
|
825
915
|
}
|
|
826
916
|
|
|
827
917
|
@utility ctx-brand-subtle {
|
|
@@ -830,15 +920,11 @@
|
|
|
830
920
|
--ctx-background: var(--color-default-bcc-400);
|
|
831
921
|
--ctx-gradient: var(--color-default-bcc-300);
|
|
832
922
|
--ctx-border: var(--color-default-bcc-500);
|
|
923
|
+
--ctx-border-bold: var(--color-default-bcc-700);
|
|
833
924
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
834
925
|
--ctx-text-hover: var(--color-default-bcc-1000);
|
|
835
|
-
--ctx-text-pressed: var(--color-default-bcc-1000);
|
|
836
926
|
--ctx-background-hover: var(--color-default-bcc-300);
|
|
837
|
-
--ctx-background-pressed: var(--color-default-bcc-200);
|
|
838
|
-
--ctx-gradient-hover: var(--color-default-bcc-200);
|
|
839
|
-
--ctx-gradient-pressed: var(--color-default-bcc-200);
|
|
840
927
|
--ctx-border-hover: var(--color-default-bcc-500);
|
|
841
|
-
--ctx-border-pressed: var(--color-default-bcc-500);
|
|
842
928
|
}
|
|
843
929
|
|
|
844
930
|
@utility ctx-brand-subtler {
|
|
@@ -846,16 +932,12 @@
|
|
|
846
932
|
--ctx-text-bold: var(--color-default-bcc-800);
|
|
847
933
|
--ctx-background: var(--color-default-bcc-200);
|
|
848
934
|
--ctx-gradient: var(--color-default-bcc-300);
|
|
849
|
-
--ctx-border: var(--color-default-bcc-
|
|
935
|
+
--ctx-border: var(--color-default-bcc-300);
|
|
936
|
+
--ctx-border-bold: var(--color-default-bcc-500);
|
|
850
937
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
851
938
|
--ctx-text-hover: var(--color-default-bcc-900);
|
|
852
|
-
--ctx-text-pressed: var(--color-default-bcc-900);
|
|
853
939
|
--ctx-background-hover: var(--color-default-bcc-300);
|
|
854
|
-
--ctx-
|
|
855
|
-
--ctx-gradient-hover: var(--color-default-bcc-400);
|
|
856
|
-
--ctx-gradient-pressed: var(--color-default-bcc-400);
|
|
857
|
-
--ctx-border-hover: var(--color-default-bcc-400);
|
|
858
|
-
--ctx-border-pressed: var(--color-default-bcc-400);
|
|
940
|
+
--ctx-border-hover: var(--color-default-bcc-300);
|
|
859
941
|
}
|
|
860
942
|
|
|
861
943
|
@utility ctx-brand-subtlest {
|
|
@@ -863,16 +945,12 @@
|
|
|
863
945
|
--ctx-text-bold: var(--color-default-bcc-700);
|
|
864
946
|
--ctx-background: var(--color-default-bcc-100);
|
|
865
947
|
--ctx-gradient: var(--color-default-bcc-200);
|
|
866
|
-
--ctx-border: var(--color-default-bcc-
|
|
948
|
+
--ctx-border: var(--color-default-bcc-200);
|
|
949
|
+
--ctx-border-bold: var(--color-default-bcc-400);
|
|
867
950
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
868
951
|
--ctx-text-hover: var(--color-default-bcc-800);
|
|
869
|
-
--ctx-text-pressed: var(--color-default-bcc-800);
|
|
870
952
|
--ctx-background-hover: var(--color-default-bcc-200);
|
|
871
|
-
--ctx-
|
|
872
|
-
--ctx-gradient-hover: var(--color-default-bcc-300);
|
|
873
|
-
--ctx-gradient-pressed: var(--color-default-bcc-300);
|
|
874
|
-
--ctx-border-hover: var(--color-default-bcc-300);
|
|
875
|
-
--ctx-border-pressed: var(--color-default-bcc-300);
|
|
953
|
+
--ctx-border-hover: var(--color-default-bcc-200);
|
|
876
954
|
}
|
|
877
955
|
|
|
878
956
|
@utility ctx-brown-bolder {
|
|
@@ -880,16 +958,12 @@
|
|
|
880
958
|
--ctx-text-bold: var(--color-default-brown-100);
|
|
881
959
|
--ctx-background: var(--color-default-brown-700);
|
|
882
960
|
--ctx-gradient: var(--color-default-brown-800);
|
|
883
|
-
--ctx-border: var(--color-default-brown-
|
|
961
|
+
--ctx-border: var(--color-default-brown-800);
|
|
962
|
+
--ctx-border-bold: var(--color-default-brown-600);
|
|
884
963
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
885
964
|
--ctx-text-hover: var(--color-default-brown-200);
|
|
886
|
-
--ctx-text-pressed: var(--color-default-brown-200);
|
|
887
965
|
--ctx-background-hover: var(--color-default-brown-800);
|
|
888
|
-
--ctx-
|
|
889
|
-
--ctx-gradient-hover: var(--color-default-brown-900);
|
|
890
|
-
--ctx-gradient-pressed: var(--color-default-brown-900);
|
|
891
|
-
--ctx-border-hover: var(--color-default-brown-700);
|
|
892
|
-
--ctx-border-pressed: var(--color-default-brown-700);
|
|
966
|
+
--ctx-border-hover: var(--color-default-brown-800);
|
|
893
967
|
}
|
|
894
968
|
|
|
895
969
|
@utility ctx-brown-subtle {
|
|
@@ -898,15 +972,11 @@
|
|
|
898
972
|
--ctx-background: var(--color-default-brown-400);
|
|
899
973
|
--ctx-gradient: var(--color-default-brown-300);
|
|
900
974
|
--ctx-border: var(--color-default-brown-500);
|
|
975
|
+
--ctx-border-bold: var(--color-default-brown-700);
|
|
901
976
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
902
977
|
--ctx-text-hover: var(--color-default-brown-900);
|
|
903
|
-
--ctx-text-pressed: var(--color-default-brown-900);
|
|
904
978
|
--ctx-background-hover: var(--color-default-brown-300);
|
|
905
|
-
--ctx-background-pressed: var(--color-default-brown-200);
|
|
906
|
-
--ctx-gradient-hover: var(--color-default-brown-200);
|
|
907
|
-
--ctx-gradient-pressed: var(--color-default-brown-200);
|
|
908
979
|
--ctx-border-hover: var(--color-default-brown-500);
|
|
909
|
-
--ctx-border-pressed: var(--color-default-brown-500);
|
|
910
980
|
}
|
|
911
981
|
|
|
912
982
|
@utility ctx-brown-subtler {
|
|
@@ -914,16 +984,12 @@
|
|
|
914
984
|
--ctx-text-bold: var(--color-default-brown-900);
|
|
915
985
|
--ctx-background: var(--color-default-brown-200);
|
|
916
986
|
--ctx-gradient: var(--color-default-brown-300);
|
|
917
|
-
--ctx-border: var(--color-default-brown-
|
|
987
|
+
--ctx-border: var(--color-default-brown-300);
|
|
988
|
+
--ctx-border-bold: var(--color-default-brown-500);
|
|
918
989
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
919
990
|
--ctx-text-hover: var(--color-default-brown-800);
|
|
920
|
-
--ctx-text-pressed: var(--color-default-brown-800);
|
|
921
991
|
--ctx-background-hover: var(--color-default-brown-300);
|
|
922
|
-
--ctx-
|
|
923
|
-
--ctx-gradient-hover: var(--color-default-brown-400);
|
|
924
|
-
--ctx-gradient-pressed: var(--color-default-brown-400);
|
|
925
|
-
--ctx-border-hover: var(--color-default-brown-400);
|
|
926
|
-
--ctx-border-pressed: var(--color-default-brown-400);
|
|
992
|
+
--ctx-border-hover: var(--color-default-brown-300);
|
|
927
993
|
}
|
|
928
994
|
|
|
929
995
|
@utility ctx-brown-subtlest {
|
|
@@ -931,16 +997,12 @@
|
|
|
931
997
|
--ctx-text-bold: var(--color-default-brown-900);
|
|
932
998
|
--ctx-background: var(--color-default-brown-100);
|
|
933
999
|
--ctx-gradient: var(--color-default-brown-200);
|
|
934
|
-
--ctx-border: var(--color-default-brown-
|
|
1000
|
+
--ctx-border: var(--color-default-brown-200);
|
|
1001
|
+
--ctx-border-bold: var(--color-default-brown-400);
|
|
935
1002
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
936
1003
|
--ctx-text-hover: var(--color-default-brown-800);
|
|
937
|
-
--ctx-text-pressed: var(--color-default-brown-800);
|
|
938
1004
|
--ctx-background-hover: var(--color-default-brown-200);
|
|
939
|
-
--ctx-
|
|
940
|
-
--ctx-gradient-hover: var(--color-default-brown-300);
|
|
941
|
-
--ctx-gradient-pressed: var(--color-default-brown-300);
|
|
942
|
-
--ctx-border-hover: var(--color-default-brown-300);
|
|
943
|
-
--ctx-border-pressed: var(--color-default-brown-300);
|
|
1005
|
+
--ctx-border-hover: var(--color-default-brown-200);
|
|
944
1006
|
}
|
|
945
1007
|
|
|
946
1008
|
@utility ctx-danger-bolder {
|
|
@@ -949,15 +1011,11 @@
|
|
|
949
1011
|
--ctx-background: var(--color-default-red-700);
|
|
950
1012
|
--ctx-gradient: var(--color-default-red-800);
|
|
951
1013
|
--ctx-border: var(--color-default-red-700);
|
|
1014
|
+
--ctx-border-bold: var(--color-default-red-400);
|
|
952
1015
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
953
1016
|
--ctx-text-hover: var(--color-default-red-200);
|
|
954
|
-
--ctx-text-pressed: var(--color-default-red-200);
|
|
955
1017
|
--ctx-background-hover: var(--color-default-red-800);
|
|
956
|
-
--ctx-background-pressed: var(--color-default-red-900);
|
|
957
|
-
--ctx-gradient-hover: var(--color-default-red-900);
|
|
958
|
-
--ctx-gradient-pressed: var(--color-default-red-900);
|
|
959
1018
|
--ctx-border-hover: var(--color-default-red-700);
|
|
960
|
-
--ctx-border-pressed: var(--color-default-red-700);
|
|
961
1019
|
}
|
|
962
1020
|
|
|
963
1021
|
@utility ctx-danger-subtlest {
|
|
@@ -966,15 +1024,11 @@
|
|
|
966
1024
|
--ctx-background: var(--color-default-red-100);
|
|
967
1025
|
--ctx-gradient: var(--color-default-red-200);
|
|
968
1026
|
--ctx-border: var(--color-default-red-300);
|
|
1027
|
+
--ctx-border-bold: var(--color-default-red-800);
|
|
969
1028
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
970
1029
|
--ctx-text-hover: var(--color-default-red-800);
|
|
971
|
-
--ctx-text-pressed: var(--color-default-red-800);
|
|
972
1030
|
--ctx-background-hover: var(--color-default-red-200);
|
|
973
|
-
--ctx-background-pressed: var(--color-default-red-300);
|
|
974
|
-
--ctx-gradient-hover: var(--color-default-red-300);
|
|
975
|
-
--ctx-gradient-pressed: var(--color-default-red-300);
|
|
976
1031
|
--ctx-border-hover: var(--color-default-red-300);
|
|
977
|
-
--ctx-border-pressed: var(--color-default-red-300);
|
|
978
1032
|
}
|
|
979
1033
|
|
|
980
1034
|
@utility ctx-gray-bolder {
|
|
@@ -982,16 +1036,12 @@
|
|
|
982
1036
|
--ctx-text-bold: var(--color-default-neutral-100);
|
|
983
1037
|
--ctx-background: var(--color-default-neutral-700);
|
|
984
1038
|
--ctx-gradient: var(--color-default-neutral-800);
|
|
985
|
-
--ctx-border: var(--color-default-neutral-
|
|
1039
|
+
--ctx-border: var(--color-default-neutral-800);
|
|
1040
|
+
--ctx-border-bold: var(--color-default-neutral-600);
|
|
986
1041
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
987
1042
|
--ctx-text-hover: var(--color-default-neutral-200);
|
|
988
|
-
--ctx-text-pressed: var(--color-default-neutral-200);
|
|
989
1043
|
--ctx-background-hover: var(--color-default-neutral-800);
|
|
990
|
-
--ctx-
|
|
991
|
-
--ctx-gradient-hover: var(--color-default-neutral-900);
|
|
992
|
-
--ctx-gradient-pressed: var(--color-default-neutral-900);
|
|
993
|
-
--ctx-border-hover: var(--color-default-neutral-700);
|
|
994
|
-
--ctx-border-pressed: var(--color-default-neutral-700);
|
|
1044
|
+
--ctx-border-hover: var(--color-default-neutral-800);
|
|
995
1045
|
}
|
|
996
1046
|
|
|
997
1047
|
@utility ctx-gray-subtle {
|
|
@@ -1000,15 +1050,11 @@
|
|
|
1000
1050
|
--ctx-background: var(--color-default-neutral-400);
|
|
1001
1051
|
--ctx-gradient: var(--color-default-neutral-300);
|
|
1002
1052
|
--ctx-border: var(--color-default-neutral-500);
|
|
1053
|
+
--ctx-border-bold: var(--color-default-neutral-700);
|
|
1003
1054
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1004
1055
|
--ctx-text-hover: var(--color-default-neutral-900);
|
|
1005
|
-
--ctx-text-pressed: var(--color-default-neutral-900);
|
|
1006
1056
|
--ctx-background-hover: var(--color-default-neutral-300);
|
|
1007
|
-
--ctx-background-pressed: var(--color-default-neutral-200);
|
|
1008
|
-
--ctx-gradient-hover: var(--color-default-neutral-200);
|
|
1009
|
-
--ctx-gradient-pressed: var(--color-default-neutral-200);
|
|
1010
1057
|
--ctx-border-hover: var(--color-default-neutral-500);
|
|
1011
|
-
--ctx-border-pressed: var(--color-default-neutral-500);
|
|
1012
1058
|
}
|
|
1013
1059
|
|
|
1014
1060
|
@utility ctx-gray-subtler {
|
|
@@ -1016,16 +1062,12 @@
|
|
|
1016
1062
|
--ctx-text-bold: var(--color-default-neutral-900);
|
|
1017
1063
|
--ctx-background: var(--color-default-neutral-200);
|
|
1018
1064
|
--ctx-gradient: var(--color-default-neutral-300);
|
|
1019
|
-
--ctx-border: var(--color-default-neutral-
|
|
1065
|
+
--ctx-border: var(--color-default-neutral-300);
|
|
1066
|
+
--ctx-border-bold: var(--color-default-neutral-500);
|
|
1020
1067
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1021
1068
|
--ctx-text-hover: var(--color-default-neutral-800);
|
|
1022
|
-
--ctx-text-pressed: var(--color-default-neutral-800);
|
|
1023
1069
|
--ctx-background-hover: var(--color-default-neutral-300);
|
|
1024
|
-
--ctx-
|
|
1025
|
-
--ctx-gradient-hover: var(--color-default-neutral-400);
|
|
1026
|
-
--ctx-gradient-pressed: var(--color-default-neutral-400);
|
|
1027
|
-
--ctx-border-hover: var(--color-default-neutral-400);
|
|
1028
|
-
--ctx-border-pressed: var(--color-default-neutral-400);
|
|
1070
|
+
--ctx-border-hover: var(--color-default-neutral-300);
|
|
1029
1071
|
}
|
|
1030
1072
|
|
|
1031
1073
|
@utility ctx-gray-subtlest {
|
|
@@ -1033,16 +1075,12 @@
|
|
|
1033
1075
|
--ctx-text-bold: var(--color-default-neutral-900);
|
|
1034
1076
|
--ctx-background: var(--color-default-neutral-100);
|
|
1035
1077
|
--ctx-gradient: var(--color-default-neutral-200);
|
|
1036
|
-
--ctx-border: var(--color-default-neutral-
|
|
1078
|
+
--ctx-border: var(--color-default-neutral-200);
|
|
1079
|
+
--ctx-border-bold: var(--color-default-neutral-400);
|
|
1037
1080
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1038
1081
|
--ctx-text-hover: var(--color-default-neutral-800);
|
|
1039
|
-
--ctx-text-pressed: var(--color-default-neutral-800);
|
|
1040
1082
|
--ctx-background-hover: var(--color-default-neutral-200);
|
|
1041
|
-
--ctx-
|
|
1042
|
-
--ctx-gradient-hover: var(--color-default-neutral-300);
|
|
1043
|
-
--ctx-gradient-pressed: var(--color-default-neutral-300);
|
|
1044
|
-
--ctx-border-hover: var(--color-default-neutral-300);
|
|
1045
|
-
--ctx-border-pressed: var(--color-default-neutral-300);
|
|
1083
|
+
--ctx-border-hover: var(--color-default-neutral-200);
|
|
1046
1084
|
}
|
|
1047
1085
|
|
|
1048
1086
|
@utility ctx-green-bolder {
|
|
@@ -1050,16 +1088,12 @@
|
|
|
1050
1088
|
--ctx-text-bold: var(--color-default-green-100);
|
|
1051
1089
|
--ctx-background: var(--color-default-green-700);
|
|
1052
1090
|
--ctx-gradient: var(--color-default-green-800);
|
|
1053
|
-
--ctx-border: var(--color-default-green-
|
|
1091
|
+
--ctx-border: var(--color-default-green-800);
|
|
1092
|
+
--ctx-border-bold: var(--color-default-green-600);
|
|
1054
1093
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1055
1094
|
--ctx-text-hover: var(--color-default-green-200);
|
|
1056
|
-
--ctx-text-pressed: var(--color-default-green-200);
|
|
1057
1095
|
--ctx-background-hover: var(--color-default-green-800);
|
|
1058
|
-
--ctx-
|
|
1059
|
-
--ctx-gradient-hover: var(--color-default-green-900);
|
|
1060
|
-
--ctx-gradient-pressed: var(--color-default-green-900);
|
|
1061
|
-
--ctx-border-hover: var(--color-default-green-700);
|
|
1062
|
-
--ctx-border-pressed: var(--color-default-green-700);
|
|
1096
|
+
--ctx-border-hover: var(--color-default-green-800);
|
|
1063
1097
|
}
|
|
1064
1098
|
|
|
1065
1099
|
@utility ctx-green-subtle {
|
|
@@ -1068,15 +1102,11 @@
|
|
|
1068
1102
|
--ctx-background: var(--color-default-green-400);
|
|
1069
1103
|
--ctx-gradient: var(--color-default-green-300);
|
|
1070
1104
|
--ctx-border: var(--color-default-green-500);
|
|
1105
|
+
--ctx-border-bold: var(--color-default-green-700);
|
|
1071
1106
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1072
1107
|
--ctx-text-hover: var(--color-default-green-900);
|
|
1073
|
-
--ctx-text-pressed: var(--color-default-green-900);
|
|
1074
1108
|
--ctx-background-hover: var(--color-default-green-300);
|
|
1075
|
-
--ctx-background-pressed: var(--color-default-green-200);
|
|
1076
|
-
--ctx-gradient-hover: var(--color-default-green-200);
|
|
1077
|
-
--ctx-gradient-pressed: var(--color-default-green-200);
|
|
1078
1109
|
--ctx-border-hover: var(--color-default-green-500);
|
|
1079
|
-
--ctx-border-pressed: var(--color-default-green-500);
|
|
1080
1110
|
}
|
|
1081
1111
|
|
|
1082
1112
|
@utility ctx-green-subtler {
|
|
@@ -1084,16 +1114,12 @@
|
|
|
1084
1114
|
--ctx-text-bold: var(--color-default-green-900);
|
|
1085
1115
|
--ctx-background: var(--color-default-green-200);
|
|
1086
1116
|
--ctx-gradient: var(--color-default-green-300);
|
|
1087
|
-
--ctx-border: var(--color-default-green-
|
|
1117
|
+
--ctx-border: var(--color-default-green-300);
|
|
1118
|
+
--ctx-border-bold: var(--color-default-green-500);
|
|
1088
1119
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1089
1120
|
--ctx-text-hover: var(--color-default-green-800);
|
|
1090
|
-
--ctx-text-pressed: var(--color-default-green-800);
|
|
1091
1121
|
--ctx-background-hover: var(--color-default-green-300);
|
|
1092
|
-
--ctx-
|
|
1093
|
-
--ctx-gradient-hover: var(--color-default-green-400);
|
|
1094
|
-
--ctx-gradient-pressed: var(--color-default-green-400);
|
|
1095
|
-
--ctx-border-hover: var(--color-default-green-400);
|
|
1096
|
-
--ctx-border-pressed: var(--color-default-green-400);
|
|
1122
|
+
--ctx-border-hover: var(--color-default-green-300);
|
|
1097
1123
|
}
|
|
1098
1124
|
|
|
1099
1125
|
@utility ctx-green-subtlest {
|
|
@@ -1101,16 +1127,12 @@
|
|
|
1101
1127
|
--ctx-text-bold: var(--color-default-green-900);
|
|
1102
1128
|
--ctx-background: var(--color-default-green-100);
|
|
1103
1129
|
--ctx-gradient: var(--color-default-green-200);
|
|
1104
|
-
--ctx-border: var(--color-default-green-
|
|
1130
|
+
--ctx-border: var(--color-default-green-200);
|
|
1131
|
+
--ctx-border-bold: var(--color-default-green-400);
|
|
1105
1132
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1106
1133
|
--ctx-text-hover: var(--color-default-green-800);
|
|
1107
|
-
--ctx-text-pressed: var(--color-default-green-800);
|
|
1108
1134
|
--ctx-background-hover: var(--color-default-green-200);
|
|
1109
|
-
--ctx-
|
|
1110
|
-
--ctx-gradient-hover: var(--color-default-green-300);
|
|
1111
|
-
--ctx-gradient-pressed: var(--color-default-green-300);
|
|
1112
|
-
--ctx-border-hover: var(--color-default-green-300);
|
|
1113
|
-
--ctx-border-pressed: var(--color-default-green-300);
|
|
1135
|
+
--ctx-border-hover: var(--color-default-green-200);
|
|
1114
1136
|
}
|
|
1115
1137
|
|
|
1116
1138
|
@utility ctx-info-bolder {
|
|
@@ -1119,15 +1141,11 @@
|
|
|
1119
1141
|
--ctx-background: var(--color-default-blue-700);
|
|
1120
1142
|
--ctx-gradient: var(--color-default-blue-800);
|
|
1121
1143
|
--ctx-border: var(--color-default-blue-700);
|
|
1144
|
+
--ctx-border-bold: var(--color-default-blue-400);
|
|
1122
1145
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1123
1146
|
--ctx-text-hover: var(--color-default-blue-200);
|
|
1124
|
-
--ctx-text-pressed: var(--color-default-blue-200);
|
|
1125
1147
|
--ctx-background-hover: var(--color-default-blue-800);
|
|
1126
|
-
--ctx-background-pressed: var(--color-default-blue-900);
|
|
1127
|
-
--ctx-gradient-hover: var(--color-default-blue-900);
|
|
1128
|
-
--ctx-gradient-pressed: var(--color-default-blue-900);
|
|
1129
1148
|
--ctx-border-hover: var(--color-default-blue-700);
|
|
1130
|
-
--ctx-border-pressed: var(--color-default-blue-700);
|
|
1131
1149
|
}
|
|
1132
1150
|
|
|
1133
1151
|
@utility ctx-info-subtlest {
|
|
@@ -1136,15 +1154,11 @@
|
|
|
1136
1154
|
--ctx-background: var(--color-default-blue-100);
|
|
1137
1155
|
--ctx-gradient: var(--color-default-blue-200);
|
|
1138
1156
|
--ctx-border: var(--color-default-blue-300);
|
|
1157
|
+
--ctx-border-bold: var(--color-default-blue-800);
|
|
1139
1158
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1140
1159
|
--ctx-text-hover: var(--color-default-blue-800);
|
|
1141
|
-
--ctx-text-pressed: var(--color-default-blue-800);
|
|
1142
1160
|
--ctx-background-hover: var(--color-default-blue-200);
|
|
1143
|
-
--ctx-background-pressed: var(--color-default-blue-300);
|
|
1144
|
-
--ctx-gradient-hover: var(--color-default-blue-300);
|
|
1145
|
-
--ctx-gradient-pressed: var(--color-default-blue-300);
|
|
1146
1161
|
--ctx-border-hover: var(--color-default-blue-300);
|
|
1147
|
-
--ctx-border-pressed: var(--color-default-blue-300);
|
|
1148
1162
|
}
|
|
1149
1163
|
|
|
1150
1164
|
@utility ctx-magenta-bolder {
|
|
@@ -1152,16 +1166,12 @@
|
|
|
1152
1166
|
--ctx-text-bold: var(--color-default-magenta-100);
|
|
1153
1167
|
--ctx-background: var(--color-default-magenta-700);
|
|
1154
1168
|
--ctx-gradient: var(--color-default-magenta-800);
|
|
1155
|
-
--ctx-border: var(--color-default-magenta-
|
|
1169
|
+
--ctx-border: var(--color-default-magenta-800);
|
|
1170
|
+
--ctx-border-bold: var(--color-default-magenta-600);
|
|
1156
1171
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1157
1172
|
--ctx-text-hover: var(--color-default-magenta-200);
|
|
1158
|
-
--ctx-text-pressed: var(--color-default-magenta-200);
|
|
1159
1173
|
--ctx-background-hover: var(--color-default-magenta-800);
|
|
1160
|
-
--ctx-
|
|
1161
|
-
--ctx-gradient-hover: var(--color-default-magenta-900);
|
|
1162
|
-
--ctx-gradient-pressed: var(--color-default-magenta-900);
|
|
1163
|
-
--ctx-border-hover: var(--color-default-magenta-700);
|
|
1164
|
-
--ctx-border-pressed: var(--color-default-magenta-700);
|
|
1174
|
+
--ctx-border-hover: var(--color-default-magenta-800);
|
|
1165
1175
|
}
|
|
1166
1176
|
|
|
1167
1177
|
@utility ctx-magenta-subtle {
|
|
@@ -1170,15 +1180,11 @@
|
|
|
1170
1180
|
--ctx-background: var(--color-default-magenta-400);
|
|
1171
1181
|
--ctx-gradient: var(--color-default-magenta-300);
|
|
1172
1182
|
--ctx-border: var(--color-default-magenta-500);
|
|
1183
|
+
--ctx-border-bold: var(--color-default-magenta-700);
|
|
1173
1184
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1174
1185
|
--ctx-text-hover: var(--color-default-magenta-900);
|
|
1175
|
-
--ctx-text-pressed: var(--color-default-magenta-900);
|
|
1176
1186
|
--ctx-background-hover: var(--color-default-magenta-300);
|
|
1177
|
-
--ctx-background-pressed: var(--color-default-magenta-200);
|
|
1178
|
-
--ctx-gradient-hover: var(--color-default-magenta-200);
|
|
1179
|
-
--ctx-gradient-pressed: var(--color-default-magenta-200);
|
|
1180
1187
|
--ctx-border-hover: var(--color-default-magenta-500);
|
|
1181
|
-
--ctx-border-pressed: var(--color-default-magenta-500);
|
|
1182
1188
|
}
|
|
1183
1189
|
|
|
1184
1190
|
@utility ctx-magenta-subtler {
|
|
@@ -1186,16 +1192,12 @@
|
|
|
1186
1192
|
--ctx-text-bold: var(--color-default-magenta-900);
|
|
1187
1193
|
--ctx-background: var(--color-default-magenta-200);
|
|
1188
1194
|
--ctx-gradient: var(--color-default-magenta-300);
|
|
1189
|
-
--ctx-border: var(--color-default-magenta-
|
|
1195
|
+
--ctx-border: var(--color-default-magenta-300);
|
|
1196
|
+
--ctx-border-bold: var(--color-default-magenta-500);
|
|
1190
1197
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1191
1198
|
--ctx-text-hover: var(--color-default-magenta-800);
|
|
1192
|
-
--ctx-text-pressed: var(--color-default-magenta-800);
|
|
1193
1199
|
--ctx-background-hover: var(--color-default-magenta-300);
|
|
1194
|
-
--ctx-
|
|
1195
|
-
--ctx-gradient-hover: var(--color-default-magenta-400);
|
|
1196
|
-
--ctx-gradient-pressed: var(--color-default-magenta-400);
|
|
1197
|
-
--ctx-border-hover: var(--color-default-magenta-400);
|
|
1198
|
-
--ctx-border-pressed: var(--color-default-magenta-400);
|
|
1200
|
+
--ctx-border-hover: var(--color-default-magenta-300);
|
|
1199
1201
|
}
|
|
1200
1202
|
|
|
1201
1203
|
@utility ctx-magenta-subtlest {
|
|
@@ -1203,16 +1205,12 @@
|
|
|
1203
1205
|
--ctx-text-bold: var(--color-default-magenta-900);
|
|
1204
1206
|
--ctx-background: var(--color-default-magenta-100);
|
|
1205
1207
|
--ctx-gradient: var(--color-default-magenta-200);
|
|
1206
|
-
--ctx-border: var(--color-default-magenta-
|
|
1208
|
+
--ctx-border: var(--color-default-magenta-200);
|
|
1209
|
+
--ctx-border-bold: var(--color-default-magenta-400);
|
|
1207
1210
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1208
1211
|
--ctx-text-hover: var(--color-default-magenta-800);
|
|
1209
|
-
--ctx-text-pressed: var(--color-default-magenta-800);
|
|
1210
1212
|
--ctx-background-hover: var(--color-default-magenta-200);
|
|
1211
|
-
--ctx-
|
|
1212
|
-
--ctx-gradient-hover: var(--color-default-magenta-300);
|
|
1213
|
-
--ctx-gradient-pressed: var(--color-default-magenta-300);
|
|
1214
|
-
--ctx-border-hover: var(--color-default-magenta-300);
|
|
1215
|
-
--ctx-border-pressed: var(--color-default-magenta-300);
|
|
1213
|
+
--ctx-border-hover: var(--color-default-magenta-200);
|
|
1216
1214
|
}
|
|
1217
1215
|
|
|
1218
1216
|
@utility ctx-neutral-bold {
|
|
@@ -1221,15 +1219,11 @@
|
|
|
1221
1219
|
--ctx-background: var(--color-default-neutral-900);
|
|
1222
1220
|
--ctx-gradient: var(--color-default-neutral-800);
|
|
1223
1221
|
--ctx-border: var(--color-default-neutral-600);
|
|
1222
|
+
--ctx-border-bold: var(--color-default-neutral-500);
|
|
1224
1223
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1225
1224
|
--ctx-text-hover: var(--color-default-neutral-300);
|
|
1226
|
-
--ctx-text-pressed: var(--color-default-neutral-300);
|
|
1227
1225
|
--ctx-background-hover: var(--color-default-neutral-800);
|
|
1228
|
-
--ctx-background-pressed: var(--color-default-neutral-700);
|
|
1229
|
-
--ctx-gradient-hover: var(--color-default-neutral-700);
|
|
1230
|
-
--ctx-gradient-pressed: var(--color-default-neutral-700);
|
|
1231
1226
|
--ctx-border-hover: var(--color-default-neutral-600);
|
|
1232
|
-
--ctx-border-pressed: var(--color-default-neutral-600);
|
|
1233
1227
|
}
|
|
1234
1228
|
|
|
1235
1229
|
@utility ctx-neutral-bolder {
|
|
@@ -1238,15 +1232,11 @@
|
|
|
1238
1232
|
--ctx-background: var(--color-default-neutral-1000);
|
|
1239
1233
|
--ctx-gradient: var(--color-default-neutral-900);
|
|
1240
1234
|
--ctx-border: var(--color-default-neutral-700);
|
|
1235
|
+
--ctx-border-bold: var(--color-default-neutral-400);
|
|
1241
1236
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1242
1237
|
--ctx-text-hover: var(--color-default-neutral-200);
|
|
1243
|
-
--ctx-text-pressed: var(--color-default-neutral-200);
|
|
1244
1238
|
--ctx-background-hover: var(--color-default-neutral-900);
|
|
1245
|
-
--ctx-background-pressed: var(--color-default-neutral-800);
|
|
1246
|
-
--ctx-gradient-hover: var(--color-default-neutral-800);
|
|
1247
|
-
--ctx-gradient-pressed: var(--color-default-neutral-800);
|
|
1248
1239
|
--ctx-border-hover: var(--color-default-neutral-700);
|
|
1249
|
-
--ctx-border-pressed: var(--color-default-neutral-700);
|
|
1250
1240
|
}
|
|
1251
1241
|
|
|
1252
1242
|
@utility ctx-neutral-boldest {
|
|
@@ -1255,15 +1245,11 @@
|
|
|
1255
1245
|
--ctx-background: var(--color-default-neutral-1100);
|
|
1256
1246
|
--ctx-gradient: var(--color-default-neutral-1000);
|
|
1257
1247
|
--ctx-border: var(--color-default-neutral-800);
|
|
1248
|
+
--ctx-border-bold: var(--color-default-neutral-300);
|
|
1258
1249
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1259
1250
|
--ctx-text-hover: var(--color-default-neutral-100);
|
|
1260
|
-
--ctx-text-pressed: var(--color-default-neutral-100);
|
|
1261
1251
|
--ctx-background-hover: var(--color-default-neutral-1000);
|
|
1262
|
-
--ctx-background-pressed: var(--color-default-neutral-900);
|
|
1263
|
-
--ctx-gradient-hover: var(--color-default-neutral-900);
|
|
1264
|
-
--ctx-gradient-pressed: var(--color-default-neutral-900);
|
|
1265
1252
|
--ctx-border-hover: var(--color-default-neutral-800);
|
|
1266
|
-
--ctx-border-pressed: var(--color-default-neutral-800);
|
|
1267
1253
|
}
|
|
1268
1254
|
|
|
1269
1255
|
@utility ctx-neutral-subtle {
|
|
@@ -1272,15 +1258,11 @@
|
|
|
1272
1258
|
--ctx-background: var(--color-default-neutral-200);
|
|
1273
1259
|
--ctx-gradient: var(--color-default-neutral-300);
|
|
1274
1260
|
--ctx-border: var(--color-default-neutral-500);
|
|
1261
|
+
--ctx-border-bold: var(--color-default-neutral-600);
|
|
1275
1262
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1276
1263
|
--ctx-text-hover: var(--color-default-neutral-800);
|
|
1277
|
-
--ctx-text-pressed: var(--color-default-neutral-800);
|
|
1278
1264
|
--ctx-background-hover: var(--color-default-neutral-300);
|
|
1279
|
-
--ctx-background-pressed: var(--color-default-neutral-400);
|
|
1280
|
-
--ctx-gradient-hover: var(--color-default-neutral-400);
|
|
1281
|
-
--ctx-gradient-pressed: var(--color-default-neutral-400);
|
|
1282
1265
|
--ctx-border-hover: var(--color-default-neutral-500);
|
|
1283
|
-
--ctx-border-pressed: var(--color-default-neutral-500);
|
|
1284
1266
|
}
|
|
1285
1267
|
|
|
1286
1268
|
@utility ctx-neutral-subtler {
|
|
@@ -1289,15 +1271,11 @@
|
|
|
1289
1271
|
--ctx-background: var(--color-default-neutral-100);
|
|
1290
1272
|
--ctx-gradient: var(--color-default-neutral-200);
|
|
1291
1273
|
--ctx-border: var(--color-default-neutral-400);
|
|
1274
|
+
--ctx-border-bold: var(--color-default-neutral-700);
|
|
1292
1275
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1293
1276
|
--ctx-text-hover: var(--color-default-neutral-900);
|
|
1294
|
-
--ctx-text-pressed: var(--color-default-neutral-900);
|
|
1295
1277
|
--ctx-background-hover: var(--color-default-neutral-200);
|
|
1296
|
-
--ctx-background-pressed: var(--color-default-neutral-300);
|
|
1297
|
-
--ctx-gradient-hover: var(--color-default-neutral-300);
|
|
1298
|
-
--ctx-gradient-pressed: var(--color-default-neutral-300);
|
|
1299
1278
|
--ctx-border-hover: var(--color-default-neutral-400);
|
|
1300
|
-
--ctx-border-pressed: var(--color-default-neutral-400);
|
|
1301
1279
|
}
|
|
1302
1280
|
|
|
1303
1281
|
@utility ctx-neutral-subtlest {
|
|
@@ -1306,15 +1284,11 @@
|
|
|
1306
1284
|
--ctx-background: var(--color-default-neutral-0);
|
|
1307
1285
|
--ctx-gradient: var(--color-default-neutral-100);
|
|
1308
1286
|
--ctx-border: var(--color-default-neutral-300);
|
|
1287
|
+
--ctx-border-bold: var(--color-default-neutral-800);
|
|
1309
1288
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1310
1289
|
--ctx-text-hover: var(--color-default-neutral-1000);
|
|
1311
|
-
--ctx-text-pressed: var(--color-default-neutral-1000);
|
|
1312
1290
|
--ctx-background-hover: var(--color-default-neutral-100);
|
|
1313
|
-
--ctx-background-pressed: var(--color-default-neutral-200);
|
|
1314
|
-
--ctx-gradient-hover: var(--color-default-neutral-200);
|
|
1315
|
-
--ctx-gradient-pressed: var(--color-default-neutral-200);
|
|
1316
1291
|
--ctx-border-hover: var(--color-default-neutral-300);
|
|
1317
|
-
--ctx-border-pressed: var(--color-default-neutral-300);
|
|
1318
1292
|
}
|
|
1319
1293
|
|
|
1320
1294
|
@utility ctx-orange-bolder {
|
|
@@ -1322,16 +1296,12 @@
|
|
|
1322
1296
|
--ctx-text-bold: var(--color-default-orange-100);
|
|
1323
1297
|
--ctx-background: var(--color-default-orange-700);
|
|
1324
1298
|
--ctx-gradient: var(--color-default-orange-800);
|
|
1325
|
-
--ctx-border: var(--color-default-orange-
|
|
1299
|
+
--ctx-border: var(--color-default-orange-800);
|
|
1300
|
+
--ctx-border-bold: var(--color-default-orange-600);
|
|
1326
1301
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1327
1302
|
--ctx-text-hover: var(--color-default-orange-200);
|
|
1328
|
-
--ctx-text-pressed: var(--color-default-orange-200);
|
|
1329
1303
|
--ctx-background-hover: var(--color-default-orange-800);
|
|
1330
|
-
--ctx-
|
|
1331
|
-
--ctx-gradient-hover: var(--color-default-orange-900);
|
|
1332
|
-
--ctx-gradient-pressed: var(--color-default-orange-900);
|
|
1333
|
-
--ctx-border-hover: var(--color-default-orange-700);
|
|
1334
|
-
--ctx-border-pressed: var(--color-default-orange-700);
|
|
1304
|
+
--ctx-border-hover: var(--color-default-orange-800);
|
|
1335
1305
|
}
|
|
1336
1306
|
|
|
1337
1307
|
@utility ctx-orange-subtle {
|
|
@@ -1340,15 +1310,11 @@
|
|
|
1340
1310
|
--ctx-background: var(--color-default-orange-400);
|
|
1341
1311
|
--ctx-gradient: var(--color-default-orange-300);
|
|
1342
1312
|
--ctx-border: var(--color-default-orange-500);
|
|
1313
|
+
--ctx-border-bold: var(--color-default-orange-700);
|
|
1343
1314
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1344
1315
|
--ctx-text-hover: var(--color-default-orange-900);
|
|
1345
|
-
--ctx-text-pressed: var(--color-default-orange-900);
|
|
1346
1316
|
--ctx-background-hover: var(--color-default-orange-300);
|
|
1347
|
-
--ctx-background-pressed: var(--color-default-orange-200);
|
|
1348
|
-
--ctx-gradient-hover: var(--color-default-orange-200);
|
|
1349
|
-
--ctx-gradient-pressed: var(--color-default-orange-200);
|
|
1350
1317
|
--ctx-border-hover: var(--color-default-orange-500);
|
|
1351
|
-
--ctx-border-pressed: var(--color-default-orange-500);
|
|
1352
1318
|
}
|
|
1353
1319
|
|
|
1354
1320
|
@utility ctx-orange-subtler {
|
|
@@ -1356,16 +1322,12 @@
|
|
|
1356
1322
|
--ctx-text-bold: var(--color-default-orange-900);
|
|
1357
1323
|
--ctx-background: var(--color-default-orange-200);
|
|
1358
1324
|
--ctx-gradient: var(--color-default-orange-300);
|
|
1359
|
-
--ctx-border: var(--color-default-orange-
|
|
1325
|
+
--ctx-border: var(--color-default-orange-300);
|
|
1326
|
+
--ctx-border-bold: var(--color-default-orange-500);
|
|
1360
1327
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1361
1328
|
--ctx-text-hover: var(--color-default-orange-800);
|
|
1362
|
-
--ctx-text-pressed: var(--color-default-orange-800);
|
|
1363
1329
|
--ctx-background-hover: var(--color-default-orange-300);
|
|
1364
|
-
--ctx-
|
|
1365
|
-
--ctx-gradient-hover: var(--color-default-orange-400);
|
|
1366
|
-
--ctx-gradient-pressed: var(--color-default-orange-400);
|
|
1367
|
-
--ctx-border-hover: var(--color-default-orange-400);
|
|
1368
|
-
--ctx-border-pressed: var(--color-default-orange-400);
|
|
1330
|
+
--ctx-border-hover: var(--color-default-orange-300);
|
|
1369
1331
|
}
|
|
1370
1332
|
|
|
1371
1333
|
@utility ctx-orange-subtlest {
|
|
@@ -1373,16 +1335,12 @@
|
|
|
1373
1335
|
--ctx-text-bold: var(--color-default-orange-900);
|
|
1374
1336
|
--ctx-background: var(--color-default-orange-100);
|
|
1375
1337
|
--ctx-gradient: var(--color-default-orange-200);
|
|
1376
|
-
--ctx-border: var(--color-default-orange-
|
|
1338
|
+
--ctx-border: var(--color-default-orange-200);
|
|
1339
|
+
--ctx-border-bold: var(--color-default-orange-400);
|
|
1377
1340
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1378
1341
|
--ctx-text-hover: var(--color-default-orange-800);
|
|
1379
|
-
--ctx-text-pressed: var(--color-default-orange-800);
|
|
1380
1342
|
--ctx-background-hover: var(--color-default-orange-200);
|
|
1381
|
-
--ctx-
|
|
1382
|
-
--ctx-gradient-hover: var(--color-default-orange-300);
|
|
1383
|
-
--ctx-gradient-pressed: var(--color-default-orange-300);
|
|
1384
|
-
--ctx-border-hover: var(--color-default-orange-300);
|
|
1385
|
-
--ctx-border-pressed: var(--color-default-orange-300);
|
|
1343
|
+
--ctx-border-hover: var(--color-default-orange-200);
|
|
1386
1344
|
}
|
|
1387
1345
|
|
|
1388
1346
|
@utility ctx-purple-bolder {
|
|
@@ -1390,16 +1348,12 @@
|
|
|
1390
1348
|
--ctx-text-bold: var(--color-default-purple-100);
|
|
1391
1349
|
--ctx-background: var(--color-default-purple-700);
|
|
1392
1350
|
--ctx-gradient: var(--color-default-purple-800);
|
|
1393
|
-
--ctx-border: var(--color-default-purple-
|
|
1351
|
+
--ctx-border: var(--color-default-purple-800);
|
|
1352
|
+
--ctx-border-bold: var(--color-default-purple-600);
|
|
1394
1353
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1395
1354
|
--ctx-text-hover: var(--color-default-purple-200);
|
|
1396
|
-
--ctx-text-pressed: var(--color-default-purple-200);
|
|
1397
1355
|
--ctx-background-hover: var(--color-default-purple-800);
|
|
1398
|
-
--ctx-
|
|
1399
|
-
--ctx-gradient-hover: var(--color-default-purple-900);
|
|
1400
|
-
--ctx-gradient-pressed: var(--color-default-purple-900);
|
|
1401
|
-
--ctx-border-hover: var(--color-default-purple-700);
|
|
1402
|
-
--ctx-border-pressed: var(--color-default-purple-700);
|
|
1356
|
+
--ctx-border-hover: var(--color-default-purple-800);
|
|
1403
1357
|
}
|
|
1404
1358
|
|
|
1405
1359
|
@utility ctx-purple-subtle {
|
|
@@ -1408,15 +1362,11 @@
|
|
|
1408
1362
|
--ctx-background: var(--color-default-purple-400);
|
|
1409
1363
|
--ctx-gradient: var(--color-default-purple-300);
|
|
1410
1364
|
--ctx-border: var(--color-default-purple-500);
|
|
1365
|
+
--ctx-border-bold: var(--color-default-purple-700);
|
|
1411
1366
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1412
1367
|
--ctx-text-hover: var(--color-default-purple-900);
|
|
1413
|
-
--ctx-text-pressed: var(--color-default-purple-900);
|
|
1414
1368
|
--ctx-background-hover: var(--color-default-purple-300);
|
|
1415
|
-
--ctx-background-pressed: var(--color-default-purple-200);
|
|
1416
|
-
--ctx-gradient-hover: var(--color-default-purple-200);
|
|
1417
|
-
--ctx-gradient-pressed: var(--color-default-purple-200);
|
|
1418
1369
|
--ctx-border-hover: var(--color-default-purple-500);
|
|
1419
|
-
--ctx-border-pressed: var(--color-default-purple-500);
|
|
1420
1370
|
}
|
|
1421
1371
|
|
|
1422
1372
|
@utility ctx-purple-subtler {
|
|
@@ -1424,16 +1374,12 @@
|
|
|
1424
1374
|
--ctx-text-bold: var(--color-default-purple-900);
|
|
1425
1375
|
--ctx-background: var(--color-default-purple-200);
|
|
1426
1376
|
--ctx-gradient: var(--color-default-purple-300);
|
|
1427
|
-
--ctx-border: var(--color-default-purple-
|
|
1377
|
+
--ctx-border: var(--color-default-purple-300);
|
|
1378
|
+
--ctx-border-bold: var(--color-default-purple-500);
|
|
1428
1379
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1429
1380
|
--ctx-text-hover: var(--color-default-purple-800);
|
|
1430
|
-
--ctx-text-pressed: var(--color-default-purple-800);
|
|
1431
1381
|
--ctx-background-hover: var(--color-default-purple-300);
|
|
1432
|
-
--ctx-
|
|
1433
|
-
--ctx-gradient-hover: var(--color-default-purple-400);
|
|
1434
|
-
--ctx-gradient-pressed: var(--color-default-purple-400);
|
|
1435
|
-
--ctx-border-hover: var(--color-default-purple-400);
|
|
1436
|
-
--ctx-border-pressed: var(--color-default-purple-400);
|
|
1382
|
+
--ctx-border-hover: var(--color-default-purple-300);
|
|
1437
1383
|
}
|
|
1438
1384
|
|
|
1439
1385
|
@utility ctx-purple-subtlest {
|
|
@@ -1441,16 +1387,12 @@
|
|
|
1441
1387
|
--ctx-text-bold: var(--color-default-purple-900);
|
|
1442
1388
|
--ctx-background: var(--color-default-purple-100);
|
|
1443
1389
|
--ctx-gradient: var(--color-default-purple-200);
|
|
1444
|
-
--ctx-border: var(--color-default-purple-
|
|
1390
|
+
--ctx-border: var(--color-default-purple-200);
|
|
1391
|
+
--ctx-border-bold: var(--color-default-purple-400);
|
|
1445
1392
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1446
1393
|
--ctx-text-hover: var(--color-default-purple-800);
|
|
1447
|
-
--ctx-text-pressed: var(--color-default-purple-800);
|
|
1448
1394
|
--ctx-background-hover: var(--color-default-purple-200);
|
|
1449
|
-
--ctx-
|
|
1450
|
-
--ctx-gradient-hover: var(--color-default-purple-300);
|
|
1451
|
-
--ctx-gradient-pressed: var(--color-default-purple-300);
|
|
1452
|
-
--ctx-border-hover: var(--color-default-purple-300);
|
|
1453
|
-
--ctx-border-pressed: var(--color-default-purple-300);
|
|
1395
|
+
--ctx-border-hover: var(--color-default-purple-200);
|
|
1454
1396
|
}
|
|
1455
1397
|
|
|
1456
1398
|
@utility ctx-red-bolder {
|
|
@@ -1458,16 +1400,12 @@
|
|
|
1458
1400
|
--ctx-text-bold: var(--color-default-red-100);
|
|
1459
1401
|
--ctx-background: var(--color-default-red-700);
|
|
1460
1402
|
--ctx-gradient: var(--color-default-red-800);
|
|
1461
|
-
--ctx-border: var(--color-default-red-
|
|
1403
|
+
--ctx-border: var(--color-default-red-800);
|
|
1404
|
+
--ctx-border-bold: var(--color-default-red-600);
|
|
1462
1405
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1463
1406
|
--ctx-text-hover: var(--color-default-red-200);
|
|
1464
|
-
--ctx-text-pressed: var(--color-default-red-200);
|
|
1465
1407
|
--ctx-background-hover: var(--color-default-red-800);
|
|
1466
|
-
--ctx-
|
|
1467
|
-
--ctx-gradient-hover: var(--color-default-red-900);
|
|
1468
|
-
--ctx-gradient-pressed: var(--color-default-red-900);
|
|
1469
|
-
--ctx-border-hover: var(--color-default-red-700);
|
|
1470
|
-
--ctx-border-pressed: var(--color-default-red-700);
|
|
1408
|
+
--ctx-border-hover: var(--color-default-red-800);
|
|
1471
1409
|
}
|
|
1472
1410
|
|
|
1473
1411
|
@utility ctx-red-subtle {
|
|
@@ -1476,15 +1414,11 @@
|
|
|
1476
1414
|
--ctx-background: var(--color-default-red-400);
|
|
1477
1415
|
--ctx-gradient: var(--color-default-red-300);
|
|
1478
1416
|
--ctx-border: var(--color-default-red-500);
|
|
1417
|
+
--ctx-border-bold: var(--color-default-red-700);
|
|
1479
1418
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1480
1419
|
--ctx-text-hover: var(--color-default-red-900);
|
|
1481
|
-
--ctx-text-pressed: var(--color-default-red-900);
|
|
1482
1420
|
--ctx-background-hover: var(--color-default-red-300);
|
|
1483
|
-
--ctx-background-pressed: var(--color-default-red-200);
|
|
1484
|
-
--ctx-gradient-hover: var(--color-default-red-200);
|
|
1485
|
-
--ctx-gradient-pressed: var(--color-default-red-200);
|
|
1486
1421
|
--ctx-border-hover: var(--color-default-red-500);
|
|
1487
|
-
--ctx-border-pressed: var(--color-default-red-500);
|
|
1488
1422
|
}
|
|
1489
1423
|
|
|
1490
1424
|
@utility ctx-red-subtler {
|
|
@@ -1492,16 +1426,12 @@
|
|
|
1492
1426
|
--ctx-text-bold: var(--color-default-red-900);
|
|
1493
1427
|
--ctx-background: var(--color-default-red-200);
|
|
1494
1428
|
--ctx-gradient: var(--color-default-red-300);
|
|
1495
|
-
--ctx-border: var(--color-default-red-
|
|
1429
|
+
--ctx-border: var(--color-default-red-300);
|
|
1430
|
+
--ctx-border-bold: var(--color-default-red-500);
|
|
1496
1431
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1497
1432
|
--ctx-text-hover: var(--color-default-red-800);
|
|
1498
|
-
--ctx-text-pressed: var(--color-default-red-800);
|
|
1499
1433
|
--ctx-background-hover: var(--color-default-red-300);
|
|
1500
|
-
--ctx-
|
|
1501
|
-
--ctx-gradient-hover: var(--color-default-red-400);
|
|
1502
|
-
--ctx-gradient-pressed: var(--color-default-red-400);
|
|
1503
|
-
--ctx-border-hover: var(--color-default-red-400);
|
|
1504
|
-
--ctx-border-pressed: var(--color-default-red-400);
|
|
1434
|
+
--ctx-border-hover: var(--color-default-red-300);
|
|
1505
1435
|
}
|
|
1506
1436
|
|
|
1507
1437
|
@utility ctx-red-subtlest {
|
|
@@ -1509,16 +1439,12 @@
|
|
|
1509
1439
|
--ctx-text-bold: var(--color-default-red-900);
|
|
1510
1440
|
--ctx-background: var(--color-default-red-100);
|
|
1511
1441
|
--ctx-gradient: var(--color-default-red-200);
|
|
1512
|
-
--ctx-border: var(--color-default-red-
|
|
1442
|
+
--ctx-border: var(--color-default-red-200);
|
|
1443
|
+
--ctx-border-bold: var(--color-default-red-400);
|
|
1513
1444
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1514
1445
|
--ctx-text-hover: var(--color-default-red-800);
|
|
1515
|
-
--ctx-text-pressed: var(--color-default-red-800);
|
|
1516
1446
|
--ctx-background-hover: var(--color-default-red-200);
|
|
1517
|
-
--ctx-
|
|
1518
|
-
--ctx-gradient-hover: var(--color-default-red-300);
|
|
1519
|
-
--ctx-gradient-pressed: var(--color-default-red-300);
|
|
1520
|
-
--ctx-border-hover: var(--color-default-red-300);
|
|
1521
|
-
--ctx-border-pressed: var(--color-default-red-300);
|
|
1447
|
+
--ctx-border-hover: var(--color-default-red-200);
|
|
1522
1448
|
}
|
|
1523
1449
|
|
|
1524
1450
|
@utility ctx-success-bolder {
|
|
@@ -1527,15 +1453,11 @@
|
|
|
1527
1453
|
--ctx-background: var(--color-default-green-700);
|
|
1528
1454
|
--ctx-gradient: var(--color-default-green-800);
|
|
1529
1455
|
--ctx-border: var(--color-default-green-700);
|
|
1456
|
+
--ctx-border-bold: var(--color-default-green-400);
|
|
1530
1457
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1531
1458
|
--ctx-text-hover: var(--color-default-green-200);
|
|
1532
|
-
--ctx-text-pressed: var(--color-default-green-200);
|
|
1533
1459
|
--ctx-background-hover: var(--color-default-green-800);
|
|
1534
|
-
--ctx-background-pressed: var(--color-default-green-900);
|
|
1535
|
-
--ctx-gradient-hover: var(--color-default-green-900);
|
|
1536
|
-
--ctx-gradient-pressed: var(--color-default-green-900);
|
|
1537
1460
|
--ctx-border-hover: var(--color-default-green-700);
|
|
1538
|
-
--ctx-border-pressed: var(--color-default-green-700);
|
|
1539
1461
|
}
|
|
1540
1462
|
|
|
1541
1463
|
@utility ctx-success-subtlest {
|
|
@@ -1544,15 +1466,11 @@
|
|
|
1544
1466
|
--ctx-background: var(--color-default-green-100);
|
|
1545
1467
|
--ctx-gradient: var(--color-default-green-200);
|
|
1546
1468
|
--ctx-border: var(--color-default-green-300);
|
|
1469
|
+
--ctx-border-bold: var(--color-default-green-800);
|
|
1547
1470
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1548
1471
|
--ctx-text-hover: var(--color-default-green-800);
|
|
1549
|
-
--ctx-text-pressed: var(--color-default-green-800);
|
|
1550
1472
|
--ctx-background-hover: var(--color-default-green-200);
|
|
1551
|
-
--ctx-background-pressed: var(--color-default-green-300);
|
|
1552
|
-
--ctx-gradient-hover: var(--color-default-green-300);
|
|
1553
|
-
--ctx-gradient-pressed: var(--color-default-green-300);
|
|
1554
1473
|
--ctx-border-hover: var(--color-default-green-300);
|
|
1555
|
-
--ctx-border-pressed: var(--color-default-green-300);
|
|
1556
1474
|
}
|
|
1557
1475
|
|
|
1558
1476
|
@utility ctx-teal-bolder {
|
|
@@ -1560,16 +1478,12 @@
|
|
|
1560
1478
|
--ctx-text-bold: var(--color-default-teal-100);
|
|
1561
1479
|
--ctx-background: var(--color-default-teal-700);
|
|
1562
1480
|
--ctx-gradient: var(--color-default-teal-800);
|
|
1563
|
-
--ctx-border: var(--color-default-teal-
|
|
1481
|
+
--ctx-border: var(--color-default-teal-800);
|
|
1482
|
+
--ctx-border-bold: var(--color-default-teal-600);
|
|
1564
1483
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1565
1484
|
--ctx-text-hover: var(--color-default-teal-200);
|
|
1566
|
-
--ctx-text-pressed: var(--color-default-teal-200);
|
|
1567
1485
|
--ctx-background-hover: var(--color-default-teal-800);
|
|
1568
|
-
--ctx-
|
|
1569
|
-
--ctx-gradient-hover: var(--color-default-teal-900);
|
|
1570
|
-
--ctx-gradient-pressed: var(--color-default-teal-900);
|
|
1571
|
-
--ctx-border-hover: var(--color-default-teal-700);
|
|
1572
|
-
--ctx-border-pressed: var(--color-default-teal-700);
|
|
1486
|
+
--ctx-border-hover: var(--color-default-teal-800);
|
|
1573
1487
|
}
|
|
1574
1488
|
|
|
1575
1489
|
@utility ctx-teal-subtle {
|
|
@@ -1578,15 +1492,11 @@
|
|
|
1578
1492
|
--ctx-background: var(--color-default-teal-400);
|
|
1579
1493
|
--ctx-gradient: var(--color-default-teal-300);
|
|
1580
1494
|
--ctx-border: var(--color-default-teal-500);
|
|
1495
|
+
--ctx-border-bold: var(--color-default-teal-700);
|
|
1581
1496
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1582
1497
|
--ctx-text-hover: var(--color-default-teal-900);
|
|
1583
|
-
--ctx-text-pressed: var(--color-default-teal-900);
|
|
1584
1498
|
--ctx-background-hover: var(--color-default-teal-300);
|
|
1585
|
-
--ctx-background-pressed: var(--color-default-teal-200);
|
|
1586
|
-
--ctx-gradient-hover: var(--color-default-teal-200);
|
|
1587
|
-
--ctx-gradient-pressed: var(--color-default-teal-200);
|
|
1588
1499
|
--ctx-border-hover: var(--color-default-teal-500);
|
|
1589
|
-
--ctx-border-pressed: var(--color-default-teal-500);
|
|
1590
1500
|
}
|
|
1591
1501
|
|
|
1592
1502
|
@utility ctx-teal-subtler {
|
|
@@ -1594,16 +1504,12 @@
|
|
|
1594
1504
|
--ctx-text-bold: var(--color-default-teal-900);
|
|
1595
1505
|
--ctx-background: var(--color-default-teal-200);
|
|
1596
1506
|
--ctx-gradient: var(--color-default-teal-300);
|
|
1597
|
-
--ctx-border: var(--color-default-teal-
|
|
1507
|
+
--ctx-border: var(--color-default-teal-300);
|
|
1508
|
+
--ctx-border-bold: var(--color-default-teal-500);
|
|
1598
1509
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1599
1510
|
--ctx-text-hover: var(--color-default-teal-800);
|
|
1600
|
-
--ctx-text-pressed: var(--color-default-teal-800);
|
|
1601
1511
|
--ctx-background-hover: var(--color-default-teal-300);
|
|
1602
|
-
--ctx-
|
|
1603
|
-
--ctx-gradient-hover: var(--color-default-teal-400);
|
|
1604
|
-
--ctx-gradient-pressed: var(--color-default-teal-400);
|
|
1605
|
-
--ctx-border-hover: var(--color-default-teal-400);
|
|
1606
|
-
--ctx-border-pressed: var(--color-default-teal-400);
|
|
1512
|
+
--ctx-border-hover: var(--color-default-teal-300);
|
|
1607
1513
|
}
|
|
1608
1514
|
|
|
1609
1515
|
@utility ctx-teal-subtlest {
|
|
@@ -1611,16 +1517,12 @@
|
|
|
1611
1517
|
--ctx-text-bold: var(--color-default-teal-900);
|
|
1612
1518
|
--ctx-background: var(--color-default-teal-100);
|
|
1613
1519
|
--ctx-gradient: var(--color-default-teal-200);
|
|
1614
|
-
--ctx-border: var(--color-default-teal-
|
|
1520
|
+
--ctx-border: var(--color-default-teal-200);
|
|
1521
|
+
--ctx-border-bold: var(--color-default-teal-400);
|
|
1615
1522
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1616
1523
|
--ctx-text-hover: var(--color-default-teal-800);
|
|
1617
|
-
--ctx-text-pressed: var(--color-default-teal-800);
|
|
1618
1524
|
--ctx-background-hover: var(--color-default-teal-200);
|
|
1619
|
-
--ctx-
|
|
1620
|
-
--ctx-gradient-hover: var(--color-default-teal-300);
|
|
1621
|
-
--ctx-gradient-pressed: var(--color-default-teal-300);
|
|
1622
|
-
--ctx-border-hover: var(--color-default-teal-300);
|
|
1623
|
-
--ctx-border-pressed: var(--color-default-teal-300);
|
|
1525
|
+
--ctx-border-hover: var(--color-default-teal-200);
|
|
1624
1526
|
}
|
|
1625
1527
|
|
|
1626
1528
|
@utility ctx-warning-bolder {
|
|
@@ -1629,15 +1531,11 @@
|
|
|
1629
1531
|
--ctx-background: var(--color-default-yellow-700);
|
|
1630
1532
|
--ctx-gradient: var(--color-default-yellow-800);
|
|
1631
1533
|
--ctx-border: var(--color-default-yellow-700);
|
|
1534
|
+
--ctx-border-bold: var(--color-default-yellow-400);
|
|
1632
1535
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1633
1536
|
--ctx-text-hover: var(--color-default-yellow-200);
|
|
1634
|
-
--ctx-text-pressed: var(--color-default-yellow-200);
|
|
1635
1537
|
--ctx-background-hover: var(--color-default-yellow-800);
|
|
1636
|
-
--ctx-background-pressed: var(--color-default-yellow-900);
|
|
1637
|
-
--ctx-gradient-hover: var(--color-default-yellow-900);
|
|
1638
|
-
--ctx-gradient-pressed: var(--color-default-yellow-900);
|
|
1639
1538
|
--ctx-border-hover: var(--color-default-yellow-700);
|
|
1640
|
-
--ctx-border-pressed: var(--color-default-yellow-700);
|
|
1641
1539
|
}
|
|
1642
1540
|
|
|
1643
1541
|
@utility ctx-warning-subtlest {
|
|
@@ -1646,15 +1544,11 @@
|
|
|
1646
1544
|
--ctx-background: var(--color-default-yellow-100);
|
|
1647
1545
|
--ctx-gradient: var(--color-default-yellow-200);
|
|
1648
1546
|
--ctx-border: var(--color-default-yellow-300);
|
|
1547
|
+
--ctx-border-bold: var(--color-default-yellow-800);
|
|
1649
1548
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1650
1549
|
--ctx-text-hover: var(--color-default-yellow-800);
|
|
1651
|
-
--ctx-text-pressed: var(--color-default-yellow-800);
|
|
1652
1550
|
--ctx-background-hover: var(--color-default-yellow-200);
|
|
1653
|
-
--ctx-background-pressed: var(--color-default-yellow-300);
|
|
1654
|
-
--ctx-gradient-hover: var(--color-default-yellow-300);
|
|
1655
|
-
--ctx-gradient-pressed: var(--color-default-yellow-300);
|
|
1656
1551
|
--ctx-border-hover: var(--color-default-yellow-300);
|
|
1657
|
-
--ctx-border-pressed: var(--color-default-yellow-300);
|
|
1658
1552
|
}
|
|
1659
1553
|
|
|
1660
1554
|
@utility ctx-yellow-bolder {
|
|
@@ -1662,16 +1556,12 @@
|
|
|
1662
1556
|
--ctx-text-bold: var(--color-default-yellow-100);
|
|
1663
1557
|
--ctx-background: var(--color-default-yellow-700);
|
|
1664
1558
|
--ctx-gradient: var(--color-default-yellow-800);
|
|
1665
|
-
--ctx-border: var(--color-default-yellow-
|
|
1559
|
+
--ctx-border: var(--color-default-yellow-800);
|
|
1560
|
+
--ctx-border-bold: var(--color-default-yellow-600);
|
|
1666
1561
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1667
1562
|
--ctx-text-hover: var(--color-default-yellow-200);
|
|
1668
|
-
--ctx-text-pressed: var(--color-default-yellow-200);
|
|
1669
1563
|
--ctx-background-hover: var(--color-default-yellow-800);
|
|
1670
|
-
--ctx-
|
|
1671
|
-
--ctx-gradient-hover: var(--color-default-yellow-900);
|
|
1672
|
-
--ctx-gradient-pressed: var(--color-default-yellow-900);
|
|
1673
|
-
--ctx-border-hover: var(--color-default-yellow-700);
|
|
1674
|
-
--ctx-border-pressed: var(--color-default-yellow-700);
|
|
1564
|
+
--ctx-border-hover: var(--color-default-yellow-800);
|
|
1675
1565
|
}
|
|
1676
1566
|
|
|
1677
1567
|
@utility ctx-yellow-subtle {
|
|
@@ -1680,15 +1570,11 @@
|
|
|
1680
1570
|
--ctx-background: var(--color-default-yellow-400);
|
|
1681
1571
|
--ctx-gradient: var(--color-default-yellow-300);
|
|
1682
1572
|
--ctx-border: var(--color-default-yellow-500);
|
|
1573
|
+
--ctx-border-bold: var(--color-default-yellow-700);
|
|
1683
1574
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1684
1575
|
--ctx-text-hover: var(--color-default-yellow-900);
|
|
1685
|
-
--ctx-text-pressed: var(--color-default-yellow-900);
|
|
1686
1576
|
--ctx-background-hover: var(--color-default-yellow-300);
|
|
1687
|
-
--ctx-background-pressed: var(--color-default-yellow-200);
|
|
1688
|
-
--ctx-gradient-hover: var(--color-default-yellow-200);
|
|
1689
|
-
--ctx-gradient-pressed: var(--color-default-yellow-200);
|
|
1690
1577
|
--ctx-border-hover: var(--color-default-yellow-500);
|
|
1691
|
-
--ctx-border-pressed: var(--color-default-yellow-500);
|
|
1692
1578
|
}
|
|
1693
1579
|
|
|
1694
1580
|
@utility ctx-yellow-subtler {
|
|
@@ -1696,16 +1582,12 @@
|
|
|
1696
1582
|
--ctx-text-bold: var(--color-default-yellow-900);
|
|
1697
1583
|
--ctx-background: var(--color-default-yellow-200);
|
|
1698
1584
|
--ctx-gradient: var(--color-default-yellow-300);
|
|
1699
|
-
--ctx-border: var(--color-default-yellow-
|
|
1585
|
+
--ctx-border: var(--color-default-yellow-300);
|
|
1586
|
+
--ctx-border-bold: var(--color-default-yellow-500);
|
|
1700
1587
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1701
1588
|
--ctx-text-hover: var(--color-default-yellow-800);
|
|
1702
|
-
--ctx-text-pressed: var(--color-default-yellow-800);
|
|
1703
1589
|
--ctx-background-hover: var(--color-default-yellow-300);
|
|
1704
|
-
--ctx-
|
|
1705
|
-
--ctx-gradient-hover: var(--color-default-yellow-400);
|
|
1706
|
-
--ctx-gradient-pressed: var(--color-default-yellow-400);
|
|
1707
|
-
--ctx-border-hover: var(--color-default-yellow-400);
|
|
1708
|
-
--ctx-border-pressed: var(--color-default-yellow-400);
|
|
1590
|
+
--ctx-border-hover: var(--color-default-yellow-300);
|
|
1709
1591
|
}
|
|
1710
1592
|
|
|
1711
1593
|
@utility ctx-yellow-subtlest {
|
|
@@ -1713,16 +1595,12 @@
|
|
|
1713
1595
|
--ctx-text-bold: var(--color-default-yellow-900);
|
|
1714
1596
|
--ctx-background: var(--color-default-yellow-100);
|
|
1715
1597
|
--ctx-gradient: var(--color-default-yellow-200);
|
|
1716
|
-
--ctx-border: var(--color-default-yellow-
|
|
1598
|
+
--ctx-border: var(--color-default-yellow-200);
|
|
1599
|
+
--ctx-border-bold: var(--color-default-yellow-400);
|
|
1717
1600
|
--ctx-shadow: var(--color-neutral-alpha-500A);
|
|
1718
1601
|
--ctx-text-hover: var(--color-default-yellow-800);
|
|
1719
|
-
--ctx-text-pressed: var(--color-default-yellow-800);
|
|
1720
1602
|
--ctx-background-hover: var(--color-default-yellow-200);
|
|
1721
|
-
--ctx-
|
|
1722
|
-
--ctx-gradient-hover: var(--color-default-yellow-300);
|
|
1723
|
-
--ctx-gradient-pressed: var(--color-default-yellow-300);
|
|
1724
|
-
--ctx-border-hover: var(--color-default-yellow-300);
|
|
1725
|
-
--ctx-border-pressed: var(--color-default-yellow-300);
|
|
1603
|
+
--ctx-border-hover: var(--color-default-yellow-200);
|
|
1726
1604
|
}
|
|
1727
1605
|
|
|
1728
1606
|
|
|
@@ -1826,27 +1704,12 @@
|
|
|
1826
1704
|
|
|
1827
1705
|
|
|
1828
1706
|
|
|
1829
|
-
/* === ./styles/fonts.css === */
|
|
1830
|
-
@utility heading-xs { font: var(--heading-xs); }
|
|
1831
|
-
@utility heading-sm { font: var(--heading-sm); }
|
|
1832
|
-
@utility heading-md { font: var(--heading-md); }
|
|
1833
|
-
@utility heading-lg { font: var(--heading-lg); }
|
|
1834
|
-
@utility heading-xl { font: var(--heading-xl); }
|
|
1835
|
-
@utility heading-2xl { font: var(--heading-2xl); }
|
|
1836
|
-
@utility heading-3xl { font: var(--heading-3xl); }
|
|
1837
|
-
@utility heading-4xl { font: var(--heading-4xl); }
|
|
1838
|
-
@utility heading-5xl { font: var(--heading-5xl); }
|
|
1839
|
-
@utility body-sm { font: var(--body-sm); }
|
|
1840
|
-
@utility body-md { font: var(--body-md); }
|
|
1841
|
-
@utility body-lg { font: var(--body-lg); }
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
1707
|
/* === ./styles/component-overrides.css === */
|
|
1846
1708
|
/** Custom styles to fix primevue components that are not custom or wrapped. */
|
|
1847
1709
|
|
|
1848
1710
|
:root {
|
|
1849
|
-
--p-toast-width: min(85vw,
|
|
1711
|
+
--p-toast-width: min(85vw, calc(var(--spacing) * 100));
|
|
1712
|
+
--p-tooltip-max-width: min(85vw, calc(var(--spacing) * 100));
|
|
1850
1713
|
}
|
|
1851
1714
|
|
|
1852
1715
|
/**
|
|
@@ -1947,6 +1810,156 @@
|
|
|
1947
1810
|
font-size: var(--text-md);
|
|
1948
1811
|
}
|
|
1949
1812
|
|
|
1813
|
+
/* primevue-overrides.css - CSS-level component overrides */
|
|
1814
|
+
@layer custom {
|
|
1815
|
+
.p-accordionheader {
|
|
1816
|
+
gap: var(--p-accordion-header-gap);
|
|
1817
|
+
}
|
|
1818
|
+
|
|
1819
|
+
.p-autocomplete-input-multiple {
|
|
1820
|
+
min-height: var(--p-autocomplete-input-multiple-min-height);
|
|
1821
|
+
gap: var(--p-autocomplete-input-multiple-gap);
|
|
1822
|
+
}
|
|
1823
|
+
|
|
1824
|
+
.p-badge-circle {
|
|
1825
|
+
border-radius: var(--p-badge-circle-border-radius);
|
|
1826
|
+
}
|
|
1827
|
+
|
|
1828
|
+
.p-button {
|
|
1829
|
+
min-height: var(--p-button-min-height);
|
|
1830
|
+
}
|
|
1831
|
+
|
|
1832
|
+
.p-button-sm {
|
|
1833
|
+
min-height: var(--p-button-sm-min-height);
|
|
1834
|
+
}
|
|
1835
|
+
|
|
1836
|
+
.p-button-lg {
|
|
1837
|
+
min-height: var(--p-button-lg-min-height);
|
|
1838
|
+
}
|
|
1839
|
+
|
|
1840
|
+
.p-button.p-button-icon-only {
|
|
1841
|
+
min-width: var(--p-button-icon-only-width);
|
|
1842
|
+
}
|
|
1843
|
+
|
|
1844
|
+
.p-button-sm.p-button-icon-only {
|
|
1845
|
+
min-width: var(--p-button-sm-icon-only-width);
|
|
1846
|
+
}
|
|
1847
|
+
|
|
1848
|
+
.p-button-lg.p-button-icon-only {
|
|
1849
|
+
min-width: var(--p-button-lg-icon-only-width);
|
|
1850
|
+
}
|
|
1851
|
+
|
|
1852
|
+
.p-divider {
|
|
1853
|
+
gap: var(--p-divider-content-gap);
|
|
1854
|
+
}
|
|
1855
|
+
|
|
1856
|
+
.p-inputgroupaddon {
|
|
1857
|
+
min-height: var(--p-inputgroup-addon-min-height);
|
|
1858
|
+
}
|
|
1859
|
+
|
|
1860
|
+
.p-inputtext {
|
|
1861
|
+
min-height: var(--p-inputtext-min-height);
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
.p-inputtext-sm {
|
|
1865
|
+
min-height: var(--p-inputtext-sm-min-height);
|
|
1866
|
+
}
|
|
1867
|
+
|
|
1868
|
+
.p-inputtext-lg {
|
|
1869
|
+
min-height: var(--p-inputtext-lg-min-height);
|
|
1870
|
+
}
|
|
1871
|
+
|
|
1872
|
+
.p-message-text {
|
|
1873
|
+
line-height: 1;
|
|
1874
|
+
flex: 1 1 0;
|
|
1875
|
+
}
|
|
1876
|
+
|
|
1877
|
+
.p-multiselect {
|
|
1878
|
+
min-height: var(--p-multiselect-min-height);
|
|
1879
|
+
}
|
|
1880
|
+
|
|
1881
|
+
.p-multiselect-sm {
|
|
1882
|
+
min-height: var(--p-multiselect-sm-min-height);
|
|
1883
|
+
}
|
|
1884
|
+
|
|
1885
|
+
.p-multiselect-lg {
|
|
1886
|
+
min-height: var(--p-multiselect-lg-min-height);
|
|
1887
|
+
}
|
|
1888
|
+
|
|
1889
|
+
.p-multiselect-label-container {
|
|
1890
|
+
display: flex;
|
|
1891
|
+
align-items: center;
|
|
1892
|
+
}
|
|
1893
|
+
|
|
1894
|
+
.p-radiobutton {
|
|
1895
|
+
gap: var(--p-radiobutton-gap);
|
|
1896
|
+
border-radius: var(--p-radiobutton-border-radius);
|
|
1897
|
+
}
|
|
1898
|
+
|
|
1899
|
+
.p-radiobutton-icon {
|
|
1900
|
+
border-radius: var(--p-radiobutton-icon-border-radius);
|
|
1901
|
+
}
|
|
1902
|
+
|
|
1903
|
+
.p-radiobutton-icon-sm {
|
|
1904
|
+
border-radius: var(--p-radiobutton-icon-sm-border-radius);
|
|
1905
|
+
}
|
|
1906
|
+
|
|
1907
|
+
.p-radiobutton-icon-lg {
|
|
1908
|
+
border-radius: var(--p-radiobutton-icon-lg-border-radius);
|
|
1909
|
+
}
|
|
1910
|
+
|
|
1911
|
+
.p-select {
|
|
1912
|
+
min-height: var(--p-select-min-height);
|
|
1913
|
+
}
|
|
1914
|
+
|
|
1915
|
+
.p-select-sm {
|
|
1916
|
+
min-height: var(--p-select-sm-min-height);
|
|
1917
|
+
}
|
|
1918
|
+
|
|
1919
|
+
.p-select-lg {
|
|
1920
|
+
min-height: var(--p-select-lg-min-height);
|
|
1921
|
+
}
|
|
1922
|
+
|
|
1923
|
+
.p-select-label {
|
|
1924
|
+
display: flex;
|
|
1925
|
+
align-items: center;
|
|
1926
|
+
}
|
|
1927
|
+
|
|
1928
|
+
.p-select-option {
|
|
1929
|
+
gap: var(--p-select-option-gap);
|
|
1930
|
+
}
|
|
1931
|
+
|
|
1932
|
+
.p-textarea {
|
|
1933
|
+
min-height: var(--p-textarea-min-height);
|
|
1934
|
+
}
|
|
1935
|
+
|
|
1936
|
+
.p-togglebutton {
|
|
1937
|
+
min-height: var(--p-togglebutton-min-height);
|
|
1938
|
+
}
|
|
1939
|
+
|
|
1940
|
+
.p-togglebutton .p-togglebutton-sm {
|
|
1941
|
+
min-height: var(--p-togglebutton-sm-min-height);
|
|
1942
|
+
border-radius: var(--p-togglebutton-sm-border-radius);
|
|
1943
|
+
}
|
|
1944
|
+
|
|
1945
|
+
.p-togglebutton-lg {
|
|
1946
|
+
min-height: var(--p-togglebutton-lg-min-height);
|
|
1947
|
+
}
|
|
1948
|
+
|
|
1949
|
+
.p-togglebutton .p-togglebutton-content {
|
|
1950
|
+
min-height: var(--p-togglebutton-content-min-height);
|
|
1951
|
+
}
|
|
1952
|
+
|
|
1953
|
+
.p-togglebutton-sm .p-togglebutton-content {
|
|
1954
|
+
min-height: var(--p-togglebutton-content-sm-min-height);
|
|
1955
|
+
border-radius: var(--p-togglebutton-content-sm-border-radius);
|
|
1956
|
+
}
|
|
1957
|
+
|
|
1958
|
+
.p-togglebutton-lg .p-togglebutton-content {
|
|
1959
|
+
min-height: var(--p-togglebutton-content-lg-min-height);
|
|
1960
|
+
}
|
|
1961
|
+
}
|
|
1962
|
+
|
|
1950
1963
|
|
|
1951
1964
|
|
|
1952
1965
|
|
|
@@ -1974,7 +1987,7 @@
|
|
|
1974
1987
|
}
|
|
1975
1988
|
|
|
1976
1989
|
.bcc-nav-item-title {
|
|
1977
|
-
@apply
|
|
1990
|
+
@apply heading-xs text-center text-subtlest opacity-75;
|
|
1978
1991
|
}
|
|
1979
1992
|
|
|
1980
1993
|
.bcc-app-nav-item--active .bcc-nav-item-title {
|
|
@@ -1995,20 +2008,23 @@
|
|
|
1995
2008
|
|
|
1996
2009
|
@apply bg-ctx text-ctx;
|
|
1997
2010
|
}
|
|
2011
|
+
.bcc-badge span:empty {
|
|
2012
|
+
display: none;
|
|
2013
|
+
}
|
|
1998
2014
|
.bcc-badge.gradient {
|
|
1999
2015
|
@apply ctx-gradient;
|
|
2000
2016
|
}
|
|
2001
2017
|
.bcc-badge.sm {
|
|
2002
|
-
@apply
|
|
2018
|
+
@apply heading-xs h-4 w-4;
|
|
2003
2019
|
}
|
|
2004
2020
|
.bcc-badge.md {
|
|
2005
|
-
@apply
|
|
2021
|
+
@apply heading-sm h-5 w-5;
|
|
2006
2022
|
}
|
|
2007
2023
|
.bcc-badge.lg {
|
|
2008
|
-
@apply
|
|
2024
|
+
@apply heading-md h-6 w-6;
|
|
2009
2025
|
}
|
|
2010
2026
|
.bcc-badge.xl {
|
|
2011
|
-
@apply
|
|
2027
|
+
@apply heading-md h-8 w-8;
|
|
2012
2028
|
}
|
|
2013
2029
|
|
|
2014
2030
|
.bcc-badge .bcc-badge-icon {
|
|
@@ -2056,124 +2072,128 @@
|
|
|
2056
2072
|
|
|
2057
2073
|
/* from ./BccCapacityIndicator/BccCapacityIndicator.css */
|
|
2058
2074
|
@layer components {
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2075
|
+
.bcc-capacity-indicator {
|
|
2076
|
+
@apply text-base;
|
|
2077
|
+
}
|
|
2062
2078
|
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2079
|
+
.bcc-capacity-indicator.xs {
|
|
2080
|
+
@apply text-xs;
|
|
2081
|
+
}
|
|
2066
2082
|
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2083
|
+
.bcc-capacity-indicator.sm {
|
|
2084
|
+
@apply text-sm;
|
|
2085
|
+
}
|
|
2070
2086
|
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2087
|
+
.bcc-capacity-indicator.lg {
|
|
2088
|
+
@apply text-xl;
|
|
2089
|
+
}
|
|
2074
2090
|
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2091
|
+
.bcc-capacity-indicator {
|
|
2092
|
+
--bcc-capacity-indicator-background: transparent;
|
|
2093
|
+
--bcc-capacity-indicator-text: var(--ctx-text);
|
|
2094
|
+
--bcc-capacity-indicator-circle: var(--ctx-border);
|
|
2095
|
+
--bcc-capacity-indicator-circle-used: var(--ctx-border-bold);
|
|
2096
|
+
background: var(--bcc-capacity-indicator-background);
|
|
2097
|
+
@apply ctx-gray-subtler;
|
|
2098
|
+
}
|
|
2083
2099
|
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2100
|
+
.bcc-capacity-indicator.colored {
|
|
2101
|
+
--bcc-capacity-indicator-background: var(--ctx-background);
|
|
2102
|
+
@apply ctx-blue-subtlest;
|
|
2103
|
+
}
|
|
2088
2104
|
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2105
|
+
.bcc-capacity-indicator .text {
|
|
2106
|
+
color: var(--bcc-capacity-indicator-text);
|
|
2107
|
+
}
|
|
2108
|
+
.bcc-capacity-indicator .circle {
|
|
2109
|
+
stroke: var(--bcc-capacity-indicator-circle);
|
|
2110
|
+
}
|
|
2111
|
+
.bcc-capacity-indicator .circle-used {
|
|
2112
|
+
stroke: var(--bcc-capacity-indicator-circle-used);
|
|
2113
|
+
}
|
|
2098
2114
|
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
}
|
|
2115
|
+
.bcc-capacity-indicator.is-warning {
|
|
2116
|
+
@apply ctx-yellow-subtlest;
|
|
2117
|
+
}
|
|
2103
2118
|
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2119
|
+
.bcc-capacity-indicator.is-full {
|
|
2120
|
+
@apply ctx-red-subtlest;
|
|
2121
|
+
--bcc-capacity-indicator-background: var(--ctx-background);
|
|
2122
|
+
}
|
|
2107
2123
|
}
|
|
2108
2124
|
|
|
2109
2125
|
|
|
2126
|
+
|
|
2110
2127
|
/* from ./BccDialKnob/BccDialKnob.css */
|
|
2111
2128
|
@layer components {
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
--bcc-knob-arc-bg: var(--color-background-neutral-default);
|
|
2116
|
-
--bcc-knob-head: var(--color-background-brand-bolder-default);
|
|
2117
|
-
--bcc-knob-tail: var(--color-background-brand-subtle-default);
|
|
2118
|
-
|
|
2119
|
-
--bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
|
|
2120
|
-
--bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
|
|
2121
|
-
|
|
2122
|
-
--bcc-knob-right-head: var(--color-background-accent-green-bolder-default);
|
|
2123
|
-
--bcc-knob-right-tail: var(--color-background-accent-green-subtle-default);
|
|
2124
|
-
}
|
|
2129
|
+
.bcc-knob {
|
|
2130
|
+
@apply relative mx-auto inline-flex touch-none items-center justify-center p-2 select-none;
|
|
2125
2131
|
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2132
|
+
--bcc-knob-arc-bg: var(--color-background-accent-gray-default);
|
|
2133
|
+
--bcc-knob-head: var(--color-background-brand-bolder-default);
|
|
2134
|
+
--bcc-knob-tail: var(--color-background-brand-subtle-default);
|
|
2129
2135
|
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
}
|
|
2136
|
+
--bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
|
|
2137
|
+
--bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
|
|
2133
2138
|
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2139
|
+
--bcc-knob-right-head: var(--color-background-accent-green-bolder-default);
|
|
2140
|
+
--bcc-knob-right-tail: var(--color-background-accent-green-subtle-default);
|
|
2141
|
+
}
|
|
2142
|
+
|
|
2143
|
+
.bcc-knob-label {
|
|
2144
|
+
@apply pointer-events-none absolute inset-0 flex flex-col items-center justify-center select-none;
|
|
2145
|
+
}
|
|
2146
|
+
|
|
2147
|
+
.bcc-knob-top-left {
|
|
2148
|
+
@apply absolute top-0 left-0 text-left;
|
|
2149
|
+
}
|
|
2150
|
+
|
|
2151
|
+
.bcc-knob-top-right {
|
|
2152
|
+
@apply absolute top-0 right-0 text-right;
|
|
2153
|
+
}
|
|
2137
2154
|
}
|
|
2138
2155
|
|
|
2139
2156
|
|
|
2140
2157
|
|
|
2141
2158
|
/* from ./BccFrame/BccFrame.css */
|
|
2142
2159
|
@layer components {
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2160
|
+
.bcc-frame {
|
|
2161
|
+
@apply ctx ctx-default w-full border border-transparent;
|
|
2162
|
+
}
|
|
2146
2163
|
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2164
|
+
.bcc-frame.bcc-frame--shadow {
|
|
2165
|
+
@apply shadow-ctx shadow;
|
|
2166
|
+
}
|
|
2150
2167
|
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2168
|
+
.bcc-frame--raised {
|
|
2169
|
+
--ctx-background: var(--color-elevation-surface-raised-default);
|
|
2170
|
+
}
|
|
2171
|
+
.bcc-frame--rounded {
|
|
2172
|
+
@apply rounded-md;
|
|
2173
|
+
}
|
|
2174
|
+
.bcc-frame--raised.bcc-frame--shadow {
|
|
2175
|
+
@apply shadow-raised dark:border-default;
|
|
2176
|
+
}
|
|
2160
2177
|
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2178
|
+
.bcc-frame--overlay {
|
|
2179
|
+
--ctx-background: var(--color-elevation-surface-overlay-default);
|
|
2180
|
+
@apply border;
|
|
2181
|
+
}
|
|
2182
|
+
.bcc-frame--overlay.bcc-frame--shadow {
|
|
2183
|
+
@apply shadow-overlay dark:border-default;
|
|
2184
|
+
}
|
|
2167
2185
|
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2186
|
+
.bcc-frame--sunken {
|
|
2187
|
+
--ctx-background: var(--color-elevation-surface-sunken-default);
|
|
2188
|
+
@apply border;
|
|
2189
|
+
}
|
|
2190
|
+
.bcc-frame--sunken.bcc-frame--shadow {
|
|
2191
|
+
@apply dark:border-default shadow-inner;
|
|
2192
|
+
}
|
|
2174
2193
|
}
|
|
2175
2194
|
|
|
2176
2195
|
|
|
2196
|
+
|
|
2177
2197
|
/* from ./BccGraphic/BccGraphic.css */
|
|
2178
2198
|
@layer components {
|
|
2179
2199
|
.bcc-graphic .corner,
|
|
@@ -2277,60 +2297,60 @@
|
|
|
2277
2297
|
|
|
2278
2298
|
/* from ./BccNpsScore/BccNpsScore.css */
|
|
2279
2299
|
@layer components {
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2300
|
+
.bcc-nps-score {
|
|
2301
|
+
@apply body-sm flex min-w-70 flex-col gap-y-2 p-4 select-none;
|
|
2302
|
+
}
|
|
2283
2303
|
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2304
|
+
.bcc-nps-score--heading {
|
|
2305
|
+
@apply flex items-center justify-between;
|
|
2306
|
+
}
|
|
2287
2307
|
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2308
|
+
.bcc-nps-score--label {
|
|
2309
|
+
@apply flex-1 truncate;
|
|
2310
|
+
}
|
|
2291
2311
|
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2312
|
+
.bcc-nps-score--bar {
|
|
2313
|
+
@apply pointer-events-none flex justify-evenly rounded-xl text-white;
|
|
2314
|
+
@apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
|
|
2315
|
+
}
|
|
2296
2316
|
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2317
|
+
.bcc-nps-score--bar.reverse {
|
|
2318
|
+
@apply bg-linear-to-l;
|
|
2319
|
+
}
|
|
2300
2320
|
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2321
|
+
.bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
|
|
2322
|
+
@apply bg-ctx ctx-gray-subtlest text-disabled;
|
|
2323
|
+
}
|
|
2304
2324
|
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2325
|
+
.bcc-nps-score--number {
|
|
2326
|
+
@apply border-inverse;
|
|
2327
|
+
@apply flex h-8 flex-1 items-center justify-center border-r-2 text-sm leading-none font-bold;
|
|
2328
|
+
@apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
|
|
2329
|
+
}
|
|
2310
2330
|
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2331
|
+
.bcc-nps-score--number:disabled {
|
|
2332
|
+
@apply cursor-not-allowed;
|
|
2333
|
+
}
|
|
2314
2334
|
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2335
|
+
.bcc-nps-score--number.active {
|
|
2336
|
+
@apply pointer-events-none;
|
|
2337
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
2338
|
+
}
|
|
2319
2339
|
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2340
|
+
.bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
|
|
2341
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
2342
|
+
}
|
|
2323
2343
|
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2344
|
+
.bcc-nps-score--number.inactive {
|
|
2345
|
+
@apply bg-ctx text-ctx ctx-gray-subtler;
|
|
2346
|
+
}
|
|
2327
2347
|
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2348
|
+
.bcc-nps-score--number:first-child {
|
|
2349
|
+
@apply rounded-l-xl pl-0.5;
|
|
2350
|
+
}
|
|
2351
|
+
.bcc-nps-score--number:last-child {
|
|
2352
|
+
@apply rounded-r-xl border-r-0 pr-0.5;
|
|
2353
|
+
}
|
|
2334
2354
|
}
|
|
2335
2355
|
|
|
2336
2356
|
|
|
@@ -2430,27 +2450,27 @@
|
|
|
2430
2450
|
|
|
2431
2451
|
|
|
2432
2452
|
/* from ./BccTag/BccTag.css */
|
|
2433
|
-
|
|
2434
2453
|
@layer components {
|
|
2435
2454
|
.bcc-tag.bcc-badge {
|
|
2436
2455
|
@apply w-auto;
|
|
2437
2456
|
}
|
|
2438
2457
|
.bcc-tag.bcc-badge.md {
|
|
2439
|
-
@apply
|
|
2458
|
+
@apply body-md h-6;
|
|
2440
2459
|
}
|
|
2441
2460
|
.bcc-tag.bcc-badge.sm {
|
|
2442
|
-
@apply
|
|
2461
|
+
@apply body-sm h-5;
|
|
2443
2462
|
}
|
|
2444
2463
|
.bcc-tag.bcc-badge.lg {
|
|
2445
|
-
@apply
|
|
2464
|
+
@apply body-md h-8;
|
|
2446
2465
|
}
|
|
2447
2466
|
.bcc-tag.bcc-badge.xl {
|
|
2448
|
-
@apply
|
|
2467
|
+
@apply body-lg h-10;
|
|
2449
2468
|
}
|
|
2450
2469
|
}
|
|
2451
2470
|
|
|
2452
2471
|
|
|
2453
2472
|
|
|
2473
|
+
|
|
2454
2474
|
/* === ./components/wrapped/styles.css === */
|
|
2455
2475
|
|
|
2456
2476
|
/* from ./BccAvatar/BccAvatar.css */
|
|
@@ -2544,6 +2564,9 @@
|
|
|
2544
2564
|
.bcc-tabs-fluid.p-tabs {
|
|
2545
2565
|
width: 100%;
|
|
2546
2566
|
}
|
|
2567
|
+
.p-tabs .p-tab {
|
|
2568
|
+
@apply heading-sm;
|
|
2569
|
+
}
|
|
2547
2570
|
}
|
|
2548
2571
|
|
|
2549
2572
|
|
|
@@ -2593,3 +2616,9 @@ strong,
|
|
|
2593
2616
|
cursor: not-allowed;
|
|
2594
2617
|
pointer-events: none;
|
|
2595
2618
|
}
|
|
2619
|
+
|
|
2620
|
+
|
|
2621
|
+
/* Library utility classes, compiled from the library's own components.
|
|
2622
|
+
Contains only the utility class rules used inside the library — no preflight, no @theme
|
|
2623
|
+
variables, no design tokens, since theme.css already provides those. */
|
|
2624
|
+
@import './library-utilities.css';
|