Upgrading to v2.0

This guide provides instructions for upgrading your application to Fluxon v2.0. This release introduces a new theming system and includes several breaking changes designed to improve consistency and customization across the component library.

Theming System

Fluxon v2.0 introduces a token-based theming system that replaces hardcoded color values throughout the component library. This system is now required for components to function correctly, as TailwindCSS depends on these definitions to process the new color tokens.

Import the theme stylesheet in your app.css:

@import "../../deps/fluxon/priv/static/theme";

This file provides the color definitions (primary, danger, warning, success, info), design tokens for spacing, borders, and shadows, along with light/dark mode support.

Instead of using raw TailwindCSS colors like blue-500 or green-600, components now reference contextual names that adapt to your theme configuration. For details on how this works, see the colors documentation. The themes guide covers customization options.

Breaking Changes

This section details the breaking changes for each component and how to update your code.

Alert

The variant attribute has been removed to standardize on the color attribute. Alerts now use color to define their appearance, accepting primary, danger, warning, success, and info.

- <.alert variant="error">
+ <.alert color="danger">

Badge

  • The variant="flat" is now variant="soft". The default variant has been renamed to surface.

  • The pill variant is removed. Use the class="rounded-full" instead.

  • Direct support for all TailwindCSS colors has been removed. Badges now use a semantic color palette: primary, danger, warning, success, and info. For custom colors, you can use the class attribute to apply custom background, text, and border styles.

    The following color replacements should be made:

    • green → success
    • blue → info
    • yellow → warning
    • red → danger

    For other colors, apply classes directly:

    - <.badge color="violet">
+ <.badge class="bg-violet-100/50 text-violet-700 border-violet-200/90">

    For the pill variant:

    - <.badge variant="pill">
+ <.badge class="rounded-full">

Button

  • The component now automatically renders as a link (<a>) if href, navigate, or patch attributes are provided. You should remove any as="link" attributes.

    - <.button as="link" navigate={~p"/account"}>
+ <.button navigate={~p"/account"}>

  • Button colors have been updated to use the semantic color palette. The following replacements should be made:

    • green → success
    • blue → info
    • yellow → warning
    • red → danger
    - <.button color="green">
+ <.button color="success">

Forms

The default size base has been renamed to md across all form components (Select, Switch, Autocomplete, Input, DatePicker) to ensure consistent sizing options.

Input

The inner_prefix and inner_suffix slots no longer require manual padding adjustments. The component now handles this automatically.

- <.input field={f[:username]} class="pl-8">
+ <.input field={f[:username]}>
    <:inner_prefix>
      <.icon name="u-at-sign" />
    </:inner_prefix>
  </.input>

Switch

The color attribute now only accepts semantic colors: primary, danger, success, warning, and info. The following replacements should be made:

  • green → success
  • blue → info
  • yellow → warning
  • red → danger
- <.switch color="green">
+ <.switch color="success">