@clidey/dory 1.0.8 → 1.10.0

package/src/theme.scss

@@ -3,157 +3,29 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 
-    // Brand colors (dynamically set from dory.json via loadColors())
-    --brand-foreground: #2C6BD4;
-    --brand-primary: #2C6BD4;
-    --brand-light: #2C6BD4;
-    --brand-dark: #4787F3;
+    // UX brand.css owns the default palette. Dory keeps this alias for docs UI.
+    --brand-primary: var(--primary);
 
     // Font families
-    --font-body: inherit;
-    --font-heading: inherit;
-    --font-mono: inherit;
+    --font-body: 'Hanken Grotesk', sans-serif;
+    --font-heading: 'Bricolage Grotesque', sans-serif;
+    --font-mono: 'JetBrains Mono', monospace;
 
-    // ShadCN/clidey/ux compatible primary color
-    --primary: var(--brand-light);
-    --primary-rgb: var(--brand-light-rgb);
+}
 
-    --ring: rgba(0, 0, 0, 0.1);
+:root[data-dory-colors="true"] {
+    --primary: var(--brand-light);
 }
 
-:root.dark {
+:root.dark[data-dory-colors="true"] {
     --primary: var(--brand-dark);
-    --primary-rgb: var(--brand-dark-rgb);
-    --ring: rgba(255, 255, 255, 0.1);
 }
 
 // Apply background from CSS variables
 html, body, #app {
     background-color: var(--background);
     color: var(--foreground);
-}
-
-// === THEMED MODE: override Tailwind utility classes ===
-[data-dory-themed="true"] {
-    // Navigation sidebar text
-    .dory-navigation {
-        a {
-            color: var(--muted-foreground) !important;
-        }
-
-        a:hover {
-            color: var(--foreground) !important;
-        }
-
-        a.font-semibold {
-            color: var(--brand-foreground) !important;
-        }
-
-        h2, h3 {
-            color: var(--foreground) !important;
-        }
-
-        ul[role="list"] {
-            border-color: var(--border) !important;
-        }
-    }
-
-    // Override hardcoded Tailwind text colors
-    .text-slate-500,
-    .text-slate-400,
-    .text-slate-600,
-    .text-zinc-500,
-    .text-zinc-400,
-    .text-gray-500,
-    .text-gray-400 {
-        color: var(--muted-foreground) !important;
-    }
-
-    .text-slate-900,
-    .text-zinc-900,
-    .text-gray-900 {
-        color: var(--foreground) !important;
-    }
-
-    // Override hardcoded Tailwind border colors
-    .border-slate-100,
-    .border-slate-200,
-    .border-slate-800,
-    .border-zinc-200,
-    .border-zinc-800 {
-        border-color: var(--border) !important;
-    }
-
-    // Header
-    .dory-header {
-        border-color: var(--border) !important;
-    }
-
-    // Accordion & divider borders — subtle low opacity
-    [data-slot="accordion-item"],
-    hr,
-    .border-t,
-    .border-b {
-        border-color: color-mix(in oklch, var(--foreground) 8%, transparent) !important;
-    }
-}
-
-// === FONT OVERRIDES ===
-[data-dory-themed="true"] {
-    // Page title — large display serif
-    .dory-page-title {
-        font-family: var(--font-heading, var(--font-body, inherit));
-        font-weight: 700;
-        font-variation-settings: "opsz" 96;
-        letter-spacing: -0.02em;
-    }
-
-    // Subtitle / eyebrow — mono, muted amber
-    .dory-subtitle {
-        font-family: var(--font-mono, monospace);
-        color: var(--brand-foreground);
-        opacity: 0.8;
-        letter-spacing: 0.15em;
-        font-size: 11px;
-    }
-
-    // Article headings — serif with proper optical sizing
-    article h2 {
-        font-family: var(--font-heading, var(--font-body, inherit));
-        font-weight: 600;
-        font-variation-settings: "opsz" 48;
-        letter-spacing: -0.015em;
-    }
-
-    article h3,
-    article h4 {
-        font-family: var(--font-body, inherit);
-        font-weight: 600;
-    }
-
-    code, pre {
-        font-family: var(--font-mono, monospace);
-    }
-}
-
-// === CODE BLOCK STYLING ===
-// Make code blocks translucent to match app feel
-[data-dory-themed="true"] {
-    [data-slot="card"],
-    .bg-card {
-        background-color: transparent !important;
-        border-color: var(--border) !important;
-    }
-
-    pre {
-        background-color: transparent !important;
-    }
-
-    // Inline code
-    .dory-mdx-code {
-        background-color: transparent !important;
-        border: 1px solid var(--border);
-    }
+    font-family: var(--font-body);
 }
 
 // === DEFAULT STYLES ===
@@ -171,38 +43,7 @@ article img {
     margin-bottom: 1rem;
 }
 
-[data-testid="header-actions"] button,
-[data-slot="dropdown-menu-content"] {
-    border-color: var(--ring);
-}
-
-[data-slot="search-input-wrapper"] {
-    font-size: 12px;
-    outline: none;
-}
-
-[data-slot="search-input"] {
-    font-size: 12px;
-}
-
-[data-slot="search-input-wrapper"]:focus-within {
-    outline: none !important;
-}
-
-[role="dialog"] [data-slot="search-input-wrapper"]:focus-within {
-    outline: none !important;
-    border: 0px;
-    box-shadow: none !important;
-}
-
 // === EDITORIAL STYLE (Dory v2) ===
-:root {
-    --dory-code-string: #b65401;
-}
-
-:root.dark {
-    --dory-code-string: #f4a261;
-}
 
 .font-heading {
     font-family: var(--font-heading, var(--font-body, inherit));
@@ -210,50 +51,50 @@ article img {
 
 .dory-page-title {
     font-family: var(--font-heading, var(--font-body, inherit));
-    font-size: 1.625rem;
+    font-size: clamp(2.5rem, 5vw, 4rem);
     font-weight: 700;
-    line-height: 1.15;
-    letter-spacing: -0.025em;
-}
-
-.dory-subtitle {
-    font-family: var(--font-mono, monospace);
-    font-size: 11px;
-    letter-spacing: 0.18em;
-    color: var(--muted-foreground);
+    line-height: 1.02;
+    letter-spacing: -0.045em;
+    color: var(--foreground);
 }
 
 article {
     counter-reset: dory-section;
-    font-size: 0.875rem;
-    line-height: 1.6;
+    font-size: 1rem;
+    line-height: 1.65;
+
+    // Anchor jumps land below the sticky top bar (3.5rem) instead of under it.
+    h1, h2, h3, h4, h5, h6 {
+        scroll-margin-top: 5.5rem;
+    }
 
     .dory-h1 {
-        font-size: 1.625rem;
+        font-size: 3rem;
         font-weight: 700;
-        line-height: 1.15;
-        letter-spacing: -0.025em;
+        line-height: 1.05;
+        letter-spacing: -0.035em;
     }
 
     .dory-h2 {
         counter-increment: dory-section;
         display: flex;
         align-items: center;
-        gap: 0.625rem;
-        font-size: 1.3125rem;
+        gap: 0.75rem;
+        font-size: 2.125rem;
         font-weight: 700;
-        line-height: 1.2;
-        letter-spacing: -0.02em;
+        line-height: 1.1;
+        letter-spacing: -0.03em;
 
         &::before {
             content: counter(dory-section, decimal-leading-zero);
             flex-shrink: 0;
-            padding: 0.0625rem 0.375rem;
+            padding: 0.125rem 0.4375rem;
             border: 1px solid var(--border);
-            border-radius: 0.3125rem;
+            border-radius: 0.375rem;
             background: var(--muted);
             font-family: var(--font-mono, monospace);
             font-size: 0.6875rem;
+            line-height: 1.5;
             font-weight: 400;
             letter-spacing: 0;
             color: var(--muted-foreground);
@@ -265,15 +106,15 @@ article {
     }
 
     .dory-h3 {
-        font-size: 1.0625rem;
+        font-size: 1.375rem;
         font-weight: 700;
-        letter-spacing: -0.01em;
+        letter-spacing: -0.02em;
     }
 
     .dory-h4 {
-        font-size: 0.9375rem;
+        font-size: 1.125rem;
         font-weight: 600;
-        letter-spacing: -0.005em;
+        letter-spacing: -0.01em;
     }
 
     // Unordered: small brand-colored squares. Ordered: mono two-digit counters.
@@ -374,7 +215,7 @@ article {
 
     .dory-line-add {
         background: var(--success-muted);
-        border-left-color: #2f7d4a;
+        border-left-color: var(--success);
     }
 
     .dory-line-del {
@@ -397,7 +238,7 @@ article {
     }
 
     .dory-line-add .dory-line-marker {
-        color: #2f7d4a;
+        color: var(--success);
     }
 
     .dory-line-del .dory-line-marker {
@@ -405,19 +246,12 @@ article {
     }
 }
 
-:root.dark .dory-code .dory-line-add {
-    border-left-color: #6fbf87;
-
-    .dory-line-marker {
-        color: #6fbf87;
-    }
-}
-
 // === PDF DETAILS ===
 .dory-lead {
-    margin-top: 0.75rem;
-    font-size: 0.9375rem;
-    line-height: 1.6;
+    max-width: 40rem;
+    margin-top: 1.5rem;
+    font-size: 1.1875rem;
+    line-height: 1.55;
     color: var(--foreground);
 }
 
@@ -472,3 +306,592 @@ article .dory-h2 .dory-anchor {
 .dory-latex-inline .katex {
     font-size: 1.05em;
 }
+
+// === CHROME: dark top bar and sidebar (fixed ink in both themes) ===
+.dory-mono-label {
+    font-family: var(--font-mono, monospace);
+    font-size: 10px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.55);
+}
+
+.dory-docs-pill {
+    padding: 1px 6px;
+    border: 1px solid rgba(255, 255, 255, 0.22);
+    border-radius: 5px;
+    font-family: var(--font-mono, monospace);
+    font-size: 9px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.dory-topbar-tab {
+    display: flex;
+    align-items: center;
+    padding: 0 0.875rem;
+    border-bottom: 2px solid transparent;
+    font-size: 13px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.7);
+    transition: color 120ms ease;
+
+    &:hover {
+        color: #fff;
+    }
+
+    &.active {
+        color: #fff;
+        border-bottom-color: var(--sidebar-primary);
+    }
+}
+
+.dory-topbar-search {
+    [data-slot="search-input-wrapper"] {
+        width: 20rem;
+        height: 2.25rem;
+        padding-right: 2.75rem;
+        border-color: transparent;
+        border-radius: 0.5rem;
+        background: rgba(255, 255, 255, 0.08);
+        color: #fff;
+        box-shadow: none;
+
+        svg {
+            color: rgba(255, 255, 255, 0.6);
+        }
+    }
+
+    [data-slot="search-input"] {
+        color: #fff;
+
+        &::placeholder {
+            color: rgba(255, 255, 255, 0.55);
+        }
+    }
+}
+
+.dory-kbd {
+    position: absolute;
+    top: 50%;
+    right: 0.625rem;
+    transform: translateY(-50%);
+    padding: 1px 5px;
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    font-family: var(--font-mono, monospace);
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.7);
+    pointer-events: none;
+}
+
+.dory-mode button {
+    border-radius: 9999px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.06);
+    color: #fff;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.12);
+    }
+}
+
+.dory-sidebar-link {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 0.625rem;
+    border-radius: 0.5rem;
+    color: rgba(255, 255, 255, 0.72);
+    transition: color 120ms ease, background-color 120ms ease;
+
+    &:hover {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.05);
+    }
+
+    &.active {
+        color: #fff;
+        background: var(--sidebar-accent);
+
+        &::before {
+            content: "";
+            position: absolute;
+            left: -0.75rem;
+            top: 0.45rem;
+            bottom: 0.45rem;
+            width: 2px;
+            border-radius: 2px;
+            background: var(--sidebar-primary);
+        }
+    }
+}
+
+.dory-method {
+    flex-shrink: 0;
+    width: 2.25rem;
+    font-family: var(--font-mono, monospace);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+}
+
+.dory-badge {
+    margin-left: auto;
+    padding: 1px 6px;
+    border-radius: 4px;
+    background: var(--highlight);
+    font-family: var(--font-mono, monospace);
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--highlight-foreground);
+}
+
+.dory-sidebar-footer {
+    transition: opacity 120ms ease;
+
+    .dory-mono-label {
+        transition: color 120ms ease;
+    }
+
+    &:hover .dory-mono-label {
+        color: #fff;
+    }
+}
+
+// === PAGE CHROME: breadcrumb, page actions, feedback, pager, footer, TOC ===
+.dory-breadcrumb {
+    font-family: var(--font-mono, monospace);
+    font-size: 11px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+
+    [aria-current="page"] > span:last-child {
+        color: var(--foreground);
+        font-weight: 600;
+    }
+}
+
+.dory-page-actions {
+    display: flex;
+    flex-shrink: 0;
+    border: 1px solid var(--border);
+    border-radius: 0.625rem;
+    background: var(--card);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+
+    > button,
+    .dory-page-actions-ai {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        padding: 0.4rem 0.75rem;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--foreground);
+        transition: background-color 120ms ease;
+
+        &:hover {
+            background: var(--accent);
+        }
+    }
+
+    > button {
+        border-radius: 0.5625rem 0 0 0.5625rem;
+    }
+
+    .dory-page-actions-ai {
+        border-left: 1px solid var(--border);
+        border-radius: 0 0.5625rem 0.5625rem 0;
+    }
+}
+
+.dory-feedback button {
+    padding: 0.3rem 0.9rem;
+    border: 1px solid var(--border);
+    border-radius: 9999px;
+    background: var(--card);
+    font-size: 13px;
+    font-weight: 500;
+    transition: border-color 120ms ease;
+
+    &:hover {
+        border-color: var(--primary);
+    }
+}
+
+.dory-pager-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    padding: 1.25rem 1.5rem;
+    border: 1px solid var(--border);
+    border-radius: 0.875rem;
+    background: var(--card);
+    transition: border-color 120ms ease;
+
+    &:hover {
+        border-color: var(--primary);
+    }
+}
+
+.dory-pager-label {
+    font-family: var(--font-mono, monospace);
+    font-size: 10px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+}
+
+.dory-pager-title {
+    font-family: var(--font-heading, var(--font-body, inherit));
+    font-size: 1.1875rem;
+    font-weight: 700;
+    letter-spacing: -0.015em;
+    color: var(--foreground);
+}
+
+.dory-page-footer {
+    font-family: var(--font-mono, monospace);
+    font-size: 10px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+
+    a:hover {
+        color: var(--foreground);
+    }
+}
+
+.dory-toc-label {
+    font-family: var(--font-mono, monospace);
+    font-size: 10px;
+    font-weight: 400;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+}
+
+.dory-toc-track {
+    height: 2px;
+    border-radius: 2px;
+    background: var(--border);
+}
+
+.dory-toc-fill {
+    height: 100%;
+    border-radius: 2px;
+    background: var(--primary);
+    transition: width 80ms linear;
+}
+
+.dory-toc-list {
+    border-left: 1px solid var(--border);
+}
+
+.dory-toc-link {
+    position: relative;
+    display: flex;
+    gap: 0.625rem;
+    padding: 0.3rem 0 0.3rem 0.75rem;
+    font-size: 13px;
+    line-height: 1.4;
+    color: var(--muted-foreground);
+    transition: color 120ms ease;
+
+    &:hover {
+        color: var(--foreground);
+    }
+
+    &.active {
+        color: var(--foreground);
+        font-weight: 600;
+
+        &::before {
+            content: "";
+            position: absolute;
+            left: -1px;
+            top: 0.25rem;
+            bottom: 0.25rem;
+            width: 2px;
+            border-radius: 2px;
+            background: var(--primary);
+        }
+    }
+
+    &.dory-toc-sub {
+        padding-left: 2.6rem;
+        font-size: 12px;
+    }
+}
+
+.dory-toc-number {
+    flex-shrink: 0;
+    padding-top: 0.1rem;
+    font-family: var(--font-mono, monospace);
+    font-size: 10px;
+    font-weight: 400;
+    color: var(--muted-foreground);
+}
+
+.dory-toc-actions a {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 12.5px;
+    color: var(--muted-foreground);
+    transition: color 120ms ease;
+
+    &:hover {
+        color: var(--foreground);
+    }
+}
+
+// Soft glow in the top-right of the content panel.
+:root {
+    --dory-glow: rgba(244, 214, 160, 0.4);
+}
+
+:root.dark {
+    --dory-glow: rgba(148, 163, 184, 0.13);
+}
+
+.dory-main {
+    background-image: radial-gradient(60rem 38rem at 78% -4rem, var(--dory-glow), transparent 70%);
+    background-repeat: no-repeat;
+}
+
+// === TRY IT PANEL ===
+.dory-tryit-label {
+    font-family: var(--font-mono, monospace);
+    font-size: 10px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+}
+
+.dory-tryit-input {
+    display: block;
+    width: 100%;
+    height: 2.5rem;
+    padding: 0 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    background: var(--card);
+    font-family: var(--font-mono, monospace);
+    font-size: 13.5px;
+    color: var(--foreground);
+    outline: none;
+    transition: border-color 120ms ease;
+
+    &:focus {
+        border-color: var(--primary);
+    }
+
+    &.font-sans {
+        font-family: var(--font-body, inherit);
+    }
+}
+
+.dory-tryit-response {
+    border: 1px solid var(--border);
+    border-radius: 0.625rem;
+    background: var(--card);
+}
+
+.dory-tryit-cancel,
+.dory-tryit-send {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    height: 2.5rem;
+    border-radius: 0.5rem;
+    font-size: 14px;
+    font-weight: 500;
+    transition: background-color 120ms ease, border-color 120ms ease;
+}
+
+.dory-tryit-cancel {
+    padding: 0 1rem;
+    border: 1px solid var(--border);
+    background: var(--card);
+    color: var(--foreground);
+
+    &:hover {
+        border-color: var(--muted-foreground);
+    }
+}
+
+.dory-tryit-send {
+    flex: 1;
+    background: var(--primary);
+    color: #fff;
+
+    &:hover {
+        background: color-mix(in oklch, var(--primary) 88%, black);
+    }
+
+    &:disabled {
+        opacity: 0.7;
+    }
+}
+
+// === SEARCH DIALOG ===
+.dory-search-panel {
+    border: 1px solid var(--border);
+    border-radius: 1.25rem;
+    background: var(--card);
+    box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.35);
+}
+
+.dory-search-ask-button {
+    flex-shrink: 0;
+    border-radius: 0.625rem;
+    padding: 0.5rem 0.875rem;
+    background: color-mix(in oklch, var(--brand-primary) 22%, var(--card));
+    color: var(--foreground);
+    font-size: 0.875rem;
+    font-weight: 600;
+    white-space: nowrap;
+
+    &:hover,
+    &:focus-visible {
+        background: color-mix(in oklch, var(--brand-primary) 34%, var(--card));
+    }
+}
+
+.dory-search-active {
+    flex-shrink: 0;
+    border-radius: 0.625rem;
+    padding: 0.5rem 0.875rem;
+    background: color-mix(in oklch, var(--brand-primary) 22%, var(--card));
+    color: var(--foreground);
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+.dory-search-tabs {
+    background: var(--card);
+}
+
+.dory-search-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.625rem 1.25rem;
+    border-top: 1px solid var(--border);
+    padding: 0.75rem 1.5rem;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+}
+
+.dory-search-footer span:last-child {
+    margin-left: auto;
+}
+
+.dory-search-chat {
+    background: var(--card);
+}
+
+.dory-chat-answer {
+    max-width: 50rem;
+}
+
+.dory-chat-composer {
+    background: var(--card);
+}
+
+@media (max-width: 640px) {
+    .dory-search-active {
+        display: none;
+    }
+
+    .dory-search-panel {
+        border-radius: 1rem;
+    }
+
+    .dory-search-footer {
+        gap: 0.5rem;
+        padding: 0.625rem 1rem;
+    }
+
+    .dory-search-footer span:last-child {
+        margin-left: 0;
+    }
+}
+
+.dory-search-input {
+    font-size: 1.25rem;
+    color: var(--foreground);
+
+    &::-webkit-search-cancel-button {
+        display: none;
+    }
+
+    &::placeholder {
+        color: var(--muted-foreground);
+        opacity: 0.8;
+    }
+}
+
+.dory-search-esc {
+    padding: 2px 8px;
+    border: 1px solid var(--border);
+    border-radius: 0.375rem;
+    font-family: var(--font-mono, monospace);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+}
+
+.dory-search-result[aria-selected="true"] {
+    background: var(--muted);
+}
+
+.dory-search-highlight {
+    background: transparent;
+    color: inherit;
+    font-weight: inherit;
+    text-decoration: underline;
+    text-decoration-color: var(--primary);
+    text-underline-offset: 0.18em;
+}
+
+.dory-search-ask-result {
+    margin: 0 0.75rem;
+    border-radius: 0.75rem;
+    background: var(--accent);
+}
+
+.dory-search-ask-result[aria-selected="true"] {
+    background: color-mix(in oklch, var(--primary) 20%, var(--card));
+}
+
+.dory-search-key {
+    border: 1px solid var(--border);
+    border-radius: 0.375rem;
+    padding: 0.2rem 0.4rem;
+    font-family: var(--font-mono, monospace);
+}
+
+.dory-search-eyebrow {
+    font-family: var(--font-mono, monospace);
+    font-size: 11px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+}
+
+.dory-search-title {
+    margin-top: 0.125rem;
+    font-size: 1.0625rem;
+    font-weight: 600;
+    color: var(--foreground);
+}