@specglass/theme-default 0.0.9 → 0.0.11

package/src/components/ApiParameters.astro

@@ -1,7 +1,8 @@
 ---
 /**
- * ApiParameters.astro — Displays endpoint parameters and request body.
- * Groups parameters by location (path, query, header, cookie) with type rendering.
+ * ApiParameters.astro — Displays endpoint parameters and request body schemas.
+ * Shows path, query, header, and cookie parameters in a table format,
+ * plus request body content schemas when present.
  */
 import type { ApiParameter, ApiRequestBody } from "@specglass/core";
 import { renderTypeString, flattenSchemaProperties } from "../utils/schema-renderer";
@@ -13,192 +14,142 @@ export interface Props {
 
 const { parameters, requestBody } = Astro.props;
 
-// Group parameters by location
-const paramGroups: { label: string; key: string; params: ApiParameter[] }[] = [
-  { label: "Path Parameters", key: "path", params: [] },
-  { label: "Query Parameters", key: "query", params: [] },
-  { label: "Header Parameters", key: "header", params: [] },
-  { label: "Cookie Parameters", key: "cookie", params: [] },
-];
+const parametersByLocation = {
+  path: parameters.filter((p) => p.in === "path"),
+  query: parameters.filter((p) => p.in === "query"),
+  header: parameters.filter((p) => p.in === "header"),
+  cookie: parameters.filter((p) => p.in === "cookie"),
+};
 
-for (const param of parameters) {
-  const group = paramGroups.find((g) => g.key === param.in);
-  if (group) {
-    group.params.push(param);
-  }
-}
-
-const nonEmptyGroups = paramGroups.filter((g) => g.params.length > 0);
-const hasParameters = nonEmptyGroups.length > 0;
-const hasRequestBody = !!requestBody;
-
-// Process request body content types
-const requestBodyEntries = requestBody?.content ? Object.entries(requestBody.content) : [];
+const locationLabels: Record<string, string> = {
+  path: "Path Parameters",
+  query: "Query Parameters",
+  header: "Header Parameters",
+  cookie: "Cookie Parameters",
+};
 ---
 
+{/* Parameter tables by location */}
 {
-  (hasParameters || hasRequestBody) && (
-    <div class="mb-8">
-      {/* Parameter groups */}
-      {nonEmptyGroups.map((group) => (
+  Object.entries(parametersByLocation).map(
+    ([location, params]) =>
+      params.length > 0 && (
         <div class="mb-6">
           <h3 class="text-sm font-semibold text-text-muted uppercase tracking-wider mb-3">
-            {group.label}
+            {locationLabels[location]}
           </h3>
           <div class="border border-border rounded-lg overflow-hidden">
             <table class="w-full text-sm">
               <thead>
-                <tr class="bg-surface-raised border-b border-border">
-                  <th class="text-left px-4 py-2.5 text-text-muted font-medium w-1/4">Name</th>
-                  <th class="text-left px-4 py-2.5 text-text-muted font-medium w-1/5">Type</th>
-                  <th class="text-left px-4 py-2.5 text-text-muted font-medium w-20">Required</th>
-                  <th class="text-left px-4 py-2.5 text-text-muted font-medium">Description</th>
+                <tr class="border-b border-border/50 bg-surface-raised">
+                  <th class="text-left px-3 py-2 text-text-muted font-medium text-xs w-1/4">
+                    Name
+                  </th>
+                  <th class="text-left px-3 py-2 text-text-muted font-medium text-xs w-1/5">
+                    Type
+                  </th>
+                  <th class="text-left px-3 py-2 text-text-muted font-medium text-xs">
+                    Description
+                  </th>
                 </tr>
               </thead>
-              <tbody class="divide-y divide-border">
-                {group.params.map((param) => (
-                  <tr class="hover:bg-surface-raised/50 transition-colors">
-                    <td class="px-4 py-3">
-                      <code class="text-xs font-mono text-text font-semibold">{param.name}</code>
-                    </td>
-                    <td class="px-4 py-3">
-                      <code class="text-xs font-mono text-text-muted">
-                        {renderTypeString(param.schema)}
-                      </code>
-                      {param.schema?.enum && param.schema.enum.length > 0 && (
-                        <div class="mt-1 flex flex-wrap gap-1">
-                          {param.schema.enum.map((val) => (
-                            <span class="inline-block px-1.5 py-0.5 text-xs rounded bg-surface-raised text-text-muted font-mono">
-                              {String(val)}
-                            </span>
-                          ))}
-                        </div>
-                      )}
-                    </td>
-                    <td class="px-4 py-3">
-                      {param.required ? (
-                        <span class="inline-flex px-2 py-0.5 rounded text-xs font-medium bg-red-500/15 text-red-400 border border-red-500/30">
+              <tbody class="divide-y divide-border/30">
+                {params.map((param) => (
+                  <tr class="even:bg-surface-1">
+                    <td class="px-3 py-2">
+                      <code class="text-xs font-mono text-text">{param.name}</code>
+                      {param.required && (
+                        <span class="ml-1.5 text-[0.625rem] font-semibold text-red-500 uppercase">
                           required
                         </span>
-                      ) : (
-                        <span class="inline-flex px-2 py-0.5 rounded text-xs font-medium bg-surface-raised text-text-muted">
-                          optional
-                        </span>
                       )}
                     </td>
-                    <td class="px-4 py-3 text-text-muted text-xs">
-                      {param.description || "—"}
-                      {param.example !== undefined && (
-                        <div class="mt-1 text-text-muted/60">
-                          Example:{" "}
-                          <code class="text-xs font-mono">{JSON.stringify(param.example)}</code>
-                        </div>
-                      )}
+                    <td class="px-3 py-2">
+                      <code class="text-xs font-mono text-text-muted">
+                        {renderTypeString(param.schema)}
+                      </code>
                     </td>
+                    <td class="px-3 py-2 text-text-muted text-xs">{param.description || "—"}</td>
                   </tr>
                 ))}
               </tbody>
             </table>
           </div>
         </div>
-      ))}
+      ),
+  )
+}
 
-      {/* Request Body */}
-      {hasRequestBody && (
-        <div class="mb-6">
-          <h3 class="text-sm font-semibold text-text-muted uppercase tracking-wider mb-3">
-            Request Body
-            {requestBody!.required && (
-              <span class="ml-2 inline-flex px-2 py-0.5 rounded text-xs font-medium bg-red-500/15 text-red-400 border border-red-500/30">
-                required
+{/* Request Body */}
+{
+  requestBody && (
+    <div class="mb-6">
+      <h3 class="text-sm font-semibold text-text-muted uppercase tracking-wider mb-3">
+        Request Body
+        {requestBody.required && (
+          <span class="ml-1.5 text-[0.625rem] font-semibold text-red-500 uppercase">required</span>
+        )}
+      </h3>
+      {requestBody.description && (
+        <p class="text-sm text-text-muted mb-3">{requestBody.description}</p>
+      )}
+      {Object.entries(requestBody.content).map(([contentType, mediaType]) => {
+        const bodyProperties = flattenSchemaProperties(
+          mediaType.schema,
+          mediaType.schema?.required,
+        );
+        return (
+          <div class="border border-border rounded-lg overflow-hidden mb-3">
+            <div class="flex items-center gap-2 px-4 py-2 bg-surface-raised border-b border-border">
+              <span class="text-xs font-mono text-text-muted px-2 py-0.5 rounded bg-surface-raised border border-border">
+                {contentType}
               </span>
-            )}
-          </h3>
-          {requestBody!.description && (
-            <p class="text-text-muted text-xs mb-3">{requestBody!.description}</p>
-          )}
-
-          {requestBodyEntries.map(([contentType, mediaType]) => {
-            const bodyProperties = flattenSchemaProperties(
-              mediaType.schema,
-              mediaType.schema?.required,
-            );
-            return (
-              <div class="mb-4">
-                <div class="flex items-center gap-2 mb-2">
-                  <span class="text-xs font-mono text-text-muted px-2 py-0.5 rounded bg-surface-raised border border-border">
-                    {contentType}
-                  </span>
-                </div>
-                {bodyProperties.length > 0 ? (
-                  <div class="border border-border rounded-lg overflow-hidden">
-                    <table class="w-full text-sm">
-                      <thead>
-                        <tr class="bg-surface-raised border-b border-border">
-                          <th class="text-left px-4 py-2.5 text-text-muted font-medium w-1/4">
-                            Field
-                          </th>
-                          <th class="text-left px-4 py-2.5 text-text-muted font-medium w-1/5">
-                            Type
-                          </th>
-                          <th class="text-left px-4 py-2.5 text-text-muted font-medium w-20">
-                            Required
-                          </th>
-                          <th class="text-left px-4 py-2.5 text-text-muted font-medium">
-                            Description
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody class="divide-y divide-border">
-                        {bodyProperties.map((prop) => (
-                          <tr class="hover:bg-surface-raised/50 transition-colors">
-                            <td class:list={["px-4 py-3", prop.depth > 0 && "pl-8"]}>
-                              <code class="text-xs font-mono text-text font-semibold">
-                                {prop.depth > 0 && <span class="text-text-muted/40 mr-1">↳</span>}
-                                {prop.name}
-                              </code>
-                            </td>
-                            <td class="px-4 py-3">
-                              <code class="text-xs font-mono text-text-muted">{prop.type}</code>
-                              {prop.enumValues && prop.enumValues.length > 0 && (
-                                <div class="mt-1 flex flex-wrap gap-1">
-                                  {prop.enumValues.map((val) => (
-                                    <span class="inline-block px-1.5 py-0.5 text-xs rounded bg-surface-raised text-text-muted font-mono">
-                                      {val}
-                                    </span>
-                                  ))}
-                                </div>
-                              )}
-                            </td>
-                            <td class="px-4 py-3">
-                              {prop.required ? (
-                                <span class="inline-flex px-2 py-0.5 rounded text-xs font-medium bg-red-500/15 text-red-400 border border-red-500/30">
-                                  required
-                                </span>
-                              ) : (
-                                <span class="inline-flex px-2 py-0.5 rounded text-xs font-medium bg-surface-raised text-text-muted">
-                                  optional
-                                </span>
-                              )}
-                            </td>
-                            <td class="px-4 py-3 text-text-muted text-xs">
-                              {prop.description || "—"}
-                            </td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </div>
-                ) : (
-                  <div class="border border-border rounded-lg p-4 text-text-muted text-xs">
-                    <code class="font-mono">{renderTypeString(mediaType.schema)}</code>
-                  </div>
-                )}
+            </div>
+            {bodyProperties.length > 0 ? (
+              <table class="w-full text-sm">
+                <thead>
+                  <tr class="border-b border-border/50">
+                    <th class="text-left px-3 py-2 text-text-muted font-medium text-xs w-1/4">
+                      Field
+                    </th>
+                    <th class="text-left px-3 py-2 text-text-muted font-medium text-xs w-1/5">
+                      Type
+                    </th>
+                    <th class="text-left px-3 py-2 text-text-muted font-medium text-xs">
+                      Description
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-border/30">
+                  {bodyProperties.map((prop) => (
+                    <tr class="even:bg-surface-1">
+                      <td class:list={["px-3 py-2", prop.depth > 0 && "pl-6"]}>
+                        <code class="text-xs font-mono text-text">
+                          {prop.depth > 0 && <span class="text-text-muted/40 mr-1">↳</span>}
+                          {prop.name}
+                        </code>
+                        {prop.required && (
+                          <span class="ml-1.5 text-[0.625rem] font-semibold text-red-500 uppercase">
+                            required
+                          </span>
+                        )}
+                      </td>
+                      <td class="px-3 py-2">
+                        <code class="text-xs font-mono text-text-muted">{prop.type}</code>
+                      </td>
+                      <td class="px-3 py-2 text-text-muted text-xs">{prop.description || "—"}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            ) : (
+              <div class="px-4 py-3 text-text-muted text-xs">
+                <code class="font-mono">{renderTypeString(mediaType.schema)}</code>
               </div>
-            );
-          })}
-        </div>
-      )}
+            )}
+          </div>
+        );
+      })}
     </div>
   )
 }

package/src/components/ApiResponse.astro

@@ -79,7 +79,7 @@ function getStatusColor(code: string): string {
                         </thead>
                         <tbody class="divide-y divide-border/30">
                           {bodyProperties.map((prop) => (
-                            <tr>
+                            <tr class="even:bg-surface-1">
                               <td class:list={["px-3 py-2", prop.depth > 0 && "pl-6"]}>
                                 <code class="text-xs font-mono text-text">
                                   {prop.depth > 0 && <span class="text-text-muted/40 mr-1">↳</span>}

package/src/components/Callout.astro

@@ -3,7 +3,7 @@
  * Callout component — renders styled callout boxes for documentation.
  *
  * Supports types: info, warning, danger, tip — each with distinct
- * icon, background color, and left border color.
+ * SVG icon, background color, and left border color.
  *
  * @example
  * <Callout type="warning">This is a warning</Callout>
@@ -16,39 +16,80 @@ export interface Props {
 
 const { type = "info" } = Astro.props;
 
-const icons: Record<string, string> = {
-  info: "ℹ️",
-  warning: "⚠️",
-  danger: "🚨",
-  tip: "💡",
-};
-
-const icon = icons[type] ?? icons.info;
-
 /**
  * Tailwind classes per callout type.
  * Each variant has: background, left-border, and text color.
- * These are all light values — dark mode auto-remaps via design tokens.
+ * Explicit light + dark: variants for semantic color accuracy.
  */
 const typeClasses: Record<string, string> = {
-  info: "bg-blue-50 border-l-blue-500 text-blue-900 dark:bg-blue-950/40 dark:text-blue-200",
-  warning: "bg-amber-50 border-l-amber-500 text-amber-900 dark:bg-amber-950/40 dark:text-amber-200",
-  danger: "bg-red-50 border-l-red-500 text-red-900 dark:bg-red-950/40 dark:text-red-200",
-  tip: "bg-emerald-50 border-l-emerald-500 text-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200",
+  info: "border-blue-500/20 bg-blue-500/5 text-blue-200 dark:border-blue-400/20 dark:bg-blue-400/5",
+  warning:
+    "border-amber-500/20 bg-amber-500/5 text-amber-200 dark:border-amber-400/20 dark:bg-amber-400/5",
+  danger: "border-red-500/20 bg-red-500/5 text-red-200 dark:border-red-400/20 dark:bg-red-400/5",
+  tip: "border-green-500/20 bg-green-500/5 text-green-200 dark:border-green-400/20 dark:bg-green-400/5",
+};
+
+const iconColorMap: Record<string, string> = {
+  info: "text-blue-400",
+  warning: "text-amber-400",
+  danger: "text-red-400",
+  tip: "text-green-400",
 };
 
 const classes = typeClasses[type] ?? typeClasses.info;
+const iconColor = iconColorMap[type] ?? iconColorMap.info;
 ---
 
 <aside
   role="note"
   class:list={[
-    "flex gap-3 px-5 py-4 my-6 border-l-4 rounded-md text-[0.95rem] leading-relaxed",
+    "flex gap-3 px-4 py-3.5 my-6 border rounded-xl text-[0.875rem] leading-relaxed",
     classes,
   ]}
 >
-  <span class="shrink-0 text-xl leading-relaxed">{icon}</span>
-  <div class="min-w-0 flex-1 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
+  <span class:list={["shrink-0 mt-0.5", iconColor]}>
+    {
+      type === "info" && (
+        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path
+            fill-rule="evenodd"
+            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      )
+    }
+    {
+      type === "warning" && (
+        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path
+            fill-rule="evenodd"
+            d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      )
+    }
+    {
+      type === "danger" && (
+        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path
+            fill-rule="evenodd"
+            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      )
+    }
+    {
+      type === "tip" && (
+        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path d="M10 1a6 6 0 00-3.815 10.631C7.237 12.5 8 13.443 8 14.456v.644a.75.75 0 00.75.75h2.5a.75.75 0 00.75-.75v-.644c0-1.013.762-1.957 1.815-2.825A6 6 0 0010 1zM8.863 17.414a.75.75 0 00-.226 1.483 9.066 9.066 0 002.726 0 .75.75 0 00-.226-1.483 7.563 7.563 0 01-2.274 0z" />
+        </svg>
+      )
+    }
+  </span>
+  <div class="min-w-0 flex-1 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 text-text">
     <slot />
   </div>
 </aside>

package/src/components/Card.astro

@@ -24,9 +24,9 @@ const Tag = href ? "a" : "div";
 
 <Tag
   class:list={[
-    "block p-5 my-4 border border-border rounded-lg bg-surface transition-[border-color,box-shadow] duration-150",
+    "block p-6 my-4 rounded-xl bg-surface-1 ring-1 ring-border/50 transition-[ring-color,box-shadow] duration-150",
     href &&
-      "no-underline text-inherit cursor-pointer hover:border-primary hover:shadow-sm hover:shadow-primary/10 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2",
+      "no-underline text-inherit cursor-pointer hover:ring-border hover:shadow-md focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2",
   ]}
   href={href}
 >
@@ -34,12 +34,12 @@ const Tag = href ? "a" : "div";
     (icon || title) && (
       <div class="flex items-center gap-2 mb-2">
         {icon && <span class="text-xl shrink-0">{icon}</span>}
-        {title && <h3 class="m-0 text-base font-semibold text-text">{title}</h3>}
+        {title && <h3 class="m-0 text-[0.9375rem] font-semibold text-text">{title}</h3>}
       </div>
     )
   }
   <div
-    class="text-[0.9375rem] text-text-muted leading-relaxed [&>p:first-child]:mt-0 [&>p:last-child]:mb-0"
+    class="text-[0.875rem] text-text-muted leading-relaxed [&>p:first-child]:mt-0 [&>p:last-child]:mb-0"
   >
     <slot />
   </div>

package/src/components/CodeBlock.astro

@@ -73,7 +73,7 @@ const highlightedHtml = await highlight(codeContent, lang, {
 <style>
   .code-block {
     margin: 1.5rem 0;
-    border: 1px solid var(--code-block-border, #e5e7eb);
+    border: 1px solid var(--code-block-border, oklch(0.92 0.004 286.32));
     border-radius: 0.5rem;
     overflow: hidden;
   }
@@ -82,8 +82,8 @@ const highlightedHtml = await highlight(codeContent, lang, {
     display: flex;
     align-items: center;
     padding: 0.5rem 1rem;
-    background-color: var(--code-block-header-bg, #f3f4f6);
-    border-bottom: 1px solid var(--code-block-border, #e5e7eb);
+    background-color: var(--code-block-header-bg, oklch(0.967 0.001 286.375));
+    border-bottom: 1px solid var(--code-block-border, oklch(0.92 0.004 286.32));
     font-size: 0.8125rem;
     font-family: var(
       --font-mono,
@@ -97,7 +97,7 @@ const highlightedHtml = await highlight(codeContent, lang, {
   }
 
   .code-block-title {
-    color: var(--code-block-title-color, #6b7280);
+    color: var(--code-block-title-color, oklch(0.552 0.016 285.938));
   }
 
   .code-block-body {
@@ -135,8 +135,8 @@ const highlightedHtml = await highlight(codeContent, lang, {
 -->
 <style is:global>
   .dark .code-block {
-    --code-block-border: oklch(0.303 0.034 264.376);
-    --code-block-header-bg: oklch(0.179 0.04 264.376);
-    --code-block-title-color: oklch(0.708 0.014 264.364);
+    --code-block-border: oklch(0.274 0.006 286.033);
+    --code-block-header-bg: oklch(0.21 0.006 285.885);
+    --code-block-title-color: oklch(0.705 0.015 286.067);
   }
 </style>

package/src/components/CodeBlockGroup.astro

@@ -145,9 +145,9 @@
 <!-- All global styles consolidated into one block -->
 <style is:global>
   .dark .code-block-group {
-    --code-block-border: oklch(0.303 0.034 264.376);
-    --code-block-header-bg: oklch(0.179 0.04 264.376);
-    --code-block-title-color: oklch(0.708 0.014 264.364);
+    --code-block-border: oklch(0.274 0.006 286.033);
+    --code-block-header-bg: oklch(0.21 0.006 285.885);
+    --code-block-title-color: oklch(0.705 0.015 286.067);
   }
 
   .code-group-tabs {