@multiplatform.one/keycloak-theme 7.2.0

package/src/glyph.ts

@@ -0,0 +1,109 @@
+/**
+ * THE SPRINGBOARD'S APP GLYPH, TRANSCRIBED FOR KEYCLOAK.
+ *
+ * ★ PROVENANCE: selfhosted-cloud/shc `packages/springboard-ui/src/glyph.ts`,
+ * function for function. See ./tokens.ts for why the values are copied
+ * across repositories rather than imported.
+ *
+ * ★ WHY A LOGIN PAGE WANTS THIS AT ALL. The springboard draws every stack
+ * as a rounded square carrying a two-letter monogram over a hue hashed
+ * from the app's name, so a user recognises an app by its colour before
+ * they read its label. The login page is the surface they land on BEFORE
+ * the springboard, and it is per-realm — so seeding the same hash with the
+ * realm name puts the estate's own colour on its front door, and the tile
+ * a user then sees in the launcher is the same shape they just signed in
+ * under. Nothing here is decorative-only: it is the one piece of continuity
+ * between the two surfaces that costs no configuration.
+ *
+ * ★ THE HASH MUST STAY BIT-IDENTICAL TO shc's. Two renderers agreeing on
+ * a colour is the entire point, and they agree only because both run
+ * FNV-1a 32-bit over the same seed with the same 62%/42% HSL pair.
+ * `./glyph.spec.ts` pins concrete seed→hue outputs rather than just
+ * asserting determinism, so a "harmless" rewrite of the mixing step fails
+ * instead of quietly recolouring one half of the product.
+ */
+
+/**
+ * FNV-1a 32-bit over the seed string. Stable across platforms (pure
+ * integer math), well-distributed enough for hue spacing.
+ */
+export function stableHash(seed: string): number {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < seed.length; i++) {
+    hash ^= seed.charCodeAt(i);
+    // 32-bit FNV prime multiply, kept in uint32 range.
+    hash = Math.imul(hash, 0x01000193) >>> 0;
+  }
+  return hash >>> 0;
+}
+
+/** Deterministic hue (0–359) for a glyph seed. */
+export function glyphHue(seed: string): number {
+  return stableHash(seed) % 360;
+}
+
+/**
+ * Two-letter monogram: first letters of the first two words when the name
+ * has separators (dashes/underscores/spaces/dots), else the first two
+ * characters. Uppercased; empty name renders "?".
+ */
+export function glyphMonogram(name: string): string {
+  const trimmed = name.trim();
+  if (!trimmed) return "?";
+  const words = trimmed.split(/[\s\-_.]+/).filter(Boolean);
+  if (words.length >= 2) {
+    return `${words[0]![0] ?? ""}${words[1]![0] ?? ""}`.toUpperCase();
+  }
+  return trimmed.slice(0, 2).toUpperCase();
+}
+
+export interface GlyphColors {
+  /** Tile fill. */
+  background: string;
+  /** Monogram color. */
+  foreground: string;
+}
+
+/**
+ * HSL pair for the glyph: a saturated mid-dark fill with a near-white
+ * monogram — legible in both color schemes without consulting the theme.
+ */
+export function glyphColors(seed: string): GlyphColors {
+  const hue = glyphHue(seed);
+  return {
+    background: `hsl(${hue}, 62%, 42%)`,
+    foreground: "hsl(0, 0%, 98%)",
+  };
+}
+
+/** Everything the stylesheet needs to draw one glyph plate. */
+export interface GlyphMark extends GlyphColors {
+  /** The two-letter monogram, already uppercased. */
+  monogram: string;
+  /** The hue the fill was generated from — exposed for tests and tooling. */
+  hue: number;
+}
+
+/**
+ * Resolve a realm (or client, or estate) name into the mark its login page
+ * should wear.
+ *
+ * ★ SEED THE HASH WITH THE NAME, LABEL WITH THE DISPLAY NAME. Keycloak
+ * realms carry both a `name` (the stable slug in every URL) and a
+ * `displayName` (free text an admin retypes at will). The springboard
+ * hashes app IDENTITY, not app labels — `glyphSeed()` in shc prefers the
+ * deployment's `app_name` over the stack's display name for exactly this
+ * reason — so the hue is seeded from the slug and stays put when somebody
+ * fixes a capital letter in the display name. The monogram is drawn from
+ * whichever string a human would read.
+ */
+export function glyphMark(params: { name: string; displayName?: string }): GlyphMark {
+  const { name, displayName } = params;
+  const seed = name.trim() || displayName?.trim() || "";
+  const label = displayName?.trim() || name;
+  return {
+    ...glyphColors(seed),
+    monogram: glyphMonogram(label),
+    hue: glyphHue(seed),
+  };
+}

package/src/index.ts

@@ -0,0 +1,47 @@
+/**
+ * @multiplatform.one/keycloak-theme — the SHC springboard as a Keycloak
+ * login skin.
+ *
+ * The design values are transcribed from the SHC console's springboard
+ * package; ./tokens.ts carries the provenance and the reason the copy is
+ * deliberate. Nothing here renders a Keycloak page: the skin is one
+ * stylesheet, hooked onto the class names and ids keycloakify's own pages
+ * already emit, so no flow, form or field is owned by this package.
+ *
+ * Typical wiring, inside a keycloakify `KcPage`:
+ *
+ *     import { SpringboardStyles, isSpringboardTheme } from "@multiplatform.one/keycloak-theme";
+ *
+ *     {isSpringboardTheme(kcContext) && <SpringboardStyles realm={kcContext.realm} />}
+ */
+
+export { buildSpringboardCss, type SpringboardCssOptions } from "./css";
+export {
+  glyphColors,
+  glyphHue,
+  glyphMark,
+  glyphMonogram,
+  stableHash,
+  type GlyphColors,
+  type GlyphMark,
+} from "./glyph";
+export {
+  resolveMark,
+  SpringboardStyles,
+  type SpringboardRealm,
+  type SpringboardStylesProps,
+} from "./SpringboardStyles";
+export { houseThemeName, isSpringboardTheme, springboardThemeName } from "./themeName";
+export {
+  accent,
+  caption,
+  field,
+  fontFamily,
+  icon,
+  ink,
+  plate,
+  status,
+  trigger,
+  wallpaperColors,
+  wallpaperLayers,
+} from "./tokens";

package/src/themeName.ts

@@ -0,0 +1,69 @@
+/**
+ * WHICH THEME IS THIS PAGE WEARING.
+ *
+ * ★ ONE BUILD, TWO THEME NAMES. `keycloakify build` accepts an array for
+ * `themeName` and writes one `theme/<name>/` tree per entry into the same
+ * JAR, from the same bundle. That is what lets the springboard skin ship
+ * beside the existing house look instead of replacing it:
+ *
+ *   platform-keycloak   the house look — tamagui ramps, light and dark,
+ *                       what every existing realm already points at.
+ *   shc-springboard     this skin — the launcher's wallpaper and plate,
+ *                       one dark surface in both schemes.
+ *
+ * A realm chooses between them with one field (`loginTheme`), which is a
+ * value an operator can change and change back without a redeploy. The
+ * alternative — restyling `platform-keycloak` in place — would have made
+ * the springboard the front door of every estate and every product realm
+ * that already points at it, in the same commit, with no way back short of
+ * a revert and an image rebuild.
+ *
+ * ★ HOW A PAGE KNOWS WHICH ONE IT IS. Keycloak serves a theme's own assets
+ * from `/resources/<resourceVersion>/<themeType>/<themeName>` and hands the
+ * page that prefix as `url.resourcesPath`. The last segment is therefore
+ * the name of the theme Keycloak actually loaded — not a build-time guess,
+ * and not something the two JAR entries could disagree about, because it
+ * is the path the browser fetched this very bundle from.
+ *
+ * ★ WHY NOT A BUILD-TIME FLAG. keycloakify's `environmentVariables` and
+ * `extraThemeProperties` are properties of the BUILD, not of a theme name,
+ * so both trees would receive the same value and neither could tell itself
+ * apart. There is no per-name build hook. The served path is the only
+ * signal that differs, which makes it the right one rather than merely an
+ * available one.
+ */
+
+/** The theme name this skin is published under. */
+export const springboardThemeName = "shc-springboard";
+
+/** The theme name the house look keeps. */
+export const houseThemeName = "platform-keycloak";
+
+/** The last path segment of a resources path, ignoring any trailing slash. */
+function lastSegment(resourcesPath: string): string {
+  const trimmed = resourcesPath.replace(/[?#].*$/, "").replace(/\/+$/, "");
+  const slash = trimmed.lastIndexOf("/");
+  return slash === -1 ? trimmed : trimmed.slice(slash + 1);
+}
+
+/**
+ * True when Keycloak served this page from the springboard theme.
+ *
+ * Accepts the whole context or just the url block — callers in a page have
+ * the first, callers in a story have the second. An absent or unparseable
+ * path answers `false`: the skin is the opt-in surface, so the house look
+ * is what an unknown answer degrades to.
+ */
+export function isSpringboardTheme(
+  kcContext: { url?: { resourcesPath?: string } } | { resourcesPath?: string } | undefined,
+): boolean {
+  if (!kcContext) return false;
+  const resourcesPath =
+    "url" in kcContext && kcContext.url
+      ? kcContext.url.resourcesPath
+      : "resourcesPath" in kcContext
+        ? kcContext.resourcesPath
+        : undefined;
+  if (typeof resourcesPath !== "string" || resourcesPath === "") return false;
+  return lastSegment(resourcesPath) === springboardThemeName;
+}

package/src/tokens.ts

@@ -0,0 +1,260 @@
+/**
+ * THE SPRINGBOARD'S DESIGN VALUES, TRANSCRIBED FOR KEYCLOAK.
+ *
+ * ★ PROVENANCE. Every constant below is copied, by value, from the SHC
+ * console's springboard package:
+ *
+ *   selfhosted-cloud/shc  packages/springboard-ui/src/wallpaper.ts
+ *   selfhosted-cloud/shc  packages/springboard-ui/src/launcherGeometry.ts
+ *   selfhosted-cloud/shc  packages/springboard-ui/src/glyph.ts
+ *
+ * which are themselves a second copy of `dress()` in that repo's
+ * `traefik/plugin/menu_homescreen.go` and `traefik/plugin/menu.go`. So
+ * this file is the THIRD writing of the same numbers, and the duplication
+ * is deliberate at every hop for the same reason the shc header gives:
+ * the launcher is hand-written ES5 interpreted by yaegi inside Traefik and
+ * can never import a TypeScript module. This hop adds one more constraint
+ * on top of that — a Keycloak login page is served by Quarkus from a JAR
+ * baked into an image, in a different repository, at a different release
+ * cadence. A cross-repo import would couple the SHC console's release
+ * train to Keycloak's image build for the sake of eight colours.
+ *
+ * ★ WHAT KEEPS THIS HONEST. Nothing automatic, and that is stated rather
+ * than hidden. shc's `launcherGeometry.spec.ts` reads the Go payload and
+ * fails when a dimension drifts; there is no equivalent tripwire across
+ * repositories. `./tokens.spec.ts` therefore pins every value below as a
+ * literal, so a change here is a deliberate edit to a failing test and
+ * never a silent drift. When the springboard moves, the sequence is:
+ * change shc, change this file, change the spec.
+ *
+ * ★ THE UNITS ARE CSS PIXELS AT K=1 — the launcher's own. `P(n)` in the
+ * payload is `Math.round(n * K)` where K undoes a host page's
+ * down-scaling; a Keycloak login page is a document of its own and is
+ * never injected into a foreign one, so it has no K to apply, exactly as
+ * the console does not.
+ */
+
+/**
+ * The wallpaper: two coloured glows over a navy→indigo diagonal.
+ *
+ * Transcribed from shc `packages/springboard-ui/src/wallpaper.ts`
+ * (`WALLPAPER_LAYERS`). Ready to drop straight into `background-image`.
+ */
+export const wallpaperLayers = [
+  "radial-gradient(ellipse at 18% 110%, rgba(56,189,248,.24), transparent 56%)",
+  "radial-gradient(ellipse at 90% 0, rgba(99,102,241,.26), transparent 50%)",
+  "linear-gradient(170deg, #071018, #152544 46%, #1a1544 76%, #080e18)",
+].join(", ");
+
+/**
+ * The springboard's flat surface colours.
+ *
+ * ★ THERE IS NO LIGHT VARIANT, AND THAT IS THE RULING RATHER THAN AN
+ * OVERSIGHT. shc's wallpaper.ts spends a paragraph on it: the first cut
+ * painted the wallpaper from the theme ramp so it would flip with dark
+ * mode, and in the light theme that resolved to a near-white page with no
+ * wallpaper and no depth. "The springboard is not a themed page with icons
+ * on it; it is a HOME SCREEN, and a home screen has one dark wallpaper in
+ * both modes, exactly as iPadOS and the launcher do."
+ *
+ * A Keycloak login page is the same kind of surface — it is the estate's
+ * front door, not a page inside an app — so the sheet built from these
+ * values overrides BOTH colour schemes and never consults
+ * `prefers-color-scheme`.
+ */
+export const wallpaperColors = {
+  /** Flat base beneath the gradient stack. `WALLPAPER_BASE`. */
+  base: "#0b1220",
+  /** Indigo glow, top-right. `WALLPAPER_GLOW_A`. */
+  glowA: "rgba(99,102,241,0.26)",
+  /** Sky glow, bottom-left. `WALLPAPER_GLOW_B`. */
+  glowB: "rgba(56,189,248,0.24)",
+  /** Text drawn directly on the wallpaper. `ON_WALLPAPER_TEXT`. */
+  text: "#ffffff",
+  /** The halo that keeps that text legible over either glow. `ON_WALLPAPER_SHADOW`. */
+  textShadow: "#000000",
+} as const;
+
+/**
+ * The dock's glass shelf — the springboard's PLATE material, and the one
+ * the login card is built from.
+ *
+ * ★ WHY THE DOCK AND NOT THE SPOTLIGHT PANEL. The console has two
+ * surfaces that float above the wallpaper: the dock shelf, whose colours
+ * are these constants, and the Spotlight dialog, which is fully themed
+ * from the tamagui ramp (shc wallpaper.ts: "Chrome that sits on PANELS
+ * above the wallpaper … stays fully themed"). A login page cannot take
+ * the second one — it has no ThemeProvider ramp of its own that is
+ * guaranteed to resolve dark, and a light Spotlight panel on a dark
+ * wallpaper is the exact defect that ruling was written against. The dock
+ * shelf is the springboard's one plate with fixed, wallpaper-aware
+ * colours, so it is the one a login card can be cut from.
+ */
+export const plate = {
+  /** `DOCK_SHELF_FILL` — the translucent slab. */
+  fill: "rgba(16,20,32,0.48)",
+  /** `DOCK_SHELF_HIGHLIGHT` — the 1px inner highlight along the top edge. */
+  highlight: "rgba(255,255,255,0.27)",
+  /** `launcherDock.radius`. */
+  radius: 26,
+  /** `launcherDock.paddingVertical` / `.paddingHorizontal`. */
+  paddingVertical: 12,
+  paddingHorizontal: 16,
+  /** `launcherDock.gap`. */
+  gap: 18,
+} as const;
+
+/**
+ * One app icon — the launcher's `face()` squircle.
+ *
+ * ★ ONE SIZE, EVERY VIEWPORT. Owner ruling 2026-08-19, quoted in shc's
+ * launcherGeometry.ts: "the scale and sizing on floating menu seems more
+ * correct". The console had a responsive 64/76/84 ladder and deleted it;
+ * a home-screen icon is the same size on a phone and a desktop. The login
+ * page draws exactly one of these, so the ruling reaches it for free.
+ */
+export const icon = {
+  /** `launcherIcon.size` — applied to the squircle AND the art inside it. */
+  size: 60,
+  /** `launcherIcon.radius` — 0.2333 of the box, not tamagui's 0.22. */
+  radius: 14,
+  /** `launcherIcon.shadowOffsetY` / `.shadowBlur` — `0 3px 8px #0006`. */
+  shadowOffsetY: 3,
+  shadowBlur: 8,
+  shadowColor: "#0006",
+} as const;
+
+/**
+ * The caption under an icon.
+ *
+ * ★ THE LINE BOX IS LOAD-BEARING, NOT TIDY. shc's launcherGeometry.ts
+ * carries the reading: the owner saw "hulv" and "openreplav" on his phone
+ * because a caption box with no line-height of its own inherited one from
+ * the host document and clipped the descenders off `y`. An 11px face in a
+ * 15px line box carries the descender of every Latin glyph. A Keycloak
+ * page has no host document to inherit from either, but it renders the
+ * same names at the same size and gets the same box for the same reason.
+ */
+export const caption = {
+  /** `launcherCaption.fontSize`. */
+  fontSize: 11,
+  /** `launcherCaption.lineHeight`. */
+  lineHeight: 15,
+  /** `launcherCaption.marginTop` — squircle to label. */
+  marginTop: 6,
+  /** StackTile.tsx: `textShadowOffset={{ width: 0, height: 1 }}`, radius 3. */
+  shadowOffsetY: 1,
+  shadowBlur: 3,
+  /** StackTile.tsx: `fontWeight="600"`. */
+  fontWeight: 600,
+} as const;
+
+/**
+ * The floating trigger — `trig()` in shc's `traefik/plugin/menu.go`, and
+ * the launcher's LARGER elevation.
+ *
+ * ★ WHAT THIS IS FOR HERE. The login card is plate-sized, not icon-sized,
+ * and `icon.shadow*` (`0 3px 8px`) under a 400px card reads as no shadow
+ * at all. The trigger is the only other elevation the launcher declares,
+ * it is the one the owner has quoted a number for out loud ("a 52px
+ * control becomes a 20px one"), and borrowing its shadow keeps the card
+ * inside the springboard's two-step elevation scale instead of inventing
+ * a third.
+ */
+export const trigger = {
+  size: 52,
+  radius: 16,
+  inset: 16,
+  shadowOffsetY: 6,
+  shadowBlur: 20,
+} as const;
+
+/**
+ * The accent pair, taken from the wallpaper's own two glows.
+ *
+ * ★ THESE ARE DERIVED, NOT TRANSCRIBED, and the derivation is one step:
+ * the opaque form of `wallpaperColors.glowA` / `.glowB`, i.e. the same
+ * `rgb()` triples with the alpha dropped. The springboard itself never
+ * needs an opaque accent — its only saturated fills are per-app generated
+ * hues (see ./glyph.ts) and fixed system-app hues from the tamagui ramp,
+ * and a login page has neither an app to hash nor a ramp to resolve. It
+ * does need one call-to-action colour, and taking it from the wallpaper
+ * is the only choice that cannot drift away from the wallpaper.
+ *
+ *   rgba(99,102,241,.26)  -> #6366f1  (indigo — the primary CTA)
+ *   rgba(56,189,248,.24)  -> #38bdf8  (sky — links and focus)
+ */
+export const accent = {
+  /** Opaque `wallpaperColors.glowA`. Primary buttons. */
+  indigo: "#6366f1",
+  /** One step down for :hover — the same hue, 8% darker. */
+  indigoHover: "#5457dd",
+  /** One step further for :active. */
+  indigoPress: "#484bc4",
+  /** Opaque `wallpaperColors.glowB`. Links and the focus ring. */
+  sky: "#38bdf8",
+} as const;
+
+/**
+ * Ink levels for text ON the plate.
+ *
+ * ★ NOT TRANSCRIBED — the springboard has no equivalent, because it has
+ * no dense text on a plate. Its captions sit straight on the wallpaper
+ * (`wallpaperColors.text` plus a halo) and its panels are themed. A login
+ * form is mostly labels, helper text and error text, which the springboard
+ * simply never renders. These are the wallpaper's white stepped down by
+ * opacity so that every level stays the SAME colour as the caption and can
+ * only differ in weight — which is the property the springboard does have
+ * and the one worth preserving.
+ */
+export const ink = {
+  /** Headings and input values. `wallpaperColors.text`. */
+  primary: "#ffffff",
+  /** Labels. */
+  secondary: "rgba(255,255,255,0.82)",
+  /** Helper text, captions, the muted half of a row. */
+  muted: "rgba(255,255,255,0.62)",
+  /** Placeholders and disabled labels. */
+  faint: "rgba(255,255,255,0.42)",
+} as const;
+
+/**
+ * Field chrome on the plate — hairlines cut from the plate's own
+ * highlight so a field reads as an inset in the slab rather than a
+ * borrowed control.
+ */
+export const field = {
+  /** Input fill: the plate darkened, so a field sits INTO the slab. */
+  background: "rgba(8,11,20,0.55)",
+  /** Resting hairline — `plate.highlight` at half strength. */
+  border: "rgba(255,255,255,0.14)",
+  borderHover: "rgba(255,255,255,0.24)",
+  borderFocus: accent.sky,
+  /** Divider rules (the social-provider separator). */
+  divider: "rgba(255,255,255,0.12)",
+  /** Secondary/ghost button fill. */
+  ghost: "rgba(255,255,255,0.08)",
+  ghostHover: "rgba(255,255,255,0.14)",
+} as const;
+
+/** Feedback hues for the alert rail. Tailwind-family, matched to the glows. */
+export const status = {
+  error: "#f87171",
+  warning: "#fbbf24",
+  success: "#34d399",
+  info: accent.sky,
+} as const;
+
+/**
+ * The default body face.
+ *
+ * ★ NO WEBFONT, DELIBERATELY. The springboard renders in Inter because
+ * tamagui's `@tamagui/font-inter` is already in the console bundle. A
+ * Keycloak login page is the front door of an estate that may have no
+ * egress at all, and a `@font-face` pointing at a CDN is a render-blocking
+ * request to a host an air-gapped install cannot reach. Inter first for
+ * the machines that have it, the platform UI stack behind it for the ones
+ * that do not.
+ */
+export const fontFamily =
+  'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';

package/types/SpringboardStyles.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The springboard skin, delivered as one <style> element inside the React
+ * tree.
+ *
+ * ★ WHY NOT A .css FILE. Two reasons, and only the second is about taste.
+ * The first is that the sheet is PARAMETRIC — the glyph plate's fill is a
+ * hue hashed from the realm name at render time (see ./glyph.ts), so it
+ * cannot exist as a static asset without one stylesheet per realm. The
+ * second is that `apps/keycloak` already delivers `KcHouseStyles` this way
+ * and the repo's apps carry a no-.css-files rule; a skin that composes
+ * with that sheet should arrive by the same door.
+ *
+ * ★ MOUNT IT ONCE, HIGH. It belongs beside `KcHouseStyles` — inside the
+ * theme provider, above the page switch — so it is present on every
+ * pageId including the ones nobody remembers exist. It renders no visible
+ * markup, so where in <body> it lands does not matter; see ./css.ts on why
+ * the layering does not depend on document order either.
+ */
+import type { SpringboardCssOptions } from "./css";
+import type { GlyphMark } from "./glyph";
+/**
+ * The shape this component reads off a Keycloak context.
+ *
+ * ★ STRUCTURAL, NOT `import type { KcContext }`. The realm block is two
+ * strings and it has been those two strings since Keycloak 1.x. Typing
+ * against the real context would pull `keycloakify` into this package's
+ * type graph — and with it a `kc.gen.ts` that only exists inside a built
+ * theme — to describe a pair of optional strings.
+ */
+export interface SpringboardRealm {
+    name?: string;
+    displayName?: string;
+}
+export interface SpringboardStylesProps extends Omit<SpringboardCssOptions, "mark"> {
+    /**
+     * The realm the page belongs to — `kcContext.realm`. Seeds the glyph
+     * plate. Omit it (or pass a realm with no name) and no plate is drawn.
+     */
+    realm?: SpringboardRealm;
+    /**
+     * An explicit mark, when the caller would rather not be hashed. Wins
+     * over `realm`.
+     */
+    mark?: GlyphMark;
+}
+/** Resolve the plate for a realm; `undefined` when there is nothing to seed with. */
+export declare function resolveMark(realm: SpringboardRealm | undefined): GlyphMark | undefined;
+export declare function SpringboardStyles(props: SpringboardStylesProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SpringboardStyles.d.ts.map

package/types/SpringboardStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpringboardStyles.d.ts","sourceRoot":"","sources":["../src/SpringboardStyles.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC;;;;;;;;GAQG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC;IACjF;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,qFAAqF;AACrF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAKtF;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAuB9D"}

package/types/css.d.ts

@@ -0,0 +1,72 @@
+/**
+ * THE SPRINGBOARD SKIN FOR KEYCLOAK'S LOGIN PAGES, AS ONE STYLESHEET.
+ *
+ * ★ A STYLESHEET AND NOT A COMPONENT TREE, ON PURPOSE. Keycloak's login
+ * flow is ~38 FreeMarker pages. Keycloakify renders every one of them from
+ * its own React components, and the ones nobody ever looks at — WebAuthn
+ * errors, recovery-code confirmation, SAML post-forms, X.509 info — are
+ * exactly the ones that must not break, because a user only ever reaches
+ * them on the worst day of their week. Restyling a page means forking it,
+ * a fork means owning its form markup forever, and a form's markup is its
+ * flow: the `action`, the `name` on every input, the hidden
+ * `credentialId`, the `tabIndex` order. Every page this sheet themes is a
+ * page whose flow it provably cannot touch, because it never renders one.
+ *
+ * ★ WHAT IT TARGETS. keycloakify's pages emit PatternFly class names
+ * (`.pf-c-form-control`, `.pf-c-button`, `.card-pf`) and a stable set of
+ * ids (`#kc-form-login`, `#kc-page-title`, `#kc-social-providers`). Those
+ * are the theme's API surface, and they are what this sheet hooks. The
+ * pages are left entirely alone.
+ *
+ * ★ HOW IT COMPOSES WITH THE HOUSE SHEET. `apps/keycloak` already ships
+ * `KcHouseStyles`, which resolves structure — radius, control height, the
+ * 44px press-target floor, the focus ring — from the SAME tamagui knobs
+ * the catalog components use, and paints colour from the theme ramps. This
+ * sheet keeps all of that structure and replaces only the SURFACE. It does
+ * so twice over so it works either way:
+ *
+ *   1. it redefines the `--kc-*` custom properties `KcHouseStyles` invents,
+ *      so every rule that sheet already wrote follows the springboard
+ *      without either file knowing about the other, and
+ *   2. it states the springboard surface directly against the same
+ *      PatternFly selectors, so the skin is complete on its own when the
+ *      house sheet is absent.
+ *
+ * Its selectors carry one extra `html.login-pf` over the house sheet's,
+ * which puts every rule here at a higher specificity than its counterpart
+ * there. That is deliberate: it makes the layering independent of which
+ * <style> element React happens to mount first.
+ *
+ * ★ ONE SURFACE IN BOTH COLOUR SCHEMES. Every var block below is emitted
+ * for `html.login-pf` AND `html.login-pf.t_dark`, and `prefers-color-scheme`
+ * is never consulted. shc's `wallpaper.ts` carries the ruling and the
+ * defect that produced it — see ./tokens.ts `wallpaperColors`.
+ */
+import type { GlyphMark } from "./glyph";
+export interface SpringboardCssOptions {
+    /**
+     * The glyph plate to draw above the page title. Omit it and no plate is
+     * emitted at all — the rule is absent rather than empty, so a caller
+     * without a realm name gets stock spacing instead of a blank square.
+     */
+    mark?: GlyphMark;
+    /** Body face. Defaults to the no-webfont stack in ./tokens.ts. */
+    fontFamily?: string;
+    /**
+     * The keyboard focus ring. Defaults match `FOCUS_VISIBLE_RING` in
+     * `@multiplatform.one/theme`; they are options rather than an import so
+     * this package stays dependency-free and testable without tamagui.
+     */
+    focusRingWidthPx?: number;
+    focusRingOffsetPx?: number;
+    /**
+     * The press-target floor (`MIN_PRESS_TARGET` in `@multiplatform.one/theme`).
+     * DG-A11Y-01; restated here so the skin cannot shrink a control below it.
+     */
+    minPressTargetPx?: number;
+    /** Card width. The springboard has no card, so this is a login-page choice. */
+    cardMaxWidthPx?: number;
+}
+/** Build the springboard stylesheet. Pure — same options, same string. */
+export declare function buildSpringboardCss(options?: SpringboardCssOptions): string;
+//# sourceMappingURL=css.d.ts.map

package/types/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAezC,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA4HD,0EAA0E;AAC1E,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,CA8b/E"}