@multiplatform.one/keycloak-theme 7.83.1 → 7.84.0

package/dist/cjs/SpringboardStyles.cjs

@@ -0,0 +1,61 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var SpringboardStyles_exports = {};
+__export(SpringboardStyles_exports, {
+  SpringboardStyles: () => SpringboardStyles,
+  resolveMark: () => resolveMark
+});
+module.exports = __toCommonJS(SpringboardStyles_exports);
+var import_react = require("react");
+var import_css = require("./css.cjs");
+var import_glyph = require("./glyph.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function resolveMark(realm) {
+  const name = realm?.name?.trim();
+  const displayName = realm?.displayName?.trim();
+  if (!name && !displayName) return void 0;
+  return (0, import_glyph.glyphMark)({
+    name: name ?? "",
+    displayName
+  });
+}
+function SpringboardStyles(props) {
+  const {
+    realm,
+    mark,
+    ...cssOptions
+  } = props;
+  const resolved = mark ?? resolveMark(realm);
+  const css = (0, import_react.useMemo)(() => (0, import_css.buildSpringboardCss)({
+    ...cssOptions,
+    mark: resolved
+  }),
+  // The options are primitives and the mark is a value object; keying on
+  // the resolved fields keeps the memo stable across the re-render that
+  // every keystroke in the password field causes.
+  [resolved?.monogram, resolved?.background, resolved?.foreground, cssOptions.fontFamily, cssOptions.focusRingWidthPx, cssOptions.focusRingOffsetPx, cssOptions.minPressTargetPx, cssOptions.cardMaxWidthPx]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("style", {
+    "data-springboard-styles": "",
+    children: css
+  });
+}

package/dist/cjs/SpringboardStyles.native.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var SpringboardStyles_exports = {};
+__export(SpringboardStyles_exports, {
+  SpringboardStyles: () => SpringboardStyles,
+  resolveMark: () => resolveMark
+});
+module.exports = __toCommonJS(SpringboardStyles_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_css = require("./css.native.js");
+var import_glyph = require("./glyph.native.js");
+function resolveMark(realm) {
+  var _realm_name, _realm_displayName;
+  var name = realm === null || realm === void 0 ? void 0 : (_realm_name = realm.name) === null || _realm_name === void 0 ? void 0 : _realm_name.trim();
+  var displayName = realm === null || realm === void 0 ? void 0 : (_realm_displayName = realm.displayName) === null || _realm_displayName === void 0 ? void 0 : _realm_displayName.trim();
+  if (!name && !displayName) return void 0;
+  return (0, import_glyph.glyphMark)({
+    name: name !== null && name !== void 0 ? name : "",
+    displayName
+  });
+}
+function SpringboardStyles(props) {
+  var {
+    realm,
+    mark,
+    ...cssOptions
+  } = props;
+  var resolved = mark !== null && mark !== void 0 ? mark : resolveMark(realm);
+  var css = (0, import_react.useMemo)(function () {
+    return (0, import_css.buildSpringboardCss)({
+      ...cssOptions,
+      mark: resolved
+    });
+  },
+  // The options are primitives and the mark is a value object; keying on
+  // the resolved fields keeps the memo stable across the re-render that
+  // every keystroke in the password field causes.
+  [resolved === null || resolved === void 0 ? void 0 : resolved.monogram, resolved === null || resolved === void 0 ? void 0 : resolved.background, resolved === null || resolved === void 0 ? void 0 : resolved.foreground, cssOptions.fontFamily, cssOptions.focusRingWidthPx, cssOptions.focusRingOffsetPx, cssOptions.minPressTargetPx, cssOptions.cardMaxWidthPx]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("style", {
+    "data-springboard-styles": "",
+    children: css
+  });
+}
+//# sourceMappingURL=SpringboardStyles.native.js.map

package/dist/cjs/SpringboardStyles.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SpringboardStyles_exports","__export","SpringboardStyles","resolveMark","module","exports","import_jsx_runtime","require","import_react","import_css","import_glyph","realm","_realm_name","_realm_displayName","name","trim","displayName","glyphMark","props","mark","cssOptions","resolved","css","useMemo","buildSpringboardCss","monogram","background"],"sources":["../../src/SpringboardStyles.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,yBAAA;AAAAC,QAAA,CAAAD,yBAAA;EAAAE,iBAAA,EAAAA,CAAA,KAAAA,iBAAA;EAAAC,WAAA,EAAAA,CAAA,KAAAA;AAAA;AAmBAC,MAAA,CAAAC,OAAA,GAAAV,YAAwB,CAAAK,yBAAA;AAExB,IAAAM,kBAAoC,GAAAC,OAAA;AAEpC,IAAAC,YAAA,GAA0BD,OAAA;AA2DjB,IAAAE,UAAA,GAAAF,OAAA;AA7BF,IAAAG,YAAS,GAAAH,OAAY,oBAA4D;AACtF,SAAMJ,WAAOA,CAAAQ,KAAO,EAAM;EAC1B,IAAAC,WAAM,EAAAC,kBAAqB;EAC3B,IAAIC,IAAC,GAAAH,KAAS,aAAaA,KAAO,wBAAAC,WAAA,GAAAD,KAAA,CAAAG,IAAA,cAAAF,WAAA,uBAAAA,WAAA,CAAAG,IAAA;EAClC,IAAAC,WAAO,GAAAL,KAAA,aAAUA,KAAE,KAAM,KAAQ,IAAI,UAAAE,kBAAa,GAAAF,KAAA,CAAAK,WAAA,cAAAH,kBAAA,uBAAAA,kBAAA,CAAAE,IAAA;EACpD,KAAAD,IAAA,KAAAE,WAAA;EAEO,OAAS,IAAAN,YAAA,CAAAO,SAAiD;IAC/DH,IAAM,EAAEA,IAAA,KAAO,IAAM,IAAGA,IAAA,UAAe,IAAAA,IAAA;IAEvCE;EAEA;AAAY;AACiD,SAAAd,kBAAAgB,KAAA;EAAA;IAAAP,KAAA;IAAAQ,IAAA;IAAA,GAAAC;EAAA,IAAAF,KAAA;EAAA,IAAAG,QAAA,GAAAF,IAAA,aAAAA,IAAA,cAAAA,IAAA,GAAAhB,WAAA,CAAAQ,KAAA;EAAA,IAI3DW,GAAA,OAAAd,YAAA,CAAAe,OAAA,cACE;IACA,WAAUd,UAAA,CAAAe,mBAAA;MACV,GAAAJ,UAAU;MACVD,IAAA,EAAAE;IACA;EAAW;EACA;EACA;EAEb;EACF,CAEAA,QAAO,aAAAA,QAAA,mBAAC,IAAAA,QAAM,CAAAI,QAAA,EAChBJ,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAAK,UAAA,E","ignoreList":[]}

package/dist/cjs/css.cjs

@@ -0,0 +1,555 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var css_exports = {};
+__export(css_exports, {
+  buildSpringboardCss: () => buildSpringboardCss
+});
+module.exports = __toCommonJS(css_exports);
+var import_tokens = require("./tokens.cjs");
+function cssString(value) {
+  return JSON.stringify(value);
+}
+function customProperties() {
+  return [
+  // Surfaces.
+  `--kc-page-bg: ${import_tokens.wallpaperColors.base};`, `--kc-card-bg: ${import_tokens.plate.fill};`, `--kc-input-bg: ${import_tokens.field.background};`,
+  // Ink.
+  `--kc-text: ${import_tokens.ink.primary};`, `--kc-muted: ${import_tokens.ink.muted};`, `--kc-placeholder: ${import_tokens.ink.faint};`,
+  // Hairlines.
+  `--kc-border: ${import_tokens.field.border};`, `--kc-border-hover: ${import_tokens.field.borderHover};`, `--kc-border-focus: ${import_tokens.field.borderFocus};`, `--kc-border-strong: ${import_tokens.field.borderHover};`, `--kc-divider: ${import_tokens.field.divider};`,
+  // Interaction.
+  `--kc-hover-bg: ${import_tokens.field.ghost};`, `--kc-press-bg: ${import_tokens.field.ghostHover};`, `--kc-ring: ${import_tokens.accent.sky};`, `--kc-link: ${import_tokens.accent.sky};`,
+  // Call to action.
+  `--kc-cta-bg: ${import_tokens.accent.indigo};`, `--kc-cta-fg: ${import_tokens.ink.primary};`, `--kc-cta-hover: ${import_tokens.accent.indigoHover};`, `--kc-cta-press: ${import_tokens.accent.indigoPress};`,
+  // Disabled — washed chrome, lowest legible ink.
+  `--kc-disabled-bg: ${import_tokens.field.ghost};`, `--kc-disabled-border: ${import_tokens.field.border};`, `--kc-disabled-text: ${import_tokens.ink.faint};`,
+  // Feedback.
+  `--kc-error-text: ${import_tokens.status.error};`, `--kc-error-border: ${import_tokens.status.error};`, `--kc-warning-border: ${import_tokens.status.warning};`, `--kc-success-border: ${import_tokens.status.success};`, `--kc-info-border: ${import_tokens.status.info};`, `--kc-menu-shadow: rgba(0,0,0,0.45);`,
+  // Springboard's own, consumed only by this sheet.
+  `--sb-plate-fill: ${import_tokens.plate.fill};`, `--sb-plate-highlight: ${import_tokens.plate.highlight};`, `--sb-plate-radius: ${import_tokens.plate.radius}px;`, `--sb-icon-size: ${import_tokens.icon.size}px;`, `--sb-icon-radius: ${import_tokens.icon.radius}px;`, `--sb-caption-size: ${import_tokens.caption.fontSize}px;`, `--sb-caption-line: ${import_tokens.caption.lineHeight}px;`].join("\n  ");
+}
+const onWallpaperShadow = `0 ${import_tokens.caption.shadowOffsetY}px ${import_tokens.caption.shadowBlur}px ${import_tokens.wallpaperColors.textShadow}`;
+const plateShadow = `0 ${import_tokens.trigger.shadowOffsetY}px ${import_tokens.trigger.shadowBlur}px rgba(0,0,0,0.45)`;
+const iconShadow = `0 ${import_tokens.icon.shadowOffsetY}px ${import_tokens.icon.shadowBlur}px ${import_tokens.icon.shadowColor}`;
+function markRules(scope, mark) {
+  const monogramSize = Math.round(import_tokens.icon.size * 0.34);
+  const monogramLine = Math.round(import_tokens.icon.size * 0.4);
+  return `
+/* \u2500\u2500 the estate's glyph: the springboard's own squircle \u2500\u2500\u2500\u2500\u2500\u2500 */
+${scope} .login-pf-page #kc-page-title,
+${scope} .login-pf-page #kc-username {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${import_tokens.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;
+}`;
+}
+function buildSpringboardCss(options = {}) {
+  const {
+    mark,
+    fontFamily = import_tokens.fontFamily,
+    focusRingWidthPx = 2,
+    focusRingOffsetPx = 2,
+    minPressTargetPx = 44,
+    cardMaxWidthPx = 420
+  } = options;
+  const scope = "html.login-pf";
+  const vars = customProperties();
+  const cardPadY = import_tokens.plate.paddingVertical + 12;
+  const cardPadX = import_tokens.plate.paddingHorizontal + 8;
+  return `
+/* \u2500\u2500 springboard tokens, both colour schemes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* One dark surface in light and dark alike \u2014 see ./tokens.ts. */
+${scope},
+${scope}.t_dark {
+  ${vars}
+}
+
+/* \u2500\u2500 the wallpaper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+${scope} {
+  background-color: ${import_tokens.wallpaperColors.base};
+  background-image: ${import_tokens.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: ${import_tokens.ink.primary};
+  font-family: ${fontFamily};
+  -webkit-font-smoothing: antialiased;
+}
+${scope} .login-pf-page {
+  background: transparent;
+  padding-bottom: 40px;
+}
+
+/* \u2500\u2500 the realm title, sitting straight on the wallpaper \u2500\u2500\u2500\u2500\u2500\u2500 */
+/* 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: ${import_tokens.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;
+}
+
+/* \u2500\u2500 the card: the dock's glass shelf, grown to hold a form \u2500\u2500 */
+${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 ${import_tokens.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: ${import_tokens.ink.primary};
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1.3;
+  margin: 0 0 ${import_tokens.plate.gap}px;
+}
+${mark ? markRules(scope, mark) : ""}
+
+/* \u2500\u2500 labels and prose \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+${scope} .login-pf-page label,
+${scope} .login-pf-page .pf-c-form__label,
+${scope} .login-pf-page .pf-c-form__label-text {
+  color: ${import_tokens.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: ${import_tokens.ink.muted};
+}
+${scope} .login-pf-page #kc-attempted-username {
+  color: ${import_tokens.ink.primary};
+  font-weight: 600;
+}
+
+/* \u2500\u2500 fields: inset into the slab, not laid on top of it \u2500\u2500\u2500\u2500\u2500\u2500 */
+${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: ${import_tokens.field.background};
+  color: ${import_tokens.ink.primary};
+  border: 1px solid ${import_tokens.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: ${import_tokens.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: ${import_tokens.field.borderFocus};
+  background-color: ${import_tokens.field.background};
+}
+${scope} .login-pf-page .pf-c-form-control::placeholder,
+${scope} .login-pf-page input::placeholder {
+  color: ${import_tokens.ink.faint};
+}
+${scope} .login-pf-page .pf-c-form-control[aria-invalid="true"] {
+  border-color: ${import_tokens.status.error};
+}
+/* \u2605 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 \u2014 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. */
+/* LC-149 FIELD-TRAILING-ACTION: the reveal sits inside the password field
+   as a chromeless trailing eye, not a bordered button beside it. The field
+   keeps the end cap clear, and PatternFly's in-field invalid glyph steps
+   aside for it. */
+${scope} .login-pf-page .pf-c-input-group {
+  background: transparent;
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+${scope} .login-pf-page .pf-c-input-group .pf-c-form-control,
+${scope} .login-pf-page .pf-c-input-group .pf-c-form-control[aria-invalid="true"] {
+  flex: 1 1 auto;
+  padding-inline-end: ${minPressTargetPx}px;
+  background-image: none;
+}
+${scope} .login-pf-page .pf-c-input-group .pf-c-button.pf-m-control,
+${scope} .login-pf-page .pf-c-input-group .pf-c-button.pf-m-control:hover,
+${scope} .login-pf-page .pf-c-input-group .pf-c-button.pf-m-control:active {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: 1;
+  width: ${minPressTargetPx}px;
+  min-width: ${minPressTargetPx}px;
+  min-height: 0;
+  padding: 0;
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: ${import_tokens.ink.secondary};
+}
+${scope} .login-pf-page .pf-c-input-group .pf-c-button.pf-m-control:hover {
+  color: ${import_tokens.ink.primary};
+}
+
+/* Chrome paints autofilled inputs a fixed pale yellow that no colour
+   property overrides \u2014 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 ${import_tokens.field.background} inset;
+  -webkit-text-fill-color: ${import_tokens.ink.primary};
+  caret-color: ${import_tokens.ink.primary};
+}
+
+/* \u2500\u2500 buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+${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: ${import_tokens.accent.indigo};
+  border-color: ${import_tokens.accent.indigo};
+  color: ${import_tokens.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: ${import_tokens.accent.indigoHover};
+  border-color: ${import_tokens.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: ${import_tokens.accent.indigoPress};
+  border-color: ${import_tokens.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: ${import_tokens.field.ghost};
+  border-color: ${import_tokens.field.border};
+  color: ${import_tokens.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: ${import_tokens.field.ghost};
+  border-color: ${import_tokens.field.border};
+  color: ${import_tokens.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: ${import_tokens.field.ghostHover};
+  border-color: ${import_tokens.field.borderHover};
+  color: ${import_tokens.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;
+}
+
+/* \u2500\u2500 the remember-me checkbox \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* \u2605 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: ${import_tokens.field.background};
+  box-shadow: inset 0 0 0 1.5px ${import_tokens.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: ${import_tokens.accent.indigo};
+  box-shadow: inset 0 0 0 1.5px ${import_tokens.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="${import_tokens.ink.primary}" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`)}");
+}
+
+/* \u2500\u2500 links \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+${scope} .login-pf-page a {
+  color: ${import_tokens.accent.sky};
+}
+${scope} .login-pf-page a:hover {
+  color: ${import_tokens.accent.sky};
+}
+
+/* \u2500\u2500 alerts \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+${scope} .login-pf-page .pf-c-alert.pf-m-inline {
+  background: ${import_tokens.field.background};
+  border: 1px solid ${import_tokens.field.border};
+  border-left-width: 3px;
+  border-left-color: ${import_tokens.status.info};
+}
+${scope} .login-pf-page .pf-c-alert.pf-m-inline.pf-m-danger {
+  border-left-color: ${import_tokens.status.error};
+}
+${scope} .login-pf-page .pf-c-alert.pf-m-inline.pf-m-warning {
+  border-left-color: ${import_tokens.status.warning};
+}
+${scope} .login-pf-page .pf-c-alert.pf-m-inline.pf-m-success {
+  border-left-color: ${import_tokens.status.success};
+}
+${scope} .login-pf-page .pf-c-alert__title {
+  color: ${import_tokens.ink.primary};
+}
+${scope} .login-pf-page .pf-c-alert__icon {
+  color: ${import_tokens.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: ${import_tokens.status.error};
+}
+
+/* \u2500\u2500 identity providers: the SSO buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* \u2605 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: ${import_tokens.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 ${import_tokens.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: ${import_tokens.field.ghost};
+  border: 1px solid ${import_tokens.field.border};
+  border-radius: var(--sb-icon-radius);
+  color: ${import_tokens.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: ${import_tokens.field.ghostHover};
+  border-color: ${import_tokens.field.borderHover};
+  color: ${import_tokens.ink.primary};
+}
+${scope} .login-pf-page .kc-social-provider-name,
+${scope} .login-pf-page .kc-social-icon-text {
+  color: ${import_tokens.ink.primary};
+}
+
+/* \u2500\u2500 the OTP credential tiles (login-otp.ftl) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+${scope} .login-pf-page .pf-c-tile {
+  background: ${import_tokens.field.background};
+  border: 1px solid ${import_tokens.field.border};
+  border-radius: var(--sb-icon-radius);
+  color: ${import_tokens.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: ${import_tokens.accent.indigo};
+  background: ${import_tokens.field.ghostHover};
+}
+${scope} .login-pf-page .pf-c-tile__title,
+${scope} .login-pf-page .pf-c-tile__icon {
+  color: ${import_tokens.ink.primary};
+}
+
+/* \u2500\u2500 the registration / back-to-app footer band \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* 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: ${import_tokens.plate.gap}px -${cardPadX}px -${cardPadY}px;
+  padding: 0;
+  color: ${import_tokens.ink.muted};
+}
+${scope} .login-pf-page #kc-info-wrapper {
+  background: rgba(8, 11, 20, 0.42);
+  border-top: 1px solid ${import_tokens.field.divider};
+  border-radius: 0 0 ${import_tokens.plate.radius - 1}px ${import_tokens.plate.radius - 1}px;
+  padding: 14px ${cardPadX}px;
+  color: ${import_tokens.ink.muted};
+  text-align: center;
+}
+${scope} .login-pf-page #kc-info-wrapper a {
+  color: ${import_tokens.accent.sky};
+}
+
+/* \u2500\u2500 the locale menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+${scope} .login-pf-page #kc-current-locale-link {
+  color: ${import_tokens.ink.muted};
+}
+${scope} .login-pf-page #kc-current-locale-link:hover {
+  background: ${import_tokens.field.ghost};
+  color: ${import_tokens.ink.primary};
+}
+${scope} .login-pf-page .pf-c-dropdown__menu {
+  background: ${import_tokens.wallpaperColors.base};
+  border: 1px solid ${import_tokens.plate.highlight};
+  box-shadow: ${plateShadow};
+}
+${scope} .login-pf-page .pf-c-dropdown__menu-item {
+  color: ${import_tokens.ink.primary};
+}
+${scope} .login-pf-page .pf-c-dropdown__menu-item:hover {
+  background: ${import_tokens.field.ghost};
+  color: ${import_tokens.ink.primary};
+}
+
+/* \u2500\u2500 focus ring (DG-A11Y-01: non-removable) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* !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 ${import_tokens.accent.sky} !important;
+  outline-offset: ${focusRingOffsetPx}px !important;
+  box-shadow: none !important;
+}
+/* LC-133 FOCUS-IS-BORDER (FZ-7717): a text field is the exception. It
+   focuses with its own border in the accent, at the width it already has,
+   so it changes colour and never size. */
+${scope} .login-pf-page .pf-c-form-control:focus,
+${scope} .login-pf-page .pf-c-form-control:focus-visible {
+  border-color: ${import_tokens.field.borderFocus};
+  outline: none !important;
+}
+
+/* \u2500\u2500 small screens keep the slab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@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 ${import_tokens.plate.highlight},
+      ${plateShadow};
+  }
+  ${scope} .login-pf-page #kc-header-wrapper {
+    padding: 28px 16px 14px;
+    font-size: 19px;
+  }
+}
+`;
+}