@chassis-ui/docs 0.1.8 → 0.1.10

package/README.md

@@ -1,98 +1,105 @@
 # @chassis-ui/docs
 
-Shared Astro components and layouts for Chassis documentation sites.
+> Shared Astro layouts, components, and utilities for Chassis documentation sites.
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Version: 0.1.10](https://img.shields.io/badge/Version-0.1.10-blue.svg)](https://www.npmjs.com/package/@chassis-ui/docs) [![npm](https://img.shields.io/npm/v/@chassis-ui/docs.svg)](https://www.npmjs.com/package/@chassis-ui/docs)
 
 ## Overview
 
-This package provides reusable Astro components, layouts, and utilities specifically designed for building documentation websites within the Chassis UI ecosystem. It includes common documentation patterns, styling helpers, and content processing utilities.
+`@chassis-ui/docs` powers every documentation site in the Chassis ecosystem — the main `chassis-ui.com` website and the per-package docs for `chassis-css`, `chassis-tokens`, `chassis-icons`, `chassis-figma`, and `chassis-assets`. It ships pre-built layouts, navigation components, content-processing utilities, and SCSS helpers so each site stays consistent without duplicating code.
+
+> [!NOTE] This package is developed inside the [`chassis-website`](https://github.com/chassis-ui/website) monorepo at `packages/docs/` and published to npm. Source, issues, and pull requests live in that repository.
 
 ## Installation
 
-```bash
-npm install @chassis-ui/docs
+```sh
+pnpm add @chassis-ui/docs
 ```
 
-or with pnpm:
+or:
 
-```bash
-pnpm add @chassis-ui/docs
+```sh
+npm install @chassis-ui/docs
 ```
 
-## Peer Dependencies
+### Peer Dependencies
 
-This package requires the following peer dependencies:
+```json
+{
+  "astro": "^5.0.0"
+}
+```
 
-- `@chassis-ui/css`: Chassis CSS framework
-- `@chassis-ui/icons`: Chassis icon library
-- `@chassis-ui/tokens`: Chassis design tokens
-- `astro`: ^4.0.0 || ^5.0.0
+In practice, sites also install the rest of the Chassis stack — `@chassis-ui/css`, `@chassis-ui/tokens`, `@chassis-ui/icons` — to render the layouts and styles correctly.
 
 ## Usage
 
-### Importing Components
-
-```typescript
-// Import layouts
-import Layout from '@chassis-ui/docs/layouts/Layout.astro'
+```astro
+---
+import BaseLayout from '@chassis-ui/docs/layouts/BaseLayout.astro'
 import DocsLayout from '@chassis-ui/docs/layouts/DocsLayout.astro'
+import SingleLayout from '@chassis-ui/docs/layouts/SingleLayout.astro'
 
-// Import components
-import CodeBlock from '@chassis-ui/docs/components/CodeBlock.astro'
-import Callout from '@chassis-ui/docs/components/Callout.astro'
+import TableOfContents from '@chassis-ui/docs/components/TableOfContents.astro'
+import ThemeToggler from '@chassis-ui/docs/components/ThemeToggler.astro'
 
-// Import utilities
-import { generateTOC } from '@chassis-ui/docs'
-import { processImage } from '@chassis-ui/docs'
-```
+import { generateTOC, processImage } from '@chassis-ui/docs'
+---
 
-### Available Exports
+<SingleLayout title="About" description="…">
+  <slot />
+</SingleLayout>
+```
 
-This package exports:
+## Exports
 
-- **Layouts**: Pre-built Astro layouts for documentation pages
-- **Components**: Reusable documentation components (code blocks, callouts, navigation, etc.)
-- **Shortcodes**: MDX-compatible shortcode components
-- **Libraries**: Utility functions for content processing, TOC generation, and more
-- **Styles**: SCSS utilities and mixins
-- **Scripts**: Client-side JavaScript utilities
+| Subpath | Contents |
+| --- | --- |
+| `@chassis-ui/docs` | Library functions: `chassis`, `image`, `layout`, `rehype`, `toc`, `utils` |
+| `@chassis-ui/docs/layouts/*` | `BaseLayout`, `DocsLayout`, `RedirectLayout`, `SingleLayout` |
+| `@chassis-ui/docs/components/*` | `DocsSidebar`, `FeatureCard`, `NavLink`, `ResponsiveImage`, `TableOfContents`, `ThemeToggler` |
+| `@chassis-ui/docs/shortcodes/*` | MDX shortcode components |
+| `@chassis-ui/docs/libs/*` | Direct access to individual library modules |
+| `@chassis-ui/docs/js/*` | Client-side scripts |
+| `@chassis-ui/docs/scss/*` | SCSS utilities and partials |
 
-### Directory Structure
+### Source Layout
 
 ```
 src/
-├── components/     # Astro components
-│   └── shortcodes/ # MDX shortcode components
-├── layouts/        # Page layouts
-├── libs/           # Utility libraries
-├── js/             # Client-side scripts
-└── scss/           # Styling utilities
+├── components/      # Astro components (+ shortcodes/)
+├── layouts/         # Page layouts (+ head/, header/, footer/)
+├── libs/            # Utility libraries
+├── js/              # Client-side scripts
+└── scss/            # Styling utilities
 ```
 
-## Features
+## Chassis Ecosystem
 
-- **Content Processing**: Utilities for processing markdown and MDX content
-- **Table of Contents**: Automatic TOC generation from headings
-- **Image Optimization**: Helper functions for responsive images
-- **Syntax Highlighting**: Code block components with syntax highlighting
-- **Navigation**: Responsive documentation navigation components
-- **Search Integration**: Ready-to-use search components
-- **Accessibility**: WCAG-compliant components with proper ARIA attributes
+This package is part of the Chassis Design System's multi-repository architecture:
 
-## Development
+| Project | Description |
+| --- | --- |
+| [chassis-website](https://github.com/chassis-ui/website) | **Main website and home of `@chassis-ui/docs` (this package)** |
+| [chassis-css](https://github.com/chassis-ui/css) | CSS framework and component library |
+| [chassis-tokens](https://github.com/chassis-ui/tokens) | Design token generation and management |
+| [chassis-icons](https://github.com/chassis-ui/icons) | Icon library and build toolkit |
+| [chassis-assets](https://github.com/chassis-ui/assets) | Multi-platform asset management |
+| [chassis-figma](https://github.com/chassis-ui/figma) | Figma component documentation |
 
-This package is part of the Chassis UI monorepo. For development instructions, see the main repository documentation.
+All documentation sites in the ecosystem share this package for consistent layouts, components, and styling.
 
-## License
+## Contributing
 
-MIT © [Chassis UI](https://github.com/chassis-ui)
+Issues and pull requests are welcome — please file them in [`chassis-ui/website`](https://github.com/chassis-ui/website). For larger changes, open an issue first so we can agree on the approach before you write the code.
 
-## Contributing
+## License
 
-Contributions are welcome! Please read the contributing guidelines in the main repository.
+MIT © [Chassis UI](https://github.com/chassis-ui)
 
 ## Links
 
-- [Documentation](https://chassis-ui.com/docs)
-- [GitHub Repository](https://github.com/chassis-ui/website)
-- [Issue Tracker](https://github.com/chassis-ui/website/issues)
-- [Chassis UI Website](https://chassis-ui.com)
+- [chassis-ui.com](https://chassis-ui.com)
+- [npm package](https://www.npmjs.com/package/@chassis-ui/docs)
+- [Source repository](https://github.com/chassis-ui/website/tree/main/packages/docs)
+- [Issue tracker](https://github.com/chassis-ui/website/issues)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chassis-ui/docs",
   "description": "Shared Astro components and layouts for Chassis documentation sites.",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "type": "module",
   "repository": {
     "type": "git",
@@ -44,20 +44,20 @@
     "astro": "^5.0.0"
   },
   "devDependencies": {
-    "@docsearch/css": "^3.9.0",
-    "@docsearch/js": "^3.9.0",
+    "@docsearch/css": "^4.6.2",
+    "@docsearch/js": "^4.6.2",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
-    "astro": "^5.13.9",
+    "astro": "^6.1.9",
     "github-slugger": "^2.0.0",
     "image-size": "^2.0.2",
-    "mdast-util-from-markdown": "^2.0.2",
+    "mdast-util-from-markdown": "^2.0.3",
     "mdast-util-mdx-jsx": "^3.2.0",
     "mdast-util-to-string": "^4.0.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
     "unified": "^11.0.5",
-    "unist-util-visit": "^5.0.0",
-    "zod": "^4.1.11"
+    "unist-util-visit": "^5.1.0",
+    "zod": "^4.3.6"
   }
 }

package/src/components/FeatureCard.astro

@@ -27,7 +27,7 @@ const hasContent = Astro.slots.has('default')
 const cardClasses = [
   'feature-item bg-even d-flex flex-column rounded-large',
   'p-medium p-large-xlarge gap-medium gap-medium-xlarge',
-  horizontal ? 'h-auto' : 'h-100',
+  horizontal ? '' : 'h-100',
   classes
 ]
   .filter(Boolean)

package/src/layouts/BaseLayout.astro

@@ -28,24 +28,34 @@ type Props = {
     // any override.
     main?: LayoutOverridesHTMLAttributes<'main'>
   }
-  // A string containing the robots meta tag content. If not set, the tag will not be rendered.
-  robots?: string
   // An override for the page title. If not defined, the title will either be the content of the `title` frontmatter
   // property when rendering a markdown page or default back to the one defined in the `config.yml` file.
   title?: string
+  // An override for the page description. If not defined, the description will either be the content of the
+  // `description` frontmatter property when rendering a markdown page or default back to the one defined in
+  // the `config.yml` file.
+  description?: string
+  // A string containing the robots meta tag content. If not set, the tag will not be rendered.
+  robots?: string
 } & MarkdownProps
 
 // The following props are automatically set by Astro (if defined) based on the markdown frontmatter when rendering a
 // markdown page. They can be accessed through the `Astro.props.frontmatter` object but note that they won't be set when
 // not rendering a markdown page.
-type MarkdownProps = { frontmatter?: Partial<CollectionEntry<'docs' | 'blog'>['data']> }
+type MarkdownProps = { frontmatter?: Partial<CollectionEntry<'docs'>['data']> }
+
+// This type is used to define the shape of the `extra_js` frontmatter property which allows adding extra JavaScript
+// files to a page by passing an array of objects containing the `src` and `async` properties.
+type ExtraJS = NonNullable<CollectionEntry<'docs'>['data']['extra_js']>[number]
 
 const { frontmatter, layout, overrides, robots } = Astro.props
 
 const title = Astro.props.title ?? frontmatter?.title ?? getConfig().title
-const description = frontmatter?.description
-  ? stripMarkdown(frontmatter.description)
-  : getConfig().description
+const description = Astro.props.description
+  ? stripMarkdown(Astro.props.description)
+  : frontmatter?.description
+    ? stripMarkdown(frontmatter.description)
+    : getConfig().description
 const thumbnail = frontmatter?.thumbnail
   ? `${frontmatter.thumbnail}`
   : 'static/images/social-image.png'
@@ -87,7 +97,9 @@ const mainProps = overrides?.main ?? {}
 
     {
       frontmatter?.extra_js &&
-        frontmatter.extra_js.map((js) => <script is:inline async={js.async} src={js.src} />)
+        frontmatter.extra_js.map((js: ExtraJS) => (
+          <script is:inline async={js.async} src={js.src} />
+        ))
     }
 
     {

package/src/layouts/DocsLayout.astro

@@ -26,6 +26,8 @@ interface Props {
 
 const { frontmatter, headings, id } = Astro.props
 
+type DocSection = NonNullable<typeof frontmatter.sections>[number]
+
 // Extract the directory/section from the ID (format: "directory/filename.mdx")
 const parentDirectory = id.includes('/') ? id.split('/')[0] : ''
 
@@ -44,6 +46,7 @@ if (frontmatter.toc) {
     <aside class="cxd-sidebar">
       <div
         class="offcanvas-large offcanvas-start"
+        role="dialog"
         tabindex="-1"
         id="cxdSidebar"
         aria-labelledby="cxdSidebarOffcanvasLabel"
@@ -139,7 +142,7 @@ if (frontmatter.toc) {
         {
           frontmatter.sections && (
             <div class="row g-xlarge">
-              {frontmatter.sections.map((section) => (
+              {frontmatter.sections.map((section: DocSection) => (
                 <div class="col-medium-6">
                   <a
                     class="d-block text-decoration-none"

package/src/layouts/SingleLayout.astro

@@ -6,36 +6,33 @@
  */
 
 import BaseLayout from './BaseLayout.astro'
+import type { LayoutOverridesHTMLAttributes } from '../libs/layout'
 
 interface Props {
-  /** Page description */
-  description: string
   /** Page title */
   title: string
+  /** Page description */
+  description: string
 }
 
 const { description, title } = Astro.props
+
+const mainProps: LayoutOverridesHTMLAttributes<'main'> = {}
+mainProps['class'] = 'min-vh-100'
 ---
 
-<BaseLayout {...Astro.props} layout="single">
-  <Fragment slot="main">
-    <header class="py-xlarge border-bottom">
-      <div class="container-2xlarge cxd-gutter pt-medium-1 pb-medium-4">
-        <div class="row">
-          <div class="col-xlarge-8">
-            <h1 class="cxd-title mt-0">{title}</h1>
-            <p class="cxd-subtitle">{description}</p>
-            <slot name="header-content" />
-          </div>
+<BaseLayout {...Astro.props} layout="single" overrides={{ main: mainProps }}>
+  <header class="py-xlarge py-medium-3xlarge border-bottom border-subtle">
+    <div class="container-2xlarge">
+      <div class="row">
+        <div class="col col-large-10 col-2xlarge-8">
+          <h1 class="mt-0">{title}</h1>
+          <p class="font-lead">{description}</p>
+          <slot name="header-content" />
         </div>
       </div>
-    </header>
+    </div>
+  </header>
 
-    <main class="cxd-content order-1 py-xlarge" id="content">
-      <div class="container-2xlarge cxd-gutter">
-        <slot />
-        <slot name="main-content" />
-      </div>
-    </main>
-  </Fragment>
+  <slot />
 </BaseLayout>

package/src/layouts/footer/Footer.astro

@@ -23,7 +23,7 @@
         </p>
       </div>
       <div class="col-small-4 col-large-2 offset-large-1 mb-medium">
-        <h5>Docs</h5>
+        <p class="h6 mb-xsmall">Docs</p>
         <ul class="nav">
           <li><a href="/tokens">Design Tokens</a></li>
           <li><a href="/assets">Asset Distributor</a></li>
@@ -33,7 +33,7 @@
         </ul>
       </div>
       <div class="col-small-4 col-large-2 mb-medium">
-        <h5>Github</h5>
+        <p class="h6 mb-xsmall">Github</p>
         <ul class="nav">
           <li><a href="https://github.com/chassis-ui/tokens">Chassis Tokens</a></li>
           <li><a href="https://github.com/chassis-ui/assets">Chassis Assets</a></li>
@@ -43,12 +43,13 @@
         </ul>
       </div>
       <div class="col-small-4 col-large-2 mb-medium">
-        <h5>About</h5>
+        <p class="h6 mb-xsmall">Project</p>
         <ul class="nav">
+          <li><a href="/about">About</a></li>
           <li><a href="/blog">Blog</a></li>
-          <li><a href="https://x.com/chassis_ui">Chassis UI</a></li>
+          <li><a href="/examples">Examples</a></li>
           <li><a href="https://github.com/chassis-ui">Contribute</a></li>
-          <li><a href="https://github.com/ozgurgunes">Developer</a></li>
+          <li><a href="https://x.com/chassis_ui">@chassis_ui on X</a></li>
         </ul>
       </div>
     </div>

package/src/layouts/header/Navigation.astro

@@ -17,7 +17,18 @@ interface Props {
   title: string
 }
 
-const { layout, title } = Astro.props
+const { layout } = Astro.props
+const { pathname } = Astro.url
+const isActive = (path: string) => {
+  if (path === '/') {
+    return pathname === '/' || pathname === ''
+  }
+  // Remove trailing slashes for a cleaner comparison
+  const cleanPathname = pathname.endsWith('/') ? pathname.slice(0, -1) : pathname
+  const cleanLinkPath = path.endsWith('/') ? path.slice(0, -1) : path
+
+  return cleanPathname.startsWith(cleanLinkPath)
+}
 ---
 
 <header class="navbar navbar-expand-large cxd-navbar sticky-top">
@@ -64,6 +75,7 @@ const { layout, title } = Astro.props
 
     <div
       class="offcanvas-large offcanvas-end flex-grow-1"
+      role="dialog"
       tabindex="-1"
       id="cxdNavbar"
       aria-labelledby="cxdNavbarOffcanvasLabel"
@@ -79,27 +91,18 @@ const { layout, title } = Astro.props
       </div>
 
       <div class="offcanvas-body p-large pt-0 p-large-0">
-        <hr class="d-large-none text-white-50" />
+        <hr class="d-large-none" />
         <ul class="navbar-nav flex-row flex-wrap cxd-navbar-nav mx-0 mx-large-medium">
-          <NavLink active={layout === 'docs'} href="/docs">Docs</NavLink>
-          <NavLink active={title === 'Tokens'} href="/tokens">Tokens</NavLink>
-          <NavLink active={title === 'Assets'} href="/assets">Assets</NavLink>
-          <NavLink active={title === 'Figma'} href="/figma">Figma</NavLink>
-          <NavLink active={layout === 'icons'} href="/icons">Icons</NavLink>
-          <NavLink active={title === 'CSS'} href="/css">CSS</NavLink>
-          <li class="nav-item dropdown ms-medium">
-            <a
-              class="nav-link dropdown-toggle"
-              href="/#"
-              role="button"
-              data-cx-toggle="dropdown"
-              aria-expanded="false">More</a
-            >
-            <ul class="dropdown-menu">
-              <li><a class="dropdown-item" href="/examples">Examples</a></li>
-              <li><a class="dropdown-item" href="/blog">Blog</a></li>
-            </ul>
+          <NavLink active={isActive('/tokens')} href="/tokens">Tokens</NavLink>
+          <NavLink active={isActive('/figma')} href="/figma">Figma</NavLink>
+          <NavLink active={isActive('/css')} href="/css">CSS</NavLink>
+          <NavLink active={isActive('/assets')} href="/assets">Assets</NavLink>
+          <NavLink active={isActive('/icons')} href="/icons">Icons</NavLink>
+          <li class="nav-item col-12 col-large-auto d-large-flex">
+            <div class="vr d-none d-large-flex my-auto mx-large-2"></div>
+            <hr class="d-large-none" />
           </li>
+          <NavLink active={isActive('/examples')} href="/examples">Examples</NavLink>
         </ul>
 
         <hr class="d-large-none" />
@@ -124,7 +127,7 @@ const { layout, title } = Astro.props
             <small class="d-large-none ms-xsmall">X</small>
           </NavLink>
           <li class="nav-item col-12 col-large-auto">
-            <div class="vr d-none d-large-flex h-100 mx-large-2 text-white"></div>
+            <div class="vr d-none d-large-flex h-100 mx-large-2"></div>
             <hr class="d-large-none" />
           </li>
 

package/src/libs/utils.ts

@@ -107,9 +107,12 @@ export function getSiteUrl(config: any) {
     return `http://${host}:${port}`
   }
 
-  // Vercel Production: Live production deployment
+  // Vercel Production: Prefer config.baseURL because it already has the correct
+  // path-prefixed chassis-ui.com URL (e.g. https://chassis-ui.com/tokens/).
+  // VERCEL_PROJECT_PRODUCTION_URL is the sub-project's own custom domain
+  // (e.g. tokens.chassis-ui.com) which is NOT the canonical URL we want in sitemaps.
   if (process.env.VERCEL_ENV === 'production') {
-    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
+    return config.baseURL || `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
   }
 
   // Vercel Preview: Branch deployments and previews

package/src/scss/_docsearch.scss

@@ -1,53 +1,68 @@
 // stylelint-disable selector-class-pattern
 
 :root {
+  /* Colors */
   --docsearch-primary-color: var(--cx-primary);
+  --docsearch-soft-primary-color: var(--cx-primary-fg-subtle);
+  --docsearch-subtle-color: var(--cx-border-subtle);
   --docsearch-text-color: var(--cx-fg-main);
-  --docsearch-spacing: var(--cx-space-medium);
-  // --docsearch-icon-stroke-width: 1.4;
-  --docsearch-highlight-color: var(--cx-primary);
-  --docsearch-muted-color: var(--cx-fg-subtle);
+  --docsearch-error-color: var(--cx-danger-fg-main);
+  --docsearch-success-color: var(--cx-success-fg-main);
+  --docsearch-secondary-text-color: var(--cx-fg-subtle);
+  --docsearch-background-color: var(--cx-bg-main);
+  --docsearch-icon-color: var(--cx-fg-subtle);
   --docsearch-container-background: var(--cx-black-dim-main);
   --docsearch-logo-color: var(--cx-primary);
-  // --docsearch-modal-width: 560px;
+  --docsearch-muted-color: var(--cx-fg-subtle);
+  --docsearch-muted-color-darker: var(--cx-fg-slight);
+
+  /* Spacing & Layout */
+  --docsearch-spacing: var(--cx-space-medium);
+  --docsearch-border-radius: var(--cx-border-radius-medium);
+  --docsearch-icon-stroke-width: var(--cx-border-width-medium);
+
+  /* Highlights & Focus */
+  --docsearch-focus-color: var(--cx-primary);
+  --docsearch-highlight-color: var(--cx-primary);
+
+  /* Button */
+  --docsearch-search-button-background: var(--cx-bg-main);
+  --docsearch-search-button-text-color: var(--cx-fg-subtle);
+
+  /* Modal */
+  --docsearch-modal-width: 640px;
   // --docsearch-modal-height: 600px;
+  // --docsearch-modal-variable-height: 60dvh;
   --docsearch-modal-background: var(--cx-bg-even);
-  --docsearch-modal-shadow: var(--cx-box-shadow-large); // inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  --docsearch-modal-shadow: var(--cx-box-shadow-large);
+
+  /* Searchbox */
   // --docsearch-searchbox-height: 56px;
-  --docsearch-searchbox-background: var(--cx-bg-main);
-  --docsearch-searchbox-focus-background: var(--cx-bg-hover);
-  // --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+  // --docsearch-searchbox-initial-height: 56px;
+  --docsearch-searchbox-background: var(--cx-bg-even);
+  --docsearch-searchbox-focus-background: var(--cx-bg-main);
+  // --docsearch-actions-width: 99px;
+  // --docsearch-actions-height: 44px;
+
+  /* Hit */
   // --docsearch-hit-height: 56px;
   --docsearch-hit-color: var(--cx-fg-main);
-  --docsearch-hit-active-color: var(--cx-primary-fg-solid);
+  --docsearch-hit-highlight-color: var(--cx-bg-highlight);
   --docsearch-hit-background: var(--cx-bg-main);
-  --docsearch-hit-shadow: none;
-  // --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
-  // --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
-  // --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 1px 0 rgba(30, 35, 90, .4);
-  // --docsearch-footer-height: 44px;
+
+  /* Key */
+  --docsearch-key-background: var(--cx-bg-main);
+  --docsearch-key-color: var(--cx-fg-subtle);
+  --docsearch-key-pressed-shadow: var(--cx-box-shadow-small);
+
+  /* Footer */
+  --docsearch-footer-height: 52px;
   --docsearch-footer-background: var(--cx-bg-evident);
-  --docsearch-footer-shadow: none; // inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
-}
+  --docsearch-footer-shadow: var(--cx-box-shadow-small);
 
-@include color-mode(dark, true) {
-  // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
-  // in html[data-theme="dark"] selector
-  // and are slightly modified for formatting purpose
-  // --docsearch-text-color: var(--cx-fg-main);
-  // --docsearch-container-background: var(--cx-dim-main);
-  // --docsearch-modal-background: var(--cx-bg-even);
-  // --docsearch-modal-shadow: var(--cx-box-shadow-large); // inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-  // --docsearch-searchbox-background: var(--cx-bg-main, #fc0);
-  // --docsearch-searchbox-focus-background: var(--cx-bg-hover, #fc0);
-  // --docsearch-hit-color: #bec3c9;
-  // --docsearch-hit-shadow: none;
-  // --docsearch-hit-background: #090a11;
-  // --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
-  // --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
-  // --docsearch-footer-background: #1e2136;
-  // --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
-  // --docsearch-muted-color: #7f8497;
+  /* Dropdown Menu */
+  --docsearch-dropdown-menu-background: var(--docsearch-hit-background);
+  --docsearch-dropdown-menu-item-hover-background: var(--docsearch-modal-background);
 }
 
 .cxd-search {
@@ -61,17 +76,11 @@
   }
   @include media-breakpoint-up(2xlarge) {
     left: 50%;
-    width: 280px;
-    margin-left: 12rem;
+    margin-left: 16rem;
   }
-
-
 }
 
 .DocSearch-Container {
-  // --docsearch-muted-color: var(--cx-fg-subtle);
-  // --docsearch-hit-shadow: none;
-
   position: fixed;
   z-index: 2000; // Make sure to be over all components showcased in the documentation
   cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
@@ -82,15 +91,8 @@
 }
 
 .DocSearch-Button {
-  --docsearch-searchbox-background: var(--cx-bg-main);
-  --docsearch-searchbox-color: var(--cx-fg-subtle);
-  --docsearch-searchbox-focus-background: var(--cx-bg-hover);
-  --docsearch-searchbox-shadow: none;
-  --docsearch-text-color: var(--cx-fg-subtle);
-  --docsearch-muted-color: var(--cx-fg-subtle);
-
   width: 100%;
-  height: 38px; // Match Chassis - CSS inputs
+  height: 38px; // Match Chassis inputs
   margin: 0;
   border: var(--cx-border-width-medium) solid var(--cx-border-subtle);
   @include border-radius(var(--cx-border-radius-medium));
@@ -102,8 +104,6 @@
   &:active,
   &:focus,
   &:hover {
-    // border-color: rgba($cxd-accent, 1);
-
     .DocSearch-Search-Icon {
       opacity: 1;
     }
@@ -132,7 +132,7 @@
 
 .DocSearch-Button-Keys {
   min-width: 0;
-  padding: .25rem;
+  padding: .125rem .5rem;
   background: var(--cx-bg-evident);
   @include border-radius(var(--cx-border-radius-small));
 }
@@ -140,31 +140,29 @@
 .DocSearch-Button-Key {
   top: 0;
   width: auto;
-  // height: 1.25rem;
-  padding-right: .125rem;
-  padding-left: .125rem;
-  margin-right: 0;
-  // font-size: .875rem;
+  padding: 0;
+  @include font-size(.875rem);
   background: none;
+  border: 0;
   box-shadow: none;
 }
 
 .DocSearch-Commands-Key {
-  // padding-left: 1px;
-  // font-size: .875rem;
-  // background-color: rgba($black, .1);
-  background-image: none;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  color: var(--cx-icon-subtle);
+  background: none;
   box-shadow: none;
+  @include border-radius(var(--cx-border-radius-small));
+  .DocSearch-Escape-Key {
+    @include font-size(var(--cx-font-size-xsmall));
+  }
 }
 
-.DocSearch-Form {
-  @include border-radius(var(--cx-border-radius));
-}
-
-.DocSearch-Hits {
-  mark {
-    padding: 0;
-  }
+.DocSearch-Action:hover,
+.DocSearch-AskAi-Return:hover {
+  background: none;
 }
 
 .DocSearch-Hit {
@@ -174,12 +172,12 @@
   a {
     @include border-radius(0);
     border: solid var(--cx-border-subtle);
-    border-width: 0 1px 1px;
+    border-width: 0 var(--cx-border-width) var(--cx-border-width);
   }
 
   &:first-child a {
     @include border-top-radius(var(--cx-border-radius));
-    border-top-width: 1px;
+    border-top-width: var(--cx-border-width);
   }
   &:last-child a {
     @include border-bottom-radius(var(--cx-border-radius));
@@ -189,6 +187,22 @@
 .DocSearch-Hit-icon {
   display: flex;
   align-items: center;
+  margin-right: var(--cx-space-xsmall);
+}
+
+.DocSearch-Hit-content-wrapper {
+  gap: 0;
+}
+
+.DocSearch-Hit-action-button:focus,
+.DocSearch-Hit-action-button:hover {
+  color: var(--cx-primary-fg-main);
+  background: none;
+}
+
+.DocSearch-Hit-action-button:focus path,
+.DocSearch-Hit-action-button:hover path {
+  fill: none;
 }
 
 // Fix --docsearch-logo-color that doesn't do anything

package/src/scss/_layout.scss

@@ -23,7 +23,8 @@
 
 .cxd-intro {
   grid-area: intro;
-  margin-top: 2rem;
+  max-width: 960px;
+  margin: 2rem auto 0;
 }
 
 .cxd-main {
@@ -61,12 +62,14 @@
 .cxd-content {
   grid-area: content;
   min-width: 1px; // Fix width when cxd-content contains a `<pre>` https://github.com/chassis-ui/css/issues/25410
-}
-
-.cxd-content,
-.cxd-intro {
-  width: 100%;
   max-width: 960px;
-  margin-right: auto;
-  margin-left: auto;
+  margin: 0 auto;
 }
+
+// .cxd-content,
+// .cxd-intro {
+//   width: 100%;
+//   max-width: 960px;
+//   margin-right: auto;
+//   margin-left: auto;
+// }

package/src/layouts/IconsLayout.astro

@@ -1,25 +0,0 @@
----
-/**
- * Icons Layout
- *
- * Specialized layout for icon documentation pages with scrollspy navigation.
- */
-
-import type { LayoutOverridesHTMLAttributes } from '../libs/layout'
-import BaseLayout from './BaseLayout.astro'
-
-const bodyProps: LayoutOverridesHTMLAttributes<'body'> = {}
-
-bodyProps['id'] = 'icons-body'
-bodyProps['data-cx-spy'] = 'scroll'
-bodyProps['data-cx-target'] = '#icons-nav'
----
-
-<BaseLayout {...Astro.props} layout="icons" overrides={{ body: bodyProps }}>
-  <div
-    slot="main"
-    class="container-2xlarge px-medium px-medium-4xlarge cxd-gutter icon-docs icon-reset pt-medium-large pb-medium-large"
-  >
-    <slot />
-  </div>
-</BaseLayout>