@zpress/ui 0.3.0 → 0.4.0

package/dist/theme/styles/themes/base.css

@@ -0,0 +1,133 @@
+/**
+ * Base theme — purple/violet palette.
+ *
+ * Default zpress theme. `:root` fallback block prevents FOUC
+ * by providing colors before ThemeProvider sets [data-zp-theme].
+ */
+
+/* ── FOUC fallback — loads before JS hydration ───────────── */
+:root {
+  --zp-c-brand-1: #a78bfa;
+  --zp-c-brand-2: #8b5cf6;
+  --zp-c-brand-3: #7c3aed;
+  --zp-c-brand-soft: rgba(167, 139, 250, 0.14);
+
+  --zp-c-bg: #ffffff;
+  --zp-c-bg-alt: #f9f9f9;
+  --zp-c-bg-elv: #f5f5f5;
+  --zp-c-bg-soft: #f0f0f0;
+  --zp-c-bg-icon: #cccccc;
+
+  --zp-c-text-1: #1a1a1a;
+  --zp-c-text-2: rgba(26, 26, 26, 0.72);
+  --zp-c-text-3: rgba(26, 26, 26, 0.48);
+
+  --zp-c-divider: #e2e2e2;
+  --zp-c-border: #d0d0d0;
+  --zp-c-gutter: #f5f5f5;
+
+  --zp-code-block-bg: #f5f5f5;
+
+  --zp-button-brand-bg: #7c3aed;
+  --zp-button-brand-hover-bg: #8b5cf6;
+  --zp-button-brand-active-bg: #6d28d9;
+  --zp-button-brand-text: #ffffff;
+
+  --rp-c-brand: #a78bfa;
+  --rp-c-brand-light: #c4b5fd;
+  --rp-c-brand-lighter: #ddd6fe;
+  --rp-c-brand-dark: #8b5cf6;
+  --rp-c-brand-darker: #7c3aed;
+  --rp-c-brand-tint: rgba(167, 139, 250, 0.14);
+
+  --rp-home-background-bg: #fff;
+}
+
+/* ── Light mode ──────────────────────────────────────────── */
+html[data-zp-theme='base'] {
+  --zp-c-brand-1: #a78bfa;
+  --zp-c-brand-2: #8b5cf6;
+  --zp-c-brand-3: #7c3aed;
+  --zp-c-brand-soft: rgba(167, 139, 250, 0.14);
+
+  --zp-c-bg: #ffffff;
+  --zp-c-bg-alt: #f9f9f9;
+  --zp-c-bg-elv: #f5f5f5;
+  --zp-c-bg-soft: #f0f0f0;
+  --zp-c-bg-icon: #cccccc;
+
+  --zp-c-text-1: #1a1a1a;
+  --zp-c-text-2: rgba(26, 26, 26, 0.72);
+  --zp-c-text-3: rgba(26, 26, 26, 0.48);
+
+  --zp-c-divider: #e2e2e2;
+  --zp-c-border: #d0d0d0;
+  --zp-c-gutter: #f5f5f5;
+
+  --zp-code-block-bg: #f5f5f5;
+
+  --zp-button-brand-bg: #7c3aed;
+  --zp-button-brand-hover-bg: #8b5cf6;
+  --zp-button-brand-active-bg: #6d28d9;
+  --zp-button-brand-text: #ffffff;
+
+  --rp-c-brand: #a78bfa;
+  --rp-c-brand-light: #c4b5fd;
+  --rp-c-brand-lighter: #ddd6fe;
+  --rp-c-brand-dark: #8b5cf6;
+  --rp-c-brand-darker: #7c3aed;
+  --rp-c-brand-tint: rgba(167, 139, 250, 0.14);
+
+  --rp-home-background-bg: #fff;
+}
+
+/* ── Dark mode ───────────────────────────────────────────── */
+html[data-zp-theme='base'].rp-dark {
+  --zp-c-bg: #141414;
+  --zp-c-bg-alt: #1a1a1a;
+  --zp-c-bg-elv: #1f1f1f;
+  --zp-c-bg-soft: #222222;
+  --zp-c-bg-icon: #3d3d3d;
+
+  --zp-c-text-1: #fbfbfb;
+  --zp-c-text-2: rgba(251, 251, 251, 0.72);
+  --zp-c-text-3: rgba(251, 251, 251, 0.48);
+
+  --zp-c-divider: #2e2e2e;
+  --zp-c-border: #3a3a3a;
+  --zp-c-gutter: #1a1a1a;
+
+  --zp-c-brand-1: #a78bfa;
+  --zp-c-brand-2: #8b5cf6;
+  --zp-c-brand-3: #7c3aed;
+  --zp-c-brand-soft: rgba(167, 139, 250, 0.14);
+
+  --zp-code-block-bg: #1a1a1a;
+
+  --zp-button-brand-bg: #7c3aed;
+  --zp-button-brand-hover-bg: #8b5cf6;
+  --zp-button-brand-active-bg: #6d28d9;
+  --zp-button-brand-text: #fbfbfb;
+
+  --rp-c-bg: #141414;
+  --rp-c-bg-soft: #222222;
+  --rp-c-bg-mute: #1f1f1f;
+
+  --rp-c-text-1: #fbfbfb;
+  --rp-c-text-2: rgba(251, 251, 251, 0.72);
+  --rp-c-text-3: rgba(251, 251, 251, 0.48);
+
+  --rp-c-divider: #2e2e2e;
+
+  --rp-c-brand: #a78bfa;
+  --rp-c-brand-light: #c4b5fd;
+  --rp-c-brand-lighter: #ddd6fe;
+  --rp-c-brand-dark: #8b5cf6;
+  --rp-c-brand-darker: #7c3aed;
+  --rp-c-brand-tint: rgba(167, 139, 250, 0.14);
+  --rp-c-link: var(--rp-c-brand-light);
+
+  --rp-code-block-bg: #1a1a1a;
+
+  --rp-home-background-bg: #141414;
+}

package/dist/theme/styles/themes/midnight.css

@@ -0,0 +1,96 @@
+/**
+ * Midnight theme — super dark, blue-tinted brand.
+ *
+ * Deep black backgrounds with high contrast white text.
+ * Both modes are very dark — light is "less dark", dark is "true black."
+ */
+
+/* ── Light mode (less dark) ──────────────────────────────── */
+html[data-zp-theme='midnight'] {
+  --zp-c-brand-1: #60a5fa;
+  --zp-c-brand-2: #3b82f6;
+  --zp-c-brand-3: #2563eb;
+  --zp-c-brand-soft: rgba(96, 165, 250, 0.14);
+
+  --zp-c-bg: #0f0f0f;
+  --zp-c-bg-alt: #121212;
+  --zp-c-bg-elv: #161616;
+  --zp-c-bg-soft: #1a1a1a;
+  --zp-c-bg-icon: #2a2a2a;
+
+  --zp-c-text-1: #f0f0f0;
+  --zp-c-text-2: rgba(240, 240, 240, 0.72);
+  --zp-c-text-3: rgba(240, 240, 240, 0.48);
+
+  --zp-c-divider: #1e1e1e;
+  --zp-c-border: #282828;
+  --zp-c-gutter: #121212;
+
+  --zp-code-block-bg: #121212;
+
+  --zp-button-brand-bg: #2563eb;
+  --zp-button-brand-hover-bg: #3b82f6;
+  --zp-button-brand-active-bg: #1d4ed8;
+  --zp-button-brand-text: #f0f0f0;
+
+  --rp-c-brand: #60a5fa;
+  --rp-c-brand-light: #93c5fd;
+  --rp-c-brand-lighter: #bfdbfe;
+  --rp-c-brand-dark: #3b82f6;
+  --rp-c-brand-darker: #2563eb;
+  --rp-c-brand-tint: rgba(96, 165, 250, 0.14);
+
+  --rp-c-bg: #0f0f0f;
+  --rp-c-bg-soft: #1a1a1a;
+  --rp-c-bg-mute: #161616;
+
+  --rp-c-text-1: #f0f0f0;
+  --rp-c-text-2: rgba(240, 240, 240, 0.72);
+  --rp-c-text-3: rgba(240, 240, 240, 0.48);
+
+  --rp-c-divider: #1e1e1e;
+  --rp-c-link: var(--rp-c-brand-light);
+
+  --rp-code-block-bg: #121212;
+
+  --rp-home-background-bg: #0f0f0f;
+}
+
+/* ── Dark mode (true black) ──────────────────────────────── */
+html[data-zp-theme='midnight'].rp-dark {
+  --zp-c-bg: #050505;
+  --zp-c-bg-alt: #0a0a0a;
+  --zp-c-bg-elv: #0e0e0e;
+  --zp-c-bg-soft: #121212;
+  --zp-c-bg-icon: #222222;
+
+  --zp-c-text-1: #fafafa;
+  --zp-c-text-2: rgba(250, 250, 250, 0.72);
+  --zp-c-text-3: rgba(250, 250, 250, 0.48);
+
+  --zp-c-divider: #181818;
+  --zp-c-border: #202020;
+  --zp-c-gutter: #0a0a0a;
+
+  --zp-code-block-bg: #0a0a0a;
+
+  --zp-button-brand-bg: #2563eb;
+  --zp-button-brand-hover-bg: #3b82f6;
+  --zp-button-brand-active-bg: #1d4ed8;
+  --zp-button-brand-text: #fafafa;
+
+  --rp-c-bg: #050505;
+  --rp-c-bg-soft: #121212;
+  --rp-c-bg-mute: #0e0e0e;
+
+  --rp-c-text-1: #fafafa;
+  --rp-c-text-2: rgba(250, 250, 250, 0.72);
+  --rp-c-text-3: rgba(250, 250, 250, 0.48);
+
+  --rp-c-divider: #181818;
+  --rp-c-link: var(--rp-c-brand-light);
+
+  --rp-code-block-bg: #0a0a0a;
+
+  --rp-home-background-bg: #050505;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zpress/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Rspress plugin, theme components, and styles for zpress",
   "keywords": [
     "react",
@@ -52,7 +52,7 @@
     "@iconify-json/vscode-icons": "^1.2.45",
     "@iconify/react": "^6.0.2",
     "ts-pattern": "^5.9.0",
-    "@zpress/core": "0.3.0"
+    "@zpress/core": "0.5.0"
   },
   "devDependencies": {
     "@rslib/core": "^0.20.0",

package/src/theme/components/nav/layout.tsx

@@ -2,13 +2,13 @@ import { Layout as OriginalLayout } from '@rspress/core/theme-original'
 import type React from 'react'
 
 import { BranchTag } from './branch-tag'
+import { ThemeSwitcher } from './theme-switcher'
 
 /**
  * Custom Layout override for zpress.
- * Wraps the original Rspress Layout and injects the BranchTag
- * into the `beforeNavMenu` slot so it renders before the search
- * bar in the navbar on all page types.
+ * Wraps the original Rspress Layout and injects BranchTag
+ * into `beforeNavMenu` and ThemeSwitcher into `afterNavMenu`.
  */
 export function Layout(): React.ReactElement {
-  return <OriginalLayout beforeNavMenu={<BranchTag />} />
+  return <OriginalLayout beforeNavMenu={<BranchTag />} afterNavMenu={<ThemeSwitcher />} />
 }

package/src/theme/components/nav/theme-switcher.css

@@ -0,0 +1,92 @@
+/**
+ * Theme switcher dropdown styles.
+ */
+
+.theme-switcher {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+}
+
+.theme-switcher-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--zp-c-border);
+  border-radius: var(--rp-radius);
+  background: var(--zp-c-bg);
+  color: var(--zp-c-text-2);
+  cursor: pointer;
+  transition:
+    color 0.2s,
+    border-color 0.2s;
+}
+
+.theme-switcher-btn:hover {
+  color: var(--zp-c-text-1);
+  border-color: var(--zp-c-brand-1);
+}
+
+.theme-switcher-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 100;
+  min-width: 160px;
+  padding: 4px;
+  border: 1px solid var(--zp-c-border);
+  border-radius: var(--rp-radius);
+  background: var(--zp-c-bg-elv);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.theme-switcher-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  border-radius: var(--rp-radius-small);
+  background: none;
+  color: var(--zp-c-text-2);
+  font-size: 13px;
+  font-family: var(--zp-font-family-base);
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+
+.theme-switcher-option:hover {
+  background: var(--zp-c-bg-soft);
+  color: var(--zp-c-text-1);
+}
+
+.theme-switcher-option--active {
+  color: var(--zp-c-brand-1);
+}
+
+.theme-switcher-swatch {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 1px solid var(--zp-c-border);
+  flex-shrink: 0;
+}
+
+.theme-switcher-check {
+  margin-left: auto;
+  font-size: 11px;
+  opacity: 0.7;
+}
+
+.theme-switcher-name {
+  flex: 1;
+  text-align: left;
+}

package/src/theme/components/nav/theme-switcher.tsx

@@ -0,0 +1,135 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import { Icon } from '../shared/icon.tsx'
+
+import './theme-switcher.css'
+
+declare const __ZPRESS_THEME_SWITCHER__: boolean
+
+interface ThemeOption {
+  readonly name: string
+  readonly label: string
+  readonly swatch: string
+  readonly defaultColorMode: 'dark' | 'light' | 'toggle'
+}
+
+const THEME_OPTIONS: readonly ThemeOption[] = [
+  { name: 'base', label: 'Base', swatch: '#a78bfa', defaultColorMode: 'toggle' },
+  { name: 'midnight', label: 'Midnight', swatch: '#60a5fa', defaultColorMode: 'dark' },
+  { name: 'arcade', label: 'Arcade', swatch: '#00ff88', defaultColorMode: 'dark' },
+]
+
+/**
+ * Build the className string for a theme option button.
+ */
+function optionClassName(isActive: boolean): string {
+  if (isActive) {
+    return 'theme-switcher-option theme-switcher-option--active'
+  }
+  return 'theme-switcher-option'
+}
+
+/**
+ * Apply a theme by updating the DOM and persisting to localStorage.
+ */
+function applyTheme(theme: ThemeOption): void {
+  const html = document.documentElement
+  html.dataset.zpTheme = theme.name
+  localStorage.setItem('zpress-theme', theme.name)
+
+  if (theme.defaultColorMode === 'dark') {
+    html.classList.add('rp-dark')
+    html.dataset.dark = 'true'
+    localStorage.setItem('rspress-theme', 'dark')
+  } else if (theme.defaultColorMode === 'light') {
+    html.classList.remove('rp-dark')
+    html.dataset.dark = 'false'
+    localStorage.setItem('rspress-theme', 'light')
+  }
+}
+
+/**
+ * ThemeSwitcher — dropdown button for switching between built-in themes.
+ * Only renders when `__ZPRESS_THEME_SWITCHER__` build-time define is true.
+ */
+export function ThemeSwitcher(): React.ReactElement | null {
+  const [isOpen, setIsOpen] = useState(false)
+  const [activeTheme, setActiveTheme] = useState(() => {
+    if (typeof globalThis === 'undefined') {
+      return 'base'
+    }
+    try {
+      return localStorage.getItem('zpress-theme') || 'base'
+    } catch {
+      return 'base'
+    }
+  })
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => !prev)
+  }, [])
+
+  const handleSelect = useCallback((theme: ThemeOption) => {
+    setActiveTheme(theme.name)
+    applyTheme(theme)
+    setIsOpen(false)
+  }, [])
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent): void {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    function handleEscape(event: KeyboardEvent): void {
+      if (event.key === 'Escape') {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleEscape)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [])
+
+  if (!__ZPRESS_THEME_SWITCHER__) {
+    return null
+  }
+
+  return (
+    <div className="theme-switcher" ref={containerRef}>
+      <button
+        className="theme-switcher-btn"
+        onClick={handleToggle}
+        aria-label="Switch theme"
+        type="button"
+      >
+        <Icon icon="pixelarticons:paint-bucket" width={16} height={16} />
+      </button>
+      {isOpen && (
+        <div className="theme-switcher-dropdown">
+          {THEME_OPTIONS.map((theme) => (
+            <button
+              key={theme.name}
+              className={optionClassName(activeTheme === theme.name)}
+              onClick={() => handleSelect(theme)}
+              type="button"
+            >
+              <span className="theme-switcher-swatch" style={{ backgroundColor: theme.swatch }} />
+              <span className="theme-switcher-name">{theme.label}</span>
+              {activeTheme === theme.name && (
+                <span className="theme-switcher-check">{'\u2713'}</span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/theme/components/shared/browser-window.css

@@ -0,0 +1,61 @@
+.browser-window {
+  border: 1px solid var(--zp-c-border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--zp-c-bg-soft);
+}
+
+.browser-window__titlebar {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  gap: 8px;
+  background: var(--zp-c-bg-elv);
+  border-bottom: 1px solid var(--zp-c-border);
+}
+
+.browser-window__dots {
+  display: flex;
+  gap: 6px;
+}
+
+.browser-window__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.browser-window__dot--close {
+  background: #ff5f57;
+}
+
+.browser-window__dot--minimize {
+  background: #febc2e;
+}
+
+.browser-window__dot--maximize {
+  background: #28c840;
+}
+
+.browser-window__url {
+  flex: 1;
+  text-align: center;
+  font-size: 11px;
+  color: var(--zp-c-text-3);
+  background: var(--zp-c-bg-soft);
+  border-radius: 4px;
+  padding: 2px 8px;
+}
+
+.browser-window__content p {
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+}
+
+.browser-window__content img {
+  width: 100%;
+  display: block;
+  margin: 0;
+  padding: 0;
+}

package/src/theme/components/shared/browser-window.tsx

@@ -0,0 +1,35 @@
+import type React from 'react'
+import { match, P } from 'ts-pattern'
+
+import './browser-window.css'
+
+// ── Types ────────────────────────────────────────────────────
+
+export interface BrowserWindowProps {
+  readonly url?: string
+  readonly children: React.ReactNode
+}
+
+// ── Component ────────────────────────────────────────────────
+
+/**
+ * Fake browser window chrome that wraps content in a title bar
+ * with traffic-light dots and an optional URL pill.
+ */
+export function BrowserWindow({ url, children }: BrowserWindowProps): React.ReactElement {
+  return (
+    <div className="browser-window">
+      <div className="browser-window__titlebar">
+        <div className="browser-window__dots">
+          <span className="browser-window__dot browser-window__dot--close" />
+          <span className="browser-window__dot browser-window__dot--minimize" />
+          <span className="browser-window__dot browser-window__dot--maximize" />
+        </div>
+        {match(url)
+          .with(P.nonNullable, (u) => <span className="browser-window__url">{u}</span>)
+          .otherwise(() => null)}
+      </div>
+      <div className="browser-window__content">{children}</div>
+    </div>
+  )
+}