astro-component-kit 0.4.0 → 0.5.0

package/src/mcp/registry-adapter.ts

@@ -0,0 +1,278 @@
+// src/mcp/registry-adapter.ts
+// Direct adapter between Astro Components Kit registry and the MCP server.
+// Whenever components or templates are added to the codebase, this adapter
+// dynamically discovers and exposes them without any manual sync.
+import fs from 'node:fs';
+import path from 'node:path';
+import { components, categories } from '../data/registry/index.js';
+import { templates } from '../data/registry/templates.js';
+import type { ComponentDoc } from '../data/registry/types.js';
+import type { TemplateDoc } from '../data/registry/templates.js';
+import type {
+  ComponentSearchResult,
+  ComponentDetail,
+  CategorySummary,
+  TemplateSummary,
+  LibraryStats,
+} from './types.js';
+
+// Resolve project root
+const ROOT_DIR = process.cwd();
+const PKG_PATH = path.resolve(ROOT_DIR, 'package.json');
+const GLOBAL_CSS_PATH = path.resolve(ROOT_DIR, 'src/styles/global.css');
+
+/**
+ * Returns basic package info from package.json.
+ */
+export function getPackageMeta() {
+  try {
+    const pkgRaw = fs.readFileSync(PKG_PATH, 'utf8');
+    return JSON.parse(pkgRaw);
+  } catch {
+    return { name: 'astro-component-kit', version: '0.5.0' };
+  }
+}
+
+/**
+ * Derives the optimal npm import statement for a component.
+ */
+function getImportStatement(c: ComponentDoc): string {
+  const componentName = c.name.replace(/\s+/g, '');
+  if (c.category === 'sections') {
+    return `import { ${componentName} } from 'astro-component-kit/sections';`;
+  }
+  if (c.category === 'charts') {
+    return `import { ${componentName} } from 'astro-component-kit/charts';`;
+  }
+  if (c.category === 'ecommerce') {
+    return `import { ${componentName} } from 'astro-component-kit/ecommerce';`;
+  }
+  if (c.category === 'app') {
+    return `import { ${componentName} } from 'astro-component-kit/app';`;
+  }
+  return `import { ${componentName} } from 'astro-component-kit/${c.category}';`;
+}
+
+/**
+ * Searches components by text query, category, and tag.
+ */
+export function searchComponents(opts: {
+  query?: string;
+  category?: string;
+  tag?: string;
+  limit?: number;
+}): ComponentSearchResult[] {
+  const query = (opts.query || '').trim().toLowerCase();
+  const targetCategory = opts.category?.trim().toLowerCase();
+  const targetTag = opts.tag?.trim().toLowerCase();
+  const limit = Math.max(1, Math.min(opts.limit || 20, 50));
+
+  let results = components.filter((c) => {
+    if (targetCategory && c.category.toLowerCase() !== targetCategory) {
+      return false;
+    }
+    if (targetTag && !c.tags.some((t) => t.toLowerCase() === targetTag)) {
+      return false;
+    }
+    if (!query) {
+      return true;
+    }
+
+    const inSlug = c.slug.toLowerCase().includes(query);
+    const inName = c.name.toLowerCase().includes(query);
+    const inDesc = c.description.toLowerCase().includes(query);
+    const inTags = c.tags.some((t) => t.toLowerCase().includes(query));
+    return inSlug || inName || inDesc || inTags;
+  });
+
+  // Sort: exact name match first, then featured, then alphabetical
+  if (query) {
+    results.sort((a, b) => {
+      const aExact = a.name.toLowerCase() === query || a.slug.toLowerCase() === query ? 1 : 0;
+      const bExact = b.name.toLowerCase() === query || b.slug.toLowerCase() === query ? 1 : 0;
+      if (aExact !== bExact) return bExact - aExact;
+      if ((a.featured ? 1 : 0) !== (b.featured ? 1 : 0)) return (b.featured ? 1 : 0) - (a.featured ? 1 : 0);
+      return a.name.localeCompare(b.name);
+    });
+  }
+
+  return results.slice(0, limit).map((c) => ({
+    slug: c.slug,
+    name: c.name,
+    category: c.category,
+    description: c.description,
+    tags: c.tags,
+    importPath: `astro-component-kit/${c.category}`,
+    featured: Boolean(c.featured),
+  }));
+}
+
+/**
+ * Retrieves a component by slug with usage, import statement, and documentation.
+ */
+export function getComponent(slug: string): ComponentDetail | null {
+  const c = components.find((item) => item.slug === slug || item.slug.toLowerCase() === slug.toLowerCase());
+  if (!c) return null;
+
+  return {
+    slug: c.slug,
+    name: c.name,
+    category: c.category,
+    description: c.description,
+    tags: c.tags,
+    importStatement: getImportStatement(c),
+    usageExample: c.usage || `--- \n${getImportStatement(c)}\n---\n\n<${c.name.replace(/\s+/g, '')} />`,
+    installationGuide: c.installation?.manual || undefined,
+    codeSnippet: c.code || '',
+  };
+}
+
+/**
+ * Retrieves the full raw Astro source code of a component.
+ */
+export function getComponentCode(slug: string): { slug: string; name: string; code: string } | null {
+  const c = components.find((item) => item.slug === slug || item.slug.toLowerCase() === slug.toLowerCase());
+  if (!c) return null;
+
+  let code = c.code || '';
+
+  // If code is empty or placeholder, attempt to read directly from src/components/lib/
+  if (!code || code.length < 50) {
+    const candidatePaths = [
+      path.resolve(ROOT_DIR, `src/components/lib/${c.category}/${c.name.replace(/\s+/g, '')}.astro`),
+      path.resolve(ROOT_DIR, `src/components/lib/${c.category}/${c.slug}.astro`),
+      path.resolve(ROOT_DIR, `src/components/lib/sections/${c.name.replace(/\s+/g, '')}.astro`),
+    ];
+    for (const p of candidatePaths) {
+      if (fs.existsSync(p)) {
+        try {
+          code = fs.readFileSync(p, 'utf8');
+          break;
+        } catch {
+          // ignore
+        }
+      }
+    }
+  }
+
+  return {
+    slug: c.slug,
+    name: c.name,
+    code,
+  };
+}
+
+/**
+ * Lists all component categories with component counts.
+ */
+export function listCategories(): CategorySummary[] {
+  return categories.map((cat) => {
+    const count = components.filter((c) => c.category === cat.id).length;
+    return {
+      id: cat.id,
+      name: cat.name,
+      description: cat.description,
+      count,
+    };
+  });
+}
+
+/**
+ * Lists all multi-page templates available in the kit.
+ */
+export function listTemplates(): TemplateSummary[] {
+  return templates.map((t) => ({
+    slug: t.slug,
+    name: t.name.en,
+    tagline: t.tagline.en,
+    description: t.description.en,
+    tags: t.tags,
+    importPath: t.importPath,
+    previewUrl: `https://astrocomponents.dev${t.previewBase}`,
+    pageCount: t.pages.length,
+    pages: t.pages.map((p) => ({
+      id: p.id,
+      name: p.name.en,
+      path: p.path,
+      file: p.file,
+    })),
+  }));
+}
+
+/**
+ * Retrieves full details and code for a template.
+ */
+export function getTemplate(slug: string): (TemplateDoc & { previewUrl: string }) | null {
+  const t = templates.find((item) => item.slug === slug || item.slug.toLowerCase() === slug.toLowerCase());
+  if (!t) return null;
+  return {
+    ...t,
+    previewUrl: `https://astrocomponents.dev${t.previewBase}`,
+  };
+}
+
+/**
+ * Retrieves the global design tokens and theme setup guide.
+ */
+export function getDesignTokens(): {
+  cssImport: string;
+  themeToggleSnippet: string;
+  tokensOverview: string;
+  cssSource: string;
+} {
+  let cssSource = '';
+  try {
+    if (fs.existsSync(GLOBAL_CSS_PATH)) {
+      cssSource = fs.readFileSync(GLOBAL_CSS_PATH, 'utf8');
+    }
+  } catch {
+    // ignore
+  }
+
+  return {
+    cssImport: `import 'astro-component-kit/global.css';`,
+    themeToggleSnippet: `<!-- Add data-theme="light" to html or body for light theme -->
+<html lang="en" data-theme="dark">
+  <head>
+    <script is:inline>
+      // Persistent theme toggle script
+      const theme = localStorage.getItem('ack-theme') || 
+        (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+      document.documentElement.setAttribute('data-theme', theme);
+    </script>
+  </head>
+  <body>
+    <!-- components adapt automatically using --ink-rgb, --paper-rgb, --c-on-primary -->
+  </body>
+</html>`,
+    tokensOverview: `Astro Components Kit design tokens:
+- Primary Color: var(--c-primary, #b8860b) and var(--c-primary-light)
+- Text Contrast: var(--c-text-1), var(--c-text-2), var(--c-text-3), var(--c-on-primary)
+- Theme Adaptation: rgb(var(--ink-rgb, 255 255 255) / opacity) for dark, rgb(var(--ink-rgb, 10 10 10) / opacity) for light
+- Backgrounds: var(--c-bg), var(--c-bg-subtle), var(--c-card-bg)
+- Radii: var(--r-sm, 6px), var(--r-md, 12px), var(--r-lg, 18px), var(--r-xl, 24px), var(--r-full, 9999px)
+- Spacing: var(--sp-1) (4px) to var(--sp-20) (80px)
+- SVG Charts: var(--chart-1)...var(--chart-8), var(--chart-pos), var(--chart-neg), var(--chart-grid)`,
+    cssSource,
+  };
+}
+
+/**
+ * Returns overall stats and overview for the library.
+ */
+export function getLibraryStats(): LibraryStats {
+  const pkg = getPackageMeta();
+  const cats = listCategories();
+  return {
+    name: pkg.name || 'astro-component-kit',
+    version: pkg.version || '0.5.0',
+    description: pkg.description || 'A free, open-source accessible UI component library for Astro',
+    totalComponents: components.length,
+    totalCategories: cats.length,
+    totalTemplates: templates.length,
+    homepage: 'https://astrocomponents.dev',
+    npm: 'https://www.npmjs.com/package/astro-component-kit',
+    categories: cats,
+  };
+}
+

package/src/mcp/stdio-server.ts

@@ -0,0 +1,11 @@
+// src/mcp/stdio-server.ts
+// Stdio transport for local execution (e.g. npx astro-component-kit mcp).
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { createMcpServer } from './tools.js';
+
+export async function startStdioServer() {
+  const server = createMcpServer();
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+}
+

package/src/mcp/tools.ts

@@ -0,0 +1,247 @@
+// src/mcp/tools.ts
+// MCP Tools definition for Astro Components Kit.
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { z } from 'zod';
+import {
+  searchComponents,
+  getComponent,
+  getComponentCode,
+  listCategories,
+  listTemplates,
+  getTemplate,
+  getDesignTokens,
+  getLibraryStats,
+} from './registry-adapter.js';
+
+/**
+ * Creates and registers all tools on a new McpServer instance.
+ */
+export function createMcpServer(): McpServer {
+  const stats = getLibraryStats();
+  const server = new McpServer({
+    name: 'astro-components-kit-mcp',
+    version: stats.version,
+  });
+
+  // 1. search_components
+  server.tool(
+    'search_components',
+    'Search for Astro UI components by keyword, category, or tag (e.g. "button", "pricing", "kpi chart", "cart", "modal"). Returns matching components with description and import paths.',
+    {
+      query: z.string().optional().describe('Keyword to search in name, description, slug, or tags'),
+      category: z
+        .string()
+        .optional()
+        .describe(
+          'Filter by category: buttons, cards, forms, feedback, navigation, layout, overlays, data, typography, charts, ecommerce, app, sections'
+        ),
+      tag: z.string().optional().describe('Filter by specific tag, e.g. "glass", "chart", "hero", "table"'),
+      limit: z.number().int().min(1).max(50).optional().describe('Max results to return (default: 20)'),
+    },
+    async (args) => {
+      const results = searchComponents(args);
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify(
+              {
+                totalFound: results.length,
+                components: results,
+              },
+              null,
+              2
+            ),
+          },
+        ],
+      };
+    }
+  );
+
+  // 2. get_component
+  server.tool(
+    'get_component',
+    'Get full details, props interface, usage example, and import statement for a specific Astro component by its slug (e.g. "product-buy-box", "glass-button", "feature-bento-grid").',
+    {
+      slug: z.string().describe('The kebab-case slug of the component (e.g. "kpi-stat-tile", "cart-drawer", "data-table")'),
+    },
+    async ({ slug }) => {
+      const detail = getComponent(slug);
+      if (!detail) {
+        return {
+          isError: true,
+          content: [
+            {
+              type: 'text',
+              text: `Component with slug "${slug}" not found in astro-component-kit. Use the "search_components" tool to find valid slugs.`,
+            },
+          ],
+        };
+      }
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify(detail, null, 2),
+          },
+        ],
+      };
+    }
+  );
+
+  // 3. get_component_code
+  server.tool(
+    'get_component_code',
+    'Get the complete, raw .astro source code of a component ready to be copy-pasted directly into a project without npm.',
+    {
+      slug: z.string().describe('The kebab-case slug of the component (e.g. "line-chart", "glass-button")'),
+    },
+    async ({ slug }) => {
+      const result = getComponentCode(slug);
+      if (!result || !result.code) {
+        return {
+          isError: true,
+          content: [
+            {
+              type: 'text',
+              text: `Could not retrieve source code for component "${slug}". Check the slug using "search_components".`,
+            },
+          ],
+        };
+      }
+      return {
+        content: [
+          {
+            type: 'text',
+            text: result.code,
+          },
+        ],
+      };
+    }
+  );
+
+  // 4. list_categories
+  server.tool(
+    'list_categories',
+    'List all available component and section categories in Astro Components Kit with their descriptions and component counts.',
+    {},
+    async () => {
+      const categories = listCategories();
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify({ categories }, null, 2),
+          },
+        ],
+      };
+    }
+  );
+
+  // 5. list_templates
+  server.tool(
+    'list_templates',
+    'List all multi-page production templates (e.g. E-Commerce Store, Editorial Shop, SaaS Hotel PMS) with page lists and features.',
+    {},
+    async () => {
+      const templates = listTemplates();
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify({ templates }, null, 2),
+          },
+        ],
+      };
+    }
+  );
+
+  // 6. get_template
+  server.tool(
+    'get_template',
+    'Get the complete multi-page template specification, architecture, pages, code, and routing instructions (e.g. "ecommerce", "ecommerce-editorial", "saas-hotel").',
+    {
+      slug: z
+        .string()
+        .describe('Template slug: "ecommerce" (Nova Store), "ecommerce-editorial" (Forma Studio), or "saas-hotel" (The Lobby)'),
+    },
+    async ({ slug }) => {
+      const template = getTemplate(slug);
+      if (!template) {
+        return {
+          isError: true,
+          content: [
+            {
+              type: 'text',
+              text: `Template "${slug}" not found. Valid slugs are: "ecommerce", "ecommerce-editorial", "saas-hotel". Use "list_templates" to inspect them.`,
+            },
+          ],
+        };
+      }
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify(template, null, 2),
+          },
+        ],
+      };
+    }
+  );
+
+  // 7. get_design_tokens
+  server.tool(
+    'get_design_tokens',
+    'Get CSS design tokens, color palette, spacing scale, radii, and dark/light theme switching guide for Astro Components Kit.',
+    {},
+    async () => {
+      const tokens = getDesignTokens();
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify(tokens, null, 2),
+          },
+        ],
+      };
+    }
+  );
+
+  // 8. get_library_info
+  server.tool(
+    'get_library_info',
+    'Get general library overview: active version, total component count, npm install commands, and quickstart guide for Astro developers.',
+    {},
+    async () => {
+      const stats = getLibraryStats();
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify(
+              {
+                ...stats,
+                quickStart: {
+                  install: 'npm install astro-component-kit',
+                  cssImport: "import 'astro-component-kit/global.css';",
+                  recommendedCategoryImports: [
+                    "import { StoreProductCard, CartDrawer } from 'astro-component-kit/ecommerce';",
+                    "import { DataTable, AppSidebar } from 'astro-component-kit/app';",
+                    "import { LineChart, KpiStatTile } from 'astro-component-kit/charts';",
+                    "import { GlassButton } from 'astro-component-kit/buttons';",
+                    "import { FeatureBentoGrid } from 'astro-component-kit/sections';",
+                  ],
+                },
+              },
+              null,
+              2
+            ),
+          },
+        ],
+      };
+    }
+  );
+
+  return server;
+}
+

package/src/mcp/types.ts

@@ -0,0 +1,53 @@
+// src/mcp/types.ts
+export interface ComponentSearchResult {
+  slug: string;
+  name: string;
+  category: string;
+  description: string;
+  tags: string[];
+  importPath: string;
+  featured: boolean;
+}
+
+export interface ComponentDetail {
+  slug: string;
+  name: string;
+  category: string;
+  description: string;
+  tags: string[];
+  importStatement: string;
+  usageExample: string;
+  installationGuide?: string;
+  codeSnippet: string;
+}
+
+export interface CategorySummary {
+  id: string;
+  name: string;
+  description: string;
+  count: number;
+}
+
+export interface TemplateSummary {
+  slug: string;
+  name: string;
+  tagline: string;
+  description: string;
+  tags: string[];
+  importPath: string;
+  previewUrl: string;
+  pageCount: number;
+  pages: Array<{ id: string; name: string; path: string; file: string }>;
+}
+
+export interface LibraryStats {
+  name: string;
+  version: string;
+  description: string;
+  totalComponents: number;
+  totalCategories: number;
+  totalTemplates: number;
+  homepage: string;
+  npm: string;
+  categories: CategorySummary[];
+}

package/src/styles/global.css

@@ -64,11 +64,54 @@
   --r-xl: 28px;
   --r-full: 9999px;
 
+  /* Theme helpers (used by e-commerce components and templates) */
+  --ink-rgb:         255 255 255;  /* foreground for translucent lines/fills */
+  --paper-rgb:       5 5 5;        /* background for translucent surfaces    */
+  --c-on-primary:    #050505;      /* text on primary (gold) buttons         */
+  --c-success:       #34d399;
+  --c-danger:        #f87171;
+  --c-warning:       #fbbf24;
+  color-scheme: dark;
+
   /* Sidebar */
   --sidebar-w: 280px;
   --header-h:  85px;
 }
 
+/* ── Light theme (opt-in: <html data-theme="light">) ──────── */
+[data-theme='light'] {
+  --c-bg:            #f6f5f2;
+  --c-bg-1:          #ffffff;
+  --c-bg-2:          #ecebe6;
+  --c-surface:       rgba(17,17,17,0.025);
+  --c-border:        rgba(17,17,17,0.09);
+
+  --c-primary:       #8a6500;
+  --c-primary-light: #8a6500;
+  --c-primary-glow:  rgba(138,101,0,0.12);
+  --c-accent:        #5c4300;
+
+  --c-text-1:        #121212;
+  --c-text-2:        #4a4a4a;
+  --c-text-3:        #666666;
+
+  --ink-rgb:         17 17 17;
+  --paper-rgb:       255 255 255;
+  --c-on-primary:    #ffffff;
+  --c-success:       #047857;
+  --c-danger:        #b91c1c;
+  --c-warning:       #92400e;
+  --pm-ink-s:        65%;
+  --pm-ink-l:        36%;
+  --pm-soft-s:       35%;
+  --pm-soft-l:       82%;
+  --pm-soft-a:       0.9;
+  --chart-grid:      rgba(17,24,39,0.08);
+  --chart-axis:      rgba(17,24,39,0.22);
+  --chart-surface:   #ffffff;
+  color-scheme: light;
+}
+
 /* ── Base ────────────────────────────────────────────────── */
 html {
   font-family: var(--font-sans);
@@ -157,3 +200,55 @@ body::before {
 .anim-delay-1  { animation-delay: 0.1s; }
 .anim-delay-2  { animation-delay: 0.2s; }
 .anim-delay-3  { animation-delay: 0.3s; }
+
+/* ── Site header: keep every nav link on one line on tablets / small laptops ── */
+@media (min-width: 769px) and (max-width: 1180px) {
+  #site-nav a { padding-inline: 0.55rem; font-size: 0.82rem; }
+  #site-nav .gh-link { font-size: 0; gap: 0; }
+  #site-nav .gh-link svg { width: 18px; height: 18px; }
+}
+@media (min-width: 769px) and (max-width: 960px) {
+  header .docs-header__brand .brand-logo { height: 46px; }
+  #site-nav { gap: 0; }
+  #site-nav a { padding-inline: 0.45rem; font-size: 0.78rem; }
+}
+
+/* ── Light theme adapters for shared components ──────────────
+   Scoped component styles assume a dark surface; these overrides
+   (:root[data-theme='light'] wins on specificity) keep them legible. */
+:root[data-theme='light'] .badge--default { background: rgba(17,17,17,0.06); color: #3f3f3f; border-color: rgba(17,17,17,0.12); }
+:root[data-theme='light'] .badge--success { background: rgba(4,120,87,0.1); color: #047857; border-color: rgba(4,120,87,0.25); }
+:root[data-theme='light'] .badge--warning { background: rgba(146,64,14,0.1); color: #92400e; border-color: rgba(146,64,14,0.25); }
+:root[data-theme='light'] .badge--danger { background: rgba(185,28,28,0.08); color: #b91c1c; border-color: rgba(185,28,28,0.22); }
+:root[data-theme='light'] .badge--info { background: rgba(29,78,216,0.08); color: #1d4ed8; border-color: rgba(29,78,216,0.22); }
+
+:root[data-theme='light'] .cns--glass .cns__box { background: #fff; border-color: rgba(17,17,17,0.08); box-shadow: 0 30px 60px -40px rgba(17,17,17,0.35); }
+:root[data-theme='light'] .cns__icon { background: rgba(17,17,17,0.04); border-color: rgba(17,17,17,0.08); }
+:root[data-theme='light'] .cns__input { background: #fff; border-color: rgba(17,17,17,0.18); }
+:root[data-theme='light'] .cns__btn { background: #121212; color: #fff; }
+:root[data-theme='light'] .cns__btn:hover { background: var(--c-primary); }
+:root[data-theme='light'] .cns__perks svg { color: #047857; }
+
+:root[data-theme='light'] .fms { background: var(--c-bg-1); border-top-color: rgba(17,17,17,0.08); }
+:root[data-theme='light'] .fms__top { border-bottom-color: rgba(17,17,17,0.08); }
+:root[data-theme='light'] .fms__news-field { background: #fff; border-color: rgba(17,17,17,0.16); }
+:root[data-theme='light'] .fms__news-field button { background: rgba(17,17,17,0.05); }
+:root[data-theme='light'] .fms__news-field button:hover { color: #fff; }
+:root[data-theme='light'] .fms__status { border-color: rgba(17,17,17,0.1); }
+
+:root[data-theme='light'] .logo-badge { background: #fff; border-color: rgba(17,17,17,0.08); }
+:root[data-theme='light'] .step-nav__line { background: rgba(17,17,17,0.1); }
+
+:root[data-theme='light'] .anim-input,
+:root[data-theme='light'] .custom-select,
+:root[data-theme='light'] .stepper { background: #fff; border-color: rgba(17,17,17,0.14); }
+:root[data-theme='light'] .radio-circle { border-color: rgba(17,17,17,0.3); background: #fff; }
+
+:root[data-theme='light'] .step-nav__circle { background: #fff; border-color: rgba(17,17,17,0.18); }
+:root[data-theme='light'] .step-nav__item--complete .step-nav__circle { background: rgba(4,120,87,0.1); border-color: #047857; color: #047857; }
+:root[data-theme='light'] .step-nav__item--active .step-nav__circle { color: #fff; background: var(--c-primary); border-color: var(--c-primary); box-shadow: none; }
+:root[data-theme='light'] .status-feed__line { background: rgba(17,24,39,0.1); }
+:root[data-theme='light'] .status-feed__bullet { background: var(--c-bg-1); border-color: rgba(17,24,39,0.16); }
+:root[data-theme='light'] .status-feed__item--done .status-feed__bullet { background: rgba(4,120,87,0.1); border-color: #047857; color: #047857; }
+:root[data-theme='light'] .status-feed__item--active .status-feed__bullet { background: var(--c-primary-glow); border-color: var(--c-primary-light); color: var(--c-primary-light); box-shadow: none; }
+:root[data-theme='light'] .status-feed__content { background: var(--c-bg-1); border-color: rgba(17,24,39,0.08); }