How do I use CSS variables in Breakdance and Oxygen Builder?

BreakColorUI generates production-ready CSS custom properties that you can paste directly into Breakdance Global Styles or Oxygen Builder Stylesheets. Use our Chrome Extension to sync color systems instantly to both Breakdance and Oxygen Builder interfaces.

What is the best color system for Breakdance and Oxygen Builder?

BreakColorUI creates accessible 12-step color palettes based on Radix Colors methodology, optimized for Breakdance and Oxygen Builder workflows. Each palette includes automatic WCAG contrast ratios and works seamlessly with both Breakdance global styles and Oxygen Builder stylesheets.

Can I export design tokens to Breakdance and Oxygen Builder?

Yes. BreakColorUI exports complete design systems as CSS custom properties including colors, typography, spacing, and theme variables. Use the Chrome Extension for instant sync or copy CSS variables directly into Breakdance Global Styles or Oxygen Builder Stylesheets.

Does BreakColorUI work with Breakdance and Oxygen Builder?

Yes. BreakColorUI is specifically designed for both Breakdance and Oxygen Builder workflows. It generates CSS custom properties compatible with both platforms and includes a Chrome Extension that integrates directly into Breakdance and Oxygen Builder interfaces.

How do I create a fluid typography system for Breakdance and Oxygen Builder?

BreakColorUI includes a fluid typography generator that creates CSS clamp() based font scales. Configure viewport ranges and step sizes, then export as CSS variables ready for Breakdance global styles or Oxygen Builder stylesheets. Perfect for responsive WordPress sites built with either platform.

How do I add CSS variables to Oxygen Builder?

BreakColorUI generates CSS custom properties that you can paste directly into Oxygen Builder's Manage > Stylesheets > Universal CSS section. Alternatively, use our Chrome Extension to sync color systems instantly while working in the Oxygen Builder editor.

Does BreakColorUI support Oxygen Builder color presets?

Yes. BreakColorUI creates CSS variables that integrate seamlessly with Oxygen Builder's color management system. Our color palettes work perfectly with Oxygen's global colors feature and can be referenced throughout your Oxygen Builder projects.

Can I use BreakColorUI with Oxygen Builder and Breakdance together?

Absolutely. BreakColorUI generates universal CSS custom properties that work across both platforms. You can maintain a consistent design system across multiple WordPress sites, whether they use Breakdance, Oxygen Builder, or both.

Do I need a WordPress plugin for BreakColorUI?

No. BreakColorUI works entirely with CSS custom properties. Simply paste the generated CSS into Breakdance Global Styles or Oxygen Builder Stylesheets. No WordPress plugin required—just pure CSS variables that work natively with both platforms.

Export & Integration

Export CSS and integrate your design system with Breakdance

Start here: pick the right export

Export can feel confusing the first time. In BreakColorUI it comes down to three simple choices: platform, CSS mode, and color export system.

1) Platform

Breakdance (paste CSS), or Oxygen (JSON variables export)

2) CSS Mode

Light only, Dark only, or Full system (Light + Dark)

3) Color Engine

Standard (HEX) or Enhanced v2 (HEX + OKLCH + P3 + alpha + semantic)

Quick recommendations

• Using Breakdance? Start with Full System + Standard. Switch to Enhanced v2 if you want maximum color quality.
• No light/dark switching? Use Light Only (simpler CSS, fewer selectors).
• Using Oxygen? Use the JSON export (Light or Dark) to import variables directly in Oxygen.

CSS mode (Light / Dark / Full System)

CSS mode controls how themes are delivered in your exported file. It does not change token names — you still use the same var(--...) everywhere.

Light Only

Exports a single light theme to html:root. Best if you don’t need dark mode.

Dark Only

Exports a single dark theme to html:root. Useful for dark-only sites.

Full System

Exports both light + dark and includes selectors used by Breakdance.

How Full System theme switching works

In Full System mode, colors are exported twice: one block for light and another for dark. Breakdance applies the correct one using data-hsx attributes (e.g. [data-hsx*="dark"] / [data-hsx*="invert"]).

Platform context (Breakdance vs Oxygen)

The Export tab supports different workflows depending on where you want to use the tokens.

Breakdance (recommended: CSS)

Paste the exported CSS into Breakdance → Settings → Global CSS. Full System works best if you use light + dark.

Oxygen Builder (recommended: JSON)

Use the Oxygen JSON export (Light or Dark) to import variables directly. Enhanced v2 is a CSS feature.

Enhanced v2 note

Enhanced v2 upgrades the CSS color export (HEX → OKLCH → P3) while keeping the same --hcl-* variable names. Oxygen JSON export is designed for compatibility and uses HEX values.

Enhanced v2 - Next Generation Color Export

Enhanced v2 is an advanced color export mode that automatically applies modern color formats, transparency variants, and semantic tokens to your exported CSS. When you export colors through the modal, all enhancements are applied automatically—no extra configuration needed.

What is Enhanced v2?

Enhanced v2 provides 3-layer progressive enhancement for your color variables:

✓ Layer 1 (HEX): Universal fallback - works in 100% of browsers
✓ Layer 2 (OKLCH): Modern browsers (95%) get perceptually uniform colors
✓ Layer 3 (Display P3): P3-capable devices (50%) get 25% more vibrant colors

Automatically applied: Each device uses the best quality it can support. Legacy browsers just use HEX, while modern Apple devices get stunning wide-gamut colors.

Transparency Variants

Automatic alpha channel variants (a1-a12) for overlays, modals, and hover states

Semantic Tokens

Pre-calculated contrast, surface, indicator, and track tokens ready to use

Progressive Enhancement

HEX + OKLCH + P3 - 100% compatible with automatic quality improvement

Standard vs Enhanced v2

Choose the export mode that fits your needs:

Standard Modetext

✓ HEX color format only
✓ 51 variables per 3-color system
✓ 100% browser compatibility
✓ Lightweight CSS
✓ No transparency variants

Enhanced v2 Modetext

✓ HEX + OKLCH + Display P3 (3-layer)
✓ 86+ variables per 3-color system
✓ 100% compatible (HEX fallback)
✓ Larger file size (+15%)
✓ Automatic alpha variants
✓ Semantic tokens included
✓ 25% more vibrant on P3 devices

When to use Enhanced v2

• You want maximum visual quality on modern devices
• You're targeting Apple devices (iPhones, MacBooks, iPads)
• You need transparency variants for UI patterns
• You want semantic tokens pre-generated
• You don't care about a ~15% file size increase

Enhanced v2 Features Deep Dive

Here's what makes Enhanced v2 powerful:

3-Layer Progressive Enhancement

How it works:

1. Browser loads HEX fallback (works everywhere)
2. Modern browsers override with OKLCH (better color perception)
3. P3-capable devices further enhance with Display P3 (@media color-gamut: p3)

Result: Same CSS file, each device sees the best it can handle. No JavaScript needed.

Example: Enhanced v2 CSS Structurecss

/* Layer 1: HEX Fallback (100% browsers) */
:root {
  --hcl-brand-1: #fbfdff;
  --hcl-brand-9: #0090ff;
}

/* Layer 2: OKLCH Modern Override (95% browsers) */
@supports (color: oklch(50% 0.2 0)) {
  :root {
    --hcl-brand-1: oklch(98.7% 0.004 274);
    --hcl-brand-9: oklch(65.4% 0.182 30.39);
  }
}

/* Layer 3: Display P3 Wide Gamut (P3 devices) */
@media (color-gamut: p3) {
  :root {
    --hcl-brand-1: color(display-p3 0.984 0.992 1);
    --hcl-brand-9: color(display-p3 0.875 0.565 1);
  }
}

Automatic Transparency Variants

Enhanced v2 generates alpha variants for every color step (a1-a12):

• --hcl-brand-a1 - Very subtle (1.2% opacity) for delicate backgrounds
• --hcl-brand-a6 - Mid transparency for hover effects
• --hcl-brand-a12 - Strong transparency for shadow overlays

Use cases: Modal overlays, tooltip backgrounds, focus rings, shadow colors, hover states.

Using Transparency Variantscss

/* Subtle border */
border: 1px solid var(--hcl-brand-a3);

/* Overlay background */
background: var(--hcl-brand-a9);

/* Hover state with transparency */
.button:hover {
  background: var(--hcl-brand-a6);
}

/* Shadow with semantic token */
box-shadow: 0 4px 12px var(--hcl-brand-a12);

Pre-Calculated Semantic Tokens

Enhanced v2 automatically generates semantic tokens for common UI patterns:

• --hcl-brand-contrast - Text color with optimal contrast over brand
• --hcl-brand-surface - Subtle background with transparency
• --hcl-brand-indicator - For badges, dots, status indicators
• --hcl-brand-track - For sliders, progress bars, rails

Benefit: Use these ready-made tokens instead of calculating your own.

Using Semantic Tokenscss

/* Button with automatic contrast */
.button {
  background: var(--hcl-brand-9);
  color: var(--hcl-brand-contrast);  /* Automatically optimal contrast */
}

/* Card surface */
.card {
  background: var(--hcl-brand-surface);  /* Subtle background */
}

/* Status badge */
.badge {
  background: var(--hcl-brand-indicator);
}

/* Progress bar */
.progress {
  --bar-color: var(--hcl-brand-track);
}

Using Enhanced v2 in Export Tab

Enabling Enhanced v2 is simple - just select it and export as usual:

How to enable Enhanced v2

1. Open Export Tab - Navigate to your project's Export section
2. Select Enhanced v2 Mode - Choose the radio button labeled "Enhanced v2"
3. Review the CSS Preview - See all 3 color layers in the preview
4. Copy or Download - Click "Copy CSS" or "Download CSS" as usual
5. Use Variables Normally - Use CSS variables exactly as before (e.g., var(--hcl-brand-9))

What gets enhanced automatically

When you export with Enhanced v2:

✓ Your CSS file includes all 3 color layers (HEX, OKLCH, P3)
✓ Transparency variants generated (a1-a12) for all colors
✓ Semantic tokens pre-calculated (contrast, surface, indicator, track)
✓ Browser/device automatically picks the best layer
✓ Settings saved for your project

You don't change anything: You use the same CSS variables. The enhancement is transparent—the CSS handles it automatically.

Chrome Extension with Enhanced v2

When you sync Enhanced v2 colors to the Chrome Extension, it works exactly the same way:

• Extension copies the CSS variable (e.g., var(--hcl-brand-9))
• User pastes it in Breakdance normally
• The 3-layer CSS (HEX, OKLCH, P3) is already in the exported CSS file
• Each device automatically uses the best quality it can support

The enhancement is transparent: You use CSS variables the same way. The browser/device handles picking the best color format automatically.

Export Options

BreakColorUI gives you multiple export workflows depending on your context: copy CSS, download a CSS file, or copy and sync to the Chrome Extension (Breakdance workflow).

Copy CSS Variables

Copy all CSS custom properties to clipboard for quick manual integration

Download CSS File

Download a complete CSS file with all your design tokens ready to link

Chrome Extension Sync

Sync directly to Chrome Extension for instant Breakdance integration

What’s included in the export?

Your export can include: colors (brand, neutral, custom), typography, spacing, theme (layout + radius), and Breakdance mappings. In the Export tab you can also toggle categories (e.g. exclude custom colors, disable comments, or skip typography) to keep the CSS lean.

CSS Export Methods

Export your design tokens as CSS custom properties ready to use in any project:

Copy to Clipboard

Quick copy all CSS variables to clipboard - perfect for pasting into existing stylesheets

Download CSS File

Get a complete design-tokens.css file ready to link or import into any project

Copy CSS Workflow

1. Navigate to Export Tab - Open your project's Export section
2. Review generated CSS - CSS is organized by category (colors, typography, spacing, theme)
3. Click "Copy CSS" - Copies all CSS variables to clipboard
4. Paste in your project - Add to your :root selector or main CSS file

Download CSS Workflow

1. Click "Download CSS" - In Export tab
2. File saved - Downloads as design-tokens.css
3. Link or import - Add to your HTML or import in your build process

What Gets Exported

Here's what your exported CSS looks like - all your design tokens organized and ready to use:

Exported CSS Structurecss

/**
 * BreakColorUI Design System
 * Light Mode Variables
 */
html:root,
[data-hsx*="light"] {
  /* Brand Colors (12 steps) */
  --hcl-brand-1: #fbfdff;
  --hcl-brand-2: #f4faff;
  --hcl-brand-9: #0090ff;
  --hcl-brand-12: #113264;

  /* Neutral Colors (12 steps) */
  --hcl-neutral-1: #fcfcfc;
  --hcl-neutral-11: #646464;
  --hcl-neutral-12: #202020;

  /* Breakdance Global Mappings */
  --bde-headings-color: var(--hcl-neutral-12);
  --bde-body-text-color: var(--hcl-neutral-11);
  --bde-brand-primary-color: var(--hcl-brand-9);
}

/**
 * Dark Mode Variables
 */
:root[data-hsx*="dark"],
[data-hsx*="dark"],
[data-hsx*="invert"] {
  /* Brand Colors (inverted) */
  --hcl-brand-1: #0d1520;
  --hcl-brand-9: #0090ff;
  --hcl-brand-12: #c2e6ff;

  /* Neutral Colors (inverted) */
  --hcl-neutral-1: #111111;
  --hcl-neutral-11: #b4b4b4;
  --hcl-neutral-12: #eeeeee;

  /* Breakdance mappings (same vars, auto-adapt) */
  --bde-headings-color: var(--hcl-neutral-12);
  --bde-body-text-color: var(--hcl-neutral-11);
}

/**
 * Typography System (Fluid)
 */
html:root {
  --hfs-h1: clamp(2.441rem, 1.842rem + 2.003vw, 3.552rem);
  --hfs-h2: clamp(1.953rem, 1.569rem + 1.284vw, 2.665rem);
  --hfs-text-m: clamp(1rem, 0.932rem + 0.225vw, 1.125rem);

  /* Breakdance mappings */
  --bde-h1-font-size: var(--hfs-h1);
  --bde-body-font-size: var(--hfs-text-m);
}

/**
 * Spacing System
 */
html:root {
  /* Component Spacing */
  --hsp-m: clamp(1.5rem, 1.23rem + 0.902vw, 2rem);
  --hsp-l: clamp(1.999rem, 1.64rem + 1.202vw, 2.666rem);

  /* Section Spacing */
  --hss-m: clamp(4.125rem, 3.382rem + 2.48vw, 5.5rem);
  --hss-l: clamp(5.499rem, 4.509rem + 3.306vw, 7.332rem);
}

/**
 * Theme/Layout System
 */
html:root {
  --page-width: 1366px;
  --min-offset: 20px;
  --page-gap: 20px;

  /* Border Radius */
  --hrd-s: 6px;
  --hrd-m: 8px;
  --hrd-pill: 500px;

  /* Breakdance Section Mappings */
  --bde-section-width: 1406px;
  --bde-section-horizontal-padding: 20px;
  --bde-column-gap: 20px;
}

Chrome Extension Integration

For Breakdance users, the Chrome Extension provides instant, click-to-apply color integration:

Send to Chrome Extension

1. Install Extension - Download BreakColorUI Connector (see Extension Guide)
2. Click "Send to Extension" - In Export tab, sync your design system
3. Use in Breakdance - Click any color input to see your color palette
4. Apply instantly - One click applies colors without copy/paste

Extension benefits

• Visual color picker - See all your colors organized by category
• One-click apply - No typing var() or copying hex codes
• HEX or CSS var mode - Toggle between raw hex and CSS variable output
• Always in sync - Re-sync anytime you update your design system

Breakdance Global CSS Setup

To use CSS variables throughout Breakdance, add them to Global CSS:

WordPress / Breakdance Setup

1. Export CSS - In BreakColorUI Export tab, click "Copy CSS"
2. Open Breakdance Settings - In WordPress admin: Breakdance → Settings
3. Navigate to Global CSS - Find the Global CSS section
4. Paste CSS - Paste your CSS variables in the Global CSS textarea
5. Save Settings - Click "Save" to apply globally
6. Use in builder - Type var(--hcl-brand-9) in any field

Example: Breakdance Global CSScss

/* Paste in Breakdance → Settings → Global CSS */
html:root,
[data-hsx*="light"] {
  --hcl-brand-9: #0090ff;
  --hcl-neutral-12: #202020;
  --bde-brand-primary-color: var(--hcl-brand-9);
}

:root[data-hsx*="dark"],
[data-hsx*="dark"],
[data-hsx*="invert"] {
  --hcl-brand-9: #0090ff;
  --hcl-neutral-12: #eeeeee;
}

html:root {
  --hfs-h1: clamp(2.441rem, 1.842rem + 2.003vw, 3.552rem);
  --hss-xl: clamp(7.33rem, 6.01rem + 4.407vw, 9.773rem);
  --hrd-m: 8px;
  --bde-h1-font-size: var(--hfs-h1);
}

Using in Breakdance Buildertext

/* In any color field: */
var(--hcl-brand-9)
var(--bde-brand-primary-color)

/* In any size/spacing field: */
var(--hss-xl)
var(--hfs-h1)

/* In border-radius field: */
var(--hrd-m)

Best Practices

Follow these guidelines for smooth integration and maintenance:

Keep Variables in :root

Always place CSS custom properties in :root selector for global accessibility

Re-export After Changes

Update your exported CSS whenever you modify your design system

Save Projects in Dashboard

Your design system is automatically saved in BreakColorUI - access it anytime from any device

Document Your System

Add CSS comments explaining token usage and conventions

Keep design system in sync

Remember: Changes in BreakColorUI don't automatically update your projects. After modifying colors, typography, spacing, or theme - re-export and update your CSS in Breakdance Global CSS or your project's stylesheet.

Integration Tips

Maximize the value of your design system with these practical tips:

Use meaningful variable names

CSS variables like var(--hcl-brand-9) are self-documenting. The naming tells you: it's a brand color, step 9 (solid action color). This makes your code readable without documentation.

Combine tokens for consistency

Mix different token types for cohesive designs. Example: border-radius: var(--hrd-m); padding: var(--hsp-l); color: var(--hcl-brand-9); creates components that feel part of the same system.

Test in both themes

If you use Full System, always test both light and dark. The exported CSS switches via [data-hsx*="dark"] / [data-hsx*="invert"] selectors, so make sure both themes have good contrast in your real environment (Breakdance or your site).

Next Steps

Ready to supercharge your Breakdance workflow?

Install Chrome Extension

For Breakdance users, the Chrome Extension eliminates copy/paste entirely. Download BreakColorUI Connector or learn how to install and use the Chrome Extension for one-click color application in Breakdance builder.