@bcc-code/design-tokens 1.0.1 → 1.0.2
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/build/bcc/primevue/index.js +256 -252
- package/build/bcc/primevue/index.ts +47 -0
- package/package.json +5 -2
|
@@ -1,295 +1,299 @@
|
|
|
1
|
-
import { definePreset } from '@primevue/themes';
|
|
2
|
-
import Aura from '@primevue/themes/aura';
|
|
3
|
-
|
|
4
1
|
/**
|
|
5
2
|
* BCC Design Tokens Preset for PrimeVue v4
|
|
6
|
-
*
|
|
3
|
+
*
|
|
7
4
|
* This preset extends the Aura theme with BCC design tokens.
|
|
8
|
-
* It maps your core design tokens to PrimeVue's semantic system while
|
|
5
|
+
* It maps your core design tokens to PrimeVue's semantic system while
|
|
9
6
|
* keeping Aura's component-specific styling as fallback.
|
|
10
|
-
*
|
|
7
|
+
*
|
|
11
8
|
* Usage:
|
|
12
9
|
* ```javascript
|
|
13
|
-
* import
|
|
14
|
-
*
|
|
10
|
+
* import PrimeVue from "primevue/config";
|
|
11
|
+
* import { definePreset } from '@primevue/themes';
|
|
12
|
+
* import Aura from '@primevue/themes/aura';
|
|
13
|
+
* import BCCPresetConfig from '@bcc-code/design-tokens/bcc/primevue';
|
|
14
|
+
*
|
|
15
|
+
* const BCCPreset = definePreset(Aura, BCCPresetConfig);
|
|
16
|
+
*
|
|
15
17
|
* app.use(PrimeVue, {
|
|
16
18
|
* theme: {
|
|
17
19
|
* preset: BCCPreset,
|
|
18
20
|
* options: {
|
|
19
21
|
* darkModeSelector: '.dark'
|
|
20
22
|
* }
|
|
21
|
-
* }
|
|
23
|
+
* },
|
|
22
24
|
* });
|
|
25
|
+
*
|
|
26
|
+
* app.mount("#app");
|
|
23
27
|
* ```
|
|
24
|
-
*
|
|
28
|
+
*
|
|
25
29
|
* Make sure to import your CSS tokens first:
|
|
26
30
|
* ```javascript
|
|
27
|
-
* import '@bcc-code/design-tokens/bcc/cdn
|
|
31
|
+
* import '@bcc-code/design-tokens/bcc/cdn';
|
|
28
32
|
* ```
|
|
29
33
|
*/
|
|
30
34
|
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
35
|
+
const BCCPresetConfig = {
|
|
36
|
+
semantic: {
|
|
37
|
+
// PRIMARY: Map BCC brand colors to PrimeVue primary system
|
|
38
|
+
primary: {
|
|
39
|
+
50: "var(--color-bcc-100)", // Lightest tint
|
|
40
|
+
100: "var(--color-bcc-200)",
|
|
41
|
+
200: "var(--color-bcc-300)",
|
|
42
|
+
300: "var(--color-bcc-400)",
|
|
43
|
+
400: "var(--color-bcc-500)",
|
|
44
|
+
500: "var(--color-bcc-600)", // Main brand color - primary action color
|
|
45
|
+
600: "var(--color-bcc-700)",
|
|
46
|
+
700: "var(--color-bcc-800)",
|
|
47
|
+
800: "var(--color-bcc-900)",
|
|
48
|
+
900: "var(--color-bcc-1000)", // Darkest shade
|
|
49
|
+
950: "var(--color-bcc-1000)", // Extra dark (reuse darkest)
|
|
50
|
+
},
|
|
51
|
+
|
|
52
|
+
// SURFACES: Map your elevation/neutral tokens to PrimeVue surface system
|
|
53
|
+
surface: {
|
|
54
|
+
0: "var(--color-elevation-surface-default)", // Main background (white/dark)
|
|
55
|
+
50: "var(--color-elevation-surface-raised-default)", // Slightly elevated (cards)
|
|
56
|
+
100: "var(--color-elevation-surface-overlay-default)", // Modals, dropdowns
|
|
57
|
+
200: "var(--color-neutral-200)", // Subtle contrast
|
|
58
|
+
300: "var(--color-neutral-300)", // Borders, dividers
|
|
59
|
+
400: "var(--color-neutral-400)", // Disabled elements
|
|
60
|
+
500: "var(--color-neutral-500)", // Placeholder text
|
|
61
|
+
600: "var(--color-neutral-600)", // Secondary text
|
|
62
|
+
700: "var(--color-neutral-700)", // Body text
|
|
63
|
+
800: "var(--color-neutral-800)", // Headings
|
|
64
|
+
900: "var(--color-neutral-900)", // High contrast text
|
|
65
|
+
950: "var(--color-neutral-1100)", // Highest contrast
|
|
66
|
+
},
|
|
67
|
+
|
|
68
|
+
// COLOR SCHEME: Define how colors behave in light and dark modes
|
|
69
|
+
colorScheme: {
|
|
70
|
+
light: {
|
|
71
|
+
// Primary action colors
|
|
34
72
|
primary: {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
400: 'var(--color-bcc-500)',
|
|
40
|
-
500: 'var(--color-bcc-600)', // Main brand color - primary action color
|
|
41
|
-
600: 'var(--color-bcc-700)',
|
|
42
|
-
700: 'var(--color-bcc-800)',
|
|
43
|
-
800: 'var(--color-bcc-900)',
|
|
44
|
-
900: 'var(--color-bcc-1000)', // Darkest shade
|
|
45
|
-
950: 'var(--color-bcc-1000)', // Extra dark (reuse darkest)
|
|
73
|
+
color: "var(--color-background-brand-default)",
|
|
74
|
+
contrastColor: "var(--color-text-inverse)",
|
|
75
|
+
hoverColor: "var(--color-background-brand-hover)",
|
|
76
|
+
activeColor: "var(--color-background-brand-pressed)",
|
|
46
77
|
},
|
|
47
78
|
|
|
48
|
-
//
|
|
79
|
+
// Surface colors for light mode
|
|
49
80
|
surface: {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
81
|
+
0: "var(--color-elevation-surface-default)",
|
|
82
|
+
50: "var(--color-elevation-surface-raised-default)",
|
|
83
|
+
100: "var(--color-elevation-surface-overlay-default)",
|
|
84
|
+
200: "var(--color-neutral-200)",
|
|
85
|
+
300: "var(--color-neutral-300)",
|
|
86
|
+
400: "var(--color-neutral-400)",
|
|
87
|
+
500: "var(--color-neutral-500)",
|
|
88
|
+
600: "var(--color-neutral-600)",
|
|
89
|
+
700: "var(--color-neutral-700)",
|
|
90
|
+
800: "var(--color-neutral-800)",
|
|
91
|
+
900: "var(--color-neutral-900)",
|
|
92
|
+
950: "var(--color-neutral-1100)",
|
|
62
93
|
},
|
|
63
94
|
|
|
64
|
-
//
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
hoverColor: 'var(--color-background-brand-hover)',
|
|
72
|
-
activeColor: 'var(--color-background-brand-pressed)',
|
|
73
|
-
},
|
|
74
|
-
|
|
75
|
-
// Surface colors for light mode
|
|
76
|
-
surface: {
|
|
77
|
-
0: 'var(--color-elevation-surface-default)',
|
|
78
|
-
50: 'var(--color-elevation-surface-raised-default)',
|
|
79
|
-
100: 'var(--color-elevation-surface-overlay-default)',
|
|
80
|
-
200: 'var(--color-neutral-200)',
|
|
81
|
-
300: 'var(--color-neutral-300)',
|
|
82
|
-
400: 'var(--color-neutral-400)',
|
|
83
|
-
500: 'var(--color-neutral-500)',
|
|
84
|
-
600: 'var(--color-neutral-600)',
|
|
85
|
-
700: 'var(--color-neutral-700)',
|
|
86
|
-
800: 'var(--color-neutral-800)',
|
|
87
|
-
900: 'var(--color-neutral-900)',
|
|
88
|
-
950: 'var(--color-neutral-1100)',
|
|
89
|
-
},
|
|
90
|
-
|
|
91
|
-
// Text colors
|
|
92
|
-
text: {
|
|
93
|
-
color: 'var(--color-text-default)',
|
|
94
|
-
hoverColor: 'var(--color-text-default)',
|
|
95
|
-
mutedColor: 'var(--color-text-subtle)',
|
|
96
|
-
highlightColor: 'var(--color-text-selected)',
|
|
97
|
-
},
|
|
95
|
+
// Text colors
|
|
96
|
+
text: {
|
|
97
|
+
color: "var(--color-text-default)",
|
|
98
|
+
hoverColor: "var(--color-text-default)",
|
|
99
|
+
mutedColor: "var(--color-text-subtle)",
|
|
100
|
+
highlightColor: "var(--color-text-selected)",
|
|
101
|
+
},
|
|
98
102
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
103
|
+
// Content areas (forms, panels, etc.)
|
|
104
|
+
content: {
|
|
105
|
+
background: "var(--color-elevation-surface-default)",
|
|
106
|
+
hoverBackground: "var(--color-elevation-surface-hovered)",
|
|
107
|
+
borderColor: "var(--color-border-default)",
|
|
108
|
+
color: "var(--color-text-default)",
|
|
109
|
+
hoverColor: "var(--color-text-default)",
|
|
110
|
+
},
|
|
107
111
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
}
|
|
112
|
+
// Navigation (menus, breadcrumbs, etc.)
|
|
113
|
+
navigation: {
|
|
114
|
+
list: {
|
|
115
|
+
padding: "var(--space-150)",
|
|
116
|
+
gap: "var(--space-50)",
|
|
117
|
+
},
|
|
118
|
+
item: {
|
|
119
|
+
focusBackground: "var(--color-background-neutral-subtle-hover)",
|
|
120
|
+
activeBackground: "var(--color-background-brand-subtle-default)",
|
|
121
|
+
color: "var(--color-text-default)",
|
|
122
|
+
focusColor: "var(--color-text-default)",
|
|
123
|
+
activeColor: "var(--color-text-selected)",
|
|
124
|
+
padding: "var(--space-150)",
|
|
125
|
+
borderRadius: "var(--border-radius-md)",
|
|
126
|
+
gap: "var(--space-150)",
|
|
127
|
+
icon: {
|
|
128
|
+
color: "var(--color-icon-default)",
|
|
129
|
+
focusColor: "var(--color-icon-default)",
|
|
130
|
+
activeColor: "var(--color-icon-selected)",
|
|
130
131
|
},
|
|
132
|
+
},
|
|
133
|
+
},
|
|
134
|
+
},
|
|
131
135
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
// Surface colors for dark mode (your CSS variables handle the switching)
|
|
142
|
-
surface: {
|
|
143
|
-
0: 'var(--color-elevation-surface-default)',
|
|
144
|
-
50: 'var(--color-elevation-surface-raised-default)',
|
|
145
|
-
100: 'var(--color-elevation-surface-overlay-default)',
|
|
146
|
-
200: 'var(--color-neutral-200)',
|
|
147
|
-
300: 'var(--color-neutral-300)',
|
|
148
|
-
400: 'var(--color-neutral-400)',
|
|
149
|
-
500: 'var(--color-neutral-500)',
|
|
150
|
-
600: 'var(--color-neutral-600)',
|
|
151
|
-
700: 'var(--color-neutral-700)',
|
|
152
|
-
800: 'var(--color-neutral-800)',
|
|
153
|
-
900: 'var(--color-neutral-900)',
|
|
154
|
-
950: 'var(--color-neutral-1100)',
|
|
155
|
-
},
|
|
156
|
-
|
|
157
|
-
// Text colors (your tokens handle light/dark switching)
|
|
158
|
-
text: {
|
|
159
|
-
color: 'var(--color-text-default)',
|
|
160
|
-
hoverColor: 'var(--color-text-default)',
|
|
161
|
-
mutedColor: 'var(--color-text-subtle)',
|
|
162
|
-
highlightColor: 'var(--color-text-selected)',
|
|
163
|
-
},
|
|
136
|
+
dark: {
|
|
137
|
+
// Primary colors (same as light - your tokens handle the mode switching)
|
|
138
|
+
primary: {
|
|
139
|
+
color: "var(--color-background-brand-default)",
|
|
140
|
+
contrastColor: "var(--color-text-inverse)",
|
|
141
|
+
hoverColor: "var(--color-background-brand-hover)",
|
|
142
|
+
activeColor: "var(--color-background-brand-pressed)",
|
|
143
|
+
},
|
|
164
144
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
145
|
+
// Surface colors for dark mode (your CSS variables handle the switching)
|
|
146
|
+
surface: {
|
|
147
|
+
0: "var(--color-elevation-surface-default)",
|
|
148
|
+
50: "var(--color-elevation-surface-raised-default)",
|
|
149
|
+
100: "var(--color-elevation-surface-overlay-default)",
|
|
150
|
+
200: "var(--color-neutral-200)",
|
|
151
|
+
300: "var(--color-neutral-300)",
|
|
152
|
+
400: "var(--color-neutral-400)",
|
|
153
|
+
500: "var(--color-neutral-500)",
|
|
154
|
+
600: "var(--color-neutral-600)",
|
|
155
|
+
700: "var(--color-neutral-700)",
|
|
156
|
+
800: "var(--color-neutral-800)",
|
|
157
|
+
900: "var(--color-neutral-900)",
|
|
158
|
+
950: "var(--color-neutral-1100)",
|
|
159
|
+
},
|
|
172
160
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
activeBackground: 'var(--color-background-brand-subtle-default)',
|
|
181
|
-
color: 'var(--color-text-default)',
|
|
182
|
-
focusColor: 'var(--color-text-default)',
|
|
183
|
-
activeColor: 'var(--color-text-selected)',
|
|
184
|
-
padding: 'var(--space-150)',
|
|
185
|
-
borderRadius: 'var(--border-radius-md)',
|
|
186
|
-
gap: 'var(--space-150)',
|
|
187
|
-
icon: {
|
|
188
|
-
color: 'var(--color-icon-default)',
|
|
189
|
-
focusColor: 'var(--color-icon-default)',
|
|
190
|
-
activeColor: 'var(--color-icon-selected)',
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
},
|
|
161
|
+
// Text colors (your tokens handle light/dark switching)
|
|
162
|
+
text: {
|
|
163
|
+
color: "var(--color-text-default)",
|
|
164
|
+
hoverColor: "var(--color-text-default)",
|
|
165
|
+
mutedColor: "var(--color-text-subtle)",
|
|
166
|
+
highlightColor: "var(--color-text-selected)",
|
|
167
|
+
},
|
|
197
168
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
x: 'var(--space-300)', // 24px horizontal padding
|
|
205
|
-
y: 'var(--space-150)', // 12px vertical padding
|
|
206
|
-
},
|
|
207
|
-
sm: {
|
|
208
|
-
fontSize: 'var(--font-size-sm)',
|
|
209
|
-
padding: {
|
|
210
|
-
x: 'var(--space-200)', // 16px horizontal
|
|
211
|
-
y: 'var(--space-100)', // 8px vertical
|
|
212
|
-
},
|
|
213
|
-
},
|
|
214
|
-
lg: {
|
|
215
|
-
fontSize: 'var(--font-size-lg)',
|
|
216
|
-
padding: {
|
|
217
|
-
x: 'var(--space-400)', // 32px horizontal
|
|
218
|
-
y: 'var(--space-200)', // 16px vertical
|
|
219
|
-
},
|
|
220
|
-
}
|
|
169
|
+
content: {
|
|
170
|
+
background: "var(--color-elevation-surface-default)",
|
|
171
|
+
hoverBackground: "var(--color-elevation-surface-hovered)",
|
|
172
|
+
borderColor: "var(--color-border-default)",
|
|
173
|
+
color: "var(--color-text-default)",
|
|
174
|
+
hoverColor: "var(--color-text-default)",
|
|
221
175
|
},
|
|
222
176
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
177
|
+
navigation: {
|
|
178
|
+
list: {
|
|
179
|
+
padding: "var(--space-150)",
|
|
180
|
+
gap: "var(--space-50)",
|
|
181
|
+
},
|
|
182
|
+
item: {
|
|
183
|
+
focusBackground: "var(--color-background-neutral-subtle-hover)",
|
|
184
|
+
activeBackground: "var(--color-background-brand-subtle-default)",
|
|
185
|
+
color: "var(--color-text-default)",
|
|
186
|
+
focusColor: "var(--color-text-default)",
|
|
187
|
+
activeColor: "var(--color-text-selected)",
|
|
188
|
+
padding: "var(--space-150)",
|
|
189
|
+
borderRadius: "var(--border-radius-md)",
|
|
190
|
+
gap: "var(--space-150)",
|
|
191
|
+
icon: {
|
|
192
|
+
color: "var(--color-icon-default)",
|
|
193
|
+
focusColor: "var(--color-icon-default)",
|
|
194
|
+
activeColor: "var(--color-icon-selected)",
|
|
232
195
|
},
|
|
233
|
-
|
|
234
|
-
padding: 'var(--space-300)',
|
|
235
|
-
}
|
|
196
|
+
},
|
|
236
197
|
},
|
|
198
|
+
},
|
|
199
|
+
},
|
|
200
|
+
},
|
|
237
201
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
202
|
+
// COMPONENT CUSTOMIZATIONS: Apply your spacing and radius tokens to specific components
|
|
203
|
+
components: {
|
|
204
|
+
// Buttons
|
|
205
|
+
button: {
|
|
206
|
+
borderRadius: "var(--border-radius-md)",
|
|
207
|
+
padding: {
|
|
208
|
+
x: "var(--space-300)", // 24px horizontal padding
|
|
209
|
+
y: "var(--space-150)", // 12px vertical padding
|
|
210
|
+
},
|
|
211
|
+
sm: {
|
|
212
|
+
fontSize: "var(--font-size-sm)",
|
|
213
|
+
padding: {
|
|
214
|
+
x: "var(--space-200)", // 16px horizontal
|
|
215
|
+
y: "var(--space-100)", // 8px vertical
|
|
245
216
|
},
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
y: 'var(--space-150)',
|
|
253
|
-
}
|
|
217
|
+
},
|
|
218
|
+
lg: {
|
|
219
|
+
fontSize: "var(--font-size-lg)",
|
|
220
|
+
padding: {
|
|
221
|
+
x: "var(--space-400)", // 32px horizontal
|
|
222
|
+
y: "var(--space-200)", // 16px vertical
|
|
254
223
|
},
|
|
224
|
+
},
|
|
225
|
+
},
|
|
255
226
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
227
|
+
// Cards
|
|
228
|
+
card: {
|
|
229
|
+
borderRadius: "var(--border-radius-lg)",
|
|
230
|
+
body: {
|
|
231
|
+
padding: "var(--space-300)",
|
|
232
|
+
gap: "var(--space-200)",
|
|
233
|
+
},
|
|
234
|
+
header: {
|
|
235
|
+
padding: "var(--space-300)",
|
|
236
|
+
},
|
|
237
|
+
footer: {
|
|
238
|
+
padding: "var(--space-300)",
|
|
239
|
+
},
|
|
240
|
+
},
|
|
264
241
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
},
|
|
274
|
-
footer: {
|
|
275
|
-
padding: 'var(--space-400)',
|
|
276
|
-
}
|
|
277
|
-
},
|
|
242
|
+
// Panels (accordions, fieldsets, etc.)
|
|
243
|
+
panel: {
|
|
244
|
+
borderRadius: "var(--border-radius-lg)",
|
|
245
|
+
header: {
|
|
246
|
+
padding: "var(--space-300)",
|
|
247
|
+
borderRadius: "var(--border-radius-lg) var(--border-radius-lg) 0 0",
|
|
248
|
+
},
|
|
249
|
+
},
|
|
278
250
|
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
251
|
+
// Form inputs
|
|
252
|
+
inputtext: {
|
|
253
|
+
borderRadius: "var(--border-radius-md)",
|
|
254
|
+
padding: {
|
|
255
|
+
x: "var(--space-200)",
|
|
256
|
+
y: "var(--space-150)",
|
|
257
|
+
},
|
|
258
|
+
},
|
|
259
|
+
|
|
260
|
+
// Dropdowns and selects
|
|
261
|
+
dropdown: {
|
|
262
|
+
borderRadius: "var(--border-radius-md)",
|
|
263
|
+
padding: {
|
|
264
|
+
x: "var(--space-200)",
|
|
265
|
+
y: "var(--space-150)",
|
|
266
|
+
},
|
|
267
|
+
},
|
|
268
|
+
|
|
269
|
+
// Dialogs and overlays
|
|
270
|
+
dialog: {
|
|
271
|
+
borderRadius: "var(--border-radius-xl)",
|
|
272
|
+
header: {
|
|
273
|
+
padding: "var(--space-400)",
|
|
274
|
+
},
|
|
275
|
+
content: {
|
|
276
|
+
padding: "var(--space-400)",
|
|
277
|
+
},
|
|
278
|
+
footer: {
|
|
279
|
+
padding: "var(--space-400)",
|
|
280
|
+
},
|
|
281
|
+
},
|
|
282
|
+
|
|
283
|
+
// Data tables
|
|
284
|
+
datatable: {
|
|
285
|
+
header: {
|
|
286
|
+
cell: {
|
|
287
|
+
padding: "var(--space-200)",
|
|
288
|
+
},
|
|
289
|
+
},
|
|
290
|
+
body: {
|
|
291
|
+
cell: {
|
|
292
|
+
padding: "var(--space-200)",
|
|
293
|
+
},
|
|
294
|
+
},
|
|
295
|
+
},
|
|
296
|
+
},
|
|
297
|
+
};
|
|
294
298
|
|
|
295
|
-
export default
|
|
299
|
+
export default BCCPresetConfig;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BCC Design Tokens Preset Configuration for PrimeVue v4
|
|
3
|
+
*
|
|
4
|
+
* This preset configuration object extends the Aura theme with BCC design tokens.
|
|
5
|
+
* It maps your core design tokens to PrimeVue's semantic system while
|
|
6
|
+
* keeping Aura's component-specific styling as fallback.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```typescript
|
|
10
|
+
* import { definePreset } from '@primevue/themes';
|
|
11
|
+
* import Aura from '@primevue/themes/aura';
|
|
12
|
+
* import BCCPresetConfig from '@bcc-code/design-tokens/bcc/primevue';
|
|
13
|
+
*
|
|
14
|
+
* const BCCPreset = definePreset(Aura, BCCPresetConfig);
|
|
15
|
+
*
|
|
16
|
+
* app.use(PrimeVue, {
|
|
17
|
+
* theme: {
|
|
18
|
+
* preset: BCCPreset,
|
|
19
|
+
* options: {
|
|
20
|
+
* darkModeSelector: '.dark'
|
|
21
|
+
* }
|
|
22
|
+
* }
|
|
23
|
+
* });
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* Make sure to import your CSS tokens first:
|
|
28
|
+
* ```typescript
|
|
29
|
+
* import '@bcc-code/design-tokens/bcc/cdn';
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
|
|
33
|
+
interface BCCPresetConfig {
|
|
34
|
+
semantic?: {
|
|
35
|
+
primary?: Record<string, string>;
|
|
36
|
+
surface?: Record<string, string>;
|
|
37
|
+
colorScheme?: {
|
|
38
|
+
light?: Record<string, any>;
|
|
39
|
+
dark?: Record<string, any>;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
components?: Record<string, any>;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
declare const BCCPresetConfig: BCCPresetConfig;
|
|
46
|
+
|
|
47
|
+
export default BCCPresetConfig;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bcc-code/design-tokens",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Design tokens with CSS variables, Tailwind v4, and framework presets.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "build/bcc/cdn/variables.css",
|
|
@@ -12,7 +12,10 @@
|
|
|
12
12
|
"./bcc/tailwind/light": "./build/bcc/tailwind/light.css",
|
|
13
13
|
"./bcc/tailwind/dark": "./build/bcc/tailwind/dark.css",
|
|
14
14
|
"./bcc/tailwind/utilities": "./build/bcc/tailwind/utilities.css",
|
|
15
|
-
"./bcc/primevue":
|
|
15
|
+
"./bcc/primevue": {
|
|
16
|
+
"types": "./build/bcc/primevue/index.d.ts",
|
|
17
|
+
"default": "./build/bcc/primevue/index.js"
|
|
18
|
+
}
|
|
16
19
|
},
|
|
17
20
|
"files": [
|
|
18
21
|
"build/**/*",
|