@bcc-code/component-library-vue 0.0.0-dev.673af97 → 0.0.0-dev.6e42796

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/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 === */
@@ -1947,6 +2073,155 @@
1947
2073
  font-size: var(--text-md);
1948
2074
  }
1949
2075
 
2076
+ /* primevue-overrides.css - CSS-level component overrides */
2077
+ @layer custom {
2078
+ .p-accordionheader {
2079
+ gap: var(--p-accordion-header-gap);
2080
+ }
2081
+
2082
+ .p-autocomplete-input-multiple {
2083
+ min-height: var(--p-autocomplete-input-multiple-min-height);
2084
+ gap: var(--p-autocomplete-input-multiple-gap);
2085
+ }
2086
+
2087
+ .p-badge-circle {
2088
+ border-radius: var(--p-badge-circle-border-radius);
2089
+ }
2090
+
2091
+ .p-button {
2092
+ min-height: var(--p-button-min-height);
2093
+ }
2094
+
2095
+ .p-button-sm {
2096
+ min-height: var(--p-button-sm-min-height);
2097
+ }
2098
+
2099
+ .p-button-lg {
2100
+ min-height: var(--p-button-lg-min-height);
2101
+ }
2102
+
2103
+ .p-button.p-button-icon-only {
2104
+ min-width: var(--p-button-icon-only-width);
2105
+ }
2106
+
2107
+ .p-button-sm.p-button-icon-only {
2108
+ min-width: var(--p-button-sm-icon-only-width);
2109
+ }
2110
+
2111
+ .p-button-lg.p-button-icon-only {
2112
+ min-width: var(--p-button-lg-icon-only-width);
2113
+ }
2114
+
2115
+ .p-divider {
2116
+ gap: var(--p-divider-content-gap);
2117
+ }
2118
+
2119
+ .p-inputgroupaddon {
2120
+ min-height: var(--p-inputgroup-addon-min-height);
2121
+ }
2122
+
2123
+ .p-inputtext {
2124
+ min-height: var(--p-inputtext-min-height);
2125
+ }
2126
+
2127
+ .p-inputtext-sm {
2128
+ min-height: var(--p-inputtext-sm-min-height);
2129
+ }
2130
+
2131
+ .p-inputtext-lg {
2132
+ min-height: var(--p-inputtext-lg-min-height);
2133
+ }
2134
+
2135
+ .p-message-text {
2136
+ line-height: var(--p-message-text-line-height);
2137
+ }
2138
+
2139
+ .p-multiselect {
2140
+ min-height: var(--p-multiselect-min-height);
2141
+ }
2142
+
2143
+ .p-multiselect-sm {
2144
+ min-height: var(--p-multiselect-sm-min-height);
2145
+ }
2146
+
2147
+ .p-multiselect-lg {
2148
+ min-height: var(--p-multiselect-lg-min-height);
2149
+ }
2150
+
2151
+ .p-multiselect-label-container {
2152
+ display: flex;
2153
+ align-items: center;
2154
+ }
2155
+
2156
+ .p-radiobutton {
2157
+ gap: var(--p-radiobutton-gap);
2158
+ border-radius: var(--p-radiobutton-border-radius);
2159
+ }
2160
+
2161
+ .p-radiobutton-icon {
2162
+ border-radius: var(--p-radiobutton-icon-border-radius);
2163
+ }
2164
+
2165
+ .p-radiobutton-icon-sm {
2166
+ border-radius: var(--p-radiobutton-icon-sm-border-radius);
2167
+ }
2168
+
2169
+ .p-radiobutton-icon-lg {
2170
+ border-radius: var(--p-radiobutton-icon-lg-border-radius);
2171
+ }
2172
+
2173
+ .p-select {
2174
+ min-height: var(--p-select-min-height);
2175
+ }
2176
+
2177
+ .p-select-sm {
2178
+ min-height: var(--p-select-sm-min-height);
2179
+ }
2180
+
2181
+ .p-select-lg {
2182
+ min-height: var(--p-select-lg-min-height);
2183
+ }
2184
+
2185
+ .p-select-label {
2186
+ display: flex;
2187
+ align-items: center;
2188
+ }
2189
+
2190
+ .p-select-option {
2191
+ gap: var(--p-select-option-gap);
2192
+ }
2193
+
2194
+ .p-textarea {
2195
+ min-height: var(--p-textarea-min-height);
2196
+ }
2197
+
2198
+ .p-togglebutton {
2199
+ min-height: var(--p-togglebutton-min-height);
2200
+ }
2201
+
2202
+ .p-togglebutton .p-togglebutton-sm {
2203
+ min-height: var(--p-togglebutton-sm-min-height);
2204
+ border-radius: var(--p-togglebutton-sm-border-radius);
2205
+ }
2206
+
2207
+ .p-togglebutton-lg {
2208
+ min-height: var(--p-togglebutton-lg-min-height);
2209
+ }
2210
+
2211
+ .p-togglebutton .p-togglebutton-content {
2212
+ min-height: var(--p-togglebutton-content-min-height);
2213
+ }
2214
+
2215
+ .p-togglebutton-sm .p-togglebutton-content {
2216
+ min-height: var(--p-togglebutton-content-sm-min-height);
2217
+ border-radius: var(--p-togglebutton-content-sm-border-radius);
2218
+ }
2219
+
2220
+ .p-togglebutton-lg .p-togglebutton-content {
2221
+ min-height: var(--p-togglebutton-content-lg-min-height);
2222
+ }
2223
+ }
2224
+
1950
2225
 
1951
2226
 
1952
2227
 
@@ -1974,7 +2249,7 @@
1974
2249
  }
1975
2250
 
1976
2251
  .bcc-nav-item-title {
1977
- @apply text-heading-xs text-center text-subtlest opacity-75;
2252
+ @apply heading-xs text-center text-subtlest opacity-75;
1978
2253
  }
1979
2254
 
1980
2255
  .bcc-app-nav-item--active .bcc-nav-item-title {
@@ -1999,16 +2274,16 @@
1999
2274
  @apply ctx-gradient;
2000
2275
  }
2001
2276
  .bcc-badge.sm {
2002
- @apply text-heading-xs h-4 w-4;
2277
+ @apply heading-xs h-4 w-4;
2003
2278
  }
2004
2279
  .bcc-badge.md {
2005
- @apply text-heading-sm h-5 w-5;
2280
+ @apply heading-sm h-5 w-5;
2006
2281
  }
2007
2282
  .bcc-badge.lg {
2008
- @apply text-heading-md h-6 w-6;
2283
+ @apply heading-md h-6 w-6;
2009
2284
  }
2010
2285
  .bcc-badge.xl {
2011
- @apply text-heading-md h-8 w-8;
2286
+ @apply heading-md h-8 w-8;
2012
2287
  }
2013
2288
 
2014
2289
  .bcc-badge .bcc-badge-icon {
@@ -2056,57 +2331,63 @@
2056
2331
 
2057
2332
  /* from ./BccCapacityIndicator/BccCapacityIndicator.css */
2058
2333
  @layer components {
2059
- .bcc-capacity-indicator {
2060
- @apply text-base;
2061
- }
2334
+ .bcc-capacity-indicator {
2335
+ @apply text-base;
2336
+ }
2062
2337
 
2063
- .bcc-capacity-indicator.xs {
2064
- @apply text-xs;
2065
- }
2338
+ .bcc-capacity-indicator.xs {
2339
+ @apply text-xs;
2340
+ }
2066
2341
 
2067
- .bcc-capacity-indicator.sm {
2068
- @apply text-sm;
2069
- }
2342
+ .bcc-capacity-indicator.sm {
2343
+ @apply text-sm;
2344
+ }
2070
2345
 
2071
- .bcc-capacity-indicator.lg {
2072
- @apply text-xl;
2073
- }
2346
+ .bcc-capacity-indicator.lg {
2347
+ @apply text-xl;
2348
+ }
2074
2349
 
2075
- .bcc-capacity-indicator {
2076
- --bcc-capacity-indicator-background: transparent;
2077
- --bcc-capacity-indicator-text: var(--ctx-text);
2078
- --bcc-capacity-indicator-circle: var(--ctx-background-pressed);
2079
- --bcc-capacity-indicator-circle-used: var(--ctx-border);
2080
- background: var(--bcc-capacity-indicator-background);
2081
- @apply ctx-gray-subtlest;
2082
- }
2350
+ .bcc-capacity-indicator {
2351
+ --bcc-capacity-indicator-background: transparent;
2352
+ --bcc-capacity-indicator-text: var(--ctx-text);
2353
+ --bcc-capacity-indicator-circle: var(--ctx-background);
2354
+ --bcc-capacity-indicator-circle-used: var(--color-brand-500);
2355
+ background: var(--bcc-capacity-indicator-background);
2356
+ @apply ctx-gray-subtlest;
2357
+ }
2083
2358
 
2084
- .bcc-capacity-indicator.colored {
2085
- --bcc-capacity-indicator-background: var(--ctx-background);
2086
- @apply ctx-blue-subtlest;
2087
- }
2359
+ .bcc-capacity-indicator.colored {
2360
+ --bcc-capacity-indicator-background: var(--ctx-background);
2361
+ --bcc-capacity-indicator-circle: var(--ctx-background-hover);
2362
+ --bcc-capacity-indicator-circle-used: var(--ctx-border);
2363
+ @apply ctx-blue-subtlest;
2364
+ }
2088
2365
 
2089
- .bcc-capacity-indicator .text {
2090
- color: var(--bcc-capacity-indicator-text);
2091
- }
2092
- .bcc-capacity-indicator .circle {
2093
- stroke: var(--bcc-capacity-indicator-circle);
2094
- }
2095
- .bcc-capacity-indicator .circle-used {
2096
- stroke: var(--bcc-capacity-indicator-circle-used);
2097
- }
2366
+ .bcc-capacity-indicator .text {
2367
+ color: var(--bcc-capacity-indicator-text);
2368
+ }
2369
+ .bcc-capacity-indicator .circle {
2370
+ stroke: var(--bcc-capacity-indicator-circle);
2371
+ }
2372
+ .bcc-capacity-indicator .circle-used {
2373
+ stroke: var(--bcc-capacity-indicator-circle-used);
2374
+ }
2098
2375
 
2099
- .bcc-capacity-indicator.is-warning {
2100
- @apply ctx-yellow-subtlest;
2101
- --bcc-capacity-indicator-circle: var(--ctx-background);
2102
- }
2376
+ .bcc-capacity-indicator.is-warning {
2377
+ @apply ctx-yellow-subtlest;
2378
+ --bcc-capacity-indicator-circle-used: var(--ctx-border);
2379
+ }
2103
2380
 
2104
- .bcc-capacity-indicator.is-full {
2105
- @apply ctx-red-subtlest;
2106
- }
2381
+ .bcc-capacity-indicator.is-full {
2382
+ @apply ctx-red-subtlest;
2383
+
2384
+ --bcc-capacity-indicator-circle: var(--ctx-background);
2385
+ --bcc-capacity-indicator-circle-used: var(--ctx-border);
2386
+ }
2107
2387
  }
2108
2388
 
2109
2389
 
2390
+
2110
2391
  /* from ./BccDialKnob/BccDialKnob.css */
2111
2392
  @layer components {
2112
2393
  .bcc-knob {
@@ -2140,40 +2421,43 @@
2140
2421
 
2141
2422
  /* from ./BccFrame/BccFrame.css */
2142
2423
  @layer components {
2143
- .bcc-frame {
2144
- @apply ctx ctx-default w-full;
2145
- }
2424
+ .bcc-frame {
2425
+ @apply ctx ctx-default w-full border border-transparent;
2426
+ }
2146
2427
 
2147
- .bcc-frame.bcc-frame--shadow {
2148
- @apply shadow shadow-ctx;
2149
- }
2428
+ .bcc-frame.bcc-frame--shadow {
2429
+ @apply shadow-ctx shadow;
2430
+ }
2150
2431
 
2151
- .bcc-frame--raised {
2152
- --ctx-background: var(--color-elevation-surface-raised-default);
2153
- }
2154
- .bcc-frame--rounded {
2155
- @apply rounded-md;
2156
- }
2157
- .bcc-frame--raised.bcc-frame--shadow {
2158
- @apply shadow-raised;
2159
- }
2432
+ .bcc-frame--raised {
2433
+ --ctx-background: var(--color-elevation-surface-raised-default);
2434
+ }
2435
+ .bcc-frame--rounded {
2436
+ @apply rounded-md;
2437
+ }
2438
+ .bcc-frame--raised.bcc-frame--shadow {
2439
+ @apply shadow-raised dark:border-default;
2440
+ }
2160
2441
 
2161
- .bcc-frame--overlay {
2162
- --ctx-background: var(--color-elevation-surface-overlay-default);
2163
- }
2164
- .bcc-frame--overlay.bcc-frame--shadow {
2165
- @apply shadow-overlay;
2166
- }
2442
+ .bcc-frame--overlay {
2443
+ --ctx-background: var(--color-elevation-surface-overlay-default);
2444
+ @apply border;
2445
+ }
2446
+ .bcc-frame--overlay.bcc-frame--shadow {
2447
+ @apply shadow-overlay dark:border-default;
2448
+ }
2167
2449
 
2168
- .bcc-frame--sunken {
2169
- --ctx-background: var(--color-elevation-surface-sunken-default);
2170
- }
2171
- .bcc-frame--sunken.bcc-frame--shadow {
2172
- @apply shadow-inner;
2173
- }
2450
+ .bcc-frame--sunken {
2451
+ --ctx-background: var(--color-elevation-surface-sunken-default);
2452
+ @apply border;
2453
+ }
2454
+ .bcc-frame--sunken.bcc-frame--shadow {
2455
+ @apply dark:border-default shadow-inner;
2456
+ }
2174
2457
  }
2175
2458
 
2176
2459
 
2460
+
2177
2461
  /* from ./BccGraphic/BccGraphic.css */
2178
2462
  @layer components {
2179
2463
  .bcc-graphic .corner,
@@ -2277,60 +2561,60 @@
2277
2561
 
2278
2562
  /* from ./BccNpsScore/BccNpsScore.css */
2279
2563
  @layer components {
2280
- .bcc-nps-score {
2281
- @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2 select-none;
2282
- }
2564
+ .bcc-nps-score {
2565
+ @apply body-sm flex min-w-70 flex-col gap-y-2 p-4 select-none;
2566
+ }
2283
2567
 
2284
- .bcc-nps-score--heading {
2285
- @apply flex items-center justify-between;
2286
- }
2568
+ .bcc-nps-score--heading {
2569
+ @apply flex items-center justify-between;
2570
+ }
2287
2571
 
2288
- .bcc-nps-score--label {
2289
- @apply flex-1 truncate;
2290
- }
2572
+ .bcc-nps-score--label {
2573
+ @apply flex-1 truncate;
2574
+ }
2291
2575
 
2292
- .bcc-nps-score--bar {
2293
- @apply flex justify-evenly rounded-xl text-white pointer-events-none;
2294
- @apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
2295
- }
2576
+ .bcc-nps-score--bar {
2577
+ @apply pointer-events-none flex justify-evenly rounded-xl text-white;
2578
+ @apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
2579
+ }
2296
2580
 
2297
- .bcc-nps-score--bar.reverse {
2298
- @apply bg-linear-to-l;
2299
- }
2581
+ .bcc-nps-score--bar.reverse {
2582
+ @apply bg-linear-to-l;
2583
+ }
2300
2584
 
2301
- .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
2302
- @apply bg-ctx ctx-gray-subtlest text-disabled;
2303
- }
2585
+ .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
2586
+ @apply bg-ctx ctx-gray-subtlest text-disabled;
2587
+ }
2304
2588
 
2305
- .bcc-nps-score--number {
2306
- @apply border-border-inverse;
2307
- @apply flex h-8 flex-1 items-center justify-center border-r-2 font-bold text-sm leading-none;
2308
- @apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
2309
- }
2589
+ .bcc-nps-score--number {
2590
+ @apply border-inverse;
2591
+ @apply flex h-8 flex-1 items-center justify-center border-r-2 text-sm leading-none font-bold;
2592
+ @apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
2593
+ }
2310
2594
 
2311
- .bcc-nps-score--number:disabled {
2312
- @apply cursor-not-allowed;
2313
- }
2595
+ .bcc-nps-score--number:disabled {
2596
+ @apply cursor-not-allowed;
2597
+ }
2314
2598
 
2315
- .bcc-nps-score--number.active {
2316
- @apply pointer-events-none;
2317
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2318
- }
2599
+ .bcc-nps-score--number.active {
2600
+ @apply pointer-events-none;
2601
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2602
+ }
2319
2603
 
2320
- .bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
2321
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2322
- }
2604
+ .bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
2605
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2606
+ }
2323
2607
 
2324
- .bcc-nps-score--number.inactive {
2325
- @apply bg-ctx text-ctx ctx-gray-subtler;
2326
- }
2608
+ .bcc-nps-score--number.inactive {
2609
+ @apply bg-ctx text-ctx ctx-gray-subtler;
2610
+ }
2327
2611
 
2328
- .bcc-nps-score--number:first-child {
2329
- @apply rounded-l-xl pl-0.5;
2330
- }
2331
- .bcc-nps-score--number:last-child{
2332
- @apply rounded-r-xl border-r-0 pr-0.5;
2333
- }
2612
+ .bcc-nps-score--number:first-child {
2613
+ @apply rounded-l-xl pl-0.5;
2614
+ }
2615
+ .bcc-nps-score--number:last-child {
2616
+ @apply rounded-r-xl border-r-0 pr-0.5;
2617
+ }
2334
2618
  }
2335
2619
 
2336
2620
 
@@ -2430,27 +2714,27 @@
2430
2714
 
2431
2715
 
2432
2716
  /* from ./BccTag/BccTag.css */
2433
-
2434
2717
  @layer components {
2435
2718
  .bcc-tag.bcc-badge {
2436
2719
  @apply w-auto;
2437
2720
  }
2438
2721
  .bcc-tag.bcc-badge.md {
2439
- @apply font-regular h-6;
2722
+ @apply body-md h-6;
2440
2723
  }
2441
2724
  .bcc-tag.bcc-badge.sm {
2442
- @apply font-regular h-5;
2725
+ @apply body-sm h-5;
2443
2726
  }
2444
2727
  .bcc-tag.bcc-badge.lg {
2445
- @apply font-regular h-8;
2728
+ @apply body-md h-8;
2446
2729
  }
2447
2730
  .bcc-tag.bcc-badge.xl {
2448
- @apply font-regular h-10;
2731
+ @apply body-lg h-10;
2449
2732
  }
2450
2733
  }
2451
2734
 
2452
2735
 
2453
2736
 
2737
+
2454
2738
  /* === ./components/wrapped/styles.css === */
2455
2739
 
2456
2740
  /* from ./BccAvatar/BccAvatar.css */