@bcc-code/design-tokens 2.0.0 → 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.
- package/README.md +2 -2
- package/build/bcc/primevue/index.d.ts +102 -47
- package/build/bcc/primevue/index.js +138 -257
- 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/
|
|
102
|
+
import '@bcc-code/design-tokens/bcc/tailwind';
|
|
103
103
|
import BCCPresetConfig from '@bcc-code/design-tokens/bcc/primevue';
|
|
104
104
|
```
|
|
105
105
|
|
|
@@ -1,47 +1,102 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
1
|
+
interface BCCColorPalette {
|
|
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;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
interface BCCPrimaryColorScheme {
|
|
16
|
+
color: string;
|
|
17
|
+
contrastColor: string;
|
|
18
|
+
hoverColor: string;
|
|
19
|
+
activeColor: string;
|
|
20
|
+
}
|
|
21
|
+
|
|
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;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
interface BCCTextColorScheme {
|
|
38
|
+
color: string;
|
|
39
|
+
hoverColor: string;
|
|
40
|
+
mutedColor: string;
|
|
41
|
+
highlightColor: string;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
interface BCCContentColorScheme {
|
|
45
|
+
background: string;
|
|
46
|
+
hoverBackground: string;
|
|
47
|
+
borderColor: string;
|
|
48
|
+
color: string;
|
|
49
|
+
hoverColor: string;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
interface BCCModeColorScheme {
|
|
53
|
+
primary: BCCPrimaryColorScheme;
|
|
54
|
+
surface: BCCSurfaceColorScheme;
|
|
55
|
+
text: BCCTextColorScheme;
|
|
56
|
+
content: BCCContentColorScheme;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
interface BCCColorScheme {
|
|
60
|
+
light: BCCModeColorScheme;
|
|
61
|
+
dark: BCCModeColorScheme;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
interface BCCGlobalConfig {
|
|
65
|
+
css?: string;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
interface BCCComponentOverrides {
|
|
69
|
+
global?: BCCGlobalConfig;
|
|
70
|
+
[componentName: string]: any;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
interface BCCSemantic {
|
|
74
|
+
primary: BCCColorPalette;
|
|
75
|
+
surface: BCCColorPalette;
|
|
76
|
+
success: BCCColorPalette;
|
|
77
|
+
warn: BCCColorPalette;
|
|
78
|
+
danger: BCCColorPalette;
|
|
79
|
+
info: BCCColorPalette;
|
|
80
|
+
colorScheme: BCCColorScheme;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
interface BCCAuraOverrideConfig {
|
|
84
|
+
semantic: BCCSemantic;
|
|
85
|
+
components?: BCCComponentOverrides;
|
|
86
|
+
}declare const BCCAuraOverride: BCCAuraOverrideConfig;
|
|
87
|
+
|
|
88
|
+
export default BCCAuraOverride;
|
|
89
|
+
|
|
90
|
+
export type {
|
|
91
|
+
BCCAuraOverrideConfig,
|
|
92
|
+
BCCSemantic,
|
|
93
|
+
BCCComponentOverrides,
|
|
94
|
+
BCCColorPalette,
|
|
95
|
+
BCCPrimaryColorScheme,
|
|
96
|
+
BCCSurfaceColorScheme,
|
|
97
|
+
BCCTextColorScheme,
|
|
98
|
+
BCCContentColorScheme,
|
|
99
|
+
BCCModeColorScheme,
|
|
100
|
+
BCCColorScheme,
|
|
101
|
+
BCCGlobalConfig
|
|
102
|
+
};
|
|
@@ -1,299 +1,180 @@
|
|
|
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
|
-
* ```
|
|
33
|
-
*/
|
|
34
|
-
|
|
35
|
-
const BCCPresetConfig = {
|
|
1
|
+
const BCCAuraOverride = {
|
|
36
2
|
semantic: {
|
|
37
|
-
// PRIMARY: Map BCC brand colors to PrimeVue primary system
|
|
38
3
|
primary: {
|
|
39
|
-
50:
|
|
40
|
-
100:
|
|
41
|
-
200:
|
|
42
|
-
300:
|
|
43
|
-
400:
|
|
44
|
-
500:
|
|
45
|
-
600:
|
|
46
|
-
700:
|
|
47
|
-
800:
|
|
48
|
-
900:
|
|
49
|
-
950:
|
|
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)',
|
|
50
15
|
},
|
|
51
16
|
|
|
52
|
-
// SURFACES: Map your elevation/neutral tokens to PrimeVue surface system
|
|
53
17
|
surface: {
|
|
54
|
-
0:
|
|
55
|
-
50:
|
|
56
|
-
100:
|
|
57
|
-
200:
|
|
58
|
-
300:
|
|
59
|
-
400:
|
|
60
|
-
500:
|
|
61
|
-
600:
|
|
62
|
-
700:
|
|
63
|
-
800:
|
|
64
|
-
900:
|
|
65
|
-
950:
|
|
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)',
|
|
66
86
|
},
|
|
67
87
|
|
|
68
|
-
// COLOR SCHEME: Define how colors behave in light and dark modes
|
|
69
88
|
colorScheme: {
|
|
70
89
|
light: {
|
|
71
|
-
// Primary action colors
|
|
72
90
|
primary: {
|
|
73
|
-
color:
|
|
74
|
-
contrastColor:
|
|
75
|
-
hoverColor:
|
|
76
|
-
activeColor:
|
|
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)',
|
|
77
95
|
},
|
|
78
96
|
|
|
79
|
-
// Surface colors for light mode
|
|
80
97
|
surface: {
|
|
81
|
-
0:
|
|
82
|
-
50:
|
|
83
|
-
100:
|
|
84
|
-
200:
|
|
85
|
-
300:
|
|
86
|
-
400:
|
|
87
|
-
500:
|
|
88
|
-
600:
|
|
89
|
-
700:
|
|
90
|
-
800:
|
|
91
|
-
900:
|
|
92
|
-
950:
|
|
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)',
|
|
93
110
|
},
|
|
94
111
|
|
|
95
|
-
// Text colors
|
|
96
112
|
text: {
|
|
97
|
-
color:
|
|
98
|
-
hoverColor:
|
|
99
|
-
mutedColor:
|
|
100
|
-
highlightColor:
|
|
113
|
+
color: 'var(--color-text-default)',
|
|
114
|
+
hoverColor: 'var(--color-text-default)',
|
|
115
|
+
mutedColor: 'var(--color-text-subtle)',
|
|
116
|
+
highlightColor: 'var(--color-text-selected)',
|
|
101
117
|
},
|
|
102
118
|
|
|
103
|
-
// Content areas (forms, panels, etc.)
|
|
104
119
|
content: {
|
|
105
|
-
background:
|
|
106
|
-
hoverBackground:
|
|
107
|
-
borderColor:
|
|
108
|
-
color:
|
|
109
|
-
hoverColor:
|
|
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
|
-
},
|
|
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)',
|
|
133
125
|
},
|
|
134
126
|
},
|
|
135
127
|
|
|
136
128
|
dark: {
|
|
137
|
-
// Primary colors (same as light - your tokens handle the mode switching)
|
|
138
129
|
primary: {
|
|
139
|
-
color:
|
|
140
|
-
contrastColor:
|
|
141
|
-
hoverColor:
|
|
142
|
-
activeColor:
|
|
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)',
|
|
143
134
|
},
|
|
144
135
|
|
|
145
|
-
// Surface colors for dark mode (your CSS variables handle the switching)
|
|
146
136
|
surface: {
|
|
147
|
-
0:
|
|
148
|
-
50:
|
|
149
|
-
100:
|
|
150
|
-
200:
|
|
151
|
-
300:
|
|
152
|
-
400:
|
|
153
|
-
500:
|
|
154
|
-
600:
|
|
155
|
-
700:
|
|
156
|
-
800:
|
|
157
|
-
900:
|
|
158
|
-
950:
|
|
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)',
|
|
159
149
|
},
|
|
160
150
|
|
|
161
|
-
// Text colors (your tokens handle light/dark switching)
|
|
162
151
|
text: {
|
|
163
|
-
color:
|
|
164
|
-
hoverColor:
|
|
165
|
-
mutedColor:
|
|
166
|
-
highlightColor:
|
|
152
|
+
color: 'var(--color-text-default)',
|
|
153
|
+
hoverColor: 'var(--color-text-default)',
|
|
154
|
+
mutedColor: 'var(--color-text-subtle)',
|
|
155
|
+
highlightColor: 'var(--color-text-selected)',
|
|
167
156
|
},
|
|
168
157
|
|
|
169
158
|
content: {
|
|
170
|
-
background:
|
|
171
|
-
hoverBackground:
|
|
172
|
-
borderColor:
|
|
173
|
-
color:
|
|
174
|
-
hoverColor:
|
|
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
|
-
},
|
|
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)',
|
|
197
164
|
},
|
|
198
165
|
},
|
|
199
166
|
},
|
|
200
167
|
},
|
|
201
168
|
|
|
202
|
-
// COMPONENT CUSTOMIZATIONS: Apply your spacing and radius tokens to specific components
|
|
203
169
|
components: {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
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
|
|
216
|
-
},
|
|
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
|
|
223
|
-
},
|
|
224
|
-
},
|
|
225
|
-
},
|
|
226
|
-
|
|
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
|
-
},
|
|
241
|
-
|
|
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
|
-
},
|
|
250
|
-
|
|
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
|
-
},
|
|
170
|
+
global: {
|
|
171
|
+
css: `
|
|
172
|
+
.p-component {
|
|
173
|
+
font-family: var(--font-archivo), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
174
|
+
}
|
|
175
|
+
`
|
|
281
176
|
},
|
|
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
|
-
},
|
|
177
|
+
}
|
|
297
178
|
};
|
|
298
179
|
|
|
299
|
-
export default
|
|
180
|
+
export default BCCAuraOverride;
|