@kadal/theme-classic 0.0.0-stage → 0.4.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2021 Slidev.js Team (the original theme, @slidev/theme-default)
+Copyright (c) 2026 Mithunish Prabhakaran (the Kadal Deck port, @kadal/theme-classic)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,50 @@
-# Temporary Holding Version
+# @kadal/theme-classic
 
-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.
+**Classic**, a theme for [Kadal Deck](https://deck.kadal.cc): Slidev's default theme, ported.
+Avenir Next (Nunito Sans where it is not installed), light headings, square bullets, dashed
+links, a cyan primary, and a cover that dims a background picture. Light and dark.
+
+```bash
+npm install @kadal/theme-classic
+```
+
+```yaml
+---
+theme: classic
+layout: cover
+background: /cover.jpg      # a picture is dimmed and the words turn white, as in Slidev
+themeConfig:
+  primary: "#3ab9d5"        # → --theme-primary: links on hover, the quote's rule, the progress bar
+---
+```
+
+## Layouts
+
+Every engine layout is styled. The theme's own:
+
+| layout | frontmatter | what |
+|---|---|---|
+| `cover` | `background` | the title, vertically centred; a picture background gets Slidev's dim |
+
+`intro`, `section`, `statement`, `fact` and `quote` keep their Slidev look (a big centred
+section title, a bold statement, a huge fact over a bold caption).
+
+Fonts load through the fonts mechanism (`config.fonts` in package.json): Avenir Next is used
+when installed, Nunito Sans from Google Fonts otherwise, Fira Code for code. Code is coloured with
+Shiki's `vitesse-light` / `vitesse-dark`, Slidev's own.
+
+## Develop
+
+The preview deck (`preview/deck.mdx`) is the original theme's own example deck, slide for slide:
+
+```bash
+npm run dev      # the preview deck, live
+npm run check    # lint it
+```
+
+## Licence and attribution
+
+MIT. This package is a port of [`@slidev/theme-default`](https://github.com/slidevjs/themes), MIT License,
+Copyright (c) 2021 Slidev.js Team (the theme by Anthony Fu). The look, the layouts and their frontmatter are
+theirs; the React layouts and the stylesheet were rewritten for Kadal Deck. The full notice is in
+[LICENSE](./LICENSE).

package/index.tsx

@@ -0,0 +1,32 @@
+import type { LayoutProps, SlideBackground } from "@kadal/deck";
+
+/**
+ * Classic: Slidev's default theme (@slidev/theme-default, MIT) for Kadal Deck.
+ *
+ * Slidev's theme ships six layouts: cover, intro, fact, quote, section and statement. Five of them
+ * are a `.slidev-layout <name>` box with the slot centred inside, which is exactly the markup
+ * Kadal's built-in layouts of the same names already give (`.deck-layout-<name>`), so style.css
+ * styles those and nothing here replaces them. The cover is the one with behaviour: a
+ * `background:` that is a picture gets Slidev's dim (a #0005 → #0008 gradient) and white words.
+ * The picture itself is painted by the engine's background layer, as on any slide.
+ */
+
+/** Is this background a picture or a film, rather than a colour (Slidev's handleBackground)? */
+function isPicture(bg: SlideBackground | null | undefined): boolean {
+  return !!bg && !!(bg.image || bg.video);
+}
+
+/** `layout: cover` with Slidev's `background:` behaviour. */
+function Cover({ options, children }: LayoutProps) {
+  const picture = isPicture(options.background);
+  return (
+    <div className={`deck-layout deck-layout-cover${picture ? " classic-on-image" : ""}`}>
+      {picture ? <div className="classic-dim" aria-hidden="true" /> : null}
+      {children}
+    </div>
+  );
+}
+
+export default {
+  layouts: { cover: Cover },
+};

package/package.json

@@ -1,6 +1,88 @@
 {
   "name": "@kadal/theme-classic",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.4.1",
+  "description": "Classic: Slidev's default theme, ported to Kadal Deck. Avenir Next, light headings, square bullets, light and dark.",
+  "keywords": [
+    "kadal-theme",
+    "kadal-deck",
+    "presentation",
+    "slides",
+    "theme",
+    "slidev-port"
+  ],
+  "homepage": "https://deck.kadal.cc/docs/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kadalcc/deck.git",
+    "directory": "packages/theme-classic"
+  },
+  "bugs": {
+    "url": "https://github.com/kadalcc/deck/issues"
+  },
+  "license": "MIT",
+  "author": "Mithunish Prabhakaran <pmithunish@gmail.com>",
+  "type": "module",
+  "files": [
+    "style.css",
+    "index.tsx",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": "./index.tsx",
+    "./style.css": "./style.css",
+    "./package.json": "./package.json"
+  },
+  "kadal": {
+    "theme": {
+      "name": "classic",
+      "title": "Classic",
+      "description": "Slidev's default theme: Avenir Next, light headings, square bullets.",
+      "colorScheme": "both",
+      "themeConfig": {
+        "primary": "#3ab9d5"
+      },
+      "config": {
+        "fonts": {
+          "sans": "Avenir Next,Nunito Sans",
+          "mono": "Fira Code",
+          "local": "Avenir Next",
+          "weights": "300,400,500,600,700"
+        }
+      },
+      "shiki": {
+        "light": "vitesse-light",
+        "dark": "vitesse-dark"
+      },
+      "defaults": {},
+      "layouts": [
+        "cover"
+      ],
+      "components": []
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "dev": "kadal-deck dev -C preview",
+    "build": "kadal-deck build -C preview",
+    "check": "kadal-deck check -C preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@kadal/deck": "^0.4.1",
+    "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"
+  }
+}

package/style.css

@@ -0,0 +1,355 @@
+/* Classic — a port of Slidev's default theme (@slidev/theme-default, MIT, © 2021 Slidev.js
+   Team) to Kadal Deck. Avenir Next (Nunito Sans where it is not installed), light headings,
+   square bullets, dashed links, a cyan primary; white on #121212 in the dark.
+
+   Units. Slidev draws on a 980px-wide canvas with a 16px rem and a 1.1rem body; Kadal draws on a
+   1920px one. Everything here is in `--classic-rem`, one Slidev rem at Kadal's scale, worked out
+   from the slide's base size the way Slidev's body is (1.1rem), so the proportions are Slidev's
+   exactly and a deck that changes --deck-base-size scales the whole theme with it.
+
+   Headings are weight 400 unless a layout says otherwise: Slidev's reset (Uno's preflight) makes
+   every heading inherit the body weight, and the default theme never sets one back.
+
+   themeConfig: `primary` → --theme-primary (links on hover, the quote's rule, the progress
+   bar). */
+
+.theme-classic {
+  --classic-rem: calc(var(--deck-base-size) / 1.1);
+  /* colour (Slidev's bg-main / text-main / border-main / code background) */
+  --deck-bg: #ffffff;
+  --deck-fg: #181818;
+  --deck-muted: #737373;
+  --deck-accent: var(--theme-primary, #3ab9d5);
+  --deck-accent-2: #2993a3;
+  --deck-surface: #f5f5f5;
+  --deck-border: rgba(156, 163, 175, 0.2);
+  --deck-live: var(--theme-primary, #3ab9d5);
+  /* type: config.fonts (package.json) points these at Avenir Next and Fira Code */
+  --deck-heading-font: "Avenir Next", "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
+  --deck-body-font: "Avenir Next", "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
+  --deck-mono-font: "Fira Code", ui-monospace, "SF Mono", Menlo, monospace;
+  --deck-serif-font: ui-serif, Georgia, Cambria, "Times New Roman", serif;
+  --deck-base-size: 34.5px;
+  /* code */
+  --deck-code-bg: #f5f5f5;
+  --deck-code-fg: #1b1b1b;
+  --deck-code-active: rgba(58, 185, 213, 0.1);
+  /* shape: Slidev's 2.5rem × 3.5rem page padding; --deck-pad is the wider of the two */
+  --deck-radius: calc(var(--classic-rem) * 0.25);
+  --deck-pad: calc(var(--classic-rem) * 3.5);
+  --deck-transition: 500ms;
+  --deck-controls-color: var(--deck-fg);
+}
+.theme-classic[data-color-scheme="dark"] {
+  --deck-bg: #121212;
+  --deck-fg: #dddddd;
+  --deck-muted: #8a8a8a;
+  --deck-accent-2: #54b1bf;
+  --deck-surface: #1b1b1b;
+  --deck-border: rgba(156, 163, 175, 0.2);
+  --deck-code-bg: #1b1b1b;
+  --deck-code-fg: #eeeeee;
+  --deck-code-active: rgba(58, 185, 213, 0.16);
+}
+
+/* ── the page ─────────────────────────────────────────────────────────── */
+.theme-classic .deck-slide {
+  padding: calc(var(--classic-rem) * 2.5) calc(var(--classic-rem) * 3.5);
+  line-height: 1.5;
+}
+/* A `background:` covers the padding box: undo the two paddings, not one --deck-pad. */
+.theme-classic .deck-slide-background {
+  inset: calc(var(--classic-rem) * -2.5) calc(var(--classic-rem) * -3.5);
+}
+
+/* ── type (Slidev's layouts-base.css and the theme's layouts.css) ─────── */
+.theme-classic .deck-slide :is(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--deck-heading-font);
+  font-weight: 400;
+  letter-spacing: normal;
+  margin: 0;
+  text-wrap: wrap;
+}
+.theme-classic .deck-slide h1 {
+  font-size: calc(var(--classic-rem) * 2.25);
+  line-height: calc(var(--classic-rem) * 2.5);
+  margin-bottom: var(--classic-rem);
+  margin-inline-start: -0.05em;
+}
+.theme-classic .deck-slide h2 {
+  font-size: calc(var(--classic-rem) * 1.875);
+  line-height: calc(var(--classic-rem) * 2.25);
+}
+.theme-classic .deck-slide h3 {
+  font-size: calc(var(--classic-rem) * 1.5);
+  line-height: calc(var(--classic-rem) * 2);
+}
+.theme-classic .deck-slide h4 {
+  font-size: calc(var(--classic-rem) * 1.25);
+  line-height: calc(var(--classic-rem) * 1.75);
+}
+.theme-classic .deck-slide h5 {
+  font-size: var(--classic-rem);
+  line-height: calc(var(--classic-rem) * 1.5);
+}
+.theme-classic .deck-slide h6 {
+  font-size: calc(var(--classic-rem) * 0.875);
+  line-height: calc(var(--classic-rem) * 1.25);
+  padding-top: calc(var(--classic-rem) * 0.25);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 500;
+  margin-inline-start: -0.05em;
+}
+.theme-classic .deck-slide h6:not(.opacity-100) {
+  opacity: 0.4;
+}
+.theme-classic .deck-slide p {
+  margin: var(--classic-rem) 0;
+  line-height: calc(var(--classic-rem) * 1.5);
+}
+.theme-classic .deck-slide h1 + p {
+  margin-top: calc(var(--classic-rem) * -0.5);
+  margin-bottom: var(--classic-rem);
+  opacity: 0.5;
+}
+.theme-classic .deck-slide :is(p, ul, table) + h2 {
+  margin-top: calc(var(--classic-rem) * 2.5);
+}
+.theme-classic .deck-slide :is(ul, ol) {
+  margin: 0;
+  padding: 0;
+}
+.theme-classic .deck-slide ul {
+  list-style: square;
+}
+.theme-classic .deck-slide ol {
+  list-style: decimal;
+}
+.theme-classic .deck-slide li {
+  margin: 0 0 0 1.1em;
+  padding-inline-start: 0.2em;
+  line-height: 1.8em;
+}
+.theme-classic .deck-slide blockquote {
+  margin: 0;
+  padding: calc(var(--classic-rem) * 0.25) calc(var(--classic-rem) * 0.5);
+  font-size: calc(var(--classic-rem) * 0.875);
+  line-height: calc(var(--classic-rem) * 1.25);
+  font-style: normal;
+  color: var(--deck-code-fg);
+  background: var(--deck-code-bg);
+  border: 0;
+  border-inline-start: 1px solid var(--deck-accent);
+  border-radius: calc(var(--classic-rem) * 0.25);
+}
+.theme-classic .deck-slide blockquote > * {
+  margin-block: 0;
+}
+.theme-classic .deck-slide table {
+  width: 100%;
+  font-size: 1em;
+  line-height: calc(var(--classic-rem) * 1.5);
+}
+.theme-classic .deck-slide :is(th, td) {
+  padding: calc(var(--classic-rem) * 0.75) calc(var(--classic-rem) * 0.5);
+  border-bottom: 1px solid var(--deck-border);
+}
+.theme-classic .deck-slide th {
+  text-align: left;
+  font-size: 1em;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: normal;
+  color: inherit;
+}
+.theme-classic .deck-slide a {
+  color: inherit;
+  text-decoration: none;
+  border-bottom: 1px dashed currentColor;
+}
+.theme-classic .deck-slide a:hover {
+  color: var(--deck-accent);
+  border-bottom-style: solid;
+}
+.theme-classic .deck-slide :is(b, strong) {
+  font-weight: 600;
+}
+.theme-classic .deck-slide :not(pre) > code {
+  font-family: var(--deck-mono-font);
+  font-size: 0.9em;
+  font-weight: 300;
+  padding: calc(var(--classic-rem) * 0.125) calc(var(--classic-rem) * 0.375);
+  background: var(--deck-code-bg);
+  border-radius: calc(var(--classic-rem) * 0.25);
+}
+.theme-classic .deck-slide :is(kbd, .deck-kbd) {
+  font-family: var(--deck-mono-font);
+  font-size: calc(var(--classic-rem) * 0.75);
+  padding: calc(var(--classic-rem) * 0.125) calc(var(--classic-rem) * 0.25);
+  border: 1px solid var(--deck-border);
+  border-bottom-width: 2px;
+  border-radius: calc(var(--classic-rem) * 0.25);
+  background: rgba(156, 163, 175, 0.05);
+  box-shadow: none;
+}
+
+/* ── code: Slidev's 12px / 18px blocks with a 4px corner and no border ── */
+.theme-classic .deck-code-block {
+  margin: calc(var(--classic-rem) * 0.25) 0;
+  border: 0;
+  border-radius: calc(var(--classic-rem) * 0.25);
+}
+.theme-classic pre.deck-code,
+.theme-classic .shiki-magic-move-wrap {
+  font-size: calc(var(--classic-rem) * 0.75);
+  line-height: calc(var(--classic-rem) * 1.125);
+  padding: calc(var(--classic-rem) * 0.5) 0;
+}
+.theme-classic .shiki-magic-move-wrap {
+  padding-inline: calc(var(--classic-rem) * 0.5);
+}
+.theme-classic pre.deck-code .line {
+  padding: 0 calc(var(--classic-rem) * 0.5);
+}
+.theme-classic pre.deck-code .line.is-dim {
+  opacity: 0.3;
+}
+.theme-classic .deck-code-title {
+  font-size: calc(var(--classic-rem) * 0.75);
+  padding: calc(var(--classic-rem) * 0.5);
+  border-bottom-color: var(--deck-border);
+}
+
+/* ── the layouts ──────────────────────────────────────────────────────── */
+.theme-classic .deck-layout-default {
+  justify-content: flex-start;
+}
+/* Slidev's center does not centre the text by itself (its examples add `text-center`); Kadal's
+   does, which reads the same for a title and better for a line or two. */
+.theme-classic .deck-layout-center {
+  justify-content: center;
+}
+.theme-classic :is(.deck-layout-cover, .deck-layout-intro) {
+  align-items: stretch;
+  text-align: start;
+}
+.theme-classic :is(.deck-layout-cover, .deck-layout-intro) h1 {
+  font-size: calc(var(--classic-rem) * 3.75);
+  line-height: calc(var(--classic-rem) * 5);
+}
+/* cover with a background image: Slidev's dim (#0005 → #0008) and white words */
+.theme-classic .deck-layout-cover.classic-on-image {
+  color: #fff;
+}
+.theme-classic .classic-dim {
+  position: absolute;
+  inset: calc(var(--classic-rem) * -2.5) calc(var(--classic-rem) * -3.5);
+  background: linear-gradient(rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.533));
+  pointer-events: none;
+}
+/* The dim sits under the words without lifting each one (`position: relative` on every child
+   would pin a deck's own `absolute` corners, Slidev's `abs-br`, back into the flow). */
+.theme-classic .deck-layout-cover.classic-on-image {
+  isolation: isolate;
+}
+.theme-classic .classic-on-image > .classic-dim {
+  z-index: -1;
+}
+.theme-classic .deck-layout-section {
+  align-items: stretch;
+  text-align: center;
+}
+.theme-classic .deck-layout-section h1 {
+  font-size: calc(var(--classic-rem) * 3.75);
+  line-height: calc(var(--classic-rem) * 5);
+  font-weight: 500;
+}
+.theme-classic .deck-layout-statement {
+  text-align: center;
+}
+.theme-classic .deck-layout-statement h1 {
+  font-size: calc(var(--classic-rem) * 3.75);
+  line-height: 1;
+  font-weight: 700;
+}
+.theme-classic .deck-layout-fact {
+  text-align: center;
+}
+.theme-classic .deck-layout-fact > :is(h1, h2, p, .deck-counter) {
+  letter-spacing: normal;
+}
+.theme-classic .deck-layout-fact h1 {
+  font-size: calc(var(--classic-rem) * 6);
+  line-height: 1;
+  font-weight: 700;
+}
+.theme-classic .deck-layout-fact h1 + p {
+  font-size: calc(var(--classic-rem) * 1.5);
+  line-height: calc(var(--classic-rem) * 2);
+  font-weight: 700;
+}
+.theme-classic .deck-layout-quote {
+  padding-inline: 0;
+  font-size: 1em;
+  font-style: normal;
+  align-items: stretch;
+}
+.theme-classic .deck-layout-quote h1 + p {
+  margin-top: calc(var(--classic-rem) * 0.5);
+}
+/* Slidev's built-in end: white letters, spaced, on black, "END" when the slide is empty */
+.theme-classic .deck-slide.layout-end {
+  background: #000;
+}
+.theme-classic .deck-layout-end {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: calc(var(--classic-rem) * 1.25);
+  letter-spacing: 0.1em;
+  user-select: none;
+}
+.theme-classic .deck-layout-end:empty::before {
+  content: "END";
+}
+.theme-classic .deck-layout-full {
+  padding: 0;
+}
+.theme-classic .deck-layout-two-cols {
+  column-gap: var(--classic-rem);
+}
+.theme-classic .deck-layout-two-cols-header {
+  column-gap: var(--classic-rem);
+}
+/* image-left / image-right / image: the picture flush to the edge, the words on Slidev's page
+   padding from the top (a .slidev-layout default beside the picture), not centred */
+.theme-classic :is(.deck-layout-image-left, .deck-layout-image-right) .deck-layout-image-content,
+.theme-classic :is(.deck-layout-iframe-left, .deck-layout-iframe-right) .deck-layout-iframe-content {
+  justify-content: flex-start;
+  padding: calc(var(--classic-rem) * 2.5) calc(var(--classic-rem) * 3.5);
+}
+.theme-classic .deck-layout-image .deck-layout-image-content {
+  inset: 0;
+  justify-content: flex-start;
+  padding: calc(var(--classic-rem) * 2.5) calc(var(--classic-rem) * 3.5);
+  background: none;
+}
+.theme-classic .deck-layout-image .deck-layout-image-content:empty {
+  display: none;
+}
+.theme-classic :is(.deck-layout-iframe, .deck-layout-iframe-left, .deck-layout-iframe-right) {
+  padding: 0;
+  gap: 0;
+}
+.theme-classic .deck-frame.deck-layout-iframe-pane {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.theme-classic .deck-layout-two-cols-header > .deck-slot-bottom {
+  align-self: end;
+}
+
+/* ── chrome ───────────────────────────────────────────────────────────── */
+.theme-classic .deck-progress span {
+  background: var(--deck-accent);
+}