@subroh0508/marp-theme-canvas 0.0.1

package/css/white-canvas.css

@@ -0,0 +1,540 @@
+@charset "UTF-8";
+/*!
+ * White Canvas - 極力余計なスタイリングを廃した、シンプルなスライドテーマ
+ *
+ * 使用時はMarpのインラインスタイル指定で以下の変数を必ず定義してください。
+ * - --color-primary: メインカラー（h2の文字色など）
+ * - --color-accent: アクセントカラー（markタグの背景色など）
+ *
+ * 例:
+ *   style: |
+ *     :root {
+ *       --color-primary: #3b91c4;
+ *       --color-accent: #ead7a4;
+ *     }
+ *
+ * @theme white-canvas
+ * @author subroh_0508
+ *
+ * @auto-scaling true
+ * @size 16:9 1920px 1080px
+ */
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap");
+:root {
+  --color-black: #000;
+  --color-white: #fff;
+  --color-grey-lightest: #cbd5e1;
+  --color-grey-lighter: #94a3b8;
+  --color-grey-light: #64748b;
+  --color-grey-medium: #475569;
+  --color-grey-dark: #334155;
+  --color-grey-darker: #1e293b;
+  --color-grey-darkest: #0f172a;
+  --color-blockquote-background: color-mix(in srgb, var(--color-grey-light) 10%, transparent);
+  --color-blockquote-mark: var(--color-grey-medium);
+  --color-blockquote-text: var(--color-grey-medium);
+  --color-table-row-bg: var(--color-white);
+  --color-table-row-bg-header: var(--color-grey-lightest);
+  --color-table-border: var(--color-grey-light);
+  --color-code-bg: color-mix(in srgb, var(--color-grey-light) 10%, transparent);
+  --color-code-fg: var(--color-grey-darkest);
+  --color-link: #2563eb;
+  --font-family-base: 'Noto Sans JP', sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  --font-size-base: 40px;
+  --font-size-display: 2.5em;
+  --font-size-title: 2em;
+  --font-size-heading: 1.3em;
+  --font-size-medium: 1.15em;
+  --font-size-body: 1em;
+  --font-size-small: 0.85em;
+  --font-size-note: 0.7em;
+  --font-weight-normal: 400;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.45;
+  --line-height-loose: 2;
+  --slide-padding-x: 80px;
+  --slide-padding-y: 80px;
+  --header-footer-margin-x: 80px;
+  --header-footer-margin-y: 20px;
+  --border-radius: 8px;
+}
+
+section pre :where(.hljs) {
+  color: #1f2328;
+}
+section pre :where(.hljs-doctag),
+section pre :where(.hljs-keyword),
+section pre :where(.hljs-meta .hljs-keyword),
+section pre :where(.hljs-template-tag),
+section pre :where(.hljs-template-variable),
+section pre :where(.hljs-type),
+section pre :where(.hljs-variable.language_) {
+  color: #cf222e;
+}
+section pre :where(.hljs-title),
+section pre :where(.hljs-title.class_),
+section pre :where(.hljs-title.class_.inherited__),
+section pre :where(.hljs-title.function_) {
+  color: #6639ba;
+}
+section pre :where(.hljs-attr),
+section pre :where(.hljs-attribute),
+section pre :where(.hljs-literal),
+section pre :where(.hljs-meta),
+section pre :where(.hljs-number),
+section pre :where(.hljs-operator),
+section pre :where(.hljs-selector-attr),
+section pre :where(.hljs-selector-class),
+section pre :where(.hljs-selector-id),
+section pre :where(.hljs-variable) {
+  color: #0550ae;
+}
+section pre :where(.hljs-string),
+section pre :where(.hljs-meta .hljs-string),
+section pre :where(.hljs-regexp) {
+  color: #0a3069;
+}
+section pre :where(.hljs-built_in),
+section pre :where(.hljs-symbol) {
+  color: #953800;
+}
+section pre :where(.hljs-code),
+section pre :where(.hljs-comment),
+section pre :where(.hljs-formula) {
+  color: #59636e;
+}
+section pre :where(.hljs-name),
+section pre :where(.hljs-quote),
+section pre :where(.hljs-selector-pseudo),
+section pre :where(.hljs-selector-tag) {
+  color: #0550ae;
+}
+section pre :where(.hljs-subst) {
+  color: #1f2328;
+}
+section pre :where(.hljs-section) {
+  font-weight: bold;
+  color: #0550ae;
+}
+section pre :where(.hljs-bullet) {
+  color: #3b2300;
+}
+section pre :where(.hljs-emphasis) {
+  font-style: italic;
+  color: #1f2328;
+}
+section pre :where(.hljs-strong) {
+  font-weight: bold;
+  color: #1f2328;
+}
+section pre :where(.hljs-addition) {
+  color: #116329;
+  background-color: #dafbe1;
+}
+section pre :where(.hljs-deletion) {
+  color: #82071e;
+  background-color: #ffebe9;
+}
+section {
+  width: 1920px;
+  height: 1080px;
+  padding: var(--slide-padding-y) var(--slide-padding-x);
+  background-color: var(--color-white);
+  color: var(--color-grey-darkest);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+section p,
+section ul,
+section ol,
+section blockquote,
+section pre {
+  margin-top: 0;
+}
+section ul,
+section ol {
+  padding-inline-start: 1.3em;
+}
+section::after {
+  position: absolute;
+  padding: 0;
+  right: var(--header-footer-margin-x);
+  bottom: var(--header-footer-margin-y);
+  font-size: var(--font-size-note);
+  color: var(--color-grey-medium);
+}
+section.title h1 {
+  font-size: var(--font-size-display);
+  flex: 0 0 80%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 0;
+}
+section.title h1 small {
+  margin-top: 0.5em;
+  font-size: 0.5em;
+}
+section.title h1 + p {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  text-align: right;
+  color: var(--color-grey-light);
+  margin: 0;
+}
+section.section p {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: var(--font-size-title);
+  font-weight: bold;
+  margin: 0;
+}
+section.toc > ul,
+section.toc > ol {
+  font-size: var(--font-size-heading);
+  line-height: var(--line-height-loose);
+}
+section.agenda > ul,
+section.agenda > ol {
+  font-size: var(--font-size-heading);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-loose);
+}
+section.agenda > ul ul,
+section.agenda > ul ol,
+section.agenda > ol ul,
+section.agenda > ol ol {
+  font-size: calc(var(--font-size-body) / var(--font-size-heading) * 1em);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-normal);
+}
+section.agenda > ul ul ul,
+section.agenda > ul ul ol,
+section.agenda > ul ol ul,
+section.agenda > ul ol ol,
+section.agenda > ol ul ul,
+section.agenda > ol ul ol,
+section.agenda > ol ol ul,
+section.agenda > ol ol ol {
+  font-size: 1em;
+}
+section.display {
+  justify-content: center;
+  align-items: center;
+}
+section.display p {
+  margin: 0;
+  text-align: center;
+}
+section.display:not(:has(img)) p {
+  font-size: var(--font-size-display);
+  font-weight: var(--font-weight-bold);
+}
+section.display img {
+  display: block;
+  margin: 0 0;
+}
+section.display:has(p) img {
+  margin: 0 0 1em;
+}
+section.columns {
+  flex-direction: row;
+  gap: 1em;
+}
+section.columns > .column {
+  flex: 1;
+  min-width: 0;
+}
+section.columns > .column > *,
+section.columns > .column p > * {
+  max-width: 100%;
+}
+section.columns > .column-2 {
+  flex: 2;
+  min-width: 0;
+}
+section.columns > .column-2 > *,
+section.columns > .column-2 p > * {
+  max-width: 100%;
+}
+section.columns > .column-3 {
+  flex: 3;
+  min-width: 0;
+}
+section.columns > .column-3 > *,
+section.columns > .column-3 p > * {
+  max-width: 100%;
+}
+section.columns > .column-4 {
+  flex: 4;
+  min-width: 0;
+}
+section.columns > .column-4 > *,
+section.columns > .column-4 p > * {
+  max-width: 100%;
+}
+section.columns > .column-6 {
+  flex: 6;
+  min-width: 0;
+}
+section.columns > .column-6 > *,
+section.columns > .column-6 p > * {
+  max-width: 100%;
+}
+section.columns > .column-7 {
+  flex: 7;
+  min-width: 0;
+}
+section.columns > .column-7 > *,
+section.columns > .column-7 p > * {
+  max-width: 100%;
+}
+section.columns > .column-8 {
+  flex: 8;
+  min-width: 0;
+}
+section.columns > .column-8 > *,
+section.columns > .column-8 p > * {
+  max-width: 100%;
+}
+section .columns {
+  display: flex;
+  gap: 1em;
+  width: 100%;
+}
+section .columns > .column {
+  flex: 1;
+  min-width: 0;
+}
+section .columns > .column > *,
+section .columns > .column p > * {
+  max-width: 100%;
+}
+section .columns > .column-2 {
+  flex: 2;
+  min-width: 0;
+}
+section .columns > .column-2 > *,
+section .columns > .column-2 p > * {
+  max-width: 100%;
+}
+section .columns > .column-3 {
+  flex: 3;
+  min-width: 0;
+}
+section .columns > .column-3 > *,
+section .columns > .column-3 p > * {
+  max-width: 100%;
+}
+section .columns > .column-4 {
+  flex: 4;
+  min-width: 0;
+}
+section .columns > .column-4 > *,
+section .columns > .column-4 p > * {
+  max-width: 100%;
+}
+section .columns > .column-6 {
+  flex: 6;
+  min-width: 0;
+}
+section .columns > .column-6 > *,
+section .columns > .column-6 p > * {
+  max-width: 100%;
+}
+section .columns > .column-7 {
+  flex: 7;
+  min-width: 0;
+}
+section .columns > .column-7 > *,
+section .columns > .column-7 p > * {
+  max-width: 100%;
+}
+section .columns > .column-8 {
+  flex: 8;
+  min-width: 0;
+}
+section .columns > .column-8 > *,
+section .columns > .column-8 p > * {
+  max-width: 100%;
+}
+
+header {
+  position: absolute;
+  top: var(--header-footer-margin-y);
+  left: var(--header-footer-margin-x);
+  font-size: var(--font-size-note);
+  color: var(--color-grey-medium);
+}
+
+footer {
+  position: absolute;
+  bottom: var(--header-footer-margin-y);
+  left: var(--header-footer-margin-x);
+  font-size: var(--font-size-note);
+  color: var(--color-grey-medium);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: var(--line-height-tight);
+  margin: 0 0 0.5em;
+}
+
+h1 {
+  font-size: var(--font-size-title);
+  font-weight: var(--font-weight-bold);
+  color: inherit;
+}
+
+h2 {
+  font-size: var(--font-size-heading);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
+  margin: 0 0 0.8em;
+}
+
+h3 {
+  font-size: var(--font-size-medium);
+  font-weight: var(--font-weight-bold);
+  color: inherit;
+}
+
+h4 {
+  font-size: 1em;
+  font-weight: var(--font-weight-bold);
+  color: inherit;
+}
+
+h5 {
+  font-size: 1em;
+  font-weight: var(--font-weight-normal);
+  color: inherit;
+}
+
+h6 {
+  font-size: 1em;
+  font-weight: var(--font-weight-normal);
+  color: inherit;
+}
+
+blockquote {
+  position: relative;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0.5em 0.5em 0.5em 2em;
+  font-size: var(--font-size-body);
+  font-style: italic;
+  line-height: var(--line-height-tight);
+  color: var(--color-blockquote-text);
+  background: var(--color-blockquote-background);
+  border-radius: var(--border-radius);
+}
+blockquote::before {
+  content: "“";
+  position: absolute;
+  left: 0.2em;
+  font-size: 2em;
+  line-height: 1;
+  color: var(--color-blockquote-mark);
+}
+blockquote > :first-child {
+  margin-top: 0;
+}
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+strong {
+  font-weight: var(--font-weight-bold);
+}
+
+mark {
+  font-weight: var(--font-weight-bold);
+  background-color: var(--color-accent);
+}
+
+rp {
+  font-weight: var(--font-weight-normal);
+}
+
+a {
+  color: var(--color-link);
+  text-decoration: underline;
+}
+a:hover {
+  text-decoration: none;
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+}
+
+th, td {
+  padding: 6px 13px;
+  border: 1px solid var(--color-table-border);
+}
+
+th {
+  font-weight: 600;
+  background-color: var(--color-table-row-bg-header);
+}
+
+tr {
+  background-color: var(--color-table-row-bg);
+  border-top: 1px solid var(--color-table-border);
+}
+
+tr:nth-child(2n) {
+  background-color: var(--color-table-row-bg);
+}
+
+code, tt {
+  font-family: var(--font-family-mono);
+  padding: 0.2em 0.4em;
+  font-size: 85%;
+  white-space: break-spaces;
+  background-color: var(--color-code-bg);
+  border-radius: 6px;
+}
+
+pre {
+  font-family: var(--font-family-mono);
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  color: var(--color-code-fg);
+  background-color: var(--color-code-bg);
+  border-radius: 6px;
+}
+
+pre > code {
+  padding: 0;
+  background: transparent;
+  border: 0;
+  white-space: pre;
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@subroh0508/marp-theme-canvas",
+  "version": "0.0.1",
+  "description": "A simple Marp theme with minimal styling",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/subroh0508/marp-theme-canvas.git"
+  },
+  "homepage": "https://github.com/subroh0508/marp-theme-canvas#readme",
+  "bugs": {
+    "url": "https://github.com/subroh0508/marp-theme-canvas/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sass": "scss/_index.scss",
+  "exports": {
+    ".": {
+      "sass": "./scss/_index.scss"
+    },
+    "./white-canvas": {
+      "sass": "./scss/white-canvas.scss",
+      "style": "./css/white-canvas.css"
+    },
+    "./black-canvas": {
+      "sass": "./scss/black-canvas.scss",
+      "style": "./css/black-canvas.css"
+    },
+    "./scss": {
+      "sass": "./scss/_index.scss"
+    },
+    "./scss/*": {
+      "sass": "./scss/*"
+    },
+    "./scss/component": {
+      "sass": "./scss/component/_index.scss"
+    },
+    "./scss/component/*": {
+      "sass": "./scss/component/*"
+    },
+    "./scss/page": {
+      "sass": "./scss/page/_index.scss"
+    },
+    "./scss/page/*": {
+      "sass": "./scss/page/*"
+    },
+    "./css/*": "./css/*"
+  },
+  "files": [
+    "css",
+    "scss",
+    "LICENSE"
+  ],
+  "keywords": [
+    "marp",
+    "marp-theme",
+    "slide",
+    "presentation"
+  ],
+  "author": {
+    "name": "Subroh Nishikori",
+    "email": "subroh.0508@gmail.com"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@marp-team/marp-cli": "^4.2.3",
+    "sass": "^1.97.2"
+  },
+  "scripts": {
+    "serve": "marp --allow-local-files --html --theme-set css/*.css -s demo",
+    "build": "for f in scss/[!_]*.scss; do sass --no-source-map $f css/$(basename ${f%.scss}.css); done"
+  }
+}

package/scss/CLAUDE.md

@@ -0,0 +1,59 @@
+# scss
+
+Marpテーマ用SCSSファイル
+
+## ディレクトリ構成
+
+- `page/` - 特定用途に特化したページスタイル（title、section、toc、agenda、display）
+- `component/` - スライド共通で使用する要素のスタイル（heading、table、code、blockquote等）
+
+## 共通命名規約
+
+- ファイル名: `_名前.scss`（アンダースコアプレフィックス必須、Sassパーシャル）
+- 名前: kebab-case（例: `title`, `text-decorator`）
+
+## @mixin configure() 規約
+
+全てのスタイルファイルは `@mixin configure()` でカプセル化する。
+
+### 引数の設計
+
+- **必須引数**: デフォルト値なし、リストの先頭に配置
+- **任意引数**: デフォルト値あり、リストの後方に配置
+- **命名**: セマンティックな名前を使用
+
+### 引数の命名パターン
+
+| 接頭辞 | 用途 | 例 |
+|--------|------|-----|
+| `$font-size-*` | フォントサイズ | `$font-size-title`, `$font-size-body` |
+| `$font-weight-*` | フォントウェイト | `$font-weight-bold`, `$font-weight-normal` |
+| `$font-family` | フォントファミリー | `$font-family`, `$font-mono` |
+| `$color-*` | 色 | `$color-text`, `$color-bg`, `$color-border` |
+| `$line-height-*` | 行間 | `$line-height-heading`, `$line-height-body` |
+| `$margin-*` | マージン | `$margin-x`, `$margin-y` |
+| `$padding-*` | パディング | `$padding-x`, `$padding-y` |
+| `$border-radius` | 角丸 | `$border-radius` |
+
+## 実装上のルール
+
+- **CSS変数の宣言・参照はテーマファイルのみ**: `var(--*)` の宣言および参照は `scss/` 直下に配置されたテーマファイル（例: `white-canvas.scss`）でのみ許可
+  - 理由: Marp用Markdownファイルのフロントマターでインラインスタイルとして変数を上書きし、スライドごとにスタイルを柔軟にカスタマイズできるようにするため
+  - 例: Markdownファイルで `--color-primary` を上書き
+    ```markdown
+    ---
+    theme: white-canvas
+    style: |
+      :root {
+        --color-primary: #3b91c4;
+        --color-accent: #ead7a4;
+      }
+    ---
+    ```
+- **page/ component/ 配下では禁止**: サブディレクトリ内のスタイルファイルでは CSS変数を直接参照しない。必要な値は全て `@mixin configure()` の引数として受け取る
+  - 理由: テーマとスタイルの疎結合を保つため
+  - テーマ側で `@include` 時に CSS変数を引数として渡す
+
+## 注意事項
+
+- コメントは `/*!` で始める（`/*` ではない）ことでCSSに出力される

package/scss/_index.scss

@@ -0,0 +1,27 @@
+@charset "utf-8";
+
+/*!
+ * Marp Theme Canvas - 極力余計なスタイリングを廃した、シンプルなスライドテーマ
+ *
+ * Usage:
+ *   // 全モジュールをインポート
+ *   @use '@subroh0508/marp-theme-canvas/scss';
+ *
+ *   // コンポーネントのみ
+ *   @use '@subroh0508/marp-theme-canvas/scss/component';
+ *
+ *   // 特定のコンポーネント
+ *   @use '@subroh0508/marp-theme-canvas/scss/component/heading';
+ *
+ *   // ページスタイルのみ
+ *   @use '@subroh0508/marp-theme-canvas/scss/page';
+ *
+ *   // 特定のページスタイル
+ *   @use '@subroh0508/marp-theme-canvas/scss/page/title';
+ */
+
+// コンポーネント
+@forward 'component' as component-*;
+
+// ページスタイル
+@forward 'page' as page-*;