@opendocsdev/cli 0.2.0

package/src/engine/src/styles/global.css

@@ -0,0 +1,703 @@
+@import "@fontsource-variable/geist";
+@import "@fontsource-variable/geist-mono";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ============================================
+   DESIGN TOKENS - Theme System
+   ============================================
+   These CSS custom properties enable theming.
+   Primary and accent colors are injected from docs.json config.
+   Neutral colors use a consistent gray scale.
+*/
+
+@layer base {
+  :root {
+    /* Primary color - defaults only, overridden by docs.json theme config */
+    --color-primary-foreground: #ffffff;
+
+    /* Neutral scale - consistent grays */
+    --color-background: #ffffff;
+    --color-foreground: #111827;
+    --color-muted: #6b7280;
+    --color-muted-foreground: #9ca3af;
+
+    /* Surface colors */
+    --color-surface: #ffffff;
+    --color-surface-raised: #f9fafb;
+    --color-surface-sunken: #f3f4f6;
+
+    /* Border colors */
+    --color-border: #e5e7eb;
+    --color-border-muted: #f3f4f6;
+
+    /* Code block colors */
+    --color-code-bg: #1f2937;
+    --color-code-text: #f3f4f6;
+    --color-code-inline-bg: #f3f4f6;
+    --color-code-inline-text: #1f2937;
+
+    /* Semantic colors - fixed for accessibility/meaning */
+    --color-info: #3b82f6;
+    --color-info-light: #eff6ff;
+    --color-warning: #f59e0b;
+    --color-warning-light: #fffbeb;
+    --color-error: #ef4444;
+    --color-error-light: #fef2f2;
+    --color-success: #22c55e;
+    --color-success-light: #f0fdf4;
+  }
+
+  .dark {
+    /* Primary foreground for dark mode */
+    --color-primary-foreground: #111827;
+
+    /* Neutral scale - dark mode */
+    --color-background: #030712;
+    --color-foreground: #f9fafb;
+    --color-muted: #9ca3af;
+    --color-muted-foreground: #6b7280;
+
+    /* Surface colors - dark mode */
+    --color-surface: #111827;
+    --color-surface-raised: #1f2937;
+    --color-surface-sunken: #111827;
+
+    /* Border colors - dark mode */
+    --color-border: #374151;
+    --color-border-muted: #1f2937;
+
+    /* Code block colors - dark mode */
+    --color-code-bg: #111827;
+    --color-code-text: #f3f4f6;
+    --color-code-inline-bg: #1f2937;
+    --color-code-inline-text: #e5e7eb;
+
+    /* Semantic colors - dark mode variants */
+    --color-info: #60a5fa;
+    --color-info-light: rgba(59, 130, 246, 0.15);
+    --color-warning: #fbbf24;
+    --color-warning-light: rgba(245, 158, 11, 0.15);
+    --color-error: #f87171;
+    --color-error-light: rgba(239, 68, 68, 0.15);
+    --color-success: #4ade80;
+    --color-success-light: rgba(34, 197, 94, 0.15);
+  }
+
+  /* ============================================
+     BASE STYLES
+     ============================================ */
+
+  html {
+    @apply scroll-smooth;
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    @apply antialiased font-sans;
+  }
+
+  /* Prevent text from causing horizontal overflow, but allow scrollable containers */
+  main, article, section {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+  }
+
+  /* Headings - responsive sizing for mobile */
+  /* scroll-margin-top accounts for sticky header */
+  article h1 {
+    color: var(--color-foreground);
+    @apply font-bold tracking-tight mb-3 sm:mb-4;
+    font-size: 1.75rem;
+    scroll-margin-top: 5rem;
+  }
+
+  @media (min-width: 640px) {
+    article h1 {
+      font-size: 2.25rem;
+    }
+  }
+
+  article h2 {
+    color: var(--color-foreground);
+    border-color: var(--color-border);
+    @apply font-semibold tracking-tight mt-6 sm:mt-8 mb-3 sm:mb-4 pt-4 sm:pt-6 border-t;
+    font-size: 1.25rem;
+    scroll-margin-top: 5rem;
+  }
+
+  @media (min-width: 640px) {
+    article h2 {
+      font-size: 1.5rem;
+    }
+  }
+
+  /* Remove top border from first h2 after h1 */
+  article h1 + h2,
+  article > h2:first-child {
+    @apply border-t-0 pt-0 mt-4 sm:mt-6;
+  }
+
+  article h3 {
+    color: var(--color-foreground);
+    @apply font-semibold tracking-tight mt-5 sm:mt-6 mb-2 sm:mb-3;
+    font-size: 1.125rem;
+    scroll-margin-top: 5rem;
+  }
+
+  @media (min-width: 640px) {
+    article h3 {
+      font-size: 1.25rem;
+    }
+  }
+
+  article h4 {
+    color: var(--color-foreground);
+    @apply font-semibold mt-4 sm:mt-6 mb-2;
+    font-size: 1rem;
+    scroll-margin-top: 5rem;
+  }
+
+  @media (min-width: 640px) {
+    article h4 {
+      font-size: 1.125rem;
+    }
+  }
+
+  article h5 {
+    color: var(--color-foreground);
+    @apply text-base font-semibold mt-4 mb-2;
+    scroll-margin-top: 5rem;
+  }
+
+  article h6 {
+    color: var(--color-foreground);
+    @apply text-sm font-semibold mt-4 mb-2;
+    scroll-margin-top: 5rem;
+  }
+
+  /* Global heading defaults (for non-article contexts) */
+  h1 {
+    color: var(--color-foreground);
+    @apply text-2xl font-bold tracking-tight;
+  }
+
+  h2 {
+    color: var(--color-foreground);
+    @apply text-xl font-semibold tracking-tight;
+  }
+
+  h3 {
+    color: var(--color-foreground);
+    @apply text-lg font-semibold tracking-tight;
+  }
+
+  /* Prose content - responsive */
+  p {
+    color: var(--color-muted);
+    @apply mb-3 sm:mb-4;
+    font-size: 0.9375rem; /* 15px on mobile */
+    line-height: 1.7;
+  }
+
+  @media (min-width: 640px) {
+    p {
+      font-size: 1rem; /* 16px on desktop */
+      line-height: 1.75;
+    }
+  }
+
+  /* Links - scoped to prose content only */
+  article a,
+  .prose a {
+    color: var(--color-primary);
+    @apply no-underline hover:underline;
+  }
+
+  strong {
+    color: var(--color-foreground);
+    @apply font-semibold;
+  }
+
+  /* Lists - scoped to prose content only to avoid affecting navigation */
+  article ul,
+  .prose ul {
+    @apply list-disc list-inside mb-3 sm:mb-4 space-y-1.5 sm:space-y-2;
+  }
+
+  article ol,
+  .prose ol {
+    @apply list-decimal list-inside mb-3 sm:mb-4 space-y-1.5 sm:space-y-2;
+  }
+
+  article li,
+  .prose li {
+    color: var(--color-muted);
+    @apply text-[0.9375rem] sm:text-base;
+  }
+
+  /* Code - using Geist Mono, responsive */
+  code {
+    background-color: var(--color-surface-raised);
+    color: var(--color-foreground);
+    @apply px-1 sm:px-1.5 py-0.5 rounded text-xs sm:text-sm font-mono;
+  }
+
+  /* Code blocks with Shiki dual theme support - responsive */
+  pre {
+    background-color: var(--color-surface-raised) !important;
+    @apply p-3 sm:p-4 overflow-x-auto font-mono text-xs sm:text-sm;
+    max-width: 100%;
+  }
+
+  pre code {
+    background-color: transparent !important;
+    @apply p-0 text-xs sm:text-sm;
+  }
+
+  /* Inline code should wrap */
+  :not(pre) > code {
+    @apply break-words;
+  }
+
+  /* Apply light/dark syntax highlighting based on color scheme */
+  pre code span {
+    color: var(--shiki-light);
+    background-color: transparent !important;
+  }
+
+  .dark pre code span {
+    color: var(--shiki-dark);
+  }
+
+  /* Standalone pre elements (before JS enhancement) get basic styling */
+  pre:not([data-enhanced]) {
+    @apply rounded-xl mb-4 border border-[var(--color-border)];
+  }
+
+  /* Blockquotes */
+  blockquote {
+    border-color: var(--color-border);
+    color: var(--color-muted);
+    @apply border-l-4 pl-4 italic my-4;
+  }
+
+  /* Horizontal rule */
+  hr {
+    border-color: var(--color-border);
+    @apply my-8;
+  }
+
+  /* Tables - wrapped in scrollable container via JS */
+  .table-wrapper {
+    @apply overflow-x-auto mb-6 rounded-lg border border-[var(--color-border)];
+    max-width: 100%;
+  }
+
+  .table-wrapper table {
+    @apply mb-0 border-0 rounded-none;
+  }
+
+  table {
+    @apply w-full border-collapse text-sm mb-6 rounded-lg border border-[var(--color-border)];
+  }
+
+  th {
+    background-color: var(--color-surface-raised);
+    color: var(--color-foreground);
+    @apply px-2 py-2 sm:px-4 sm:py-3 text-left font-semibold text-xs sm:text-sm border-b border-[var(--color-border)];
+  }
+
+  th:not(:last-child) {
+    @apply border-r border-[var(--color-border)];
+  }
+
+  td {
+    color: var(--color-muted);
+    @apply px-2 py-2 sm:px-4 sm:py-3 text-xs sm:text-sm border-b border-[var(--color-border)];
+  }
+
+  td:not(:last-child) {
+    @apply border-r border-[var(--color-border)];
+  }
+
+  tr:last-child td {
+    @apply border-b-0;
+  }
+
+  /* First column code styling */
+  td:first-child code {
+    @apply text-[var(--color-primary)] font-medium bg-[var(--color-primary-light)];
+  }
+
+  tbody tr:hover td {
+    background-color: var(--color-surface-raised);
+  }
+
+  /* Make code in tables smaller */
+  td code, th code {
+    @apply text-[0.7rem] sm:text-xs px-1 py-0.5;
+  }
+
+  /* Images - prevent overflow */
+  img {
+    @apply max-w-full h-auto rounded-lg;
+    height: auto;
+  }
+
+  /* Prevent long URLs and text from overflowing */
+  a {
+    word-break: break-word;
+  }
+}
+
+/* ============================================
+   COMPONENT STYLES
+   ============================================ */
+
+@layer components {
+  /* Global overflow prevention for components */
+  .api-playground,
+  .code-group,
+  .card-group,
+  .callout,
+  .steps-list {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  /* Anchor links on headings */
+  .heading-anchor {
+    color: var(--color-muted-foreground);
+    @apply opacity-0 ml-2 transition-opacity;
+  }
+
+  .heading-anchor:hover {
+    color: var(--color-muted);
+  }
+
+  h1:hover .heading-anchor,
+  h2:hover .heading-anchor,
+  h3:hover .heading-anchor,
+  h4:hover .heading-anchor,
+  h5:hover .heading-anchor,
+  h6:hover .heading-anchor {
+    @apply opacity-100;
+  }
+
+  /* Callout component styles */
+  .callout {
+    color: var(--color-foreground);
+  }
+
+  .callout p {
+    @apply mb-0;
+  }
+
+  .callout code {
+    @apply bg-white/50 dark:bg-black/20;
+  }
+
+  /* Code group component styles */
+  .code-group pre {
+    @apply m-0 rounded-none border-0;
+    background-color: transparent !important;
+  }
+
+  .code-group-tab {
+    @apply focus:outline-none focus-visible:text-[var(--color-primary)];
+  }
+
+  /* Code group panel visibility for slotted pre elements */
+  /* Handle both direct children and nested pre elements (MDX may wrap them) */
+  .code-group .panels > pre:not(:first-child),
+  .code-group .panels pre:not(:first-of-type) {
+    @apply hidden; /* Hide non-first panels by default (prevents flash before JS) */
+  }
+
+  .code-group .panels > pre[data-active="true"],
+  .code-group .panels pre[data-active="true"] {
+    @apply block;
+  }
+
+  .code-group .panels > pre[data-active="false"],
+  .code-group .panels pre[data-active="false"] {
+    @apply hidden;
+  }
+
+  /* Tabs component styles - visibility for slotted tab panels */
+  .tabs-panels > .tab-panel:not(:first-child) {
+    @apply hidden; /* Hide non-first panels by default (prevents flash before JS) */
+  }
+
+  .tabs-panels > .tab-panel[data-active="true"] {
+    @apply block;
+  }
+
+  .tabs-panels > .tab-panel[data-active="false"] {
+    @apply hidden;
+  }
+
+  /* Card group styles - responsive grid */
+  .card-group {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    margin: 1.5rem 0;
+  }
+
+  @media (min-width: 640px) {
+    .card-group {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .card-group[data-cols="3"] {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .card-group .card {
+    margin: 0;
+  }
+
+  /* Card component styles */
+  .card {
+    margin-bottom: 1rem;
+  }
+
+  a.card,
+  div.card {
+    @apply text-inherit no-underline;
+  }
+
+  a.card:hover {
+    @apply no-underline;
+  }
+
+  a.card h4,
+  a.card p {
+    @apply no-underline;
+  }
+
+  .card:hover .card-title {
+    color: var(--color-primary);
+  }
+
+  /* Steps component styles */
+  .steps-list {
+    counter-reset: step-counter;
+  }
+
+  .steps-list h3,
+  .steps-list h4,
+  .steps-list h5,
+  .steps-list h6 {
+    color: var(--color-foreground);
+    @apply relative font-bold text-lg mt-0 pb-2;
+    counter-increment: step-counter;
+  }
+
+  .steps-list h3::before,
+  .steps-list h4::before,
+  .steps-list h5::before,
+  .steps-list h6::before {
+    content: counter(step-counter);
+    background-color: var(--color-primary);
+    color: var(--color-primary-foreground);
+    @apply absolute -left-12 top-0 w-8 h-8 flex items-center justify-center text-sm font-semibold rounded-full z-10;
+  }
+
+  /* Remove step numbers from headings inside nested components */
+  .steps-list .card h3::before,
+  .steps-list .card h4::before,
+  .steps-list .card-group h3::before,
+  .steps-list .card-group h4::before,
+  .steps-list .callout h3::before,
+  .steps-list .callout h4::before,
+  .steps-list .tabs-container h3::before,
+  .steps-list .tabs-container h4::before,
+  .steps-list .code-group h3::before,
+  .steps-list .code-group h4::before {
+    @apply hidden;
+    content: none;
+  }
+
+  .steps-list .card h3,
+  .steps-list .card h4,
+  .steps-list .card-group h3,
+  .steps-list .card-group h4,
+  .steps-list .callout h3,
+  .steps-list .callout h4 {
+    counter-increment: none;
+  }
+
+  .steps-list p {
+    color: var(--color-muted);
+    @apply mb-6 mt-0;
+  }
+
+  .steps-list pre,
+  .steps-list ul,
+  .steps-list ol {
+    @apply mb-6;
+  }
+
+  .steps-list p code,
+  .steps-list li code {
+    background-color: var(--color-code-inline-bg);
+    color: var(--color-code-inline-text);
+    @apply px-1.5 py-0.5 rounded text-sm;
+  }
+
+  /* Sidebar navigation styles */
+  .sidebar-nav ul {
+    @apply list-none m-0 p-0 space-y-1;
+  }
+
+  .sidebar-nav li {
+    @apply list-none m-0 p-0;
+  }
+
+  /* Table of Contents navigation styles */
+  .toc-nav ul {
+    @apply list-none m-0 p-0;
+  }
+
+  .toc-nav li {
+    @apply list-none m-0 p-0;
+  }
+
+  .toc-link {
+    @apply no-underline;
+  }
+
+  .toc-link.active {
+    color: var(--color-primary);
+    border-left-color: var(--color-primary);
+    background-color: var(--color-primary-light);
+  }
+
+  .toc-link:hover:not(.active) {
+    color: var(--color-foreground);
+    background-color: var(--color-surface-raised);
+  }
+
+  /* Search component styles */
+  .search-trigger {
+    @apply cursor-pointer;
+  }
+
+  .search-trigger:focus {
+    --tw-ring-color: var(--color-primary);
+    @apply outline-none ring-2 ring-offset-2;
+  }
+
+  .search-modal {
+    @apply opacity-0 invisible;
+    transition: opacity 0.15s ease, visibility 0.15s ease;
+  }
+
+  .search-modal.open {
+    @apply opacity-100 visible;
+  }
+
+  /* Pagefind UI customizations to match docs theme */
+  .pagefind-ui-container {
+    --pagefind-ui-scale: 1;
+    --pagefind-ui-primary: var(--color-primary);
+    --pagefind-ui-text: var(--color-foreground);
+    --pagefind-ui-background: var(--color-surface);
+    --pagefind-ui-border: var(--color-border);
+    --pagefind-ui-tag: var(--color-surface-sunken);
+    --pagefind-ui-border-width: 1px;
+    --pagefind-ui-border-radius: 8px;
+    --pagefind-ui-image-border-radius: 8px;
+    --pagefind-ui-image-box-ratio: 3 / 2;
+    --pagefind-ui-font: inherit;
+  }
+
+  /* Pagefind search input */
+  .pagefind-ui .pagefind-ui__search-input {
+    border-color: var(--color-border);
+    @apply px-5 py-4 text-base border-0 border-b rounded-none bg-transparent outline-none;
+  }
+
+  .pagefind-ui .pagefind-ui__search-input:focus {
+    @apply outline-none shadow-none;
+  }
+
+  /* Pagefind search clear button */
+  .pagefind-ui .pagefind-ui__search-clear {
+    color: var(--color-muted-foreground);
+    @apply right-4;
+  }
+
+  .pagefind-ui .pagefind-ui__search-clear:hover {
+    color: var(--color-muted);
+  }
+
+  /* Pagefind results container */
+  .pagefind-ui .pagefind-ui__results-area {
+    max-height: calc(70vh - 80px);
+    @apply overflow-y-auto p-2;
+  }
+
+  /* Pagefind individual results */
+  .pagefind-ui .pagefind-ui__result {
+    @apply px-4 py-3 my-1 rounded-lg border border-transparent;
+  }
+
+  .pagefind-ui .pagefind-ui__result:hover {
+    background-color: var(--color-surface-raised);
+    border-color: var(--color-border);
+  }
+
+  .pagefind-ui .pagefind-ui__result-link {
+    @apply no-underline block;
+  }
+
+  .pagefind-ui .pagefind-ui__result-title {
+    color: var(--color-foreground);
+    @apply font-semibold text-[0.95rem] mb-1;
+  }
+
+  .pagefind-ui .pagefind-ui__result-excerpt {
+    color: var(--color-muted);
+    @apply text-sm leading-relaxed;
+  }
+
+  .pagefind-ui .pagefind-ui__result-excerpt mark {
+    @apply bg-yellow-200 dark:bg-yellow-500/30 text-inherit px-0.5 rounded-sm;
+  }
+
+  /* Pagefind form element */
+  .pagefind-ui .pagefind-ui__form {
+    @apply relative;
+  }
+
+  /* Pagefind message styling */
+  .pagefind-ui .pagefind-ui__message {
+    color: var(--color-muted);
+    @apply py-8 text-center text-sm;
+  }
+
+  /* Pagefind loading indicator */
+  .pagefind-ui .pagefind-ui__loading {
+    color: var(--color-muted-foreground);
+    @apply py-8 text-center;
+  }
+
+  /* Pagefind drawer styles */
+  .pagefind-ui .pagefind-ui__drawer {
+    @apply p-0 m-0 gap-0;
+  }
+
+  .pagefind-ui .pagefind-ui__search-input::placeholder {
+    color: var(--color-muted-foreground);
+  }
+}