Theme Variables Reference

This page documents all Tier 1 CSS custom properties — the 53 variables you must provide in every custom theme. They are enforced by the GlyphThemeVars TypeScript type.

For an overview of how theming works, including the two-tier model and component-specific Tier 2 overrides, see the Theming guide.

Core Colors

Used across all components as the foundational visual layer.

Variable	Light	Dark	Description
`--glyph-bg`	`transparent`	`#0a0e1a`	Primary background color
`--glyph-text`	`#1a2035`	`#d4dae3`	Primary text color
`--glyph-text-muted`	`#6b7a94`	`#6b7a94`	Secondary/muted text color
`--glyph-heading`	`#0a0e1a`	`#edf0f5`	Heading text color
`--glyph-link`	`#0a9d7c`	`#00d4aa`	Link color
`--glyph-link-hover`	`#088a6c`	`#33e0be`	Link hover color
`--glyph-border`	`#d0d8e4`	`#1a2035`	Default border color
`--glyph-border-strong`	`#a8b5c8`	`#2a3550`	Emphasized border color
`--glyph-surface`	`#e8ecf3`	`#0f1526`	Surface/card background
`--glyph-surface-raised`	`#f4f6fa`	`#162038`	Elevated surface background

Accent

The primary brand color and its variants. Used by interactive elements, highlights, and call-to-action indicators.

Variable	Light	Dark	Description
`--glyph-accent`	`#0a9d7c`	`#00d4aa`	Primary accent color
`--glyph-accent-hover`	`#088a6c`	`#33e0be`	Accent hover state
`--glyph-accent-subtle`	`#e6f6f2`	`#0a1a1a`	Subtle accent background
`--glyph-accent-muted`	`#b0ddd0`	`#1a4a3a`	Muted accent color
`--glyph-text-on-accent`	`#fff`	`#0a0e1a`	Text color on accent-colored backgrounds

Code

Variable	Light	Dark	Description
`--glyph-code-bg`	`#e8ecf3`	`#0f1526`	Inline code background
`--glyph-code-text`	`#1a2035`	`#d4dae3`	Inline code text color

Typography

Variable	Value	Description
`--glyph-font-body`	`"Inter", "Helvetica Neue", system-ui, sans-serif`	Body text font stack
`--glyph-font-heading`	`"Inter", "Helvetica Neue", system-ui, sans-serif`	Heading font stack
`--glyph-font-mono`	`ui-monospace, "Cascadia Code", "Fira Code", monospace`	Monospace font stack

Spacing

Consistent spacing scale used across all components.

Variable	Value	Description
`--glyph-spacing-xs`	`0.25rem`	Extra small spacing (4px)
`--glyph-spacing-sm`	`0.5rem`	Small spacing (8px)
`--glyph-spacing-md`	`1rem`	Medium spacing (16px)
`--glyph-spacing-lg`	`1.5rem`	Large spacing (24px)
`--glyph-spacing-xl`	`2rem`	Extra large spacing (32px)

Border Radius

Variable	Value	Description
`--glyph-radius-xs`	`0.25rem`	Extra small radius (4px)
`--glyph-radius-sm`	`0.375rem`	Small radius (6px)
`--glyph-radius-md`	`0.5rem`	Medium radius (8px)
`--glyph-radius-lg`	`0.75rem`	Large radius (12px)

Effects

Variable	Light	Dark	Description
`--glyph-shadow-sm`	`0 1px 3px rgba(0,0,0,0.1)`	`0 1px 3px rgba(0,0,0,0.4)`	Subtle shadow
`--glyph-shadow-md`	`0 4px 12px rgba(0,0,0,0.15)`	`0 4px 12px rgba(0,0,0,0.5)`	Medium shadow
`--glyph-shadow-lg`	`0 8px 30px rgba(0,0,0,0.2)`	`0 8px 30px rgba(0,0,0,0.6)`	Large shadow
`--glyph-transition`	`0.2s ease`	`0.2s ease`	Default transition timing
`--glyph-focus-ring`	`0 0 0 2px #0a9d7c`	`0 0 0 2px #00d4aa`	Focus ring box-shadow
`--glyph-opacity-muted`	`0.7`	`0.7`	Muted element opacity
`--glyph-opacity-disabled`	`0.4`	`0.4`	Disabled element opacity

Semantic States

Four universal state colors used by components that indicate success, warning, error, and informational states. These drive KPI sentiment, Kanban priority, Comparison results, Steps states, Quiz feedback, Callout types, and Form validation.

Variable	Light	Dark	Description
`--glyph-color-success`	`#16a34a`	`#4ade80`	Success / positive state
`--glyph-color-warning`	`#d97706`	`#fbbf24`	Warning / caution state
`--glyph-color-error`	`#dc2626`	`#f87171`	Error / negative state
`--glyph-color-info`	`#38bdf8`	`#38bdf8`	Informational / neutral state

Shared Palette

Ten color slots for multi-series visualizations: Chart, Timeline, Infographic, and Graph group colors. The palette is also used for architecture node fills and other categorical encodings.

Variable	Light	Dark
`--glyph-palette-color-1`	`#00d4aa`	`#00d4aa`
`--glyph-palette-color-2`	`#b44dff`	`#b44dff`
`--glyph-palette-color-3`	`#22c55e`	`#4ade80`
`--glyph-palette-color-4`	`#e040fb`	`#e040fb`
`--glyph-palette-color-5`	`#00e5ff`	`#00e5ff`
`--glyph-palette-color-6`	`#84cc16`	`#bef264`
`--glyph-palette-color-7`	`#f472b6`	`#f472b6`
`--glyph-palette-color-8`	`#fb923c`	`#fb923c`
`--glyph-palette-color-9`	`#818cf8`	`#818cf8`
`--glyph-palette-color-10`	`#38bdf8`	`#38bdf8`

Misc

Variable	Light	Dark	Description
`--glyph-tooltip-bg`	`rgba(10,14,26,0.9)`	`rgba(0,0,0,0.9)`	Tooltip background
`--glyph-tooltip-text`	`#f4f6fa`	`#d4dae3`	Tooltip text color
`--glyph-rating-star-fill`	`#f59e0b`	`#fbbf24`	Rating star fill color

Tier 2 — Component-specific overrides

Component-specific CSS properties (like --glyph-kanban-card-bg or --glyph-steps-active-color) are not in the required TypeScript union. They cascade from the Tier 1 tokens above via CSS fallback chains built into each component.

You can override any of them at the CSS level without touching your theme object:

/* Tier 2 override — CSS only, no TypeScript required */
[data-glyph-theme="corporate"] {
  --glyph-kanban-card-bg: #f0f4ff;
  --glyph-kanban-priority-high: #c62828;
  --glyph-steps-active-color: #0066cc;
  --glyph-callout-info-bg: #e3f2fd;
  --glyph-callout-info-border: #2196f3;
  --glyph-table-header-bg: #1e3a5f;
}

Tier 2 variables follow this naming pattern:

Pattern	Example
`--glyph-{component}-{property}`	`--glyph-table-border`
`--glyph-{component}-{variant}-{property}`	`--glyph-callout-info-bg`

Usage examples

Minimal custom theme

Only the 53 Tier 1 vars are required:

import { ThemeProvider } from '@glyphjs/runtime';

const myTheme = {
  name: 'corporate',
  variables: {
    '--glyph-bg': '#ffffff',
    '--glyph-text': '#333333',
    '--glyph-text-muted': '#666666',
    '--glyph-heading': '#111111',
    '--glyph-link': '#0066cc',
    '--glyph-link-hover': '#0052a3',
    '--glyph-border': '#e0e0e0',
    '--glyph-border-strong': '#bdbdbd',
    '--glyph-surface': '#f5f5f5',
    '--glyph-surface-raised': '#ffffff',

    '--glyph-accent': '#0066cc',
    '--glyph-accent-hover': '#0052a3',
    '--glyph-accent-subtle': '#e3f0ff',
    '--glyph-accent-muted': '#90c0f0',
    '--glyph-text-on-accent': '#ffffff',

    '--glyph-code-bg': '#f5f5f5',
    '--glyph-code-text': '#333333',

    '--glyph-font-body': '"Inter", system-ui, sans-serif',
    '--glyph-font-heading': '"Inter", system-ui, sans-serif',
    '--glyph-font-mono': 'ui-monospace, monospace',

    '--glyph-spacing-xs': '0.25rem',
    '--glyph-spacing-sm': '0.5rem',
    '--glyph-spacing-md': '1rem',
    '--glyph-spacing-lg': '1.5rem',
    '--glyph-spacing-xl': '2rem',

    '--glyph-radius-xs': '0.25rem',
    '--glyph-radius-sm': '0.375rem',
    '--glyph-radius-md': '0.5rem',
    '--glyph-radius-lg': '0.75rem',

    '--glyph-shadow-sm': '0 1px 3px rgba(0,0,0,0.1)',
    '--glyph-shadow-md': '0 4px 12px rgba(0,0,0,0.15)',
    '--glyph-shadow-lg': '0 8px 30px rgba(0,0,0,0.2)',
    '--glyph-transition': '0.2s ease',
    '--glyph-focus-ring': '0 0 0 2px #0066cc',
    '--glyph-opacity-muted': '0.7',
    '--glyph-opacity-disabled': '0.4',

    '--glyph-color-success': '#2e7d32',
    '--glyph-color-warning': '#e65100',
    '--glyph-color-error': '#c62828',
    '--glyph-color-info': '#0288d1',

    '--glyph-palette-color-1': '#0066cc',
    '--glyph-palette-color-2': '#7b1fa2',
    '--glyph-palette-color-3': '#2e7d32',
    '--glyph-palette-color-4': '#c62828',
    '--glyph-palette-color-5': '#00838f',
    '--glyph-palette-color-6': '#f9a825',
    '--glyph-palette-color-7': '#ad1457',
    '--glyph-palette-color-8': '#e65100',
    '--glyph-palette-color-9': '#4527a0',
    '--glyph-palette-color-10': '#00695c',

    '--glyph-tooltip-bg': 'rgba(0,0,0,0.85)',
    '--glyph-tooltip-text': '#ffffff',
    '--glyph-rating-star-fill': '#fbc02d',
  },
};

function App() {
  return (
    <ThemeProvider theme={myTheme}>
      {/* All GlyphJS components use these variables */}
    </ThemeProvider>
  );
}

Extending a built-in theme

import { ThemeProvider, darkTheme } from '@glyphjs/runtime';

const customDark = {
  name: 'custom-dark',
  variables: {
    ...darkTheme.variables,
    '--glyph-accent': '#ff6b6b',
    '--glyph-accent-hover': '#ff8787',
    '--glyph-color-success': '#69db7c',
  },
};

<ThemeProvider theme={customDark}>
  {children}
</ThemeProvider>

Dark mode setup

import { ThemeProvider } from '@glyphjs/runtime';

// Built-in dark theme
<ThemeProvider theme="dark">
  {children}
</ThemeProvider>