Design tokens

All tokens

Identical in Angular and React. Both render layers draw the same .oge-* classes from one stylesheet, so every token below themes both.

115 of 115 tokens

Reading the table

• Default (light) is the value every page gets, declared at zero specificity on :root — any declaration of yours wins. Dark and High contrast apply under .oge-theme-dark / [data-oge-theme='high-contrast']; the Tailwind and Bootstrap bridges map tokens onto those frameworks' variables, falling back to the value in parentheses. An empty cell keeps the default.
• Derived tokens are expressions over other tokens (color-mix() tints of --oge-accent, aliases like --oge-input-muted). Set the base token and they follow; swatches show them resolved in each theme.
• Used by lists the packages whose stylesheets read the token. React packages ship the same stylesheets as their Angular siblings, so a token used by grid themes @oge-ui/react-grid too.
• Component-local knobs (--oge-card-pad, --oge-input-width…) are set on a component's own class and documented on its page; they are not part of this shared set.

/* A token is a CSS custom property: set it on :root (the defaults sit at
   zero specificity, so this wins wherever your stylesheet loads)… */
:root {
  --oge-accent: #7c3aed;
  --oge-radius: 8px;
}

/* …or on any subtree. A scope that sets a base token re-derives the
   tints that depend on it only where those tints are declared, so a
   scoped theme also re-declares the derived set — the Theme builder's
   scoped export does that for you. */
.billing-panel {
  --oge-accent: #0f766e;
}

DTCG tokens.json

The light, dark and high-contrast themes also ship as a Design Tokens Community Group file — @oge-ui/core/tokens.json — for design tools and token pipelines that read the format. Colours are sRGB component objects with a hex fallback, dimensions are { value, unit }, aliases stay aliases and computed tints carry their CSS expression in $extensions. Download tokens.json.

// Design Tokens Community Group format (2025.10): $value + $type,
// one group per theme — light, dark and high-contrast.
import tokens from '@oge-ui/core/tokens.json' with { type: 'json' };

tokens.light.accent.$value.hex; // '#2563eb'
tokens.dark.accent.$value.components; // [0.3765, 0.6471, 0.9804] (sRGB)
tokens.light['input-muted'].$value; // '{light.header-color}' — an alias

// every token names the CSS custom property it maps to
tokens.light.accent.$extensions['com.ogeui'].cssVariable; // '--oge-accent'