@bcc-code/component-library-vue 1.1.0 → 1.3.0

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
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcc-code/component-library-vue",
3
- "version": "1.1.0",
3
+ "version": "1.3.0",
4
4
  "type": "module",
5
5
  "description": "Extended Vue component library based on PrimeVue and BCC design tokens",
6
6
  "repository": "https://github.com/bcc-code/bcc-design.git",
@@ -54,7 +54,7 @@
54
54
  "create-version": "node ./scripts/version.cjs"
55
55
  },
56
56
  "dependencies": {
57
- "@bcc-code/design-tokens": "^5.1.83",
57
+ "@bcc-code/design-tokens": "^5.2.1",
58
58
  "@bcc-code/icons-vue": "^1.4.0",
59
59
  "@primeuix/themes": "^2.0.3",
60
60
  "@tailwindcss/vite": "^4.1.18",