@bcc-code/design-tokens 3.0.5 → 3.0.6

package/README.md

@@ -1,6 +1,6 @@
 # @bcc-code/design-tokens
 
-Design tokens for BCC projects with CSS, Tailwind v4, and PrimeVue support.
+BCC Design System tokens with support for CSS variables, Tailwind CSS v4, and PrimeVue themes. Generates consistent design tokens from Figma Token Studio with automatic light/dark mode support.
 
 ## Installation
 
@@ -12,52 +12,91 @@ npm install @bcc-code/design-tokens
 
 ### CSS Variables
 
+Import theme-specific CSS variables:
+
 ```css
 @import '@bcc-code/design-tokens/css/light';
-/* or */
 @import '@bcc-code/design-tokens/css/dark';
 ```
 
+Use semantic tokens in your styles:
+
 ```css
 .card {
   background: var(--color-elevation-surface-default);
   color: var(--color-text-default);
   padding: var(--space-300);
+  border-radius: var(--border-radius-md);
+  font-family: var(--font-family-archivo);
 }
 ```
 
 ### Tailwind CSS v4
 
+Import Tailwind utilities with design tokens:
+
 ```css
 @import '@bcc-code/design-tokens/tailwind/light';
-/* or */
 @import '@bcc-code/design-tokens/tailwind/dark';
 ```
 
+Use utility classes:
+
 ```html
-<div class="bg-elevation-surface-default text-default p-300">
-  Content
+<div class="bg-surface-default text-default p-300 rounded-md">
+  Content with BCC design tokens
 </div>
 ```
 
-### PrimeVue
+### PrimeVue Integration
+
+Configure PrimeVue with BCC theme preset:
 
 ```javascript
-import BCCPreset from "@bcc-code/design-tokens/primevue";
+import { createApp } from 'vue'
+import PrimeVue from 'primevue/config'
+import BCCPreset from '@bcc-code/design-tokens/primevue'
+
+const app = createApp(App)
 
 app.use(PrimeVue, {
   theme: {
-    preset: BCCPreset
+    preset: BCCPreset,
+    options: {
+      prefix: 'p',
+      darkModeSelector: '.p-dark',
+      cssLayer: false
+    }
   }
-});
+})
+```
+
+Enable dark mode by adding the `p-dark` class to your root element:
+
+```javascript
+// Toggle dark mode
+document.documentElement.classList.toggle('p-dark')
 ```
 
-## CDN
+## Token Categories
+
+- **Colors**: Semantic color tokens for text, backgrounds, borders, and states
+- **Typography**: Font families, sizes, weights, and line heights
+- **Spacing**: Consistent spacing scale for margins, padding, and gaps
+- **Border Radius**: Border radius values for consistent corner rounding
+- **Elevation**: Surface tokens for different elevation levels
+
+## CDN Usage
 
 ```html
 <link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/light.css">
+<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/dark.css">
 ```
 
+## Development
+
+A demo application is available in the `demo/` directory to test and showcase the design token integration with PrimeVue components.
+
 ## License
 
 MIT © BCC Code

package/build/bcc/tailwind-dark.css

@@ -168,6 +168,7 @@
   --spacing-600: 3rem; /** 48px */
   --spacing-800: 4rem; /** 64px */
   --spacing-1000: 5rem; /** 80px */
+  --spacing: 0.5rem;
   --spacing-negative-25: -0.125rem; /** -2px */
   --spacing-negative-50: -0.25rem; /** -4px */
   --spacing-negative-75: -0.375rem; /** -6px */
@@ -451,3 +452,99 @@
 @utility icon-* {
   color: --value(--color-icon-*);
 }
+
+@utility p-* {
+  padding: --value(--spacing-*);
+}
+
+@utility px-* {
+  padding-inline: --value(--spacing-*);
+}
+
+@utility py-* {
+  padding-block: --value(--spacing-*);
+}
+
+@utility pt-* {
+  padding-top: --value(--spacing-*);
+}
+
+@utility pr-* {
+  padding-right: --value(--spacing-*);
+}
+
+@utility pb-* {
+  padding-bottom: --value(--spacing-*);
+}
+
+@utility pl-* {
+  padding-left: --value(--spacing-*);
+}
+
+@utility m-* {
+  margin: --value(--spacing-*);
+}
+
+@utility mx-* {
+  margin-inline: --value(--spacing-*);
+}
+
+@utility my-* {
+  margin-block: --value(--spacing-*);
+}
+
+@utility mt-* {
+  margin-top: --value(--spacing-*);
+}
+
+@utility mr-* {
+  margin-right: --value(--spacing-*);
+}
+
+@utility mb-* {
+  margin-bottom: --value(--spacing-*);
+}
+
+@utility ml-* {
+  margin-left: --value(--spacing-*);
+}
+
+@utility gap-* {
+  gap: --value(--spacing-*);
+}
+
+@utility gap-x-* {
+  column-gap: --value(--spacing-*);
+}
+
+@utility gap-y-* {
+  row-gap: --value(--spacing-*);
+}
+
+@utility -m-* {
+  margin: --value(--spacing-negative-*);
+}
+
+@utility -mx-* {
+  margin-inline: --value(--spacing-negative-*);
+}
+
+@utility -my-* {
+  margin-block: --value(--spacing-negative-*);
+}
+
+@utility -mt-* {
+  margin-top: --value(--spacing-negative-*);
+}
+
+@utility -mr-* {
+  margin-right: --value(--spacing-negative-*);
+}
+
+@utility -mb-* {
+  margin-bottom: --value(--spacing-negative-*);
+}
+
+@utility -ml-* {
+  margin-left: --value(--spacing-negative-*);
+}

package/build/bcc/tailwind-light.css

@@ -166,6 +166,7 @@
   --spacing-600: 3rem; /** 48px */
   --spacing-800: 4rem; /** 64px */
   --spacing-1000: 5rem; /** 80px */
+  --spacing: 0.5rem;
   --spacing-negative-25: -0.125rem; /** -2px */
   --spacing-negative-50: -0.25rem; /** -4px */
   --spacing-negative-75: -0.375rem; /** -6px */
@@ -535,3 +536,99 @@
 @utility icon-* {
   color: --value(--color-icon-*);
 }
+
+@utility p-* {
+  padding: --value(--spacing-*);
+}
+
+@utility px-* {
+  padding-inline: --value(--spacing-*);
+}
+
+@utility py-* {
+  padding-block: --value(--spacing-*);
+}
+
+@utility pt-* {
+  padding-top: --value(--spacing-*);
+}
+
+@utility pr-* {
+  padding-right: --value(--spacing-*);
+}
+
+@utility pb-* {
+  padding-bottom: --value(--spacing-*);
+}
+
+@utility pl-* {
+  padding-left: --value(--spacing-*);
+}
+
+@utility m-* {
+  margin: --value(--spacing-*);
+}
+
+@utility mx-* {
+  margin-inline: --value(--spacing-*);
+}
+
+@utility my-* {
+  margin-block: --value(--spacing-*);
+}
+
+@utility mt-* {
+  margin-top: --value(--spacing-*);
+}
+
+@utility mr-* {
+  margin-right: --value(--spacing-*);
+}
+
+@utility mb-* {
+  margin-bottom: --value(--spacing-*);
+}
+
+@utility ml-* {
+  margin-left: --value(--spacing-*);
+}
+
+@utility gap-* {
+  gap: --value(--spacing-*);
+}
+
+@utility gap-x-* {
+  column-gap: --value(--spacing-*);
+}
+
+@utility gap-y-* {
+  row-gap: --value(--spacing-*);
+}
+
+@utility -m-* {
+  margin: --value(--spacing-negative-*);
+}
+
+@utility -mx-* {
+  margin-inline: --value(--spacing-negative-*);
+}
+
+@utility -my-* {
+  margin-block: --value(--spacing-negative-*);
+}
+
+@utility -mt-* {
+  margin-top: --value(--spacing-negative-*);
+}
+
+@utility -mr-* {
+  margin-right: --value(--spacing-negative-*);
+}
+
+@utility -mb-* {
+  margin-bottom: --value(--spacing-negative-*);
+}
+
+@utility -ml-* {
+  margin-left: --value(--spacing-negative-*);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcc-code/design-tokens",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "Design tokens build system",
   "type": "module",
   "exports": {