@subroh0508/marp-theme-canvas 0.0.3 → 0.0.4

package/css/white-canvas.css

@@ -1,12 +1,12 @@
 @charset "UTF-8";
 /*!
- * White Canvas - 極力余計なスタイリングを廃した、シンプルなスライドテーマ
+ * White Canvas - A simple slide theme with minimal styling
  *
- * 使用時はMarpのインラインスタイル指定で以下の変数を必ず定義してください。
- * - --color-primary: メインカラー（h2の文字色など）
- * - --color-accent: アクセントカラー（markタグの背景色など）
+ * When using, you must define the following variables in Marp's inline style:
+ * - --color-primary: Primary color (e.g., h2 text color)
+ * - --color-accent: Accent color (e.g., mark tag background)
  *
- * 例:
+ * Example:
  *   style: |
  *     :root {
  *       --color-primary: #3b91c4;
@@ -18,8 +18,27 @@
  *
  * @auto-scaling true
  * @size 16:9 1920px 1080px
+ *
+ * MIT License
+ * Copyright (c) 2026 Subroh Nishikori
+ * https://github.com/subroh0508/marp-theme-canvas/blob/main/LICENSE
+ */
+/*!
+ * MIT License
+ * Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+ * https://github.com/sindresorhus/github-markdown-css/blob/main/license
  */
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap");
+/*!
+ * MIT License
+ * Copyright (c) 2018 Marp team (marp-team@marp.app)
+ * https://github.com/marp-team/marp-core/blob/main/LICENSE
+ */
+/*!
+ * MIT License
+ * Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+ * https://github.com/sindresorhus/github-markdown-css/blob/main/license
+ */
 :root {
   --color-black: #000;
   --color-white: #fff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@subroh0508/marp-theme-canvas",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A simple Marp theme with minimal styling",
   "repository": {
     "type": "git",
@@ -26,6 +26,15 @@
       "sass": "./scss/black-canvas.scss",
       "style": "./css/black-canvas.css"
     },
+    "./scss/white-canvas": {
+      "sass": "./scss/theme/_white-canvas.scss"
+    },
+    "./scss/black-canvas": {
+      "sass": "./scss/theme/_black-canvas.scss"
+    },
+    "./scss/theme/*": {
+      "sass": "./scss/theme/*"
+    },
     "./scss": {
       "sass": "./scss/_index.scss"
     },
@@ -67,7 +76,8 @@
     "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"
+    "serve": "marp --allow-local-files --html -s demo",
+    "build": "for f in scss/[!_]*.scss; do sass --no-source-map $f css/$(basename ${f%.scss}.css); done",
+    "build:demo": "marp --allow-local-files --html --input-dir demo --output public"
   }
 }

package/scss/_index.scss

@@ -1,27 +1,36 @@
 @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';
- */
+// Marp Theme Canvas - A simple slide theme with minimal styling
+//
+// Usage:
+//   // Import all modules
+//   @use '@subroh0508/marp-theme-canvas/scss';
+//
+//   // Customize and use theme
+//   @use '@subroh0508/marp-theme-canvas/scss/white-canvas' as white-canvas;
+//   @include white-canvas.apply() {
+//     --color-primary: #e11d48;
+//     --color-accent: #fde047;
+//   }
+//
+//   // Components only
+//   @use '@subroh0508/marp-theme-canvas/scss/component';
+//
+//   // Specific component
+//   @use '@subroh0508/marp-theme-canvas/scss/component/heading';
+//
+//   // Page styles only
+//   @use '@subroh0508/marp-theme-canvas/scss/page';
+//
+//   // Specific page style
+//   @use '@subroh0508/marp-theme-canvas/scss/page/title';
 
-// コンポーネント
+// Themes
+@forward 'theme/white-canvas' as white-canvas-*;
+@forward 'theme/black-canvas' as black-canvas-*;
+
+// Components
 @forward 'component' as component-*;
 
-// ページスタイル
+// Page styles
 @forward 'page' as page-*;

package/scss/black-canvas.scss

@@ -1,11 +1,11 @@
 /*!
- * Black Canvas - 極力余計なスタイリングを廃した、シンプルなダークスライドテーマ
+ * Black Canvas - A simple dark slide theme with minimal styling
  *
- * 使用時はMarpのインラインスタイル指定で以下の変数を必ず定義してください。
- * - --color-primary: メインカラー（h2の文字色など）
- * - --color-accent: アクセントカラー（markタグの背景色など）
+ * When using, you must define the following variables in Marp's inline style:
+ * - --color-primary: Primary color (e.g., h2 text color)
+ * - --color-accent: Accent color (e.g., mark tag background)
  *
- * 例:
+ * Example:
  *   style: |
  *     :root {
  *       --color-primary: #3b91c4;
@@ -17,217 +17,16 @@
  *
  * @auto-scaling true
  * @size 16:9 1920px 1080px
+ *
+ * MIT License
+ * Copyright (c) 2026 Subroh Nishikori
+ * https://github.com/subroh0508/marp-theme-canvas/blob/main/LICENSE
  */
 
-// ===== コンポーネント =====
-@use './component/prettylights/dark' as prettylights;
-@use './component/table' as table;
-@use './component/code' as code;
-@use './component/section' as section;
-@use './component/pagination' as pagination;
-@use './component/header' as header;
-@use './component/footer' as footer;
-@use './component/heading' as heading;
-@use './component/blockquote' as blockquote;
-@use './component/text-decorator' as text-decorator;
-@use './component/columns' as columns;
-@use './component/a' as a;
-
-// ===== ページスタイル =====
-@use './page/title' as page-title;
-@use './page/section' as page-section;
-@use './page/toc' as page-toc;
-@use './page/agenda' as page-agenda;
-@use './page/display' as page-display;
+@use './theme/black-canvas' as theme;
 
 // ===== Google Fonts =====
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
 
-// ===== CSS変数（デフォルト値） =====
-:root {
-  // --- 色（白黒） ---
-  --color-black: #000;
-  --color-white: #fff;
-
-  // --- 色（グレースケール 7色）: Tailwind slate 50-300, 800-950 ---
-  --color-grey-lightest: #f8fafc; // slate-50
-  --color-grey-lighter: #f1f5f9;  // slate-100
-  --color-grey-light: #e2e8f0;    // slate-200
-  --color-grey-medium: #cbd5e1;   // slate-300
-  --color-grey-dark: #1e293b;     // slate-800
-  --color-grey-darker: #0f172a;   // slate-900
-  --color-grey-darkest: #020617;  // slate-950
-
-  // --- 色（コンポーネント: blockquote） ---
-  --color-blockquote-background: color-mix(in srgb, var(--color-grey-light) 15%, transparent);
-  --color-blockquote-mark: var(--color-grey-medium);
-  --color-blockquote-text: var(--color-grey-medium);
-
-  // --- 色（コンポーネント: table） ---
-  --color-table-row-bg: var(--color-grey-darkest);
-  --color-table-row-bg-header: var(--color-grey-dark);
-  --color-table-border: var(--color-grey-medium);
-
-  // --- 色（コンポーネント: code） ---
-  --color-code-bg: color-mix(in srgb, var(--color-grey-light) 15%, transparent);
-  --color-code-fg: var(--color-grey-lightest);
-
-  // --- 色（コンポーネント: link） ---
-  --color-link: #60a5fa; // Tailwind blue-400
-
-  // --- フォント ---
-  --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（スライド本体） =====
-section {
-  @include prettylights.configure;
-  @include section.configure(
-    $width: 1920px,
-    $height: 1080px,
-    $padding-x: var(--slide-padding-x),
-    $padding-y: var(--slide-padding-y),
-    $color-bg: var(--color-grey-darkest),
-    $color-text: var(--color-white),
-    $font-family: var(--font-family-base),
-    $font-size: var(--font-size-base),
-    $line-height: var(--line-height-normal),
-    $list-indent: 1.3em
-  );
-  @include pagination.configure(
-    $margin-x: var(--header-footer-margin-x),
-    $margin-y: var(--header-footer-margin-y),
-    $font-size: var(--font-size-note),
-    $color-text: var(--color-grey-light)
-  );
-
-  // ===== ページスタイル =====
-  @include page-title.configure(
-    $font-size-title: var(--font-size-display),
-    $color-metadata-text: var(--color-grey-medium)
-  );
-
-  @include page-section.configure(
-    $font-size: var(--font-size-title)
-  );
-
-  @include page-toc.configure(
-    $font-size: var(--font-size-heading),
-    $line-height: var(--line-height-loose)
-  );
-
-  @include page-agenda.configure(
-    $font-size-heading: var(--font-size-heading),
-    $font-size-body: var(--font-size-body),
-    $line-height-heading: var(--line-height-loose),
-    $line-height-body: var(--line-height-normal),
-    $font-weight-heading: var(--font-weight-bold),
-    $font-weight-body: var(--font-weight-normal)
-  );
-
-  @include page-display.configure(
-    $font-size: var(--font-size-display),
-    $font-weight-bold: var(--font-weight-bold),
-    $font-weight-normal: var(--font-weight-normal)
-  );
-
-  // ===== カラムレイアウト =====
-  @include columns.configure();
-}
-
-// ===== header =====
-@include header.configure(
-  $margin-x: var(--header-footer-margin-x),
-  $margin-y: var(--header-footer-margin-y),
-  $font-size: var(--font-size-note),
-  $color-text: var(--color-grey-light)
-);
-
-// ===== footer =====
-@include footer.configure(
-  $margin-x: var(--header-footer-margin-x),
-  $margin-y: var(--header-footer-margin-y),
-  $font-size: var(--font-size-note),
-  $color-text: var(--color-grey-light)
-);
-
-// ===== 見出し（h1-h6） =====
-@include heading.configure(
-  $line-height: var(--line-height-tight),
-  $font-size-h1: var(--font-size-title),
-  $font-size-h2: var(--font-size-heading),
-  $font-size-h3: var(--font-size-medium),
-  $font-weight-h1: var(--font-weight-bold),
-  $font-weight-h2: var(--font-weight-bold),
-  $font-weight-h3: var(--font-weight-bold),
-  $font-weight-h4: var(--font-weight-bold),
-  $font-weight-h5: var(--font-weight-normal),
-  $font-weight-h6: var(--font-weight-normal),
-  $color-text-h2: var(--color-primary)
-);
-
-// ===== 引用（blockquote） =====
-@include blockquote.configure(
-  $font-size: var(--font-size-body),
-  $line-height: var(--line-height-tight),
-  $color-text: var(--color-blockquote-text),
-  $color-bg: var(--color-blockquote-background),
-  $color-mark: var(--color-blockquote-mark),
-  $border-radius: var(--border-radius)
-);
-
-// ===== テキスト装飾（strong, mark, rp） =====
-@include text-decorator.configure(
-  $font-weight-bold: var(--font-weight-bold),
-  $font-weight-normal: var(--font-weight-normal),
-  $color-text-highlight: var(--color-accent)
-);
-
-// ===== リンク（a） =====
-@include a.configure(
-  $color-text: var(--color-link)
-);
-
-// ===== table =====
-@include table.configure(
-  $color-row-bg: var(--color-table-row-bg),
-  $color-header-bg: var(--color-table-row-bg-header),
-  $color-even-row-bg: var(--color-table-row-bg),
-  $color-border-vert: var(--color-table-border),
-  $color-border-horz: var(--color-table-border)
-);
-
-// ===== code =====
-@include code.configure(
-  $font-mono: var(--font-family-mono),
-  $color-bg: var(--color-code-bg),
-  $color-fg: var(--color-code-fg)
-);
+// ===== Apply theme =====
+@include theme.apply;

package/scss/component/CLAUDE.md

@@ -1,23 +1,23 @@
 # component
 
-スライド共通で使用する要素のスタイル
+Styles for elements commonly used across slides
 
-## ファイル構成
+## File Structure
 
 ```scss
-// ===== _ファイル名.scss =====
-// コンポーネントの説明
+// ===== _filename.scss =====
+// Component description
 
-@mixin configure($引数1, $引数2, $引数3: デフォルト値) {
-  セレクタ {
-    プロパティ: 値;
+@mixin configure($arg1, $arg2, $arg3: default) {
+  selector {
+    property: value;
   }
 }
 ```
 
-## テーマからの呼び出し
+## Usage from Theme
 
-### section内で呼び出すコンポーネント
+### Components used within section
 
 ```scss
 section {
@@ -27,7 +27,7 @@ section {
 }
 ```
 
-### グローバルスコープで呼び出すコンポーネント
+### Components used in global scope
 
 ```scss
 @include header.configure(...);
@@ -39,17 +39,17 @@ section {
 @include code.configure(...);
 ```
 
-## 既存のコンポーネント一覧
-
-| ファイル | 対象セレクタ | 用途 |
-|----------|--------------|------|
-| `_section.scss` | `section` | スライド本体のベーススタイル |
-| `_heading.scss` | `h1`-`h6` | 見出し |
-| `_header.scss` | `header` | ヘッダー |
-| `_footer.scss` | `footer` | フッター |
-| `_pagination.scss` | `section::after` | ページ番号 |
-| `_table.scss` | `table`, `th`, `td`, `tr` | テーブル |
-| `_code.scss` | `code`, `pre`, `tt` | コードブロック |
-| `_blockquote.scss` | `blockquote` | 引用 |
-| `_text-decorator.scss` | `strong`, `mark`, `rp` | テキスト装飾 |
-| `prettylights/*` | `.hljs-*` | シンタックスハイライト |
+## Existing Components
+
+| File | Target Selector | Purpose |
+|------|-----------------|---------|
+| `_section.scss` | `section` | Base styles for slide body |
+| `_heading.scss` | `h1`-`h6` | Headings |
+| `_header.scss` | `header` | Header |
+| `_footer.scss` | `footer` | Footer |
+| `_pagination.scss` | `section::after` | Page number |
+| `_table.scss` | `table`, `th`, `td`, `tr` | Table |
+| `_code.scss` | `code`, `pre`, `tt` | Code blocks |
+| `_blockquote.scss` | `blockquote` | Blockquote |
+| `_text-decorator.scss` | `strong`, `mark`, `rp` | Text decoration |
+| `prettylights/*` | `.hljs-*` | Syntax highlighting |

package/scss/component/_a.scss

@@ -1,5 +1,5 @@
 // ===== _a.scss =====
-// リンク（aタグ）のスタイル
+// Link (a tag) styles
 
 @mixin configure($color-text) {
   a {

package/scss/component/_blockquote.scss

@@ -1,5 +1,5 @@
 // ===== _blockquote.scss =====
-// Marpスライドの引用スタイル
+// Blockquote styles for Marp slides
 
 @mixin configure($font-size, $line-height, $color-text, $color-bg, $color-mark, $border-radius) {
   blockquote {
@@ -14,9 +14,9 @@
     background: $color-bg;
     border-radius: $border-radius;
 
-    // 左上の引用符
+    // Top-left quotation mark
     &::before {
-      content: '“';
+      content: "\201C";
       position: absolute;
       left: 0.2em;
       font-size: 2em;
@@ -24,7 +24,7 @@
       color: $color-mark;
     }
 
-    // 子要素のmargin調整
+    // Adjust margin for child elements
     > :first-child {
       margin-top: 0;
     }

package/scss/component/_code.scss

@@ -1,8 +1,14 @@
 // ===== _code.scss =====
-// コードブロック用スタイル
-// github-markdown-css v5.8.1 を改変
+// Code block styles
+// Modified from github-markdown-css v5.8.1
 // https://github.com/sindresorhus/github-markdown-css/blob/v5.8.1/github-markdown.css
 
+/*!
+ * MIT License
+ * Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+ * https://github.com/sindresorhus/github-markdown-css/blob/main/license
+ */
+
 @mixin configure($font-mono, $color-bg, $color-fg) {
   code, tt {
     font-family: $font-mono;

package/scss/component/_columns.scss

@@ -1,19 +1,19 @@
 // ===== _columns.scss =====
-// Flexboxベースのカラムレイアウトコンポーネント
+// Flexbox-based column layout component
 //
-// 使い方1: _class: columns（スライド全体がカラムレイアウト）
-// 使い方2: <div class="columns">（部分的なカラムレイアウト）
+// Usage 1: _class: columns (entire slide uses column layout)
+// Usage 2: <div class="columns"> (partial column layout)
 //
-// ※ divタグの直後・直前に空行を入れることでMarkdownが正しく解釈される
+// Note: Add blank lines before/after div tags for proper Markdown parsing
 
-$_column-widths: (2, 3, 4, 6, 7, 8);
+$_column-widths: (1, 2, 3, 4, 6, 7, 8, 9, 10);
 
-// カラム要素の共通スタイル
-// - flex: $n ... 比率ベースの幅指定（gapを考慮した配分になる）
-//                例: column-4 + column-6 = 4:6の比率で配分
-// - min-width: 0 ... Flex子要素のデフォルト値(auto)を上書きし、
-//                    コンテンツサイズに関係なくflex-basisの幅を維持する
-// - > *, p > * { max-width: 100% } ... 子要素および段落内の要素（画像等）をカラム幅に収める
+// Common styles for column elements
+// - flex: $n ... Ratio-based width (distributed considering gap)
+//                e.g., column-4 + column-6 = 4:6 ratio distribution
+// - min-width: 0 ... Override flex child default (auto) to maintain
+//                    flex-basis width regardless of content size
+// - > *, p > * { max-width: 100% } ... Constrain children and paragraph elements (images etc.) to column width
 @mixin _column-children {
   > .column {
     flex: 1;
@@ -39,14 +39,14 @@ $_column-widths: (2, 3, 4, 6, 7, 8);
 }
 
 @mixin configure() {
-  // 使い方1: _class: columns（section自体がFlexコンテナになる）
+  // Usage 1: _class: columns (section itself becomes flex container)
   &.columns {
     flex-direction: row;
     gap: 1em;
     @include _column-children;
   }
 
-  // 使い方2: <div class="columns">（部分的なカラムレイアウト）
+  // Usage 2: <div class="columns"> (partial column layout)
   .columns {
     display: flex;
     gap: 1em;

package/scss/component/_footer.scss

@@ -1,5 +1,5 @@
 // ===== _footer.scss =====
-// Marpスライドのフッタースタイル
+// Footer styles for Marp slides
 
 @mixin configure($margin-x, $margin-y, $font-size, $color-text) {
   footer {

package/scss/component/_header.scss

@@ -1,5 +1,5 @@
 // ===== _header.scss =====
-// Marpスライドのヘッダースタイル
+// Header styles for Marp slides
 
 @mixin configure($margin-x, $margin-y, $font-size, $color-text) {
   header {

package/scss/component/_heading.scss

@@ -1,5 +1,5 @@
 // ===== _heading.scss =====
-// Marpスライドの見出しスタイル（h1-h6）
+// Heading styles for Marp slides (h1-h6)
 
 @mixin configure(
   $line-height,

package/scss/component/_index.scss

@@ -1,11 +1,9 @@
 @charset "utf-8";
 
-/*!
- * Components - スライド共通で使用する要素のスタイル
- *
- * @use '@subroh0508/marp-theme-canvas/scss/component';
- * @use '@subroh0508/marp-theme-canvas/scss/component/heading';
- */
+// Components - Styles for elements used across all slides
+//
+// @use '@subroh0508/marp-theme-canvas/scss/component';
+// @use '@subroh0508/marp-theme-canvas/scss/component/heading';
 
 @forward 'a' as a-*;
 @forward 'blockquote' as blockquote-*;
@@ -19,5 +17,5 @@
 @forward 'table' as table-*;
 @forward 'text-decorator' as text-decorator-*;
 
-// シンタックスハイライト
+// Syntax highlighting
 @forward 'prettylights' as prettylights-*;

package/scss/component/_pagination.scss

@@ -1,6 +1,6 @@
 // ===== _pagination.scss =====
-// Marpスライドのページ番号スタイル（section::after）
-// Marpの paginate: true 指定時に表示される要素
+// Page number styles for Marp slides (section::after)
+// Displayed when Marp's paginate: true is specified
 
 @mixin configure($margin-x, $margin-y, $font-size, $color-text) {
   &::after {

package/scss/component/_section.scss

@@ -1,5 +1,5 @@
 // ===== _section.scss =====
-// Marpスライドのsection（本体）スタイル
+// Styles for Marp slide section (body)
 
 @mixin configure(
   $width,
@@ -26,7 +26,7 @@
   box-sizing: border-box;
   overflow: hidden;
 
-  // コンテンツ要素のmargin-topを0に
+  // Reset margin-top for content elements
   p,
   ul,
   ol,
@@ -35,7 +35,7 @@
     margin-top: 0;
   }
 
-  // リストのインデント調整
+  // Adjust list indentation
   ul,
   ol {
     padding-inline-start: $list-indent;

package/scss/component/_table.scss

@@ -1,6 +1,6 @@
 // ===== _table.scss =====
-// テーブル用スタイル
-// github-markdown-css v5.8.1 を改変
+// Table styles
+// Modified from github-markdown-css v5.8.1
 // https://github.com/sindresorhus/github-markdown-css/blob/v5.8.1/github-markdown.css
 
 @mixin configure($color-row-bg, $color-header-bg, $color-even-row-bg, $color-border-vert, $color-border-horz) {

package/scss/component/_text-decorator.scss

@@ -1,5 +1,5 @@
 // ===== _text-decorator.scss =====
-// テキスト装飾スタイル（strong, mark, rp）
+// Text decoration styles (strong, mark, rp)
 
 @mixin configure($font-weight-bold, $font-weight-normal, $color-text-highlight) {
   strong {