@bcc-code/design-tokens 1.0.9 → 1.0.12

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 (4) hide show
  1. package/README.md +45 -62
  2. package/dist/tailwind.css +501 -707
  3. package/package.json +2 -2
  4. 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.