mirror of
https://github.com/vercel/chat.git
synced 2026-09-14 18:32:29 +08:00
christopherkindl
f6b64318d9
Upgrades the docs to `@vercel/geistdocs@1.16.0`. - Bump `@vercel/geistdocs` 1.15.5 → 1.16.0 - Drop the removed `config` prop from `<Footer />` (1.16.0 replaces the footer with the Vercel product directory and no longer accepts props) - Load Geist Sans from the `geist` npm package so the new `ss11` stylistic set (alternate "I") renders — Google Fonts strips it
191 lines
6.1 KiB
CSS
191 lines
6.1 KiB
CSS
/*
|
|
* Chat SDK-specific styles layered on top of @vercel/geistdocs/styles.css.
|
|
* The package stylesheet owns the Geist design tokens, fumadocs overrides,
|
|
* typography/material utilities, and the Shiki palette.
|
|
*/
|
|
|
|
/* shadcn/ui token mappings for the local components/ui primitives */
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--ds-gray-1000);
|
|
--color-primary-foreground: var(--ds-background-100);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
}
|
|
|
|
:root {
|
|
/* Geist Sans is loaded from the `geist` npm package, which exposes the
|
|
`--font-geist-sans` variable. Alias it so `font-sans`/`--font-sans`
|
|
resolves to it. */
|
|
--font-sans: var(--font-geist-sans);
|
|
--radius: 0.625rem;
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.145 0 0);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.145 0 0);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.145 0 0);
|
|
--primary: oklch(57.61% 0.2508 258.23);
|
|
--primary-foreground: oklch(1 0 0);
|
|
--secondary: oklch(0.97 0 0);
|
|
--secondary-foreground: oklch(0.205 0 0);
|
|
--muted: oklch(0.97 0 0);
|
|
--muted-foreground: oklch(0.556 0 0);
|
|
--accent: oklch(0.97 0 0);
|
|
--accent-foreground: oklch(0.205 0 0);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--border: oklch(0.922 0 0);
|
|
--input: oklch(0.922 0 0);
|
|
--ring: oklch(0.708 0 0);
|
|
--chart-1: oklch(0.646 0.222 41.116);
|
|
--chart-2: oklch(0.6 0.118 184.704);
|
|
--chart-3: oklch(0.398 0.07 227.392);
|
|
--chart-4: oklch(0.828 0.189 84.429);
|
|
--chart-5: oklch(0.769 0.188 70.08);
|
|
--sidebar: oklch(0.985 0 0);
|
|
--sidebar-foreground: oklch(0.145 0 0);
|
|
--sidebar-primary: oklch(0.205 0 0);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.97 0 0);
|
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
--sidebar-border: oklch(0.922 0 0);
|
|
--sidebar-ring: oklch(0.708 0 0);
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.145 0 0);
|
|
--foreground: oklch(0.985 0 0);
|
|
--card: oklch(0.205 0 0);
|
|
--card-foreground: oklch(0.985 0 0);
|
|
--popover: oklch(0.205 0 0);
|
|
--popover-foreground: oklch(0.985 0 0);
|
|
--primary: oklch(57.61% 0.2508 258.23);
|
|
--primary-foreground: oklch(1 0 0);
|
|
--secondary: oklch(0.269 0 0);
|
|
--secondary-foreground: oklch(0.985 0 0);
|
|
--muted: oklch(0.269 0 0);
|
|
--muted-foreground: oklch(0.708 0 0);
|
|
--accent: oklch(0.269 0 0);
|
|
--accent-foreground: oklch(0.985 0 0);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--border: oklch(1 0 0 / 10%);
|
|
--input: oklch(1 0 0 / 15%);
|
|
--ring: oklch(0.556 0 0);
|
|
--chart-1: oklch(0.488 0.243 264.376);
|
|
--chart-2: oklch(0.696 0.17 162.48);
|
|
--chart-3: oklch(0.769 0.188 70.08);
|
|
--chart-4: oklch(0.627 0.265 303.9);
|
|
--chart-5: oklch(0.645 0.246 16.439);
|
|
--sidebar: oklch(0.205 0 0);
|
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.269 0 0);
|
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.556 0 0);
|
|
}
|
|
|
|
/*
|
|
* Restore the site's dark-mode background scale. The package inverts it
|
|
* (background-100 = pure black over a near-black background-200), which
|
|
* flattens elevated surfaces — e.g. the homepage code window and the active
|
|
* code-showcase tab become indistinguishable from the page. chat-sdk.dev
|
|
* uses an elevated background-100 over a pure-black background-200.
|
|
*/
|
|
.dark {
|
|
--ds-background-100: oklch(0.145 0 0);
|
|
--ds-background-200: oklch(0 0 0);
|
|
}
|
|
|
|
/* The Chat SDK site body uses the raised background tint */
|
|
@layer base {
|
|
body {
|
|
@apply bg-background-200 text-foreground;
|
|
}
|
|
}
|
|
|
|
/* Prose styles */
|
|
.prose :where(p > code, li > code) {
|
|
-webkit-box-decoration-break: clone;
|
|
box-decoration-break: clone;
|
|
font-variant-ligatures: none;
|
|
font-feature-settings:
|
|
"liga" 0,
|
|
"calt" 0;
|
|
overflow-wrap: anywhere;
|
|
@apply rounded-sm bg-muted px-1.5 py-0.5 font-mono text-[0.875em] text-foreground;
|
|
}
|
|
|
|
.prose :where(p > code, li > code)::before,
|
|
.prose :where(p > code, li > code)::after {
|
|
content: none;
|
|
}
|
|
|
|
/*
|
|
* On mobile the sticky MobileDocsBar abuts the navbar via a negative top
|
|
* margin, which would otherwise overlap and clip the page breadcrumb rendered
|
|
* above it. Hide the breadcrumb on mobile so the bar sits flush under the
|
|
* navbar; it stays visible on desktop, where the bar is hidden.
|
|
*/
|
|
@container (max-width: 960px) {
|
|
#nd-page {
|
|
@apply px-6;
|
|
}
|
|
|
|
#nd-page > .text-fd-muted-foreground:first-child {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
|
|
/* TOC and footer links use gray-1000 */
|
|
#nd-toc {
|
|
@apply text-gray-1000 md:pl-6;
|
|
}
|
|
|
|
#nd-toc a {
|
|
@apply text-gray-900 hover:text-gray-1000;
|
|
}
|
|
|
|
#nd-toc a[data-active="true"] {
|
|
@apply text-gray-1000;
|
|
}
|
|
|
|
/* Streamdown clips long code lines with overflow-hidden — allow horizontal scroll. */
|
|
div[data-streamdown="code-block-body"] {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
padding-right: 0;
|
|
}
|
|
|
|
/* Move right padding inside the scrollable element so it survives scroll-end. */
|
|
div[data-streamdown="code-block-body"] > pre {
|
|
padding-right: 1rem;
|
|
}
|