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
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
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
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
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
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
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
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; }