@aziontech/theme 0.1.0 → 1.0.1

package/README.md

@@ -1,466 +1,455 @@
-<h1 align="center">azion-theme</h1>
+# @aziontech/theme
 
-![production](https://github.com/aziontech/azion-theme/actions/workflows/release.yml/badge.svg)
+A comprehensive design token system and theming solution for Azion's web applications. This package provides primitive colors, semantic tokens, brand colors, and seamless integration with Tailwind CSS.
 
-<p align="center">
-    <img
-        src="./doc/cover-image.png"
-        width="1200px"
-    />
-</p>
+## Features
 
-The Azion Theme repository is focused on sharing our style kit across interfaces and should be used in all company projects, including Azion Console Kit, Azion Site, Landing Pages, and all user interactions with Azion.
+- **Design Tokens**: Primitive and semantic color tokens generated from Figma
+- **Brand Colors**: Azion's official color palette with primary (orange), accent (violet), and surface colors
+- **Theme Support**: Built-in light and dark mode theming
+- **Tailwind Integration**: Plugin and preset for seamless Tailwind CSS integration
+- **CSS Variables**: Automatic CSS variable generation for dynamic theming
+- **Widget Support**: Separate theme variant for embedded widgets
 
-## 📋 Table of Contents
-
-- [Installation](#-installation)
-- [Usage](#-usage)
-- [Development](#-development)
-- [Building](#-building)
-- [Release Process](#-release-process)
-- [Design Tokens](#-design-tokens)
-- [Links](#-links)
-
-## 🚀 Installation
-
-To install the `azion-theme` project, you need to follow the command. Choose one of your preferences: npm or yarn:
+## Installation
 
 ```bash
-npm install azion-theme --save
+npm install @aziontech/theme
 # or
-yarn add azion-theme
-```
-
-Alternatively, you can configure the `package.json` file by adding the dependency:
-
-```json
-{
-  "dependencies": {
-    "azion-theme": "^1.4.0"
-  }
-}
+pnpm add @aziontech/theme
+# or
+yarn add @aziontech/theme
 ```
 
-After updating the `package.json` file, run `npm install` in the root of your project to install the Azion Theme.
+## Quick Start
 
-### 🔗 Integration with Front-End Project
+### Option 1: CSS Import (Recommended for web applications)
 
-To integrate the Azion Theme into your front-end project, you need to import the theme files in your project's entry point file (App.vue, main.js, index.js, etc.):
+Import the main theme stylesheet:
 
 ```javascript
-import 'azion-theme/dark'
-import 'azion-theme/light'
+// Default theme (includes light/dark mode support)
+import '@aziontech/theme';
 ```
 
-Make sure to include these imports at the top of your entry point file to ensure the styles are applied correctly throughout your application.
+Add the theme class to your root element:
 
-## 💻 Development
+```html
+<div class="azion">
+  <!-- Your application content -->
+</div>
+
+<!-- For dark mode -->
+<div class="azion azion-dark">
+  <!-- Your application content -->
+</div>
+```
 
-To work locally, you should clone both the `azion-theme` repository and the other repository where the theme will be used.
+### Option 2: Tailwind CSS Integration
 
-### Example:
+#### Using the Preset
 
-In this example, we will use the [azion-webkit](https://github.com/aziontech/azion-webkit) repository:
+Add the preset to your `tailwind.config.js`:
 
-1. Clone the `azion-webkit` and `azion-theme` repositories:
+```javascript
+import { preset } from '@aziontech/theme/tokens';
 
-```bash
-git clone https://github.com/aziontech/azion-webkit.git
-git clone https://github.com/aziontech/azion-theme.git
+export default {
+  presets: [preset],
+  // your config
+};
 ```
 
-2. Install dependencies and create the link point:
+#### Using the Plugin
 
-```bash
-cd ./azion-theme && npm i && npm link
-```
+For static utility classes with light/dark mode support:
 
-3. Link the `azion-theme` to the `azion-webkit` project:
+```javascript
+import { tokenUtilities } from '@aziontech/theme/tokens';
 
-```bash
-cd ../azion-webkit && npm i && npm link azion-theme
+export default {
+  plugins: [
+    tokenUtilities({
+      darkSelector: '.dark',
+      extraDarkSelectors: ['.azion.azion-dark']
+    })
+  ]
+};
 ```
 
-Any modifications made to `azion-theme` will be reflected on this development server with hot reload.
-
-## 🏗️ Building
+### Option 3: JavaScript Token Access
 
-This package is built automatically using Semantic Release during the release process. However, you can also build it manually for development purposes.
+Access tokens programmatically:
 
-### Build Process
-
-The build process includes the following steps:
-
-1. **Validate Theme Tokens** - Ensures all token files are valid and properly formatted
-2. **Clean dist/ Directory** - Removes any previously generated files
-3. **Compile Tokens** - Merges all token definitions into a distributable format
-4. **Generate CSS Files** - Creates CSS files with CSS variables for light/dark themes
-5. **Generate package.json** - Creates a distributable package manifest
-6. **Copy Documentation** - Copies LICENSE and README.md into the dist folder
-7. **Generate Type Definitions** - Creates TypeScript declaration files
-
-### Manual Build
+```javascript
+// Import all tokens
+import {
+  primitives,
+  brandPrimitives,
+  surfacePrimitives,
+  textSemantic,
+  backgroundSemantic,
+  borderSemantic
+} from '@aziontech/theme/tokens';
 
-To build the package manually:
+// Use primitive colors
+const primaryColor = primitives.orange['500']; // '#fe601f'
+const accentColor = primitives.violet['500']; // '#8a84ec'
 
-```bash
-cd packages/theme
-npm run build
+// Use semantic tokens (returns token references)
+const textColor = textSemantic.light.textColorBase; // tokenRef('primitives.neutral.900')
 ```
 
-This will generate the `dist/` directory with all necessary files.
+### Option 4: CSS Variables Injection
 
-### Preview Build
+Inject CSS variables dynamically at runtime:
 
-To preview what the build will look like without publishing:
+```javascript
+import { injectCssVars } from '@aziontech/theme/tokens';
 
-```bash
-npm run pack:dry
+// Injects <style data-azion-tokens> into document.head
+const styleElement = injectCssVars();
 ```
 
-This will generate a tarball preview using npm pack --dry-run.
+## Token Structure
 
-### Clean Build Artifacts
+### Primitive Colors
 
-To remove all generated files:
+Base color palettes with numeric scales (50-950):
 
-```bash
-npm run clean
-```
-
-This will remove the `dist/` directory.
-
-## 📦 Release Process
+```javascript
+import { primitives } from '@aziontech/theme/tokens';
 
-This package uses Semantic Release for automated versioning and publishing.
+primitives.orange['500'];  // Primary brand color
+primitives.violet['500'];  // Accent brand color
+primitives.neutral['900']; // Dark surfaces
+primitives.neutral['50'];  // Light surfaces
+```
 
-### Automatic Release Workflow
+Available primitives:
+- `base`: White and black
+- `orange`: Primary brand color (11 shades)
+- `violet`: Accent brand color (11 shades)
+- `neutral`: Gray scale for surfaces (11 shades)
+- `gray`, `slate`: Additional gray variants
+- `red`: Semantic danger color
+- `green`: Semantic success color
+- `yellow`: Semantic warning color
+- `blue`: Link colors
 
-1. Commits following the conventional commit format are analyzed
-2. Version numbers are automatically incremented based on commit type
-3. Release notes are generated automatically
-4. A changelog is updated
-5. The package is built
-6. The package is published to npm with provenance
-7. GitHub release is created
+### Brand Primitives
 
-### Commit Convention
+Azion-specific brand colors:
 
-Use this format for conventional commits:
+```javascript
+import { brandPrimitives } from '@aziontech/theme/tokens';
 
-```
-[#ticket] type: subject
+brandPrimitives.primary['500'];  // Orange brand color
+brandPrimitives.accent['500'];   // Violet accent color
+brandPrimitives.absolute.white;  // Pure white
+brandPrimitives.absolute.black;  // Pure black
 ```
 
-Where:
+### Surface Primitives
 
-- `[#ticket]` - Optional Jira ticket reference (e.g., `[#AZ-1234]`)
-- `type` - One of: `feat`, `fix`, `chore`, `docs`, `style`, `refactor`
-- `subject` - Brief description of the change
+Surface color scales for backgrounds:
 
-Examples:
-
-- `feat(tokens): Add new primary color variants`
-- `fix(theme): Update border radius values`
-- `chore(build): Update semantic-release configuration`
+```javascript
+import { surfacePrimitives } from '@aziontech/theme/tokens';
 
-### Release Types
+surfacePrimitives.surface['0'];   // White
+surfacePrimitives.surface['50'];  // Lightest gray
+surfacePrimitives.surface['900']; // Very dark gray
+surfacePrimitives.surface['950']; // Almost black
+```
 
-- **feat (new features)**: **minor** version increment
-- **fix (bug fixes)**: **patch** version increment
-- **hotfix (emergency fixes)**: **patch** version increment
-- **chore, docs, style, refactor**: **patch** version increment
+### Semantic Tokens
 
-### CI/CD Workflow
+Context-aware tokens that automatically adapt to light/dark themes:
 
-The workflow is defined in `.github/workflows/package-theme.yml` and runs on pushes to the `main` branch when `packages/theme/**` files change.
+#### Background Tokens
 
-### Required Secrets
+```javascript
+import { backgroundSemantic } from '@aziontech/theme/tokens';
 
-To enable automated npm publishing, configure the following GitHub secrets:
+// Light mode
+backgroundSemantic.light.bgLayer1;     // Surface 0 (white)
+backgroundSemantic.light.bgLayer2;     // Surface 50
+backgroundSemantic.light.bgCanvas;     // Surface 100
 
-- `NPM_TOKEN` - Your npm authentication token with publish permissions
+// Dark mode
+backgroundSemantic.dark.bgLayer1;      // Surface 800
+backgroundSemantic.dark.bgCanvas;      // Surface 950
+```
 
-Without this token, the build will still complete and generate release notes, but npm publishing will be skipped.
+#### Text Tokens
 
-### Manual Release
+```javascript
+import { textSemantic } from '@aziontech/theme/tokens';
 
-You can also trigger a manual release:
+// Light mode
+textSemantic.light.textColorBase;      // neutral.900
+textSemantic.light.textColorMuted;     // neutral.600
+textSemantic.light.textColorLink;      // blue.600
 
-```bash
-npx semantic-release
+// Dark mode
+textSemantic.dark.textColorBase;       // neutral.50
+textSemantic.dark.textColorMuted;      // neutral.400
+textSemantic.dark.textColorLink;       // blue.300
 ```
 
-This will require the `NPM_TOKEN` to be available in your environment.
-
-## 🎨 Design Tokens
-
-This project includes **primitive color tokens** extracted directly from Figma, ready to be consumed via Tailwind CSS.
-
-### 🚀 How to Use the Tokens
+#### Border Tokens
 
 ```javascript
-// tailwind.config.js
-import typography from '@tailwindcss/typography'
-import { tokenUtilities } from 'azion-theme/tokens/build/tailwind-plugin'
-import colors from 'azion-theme/tokens'
+import { borderSemantic } from '@aziontech/theme/tokens';
 
-export default {
-  content: ['./src/**/*.{js,ts,jsx,tsx,html}'],
-  darkMode: ['class', '.dark', '.azion.azion-dark'],
-  theme: {
-    extend: {
-      colors: {
-        ...colors
-      }
-    }
-  },
-  plugins: [tokenUtilities(), typography]
-}
+borderSemantic.light.borderBase;       // surface.200
+borderSemantic.light.borderPrimary;    // primary.500
+borderSemantic.light.borderDanger;     // red.600
+
+borderSemantic.dark.borderBase;        // surface.700
+borderSemantic.dark.borderDanger;      // red.400
 ```
 
-#### Token structure overview
+## Theming
 
-**Global/Primitive tokens** (direct values, use with `dark:` variant):
+### Light Mode (Default)
 
-```javascript
-// Primitive palettes (all with 50-950 shades)
-colors.orange[500] // #fe601f
-colors.violet[500] // #8a84ec
-colors.neutral[900] // #171717
-
-// Brand colors
-colors.brand.black // #0a0a0a
-colors.brand.white // #fafafa
-colors.brand.orange // #fe601f
-
-// Brand primitives (aliases)
-colors.primary[500] // orange palette
-colors.accent[500] // violet palette
-
-// Surface primitives (neutral-based)
-colors.surface[950] // #0a0a0a
+```html
+<div class="azion azion-light">
+  <!-- Light theme content -->
+</div>
 ```
 
-**Semantic tokens** (theme-aware, no `dark:` variant needed):
+### Dark Mode
 
-```javascript
-// Text colors - automatically switches between light/dark
-colors.text.base // neutral-900 (light) / neutral-50 (dark)
-colors.text.muted // neutral-600 (light) / neutral-400 (dark)
-colors.text.accent // accent-500 (both modes)
-
-// Background colors - theme-aware layers
-colors.background.layer1 // surface-0 (light) / surface-800 (dark)
-colors.background.layer2 // surface-50 (light) / surface-700 (dark)
-colors.background.canvas // surface-100 (light) / surface-950 (dark)
-
-// Border colors - theme-aware borders
-colors.border.base // surface-200 (light) / surface-700 (dark)
-colors.border.primary // primary-500 (both modes)
-colors.border.accent // accent-500 (both modes)
+```html
+<div class="azion azion-dark">
+  <!-- Dark theme content -->
+</div>
 ```
 
-#### Usage in HTML/Tailwind Classes
-
-**Using semantic tokens** (theme-aware, no `dark:` variant needed):
+Or use the standard Tailwind dark mode class:
 
 ```html
-<!-- Semantic background - automatically switches theme -->
-<div class="bg-layer1">Layer 1 background (white in light, dark in dark mode)</div>
-
-<!-- Semantic text colors -->
-<p class="text-base">Base text color (auto-adapts to theme)</p>
+<div class="azion dark">
+  <!-- Dark theme content -->
+</div>
+```
 
-<!-- Semantic borders -->
-<div class="border border-base">Border adapts to current theme</div>
+### Dynamic Theme Switching
 
-<!-- Semantic interactive states -->
-<button class="bg-layer1 hover:bg-layer1-hover border border-primary text-primary">
-  Themed button
-</button>
+```javascript
+// Toggle dark mode
+const root = document.querySelector('.azion');
+root.classList.toggle('azion-dark');
+root.classList.toggle('azion-light');
 ```
 
-**Using global tokens** (can use `dark:` in this cases):
+## Tailwind CSS Usage
+
+### With Preset (Dynamic CSS Variables)
 
 ```html
-<!-- Background with dark variant -->
-<div class="bg-neutral-50 dark:bg-neutral-950">Adaptive background</div>
+<!-- Background colors -->
+<div class="bg-layer1">Layer 1 background</div>
+<div class="bg-canvas">Canvas background</div>
+<div class="bg-base">Base background</div>
+
+<!-- Text colors -->
+<p class="text-base">Base text</p>
+<p class="text-muted">Muted text</p>
+<a class="text-link">Link text</a>
+
+<!-- Border colors -->
+<div class="border border-base">Default border</div>
+<div class="border border-primary">Primary border</div>
+```
 
-<!-- Text colors with dark variant -->
-<p class="text-neutral-900 dark:text-neutral-100">Primary text color</p>
+### With Plugin (Static Utilities)
 
-<!-- Border colors with dark variant -->
-<div class="border border-neutral-200 dark:border-neutral-800">Card with adaptive border</div>
+When using the `tokenUtilities` plugin:
 
-<!-- Using brand colors (no dark variant needed) -->
-<button class="bg-orange-500 text-white hover:bg-orange-600">Action Button</button>
+```html
+<!-- These generate static values for both light and dark -->
+<div class="bg-layer1">Light: white / Dark: surface-800</div>
+<div class="text-base">Light: neutral-900 / Dark: neutral-50</div>
 ```
 
-**Available token classes:**
-
-_Global tokens_ (use with `dark:` variant):
+### Complete Tailwind Config Example
 
-- **Neutrals:** `neutral-50` → `neutral-950` (surface backgrounds, text, borders)
-- **Brand:** `orange-50` → `orange-950` (primary actions)
-- **Accent:** `violet-50` → `violet-950` (secondary highlights)
-- **Status:** `red-*`, `green-*`, `yellow-*`, `blue-*` (semantic status colors)
-
-_Semantic tokens_ (theme-aware, no `dark:` needed):
+```javascript
+import { preset, tokenUtilities } from '@aziontech/theme/tokens';
 
-- **Text:** `text-base`, `text-muted`, `text-accent`, `text-primary`, `text-link`
-- **Background:** `bg-layer1`, `bg-layer2`, `bg-canvas`, `bg-base`
-- **Border:** `border-base`, `border-primary`, `border-accent`, `border-warning`, `border-success`, `border-danger`
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  presets: [preset],
+  darkMode: 'class',
+  plugins: [
+    tokenUtilities({
+      darkSelector: '.dark',
+      extraDarkSelectors: ['.azion.azion-dark']
+    })
+  ]
+};
+```
 
-### Theme Switch Compatibility
+## CSS Variables
 
-The CSS variable initializer targets both the Tailwind `.dark` class and the existing theme classes used by the SCSS theme:
+All semantic tokens are available as CSS variables:
 
 ```css
-:root,
-[data-theme='light'],
-.azion.azion-light {
-  /* light vars */
+/* Automatically generated */
+:root, [data-theme=light], .azion.azion-light {
+  --text-textColorBase: #171717;
+  --background-bgLayer1: #ffffff;
+  --border-borderBase: #e5e5e5;
 }
-[data-theme='dark'],
-.dark,
-.azion.azion-dark {
-  /* dark vars */
+
+[data-theme=dark], .dark, .azion.azion-dark {
+  --text-textColorBase: #fafafa;
+  --background-bgLayer1: #262626;
+  --border-borderBase: #404040;
 }
 ```
 
-### Granular Imports (Advanced)
+Use in your CSS:
 
-```javascript
-// Named exports for specific token types
-import {
-  primitives,
-  brandColors,
-  brandPrimitives,
-  surfacePrimitives,
-  preset,
-  createTailwindConfig,
-  tokenUtilities
-} from 'azion-theme/tokens'
+```css
+.custom-component {
+  color: var(--text-textColorBase);
+  background-color: var(--background-bgLayer1);
+  border-color: var(--border-borderBase);
+}
 ```
 
-### 🛠️ Sync & Maintenance (With Script)
+## Widget Theme
 
-#### How to feed new and changed tokens from Figma
+For embedded widgets and iframes, use the widget theme variant:
 
-1. **Update Figma Variables**
-   - Ensure **Global** and **Semantic** variables are updated and organized correctly (naming, groups, modes, and values).
+```javascript
+import '@aziontech/theme/widget';
+```
 
-2. **Open the Tokens Studio for Figma plugin**
+The widget theme includes:
+- Compact variable definitions
+- Optimized for isolated contexts
+- Same token structure as main theme
 
-3. **Import Figma Variables into Tokens Studio**
-   - Use Tokens Studio’s import-from-variables flow to bring the current Variables state into the token sets.
+## API Reference
 
-4. **Export to file/folder**
-   - Export using **Multiple files**.
+### Exports
 
-5. **Copy the exported files into this repo**
-   - Place them under [`src/tokens/figma-reference-tokens-studio/`](src/tokens/figma-reference-tokens-studio:1) (replace existing contents).
+#### Default Export
+- `@aziontech/theme` - Main CSS theme (default.js)
+- `@aziontech/theme/widget` - Widget CSS theme (widget.js)
+- `@aziontech/theme/tokens` - JavaScript token system (src/tokens/index.js)
 
-6. **Regenerate the code tokens**
-   - Run:
+#### Token Exports
 
-```bash
-node ./scripts/figma-sync.js
+```javascript
+// Primitive tokens
+export { primitives } from './primitives/colors.js';
+export { brandPrimitives, surfacePrimitives } from './primitives/brand.js';
+
+// Semantic tokens
+export { textSemantic } from './semantic/text.js';
+export { backgroundSemantic } from './semantic/backgrounds.js';
+export { borderSemantic } from './semantic/borders.js';
+
+// Build utilities
+export { tokenRef } from './build/refs.js';
+export { resolveRefsToCssVars } from './build/resolve.js';
+export { createCssVars, cssVarsString, injectCssVars } from './build/css-vars.js';
+export { preset } from './build/preset.js';
+export { tokenUtilities } from './build/tailwind-plugin.js';
 ```
 
-7. **Review and commit**
-   - Inspect the diff in the generated files and validate light/dark semantics before committing.
-
-Files affected by the script:
-
-- [`src/tokens/primitives/colors.js`](src/tokens/primitives/colors.js)
-- [`src/tokens/primitives/brand.js`](src/tokens/primitives/brand.js)
-- [`src/tokens/semantic/text.js`](src/tokens/semantic/text.js)
-- [`src/tokens/semantic/backgrounds.js`](src/tokens/semantic/backgrounds.js)
-- [`src/tokens/semantic/borders.js`](src/tokens/semantic/borders.js)
-
-### 🧰 Manual Maintenance (Without Script)
+## Token Resolution
 
-When updating or adding tokens manually, edit the files below depending on the token type:
+Tokens use a reference system for maintainability:
 
-- **Primitive palettes:** [`src/tokens/primitives/colors.js`](src/tokens/primitives/colors.js)
-- **Brand + surface primitives:** [`src/tokens/primitives/brand.js`](src/tokens/primitives/brand.js)
-- **Semantic text (light/dark):** [`src/tokens/semantic/text.js`](src/tokens/semantic/text.js)
-- **Semantic backgrounds (light/dark):** [`src/tokens/semantic/backgrounds.js`](src/tokens/semantic/backgrounds.js)
-- **Semantic borders (light/dark):** [`src/tokens/semantic/borders.js`](src/tokens/semantic/borders.js)
-- **Brand aliases:** [`src/tokens/colors-brand.js`](src/tokens/colors-brand.js)
-- **Tailwind mappings (class names):** [`src/tokens/build/preset.js`](src/tokens/build/preset.js)
-- **CSS vars output/selectors:** [`src/tokens/build/css-vars.js`](src/tokens/build/css-vars.js)
-
-Checklist when adding a new token manually:
+```javascript
+// Define token reference
+const textColor = tokenRef('primitives.neutral.900');
 
-1. Add/update the primitive or surface scale value (if needed).
-2. Add matching semantic entries for both `light` and `dark`.
-3. Update Tailwind mappings if you want a class for the token.
-4. Regenerate or verify CSS vars output for both themes.
+// Resolve to actual value
+resolveRefsToCssVars({
+  primitives,
+  textSemantic
+});
+// Output: { '--text-textColorBase': '#171717' }
+```
 
-### 🎨 Available Colors
+## Development
 
-#### Main Palette (Orange)
+### Prerequisites
 
-- `orange-50` → `orange-950`
-- **Primary**: `orange-500` (#fe601f)
+- Node.js (LTS version)
+- pnpm (v9+)
 
-#### Brand Palette
+### Scripts
 
-- `brand-black` (#0a0a0a)
-- `brand-white` (#fafafa)
-- `brand-dark-gray` (#171717)
-- `brand-medium-gray` (#737373)
+```bash
+# Format code
+pnpm format
 
-#### Other Complete Palettes
+# Dry-run package
+pnpm pack:dry
 
-- **Violet, Slate, Gray, Neutral, Blue, Red, Yellow, Green**
-- All with 11 shades (50 → 950)
+# Publish (requires dist build)
+pnpm publish
+```
 
-#### Semantic Colors
+### Project Structure
 
-- `primary` (orange-500)
-- `success` (green-500)
-- `warning` (yellow-500)
-- `error` (red-500)
-- `info` (blue-500)
+```
+packages/theme/
+├── default.js              # Main entry point
+├── widget.js               # Widget entry point
+├── src/
+│   ├── azion/             # CSS theme files
+│   │   ├── theme.scss     # Main theme
+│   │   ├── theme-widget.scss
+│   │   ├── _variables.scss
+│   │   ├── _fonts.scss
+│   │   ├── theme-base/    # Base components
+│   │   ├── extended-components/
+│   │   └── custom/
+│   └── tokens/            # JavaScript tokens
+│       ├── index.js       # Public API
+│       ├── primitives/    # Base colors
+│       ├── semantic/      # Context-aware tokens
+│       └── build/         # Build utilities
+│           ├── preset.js
+│           ├── css-vars.js
+│           └── tailwind-plugin.js
+└── package.json
+```
 
-### ⚠️ Troubleshooting
+## Browser Support
 
-#### If you get import errors:
+- Modern browsers with CSS Variables support
+- Chrome, Firefox, Safari, Edge (latest versions)
 
-**ES Modules (recommended)**
+## Versioning
 
-```javascript
-import colors from 'azion-theme/tokens'
-```
+This package follows [Semantic Versioning](https://semver.org/). Version numbers are automatically managed via semantic-release.
 
-**Named exports**
+## Contributing
 
-```javascript
-import { primitives, brandColors, brandPrimitives, surfacePrimitives } from 'azion-theme/tokens'
-```
+This package is part of the Azion WebKit monorepo. Please see the main repository for contribution guidelines.
 
-**Direct file imports**
+## License
 
-```javascript
-import { primitives } from 'azion-theme/tokens/primitives/colors.js'
-import { brandColors } from 'azion-theme/tokens/colors-brand.js'
-```
+MIT © Azion Technologies
 
-**Configure Vite (if using Vite)**
-Add to your `vite.config.js`:
+## Links
 
-```javascript
-export default {
-  resolve: {
-    conditions: ['import', 'module', 'browser', 'default']
-  }
-}
-```
+- [GitHub Repository](https://github.com/aziontech/webkit)
+- [NPM Package](https://www.npmjs.com/package/@aziontech/theme)
+- [Issue Tracker](https://github.com/aziontech/webkit/issues)
 
-## 🔗 Links
+## Changelog
 
-- [Figma Global Tokens](https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Global-Tokens?node-id=0-1)
+See [CHANGELOG.md](./CHANGELOG.md) for release history.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aziontech/theme",
   "type": "module",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "author": "aziontech",
   "license": "MIT",
   "repository": {