@kadal/theme-neon 0.0.0-stage → 0.4.0

package/README.md

@@ -1,3 +1,65 @@
-# Temporary Holding Version
+# @kadal/theme-neon
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Neon**, a theme for [Kadal Deck](https://deck.kadal.cc). A dark synthwave theme for meetups and launches. Midnight violet, a striped sunset sun over a grid that runs to the horizon, Orbitron for display, Space Grotesk for text, the Synthwave '84 code colours. The glows stay legible: the letters keep near white and only the halo takes the colour. Every glow, blur and animation is dropped on a still copy (the print view, an export, an overview tile), so a PDF gets solid colour and clean edges rather than grey halos. Dark only.
+
+![Neon: the cover, a content slide, code and the theme's own layout](./screenshot.jpg)
+
+## Use it
+
+```bash
+npm install @kadal/theme-neon
+```
+
+```yaml
+---
+theme: neon
+themeConfig:            # all optional
+  primary: "#ff3ec8"
+  secondary: "#2de2e6"
+  grid: true
+---
+```
+
+The deck plugin brings the stylesheet and the module in; nothing to import. The prebuilt shell (the hosted builder, published decks) bundles this theme already. Schemes: dark only. Fonts: Orbitron (headings), Space Grotesk (text), JetBrains Mono (code), loaded through the theme's `config.fonts`. Code colours: Shiki's synthwave-84 (both). To show it beside other themes in the theme menu (<kbd>T</kbd>), list it: `themes: [neon, minimal]`.
+
+## themeConfig
+
+Every key arrives on the deck root as a CSS variable (`accentDark` → `--theme-accent-dark`); the theme reads them with fallbacks, so set only what you change.
+
+| key | type | default | what it does |
+| --- | --- | --- | --- |
+| `primary` | colour | `#ff3ec8` | Magenta: headings' glow, the accent. |
+| `secondary` | colour | `#2de2e6` | Cyan: bullets, links, labels. |
+| `grid` | boolean | `true` | `false` hides the floor grid on covers and the theme's layouts. |
+
+## Layouts
+
+Every built-in layout is styled (`default`, `center`, `cover`, `intro`, `section`, `end`, `fact`, `quote`, `statement`, `full`, `two-cols`, `two-cols-header`, `image`, `image-left`, `image-right`, `iframe`, `iframe-left`, `iframe-right`), and the theme adds:
+
+| layout | what |
+| --- | --- |
+| `launch` | The title over the striped sun with the grid running to the horizon, and a pulsing chip above it (`chip: "Live · 24 Oct"`, or `date:`). |
+| `horizon` | An ordinary content slide with the grid along its foot. |
+
+## Components
+
+| component | what |
+| --- | --- |
+| `<Glow tone>` | A word or phrase in neon: `tone` pink (default) · cyan · amber. |
+
+## Preview
+
+`preview/deck.mdx` walks through every layout and component (`theme: ../`). In this repository:
+
+```bash
+bun run --filter @kadal/theme-neon dev       # the preview deck, live
+node tools/theme-shots.mjs neon               # screenshots in light and dark, contrast and overflow checks
+```
+
+## Accessibility and print
+
+Body and muted text meet WCAG AA (4.5:1) on the page and on cards in every scheme the theme draws (checked by `tools/theme-shots.mjs`). Anything that moves stands still under `prefers-reduced-motion` and on a still copy; printed pages and exports drop shadows and glows.
+
+## Licence
+
+AGPL-3.0-or-later, like the engine (see LICENSE); a commercial licence is available — see [LICENSING](https://github.com/kadalcc/deck/blob/main/LICENSING.md).

package/index.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+
+import type { LayoutProps } from "@kadal/deck";
+
+/**
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Neon's module: two layouts for the big moment, and a word in neon.
+ *
+ *   layout: launch    the title over the striped sun with the grid running to the horizon, and
+ *                     a pulsing chip above it (`chip: "Live · 24 Oct"`, or `date:`)
+ *   layout: horizon   an ordinary content slide with the grid along its foot
+ *   <Glow tone>       a word or phrase in neon: tone pink (default) · cyan · amber
+ *
+ * The sun and the floor are decoration (aria-hidden), stilled under prefers-reduced-motion and
+ * on every still copy; `themeConfig.grid: false` hides the floor. They carry `deck-absolute`, the
+ * engine's mark for what is placed rather than flowed, so the auto-fit does not count the floor
+ * that hangs past the layout's foot as overflow and shrink the slide.
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+
+const str = (v: unknown) => (typeof v === "string" && v.trim() ? v.trim() : null);
+
+function Launch({ children, frontmatter }: LayoutProps) {
+  const chip = str(frontmatter.chip) ?? str(frontmatter.date);
+  return (
+    <div className="deck-layout deck-layout-launch">
+      <div className="neon-sun deck-absolute" aria-hidden="true" />
+      <div className="neon-floor deck-absolute" aria-hidden="true" />
+      {chip ? <span className="neon-chip">{chip}</span> : null}
+      {children}
+    </div>
+  );
+}
+
+function Horizon({ children }: LayoutProps) {
+  return (
+    <div className="deck-layout deck-layout-horizon">
+      <div className="neon-floor deck-absolute" aria-hidden="true" />
+      {children}
+    </div>
+  );
+}
+
+function Glow({
+  tone = "pink",
+  children,
+}: {
+  tone?: "pink" | "cyan" | "amber";
+  children?: ReactNode;
+}) {
+  return <span className={`neon-glow tone-${tone}`}>{children}</span>;
+}
+
+export default {
+  layouts: { launch: Launch, horizon: Horizon },
+  components: { Glow },
+};

package/package.json

@@ -1,6 +1,104 @@
 {
   "name": "@kadal/theme-neon",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.4.0",
+  "description": "Neon, a theme for Kadal Deck (@kadal/deck). A dark synthwave theme for meetups and launches: a sunset horizon, glows that stay legible, and a solid print fallback.",
+  "keywords": [
+    "kadal-theme",
+    "kadal-deck",
+    "presentation",
+    "slides",
+    "theme",
+    "synthwave",
+    "neon",
+    "dark",
+    "launch"
+  ],
+  "homepage": "https://deck.kadal.cc/docs/",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/pmithunish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kadalcc/deck.git",
+    "directory": "packages/theme-neon"
+  },
+  "bugs": {
+    "url": "https://github.com/kadalcc/deck/issues"
+  },
+  "license": "AGPL-3.0-or-later",
+  "author": "Mithunish Prabhakaran <pmithunish@gmail.com>",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "style.css",
+    "index.tsx",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": "./index.tsx",
+    "./style.css": "./style.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "kadal": {
+    "theme": {
+      "name": "neon",
+      "title": "Neon",
+      "description": "A dark synthwave theme for meetups and launches: a sunset horizon, glows that stay legible, and a solid print fallback.",
+      "colorScheme": "dark",
+      "config": {
+        "transition": "fade",
+        "fonts": {
+          "heading": "Orbitron",
+          "sans": "Space Grotesk",
+          "mono": "JetBrains Mono",
+          "weights": "400,500,700"
+        }
+      },
+      "themeConfig": {
+        "primary": "#ff3ec8",
+        "secondary": "#2de2e6",
+        "grid": true
+      },
+      "shiki": {
+        "light": "synthwave-84",
+        "dark": "synthwave-84"
+      },
+      "defaults": {},
+      "layouts": [
+        "launch",
+        "horizon"
+      ],
+      "components": [
+        "Glow"
+      ]
+    }
+  },
+  "scripts": {
+    "dev": "kadal-deck dev -C preview",
+    "check": "kadal-deck check -C preview",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test"
+  },
+  "peerDependencies": {
+    "@kadal/deck": "^0.4.0",
+    "react": "^19.2.0"
+  },
+  "devDependencies": {
+    "@kadal/deck": "workspace:*",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
+  }
+}