Vite + Brocade Tokens Demo

This is a Vite project demonstrating integration with the Brocade design token system.

Project Structure

vite-brocade-demo/
├── src/
│   ├── index.html          # Main HTML entry point (moved from root)
│   ├── main.js             # Application entry point
│   ├── style.css           # Styles using Brocade tokens
│   ├── counter.js          # Counter component
│   └── javascript.svg      # JS logo
├── public/
│   ├── vite.svg            # Vite logo
│   └── brocade-tokens/     # ← PLACE BROCADE TOKENS HERE
│       ├── primitives/
│       ├── semantic/
│       └── modes/
├── vite.config.js          # Vite configuration
└── package.json

Setup Instructions

1. Install Dependencies

npm install

2. Add Brocade Tokens

IMPORTANT: Extract the brocade-tokens folder into the public/ directory:

# Option A: If you have the zip file
unzip brocade-tokens.zip
mv brocade-tokens/ public/

# Option B: If you have the folder directly
mv brocade-tokens/ public/

Your final structure should be:

public/
├── vite.svg
└── brocade-tokens/
    ├── primitives/
    │   ├── colors.css
    │   ├── spacing.css
    │   ├── typography.css
    │   ├── borders.css
    │   ├── shadows.css
    │   ├── transitions.css
    │   ├── animations.css
    │   ├── layout.css
    │   ├── icons.css
    │   ├── interactions.css
    │   └── index.css
    ├── semantic/
    │   ├── (same structure)
    │   └── index.css
    └── modes/
        ├── dark.css
        ├── light.css
        ├── high-contrast.css
        ├── reduced-motion.css
        ├── reduced-transparency.css
        └── index.css

3. Run Development Server

npm run dev

The dev server will start and you'll see the Vite welcome page styled with Brocade tokens.

4. Build for Production

npm run build

What's Different from Standard Vite

1. Entry Point Location

• Standard Vite: index.html in project root
• This Setup: src/index.html as the main entry point

This is configured in vite.config.js:

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist'
  }
})

2. Brocade Token Integration

The src/index.html imports Brocade tokens from the public directory:

<link rel="stylesheet" href="/brocade-tokens/primitives/index.css" />
<link rel="stylesheet" href="/brocade-tokens/semantic/index.css" />
<link rel="stylesheet" href="/brocade-tokens/modes/index.css" />

3. Styles Using Tokens

src/style.css uses Brocade semantic tokens instead of hardcoded values:

/* Before: */
color: rgba(255, 255, 255, 0.87);
background-color: #242424;

/* After: */
color: var(--brocade-color-foreground-base);
background-color: var(--brocade-color-background-base);

Features

• ✅ Brocade Design Tokens - Complete token system with OKLCH colors
• ✅ Dark Mode - Toggle dark/light themes
• ✅ High Contrast Mode - Accessibility-focused high contrast
• ✅ Reduced Motion - Respects user motion preferences
• ✅ System Preference Detection - Automatically detects user preferences
• ✅ Mode Controls - Manual theme toggles in the UI

Using Brocade Tokens

In CSS

.my-component {
  /* Colors */
  color: var(--brocade-color-foreground-base);
  background: var(--brocade-color-primary-base);
  
  /* Spacing */
  padding: var(--brocade-size-padding-md);
  margin: var(--brocade-size-margin-lg);
  gap: var(--brocade-size-gap-sm);
  
  /* Typography */
  font-size: var(--brocade-font-size-base);
  font-weight: var(--brocade-font-weight-medium);
  line-height: var(--brocade-line-height-base);
  
  /* Borders */
  border-radius: var(--brocade-border-radius-button);
  border-width: var(--brocade-border-width-base);
  
  /* Transitions */
  transition: var(--brocade-transition-base);
}

Activating Modes

Via JavaScript (already set up in main.js):

// Dark mode
document.body.classList.add('mode-dark');

// High contrast
document.body.classList.add('mode-high-contrast');

// Combined modes
document.body.classList.add('mode-dark', 'mode-high-contrast');

Via CSS (automatic system preference detection):

/* Automatically applies when user prefers dark mode */
@media (prefers-color-scheme: dark) {
  /* Token overrides happen automatically */
}

Customizing Tokens

You can override tokens in your CSS:

/* Override semantic tokens */
:root {
  --brocade-color-primary-base: var(--brocade-raw-color-green-500);
}

/* Override raw primitives for complete theme change */
:root {
  --brocade-raw-color-blue-500: oklch(55% 0.18 280); /* Purple instead */
}

/* Scoped overrides */
.sidebar {
  --brocade-color-background-base: var(--brocade-raw-color-neutral-900);
  --brocade-color-foreground-base: var(--brocade-raw-color-neutral-50);
}

Next Steps

1. Explore all available tokens in public/brocade-tokens/
2. Read the Brocade documentation in public/brocade-tokens/README.md
3. Check out the quick reference in public/brocade-tokens/QUICK_REFERENCE.md
4. Build your components using Brocade tokens for consistency

Troubleshooting

Tokens not loading

Make sure brocade-tokens/ is in the public/ directory, not in src/.

Dev server issues

Try:

rm -rf node_modules package-lock.json
npm install
npm run dev

Build issues

Ensure vite.config.js has the correct paths:

• root: 'src'
• publicDir: '../public'

Resources

• Vite Documentation
• Brocade Specification
• Brocade Quick Reference