@bcc-code/component-library-vue 0.0.0-dev.9909a66 → 0.0.0-dev.99caa58

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 {
@@ -2281,7 +2556,7 @@
2281
2556
  /* from ./BccNpsScore/BccNpsScore.css */
2282
2557
  @layer components {
2283
2558
  .bcc-nps-score {
2284
- @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2 select-none;
2559
+ @apply min-w-70 p-4 body-sm flex flex-col gap-y-2 select-none;
2285
2560
  }
2286
2561
 
2287
2562
  .bcc-nps-score--heading {
@@ -2438,16 +2713,16 @@
2438
2713
  @apply w-auto;
2439
2714
  }
2440
2715
  .bcc-tag.bcc-badge.md {
2441
- @apply text-body-md h-6;
2716
+ @apply body-md h-6;
2442
2717
  }
2443
2718
  .bcc-tag.bcc-badge.sm {
2444
- @apply text-body-sm h-5;
2719
+ @apply body-sm h-5;
2445
2720
  }
2446
2721
  .bcc-tag.bcc-badge.lg {
2447
- @apply text-body-md h-8;
2722
+ @apply body-md h-8;
2448
2723
  }
2449
2724
  .bcc-tag.bcc-badge.xl {
2450
- @apply text-body-lg h-10;
2725
+ @apply body-lg h-10;
2451
2726
  }
2452
2727
  }
2453
2728
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcc-code/component-library-vue",
3
- "version": "0.0.0-dev.9909a66",
3
+ "version": "0.0.0-dev.99caa58",
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.80",
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",
@@ -78,6 +78,7 @@
78
78
  "autoprefixer": "^10.4.20",
79
79
  "eslint": "^9.39.2",
80
80
  "eslint-plugin-prettier": "^5.5.5",
81
+ "eslint-plugin-storybook": "10.3.5",
81
82
  "eslint-plugin-vue": "^10.7.0",
82
83
  "globals": "^17.3.0",
83
84
  "http-server": "^14.1.1",
@@ -96,8 +97,7 @@
96
97
  "vite": "^7.3.0",
97
98
  "vitest": "^4.0.18",
98
99
  "vue": "^3.5.0",
99
- "vue-tsc": "^3.2.4",
100
- "eslint-plugin-storybook": "10.3.5"
100
+ "vue-tsc": "^3.2.4"
101
101
  },
102
102
  "pnpm": {
103
103
  "patchedDependencies": {