radiant-docs 0.1.40 → 0.1.42

package/template/src/components/user/CodeBlock.astro

@@ -257,7 +257,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
 <div
   class:list={[
     "group/prose-code not-prose relative w-full max-w-full min-w-0 rounded-xl",
-    parsedInCodeGroup ? "my-0" : "my-6 shadow-xs",
+    parsedInCodeGroup ? "my-0" : "rd-prose-block shadow-xs",
   ]}
   data-rd-code-block-root="true"
   data-rd-collapsed-lines={collapsedLinesValue}

package/template/src/components/user/CodeGroup.astro

@@ -4,7 +4,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 ---
 
 <div
-  class="group/prose-code-group not-prose relative my-6 w-full max-w-full min-w-0 shadow-xs rounded-xl"
+  class="rd-prose-block group/prose-code-group not-prose relative w-full max-w-full min-w-0 shadow-xs rounded-xl"
   data-rd-code-group-root="true"
 >
   <div

package/template/src/components/user/Column.astro

@@ -0,0 +1,25 @@
+---
+const columnProps = Astro.props as Record<string, unknown>;
+
+function getSourceFile(pathname: string): string {
+  const pagePath = pathname
+    .replace(/^\/documentation\//, "")
+    .replace(/\/$/, "");
+  return `${pagePath}.mdx`;
+}
+
+const unknownProps = Object.keys(columnProps);
+if (unknownProps.length > 0) {
+  const propLabel = unknownProps.length === 1 ? "prop" : "props";
+  const unknownLabel = unknownProps.map((name) => `"${name}"`).join(", ");
+  throw new Error(
+    `[USER_ERROR]: <Column>: Unsupported ${propLabel}: ${unknownLabel}. <Column> does not accept props; render another <Columns> block for a new row. (in ${getSourceFile(Astro.url.pathname)})`,
+  );
+}
+---
+
+<div data-rd-column class="min-w-0">
+  <div class="prose-rules max-w-none! *:max-w-none!">
+    <slot />
+  </div>
+</div>

package/template/src/components/user/Columns.astro

@@ -0,0 +1,200 @@
+---
+import {
+  validateNoUnknownProps,
+  validateProps,
+} from "../../lib/component-error";
+
+interface Props {
+  columns?: 2 | 3;
+}
+
+const columnsProps = Astro.props as Record<string, unknown>;
+
+validateNoUnknownProps(
+  "Columns",
+  columnsProps,
+  ["columns"],
+  Astro.url.pathname,
+);
+
+validateProps(
+  "Columns",
+  columnsProps,
+  {
+    columns: { type: ["number", "string"] },
+  },
+  Astro.url.pathname,
+);
+
+function normalizeColumns(value: unknown): 2 | 3 {
+  if (value === undefined) return 2;
+
+  const normalizedValue =
+    typeof value === "number"
+      ? value
+      : typeof value === "string"
+        ? Number(value.trim())
+        : Number.NaN;
+
+  if (normalizedValue !== 2 && normalizedValue !== 3) {
+    throw new Error(
+      `[USER_ERROR]: <Columns>: Invalid prop "columns": expected 2 or 3 (in ${Astro.url.pathname})`,
+    );
+  }
+
+  return normalizedValue;
+}
+
+function getSourceFile(pathname: string): string {
+  const pagePath = pathname
+    .replace(/^\/documentation\//, "")
+    .replace(/\/$/, "");
+  return `${pagePath}.mdx`;
+}
+
+function createColumnsError(message: string): Error {
+  return new Error(
+    `[USER_ERROR]: <Columns>: ${message} (in ${getSourceFile(Astro.url.pathname)})`,
+  );
+}
+
+const VOID_ELEMENTS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr",
+]);
+
+function getTopLevelElements(html: string): Array<{
+  tagName: string;
+  attributes: string;
+}> {
+  const elements: Array<{ tagName: string; attributes: string }> = [];
+  let depth = 0;
+  let index = 0;
+
+  while (index < html.length) {
+    const nextTagStart = html.indexOf("<", index);
+    if (nextTagStart === -1) break;
+
+    if (html.startsWith("<!--", nextTagStart)) {
+      const commentEnd = html.indexOf("-->", nextTagStart + 4);
+      index = commentEnd === -1 ? html.length : commentEnd + 3;
+      continue;
+    }
+
+    const tagEnd = html.indexOf(">", nextTagStart + 1);
+    if (tagEnd === -1) break;
+
+    const rawTag = html.slice(nextTagStart + 1, tagEnd).trim();
+    index = tagEnd + 1;
+
+    if (!rawTag || rawTag.startsWith("!") || rawTag.startsWith("?")) {
+      continue;
+    }
+
+    if (rawTag.startsWith("/")) {
+      depth = Math.max(0, depth - 1);
+      continue;
+    }
+
+    const tagMatch = rawTag.match(/^([A-Za-z][\w:-]*)([\s\S]*)$/);
+    if (!tagMatch) continue;
+
+    const tagName = tagMatch[1].toLowerCase();
+    const attributes = tagMatch[2] ?? "";
+    const isSelfClosing = /\/\s*$/.test(rawTag);
+
+    if (depth === 0) {
+      elements.push({ tagName, attributes });
+    }
+
+    if (!isSelfClosing && !VOID_ELEMENTS.has(tagName)) {
+      depth += 1;
+    }
+  }
+
+  return elements;
+}
+
+function isColumnElement(element: { tagName: string; attributes: string }) {
+  return (
+    element.tagName === "div" &&
+    /(?:^|\s)data-rd-column(?:\s|=|$)/.test(element.attributes)
+  );
+}
+
+function validateColumnChildren(html: string, expectedColumns: 2 | 3): void {
+  const topLevelElements = getTopLevelElements(html);
+  const columnElements = topLevelElements.filter(isColumnElement);
+
+  if (topLevelElements.length === 0) {
+    throw createColumnsError(
+      `Must contain exactly ${expectedColumns} <Column> children.`,
+    );
+  }
+
+  if (columnElements.length !== topLevelElements.length) {
+    throw createColumnsError(
+      "Only direct <Column> children are allowed. Wrap each column's content in <Column>.",
+    );
+  }
+
+  if (columnElements.length !== expectedColumns) {
+    throw createColumnsError(
+      `Expected exactly ${expectedColumns} <Column> children for columns={${expectedColumns}}, but found ${columnElements.length}. Render another <Columns> block for a new row.`,
+    );
+  }
+}
+
+const columns = normalizeColumns(columnsProps.columns);
+const html = Astro.slots.has("default")
+  ? await Astro.slots.render("default")
+  : "";
+
+validateColumnChildren(html, columns);
+---
+
+<div class="rd-prose-block rd-columns-container w-full max-w-none!">
+  <div
+    class="rd-columns grid w-full max-w-none! gap-6"
+    data-rd-columns={columns}
+    set:html={html}
+  />
+</div>
+
+<style>
+  .rd-columns-container {
+    container: rd-columns / inline-size;
+  }
+
+  .rd-columns {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .rd-columns > :global(*) {
+    min-width: 0;
+  }
+
+  @container rd-columns (min-width: 36rem) {
+    .rd-columns[data-rd-columns="2"] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @container rd-columns (min-width: 664px) {
+    .rd-columns[data-rd-columns="3"] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+</style>

package/template/src/components/user/ComponentPreviewBlock.astro

@@ -60,7 +60,7 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
 ---
 
 <div
-  class="rd-component-preview my-6 flex w-full max-w-full min-w-0 flex-col"
+  class="rd-prose-block rd-component-preview flex w-full max-w-full min-w-0 flex-col"
   data-rd-component-preview-root="true"
 >
   <div

package/template/src/components/user/Image.astro

@@ -91,7 +91,7 @@ const captionHtml =
 
 <figure
   class:list={[
-    "p-1.5 pb-1 xs:pb-1.5 group border border-neutral-200 dark:border-neutral-800 shadow-xs bg-neutral-50 dark:bg-(--rd-code-surface) rounded-2xl",
+    "rd-prose-block p-1.5 pb-1 xs:pb-1.5 group border border-neutral-200 dark:border-neutral-800 shadow-xs bg-neutral-50 dark:bg-(--rd-code-surface) rounded-2xl",
     hasCustomImageWidth ? "w-fit max-w-full mx-auto" : "w-full",
   ]}
   x-data="{ 

package/template/src/components/user/Step.astro

@@ -35,7 +35,7 @@ validateProps(
       {title}
     </h3>
   </div>
-  <div class="[&>p]:m-0 [&>p:not(:last-child)]:mb-2">
+  <div class="prose-rules max-w-none! *:max-w-none!">
     <slot />
   </div>
 </div>

package/template/src/components/user/Steps.astro

@@ -2,6 +2,6 @@
 interface Props {}
 ---
 
-<div class="my-6 space-y-1.5">
+<div class="rd-prose-block space-y-1.5">
   <slot />
 </div>

package/template/src/components/user/Tab.astro

@@ -19,7 +19,5 @@ validateProps(
 ---
 
 <section data-label={label} data-icon={icon || ""}>
-  <div class="*:first:mt-0! *:last:mb-0!">
-    <slot />
-  </div>
+  <slot />
 </section>

package/template/src/components/user/Tabs.astro

@@ -131,7 +131,7 @@ if (labels.length === 0) {
     });
   }
 }"
-class="my-5">
+class="rd-prose-block">
   <ul
     class="relative isolate not-prose flex w-full max-w-full min-w-0 rounded-lg border border-neutral-100 bg-neutral-100/80 p-[3px] dark:border-none dark:bg-neutral-800/50"
   >
@@ -174,7 +174,7 @@ class="my-5">
       <div
         {...(index !== 0 ? { "x-cloak": true } : {})}
         x-ref={`content-${index}`}
-        class="w-full"
+        class="prose-rules w-full max-w-none! *:max-w-none!"
         :style={`getPanelStyle(${index})`}
         style={index === 0 ? 'position: relative;' : ''}
         set:html={content}

package/template/src/layouts/Layout.astro

@@ -7,19 +7,15 @@ import googleSansLatinExtWoff2 from "../assets/fonts/google-sans-flex/latin-ext.
 import geistMonoLatinWoff2 from "../assets/fonts/geist-mono/latin.woff2?url";
 import geistMonoLatinExtWoff2 from "../assets/fonts/geist-mono/latin-ext.woff2?url";
 import Sidebar from "../components/Sidebar.astro";
-import colors from "tailwindcss/colors";
-import {
-  DEFAULT_THEME_COLOR_DARK,
-  DEFAULT_THEME_COLOR_LIGHT,
-  getConfig,
-  type BaseColorOption,
-} from "../lib/validation";
+import { getConfig } from "../lib/validation";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
-import AskAiWidget from "../components/chat/AskAiWidget";
+import AssistantDocsWidget from "../components/chat/AssistantDocsWidget.astro";
 import { ClientRouter } from "astro:transitions";
-import { prependBasePath, stripBasePath, withBasePath } from "../lib/base-path";
+import { prependBasePath, stripBasePath } from "../lib/base-path";
+import { getFaviconConfig } from "../lib/favicon";
 import { resolveStaticAssetUrl } from "../lib/static-asset-url";
+import { getDocsThemeCss } from "../lib/theme-css";
 
 interface Props {
   pageTitle?: string;
@@ -43,117 +39,8 @@ function routePathToOgImagePath(routePath: string): string {
 
 const { pageTitle, pageDescription } = Astro.props as Props;
 const config = await getConfig();
-const themeBaseColor = config.theme?.baseColor ?? "neutral";
-const themeThemeColor = config.theme?.themeColor;
-const lightBaseColor: BaseColorOption =
-  typeof themeBaseColor === "string" ? themeBaseColor : themeBaseColor.light;
-const darkBaseColor: BaseColorOption =
-  typeof themeBaseColor === "string" ? themeBaseColor : themeBaseColor.dark;
-const lightThemeColor =
-  typeof themeThemeColor === "string"
-    ? themeThemeColor
-    : (themeThemeColor?.light ?? DEFAULT_THEME_COLOR_LIGHT);
-const darkThemeColor =
-  typeof themeThemeColor === "string"
-    ? themeThemeColor
-    : (themeThemeColor?.dark ?? DEFAULT_THEME_COLOR_DARK);
-const neutralColorShades = [
-  "50",
-  "100",
-  "200",
-  "300",
-  "400",
-  "500",
-  "600",
-  "700",
-  "800",
-  "900",
-  "950",
-] as const;
-const paletteColors = colors as unknown as Record<
-  string,
-  Record<(typeof neutralColorShades)[number], string>
->;
-const getNeutralPaletteVariables = (baseColor: BaseColorOption): string[] => {
-  const palette = paletteColors[baseColor] ?? paletteColors.neutral;
-  return [
-    `--color-neutral: ${palette["500"]};`,
-    ...neutralColorShades.map(
-      (shade) => `--color-neutral-${shade}: ${palette[shade]};`,
-    ),
-  ];
-};
-function normalizeHexColorToRgb(
-  hexColor: string,
-): { r: number; g: number; b: number } | null {
-  const normalized = hexColor.replace("#", "").trim();
-  if (/^[a-fA-F0-9]{3,4}$/.test(normalized)) {
-    const [r, g, b] = normalized.split("");
-    if (!r || !g || !b) return null;
-    return {
-      r: Number.parseInt(`${r}${r}`, 16),
-      g: Number.parseInt(`${g}${g}`, 16),
-      b: Number.parseInt(`${b}${b}`, 16),
-    };
-  }
-
-  if (/^[a-fA-F0-9]{6,8}$/.test(normalized)) {
-    return {
-      r: Number.parseInt(normalized.slice(0, 2), 16),
-      g: Number.parseInt(normalized.slice(2, 4), 16),
-      b: Number.parseInt(normalized.slice(4, 6), 16),
-    };
-  }
-
-  return null;
-}
-
-function getThemeForegroundColor(hexColor: string): "#ffffff" | "#111827" {
-  const rgb = normalizeHexColorToRgb(hexColor);
-  if (!rgb) return "#ffffff";
-
-  const toLinear = (channel: number): number => {
-    const normalized = channel / 255;
-    return normalized <= 0.03928
-      ? normalized / 12.92
-      : ((normalized + 0.055) / 1.055) ** 2.4;
-  };
-
-  const luminance =
-    0.2126 * toLinear(rgb.r) +
-    0.7152 * toLinear(rgb.g) +
-    0.0722 * toLinear(rgb.b);
-  return luminance > 0.45 ? "#111827" : "#ffffff";
-}
-
-const getThemeColorVariables = (themeColor: string): string[] => {
-  const foreground = getThemeForegroundColor(themeColor);
-  const iconFilter = foreground === "#ffffff" ? "invert(1)" : "none";
-
-  return [
-    `--color-theme: ${themeColor};`,
-    `--color-theme-foreground: ${foreground};`,
-    `--color-theme-icon-filter: ${iconFilter};`,
-    "--color-theme-top: color-mix(in oklab, var(--color-theme) 88%, white);",
-    "--color-theme-bottom: color-mix(in oklab, var(--color-theme) 90%, black);",
-  ];
-};
-const lightNeutralVariables = getNeutralPaletteVariables(lightBaseColor);
-const darkNeutralVariables = getNeutralPaletteVariables(darkBaseColor);
-const lightThemeColorVariables = getThemeColorVariables(lightThemeColor);
-const darkThemeColorVariables = getThemeColorVariables(darkThemeColor);
-const neutralPaletteCss = [
-  "html[data-theme='light'], html:not(.dark):not([data-theme='dark']) {",
-  ...[...lightNeutralVariables, ...lightThemeColorVariables].map(
-    (declaration) => `  ${declaration.replace(/;$/, " !important;")}`,
-  ),
-  "}",
-  "html.dark, html[data-theme='dark'] {",
-  ...[...darkNeutralVariables, ...darkThemeColorVariables].map(
-    (declaration) => `  ${declaration.replace(/;$/, " !important;")}`,
-  ),
-  "}",
-].join("\n");
+const favicon = getFaviconConfig();
+const neutralPaletteCss = getDocsThemeCss(config.theme);
 const resolvedPageTitle = pageTitle?.trim();
 const resolvedPageDescription =
   typeof pageDescription === "string" && pageDescription.trim().length > 0
@@ -183,23 +70,7 @@ const parsedOrgTier = Number.parseInt(
 const orgTier =
   Number.isFinite(parsedOrgTier) && parsedOrgTier > 0 ? parsedOrgTier : 1;
 const isDev = import.meta.env.DEV;
-const askAiDevHost = (import.meta.env.ASK_AI_DEV_HOST ?? "s").toString().trim();
-const askAiDevProxySecret = (import.meta.env.ASK_AI_DEV_PROXY_SECRET ?? "s")
-  .toString()
-  .trim();
-const hasAskAiDevConfig =
-  askAiDevHost.length > 0 && askAiDevProxySecret.length > 0;
 const askAiEnabled = isDev || orgTier >= 3;
-const askAiChatAvailable = isDev ? hasAskAiDevConfig : orgTier >= 3;
-let askAiApiPath = withBasePath("/_platform/ask-ai");
-
-if (isDev && hasAskAiDevConfig) {
-  try {
-    askAiApiPath = new URL("/_platform/ask-ai", askAiDevHost).toString();
-  } catch {
-    askAiApiPath = withBasePath("/_platform/ask-ai");
-  }
-}
 ---
 
 <!doctype html>
@@ -357,8 +228,8 @@ if (isDev && hasAskAiDevConfig) {
     <meta name="viewport" content="width=device-width" />
     <link
       rel="icon"
-      type="image/svg+xml"
-      href={resolveStaticAssetUrl("/favicon.svg")}
+      type={favicon.type}
+      href={resolveStaticAssetUrl(favicon.href)}
     />
     <meta name="generator" content={Astro.generator} />
     <link rel="canonical" href={canonicalUrl} />
@@ -421,7 +292,7 @@ if (isDev && hasAskAiDevConfig) {
       class="bg-background mx-[5px] min-h-[calc(100vh-68px)] mt-17 fixed inset-0 lg:hidden z-50 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
       x-transition.opacity
     >
-      <Sidebar />
+      <Sidebar askAiEnabled={askAiEnabled} />
     </div>
 
     <!-- Main Content -->
@@ -429,25 +300,11 @@ if (isDev && hasAskAiDevConfig) {
       class="mx-1 mt-1 px-4 sm:px-6 lg:pl-[calc(288px+32px)] pt-16 lg:pr-8 bg-background"
       data-vaul-scale-chrome
     >
-      <main
-        class="max-w-2xl xl:max-w-5xl mx-auto pt-16 pb-16 min-h-[calc(100vh-64px)]"
-      >
+      <main class="mx-auto pt-16 pb-16 min-h-[calc(100vh-64px)]">
         <slot />
       </main>
-      <Footer askAiEnabled />
+      <Footer askAiEnabled={askAiEnabled} />
     </div>
-    {
-      askAiEnabled ? (
-        <div transition:persist>
-          <AskAiWidget
-            client:only="preact"
-            apiPath={askAiApiPath}
-            isChatAvailable={askAiChatAvailable}
-            devProxyToken={isDev ? askAiDevProxySecret : undefined}
-            unavailableMessage="This feature is available on production sites for Pro tier organizations."
-          />
-        </div>
-      ) : null
-    }
+    {askAiEnabled ? <AssistantDocsWidget /> : null}
   </body>
 </html>

package/template/src/lib/assistant-chrome-defaults.ts

@@ -0,0 +1,86 @@
+export type AssistantChromeConfig = {
+  zIndex: string;
+  side: "left" | "right";
+  offsetX: string;
+  offsetY: string;
+  mobileOffsetX: string;
+  mobileOffsetY: string;
+  launcherSize: string;
+  launcherIconSize: string;
+  launcherShadow: string;
+  panelWidth: string;
+  panelHeight: string;
+  panelExpandedWidth: string;
+  panelExpandedHeight: string;
+  panelViewportMargin: string;
+  panelGap: string;
+  panelRadius: string;
+  panelBorder: string;
+  panelBackground: string;
+  panelDarkBorder: string;
+  panelDarkBackground: string;
+  panelBackdropBlur: string;
+  panelShadow: string;
+  panelDarkShadow: string;
+  panelOpenScale: string;
+  panelOpenDuration: string;
+  panelOpenTiming: string;
+  panelSizeDuration: string;
+  panelSizeTiming: string;
+  panelCloseDuration: string;
+  panelCloseTiming: string;
+  mobileBreakpoint: string;
+  panelFullscreenHeightBreakpoint: string;
+};
+
+const ASSISTANT_PANEL_DARK_NEUTRAL_800_MIX = "20%";
+const ASSISTANT_PANEL_DARK_NEUTRAL_900_MIX = "80%";
+const ASSISTANT_PANEL_DARK_SURFACE_OPACITY = "92%";
+
+export function getAssistantPanelDarkBackgroundCss({
+  neutral800,
+  neutral900,
+}: {
+  neutral800: string;
+  neutral900: string;
+}): string {
+  return `color-mix(in srgb, color-mix(in srgb, ${neutral800} ${ASSISTANT_PANEL_DARK_NEUTRAL_800_MIX}, ${neutral900} ${ASSISTANT_PANEL_DARK_NEUTRAL_900_MIX}) ${ASSISTANT_PANEL_DARK_SURFACE_OPACITY}, transparent)`;
+}
+
+export const DEFAULT_ASSISTANT_CHROME_CONFIG: AssistantChromeConfig = {
+  zIndex: "2147483000",
+  side: "right",
+  offsetX: "20px",
+  offsetY: "20px",
+  mobileOffsetX: "16px",
+  mobileOffsetY: "16px",
+  launcherSize: "48px",
+  launcherIconSize: "20px",
+  launcherShadow: "0 16px 32px -8px rgb(0 0 0 / 24%)",
+  panelWidth: "420px",
+  panelHeight: "640px",
+  panelExpandedWidth: "640px",
+  panelExpandedHeight: "760px",
+  panelViewportMargin: "16px",
+  panelGap: "12px",
+  panelRadius: "16px",
+  panelBorder: "1px solid rgb(9 14 21 / 8%)",
+  panelBackground: "rgb(255 255 255 / 90%)",
+  panelDarkBorder: "1px solid rgb(255 255 255 / 8%)",
+  panelDarkBackground: getAssistantPanelDarkBackgroundCss({
+    neutral800: "var(--color-neutral-800, oklch(26.9% 0 0))",
+    neutral900: "var(--color-neutral-900, oklch(20.5% 0 0))",
+  }),
+  panelBackdropBlur: "48px",
+  panelShadow: "rgba(9, 14, 21, 0.16) 0px 5px 40px 0px",
+  panelDarkShadow: "rgba(0, 0, 0, 0.36) 0px 8px 44px 0px",
+  panelOpenScale: ".9",
+  panelOpenDuration: ".5s",
+  panelOpenTiming: "cubic-bezier(.34, 1.56, .64, 1)",
+  panelSizeDuration: ".46s",
+  panelSizeTiming: "cubic-bezier(.22, 1.26, .36, 1)",
+  panelCloseDuration: ".2s",
+  panelCloseTiming: "cubic-bezier(.25, 1, .5, 1)",
+  mobileBreakpoint: "640px",
+  panelFullscreenHeightBreakpoint: "560px",
+};

package/template/src/lib/assistant-chrome.ts

@@ -0,0 +1,39 @@
+import type { DocsConfig } from "./validation";
+import { getDocsDarkBaseColorShade } from "./theme-css";
+import {
+  DEFAULT_ASSISTANT_CHROME_CONFIG,
+  getAssistantPanelDarkBackgroundCss,
+  type AssistantChromeConfig,
+} from "./assistant-chrome-defaults";
+
+export {
+  DEFAULT_ASSISTANT_CHROME_CONFIG,
+  getAssistantPanelDarkBackgroundCss,
+  type AssistantChromeConfig,
+} from "./assistant-chrome-defaults";
+
+function getAssistantPanelDarkBackground(theme: DocsConfig["theme"]): string {
+  const neutral800 = getDocsDarkBaseColorShade(theme, "800");
+  const neutral900 = getDocsDarkBaseColorShade(theme, "900");
+
+  return getAssistantPanelDarkBackgroundCss({ neutral800, neutral900 });
+}
+
+export function getAssistantChromeConfig(
+  config: DocsConfig,
+): AssistantChromeConfig {
+  const chromeConfig = {
+    ...DEFAULT_ASSISTANT_CHROME_CONFIG,
+    panelDarkBackground: getAssistantPanelDarkBackground(config.theme),
+  };
+
+  if (config.assistant?.button?.size === "small") {
+    return {
+      ...chromeConfig,
+      launcherSize: "36px",
+      launcherIconSize: "16px",
+    };
+  }
+
+  return chromeConfig;
+}