feat(): support theme variant

Author: weareoutman

etc/runtime.api.md

@@ -38,6 +38,7 @@ import type { RuntimeSnippet } from '@next-core/types';
 import type { RuntimeStoryboard } from '@next-core/types';
 import type { SiteMode } from '@next-core/types';
 import type { SiteTheme } from '@next-core/types';
+import type { SiteVariant } from '@next-core/types';
 import type { SlotConfOfRoutes } from '@next-core/types';
 import type { StaticMenuConf } from '@next-core/types';
 import type { Storyboard } from '@next-core/types';
@@ -232,6 +233,9 @@ function getRenderId(): string | undefined;
 // @public (undocumented)
 export const getRuntime: () => Runtime;
 
+// @public (undocumented)
+export function getThemeVariant(): SiteVariant;
+
 // Warning: (ae-forgotten-export) The symbol "Kit" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)

packages/runtime/src/index.ts

@@ -25,6 +25,7 @@ export {
   getCssPropertyValue,
   getCurrentTheme,
   getCurrentMode,
+  getThemeVariant,
   batchSetAppsLocalTheme,
   applyTheme,
 } from "./themeAndMode.js";

packages/runtime/src/internal/Router.ts

@@ -30,6 +30,7 @@ import {
   getLocalAppsTheme,
   setMode,
   setTheme,
+  setThemeVariant,
 } from "../themeAndMode.js";
 import {
   _internalApiGetAppInBootstrapData,
@@ -404,6 +405,7 @@ export class Router {
         "light"
     );
     setMode("default");
+    setThemeVariant(getRuntime().getMiscSettings().globalThemeVariant);
 
     if (currentApp && !blocked) {
       hooks?.checkInstalledApps?.preCheckInstalledApps(

packages/runtime/src/themeAndMode.spec.ts

@@ -7,6 +7,8 @@ import {
   applyMode as _applyMode,
   getLocalAppsTheme,
   batchSetAppsLocalTheme,
+  setThemeVariant as _setThemeVariant,
+  getThemeVariant as _getThemeVariant,
 } from "./themeAndMode.js";
 
 jest.spyOn(console, "error").mockImplementation();
@@ -145,3 +147,40 @@ describe("app themes", () => {
     ]);
   });
 });
+
+describe("variant", () => {
+  let setThemeVariant: typeof _setThemeVariant;
+  let getThemeVariant: typeof _getThemeVariant;
+
+  beforeEach(() => {
+    jest.resetModules();
+    document.documentElement.dataset.variant = "default";
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const m = require("./themeAndMode");
+    setThemeVariant = m.setThemeVariant;
+    getThemeVariant = m.getThemeVariant;
+  });
+
+  test("should set theme variant", () => {
+    expect(getThemeVariant()).toEqual("default");
+    expect(document.documentElement.dataset.variant).toBe("default");
+    setThemeVariant("elevo");
+    expect(getThemeVariant()).toEqual("elevo");
+    expect(document.documentElement.dataset.variant).toBe("elevo");
+  });
+
+  test("should apply the current theme variant", () => {
+    expect(getThemeVariant()).toEqual("default");
+    expect(document.documentElement.dataset.variant).toBe("default");
+    setThemeVariant("elevo");
+    expect(document.documentElement.dataset.variant).toBe("elevo");
+  });
+
+  test("should apply the specified theme variant", () => {
+    expect(getThemeVariant()).toEqual("default");
+    expect(document.documentElement.dataset.variant).toBe("default");
+    setThemeVariant("elevo");
+    expect(getThemeVariant()).toEqual("elevo");
+    expect(document.documentElement.dataset.variant).toBe("elevo");
+  });
+});

packages/runtime/src/themeAndMode.ts

@@ -1,4 +1,4 @@
-import type { SiteMode, SiteTheme } from "@next-core/types";
+import type { SiteMode, SiteTheme, SiteVariant } from "@next-core/types";
 import { JsonStorage } from "@next-core/utils/general";
 
 interface AppThemes {
@@ -101,3 +101,24 @@ export function getCssPropertyValue(
   if (!el) return "";
   return window.getComputedStyle(el)?.getPropertyValue(name) || "";
 }
+
+let variant: SiteVariant = "default";
+
+export function setThemeVariant(value: unknown) {
+  if (value !== "default" && value !== "elevo") {
+    return setThemeVariant("default");
+  }
+  if (variant === value) {
+    return;
+  }
+  document.documentElement.dataset.variant = variant = value;
+  window.dispatchEvent(
+    new CustomEvent("variant.change", {
+      detail: value,
+    })
+  );
+}
+
+export function getThemeVariant(): SiteVariant {
+  return variant;
+}

packages/theme/src/elevo.css

@@ -0,0 +1,17 @@
+:root {
+  --elevo-color-brand-rgb-channel: 37, 64, 255;
+  --elevo-color-brand: #2540ff;
+  --elevo-color-brand-hover: #5166ff;
+  --elevo-color-brand-active: #1e33cc;
+  --elevo-border-color: #ccd1de;
+  --elevo-border-radius: 8px;
+  --elevo-divider-color: rgba(222, 222, 223, 0.6);
+
+  --elevo-component-background: rgba(255, 255, 255, 0.73);
+  --elevo-component-backdrop-filter: blur(33px);
+
+  --elevo-input-background: rgba(255, 255, 255, 0.8);
+  --elevo-input-box-shadow: inset 0px -1px 3px 0px
+    rgba(var(--elevo-color-brand-rgb-channel), 0.5);
+  --elevo-placeholder-color: rgba(0, 10, 26, 0.26);
+}

packages/theme/src/index.css

@@ -5,3 +5,4 @@
 @import "./business-variables.css";
 @import "./editor-bricks-variables.css";
 @import "./version/index.css";
+@import "./elevo.css";

packages/types/src/manifest.ts

@@ -1618,6 +1618,11 @@ export type SiteTheme = "light" | "dark" | "dark-v2";
  */
 export type SiteMode = "default" | "dashboard";
 
+/**
+ * 站点变体。
+ */
+export type SiteVariant = "default" | "elevo";
+
 /**
  * 国际化数据，以语言为键、文本内容为值的键值对。
  */