Tokens
—
Following the pattern established by Patternfly, this page represents all of
the tokens we currently have in @goauthentik/theme. The
build-demo.mjs script copies the font and CSS files here, but
this is the best demo we have so far of the tokens we support.
Color
—
We keep our colors in oklch, but include the hex as a comment
to assist IDEs. Contrast is computed from the oklch triplet —
converted through Oklab to linear sRGB, gamut-clamped, then measured per
WCAG 2.1 — against the surface token appropriate to each role, and
re-measured whenever the theme changes. Tokens marked
no dark override keep their
light value in dark mode. Most of these are fine in dark mode, but you
should double-check.
Typography
—
Three RedHat variable families, loaded from
@goauthentik/fonts. The semantic aliases (body,
heading, code) are listed ahead of the primitives
they point at, matching the order in the source.
Families
Size ramp
Weights, across all three families
Each family is rendered at every weight token.
faces.css declares different variable ranges per family — Display
300–900, Text 400–500, Mono 300–700 — so a requested weight outside a family's
range gets clamped, and the browser may synthesise the difference. Rows that
look identical are the clamp; the computed weight beside each row is what was
asked for, not necessarily what the face can draw.
Line height
Spacing
—Bar length is the literal token value, so the ramp's shape is the ramp's actual proportions. Pixel figures are resolved at the current root font size.
Shape
—
Corner radii and border widths. Both scales are deliberately short; the
radius scale has an
sm and a full pill and nothing between them, which is why every
card on this page shares one corner.
Radius
Border width
Surfaces & elevation
—Three background planes and five shadows. The shadow tokens carry their own dark-theme values — deeper alpha rather than a different geometry — so elevation stays legible on a dark ground.
Planes
Shadows
Motion
—
One duration and one easing curve. Both the
prefers-reduced-motion media query and the
reduced theme zero the duration — and because they are two
different mechanisms writing the same variable, the state readout below
reports each separately.
In practice
Layering
—Six stacking rungs, 100 apart. The gaps are the point: they leave room for ad-hoc values between named layers without renumbering the scale.
Icons
—
@goauthentik/fonts ships the @font-face rules and
the font files, and stops there — the .pf-icon-* and
.fa classes stay with PatternFly, which this package does not
depend on. What follows is therefore a representative selection addressed by
raw codepoint, not the complete sets. The codepoints were taken from
@patternfly/patternfly@4.224.5, whose font binaries are
byte-identical to the ones shipped here, so they are authoritative for these
files.