Themeing and CSS

The follwoing css variables are used to theme the pagewrite site.

:root {
  --brand-color: #3b82f6;
  --brand-color-active: #60a5fa;

  --text: #374151;
  --text-muted: #6b7280;
  --text-title: #111827;

  --border-line: #e5e7eb;

  --secondary: #f4f4f5;
  --accent: #f4f4f5;

  --code-bg: #fafafa;
  --code-border: #e4e4e7;

  --background: #ffffff;
}

These variables are configured with tailwind v4 class names, For detailed configuration of tailwind classes defined in each temaplate

Typography styles

:root {
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs: 0.8rem;
  --text-sm: 0.92rem;
  --text-base: 16px;
  --text-md: 1.05rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --heading-weight: 600;
  --heading-line-height: 1.25;
  --paragraph-line-height: 1.8;
  --letter-spacing-heading: -0.025em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --content-width: 48rem;
  /* max-w-3xl */
  --sidebar-width: 18rem;
  /* w-72 */
  --toc-width: 14rem;
  /* w-56 */
  --header-height: 3.5rem;
}

Tailwind configuration.

@theme {
  --color-primary: var(--brand-color);
  --color-primary-active: var(--brand-color-active);

  --color-accent: var(--accent);
  --color-secondary: var(--secondary);

  --color-text: var(--text);
  --color-text-muted: var(--text-muted);
  --color-text-title: var(--text-title);

  --color-border-line: var(--border-line);

  --color-code-bg: var(--code-bg);
  --color-code-border: var(--code-border);
  --color-background: var(--background);

  --font-sans: var(--font-body);
  --font-heading: var(--font-heading);
  --font-mono: var(--font-mono);

  --text-xs: var(--text-xs);
  --text-sm: var(--text-sm);
  --text-base: var(--text-base);
  --text-md: var(--text-md);
  --text-lg: var(--text-lg);
  --text-xl: var(--text-xl);
  --text-2xl: var(--text-2xl);
  --text-3xl: var(--text-3xl);
  --text-4xl: var(--text-4xl);

  --font-weight-heading: var(--heading-weight);
  --tracking-heading: var(--letter-spacing-heading);

  --spacing-1: var(--space-1);
  --spacing-2: var(--space-2);
  --spacing-3: var(--space-3);
  --spacing-4: var(--space-4);
  --spacing-5: var(--space-5);
  --spacing-6: var(--space-6);
  --spacing-8: var(--space-8);
  --spacing-10: var(--space-10);
  --spacing-12: var(--space-12);

  --width-content: var(--content-width);
  --width-sidebar: var(--sidebar-width);
  --width-toc: var(--toc-width);
  --height-header: var(--header-height);
}