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.
+