Table of Contents

Class TwSurfacePalette

Namespace
TwBlazor.Configuration.Color
Assembly
TwBlazor.dll

Neutral (gray-scale, non-semantic) surface tokens shared across components for card/dialog/popover backgrounds, dividing borders, and hover tints. Unlike TwBlazorPalette (one distinct color per semantic role - primary, danger, etc.), every property here is a single reusable class string that already covers both light and dark mode, so components that just need "the" neutral surface/border/hover look reference one of these instead of retyping the same literal classes.

[ExcludeFromCodeCoverage]
public class TwSurfacePalette
Inheritance
TwSurfacePalette
Inherited Members

Remarks

Add more weights here as new components need them (e.g. a stronger border, a deeper background) - each stays a single string property so the full class names remain visible to Tailwind's content scanner, which can't see classes assembled only at runtime from a compiled DLL.

Constructors

TwSurfacePalette()

public TwSurfacePalette()

Properties

Background

Gets or sets the standard opaque background for cards, dialogs, and popovers (e.g. bg-white dark:bg-gray-800).

public string Background { get; set; }

Property Value

string

BackgroundSubtle

Gets or sets a dimmer background for muted panels, striped rows, or nested sections (e.g. bg-gray-50 dark:bg-gray-900).

public string BackgroundSubtle { get; set; }

Property Value

string

Border

Gets or sets the standard outer border for cards, dialogs, and popover surfaces (e.g. border-gray-200 dark:border-gray-700).

public string Border { get; set; }

Property Value

string

BorderStrong

Gets or sets a more visible border than Border, for the same no-backdrop surfaces as Elevated/Overlay plus input outlines, where the default border is too subtle to read against the page (e.g. border-gray-400 dark:border-gray-500).

public string BorderStrong { get; set; }

Property Value

string

BorderSubtle

Gets or sets a lighter border for internal dividers within an already-bordered surface (e.g. border-gray-100 dark:border-gray-700).

public string BorderSubtle { get; set; }

Property Value

string

Elevated

Gets or sets a background for emphasized (filled) inputs that must read clearly against the page even with no backdrop behind them. Unlike BackgroundSubtle, this is deliberately lighter than Background in dark mode, since a same-or-darker fill has nothing to visually pop against without a dimming backdrop (e.g. bg-gray-50 dark:bg-gray-700).

public string Elevated { get; set; }

Property Value

string

Hover

Gets or sets the neutral hover background tint for list items, menu entries, and similar interactive rows (e.g. hover:bg-gray-100 dark:hover:bg-gray-700).

public string Hover { get; set; }

Property Value

string

Overlay

Gets or sets the background for floating popover/dialog panels (date/time/color picker bodies). Deliberately a different tone from Elevated - not just from Background - because filled inputs (which use Elevated) are routinely rendered inside these panels; if the panel and the filled input shared a tone, the input would visually disappear into the panel behind it (e.g. bg-white dark:bg-gray-700).

public string Overlay { get; set; }

Property Value

string