@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.
Files changed (3) hide show
  1. package/build/bcc/primevue/index.js +256 -252
  2. package/build/bcc/primevue/index.ts +47 -0
  3. package/package.json +5 -2
package/build/bcc/primevue/index.js CHANGED
@@ -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 BCCPreset from '@bcc-code/design-tokens/presets/primevue/bcc';
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/variables.css';
31
+ * import '@bcc-code/design-tokens/bcc/cdn';
28
32
  * ```
29
33
  */
30
34
 
31
- const BCCPreset = definePreset(Aura, {
32
- semantic: {
33
- // PRIMARY: Map BCC brand colors to PrimeVue primary system
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
- 50: 'var(--color-bcc-100)', // Lightest tint
36
- 100: 'var(--color-bcc-200)',
37
- 200: 'var(--color-bcc-300)',
38
- 300: 'var(--color-bcc-400)',
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
- // SURFACES: Map your elevation/neutral tokens to PrimeVue surface system
79
+ // Surface colors for light mode
49
80
  surface: {
50
- 0: 'var(--color-elevation-surface-default)', // Main background (white/dark)
51
- 50: 'var(--color-elevation-surface-raised-default)', // Slightly elevated (cards)
52
- 100: 'var(--color-elevation-surface-overlay-default)', // Modals, dropdowns
53
- 200: 'var(--color-neutral-200)', // Subtle contrast
54
- 300: 'var(--color-neutral-300)', // Borders, dividers
55
- 400: 'var(--color-neutral-400)', // Disabled elements
56
- 500: 'var(--color-neutral-500)', // Placeholder text
57
- 600: 'var(--color-neutral-600)', // Secondary text
58
- 700: 'var(--color-neutral-700)', // Body text
59
- 800: 'var(--color-neutral-800)', // Headings
60
- 900: 'var(--color-neutral-900)', // High contrast text
61
- 950: 'var(--color-neutral-1100)', // Highest contrast
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
- // COLOR SCHEME: Define how colors behave in light and dark modes
65
- colorScheme: {
66
- light: {
67
- // Primary action colors
68
- primary: {
69
- color: 'var(--color-background-brand-default)',
70
- contrastColor: 'var(--color-text-inverse)',
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
- // Content areas (forms, panels, etc.)
100
- content: {
101
- background: 'var(--color-elevation-surface-default)',
102
- hoverBackground: 'var(--color-elevation-surface-hovered)',
103
- borderColor: 'var(--color-border-default)',
104
- color: 'var(--color-text-default)',
105
- hoverColor: 'var(--color-text-default)',
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
- // Navigation (menus, breadcrumbs, etc.)
109
- navigation: {
110
- list: {
111
- padding: 'var(--space-150)',
112
- gap: 'var(--space-50)',
113
- },
114
- item: {
115
- focusBackground: 'var(--color-background-neutral-subtle-hover)',
116
- activeBackground: 'var(--color-background-brand-subtle-default)',
117
- color: 'var(--color-text-default)',
118
- focusColor: 'var(--color-text-default)',
119
- activeColor: 'var(--color-text-selected)',
120
- padding: 'var(--space-150)',
121
- borderRadius: 'var(--border-radius-md)',
122
- gap: 'var(--space-150)',
123
- icon: {
124
- color: 'var(--color-icon-default)',
125
- focusColor: 'var(--color-icon-default)',
126
- activeColor: 'var(--color-icon-selected)',
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
- dark: {
133
- // Primary colors (same as light - your tokens handle the mode switching)
134
- primary: {
135
- color: 'var(--color-background-brand-default)',
136
- contrastColor: 'var(--color-text-inverse)',
137
- hoverColor: 'var(--color-background-brand-hover)',
138
- activeColor: 'var(--color-background-brand-pressed)',
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
- content: {
166
- background: 'var(--color-elevation-surface-default)',
167
- hoverBackground: 'var(--color-elevation-surface-hovered)',
168
- borderColor: 'var(--color-border-default)',
169
- color: 'var(--color-text-default)',
170
- hoverColor: 'var(--color-text-default)',
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
- navigation: {
174
- list: {
175
- padding: 'var(--space-150)',
176
- gap: 'var(--space-50)',
177
- },
178
- item: {
179
- focusBackground: 'var(--color-background-neutral-subtle-hover)',
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
- // COMPONENT CUSTOMIZATIONS: Apply your spacing and radius tokens to specific components
199
- components: {
200
- // Buttons
201
- button: {
202
- borderRadius: 'var(--border-radius-md)',
203
- padding: {
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
- // Cards
224
- card: {
225
- borderRadius: 'var(--border-radius-lg)',
226
- body: {
227
- padding: 'var(--space-300)',
228
- gap: 'var(--space-200)',
229
- },
230
- header: {
231
- padding: 'var(--space-300)',
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
- footer: {
234
- padding: 'var(--space-300)',
235
- }
196
+ },
236
197
  },
198
+ },
199
+ },
200
+ },
237
201
 
238
- // Panels (accordions, fieldsets, etc.)
239
- panel: {
240
- borderRadius: 'var(--border-radius-lg)',
241
- header: {
242
- padding: 'var(--space-300)',
243
- borderRadius: 'var(--border-radius-lg) var(--border-radius-lg) 0 0',
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
- // Form inputs
248
- inputtext: {
249
- borderRadius: 'var(--border-radius-md)',
250
- padding: {
251
- x: 'var(--space-200)',
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
- // Dropdowns and selects
257
- dropdown: {
258
- borderRadius: 'var(--border-radius-md)',
259
- padding: {
260
- x: 'var(--space-200)',
261
- y: 'var(--space-150)',
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
- // Dialogs and overlays
266
- dialog: {
267
- borderRadius: 'var(--border-radius-xl)',
268
- header: {
269
- padding: 'var(--space-400)',
270
- },
271
- content: {
272
- padding: 'var(--space-400)',
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
- // Data tables
280
- datatable: {
281
- header: {
282
- cell: {
283
- padding: 'var(--space-200)',
284
- }
285
- },
286
- body: {
287
- cell: {
288
- padding: 'var(--space-200)',
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 BCCPreset;
299
+ export default BCCPresetConfig;
package/build/bcc/primevue/index.ts ADDED
@@ -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.1",
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": "./build/bcc/primevue/index.js"
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/**/*",