@zpress/ui 0.3.0 → 0.4.0

package/src/theme/styles/themes/arcade.css

@@ -0,0 +1,96 @@
+/**
+ * Arcade theme — retro neon gaming palette.
+ *
+ * Vibrant neon green/cyan brand with deep indigo backgrounds.
+ * High-saturation, high-energy visual style.
+ */
+
+/* ── Light mode (deep indigo) ────────────────────────────── */
+html[data-zp-theme='arcade'] {
+  --zp-c-brand-1: #00ff88;
+  --zp-c-brand-2: #00cc6a;
+  --zp-c-brand-3: #00aa55;
+  --zp-c-brand-soft: rgba(0, 255, 136, 0.14);
+
+  --zp-c-bg: #0d0d1a;
+  --zp-c-bg-alt: #10102a;
+  --zp-c-bg-elv: #141433;
+  --zp-c-bg-soft: #18183d;
+  --zp-c-bg-icon: #2a2a55;
+
+  --zp-c-text-1: #e0ffe0;
+  --zp-c-text-2: rgba(224, 255, 224, 0.72);
+  --zp-c-text-3: rgba(224, 255, 224, 0.48);
+
+  --zp-c-divider: #1a1a40;
+  --zp-c-border: #252560;
+  --zp-c-gutter: #10102a;
+
+  --zp-code-block-bg: #10102a;
+
+  --zp-button-brand-bg: #00aa55;
+  --zp-button-brand-hover-bg: #00cc6a;
+  --zp-button-brand-active-bg: #008844;
+  --zp-button-brand-text: #0d0d1a;
+
+  --rp-c-brand: #00ff88;
+  --rp-c-brand-light: #66ffbb;
+  --rp-c-brand-lighter: #99ffcc;
+  --rp-c-brand-dark: #00cc6a;
+  --rp-c-brand-darker: #00aa55;
+  --rp-c-brand-tint: rgba(0, 255, 136, 0.14);
+
+  --rp-c-bg: #0d0d1a;
+  --rp-c-bg-soft: #18183d;
+  --rp-c-bg-mute: #141433;
+
+  --rp-c-text-1: #e0ffe0;
+  --rp-c-text-2: rgba(224, 255, 224, 0.72);
+  --rp-c-text-3: rgba(224, 255, 224, 0.48);
+
+  --rp-c-divider: #1a1a40;
+  --rp-c-link: var(--rp-c-brand-light);
+
+  --rp-code-block-bg: #10102a;
+
+  --rp-home-background-bg: #0d0d1a;
+}
+
+/* ── Dark mode (deeper indigo) ───────────────────────────── */
+html[data-zp-theme='arcade'].rp-dark {
+  --zp-c-bg: #080812;
+  --zp-c-bg-alt: #0a0a1a;
+  --zp-c-bg-elv: #0d0d22;
+  --zp-c-bg-soft: #10102a;
+  --zp-c-bg-icon: #222250;
+
+  --zp-c-text-1: #f0fff0;
+  --zp-c-text-2: rgba(240, 255, 240, 0.72);
+  --zp-c-text-3: rgba(240, 255, 240, 0.48);
+
+  --zp-c-divider: #141430;
+  --zp-c-border: #1e1e50;
+  --zp-c-gutter: #0a0a1a;
+
+  --zp-code-block-bg: #0a0a1a;
+
+  --zp-button-brand-bg: #00aa55;
+  --zp-button-brand-hover-bg: #00cc6a;
+  --zp-button-brand-active-bg: #008844;
+  --zp-button-brand-text: #080812;
+
+  --rp-c-bg: #080812;
+  --rp-c-bg-soft: #10102a;
+  --rp-c-bg-mute: #0d0d22;
+
+  --rp-c-text-1: #f0fff0;
+  --rp-c-text-2: rgba(240, 255, 240, 0.72);
+  --rp-c-text-3: rgba(240, 255, 240, 0.48);
+
+  --rp-c-divider: #141430;
+  --rp-c-link: var(--rp-c-brand-light);
+
+  --rp-code-block-bg: #0a0a1a;
+
+  --rp-home-background-bg: #080812;
+}

package/src/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/src/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;
+}