@bcc-code/design-tokens 0.4.1 → 1.0.0
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 +94 -7
- package/dist/primevue-preset.js +5 -0
- package/dist/variables.css +750 -0
- package/package.json +23 -25
- package/LICENSE +0 -201
- package/dist/design-tokens.js +0 -1423
- package/dist/design-tokens.umd.cjs +0 -1
- package/dist_types/index.d.ts +0 -7
- package/dist_types/tailwind/backgroundColor.d.ts +0 -65
- package/dist_types/tailwind/bccForbundetTheme.d.ts +0 -4
- package/dist_types/tailwind/borderColor.d.ts +0 -28
- package/dist_types/tailwind/colors.d.ts +0 -265
- package/dist_types/tailwind/fontFamily.d.ts +0 -4
- package/dist_types/tailwind/outlineColor.d.ts +0 -28
- package/dist_types/tailwind/textColor.d.ts +0 -31
package/README.md
CHANGED
|
@@ -1,10 +1,97 @@
|
|
|
1
|
-
# @bcc-code/design-tokens
|
|
2
|
-
A collection of tokens from the BCC design system.
|
|
1
|
+
# @bcc-code/design-tokens – Light & Dark Theme
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
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/#/).
|
|
5
4
|
|
|
6
|
-
##
|
|
7
|
-
Refer to the [documentation](https://developer.bcc.no/bcc-design/tokens) for installation instructions and usage information.
|
|
5
|
+
## ✨ Features
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
- ✅ Light and dark theme support
|
|
8
|
+
- ✅ Zero-config CSS variables (primitives + semantic)
|
|
9
|
+
- ✅ Available via NPM and CDN
|
|
10
|
+
- ✅ Built-in PrimeVue `aura`-compatible preset
|
|
11
|
+
- ✅ Works in WordPress, Vue, and vanilla HTML
|
|
12
|
+
- ✅ Scalable architecture for future token sets and themes
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## 📦 Installation & Usage
|
|
17
|
+
|
|
18
|
+
### ▶️ Install via NPM (for Vue/PrimeVue)
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install @bcc-code/design-tokens
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
In your `main.js`:
|
|
25
|
+
|
|
26
|
+
```js
|
|
27
|
+
import "@bcc-code/design-tokens/dist/variables.css"; // Injects all CSS variables
|
|
28
|
+
import { primeVuePreset } from "@bcc-code/design-tokens";
|
|
29
|
+
|
|
30
|
+
app.use(PrimeVue, {
|
|
31
|
+
theme: {
|
|
32
|
+
preset: primeVuePreset,
|
|
33
|
+
darkModeSelector: ".dark-mode", // You toggle this class manually or via script
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### 🌐 Use via CDN (WordPress / HTML / No Build Tools)
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<link
|
|
42
|
+
rel="stylesheet"
|
|
43
|
+
href="https://cdn.jsdelivr.net/npm/@bcc-code/design-tokens@1.0.0/dist/variables.css"
|
|
44
|
+
/>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
To enable dark mode, add this to your HTML:
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<html class="dark-mode"></html>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Optional: Use a script with `prefers-color-scheme` to toggle `.dark-mode` dynamically.
|
|
54
|
+
|
|
55
|
+
### 📁 Project Structure
|
|
56
|
+
|
|
57
|
+
```txt
|
|
58
|
+
tokens/ # Source tokens (JSON)
|
|
59
|
+
export-tokens/ # Style Dictionary config + custom generators
|
|
60
|
+
build/ # Intermediate Style Dictionary outputs
|
|
61
|
+
dist/ # Final NPM/CDN-ready files
|
|
62
|
+
├── variables.css # Combined light + dark + primitives CSS variables
|
|
63
|
+
└── primevue-preset.js # PrimeVue theme preset (Aura-compatible)
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### ⚙ How It Works (Build System)
|
|
67
|
+
|
|
68
|
+
1. Tokens are defined in `tokens/` (primitives, semantic, themes)
|
|
69
|
+
|
|
70
|
+
2. Style Dictionary transforms them using custom scripts
|
|
71
|
+
|
|
72
|
+
3. Output files are:
|
|
73
|
+
|
|
74
|
+
- `variables.css`: all CSS variables under `:root` and `.dark-mode`
|
|
75
|
+
- `primevue-preset.js`: an override object usable in PrimeVue
|
|
76
|
+
|
|
77
|
+
Run the build:
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
npm run build
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### 🧱 Token Structure
|
|
84
|
+
|
|
85
|
+
- **primitives**: base values (e.g. `--color-neutral-100`)
|
|
86
|
+
|
|
87
|
+
- **semantic**: tokens with purpose-based names (`--color-surface-primary`)
|
|
88
|
+
|
|
89
|
+
- **light / dark**: theme-specific values using the same semantic names
|
|
90
|
+
|
|
91
|
+
- `variables.css`: combines all and respects CSS variable cascade rules
|
|
92
|
+
|
|
93
|
+
### 📄 License
|
|
94
|
+
|
|
95
|
+
MIT
|
|
96
|
+
|
|
97
|
+
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.
|