@multiplatform.one/keycloak-theme 7.2.0

package/src/css.ts

@@ -0,0 +1,655 @@
+/**
+ * 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";
+import {
+  accent,
+  caption,
+  field,
+  fontFamily as defaultFontFamily,
+  icon,
+  ink,
+  plate,
+  status,
+  trigger,
+  wallpaperColors,
+  wallpaperLayers,
+} from "./tokens";
+
+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;
+}
+
+/** CSS string literal for `content:` — escapes the quote and the backslash. */
+function cssString(value: string): string {
+  return JSON.stringify(value);
+}
+
+/**
+ * The `--kc-*` contract `KcHouseStyles` publishes, restated in springboard
+ * values. Redefining these is what carries the skin into every rule that
+ * sheet already wrote (inputs, buttons, checkbox, locale menu, alerts,
+ * info band) without this file having to repeat them.
+ */
+function customProperties(): string {
+  return [
+    // Surfaces.
+    `--kc-page-bg: ${wallpaperColors.base};`,
+    `--kc-card-bg: ${plate.fill};`,
+    `--kc-input-bg: ${field.background};`,
+    // Ink.
+    `--kc-text: ${ink.primary};`,
+    `--kc-muted: ${ink.muted};`,
+    `--kc-placeholder: ${ink.faint};`,
+    // Hairlines.
+    `--kc-border: ${field.border};`,
+    `--kc-border-hover: ${field.borderHover};`,
+    `--kc-border-focus: ${field.borderFocus};`,
+    `--kc-border-strong: ${field.borderHover};`,
+    `--kc-divider: ${field.divider};`,
+    // Interaction.
+    `--kc-hover-bg: ${field.ghost};`,
+    `--kc-press-bg: ${field.ghostHover};`,
+    `--kc-ring: ${accent.sky};`,
+    `--kc-link: ${accent.sky};`,
+    // Call to action.
+    `--kc-cta-bg: ${accent.indigo};`,
+    `--kc-cta-fg: ${ink.primary};`,
+    `--kc-cta-hover: ${accent.indigoHover};`,
+    `--kc-cta-press: ${accent.indigoPress};`,
+    // Disabled — washed chrome, lowest legible ink.
+    `--kc-disabled-bg: ${field.ghost};`,
+    `--kc-disabled-border: ${field.border};`,
+    `--kc-disabled-text: ${ink.faint};`,
+    // Feedback.
+    `--kc-error-text: ${status.error};`,
+    `--kc-error-border: ${status.error};`,
+    `--kc-warning-border: ${status.warning};`,
+    `--kc-success-border: ${status.success};`,
+    `--kc-info-border: ${status.info};`,
+    `--kc-menu-shadow: rgba(0,0,0,0.45);`,
+    // Springboard's own, consumed only by this sheet.
+    `--sb-plate-fill: ${plate.fill};`,
+    `--sb-plate-highlight: ${plate.highlight};`,
+    `--sb-plate-radius: ${plate.radius}px;`,
+    `--sb-icon-size: ${icon.size}px;`,
+    `--sb-icon-radius: ${icon.radius}px;`,
+    `--sb-caption-size: ${caption.fontSize}px;`,
+    `--sb-caption-line: ${caption.lineHeight}px;`,
+  ].join("\n  ");
+}
+
+/** The white-on-wallpaper halo every label outside the plate wears. */
+const onWallpaperShadow = `0 ${caption.shadowOffsetY}px ${caption.shadowBlur}px ${wallpaperColors.textShadow}`;
+
+/** The plate's elevation — `trigger`'s, not `icon`'s. See ./tokens.ts. */
+const plateShadow = `0 ${trigger.shadowOffsetY}px ${trigger.shadowBlur}px rgba(0,0,0,0.45)`;
+
+/** The squircle's own elevation — `icon`'s. */
+const iconShadow = `0 ${icon.shadowOffsetY}px ${icon.shadowBlur}px ${icon.shadowColor}`;
+
+/**
+ * The glyph plate above the page title, drawn as a `::before` on the title
+ * itself.
+ *
+ * ★ A PSEUDO-ELEMENT RATHER THAN MARKUP, and this is the decision that
+ * keeps the whole skin out of the pages. A React mark would have to be
+ * placed inside the card above the title, which means owning `Template` —
+ * and `Template` is where the locale switcher, the alert rail, the
+ * `socialProvidersNode` slot and the try-another-way form live. Forking it
+ * to insert one square is the same trade as forking a page: a permanent
+ * maintenance debt against upstream, taken on for decoration. A generated
+ * `content:` costs one rule, is implicitly `aria-hidden` (pseudo-elements
+ * are not in the accessibility tree), and the realm's name is already read
+ * out loud by the `<h1>` it hangs from.
+ *
+ * ★ IT ALSO COVERS `#kc-username`. keycloakify's Template swaps the `<h1>`
+ * for a `#kc-username` block whenever `auth.showUsername` is set and the
+ * flow is not a credential reset — the second step of a split
+ * username/password flow, and a page users very much do see. Both get the
+ * plate so the mark does not vanish between step one and step two.
+ */
+function markRules(scope: string, mark: GlyphMark): string {
+  const monogramSize = Math.round(icon.size * 0.34);
+  const monogramLine = Math.round(icon.size * 0.4);
+  return `
+/* ── the estate's glyph: the springboard's own squircle ────── */
+${scope} .login-pf-page #kc-page-title,
+${scope} .login-pf-page #kc-username {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${caption.marginTop}px;
+}
+${scope} .login-pf-page #kc-page-title::before,
+${scope} .login-pf-page #kc-username::before {
+  content: ${cssString(mark.monogram)};
+  box-sizing: border-box;
+  width: var(--sb-icon-size);
+  height: var(--sb-icon-size);
+  border-radius: var(--sb-icon-radius);
+  background: ${mark.background};
+  color: ${mark.foreground};
+  box-shadow: ${iconShadow};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${monogramSize}px;
+  line-height: ${monogramLine}px;
+  font-weight: 800;
+  letter-spacing: 0.5px;
+  user-select: none;
+}`;
+}
+
+/** Build the springboard stylesheet. Pure — same options, same string. */
+export function buildSpringboardCss(options: SpringboardCssOptions = {}): string {
+  const {
+    mark,
+    fontFamily = defaultFontFamily,
+    focusRingWidthPx = 2,
+    focusRingOffsetPx = 2,
+    minPressTargetPx = 44,
+    cardMaxWidthPx = 420,
+  } = options;
+
+  const scope = "html.login-pf";
+  const vars = customProperties();
+  // The card's own padding, named so the #kc-info band below can bleed back
+  // out to the card edge by exactly the amount the card came in by. The
+  // stock sheet hardcodes 40/30 there and gets a band that stops short of
+  // the corners under any other padding.
+  const cardPadY = plate.paddingVertical + 12;
+  const cardPadX = plate.paddingHorizontal + 8;
+
+  return `
+/* ── springboard tokens, both colour schemes ───────────────── */
+/* One dark surface in light and dark alike — see ./tokens.ts. */
+${scope},
+${scope}.t_dark {
+  ${vars}
+}
+
+/* ── the wallpaper ─────────────────────────────────────────── */
+${scope} {
+  background-color: ${wallpaperColors.base};
+  background-image: ${wallpaperLayers};
+  /* Fixed so the glows stay anchored to the viewport instead of tiling
+     down a page that grew a scrollbar (a long consent screen, a locale
+     list). The springboard's wallpaper is a layer behind everything, not
+     a background that scrolls with content. */
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: cover;
+  min-height: 100%;
+}
+${scope} body {
+  background: transparent none;
+  color: ${ink.primary};
+  font-family: ${fontFamily};
+  -webkit-font-smoothing: antialiased;
+}
+${scope} .login-pf-page {
+  background: transparent;
+  padding-bottom: 40px;
+}
+
+/* ── the realm title, sitting straight on the wallpaper ────── */
+/* Caption anatomy from the launcher: white with a halo, because this
+   text has no plate under it and may land on either glow. */
+${scope} .login-pf-page #kc-header-wrapper {
+  color: ${wallpaperColors.text};
+  text-shadow: ${onWallpaperShadow};
+  font-weight: 700;
+  font-size: 22px;
+  line-height: 1.3;
+  letter-spacing: normal;
+  text-transform: none;
+  padding: 44px 16px 18px;
+}
+
+/* ── the card: the dock's glass shelf, grown to hold a form ── */
+${scope} .login-pf-page .card-pf {
+  max-width: ${cardMaxWidthPx}px;
+  margin: 0 auto;
+  background: var(--sb-plate-fill);
+  border: 1px solid var(--sb-plate-highlight);
+  border-radius: var(--sb-plate-radius);
+  /* The shelf's top-edge inner highlight ('inset 0 1px 0 #fff4' in the
+     launcher payload) plus the trigger's elevation under the slab. */
+  box-shadow:
+    inset 0 1px 0 ${plate.highlight},
+    ${plateShadow};
+  /* "blur-ish" is the launcher's own word for the dock material. Where
+     backdrop-filter is unsupported the fill alone still reads as a slab,
+     so this degrades rather than breaks. */
+  backdrop-filter: blur(22px) saturate(140%);
+  -webkit-backdrop-filter: blur(22px) saturate(140%);
+  padding: ${cardPadY}px ${cardPadX}px;
+  overflow: hidden;
+}
+${scope} .login-pf-page .login-pf-header h1,
+${scope} .login-pf-page #kc-page-title {
+  color: ${ink.primary};
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1.3;
+  margin: 0 0 ${plate.gap}px;
+}
+${mark ? markRules(scope, mark) : ""}
+
+/* ── labels and prose ──────────────────────────────────────── */
+${scope} .login-pf-page label,
+${scope} .login-pf-page .pf-c-form__label,
+${scope} .login-pf-page .pf-c-form__label-text {
+  color: ${ink.secondary};
+  font-weight: 500;
+  font-size: 14px;
+}
+${scope} .login-pf-page .instruction,
+${scope} .login-pf-page .subtitle,
+${scope} .login-pf-page .pf-c-form__helper-text,
+${scope} .login-pf-page #kc-info,
+${scope} .login-pf-page .login-pf-signup {
+  color: ${ink.muted};
+}
+${scope} .login-pf-page #kc-attempted-username {
+  color: ${ink.primary};
+  font-weight: 600;
+}
+
+/* ── fields: inset into the slab, not laid on top of it ────── */
+${scope} .login-pf-page .pf-c-form-control,
+${scope} .login-pf-page input[type="text"],
+${scope} .login-pf-page input[type="password"],
+${scope} .login-pf-page input[type="email"],
+${scope} .login-pf-page input[type="tel"],
+${scope} .login-pf-page input[type="number"],
+${scope} .login-pf-page select,
+${scope} .login-pf-page textarea {
+  min-height: ${minPressTargetPx}px;
+  background-color: ${field.background};
+  color: ${ink.primary};
+  border: 1px solid ${field.border};
+  box-shadow: none;
+}
+${scope} .login-pf-page .pf-c-form-control:hover,
+${scope} .login-pf-page select:hover,
+${scope} .login-pf-page textarea:hover {
+  border-color: ${field.borderHover};
+}
+${scope} .login-pf-page .pf-c-form-control:focus,
+${scope} .login-pf-page select:focus,
+${scope} .login-pf-page textarea:focus {
+  border-color: ${field.borderFocus};
+  background-color: ${field.background};
+}
+${scope} .login-pf-page .pf-c-form-control::placeholder,
+${scope} .login-pf-page input::placeholder {
+  color: ${ink.faint};
+}
+${scope} .login-pf-page .pf-c-form-control[aria-invalid="true"] {
+  border-color: ${status.error};
+}
+/* ★ THE INPUT GROUP IS OPAQUE WHITE IN PATTERNFLY, and that one fact
+   defeats the whole field treatment above. '.pf-c-input-group' wraps the
+   password field and its visibility toggle; both of those are painted in
+   TRANSLUCENT springboard colours, so over a white parent the field
+   composites to mid-grey and the toggle to near-white — which is exactly
+   how it rendered before this rule existed. Clearing the parent is what
+   makes the two translucent children land on the slab instead. */
+${scope} .login-pf-page .pf-c-input-group {
+  background: transparent;
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+}
+${scope} .login-pf-page .pf-c-input-group .pf-c-form-control {
+  flex: 1 1 auto;
+}
+${scope} .login-pf-page .pf-c-input-group .pf-c-button.pf-m-control {
+  min-width: ${minPressTargetPx}px;
+}
+
+/* Chrome paints autofilled inputs a fixed pale yellow that no colour
+   property overrides — the inset shadow is the documented way to repaint
+   the field, and without it a remembered username lands as a white bar in
+   the middle of the slab. */
+${scope} .login-pf-page input:-webkit-autofill,
+${scope} .login-pf-page input:-webkit-autofill:hover,
+${scope} .login-pf-page input:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px ${field.background} inset;
+  -webkit-text-fill-color: ${ink.primary};
+  caret-color: ${ink.primary};
+}
+
+/* ── buttons ───────────────────────────────────────────────── */
+${scope} .login-pf-page .pf-c-button {
+  min-height: ${minPressTargetPx}px;
+  font-weight: 600;
+}
+${scope} .login-pf-page .pf-c-button.pf-m-primary,
+${scope} .login-pf-page input.pf-m-primary[type="submit"],
+${scope} .login-pf-page input.pf-m-primary[type="button"] {
+  background-color: ${accent.indigo};
+  border-color: ${accent.indigo};
+  color: ${ink.primary};
+  box-shadow: ${iconShadow};
+}
+${scope} .login-pf-page .pf-c-button.pf-m-primary:hover,
+${scope} .login-pf-page input.pf-m-primary[type="submit"]:hover {
+  background-color: ${accent.indigoHover};
+  border-color: ${accent.indigoHover};
+}
+${scope} .login-pf-page .pf-c-button.pf-m-primary:active,
+${scope} .login-pf-page input.pf-m-primary[type="submit"]:active {
+  background-color: ${accent.indigoPress};
+  border-color: ${accent.indigoPress};
+}
+${scope} .login-pf-page .pf-c-button.pf-m-primary:disabled,
+${scope} .login-pf-page input.pf-m-primary[type="submit"]:disabled {
+  background-color: ${field.ghost};
+  border-color: ${field.border};
+  color: ${ink.faint};
+  box-shadow: none;
+}
+${scope} .login-pf-page .pf-c-button.pf-m-control,
+${scope} .login-pf-page .pf-c-button.pf-m-secondary,
+${scope} .login-pf-page .pf-c-button.btn-default:not(.pf-m-primary) {
+  background-color: ${field.ghost};
+  border-color: ${field.border};
+  color: ${ink.primary};
+}
+${scope} .login-pf-page .pf-c-button.pf-m-control:hover,
+${scope} .login-pf-page .pf-c-button.pf-m-secondary:hover,
+${scope} .login-pf-page .pf-c-button.btn-default:not(.pf-m-primary):hover {
+  background-color: ${field.ghostHover};
+  border-color: ${field.borderHover};
+  color: ${ink.primary};
+}
+/* PatternFly draws control-button borders on an ::after overlay and
+   accents its bottom edge on interaction; on the slab that reads as a
+   stray underline beneath the password-visibility toggle. */
+${scope} .login-pf-page .pf-c-button::after,
+${scope} .login-pf-page .pf-c-button:hover::after,
+${scope} .login-pf-page .pf-c-button:focus::after,
+${scope} .login-pf-page .pf-c-button:active::after {
+  content: none;
+}
+
+/* ── the remember-me checkbox ──────────────────────────────── */
+/* ★ THE RESET IS PART OF THE SKIN, not borrowed from the house sheet.
+   A native checkbox is a 13px white box drawn by the platform: no colour
+   property reaches it, so on the slab it reads as a bright chip with no
+   relationship to anything around it. 'appearance: none' is what makes it
+   paintable at all. The visual square stays 22px inside a transparent
+   border that pads the hit box out to the press-target floor, so the
+   control is small and the target is not (DG-A11Y-01).
+
+   The house sheet bakes its tick glyph as a data-URI at build time from
+   the ramp's CTA foreground, so the springboard's tick is restated here
+   rather than inherited through a custom property. */
+${scope} .login-pf-page input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  position: static;
+  box-sizing: content-box;
+  width: 22px;
+  height: 22px;
+  border: ${Math.round((minPressTargetPx - 22) / 2)}px solid transparent;
+  border-radius: ${Math.round((minPressTargetPx - 22) / 2) + 8}px;
+  background-clip: padding-box;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 15px 15px;
+  margin: 0 4px 0 0;
+  flex: 0 0 auto;
+  cursor: pointer;
+  background-color: ${field.background};
+  box-shadow: inset 0 0 0 1.5px ${field.borderHover};
+}
+${scope} .login-pf-page .checkbox label,
+${scope} .login-pf-page .pf-c-check {
+  display: inline-flex;
+  align-items: center;
+  min-height: ${minPressTargetPx}px;
+  padding-left: 0;
+  margin: 0;
+  cursor: pointer;
+}
+${scope} .login-pf-page input[type="checkbox"]:checked,
+${scope}.t_dark .login-pf-page input[type="checkbox"]:checked {
+  background-color: ${accent.indigo};
+  box-shadow: inset 0 0 0 1.5px ${accent.indigo};
+  background-image: url("data:image/svg+xml,${encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${ink.primary}" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`,
+  )}");
+}
+
+/* ── links ─────────────────────────────────────────────────── */
+${scope} .login-pf-page a {
+  color: ${accent.sky};
+}
+${scope} .login-pf-page a:hover {
+  color: ${accent.sky};
+}
+
+/* ── alerts ────────────────────────────────────────────────── */
+${scope} .login-pf-page .pf-c-alert.pf-m-inline {
+  background: ${field.background};
+  border: 1px solid ${field.border};
+  border-left-width: 3px;
+  border-left-color: ${status.info};
+}
+${scope} .login-pf-page .pf-c-alert.pf-m-inline.pf-m-danger {
+  border-left-color: ${status.error};
+}
+${scope} .login-pf-page .pf-c-alert.pf-m-inline.pf-m-warning {
+  border-left-color: ${status.warning};
+}
+${scope} .login-pf-page .pf-c-alert.pf-m-inline.pf-m-success {
+  border-left-color: ${status.success};
+}
+${scope} .login-pf-page .pf-c-alert__title {
+  color: ${ink.primary};
+}
+${scope} .login-pf-page .pf-c-alert__icon {
+  color: ${ink.muted};
+}
+${scope} .login-pf-page span#input-error,
+${scope} .login-pf-page [id^="input-error"],
+${scope} .login-pf-page .pf-m-error,
+${scope} .login-pf-page .required {
+  color: ${status.error};
+}
+
+/* ── identity providers: the SSO buttons ───────────────────── */
+/* ★ CHROME ONLY. Every provider row is an <a href={p.loginUrl}> that
+   keycloakify renders from social.providers; nothing here changes what
+   it points at, what it is called, or whether it appears. */
+${scope} .login-pf-page #kc-social-providers h2 {
+  color: ${ink.muted};
+  font-size: 13px;
+  font-weight: 500;
+}
+${scope} .login-pf-page hr,
+${scope} .login-pf-page #kc-social-providers hr {
+  border-top: 1px solid ${field.divider};
+  opacity: 1;
+}
+${scope} .login-pf-page .kc-social-item,
+${scope} .login-pf-page .kc-social-links a,
+${scope} .login-pf-page #kc-social-providers li a {
+  min-height: ${minPressTargetPx}px;
+  background: ${field.ghost};
+  border: 1px solid ${field.border};
+  border-radius: var(--sb-icon-radius);
+  color: ${ink.primary};
+  text-decoration: none;
+}
+${scope} .login-pf-page .kc-social-item:hover,
+${scope} .login-pf-page .kc-social-links a:hover,
+${scope} .login-pf-page #kc-social-providers li a:hover {
+  background: ${field.ghostHover};
+  border-color: ${field.borderHover};
+  color: ${ink.primary};
+}
+${scope} .login-pf-page .kc-social-provider-name,
+${scope} .login-pf-page .kc-social-icon-text {
+  color: ${ink.primary};
+}
+
+/* ── the OTP credential tiles (login-otp.ftl) ──────────────── */
+${scope} .login-pf-page .pf-c-tile {
+  background: ${field.background};
+  border: 1px solid ${field.border};
+  border-radius: var(--sb-icon-radius);
+  color: ${ink.primary};
+}
+${scope} .login-pf-page .pf-c-tile__input:checked + .pf-c-tile,
+${scope} .login-pf-page .pf-c-tile__input:checked + label {
+  border-color: ${accent.indigo};
+  background: ${field.ghostHover};
+}
+${scope} .login-pf-page .pf-c-tile__title,
+${scope} .login-pf-page .pf-c-tile__icon {
+  color: ${ink.primary};
+}
+
+/* ── the registration / back-to-app footer band ────────────── */
+/* The stock sheet bleeds #kc-info to the card edge as a #f0f0f0 band.
+   On the slab it becomes the dock's own darker step. */
+${scope} .login-pf-page #kc-info {
+  margin: ${plate.gap}px -${cardPadX}px -${cardPadY}px;
+  padding: 0;
+  color: ${ink.muted};
+}
+${scope} .login-pf-page #kc-info-wrapper {
+  background: rgba(8, 11, 20, 0.42);
+  border-top: 1px solid ${field.divider};
+  border-radius: 0 0 ${plate.radius - 1}px ${plate.radius - 1}px;
+  padding: 14px ${cardPadX}px;
+  color: ${ink.muted};
+  text-align: center;
+}
+${scope} .login-pf-page #kc-info-wrapper a {
+  color: ${accent.sky};
+}
+
+/* ── the locale menu ───────────────────────────────────────── */
+${scope} .login-pf-page #kc-current-locale-link {
+  color: ${ink.muted};
+}
+${scope} .login-pf-page #kc-current-locale-link:hover {
+  background: ${field.ghost};
+  color: ${ink.primary};
+}
+${scope} .login-pf-page .pf-c-dropdown__menu {
+  background: ${wallpaperColors.base};
+  border: 1px solid ${plate.highlight};
+  box-shadow: ${plateShadow};
+}
+${scope} .login-pf-page .pf-c-dropdown__menu-item {
+  color: ${ink.primary};
+}
+${scope} .login-pf-page .pf-c-dropdown__menu-item:hover {
+  background: ${field.ghost};
+  color: ${ink.primary};
+}
+
+/* ── focus ring (DG-A11Y-01: non-removable) ────────────────── */
+/* !important outranks both PatternFly's focus styles and the house
+   ThemeProvider's global outline reset. The keyboard ring is the one
+   affordance a skin must never take away. */
+${scope} a:focus-visible,
+${scope} button:focus-visible,
+${scope} input:focus-visible,
+${scope} select:focus-visible,
+${scope} textarea:focus-visible,
+${scope} [tabindex]:focus-visible {
+  outline: ${focusRingWidthPx}px solid ${accent.sky} !important;
+  outline-offset: ${focusRingOffsetPx}px !important;
+  box-shadow: none !important;
+}
+
+/* ── small screens keep the slab ───────────────────────────── */
+@media (max-width: 767px) {
+  ${scope} .login-pf-page .card-pf {
+    margin: 0 12px;
+    background: var(--sb-plate-fill);
+    border: 1px solid var(--sb-plate-highlight);
+    border-radius: var(--sb-plate-radius);
+    box-shadow:
+      inset 0 1px 0 ${plate.highlight},
+      ${plateShadow};
+  }
+  ${scope} .login-pf-page #kc-header-wrapper {
+    padding: 28px 16px 14px;
+    font-size: 19px;
+  }
+}
+`;
+}