## 🎨 Design Tokens

This library uses **design tokens** as the single source of truth for colors, typography, spacing, radius, and motion.  
Tokens are defined once in a JSON file and transformed into **CSS variables** and **SCSS maps** using [Style Dictionary](https://amzn.github.io/style-dictionary/).

### Token Source
All tokens are stored in:

projects/ccl-ui-components/src/tokens/tokens.json

### Generated Outputs
After running the token build:

```bash
npm run build:tokens
The following files are generated:

projects/ccl-ui-components/src/styles/tokens.css → CSS custom properties

projects/ccl-ui-components/src/styles/_tokens.scss → SCSS variables

Usage in Components
SCSS (Angular component styles):

@import '../styles/_tokens';

button {
  background-color: $color-primary-500;
  color: $color-background-default;
  padding: $spacing-sm $spacing-md;
  border-radius: $radius-md;
  transition: background-color $motion-default;
}
CSS (global styles):

:root {
  --color-primary-500: #0055ff;
  --spacing-md: 1rem;
}

button {
  background-color: var(--color-primary-500);
  padding: var(--spacing-md);
}
Governance
❌ No hardcoded values (hex codes, px, etc.) in components.

✅ Always reference tokens ($color-primary-500 or var(--color-primary-500)).

## 🎨 Brand Themes

The library supports **brand-specific overrides** layered on top of the Naked Theme.

### Example: Brand A

```scss
/* styles.scss */
@import '~@ccl/ccl-ui-components/themes/naked.css';
@import '~@ccl/ccl-ui-components/themes/brandA.css';


## 🎨 Theme Priority & Fallback

Theme resolution follows a strict order:

1. **Consumer overrides** (last-in-wins)  
2. **Brand theme** (brand-specific styling)  
3. **Naked theme** (baseline defaults)  

### Example

```scss
@import '~@ccl/ccl-ui-components/styles/naked.css';
@import '~@ccl/ccl-ui-components/styles/brandA.css';
@import './consumer.css'; /* local overrides */