@natsuneko-laboratory/makit-theme-product 0.5.0

package/dist/components/theme-variables.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-variables.mjs","names":[],"sources":["../../src/components/theme-variables.tsx"],"sourcesContent":["import type { ThemeVariablesProps } from \"@natsuneko-laboratory/makit-runtime\";\r\n\r\ninterface AccentValue {\r\n  light: string;\r\n  dark: string;\r\n}\r\n\r\n/**\r\n * The accent drives the logo mark, the active navigation pill, and the home\r\n * page's gradient, so each name carries a pair tuned for contrast against\r\n * this theme's two backgrounds rather than a single hue.\r\n */\r\nconst ACCENTS: Record<string, AccentValue> = {\r\n  indigo: { light: \"#4f46e5\", dark: \"#818cf8\" },\r\n  violet: { light: \"#7c3aed\", dark: \"#a78bfa\" },\r\n  blue: { light: \"#2563eb\", dark: \"#60a5fa\" },\r\n  sky: { light: \"#0284c7\", dark: \"#38bdf8\" },\r\n  teal: { light: \"#0d9488\", dark: \"#2dd4bf\" },\r\n  emerald: { light: \"#059669\", dark: \"#34d399\" },\r\n  rose: { light: \"#e11d48\", dark: \"#fb7185\" },\r\n  amber: { light: \"#d97706\", dark: \"#fbbf24\" },\r\n};\r\n\r\nfunction resolveAccent(accentColor: string | undefined): AccentValue {\r\n  if (!accentColor) return ACCENTS.indigo!;\r\n  const named = ACCENTS[accentColor.toLowerCase()];\r\n  if (named) return named;\r\n  return { light: accentColor, dark: accentColor };\r\n}\r\n\r\nconst RADIUS: Record<string, string> = {\r\n  none: \"0px\",\r\n  small: \"0.375rem\",\r\n  medium: \"0.625rem\",\r\n  large: \"0.875rem\",\r\n};\r\n\r\n/**\r\n * Replaces the standard palette (THEME §13.3). The grays are slightly\r\n * blue-tinted (slate rather than zinc) so they sit under a saturated accent\r\n * without looking muddy, and `--makit-color-surface` is deliberately lifted\r\n * off the background in both schemes — this theme leans on cards.\r\n */\r\nconst LIGHT = [\r\n  \"--makit-color-background:#ffffff\",\r\n  \"--makit-color-surface:#ffffff\",\r\n  \"--makit-color-foreground:#0f172a\",\r\n  \"--makit-color-subtle:#64748b\",\r\n  \"--makit-color-muted:#f1f5f9\",\r\n  \"--makit-color-border:#e2e8f0\",\r\n  \"--makit-color-border-strong:#cbd5e1\",\r\n].join(\";\");\r\n\r\nconst DARK = [\r\n  \"--makit-color-background:#0b1120\",\r\n  \"--makit-color-surface:#131c2f\",\r\n  \"--makit-color-foreground:#e8edf7\",\r\n  \"--makit-color-subtle:#94a3b8\",\r\n  \"--makit-color-muted:#1c273d\",\r\n  \"--makit-color-border:#22304a\",\r\n  \"--makit-color-border-strong:#38486a\",\r\n].join(\";\");\r\n\r\nexport function ThemeVariables({ theme }: ThemeVariablesProps) {\r\n  const accent = resolveAccent(theme.accentColor);\r\n  const radius = RADIUS[theme.radius] ?? RADIUS.large!;\r\n\r\n  const css = `:root{--makit-color-accent:${accent.light};${LIGHT};--makit-radius:${radius};--makit-product-shadow:0 1px 2px rgb(15 23 42 / 0.04),0 8px 24px -12px rgb(15 23 42 / 0.12);}\r\n:root[data-theme=\"dark\"]{--makit-color-accent:${accent.dark};${DARK};--makit-product-shadow:0 1px 2px rgb(0 0 0 / 0.3),0 8px 24px -12px rgb(0 0 0 / 0.6);}\r\n@media (prefers-color-scheme: dark){:root:not([data-theme=\"light\"]):not([data-theme=\"dark\"]){--makit-color-accent:${accent.dark};${DARK};--makit-product-shadow:0 1px 2px rgb(0 0 0 / 0.3),0 8px 24px -12px rgb(0 0 0 / 0.6);}}\r\n.makit-header-logo-dark{display:none}:root[data-theme=\"dark\"] .makit-header-logo-light{display:none}:root[data-theme=\"dark\"] .makit-header-logo-dark{display:block}@media (prefers-color-scheme: dark){:root:not([data-theme=\"light\"]):not([data-theme=\"dark\"]) .makit-header-logo-light{display:none}:root:not([data-theme=\"light\"]):not([data-theme=\"dark\"]) .makit-header-logo-dark{display:block}}`;\r\n\r\n  return <style dangerouslySetInnerHTML={{ __html: css }} />;\r\n}\r\n"],"mappings":";;;;;;;AAYA,MAAM,UAAuC;CAC3C,QAAQ;EAAE,OAAO;EAAW,MAAM;CAAU;CAC5C,QAAQ;EAAE,OAAO;EAAW,MAAM;CAAU;CAC5C,MAAM;EAAE,OAAO;EAAW,MAAM;CAAU;CAC1C,KAAK;EAAE,OAAO;EAAW,MAAM;CAAU;CACzC,MAAM;EAAE,OAAO;EAAW,MAAM;CAAU;CAC1C,SAAS;EAAE,OAAO;EAAW,MAAM;CAAU;CAC7C,MAAM;EAAE,OAAO;EAAW,MAAM;CAAU;CAC1C,OAAO;EAAE,OAAO;EAAW,MAAM;CAAU;AAC7C;AAEA,SAAS,cAAc,aAA8C;CACnE,IAAI,CAAC,aAAa,OAAO,QAAQ;CACjC,MAAM,QAAQ,QAAQ,YAAY,YAAY;CAC9C,IAAI,OAAO,OAAO;CAClB,OAAO;EAAE,OAAO;EAAa,MAAM;CAAY;AACjD;AAEA,MAAM,SAAiC;CACrC,MAAM;CACN,OAAO;CACP,QAAQ;CACR,OAAO;AACT;;;;;;;AAQA,MAAM,QAAQ;CACZ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,OAAO;CACX;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,SAAgB,eAAe,EAAE,SAA8B;CAC7D,MAAM,SAAS,cAAc,MAAM,WAAW;CAC9C,MAAM,SAAS,OAAO,MAAM,WAAW,OAAO;CAO9C,OAAO,oBAAC,SAAD,EAAO,yBAAyB,EAAE,QAAQ,8BALP,OAAO,MAAM,GAAG,MAAM,kBAAkB,OAAO;gDAC3C,OAAO,KAAK,GAAG,KAAK;oHACgD,OAAO,KAAK,GAAG,KAAK;wYAGjF,EAAI,CAAA;AAC3D"}

package/dist/index.d.mts

@@ -0,0 +1,14 @@
+import { RootLayout } from "./components/root-layout.mjs";
+import { DocsPage } from "./components/docs-page.mjs";
+import { PortalHomePage } from "./components/portal-home-page.mjs";
+import { NotFoundPage } from "./components/not-found-page.mjs";
+import { Header } from "./components/header.mjs";
+import { Sidebar } from "./components/sidebar.mjs";
+import { NavigationItems } from "./components/navigation-items.mjs";
+import { Breadcrumbs } from "./components/breadcrumbs.mjs";
+import { PageHeader } from "./components/page-header.mjs";
+import { PrevNextLinks } from "./components/prev-next-links.mjs";
+import { TableOfContents } from "./components/table-of-contents.mjs";
+import { Footer } from "./components/footer.mjs";
+import { ThemeVariables } from "./components/theme-variables.mjs";
+export { Breadcrumbs, DocsPage, Footer, Header, NavigationItems, NotFoundPage, PageHeader, PortalHomePage, PrevNextLinks, RootLayout, Sidebar, TableOfContents, ThemeVariables };

package/dist/index.mjs

@@ -0,0 +1,14 @@
+import { RootLayout } from "./components/root-layout.mjs";
+import { DocsPage } from "./components/docs-page.mjs";
+import { PortalHomePage } from "./components/portal-home-page.mjs";
+import { NotFoundPage } from "./components/not-found-page.mjs";
+import { Header } from "./components/header.mjs";
+import { NavigationItems } from "./components/navigation-items.mjs";
+import { Sidebar } from "./components/sidebar.mjs";
+import { Breadcrumbs } from "./components/breadcrumbs.mjs";
+import { PageHeader } from "./components/page-header.mjs";
+import { PrevNextLinks } from "./components/prev-next-links.mjs";
+import { TableOfContents } from "./components/table-of-contents.mjs";
+import { Footer } from "./components/footer.mjs";
+import { ThemeVariables } from "./components/theme-variables.mjs";
+export { Breadcrumbs, DocsPage, Footer, Header, NavigationItems, NotFoundPage, PageHeader, PortalHomePage, PrevNextLinks, RootLayout, Sidebar, TableOfContents, ThemeVariables };

package/dist/manifest.d.mts

@@ -0,0 +1,5 @@
+//#region src/manifest.d.ts
+declare const _default: import("@natsuneko-laboratory/makit/theme").ThemeManifest;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=manifest.d.mts.map

package/dist/manifest.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manifest.d.mts","names":[],"sources":["../src/manifest.ts"],"mappings":""}

package/dist/manifest.mjs

@@ -0,0 +1,15 @@
+import { defineTheme } from "@natsuneko-laboratory/makit/theme";
+//#region src/manifest.ts
+var manifest_default = defineTheme({
+	name: "@natsuneko-laboratory/makit-theme-product",
+	styles: ["./styles/theme.css"],
+	tailwindSources: ["./dist/**/*.mjs"],
+	defaults: {
+		radius: "large",
+		accentColor: "indigo"
+	}
+});
+//#endregion
+export { manifest_default as default };
+
+//# sourceMappingURL=manifest.mjs.map

package/dist/manifest.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"manifest.mjs","names":[],"sources":["../src/manifest.ts"],"sourcesContent":["import { defineTheme } from \"@natsuneko-laboratory/makit/theme\";\r\n\r\nexport default defineTheme({\r\n  name: \"@natsuneko-laboratory/makit-theme-product\",\r\n  styles: [\"./styles/theme.css\"],\r\n  // Only the built components carry class names; scanning the package root\r\n  // would drag `node_modules` in (THEME §13.1).\r\n  tailwindSources: [\"./dist/**/*.mjs\"],\r\n  defaults: {\r\n    radius: \"large\",\r\n    accentColor: \"indigo\",\r\n  },\r\n});\r\n"],"mappings":";;AAEA,IAAA,mBAAe,YAAY;CACzB,MAAM;CACN,QAAQ,CAAC,oBAAoB;CAG7B,iBAAiB,CAAC,iBAAiB;CACnC,UAAU;EACR,QAAQ;EACR,aAAa;CACf;AACF,CAAC"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@natsuneko-laboratory/makit-theme-product",
+  "version": "0.5.0",
+  "description": "A polished, product-documentation Makit theme with soft cards, pill navigation, and a gradient home.",
+  "license": "MIT",
+  "repository": "https://github.com/mika-f/makit.git",
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./makit-theme": {
+      "types": "./dist/manifest.d.mts",
+      "import": "./dist/manifest.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/node": "^26.1.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "next": "^16.2.10",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tsdown": "^0.22.8",
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.10",
+    "@natsuneko-laboratory/makit": "0.5.0",
+    "@natsuneko-laboratory/makit-runtime": "0.5.0"
+  },
+  "peerDependencies": {
+    "@natsuneko-laboratory/makit": "^0.4.0",
+    "@natsuneko-laboratory/makit-runtime": "^0.4.0",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}

package/styles/theme.css

@@ -0,0 +1,93 @@
+/*
+ * Product theme (THEME §13.2). Imported after Makit's base stylesheet and
+ * before the project's own `styles`, so a project can still override anything
+ * here from `config.styles`.
+ */
+
+.makit-product {
+  font-family:
+    Inter,
+    "Inter Variable",
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Hiragino Sans",
+    "Noto Sans JP",
+    sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+}
+
+/* Cards and popovers sit on the surface color, which is lifted off the page. */
+.makit-product .makit-product-card {
+  box-shadow: var(--makit-product-shadow);
+}
+
+/* The nav chevron points down when the section is open (no JS involved). */
+.makit-product details[open] > summary .makit-product-marker {
+  transform: rotate(180deg);
+}
+
+/*
+ * The reading column is generous rather than dense — this theme is aimed at
+ * marketing-adjacent product docs, not API reference.
+ */
+.makit-product .makit-prose {
+  font-size: 1.0625rem;
+  line-height: 1.8;
+}
+
+.makit-product .makit-prose :where(h2) {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--makit-color-border);
+  font-size: 1.5rem;
+  letter-spacing: -0.02em;
+}
+
+.makit-product .makit-prose :where(h2:first-child) {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
+}
+
+.makit-product .makit-prose :where(h3) {
+  margin-top: 2.25rem;
+  font-size: 1.175rem;
+  letter-spacing: -0.015em;
+}
+
+.makit-product .makit-prose :where(a) {
+  color: var(--makit-color-accent);
+  font-weight: 500;
+  text-decoration-color: color-mix(in srgb, var(--makit-color-accent) 35%, transparent);
+}
+
+.makit-product .makit-prose :where(blockquote) {
+  border-left-width: 3px;
+  border-radius: 0 var(--makit-radius) var(--makit-radius) 0;
+  background: var(--makit-color-muted);
+  padding: 0.25rem 1.25rem;
+  font-style: normal;
+}
+
+.makit-product .makit-prose .makit-alert {
+  border-left-width: 3px;
+  border-radius: var(--makit-radius);
+}
+
+.makit-product .makit-prose :where(table) {
+  font-size: 0.9375rem;
+}
+
+.makit-product pre.shiki {
+  border-radius: var(--makit-radius);
+  box-shadow: var(--makit-product-shadow);
+}
+
+/* Anchor targets clear the taller header. Must sit on the scrolling element
+   (`<html>`), not on the body class. */
+:root[data-makit-theme="product"] {
+  scroll-padding-top: 7rem;
+}