Skip to content

Theme & Styling

The frontend uses Tailwind CSS with CSS variables defined in admin/src/styles/theme.css. Colors are DXC-branded and switch cleanly between light and dark mode.

Design Tokens

Tokens are defined on :root (light) and .dark (dark) as oklch colors (perceptual, consistent lightness).

DXC Accent Colors

Variable Value Usage
--accent-peach #FFB273 Highlight / brand accent
--accent-blue #7396E0 Links, info
--accent-rose #C2888E Secondary accent
--accent-lavender #9291BF Tertiary accent

Semantic Colors

Variable Usage
--background / --foreground Page background / text
--card / --card-foreground Card surface
--primary / --primary-foreground Primary buttons
--muted / --muted-foreground De-emphasized text
--destructive Destructive actions
--border / --input / --ring Borders, inputs, focus rings

Severity Palette

Variable Level
--sev-debug DEBUG
--sev-info INFO
--sev-warning WARNING
--sev-error ERROR
--sev-critical CRITICAL

Light / Dark Mode

  • Default follows prefers-color-scheme
  • Manual toggle switches .dark class on <html>
  • Charts and badges inherit the same variables, so both modes stay coherent
.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  /* … */
}

Styling Approach

Practice Detail
Tailwind utilities Most layout/spacing via classes
CSS variables All colors via tokens (no hard-coded hex)
Radius --radius: 0.625rem for cards/buttons
Charts Recharts styled with token colors
Shadows Subtle, consistent elevation

Content Areas

  • Sidebar background = --sidebar (token family)
  • Topbar includes global search (CommandPalette), theme toggle, user menu
  • Active route highlighted with --sidebar-accent

Cards

  • Background --card, border --border
  • Used for KPI cards, tables, drawers

Adding a Color

  1. Add a token to theme.css in both :root and .dark
  2. Reference it as a Tailwind arbitrary value or CSS var
  3. Keep oklch for new colors to match the existing palette