Colors

Learn how Fluxon UI's semantic color system works.

Starting with Fluxon v2, Fluxon UI uses semantic design tokens instead of hardcoded color values for consistent, maintainable theming across all components. This replaces all the specific color classes used in v1.

Tailwind Utilities

Fluxon extends Tailwind CSS with custom utility classes that use semantic color tokens. Instead of using specific color values like bg-blue-500, you'll use semantic utilities that describe the purpose of the color, such as bg-primary for primary actions, text-foreground for main text, or bg-surface for card backgrounds.

These utilities work just like regular Tailwind classes but reference semantic CSS variables instead of fixed colors. This means the actual color values automatically adapt based on the current theme.

How It Works

When you use a semantic utility class like bg-primary, Tailwind generates CSS that references a CSS variable:

{} Generated CSS

.bg-primary {
  background-color: var(--primary);
}

.text-foreground {
  color: var(--foreground);
}

These CSS variables are defined by default in Fluxon's theme.css file (imported during installation) but can be customized to match your brand colors. The actual color values can change based on the active theme.

{} app.css

:root {
  /* Semantic tokens reference actual color values */
  --primary: var(--color-blue-500);
  --foreground: var(--color-zinc-700);
  --background-base: var(--color-white);
  --surface: var(--color-zinc-50);
  --border-base: var(--color-zinc-200);
}

Components then use these semantic tokens through Tailwind classes:

{} page.html.heex

<!-- Primary button using semantic colors -->
<button class="bg-primary text-primary-foreground hover:bg-primary-hover">
  Click me
</button>

<!-- Card with semantic surface and border colors -->
<div class="bg-surface border border-base rounded-base">
  <h3 class="text-foreground">Card Title</h3>
  <p class="text-foreground-soft">Card description text</p>
</div>

<!-- Alert using semantic danger colors -->
<div class="bg-danger-soft text-danger border border-danger">
  Error message here
</div>

Color Tokens Reference

Below is the complete list of semantic color tokens available in Fluxon UI.

Token	Tailwind Class	Description
Brand
--primary	bg-primarytext-primaryborder-primary	Primary brand color used in call-to-action buttons, active navigation, links, selected items, and key interactive elements.
Content
--foreground	text-foreground	Primary text color for headings, body text, and main content. Highest contrast for optimal readability.
--foreground-soft	text-foreground-soft	Slightly muted text color for secondary content, captions, and supporting text.
--foreground-softer	text-foreground-softer	More muted text color for placeholder text, form labels, and tertiary content.
--foreground-softest	text-foreground-softest	Most muted text color for disabled states, subtle hints, and background text.
--foreground-primary	text-foreground-primary	Text color designed for use on primary colored backgrounds, ensuring proper contrast.
Background
--background-base	bg-base	Main application background color for page layout, content areas, and foundation layer.
--background-accent	bg-accent	Accent background color for highlighted sections, hovered items, and areas that need to stand out.
--background-input	bg-input	Background color for form inputs, text areas, select fields, and interactive form elements in default state.
--overlay	bg-overlay	Overlay background for dropdowns, popovers, and floating elements.
Border
--border-base	border-base	Primary border color for form inputs, cards, table borders, dividers, and UI elements needing clear boundaries.
--border-input	border-input	Specific border color for form inputs, text fields, and interactive form elements.
Semantic Colors
--danger	bg-dangertext-dangerborder-danger	Danger color for error states, destructive actions, delete buttons, form validation errors, and critical alerts.
--success	bg-successtext-successborder-success	Success color for completed actions, valid form states, success notifications, and positive feedback indicators.
--warning	bg-warningtext-warningborder-warning	Warning color for caution states, pending actions, form validation warnings, and alerts requiring attention.
--info	bg-infotext-infoborder-info	Info color for informational messages, help text, neutral notifications, and general information indicators.
Focus States
--focus	border-focusring-focus	Primary focus outline color for interactive elements. Border uses this color directly, ring uses semi-transparent version for glow effect.
--focus-danger	ring-focus-danger	Danger state focus outline color for error states and invalid form inputs. Provides visual feedback when dangerous actions are focused.
Layout
--radius-base	rounded-base	Base border radius used consistently across buttons, cards, inputs, and UI components to maintain visual harmony.
--shadow-base	shadow-base	Base shadow for cards, dropdowns, modals, and elevated components to create subtle depth and visual hierarchy.

For information on theme switching, dark mode, and creating custom themes, see the Themes guide.