@bcc-code/design-tokens 3.0.22 → 3.0.23

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 (2) hide show
  1. package/README.md +9 -298
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,18 +1,6 @@
1
1
  # @bcc-code/design-tokens
2
2
 
3
- BCC Design System tokens for CSS, Tailwind v4, and PrimeVue with light/dark mode support.
4
-
5
- > **Migrating from @bcc-code/design-library-vue?** This package replaces the deprecated design-library. See the [Migration Guide](#migration-from-design-library-vue) below.
6
-
7
- ## Quick Start
8
-
9
- Choose your integration method:
10
-
11
- | Method | Best For | Components |
12
- |--------|----------|------------|
13
- | **PrimeVue** (recommended) | Vue 3 apps needing full component library | Yes - full PrimeVue components |
14
- | **Tailwind v4** | Any project using Tailwind | No - utility classes only |
15
- | **CSS Variables** | Any project, quick prototypes | No - variables only |
3
+ Design tokens for the BCC Design System. Provides colors, typography, spacing, and component theming for CSS, Tailwind v4, and PrimeVue with light/dark mode support.
16
4
 
17
5
  ## Installation
18
6
 
@@ -20,295 +8,18 @@ Choose your integration method:
20
8
  npm install @bcc-code/design-tokens
21
9
  ```
22
10
 
23
- ## Usage
24
-
25
- ### CSS Variables
26
-
27
- ```css
28
- @import '@bcc-code/design-tokens/css';
29
- ```
30
-
31
- Provides light theme by default, dark theme with `.dark` class:
32
-
33
- ```css
34
- .card {
35
- background: var(--color-elevation-surface-default);
36
- color: var(--color-text-default);
37
- padding: var(--space-300);
38
- border-radius: var(--border-radius-md);
39
- }
40
- ```
41
-
42
- Toggle dark mode:
43
-
44
- ```javascript
45
- document.documentElement.classList.toggle('dark');
46
- ```
47
-
48
- ### Tailwind CSS v4
49
-
50
- ```css
51
- @import '@bcc-code/design-tokens/tailwind';
52
- ```
53
-
54
- Use utility classes:
55
-
56
- ```html
57
- <div class="bg-elevation-surface-default text-default p-300 radius-md">
58
- Content
59
- </div>
60
-
61
- <!-- Dark mode -->
62
- <div class="dark">
63
- <div class="bg-elevation-surface-default text-default">
64
- Dark content
65
- </div>
66
- </div>
67
- ```
68
-
69
- ### PrimeVue
70
-
71
- Install the required peer dependencies:
72
-
73
- ```bash
74
- npm install primevue @primeuix/themes
75
- ```
76
-
77
- Import the preset and overrides:
78
-
79
- ```javascript
80
- import { createApp } from 'vue'
81
- import PrimeVue from 'primevue/config'
82
- import BCCPreset from '@bcc-code/design-tokens/primevue'
83
- import '@bcc-code/design-tokens/primevue/overrides'
84
-
85
- const app = createApp(App)
86
-
87
- app.use(PrimeVue, {
88
- theme: {
89
- preset: BCCPreset,
90
- options: {
91
- darkModeSelector: '.dark',
92
- cssLayer: {
93
- name: 'primevue',
94
- order: 'theme, base, primevue, custom'
95
- }
96
- }
97
- }
98
- })
99
- ```
100
-
101
- Toggle dark mode:
102
-
103
- ```javascript
104
- document.documentElement.classList.toggle('dark')
105
- ```
106
-
107
- **What's Included:**
108
- - `@bcc-code/design-tokens/primevue` - PrimeVue Aura preset with BCC tokens
109
- - `@bcc-code/design-tokens/primevue/overrides` - CSS overrides for component styling
110
-
111
- ## Available Exports
112
-
113
- ### CSS
114
- - `@bcc-code/design-tokens/css` - Auto-switching theme (prefers-color-scheme)
115
- - `@bcc-code/design-tokens/css/light` - Light theme only
116
- - `@bcc-code/design-tokens/css/dark` - Dark theme only
117
-
118
- ### Tailwind CSS
119
- - `@bcc-code/design-tokens/tailwind` - Auto-switching utilities
120
- - `@bcc-code/design-tokens/tailwind/light` - Light utilities only
121
- - `@bcc-code/design-tokens/tailwind/dark` - Dark utilities only
122
-
123
- ### JavaScript
124
- - `@bcc-code/design-tokens/js/light` - Light theme tokens as JS objects
125
- - `@bcc-code/design-tokens/js/dark` - Dark theme tokens as JS objects
126
-
127
- ### PrimeVue
128
- - `@bcc-code/design-tokens/primevue` - Aura preset configuration
129
- - `@bcc-code/design-tokens/primevue/overrides` - Component CSS overrides
130
-
131
- ## Token Categories
132
-
133
- - **Colors**: Text, backgrounds, borders, states
134
- - **Typography**: Font families, sizes, weights, line heights
135
- - **Spacing**: Margins, padding, gaps (50-1000 scale)
136
- - **Border Radius**: Corner rounding
137
- - **Elevation**: Surface levels
138
-
139
- ## CDN Usage
140
-
141
- ```html
142
- <!-- CSS variables -->
143
- <link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/auto.css">
144
-
145
- <!-- Tailwind utilities -->
146
- <link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/tailwind-auto.css">
147
-
148
- <!-- Theme toggle -->
149
- <script>
150
- document.documentElement.classList.toggle('dark');
151
- </script>
152
- ```
153
-
154
- ## Migration from design-library-vue
11
+ ## Documentation
155
12
 
156
- If you're migrating from `@bcc-code/design-library-vue`, follow these steps:
157
-
158
- ### 1. Install new packages
159
-
160
- ```bash
161
- # Remove old package
162
- npm uninstall @bcc-code/design-library-vue
163
-
164
- # Install new packages
165
- npm install @bcc-code/design-tokens primevue @primeuix/themes
166
- ```
167
-
168
- ### 2. Update imports
169
-
170
- **Before (design-library-vue):**
171
- ```javascript
172
- import { BccButton, BccModal } from '@bcc-code/design-library-vue'
173
- import '@bcc-code/design-library-vue/style.css'
174
- ```
175
-
176
- **After (design-tokens + PrimeVue):**
177
- ```javascript
178
- import Button from 'primevue/button'
179
- import Dialog from 'primevue/dialog'
180
- import BCCPreset from '@bcc-code/design-tokens/primevue'
181
- import '@bcc-code/design-tokens/primevue/overrides'
182
- ```
183
-
184
- ### 3. Configure PrimeVue
185
-
186
- ```javascript
187
- import { createApp } from 'vue'
188
- import PrimeVue from 'primevue/config'
189
- import BCCPreset from '@bcc-code/design-tokens/primevue'
190
- import '@bcc-code/design-tokens/primevue/overrides'
191
-
192
- const app = createApp(App)
193
-
194
- app.use(PrimeVue, {
195
- theme: {
196
- preset: BCCPreset,
197
- options: {
198
- darkModeSelector: '.dark'
199
- }
200
- }
201
- })
202
- ```
13
+ For usage instructions, component guidelines, and examples, see the full documentation:
203
14
 
204
- ### 4. Component mapping
205
-
206
- | design-library-vue | PrimeVue |
207
- |--------------------|----------|
208
- | BccButton | Button |
209
- | BccModal | Dialog |
210
- | BccInput | InputText |
211
- | BccSelect | Select |
212
- | BccCheckbox | Checkbox |
213
- | BccRadio | RadioButton |
214
- | BccTabs | TabView |
215
- | BccTable | DataTable |
216
- | BccBadge | Badge |
217
- | BccSpinner | ProgressSpinner |
218
-
219
- See the [PrimeVue documentation](https://primevue.org/introduction/) for the full component list.
220
-
221
- ## Token Structure
222
-
223
- Tokens are organized in two layers:
224
-
225
- ### Primitive Tokens (Base Values)
226
- Static values that don't change between themes:
227
- - `--color-neutral-0` through `--color-neutral-1000`
228
- - `--color-green-*`, `--color-red-*`, `--color-blue-*`
229
- - `--space-50` through `--space-1000`
230
- - `--border-radius-sm`, `--border-radius-md`, `--border-radius-lg`
231
-
232
- ### Semantic Tokens (Theme-Aware)
233
- Reference primitive tokens and change between light/dark:
234
- - `--color-text-default` - Main text color
235
- - `--color-text-subtle` - Secondary text
236
- - `--color-background-*` - Background colors
237
- - `--color-elevation-surface-*` - Surface elevation levels
238
- - `--color-border-*` - Border colors
239
- - `--color-interactive-*` - Interactive element colors
240
-
241
- ## Tailwind Utility Classes
242
-
243
- When using Tailwind v4, these utility classes are available:
244
-
245
- ### Colors
246
- ```html
247
- <!-- Text colors -->
248
- <p class="text-default">Default text</p>
249
- <p class="text-subtle">Subtle text</p>
250
- <p class="text-success">Success text</p>
251
- <p class="text-danger">Danger text</p>
252
-
253
- <!-- Background colors -->
254
- <div class="bg-elevation-surface-default">Surface</div>
255
- <div class="bg-elevation-surface-sunken">Sunken surface</div>
256
- <div class="bg-interactive-primary">Primary button</div>
257
-
258
- <!-- Border colors -->
259
- <div class="border border-default">Default border</div>
260
- ```
261
-
262
- ### Spacing Scale
263
- | Token | Value | Pixels |
264
- |-------|-------|--------|
265
- | 50 | 0.25rem | 4px |
266
- | 100 | 0.5rem | 8px |
267
- | 150 | 0.75rem | 12px |
268
- | 200 | 1rem | 16px |
269
- | 250 | 1.25rem | 20px |
270
- | 300 | 1.5rem | 24px |
271
- | 400 | 2rem | 32px |
272
- | 500 | 2.5rem | 40px |
273
- | 600 | 3rem | 48px |
274
- | 800 | 4rem | 64px |
275
- | 1000 | 5rem | 80px |
276
-
277
- ```html
278
- <div class="p-100">Padding 8px</div>
279
- <div class="p-200">Padding 16px</div>
280
- <div class="p-300">Padding 24px</div>
281
- <div class="m-400">Margin 32px</div>
282
- <div class="gap-200">Gap 16px</div>
283
- ```
284
-
285
- ### Border Radius
286
- ```html
287
- <div class="radius-sm">Small radius</div>
288
- <div class="radius-md">Medium radius</div>
289
- <div class="radius-lg">Large radius</div>
290
- <div class="radius-full">Full radius (pill)</div>
291
- ```
292
-
293
- ### Dark Mode
294
- ```html
295
- <!-- Container with dark mode -->
296
- <div class="dark">
297
- <div class="bg-elevation-surface-default text-default">
298
- Automatically uses dark theme colors
299
- </div>
300
- </div>
301
-
302
- <!-- Or toggle on root -->
303
- <script>
304
- document.documentElement.classList.toggle('dark')
305
- </script>
306
- ```
15
+ **[developer.bcc.no/bcc-design](https://developer.bcc.no/bcc-design/)**
307
16
 
308
- ## Contributing
17
+ ## Quick Links
309
18
 
310
- Contributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup, workflow, and publishing instructions.
19
+ - [Get Started](https://developer.bcc.no/bcc-design/getting-started/) - Installation and setup
20
+ - [Foundations](https://developer.bcc.no/bcc-design/foundations/) - Tokens, colors, typography, spacing
21
+ - [Components](https://developer.bcc.no/bcc-design/components/) - PrimeVue component styling
311
22
 
312
23
  ## License
313
24
 
314
- MIT © BCC Code
25
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcc-code/design-tokens",
3
- "version": "3.0.22",
3
+ "version": "3.0.23",
4
4
  "description": "Design tokens build system",
5
5
  "type": "module",
6
6
  "exports": {