Theming Overview

The UI Kit uses CSS variables for theming, providing a flexible system that integrates with the GXP platform's theming capabilities.

How Theming Works

┌─────────────────────────────────────────────────────────────┐
│                    Platform Theme                           │
│  (--page_background_color, --primary_button_background_color)│
└─────────────────────┬───────────────────────────────────────┘
                      │ maps to
                      ▼
┌─────────────────────────────────────────────────────────────┐
│                   shadcn Variables                          │
│     (--background, --foreground, --primary, --secondary)    │
└─────────────────────┬───────────────────────────────────────┘
                      │ used by
                      ▼
┌─────────────────────────────────────────────────────────────┐
│                  Tailwind Classes                           │
│      (bg-background, text-foreground, bg-primary)           │
└─────────────────────┬───────────────────────────────────────┘
                      │ applied to
                      ▼
┌─────────────────────────────────────────────────────────────┐
│                    Components                               │
│              (Button, Input, Dialog, etc.)                  │
└─────────────────────────────────────────────────────────────┘

Quick Start

Using the Default Theme

Import the full styles (includes default theme):

import '@gxp-dev/uikit/styles'

Using a Custom Theme

Import base styles and provide your own CSS variables:

import '@gxp-dev/uikit/styles/base'

/* your-theme.css */
:root {
  --background: #ffffff;
  --foreground: #000000;
  --primary: #0066cc;
  --primary-foreground: #ffffff;
  /* ... more variables */
}

Theme Variables

Core Variables

These are the essential variables used by components:

Variable	Purpose	Default
--background	Page background	#000466
--foreground	Text color	#FFFFFF
--primary	Primary actions	#FFFFFF
--primary-foreground	Text on primary	#000596
--secondary	Secondary actions	#000466
--secondary-foreground	Text on secondary	#FFFFFF
--muted	Muted backgrounds	#03054a
--muted-foreground	Muted text	#FFFFFF
--border	Border color	#888C92
--input	Input background	#03054a
--ring	Focus ring color	#FFFFFF
--radius	Border radius	0.5rem

Additional Variables

Variable	Purpose	Default
--card	Card background	#FFFFFF
--card-foreground	Card text	#222222
--popover	Popover background	#FFFFFF
--popover-foreground	Popover text	#222222
--accent	Accent color	#03054a
--accent-foreground	Accent text	#FFFFFF
--destructive	Destructive actions	#ef4444
--destructive-foreground	Destructive text	#FFFFFF

Platform Variable Mapping

The UI Kit maps platform-specific variables to shadcn variables:

:root {
  /* Platform variables (from GXP theming system) */
  --page_background_color: #000466;
  --page_text_color: #FFFFFF;
  --primary_button_background_color: #FFFFFF;
  --primary_button_text_color: #000596;

  /* Mapped to shadcn variables */
  --background: var(--page_background_color);
  --foreground: var(--page_text_color);
  --primary: var(--primary_button_background_color);
  --primary-foreground: var(--primary_button_text_color);
}

This allows:

1. Platform themes to automatically style UI Kit components
2. Direct CSS variable overrides when needed
3. Consistent theming across the platform

Usage in Components

Tailwind Classes

Components use Tailwind classes that reference CSS variables:

<template>
  <!-- Uses --background variable -->
  <div class="bg-background">
    <!-- Uses --foreground variable -->
    <p class="text-foreground">Hello World</p>
  </div>
</template>

Available Tailwind Classes

Class	CSS Variable
bg-background	--background
text-foreground	--foreground
bg-primary	--primary
text-primary-foreground	--primary-foreground
bg-secondary	--secondary
text-secondary-foreground	--secondary-foreground
bg-muted	--muted
text-muted-foreground	--muted-foreground
border-border	--border
bg-input	--input
ring-ring	--ring
bg-card	--card
text-card-foreground	--card-foreground
bg-destructive	--destructive
text-destructive-foreground	--destructive-foreground

Next Steps

• CSS Variables Reference - Complete variable list
• Customization Guide - Creating custom themes
• Dark Mode - Implementing dark mode