@bcc-code/design-tokens 3.0.9 → 3.0.10
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 +50 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ Import auto-switching CSS variables with light/dark mode support:
|
|
|
18
18
|
@import '@bcc-code/design-tokens/css';
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
This automatically provides light theme by default and switches to dark theme when
|
|
21
|
+
This automatically provides light theme by default and switches to dark theme when the `.dark` class is applied to any parent element (typically `html` or `body`).
|
|
22
22
|
|
|
23
23
|
Use semantic tokens in your styles:
|
|
24
24
|
|
|
@@ -32,6 +32,16 @@ Use semantic tokens in your styles:
|
|
|
32
32
|
}
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
+
**Manual theme switching:**
|
|
36
|
+
```javascript
|
|
37
|
+
// Toggle dark mode
|
|
38
|
+
document.documentElement.classList.toggle('dark');
|
|
39
|
+
|
|
40
|
+
// Or set theme based on user preference
|
|
41
|
+
const isDark = localStorage.getItem('theme') === 'dark';
|
|
42
|
+
document.documentElement.classList.toggle('dark', isDark);
|
|
43
|
+
```
|
|
44
|
+
|
|
35
45
|
**Alternative theme-specific imports (optional):**
|
|
36
46
|
```css
|
|
37
47
|
@import '@bcc-code/design-tokens/css/light';
|
|
@@ -96,7 +106,13 @@ Enable dark mode by adding the `dark` class to your root element:
|
|
|
96
106
|
|
|
97
107
|
```javascript
|
|
98
108
|
// Toggle dark mode
|
|
99
|
-
document.documentElement.classList.toggle('
|
|
109
|
+
document.documentElement.classList.toggle('dark')
|
|
110
|
+
|
|
111
|
+
// Or with system preference fallback
|
|
112
|
+
function setTheme(isDark) {
|
|
113
|
+
document.documentElement.classList.toggle('dark', isDark);
|
|
114
|
+
document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
|
|
115
|
+
}
|
|
100
116
|
```
|
|
101
117
|
|
|
102
118
|
## Token Categories
|
|
@@ -110,11 +126,31 @@ document.documentElement.classList.toggle('.dark')
|
|
|
110
126
|
## CDN Usage
|
|
111
127
|
|
|
112
128
|
```html
|
|
113
|
-
<!-- Auto-switching CSS variables (recommended) -->
|
|
129
|
+
<!-- Auto-switching CSS variables with .dark class support (recommended) -->
|
|
114
130
|
<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/auto.css">
|
|
115
131
|
|
|
116
132
|
<!-- Or Tailwind utilities with .dark class support -->
|
|
117
133
|
<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/tailwind-auto.css">
|
|
134
|
+
|
|
135
|
+
<!-- Then add JavaScript for theme switching -->
|
|
136
|
+
<script>
|
|
137
|
+
// Basic theme toggle
|
|
138
|
+
function toggleTheme() {
|
|
139
|
+
document.documentElement.classList.toggle('dark');
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
// Theme with system preference detection
|
|
143
|
+
function initTheme() {
|
|
144
|
+
const savedTheme = localStorage.getItem('theme');
|
|
145
|
+
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
146
|
+
const isDark = savedTheme ? savedTheme === 'dark' : systemDark;
|
|
147
|
+
|
|
148
|
+
document.documentElement.classList.toggle('dark', isDark);
|
|
149
|
+
document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
initTheme();
|
|
153
|
+
</script>
|
|
118
154
|
```
|
|
119
155
|
|
|
120
156
|
## Contributing
|
|
@@ -141,6 +177,8 @@ We welcome contributions! Here's how to get started:
|
|
|
141
177
|
npm install
|
|
142
178
|
npm run dev
|
|
143
179
|
```
|
|
180
|
+
|
|
181
|
+
The demo application showcases all three integration methods (CSS variables, Tailwind utilities, and PrimeVue components) with a comprehensive dashboard featuring theme switching, real-world examples, and live token demonstrations.
|
|
144
182
|
|
|
145
183
|
### Token Structure
|
|
146
184
|
|
|
@@ -163,7 +201,15 @@ We welcome contributions! Here's how to get started:
|
|
|
163
201
|
|
|
164
202
|
## Development
|
|
165
203
|
|
|
166
|
-
A demo application is available in the `demo/` directory
|
|
204
|
+
A comprehensive demo application is available in the `demo/` directory featuring:
|
|
205
|
+
|
|
206
|
+
- **CSS Variables showcase**: E-commerce product cards, newsletter forms, and status displays using pure CSS with BCC tokens
|
|
207
|
+
- **Tailwind Utilities showcase**: Project management dashboard with utility-first CSS classes
|
|
208
|
+
- **PrimeVue Components showcase**: User profiles, settings panels, and component galleries
|
|
209
|
+
- **Theme switching**: Manual dark/light mode toggle with system preference detection
|
|
210
|
+
- **Live token demonstrations**: Real-time examples of all token categories in action
|
|
211
|
+
|
|
212
|
+
Access the demo at `http://localhost:5173` after running `npm run dev` in the `demo/` directory.
|
|
167
213
|
|
|
168
214
|
## License
|
|
169
215
|
|