修复

src/account/workspace.css

@@ -34,12 +34,7 @@
     height: 3px;
     margin-top: 0.48rem;
     border-radius: 99px;
-    background: linear-gradient(
+    background: var(--console-primary);
-        90deg,
-        var(--console-teal) 0 34%,
-        var(--console-amber) 34% 67%,
-        var(--console-coral) 67%
-    );
 }
 
 .nexus-nav-label {
@@ -83,12 +78,7 @@
     left: clamp(1.25rem, 3.2vw, 3.75rem);
     width: 3px;
     border-radius: 99px;
-    background: linear-gradient(
+    background: var(--console-primary);
-        180deg,
-        var(--console-teal) 0 34%,
-        var(--console-amber) 34% 67%,
-        var(--console-coral) 67%
-    );
     content: "";
 }
 
@@ -267,12 +257,7 @@
     position: absolute;
     inset: 0 0 auto;
     height: 4px;
-    background: linear-gradient(
+    background: var(--console-primary);
-        90deg,
-        var(--console-teal) 0 34%,
-        var(--console-amber) 34% 67%,
-        var(--console-coral) 67%
-    );
     content: "";
 }
 

src/admin/PageNav.tsx

@@ -10,13 +10,14 @@ import { useEnvironment } from "../shared/keycloak-ui-shared";
 import {
     Label,
     Nav,
+    NavExpandable,
     NavGroup,
     PageSidebar,
     PageSidebarBody
 } from "../shared/@patternfly/react-core";
 import { FormEvent } from "react";
 import { useTranslation } from "react-i18next";
-import { NavLink, useNavigate } from "react-router-dom";
+import { NavLink, useLocation, useNavigate } from "react-router-dom";
 import { useAccess } from "./context/access/Access";
 import { useRealm } from "./context/realm-context/RealmContext";
 import { useServerInfo } from "./context/server-info/ServerInfoProvider";
@@ -61,6 +62,7 @@ const LeftNav = ({ title, path, code, id }: LeftNavProps) => {
                 id={name}
                 data-testid={name}
                 to={`/${encodedRealm}${path}`}
+                end={path === ""}
                 className={({ isActive }) =>
                     `pf-v5-c-nav__link${isActive ? " pf-m-current" : ""}`
                 }
@@ -82,6 +84,7 @@ export const PageNav = () => {
     const isFeatureEnabled = useIsFeatureEnabled();
     const pages = componentTypes?.["org.keycloak.services.ui.extend.UiPageProvider"];
     const navigate = useNavigate();
+    const { pathname } = useLocation();
     const { realm, realmRepresentation } = useRealm();
 
     type SelectedItem = {
@@ -113,6 +116,27 @@ export const PageNav = () => {
         hasSomeAccess("realm-admin", "admin") && isFeatureEnabled(Feature.Workflows);
     const showManageRealm = environment.masterRealm === environment.realm;
     const realmName = resolveDisplayName(t, realmRepresentation.displayName, realm);
+    const managePaths = [
+        "/organizations",
+        "/clients",
+        "/client-scopes",
+        "/roles",
+        "/users",
+        "/groups",
+        "/sessions",
+        "/events"
+    ];
+    const configurePaths = [
+        "/realm-settings",
+        "/authentication",
+        "/permissions",
+        "/identity-providers",
+        "/user-federation",
+        "/workflows",
+        "/page-section"
+    ];
+    const isManageActive = managePaths.some(path => pathname.includes(path));
+    const isConfigureActive = configurePaths.some(path => pathname.includes(path));
 
     return (
         <PageSidebar className="keycloak__page_nav__nav">
@@ -151,7 +175,13 @@ export const PageNav = () => {
                         </NavGroup>
                     )}
                     {showManage && (
-                        <NavGroup aria-label={t("manage")} title={t("manage")}>
+                        <NavExpandable
+                            className="admin-nav-group"
+                            groupId="manage"
+                            title={t("manage")}
+                            isActive={isManageActive}
+                            isExpanded={isManageActive}
+                        >
                             {isFeatureEnabled(Feature.Organizations) &&
                                 realmRepresentation.organizationsEnabled && (
                                     <LeftNav
@@ -171,10 +201,16 @@ export const PageNav = () => {
                             <LeftNav title="groups" path="/groups" code="GRP" />
                             <LeftNav title="sessions" path="/sessions" code="SES" />
                             <LeftNav title="events" path="/events" code="EVT" />
-                        </NavGroup>
+                        </NavExpandable>
                     )}
                     {showConfigure && (
-                        <NavGroup aria-label={t("configure")} title={t("configure")}>
+                        <NavExpandable
+                            className="admin-nav-group"
+                            groupId="configure"
+                            title={t("configure")}
+                            isActive={isConfigureActive}
+                            isExpanded={isConfigureActive}
+                        >
                             <LeftNav
                                 title="realmSettings"
                                 path="/realm-settings"
@@ -220,7 +256,7 @@ export const PageNav = () => {
                                         code="EXT"
                                     />
                                 ))}
-                        </NavGroup>
+                        </NavExpandable>
                     )}
                 </Nav>
                 <div className="admin-nav-footer">

src/admin/dashboard/dashboard.css

@@ -41,12 +41,7 @@
     position: absolute;
     inset: auto 0 0;
     height: 5px;
-    background: linear-gradient(
+    background: linear-gradient(90deg, var(--console-primary), var(--console-teal));
-        90deg,
-        var(--console-teal) 0 34%,
-        var(--console-amber) 34% 67%,
-        var(--console-coral) 67%
-    );
     content: "";
 }
 

src/admin/index.css

@@ -1,714 +1,26 @@
-:root {
+/*
-    --nexus-admin-void: #07101e;
+ * Admin compatibility layer.
-    --nexus-admin-chrome: #0b1728;
+ * Visual tokens and shared PatternFly composition live in ../console-ui.css.
-    --nexus-admin-panel: #ffffff;
+ * Keep this file intentionally small so theme-specific legacy rules cannot
-    --nexus-admin-canvas: #f2f5f8;
+ * override the light/dark workspace palette.
-    --nexus-admin-canvas-strong: #e8edf2;
+ */
-    --nexus-admin-signal: #00a3b4;
-    --nexus-admin-signal-bright: #58d7e3;
-    --nexus-admin-indigo: #5d63d8;
-    --nexus-admin-mint: #8de3cf;
-    --nexus-admin-text: #142033;
-    --nexus-admin-muted: #607087;
-    --nexus-admin-line: #d8e0e8;
-    --nexus-admin-line-strong: #becad6;
-    --nexus-admin-danger: #c33d4d;
-    --nexus-admin-radius-sm: 5px;
-    --nexus-admin-radius-md: 9px;
-    --nexus-admin-shadow: 0 1px 2px rgba(20, 32, 51, 0.04),
-        0 12px 34px rgba(20, 32, 51, 0.07);
-    --pf-v5-global--primary-color--100: #007f8e;
-    --pf-v5-global--primary-color--200: #006773;
-    --pf-v5-global--link--Color: #007985;
-    --pf-v5-global--link--Color--hover: #005963;
-    --pf-v5-global--BackgroundColor--100: var(--nexus-admin-panel);
-    --pf-v5-global--BackgroundColor--150: #f8fafb;
-    --pf-v5-global--BackgroundColor--200: var(--nexus-admin-canvas);
-    --pf-v5-global--Color--100: var(--nexus-admin-text);
-    --pf-v5-global--Color--200: var(--nexus-admin-muted);
-    --pf-v5-global--BorderColor--100: var(--nexus-admin-line);
-    --pf-v5-global--BorderColor--200: var(--nexus-admin-line-strong);
-    --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--nexus-admin-canvas);
-    color-scheme: light;
-}
-
-.pf-v5-theme-dark {
-    --nexus-admin-panel: #111d2e;
-    --nexus-admin-canvas: #08111f;
-    --nexus-admin-canvas-strong: #0d192a;
-    --nexus-admin-text: #edf4fb;
-    --nexus-admin-muted: #a6b5c8;
-    --nexus-admin-line: #2a3a50;
-    --nexus-admin-line-strong: #40516a;
-    --nexus-admin-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 16px 40px rgba(0, 0, 0, 0.28);
-    --pf-v5-global--primary-color--100: #58d7e3;
-    --pf-v5-global--primary-color--200: #8de7ee;
-    --pf-v5-global--link--Color: #68dbe5;
-    --pf-v5-global--link--Color--hover: #a0edf2;
-    --pf-v5-global--BackgroundColor--100: var(--nexus-admin-panel);
-    --pf-v5-global--BackgroundColor--150: #162338;
-    --pf-v5-global--BackgroundColor--200: var(--nexus-admin-canvas);
-    --pf-v5-global--Color--100: var(--nexus-admin-text);
-    --pf-v5-global--Color--200: var(--nexus-admin-muted);
-    --pf-v5-global--BorderColor--100: var(--nexus-admin-line);
-    --pf-v5-global--BorderColor--200: var(--nexus-admin-line-strong);
-    --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--nexus-admin-canvas);
-    color-scheme: dark;
-}
 
 html,
 body,
 #root {
-    min-height: 100%;
+    height: 100%;
 }
 
 body {
     margin: 0;
-    color: var(--nexus-admin-text);
-    background: var(--nexus-admin-canvas);
-    font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
-    font-size: 15px;
-    -webkit-font-smoothing: antialiased;
 }
 
-.pf-v5-c-page,
+#root {
-.pf-v5-c-page__main,
-.pf-v5-c-page__main-section {
-    background-color: var(--nexus-admin-canvas);
-}
-
-.pf-v5-c-page__main {
-    position: relative;
     isolation: isolate;
-    background-image: radial-gradient(
-            circle at 94% 9%,
-            color-mix(in srgb, var(--nexus-admin-signal) 8%, transparent) 0,
-            transparent 24rem
-        ),
-        linear-gradient(rgba(41, 73, 104, 0.025) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(41, 73, 104, 0.025) 1px, transparent 1px);
-    background-size:
-        auto,
-        48px 48px,
-        48px 48px;
-}
-
-.pf-v5-c-masthead {
-    min-height: 72px;
-    border-bottom: 1px solid rgba(88, 215, 227, 0.2);
-    background: linear-gradient(90deg, rgba(88, 215, 227, 0.06), transparent 32%),
-        var(--nexus-admin-void);
-    box-shadow: 0 10px 30px rgba(3, 9, 20, 0.22);
-}
-
-.pf-v5-c-masthead::after {
-    position: absolute;
-    right: 0;
-    bottom: -1px;
-    width: min(36vw, 34rem);
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--nexus-admin-signal-bright));
-    content: "";
-    opacity: 0.65;
-}
-
-img.keycloak__pageheader_brand {
-    width: 192px;
-    height: 42px;
-    object-fit: contain;
-    object-position: left center;
-}
-
-.pf-v5-c-masthead .pf-v5-c-button.pf-m-link,
-.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
-    color: #b9c8da;
-}
-
-.pf-v5-c-masthead .pf-v5-c-button:hover {
-    color: #ffffff;
-}
-
-.pf-v5-c-page__sidebar,
-.pf-v5-c-page__sidebar-body {
-    color: #dce8f5;
-    background: radial-gradient(
-            circle at 28% 92%,
-            rgba(88, 215, 227, 0.1),
-            transparent 15rem
-        ),
-        linear-gradient(165deg, rgba(93, 99, 216, 0.08), transparent 38%),
-        var(--nexus-admin-chrome);
-}
-
-.pf-v5-c-page__sidebar {
-    width: 284px;
-    border-right: 1px solid rgba(88, 215, 227, 0.14);
-    box-shadow: 12px 0 32px rgba(5, 13, 25, 0.08);
-}
-
-.pf-v5-c-page__sidebar-body {
-    position: relative;
-    padding: 1.25rem 0.9rem 2rem;
-}
-
-.pf-v5-c-page__sidebar-body::before {
-    display: block;
-    width: 72px;
-    height: 10px;
-    margin: 0.15rem 0.8rem 1.1rem;
-    background: radial-gradient(
-            circle,
-            var(--nexus-admin-signal-bright) 0 2px,
-            transparent 2.5px
-        )
-        left center / 12px 10px repeat-x;
-    content: "";
-    opacity: 0.9;
-    mask-image: linear-gradient(90deg, #000 55%, transparent);
-}
-
-.pf-v5-c-nav__section-title {
-    padding-inline: 1rem;
-    color: #d9e5f2;
-    font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
-    font-size: 1rem;
-    letter-spacing: 0.01em;
-}
-
-.pf-v5-c-nav__section-title .pf-v5-c-label {
-    margin-top: 0.55rem;
-    border-color: rgba(88, 215, 227, 0.24);
-    color: var(--nexus-admin-signal-bright);
-    background: rgba(88, 215, 227, 0.08);
-    font-family: "Cascadia Code", Consolas, monospace;
-    font-size: 0.62rem;
-    text-transform: uppercase;
-}
-
-.pf-v5-c-nav__section-title,
-.pf-v5-c-nav__link,
-.pf-v5-c-nav__group-title {
-    color: #9fb0c6;
-}
-
-.pf-v5-c-nav__group-title {
-    padding: 1.25rem 1rem 0.45rem;
-    font-family: "Cascadia Code", Consolas, monospace;
-    font-size: 0.65rem;
-    font-weight: 600;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-}
-
-.pf-v5-c-nav__list {
-    display: grid;
-    gap: 0.18rem;
-}
-
-.pf-v5-c-nav__link {
-    position: relative;
-    min-height: 42px;
-    padding: 0.68rem 0.9rem 0.68rem 1rem;
-    border-radius: var(--nexus-admin-radius-sm);
-    font-size: 0.88rem;
-    font-weight: 560;
-    transition:
-        color 150ms ease,
-        background-color 150ms ease,
-        transform 150ms ease;
-}
-
-.pf-v5-c-nav__link:hover,
-.pf-v5-c-nav__link:focus {
-    color: #ffffff;
-    background: rgba(88, 215, 227, 0.07);
-    transform: translateX(2px);
-}
-
-.pf-v5-c-nav__link.pf-m-current,
-.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
-    color: #ffffff;
-    background: linear-gradient(90deg, rgba(88, 215, 227, 0.16), rgba(93, 99, 216, 0.08));
-    box-shadow:
-        inset 3px 0 var(--nexus-admin-signal-bright),
-        0 6px 18px rgba(0, 0, 0, 0.12);
-}
-
-.pf-v5-c-nav__link.pf-m-current::after {
-    top: 50%;
-    right: 0.85rem;
-    width: 5px;
-    height: 5px;
-    border: 0;
-    border-radius: 50%;
-    background: var(--nexus-admin-mint);
-    box-shadow: 0 0 0 4px rgba(141, 227, 207, 0.1);
-    transform: translateY(-50%);
-}
-
-.pf-v5-c-page__main-section,
-.pf-v5-c-page__main-breadcrumb {
-    padding-inline: clamp(1.25rem, 3vw, 3.5rem);
-}
-
-.pf-v5-c-page__main-section > *,
-.pf-v5-c-page__main-breadcrumb > * {
-    width: 100%;
-    max-width: 1440px;
-    margin-inline: auto;
-}
-
-.pf-v5-c-page__main-breadcrumb {
-    border-bottom: 1px solid color-mix(in srgb, var(--nexus-admin-line) 82%, transparent);
-    background: color-mix(in srgb, var(--nexus-admin-panel) 80%, transparent);
-    backdrop-filter: blur(16px);
-}
-
-.pf-v5-c-page__main-section {
-    padding-top: clamp(1.5rem, 2.5vw, 2.75rem);
-    padding-bottom: 4rem;
-}
-
-.pf-v5-c-title,
-.pf-v5-c-content h1,
-.pf-v5-c-content h2,
-.pf-v5-c-page__main-title {
-    color: var(--nexus-admin-text);
-    font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
-    letter-spacing: -0.025em;
-}
-
-.pf-v5-c-title.pf-m-2xl,
-.pf-v5-c-page__main-title {
-    font-size: clamp(2rem, 3vw, 2.8rem);
-    line-height: 1.05;
-}
-
-.pf-v5-c-title.pf-m-2xl::before,
-.pf-v5-c-page__main-title::before {
-    display: inline-block;
-    width: 0.48rem;
-    height: 0.48rem;
-    margin: 0 0.72rem 0.2rem 0;
-    border: 2px solid var(--nexus-admin-signal);
-    content: "";
-    transform: rotate(45deg);
-}
-
-.pf-v5-c-content > p,
-.pf-v5-c-helper-text {
-    color: var(--nexus-admin-muted);
-    line-height: 1.65;
-}
-
-.pf-v5-c-card,
-.pf-v5-c-data-list,
-.pf-v5-c-modal-box,
-.pf-v5-c-drawer__panel,
-.pf-v5-c-popover__content,
-.pf-v5-c-menu {
-    border: 1px solid var(--nexus-admin-line);
-    border-radius: var(--nexus-admin-radius-md);
-    background: var(--nexus-admin-panel);
-    box-shadow: var(--nexus-admin-shadow);
-}
-
-.pf-v5-c-card {
-    overflow: hidden;
-}
-
-.pf-v5-c-card__title {
-    font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
-    font-size: 1.12rem;
-    letter-spacing: -0.012em;
-}
-
-.pf-v5-c-table {
-    overflow: hidden;
-    border: 1px solid var(--nexus-admin-line);
-    border-radius: var(--nexus-admin-radius-md);
-    background: var(--nexus-admin-panel);
-    box-shadow: 0 8px 28px rgba(20, 32, 51, 0.055);
-}
-
-.pf-v5-c-table thead {
-    color: var(--nexus-admin-muted);
-    background: color-mix(
-        in srgb,
-        var(--nexus-admin-canvas) 64%,
-        var(--nexus-admin-panel)
-    );
-    font-family: "Cascadia Code", Consolas, monospace;
-    font-size: 0.69rem;
-    letter-spacing: 0.045em;
-    text-transform: uppercase;
-}
-
-.pf-v5-c-table tr > * {
-    border-bottom-color: var(--nexus-admin-line);
-}
-
-.pf-v5-c-table tbody tr {
-    transition: background-color 140ms ease;
-}
-
-.pf-v5-c-table tbody tr:hover > * {
-    background-color: color-mix(
-        in srgb,
-        var(--nexus-admin-signal) 5%,
-        var(--nexus-admin-panel)
-    );
-}
-
-.pf-v5-c-toolbar {
-    border-radius: var(--nexus-admin-radius-md);
-}
-
-.pf-v5-c-toolbar__content {
-    padding-inline: 0;
-}
-
-.pf-v5-c-form__label-text {
-    color: var(--nexus-admin-text);
-    font-weight: 620;
-}
-
-.pf-v5-c-form__helper-text {
-    color: var(--nexus-admin-muted);
-    line-height: 1.5;
-}
-
-.pf-v5-c-form-control,
-.pf-v5-c-select__toggle,
-.pf-v5-c-menu-toggle,
-.pf-v5-c-number-input,
-.pf-v5-c-search-input {
-    min-height: 40px;
-    border-color: var(--nexus-admin-line-strong);
-    border-radius: var(--nexus-admin-radius-sm);
-    color: var(--nexus-admin-text);
-    background: var(--nexus-admin-panel);
-    box-shadow: inset 0 1px 1px rgba(20, 32, 51, 0.025);
-    transition:
-        border-color 140ms ease,
-        box-shadow 140ms ease;
-}
-
-.pf-v5-c-form-control:hover,
-.pf-v5-c-menu-toggle:hover,
-.pf-v5-c-search-input:hover {
-    border-color: color-mix(
-        in srgb,
-        var(--nexus-admin-signal) 58%,
-        var(--nexus-admin-line)
-    );
-}
-
-.pf-v5-c-form-control:focus-within,
-.pf-v5-c-menu-toggle:focus,
-.pf-v5-c-menu-toggle.pf-m-expanded,
-.pf-v5-c-search-input:focus-within {
-    border-color: var(--nexus-admin-signal);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nexus-admin-signal) 15%, transparent);
-}
-
-.pf-v5-c-button {
-    min-height: 38px;
-    border-radius: var(--nexus-admin-radius-sm);
-    font-weight: 650;
-    letter-spacing: 0.005em;
-    transition:
-        transform 140ms ease,
-        box-shadow 140ms ease,
-        filter 140ms ease;
-}
-
-.pf-v5-c-button.pf-m-primary {
-    color: #ffffff;
-    background: var(--pf-v5-global--primary-color--100);
-    box-shadow: 0 7px 18px color-mix(in srgb, var(--nexus-admin-signal) 22%, transparent);
-}
-
-.pf-v5-c-button.pf-m-primary:hover {
-    background: var(--pf-v5-global--primary-color--200);
-    box-shadow: 0 9px 22px color-mix(in srgb, var(--nexus-admin-signal) 28%, transparent);
-    transform: translateY(-1px);
-}
-
-.pf-v5-c-button.pf-m-secondary {
-    border-color: var(--nexus-admin-line-strong);
-    color: var(--nexus-admin-text);
-    background: var(--nexus-admin-panel);
-}
-
-.pf-v5-c-button.pf-m-danger {
-    background: var(--nexus-admin-danger);
-}
-
-.pf-v5-c-tabs {
-    border-bottom: 1px solid var(--nexus-admin-line);
-}
-
-.pf-v5-c-tabs__link {
-    color: var(--nexus-admin-muted);
-    font-weight: 620;
-}
-
-.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
-    color: var(--nexus-admin-text);
-}
-
-.pf-v5-c-tabs__link::after {
-    height: 3px;
-    border-color: var(--nexus-admin-signal);
-}
-
-.pf-v5-c-label {
-    border-radius: 999px;
-    font-weight: 620;
-}
-
-.pf-v5-c-alert {
-    border: 1px solid var(--nexus-admin-line);
-    border-radius: var(--nexus-admin-radius-md);
-    box-shadow: 0 8px 24px rgba(20, 32, 51, 0.06);
-}
-
-.pf-v5-c-empty-state {
-    border: 1px dashed var(--nexus-admin-line-strong);
-    border-radius: var(--nexus-admin-radius-md);
-    background: color-mix(in srgb, var(--nexus-admin-panel) 70%, transparent);
-}
-
-.pf-v5-c-pagination {
-    color: var(--nexus-admin-muted);
-}
-
-.pf-v5-c-pagination .pf-v5-c-menu-toggle,
-.pf-v5-c-pagination .pf-v5-c-button {
-    min-height: 34px;
-}
-
-.pf-v5-c-modal-box {
-    overflow: hidden;
-}
-
-.pf-v5-c-modal-box__header {
-    border-bottom: 1px solid var(--nexus-admin-line);
-}
-
-.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
-    background: var(--nexus-admin-signal);
-}
-
-.keycloak__form {
-    max-width: 1160px;
-    padding-bottom: var(--pf-v5-global--spacer--4xl);
-}
-
-.keycloak__form_actions {
-    position: sticky;
-    z-index: 15;
-    bottom: 0;
-    margin: 2rem calc(-1 * clamp(1.25rem, 3vw, 3.5rem)) -4rem;
-    padding: 0.9rem clamp(1.25rem, 3vw, 3.5rem);
-    border-top: 1px solid var(--nexus-admin-line);
-    background: color-mix(in srgb, var(--nexus-admin-panel) 90%, transparent);
-    box-shadow: 0 -10px 30px rgba(20, 32, 51, 0.06);
-    backdrop-filter: blur(16px);
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-    accent-color: var(--nexus-admin-signal);
 }
 
 .keycloak__section_intro__help {
     width: fit-content;
     padding: var(--pf-v5-global--spacer--md) 0 var(--pf-v5-global--spacer--lg);
-    color: var(--pf-v5-global--primary-color--100);
+    color: var(--console-primary-deep);
-}
-
-div.w-tc-editor {
-    border: 1px solid var(--nexus-admin-line);
-    border-radius: var(--nexus-admin-radius-sm);
-    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
-}
-
-:focus-visible {
-    outline: 2px solid var(--nexus-admin-signal-bright) !important;
-    outline-offset: 3px;
-}
-
-@media (min-width: 769px) {
-    .pf-v5-c-page__main-section > .pf-v5-c-card,
-    .pf-v5-c-page__main-section > .pf-v5-c-table,
-    .pf-v5-c-page__main-section > .pf-v5-c-form {
-        animation: nexus-admin-arrive 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
-    }
-}
-
-@keyframes nexus-admin-arrive {
-    from {
-        opacity: 0;
-        transform: translateY(8px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@media (max-width: 768px) {
-    .pf-v5-c-masthead {
-        min-height: 60px;
-    }
-
-    img.keycloak__pageheader_brand {
-        width: 158px;
-        height: 36px;
-    }
-
-    .pf-v5-c-page__sidebar {
-        width: min(88vw, 310px);
-    }
-
-    .pf-v5-c-page__main-section,
-    .pf-v5-c-page__main-breadcrumb {
-        padding-inline: 1rem;
-    }
-
-    .pf-v5-c-title.pf-m-2xl,
-    .pf-v5-c-page__main-title {
-        font-size: 2rem;
-    }
-
-    .keycloak__form_actions {
-        margin-inline: -1rem;
-        padding-inline: 1rem;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-        scroll-behavior: auto !important;
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-    }
-}
-
-/* Keep the admin workspace in step with the class login/account variant. */
-html[data-kc-theme-name="class"] {
-    --nexus-admin-void: #2868c7;
-    --nexus-admin-chrome: #3f7fd6;
-    --nexus-admin-panel: #ffffff;
-    --nexus-admin-canvas: #f7fbff;
-    --nexus-admin-canvas-strong: #e5f3ff;
-    --nexus-admin-signal: #f05a47;
-    --nexus-admin-signal-bright: #f6c54c;
-    --nexus-admin-indigo: #23966f;
-    --nexus-admin-mint: #f6c54c;
-    --nexus-admin-text: #18324a;
-    --nexus-admin-muted: #617387;
-    --nexus-admin-line: #c8dbe8;
-    --nexus-admin-line-strong: #9ebbd0;
-    --nexus-admin-danger: #c93636;
-    --nexus-admin-radius-sm: 2px;
-    --nexus-admin-radius-md: 4px;
-    --nexus-admin-shadow: 7px 7px 0 rgba(40, 104, 199, 0.1);
-    --pf-v5-global--primary-color--100: #3f7fd6;
-    --pf-v5-global--primary-color--200: #2868c7;
-    --pf-v5-global--link--Color: #2868c7;
-    --pf-v5-global--link--Color--hover: #174f9c;
-    --pf-v5-global--BackgroundColor--100: var(--nexus-admin-panel);
-    --pf-v5-global--BackgroundColor--150: #fbfdff;
-    --pf-v5-global--BackgroundColor--200: var(--nexus-admin-canvas);
-    --pf-v5-global--Color--100: var(--nexus-admin-text);
-    --pf-v5-global--Color--200: var(--nexus-admin-muted);
-    --pf-v5-global--BorderColor--100: var(--nexus-admin-line);
-    --pf-v5-global--BorderColor--200: var(--nexus-admin-line-strong);
-    --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--nexus-admin-canvas);
-}
-
-html[data-kc-theme-name="class"].pf-v5-theme-dark {
-    --nexus-admin-void: #0d2742;
-    --nexus-admin-chrome: #123453;
-    --nexus-admin-panel: #0f2030;
-    --nexus-admin-canvas: #08131e;
-    --nexus-admin-canvas-strong: #173149;
-    --nexus-admin-signal: #ff7465;
-    --nexus-admin-signal-bright: #f2c45c;
-    --nexus-admin-indigo: #54c99d;
-    --nexus-admin-mint: #f2c45c;
-    --nexus-admin-text: #e7f1f9;
-    --nexus-admin-muted: #9ab0c2;
-    --nexus-admin-line: #355168;
-    --nexus-admin-line-strong: #58738a;
-    --nexus-admin-danger: #ff8585;
-    --nexus-admin-shadow: 7px 7px 0 #142a3e;
-    --pf-v5-global--primary-color--100: #6da8f6;
-    --pf-v5-global--primary-color--200: #91bdff;
-    --pf-v5-global--link--Color: #91bdff;
-    --pf-v5-global--link--Color--hover: #bdd7ff;
-    --pf-v5-global--BackgroundColor--150: #14293b;
-}
-
-html[data-kc-theme-name="class"] .pf-v5-c-page__main {
-    background-image: linear-gradient(rgba(24, 50, 74, 0.035) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(24, 50, 74, 0.035) 1px, transparent 1px);
-    background-position: 24px 24px;
-    background-size: 24px 24px;
-}
-
-html[data-kc-theme-name="class"] .pf-v5-c-masthead {
-    border-bottom-color: rgba(246, 197, 76, 0.75);
-    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 48%),
-        var(--nexus-admin-void);
-    box-shadow: 0 8px 0 rgba(63, 127, 214, 0.12);
-}
-
-html[data-kc-theme-name="class"] .pf-v5-c-masthead::after {
-    width: min(42vw, 38rem);
-    height: 4px;
-    background: linear-gradient(
-        90deg,
-        var(--nexus-admin-indigo) 0 34%,
-        var(--nexus-admin-signal-bright) 34% 67%,
-        var(--nexus-admin-signal) 67%
-    );
-    opacity: 1;
-}
-
-html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar,
-html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar-body {
-    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), transparent 42%),
-        var(--nexus-admin-chrome);
-}
-
-html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar {
-    border-right-color: rgba(246, 197, 76, 0.65);
-    box-shadow: 8px 0 0 rgba(63, 127, 214, 0.1);
-}
-
-html[data-kc-theme-name="class"] .pf-v5-c-nav__link,
-html[data-kc-theme-name="class"] .pf-v5-c-nav__section-title,
-html[data-kc-theme-name="class"] .pf-v5-c-nav__link.pf-m-expandable {
-    color: rgba(255, 255, 255, 0.78);
-}
-
-html[data-kc-theme-name="class"] .pf-v5-c-nav__link:hover,
-html[data-kc-theme-name="class"] .pf-v5-c-nav__link:focus,
-html[data-kc-theme-name="class"] .pf-v5-c-nav__link.pf-m-current,
-html[data-kc-theme-name="class"] .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
-    color: #ffffff;
-    background: linear-gradient(90deg, rgba(246, 197, 76, 0.2), rgba(240, 90, 71, 0.08));
-}
-
-html[data-kc-theme-name="class"] .pf-v5-c-card,
-html[data-kc-theme-name="class"] .pf-v5-c-modal-box,
-html[data-kc-theme-name="class"] .pf-v5-c-empty-state {
-    border-radius: 4px;
 }

src/admin/page-nav.css

@@ -1,7 +1,61 @@
 .keycloak__page_nav__nav {
     --pf-v5-c-page__sidebar--Transition: all 120ms cubic-bezier(0.2, 0.7, 0.2, 1);
-    overflow: inherit;
+    --pf-v5-c-page__sidebar--BackgroundColor: var(--console-nav);
-    overflow-y: auto;
+    overflow: visible !important;
+    color: var(--console-ink) !important;
+    background: var(--console-nav) !important;
+}
+
+.keycloak__page_nav__nav .pf-v5-c-page__sidebar-body {
+    overflow-y: visible !important;
+    color: var(--console-ink) !important;
+    background: var(--console-nav) !important;
+}
+
+.keycloak__page_nav__nav .pf-v5-c-nav {
+    --pf-v5-c-nav__link--Color: var(--console-muted);
+    --pf-v5-c-nav__link--hover--Color: var(--console-ink);
+    --pf-v5-c-nav__link--focus--Color: var(--console-ink);
+    --pf-v5-c-nav__link--hover--BackgroundColor: color-mix(
+        in srgb,
+        var(--console-surface) 82%,
+        transparent
+    );
+    --pf-v5-c-nav__link--focus--BackgroundColor: color-mix(
+        in srgb,
+        var(--console-surface) 82%,
+        transparent
+    );
+    --pf-v5-c-nav__link--m-current--Color: var(--console-primary-deep);
+    --pf-v5-c-nav__link--m-current--BackgroundColor: color-mix(
+        in srgb,
+        var(--console-primary) 9%,
+        var(--console-surface)
+    );
+    color: var(--console-ink);
+    background: transparent;
+}
+
+.keycloak__page_nav__nav .pf-v5-c-nav__link,
+.keycloak__page_nav__nav .pf-v5-c-nav__link.pf-m-expandable {
+    color: var(--console-muted) !important;
+}
+
+.keycloak__page_nav__nav .pf-v5-c-nav__link:hover,
+.keycloak__page_nav__nav .pf-v5-c-nav__link:focus {
+    color: var(--console-ink) !important;
+}
+
+.keycloak__page_nav__nav .pf-v5-c-nav__link.pf-m-current,
+.keycloak__page_nav__nav
+    .pf-v5-c-nav__item:not(.pf-m-expandable).pf-m-current
+    > .pf-v5-c-nav__link {
+    color: var(--console-primary-deep) !important;
+    background: color-mix(
+        in srgb,
+        var(--console-primary) 9%,
+        var(--console-surface)
+    ) !important;
 }
 
 .admin-nav-context {
@@ -12,6 +66,21 @@
     border-bottom: 1px solid var(--console-line);
 }
 
+.admin-nav-group > .pf-v5-c-nav__link.pf-m-expandable {
+    min-height: 40px;
+    margin-top: 0.25rem;
+    color: var(--console-ink);
+    font-size: 0.76rem;
+    font-weight: 760;
+    letter-spacing: 0.055em;
+    text-transform: uppercase;
+}
+
+.admin-nav-group .pf-v5-c-nav__subnav {
+    margin-top: 0.25rem;
+    padding-left: 0;
+}
+
 .admin-nav-context__eyebrow {
     color: var(--console-primary-deep);
     font-size: 0.64rem;
@@ -94,3 +163,10 @@
     font-weight: 700;
     letter-spacing: 0.04em;
 }
+
+@media (max-width: 768px) {
+    .keycloak__page_nav__nav,
+    .keycloak__page_nav__nav .pf-v5-c-page__sidebar-body {
+        overflow-y: auto !important;
+    }
+}

src/admin/workspace.css

@@ -22,12 +22,7 @@
     left: clamp(1.25rem, 3.2vw, 3.75rem);
     width: 3px;
     border-radius: 99px;
-    background: linear-gradient(
+    background: var(--console-primary);
-        180deg,
-        var(--console-teal) 0 34%,
-        var(--console-amber) 34% 67%,
-        var(--console-coral) 67%
-    );
     content: "";
 }
 

src/console-ui.css

@@ -5,20 +5,20 @@
  */
 
 :root {
-    --console-ink: #15334c;
+    --console-ink: #1d2a33;
-    --console-muted: #5f768a;
+    --console-muted: #64727c;
-    --console-faint: #8399aa;
+    --console-faint: #87939b;
-    --console-canvas: #edf5fa;
+    --console-canvas: #f4f6f7;
     --console-surface: #ffffff;
-    --console-surface-soft: #f6fafc;
+    --console-surface-soft: #f8f9f9;
     --console-surface-raised: #ffffff;
-    --console-surface-sunken: #e7f0f6;
+    --console-surface-sunken: #edf0f1;
-    --console-nav: #e5f0f7;
+    --console-nav: #eef1f2;
-    --console-line: #d2e0e9;
+    --console-line: #d9dfe2;
-    --console-line-strong: #adc3d2;
+    --console-line-strong: #bac5ca;
-    --console-primary: #2f72d6;
+    --console-primary: #34747a;
-    --console-primary-deep: #1f58ad;
+    --console-primary-deep: #245b61;
-    --console-teal: #1e9476;
+    --console-teal: #347f72;
     --console-amber: #d99b25;
     --console-coral: #dd5c4b;
     --console-danger: #c94046;
@@ -37,6 +37,9 @@
     --pf-v5-global--Color--200: var(--console-muted);
     --pf-v5-global--BorderColor--100: var(--console-line);
     --pf-v5-global--BorderColor--200: var(--console-line-strong);
+    --pf-v5-c-masthead--BackgroundColor: var(--console-surface);
+    --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--console-surface);
+    --pf-v5-c-page__sidebar--BackgroundColor: var(--console-nav);
     --pf-v5-c-page__main-section--m-light--BackgroundColor: transparent;
     color-scheme: light;
 }
@@ -45,17 +48,17 @@
     --console-ink: #eaf2f8;
     --console-muted: #a4b5c4;
     --console-faint: #8295a7;
-    --console-canvas: #09151f;
+    --console-canvas: #10171c;
-    --console-surface: #122331;
+    --console-surface: #182229;
-    --console-surface-soft: #172b3a;
+    --console-surface-soft: #1d2930;
-    --console-surface-raised: #192d3d;
+    --console-surface-raised: #202c34;
-    --console-surface-sunken: #0d1d29;
+    --console-surface-sunken: #121b21;
-    --console-nav: #0d1d29;
+    --console-nav: #141e24;
-    --console-line: #294354;
+    --console-line: #304048;
-    --console-line-strong: #49667a;
+    --console-line-strong: #52636b;
-    --console-primary: #78a8ff;
+    --console-primary: #75adb0;
-    --console-primary-deep: #96baff;
+    --console-primary-deep: #93c2c4;
-    --console-teal: #61c7aa;
+    --console-teal: #6aafa0;
     --console-amber: #f2c45c;
     --console-coral: #ff8173;
     --console-danger: #ff858b;
@@ -75,17 +78,17 @@
 }
 
 html[data-kc-theme-name="class"] {
-    --console-ink: #18324a;
+    --console-ink: #202c33;
-    --console-muted: #61778c;
+    --console-muted: #66757c;
-    --console-canvas: #f4f9fd;
+    --console-canvas: #f6f7f7;
-    --console-nav: #edf6fc;
+    --console-nav: #eff2f2;
     --console-surface-raised: #ffffff;
-    --console-surface-sunken: #e8f3fa;
+    --console-surface-sunken: #ecefef;
-    --console-line: #d4e3ee;
+    --console-line: #d9dfe0;
-    --console-line-strong: #abc4d7;
+    --console-line-strong: #b7c3c5;
-    --console-primary: #3f7fd6;
+    --console-primary: #3a7277;
-    --console-primary-deep: #2868c7;
+    --console-primary-deep: #285b60;
-    --console-teal: #23966f;
+    --console-teal: #3b7f70;
     --console-amber: #f0b92e;
     --console-coral: #ef6654;
 }
@@ -93,17 +96,17 @@ html[data-kc-theme-name="class"] {
 html[data-kc-theme-name="class"].pf-v5-theme-dark {
     --console-ink: #e7f1f9;
     --console-muted: #9ab0c2;
-    --console-canvas: #0a1723;
+    --console-canvas: #11181d;
-    --console-surface: #102435;
+    --console-surface: #19242a;
-    --console-surface-soft: #152c3e;
+    --console-surface-soft: #1e2b31;
-    --console-nav: #0d2132;
+    --console-nav: #151f24;
-    --console-surface-raised: #193246;
+    --console-surface-raised: #222f35;
-    --console-surface-sunken: #0a1824;
+    --console-surface-sunken: #121b20;
-    --console-line: #2d485d;
+    --console-line: #314147;
-    --console-line-strong: #4d6c82;
+    --console-line-strong: #53656c;
-    --console-primary: #76aafa;
+    --console-primary: #78aeb0;
-    --console-primary-deep: #9bc0ff;
+    --console-primary-deep: #97c4c5;
-    --console-teal: #58cba2;
+    --console-teal: #70ad9f;
     --console-amber: #f2c45c;
     --console-coral: #ff8173;
 }
@@ -146,42 +149,45 @@ html[data-console-color-mode] .pf-v5-c-masthead {
     background-color: var(--console-canvas);
     background-image: radial-gradient(
         circle at 92% 1%,
-            color-mix(in srgb, var(--console-primary) 8%, transparent),
+        color-mix(in srgb, var(--console-primary) 5%, transparent),
-            transparent 27rem
+        transparent 30rem
-        ),
-        linear-gradient(
-            90deg,
-            color-mix(in srgb, var(--console-line) 20%, transparent) 1px,
-            transparent 1px
     );
-    background-size:
-        auto,
-        112px 100%;
 }
 
 /* Header: quiet, bright, and consistent across both consoles. */
 .pf-v5-c-masthead {
+    --pf-v5-c-masthead--BackgroundColor: var(--console-surface);
+    --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--console-surface);
     min-height: 68px;
     border: 0;
     border-bottom: 1px solid var(--console-line);
     color: var(--console-ink);
-    background: color-mix(in srgb, var(--console-surface) 94%, transparent);
+    background: color-mix(in srgb, var(--console-surface) 94%, transparent) !important;
     box-shadow: 0 6px 24px rgba(23, 50, 77, 0.055);
     backdrop-filter: blur(18px);
 }
 
+.pf-v5-c-masthead,
+.pf-v5-c-masthead__main,
+.pf-v5-c-masthead__content,
+.pf-v5-c-masthead .pf-v5-c-toolbar,
+.pf-v5-c-masthead .pf-v5-c-toolbar__content {
+    color: var(--console-ink) !important;
+}
+
+.pf-v5-c-masthead .pf-v5-c-menu-toggle {
+    --pf-v5-c-menu-toggle--Color: var(--console-ink);
+    --pf-v5-c-menu-toggle--BackgroundColor: var(--console-surface-soft);
+    color: var(--console-ink) !important;
+    background: var(--console-surface-soft) !important;
+}
+
 .pf-v5-c-masthead::after {
     right: 0;
     bottom: -1px;
-    width: min(34vw, 32rem);
+    width: min(28vw, 25rem);
-    height: 3px;
+    height: 2px;
-    background: linear-gradient(
+    background: linear-gradient(90deg, transparent, var(--console-primary));
-        90deg,
-        transparent 0 8%,
-        var(--console-teal) 8% 40%,
-        var(--console-amber) 40% 70%,
-        var(--console-coral) 70%
-    );
     opacity: 1;
 }
 
@@ -237,10 +243,11 @@ img.keycloak__pageheader_brand {
 .pf-v5-c-page__sidebar,
 .pf-v5-c-page__sidebar-body {
     color: var(--console-ink);
-    background: var(--console-nav);
+    background: var(--console-nav) !important;
 }
 
 .pf-v5-c-page__sidebar {
+    --pf-v5-c-page__sidebar--BackgroundColor: var(--console-nav);
     width: 272px;
     border-right: 1px solid var(--console-line);
     box-shadow: none;
@@ -258,7 +265,7 @@ img.keycloak__pageheader_brand {
 .pf-v5-c-nav__link,
 .pf-v5-c-nav__group-title,
 .pf-v5-c-nav__link.pf-m-expandable {
-    color: var(--console-muted);
+    color: var(--console-muted) !important;
 }
 
 .pf-v5-c-nav__section-title {
@@ -296,17 +303,21 @@ img.keycloak__pageheader_brand {
 
 .pf-v5-c-nav__link:hover,
 .pf-v5-c-nav__link:focus {
-    color: var(--console-ink);
+    color: var(--console-ink) !important;
     border-color: color-mix(in srgb, var(--console-primary) 15%, var(--console-line));
-    background: color-mix(in srgb, var(--console-surface) 82%, transparent);
+    background: color-mix(in srgb, var(--console-surface) 82%, transparent) !important;
     transform: none;
 }
 
 .pf-v5-c-nav__link.pf-m-current,
-.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
+.pf-v5-c-nav__item:not(.pf-m-expandable).pf-m-current > .pf-v5-c-nav__link {
-    color: var(--console-primary-deep);
+    color: var(--console-primary-deep) !important;
     border-color: color-mix(in srgb, var(--console-primary) 22%, var(--console-line));
-    background: var(--console-surface);
+    background: color-mix(
+        in srgb,
+        var(--console-primary) 9%,
+        var(--console-surface)
+    ) !important;
     box-shadow: 0 8px 22px rgba(39, 82, 124, 0.08);
 }