Skip to main content

CSS Variable Reference

Widgemo exposes CSS custom properties using the --widgemo-* prefix. This page lists the canonical variables intended for host-level theming and layout control.

For host stylesheet interactions with Widgemo table behavior, see Host CSS and Table Layout.

Scope and Precedence​

ScopePatternTypical use
Global:root { --widgemo-... }App-wide defaults
Scoped container.my-surface { --widgemo-... }Per-widget or per-page overrides
Runtime theme/configTheme provider and config theme layersToken-level runtime theming

When the same variable is defined in multiple scopes, normal CSS cascade and specificity rules apply.

Default Theme Palettes​

Widgemo includes both default light and default dark palettes.

  • Safety-net CSS variable fallbacks in widgemo-theme.css provide light defaults.
  • WidgemoThemeProvider applies the default dark palette when theme="dark".

Core Color Tokens (Light and Dark)​

VariableLight defaultDark default
--widgemo-color-primary#0d6efd#4d94ff
--widgemo-color-background#ffffff#1e1e1e
--widgemo-color-surfaceBg#f8f9fa#2d2d2d
--widgemo-color-text#212529#e0e0e0
--widgemo-color-textMuted#6c757d#adb5bd
--widgemo-color-border#dee2e6#3f454c
--widgemo-color-success#28a745#28a745
--widgemo-color-warning#ffc107#ffc107
--widgemo-color-danger#dc3545#dc3545
--widgemo-color-info#17a2b8#17a2b8

Surface and Row Tokens (Light and Dark)​

VariableLight defaultDark default
--widgemo-color-tableBg#ffffff#1e1e1e
--widgemo-color-tableHeaderBg#f8f9fa#252525
--widgemo-color-tableHeaderHoverBg#e9ecef#3f454c
--widgemo-color-rowHoverBg#ced4dargba(255, 255, 255, 0.16)
--widgemo-color-rowAltBg#e9ecefrgba(255, 255, 255, 0.08)

Action and Menu Tokens​

VariableDefault/fallback
--widgemo-action-button-bgvar(--widgemo-color-actionButtonBg, transparent)
--widgemo-action-button-colorvar(--widgemo-color-actionButtonColor, #212529)
--widgemo-action-button-border1px solid var(--widgemo-color-actionButtonBorder, #dee2e6)
--widgemo-action-button-hover-bgvar(--widgemo-color-actionButtonHoverBg, rgba(0,0,0,0.05))
--widgemo-action-button-hover-bordervar(--widgemo-color-actionButtonHoverBorder, #0d6efd)
--widgemo-action-menu-bgvar(--widgemo-color-actionMenuBg, #ffffff)
--widgemo-action-menu-colorvar(--widgemo-color-actionMenuColor, #212529)
--widgemo-action-menu-item-hover-bgvar(--widgemo-color-actionMenuItemHoverBg, #e9ecef)

Layout and Spacing Tokens​

VariableDefault
--widgemo-border-radius8px
--widgemo-card-padding1rem
--widgemo-zone-padding0.75rem 1rem
--widgemo-container-padding0
--widgemo-zone-title-font-size1.25rem
--widgemo-board-col-width280px
--widgemo-board-swimlane-label-width110px

Layering Tokens (z-index)​

VariableDefaultPurpose
--widgemo-dropdown-z-index950Zone and table dropdown layers
--widgemo-lightbox-z-index9000Lightbox/overlay layer
--widgemo-dev-overlay-z-indexvar(--widgemo-lightbox-z-index, 9000)Dev overlay token

Note: DevMode overlay rendering uses a hardcoded high z-index in runtime (10000001) to remain above host chrome.

Row State Tokens​

VariableSource
--widgemo-row-alt-bgvar(--widgemo-color-rowAltBg, #e9ecef)
--widgemo-row-hover-bgvar(--widgemo-color-rowHoverBg, #ced4da)

These row-state tokens are mapped into table behavior (including sticky and hover handling) and can be overridden globally or in a scoped container.

Override Patterns​

Global override:

:root {
  --widgemo-color-primary: #2563eb;
  --widgemo-dropdown-z-index: 1200;
  --widgemo-border-radius: 10px;
}

Scoped override:

.finance-widget-surface {
  --widgemo-color-background: #ffffff;
  --widgemo-color-border: #dbe3ef;
  --widgemo-action-menu-bg: #f8fbff;
  --widgemo-board-col-width: 320px;
}

In table contexts, dropdown menus render through a portal at document.body with fixed positioning so they remain visible even when parent containers clip overflow.

In non-table contexts, menus use absolute positioning in local flow.

See Also​