Fluxon 2.0 is here!
Fluxon v2.0 introduces a comprehensive theming system built on semantic colors and design tokens. This release replaces hardcoded color values with a token-based architecture that adapts to light and dark modes, brings consistency across all components, and adds new grouping components.
The biggest change is how colors work. Instead of using specific Tailwind color classes throughout your codebase, components now reference semantic tokens that you control through CSS variables. This makes theming straightforward and maintainable.
How the Theming System Works
Fluxon components now use semantic color tokens (text-primary, text-success, bg-accent, etc.)
instead of specific Tailwind colors (text-blue-500, bg-red-600, etc.). This means
components use meaningful names that convey purpose rather than appearance.
The theming system requires adding a theme import to your app.css file alongside
the existing Fluxon source:
@import "tailwindcss" source(none);
@source "../css";
@source "../js";
@source "../../lib/my_app_web";
@source "../../deps/fluxon/**/*.*ex";
@import "../../deps/fluxon/priv/static/theme";This theme file contains all the CSS custom properties that define colors, backgrounds, borders, and other design tokens. You can override any of these variables to customize your theme:
:root {
/* Override primary color */
--primary: #8b5cf6;
/* Customize backgrounds */
--background-base: #fafafa;
/* Adjust semantic colors */
--success: #10b981;
--danger: #ef4444;
}The system leverages TailwindCSS 4's theme variables to provide these semantic tokens. Every Fluxon component automatically adapts to your custom theme variables.
Try the interactive demo below to see how different theme configurations affect components:
--primary:
--foreground:
--background-base:
--surface:
--border-base:
--radius-base:
--shadow-base:
Manage who has access to this project.
This link will be used to access the project.
Requires a valid email address.
Standardized Component APIs
All components have been updated to follow consistent patterns. Every interactive component now supports the same variant system and sizing scale.
Variants:
Components share six variants - solid, soft, surface, outline, dashed, and ghost. Each variant
works with all five semantic colors: primary, info, success, warning, and danger.
Sizes:
The sizing system has been unified across all components. Whether you're
using a button, input, badge, or any other component, you get the same size options: xs, sm,
md
(default), lg, and xl.
New Components
This release introduces two new grouping components that help organize related UI elements.
Button Groups
The button_group component visually connects related buttons into a single unit.
This is particularly useful for toolbars, text formatting controls, and multi-action interfaces.
Input Groups
Similar to button groups, the input_group component combines multiple inputs into
a cohesive unit. This works well for credit card forms, dimension inputs, or any scenario where
multiple inputs are logically related.
Component Enhancements
Icon Button Sizes
Buttons now include dedicated icon sizes (icon-xs, icon-sm, icon-md, icon-lg, icon-xl) that create perfectly square buttons with centered icons.
These eliminate the need for manual padding adjustments when creating icon-only buttons.
Programmatic Popover Control
Popovers can now be controlled programmatically using Fluxon.open_popover/1
and Fluxon.close_popover/1. This enables building complex workflows like multi-step
onboarding, guided tours, or chained interactions without relying on hover or click triggers.
Form Component Improvements
All form components now support the form attribute, allowing inputs to be associated
with forms anywhere in the document. Components also support multiple affix slots (inner_prefix, inner_suffix, outer_prefix, outer_suffix) for adding icons,
labels, or actions to inputs.
Check the migration guide for detailed upgrade instructions and the full changelog for a complete list of changes. Learn more about the semantic color system and theming guide.
