@zpress/ui 0.1.0

package/src/theme/styles/overrides/details.css

@@ -0,0 +1,61 @@
+/**
+ * <details> accordion styling.
+ */
+
+details {
+  border: 1px solid var(--zp-c-border);
+  border-radius: 8px;
+  padding: 0;
+  margin: 0;
+  background: var(--zp-c-bg-soft);
+}
+
+details summary {
+  cursor: pointer;
+  padding: 0 12px;
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--zp-c-text-1);
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+  transition: color 0.2s;
+}
+
+details summary:hover {
+  color: var(--zp-c-brand-1);
+}
+
+details summary::-webkit-details-marker {
+  display: none;
+}
+
+details summary::before {
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 5px solid currentColor;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+
+details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+details[open] summary {
+  border-bottom: none;
+}
+
+details > :not(summary) {
+  padding: 0 12px;
+}
+
+details > :last-child:not(summary) {
+  padding-bottom: 6px;
+}

package/src/theme/styles/overrides/fonts.css

@@ -0,0 +1,27 @@
+/**
+ * Self-hosted Geist fonts (vercel/geist-font).
+ */
+
+@font-face {
+  font-family: 'Geist Sans';
+  src: url('../../fonts/GeistSans-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Geist Pixel Square';
+  src: url('../../fonts/GeistPixel-Square.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Geist Mono';
+  src: url('../../fonts/GeistMono-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}

package/src/theme/styles/overrides/home-card.css

@@ -0,0 +1,125 @@
+/**
+ * Shared base card — container, hover, icon system, and divider.
+ * Consumed by feature-card.css and workspace-card.css.
+ */
+
+/* ── Base card container ─────────────────────────────────────── */
+.home-card {
+  padding: 16px 18px;
+  border-radius: var(--rp-radius);
+  border: 1px solid var(--zp-c-border);
+  background: var(--zp-c-bg-soft);
+  text-decoration: none !important;
+  transition:
+    border-color 0.2s,
+    background 0.2s,
+    box-shadow 0.2s;
+}
+
+.home-card:hover {
+  border-color: var(--zp-c-brand-1);
+  background: var(--zp-c-bg-elv);
+  box-shadow: 0 2px 12px rgba(167, 139, 250, 0.08);
+  text-decoration: none !important;
+}
+
+.home-card--clickable {
+  cursor: pointer;
+}
+
+/* ── Shared icon box (36×36, 4px radius, 18px SVG) ───────────── */
+.home-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.home-card-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* ── Icon color variants ─────────────────────────────────────── */
+.home-card-icon--purple {
+  background: rgba(167, 139, 250, 0.12);
+  color: #a78bfa;
+}
+
+.home-card-icon--purple svg {
+  color: #a78bfa;
+}
+
+.home-card-icon--blue {
+  background: rgba(96, 165, 250, 0.12);
+  color: #60a5fa;
+}
+
+.home-card-icon--blue svg {
+  color: #60a5fa;
+}
+
+.home-card-icon--green {
+  background: rgba(52, 211, 153, 0.12);
+  color: #34d399;
+}
+
+.home-card-icon--green svg {
+  color: #34d399;
+}
+
+.home-card-icon--amber {
+  background: rgba(251, 191, 36, 0.12);
+  color: #fbbf24;
+}
+
+.home-card-icon--amber svg {
+  color: #fbbf24;
+}
+
+.home-card-icon--red {
+  background: rgba(248, 113, 113, 0.12);
+  color: #f87171;
+}
+
+.home-card-icon--red svg {
+  color: #f87171;
+}
+
+.home-card-icon--slate {
+  background: rgba(148, 163, 184, 0.12);
+  color: #94a3b8;
+}
+
+.home-card-icon--slate svg {
+  color: #94a3b8;
+}
+
+.home-card-icon--cyan {
+  background: rgba(14, 165, 233, 0.12);
+  color: #0ea5e9;
+}
+
+.home-card-icon--cyan svg {
+  color: #0ea5e9;
+}
+
+.home-card-icon--pink {
+  background: rgba(244, 114, 182, 0.12);
+  color: #f472b6;
+}
+
+.home-card-icon--pink svg {
+  color: #f472b6;
+}
+
+/* ── Divider between features and workspaces ─────────────────── */
+.home-card-divider {
+  max-width: 1152px;
+  margin: 0 auto 48px;
+  border: none;
+  border-top: 1px solid var(--zp-c-divider);
+}

package/src/theme/styles/overrides/home.css

@@ -0,0 +1,55 @@
+/**
+ * Home page overrides — hero image sizing, Rspress card/code tweaks.
+ */
+
+/* ── Rspress home hero image sizing ──────────────────────── */
+html .rp-home-hero__image {
+  flex: none;
+  width: 548px;
+  margin-left: 24px;
+}
+
+html .rp-home-hero__image-img {
+  width: 548px;
+  height: auto;
+}
+
+/* ── Rspress home hero container ────────────────────────── */
+html .rp-home-hero {
+  gap: 16px !important;
+}
+
+/* ── Rspress home hero text sizing & spacing ───────────── */
+html .rp-home-hero__name {
+  font-size: 1.25rem !important;
+}
+
+html .rp-home-hero__text {
+  font-size: 2.5rem !important;
+  margin-bottom: 8px !important;
+}
+
+html .rp-home-hero__tagline {
+  padding-bottom: 16px !important;
+}
+
+@media (max-width: 1000px) {
+  html .rp-home-hero__image {
+    width: 400px;
+    margin-left: 0;
+    margin-top: 32px;
+  }
+
+  html .rp-home-hero__image-img {
+    width: 400px;
+  }
+}
+
+/* ── Code blocks ─────────────────────────────────────────── */
+div[class*='language-'] {
+  border-radius: var(--rp-radius) !important;
+}
+
+code:not(pre code) {
+  border-radius: var(--rp-radius-small);
+}

package/src/theme/styles/overrides/rspress.css

@@ -0,0 +1,108 @@
+/**
+ * Rspress brand overrides (purple / violet).
+ *
+ * html:root bumps specificity (0,1,1) above Rspress vars.css
+ * (:root = 0,1,0) so these always win regardless of load order.
+ */
+
+html:root {
+  /* Fonts — map Geist into Rspress's font stack */
+  --rp-font-family-base: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+
+  /* Brand colors */
+  --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);
+
+  /* Solid home background — overrides Rspress default radial gradients */
+  --rp-home-background-bg: #fff;
+}
+
+/* ── LLMs UI — hide the view-options trigger button (dropdown arrow) ── */
+html .rp-llms-view-options__trigger {
+  display: none;
+}
+
+html .rp-llms-container {
+  float: right;
+  margin-top: 8px;
+  margin-bottom: 0;
+}
+
+html .rp-doc h1.rp-toc-include {
+  display: inline;
+}
+
+/* ── Buttons — pill shape ─────────────────────────────────── */
+html .rp-button--medium,
+html .rp-button--big {
+  border-radius: 9999px;
+}
+
+/* ── Tables ──────────────────────────────────────────────── */
+html table {
+  border-radius: var(--rp-radius);
+  overflow: hidden;
+}
+
+/* ── Dark-mode overrides (zpress custom vars) ─────────────── */
+.rp-dark,
+html[data-dark='true'] {
+  --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;
+}
+
+/* ── Dark-mode overrides (Rspress vars) ──────────────────────
+ * html.rp-dark bumps specificity (0,1,1) above Rspress vars.css
+ * .rp-dark (0,1,0) so these always win regardless of load order. */
+html.rp-dark {
+  --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;
+
+  /* Solid home background — overrides Rspress default radial gradients */
+  --rp-home-background-bg: #141414;
+}

package/src/theme/styles/overrides/scrollbar.css

@@ -0,0 +1,25 @@
+/**
+ * Dark scrollbar overrides.
+ */
+
+.rp-dark ::-webkit-scrollbar,
+html[data-dark='true'] ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.rp-dark ::-webkit-scrollbar-track,
+html[data-dark='true'] ::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.rp-dark ::-webkit-scrollbar-thumb,
+html[data-dark='true'] ::-webkit-scrollbar-thumb {
+  background: #3a3a3a;
+  border-radius: 3px;
+}
+
+.rp-dark ::-webkit-scrollbar-thumb:hover,
+html[data-dark='true'] ::-webkit-scrollbar-thumb:hover {
+  background: #4a4a4a;
+}

package/src/theme/styles/overrides/section-card.css

@@ -0,0 +1,115 @@
+/**
+ * Section landing page cards — emitted by the sync engine as raw HTML.
+ */
+
+/* ── Section grid ────────────────────────────────────────── */
+.section-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.section-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 16px 18px;
+  border-radius: var(--rp-radius);
+  border: 1px solid var(--zp-c-border);
+  background: var(--zp-c-bg-soft);
+  text-decoration: none !important;
+  transition:
+    border-color 0.2s,
+    background 0.2s,
+    box-shadow 0.2s;
+}
+
+.section-card:hover {
+  border-color: var(--zp-c-brand-1);
+  background: var(--zp-c-bg-elv);
+  box-shadow: 0 2px 12px rgba(167, 139, 250, 0.08);
+}
+
+.section-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.section-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* ── Section icon colors ─────────────────────────────────── */
+.section-icon--blue {
+  background: rgba(96, 165, 250, 0.12);
+  color: #60a5fa;
+}
+
+.section-icon--purple {
+  background: rgba(167, 139, 250, 0.12);
+  color: #a78bfa;
+}
+
+.section-icon--green {
+  background: rgba(52, 211, 153, 0.12);
+  color: #34d399;
+}
+
+.section-icon--amber {
+  background: rgba(251, 191, 36, 0.12);
+  color: #fbbf24;
+}
+
+.section-icon--red {
+  background: rgba(248, 113, 113, 0.12);
+  color: #f87171;
+}
+
+.section-icon--slate {
+  background: rgba(148, 163, 184, 0.12);
+  color: #94a3b8;
+}
+
+.section-icon--cyan {
+  background: rgba(14, 165, 233, 0.12);
+  color: #0ea5e9;
+}
+
+.section-icon--pink {
+  background: rgba(244, 114, 182, 0.12);
+  color: #f472b6;
+}
+
+.section-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--zp-c-text-1);
+  line-height: 1.4;
+}
+
+.section-desc {
+  font-size: 13px;
+  color: var(--zp-c-text-2);
+  line-height: 1.5;
+}
+
+/* ── Responsive ──────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .section-grid {
+    grid-template-columns: 1fr;
+  }
+}

package/src/theme/styles/overrides/sidebar.css

@@ -0,0 +1,9 @@
+/* ── Transitions (960px–1439px) ──────────────────────────── */
+
+@media (min-width: 960px) and (max-width: 1439px) {
+  .rspress-sidebar {
+    transition:
+      width 0.3s ease,
+      min-width 0.3s ease;
+  }
+}

package/src/theme/styles/overrides/tokens.css

@@ -0,0 +1,48 @@
+/**
+ * zpress custom properties (--zp-* prefix).
+ *
+ * Palette derived from apps/console globals.css:
+ *   --background : oklch(0.1448 0 0)   ≈ #1a1a1a
+ *   --foreground : oklch(0.9851 0 0)    ≈ #fbfbfb
+ *   --primary    : oklch(0.78 0.13 291) ≈ #a78bfa (purple/violet)
+ *   --border     : oklch(0.3407 0 0)    ≈ #4a4a4a
+ */
+
+:root {
+  --zp-font-family-base: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
+  --zp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --zp-layout-max-width: 1680px;
+
+  /* Radii — override Rspress defaults (1rem / 0.5rem / 1.5rem) */
+  --rp-radius: 0.25rem;
+  --rp-radius-small: 0.125rem;
+  --rp-radius-large: 0.5rem;
+
+  --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);
+
+  /* Light-mode surface & text defaults — ensures --zp-c-* variables
+     resolve even when .rp-dark is not applied. */
+  --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;
+}