@bcc-code/design-tokens 1.0.10 → 1.0.13

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 (6) hide show
  1. package/README.md +45 -62
  2. package/dist/bcc-primevue-preset.js +178 -266
  3. package/dist/tailwind.css +48 -439
  4. package/dist/variables.css +625 -591
  5. package/package.json +5 -6
  6. package/dist/tailwind.config.js +0 -198
package/README.md CHANGED
@@ -1,47 +1,18 @@
1
- # @bcc-code/design-tokens – Light & Dark Theme
1
+ # @bcc-code/design-tokens - BCC Design Tokens
2
2
 
3
3
  ![version](https://img.shields.io/npm/v/@bcc-code/design-tokens?color=blue&label=version)
4
4
  ![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@bcc-code/design-tokens/badge)
5
5
  [![Publish to NPM](https://github.com/bcc-code/design-tokens/actions/workflows/publish.yml/badge.svg)](https://github.com/bcc-code/design-tokens/actions/workflows/publish.yml)
6
6
 
7
- A scoped design token package with light and dark themes, usable across PrimeVue, WordPress, and plain HTML/JS projects. Built with [Style Dictionary](https://amzn.github.io/style-dictionary/#/).
7
+ A scoped design token package with light and dark themes for BCC projects.
8
8
 
9
- ## ✨ Features
10
-
11
- - ✅ Light and dark theme support
12
- - ✅ Zero-config CSS variables (primitives + semantic)
13
- - ✅ Available via NPM and CDN
14
- - ✅ Built-in PrimeVue `aura`-compatible preset
15
- - ✅ Works in WordPress, Vue, and vanilla HTML
16
- - ✅ Scalable architecture for future token sets and themes
17
-
18
- ---
19
-
20
- ## 📦 Installation & Usage
21
-
22
- ### ▶️ Install via NPM (for Vue/PrimeVue)
9
+ ## 📦 Installation
23
10
 
24
11
  ```bash
25
12
  npm install @bcc-code/design-tokens@latest
26
13
  ```
27
14
 
28
- In your `main.js`:
29
-
30
- ```js
31
- import "@bcc-code/design-tokens/variables.css"; // Injects all CSS variables
32
- import { BCCPrimeVuePreset } from "@bcc-code/design-tokens/primevue-preset";
33
-
34
- app.use(PrimeVue, {
35
- theme: {
36
- preset: BCCPrimeVuePreset,
37
- options: {
38
- darkModeSelector: ".dark-mode", // You toggle this class manually or via script
39
- },
40
- },
41
- });
42
- ```
43
-
44
- ### 🌐 Use via CDN (WordPress / HTML / No Build Tools)
15
+ Or via CDN:
45
16
 
46
17
  ```html
47
18
  <link
@@ -50,54 +21,66 @@ app.use(PrimeVue, {
50
21
  />
51
22
  ```
52
23
 
53
- To enable dark mode, add this to your HTML:
24
+ ## 🎯 Usage Scenarios
25
+
26
+ ### WordPress / HTML Projects
27
+
28
+ 1. **Basic CSS Variables**
54
29
 
55
30
  ```html
56
- <html class="dark-mode"></html>
31
+ <link
32
+ rel="stylesheet"
33
+ href="https://cdn.jsdelivr.net/npm/@bcc-code/design-tokens@latest/dist/variables.css"
34
+ />
57
35
  ```
58
36
 
59
- Optional: Use a script with `prefers-color-scheme` to toggle `.dark-mode` dynamically.
37
+ 2. **With Tailwind CSS**
60
38
 
61
- ### 📁 Project Structure
62
-
63
- ```txt
64
- tokens/ # Source tokens (JSON)
65
- export-tokens/ # Style Dictionary config + custom generators
66
- build/ # Intermediate Style Dictionary outputs
67
- dist/ # Final NPM/CDN-ready files
68
- ├── variables.css # Combined light + dark + primitives CSS variables
69
- └── primevue-preset.js # PrimeVue theme preset (Aura-compatible)
39
+ ```html
40
+ <link
41
+ rel="stylesheet"
42
+ href="https://cdn.jsdelivr.net/npm/@bcc-code/design-tokens@latest/dist/tailwind.css"
43
+ />
70
44
  ```
71
45
 
72
- ### ⚙ How It Works (Build System)
46
+ ### Vue / PrimeVue Projects
73
47
 
74
- 1. Tokens are defined in `tokens/` (primitives, semantic, themes)
48
+ 1. **With BCC PrimeVue Preset**
75
49
 
76
- 2. Style Dictionary transforms them using custom scripts
77
-
78
- 3. Output files are:
50
+ ```js
51
+ import "@bcc-code/design-tokens/variables.css";
52
+ import { BCCPrimeVuePreset } from "@bcc-code/design-tokens/primevue-preset";
79
53
 
80
- - `variables.css`: all CSS variables under `:root` and `.dark-mode`
81
- - `primevue-preset.js`: an override object usable in PrimeVue
54
+ app.use(PrimeVue, {
55
+ theme: {
56
+ preset: BCCPrimeVuePreset,
57
+ },
58
+ });
59
+ ```
82
60
 
83
- Run the build:
61
+ 2. **With Tailwind CSS**
84
62
 
85
- ```bash
86
- npm run build
63
+ ```js
64
+ import "@bcc-code/design-tokens/tailwind.css";
87
65
  ```
88
66
 
89
- ### 🧱 Token Structure
67
+ 3. **With Both**
90
68
 
91
- - **primitives**: base values (e.g. `--color-neutral-100`)
69
+ ```js
70
+ import "@bcc-code/design-tokens/tailwind.css";
71
+ import { BCCPrimeVuePreset } from "@bcc-code/design-tokens/primevue-preset";
92
72
 
93
- - **semantic**: tokens with purpose-based names (`--color-surface-primary`)
73
+ app.use(PrimeVue, {
74
+ theme: {
75
+ preset: BCCPrimeVuePreset,
76
+ },
77
+ });
78
+ ```
94
79
 
95
- - **light / dark**: theme-specific values using the same semantic names
80
+ ## 🤝 Contributing
96
81
 
97
- - `variables.css`: combines all and respects CSS variable cascade rules
82
+ Want to contribute to this project? Check out our [Contributing Guide](CONTRIBUTING.md) for details on how to get started.
98
83
 
99
84
  ### 📄 License
100
85
 
101
86
  MIT
102
-
103
- Note: All CDN and NPM imports use the `@bcc-code/design-tokens` scope. If you fork this project or publish your own, replace all references accordingly.
package/dist/bcc-primevue-preset.js CHANGED
@@ -4,20 +4,44 @@ import Aura from "@primeuix/themes/aura";
4
4
 
5
5
  export const BCCPrimeVuePreset = definePreset(Aura, {
6
6
  primitive: {
7
+ "border-radius": {
8
+ none: "0",
9
+ xs: "0.125rem",
10
+ sm: "0.25rem",
11
+ md: "0.5rem",
12
+ lg: "1rem",
13
+ xl: "2rem",
14
+ "2xl": "3rem",
15
+ full: "999px"
16
+ },
17
+ "border-width": {
18
+ md: "2px",
19
+ sm: "1px"
20
+ },
7
21
  color: {
8
- neutral: {
9
- 0: "#ffffff",
10
- 100: "#f7f8f9",
11
- 200: "#f1f2f4",
12
- 300: "#dcdfe4",
13
- 400: "#b3b9c4",
14
- 500: "#8590a2",
15
- 600: "#758195",
16
- 700: "#626f86",
17
- 800: "#4b5668",
18
- 900: "#374152",
19
- 1000: "#282f3c",
20
- 1100: "#1e242d"
22
+ bcc: {
23
+ 100: "#e6f2f1",
24
+ 200: "#d0e3e1",
25
+ 300: "#accbc8",
26
+ 400: "#73b2ac",
27
+ 500: "#2e9087",
28
+ 600: "#187b73",
29
+ 700: "#0e6962",
30
+ 800: "#004e48",
31
+ 900: "#003d39",
32
+ 1000: "#002320"
33
+ },
34
+ blue: {
35
+ 100: "#f1f7fd",
36
+ 200: "#dfedfa",
37
+ 300: "#c6e0f7",
38
+ 400: "#a0cdf0",
39
+ 500: "#72b1e8",
40
+ 600: "#5294e0",
41
+ 700: "#3c79d4",
42
+ 800: "#3365c2",
43
+ 900: "#2f529e",
44
+ 1000: "#25385f"
21
45
  },
22
46
  "dark-neutral": {
23
47
  0: "#161a1d",
@@ -33,41 +57,12 @@ export const BCCPrimeVuePreset = definePreset(Aura, {
33
57
  1000: "#c7d1db",
34
58
  1100: "#dee4ea"
35
59
  },
36
- bcc: {
37
- 100: "#e6f2f1",
38
- 200: "#d0e3e1",
39
- 300: "#accbc8",
40
- 400: "#73b2ac",
41
- 500: "#2e9087",
42
- 600: "#187b73",
43
- 700: "#0e6962",
44
- 800: "#004e48",
45
- 900: "#003d39",
46
- 1000: "#002320"
47
- },
48
- rust: {
49
- 100: "#fcf6f4",
50
- 200: "#f9ece7",
51
- 300: "#f6dcd2",
52
- 400: "#e9b29e",
53
- 500: "#e29f87",
54
- 600: "#d37f60",
55
- 700: "#be6544",
56
- 800: "#9f5236",
57
- 900: "#844630",
58
- 1000: "#4c271a"
59
- },
60
- red: {
61
- 100: "#fcf4f4",
62
- 200: "#fae7e6",
63
- 300: "#f6d3d2",
64
- 400: "#efb4b2",
65
- 500: "#e38986",
66
- 600: "#d5625e",
67
- 700: "#c04642",
68
- 800: "#ad3c38",
69
- 900: "#86312e",
70
- 1000: "#461716"
60
+ "dark-neutral-alpha": {
61
+ "100A": "rgba(188, 214, 240, 0.04)",
62
+ "200A": "rgba(161, 189, 217, 0.08)",
63
+ "300A": "rgba(166, 197, 226, 0.16)",
64
+ "400A": "rgba(166, 197, 226, 0.28)",
65
+ "500A": "rgba(166, 197, 226, 0.5)"
71
66
  },
72
67
  green: {
73
68
  100: "#f2fbf6",
@@ -81,54 +76,6 @@ export const BCCPrimeVuePreset = definePreset(Aura, {
81
76
  900: "#25563b",
82
77
  1000: "#133925"
83
78
  },
84
- teal: {
85
- 100: "#f1f9fa",
86
- 200: "#dceff1",
87
- 300: "#bde0e4",
88
- 400: "#8fc9d1",
89
- 500: "#5cabb7",
90
- 600: "#3e8e9c",
91
- 700: "#377483",
92
- 800: "#32606c",
93
- 900: "#2f505b",
94
- 1000: "#1d353f"
95
- },
96
- sand: {
97
- 100: "#f7f3ee",
98
- 200: "#ede5da",
99
- 300: "#dccfba",
100
- 400: "#c5b191",
101
- 500: "#ae966d",
102
- 600: "#937b4f",
103
- 700: "#74613c",
104
- 800: "#5a4d31",
105
- 900: "#49402b",
106
- 1000: "#3c3420"
107
- },
108
- blue: {
109
- 100: "#f1f7fd",
110
- 200: "#dfedfa",
111
- 300: "#c6e0f7",
112
- 400: "#a0cdf0",
113
- 500: "#72b1e8",
114
- 600: "#5294e0",
115
- 700: "#3c79d4",
116
- 800: "#3365c2",
117
- 900: "#2f529e",
118
- 1000: "#25385f"
119
- },
120
- purple: {
121
- 100: "#f1f1fc",
122
- 200: "#e5e7fa",
123
- 300: "#d0d1f5",
124
- 400: "#b3b3ee",
125
- 500: "#9b95e4",
126
- 600: "#8678d9",
127
- 700: "#7860cb",
128
- 800: "#6750b2",
129
- 900: "#554390",
130
- 1000: "#352c54"
131
- },
132
79
  magenta: {
133
80
  100: "#faf5f9",
134
81
  200: "#f7ecf5",
@@ -141,24 +88,88 @@ export const BCCPrimeVuePreset = definePreset(Aura, {
141
88
  900: "#7a3a65",
142
89
  1000: "#592648"
143
90
  },
91
+ neutral: {
92
+ 0: "#ffffff",
93
+ 100: "#f7f8f9",
94
+ 200: "#f1f2f4",
95
+ 300: "#dcdfe4",
96
+ 400: "#b3b9c4",
97
+ 500: "#8590a2",
98
+ 600: "#758195",
99
+ 700: "#626f86",
100
+ 800: "#4b5668",
101
+ 900: "#374152",
102
+ 1000: "#282f3c",
103
+ 1100: "#1e242d"
104
+ },
144
105
  "neutral-alpha": {
145
106
  "100A": "rgba(9, 30, 77, 0.03)",
146
- "500A": "rgba(9, 30, 77, 0.5)",
147
107
  "200A": "rgba(9, 30, 77, 0.06)",
148
108
  "300A": "rgba(9, 30, 77, 0.14)",
149
- "400A": "rgba(9, 30, 77, 0.31)"
109
+ "400A": "rgba(9, 30, 77, 0.31)",
110
+ "500A": "rgba(9, 30, 77, 0.5)"
150
111
  },
151
- "dark-neutral-alpha": {
152
- "100A": "rgba(188, 214, 240, 0.04)",
153
- "200A": "rgba(161, 189, 217, 0.08)",
154
- "300A": "rgba(166, 197, 226, 0.16)",
155
- "400A": "rgba(166, 197, 226, 0.28)",
156
- "500A": "rgba(166, 197, 226, 0.5)"
112
+ purple: {
113
+ 100: "#f1f1fc",
114
+ 200: "#e5e7fa",
115
+ 300: "#d0d1f5",
116
+ 400: "#b3b3ee",
117
+ 500: "#9b95e4",
118
+ 600: "#8678d9",
119
+ 700: "#7860cb",
120
+ 800: "#6750b2",
121
+ 900: "#554390",
122
+ 1000: "#352c54"
123
+ },
124
+ red: {
125
+ 100: "#fcf4f4",
126
+ 200: "#fae7e6",
127
+ 300: "#f6d3d2",
128
+ 400: "#efb4b2",
129
+ 500: "#e38986",
130
+ 600: "#d5625e",
131
+ 700: "#c04642",
132
+ 800: "#ad3c38",
133
+ 900: "#86312e",
134
+ 1000: "#461716"
135
+ },
136
+ rust: {
137
+ 100: "#fcf6f4",
138
+ 200: "#f9ece7",
139
+ 300: "#f6dcd2",
140
+ 400: "#e9b29e",
141
+ 500: "#e29f87",
142
+ 600: "#d37f60",
143
+ 700: "#be6544",
144
+ 800: "#9f5236",
145
+ 900: "#844630",
146
+ 1000: "#4c271a"
147
+ },
148
+ sand: {
149
+ 100: "#f7f3ee",
150
+ 200: "#ede5da",
151
+ 300: "#dccfba",
152
+ 400: "#c5b191",
153
+ 500: "#ae966d",
154
+ 600: "#937b4f",
155
+ 700: "#74613c",
156
+ 800: "#5a4d31",
157
+ 900: "#49402b",
158
+ 1000: "#3c3420"
159
+ },
160
+ teal: {
161
+ 100: "#f1f9fa",
162
+ 200: "#dceff1",
163
+ 300: "#bde0e4",
164
+ 400: "#8fc9d1",
165
+ 500: "#5cabb7",
166
+ 600: "#3e8e9c",
167
+ 700: "#377483",
168
+ 800: "#32606c",
169
+ 900: "#2f505b",
170
+ 1000: "#1d353f"
157
171
  }
158
172
  },
159
- opacity: {
160
- opacity: "#ffffff"
161
- },
162
173
  dimension: {
163
174
  "space-0": "0 rem",
164
175
  "space-25": "0.125rem",
@@ -175,69 +186,54 @@ export const BCCPrimeVuePreset = definePreset(Aura, {
175
186
  "space-800": "4rem",
176
187
  "space-1000": "80px"
177
188
  },
178
- "border-width": {
179
- sm: "1px",
180
- md: "2px"
181
- },
182
- "border-radius": {
183
- none: "0",
184
- xs: "0.125rem",
185
- sm: "0.25rem",
186
- md: "0.5rem",
187
- lg: "1rem",
188
- xl: "2rem",
189
- "2xl": "3rem",
190
- full: "999px"
191
- },
192
- "icon-size": {
193
- xs: "1rem",
194
- sm: "1.25rem",
195
- md: "1.5rem",
196
- lg: "2rem",
197
- xl: "3rem"
198
- },
199
- "text-decoration": {
200
- none: "none",
201
- underline: "underline",
202
- "line-through": "line-through"
203
- },
204
- "text-transform": {
205
- uppercase: "uppercase",
206
- " lowercase": "lowercase",
207
- " capitalize": "capitalize",
208
- none: "none"
209
- },
210
189
  "font-size": {
211
- "text-xs": "0.75rem",
212
- "text-sm": "0.875rem",
213
- "text-md": "1rem",
214
- "text-lg": "1.25rem",
215
- "text-xl": "1.5rem",
216
190
  "text-2xl": "2rem",
217
191
  "text-3xl": "2.25rem",
218
- "text-4xl": "3rem"
192
+ "text-4xl": "3rem",
193
+ "text-lg": "1.25rem",
194
+ "text-md": "1rem",
195
+ "text-sm": "0.875rem",
196
+ "text-xl": "1.5rem",
197
+ "text-xs": "0.75rem"
219
198
  },
220
199
  "font-weight": {
221
- "regular-400": "{fontweights.archivo-regular}",
200
+ "bold-700": "{fontweights.archivo-bold}",
222
201
  "medium-500": "{fontweights.archivo-medium}",
223
- "bold-700": "{fontweights.archivo-bold}"
202
+ "regular-400": "{fontweights.archivo-regular}"
203
+ },
204
+ fontFamilies: {
205
+ archivo: "Archivo"
206
+ },
207
+ fontWeights: {
208
+ "archivo-black": 900,
209
+ "archivo-bold": 700,
210
+ "archivo-extrabold": 800,
211
+ "archivo-extralight": 200,
212
+ "archivo-light": 300,
213
+ "archivo-medium": 500,
214
+ "archivo-regular": 400,
215
+ "archivo-semibold": 600,
216
+ "archivo-thin": 100
217
+ },
218
+ "icon-size": {
219
+ lg: "2rem",
220
+ md: "1.5rem",
221
+ sm: "1.25rem",
222
+ xl: "3rem",
223
+ xs: "1rem"
224
224
  },
225
225
  "line-height": {
226
- "text-4xl": {
227
- "leading-none": "3rem",
228
- "leading-tight": "3.25rem"
226
+ "text-2xl": {
227
+ "leading-none": "2rem",
228
+ "leading-tight": "2.25rem"
229
229
  },
230
230
  "text-3xl": {
231
231
  "leading-none": "2.25rem",
232
232
  "leading-tight": "2.5rem"
233
233
  },
234
- "text-2xl": {
235
- "leading-none": "2rem",
236
- "leading-tight": "2.25rem"
237
- },
238
- "text-xl": {
239
- "leading-none": "1.5rem",
240
- "leading-tight": "1.75"
234
+ "text-4xl": {
235
+ "leading-none": "3rem",
236
+ "leading-tight": "3.25rem"
241
237
  },
242
238
  "text-lg": {
243
239
  "leading-none": "1.25rem",
@@ -245,54 +241,54 @@ export const BCCPrimeVuePreset = definePreset(Aura, {
245
241
  },
246
242
  "text-md": {
247
243
  "leading-none": "1rem",
248
- "leading-tight": "1.25",
249
- "leading-normal": "1.5rem"
244
+ "leading-normal": "1.5rem",
245
+ "leading-tight": "1.25"
250
246
  },
251
247
  "text-sm": {
252
248
  "leading-none": "0.875rem",
253
249
  "leading-normal": "1.25rem"
254
250
  },
251
+ "text-xl": {
252
+ "leading-none": "1.5rem",
253
+ "leading-tight": "1.75"
254
+ },
255
255
  "text-xs": {
256
256
  "leading-none": "0.75rem",
257
257
  "leading-normal": "1.25rem"
258
258
  }
259
259
  },
260
+ opacity: {
261
+ opacity: "#ffffff"
262
+ },
260
263
  "space-between": {
261
264
  0: "{dimension.space-0}"
262
265
  },
263
- tracking: {
264
- tighter: "-0.04em",
265
- tight: "-0.02em",
266
- normal: "0em",
267
- wide: "0.04em"
266
+ "text-decoration": {
267
+ none: "none",
268
+ "line-through": "line-through",
269
+ underline: "underline"
268
270
  },
269
271
  "text-indent": {
270
272
  0: "{dimension.space-0}"
271
273
  },
272
- fontFamilies: {
273
- archivo: "Archivo"
274
+ "text-transform": {
275
+ none: "none",
276
+ " capitalize": "capitalize",
277
+ " lowercase": "lowercase",
278
+ uppercase: "uppercase"
274
279
  },
275
- fontWeights: {
276
- "archivo-thin": 100,
277
- "archivo-extralight": 200,
278
- "archivo-light": 300,
279
- "archivo-regular": 400,
280
- "archivo-medium": 500,
281
- "archivo-semibold": 600,
282
- "archivo-bold": 700,
283
- "archivo-extrabold": 800,
284
- "archivo-black": 900
280
+ tracking: {
281
+ normal: "0em",
282
+ tight: "-0.02em",
283
+ tighter: "-0.04em",
284
+ wide: "0.04em"
285
285
  }
286
286
  },
287
287
  semantic: {
288
288
  colorScheme: {
289
289
  dark: {
290
290
  content: {
291
- background: "{color.dark-neutral.0}",
292
- borderColor: "{color.dark-neutral.200}",
293
- color: "{color.dark-neutral.1100}",
294
- hoverBackground: "{color.dark-neutral.200}",
295
- hoverColor: "{color.dark-neutral.1100}"
291
+ background: "{color.dark-neutral.0}"
296
292
  },
297
293
  surface: {
298
294
  0: "{color.dark-neutral.0}",
@@ -306,21 +302,11 @@ export const BCCPrimeVuePreset = definePreset(Aura, {
306
302
  800: "{color.dark-neutral.800}",
307
303
  900: "{color.dark-neutral.900}",
308
304
  950: "{color.dark-neutral.1000}"
309
- },
310
- text: {
311
- color: "{color.dark-neutral.1100}",
312
- hoverColor: "{color.dark-neutral.1100}",
313
- hoverMutedColor: "{color.dark-neutral.1100}",
314
- mutedColor: "{color.dark-neutral.1100}"
315
305
  }
316
306
  },
317
307
  light: {
318
308
  content: {
319
- background: "{color.neutral.0}",
320
- borderColor: "{color.neutral.200}",
321
- color: "{color.neutral.1100}",
322
- hoverBackground: "{color.neutral.200}",
323
- hoverColor: "{color.neutral.1100}"
309
+ background: "{color.neutral.0}"
324
310
  },
325
311
  surface: {
326
312
  0: "{color.neutral.0}",
@@ -334,83 +320,9 @@ export const BCCPrimeVuePreset = definePreset(Aura, {
334
320
  800: "{color.neutral.800}",
335
321
  900: "{color.neutral.900}",
336
322
  950: "{color.neutral.1000}"
337
- },
338
- text: {
339
- color: "{color.neutral.1100}",
340
- hoverColor: "{color.neutral.1100}",
341
- hoverMutedColor: "{color.neutral.1100}",
342
- mutedColor: "{color.neutral.1100}"
343
323
  }
344
324
  }
345
325
  },
346
- content: {
347
- borderRadius: "{border-radius.md}"
348
- },
349
- disabledOpacity: "{opacity.opacity}",
350
- focusRing: {
351
- color: "{color.bcc.100}"
352
- },
353
- formField: {
354
- borderRadius: "{border-radius.md}",
355
- focusRing: {
356
- color: "{color.bcc.100}"
357
- },
358
- lg: {
359
- fontSize: "{font-size.text-lg}",
360
- paddingX: "{dimension.space-200}",
361
- paddingY: "{dimension.space-150}"
362
- },
363
- paddingX: "{dimension.space-150}",
364
- paddingY: "{dimension.space-100}",
365
- sm: {
366
- fontSize: "{font-size.text-sm}",
367
- paddingX: "{dimension.space-150}",
368
- paddingY: "{dimension.space-100}"
369
- }
370
- },
371
- list: {
372
- gap: "{dimension.space-50}",
373
- header: {
374
-
375
- },
376
- option: {
377
- borderRadius: "{border-radius.md}"
378
- },
379
- optionGroup: {
380
- fontWeight: "{font-weight.medium-500}"
381
- }
382
- },
383
- mask: {
384
-
385
- },
386
- navigation: {
387
- item: {
388
- borderRadius: "{border-radius.md}"
389
- },
390
- list: {
391
-
392
- },
393
- submenuIcon: {
394
-
395
- },
396
- submenuLabel: {
397
-
398
- }
399
- },
400
- overlay: {
401
- modal: {
402
- borderRadius: "{border-radius.md}"
403
- },
404
- navigation: {
405
-
406
- },
407
- popover: {
408
- borderRadius: "{border-radius.md}"
409
- },
410
- select: {
411
- borderRadius: "{border-radius.md}"
412
- }
413
- },
414
326
  primary: {
415
327
  50: "{color.bcc.100}",
416
328
  100: "{color.bcc.200}",