@bcc-code/design-tokens 0.5.0 → 1.0.1

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 (22) hide show
  1. package/README.md +252 -6
  2. package/build/bcc/cdn/dark.css +165 -0
  3. package/build/bcc/cdn/light.css +518 -0
  4. package/build/bcc/cdn/variables.css +685 -0
  5. package/build/bcc/primevue/index.js +295 -0
  6. package/build/bcc/tailwind/dark.css +165 -0
  7. package/build/bcc/tailwind/index.css +17 -0
  8. package/build/bcc/tailwind/light.css +519 -0
  9. package/build/bcc/tailwind/utilities.css +33 -0
  10. package/package.json +42 -24
  11. package/LICENSE +0 -201
  12. package/dist/design-tokens.js +0 -1445
  13. package/dist/design-tokens.umd.cjs +0 -1
  14. package/dist_types/index.d.ts +0 -1
  15. package/dist_types/tailwind/backgroundColor.d.ts +0 -65
  16. package/dist_types/tailwind/bccForbundetTheme.d.ts +0 -3
  17. package/dist_types/tailwind/borderColor.d.ts +0 -28
  18. package/dist_types/tailwind/colors.d.ts +0 -265
  19. package/dist_types/tailwind/fontFamily.d.ts +0 -4
  20. package/dist_types/tailwind/outlineColor.d.ts +0 -28
  21. package/dist_types/tailwind/ringColor.d.ts +0 -28
  22. package/dist_types/tailwind/textColor.d.ts +0 -31
package/build/bcc/primevue/index.js ADDED
@@ -0,0 +1,295 @@
1
+ import { definePreset } from '@primevue/themes';
2
+ import Aura from '@primevue/themes/aura';
3
+
4
+ /**
5
+ * BCC Design Tokens Preset for PrimeVue v4
6
+ *
7
+ * This preset extends the Aura theme with BCC design tokens.
8
+ * It maps your core design tokens to PrimeVue's semantic system while
9
+ * keeping Aura's component-specific styling as fallback.
10
+ *
11
+ * Usage:
12
+ * ```javascript
13
+ * import BCCPreset from '@bcc-code/design-tokens/presets/primevue/bcc';
14
+ *
15
+ * app.use(PrimeVue, {
16
+ * theme: {
17
+ * preset: BCCPreset,
18
+ * options: {
19
+ * darkModeSelector: '.dark'
20
+ * }
21
+ * }
22
+ * });
23
+ * ```
24
+ *
25
+ * Make sure to import your CSS tokens first:
26
+ * ```javascript
27
+ * import '@bcc-code/design-tokens/bcc/cdn/variables.css';
28
+ * ```
29
+ */
30
+
31
+ const BCCPreset = definePreset(Aura, {
32
+ semantic: {
33
+ // PRIMARY: Map BCC brand colors to PrimeVue primary system
34
+ 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)
46
+ },
47
+
48
+ // SURFACES: Map your elevation/neutral tokens to PrimeVue surface system
49
+ 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
62
+ },
63
+
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
+ },
98
+
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
+ },
107
+
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
+ }
130
+ },
131
+
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
+ },
164
+
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
+ },
172
+
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
+ },
197
+
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
+ }
221
+ },
222
+
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)',
232
+ },
233
+ footer: {
234
+ padding: 'var(--space-300)',
235
+ }
236
+ },
237
+
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
+ }
245
+ },
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
+ }
254
+ },
255
+
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
+ },
264
+
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
+ },
278
+
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
+ });
294
+
295
+ export default BCCPreset;
package/build/bcc/tailwind/dark.css ADDED
@@ -0,0 +1,165 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ @layer base {
6
+ @variant dark {
7
+
8
+ /* COLOR: TEXT */
9
+ --color-text-default: var(--color-dark-neutral-1100);
10
+ --color-text-subtle: var(--color-dark-neutral-600);
11
+ --color-text-subtler: var(--color-dark-neutral-400);
12
+ --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
13
+ --color-text-selected: var(--color-bcc-400);
14
+ --color-text-inverse: var(--color-dark-neutral-0);
15
+ --color-text-brand: var(--color-bcc-400);
16
+ --color-text-success: var(--color-green-500);
17
+ --color-text-warning: var(--color-red-500);
18
+ --color-text-information: var(--color-neutral-0);
19
+ --color-text-danger: var(--color-neutral-0);
20
+ --color-text-accent-orange-default: var(--color-orange-400);
21
+ --color-text-accent-orange-bold: var(--color-orange-300);
22
+ --color-text-accent-yellow-default: var(--color-red-400);
23
+ --color-text-accent-yellow-bold: var(--color-red-300);
24
+ --color-text-accent-green-default: var(--color-green-400);
25
+ --color-text-accent-green-bold: var(--color-green-300);
26
+ --color-text-accent-teal-default: var(--color-teal-400);
27
+ --color-text-accent-teal-bold: var(--color-teal-300);
28
+ --color-text-accent-brown-default: var(--color-brown-400);
29
+ --color-text-accent-brown-bold: var(--color-brown-300);
30
+ --color-text-accent-blue-default: var(--color-blue-400);
31
+ --color-text-accent-blue-bold: var(--color-blue-300);
32
+ --color-text-accent-purple-default: var(--color-purple-400);
33
+ --color-text-accent-purple-bold: var(--color-purple-300);
34
+ --color-text-accent-magenta-default: var(--color-magenta-400);
35
+ --color-text-accent-magenta-bold: var(--color-magenta-300);
36
+
37
+ /* COLOR: LINK */
38
+ --color-link-default: var(--color-blue-500);
39
+ --color-link-hover: var(--color-blue-400);
40
+ --color-link-visited-default: var(--color-blue-200);
41
+ --color-link-visited-hover: var(--color-blue-200);
42
+
43
+ /* COLOR: BACKGROUND */
44
+ --color-background-brand-default: var(--color-bcc-500);
45
+ --color-background-brand-hover: var(--color-bcc-400);
46
+ --color-background-brand-pressed: var(--color-bcc-300);
47
+ --color-background-brand-subtler-default: var(--color-bcc-200);
48
+ --color-background-brand-subtler-hover: var(--color-bcc-300);
49
+ --color-background-brand-subtler-pressed: var(--color-bcc-400);
50
+ --color-background-brand-subtle-default: var(--color-bcc-400);
51
+ --color-background-brand-subtle-hover: var(--color-bcc-500);
52
+ --color-background-brand-subtle-pressed: var(--color-bcc-500);
53
+ --color-background-brand-bold-default: var(--color-bcc-300);
54
+ --color-background-brand-bold-hover: var(--color-bcc-200);
55
+ --color-background-brand-bold-pressed: var(--color-bcc-1000);
56
+ --color-background-accent-red-default: var(--color-red-500);
57
+ --color-background-accent-red-hover: var(--color-red-400);
58
+ --color-background-accent-red-pressed: var(--color-red-300);
59
+ --color-background-accent-red-subtler-default: var(--color-red-200);
60
+ --color-background-accent-red-subtler-hover: var(--color-red-300);
61
+ --color-background-accent-red-subtler-pressed: var(--color-red-400);
62
+ --color-background-accent-red-subtle-default: var(--color-red-400);
63
+ --color-background-accent-red-subtle-hover: var(--color-red-500);
64
+ --color-background-accent-red-subtle-pressed: var(--color-red-500);
65
+ --color-background-accent-red-bold-default: var(--color-red-300);
66
+ --color-background-accent-red-bold-hover: var(--color-red-400);
67
+ --color-background-accent-red-bold-pressed: var(--color-red-500);
68
+ --color-background-accent-orange-default: var(--color-orange-500);
69
+ --color-background-accent-orange-hover: var(--color-orange-400);
70
+ --color-background-accent-orange-pressed: var(--color-orange-300);
71
+ --color-background-accent-orange-subtler-default: var(--color-orange-200);
72
+ --color-background-accent-orange-subtler-hover: var(--color-orange-300);
73
+ --color-background-accent-orange-subtler-pressed: var(--color-orange-400);
74
+ --color-background-accent-orange-subtle-default: var(--color-orange-400);
75
+ --color-background-accent-orange-subtle-hover: var(--color-orange-500);
76
+ --color-background-accent-orange-subtle-pressed: var(--color-orange-500);
77
+ --color-background-accent-orange-bold-default: var(--color-orange-300);
78
+ --color-background-accent-orange-bold-hover: var(--color-orange-400);
79
+ --color-background-accent-orange-bold-pressed: var(--color-orange-500);
80
+ --color-background-accent-green-default: var(--color-green-500);
81
+ --color-background-accent-green-hover: var(--color-green-500);
82
+ --color-background-accent-green-pressed: var(--color-green-400);
83
+ --color-background-accent-green-subtler-default: var(--color-green-200);
84
+ --color-background-accent-green-subtler-hover: var(--color-green-300);
85
+ --color-background-accent-green-subtler-pressed: var(--color-green-400);
86
+ --color-background-accent-green-subtle-default: var(--color-green-400);
87
+ --color-background-accent-green-subtle-hover: var(--color-green-500);
88
+ --color-background-accent-green-subtle-pressed: var(--color-green-500);
89
+ --color-background-accent-green-bold-default: var(--color-green-300);
90
+ --color-background-accent-green-bold-hover: var(--color-green-400);
91
+ --color-background-accent-green-bold-pressed: var(--color-green-500);
92
+ --color-background-accent-teal-default: var(--color-teal-500);
93
+ --color-background-accent-teal-hover: var(--color-teal-400);
94
+ --color-background-accent-teal-pressed: var(--color-teal-300);
95
+ --color-background-accent-teal-subtler-default: var(--color-teal-200);
96
+ --color-background-accent-teal-subtler-hover: var(--color-teal-300);
97
+ --color-background-accent-teal-subtle-default: var(--color-teal-400);
98
+ --color-background-accent-teal-bold-default: var(--color-teal-300);
99
+ --color-background-accent-sand-default: var(--color-brown-500);
100
+ --color-background-accent-sand-subtler-default: var(--color-brown-200);
101
+ --color-background-accent-sand-subtler-hover: var(--color-brown-300);
102
+ --color-background-accent-sand-subtle-default: var(--color-brown-400);
103
+ --color-background-accent-sand-bold-default: var(--color-brown-300);
104
+ --color-background-accent-blue-default: var(--color-blue-500);
105
+ --color-background-accent-blue-subtler-default: var(--color-blue-200);
106
+ --color-background-accent-blue-subtle-default: var(--color-blue-400);
107
+ --color-background-accent-blue-bold-default: var(--color-blue-300);
108
+ --color-background-accent-purple-default: var(--color-purple-500);
109
+ --color-background-accent-purple-subtler-default: var(--color-purple-200);
110
+ --color-background-accent-purple-subtle-default: var(--color-purple-400);
111
+ --color-background-accent-purple-bold-default: var(--color-purple-300);
112
+ --color-background-accent-magenta-default: var(--color-magenta-500);
113
+ --color-background-accent-magenta-subtler-default: var(--color-magenta-200);
114
+ --color-background-accent-magenta-subtle-default: var(--color-magenta-400);
115
+ --color-background-accent-magenta-bold-default: var(--color-magenta-300);
116
+ --color-background-neutral-default: var(--color-neutral-alpha-300-a);
117
+ --color-background-neutral-hover: var(--color-neutral-alpha-400-a);
118
+ --color-background-neutral-pressed: var(--color-neutral-alpha-500-a);
119
+ --color-background-neutral-subtle-pressed: var(--color-neutral-alpha-200-a);
120
+ --color-background-neutral-subtle-default: var(--color-dark-neutral-alpha-100-a);
121
+ --color-background-neutral-subtle-hover: var(--color-neutral-alpha-200-a);
122
+ --color-background-neutral-bold-hover: var(--color-neutral-alpha-100-a);
123
+ --color-background-neutral-bold-pressed: var(--color-neutral-alpha-200-a);
124
+
125
+ /* COLOR: BORDER */
126
+ --color-border-default: var(--color-neutral-100);
127
+ --color-border-bold: var(--color-neutral-200);
128
+ --color-border-disabled: var(--color-neutral-100);
129
+ --color-border-selected: var(--color-bcc-500);
130
+ --color-border-accent-red: var(--color-red-500);
131
+ --color-border-accent-orange: var(--color-orange-500);
132
+ --color-border-accent-green: var(--color-green-500);
133
+ --color-border-accent-teal: var(--color-teal-500);
134
+ --color-border-accent-sand: var(--color-brown-500);
135
+ --color-border-accent-blue: var(--color-blue-500);
136
+ --color-border-accent-purple: var(--color-purple-500);
137
+ --color-border-accent-magenta: var(--color-magenta-500);
138
+
139
+ /* COLOR: ICON */
140
+ --color-icon-default: var(--color-neutral-100);
141
+ --color-icon-bold: var(--color-neutral-200);
142
+ --color-icon-disabled: var(--color-neutral-100);
143
+ --color-icon-selected: var(--color-bcc-500);
144
+ --color-icon-accent-red: var(--color-red-500);
145
+ --color-icon-accent-orage: var(--color-orange-500);
146
+ --color-icon-accent-green: var(--color-green-500);
147
+ --color-icon-accent-teal: var(--color-teal-500);
148
+ --color-icon-accent-sand: var(--color-brown-500);
149
+ --color-icon-accent-blue: var(--color-blue-500);
150
+ --color-icon-accent-purple: var(--color-purple-500);
151
+ --color-icon-accent-magenta: var(--color-magenta-500);
152
+
153
+ /* COLOR: ELEVATION */
154
+ --color-elevation-surface-default: var(--color-dark-neutral-100);
155
+ --color-elevation-surface-hovered: var(--color-dark-neutral-200);
156
+ --color-elevation-surface-pressed: var(--color-dark-neutral-300);
157
+ --color-elevation-surface-overlay-default: var(--color-dark-neutral-200);
158
+ --color-elevation-surface-overlay-hovered: var(--color-dark-neutral-300);
159
+ --color-elevation-surface-overlay-pressed: var(--color-dark-neutral-400);
160
+ --color-elevation-surface-raised-default: var(--color-dark-neutral-200);
161
+ --color-elevation-surface-raised-hovered: var(--color-dark-neutral-300);
162
+ --color-elevation-surface-raised-pressed: var(--color-dark-neutral-400);
163
+ --color-elevation-surface-sunken-default: var(--color-dark-neutral-0);
164
+ }
165
+ }
package/build/bcc/tailwind/index.css ADDED
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ *
4
+ * Complete Tailwind CSS integration for bcc design tokens.
5
+ * Import this file to get everything you need:
6
+ * - Base Tailwind CSS
7
+ * - Light theme tokens
8
+ * - Dark theme with automatic switching
9
+ * - Utility classes
10
+ */
11
+
12
+ @import "tailwindcss";
13
+ @custom-variant dark (&:where(.dark, .dark *));
14
+
15
+ @import "./light.css";
16
+ @import "./dark.css";
17
+ @import "./utilities.css";