@@ -166,9 +166,9 @@ export function Footer({
height={32}
className="rounded-xl shadow-lg shadow-blue-500/25"
/>
- SubBoost
+ SubBoost
-
{SUBBOOST_FOOTER_DESCRIPTION}
+
{SUBBOOST_FOOTER_DESCRIPTION}
{brandLinks.length > 0 && (
{brandLinks.map((link) => (
@@ -189,7 +189,7 @@ export function Footer({
-
功能
+
功能
{visibleFeatureLinks.map((link) => (
@@ -200,7 +200,7 @@ export function Footer({
-
帮助
+
帮助
{visibleHelpLinks.map((link) => (
@@ -211,7 +211,7 @@ export function Footer({
-
相关资源
+
相关资源
{visibleResourceLinks.map((link) => (
@@ -222,8 +222,8 @@ export function Footer({
-
+
+
Powered by SubBoost{buildVersion ? ` | v ${buildVersion}` : ""}
diff --git a/packages/ui/src/components/layout/header.test.ts b/packages/ui/src/components/layout/header.test.ts
index 0caa5bc4..c6e18edd 100644
--- a/packages/ui/src/components/layout/header.test.ts
+++ b/packages/ui/src/components/layout/header.test.ts
@@ -71,6 +71,13 @@ vi.mock("@subboost/ui/components/auth/user-menu", async () => {
};
});
+vi.mock("@subboost/ui/components/layout/theme-toggle", async () => {
+ const ReactModule = await import("react");
+ return {
+ ThemeToggle: () => ReactModule.createElement("button", null, "theme-toggle"),
+ };
+});
+
vi.mock("@subboost/ui/store/config-store/auth-handoff", () => ({
captureAuthConfigHandoff: mocks.captureAuthConfigHandoff,
}));
@@ -121,7 +128,17 @@ describe("Header", () => {
expect(html).toContain("FAQ");
expect(html).not.toContain("我的订阅");
expect(html).toContain("menu-icon");
- expect(mocks.userMenuProps[0]).toEqual({ privilegedMenuItem: undefined });
+ expect(mocks.userMenuProps[0]).toEqual({ privilegedMenuItem: undefined, compactAtTablet: true });
+ });
+
+ it("places the theme toggle before the user menu unless the shell hides it", () => {
+ const html = renderHeader();
+ expect(html.indexOf("theme-toggle")).toBeGreaterThan(-1);
+ expect(html.indexOf("theme-toggle")).toBeLessThan(html.indexOf("user-menu"));
+ expect(mocks.userMenuProps[0].compactAtTablet).toBe(true);
+
+ expect(renderHeader({ themeToggle: false })).not.toContain("theme-toggle");
+ expect(mocks.userMenuProps[0].compactAtTablet).toBe(false);
});
it("renders local navigation without default-only privileged links", () => {
@@ -191,6 +208,25 @@ describe("Header", () => {
expect(stateMock.setter).toHaveBeenCalledWith(false);
});
+ it.each([
+ { mode: "default", user: { isAdmin: true }, tabletMenu: true },
+ { mode: "default", user: { isAdmin: false }, tabletMenu: false },
+ { mode: "default", user: { isAdmin: true, isBanned: true }, tabletMenu: false },
+ { mode: "local", user: { isAdmin: true }, tabletMenu: false },
+ { mode: "default", user: null, tabletMenu: false },
+ ] as const)("uses the tablet menu only for visible privileged navigation: $mode / $user", ({ mode, user, tabletMenu }) => {
+ mocks.userState = { user };
+ const html = renderHeader({ mode, privilegedMenuItem: { href: adminPath, label: "管理" } as any }, true);
+ const desktop = html.match(/
link.href === adminPath && typeof link.onClick === "function")).toBe(true);
+ });
+
it("captures guest draft state before mobile login navigation", () => {
const html = renderHeader({}, true);
diff --git a/packages/ui/src/components/layout/header.tsx b/packages/ui/src/components/layout/header.tsx
index d7c75e5d..0c3d1b08 100644
--- a/packages/ui/src/components/layout/header.tsx
+++ b/packages/ui/src/components/layout/header.tsx
@@ -18,6 +18,7 @@ import {
import { cn } from "@subboost/ui/lib/utils";
import { IconButton } from "@subboost/ui/components/ui/icon-button";
import { UserMenu, type AccountMenuItem } from "@subboost/ui/components/auth/user-menu";
+import { ThemeToggle } from "@subboost/ui/components/layout/theme-toggle";
import { captureAuthConfigHandoff } from "@subboost/ui/store/config-store/auth-handoff";
import { useConfigStore } from "@subboost/ui/store/config-store";
import { useUserStore } from "@subboost/ui/store/user-store";
@@ -63,8 +64,8 @@ function BrandBadge({ badge, tone = "default" }: { badge: HeaderBrandBadge; tone
const className = cn(
"inline-flex w-fit items-center rounded-full border px-1.5 py-[2px] text-[0.68rem] font-medium leading-none backdrop-blur-sm",
tone === "new"
- ? "border-emerald-300/30 bg-emerald-400/12 text-emerald-100/90 shadow-[0_0_12px_rgba(52,211,153,0.16)]"
- : "border-sky-300/25 bg-sky-400/10 text-sky-100/80 shadow-[0_0_12px_rgba(56,189,248,0.16)]"
+ ? "border-emerald-300/30 bg-emerald-400/12 text-badge-new-fg shadow-[0_0_12px_rgba(52,211,153,0.16)]"
+ : "border-sky-300/25 bg-sky-400/10 text-badge-mode-fg shadow-[0_0_12px_rgba(56,189,248,0.16)]"
);
if (badge.href) {
@@ -74,7 +75,7 @@ function BrandBadge({ badge, tone = "default" }: { badge: HeaderBrandBadge; tone
href={badge.href}
target="_blank"
rel="noopener noreferrer"
- className={cn(className, "transition-colors hover:text-white")}
+ className={cn(className, "transition-colors hover:text-fg")}
title={badge.title}
aria-label={badge.ariaLabel}
>
@@ -86,7 +87,7 @@ function BrandBadge({ badge, tone = "default" }: { badge: HeaderBrandBadge; tone
return (
+
{/* Logo */}
@@ -138,7 +143,7 @@ export function Header({
height={36}
className="rounded-xl shadow-lg shadow-blue-500/25 transition-shadow group-hover:shadow-blue-500/40"
/>
-
+
SubBoost
@@ -149,7 +154,7 @@ export function Header({
{/* Desktop Navigation */}
-
+
{visibleNavItems.map((item) => {
const isActive = isNavItemActive(pathname, item.href);
return (
@@ -159,11 +164,11 @@ export function Header({
className={cn(
"inline-flex items-center gap-2 whitespace-nowrap rounded-full px-3.5 py-2 text-sm font-medium transition-all duration-200",
isActive
- ? "border border-white/10 bg-white/10 text-white shadow-[0_10px_30px_rgba(15,23,42,0.22)]"
- : "text-white/60 hover:bg-white/5 hover:text-white"
+ ? "border border-seg-active-border bg-seg-active text-seg-active-fg shadow-(--seg-active-shadow)"
+ : "text-fg-60 hover:bg-ink/5 hover:text-fg"
)}
>
-
+ {themeToggle && setMobileMenuOpen(!mobileMenuOpen)}
>
{mobileMenuOpen ? (
-
@@ -209,7 +216,7 @@ export function Header({
{/* Mobile Navigation */}
{mobileMenuOpen && (
-
+
{visibleNavItems.map((item) => {
const isActive = isNavItemActive(pathname, item.href);
@@ -221,8 +228,8 @@ export function Header({
className={cn(
"flex items-center gap-3 px-4 py-3 rounded-lg text-sm transition-colors",
isActive
- ? "text-white bg-white/5"
- : "text-white/60 hover:text-white hover:bg-white/5"
+ ? "text-fg bg-ink/5"
+ : "text-fg-60 hover:text-fg hover:bg-ink/5"
)}
>
@@ -79,7 +79,7 @@ export function MobileNav({ mode = "default" }: { mode?: "default" | "local" })
}}
className={cn(
"flex flex-col items-center justify-center gap-1 w-full h-full transition-colors",
- isActive ? "text-indigo-400" : "text-white/40 hover:text-white/60"
+ isActive ? "text-indigo-400" : "text-fg-40 hover:text-fg-60"
)}
>
();
+ return {
+ ...actual,
+ useState: () => [mocks.theme, mocks.setTheme],
+ useEffect: (effect: () => void | (() => void)) => {
+ mocks.effects.push(effect);
+ },
+ };
+});
+
+vi.mock("lucide-react", async () => {
+ const ReactModule = await import("react");
+ return {
+ Sun: (props: any) => ReactModule.createElement("svg", { className: props.className, "data-icon": "sun" }),
+ Moon: (props: any) => ReactModule.createElement("svg", { className: props.className, "data-icon": "moon" }),
+ };
+});
+
+vi.mock("@subboost/ui/components/ui/icon-button", async () => {
+ const ReactModule = await import("react");
+ return {
+ IconButton: ({ label, title, children, ...props }: any) => {
+ mocks.buttonProps = { label, title, ...props };
+ return ReactModule.createElement(
+ "button",
+ { "aria-label": label, title, "aria-pressed": props["aria-pressed"], className: props.className },
+ children
+ );
+ },
+ };
+});
+
+vi.mock("@subboost/ui/theme/theme", async (importOriginal) => {
+ const actual = await importOriginal();
+ return {
+ ...actual,
+ applyTheme: mocks.applyTheme,
+ persistTheme: mocks.persistTheme.mockImplementation(actual.persistTheme),
+ getCurrentTheme: () => mocks.currentTheme,
+ };
+});
+
+import { ThemeToggle } from "./theme-toggle";
+
+function render(theme: "dark" | "light") {
+ mocks.theme = theme;
+ mocks.effects = [];
+ return renderToStaticMarkup(React.createElement(ThemeToggle));
+}
+
+function installBrowser({
+ stored,
+ system = "dark",
+ api = "modern",
+ storageFailure,
+}: {
+ stored?: string;
+ system?: "dark" | "light";
+ api?: "modern" | "legacy" | "missing" | "throws";
+ storageFailure?: "getter" | "read" | "write";
+} = {}) {
+ const values = new Map(stored ? [["subboost-theme", stored]] : []);
+ const localStorage = {
+ getItem: vi.fn((key: string) => {
+ if (storageFailure === "read") throw new Error("blocked read");
+ return values.get(key) ?? null;
+ }),
+ setItem: vi.fn((key: string, value: string) => {
+ if (storageFailure === "write") throw new Error("blocked write");
+ values.set(key, value);
+ }),
+ };
+ const storageListeners = new Map void>();
+ const mediaListeners = new Set<() => void>();
+ const addMedia = vi.fn((...args: any[]) => mediaListeners.add(args.at(-1)));
+ const removeMedia = vi.fn((...args: any[]) => mediaListeners.delete(args.at(-1)));
+ const media = {
+ matches: system === "light",
+ ...(api === "modern" ? { addEventListener: addMedia, removeEventListener: removeMedia } : {}),
+ ...(api === "legacy" ? { addListener: addMedia, removeListener: removeMedia } : {}),
+ };
+ const browser = {
+ get localStorage() {
+ if (storageFailure === "getter") throw new Error("blocked getter");
+ return localStorage;
+ },
+ addEventListener: vi.fn((name: string, listener: (event: any) => void) => storageListeners.set(name, listener)),
+ removeEventListener: vi.fn((name: string) => storageListeners.delete(name)),
+ ...(api === "missing" ? {} : {
+ matchMedia: vi.fn(() => {
+ if (api === "throws") throw new Error("unavailable system API");
+ return media;
+ }),
+ }),
+ };
+ vi.stubGlobal("window", browser);
+ return {
+ browser, localStorage, addMedia, removeMedia, mediaListeners, storageListeners,
+ systemChange: (theme: "dark" | "light") => {
+ media.matches = theme === "light";
+ for (const listener of mediaListeners) listener();
+ },
+ storageEvent: (event: any) => storageListeners.get("storage")!(event),
+ };
+}
+
+function mount() {
+ render("dark");
+ return mocks.effects[0]() as () => void;
+}
+
+describe("ThemeToggle", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mocks.currentTheme = "dark";
+ mocks.applyTheme.mockImplementation((theme) => { mocks.currentTheme = theme; });
+ installBrowser();
+ });
+
+ afterEach(() => {
+ vi.unstubAllGlobals();
+ });
+
+ it("exposes a stable name, pressed state and both icons in dark", () => {
+ const html = render("dark");
+
+ expect(html).toContain('aria-label="浅色主题"');
+ expect(html).toContain('aria-pressed="false"');
+ expect(html).toContain('title="切换到浅色"');
+ expect(html).toContain('data-icon="sun"');
+ expect(html).toContain('data-icon="moon"');
+ expect(html).toContain("theme-when-dark");
+ expect(html).toContain("theme-when-light");
+ expect(mocks.buttonProps.variant).toBe("ghost");
+ });
+
+ it("reports the light state", () => {
+ const html = render("light");
+
+ expect(html).toContain('aria-pressed="true"');
+ expect(html).toContain('title="切换到深色"');
+ });
+
+ it("toggles, applies and stores the next theme", () => {
+ render("dark");
+ mocks.buttonProps.onClick();
+ expect(mocks.applyTheme).toHaveBeenCalledWith("light");
+ expect(mocks.persistTheme).toHaveBeenCalledWith("light");
+ expect(mocks.setTheme).toHaveBeenCalledWith("light");
+
+ mocks.currentTheme = "light";
+ mocks.buttonProps.onClick();
+ expect(mocks.applyTheme).toHaveBeenLastCalledWith("dark");
+ expect(mocks.persistTheme).toHaveBeenLastCalledWith("dark");
+ });
+
+ it("applies the stored choice on mount, synchronizing meta and state", () => {
+ const browser = installBrowser({ stored: "light", system: "dark" });
+ const cleanup = mount();
+ expect(mocks.applyTheme).toHaveBeenCalledWith("light");
+ expect(mocks.setTheme).toHaveBeenCalledWith("light");
+ browser.systemChange("light");
+ browser.systemChange("dark");
+ expect(mocks.applyTheme).toHaveBeenCalledTimes(1);
+ cleanup();
+ });
+
+ it.each(["light", "dark"] as const)("follows initial and live system %s without persisting", (system) => {
+ const browser = installBrowser({ system });
+ mount();
+ expect(mocks.currentTheme).toBe(system);
+ browser.systemChange(system === "light" ? "dark" : "light");
+ expect(mocks.currentTheme).toBe(system === "light" ? "dark" : "light");
+ expect(mocks.persistTheme).not.toHaveBeenCalled();
+ expect(browser.localStorage.setItem).not.toHaveBeenCalled();
+ });
+
+ it("treats an invalid stored value as system-following", () => {
+ const browser = installBrowser({ stored: "system", system: "light" });
+ mount();
+ expect(mocks.currentTheme).toBe("light");
+ browser.systemChange("dark");
+ expect(mocks.currentTheme).toBe("dark");
+ });
+
+ it("keeps a successful manual choice when the system changes", () => {
+ const browser = installBrowser({ system: "light" });
+ mount();
+ mocks.buttonProps.onClick();
+ expect(mocks.currentTheme).toBe("dark");
+ expect(browser.localStorage.getItem("subboost-theme")).toBe("dark");
+ browser.systemChange("dark");
+ browser.systemChange("light");
+ expect(mocks.currentTheme).toBe("dark");
+ });
+
+ it.each(["getter", "read", "write"] as const)("keeps the current-page manual choice if storage %s fails", (storageFailure) => {
+ const browser = installBrowser({ system: "light", storageFailure });
+ expect(mount).not.toThrow();
+ expect(mocks.currentTheme).toBe("light");
+ expect(() => mocks.buttonProps.onClick()).not.toThrow();
+ expect(mocks.currentTheme).toBe("dark");
+ browser.systemChange("dark");
+ browser.systemChange("light");
+ expect(mocks.currentTheme).toBe("dark");
+ });
+
+ it("syncs other tabs' manual choices and ignores later system changes", () => {
+ const browser = installBrowser({ system: "light" });
+ mount();
+ browser.storageEvent({ key: "subboost-theme", newValue: "dark", storageArea: browser.localStorage });
+ expect(mocks.applyTheme).toHaveBeenLastCalledWith("dark");
+ expect(mocks.setTheme).toHaveBeenLastCalledWith("dark");
+ browser.systemChange("dark");
+ browser.systemChange("light");
+ expect(mocks.currentTheme).toBe("dark");
+ });
+
+ it.each([
+ { key: "subboost-theme", newValue: null },
+ { key: "subboost-theme", newValue: "invalid" },
+ { key: null, newValue: null },
+ ])("resumes system-following after another tab clears or invalidates the choice: %j", (event) => {
+ const browser = installBrowser({ system: "light", stored: "dark" });
+ mount();
+ browser.storageEvent(event);
+ expect(mocks.currentTheme).toBe("light");
+ browser.systemChange("dark");
+ expect(mocks.currentTheme).toBe("dark");
+ expect(mocks.persistTheme).not.toHaveBeenCalled();
+ });
+
+ it("ignores unrelated keys, session storage, and unverifiable storage events", () => {
+ const browser = installBrowser({ system: "light" });
+ mount();
+ browser.storageEvent({ key: "other-key", newValue: "dark" });
+ browser.storageEvent({ key: "subboost-theme", newValue: "dark", storageArea: {} });
+ expect(mocks.currentTheme).toBe("light");
+
+ const blocked = installBrowser({ system: "light", storageFailure: "getter" });
+ mount();
+ blocked.storageEvent({ key: "subboost-theme", newValue: "dark", storageArea: blocked.localStorage });
+ expect(mocks.currentTheme).toBe("light");
+ });
+
+ it.each(["modern", "legacy"] as const)("cleans up %s system and storage listeners on unmount", (api) => {
+ const browser = installBrowser({ api, system: "light" });
+ const cleanup = mount();
+ expect(browser.addMedia).toHaveBeenCalledTimes(1);
+ browser.systemChange("dark");
+ expect(mocks.currentTheme).toBe("dark");
+ cleanup();
+ expect(browser.removeMedia).toHaveBeenCalledTimes(1);
+ expect(browser.browser.removeEventListener).toHaveBeenCalledWith("storage", expect.any(Function));
+ expect(browser.mediaListeners.size).toBe(0);
+ expect(browser.storageListeners.size).toBe(0);
+ browser.systemChange("light");
+ expect(mocks.currentTheme).toBe("dark");
+ });
+
+ it.each(["missing", "throws"] as const)("falls back safely if the system API is %s", (api) => {
+ installBrowser({ api });
+ const cleanup = mount();
+ expect(mocks.currentTheme).toBe("dark");
+ mocks.buttonProps.onClick();
+ expect(mocks.currentTheme).toBe("light");
+ expect(cleanup).not.toThrow();
+ });
+});
diff --git a/packages/ui/src/components/layout/theme-toggle.tsx b/packages/ui/src/components/layout/theme-toggle.tsx
new file mode 100644
index 00000000..9d2701fd
--- /dev/null
+++ b/packages/ui/src/components/layout/theme-toggle.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { IconButton } from "@subboost/ui/components/ui/icon-button";
+import {
+ applyTheme,
+ DEFAULT_THEME,
+ getCurrentTheme,
+ getSystemTheme,
+ getSystemThemeQuery,
+ parseTheme,
+ persistTheme,
+ readStoredTheme,
+ THEME_STORAGE_KEY,
+ type ThemeName,
+} from "@subboost/ui/theme/theme";
+
+export function ThemeToggle() {
+ const [theme, setTheme] = React.useState(DEFAULT_THEME);
+ const manualTheme = React.useRef(null);
+
+ React.useEffect(() => {
+ manualTheme.current = readStoredTheme();
+ const syncTheme = (next: ThemeName) => {
+ applyTheme(next);
+ setTheme(next);
+ };
+ // The init script may run before
+
+ );
+}
diff --git a/packages/ui/src/components/subscription/smart-node-matching-help.tsx b/packages/ui/src/components/subscription/smart-node-matching-help.tsx
index cee44325..3c2d3d64 100644
--- a/packages/ui/src/components/subscription/smart-node-matching-help.tsx
+++ b/packages/ui/src/components/subscription/smart-node-matching-help.tsx
@@ -19,17 +19,17 @@ export function SmartNodeMatchingHelp({ enabled }: Props) {
label="更新时智能匹配节点说明"
side="bottom"
align="start"
- contentClassName="w-[340px] max-w-[calc(100vw-2rem)] bg-black/90 p-3"
+ contentClassName="w-[340px] max-w-[calc(100vw-2rem)] bg-shade/90 p-3"
>
-
+
{enabled ? ENABLED_DESCRIPTION : DISABLED_DESCRIPTION}
-
{SUMMARY_DESCRIPTION}
+
{SUMMARY_DESCRIPTION}
);
diff --git a/packages/ui/src/components/ui/artistic-nav.ts b/packages/ui/src/components/ui/artistic-nav.ts
index a2e041e1..b4811114 100644
--- a/packages/ui/src/components/ui/artistic-nav.ts
+++ b/packages/ui/src/components/ui/artistic-nav.ts
@@ -8,15 +8,15 @@ const artisticNavItemSizeClassNames: Record = {
};
const artisticNavItemBaseClassName =
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full border border-transparent font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/50 disabled:pointer-events-none disabled:opacity-50";
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full border border-transparent font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:pointer-events-none disabled:opacity-50";
const artisticNavItemActiveClassName =
- "border-white/10 bg-white/10 text-white shadow-[0_10px_30px_rgba(15,23,42,0.22)]";
+ "border-seg-active-border bg-seg-active text-seg-active-fg shadow-(--seg-active-shadow)";
-const artisticNavItemInactiveClassName = "text-white/60 hover:bg-white/5 hover:text-white";
+const artisticNavItemInactiveClassName = "text-fg-60 hover:bg-ink/5 hover:text-fg";
export const artisticNavContainerClassName =
- "inline-flex items-center gap-1 rounded-full border border-white/10 bg-white/[0.04] p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] backdrop-blur-sm";
+ "inline-flex items-center gap-1 rounded-full border border-seg-track-border bg-seg-track p-1 shadow-(--seg-track-shadow) backdrop-blur-sm";
export const artisticTabsListClassName = cn(artisticNavContainerClassName, "h-auto");
@@ -25,11 +25,11 @@ export const artisticTabsTriggerClassName = cn(
artisticNavItemBaseClassName,
artisticNavItemSizeClassNames.md,
artisticNavItemInactiveClassName,
- "data-[state=active]:border-white/10 data-[state=active]:bg-white/10 data-[state=active]:text-white data-[state=active]:shadow-[0_10px_30px_rgba(15,23,42,0.22)]"
+ "data-[state=active]:border-seg-active-border data-[state=active]:bg-seg-active data-[state=active]:text-seg-active-fg data-[state=active]:shadow-(--seg-active-shadow)"
);
export const artisticTabsIconClassName =
- "h-3.5 w-3.5 text-white/45 transition-colors group-data-[state=active]:text-indigo-300";
+ "h-3.5 w-3.5 text-fg-45 transition-colors group-data-[state=active]:text-indigo-300";
export function getArtisticNavButtonClassName({
active,
@@ -49,5 +49,5 @@ export function getArtisticNavButtonClassName({
}
export function getArtisticNavIconClassName(active: boolean, className?: string) {
- return cn("h-3.5 w-3.5 transition-colors", active ? "text-indigo-300" : "text-white/45", className);
+ return cn("h-3.5 w-3.5 transition-colors", active ? "text-indigo-300" : "text-fg-45", className);
}
diff --git a/packages/ui/src/components/ui/badge.tsx b/packages/ui/src/components/ui/badge.tsx
index 1035076c..c9848de7 100644
--- a/packages/ui/src/components/ui/badge.tsx
+++ b/packages/ui/src/components/ui/badge.tsx
@@ -5,14 +5,14 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@subboost/ui/lib/utils";
const badgeVariants = cva(
- "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:ring-offset-2",
+ "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2",
{
variants: {
variant: {
default: "border-primary-500/50 bg-primary-500/20 text-primary-200",
- secondary: "border-white/15 bg-white/5 text-white/70",
+ secondary: "border-ink/15 bg-ink/5 text-fg-70",
destructive: "border-red-500/50 bg-red-500/20 text-red-200",
- outline: "text-white/70 border-white/20 bg-transparent",
+ outline: "text-fg-70 border-ink/20 bg-transparent",
success: "border-green-500/50 bg-green-500/10 text-green-300",
warning: "border-yellow-500/50 bg-yellow-500/10 text-yellow-300",
},
diff --git a/packages/ui/src/components/ui/basic-components.test.ts b/packages/ui/src/components/ui/basic-components.test.ts
index 9f52a28c..9ac6de56 100644
--- a/packages/ui/src/components/ui/basic-components.test.ts
+++ b/packages/ui/src/components/ui/basic-components.test.ts
@@ -44,7 +44,8 @@ describe("basic UI components", () => {
expect(html).toContain("Desc");
expect(html).toContain("content-extra");
expect(html).toContain("type=\"date\"");
- expect(html).toContain("color-scheme:dark");
+ expect(html).toContain("[-webkit-text-fill-color:var(--fg)]");
+ expect(html).toContain("[color-scheme:var(--date-input-scheme)]");
expect(html).toContain("placeholder=\"Name\"");
expect(html).toContain("disabled=\"\"");
});
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
index 4cacbbdb..6b301798 100644
--- a/packages/ui/src/components/ui/button.tsx
+++ b/packages/ui/src/components/ui/button.tsx
@@ -6,19 +6,19 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@subboost/ui/lib/utils";
const buttonVariants = cva(
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {
default:
- "border border-primary-500/50 bg-primary-500/20 text-white hover:bg-primary-500/30 hover:border-primary-400/70 shadow-lg shadow-primary-500/10 hover:shadow-primary-500/20",
+ "border border-btn-primary-border bg-btn-primary text-btn-primary-fg hover:bg-btn-primary-hover hover:border-btn-primary-border-hover shadow-(--btn-primary-shadow) hover:shadow-(--btn-primary-shadow-hover)",
destructive:
- "border border-red-500/50 bg-red-500/20 text-white hover:bg-red-500/30 hover:border-red-400/70 shadow-lg shadow-red-500/10 hover:shadow-red-500/20",
+ "border border-btn-danger-border bg-btn-danger text-btn-danger-fg hover:bg-btn-danger-hover hover:border-btn-danger-border-hover shadow-(--btn-danger-shadow) hover:shadow-(--btn-danger-shadow-hover)",
outline:
- "border border-white/15 bg-white/5 hover:bg-white/10 text-white/70 hover:text-white",
+ "border border-btn-outline-border bg-btn-outline hover:bg-btn-outline-hover text-btn-outline-fg hover:text-btn-outline-fg-hover shadow-(--btn-outline-shadow)",
secondary:
- "bg-white/5 hover:bg-white/10 text-white/70 hover:text-white border border-white/15",
- ghost: "hover:bg-white/5 text-white/60 hover:text-white",
+ "bg-btn-outline hover:bg-btn-outline-hover text-btn-outline-fg hover:text-btn-outline-fg-hover border border-btn-outline-border shadow-(--btn-outline-shadow)",
+ ghost: "hover:bg-ink/5 text-fg-60 hover:text-fg",
link: "text-indigo-400 underline-offset-4 hover:underline hover:text-indigo-300",
},
size: {
diff --git a/packages/ui/src/components/ui/card.tsx b/packages/ui/src/components/ui/card.tsx
index 34818006..a5cab41c 100644
--- a/packages/ui/src/components/ui/card.tsx
+++ b/packages/ui/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
>(({ className, ...props }, ref) => (
));
@@ -34,7 +34,7 @@ const CardTitle = React.forwardRef<
(({ className, ...props }, ref) => (
));
diff --git a/packages/ui/src/components/ui/choice-group.tsx b/packages/ui/src/components/ui/choice-group.tsx
index 994cc4a3..99e37e74 100644
--- a/packages/ui/src/components/ui/choice-group.tsx
+++ b/packages/ui/src/components/ui/choice-group.tsx
@@ -33,10 +33,10 @@ const ChoiceChip = React.forwardRef(
type={type}
aria-pressed={selected}
className={cn(
- "inline-flex min-h-9 items-center justify-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/50 disabled:cursor-not-allowed disabled:opacity-50",
+ "inline-flex min-h-9 items-center justify-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
selected
- ? "border-primary-500/50 bg-primary-500/20 text-white"
- : "border-white/15 bg-white/5 text-white/60 hover:bg-white/10 hover:text-white",
+ ? "border-selected-border bg-selected text-selected-fg"
+ : "border-btn-outline-border bg-btn-outline text-fg-60 shadow-(--btn-outline-shadow) hover:bg-btn-outline-hover hover:text-fg",
className
)}
{...props}
diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
index 5c886372..6fecf285 100644
--- a/packages/ui/src/components/ui/dialog.tsx
+++ b/packages/ui/src/components/ui/dialog.tsx
@@ -20,7 +20,7 @@ const DialogOverlay = React.forwardRef<
{children}
-
-
+ 关闭
@@ -87,7 +87,7 @@ const DialogTitle = React.forwardRef<
(({ className, ...props }, ref) => (
) {
function FormField({
id,
label,
+ labelAction,
description,
descriptionPlacement = "after-control",
error,
@@ -53,14 +55,17 @@ function FormField({
"aria-invalid": error ? true : controlChild.props["aria-invalid"],
"aria-required": required || controlChild.props["aria-required"] || undefined,
});
- const labelElement = (
+ const labelContent = (
{label}
{required ? * : null}
);
+ const labelElement = labelAction ? (
+ {labelContent}{labelAction}
+ ) : labelContent;
const descriptionElement = description ? (
-
+
{description}
) : null;
diff --git a/packages/ui/src/components/ui/input.tsx b/packages/ui/src/components/ui/input.tsx
index da1f5116..ce90357e 100644
--- a/packages/ui/src/components/ui/input.tsx
+++ b/packages/ui/src/components/ui/input.tsx
@@ -13,9 +13,9 @@ const Input = React.forwardRef(
goToPage(page - 1)}
disabled={disabled || page <= 1 || isSinglePage}
>
@@ -54,13 +54,13 @@ export function PagePager({ page, totalPages, onPageChange, className, disabled
aria-label="页码"
disabled={disabled || isSinglePage}
/>
- / {safeTotalPages}
+ / {safeTotalPages}
goToPage(page + 1)}
disabled={disabled || page >= safeTotalPages || isSinglePage}
>
diff --git a/packages/ui/src/components/ui/password-field.tsx b/packages/ui/src/components/ui/password-field.tsx
index c6ca81d3..c6d8dd4c 100644
--- a/packages/ui/src/components/ui/password-field.tsx
+++ b/packages/ui/src/components/ui/password-field.tsx
@@ -27,7 +27,7 @@ const PasswordControl = React.forwardRef
variant="ghost"
disabled={disabled}
onClick={onVisibleChange}
- className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2 rounded-lg text-white/50 hover:text-white"
+ className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2 rounded-lg text-fg-50 hover:text-fg"
>
{visible ?
diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx
index b1f76353..38c06516 100644
--- a/packages/ui/src/components/ui/popover.tsx
+++ b/packages/ui/src/components/ui/popover.tsx
@@ -23,7 +23,7 @@ const PopoverContent = React.forwardRef<
sideOffset={sideOffset}
collisionPadding={12}
className={cn(
- "z-50 w-72 rounded-xl border border-white/15 bg-zinc-950/95 p-4 text-sm text-white/70 shadow-2xl shadow-black/40 outline-none backdrop-blur-xl",
+ "z-50 w-72 rounded-xl border border-ink/15 bg-surface-popover p-4 text-sm text-fg-70 shadow-(--popover-shadow) outline-none backdrop-blur-xl",
className
)}
{...props}
@@ -40,7 +40,7 @@ const PopoverArrow = React.forwardRef<
>(({ className, ...props }, ref) => (
));
@@ -71,7 +71,8 @@ function HelpPopover({
event.stopPropagation()}
+ className={cn("h-6 w-6 rounded-md text-fg-40 hover:text-fg-80", className)}
>
diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
index ab774a41..c8ffc52d 100644
--- a/packages/ui/src/components/ui/select.tsx
+++ b/packages/ui/src/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
span]:line-clamp-1 transition-all duration-200",
+ "flex h-10 w-full items-center justify-between whitespace-nowrap rounded-xl border border-field-border bg-field px-4 py-2 text-sm text-fg shadow-sm ring-offset-background placeholder:text-fg-40 focus:outline-none focus:ring-2 focus:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-all duration-200",
className
)}
{...props}
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
(({ className, ...props }, ref) => (
(({ className, ...props }, ref) => (
{label}
{description ? (
-
+
{description}
) : null}
diff --git a/packages/ui/src/components/ui/switch.tsx b/packages/ui/src/components/ui/switch.tsx
index 06dadadd..9798016d 100644
--- a/packages/ui/src/components/ui/switch.tsx
+++ b/packages/ui/src/components/ui/switch.tsx
@@ -10,7 +10,7 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
>(
({ className, ...props }, ref) => (
- (
(
>(
({ className, ...props }, ref) => (
- >(
({ className, ...props }, ref) => (
- (
return (