@bcc-code/design-tokens 3.0.16 → 3.0.17
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 +61 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -56,18 +56,31 @@ Use utility classes:
|
|
|
56
56
|
|
|
57
57
|
### PrimeVue
|
|
58
58
|
|
|
59
|
+
Install the required peer dependencies:
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
npm install primevue @primeuix/themes
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Import the preset and overrides:
|
|
66
|
+
|
|
59
67
|
```javascript
|
|
60
68
|
import { createApp } from 'vue'
|
|
61
69
|
import PrimeVue from 'primevue/config'
|
|
62
70
|
import BCCPreset from '@bcc-code/design-tokens/primevue'
|
|
71
|
+
import '@bcc-code/design-tokens/primevue/overrides'
|
|
72
|
+
|
|
73
|
+
const app = createApp(App)
|
|
63
74
|
|
|
64
75
|
app.use(PrimeVue, {
|
|
65
76
|
theme: {
|
|
66
77
|
preset: BCCPreset,
|
|
67
78
|
options: {
|
|
68
|
-
prefix: 'p',
|
|
69
79
|
darkModeSelector: '.dark',
|
|
70
|
-
cssLayer:
|
|
80
|
+
cssLayer: {
|
|
81
|
+
name: 'primevue',
|
|
82
|
+
order: 'theme, base, primevue, custom'
|
|
83
|
+
}
|
|
71
84
|
}
|
|
72
85
|
}
|
|
73
86
|
})
|
|
@@ -76,14 +89,38 @@ app.use(PrimeVue, {
|
|
|
76
89
|
Toggle dark mode:
|
|
77
90
|
|
|
78
91
|
```javascript
|
|
79
|
-
document.documentElement.classList.toggle('dark')
|
|
92
|
+
document.documentElement.classList.toggle('dark')
|
|
80
93
|
```
|
|
81
94
|
|
|
95
|
+
**What's Included:**
|
|
96
|
+
- `@bcc-code/design-tokens/primevue` - PrimeVue Aura preset with BCC tokens
|
|
97
|
+
- `@bcc-code/design-tokens/primevue/overrides` - CSS overrides for component styling
|
|
98
|
+
|
|
99
|
+
## Available Exports
|
|
100
|
+
|
|
101
|
+
### CSS
|
|
102
|
+
- `@bcc-code/design-tokens/css` - Auto-switching theme (prefers-color-scheme)
|
|
103
|
+
- `@bcc-code/design-tokens/css/light` - Light theme only
|
|
104
|
+
- `@bcc-code/design-tokens/css/dark` - Dark theme only
|
|
105
|
+
|
|
106
|
+
### Tailwind CSS
|
|
107
|
+
- `@bcc-code/design-tokens/tailwind` - Auto-switching utilities
|
|
108
|
+
- `@bcc-code/design-tokens/tailwind/light` - Light utilities only
|
|
109
|
+
- `@bcc-code/design-tokens/tailwind/dark` - Dark utilities only
|
|
110
|
+
|
|
111
|
+
### JavaScript
|
|
112
|
+
- `@bcc-code/design-tokens/js/light` - Light theme tokens as JS objects
|
|
113
|
+
- `@bcc-code/design-tokens/js/dark` - Dark theme tokens as JS objects
|
|
114
|
+
|
|
115
|
+
### PrimeVue
|
|
116
|
+
- `@bcc-code/design-tokens/primevue` - Aura preset configuration
|
|
117
|
+
- `@bcc-code/design-tokens/primevue/overrides` - Component CSS overrides
|
|
118
|
+
|
|
82
119
|
## Token Categories
|
|
83
120
|
|
|
84
121
|
- **Colors**: Text, backgrounds, borders, states
|
|
85
122
|
- **Typography**: Font families, sizes, weights, line heights
|
|
86
|
-
- **Spacing**: Margins, padding, gaps
|
|
123
|
+
- **Spacing**: Margins, padding, gaps (50-1000 scale)
|
|
87
124
|
- **Border Radius**: Corner rounding
|
|
88
125
|
- **Elevation**: Surface levels
|
|
89
126
|
|
|
@@ -133,17 +170,31 @@ demo/ # Demo application
|
|
|
133
170
|
|
|
134
171
|
## Publishing
|
|
135
172
|
|
|
173
|
+
### Stable Release (latest tag)
|
|
174
|
+
|
|
136
175
|
Automated via GitHub Actions when you push a version tag:
|
|
137
176
|
|
|
138
177
|
```bash
|
|
139
|
-
# Update version
|
|
140
|
-
|
|
141
|
-
git commit -m "Bump version to X.X.X"
|
|
178
|
+
# Update version
|
|
179
|
+
npm version patch # or minor/major
|
|
142
180
|
git push
|
|
181
|
+
git push --tags
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
### Pre-release (next tag)
|
|
185
|
+
|
|
186
|
+
For testing before stable release:
|
|
187
|
+
|
|
188
|
+
```bash
|
|
189
|
+
# Create pre-release version
|
|
190
|
+
npm version prerelease --preid=next
|
|
191
|
+
# Example: 3.0.14-next.0
|
|
192
|
+
|
|
193
|
+
# Publish to next tag
|
|
194
|
+
npm publish --tag next
|
|
143
195
|
|
|
144
|
-
#
|
|
145
|
-
|
|
146
|
-
git push origin vX.X.X
|
|
196
|
+
# Users can install with:
|
|
197
|
+
# npm install @bcc-code/design-tokens@next
|
|
147
198
|
```
|
|
148
199
|
|
|
149
200
|
## Contributing
|