@bcc-code/component-library-vue 0.0.0-dev.dc82c05 → 0.0.0-dev.dd8ae9d
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 +31 -35
- package/dist/component-library.js +9270 -8042
- package/dist/component-library.umd.cjs +1223 -195
- package/dist/index.css +1 -1
- package/dist/library-utilities.css +2 -0
- package/dist/quill-BfNQeuzX.js +7524 -0
- package/dist/sfc-styles.css +1 -0
- package/dist/theme.css +704 -665
- package/dist-types/components/custom/BccAppNavigation/BccAppNavigation.vue.d.ts +1 -0
- package/dist-types/components/custom/BccCircleLoader/BccCircleLoader.vue.d.ts +1 -3
- 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/BccStepIndicator/BccStepIndicator.vue.d.ts +3 -3
- package/dist-types/components/custom/BccTopNavigation/BccTopNavigation.vue.d.ts +10 -8
- package/dist-types/components/wrapped/BccButton.vue.d.ts +4 -3
- 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/components/wrapped/BccSelectButton.vue.d.ts +5 -2
- package/dist-types/index.d.ts +1 -0
- package/package.json +111 -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
|
|
|
@@ -1962,29 +1975,27 @@
|
|
|
1962
1975
|
}
|
|
1963
1976
|
|
|
1964
1977
|
.bcc-app-nav-item {
|
|
1965
|
-
@apply
|
|
1978
|
+
@apply relative flex h-12 flex-1 flex-col items-center justify-center gap-1 transition-colors focus:ring-0 focus:outline-none;
|
|
1966
1979
|
}
|
|
1967
1980
|
|
|
1968
1981
|
.bcc-nav-item-icon {
|
|
1969
|
-
@apply size-6
|
|
1982
|
+
@apply size-6 icon-subtlest;
|
|
1970
1983
|
}
|
|
1971
1984
|
|
|
1972
1985
|
.bcc-nav-item-badge {
|
|
1973
|
-
@apply absolute top-0 right-1
|
|
1986
|
+
@apply absolute top-0 right-1;
|
|
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
|
-
.bcc-app-nav-item--active {
|
|
1981
|
-
@apply text-selected;
|
|
1993
|
+
.bcc-app-nav-item--active .bcc-nav-item-title {
|
|
1994
|
+
@apply text-selected opacity-100;
|
|
1982
1995
|
}
|
|
1983
1996
|
|
|
1984
|
-
.bcc-app-nav-item--active .bcc-nav-item-icon
|
|
1985
|
-
|
|
1986
|
-
.bcc-app-nav-item--active .bcc-nav-item-title {
|
|
1987
|
-
@apply opacity-100;
|
|
1997
|
+
.bcc-app-nav-item--active .bcc-nav-item-icon {
|
|
1998
|
+
@apply text-selected;
|
|
1988
1999
|
}
|
|
1989
2000
|
}
|
|
1990
2001
|
|
|
@@ -1997,20 +2008,23 @@
|
|
|
1997
2008
|
|
|
1998
2009
|
@apply bg-ctx text-ctx;
|
|
1999
2010
|
}
|
|
2011
|
+
.bcc-badge span:empty {
|
|
2012
|
+
display: none;
|
|
2013
|
+
}
|
|
2000
2014
|
.bcc-badge.gradient {
|
|
2001
2015
|
@apply ctx-gradient;
|
|
2002
2016
|
}
|
|
2003
2017
|
.bcc-badge.sm {
|
|
2004
|
-
@apply
|
|
2018
|
+
@apply heading-xs h-4 w-4;
|
|
2005
2019
|
}
|
|
2006
2020
|
.bcc-badge.md {
|
|
2007
|
-
@apply
|
|
2021
|
+
@apply heading-sm h-5 w-5;
|
|
2008
2022
|
}
|
|
2009
2023
|
.bcc-badge.lg {
|
|
2010
|
-
@apply
|
|
2024
|
+
@apply heading-md h-6 w-6;
|
|
2011
2025
|
}
|
|
2012
2026
|
.bcc-badge.xl {
|
|
2013
|
-
@apply
|
|
2027
|
+
@apply heading-md h-8 w-8;
|
|
2014
2028
|
}
|
|
2015
2029
|
|
|
2016
2030
|
.bcc-badge .bcc-badge-icon {
|
|
@@ -2058,163 +2072,176 @@
|
|
|
2058
2072
|
|
|
2059
2073
|
/* from ./BccCapacityIndicator/BccCapacityIndicator.css */
|
|
2060
2074
|
@layer components {
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2075
|
+
.bcc-capacity-indicator {
|
|
2076
|
+
@apply text-base;
|
|
2077
|
+
}
|
|
2064
2078
|
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2079
|
+
.bcc-capacity-indicator.xs {
|
|
2080
|
+
@apply text-xs;
|
|
2081
|
+
}
|
|
2068
2082
|
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2083
|
+
.bcc-capacity-indicator.sm {
|
|
2084
|
+
@apply text-sm;
|
|
2085
|
+
}
|
|
2072
2086
|
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2087
|
+
.bcc-capacity-indicator.lg {
|
|
2088
|
+
@apply text-xl;
|
|
2089
|
+
}
|
|
2076
2090
|
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
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
|
+
}
|
|
2085
2099
|
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2100
|
+
.bcc-capacity-indicator.colored {
|
|
2101
|
+
--bcc-capacity-indicator-background: var(--ctx-background);
|
|
2102
|
+
@apply ctx-blue-subtlest;
|
|
2103
|
+
}
|
|
2090
2104
|
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
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
|
+
}
|
|
2100
2114
|
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
}
|
|
2115
|
+
.bcc-capacity-indicator.is-warning {
|
|
2116
|
+
@apply ctx-yellow-subtlest;
|
|
2117
|
+
}
|
|
2105
2118
|
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2119
|
+
.bcc-capacity-indicator.is-full {
|
|
2120
|
+
@apply ctx-red-subtlest;
|
|
2121
|
+
--bcc-capacity-indicator-background: var(--ctx-background);
|
|
2122
|
+
}
|
|
2109
2123
|
}
|
|
2110
2124
|
|
|
2111
2125
|
|
|
2126
|
+
|
|
2112
2127
|
/* from ./BccDialKnob/BccDialKnob.css */
|
|
2113
2128
|
@layer components {
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
--bcc-knob-arc-bg: var(--color-background-neutral-default);
|
|
2118
|
-
--bcc-knob-head: var(--color-background-brand-bolder-default);
|
|
2119
|
-
--bcc-knob-tail: var(--color-background-brand-subtle-default);
|
|
2120
|
-
|
|
2121
|
-
--bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
|
|
2122
|
-
--bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
|
|
2123
|
-
|
|
2124
|
-
--bcc-knob-right-head: var(--color-background-accent-green-bolder-default);
|
|
2125
|
-
--bcc-knob-right-tail: var(--color-background-accent-green-subtle-default);
|
|
2126
|
-
}
|
|
2129
|
+
.bcc-knob {
|
|
2130
|
+
@apply relative mx-auto inline-flex touch-none items-center justify-center p-2 select-none;
|
|
2127
2131
|
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
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);
|
|
2131
2135
|
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
}
|
|
2136
|
+
--bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
|
|
2137
|
+
--bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
|
|
2135
2138
|
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
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
|
+
}
|
|
2139
2154
|
}
|
|
2140
2155
|
|
|
2141
2156
|
|
|
2142
2157
|
|
|
2143
2158
|
/* from ./BccFrame/BccFrame.css */
|
|
2144
2159
|
@layer components {
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2160
|
+
.bcc-frame {
|
|
2161
|
+
@apply ctx ctx-default w-full border border-transparent;
|
|
2162
|
+
}
|
|
2148
2163
|
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2164
|
+
.bcc-frame.bcc-frame--shadow {
|
|
2165
|
+
@apply shadow-ctx shadow;
|
|
2166
|
+
}
|
|
2152
2167
|
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
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
|
+
}
|
|
2162
2177
|
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
|
|
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
|
+
}
|
|
2169
2185
|
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
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
|
+
}
|
|
2176
2193
|
}
|
|
2177
2194
|
|
|
2178
2195
|
|
|
2196
|
+
|
|
2179
2197
|
/* from ./BccGraphic/BccGraphic.css */
|
|
2180
2198
|
@layer components {
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2199
|
+
.bcc-graphic .corner,
|
|
2200
|
+
.bcc-graphic .center-slot {
|
|
2201
|
+
@apply absolute z-10;
|
|
2202
|
+
}
|
|
2203
|
+
.bcc-graphic .corner.top-left {
|
|
2204
|
+
@apply top-4 left-4;
|
|
2205
|
+
}
|
|
2206
|
+
.bcc-graphic .corner.top-right {
|
|
2207
|
+
@apply top-4 right-4;
|
|
2208
|
+
}
|
|
2209
|
+
.bcc-graphic .corner.bottom-right {
|
|
2210
|
+
@apply right-4 bottom-4;
|
|
2211
|
+
}
|
|
2212
|
+
.bcc-graphic .corner.bottom-left {
|
|
2213
|
+
@apply bottom-4 left-4;
|
|
2214
|
+
}
|
|
2215
|
+
.bcc-graphic .center-slot {
|
|
2216
|
+
@apply inset-1/4 flex h-1/2 w-1/2 items-center justify-center;
|
|
2217
|
+
}
|
|
2200
2218
|
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2219
|
+
.bcc-graphic {
|
|
2220
|
+
@apply from-background-brand-bolder-default to-background-brand-subtle-default relative flex max-h-full w-full bg-linear-to-tr;
|
|
2221
|
+
}
|
|
2204
2222
|
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2223
|
+
.bcc-graphic-banner {
|
|
2224
|
+
@apply absolute inset-0 h-full w-full object-cover object-center;
|
|
2225
|
+
}
|
|
2226
|
+
.bcc-graphic-banner--loading {
|
|
2227
|
+
@apply from-background-brand-bolder-default to-background-brand-subtle-default animate-pulse bg-linear-to-tr;
|
|
2228
|
+
}
|
|
2211
2229
|
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2230
|
+
.bcc-graphic-logo {
|
|
2231
|
+
@apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center;
|
|
2232
|
+
}
|
|
2233
|
+
.bcc-graphic-logo--loading {
|
|
2234
|
+
@apply animate-pulse bg-black opacity-10 blur-sm;
|
|
2235
|
+
}
|
|
2236
|
+
|
|
2237
|
+
.bcc-graphic.bcc-gb-grayscale .bcc-graphic-banner,
|
|
2238
|
+
.bcc-graphic.bcc-gb-grayscale .bcc-graphic-logo {
|
|
2239
|
+
@apply brightness-75 grayscale;
|
|
2240
|
+
}
|
|
2241
|
+
.bcc-graphic.bcc-gb-highlight .bcc-graphic-banner,
|
|
2242
|
+
.bcc-graphic.bcc-gb-highlight .bcc-graphic-logo {
|
|
2243
|
+
@apply brightness-150;
|
|
2244
|
+
}
|
|
2218
2245
|
}
|
|
2219
2246
|
|
|
2220
2247
|
|
|
@@ -2279,60 +2306,60 @@
|
|
|
2279
2306
|
|
|
2280
2307
|
/* from ./BccNpsScore/BccNpsScore.css */
|
|
2281
2308
|
@layer components {
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2309
|
+
.bcc-nps-score {
|
|
2310
|
+
@apply body-sm flex min-w-70 flex-col gap-y-2 p-4 select-none;
|
|
2311
|
+
}
|
|
2285
2312
|
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2313
|
+
.bcc-nps-score--heading {
|
|
2314
|
+
@apply flex items-center justify-between;
|
|
2315
|
+
}
|
|
2289
2316
|
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2317
|
+
.bcc-nps-score--label {
|
|
2318
|
+
@apply flex-1 truncate;
|
|
2319
|
+
}
|
|
2293
2320
|
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2321
|
+
.bcc-nps-score--bar {
|
|
2322
|
+
@apply pointer-events-none flex justify-evenly rounded-xl text-white;
|
|
2323
|
+
@apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
|
|
2324
|
+
}
|
|
2298
2325
|
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2326
|
+
.bcc-nps-score--bar.reverse {
|
|
2327
|
+
@apply bg-linear-to-l;
|
|
2328
|
+
}
|
|
2302
2329
|
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2330
|
+
.bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
|
|
2331
|
+
@apply bg-ctx ctx-gray-subtlest text-disabled;
|
|
2332
|
+
}
|
|
2306
2333
|
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2334
|
+
.bcc-nps-score--number {
|
|
2335
|
+
@apply border-inverse;
|
|
2336
|
+
@apply flex h-8 flex-1 items-center justify-center border-r-2 text-sm leading-none font-bold;
|
|
2337
|
+
@apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
|
|
2338
|
+
}
|
|
2312
2339
|
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2340
|
+
.bcc-nps-score--number:disabled {
|
|
2341
|
+
@apply cursor-not-allowed;
|
|
2342
|
+
}
|
|
2316
2343
|
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2344
|
+
.bcc-nps-score--number.active {
|
|
2345
|
+
@apply pointer-events-none;
|
|
2346
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
2347
|
+
}
|
|
2321
2348
|
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2349
|
+
.bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
|
|
2350
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
2351
|
+
}
|
|
2325
2352
|
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2353
|
+
.bcc-nps-score--number.inactive {
|
|
2354
|
+
@apply bg-ctx text-ctx ctx-gray-subtler;
|
|
2355
|
+
}
|
|
2329
2356
|
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2357
|
+
.bcc-nps-score--number:first-child {
|
|
2358
|
+
@apply rounded-l-xl pl-0.5;
|
|
2359
|
+
}
|
|
2360
|
+
.bcc-nps-score--number:last-child {
|
|
2361
|
+
@apply rounded-r-xl border-r-0 pr-0.5;
|
|
2362
|
+
}
|
|
2336
2363
|
}
|
|
2337
2364
|
|
|
2338
2365
|
|
|
@@ -2432,27 +2459,27 @@
|
|
|
2432
2459
|
|
|
2433
2460
|
|
|
2434
2461
|
/* from ./BccTag/BccTag.css */
|
|
2435
|
-
|
|
2436
2462
|
@layer components {
|
|
2437
2463
|
.bcc-tag.bcc-badge {
|
|
2438
2464
|
@apply w-auto;
|
|
2439
2465
|
}
|
|
2440
2466
|
.bcc-tag.bcc-badge.md {
|
|
2441
|
-
@apply
|
|
2467
|
+
@apply body-md h-6;
|
|
2442
2468
|
}
|
|
2443
2469
|
.bcc-tag.bcc-badge.sm {
|
|
2444
|
-
@apply
|
|
2470
|
+
@apply body-sm h-5;
|
|
2445
2471
|
}
|
|
2446
2472
|
.bcc-tag.bcc-badge.lg {
|
|
2447
|
-
@apply
|
|
2473
|
+
@apply body-md h-8;
|
|
2448
2474
|
}
|
|
2449
2475
|
.bcc-tag.bcc-badge.xl {
|
|
2450
|
-
@apply
|
|
2476
|
+
@apply body-lg h-10;
|
|
2451
2477
|
}
|
|
2452
2478
|
}
|
|
2453
2479
|
|
|
2454
2480
|
|
|
2455
2481
|
|
|
2482
|
+
|
|
2456
2483
|
/* === ./components/wrapped/styles.css === */
|
|
2457
2484
|
|
|
2458
2485
|
/* from ./BccAvatar/BccAvatar.css */
|
|
@@ -2546,6 +2573,9 @@
|
|
|
2546
2573
|
.bcc-tabs-fluid.p-tabs {
|
|
2547
2574
|
width: 100%;
|
|
2548
2575
|
}
|
|
2576
|
+
.p-tabs .p-tab {
|
|
2577
|
+
@apply heading-sm;
|
|
2578
|
+
}
|
|
2549
2579
|
}
|
|
2550
2580
|
|
|
2551
2581
|
|
|
@@ -2595,3 +2625,12 @@ strong,
|
|
|
2595
2625
|
cursor: not-allowed;
|
|
2596
2626
|
pointer-events: none;
|
|
2597
2627
|
}
|
|
2628
|
+
|
|
2629
|
+
|
|
2630
|
+
/* SFC <style> blocks extracted all .vue components
|
|
2631
|
+
@import './sfc-styles.css';
|
|
2632
|
+
|
|
2633
|
+
/* Library utility classes, compiled from the library's own components.
|
|
2634
|
+
Contains only the utility class rules used inside the library — no preflight,
|
|
2635
|
+
no @theme variables, no design tokens, since theme.css already provides those. */
|
|
2636
|
+
@import './library-utilities.css';
|