nfx-ui 0.20.0 → 0.22.0

package/src/themes/hooks/useTheme.ts

@@ -0,0 +1,38 @@
+import { usePreferenceStore } from "@/stores/preference";
+import { BASE_VALUES, type BaseEnum } from "@/enums/theme";
+import { BASE_TO_RADIX_RADIUS, RADIX_RADIUS_TO_BASE, type ResolvedThemePreference } from "@/themes/radix";
+import { setPreference } from "@/stores/preference";
+
+export function readCssColor(varName: string, fallback: string): string {
+  if (typeof document === "undefined") return fallback;
+  const el = document.querySelector(".radix-themes") ?? document.documentElement;
+  const value = getComputedStyle(el).getPropertyValue(varName).trim();
+  return value || fallback;
+}
+
+export function useTheme() {
+  const theme = usePreferenceStore((s) => s.theme);
+  const currentTheme = {
+    colors: {
+      variables: {
+        primary: readCssColor("--accent-9", "#e54d2e"),
+        info: readCssColor("--blue-9", "#0090ff"),
+        success: readCssColor("--green-9", "#30a46c"),
+        fgHeading: readCssColor("--gray-12", "#1c2024"),
+        border5: readCssColor("--gray-8", "#b9bbc6"),
+        fg: readCssColor("--gray-11", "#60646c"),
+        bg3: readCssColor("--gray-3", "#f0f0f3"),
+        border3: readCssColor("--gray-6", "#d8d9e0"),
+      },
+    },
+  };
+  return {
+    theme,
+    currentTheme,
+    themeName: theme.accent,
+    baseName: RADIX_RADIUS_TO_BASE[theme.radius],
+    setTheme: (patch: Partial<ResolvedThemePreference>) => setPreference({ theme: patch }),
+    setBase: (base: BaseEnum) => setPreference({ theme: { radius: BASE_TO_RADIX_RADIUS[base] } }),
+    availableBases: BASE_VALUES,
+  };
+}

package/src/themes/index.css

@@ -0,0 +1,385 @@
+/* index.css */
+
+/* ---------------------------------------------
+   Base reset
+--------------------------------------------- */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  width: 100%;
+  min-height: 100%;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  scrollbar-gutter: stable;
+}
+body {
+  width: 100%;
+  min-height: 100vh;
+  margin: 0;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+/* ---------------------------------------------
+   Document structure
+--------------------------------------------- */
+
+main,
+section,
+article,
+aside,
+header,
+footer,
+nav {
+  display: block;
+}
+
+main {
+  min-height: 100%;
+}
+
+/* ---------------------------------------------
+   Typography
+--------------------------------------------- */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+p {
+  margin: 0;
+}
+
+em,
+i {
+  font-style: italic;
+}
+
+abbr[title] {
+  cursor: help;
+  text-decoration: underline dotted;
+  text-underline-offset: 0.18em;
+}
+
+address {
+  font-style: normal;
+}
+
+blockquote {
+  margin: 0;
+}
+
+sub,
+sup {
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* ---------------------------------------------
+   Code
+--------------------------------------------- */
+
+code,
+kbd,
+samp {
+  padding: 0.12em 0.32em;
+}
+
+pre {
+  margin: 0;
+  overflow: auto;
+}
+
+pre code {
+  padding: 0;
+  background: transparent;
+  color: inherit;
+}
+
+/* ---------------------------------------------
+   Links
+--------------------------------------------- */
+
+a {
+  text-decoration: none;
+  transition:
+    color 120ms cubic-bezier(0.2, 0, 0, 1),
+    opacity 120ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+a:focus-visible {
+  outline: none;
+}
+
+/* ---------------------------------------------
+   Lists
+--------------------------------------------- */
+
+ul,
+ol {
+  margin: 0;
+}
+
+li {
+  margin: 0;
+}
+
+dl,
+dd {
+  margin: 0;
+}
+
+/* ---------------------------------------------
+   Media
+--------------------------------------------- */
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+img {
+  user-select: none;
+}
+
+svg {
+  flex-shrink: 0;
+}
+
+audio {
+  width: 100%;
+}
+
+iframe {
+  display: block;
+  max-width: 100%;
+  border: 0;
+}
+
+figure {
+  margin: 0;
+}
+
+/* ---------------------------------------------
+   Form elements — Radix Themes 接管 App 内控件样式
+--------------------------------------------- */
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+dialog:not(.rt-DialogContent) {
+  border: none;
+}
+
+/* ---------------------------------------------
+   Tables
+--------------------------------------------- */
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+caption {
+  text-align: left;
+}
+
+th,
+td {
+  text-align: left;
+}
+
+/* ---------------------------------------------
+   Native elements
+--------------------------------------------- */
+
+hr {
+  height: 1px;
+  margin: 0;
+  border: none;
+}
+
+fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+summary {
+  cursor: pointer;
+}
+
+progress,
+meter {
+  width: 100%;
+}
+
+/* ---------------------------------------------
+   Scrollbar
+--------------------------------------------- */
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+}
+
+/* ---------------------------------------------
+   Accessibility
+--------------------------------------------- */
+
+[hidden] {
+  display: none !important;
+}
+
+:focus-visible {
+  outline: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+/* ---------------------------------------------
+   Radix Themes font stacks (faces loaded via themes/fonts.ts)
+   Switch via data-font-family on .radix-themes (ThemePreference.fontFamily).
+--------------------------------------------- */
+
+.radix-themes {
+  --heading-font-family: var(--default-font-family);
+  --strong-font-family: var(--default-font-family);
+  --em-font-family: var(--default-font-family);
+  --quote-font-family: var(--default-font-family);
+
+  /*
+   * iOS Theme radius="full" only sets --radius-full to 9999px.
+   * --radius-1…6 share --radius-factor with Windows/large, so
+   * `border-radius: var(--radius-N)` looks unchanged. Compact chrome
+   * must use max(token, --radius-full), same as Radix Button.
+   */
+  --radius-chip: max(var(--radius-3), var(--radius-full));
+  --radius-icon: max(var(--radius-4), var(--radius-full));
+}
+
+.radix-themes .rt-BaseTabListTriggerInner,
+.radix-themes .rt-BaseTabListTriggerInnerHidden,
+.radix-themes .rt-TabsTriggerInner {
+  border-radius: max(var(--tab-inner-border-radius), var(--radius-full)) !important;
+}
+
+.radix-themes[data-radius="full"] .rt-Card {
+  --card-border-radius: var(--radius-6);
+}
+
+.radix-themes,
+.radix-themes[data-font-family="system"] {
+  --default-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.radix-themes[data-font-family="ibm-plex"] {
+  --default-font-family: "IBM Plex Sans", "IBM Plex Sans SC", "Noto Sans SC", "Noto Sans TC", system-ui, sans-serif;
+}
+
+.radix-themes[data-font-family="noto"] {
+  --default-font-family: "Noto Sans", "Noto Sans SC", "Noto Sans TC", sans-serif;
+}
+
+/* Source Sans 3 + Source Han Sans SC (Noto Sans SC = same CJK design). */
+.radix-themes[data-font-family="source-sans"] {
+  --default-font-family: "Source Sans 3", "Source Han Sans SC", "Noto Sans SC", "Noto Sans TC", sans-serif;
+}
+
+/* ---------------------------------------------
+   Legacy NFX-UI token aliases (0.17 CSS Modules hosts)
+--------------------------------------------- */
+
+.radix-themes {
+  --color-primary: var(--accent-9);
+  --color-primary-hover: var(--accent-10);
+  --color-primary-light: var(--accent-4);
+  --color-primary-bg: var(--accent-3);
+  --color-primary-fg: var(--accent-contrast);
+  --color-success: var(--green-9);
+  --color-success-light: var(--green-4);
+  --color-info: var(--blue-9);
+  --color-info-light: var(--blue-4);
+  --color-warning: var(--amber-9);
+  --color-warning-light: var(--amber-4);
+  --color-danger: var(--red-9);
+  --color-error: var(--red-9);
+  --color-danger-light: var(--red-4);
+  --color-bg: var(--color-background);
+  --color-bg-1: var(--color-background);
+  --color-bg-2: var(--color-panel-solid);
+  --color-bg-3: var(--gray-3);
+  --color-bg-4: var(--gray-4);
+  --color-bg-secondary: var(--gray-2);
+  --color-border: var(--gray-6);
+  --color-border-2: var(--gray-5);
+  --color-border-3: var(--gray-6);
+  --color-border-4: var(--gray-7);
+  --color-border-5: var(--gray-8);
+  --color-border-hover: var(--gray-8);
+  --color-fg: var(--gray-11);
+  --color-fg-text: var(--gray-12);
+  --color-fg-heading: var(--gray-12);
+  --color-fg-highlight: var(--accent-11);
+  --color-fg-muted: var(--gray-10);
+  --color-fg-on-primary: var(--accent-contrast);
+  --color-separator: var(--gray-6);
+  --color-overlay: var(--black-a6);
+  --color-shadow: var(--gray-a4);
+  --color-ring: var(--accent-8);
+}

package/src/themes/index.ts

@@ -0,0 +1,34 @@
+/**
+ * 主题模块统一导出。Themes module barrel exports.
+ */
+export {
+  type RadixAccentColor,
+  type RadixGrayColor,
+  type RadixAppearance,
+  type RadixRadius,
+  type RadixScaling,
+  type RadixPanelBackground,
+  type ResolvedThemePreference,
+  RADIX_ACCENT_VALUES,
+  RADIX_GRAY_VALUES,
+  RADIX_APPEARANCE_VALUES,
+  THEME_APPEARANCE_VALUES,
+  THEME_FONT_FAMILY_VALUES,
+  RADIX_RADIUS_VALUES,
+  RADIX_SCALING_VALUES,
+  RADIX_PANEL_BACKGROUND_VALUES,
+  BASE_TO_RADIX_RADIUS,
+  RADIX_RADIUS_TO_BASE,
+  DEFAULT_RADIX_ACCENT,
+  DEFAULT_RADIX_GRAY,
+  DEFAULT_RADIX_SCALING,
+  DEFAULT_RADIX_PANEL_BACKGROUND,
+  DEFAULT_THEME_APPEARANCE,
+  readSystemRadixAppearance,
+  resolveRadixAppearance,
+  getDefaultThemePreference,
+  resolveThemePreference,
+} from "./radix";
+export { default as ThemeProvider } from "@/providers/ThemeProvider";
+export type { ThemeProviderProps } from "@/providers/ThemeProvider";
+export * from "./hooks";

package/src/themes/radix/index.ts

@@ -0,0 +1 @@
+export * from "./mappings";

package/src/themes/radix/mappings.ts

@@ -0,0 +1,108 @@
+import type { ThemeProps } from "@radix-ui/themes";
+
+import type { Nilable } from "@/types";
+
+import {
+  AccentColor,
+  AccentColorEnum,
+  Appearance,
+  AppearanceEnum,
+  BaseEnum,
+  GrayColor,
+  GrayColorEnum,
+  PanelBackground,
+  PanelBackgroundEnum,
+  Radius,
+  RadiusEnum,
+  Scaling,
+  ScalingEnum,
+  ThemeFontFamily,
+  ThemeFontFamilyEnum,
+} from "@/enums/theme";
+
+export type RadixAccentColor = NonNullable<ThemeProps["accentColor"]>;
+export type RadixGrayColor = NonNullable<ThemeProps["grayColor"]>;
+export type RadixAppearance = Extract<NonNullable<ThemeProps["appearance"]>, "light" | "dark">;
+export type RadixRadius = NonNullable<ThemeProps["radius"]>;
+export type RadixScaling = NonNullable<ThemeProps["scaling"]>;
+export type RadixPanelBackground = NonNullable<ThemeProps["panelBackground"]>;
+
+export const RADIX_ACCENT_VALUES: readonly AccentColorEnum[] = Object.values(AccentColorEnum);
+export const RADIX_GRAY_VALUES: readonly GrayColorEnum[] = Object.values(GrayColorEnum);
+export const RADIX_APPEARANCE_VALUES: readonly RadixAppearance[] = [AppearanceEnum.LIGHT, AppearanceEnum.DARK];
+export const THEME_APPEARANCE_VALUES: readonly AppearanceEnum[] = Object.values(AppearanceEnum);
+export const RADIX_RADIUS_VALUES: readonly RadiusEnum[] = Object.values(RadiusEnum);
+export const RADIX_SCALING_VALUES: readonly ScalingEnum[] = Object.values(ScalingEnum);
+export const RADIX_PANEL_BACKGROUND_VALUES: readonly PanelBackgroundEnum[] = Object.values(PanelBackgroundEnum);
+
+export const BASE_TO_RADIX_RADIUS: Record<BaseEnum, RadiusEnum> = {
+  [BaseEnum.LINUX]: RadiusEnum.NONE,
+  [BaseEnum.ANDROID]: RadiusEnum.SMALL,
+  [BaseEnum.DEFAULT]: RadiusEnum.MEDIUM,
+  [BaseEnum.WINDOWS]: RadiusEnum.LARGE,
+  [BaseEnum.IOS]: RadiusEnum.FULL,
+};
+
+export const RADIX_RADIUS_TO_BASE: Record<RadiusEnum, BaseEnum> = {
+  [RadiusEnum.NONE]: BaseEnum.LINUX,
+  [RadiusEnum.SMALL]: BaseEnum.ANDROID,
+  [RadiusEnum.MEDIUM]: BaseEnum.DEFAULT,
+  [RadiusEnum.LARGE]: BaseEnum.WINDOWS,
+  [RadiusEnum.FULL]: BaseEnum.IOS,
+};
+
+export const DEFAULT_RADIX_ACCENT = AccentColorEnum.TOMATO;
+export const DEFAULT_RADIX_GRAY = GrayColorEnum.SLATE;
+export const DEFAULT_RADIX_SCALING = ScalingEnum.S100;
+export const DEFAULT_RADIX_PANEL_BACKGROUND = PanelBackgroundEnum.TRANSLUCENT;
+export const DEFAULT_THEME_FONT_FAMILY = ThemeFontFamilyEnum.SYSTEM;
+export const THEME_FONT_FAMILY_VALUES: readonly ThemeFontFamilyEnum[] = Object.values(ThemeFontFamilyEnum);
+export const DEFAULT_THEME_APPEARANCE = AppearanceEnum.SYSTEM;
+
+export function readSystemRadixAppearance(): RadixAppearance {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return AppearanceEnum.LIGHT;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? AppearanceEnum.DARK : AppearanceEnum.LIGHT;
+}
+
+export function resolveRadixAppearance(appearance: AppearanceEnum): RadixAppearance {
+  return appearance === AppearanceEnum.SYSTEM ? readSystemRadixAppearance() : appearance;
+}
+
+export interface ResolvedThemePreference {
+  accent: AccentColorEnum;
+  gray: GrayColorEnum;
+  appearance: AppearanceEnum;
+  radius: RadiusEnum;
+  scaling: ScalingEnum;
+  panelBackground: PanelBackgroundEnum;
+  fontFamily: ThemeFontFamilyEnum;
+}
+
+export function getDefaultThemePreference(): ResolvedThemePreference {
+  return {
+    accent: DEFAULT_RADIX_ACCENT,
+    gray: DEFAULT_RADIX_GRAY,
+    appearance: DEFAULT_THEME_APPEARANCE,
+    radius: RadiusEnum.MEDIUM,
+    scaling: DEFAULT_RADIX_SCALING,
+    panelBackground: DEFAULT_RADIX_PANEL_BACKGROUND,
+    fontFamily: DEFAULT_THEME_FONT_FAMILY,
+  };
+}
+
+export function resolveThemePreference(
+  partial: Nilable<Partial<ResolvedThemePreference>>,
+  fallbackAppearance: AppearanceEnum = DEFAULT_THEME_APPEARANCE,
+  fallbackRadius: RadiusEnum = RadiusEnum.MEDIUM,
+): ResolvedThemePreference {
+  const p = partial ?? {};
+  return {
+    accent: AccentColor(p.accent),
+    gray: GrayColor(p.gray),
+    appearance: Appearance(p.appearance ?? fallbackAppearance),
+    radius: Radius(p.radius ?? fallbackRadius),
+    scaling: Scaling(p.scaling),
+    panelBackground: PanelBackground(p.panelBackground),
+    fontFamily: ThemeFontFamily(p.fontFamily),
+  };
+}

package/src/themes/types/components.ts

@@ -0,0 +1 @@
+export type { ThemeProviderProps } from "@/providers/ThemeProvider";

package/src/themes/types/context.ts

@@ -0,0 +1,14 @@
+/**
+ * useTheme 返回值类型。
+ */
+import type { AccentColorEnum, BaseEnum } from "@/enums/theme";
+import type { ResolvedThemePreference } from "@/themes/radix";
+
+export interface ThemeContextType {
+  theme: ResolvedThemePreference;
+  themeName: AccentColorEnum;
+  baseName: BaseEnum;
+  setTheme: (patch: Partial<ResolvedThemePreference>) => void;
+  setBase: (baseName: BaseEnum) => void;
+  availableBases: BaseEnum[];
+}

package/src/themes/types/index.ts

@@ -0,0 +1 @@
+export type { ThemeProviderProps } from "@/providers/ThemeProvider";