@bcc-code/design-tokens 2.0.0 → 2.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 (4) hide show
  1. package/README.md +2 -2
  2. package/build/bcc/primevue/index.d.ts +253 -21
  3. package/build/bcc/primevue/index.js +112 -204
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -94,12 +94,12 @@ npm install tailwindcss
94
94
 
95
95
  **1. Install dependencies:**
96
96
  ```bash
97
- npm install primevue @primevue/themes
97
+ npm install tailwindcss primevue @primevue/themes
98
98
  ```
99
99
 
100
100
  **2. Import CSS and preset configuration:**
101
101
  ```javascript
102
- import '@bcc-code/design-tokens/bcc/cdn';
102
+ import '@bcc-code/design-tokens/bcc/tailwind';
103
103
  import BCCPresetConfig from '@bcc-code/design-tokens/bcc/primevue';
104
104
  ```
105
105
 
package/build/bcc/primevue/index.d.ts CHANGED
@@ -1,15 +1,16 @@
1
1
  /**
2
- * BCC Design Tokens Preset Configuration for PrimeVue v4
2
+ * BCC Tailwind-Only PrimeVue Preset Type Definitions
3
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.
4
+ * This preset uses actual color values from your design tokens instead of CSS variables,
5
+ * ensuring compatibility with Tailwind-only setup while still falling back to Aura for
6
+ * components you haven't customized.
7
7
  *
8
8
  * @example
9
9
  * ```typescript
10
10
  * import { definePreset } from '@primevue/themes';
11
11
  * import Aura from '@primevue/themes/aura';
12
- * import BCCPresetConfig from '@bcc-code/design-tokens/bcc/primevue';
12
+ * import "@bcc-code/design-tokens/bcc/tailwind";
13
+ * import BCCPresetConfig from "@bcc-code/design-tokens/bcc/primevue";
13
14
  *
14
15
  * const BCCPreset = definePreset(Aura, BCCPresetConfig);
15
16
  *
@@ -22,26 +23,257 @@
22
23
  * }
23
24
  * });
24
25
  * ```
25
- *
26
- * @example
27
- * Make sure to import your CSS tokens first:
28
- * ```typescript
29
- * import '@bcc-code/design-tokens/bcc/cdn';
30
- * ```
31
26
  */
32
27
 
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>;
28
+ /**
29
+ * Color palette interface for BCC design tokens
30
+ * Maps to your bcc-100 through bcc-1000 and neutral color scales
31
+ */
32
+ interface BCCColorPalette {
33
+ 50: string; // Lightest tint (bcc-100 / neutral-100)
34
+ 100: string; // bcc-200 / neutral-200
35
+ 200: string; // bcc-300 / neutral-300
36
+ 300: string; // bcc-400 / neutral-400
37
+ 400: string; // bcc-500 / neutral-500
38
+ 500: string; // bcc-600 / neutral-600 (main brand color)
39
+ 600: string; // bcc-700 / neutral-700
40
+ 700: string; // bcc-800 / neutral-800
41
+ 800: string; // bcc-900 / neutral-900
42
+ 900: string; // bcc-1000 / neutral-1000
43
+ 950: string; // Darkest shade (bcc-1000 / neutral-1100)
44
+ }
45
+
46
+ /**
47
+ * Primary color configuration for both light and dark modes
48
+ */
49
+ interface BCCPrimaryColors {
50
+ color: string; // Main primary color
51
+ contrastColor: string; // Text color on primary background
52
+ hoverColor: string; // Hover state color
53
+ activeColor: string; // Active/pressed state color
54
+ }
55
+
56
+ /**
57
+ * Text color configuration
58
+ */
59
+ interface BCCTextColors {
60
+ color: string; // Default text color
61
+ hoverColor: string; // Text color on hover
62
+ mutedColor: string; // Subtle/secondary text color
63
+ highlightColor: string; // Highlighted/selected text color
64
+ }
65
+
66
+ /**
67
+ * Content area color configuration
68
+ */
69
+ interface BCCContentColors {
70
+ background: string; // Default background
71
+ hoverBackground: string; // Background on hover
72
+ borderColor: string; // Border color
73
+ color: string; // Text color
74
+ hoverColor: string; // Text color on hover
75
+ }
76
+
77
+ /**
78
+ * Color scheme for light and dark modes
79
+ */
80
+ interface BCCColorScheme {
81
+ primary: BCCPrimaryColors;
82
+ surface: BCCColorPalette;
83
+ text: BCCTextColors;
84
+ content: BCCContentColors;
85
+ }
86
+
87
+ /**
88
+ * Spacing configuration using rem values from BCC spacing scale
89
+ */
90
+ interface BCCSpacing {
91
+ x: string; // Horizontal spacing
92
+ y: string; // Vertical spacing
93
+ }
94
+
95
+ /**
96
+ * Button component configuration
97
+ */
98
+ interface BCCButtonConfig {
99
+ borderRadius: string; // border-radius-md (0.5rem / 8px)
100
+ padding: BCCSpacing; // Default padding (space-300/150)
101
+ sm: {
102
+ fontSize: string; // font-size-sm (0.875rem)
103
+ padding: BCCSpacing; // Small button padding (space-200/100)
104
+ };
105
+ lg: {
106
+ fontSize: string; // font-size-lg (1.25rem)
107
+ padding: BCCSpacing; // Large button padding (space-400/200)
108
+ };
109
+ }
110
+
111
+ /**
112
+ * Card component configuration
113
+ */
114
+ interface BCCCardConfig {
115
+ borderRadius: string; // border-radius-lg (1rem / 16px)
116
+ body: {
117
+ padding: string; // space-300 (1.5rem / 24px)
118
+ gap: string; // space-200 (1rem / 16px)
119
+ };
120
+ header: {
121
+ padding: string; // space-300 (1.5rem / 24px)
122
+ };
123
+ footer: {
124
+ padding: string; // space-300 (1.5rem / 24px)
125
+ };
126
+ }
127
+
128
+ /**
129
+ * Panel component configuration
130
+ */
131
+ interface BCCPanelConfig {
132
+ borderRadius: string; // border-radius-lg (1rem / 16px)
133
+ header: {
134
+ padding: string; // space-300 (1.5rem / 24px)
135
+ borderRadius: string; // Rounded top corners only
136
+ };
137
+ }
138
+
139
+ /**
140
+ * Input component configuration
141
+ */
142
+ interface BCCInputConfig {
143
+ borderRadius: string; // border-radius-md (0.5rem / 8px)
144
+ padding: BCCSpacing; // space-200/150 (1rem/0.75rem)
145
+ }
146
+
147
+ /**
148
+ * Dialog component configuration
149
+ */
150
+ interface BCCDialogConfig {
151
+ borderRadius: string; // border-radius-xl (2rem / 24px)
152
+ header: {
153
+ padding: string; // space-400 (2rem / 32px)
154
+ };
155
+ content: {
156
+ padding: string; // space-400 (2rem / 32px)
157
+ };
158
+ footer: {
159
+ padding: string; // space-400 (2rem / 32px)
160
+ };
161
+ }
162
+
163
+ /**
164
+ * DataTable component configuration
165
+ */
166
+ interface BCCDataTableConfig {
167
+ header: {
168
+ cell: {
169
+ padding: string; // space-200 (1rem / 16px)
170
+ };
171
+ };
172
+ body: {
173
+ cell: {
174
+ padding: string; // space-200 (1rem / 16px)
175
+ };
176
+ };
177
+ }
178
+
179
+ /**
180
+ * Complete BCC component configuration
181
+ */
182
+ interface BCCComponents {
183
+ button: BCCButtonConfig;
184
+ card: BCCCardConfig;
185
+ panel: BCCPanelConfig;
186
+ inputtext: BCCInputConfig;
187
+ dropdown: BCCInputConfig;
188
+ dialog: BCCDialogConfig;
189
+ datatable: BCCDataTableConfig;
190
+ }
191
+
192
+ /**
193
+ * Main BCC Tailwind Preset configuration interface
194
+ */
195
+ interface BCCTailwindPresetConfig {
196
+ semantic: {
197
+ primary: BCCColorPalette;
198
+ surface: BCCColorPalette;
199
+ colorScheme: {
200
+ light: BCCColorScheme;
201
+ dark: BCCColorScheme;
40
202
  };
41
203
  };
42
- components?: Record<string, any>;
204
+ components: BCCComponents;
43
205
  }
44
206
 
45
- declare const BCCPresetConfig: BCCPresetConfig;
207
+ /**
208
+ * BCC Tailwind-Only PrimeVue Preset
209
+ *
210
+ * A comprehensive preset that uses actual color values from your BCC design tokens
211
+ * instead of CSS variables, ensuring compatibility with Tailwind-only setup while
212
+ * still falling back to Aura for components you haven't customized.
213
+ *
214
+ * @example Basic Usage
215
+ * ```typescript
216
+ * import { createApp } from 'vue';
217
+ * import PrimeVue from 'primevue/config';
218
+ * import { definePreset } from '@primevue/themes';
219
+ * import Aura from '@primevue/themes/aura';
220
+ *
221
+ * // Import Tailwind integration only (no CDN to avoid conflicts)
222
+ * import '@bcc-code/design-tokens/bcc/tailwind';
223
+ *
224
+ * import BCCTailwindPreset from './BCCTailwindPreset';
225
+ *
226
+ * const app = createApp(App);
227
+ * const BCCPreset = definePreset(Aura, BCCTailwindPreset);
228
+ *
229
+ * app.use(PrimeVue, {
230
+ * theme: {
231
+ * preset: BCCPreset,
232
+ * options: {
233
+ * darkModeSelector: '.dark'
234
+ * }
235
+ * }
236
+ * });
237
+ * ```
238
+ *
239
+ * @example Available Colors
240
+ * Your BCC colors are available as:
241
+ * - Primary: `{primary.50}` through `{primary.950}`
242
+ * - Surface: `{surface.0}` through `{surface.950}`
243
+ * - Light mode: Automatically uses your light theme colors
244
+ * - Dark mode: Automatically switches when `.dark` class is present
245
+ *
246
+ * @example Spacing Values
247
+ * All spacing uses your BCC spacing scale:
248
+ * - Button padding: 1.5rem × 0.75rem (space-300 × space-150)
249
+ * - Card padding: 1.5rem (space-300)
250
+ * - Input padding: 1rem × 0.75rem (space-200 × space-150)
251
+ * - Dialog padding: 2rem (space-400)
252
+ *
253
+ * @example Border Radius
254
+ * Border radius values from your design tokens:
255
+ * - Small: 0.5rem (border-radius-md, 8px)
256
+ * - Large: 1rem (border-radius-lg, 16px)
257
+ * - Extra Large: 2rem (border-radius-xl, 24px)
258
+ */
259
+ declare const BCCTailwindPreset: BCCTailwindPresetConfig;
260
+
261
+ export default BCCTailwindPreset;
46
262
 
47
- export default BCCPresetConfig;
263
+ // Export types for external use
264
+ export type {
265
+ BCCTailwindPresetConfig,
266
+ BCCColorPalette,
267
+ BCCPrimaryColors,
268
+ BCCTextColors,
269
+ BCCContentColors,
270
+ BCCColorScheme,
271
+ BCCSpacing,
272
+ BCCButtonConfig,
273
+ BCCCardConfig,
274
+ BCCPanelConfig,
275
+ BCCInputConfig,
276
+ BCCDialogConfig,
277
+ BCCDataTableConfig,
278
+ BCCComponents,
279
+ };
package/build/bcc/primevue/index.js CHANGED
@@ -1,299 +1,207 @@
1
1
  /**
2
- * BCC Design Tokens Preset for PrimeVue v4
3
- *
4
- * This preset 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
- * Usage:
9
- * ```javascript
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
- *
17
- * app.use(PrimeVue, {
18
- * theme: {
19
- * preset: BCCPreset,
20
- * options: {
21
- * darkModeSelector: '.dark'
22
- * }
23
- * },
24
- * });
25
- *
26
- * app.mount("#app");
27
- * ```
28
- *
29
- * Make sure to import your CSS tokens first:
30
- * ```javascript
31
- * import '@bcc-code/design-tokens/bcc/cdn';
32
- * ```
2
+ * BCC Tailwind-Only PrimeVue Preset
3
+ *
4
+ * This preset uses actual color values from your design tokens instead of CSS variables,
5
+ * ensuring compatibility with Tailwind-only setup while still falling back to Aura for
6
+ * components you haven't customized.
33
7
  */
34
8
 
35
9
  const BCCPresetConfig = {
36
10
  semantic: {
37
- // PRIMARY: Map BCC brand colors to PrimeVue primary system
11
+ // PRIMARY: Use actual BCC brand color values
38
12
  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)
13
+ 50: '#e6f2f1', // bcc-100
14
+ 100: '#d0e3e1', // bcc-200
15
+ 200: '#accbc8', // bcc-300
16
+ 300: '#73b2ac', // bcc-400
17
+ 400: '#2e9087', // bcc-500
18
+ 500: '#187b73', // bcc-600 (main brand)
19
+ 600: '#0e6962', // bcc-700
20
+ 700: '#004e48', // bcc-800
21
+ 800: '#003d39', // bcc-900
22
+ 900: '#002320', // bcc-1000
23
+ 950: '#002320', // darkest
50
24
  },
51
25
 
52
- // SURFACES: Map your elevation/neutral tokens to PrimeVue surface system
26
+ // SURFACE: Use actual neutral color values
53
27
  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
28
+ 0: '#ffffff', // neutral-0 (light) / dark-neutral-100 (dark)
29
+ 50: '#f7f8f9', // neutral-100
30
+ 100: '#f1f2f4', // neutral-200
31
+ 200: '#dcdfe4', // neutral-300
32
+ 300: '#b3b9c4', // neutral-400
33
+ 400: '#8590a2', // neutral-500
34
+ 500: '#758195', // neutral-600
35
+ 600: '#626f86', // neutral-700
36
+ 700: '#4b5668', // neutral-800
37
+ 800: '#374152', // neutral-900
38
+ 900: '#282f3c', // neutral-1000
39
+ 950: '#1e242d', // neutral-1100
66
40
  },
67
41
 
68
- // COLOR SCHEME: Define how colors behave in light and dark modes
42
+ // COLOR SCHEME: Define light and dark mode colors
69
43
  colorScheme: {
70
44
  light: {
71
- // Primary action colors
72
45
  primary: {
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
+ color: '{primary.500}', // Maps to #187b73
47
+ contrastColor: '#ffffff',
48
+ hoverColor: '{primary.600}', // Maps to #0e6962
49
+ activeColor: '{primary.700}', // Maps to #004e48
77
50
  },
78
-
79
- // Surface colors for light mode
80
51
  surface: {
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)",
52
+ 0: '#ffffff',
53
+ 50: '#f7f8f9',
54
+ 100: '#f1f2f4',
55
+ 200: '#dcdfe4',
56
+ 300: '#b3b9c4',
57
+ 400: '#8590a2',
58
+ 500: '#758195',
59
+ 600: '#626f86',
60
+ 700: '#4b5668',
61
+ 800: '#374152',
62
+ 900: '#282f3c',
63
+ 950: '#1e242d',
93
64
  },
94
-
95
- // Text colors
96
65
  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)",
66
+ color: '#1e242d', // neutral-1100 for light mode
67
+ hoverColor: '#1e242d',
68
+ mutedColor: '#758195', // neutral-600
69
+ highlightColor: '#0e6962', // bcc-700
101
70
  },
102
-
103
- // Content areas (forms, panels, etc.)
104
71
  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
- },
111
-
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)",
131
- },
132
- },
72
+ background: '#ffffff',
73
+ hoverBackground: '#f1f2f4',
74
+ borderColor: '#f7f8f9',
75
+ color: '#1e242d',
76
+ hoverColor: '#1e242d',
133
77
  },
134
78
  },
135
-
136
79
  dark: {
137
- // Primary colors (same as light - your tokens handle the mode switching)
138
80
  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)",
81
+ color: '{primary.400}', // Lighter brand for dark mode
82
+ contrastColor: '#161a1d',
83
+ hoverColor: '{primary.300}',
84
+ activeColor: '{primary.200}',
143
85
  },
144
-
145
- // Surface colors for dark mode (your CSS variables handle the switching)
146
86
  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)",
87
+ 0: '#161a1d', // dark-neutral-0
88
+ 50: '#1d2125', // dark-neutral-100
89
+ 100: '#22272b', // dark-neutral-200
90
+ 200: '#2c333a', // dark-neutral-300
91
+ 300: '#454f59', // dark-neutral-400
92
+ 400: '#596773', // dark-neutral-500
93
+ 500: '#738496', // dark-neutral-600
94
+ 600: '#8c9bab', // dark-neutral-700
95
+ 700: '#9fadbc', // dark-neutral-800
96
+ 800: '#b6c2cf', // dark-neutral-900
97
+ 900: '#c7d1db', // dark-neutral-1000
98
+ 950: '#dee4ea', // dark-neutral-1100
159
99
  },
160
-
161
- // Text colors (your tokens handle light/dark switching)
162
100
  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)",
101
+ color: '#dee4ea', // dark-neutral-1100
102
+ hoverColor: '#dee4ea',
103
+ mutedColor: '#738496', // dark-neutral-600
104
+ highlightColor: '#73b2ac', // bcc-400 for dark mode
167
105
  },
168
-
169
106
  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)",
175
- },
176
-
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)",
195
- },
196
- },
107
+ background: '#1d2125',
108
+ hoverBackground: '#22272b',
109
+ borderColor: '#2c333a',
110
+ color: '#dee4ea',
111
+ hoverColor: '#dee4ea',
197
112
  },
198
113
  },
199
114
  },
200
115
  },
201
116
 
202
- // COMPONENT CUSTOMIZATIONS: Apply your spacing and radius tokens to specific components
117
+ // COMPONENT CUSTOMIZATIONS: Use rem values from your spacing scale
203
118
  components: {
204
- // Buttons
205
119
  button: {
206
- borderRadius: "var(--border-radius-md)",
120
+ borderRadius: '0.5rem', // border-radius-md = 8px
207
121
  padding: {
208
- x: "var(--space-300)", // 24px horizontal padding
209
- y: "var(--space-150)", // 12px vertical padding
122
+ x: '1.5rem', // space-300 = 24px
123
+ y: '0.75rem', // space-150 = 12px
210
124
  },
211
125
  sm: {
212
- fontSize: "var(--font-size-sm)",
126
+ fontSize: '0.875rem', // font-size-sm
213
127
  padding: {
214
- x: "var(--space-200)", // 16px horizontal
215
- y: "var(--space-100)", // 8px vertical
128
+ x: '1rem', // space-200 = 16px
129
+ y: '0.5rem', // space-100 = 8px
216
130
  },
217
131
  },
218
132
  lg: {
219
- fontSize: "var(--font-size-lg)",
133
+ fontSize: '1.25rem', // font-size-lg
220
134
  padding: {
221
- x: "var(--space-400)", // 32px horizontal
222
- y: "var(--space-200)", // 16px vertical
135
+ x: '2rem', // space-400 = 32px
136
+ y: '1rem', // space-200 = 16px
223
137
  },
224
138
  },
225
139
  },
226
140
 
227
- // Cards
228
141
  card: {
229
- borderRadius: "var(--border-radius-lg)",
142
+ borderRadius: '1rem', // border-radius-lg = 16px
230
143
  body: {
231
- padding: "var(--space-300)",
232
- gap: "var(--space-200)",
144
+ padding: '1.5rem', // space-300 = 24px
145
+ gap: '1rem', // space-200 = 16px
233
146
  },
234
147
  header: {
235
- padding: "var(--space-300)",
148
+ padding: '1.5rem', // space-300 = 24px
236
149
  },
237
150
  footer: {
238
- padding: "var(--space-300)",
151
+ padding: '1.5rem', // space-300 = 24px
239
152
  },
240
153
  },
241
154
 
242
- // Panels (accordions, fieldsets, etc.)
243
155
  panel: {
244
- borderRadius: "var(--border-radius-lg)",
156
+ borderRadius: '1rem', // border-radius-lg = 16px
245
157
  header: {
246
- padding: "var(--space-300)",
247
- borderRadius: "var(--border-radius-lg) var(--border-radius-lg) 0 0",
158
+ padding: '1.5rem', // space-300 = 24px
159
+ borderRadius: '1rem 1rem 0 0',
248
160
  },
249
161
  },
250
162
 
251
- // Form inputs
252
163
  inputtext: {
253
- borderRadius: "var(--border-radius-md)",
164
+ borderRadius: '0.5rem', // border-radius-md = 8px
254
165
  padding: {
255
- x: "var(--space-200)",
256
- y: "var(--space-150)",
166
+ x: '1rem', // space-200 = 16px
167
+ y: '0.75rem', // space-150 = 12px
257
168
  },
258
169
  },
259
170
 
260
- // Dropdowns and selects
261
171
  dropdown: {
262
- borderRadius: "var(--border-radius-md)",
172
+ borderRadius: '0.5rem', // border-radius-md = 8px
263
173
  padding: {
264
- x: "var(--space-200)",
265
- y: "var(--space-150)",
174
+ x: '1rem', // space-200 = 16px
175
+ y: '0.75rem', // space-150 = 12px
266
176
  },
267
177
  },
268
178
 
269
- // Dialogs and overlays
270
179
  dialog: {
271
- borderRadius: "var(--border-radius-xl)",
180
+ borderRadius: '2rem', // border-radius-xl = 24px
272
181
  header: {
273
- padding: "var(--space-400)",
182
+ padding: '2rem', // space-400 = 32px
274
183
  },
275
184
  content: {
276
- padding: "var(--space-400)",
185
+ padding: '2rem', // space-400 = 32px
277
186
  },
278
187
  footer: {
279
- padding: "var(--space-400)",
188
+ padding: '2rem', // space-400 = 32px
280
189
  },
281
190
  },
282
191
 
283
- // Data tables
284
192
  datatable: {
285
193
  header: {
286
194
  cell: {
287
- padding: "var(--space-200)",
195
+ padding: '1rem', // space-200 = 16px
288
196
  },
289
197
  },
290
198
  body: {
291
199
  cell: {
292
- padding: "var(--space-200)",
200
+ padding: '1rem', // space-200 = 16px
293
201
  },
294
202
  },
295
203
  },
296
204
  },
297
205
  };
298
206
 
299
- export default BCCPresetConfig;
207
+ export default BCCPresetConfig;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcc-code/design-tokens",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
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",