Variant System

The variant system defines three levels of visual emphasis. Each variant maps to a distinct combination of surface, border, and text styling resolved through the ColorPalette.

The same component rendered in all three variants demonstrates the visual weight difference. Filled draws the most attention, Outlined sits in the middle, and Text recedes into the background.

<Button Text="Primary Action" Variant="Variant.Filled" Color="Color.Primary" />
<Button Text="Secondary Action" Variant="Variant.Outlined" Color="Color.Primary" />
<Button Text="Tertiary Action" Variant="Variant.Text" Color="Color.Primary" />

All 11 colors rendered in each of the 3 variants. This matrix shows the 33 possible combinations and helps verify that every color token works correctly across all variants.

@foreach (var color in Enum.GetValues<Color>())
{
    <Chip Text="@color.ToString()" Color="@color" Variant="Variant.Filled" />
    <Chip Text="@color.ToString()" Color="@color" Variant="Variant.Outlined" />
    <Chip Text="@color.ToString()" Color="@color" Variant="Variant.Text" />
}

ComponentStyleHelper provides three methods that resolve a Variant + Color pair into Tailwind CSS classes. Each method delegates to the ColorPaletteRegistry to look up the correct palette entry.

// Returns the background CSS class for the given variant and color
var bg = ComponentStyleHelper.GetVariantSurfaceClass(Variant.Filled, Color.Primary);
// Filled  → palette.SurfaceFilled  (e.g. "bg-primary-600 dark:bg-primary-500")
// Outlined → palette.SurfaceOutlined (e.g. "bg-primary-50/60 dark:bg-primary-950/40")
// Text    → "bg-transparent"

// Returns the border CSS class for the given variant and color
var border = ComponentStyleHelper.GetVariantBorderClass(Variant.Outlined, Color.Primary);
// Filled  → palette.BorderFilled
// Outlined → palette.BorderOutlined
// Text    → palette.BorderLine

// Returns the text color CSS class for the given variant and color
var text = ComponentStyleHelper.GetVariantTextClass(Variant.Filled, Color.Primary);
// Filled  → palette.TextOnFilled        (light text on dark bg)
// Outlined → palette.TextOnOutlinedOrText (dark text on light bg)
// Text    → palette.TextOnOutlinedOrText

Choose the variant based on the action's importance in the visual hierarchy. A single view should typically use only one Filled element as the primary call-to-action.

Key source files that implement the variant system in Sillium.Core.Blazor.