@commonpub/layer 0.3.38 → 0.4.1

package/theme/agora.css

@@ -0,0 +1,456 @@
+@layer commonpub {
+/* ===========================================
+   CommonPub Agora Theme — Light
+   "Where makers gather, build, and share."
+
+   Warm institutional aesthetic: parchment
+   backgrounds, commons green accent, Fraunces
+   serif display, Work Sans body, soft rgba
+   borders, paper texture, snappy easing.
+
+   This is a COMPLETE design system, not just
+   a color swap. It overrides tokens AND
+   component styles.
+   =========================================== */
+
+[data-theme="agora"] {
+  /* === SURFACES (warm, paper-like) === */
+  --bg: #f7f4ed;
+  --surface: #faf8f3;
+  --surface2: #ece8de;
+  --surface3: #e2ddd2;
+
+  --color-surface: var(--surface);
+  --color-surface-alt: var(--surface2);
+  --color-surface-raised: var(--surface);
+  --color-surface-overlay: rgba(26, 26, 26, 0.5);
+  --color-surface-overlay-light: rgba(26, 26, 26, 0.4);
+  --color-surface-scrim: rgba(247, 244, 237, 0.75);
+  --color-surface-hover: var(--surface2);
+  --color-bg-subtle: var(--bg);
+
+  /* === TEXT (ink gradations) === */
+  --text: #1a1a1a;
+  --text-dim: #4a4a44;
+  --text-faint: #7a7a72;
+
+  --color-text: var(--text);
+  --color-text-secondary: var(--text-dim);
+  --color-text-muted: var(--text-faint);
+  --color-text-inverse: #f7f4ed;
+
+  /* === BORDERS (soft, warm) === */
+  --border: rgba(26, 26, 26, 0.25);
+  --border2: rgba(26, 26, 26, 0.12);
+
+  --color-border: var(--border2);
+  --color-border-strong: var(--border);
+  --color-border-focus: var(--accent);
+
+  /* === ACCENT (commons green) === */
+  --accent: #3d8b5e;
+  --accent-bg: rgba(61, 139, 94, 0.08);
+  --accent-bg-strong: rgba(61, 139, 94, 0.2);
+  --accent-bg-heavy: rgba(61, 139, 94, 0.4);
+  --accent-bg-solid: rgba(61, 139, 94, 0.6);
+  --accent-border: rgba(61, 139, 94, 0.25);
+  --accent-focus-ring: 0 0 0 3px rgba(61, 139, 94, 0.12);
+
+  --color-primary: var(--accent);
+  --color-primary-hover: #348050;
+  --color-primary-text: #ffffff;
+  --color-on-primary: #ffffff;
+  --color-accent: var(--accent);
+  --color-accent-hover: #348050;
+  --color-accent-text: #ffffff;
+  --color-on-accent: #ffffff;
+  --color-accent-bg: var(--accent-bg);
+  --color-accent-border: var(--accent-border);
+
+  /* === SEMANTIC COLORS (warm palette) === */
+  --green: #3d8b5e;
+  --green-bg: rgba(61, 139, 94, 0.08);
+  --green-border: rgba(61, 139, 94, 0.25);
+
+  --yellow: #c4882a;
+  --yellow-bg: rgba(196, 136, 42, 0.08);
+  --yellow-border: rgba(196, 136, 42, 0.25);
+
+  --red: #c4443a;
+  --red-bg: rgba(196, 68, 58, 0.08);
+  --red-border: rgba(196, 68, 58, 0.25);
+
+  --purple: #7b5ea7;
+  --purple-bg: rgba(123, 94, 167, 0.08);
+  --purple-border: rgba(123, 94, 167, 0.25);
+
+  --teal: #2a9d8f;
+  --teal-bg: rgba(42, 157, 143, 0.08);
+  --teal-border: rgba(42, 157, 143, 0.25);
+
+  --pink: #b85a7a;
+  --pink-bg: rgba(184, 90, 122, 0.08);
+  --pink-border: rgba(184, 90, 122, 0.25);
+
+  --color-success: var(--green);
+  --color-warning: var(--yellow);
+  --color-error: var(--red);
+  --color-info: #4a7fb8;
+  --color-success-bg: var(--green-bg);
+  --color-warning-bg: var(--yellow-bg);
+  --color-error-bg: var(--red-bg);
+  --color-info-bg: rgba(74, 127, 184, 0.08);
+
+  /* === OVERLAYS === */
+  --color-badge-overlay: rgba(26, 26, 26, 0.75);
+
+  /* === INTERACTIVE === */
+  --color-link: #2a6342;
+  --color-link-hover: #1e4f32;
+
+  /* === TYPOGRAPHY (warm, distinctive) === */
+  --font-sans: 'Work Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
+
+  --font-heading: var(--font-display);
+  --font-body: var(--font-sans);
+
+  /* Font Sizes (Agora scale) */
+  --text-xs: 0.6875rem;   /* 11px */
+  --text-sm: 0.8125rem;   /* 13px */
+  --text-base: 0.9375rem; /* 15px */
+  --text-md: 1.0625rem;   /* 17px */
+  --text-lg: 1.25rem;     /* 20px */
+  --text-xl: 1.5rem;      /* 24px */
+  --text-2xl: 1.875rem;   /* 30px */
+  --text-3xl: 2.375rem;   /* 38px */
+  --text-4xl: 3rem;       /* 48px */
+  --text-5xl: 4rem;       /* 64px */
+  --text-label: 0.625rem; /* 10px — monospace UI labels */
+
+  /* Line Heights */
+  --leading-tight: 1.15;
+  --leading-snug: 1.35;
+  --leading-normal: 1.7;
+  --leading-relaxed: 1.9;
+
+  /* Letter Spacing (wider for Agora's institutional feel) */
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.06em;
+  --tracking-wider: 0.1em;
+  --tracking-widest: 0.16em;
+
+  /* === SHADOWS (offset, warm ink) === */
+  --shadow-sm: 2px 2px 0 rgba(26, 26, 26, 0.25);
+  --shadow-md: 4px 4px 0 rgba(26, 26, 26, 0.25);
+  --shadow-lg: 6px 6px 0 rgba(26, 26, 26, 0.25);
+  --shadow-xl: 8px 8px 0 rgba(26, 26, 26, 0.25);
+  --shadow-accent: 4px 4px 0 var(--accent);
+
+  /* === TRANSITIONS (snappy) === */
+  --transition-fast: 120ms cubic-bezier(0.22, 1, 0.36, 1);
+  --transition-default: 250ms cubic-bezier(0.22, 1, 0.36, 1);
+  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* === FOCUS (glow instead of outline) === */
+  --focus-ring: 0 0 0 3px rgba(61, 139, 94, 0.2);
+}
+
+
+/* ═══════════════════════════════════════════
+   PAPER TEXTURE OVERLAY
+   Subtle noise that gives everything a
+   tactile, printed-on-paper feel.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.02;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+
+/* ═══════════════════════════════════════════
+   TYPOGRAPHY OVERRIDES
+   Fraunces for display/headings, Work Sans
+   for body, wider tracking on labels.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] h1,
+[data-theme="agora"] h2,
+[data-theme="agora"] h3 {
+  font-family: var(--font-display);
+}
+
+/* Focus: glow instead of outline */
+[data-theme="agora"] :focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: TOPBAR / NAVIGATION
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-topbar {
+  background: var(--surface);
+  border-bottom-color: var(--border);
+}
+
+/* Agora wordmark in topbar */
+[data-theme="agora"] .cpub-site-logo .cpub-logo-name {
+  font-family: var(--font-display);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+[data-theme="agora"] .cpub-site-logo .cpub-logo-bracket {
+  color: var(--accent);
+}
+
+[data-theme="agora"] .cpub-topbar-link.router-link-active {
+  color: var(--accent);
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: BUTTONS
+   Snappy easing, green primary, softer borders.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-btn {
+  border-color: var(--border);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
+}
+
+[data-theme="agora"] .cpub-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+[data-theme="agora"] .cpub-btn:active {
+  transform: translateY(0);
+  box-shadow: none;
+}
+
+[data-theme="agora"] .cpub-btn-primary {
+  background: var(--accent);
+  border-color: #2a6342;
+  box-shadow: var(--shadow-md);
+}
+
+[data-theme="agora"] .cpub-btn-primary:hover {
+  background: #348050;
+  box-shadow: var(--shadow-accent);
+  transform: translateY(-1px);
+}
+
+[data-theme="agora"] .cpub-btn-ghost {
+  color: var(--accent);
+  border-color: transparent;
+}
+
+[data-theme="agora"] .cpub-btn-ghost:hover {
+  color: #2a6342;
+  background: var(--accent-bg);
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: CARDS
+   Linen backgrounds, soft borders, accent
+   left-border treatment on hover.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-sb-card,
+[data-theme="agora"] .cpub-stat-card {
+  background: var(--bg);
+  border-color: var(--border);
+  box-shadow: var(--shadow-sm);
+}
+
+[data-theme="agora"] .cpub-sb-card:hover,
+[data-theme="agora"] .cpub-stat-card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+/* Content cards get accent left border on hover */
+[data-theme="agora"] .cpub-content-card {
+  border-color: var(--border);
+  background: var(--surface);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
+}
+
+[data-theme="agora"] .cpub-content-card:hover {
+  border-left-color: var(--accent);
+  border-left-width: 4px;
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+/* Card headers use display font */
+[data-theme="agora"] .cpub-content-card h3,
+[data-theme="agora"] .cpub-content-card .cpub-card-title {
+  font-family: var(--font-display);
+  font-weight: 700;
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: INPUTS & FORMS
+   Soft borders, glow focus ring.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-input,
+[data-theme="agora"] .cpub-textarea,
+[data-theme="agora"] .cpub-select {
+  border-color: var(--border);
+  background: var(--bg);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+[data-theme="agora"] .cpub-input:focus,
+[data-theme="agora"] .cpub-textarea:focus,
+[data-theme="agora"] .cpub-select:focus {
+  border-color: var(--accent);
+  box-shadow: var(--focus-ring);
+  outline: none;
+}
+
+/* Form labels get wider tracking */
+[data-theme="agora"] .cpub-form-label {
+  letter-spacing: var(--tracking-wider);
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: BADGES & TAGS
+   Thinner borders (1px), warmer palette.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-tag {
+  border-width: 1px;
+}
+
+[data-theme="agora"] .cpub-badge-filled {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: SECTION TITLES & HEADINGS
+   Fraunces display, green accent numbers.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-section-title-lg {
+  font-family: var(--font-display);
+  font-weight: 700;
+}
+
+[data-theme="agora"] .cpub-section-title-sm {
+  font-family: var(--font-display);
+  font-weight: 600;
+}
+
+[data-theme="agora"] .admin-page-title {
+  font-family: var(--font-display);
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: LINKS
+   Green links with underline offset.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] a:not(.cpub-btn):not(.cpub-topbar-link):not(.cpub-footer-link):not(.admin-nav-link) {
+  text-decoration-color: rgba(61, 139, 94, 0.3);
+  text-underline-offset: 2px;
+}
+
+
+/* ═══════════════════════════════════════════
+   COMPONENT: FOOTER
+   Warm treatment, serif brand name.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-footer {
+  border-top-color: var(--border);
+}
+
+[data-theme="agora"] .cpub-footer-logo .cpub-logo-name {
+  font-family: var(--font-display);
+  font-weight: 700;
+}
+
+[data-theme="agora"] .cpub-footer-col-title {
+  letter-spacing: var(--tracking-widest);
+}
+
+
+/* ═══════════════════════════════════════════
+   PROSE / CONTENT AREA
+   Serif headings, warmer body feel.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .cpub-prose h1,
+[data-theme="agora"] .cpub-prose h2,
+[data-theme="agora"] .cpub-prose h3,
+[data-theme="agora"] .cpub-prose h4 {
+  font-family: var(--font-display);
+}
+
+[data-theme="agora"] .cpub-prose blockquote {
+  border-left-color: var(--accent);
+  background: var(--accent-bg);
+}
+
+[data-theme="agora"] .cpub-prose a {
+  color: var(--accent);
+  text-decoration-color: rgba(61, 139, 94, 0.3);
+}
+
+[data-theme="agora"] .cpub-prose code {
+  background: var(--surface2);
+  border-color: var(--border2);
+}
+
+
+/* ═══════════════════════════════════════════
+   ADMIN LAYOUT
+   Warm sidebar, serif titles.
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] .admin-brand {
+  font-family: var(--font-display);
+}
+
+[data-theme="agora"] .admin-nav-link.router-link-exact-active {
+  color: var(--accent);
+  background: var(--accent-bg);
+}
+
+[data-theme="agora"] .admin-badge {
+  background: var(--accent);
+}
+
+
+/* ═══════════════════════════════════════════
+   CONTENT TYPE BADGE COLORS (Agora palette)
+   ═══════════════════════════════════════════ */
+
+[data-theme="agora"] [data-content-type="article"] { --badge-color: #4a7fb8; --badge-bg: rgba(74, 127, 184, 0.08); }
+[data-theme="agora"] [data-content-type="blog"] { --badge-color: #3d8b5e; --badge-bg: rgba(61, 139, 94, 0.08); }
+[data-theme="agora"] [data-content-type="project"] { --badge-color: #7b5ea7; --badge-bg: rgba(123, 94, 167, 0.08); }
+[data-theme="agora"] [data-content-type="explainer"] { --badge-color: #2a9d8f; --badge-bg: rgba(42, 157, 143, 0.08); }
+[data-theme="agora"] [data-content-type="video"] { --badge-color: #c4443a; --badge-bg: rgba(196, 68, 58, 0.08); }
+[data-theme="agora"] [data-content-type="tutorial"] { --badge-color: #c4882a; --badge-bg: rgba(196, 136, 42, 0.08); }
+}

package/utils/themeConfig.ts

@@ -0,0 +1,39 @@
+/**
+ * Shared theme family configuration.
+ * Used by both server (instanceTheme.ts) and client (useTheme.ts).
+ *
+ * To add a new theme:
+ * 1. Create the CSS file(s) in packages/ui/theme/
+ * 2. Register in packages/ui/src/theme.ts BUILT_IN_THEMES
+ * 3. Add the family mapping here
+ * 4. Add theme ID to VALID_IDS in server/utils/instanceTheme.ts
+ * 5. Add CSS import in layers/base/nuxt.config.ts
+ */
+
+/** Map every theme ID to its family name */
+export const THEME_TO_FAMILY: Record<string, string> = {
+  base: 'classic',
+  dark: 'classic',
+  generics: 'generics',
+  agora: 'agora',
+  'agora-dark': 'agora',
+};
+
+/** Light/dark variants for each family */
+export const FAMILY_VARIANTS: Record<string, { light: string; dark: string }> = {
+  classic: { light: 'base', dark: 'dark' },
+  agora: { light: 'agora', dark: 'agora-dark' },
+  generics: { light: 'generics', dark: 'generics' },
+};
+
+/** Whether a theme ID is a dark theme */
+export const IS_DARK: Record<string, boolean> = {
+  base: false,
+  dark: true,
+  generics: true,
+  agora: false,
+  'agora-dark': true,
+};
+
+/** All valid theme IDs */
+export const VALID_THEME_IDS = new Set(Object.keys(THEME_TO_FAMILY));