CSS Variables Reference

Complete reference of all CSS variables used by the UI Kit.

Default Theme Values

:root {
  /* ===== Core Platform Variables ===== */

  /* Page */
  --page_background_color: #000466;
  --page_text_color: #FFFFFF;

  /* Input Fields */
  --input_field_background_color: #03054a;
  --input_field_text_color: #FFFFFF;
  --input_field_border_color: #888C92;

  /* Primary Button */
  --primary_button_background_color: #FFFFFF;
  --primary_button_text_color: #000596;
  --primary_button_border_color: #FFFFFF;

  /* Secondary Button */
  --secondary_button_background_color: #000466;
  --secondary_button_text_color: #FFFFFF;
  --secondary_button_border_color: #FFFFFF;

  /* Tertiary Button */
  --tertiary_button_background_color: transparent;
  --tertiary_button_text_color: #FFFFFF;
  --tertiary_button_border_color: transparent;

  /* Spinner */
  --spinner_background_color: #03054A;
  --spinner_color: #FFFFFF;

  /* Modal */
  --modal_background_color: #FFFFFF;
  --modal_text_color: #222222;
  --modal_primary_button_background_color: #000596;
  --modal_primary_button_text_color: #FFFFFF;
  --modal_primary_button_border_color: #000596;
  --modal_secondary_button_background_color: #FFFFFF;
  --modal_secondary_button_text_color: #000596;
  --modal_secondary_button_border_color: #000596;

  /* ===== shadcn/Tailwind Mappings ===== */

  /* Backgrounds & Foregrounds */
  --background: var(--page_background_color);
  --foreground: var(--page_text_color);

  /* Card (modals, dialogs, popovers) */
  --card: var(--modal_background_color);
  --card-foreground: var(--modal_text_color);
  --popover: var(--modal_background_color);
  --popover-foreground: var(--modal_text_color);

  /* Primary (main actions) */
  --primary: var(--primary_button_background_color);
  --primary-foreground: var(--primary_button_text_color);

  /* Secondary (alternate actions) */
  --secondary: var(--secondary_button_background_color);
  --secondary-foreground: var(--secondary_button_text_color);

  /* Muted (subtle elements) */
  --muted: var(--input_field_background_color);
  --muted-foreground: var(--input_field_text_color);

  /* Accent (highlights, hovers) */
  --accent: var(--input_field_background_color);
  --accent-foreground: var(--input_field_text_color);

  /* Destructive (danger, delete) */
  --destructive: #ef4444;
  --destructive-foreground: #FFFFFF;

  /* Form elements */
  --border: var(--input_field_border_color);
  --input: var(--input_field_background_color);
  --ring: var(--primary_button_border_color);

  /* Border Radius */
  --radius: 0.5rem;
}

Variable Categories

Page Variables

Control the main page appearance:

Variable	Description	Used By
--background	Main page background	bg-background
--foreground	Main text color	text-foreground

Button Variables

Control button appearance:

Variable	Description	Used By
--primary	Primary button background	bg-primary
--primary-foreground	Primary button text	text-primary-foreground
--secondary	Secondary button background	bg-secondary
--secondary-foreground	Secondary button text	text-secondary-foreground
--destructive	Destructive button background	bg-destructive
--destructive-foreground	Destructive button text	text-destructive-foreground

Form Variables

Control form element appearance:

Variable	Description	Used By
--input	Input background	bg-input
--border	Input/element borders	border-border
--ring	Focus ring color	ring-ring

Card/Modal Variables

Control elevated surfaces:

Variable	Description	Used By
--card	Card background	bg-card
--card-foreground	Card text	text-card-foreground
--popover	Popover background	bg-popover
--popover-foreground	Popover text	text-popover-foreground

Accent Variables

Control highlights and subtle states:

Variable	Description	Used By
--muted	Muted background	bg-muted
--muted-foreground	Muted text	text-muted-foreground
--accent	Accent/hover background	bg-accent
--accent-foreground	Accent text	text-accent-foreground

Layout Variables

Control spacing and sizing:

Variable	Description	Default
--radius	Border radius base	0.5rem

Tailwind Mappings

The Tailwind configuration maps CSS variables to utility classes:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        background: 'var(--background)',
        foreground: 'var(--foreground)',
        card: {
          DEFAULT: 'var(--card)',
          foreground: 'var(--card-foreground)',
        },
        popover: {
          DEFAULT: 'var(--popover)',
          foreground: 'var(--popover-foreground)',
        },
        primary: {
          DEFAULT: 'var(--primary)',
          foreground: 'var(--primary-foreground)',
        },
        secondary: {
          DEFAULT: 'var(--secondary)',
          foreground: 'var(--secondary-foreground)',
        },
        muted: {
          DEFAULT: 'var(--muted)',
          foreground: 'var(--muted-foreground)',
        },
        accent: {
          DEFAULT: 'var(--accent)',
          foreground: 'var(--accent-foreground)',
        },
        destructive: {
          DEFAULT: 'var(--destructive)',
          foreground: 'var(--destructive-foreground)',
        },
        border: 'var(--border)',
        input: 'var(--input)',
        ring: 'var(--ring)',
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
    },
  },
}

Using Variables in Custom CSS

Direct Usage

.my-custom-element {
  background-color: var(--background);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.my-custom-element:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

With Fallbacks

.my-element {
  /* Fallback if variable not defined */
  background-color: var(--background, #ffffff);
}

Computed Values

.my-element {
  /* Smaller radius */
  border-radius: calc(var(--radius) / 2);

  /* Transparent version */
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

Platform Integration

When used within the GXP platform, these variables are automatically set by the platform's theming system:

// Platform injects these at runtime
document.documentElement.style.setProperty('--page_background_color', theme.backgroundColor)
document.documentElement.style.setProperty('--primary_button_background_color', theme.primaryColor)
// ... etc

The shadcn mappings (--background, --primary, etc.) reference the platform variables, so components automatically update when the platform theme changes.