@lupinum/ginko-docs 0.4.0-rc.3 → 0.4.0-rc.5

package/README.md

@@ -29,7 +29,7 @@ Use this package when a Nuxt application needs documentation routes, navigation,
 ## Installation
 
 ```bash
-pnpm add -D @lupinum/ginko-docs@0.4.0-rc.3 @lupinum/ginko-content@1.0.0-beta.5
+pnpm add -D @lupinum/ginko-docs@0.4.0-rc.5 @lupinum/ginko-content@1.0.0-beta.5
 ```
 
 ```ts

package/app/app.config.ts

@@ -2,6 +2,7 @@ import type { GinkoDocsAppConfig } from "../shared/types/app-config";
 export default {
   ginkoDocs: {
     theme: {
+      preset: "default",
       neutral: "zinc",
       primary: "neutral",
       codeBlocks: "dark",

package/app/assets/css/tailwind.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "./theme-palettes.css";
+@import "./theme-presets.css";
 @source "../../**/*.{vue,ts}";
 
 @custom-variant dark (&:is(.dark *));
@@ -29,6 +30,8 @@
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
@@ -147,6 +150,8 @@
   --popover-foreground: var(--theme-neutral-950);
   --primary: var(--theme-primary-light);
   --primary-foreground: var(--theme-primary-light-foreground);
+  --brand: var(--primary);
+  --brand-foreground: var(--primary-foreground);
   --secondary: var(--theme-neutral-100);
   --secondary-foreground: var(--theme-neutral-900);
   --muted: var(--theme-neutral-100);
@@ -223,6 +228,8 @@
   --popover-foreground: var(--theme-neutral-50);
   --primary: var(--theme-primary-dark);
   --primary-foreground: var(--theme-primary-dark-foreground);
+  --brand: var(--primary);
+  --brand-foreground: var(--primary-foreground);
   --secondary: var(--theme-neutral-800);
   --secondary-foreground: var(--theme-neutral-50);
   --muted: var(--theme-neutral-800);

package/app/assets/css/theme-presets.css

@@ -0,0 +1,141 @@
+/* Complete visual systems. Presets intentionally override palette selection;
+   use the default preset when neutral and primary must be configured alone. */
+
+html[data-theme-preset="nuxt"] {
+  /* Official Nuxt green scale. */
+  --nuxt-green-50: #effdf5;
+  --nuxt-green-100: #d9fbe8;
+  --nuxt-green-200: #b3f5d1;
+  --nuxt-green-300: #75edae;
+  --nuxt-green-400: #00dc82;
+  --nuxt-green-500: #00c16a;
+  --nuxt-green-600: #00a155;
+  --nuxt-green-700: #007f45;
+  --nuxt-green-800: #016538;
+  --nuxt-green-900: #0a5331;
+  --nuxt-green-950: #052e16;
+
+  /* Nuxt uses Slate for neutral surfaces. */
+  --theme-neutral-50: var(--color-slate-50);
+  --theme-neutral-100: var(--color-slate-100);
+  --theme-neutral-200: var(--color-slate-200);
+  --theme-neutral-300: var(--color-slate-300);
+  --theme-neutral-400: var(--color-slate-400);
+  --theme-neutral-500: var(--color-slate-500);
+  --theme-neutral-600: var(--color-slate-600);
+  --theme-neutral-700: var(--color-slate-700);
+  --theme-neutral-800: var(--color-slate-800);
+  --theme-neutral-900: var(--color-slate-900);
+  --theme-neutral-950: var(--color-slate-950);
+
+  /* Normal-size text needs the darker green in light mode. */
+  --theme-primary-light: var(--nuxt-green-700);
+  --theme-primary-light-foreground: #ffffff;
+  --theme-primary-light-ring: var(--nuxt-green-600);
+  --theme-primary-dark: var(--nuxt-green-400);
+  --theme-primary-dark-foreground: var(--nuxt-green-950);
+  --theme-primary-dark-ring: var(--nuxt-green-400);
+
+  /* Brand surfaces can use Nuxt green with its high-contrast navy foreground. */
+  --brand: var(--nuxt-green-400);
+  --brand-foreground: #020420;
+
+  --background: #ffffff;
+  --foreground: var(--color-slate-900);
+  --card: #ffffff;
+  --card-foreground: var(--color-slate-900);
+  --popover: #ffffff;
+  --popover-foreground: var(--color-slate-900);
+  --primary: var(--theme-primary-light);
+  --primary-foreground: var(--theme-primary-light-foreground);
+  --secondary: var(--color-slate-50);
+  --secondary-foreground: var(--color-slate-900);
+  --muted: var(--color-slate-50);
+  --muted-foreground: var(--color-slate-500);
+  --accent: var(--color-slate-100);
+  --accent-foreground: var(--color-slate-900);
+  --border: var(--color-slate-200);
+  --input: var(--color-slate-200);
+  --ring: var(--nuxt-green-600);
+  --code: var(--color-slate-50);
+  --code-foreground: var(--color-slate-900);
+  --code-border: var(--color-slate-200);
+
+  --hero-bg: #ffffff;
+  --hero-bg-muted: var(--color-slate-50);
+  --hero-blue: var(--nuxt-green-400);
+  --hero-blue-light: var(--nuxt-green-300);
+  --hero-blue-dark: var(--nuxt-green-700);
+  --hero-blue-muted: var(--nuxt-green-50);
+  --hero-mint: var(--nuxt-green-400);
+  --hero-mint-dark: var(--nuxt-green-700);
+  --hero-mint-muted: var(--nuxt-green-50);
+  --hero-mint-text: var(--nuxt-green-700);
+  --hero-yellow: var(--nuxt-green-400);
+  --hero-yellow-hover: var(--nuxt-green-500);
+  --hero-yellow-dark: var(--nuxt-green-700);
+  --hero-yellow-muted: var(--nuxt-green-50);
+  --hero-coral: var(--nuxt-green-400);
+  --hero-coral-light: var(--nuxt-green-300);
+  --hero-coral-dark: var(--nuxt-green-700);
+  --hero-coral-muted: var(--nuxt-green-50);
+  --hero-coral-text: var(--nuxt-green-700);
+  --hero-check: var(--nuxt-green-400);
+  --hero-white: #ffffff;
+
+  --agent-background: var(--color-slate-950);
+  --agent-foreground: var(--color-slate-100);
+  --agent-muted: var(--color-slate-400);
+
+  /* Nuxt UI-compatible aliases for consumer-owned examples. */
+  --ui-bg: var(--background);
+  --ui-bg-muted: var(--muted);
+  --ui-bg-elevated: var(--card);
+  --ui-bg-accented: var(--accent);
+  --ui-border: var(--border);
+  --ui-border-muted: var(--border);
+  --ui-border-accented: var(--border);
+  --ui-text: var(--foreground);
+  --ui-text-default: var(--foreground);
+  --ui-text-highlighted: var(--foreground);
+  --ui-text-muted: var(--muted-foreground);
+  --ui-text-dimmed: var(--muted-foreground);
+  --ui-text-toned: var(--muted-foreground);
+  --ui-primary: var(--primary);
+}
+
+html.dark[data-theme-preset="nuxt"] {
+  --background: var(--color-slate-950);
+  --foreground: var(--color-slate-50);
+  --card: var(--color-slate-900);
+  --card-foreground: var(--color-slate-50);
+  --popover: var(--color-slate-900);
+  --popover-foreground: var(--color-slate-50);
+  --primary: var(--nuxt-green-400);
+  --primary-foreground: var(--nuxt-green-950);
+  --secondary: var(--color-slate-900);
+  --secondary-foreground: var(--color-slate-50);
+  --muted: var(--color-slate-900);
+  --muted-foreground: var(--color-slate-400);
+  --accent: var(--color-slate-800);
+  --accent-foreground: var(--color-slate-50);
+  --border: var(--color-slate-800);
+  --input: var(--color-slate-700);
+  --ring: var(--nuxt-green-400);
+  --code: var(--color-slate-900);
+  --code-foreground: var(--color-slate-50);
+  --code-border: var(--color-slate-800);
+
+  --hero-bg: var(--color-slate-950);
+  --hero-bg-muted: var(--color-slate-900);
+  --hero-blue-dark: var(--nuxt-green-400);
+  --hero-mint-dark: var(--nuxt-green-400);
+  --hero-yellow-dark: var(--nuxt-green-400);
+  --hero-coral-dark: var(--nuxt-green-400);
+  --hero-blue-muted: color-mix(in oklab, var(--nuxt-green-400) 12%, var(--color-slate-900));
+  --hero-mint-muted: var(--hero-blue-muted);
+  --hero-yellow-muted: var(--hero-blue-muted);
+  --hero-coral-muted: var(--hero-blue-muted);
+  --hero-mint-text: var(--nuxt-green-300);
+  --hero-coral-text: var(--nuxt-green-300);
+}

package/app/components/site/SiteBanner.vue

@@ -73,7 +73,7 @@ onBeforeUnmount(() => {
     ref="bannerElement"
     role="region"
     :aria-label="banner.text"
-    class="relative z-30 bg-primary px-10 py-2.5 text-center text-sm leading-5 font-medium text-primary-foreground"
+    class="relative z-30 bg-brand px-10 py-2.5 text-center text-sm leading-5 font-medium text-brand-foreground"
   >
     <span class="mx-auto block max-w-[min(100%,52rem)]">
       {{ banner.text }}
@@ -87,7 +87,7 @@ onBeforeUnmount(() => {
     </span>
     <button
       type="button"
-      class="absolute top-1/2 right-2 flex size-8 -translate-y-1/2 items-center justify-center rounded p-1 opacity-70 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-primary-foreground/50 focus-visible:outline-none"
+      class="absolute top-1/2 right-2 flex size-8 -translate-y-1/2 items-center justify-center rounded p-1 opacity-70 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-brand-foreground/50 focus-visible:outline-none"
       :aria-label="t('banner.dismiss')"
       @click="dismissed = true"
     >

package/app/pages/index.vue

@@ -127,7 +127,7 @@ useSeoMeta({
           <div class="mt-10 flex flex-wrap items-center gap-3">
             <NuxtLink
               :to="landing.primary.to"
-              class="inline-flex h-11 items-center gap-2 rounded-md bg-primary px-5 text-sm font-semibold text-primary-foreground transition-transform hover:-translate-y-0.5"
+              class="inline-flex h-11 items-center gap-2 rounded-md bg-brand px-5 text-sm font-semibold text-brand-foreground transition-transform hover:-translate-y-0.5"
             >
               {{ landing.primary.label }}
               <Icon name="lucide:arrow-right" class="size-4" aria-hidden="true" />
@@ -240,7 +240,7 @@ useSeoMeta({
         <div class="mt-9 flex flex-wrap items-center justify-center gap-3">
           <NuxtLink
             :to="landing.cta.primary.to"
-            class="inline-flex h-11 items-center gap-2 rounded-md bg-primary px-5 text-sm font-semibold text-primary-foreground transition-transform hover:-translate-y-0.5"
+            class="inline-flex h-11 items-center gap-2 rounded-md bg-brand px-5 text-sm font-semibold text-brand-foreground transition-transform hover:-translate-y-0.5"
           >
             {{ landing.cta.primary.label }}
             <Icon name="lucide:arrow-right" class="size-4" aria-hidden="true" />

package/app/plugins/ginko-docs-theme.ts

@@ -5,6 +5,7 @@ export default defineNuxtPlugin(() => {
 
   useHead({
     htmlAttrs: {
+      "data-theme-preset": theme.preset ?? "default",
       "data-neutral": theme.neutral,
       "data-primary": theme.primary,
       "data-code-blocks": theme.codeBlocks,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lupinum/ginko-docs",
-  "version": "0.4.0-rc.3",
+  "version": "0.4.0-rc.5",
   "description": "A Nuxt documentation layer powered by Ginko Content.",
   "keywords": [
     "content",
@@ -74,6 +74,7 @@
     "@vueuse/core": "^14.4.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "h3": "1.15.11",
     "motion-v": "^2.3.0",
     "nitropack": "^2.13.4",
     "nuxt-og-image": "^6.7.8",

package/server/routes/.well-known/ai-catalog.json.get.ts

@@ -1,13 +1,10 @@
-import { setResponseHeaders } from "h3";
 import { useAppConfig } from "#imports";
 import { createGinkoDocsAiCatalog } from "../../utils/mcp-server-card";
 
 export default defineEventHandler((event) => {
-  setResponseHeaders(event, {
-    "access-control-allow-origin": "*",
-    "cache-control": "public, max-age=3600",
-    "content-type": "application/ai-catalog+json; charset=utf-8",
-  });
+  event.node.res.setHeader("access-control-allow-origin", "*");
+  event.node.res.setHeader("cache-control", "public, max-age=3600");
+  event.node.res.setHeader("content-type", "application/ai-catalog+json; charset=utf-8");
 
   return createGinkoDocsAiCatalog(useAppConfig().ginkoDocs.site.url);
 });

package/server/routes/mcp/server-card.get.ts

@@ -1,14 +1,11 @@
-import { setResponseHeaders } from "h3";
 import { useAppConfig } from "#imports";
 import packageMetadata from "../../../package.json" with { type: "json" };
 import { createGinkoDocsServerCard } from "../../utils/mcp-server-card";
 
 export default defineEventHandler((event) => {
-  setResponseHeaders(event, {
-    "access-control-allow-origin": "*",
-    "cache-control": "public, max-age=3600",
-    "content-type": "application/mcp-server-card+json; charset=utf-8",
-  });
+  event.node.res.setHeader("access-control-allow-origin", "*");
+  event.node.res.setHeader("cache-control", "public, max-age=3600");
+  event.node.res.setHeader("content-type", "application/mcp-server-card+json; charset=utf-8");
 
   return createGinkoDocsServerCard({
     origin: useAppConfig().ginkoDocs.site.url,

package/shared/theme-presets.ts

@@ -0,0 +1,3 @@
+export const GINKO_DOCS_THEME_PRESETS = ["default", "nuxt"] as const;
+
+export type GinkoDocsThemePreset = (typeof GINKO_DOCS_THEME_PRESETS)[number];

package/shared/types/app-config.ts

@@ -1,5 +1,7 @@
 export type { GinkoDocsNeutralPalette, GinkoDocsPrimaryPalette } from "../theme-palettes";
+export type { GinkoDocsThemePreset } from "../theme-presets";
 import type { GinkoDocsNeutralPalette, GinkoDocsPrimaryPalette } from "../theme-palettes";
+import type { GinkoDocsThemePreset } from "../theme-presets";
 
 export type GinkoDocsLocalizedText = string | { en: string; de?: string };
 
@@ -61,6 +63,8 @@ export type GinkoDocsHeroMedia =
 
 export interface GinkoDocsAppConfig {
   theme: {
+    /** Coordinated visual system. A non-default preset owns palette and surface tokens. */
+    preset?: GinkoDocsThemePreset;
     neutral: GinkoDocsNeutralPalette;
     primary: GinkoDocsPrimaryPalette;
     codeBlocks: GinkoDocsCodeBlockTheme;