新class612

src/kc.gen.tsx

@@ -1,5 +1,5 @@
 // This file is auto-generated by the `update-kc-gen` command. Do not edit it manually.
-// Hash: 822f146dfd89023346d41d4f77fba9745b7f55365c95ca37f85806c01ab23dc4
+// Hash: 7dbbfb317418e9799cdce9a990519799f98af7dbfe27f1d0438c6738cffb7515
 
 /* eslint-disable */
 
@@ -9,9 +9,9 @@
 
 import { lazy, Suspense, type ReactNode } from "react";
 
-export type ThemeName = "keycloakify-starter";
+export type ThemeName = "keycloakify-starter" | "class";
 
-export const themeNames: ThemeName[] = ["keycloakify-starter"];
+export const themeNames: ThemeName[] = ["keycloakify-starter", "class"];
 
 export type KcEnvName = never;
 

src/login/KcPage.tsx

@@ -5,6 +5,7 @@ import { useI18n } from "./i18n";
 import DefaultPage from "keycloakify/login/DefaultPage";
 import Template from "./Template";
 import "./theme.css";
+import "./class-theme.css";
 const UserProfileFormFields = lazy(
     () => import("keycloakify/login/UserProfileFormFields")
 );
@@ -25,7 +26,11 @@ export default function KcPage(props: { kcContext: KcContext }) {
                             <DefaultPage
                                 kcContext={kcContext}
                                 i18n={i18n}
-                                classes={classes}
+                                classes={
+                                    kcContext.themeName === "class"
+                                        ? classThemeClasses
+                                        : nexusThemeClasses
+                                }
                                 Template={Template}
                                 doUseDefaultCss={false}
                                 UserProfileFormFields={UserProfileFormFields}
@@ -38,7 +43,7 @@ export default function KcPage(props: { kcContext: KcContext }) {
     );
 }
 
-const classes = {
+const nexusThemeClasses = {
     kcBodyClass: "nexus-body",
     kcLoginClass: "nexus-login",
     kcHeaderClass: "nexus-header",
@@ -76,3 +81,42 @@ const classes = {
     kcLocaleItemClass: "nexus-locale__item",
     kcInputErrorMessageClass: "nexus-field__error"
 } satisfies { [key in ClassKey]?: string };
+
+const classThemeClasses = {
+    kcBodyClass: "class-body",
+    kcLoginClass: "class-login",
+    kcHeaderClass: "class-header",
+    kcHeaderWrapperClass: "class-header__name",
+    kcFormCardClass: "class-card",
+    kcFormHeaderClass: "class-card__header",
+    kcFormGroupClass: "class-field",
+    kcLabelClass: "class-label",
+    kcInputClass: "class-input",
+    kcInputGroup: "class-input-group",
+    kcFormSettingClass: "class-form-settings",
+    kcFormOptionsWrapperClass: "class-form-options",
+    kcFormPasswordVisibilityButtonClass: "class-password-toggle",
+    kcButtonClass: "class-button",
+    kcButtonBlockClass: "class-button--block",
+    kcButtonLargeClass: "class-button--large",
+    kcButtonPrimaryClass: "class-button--primary",
+    kcButtonSecondaryClass: "class-button--secondary",
+    kcButtonDefaultClass: "class-button--default",
+    kcAlertClass: "class-alert",
+    kcFeedbackErrorIcon: "class-feedback class-feedback--error",
+    kcFeedbackWarningIcon: "class-feedback class-feedback--warning",
+    kcFeedbackSuccessIcon: "class-feedback class-feedback--success",
+    kcFeedbackInfoIcon: "class-feedback class-feedback--info",
+    kcFormSocialAccountSectionClass: "class-social",
+    kcFormSocialAccountListClass: "class-social__list",
+    kcFormSocialAccountListButtonClass: "class-social__button",
+    kcFormSocialAccountNameClass: "class-social__name",
+    kcSignUpClass: "class-signup",
+    kcInfoAreaWrapperClass: "class-signup__inner",
+    kcLocaleMainClass: "class-locale",
+    kcLocaleDropDownClass: "class-locale__dropdown",
+    kcLocaleListClass: "class-locale__list",
+    kcLocaleListItemClass: "class-locale__list-item",
+    kcLocaleItemClass: "class-locale__item",
+    kcInputErrorMessageClass: "class-field__error"
+} satisfies { [key in ClassKey]?: string };

src/login/Template.tsx

@@ -5,39 +5,87 @@ import type { I18n } from "./i18n";
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
     const { msg } = props.i18n;
+    const isClassTheme = props.kcContext.themeName === "class";
 
     return (
         <>
-            <div className="nexus-atmosphere" aria-hidden="true">
+            {isClassTheme ? (
-                <div className="nexus-grid" />
+                <>
-                <div className="nexus-orbit nexus-orbit--outer">
+                    <div className="class-atmosphere" aria-hidden="true">
-                    <span className="nexus-orbit__node" />
+                        <span className="class-registration-mark class-registration-mark--top" />
-                </div>
+                        <span className="class-registration-mark class-registration-mark--bottom" />
-                <div className="nexus-orbit nexus-orbit--inner">
+                        <div className="class-mobile-brand">
-                    <span className="nexus-orbit__node" />
+                            <span>612</span>
-                </div>
+                            <b>{msg("classArchiveName")}</b>
-                <div className="nexus-core">
+                        </div>
-                    <span>N</span>
+                    </div>
-                </div>
-            </div>
 
-            <aside className="nexus-manifesto" aria-hidden="true">
+                    <aside className="class-record" aria-hidden="true">
-                <div className="nexus-wordmark">
+                        <div className="class-record__index">
-                    <span className="nexus-wordmark__signal" />
+                            <span>ARCHIVE NO. 612</span>
-                    NEXUS <b>/ ID</b>
+                            <span>{msg("classSchoolCohort")}</span>
-                </div>
+                        </div>
-                <div className="nexus-manifesto__copy">
+
-                    <p>{msg("nexusIdentityAccessLayer")}</p>
+                        <div className="class-record__copy">
-                    <h2>
+                            <p>{msg("classIdentityArchive")}</p>
-                        {msg("nexusSecureAccess")}
+                            <h2>
-                        <span>{msg("nexusPreciselyOrchestrated")}</span>
+                                {msg("classMemoriesRemain")}
-                    </h2>
+                                <span>{msg("classWelcomeBack")}</span>
-                </div>
+                            </h2>
-                <div className="nexus-system-status">
+                        </div>
-                    <span>{msg("nexusSecureChannel")}</span>
+
-                    <span className="nexus-system-status__state">{msg("nexusSystemOnline")}</span>
+                        <div className="class-record__ledger">
-                </div>
+                            <div>
-            </aside>
+                                <strong>1095+</strong>
+                                <span>{msg("classDaysTogether")}</span>
+                            </div>
+                            <div>
+                                <strong>612</strong>
+                                <span>{msg("classArchiveNumber")}</span>
+                            </div>
+                            <div>
+                                <strong>∞</strong>
+                                <span>{msg("classMomentsRemembered")}</span>
+                            </div>
+                        </div>
+
+                        <div className="class-record__stamp">612</div>
+                    </aside>
+                </>
+            ) : (
+                <>
+                    <div className="nexus-atmosphere" aria-hidden="true">
+                        <div className="nexus-grid" />
+                        <div className="nexus-orbit nexus-orbit--outer">
+                            <span className="nexus-orbit__node" />
+                        </div>
+                        <div className="nexus-orbit nexus-orbit--inner">
+                            <span className="nexus-orbit__node" />
+                        </div>
+                        <div className="nexus-core">
+                            <span>N</span>
+                        </div>
+                    </div>
+
+                    <aside className="nexus-manifesto" aria-hidden="true">
+                        <div className="nexus-wordmark">
+                            <span className="nexus-wordmark__signal" />
+                            NEXUS <b>/ ID</b>
+                        </div>
+                        <div className="nexus-manifesto__copy">
+                            <p>{msg("nexusIdentityAccessLayer")}</p>
+                            <h2>
+                                {msg("nexusSecureAccess")}
+                                <span>{msg("nexusPreciselyOrchestrated")}</span>
+                            </h2>
+                        </div>
+                        <div className="nexus-system-status">
+                            <span>{msg("nexusSecureChannel")}</span>
+                            <span className="nexus-system-status__state">{msg("nexusSystemOnline")}</span>
+                        </div>
+                    </aside>
+                </>
+            )}
 
             <BaseTemplate {...props} />
         </>

src/login/class-theme.css

@@ -0,0 +1,770 @@
+:root {
+    --class-ink: #18324a;
+    --class-muted: #617387;
+    --class-line: #b9cedd;
+    --class-paper: #f7fbff;
+    --class-surface: #ffffff;
+    --class-soft: #e5f3ff;
+    --class-blue: #3f7fd6;
+    --class-blue-deep: #2868c7;
+    --class-green: #23966f;
+    --class-sun: #f6c54c;
+    --class-coral: #f05a47;
+    --class-danger: #c93636;
+    --class-display: "Arial Narrow", "DIN Condensed", "Noto Sans SC", "Microsoft YaHei",
+        sans-serif;
+    --class-body-font: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
+    --class-utility: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
+}
+
+html.login-pf:has(body.class-body) {
+    min-height: 100%;
+    background: var(--class-paper);
+}
+
+body.class-body {
+    min-height: 100vh;
+    margin: 0;
+    overflow-x: hidden;
+    color: var(--class-ink);
+    background: var(--class-paper);
+    font-family: var(--class-body-font);
+    font-size: 15px;
+    line-height: 1.6;
+}
+
+.class-body button,
+.class-body input,
+.class-body select,
+.class-body textarea {
+    font: inherit;
+}
+
+.class-atmosphere {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    overflow: hidden;
+    pointer-events: none;
+    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: calc(52% + 24px) 24px;
+    background-size: 24px 24px;
+}
+
+.class-registration-mark {
+    position: absolute;
+    right: 24px;
+    width: 24px;
+    height: 24px;
+}
+
+.class-registration-mark::before,
+.class-registration-mark::after {
+    position: absolute;
+    background: var(--class-coral);
+    content: "";
+}
+
+.class-registration-mark::before {
+    top: 11px;
+    left: 0;
+    width: 24px;
+    height: 1px;
+}
+
+.class-registration-mark::after {
+    top: 0;
+    left: 11px;
+    width: 1px;
+    height: 24px;
+}
+
+.class-registration-mark--top {
+    top: 24px;
+}
+
+.class-registration-mark--bottom {
+    bottom: 24px;
+}
+
+.class-mobile-brand {
+    display: none;
+}
+
+.class-record {
+    position: fixed;
+    inset: 0 48% 0 0;
+    z-index: 1;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: clamp(32px, 4.5vw, 72px);
+    color: #f7faf8;
+    background: linear-gradient(rgba(247, 250, 248, 0.075) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(247, 250, 248, 0.075) 1px, transparent 1px),
+        var(--class-blue);
+    background-size: 44px 44px;
+}
+
+.class-record::before {
+    position: absolute;
+    right: clamp(28px, 4vw, 62px);
+    bottom: -0.18em;
+    color: rgba(255, 255, 255, 0.1);
+    font-family: var(--class-display);
+    font-size: clamp(16rem, 32vw, 37rem);
+    font-weight: 950;
+    letter-spacing: -0.12em;
+    line-height: 0.75;
+    content: "612";
+}
+
+.class-record::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 9px;
+    height: 100%;
+    background: linear-gradient(
+        to bottom,
+        var(--class-coral) 0 33.333%,
+        var(--class-sun) 33.333% 66.666%,
+        var(--class-green) 66.666%
+    );
+    content: "";
+}
+
+.class-record__index,
+.class-record__copy,
+.class-record__ledger,
+.class-record__stamp {
+    position: relative;
+    z-index: 1;
+}
+
+.class-record__index {
+    display: flex;
+    justify-content: space-between;
+    gap: 24px;
+    padding-bottom: 13px;
+    border-bottom: 1px solid rgba(247, 250, 248, 0.48);
+    color: rgba(247, 250, 248, 0.74);
+    font: 700 0.68rem/1.4 var(--class-utility);
+    letter-spacing: 0.08em;
+}
+
+.class-record__index span:first-child {
+    color: #ffffff;
+}
+
+.class-record__copy {
+    max-width: 700px;
+}
+
+.class-record__copy p {
+    margin: 0 0 18px;
+    color: var(--class-sun);
+    font: 700 0.72rem/1.5 var(--class-utility);
+    letter-spacing: 0.07em;
+}
+
+.class-record__copy h2 {
+    max-width: 7.8em;
+    margin: 0;
+    font-family: var(--class-display);
+    font-size: clamp(3.6rem, 6.5vw, 7.4rem);
+    font-weight: 950;
+    letter-spacing: -0.06em;
+    line-height: 0.92;
+}
+
+.class-record__copy h2 span {
+    display: block;
+}
+
+.class-record__copy h2::after {
+    display: block;
+    width: 70px;
+    height: 8px;
+    margin-top: 25px;
+    background: var(--class-coral);
+    content: "";
+}
+
+.class-record__ledger {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    border-top: 1px solid rgba(247, 250, 248, 0.48);
+    border-bottom: 1px solid rgba(247, 250, 248, 0.48);
+}
+
+.class-record__ledger div {
+    min-width: 0;
+    padding: 16px 16px 17px 0;
+}
+
+.class-record__ledger div + div {
+    padding-left: 16px;
+    border-left: 1px solid rgba(247, 250, 248, 0.48);
+}
+
+.class-record__ledger strong,
+.class-record__ledger span {
+    display: block;
+}
+
+.class-record__ledger strong {
+    font-family: var(--class-display);
+    font-size: clamp(1.8rem, 3vw, 3rem);
+    letter-spacing: -0.04em;
+    line-height: 1;
+}
+
+.class-record__ledger span {
+    margin-top: 7px;
+    color: rgba(247, 250, 248, 0.72);
+    font: 700 0.58rem/1.35 var(--class-utility);
+    letter-spacing: 0.05em;
+}
+
+.class-record__stamp {
+    position: absolute;
+    top: clamp(92px, 13vh, 140px);
+    right: clamp(32px, 5vw, 78px);
+    display: grid;
+    width: 72px;
+    height: 58px;
+    place-items: center;
+    color: #ffffff;
+    background: var(--class-coral);
+    font: 900 1.35rem/1 var(--class-utility);
+    letter-spacing: 0.04em;
+    transform: rotate(3deg);
+}
+
+.class-login {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    min-height: 100vh;
+    width: 48%;
+    margin-left: 52%;
+    flex-direction: column;
+    justify-content: center;
+    padding: clamp(42px, 6vw, 96px);
+}
+
+.class-header {
+    width: min(100%, 500px);
+    margin: 0 auto 13px;
+    padding: 0;
+    text-align: left;
+}
+
+.class-header__name#kc-header-wrapper {
+    padding: 0;
+    color: var(--class-muted);
+    background: none;
+    font: 700 0.68rem/1.5 var(--class-utility);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.class-header__name#kc-header-wrapper::before {
+    color: var(--class-blue-deep);
+    content: "ARCHIVE ACCESS / ";
+}
+
+.class-card {
+    position: relative;
+    width: min(100%, 500px);
+    margin: 0 auto;
+    padding: clamp(30px, 4vw, 50px);
+    border: 1px solid var(--class-ink);
+    border-radius: 0;
+    color: var(--class-ink);
+    background: var(--class-surface);
+    box-shadow: 16px 16px 0 var(--class-soft);
+}
+
+.class-card::before {
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    left: -1px;
+    height: 7px;
+    background: linear-gradient(
+        to right,
+        var(--class-blue) 0 54%,
+        var(--class-coral) 54% 72%,
+        var(--class-sun) 72% 88%,
+        var(--class-green) 88%
+    );
+    content: "";
+}
+
+.class-card__header {
+    margin-bottom: 30px;
+}
+
+.class-card__header #kc-page-title {
+    margin: 0;
+    color: var(--class-ink);
+    font-family: var(--class-display);
+    font-size: clamp(2.25rem, 3.8vw, 3.4rem);
+    font-weight: 950;
+    letter-spacing: -0.045em;
+    line-height: 1;
+    text-align: left;
+}
+
+.class-card__header #kc-page-title::after {
+    display: block;
+    width: 52px;
+    height: 6px;
+    margin-top: 16px;
+    background: var(--class-coral);
+    content: "";
+}
+
+.class-card a {
+    color: var(--class-blue-deep);
+    font-weight: 700;
+    text-decoration: none;
+}
+
+.class-card a:hover {
+    color: var(--class-coral);
+}
+
+.class-field {
+    margin: 0 0 21px;
+}
+
+.class-label {
+    display: inline-block;
+    margin-bottom: 8px;
+    color: var(--class-ink);
+    font-size: 0.78rem;
+    font-weight: 800;
+    letter-spacing: 0.025em;
+}
+
+.class-input,
+.class-card textarea.form-control,
+.class-card select.form-control {
+    width: 100%;
+    height: 48px;
+    padding: 0 14px;
+    border: 1px solid var(--class-line);
+    border-radius: 0;
+    color: var(--class-ink);
+    outline: 0;
+    background: #fbfdff;
+    box-shadow: none;
+    font-size: 0.94rem;
+    transition:
+        border-color 150ms ease,
+        box-shadow 150ms ease,
+        background 150ms ease;
+}
+
+.class-input:hover {
+    border-color: var(--class-ink);
+}
+
+.class-input:focus,
+.class-card textarea.form-control:focus,
+.class-card select.form-control:focus {
+    border-color: var(--class-blue-deep);
+    background: #ffffff;
+    box-shadow: inset 5px 0 0 var(--class-blue);
+}
+
+.class-input[aria-invalid="true"] {
+    border-color: var(--class-danger);
+    box-shadow: inset 5px 0 0 var(--class-danger);
+}
+
+.class-input-group {
+    display: flex;
+}
+
+.class-input-group .class-input {
+    border-right: 0;
+}
+
+.class-password-toggle,
+.class-input-group .pf-c-button.pf-m-control {
+    display: grid;
+    width: 48px;
+    min-width: 48px;
+    place-items: center;
+    border: 1px solid var(--class-line);
+    border-left: 0;
+    border-radius: 0;
+    color: var(--class-muted);
+    background: var(--class-soft);
+    cursor: pointer;
+}
+
+.class-password-toggle i::before {
+    content: "\25C9";
+    font-size: 0.85rem;
+}
+
+.class-field__error {
+    display: block;
+    margin-top: 7px;
+    color: var(--class-danger);
+    font-size: 0.78rem;
+    font-weight: 700;
+}
+
+.class-form-settings.class-field {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin: -1px 0 25px;
+    color: var(--class-muted);
+    font-size: 0.78rem;
+}
+
+.class-form-settings.class-field #kc-form-options,
+.class-form-settings.class-field > div {
+    width: auto;
+}
+
+.class-form-settings input[type="checkbox"] {
+    width: 15px;
+    height: 15px;
+    margin: 0 7px 0 0;
+    accent-color: var(--class-blue);
+    vertical-align: -2px;
+}
+
+.class-button {
+    min-height: 48px;
+    border: 1px solid var(--class-ink);
+    border-radius: 0;
+    color: var(--class-ink);
+    background: var(--class-soft);
+    box-shadow: none;
+    font-size: 0.84rem;
+    font-weight: 900;
+    letter-spacing: 0.035em;
+    transition:
+        color 150ms ease,
+        background 150ms ease,
+        transform 150ms ease;
+}
+
+.class-button--primary {
+    color: var(--class-ink);
+    background: var(--class-sun);
+}
+
+.class-button--block {
+    display: block;
+    width: 100%;
+}
+
+.class-button:hover:not(:disabled) {
+    color: #ffffff;
+    background: var(--class-blue-deep);
+    transform: translateX(4px);
+}
+
+.class-button:disabled {
+    cursor: wait;
+    opacity: 0.62;
+}
+
+.class-button:focus-visible,
+.class-card a:focus-visible,
+.class-card button:focus-visible,
+.class-card input:focus-visible {
+    outline: 3px solid rgba(240, 90, 71, 0.42);
+    outline-offset: 3px;
+}
+
+.class-alert {
+    display: flex;
+    gap: 10px;
+    margin: 0 0 24px;
+    padding: 12px 13px;
+    border: 1px solid var(--class-line);
+    border-left: 6px solid var(--class-blue);
+    border-radius: 0;
+    color: var(--class-ink);
+    background: var(--class-soft);
+    font-size: 0.82rem;
+}
+
+.class-alert.pf-m-danger {
+    border-left-color: var(--class-danger);
+    background: #fff1ef;
+}
+
+.class-alert.pf-m-success {
+    border-left-color: var(--class-green);
+    background: #eefaf5;
+}
+
+.class-feedback {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-top: 6px;
+    background: var(--class-blue);
+}
+
+.class-feedback--error,
+.class-feedback--warning {
+    background: var(--class-danger);
+}
+
+.class-feedback--success {
+    background: var(--class-green);
+}
+
+.class-social {
+    margin-top: 29px;
+}
+
+.class-social hr {
+    height: 1px;
+    margin: 0 0 23px;
+    border: 0;
+    background: var(--class-line);
+}
+
+.class-social h2 {
+    margin: 0 0 12px;
+    color: var(--class-muted);
+    font: 700 0.64rem/1.5 var(--class-utility);
+    letter-spacing: 0.07em;
+    text-align: left;
+    text-transform: uppercase;
+}
+
+.class-social__list,
+.class-social__list.pf-l-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.class-social__list li,
+.class-social__list .pf-l-grid__item {
+    width: auto;
+    max-width: none;
+}
+
+.class-social__button {
+    display: flex;
+    min-height: 42px;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 9px;
+    padding: 0 12px;
+    border: 1px solid var(--class-line);
+    border-radius: 0;
+    color: var(--class-ink);
+    background: #ffffff;
+    font-size: 0.78rem;
+}
+
+.class-social__button:hover {
+    border-color: var(--class-blue);
+    background: var(--class-soft);
+}
+
+.class-signup {
+    margin: 27px 0 0;
+    color: var(--class-muted);
+    font-size: 0.82rem;
+}
+
+.class-signup__inner {
+    padding: 0;
+    border: 0;
+    background: transparent;
+}
+
+.class-locale {
+    position: absolute;
+    top: 18px;
+    right: 18px;
+}
+
+.class-locale #kc-current-locale-link {
+    padding: 7px 10px;
+    border: 1px solid var(--class-line);
+    border-radius: 0;
+    color: var(--class-muted);
+    background: rgba(247, 251, 255, 0.94);
+    font: 700 0.66rem/1.4 var(--class-utility);
+}
+
+.class-locale__list {
+    right: 0;
+    left: auto;
+    min-width: 150px;
+    border: 1px solid var(--class-ink);
+    color: var(--class-ink);
+    background: #ffffff;
+    box-shadow: 8px 8px 0 var(--class-soft);
+}
+
+.class-locale__list:not([hidden]) {
+    position: absolute;
+    z-index: 10;
+    top: calc(100% + 6px);
+    display: none;
+    margin: 0;
+    padding: 6px;
+    list-style: none;
+}
+
+.class-locale__dropdown:hover .class-locale__list,
+.class-locale__dropdown:focus-within .class-locale__list {
+    display: block;
+}
+
+.class-locale__item {
+    display: block;
+    padding: 8px 10px;
+}
+
+#kc-username {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 11px 13px;
+    border: 1px solid var(--class-line);
+    background: var(--class-soft);
+}
+
+.class-card .select-auth-container,
+.class-card .pf-c-tile,
+.class-card .kc-recovery-codes-list {
+    color: var(--class-ink);
+}
+
+.class-card .select-auth-box-parent,
+.class-card .pf-c-tile {
+    border-color: var(--class-line);
+    border-radius: 0;
+    background: #ffffff;
+}
+
+@media (max-width: 1020px) {
+    .class-record {
+        inset: 0 54% 0 0;
+    }
+
+    .class-login {
+        width: 54%;
+        margin-left: 46%;
+        padding: 56px 38px;
+    }
+
+    .class-record__ledger span {
+        font-size: 0.52rem;
+    }
+}
+
+@media (max-width: 840px) {
+    .class-record {
+        display: none;
+    }
+
+    .class-atmosphere {
+        background-position: 0 0;
+    }
+
+    .class-mobile-brand {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        display: flex;
+        width: max-content;
+        align-items: center;
+        gap: 10px;
+        color: var(--class-ink);
+        font: 800 0.72rem/1.3 var(--class-utility);
+        letter-spacing: 0.04em;
+        white-space: nowrap;
+    }
+
+    .class-mobile-brand > span {
+        display: grid;
+        width: 40px;
+        height: 32px;
+        place-items: center;
+        color: #ffffff;
+        background: var(--class-coral);
+    }
+
+    .class-mobile-brand b {
+        flex: none;
+    }
+
+    .class-login {
+        width: 100%;
+        margin-left: 0;
+        padding: 88px 24px 44px;
+    }
+
+    .class-header,
+    .class-card {
+        width: min(100%, 540px);
+    }
+}
+
+@media (max-width: 560px) {
+    .class-login {
+        justify-content: flex-start;
+        padding: 82px 16px 30px;
+    }
+
+    .class-card {
+        padding: 31px 22px 28px;
+        box-shadow: 9px 9px 0 var(--class-soft);
+    }
+
+    .class-card__header #kc-page-title {
+        font-size: 2.35rem;
+    }
+
+    .class-social__list,
+    .class-social__list.pf-l-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .class-form-settings.class-field {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 9px;
+    }
+
+    .class-registration-mark {
+        display: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .class-body *,
+    .class-body *::before,
+    .class-body *::after {
+        scroll-behavior: auto !important;
+        transition-duration: 0.01ms !important;
+    }
+}

src/login/i18n.ts

@@ -11,21 +11,45 @@ const { useI18n, ofTypeI18n } = i18nBuilder
             nexusSecureAccess: "Secure access.",
             nexusPreciselyOrchestrated: "Precisely orchestrated.",
             nexusSecureChannel: "SECURE CHANNEL",
-            nexusSystemOnline: "SYSTEM ONLINE"
+            nexusSystemOnline: "SYSTEM ONLINE",
+            classArchiveName: "GAOPING NO.1 · CLASS 612",
+            classSchoolCohort: "CLASS OF 2024 · GAOPING NO.1",
+            classIdentityArchive: "CLASS MEMORY · IDENTITY ARCHIVE",
+            classMemoriesRemain: "The memories remain.",
+            classWelcomeBack: "Welcome back.",
+            classDaysTogether: "DAYS TOGETHER",
+            classArchiveNumber: "ARCHIVE NUMBER",
+            classMomentsRemembered: "MOMENTS REMEMBERED"
         },
         "zh-CN": {
             nexusIdentityAccessLayer: "身份访问层",
             nexusSecureAccess: "安全访问。",
             nexusPreciselyOrchestrated: "精准编排。",
             nexusSecureChannel: "安全通道",
-            nexusSystemOnline: "系统在线"
+            nexusSystemOnline: "系统在线",
+            classArchiveName: "高平一中 · 612班",
+            classSchoolCohort: "2024届 · 高平一中",
+            classIdentityArchive: "班级记忆 · 身份档案",
+            classMemoriesRemain: "记忆仍在，",
+            classWelcomeBack: "欢迎回来。",
+            classDaysTogether: "一起经过的日子",
+            classArchiveNumber: "班级档案编号",
+            classMomentsRemembered: "还会被想起的瞬间"
         },
         "zh-TW": {
             nexusIdentityAccessLayer: "身分存取層",
             nexusSecureAccess: "安全存取。",
             nexusPreciselyOrchestrated: "精準編排。",
             nexusSecureChannel: "安全通道",
-            nexusSystemOnline: "系統在線"
+            nexusSystemOnline: "系統在線",
+            classArchiveName: "高平一中 · 612班",
+            classSchoolCohort: "2024屆 · 高平一中",
+            classIdentityArchive: "班級記憶 · 身分檔案",
+            classMemoriesRemain: "記憶仍在，",
+            classWelcomeBack: "歡迎回來。",
+            classDaysTogether: "一起經過的日子",
+            classArchiveNumber: "班級檔案編號",
+            classMomentsRemembered: "還會被想起的瞬間"
         }
     })
     .build();

src/login/pages/Login.stories.tsx

@@ -36,6 +36,17 @@ export const TraditionalChinese: Story = {
     )
 };
 
+export const ClassTheme: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                themeName: "class",
+                locale: { currentLanguageTag: "zh-CN" }
+            }}
+        />
+    )
+};
+
 export const WithInvalidCredential: Story = {
     render: () => (
         <KcPageStory

vite.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
     plugins: [
         react(),
         keycloakify({
+            themeName: ["keycloakify-starter", "class"],
             accountThemeImplementation: "Single-Page"
         })
     ]