@bcc-code/design-tokens 2.0.1 → 2.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.d.ts +76 -253
  2. package/build/bcc/primevue/index.js +145 -172
  3. package/package.json +1 -1
package/build/bcc/primevue/index.d.ts CHANGED
@@ -1,279 +1,102 @@
1
- /**
2
- * BCC Tailwind-Only PrimeVue Preset Type Definitions
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.
7
- *
8
- * @example
9
- * ```typescript
10
- * import { definePreset } from '@primevue/themes';
11
- * import Aura from '@primevue/themes/aura';
12
- * import "@bcc-code/design-tokens/bcc/tailwind";
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
- */
27
-
28
- /**
29
- * Color palette interface for BCC design tokens
30
- * Maps to your bcc-100 through bcc-1000 and neutral color scales
31
- */
32
1
  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
2
+ 50: string;
3
+ 100: string;
4
+ 200: string;
5
+ 300: string;
6
+ 400: string;
7
+ 500: string;
8
+ 600: string;
9
+ 700: string;
10
+ 800: string;
11
+ 900: string;
12
+ 950: string;
54
13
  }
55
14
 
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
15
+ interface BCCPrimaryColorScheme {
16
+ color: string;
17
+ contrastColor: string;
18
+ hoverColor: string;
19
+ activeColor: string;
64
20
  }
65
21
 
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;
22
+ interface BCCSurfaceColorScheme {
23
+ 0: string;
24
+ 50: string;
25
+ 100: string;
26
+ 200: string;
27
+ 300: string;
28
+ 400: string;
29
+ 500: string;
30
+ 600: string;
31
+ 700: string;
32
+ 800: string;
33
+ 900: string;
34
+ 950: string;
85
35
  }
86
36
 
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
37
+ interface BCCTextColorScheme {
38
+ color: string;
39
+ hoverColor: string;
40
+ mutedColor: string;
41
+ highlightColor: string;
93
42
  }
94
43
 
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
- };
44
+ interface BCCContentColorScheme {
45
+ background: string;
46
+ hoverBackground: string;
47
+ borderColor: string;
48
+ color: string;
49
+ hoverColor: string;
109
50
  }
110
51
 
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
- };
52
+ interface BCCModeColorScheme {
53
+ primary: BCCPrimaryColorScheme;
54
+ surface: BCCSurfaceColorScheme;
55
+ text: BCCTextColorScheme;
56
+ content: BCCContentColorScheme;
126
57
  }
127
58
 
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
- };
59
+ interface BCCColorScheme {
60
+ light: BCCModeColorScheme;
61
+ dark: BCCModeColorScheme;
161
62
  }
162
63
 
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
- };
64
+ interface BCCGlobalConfig {
65
+ css?: string;
177
66
  }
178
67
 
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;
68
+ interface BCCComponentOverrides {
69
+ global?: BCCGlobalConfig;
70
+ [componentName: string]: any;
190
71
  }
191
72
 
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;
202
- };
203
- };
204
- components: BCCComponents;
73
+ interface BCCSemantic {
74
+ primary: BCCColorPalette;
75
+ surface: BCCColorPalette;
76
+ success: BCCColorPalette;
77
+ warn: BCCColorPalette;
78
+ danger: BCCColorPalette;
79
+ info: BCCColorPalette;
80
+ colorScheme: BCCColorScheme;
205
81
  }
206
82
 
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;
83
+ interface BCCAuraOverrideConfig {
84
+ semantic: BCCSemantic;
85
+ components?: BCCComponentOverrides;
86
+ }declare const BCCAuraOverride: BCCAuraOverrideConfig;
260
87
 
261
- export default BCCTailwindPreset;
88
+ export default BCCAuraOverride;
262
89
 
263
- // Export types for external use
264
90
  export type {
265
- BCCTailwindPresetConfig,
91
+ BCCAuraOverrideConfig,
92
+ BCCSemantic,
93
+ BCCComponentOverrides,
266
94
  BCCColorPalette,
267
- BCCPrimaryColors,
268
- BCCTextColors,
269
- BCCContentColors,
95
+ BCCPrimaryColorScheme,
96
+ BCCSurfaceColorScheme,
97
+ BCCTextColorScheme,
98
+ BCCContentColorScheme,
99
+ BCCModeColorScheme,
270
100
  BCCColorScheme,
271
- BCCSpacing,
272
- BCCButtonConfig,
273
- BCCCardConfig,
274
- BCCPanelConfig,
275
- BCCInputConfig,
276
- BCCDialogConfig,
277
- BCCDataTableConfig,
278
- BCCComponents,
279
- };
101
+ BCCGlobalConfig
102
+ };
package/build/bcc/primevue/index.js CHANGED
@@ -1,207 +1,180 @@
1
- /**
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.
7
- */
8
-
9
- const BCCPresetConfig = {
1
+ const BCCAuraOverride = {
10
2
  semantic: {
11
- // PRIMARY: Use actual BCC brand color values
12
3
  primary: {
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
4
+ 50: 'var(--color-bcc-100)',
5
+ 100: 'var(--color-bcc-200)',
6
+ 200: 'var(--color-bcc-300)',
7
+ 300: 'var(--color-bcc-400)',
8
+ 400: 'var(--color-bcc-500)',
9
+ 500: 'var(--color-bcc-600)',
10
+ 600: 'var(--color-bcc-700)',
11
+ 700: 'var(--color-bcc-800)',
12
+ 800: 'var(--color-bcc-900)',
13
+ 900: 'var(--color-bcc-1000)',
14
+ 950: 'var(--color-bcc-1000)',
24
15
  },
25
16
 
26
- // SURFACE: Use actual neutral color values
27
17
  surface: {
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
18
+ 0: 'var(--color-neutral-0)',
19
+ 50: 'var(--color-neutral-100)',
20
+ 100: 'var(--color-neutral-200)',
21
+ 200: 'var(--color-neutral-300)',
22
+ 300: 'var(--color-neutral-400)',
23
+ 400: 'var(--color-neutral-500)',
24
+ 500: 'var(--color-neutral-600)',
25
+ 600: 'var(--color-neutral-700)',
26
+ 700: 'var(--color-neutral-800)',
27
+ 800: 'var(--color-neutral-900)',
28
+ 900: 'var(--color-neutral-1000)',
29
+ 950: 'var(--color-neutral-1100)',
30
+ },
31
+
32
+ success: {
33
+ 50: 'var(--color-green-100)',
34
+ 100: 'var(--color-green-200)',
35
+ 200: 'var(--color-green-300)',
36
+ 300: 'var(--color-green-400)',
37
+ 400: 'var(--color-green-500)',
38
+ 500: 'var(--color-green-600)',
39
+ 600: 'var(--color-green-700)',
40
+ 700: 'var(--color-green-800)',
41
+ 800: 'var(--color-green-900)',
42
+ 900: 'var(--color-green-1000)',
43
+ 950: 'var(--color-green-1000)',
44
+ },
45
+
46
+ warn: {
47
+ 50: 'var(--color-orange-100)',
48
+ 100: 'var(--color-orange-200)',
49
+ 200: 'var(--color-orange-300)',
50
+ 300: 'var(--color-orange-400)',
51
+ 400: 'var(--color-orange-500)',
52
+ 500: 'var(--color-orange-600)',
53
+ 600: 'var(--color-orange-700)',
54
+ 700: 'var(--color-orange-800)',
55
+ 800: 'var(--color-orange-900)',
56
+ 900: 'var(--color-orange-1000)',
57
+ 950: 'var(--color-orange-1000)',
58
+ },
59
+
60
+ danger: {
61
+ 50: 'var(--color-red-100)',
62
+ 100: 'var(--color-red-200)',
63
+ 200: 'var(--color-red-300)',
64
+ 300: 'var(--color-red-400)',
65
+ 400: 'var(--color-red-500)',
66
+ 500: 'var(--color-red-600)',
67
+ 600: 'var(--color-red-700)',
68
+ 700: 'var(--color-red-800)',
69
+ 800: 'var(--color-red-900)',
70
+ 900: 'var(--color-red-1000)',
71
+ 950: 'var(--color-red-1000)',
72
+ },
73
+
74
+ info: {
75
+ 50: 'var(--color-blue-100)',
76
+ 100: 'var(--color-blue-200)',
77
+ 200: 'var(--color-blue-300)',
78
+ 300: 'var(--color-blue-400)',
79
+ 400: 'var(--color-blue-500)',
80
+ 500: 'var(--color-blue-600)',
81
+ 600: 'var(--color-blue-700)',
82
+ 700: 'var(--color-blue-800)',
83
+ 800: 'var(--color-blue-900)',
84
+ 900: 'var(--color-blue-1000)',
85
+ 950: 'var(--color-blue-1000)',
40
86
  },
41
87
 
42
- // COLOR SCHEME: Define light and dark mode colors
43
88
  colorScheme: {
44
89
  light: {
45
90
  primary: {
46
- color: '{primary.500}', // Maps to #187b73
47
- contrastColor: '#ffffff',
48
- hoverColor: '{primary.600}', // Maps to #0e6962
49
- activeColor: '{primary.700}', // Maps to #004e48
91
+ color: 'var(--color-background-brand-default)',
92
+ contrastColor: 'var(--color-text-inverse)',
93
+ hoverColor: 'var(--color-background-brand-hover)',
94
+ activeColor: 'var(--color-background-brand-pressed)',
50
95
  },
96
+
51
97
  surface: {
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',
98
+ 0: 'var(--color-elevation-surface-default)',
99
+ 50: 'var(--color-elevation-surface-raised-default)',
100
+ 100: 'var(--color-elevation-surface-overlay-default)',
101
+ 200: 'var(--color-neutral-200)',
102
+ 300: 'var(--color-neutral-300)',
103
+ 400: 'var(--color-neutral-400)',
104
+ 500: 'var(--color-neutral-500)',
105
+ 600: 'var(--color-neutral-600)',
106
+ 700: 'var(--color-neutral-700)',
107
+ 800: 'var(--color-neutral-800)',
108
+ 900: 'var(--color-neutral-900)',
109
+ 950: 'var(--color-neutral-1100)',
64
110
  },
111
+
65
112
  text: {
66
- color: '#1e242d', // neutral-1100 for light mode
67
- hoverColor: '#1e242d',
68
- mutedColor: '#758195', // neutral-600
69
- highlightColor: '#0e6962', // bcc-700
113
+ color: 'var(--color-text-default)',
114
+ hoverColor: 'var(--color-text-default)',
115
+ mutedColor: 'var(--color-text-subtle)',
116
+ highlightColor: 'var(--color-text-selected)',
70
117
  },
118
+
71
119
  content: {
72
- background: '#ffffff',
73
- hoverBackground: '#f1f2f4',
74
- borderColor: '#f7f8f9',
75
- color: '#1e242d',
76
- hoverColor: '#1e242d',
120
+ background: 'var(--color-elevation-surface-default)',
121
+ hoverBackground: 'var(--color-elevation-surface-hovered)',
122
+ borderColor: 'var(--color-border-default)',
123
+ color: 'var(--color-text-default)',
124
+ hoverColor: 'var(--color-text-default)',
77
125
  },
78
126
  },
127
+
79
128
  dark: {
80
129
  primary: {
81
- color: '{primary.400}', // Lighter brand for dark mode
82
- contrastColor: '#161a1d',
83
- hoverColor: '{primary.300}',
84
- activeColor: '{primary.200}',
130
+ color: 'var(--color-background-brand-default)',
131
+ contrastColor: 'var(--color-text-inverse)',
132
+ hoverColor: 'var(--color-background-brand-hover)',
133
+ activeColor: 'var(--color-background-brand-pressed)',
85
134
  },
135
+
86
136
  surface: {
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
137
+ 0: 'var(--color-elevation-surface-default)',
138
+ 50: 'var(--color-elevation-surface-raised-default)',
139
+ 100: 'var(--color-elevation-surface-overlay-default)',
140
+ 200: 'var(--color-neutral-200)',
141
+ 300: 'var(--color-neutral-300)',
142
+ 400: 'var(--color-neutral-400)',
143
+ 500: 'var(--color-neutral-500)',
144
+ 600: 'var(--color-neutral-600)',
145
+ 700: 'var(--color-neutral-700)',
146
+ 800: 'var(--color-neutral-800)',
147
+ 900: 'var(--color-neutral-900)',
148
+ 950: 'var(--color-neutral-1100)',
99
149
  },
150
+
100
151
  text: {
101
- color: '#dee4ea', // dark-neutral-1100
102
- hoverColor: '#dee4ea',
103
- mutedColor: '#738496', // dark-neutral-600
104
- highlightColor: '#73b2ac', // bcc-400 for dark mode
152
+ color: 'var(--color-text-default)',
153
+ hoverColor: 'var(--color-text-default)',
154
+ mutedColor: 'var(--color-text-subtle)',
155
+ highlightColor: 'var(--color-text-selected)',
105
156
  },
157
+
106
158
  content: {
107
- background: '#1d2125',
108
- hoverBackground: '#22272b',
109
- borderColor: '#2c333a',
110
- color: '#dee4ea',
111
- hoverColor: '#dee4ea',
159
+ background: 'var(--color-elevation-surface-default)',
160
+ hoverBackground: 'var(--color-elevation-surface-hovered)',
161
+ borderColor: 'var(--color-border-default)',
162
+ color: 'var(--color-text-default)',
163
+ hoverColor: 'var(--color-text-default)',
112
164
  },
113
165
  },
114
166
  },
115
167
  },
116
168
 
117
- // COMPONENT CUSTOMIZATIONS: Use rem values from your spacing scale
118
169
  components: {
119
- button: {
120
- borderRadius: '0.5rem', // border-radius-md = 8px
121
- padding: {
122
- x: '1.5rem', // space-300 = 24px
123
- y: '0.75rem', // space-150 = 12px
124
- },
125
- sm: {
126
- fontSize: '0.875rem', // font-size-sm
127
- padding: {
128
- x: '1rem', // space-200 = 16px
129
- y: '0.5rem', // space-100 = 8px
130
- },
131
- },
132
- lg: {
133
- fontSize: '1.25rem', // font-size-lg
134
- padding: {
135
- x: '2rem', // space-400 = 32px
136
- y: '1rem', // space-200 = 16px
137
- },
138
- },
170
+ global: {
171
+ css: `
172
+ .p-component {
173
+ font-family: var(--font-archivo), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
174
+ }
175
+ `
139
176
  },
140
-
141
- card: {
142
- borderRadius: '1rem', // border-radius-lg = 16px
143
- body: {
144
- padding: '1.5rem', // space-300 = 24px
145
- gap: '1rem', // space-200 = 16px
146
- },
147
- header: {
148
- padding: '1.5rem', // space-300 = 24px
149
- },
150
- footer: {
151
- padding: '1.5rem', // space-300 = 24px
152
- },
153
- },
154
-
155
- panel: {
156
- borderRadius: '1rem', // border-radius-lg = 16px
157
- header: {
158
- padding: '1.5rem', // space-300 = 24px
159
- borderRadius: '1rem 1rem 0 0',
160
- },
161
- },
162
-
163
- inputtext: {
164
- borderRadius: '0.5rem', // border-radius-md = 8px
165
- padding: {
166
- x: '1rem', // space-200 = 16px
167
- y: '0.75rem', // space-150 = 12px
168
- },
169
- },
170
-
171
- dropdown: {
172
- borderRadius: '0.5rem', // border-radius-md = 8px
173
- padding: {
174
- x: '1rem', // space-200 = 16px
175
- y: '0.75rem', // space-150 = 12px
176
- },
177
- },
178
-
179
- dialog: {
180
- borderRadius: '2rem', // border-radius-xl = 24px
181
- header: {
182
- padding: '2rem', // space-400 = 32px
183
- },
184
- content: {
185
- padding: '2rem', // space-400 = 32px
186
- },
187
- footer: {
188
- padding: '2rem', // space-400 = 32px
189
- },
190
- },
191
-
192
- datatable: {
193
- header: {
194
- cell: {
195
- padding: '1rem', // space-200 = 16px
196
- },
197
- },
198
- body: {
199
- cell: {
200
- padding: '1rem', // space-200 = 16px
201
- },
202
- },
203
- },
204
- },
177
+ }
205
178
  };
206
179
 
207
- export default BCCPresetConfig;
180
+ export default BCCAuraOverride;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcc-code/design-tokens",
3
- "version": "2.0.1",
3
+ "version": "2.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",