@chassis-ui/docs 0.1.5 → 0.1.6

package/README.md

@@ -23,7 +23,7 @@ pnpm add @chassis-ui/docs
 This package requires the following peer dependencies:
 
 - `@chassis-ui/css`: Chassis CSS framework
-- `@chassis-ui/icons`: Chassis icon library  
+- `@chassis-ui/icons`: Chassis icon library
 - `@chassis-ui/tokens`: Chassis design tokens
 - `astro`: ^4.0.0 || ^5.0.0
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chassis-ui/docs",
   "description": "Shared Astro components and layouts for Chassis documentation sites.",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/DocsSidebar.astro

@@ -1,4 +1,10 @@
 ---
+/**
+ * Docs Sidebar
+ *
+ * Navigation sidebar for documentation pages with hierarchical menu structure.
+ */
+
 import { getData } from '@libs/data'
 import { getConfig } from '@libs/config'
 import { docsPages } from '@libs/content'

package/src/components/FeatureCard.astro

@@ -0,0 +1,64 @@
+---
+/**
+ * Feature Card Component
+ *
+ * A reusable card component for displaying features with icon, title, body, and optional content.
+ *
+ * @slot title - Feature title (required)
+ * @slot body - Feature description (required)
+ * @slot default - Optional additional content (images, code blocks, etc.)
+ */
+
+interface Props {
+  /** Icon ID from the SVG sprite (e.g., "cx-folder-tree") */
+  icon?: string
+  /** Additional CSS classes to apply to the card */
+  classes?: string
+  /** Whether to display the header in horizontal layout (icon + text side by side) */
+  horizontal?: boolean
+}
+
+const { icon, classes, horizontal = false } = Astro.props
+
+// Check if default slot has content without rendering it
+const hasContent = Astro.slots.has('default')
+
+// Build class strings
+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',
+  classes
+]
+  .filter(Boolean)
+  .join(' ')
+
+const headerClasses = [
+  'feature-header d-flex',
+  'gap-medium gap-medium-xlarge',
+  horizontal ? 'flex-column flex-medium-row' : 'flex-column'
+].join(' ')
+---
+
+<div class={cardClasses}>
+  <div class={headerClasses}>
+    {
+      icon && (
+        <div class="feature-thumb">
+          <svg class="icon feature-icon icon-3xlarge icon-medium-4xlarge" aria-hidden="true">
+            <use href={`#${icon}`} />
+          </svg>
+        </div>
+      )
+    }
+    <div>
+      <h3 class="feature-title font-large font-medium-xlarge mb-3xsmall mb-medium-2xsmall">
+        <slot name="title" />
+      </h3>
+      <p class="feature-body font-medium-large mb-0">
+        <slot name="body" />
+      </p>
+    </div>
+  </div>
+  {hasContent && <slot />}
+</div>

package/src/components/NavLink.astro

@@ -1,16 +1,26 @@
 ---
+/**
+ * Nav Link
+ *
+ * Navigation link component with active state support.
+ */
+
 interface Props {
+  /** Whether the link is currently active */
   active?: boolean
+  /** Additional CSS classes */
   class?: string
+  /** Link destination URL */
   href: string
+  /** Link relationship attribute */
   rel?: HTMLAnchorElement['rel']
+  /** Link target attribute */
   target?: HTMLAnchorElement['target']
+  /** Enable analytics tracking */
   track?: boolean
 }
 
-const { active, class: className, track, ...props } = Astro.props
-
-const content = await Astro.slots.render('default')
+const { active, class: className, ...props } = Astro.props
 ---
 
 <li class="nav-item col-6 col-large-auto">

package/src/components/ResponsiveImage.astro

@@ -1,10 +1,22 @@
 ---
+/**
+ * Responsive Image
+ *
+ * Render responsive images with 1x and 2x resolution variants.
+ */
+
 interface Props {
+  /** Path to the image file */
   imgPath: string
+  /** Alternative text for the image */
   alt: string
+  /** Additional CSS classes */
   classes?: string
+  /** Enable lazy loading */
   lazyload?: boolean
+  /** Image width in pixels */
   width?: number
+  /** Image height in pixels */
   height?: number
 }
 

package/src/components/TableOfContents.astro

@@ -1,11 +1,21 @@
 ---
+/**
+ * Table of Contents
+ *
+ * Generate and render a hierarchical table of contents from headings.
+ */
+
 import type { MarkdownHeading } from 'astro'
 import { generateToc, type TocEntry } from '../libs/toc'
 
 interface Props {
+  /** Markdown headings to generate TOC from */
   headings?: MarkdownHeading[]
+  /** Pre-generated TOC entries */
   entries?: TocEntry[]
+  /** Current nesting level */
   level?: number
+  /** TOC generation configuration */
   config?: any
 }
 

package/src/components/ThemeToggler.astro

@@ -1,7 +1,14 @@
 ---
+/**
+ * Theme Toggler
+ *
+ * Button to toggle between light, dark, and auto themes.
+ */
+
 import type { Layout } from '../libs/layout'
 
 interface Props {
+  /** Current layout context */
   layout: Layout
 }
 

package/src/components/shortcodes/AddedIn.astro

@@ -1,9 +1,12 @@
 ---
-/*
- * Outputs badge to identify the first version something was added
+/**
+ * Added In
+ *
+ * Display a badge showing the version when a feature was added.
  */
 
 interface Props {
+  /** Version number when the feature was added */
   version: string
 }
 

package/src/components/shortcodes/Callout.astro

@@ -1,4 +1,10 @@
 ---
+/**
+ * Callout
+ *
+ * Display informational callout boxes with different types (info, danger, warning).
+ */
+
 import { getCalloutByName, type CalloutName } from '@libs/content'
 import { render } from 'astro:content'
 import type { MarkdownInstance } from 'astro'

package/src/components/shortcodes/CxTable.astro

@@ -1,4 +1,10 @@
 ---
+/**
+ * CxTable
+ *
+ * Wrapper component for responsive tables.
+ */
+
 interface Props {
   /**
    * The CSS class to apply to the table.

package/src/layouts/BaseLayout.astro

@@ -1,4 +1,10 @@
 ---
+/**
+ * Base Layout
+ *
+ * Main layout wrapper for all pages with configurable HTML attributes and layout modes.
+ */
+
 import type { CollectionEntry } from 'astro:content'
 import { getConfig } from '@libs/config'
 import type { Layout, LayoutOverridesHTMLAttributes } from '../libs/layout'

package/src/layouts/DocsLayout.astro

@@ -1,4 +1,10 @@
 ---
+/**
+ * Docs Layout
+ *
+ * Layout for documentation pages with sidebar navigation and table of contents.
+ */
+
 import type { MarkdownHeading } from 'astro'
 import type { CollectionEntry } from 'astro:content'
 import { getConfig } from '@libs/config'
@@ -10,8 +16,11 @@ import DocsSidebar from '../components/DocsSidebar.astro'
 import TableOfContents from '../components/TableOfContents.astro'
 
 interface Props {
+  /** Frontmatter data from the docs collection */
   frontmatter: CollectionEntry<'docs'>['data']
+  /** Markdown headings for table of contents */
   headings?: MarkdownHeading[]
+  /** Document ID from the docs collection */
   id: CollectionEntry<'docs'>['id']
 }
 
@@ -23,6 +32,7 @@ const parentDirectory = id.includes('/') ? id.split('/')[0] : ''
 const bodyProps: LayoutOverridesHTMLAttributes<'body'> = {}
 
 if (frontmatter.toc) {
+  bodyProps['class'] = 'docs-body'
   bodyProps['data-cx-spy'] = 'scroll'
   bodyProps['data-cx-target'] = '#TableOfContents'
 }

package/src/layouts/IconsLayout.astro

@@ -1,4 +1,10 @@
 ---
+/**
+ * Icons Layout
+ *
+ * Specialized layout for icon documentation pages with scrollspy navigation.
+ */
+
 import type { LayoutOverridesHTMLAttributes } from '../libs/layout'
 import BaseLayout from './BaseLayout.astro'
 

package/src/layouts/RedirectLayout.astro

@@ -1,7 +1,14 @@
 ---
+/**
+ * Redirect Layout
+ *
+ * Minimal layout for redirect pages with meta refresh.
+ */
+
 import { getConfig } from '@libs/config'
 
 interface Props {
+  /** Destination path for the redirect */
   path: string
 }
 

package/src/layouts/SingleLayout.astro

@@ -1,8 +1,16 @@
 ---
+/**
+ * Single Layout
+ *
+ * Simple single-column layout for standalone pages.
+ */
+
 import BaseLayout from './BaseLayout.astro'
 
 interface Props {
+  /** Page description */
   description: string
+  /** Page title */
   title: string
 }
 

package/src/layouts/footer/Footer.astro

@@ -1,9 +1,13 @@
 ---
-
+/**
+ * Footer
+ *
+ * Site footer with logo, license information, and navigation links.
+ */
 ---
 
 <footer class="cxd-footer py-6xlarge">
-  <div class="container-fluid fg-subtle">
+  <div class="container-2xlarge fg-subtle">
     <div class="row">
       <div class="col-medium-10 col-large-5 mb-medium">
         <a
@@ -21,29 +25,30 @@
       <div class="col-small-4 col-large-2 offset-large-1 mb-medium">
         <h5>Docs</h5>
         <ul class="nav">
-          <li><a href="/docs/css">CSS Framework</a></li>
-          <li><a href="/docs/tokens">Design Tokens</a></li>
-          <li><a href="/docs/assets">Asset Distributor</a></li>
-          <li><a href="/docs/icons">Icon Generator</a></li>
-          <li><a href="/docs/figma">Figma Library</a></li>
+          <li><a href="/tokens">Design Tokens</a></li>
+          <li><a href="/assets">Asset Distributor</a></li>
+          <li><a href="/figma">Figma Library</a></li>
+          <li><a href="/css">CSS Framework</a></li>
+          <li><a href="/icons">Icon Generator</a></li>
         </ul>
       </div>
       <div class="col-small-4 col-large-2 mb-medium">
         <h5>Github</h5>
         <ul class="nav">
-          <li><a href="/docs/css">Chassis - CSS</a></li>
-          <li><a href="/docs/tokens">Chassis - Tokens</a></li>
-          <li><a href="/docs/assets">Chassis - Assets</a></li>
-          <li><a href="/docs/icons">Chassis - Icons</a></li>
+          <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>
+          <li><a href="https://github.com/chassis-ui/figma">Chassis Figma</a></li>
+          <li><a href="https://github.com/chassis-ui/css">Chassis CSS</a></li>
+          <li><a href="https://github.com/chassis-ui/icons">Chassis Icons</a></li>
         </ul>
       </div>
       <div class="col-small-4 col-large-2 mb-medium">
         <h5>About</h5>
         <ul class="nav">
-          <li><a href="/docs/css">Chassis UI</a></li>
-          <li><a href="/docs/css">Developer</a></li>
-          <li><a href="/docs/tokens">Blog</a></li>
-          <li><a href="/docs/assets">Contribute</a></li>
+          <li><a href="/blog">Blog</a></li>
+          <li><a href="https://x.com/chassis_ui">Chassis UI</a></li>
+          <li><a href="https://github.com/chassis-ui">Contribute</a></li>
+          <li><a href="https://github.com/ozgurgunes">Developer</a></li>
         </ul>
       </div>
     </div>

package/src/layouts/footer/Scripts.astro

@@ -1,8 +1,15 @@
 ---
+/**
+ * Scripts
+ *
+ * JavaScript imports for site functionality.
+ */
+
 import { getChassisJsProps } from '../../libs/chassis'
 import type { Layout } from '../../libs/layout'
 
 interface Props {
+  /** Current layout context */
   layout: Layout
 }
 

package/src/layouts/head/Analytics.astro

@@ -1,13 +1,14 @@
 ---
+/**
+ * Analytics
+ *
+ * Analytics script tags for Fathom and Google Analytics.
+ */
+
 import { getConfig } from '@libs/config'
 const googleId = getConfig().analytics.google_id
 ---
 
-<script
-  is:inline
-  defer
-  src="https://cdn.usefathom.com/script.js"
-  data-site={getConfig().analytics.fathom_site}></script>
 <!-- Google tag (gtag.js) -->
 <script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${googleId}`}></script>
 <script

package/src/layouts/head/Favicons.astro

@@ -1,4 +1,10 @@
 ---
+/**
+ * Favicons
+ *
+ * Favicon and app icon link tags for various platforms.
+ */
+
 // <meta name="theme-color" content="#00A4CC" />
 ---
 

package/src/layouts/head/Head.astro

@@ -1,4 +1,10 @@
 ---
+/**
+ * Head
+ *
+ * HTML head section with meta tags, stylesheets, and SEO configuration.
+ */
+
 import { getConfig } from '@libs/config'
 import type { Layout } from '../../libs/layout'
 import Stylesheet from './Stylesheet.astro'
@@ -8,11 +14,17 @@ import Analytics from './Analytics.astro'
 import '@scss/docs.scss'
 
 interface Props {
+  /** Page description for meta tags */
   description: string
+  /** Text direction (for RTL languages) */
   direction?: 'rtl'
+  /** Current layout context */
   layout: Layout
+  /** Robots meta tag value */
   robots: string | undefined
+  /** Social media thumbnail image */
   thumbnail: string
+  /** Page title */
   title: string
 }
 

package/src/layouts/head/Social.astro

@@ -1,4 +1,10 @@
 ---
+/**
+ * Social
+ *
+ * Social media meta tags (Open Graph, Twitter Cards).
+ */
+
 import path from 'node:path'
 import { getConfig } from '@libs/config'
 import { getDocsPublicFsPath } from '@libs/path'
@@ -6,9 +12,13 @@ import { getStaticImageSize } from '../../libs/image'
 import type { Layout } from '../../libs/layout'
 
 interface Props {
+  /** Page description */
   description: string
+  /** Current layout context */
   layout: Layout
+  /** Social media thumbnail image */
   thumbnail: string
+  /** Page title */
   title: string
 }
 

package/src/layouts/head/Stylesheet.astro

@@ -1,9 +1,17 @@
 ---
+/**
+ * Stylesheet
+ *
+ * Stylesheet link tags for external CSS resources.
+ */
+
 import { getChassisCssProps } from '../../libs/chassis'
 import type { Layout } from '../../libs/layout'
 
 interface Props {
+  /** Text direction (for RTL languages) */
   direction?: 'rtl'
+  /** Current layout context */
   layout: Layout
 }
 

package/src/layouts/header/Header.astro

@@ -1,17 +1,25 @@
 ---
+/**
+ * Header
+ *
+ * Site header with navigation and page title.
+ */
+
 import type { CollectionEntry } from 'astro:content'
 import type { Layout } from '../../libs/layout'
 import Skippy from './Skippy.astro'
 import Navigation from './Navigation.astro'
 
 interface Props {
+  /** Version when the feature was added */
   addedIn?: CollectionEntry<'docs'>['data']['added']
+  /** Current layout context */
   layout: Layout
+  /** Page title */
   title: string
 }
 
-const { addedIn, layout, title } = Astro.props
-const { pathname } = Astro.url
+const { layout, title } = Astro.props
 ---
 
 <Skippy layout={layout} />

package/src/layouts/header/Navigation.astro

@@ -1,21 +1,27 @@
 ---
+/**
+ * Navigation
+ *
+ * Main site navigation bar with menu items and theme toggler.
+ */
+
 import { getConfig } from '@libs/config'
 import type { Layout } from '../../libs/layout'
 import NavLink from '../../components/NavLink.astro'
 import ThemeToggler from '../../components/ThemeToggler.astro'
-import NavDocsMenu from '../../components/NavDocsMenu.astro'
 
 interface Props {
+  /** Current layout context */
   layout: Layout
+  /** Page title for the navbar */
   title: string
 }
 
 const { layout, title } = Astro.props
-const { pathname } = Astro.url
 ---
 
 <header class="navbar navbar-expand-large cxd-navbar sticky-top">
-  <nav class="container-fluid" aria-label="Main navigation">
+  <nav class="container-2xlarge" aria-label="Main navigation">
     {
       layout === 'docs' && (
         <div class="cxd-navbar-toggle">
@@ -75,14 +81,25 @@ const { pathname } = Astro.url
       <div class="offcanvas-body p-large pt-0 p-large-0">
         <hr class="d-large-none text-white-50" />
         <ul class="navbar-nav flex-row flex-wrap cxd-navbar-nav mx-0 mx-large-medium">
-          <NavLink active={pathname.slice(1) === ''} href="/" track>Home</NavLink>
-          <li class="nav-item dropdown">
-            <NavDocsMenu layout={layout} />
-          </li>
-          <NavLink active={layout === 'icons'} href="/icons" track>Icons</NavLink>
+          <NavLink active={layout === 'docs'} href="/docs" track>Docs</NavLink>
           <NavLink active={title === 'Tokens'} href="/tokens" track>Tokens</NavLink>
-          <NavLink active={title === 'Examples'} href={'/examples/'} track>Examples</NavLink>
-          <NavLink active={layout === 'blog'} href={'/blog/'} track>Blog</NavLink>
+          <NavLink active={title === 'Assets'} href="/assets" track>Assets</NavLink>
+          <NavLink active={title === 'Figma'} href="/figma" track>Figma</NavLink>
+          <NavLink active={layout === 'icons'} href="/icons" track>Icons</NavLink>
+          <NavLink active={title === 'CSS'} href="/css" track>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>
+          </li>
         </ul>
 
         <hr class="d-large-none" />

package/src/layouts/header/Skippy.astro

@@ -1,7 +1,14 @@
 ---
+/**
+ * Skippy
+ *
+ * Skip navigation link for accessibility.
+ */
+
 import type { Layout } from '../../libs/layout'
 
 interface Props {
+  /** Current layout context */
   layout: Layout
 }
 

package/src/libs/layout.ts

@@ -3,5 +3,5 @@ import type { HTMLAttributes, HTMLTag } from 'astro/types'
 export type Layout = 'docs' | 'icons' | 'examples' | 'single' | 'blog' | undefined
 
 export type LayoutOverridesHTMLAttributes<TTag extends HTMLTag> = HTMLAttributes<TTag> & {
-  [key in `data-${string}`]: string
+  [key in `data-${string}`]: string //eslint-disable-line no-unused-vars
 }

package/src/scss/_docsearch.scss

@@ -35,10 +35,10 @@
     right: 12rem;
     width: 200px;
   }
-  @include media-breakpoint-up(xlarge) {
-    // left: 50%;
+  @include media-breakpoint-up(2xlarge) {
+    left: 50%;
     width: 280px;
-    // margin-left: 12rem;
+    margin-left: 12rem;
   }
 
 

package/src/scss/_settings.scss

@@ -26,12 +26,3 @@ $enable-table-font-tokens:      true !default;
 $enable-transitions:            true !default;
 $enable-validation-icons:       true !default;
 $enable-visited-links:          false !default;
-
-//
-// Icons
-//
-$icon-url-prefix:                "/icons/svgs/" !default;
-$icon-url-suffix:                ".svg" !default;
-
-// Import tokens from the Chassis Tokens package
-// @import "../node_modules/@chassis-ui/tokens/dist/tokens/web/chassis-docs/allTokens";

package/src/scss/_syntax.scss

@@ -1,40 +1,42 @@
 :root,
 [data-cx-theme="light"] {
-  // --base00: #fff;
-  // --base01: #f5f5f5;
-  --base02: #c8c8fa;
-  --base03: #565c64;
-  --base04: #666;
-  --base05: #333;
-  --base06: #fff;
-  --base07: #{$teal-700}; // #9a6700
-  --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
-  --base09: #{$cyan-700}; // #087990
-  --base0A: #{$purple-500}; // #795da3
-  --base0B: #{$blue-700}; // #183691
-  --base0C: #{$blue-700}; // #183691
-  --base0D: #{$purple-500}; // #795da3
-  --base0E: #{$pink-600}; // #a71d5d
-  --base0F: #333;
+  // GitHub Light Theme
+  --base00: #fff;
+  --base01: #f6f8fa;
+  --base02: #e1e4e8;
+  --base03: #6a737d; // Comments
+  --base04: #586069;
+  --base05: #24292e; // Default text
+  --base06: #24292e;
+  --base07: #22863a; // Tags/Classes
+  --base08: #d73a49; // Keywords/Important
+  --base09: #005cc5; // Numbers/Properties
+  --base0A: #005cc5; // Variables
+  --base0B: #6f42c1; // Functions
+  --base0C: #032f62; // Strings
+  --base0D: #6f42c1; // Attributes
+  --base0E: #d73a49; // Keywords
+  --base0F: #e36209; // References
 }
 
 @include color-mode(dark, true) {
-  // --base00: #282c34;
-  // --base01: #353b45;
-  --base02: #3e4451;
-  --base03: #868e96;
-  --base04: #868e96;
-  --base05: #abb2bf;
-  --base06: #b6bdca;
-  --base07: #{$orange-300}; // #d19a66
-  --base08: #{$cyan-300};
-  --base09: #{$orange-300}; // #d19a66
-  --base0A: #{$yellow-200}; // #e5c07b
-  --base0B: #{$teal-300}; // #98c379
-  --base0C: #{$teal-300}; // #56b6c2
-  --base0D: #{$blue-300}; // #61afef
-  --base0E: #{$indigo-200}; // #c678dd
-  --base0F: #{$red-300}; // #be5046
+  // GitHub Dark Theme
+  --base00: #0d1117;
+  --base01: #161b22;
+  --base02: #21262d;
+  --base03: #8b949e; // Comments
+  --base04: #6e7681;
+  --base05: #c9d1d9; // Default text
+  --base06: #c9d1d9;
+  --base07: #7ee787; // Tags/Classes
+  --base08: #ff7b72; // Keywords/Important
+  --base09: #79c0ff; // Numbers/Properties
+  --base0A: #79c0ff; // Variables
+  --base0B: #d2a8ff; // Functions
+  --base0C: #a5d6ff; // Strings
+  --base0D: #d2a8ff; // Attributes
+  --base0E: #ff7b72; // Keywords
+  --base0F: #ffa657; // References
 }
 
 // Shell prompts

package/src/scss/main.scss

@@ -5,7 +5,7 @@
 @import "fonts";
 
 @import "navbar";
-@import "masthead";
+// @import "masthead";
 @import "content";
 @import "skippy";
 @import "sidebar";
@@ -27,11 +27,76 @@
 @import "docsearch";
 
 /* Hide light-mode things when in dark mode */
-[data-cx-theme="dark"] .display-light {
-  display: none;
+.visible-light {
+  [data-cx-theme="dark"] &:not([data-cx-theme="dark"] [data-cx-theme="light"] &) {
+    display: none;
+  }
 }
 
 /* Hide dark-mode things when in light mode */
-[data-cx-theme="light"] .display-dark {
-  display: none;
+.visible-dark {
+  [data-cx-theme="light"] &:not([data-cx-theme="light"] [data-cx-theme="dark"] &) {
+    display: none;
+  }
+}
+
+.docs-body .navbar,
+.docs-body .cxd-footer {
+  .container-2xlarge {
+    max-width: 100%;
+  }
+  .cxd-search {
+    @include media-breakpoint-up(2xlarge) {
+      right: 12rem;
+      left: auto;
+    }
+  }
+}
+
+.home-section {
+  overflow: hidden;
+}
+
+.section-content:has(.gallery-image) > div {
+  height: var(--gallery-image-height, 256px);
+  border: var(--#{$prefix}border-width-medium) solid var(--#{$prefix}bg-evident);
+}
+
+.gallery-image {
+  display: flex;
+  align-items: center;
+
+  @include media-breakpoint-down(medium) {
+    margin-top: -25%;
+  }
+
+  > img {
+    vertical-align: middle;
+    zoom: 1.5;
+    transform: rotate(30deg) skewX(-30deg) scaleY(.866);
+  }
+}
+
+.feature-item .cxd-code-snippet {
+  --cxicon-color: var(--#{$prefix}fg-color);
+  --cx-icon-size: 1em;
+  margin-bottom: 0;
+  background-color: var(--#{$prefix}bg-even);
+  border: 0;
+
+  .highlight {
+    padding: var(--#{$prefix}space-medium);
+    background-color: var(--#{$prefix}bg-even);
+  }
+  pre {
+    padding: 0;
+    margin: 0;
+  }
+  > .cxd-clipboard {
+    display: none;
+  }
+
+  .token.comment {
+    color: var(--#{$prefix}fg-subtle);
+  }
 }

package/src/components/Card.astro

@@ -1,19 +0,0 @@
----
-const { title, body, icon } = Astro.props
----
-
-<div class="card large border-0">
-  <div class="card-content">
-    {
-      icon && (
-        <svg class="icon card-icon icon-4xlarge mb-medium">
-          <use xlink:href={`#${icon}`} />
-        </svg>
-      )
-    }
-    <h4 class="card-title">{title}</h4>
-    <p class="card-body">
-      {body}
-    </p>
-  </div>
-</div>

package/src/components/NavDocsMenu.astro

@@ -1,26 +0,0 @@
----
-import type { Layout } from '../libs/layout'
-
-interface Props {
-  layout: Layout
-}
-
-const { layout } = Astro.props
----
-
-<a
-  class="nav-link dropdown-toggle"
-  href="/docs"
-  role="button"
-  data-cx-toggle="dropdown"
-  aria-expanded="false">Docs</a
->
-<ul class="dropdown-menu">
-  <li><a class="dropdown-item" href="/css">CSS</a></li>
-  <li><a class="dropdown-item" href="/tokens">Tokens</a></li>
-  <li><a class="dropdown-item" href="/icons">Icons</a></li>
-  <li><a class="dropdown-item" href="/figma">Figma</a></li>
-  <li><a class="dropdown-item" href="/assets">Assets</a></li>
-  <li><hr class="dropdown-separator" /></li>
-  <li><a class="dropdown-item" href="/docs">Docs Index</a></li>
-</ul>