@specglass/theme-default 0.0.9 → 0.0.11

package/src/styles/global.css

@@ -1,5 +1,4 @@
 @import "tailwindcss";
-@plugin "tailwindcss-animate";
 
 /*
  * Source directives — tell Tailwind v4 to scan component/layout templates
@@ -20,47 +19,85 @@
  * Override via site-level CSS or tailwind @theme extensions.
  */
 @theme {
-  /* Primary brand colors */
-  --color-primary: oklch(0.546 0.245 262.881);
-  --color-primary-light: oklch(0.623 0.214 259.815);
-  --color-primary-dark: oklch(0.488 0.243 264.376);
-
-  /* Surface / background colors */
-  --color-surface: oklch(0.985 0.002 247.839);
-  --color-surface-dark: oklch(0.21 0.034 264.665);
-  --color-sidebar-bg: oklch(0.968 0.007 264.536);
-  --color-sidebar-bg-dark: oklch(0.179 0.04 264.376);
-
-  /* Text colors */
-  --color-text: oklch(0.21 0.034 264.665);
-  --color-text-dark: oklch(0.968 0.007 264.536);
-  --color-text-muted: oklch(0.553 0.013 264.364);
-  --color-text-muted-dark: oklch(0.708 0.014 264.364);
-
-  /* Border colors */
-  --color-border: oklch(0.872 0.01 258.338);
-  --color-border-dark: oklch(0.303 0.034 264.376);
-
-  /* Raised surfaces (e.g., kbd badges, chips) */
-  --color-surface-raised: oklch(0.937 0.006 264.364);
-  --color-surface-raised-dark: oklch(0.269 0.036 264.376);
+  /* Primary accent — Vercel blue (neutral, minimal) */
+  --color-primary: oklch(0.55 0.19 260);
+  --color-primary-light: oklch(0.62 0.17 260);
+  --color-primary-dark: oklch(0.48 0.21 260);
+
+  /* Surface layers — light mode (Zinc palette)
+   * 3-tier depth system: base → raised → elevated
+   * Creates visual hierarchy without heavy borders */
+  --color-surface-0: oklch(0.985 0 0);
+  --color-surface-1: oklch(0.967 0.001 286.375);
+  --color-surface-2: oklch(1 0 0);
+
+  /* Surface layers — dark mode (Zinc scale, deeper contrast)
+   * 0: near-black (#09090b), 1: zinc-900 (#18181b), 2: zinc-800 (#27272a)
+   * Wider gaps between layers create stronger visual hierarchy */
+  --color-surface-0-dark: oklch(0.119 0.004 285.823);
+  --color-surface-1-dark: oklch(0.175 0.005 285.885);
+  --color-surface-2-dark: oklch(0.235 0.006 286.033);
+
+  /* Legacy surface aliases (backward compat — map to layer 0) */
+  --color-surface: oklch(0.985 0 0);
+  --color-surface-dark: oklch(0.119 0.004 285.823);
+
+  /* Deprecated: sidebar tokens — prefer surface-1 for sidebar backgrounds */
+  --color-sidebar-bg: oklch(0.967 0.001 286.375);
+  --color-sidebar-bg-dark: oklch(0.175 0.005 285.885);
+
+  /* Text colors (Zinc scale) */
+  --color-text: oklch(0.141 0.005 285.823);
+  --color-text-dark: oklch(0.985 0 0);
+  --color-text-muted: oklch(0.552 0.016 285.938);
+  --color-text-muted-dark: oklch(0.705 0.015 286.067);
+
+  /* Border colors (Zinc scale) */
+  --color-border: oklch(0.920 0.004 286.32);
+  --color-border-dark: oklch(0.235 0.006 286.033);
+
+  /* Raised surfaces (e.g., kbd badges, chips) — maps to surface-2 */
+  --color-surface-raised: oklch(0.920 0.004 286.32);
+  --color-surface-raised-dark: oklch(0.235 0.006 286.033);
 
   /* Interactive states */
-  --color-hover-bg: oklch(0.951 0.004 264.364);
-  --color-hover-bg-dark: oklch(0.269 0.036 264.376);
+  --color-hover-bg: oklch(0.967 0.001 286.375);
+  --color-hover-bg-dark: oklch(0.200 0.005 286.033);
 
   /* Layout dimensions */
   --width-sidebar: 16rem;
   --width-toc: 14rem;
-  --width-content-max: 48rem;
+  --width-content-max: 45rem;
   --height-header: 3.5rem;
 
-  /* Spacing */
-  --spacing-page: 1.5rem;
-
-  /* Typography */
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  /* Spacing — 8px grid system
+   * Every spacing value is a multiple of 8px (0.5rem).
+   * This creates subconscious visual harmony across the page. */
+  --spacing-1: 0.5rem;  /* 8px */
+  --spacing-2: 1rem;    /* 16px */
+  --spacing-3: 1.5rem;  /* 24px */
+  --spacing-4: 2rem;    /* 32px */
+  --spacing-5: 2.5rem;  /* 40px */
+  --spacing-6: 3rem;    /* 48px */
+  --spacing-page: 1.5rem;     /* 24px — page horizontal padding */
+  --spacing-section: 3rem;    /* 48px — between major sections */
+  --spacing-subsection: 2rem; /* 32px — between subsections */
+
+  /* Typography — weight-over-size hierarchy
+   * Inspired by Vercel docs: headings are closer in size but differ
+   * in weight, tracking, and opacity. This creates elegant hierarchy
+   * without the "shouty" feel of dramatically large headings.
+   * H1: 2rem/bold, H2: 1.5rem/semibold, H3: 1.25rem/semibold, H4: 1.125rem/medium */
+  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
+  --font-size-h1: 2.5rem;
+  --font-size-h2: 1.5rem;
+  --font-size-h3: 1.25rem;
+  --font-size-h4: 1.125rem;
+  --tracking-tight: -0.04em;
+  --tracking-snug: -0.03em;
+  --tracking-body: -0.02em;
+  --tracking-wide: -0.015em;
 
   /* Transitions */
   --transition-normal: 150ms;
@@ -78,12 +115,15 @@
  * This means ALL existing Tailwind classes (bg-surface, text-text, etc.)
  * automatically respond to dark mode — zero component template changes needed.
  *
- * Note: --color-primary is intentionally NOT remapped. The brand blue
- * oklch(0.546 0.245 262.881) has sufficient contrast (~7:1) on dark surface
- * oklch(0.21 0.034 264.665). For lighter accents, use dark:text-primary-light.
+ * Note: --color-primary is intentionally NOT remapped. Electric Green
+ * oklch(0.82 0.24 135) has excellent contrast (~10:1) on Zinc-950 dark surface.
+ * For lighter accents, use dark:text-primary-light.
  */
 .dark {
   --color-surface: var(--color-surface-dark);
+  --color-surface-0: var(--color-surface-0-dark);
+  --color-surface-1: var(--color-surface-1-dark);
+  --color-surface-2: var(--color-surface-2-dark);
   --color-sidebar-bg: var(--color-sidebar-bg-dark);
   --color-text: var(--color-text-dark);
   --color-text-muted: var(--color-text-muted-dark);
@@ -103,7 +143,9 @@ body {
   font-family: var(--font-sans);
   color: var(--color-text);
   background-color: var(--color-surface);
-  line-height: 1.7;
+  font-size: 1rem;
+  line-height: 1.75;
+  letter-spacing: -0.011em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transition: color var(--transition-normal) ease,
@@ -112,42 +154,96 @@ body {
 
 /* ─── Content Prose Styles ──────────────────────────────────── */
 
+/* Weight-over-size heading hierarchy:
+ * H1: bold, tight tracking — the anchor
+ * H2: semibold, snug tracking — section breaks
+ * H3: semibold, body tracking — subsections
+ * H4: medium weight — subtle grouping
+ * Size differences are deliberately small; weight + tracking do the work. */
 .sg-content h1 {
-  @apply text-3xl font-bold mt-0 mb-4;
+  font-size: var(--font-size-h1);
+  font-weight: 700;
+  letter-spacing: var(--tracking-tight);
+  line-height: 1.2;
+  margin-top: 0;
+  margin-bottom: var(--spacing-3); /* 24px */
 }
 .sg-content h2 {
-  @apply text-2xl font-semibold mt-10 mb-4 pb-2 border-b border-border;
+  font-size: var(--font-size-h2);
+  font-weight: 600;
+  letter-spacing: var(--tracking-snug);
+  line-height: 1.3;
+  margin-top: var(--spacing-6); /* 48px */
+  margin-bottom: var(--spacing-2); /* 16px */
+  padding-bottom: var(--spacing-1); /* 8px */
 }
 .sg-content h3 {
-  @apply text-xl font-semibold mt-8 mb-3;
+  font-size: var(--font-size-h3);
+  font-weight: 600;
+  letter-spacing: var(--tracking-body);
+  line-height: 1.35;
+  margin-top: var(--spacing-4); /* 32px */
+  margin-bottom: var(--spacing-1); /* 8px */
 }
 .sg-content h4 {
-  @apply text-lg font-semibold mt-6 mb-2;
+  font-size: var(--font-size-h4);
+  font-weight: 500;
+  letter-spacing: var(--tracking-wide);
+  line-height: 1.4;
+  margin-top: var(--spacing-3); /* 24px */
+  margin-bottom: var(--spacing-1); /* 8px */
 }
 
 .sg-content p {
-  @apply my-4 leading-7;
+  line-height: 1.625;
+  margin-block: var(--spacing-2); /* 16px */
 }
 .sg-content ul,
 .sg-content ol {
-  @apply my-4 pl-6;
+  margin-block: var(--spacing-2); /* 16px */
+  padding-left: var(--spacing-3); /* 24px */
+}
+.sg-content ul {
+  list-style-type: disc;
+}
+.sg-content ol {
+  list-style-type: decimal;
 }
 .sg-content li {
-  @apply my-1;
+  margin-block: var(--spacing-1); /* 8px */
+}
+.sg-content li::marker {
+  color: var(--color-text-muted);
 }
 
 .sg-content a {
-  @apply text-primary underline decoration-primary/30 underline-offset-2
-         hover:decoration-primary/80 transition-colors;
+  @apply text-text underline decoration-border/60 decoration-1 underline-offset-4
+         hover:decoration-text/60 transition-colors;
 }
 
 .sg-content code:not(pre code) {
-  @apply bg-gray-100 dark:bg-gray-800 text-sm px-1.5 py-0.5 rounded font-mono;
+  font-size: 0.8125em;
+  font-family: var(--font-mono);
+  padding: 0.125em 0.375em;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-border);
+  @apply bg-surface-1;
 }
 
 .sg-content pre {
-  @apply my-6 rounded-lg overflow-x-auto text-sm leading-6;
-  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  font-size: 0.8125rem;
+  line-height: 1.7;
+  padding: var(--spacing-2) var(--spacing-3); /* 16px 24px */
+  margin-block: var(--spacing-3); /* 24px */
+  font-feature-settings: "calt" 1, "liga" 1;
+  border: 1px solid var(--color-border);
+}
+
+.sg-content pre code,
+pre > code {
+  font-feature-settings: "calt" 1, "liga" 1;
 }
 
 /* ─── Shiki Dual-Theme CSS Variables ────────────────────────── */
@@ -165,26 +261,27 @@ pre > code span {
   background-color: transparent;
 }
 pre {
-  background-color: var(--shiki-light-bg, #f6f8fa) !important;
+  background-color: var(--shiki-light-bg, #fafafa) !important;
 }
 .dark pre > code,
 .dark pre > code span {
   color: var(--shiki-dark, var(--color-text, #e5e7eb));
 }
 .dark pre {
-  background-color: var(--shiki-dark-bg, #161b22) !important;
+  background-color: var(--shiki-dark-bg, #09090b) !important;
+  border-color: oklch(0.235 0.006 286.033);
 }
 
 /* Line highlighting — Astro/Shiki marks highlighted lines with .line.highlighted */
 pre code .line.highlighted {
-  background-color: oklch(0.546 0.245 262.881 / 0.1);
+  background-color: oklch(0.55 0.02 260 / 0.08);
   display: inline-block;
   width: 100%;
   margin: 0 -1.25rem;
   padding: 0 1.25rem;
 }
 .dark pre code .line.highlighted {
-  background-color: oklch(0.623 0.214 259.815 / 0.15);
+  background-color: oklch(0.7 0.01 260 / 0.1);
 }
 
 /* ─── Code Block Copy Button (fenced code blocks) ──────────── */
@@ -228,26 +325,258 @@ pre code .line.highlighted {
 }
 
 .sg-content blockquote {
-  @apply border-l-4 border-primary/30 pl-4 my-4 italic text-text-muted;
+  border-left: 2px solid var(--color-border);
+  padding-left: var(--spacing-2); /* 16px */
+  margin-block: var(--spacing-2); /* 16px */
+  @apply text-text-muted;
 }
 
 .sg-content table {
-  @apply w-full my-6 text-sm;
+  width: 100%;
+  font-size: 0.875rem;
+  margin-block: var(--spacing-3); /* 24px */
 }
 
 .sg-content th {
-  @apply text-left font-semibold p-2 border-b-2 border-border;
+  text-align: left;
+  font-weight: 600;
+  padding: var(--spacing-1); /* 8px */
+  @apply border-b-2 border-border;
 }
 
 .sg-content td {
-  @apply p-2 border-b border-border;
+  padding: var(--spacing-1); /* 8px */
+  @apply border-b border-border;
 }
 
 .sg-content hr {
-  @apply my-8 border-border;
+  margin-block: var(--spacing-6); /* 48px */
+  @apply border-border;
 }
 
 .sg-content img {
-  @apply rounded-lg max-w-full my-6;
+  border-radius: 0.5rem;
+  max-width: 100%;
+  margin-block: var(--spacing-3); /* 24px */
+}
+
+/* ─── Code Block Enhancements (Story 11.1) ────────────────── */
+
+/* Fenced code block filename header — matches CodeBlock.astro header */
+.code-block--fenced .code-block-header {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background-color: var(--code-block-header-bg, oklch(0.967 0.001 286.375));
+  border-bottom: 1px solid var(--code-block-border, oklch(0.92 0.004 286.32));
+  font-size: 0.8125rem;
+  font-family: var(--font-mono);
+}
+
+.code-block--fenced .code-block-title {
+  color: var(--code-block-title-color, oklch(0.552 0.016 285.938));
+}
+
+/* Line numbers via CSS counter */
+.code-block--line-numbers pre code {
+  counter-reset: line;
+}
+
+.code-block--line-numbers pre code .line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 2.5rem;
+  margin-right: 1rem;
+  text-align: right;
+  color: oklch(0.552 0.016 285.938 / 0.4);
+  font-size: 0.8125em;
+  user-select: none;
+}
+
+/* Highlighted lines */
+.code-block pre code .line.highlighted {
+  background: oklch(0.55 0.02 260 / 0.06);
+  margin: 0 -1.5rem;
+  padding: 0 1.5rem;
+  display: block;
+  border-left: 3px solid oklch(0.55 0.10 260 / 0.4);
+}
+
+/* Diff indicators */
+.code-block--diff pre code .line {
+  position: relative;
+}
+
+.code-block--diff pre code .line.diff-add {
+  background: oklch(0.87 0.15 145 / 0.1);
+}
+
+.code-block--diff pre code .line.diff-add::before {
+  content: "+";
+  position: absolute;
+  left: 0.5rem;
+  color: oklch(0.72 0.19 145);
+  font-weight: 600;
+  user-select: none;
+}
+
+.code-block--diff pre code .line.diff-remove {
+  background: oklch(0.65 0.2 25 / 0.1);
+  opacity: 0.7;
+}
+
+.code-block--diff pre code .line.diff-remove::before {
+  content: "-";
+  position: absolute;
+  left: 0.5rem;
+  color: oklch(0.65 0.2 25);
+  font-weight: 600;
+  user-select: none;
+}
+
+.code-block--diff pre code .line {
+  padding-left: 1.5rem;
+}
+
+/* Mobile: scroll gradient on code blocks */
+@media (max-width: 768px) {
+  .code-block-body {
+    position: relative;
+  }
+
+  .code-block-body::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 2rem;
+    background: linear-gradient(to right, transparent, var(--color-surface-0));
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+
+  .code-block-body:hover::after {
+    opacity: 1;
+  }
+}
+
+
+
+/* ─── Copy Button Icon Fade ────────────────────────────────── */
+.sg-copy-btn .sg-copy-icon,
+.sg-copy-btn .sg-copy-check {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition: opacity 150ms ease;
+}
+
+.sg-copy-btn .sg-copy-icon {
+  opacity: 1;
+}
+
+.sg-copy-btn .sg-copy-check {
+  opacity: 0;
+}
+
+.sg-copy-btn.sg-copy-btn-copied .sg-copy-icon {
+  opacity: 0;
 }
 
+.sg-copy-btn.sg-copy-btn-copied .sg-copy-check {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sg-copy-btn .sg-copy-icon,
+  .sg-copy-btn .sg-copy-check {
+    transition: none;
+  }
+}
+
+/* ─── Brand Glow Effects (removed — Vercel-minimal approach) ─── */
+
+/* All glow/pulse animations removed for clean, professional look.
+ * .sg-glow, .sg-glow-hover, .sg-pulse-glow classes are now no-ops
+ * for backward compatibility with existing templates. */
+.sg-glow,
+.sg-glow-hover:hover,
+.sg-pulse-glow {
+  box-shadow: none;
+}
+
+/* ─── External Link Arrows (removed for Vercel-minimal design) ─── */
+
+/* ─── Focus Ring Refinement ───────────────────────────────────── */
+@layer base {
+  *:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+}
+
+/* ─── Print Stylesheet ────────────────────────────────────────── */
+/* Clean, readable output when readers print or save-as-PDF. */
+@media print {
+  /* Hide interactive/nav chrome */
+  header,
+  nav,
+  aside,
+  footer,
+  .sg-copy-btn,
+  .sg-copy-btn-native,
+  [data-pagefind-ignore] {
+    display: none !important;
+  }
+
+  /* Full-width content */
+  main {
+    margin: 0 !important;
+    padding: 0 !important;
+    max-width: 100% !important;
+  }
+
+  /* Ensure readability */
+  body {
+    font-size: 12pt;
+    line-height: 1.6;
+    color: #000;
+    background: #fff;
+  }
+
+  /* Show link URLs */
+  .sg-content a[href^="http"]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.8em;
+    color: #666;
+    background: none;
+    width: auto;
+    height: auto;
+    display: inline;
+    opacity: 1;
+    margin: 0;
+  }
+
+  /* Code blocks: readable borders instead of dark bg */
+  pre {
+    border: 1px solid #ccc;
+    background: #f8f8f8 !important;
+    page-break-inside: avoid;
+  }
+
+  /* Avoid page breaks inside headings */
+  h1, h2, h3, h4 {
+    page-break-after: avoid;
+  }
+
+  /* Images: constrain to page */
+  img {
+    max-width: 100% !important;
+    page-break-inside: avoid;
+  }
+}