@subroh0508/marp-theme-canvas 0.0.3 → 0.0.4

package/README.ja.md

@@ -0,0 +1,314 @@
+# Canvas
+
+日本語 | [English](./README.md)
+
+[![npm version](https://img.shields.io/npm/v/@subroh0508/marp-theme-canvas)](https://www.npmjs.com/package/@subroh0508/marp-theme-canvas)
+[![license](https://img.shields.io/npm/l/@subroh0508/marp-theme-canvas)](./LICENSE)
+
+シンプル・ミニマルなMarpテーマ。余計な装飾を廃し、コンテンツに集中できるデザインです。
+
+## デモ
+
+- [White Canvas Demo](https://subroh0508.github.io/marp-theme-canvas/white_canvas_demo.html)
+- [Black Canvas Demo](https://subroh0508.github.io/marp-theme-canvas/black_canvas_demo.html)
+
+## 特徴
+
+- **2種類のテーマ**: ライトモード（white-canvas）とダークモード（black-canvas）
+- **5種類のページスタイル**: title, section, toc, agenda, display
+- **CSS変数によるカスタマイズ**: フロントマターから色やフォントを簡単に変更
+- **SCSSモジュール**: 必要なスタイルだけを個別にインポート可能
+- **GitHub風シンタックスハイライト**: prettylightsベースのコードハイライト
+- **マルチカラムレイアウト**: 2カラム・3カラムレイアウトに対応
+
+## インストール
+
+### npm
+
+```bash
+npm install @subroh0508/marp-theme-canvas
+```
+
+### CDN / 直接利用
+
+GitHubのraw URLから直接CSSファイルを参照することも可能です:
+
+```
+https://raw.githubusercontent.com/subroh0508/marp-theme-canvas/main/css/white-canvas.css
+https://raw.githubusercontent.com/subroh0508/marp-theme-canvas/main/css/black-canvas.css
+```
+
+## 使い方
+
+### 基本設定
+
+Markdownファイルのフロントマターでテーマを指定します:
+
+```markdown
+---
+marp: true
+theme: white-canvas
+paginate: true
+style: |
+  :root {
+    --color-primary: #3b91c4;
+    --color-accent: #ead7a4;
+  }
+---
+```
+
+`--color-primary` と `--color-accent` は必須です。プライマリカラーは見出し（h2）に、アクセントカラーはハイライト（`<mark>`）に使用されます。
+
+### テーマの選択
+
+| テーマ名 | 説明 |
+|----------|------|
+| `white-canvas` | 白背景のライトテーマ |
+| `black-canvas` | 黒背景のダークテーマ |
+
+### Marp CLIでのビルド
+
+```bash
+marp --theme node_modules/@subroh0508/marp-theme-canvas/css/white-canvas.css slides.md
+```
+
+## ページスタイル
+
+`<!-- _class: スタイル名 -->` でページごとにスタイルを切り替えられます。
+
+### title
+
+タイトルページ用のスタイルです。h1がメインタイトル、それ以外のテキストがメタデータ（発表者名・日付など）として表示されます。
+
+```markdown
+<!-- _class: title -->
+
+# プレゼンテーションタイトル
+
+発表者名
+2026年1月
+```
+
+### section
+
+セクション区切り（中扉）用のスタイルです。テキストが画面中央に大きく表示されます。
+
+```markdown
+<!-- _class: section -->
+
+セクション1: はじめに
+```
+
+### toc
+
+目次ページ用のスタイルです。リストが見やすくスタイリングされます。
+
+```markdown
+<!-- _class: toc -->
+
+## 目次
+
+1. はじめに
+2. 本題
+3. まとめ
+```
+
+### agenda
+
+アジェンダ・話すこと一覧用のスタイルです。項目と詳細説明を階層的に表示できます。
+
+```markdown
+<!-- _class: agenda -->
+
+## 今日話すこと
+
+- トピック1
+  - 詳細説明
+- トピック2
+  - 詳細説明
+```
+
+### display
+
+短い文章や画像を大きく表示するためのスタイルです。
+
+```markdown
+<!-- _class: display -->
+
+ここに強調したいメッセージ
+```
+
+画像がある場合は文字サイズは大きくならず、画像が中央に配置されます。
+
+## カスタマイズ
+
+フロントマターのstyleでCSS変数を上書きできます。
+
+### 主要なCSS変数
+
+#### 色
+
+| 変数名 | 説明 | white-canvas | black-canvas |
+|--------|------|--------------|--------------|
+| `--color-primary` | プライマリカラー（h2など） | 必須 | 必須 |
+| `--color-accent` | アクセントカラー（mark） | 必須 | 必須 |
+| `--color-black` | 黒 | `#000` | `#000` |
+| `--color-white` | 白 | `#fff` | `#fff` |
+| `--color-grey-lightest` | グレー（最も明るい） | `#cbd5e1` (slate-300) | `#f8fafc` (slate-50) |
+| `--color-grey-lighter` | グレー（より明るい） | `#94a3b8` (slate-400) | `#f1f5f9` (slate-100) |
+| `--color-grey-light` | グレー（明るい） | `#64748b` (slate-500) | `#e2e8f0` (slate-200) |
+| `--color-grey-medium` | グレー（中間） | `#475569` (slate-600) | `#cbd5e1` (slate-300) |
+| `--color-grey-dark` | グレー（暗い） | `#334155` (slate-700) | `#1e293b` (slate-800) |
+| `--color-grey-darker` | グレー（より暗い） | `#1e293b` (slate-800) | `#0f172a` (slate-900) |
+| `--color-grey-darkest` | グレー（最も暗い） | `#0f172a` (slate-900) | `#020617` (slate-950) |
+| `--color-link` | リンク色 | `#2563eb` (blue-600) | `#60a5fa` (blue-400) |
+
+#### フォント
+
+| 変数名 | 説明 | デフォルト値 |
+|--------|------|--------------|
+| `--font-family-base` | 基本フォント | `'Noto Sans JP', sans-serif` |
+| `--font-family-mono` | 等幅フォント | `ui-monospace, ...` |
+| `--font-size-base` | 基本フォントサイズ | `40px` |
+
+#### サイズ・レイアウト
+
+| 変数名 | 説明 | デフォルト値 |
+|--------|------|--------------|
+| `--slide-padding-x` | スライド左右余白 | `80px` |
+| `--slide-padding-y` | スライド上下余白 | `80px` |
+| `--border-radius` | 角丸 | `8px` |
+
+### カスタマイズ例
+
+```markdown
+---
+marp: true
+theme: white-canvas
+style: |
+  :root {
+    --color-primary: #e11d48;
+    --color-accent: #fde047;
+    --font-size-base: 36px;
+    --slide-padding-x: 60px;
+  }
+---
+```
+
+## SCSSモジュール
+
+Canvasのスタイルはモジュール化されており、独自テーマ作成時に個別にインポートできます。
+
+### モジュール構成
+
+```
+scss/
+├── theme/              # テーマモジュール
+│   ├── _white-canvas.scss  # ライトテーマ（@use可能）
+│   └── _black-canvas.scss  # ダークテーマ（@use可能）
+├── component/          # 共通コンポーネント
+│   ├── _heading.scss   # 見出し
+│   ├── _table.scss     # テーブル
+│   ├── _code.scss      # コードブロック
+│   ├── _blockquote.scss # 引用
+│   ├── _columns.scss   # カラムレイアウト
+│   └── ...
+├── page/               # ページスタイル
+│   ├── _title.scss
+│   ├── _section.scss
+│   ├── _toc.scss
+│   ├── _agenda.scss
+│   └── _display.scss
+├── white-canvas.scss   # ライトテーマ（CSS出力用）
+└── black-canvas.scss   # ダークテーマ（CSS出力用）
+```
+
+### テーマをカスタマイズして使用
+
+テーマモジュールを `@use` で取り込み、CSS変数をカスタマイズできます。
+
+```scss
+/*!
+ * @theme my-custom-theme
+ */
+
+@use '@subroh0508/marp-theme-canvas/scss/white-canvas' as white-canvas;
+
+// Google Fonts（必要に応じて変更）
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
+
+// テーマを適用（CSS変数をカスタマイズ）
+@include white-canvas.apply() {
+  --color-primary: #e11d48;
+  --color-accent: #fde047;
+  --font-size-base: 36px;
+}
+```
+
+### 提供されるmixin
+
+| mixin | 説明 |
+|-------|------|
+| `apply()` | CSS変数とスタイルを一括適用。`@content` でCSS変数を追加・上書き可能 |
+| `variables()` | CSS変数のみを出力。`@content` でCSS変数を追加・上書き可能 |
+| `styles()` | スタイルのみを出力（CSS変数は含まない） |
+
+### コンポーネント・ページスタイルの個別利用
+
+```scss
+// テーマモジュール
+@use '@subroh0508/marp-theme-canvas/scss/white-canvas' as white-canvas;
+@use '@subroh0508/marp-theme-canvas/scss/black-canvas' as black-canvas;
+
+// コンポーネント
+@use '@subroh0508/marp-theme-canvas/scss/component' as component;
+@use '@subroh0508/marp-theme-canvas/scss/component/heading' as heading;
+
+// ページスタイル
+@use '@subroh0508/marp-theme-canvas/scss/page' as page;
+@use '@subroh0508/marp-theme-canvas/scss/page/title' as page-title;
+```
+
+### コンポーネント単体での使用例
+
+```scss
+@use '@subroh0508/marp-theme-canvas/scss/component/heading' as heading;
+@use '@subroh0508/marp-theme-canvas/scss/page/title' as page-title;
+
+section {
+  @include page-title.configure(
+    $font-size-title: 2.5em,
+    $color-metadata-text: #666
+  );
+}
+
+@include heading.configure(
+  $font-size-h1: 2em,
+  $font-size-h2: 1.5em,
+  $color-text-h2: #3b91c4
+);
+```
+
+## 開発
+
+### リポジトリのクローン
+
+```bash
+git clone https://github.com/subroh0508/marp-theme-canvas.git
+cd marp-theme-canvas
+pnpm install
+```
+
+### コマンド
+
+```bash
+# CSSをビルド
+pnpm build
+
+# デモサーバーを起動
+pnpm serve
+```
+
+## ライセンス
+
+[MIT License](./LICENSE)

package/README.md

@@ -0,0 +1,314 @@
+# Canvas
+
+[日本語](./README.ja.md) | English
+
+[![npm version](https://img.shields.io/npm/v/@subroh0508/marp-theme-canvas)](https://www.npmjs.com/package/@subroh0508/marp-theme-canvas)
+[![license](https://img.shields.io/npm/l/@subroh0508/marp-theme-canvas)](./LICENSE)
+
+A simple and minimal Marp theme. A design that eliminates unnecessary decorations and lets you focus on your content.
+
+## Demo
+
+- [White Canvas Demo](https://subroh0508.github.io/marp-theme-canvas/white_canvas_demo.html)
+- [Black Canvas Demo](https://subroh0508.github.io/marp-theme-canvas/black_canvas_demo.html)
+
+## Features
+
+- **2 Theme Variants**: Light mode (white-canvas) and dark mode (black-canvas)
+- **5 Page Styles**: title, section, toc, agenda, display
+- **CSS Variable Customization**: Easily change colors and fonts from frontmatter
+- **SCSS Modules**: Import only the styles you need
+- **GitHub-style Syntax Highlighting**: Code highlighting based on prettylights
+- **Multi-column Layout**: Support for 2-column and 3-column layouts
+
+## Installation
+
+### npm
+
+```bash
+npm install @subroh0508/marp-theme-canvas
+```
+
+### CDN / Direct Usage
+
+You can also reference the CSS files directly via GitHub raw URL:
+
+```
+https://raw.githubusercontent.com/subroh0508/marp-theme-canvas/main/css/white-canvas.css
+https://raw.githubusercontent.com/subroh0508/marp-theme-canvas/main/css/black-canvas.css
+```
+
+## Usage
+
+### Basic Setup
+
+Specify the theme in the frontmatter of your Markdown file:
+
+```markdown
+---
+marp: true
+theme: white-canvas
+paginate: true
+style: |
+  :root {
+    --color-primary: #3b91c4;
+    --color-accent: #ead7a4;
+  }
+---
+```
+
+`--color-primary` and `--color-accent` are required. The primary color is used for headings (h2), and the accent color is used for highlights (`<mark>`).
+
+### Theme Selection
+
+| Theme Name | Description |
+|------------|-------------|
+| `white-canvas` | Light theme with white background |
+| `black-canvas` | Dark theme with black background |
+
+### Building with Marp CLI
+
+```bash
+marp --theme node_modules/@subroh0508/marp-theme-canvas/css/white-canvas.css slides.md
+```
+
+## Page Styles
+
+Use `<!-- _class: style-name -->` to switch styles for each page.
+
+### title
+
+Style for title pages. h1 becomes the main title, and other text is displayed as metadata (presenter name, date, etc.).
+
+```markdown
+<!-- _class: title -->
+
+# Presentation Title
+
+Presenter Name
+January 2026
+```
+
+### section
+
+Style for section dividers. Text is displayed large and centered on the screen.
+
+```markdown
+<!-- _class: section -->
+
+Section 1: Introduction
+```
+
+### toc
+
+Style for table of contents pages. Lists are styled for better readability.
+
+```markdown
+<!-- _class: toc -->
+
+## Table of Contents
+
+1. Introduction
+2. Main Topic
+3. Summary
+```
+
+### agenda
+
+Style for agenda or topics list. Items and detailed descriptions can be displayed hierarchically.
+
+```markdown
+<!-- _class: agenda -->
+
+## Today's Topics
+
+- Topic 1
+  - Detailed description
+- Topic 2
+  - Detailed description
+```
+
+### display
+
+Style for displaying short text or images prominently.
+
+```markdown
+<!-- _class: display -->
+
+Your emphasized message here
+```
+
+When an image is present, the font size doesn't increase, and the image is centered.
+
+## Customization
+
+You can override CSS variables in the frontmatter style.
+
+### Key CSS Variables
+
+#### Colors
+
+| Variable | Description | white-canvas | black-canvas |
+|----------|-------------|--------------|--------------|
+| `--color-primary` | Primary color (h2, etc.) | Required | Required |
+| `--color-accent` | Accent color (mark) | Required | Required |
+| `--color-black` | Black | `#000` | `#000` |
+| `--color-white` | White | `#fff` | `#fff` |
+| `--color-grey-lightest` | Grey (lightest) | `#cbd5e1` (slate-300) | `#f8fafc` (slate-50) |
+| `--color-grey-lighter` | Grey (lighter) | `#94a3b8` (slate-400) | `#f1f5f9` (slate-100) |
+| `--color-grey-light` | Grey (light) | `#64748b` (slate-500) | `#e2e8f0` (slate-200) |
+| `--color-grey-medium` | Grey (medium) | `#475569` (slate-600) | `#cbd5e1` (slate-300) |
+| `--color-grey-dark` | Grey (dark) | `#334155` (slate-700) | `#1e293b` (slate-800) |
+| `--color-grey-darker` | Grey (darker) | `#1e293b` (slate-800) | `#0f172a` (slate-900) |
+| `--color-grey-darkest` | Grey (darkest) | `#0f172a` (slate-900) | `#020617` (slate-950) |
+| `--color-link` | Link color | `#2563eb` (blue-600) | `#60a5fa` (blue-400) |
+
+#### Fonts
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `--font-family-base` | Base font | `'Noto Sans JP', sans-serif` |
+| `--font-family-mono` | Monospace font | `ui-monospace, ...` |
+| `--font-size-base` | Base font size | `40px` |
+
+#### Size & Layout
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `--slide-padding-x` | Slide horizontal padding | `80px` |
+| `--slide-padding-y` | Slide vertical padding | `80px` |
+| `--border-radius` | Border radius | `8px` |
+
+### Customization Example
+
+```markdown
+---
+marp: true
+theme: white-canvas
+style: |
+  :root {
+    --color-primary: #e11d48;
+    --color-accent: #fde047;
+    --font-size-base: 36px;
+    --slide-padding-x: 60px;
+  }
+---
+```
+
+## SCSS Modules
+
+Canvas styles are modularized and can be imported individually when creating custom themes.
+
+### Module Structure
+
+```
+scss/
+├── theme/              # Theme modules
+│   ├── _white-canvas.scss  # Light theme (importable via @use)
+│   └── _black-canvas.scss  # Dark theme (importable via @use)
+├── component/          # Common components
+│   ├── _heading.scss   # Headings
+│   ├── _table.scss     # Tables
+│   ├── _code.scss      # Code blocks
+│   ├── _blockquote.scss # Blockquotes
+│   ├── _columns.scss   # Column layout
+│   └── ...
+├── page/               # Page styles
+│   ├── _title.scss
+│   ├── _section.scss
+│   ├── _toc.scss
+│   ├── _agenda.scss
+│   └── _display.scss
+├── white-canvas.scss   # Light theme (for CSS output)
+└── black-canvas.scss   # Dark theme (for CSS output)
+```
+
+### Customizing and Using Themes
+
+Import theme modules with `@use` and customize CSS variables.
+
+```scss
+/*!
+ * @theme my-custom-theme
+ */
+
+@use '@subroh0508/marp-theme-canvas/scss/white-canvas' as white-canvas;
+
+// Google Fonts (change as needed)
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
+
+// Apply theme (customize CSS variables)
+@include white-canvas.apply() {
+  --color-primary: #e11d48;
+  --color-accent: #fde047;
+  --font-size-base: 36px;
+}
+```
+
+### Available Mixins
+
+| Mixin | Description |
+|-------|-------------|
+| `apply()` | Apply CSS variables and styles at once. Can add/override CSS variables via `@content` |
+| `variables()` | Output CSS variables only. Can add/override CSS variables via `@content` |
+| `styles()` | Output styles only (excludes CSS variables) |
+
+### Using Components and Page Styles Individually
+
+```scss
+// Theme modules
+@use '@subroh0508/marp-theme-canvas/scss/white-canvas' as white-canvas;
+@use '@subroh0508/marp-theme-canvas/scss/black-canvas' as black-canvas;
+
+// Components
+@use '@subroh0508/marp-theme-canvas/scss/component' as component;
+@use '@subroh0508/marp-theme-canvas/scss/component/heading' as heading;
+
+// Page styles
+@use '@subroh0508/marp-theme-canvas/scss/page' as page;
+@use '@subroh0508/marp-theme-canvas/scss/page/title' as page-title;
+```
+
+### Using Components Standalone
+
+```scss
+@use '@subroh0508/marp-theme-canvas/scss/component/heading' as heading;
+@use '@subroh0508/marp-theme-canvas/scss/page/title' as page-title;
+
+section {
+  @include page-title.configure(
+    $font-size-title: 2.5em,
+    $color-metadata-text: #666
+  );
+}
+
+@include heading.configure(
+  $font-size-h1: 2em,
+  $font-size-h2: 1.5em,
+  $color-text-h2: #3b91c4
+);
+```
+
+## Development
+
+### Clone the Repository
+
+```bash
+git clone https://github.com/subroh0508/marp-theme-canvas.git
+cd marp-theme-canvas
+pnpm install
+```
+
+### Commands
+
+```bash
+# Build CSS
+pnpm build
+
+# Start demo server
+pnpm serve
+```
+
+## License
+
+[MIT License](./LICENSE)

package/css/black-canvas.css

@@ -1,12 +1,12 @@
 @charset "UTF-8";
 /*!
- * 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;
@@ -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;