Keycloak theme for the sign-in and sign-out pages (PD-23, PD-26)

Realm petrolyst's login theme, on Keycloak's unstyled base: a slate panel with the logo and its line
beside the form on a soft card; on a phone a slate band above it; light and dark. Satoshi stays out
of Git by its licence (build.sh). The README adds the install steps. Not deployed.

Bands: none (identity theme).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

keycloak/themes/petrolyst/login/resources/css/brand/petrolyst_tokens.css

@@ -0,0 +1,190 @@
+:root {
+  --brand-navy: #0B1D33;
+  --brand-teal: #009688;
+  --brand-cyan: #00B6E6;
+  --brand-sand: #F2EBDD;
+  --brand-graphite: #3F4752;
+  /* PD-26: the Etihad-inspired restyle. Pearl carries tags and avatars; gold is an editorial
+     accent only, never on controls and never carrying state. */
+  --brand-gold: #AA8951;
+  --brand-pearl: #EBE2D2;
+
+  /* The chrome: the dark slate shell (header, side menus, hero bands). The same in light and
+     dark mode, like the reference design; only the content below it follows the device. */
+  --surface-chrome: #2A3945;
+  --surface-chrome-deep: #1F2A33;
+  --surface-chrome-active: #334654;
+  --border-chrome: #4D5562;
+  --text-on-chrome: #F8FAFC;
+  --text-on-chrome-muted: #B7C1C9;
+
+  --surface-page: #FFFFFF;
+  --surface-subtle: #F9FAFB;
+  --surface-card: #FFFFFF;
+  --text-primary: #0B1D33;
+  --text-secondary: #475569;
+  --text-muted: #64748B;
+  --border-default: #E3E7EA;
+  --border-strong: #C9D0D6;
+
+  /* Actions wear the logo's green (PD-26, revised on the owner's word: the Y's colour is the
+     brand's one strong colour, so the controls echo it). Gold stays an editorial accent only. */
+  --action-primary: #00695C;
+  --action-primary-foreground: #FFFFFF;
+  --action-primary-hover: #005B50;
+  --action-primary-active: #004D44;
+  --action-link: #00695C;
+
+  --focus-ring-inner: #FFFFFF;
+  --focus-ring-outer: #0B1D33;
+  --focus-ring-inner-width: 2px;
+  --focus-ring-outer-width: 2px;
+  --focus-ring-offset: 2px;
+
+  --status-normal: #0F7B6C;
+  --status-normal-foreground: #FFFFFF;
+  --status-live: #007C91;
+  --status-live-foreground: #FFFFFF;
+  --status-warning: #B45309;
+  --status-warning-foreground: #FFFFFF;
+  --status-critical: #B3261E;
+  --status-critical-foreground: #FFFFFF;
+  --status-offline: #52606D;
+  --status-offline-foreground: #FFFFFF;
+  --status-stale: #7C8796;
+  --status-stale-foreground: #0B1D33;
+  --status-info: #2563EB;
+  --status-info-foreground: #FFFFFF;
+
+  --font-display: "Satoshi", "Inter", system-ui, sans-serif;
+  --font-ui: "Inter", system-ui, sans-serif;
+
+  --text-display-xl: 64px;
+  --text-h1: 48px;
+  --text-h2: 36px;
+  --text-h3: 28px;
+  --text-body-lg: 20px;
+  --text-body: 16px;
+  --text-ui: 14px;
+  --text-caption: 12px;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-24: 96px;
+
+  /* PD-26 shapes: large soft cards, small chips, pill buttons. */
+  --radius-sm: 8px;
+  --radius-md: 16px;
+  --radius-lg: 20px;
+  --radius-pill: 999px;
+
+  --shadow-card: 0 2px 4px rgb(11 29 51 / 0.04), 0 12px 28px -8px rgb(11 29 51 / 0.12);
+  --shadow-pop: 0 6px 16px rgb(11 29 51 / 0.12), 0 20px 48px -12px rgb(11 29 51 / 0.28);
+}
+
+[data-theme="dark"] {
+  --surface-page: #1F2A33;
+  --surface-subtle: #243038;
+  --surface-card: #2A3945;
+  --text-primary: #F8FAFC;
+  --text-secondary: #C7CFD6;
+  --text-muted: #9AA6AF;
+  --border-default: #3C4854;
+  --border-strong: #76828E;
+
+  --action-primary: #35C5B6;
+  --action-primary-foreground: #0B1D33;
+  --action-primary-hover: #4CD3C4;
+  --action-primary-active: #2DB4A6;
+  --action-link: #35C5B6;
+
+  --focus-ring-inner: #1F2A33;
+  --focus-ring-outer: #F8FAFC;
+
+  --status-normal: #35C5B6;
+  --status-normal-foreground: #0B1D33;
+  --status-live: #48CFF2;
+  --status-live-foreground: #0B1D33;
+  --status-warning: #F59E0B;
+  --status-warning-foreground: #0B1D33;
+  --status-critical: #FF6B6B;
+  --status-critical-foreground: #0B1D33;
+  --status-offline: #94A3B8;
+  --status-offline-foreground: #0B1D33;
+  --status-stale: #CBD5E1;
+  --status-stale-foreground: #0B1D33;
+  --status-info: #60A5FA;
+  --status-info-foreground: #0B1D33;
+
+  --shadow-card: 0 2px 4px rgb(0 0 0 / 0.2), 0 12px 28px -8px rgb(0 0 0 / 0.4);
+  --shadow-pop: 0 6px 16px rgb(0 0 0 / 0.35), 0 20px 48px -12px rgb(0 0 0 / 0.55);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --surface-page: #1F2A33;
+    --surface-subtle: #243038;
+    --surface-card: #2A3945;
+    --text-primary: #F8FAFC;
+    --text-secondary: #C7CFD6;
+    --text-muted: #9AA6AF;
+    --border-default: #3C4854;
+    --border-strong: #76828E;
+
+    --action-primary: #35C5B6;
+    --action-primary-foreground: #0B1D33;
+    --action-primary-hover: #4CD3C4;
+    --action-primary-active: #2DB4A6;
+    --action-link: #35C5B6;
+
+    --focus-ring-inner: #1F2A33;
+    --focus-ring-outer: #F8FAFC;
+
+    --status-normal: #35C5B6;
+    --status-normal-foreground: #0B1D33;
+    --status-live: #48CFF2;
+    --status-live-foreground: #0B1D33;
+    --status-warning: #F59E0B;
+    --status-warning-foreground: #0B1D33;
+    --status-critical: #FF6B6B;
+    --status-critical-foreground: #0B1D33;
+    --status-offline: #94A3B8;
+    --status-offline-foreground: #0B1D33;
+    --status-stale: #CBD5E1;
+    --status-stale-foreground: #0B1D33;
+    --status-info: #60A5FA;
+    --status-info-foreground: #0B1D33;
+
+    --shadow-card: 0 2px 4px rgb(0 0 0 / 0.2), 0 12px 28px -8px rgb(0 0 0 / 0.4);
+    --shadow-pop: 0 6px 16px rgb(0 0 0 / 0.35), 0 20px 48px -12px rgb(0 0 0 / 0.55);
+  }
+}
+
+/* Recommended primary action implementation */
+.petrolyst-action-primary {
+  background: var(--action-primary);
+  color: var(--action-primary-foreground);
+  border: 1px solid var(--action-primary);
+}
+
+.petrolyst-action-primary:hover {
+  background: var(--action-primary-hover);
+  border-color: var(--action-primary-hover);
+}
+
+.petrolyst-action-primary:active {
+  background: var(--action-primary-active);
+  border-color: var(--action-primary-active);
+}
+
+.petrolyst-action-primary:focus-visible {
+  outline: var(--focus-ring-outer-width) solid var(--focus-ring-outer);
+  outline-offset: calc(var(--focus-ring-offset) + var(--focus-ring-inner-width));
+  box-shadow: 0 0 0 var(--focus-ring-inner-width) var(--focus-ring-inner);
+}

keycloak/themes/petrolyst/login/resources/css/brand/product_identity_layer.css

@@ -0,0 +1,112 @@
+:root {
+  --petroleum-50:#F7F9FA; --petroleum-100:#EEF2F4; --petroleum-200:#DDE5E9;
+  --petroleum-300:#C3D0D7; --petroleum-400:#96A9B4; --petroleum-500:#6C818E;
+  --petroleum-600:#506572; --petroleum-700:#394E5C; --petroleum-800:#233746;
+  --petroleum-900:#132636; --petroleum-950:#0A1825;
+
+  --surface-live:#FFFFFF;
+  --surface-live-alt:var(--petroleum-50);
+  --surface-context:#F2EBDD;
+  --surface-report:#F7F1E8;
+  --surface-empty:#F5EFE4;
+
+  /* Active semantic override of the base Brand System */
+  --surface-subtle:var(--petroleum-50);
+  --text-secondary:var(--petroleum-600);
+  --text-muted:var(--petroleum-600);
+  --border-default:var(--petroleum-200);
+  --border-subtle:var(--petroleum-200);
+  --border-control:var(--petroleum-500);
+  --border-strong:var(--petroleum-500);
+
+  --numeric-family:"Inter",system-ui,sans-serif;
+  --numeric-weight:600;
+  --numeric-unit-weight:500;
+  --numeric-unit-color:var(--petroleum-600);
+  --numeric-value-unit-ratio:.46;
+
+  --product-icon-color:#0B1D33;
+  --product-icon-live:#007C91;
+  --product-icon-action:#009688;
+  --product-icon-warning:#B45309;
+  --product-icon-critical:#B3261E;
+  --product-icon-offline:#52606D;
+  --product-icon-info:#2563EB;
+
+  --y-branch-angle-from-vertical:35deg;
+  --y-divider-angle:12deg;
+}
+
+[data-theme="dark"] {
+  --surface-live:#2A3945;
+  --surface-live-alt:#243038;
+  --surface-context:#242A2F;
+  --surface-report:#20272D;
+  --surface-empty:#1C242B;
+
+  --surface-subtle:#1F2A33;
+  --text-secondary:#C7CFD6;
+  --text-muted:#9AA6AF;
+  --border-default:#3C4854;
+  --border-subtle:#3C4854;
+  --border-control:#76828E;
+  --border-strong:#8B96A1;
+
+  --numeric-unit-color:#C7CFD6;
+
+  --product-icon-color:#F8FAFC;
+  --product-icon-live:#48CFF2;
+  --product-icon-action:#35C5B6;
+  --product-icon-warning:#F59E0B;
+  --product-icon-critical:#FF6B6B;
+  --product-icon-offline:#94A3B8;
+  --product-icon-info:#60A5FA;
+}
+
+@media (prefers-color-scheme:dark) {
+  :root:not([data-theme="light"]) {
+    --surface-live:#2A3945;
+    --surface-live-alt:#243038;
+    --surface-context:#242A2F;
+    --surface-report:#20272D;
+    --surface-empty:#1C242B;
+    --surface-subtle:#1F2A33;
+    --text-secondary:#C7CFD6;
+    --text-muted:#9AA6AF;
+    --border-default:#3C4854;
+    --border-subtle:#3C4854;
+    --border-control:#76828E;
+    --border-strong:#8B96A1;
+    --numeric-unit-color:#C7CFD6;
+    --product-icon-color:#F8FAFC;
+    --product-icon-live:#48CFF2;
+    --product-icon-action:#35C5B6;
+    --product-icon-warning:#F59E0B;
+    --product-icon-critical:#FF6B6B;
+    --product-icon-offline:#94A3B8;
+    --product-icon-info:#60A5FA;
+  }
+}
+
+.petrolyst-reading {
+  display:inline-flex; align-items:baseline; gap:.14em;
+  font-family:var(--numeric-family);
+  font-variant-numeric:tabular-nums slashed-zero;
+  font-feature-settings:"tnum" 1,"zero" 1;
+}
+.petrolyst-reading__value {font-weight:var(--numeric-weight);letter-spacing:-.025em;line-height:.95;}
+.petrolyst-reading__unit {
+  font-size:calc(1em * var(--numeric-value-unit-ratio));
+  font-weight:var(--numeric-unit-weight); color:var(--numeric-unit-color);
+}
+.petrolyst-surface--context {background:var(--surface-context);}
+.petrolyst-surface--live {background:var(--surface-live);}
+.petrolyst-divider--y {transform:skewY(var(--y-divider-angle)); transform-origin:left center;}
+
+/* Functional controls require stronger non-text contrast than decorative dividers. */
+.petrolyst-control {
+  border: 1px solid var(--border-control);
+}
+.petrolyst-divider {
+  border-color: var(--border-subtle);
+}