@subroh0508/marp-theme-canvas 0.0.3 → 0.0.4

package/scss/component/prettylights/CLAUDE.md

@@ -1,36 +1,36 @@
 # prettylights
 
-シンタックスハイライト用スタイル（highlight.jsクラスへのカラーマッピング）
+Syntax highlighting styles (color mapping for highlight.js classes)
 
-## 構成
+## Structure
 
 ```
 prettylights/
-├── _base.scss   # 共通ロジック（引数付きmixin）
-├── _light.scss  # Lightテーマ色定義
-└── _dark.scss   # Darkテーマ色定義
+├── _base.scss   # Common logic (mixin with arguments)
+├── _light.scss  # Light theme color definitions
+└── _dark.scss   # Dark theme color definitions
 ```
 
-## パターン
+## Pattern
 
-- `_base.scss`: highlight.jsクラスへのカラーマッピングを引数付きmixinで定義
-- `_light.scss` / `_dark.scss`: 色変数を定義し、引数なしmixinでbaseを呼び出す
+- `_base.scss`: Defines color mapping for highlight.js classes via mixin with arguments
+- `_light.scss` / `_dark.scss`: Define color variables and call base via argumentless mixin
 
 ```scss
 // _light.scss
 @use 'base';
 
 $pl-comment: #59636e;
-// ... 色定義
+// ... color definitions
 
 @mixin configure {
   @include base.configure($pl-comment, ...);
 }
 ```
 
-## テーマからの呼び出し
+## Usage from Theme
 
-section内で呼び出す:
+Use within section:
 
 ```scss
 @use './component/prettylights/light' as prettylights;

package/scss/component/prettylights/_base.scss

@@ -1,31 +1,37 @@
 // ===== _base.scss =====
-// シンタックスハイライト用スタイル（highlight.jsクラスへのカラーマッピング）
-// marp-core v4.2.0 を改変
+// Syntax highlighting styles (color mapping for highlight.js classes)
+// Modified from marp-core v4.2.0
 // https://github.com/marp-team/marp-core/blob/v4.2.0/themes/default.scss
 
+/*!
+ * MIT License
+ * Copyright (c) 2018 Marp team (marp-team@marp.app)
+ * https://github.com/marp-team/marp-core/blob/main/LICENSE
+ */
+
 @mixin configure(
-  $comment,                 // コメント (pl-c)
-  $constant,                // 定数 (pl-c1)
-  $entity,                  // エンティティ・関数名 (pl-e, pl-en)
-  $entity-tag,              // タグ名 (pl-ent)
-  $keyword,                 // キーワード (pl-k)
-  $string,                  // 文字列 (pl-s)
-  $variable,                // 変数 (pl-v)
-  $storage-modifier,        // デフォルトテキスト (pl-smi)
-  $markup-heading,          // 見出し (pl-mh)
-  $markup-list,             // リストマーカー (pl-ml)
-  $markup-inserted-text,    // 挿入テキスト色 (pl-mi1)
-  $markup-inserted-bg,      // 挿入背景色 (pl-mi1)
-  $markup-deleted-text,     // 削除テキスト色 (pl-md)
-  $markup-deleted-bg        // 削除背景色 (pl-md)
+  $comment,                 // Comment (pl-c)
+  $constant,                // Constant (pl-c1)
+  $entity,                  // Entity / Function name (pl-e, pl-en)
+  $entity-tag,              // Tag name (pl-ent)
+  $keyword,                 // Keyword (pl-k)
+  $string,                  // String (pl-s)
+  $variable,                // Variable (pl-v)
+  $storage-modifier,        // Default text (pl-smi)
+  $markup-heading,          // Heading (pl-mh)
+  $markup-list,             // List marker (pl-ml)
+  $markup-inserted-text,    // Inserted text color (pl-mi1)
+  $markup-inserted-bg,      // Inserted background color (pl-mi1)
+  $markup-deleted-text,     // Deleted text color (pl-md)
+  $markup-deleted-bg        // Deleted background color (pl-md)
 ) {
   pre {
-    // デフォルト色
+    // Default color
     :where(.hljs) {
       color: $storage-modifier;
     }
 
-    // キーワード系
+    // Keywords
     :where(.hljs-doctag),
     :where(.hljs-keyword),
     :where(.hljs-meta .hljs-keyword),
@@ -36,7 +42,7 @@
       color: $keyword;
     }
 
-    // 関数・クラス名
+    // Functions / Class names
     :where(.hljs-title),
     :where(.hljs-title.class_),
     :where(.hljs-title.class_.inherited__),
@@ -44,7 +50,7 @@
       color: $entity;
     }
 
-    // 定数・属性・数値
+    // Constants / Attributes / Numbers
     :where(.hljs-attr),
     :where(.hljs-attribute),
     :where(.hljs-literal),
@@ -58,27 +64,27 @@
       color: $constant;
     }
 
-    // 文字列・正規表現
+    // Strings / Regular expressions
     :where(.hljs-string),
     :where(.hljs-meta .hljs-string),
     :where(.hljs-regexp) {
       color: $string;
     }
 
-    // 組み込み関数・シンボル
+    // Built-in functions / Symbols
     :where(.hljs-built_in),
     :where(.hljs-symbol) {
       color: $variable;
     }
 
-    // コメント
+    // Comments
     :where(.hljs-code),
     :where(.hljs-comment),
     :where(.hljs-formula) {
       color: $comment;
     }
 
-    // タグ名・セレクタ
+    // Tag names / Selectors
     :where(.hljs-name),
     :where(.hljs-quote),
     :where(.hljs-selector-pseudo),
@@ -86,23 +92,23 @@
       color: $entity-tag;
     }
 
-    // 変数展開
+    // Variable interpolation
     :where(.hljs-subst) {
       color: $storage-modifier;
     }
 
-    // マークアップ: 見出し
+    // Markup: Heading
     :where(.hljs-section) {
       font-weight: bold;
       color: $markup-heading;
     }
 
-    // マークアップ: リスト
+    // Markup: List
     :where(.hljs-bullet) {
       color: $markup-list;
     }
 
-    // マークアップ: 強調
+    // Markup: Emphasis
     :where(.hljs-emphasis) {
       font-style: italic;
       color: $storage-modifier;
@@ -113,13 +119,13 @@
       color: $storage-modifier;
     }
 
-    // diff: 追加行
+    // diff: Added lines
     :where(.hljs-addition) {
       color: $markup-inserted-text;
       background-color: $markup-inserted-bg;
     }
 
-    // diff: 削除行
+    // diff: Deleted lines
     :where(.hljs-deletion) {
       color: $markup-deleted-text;
       background-color: $markup-deleted-bg;

package/scss/component/prettylights/_dark.scss

@@ -1,11 +1,17 @@
 // ===== _dark.scss =====
-// シンタックスハイライト（Dark テーマ）カラー定義
-// github-markdown-css v5.8.1 を改変
+// Syntax highlighting (Dark theme) color definitions
+// Modified from github-markdown-css v5.8.1
 // https://github.com/sindresorhus/github-markdown-css/blob/v5.8.1/github-markdown-dark.css
 
+/*!
+ * MIT License
+ * Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+ * https://github.com/sindresorhus/github-markdown-css/blob/main/license
+ */
+
 @use 'base';
 
-// ===== Dark テーマカラー =====
+// ===== Dark theme colors =====
 $pl-comment: #9198a1;
 $pl-constant: #79c0ff;
 $pl-entity: #d2a8ff;

package/scss/component/prettylights/_index.scss

@@ -1,12 +1,10 @@
 @charset "utf-8";
 
-/*!
- * Prettylights - GitHub風シンタックスハイライトテーマ
- *
- * @use '@subroh0508/marp-theme-canvas/scss/component/prettylights';
- * @use '@subroh0508/marp-theme-canvas/scss/component/prettylights/light';
- * @use '@subroh0508/marp-theme-canvas/scss/component/prettylights/dark';
- */
+// Prettylights - GitHub-style syntax highlighting themes
+//
+// @use '@subroh0508/marp-theme-canvas/scss/component/prettylights';
+// @use '@subroh0508/marp-theme-canvas/scss/component/prettylights/light';
+// @use '@subroh0508/marp-theme-canvas/scss/component/prettylights/dark';
 
 @forward 'base' as base-*;
 @forward 'light' as light-*;

package/scss/component/prettylights/_light.scss

@@ -1,11 +1,17 @@
 // ===== _light.scss =====
-// シンタックスハイライト（Light テーマ）カラー定義
-// github-markdown-css v5.8.1 を改変
+// Syntax highlighting (Light theme) color definitions
+// Modified from github-markdown-css v5.8.1
 // https://github.com/sindresorhus/github-markdown-css/blob/v5.8.1/github-markdown-light.css
 
+/*!
+ * MIT License
+ * Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+ * https://github.com/sindresorhus/github-markdown-css/blob/main/license
+ */
+
 @use 'base';
 
-// ===== Light テーマカラー =====
+// ===== Light theme colors =====
 $pl-comment: #59636e;
 $pl-constant: #0550ae;
 $pl-entity: #6639ba;

package/scss/page/CLAUDE.md

@@ -1,28 +1,28 @@
 # page
 
-特定用途に特化したページスタイル（Marpのclass指定で切り替え）
+Page styles specialized for specific purposes (switched via Marp class directive)
 
-## ファイル構成
+## File Structure
 
 ```scss
-// ===== _ファイル名.scss =====
-// スタイルの説明（どのようなページに使うか）
+// ===== _filename.scss =====
+// Style description (what kind of page it's used for)
 //
-// 使用方法: <!-- _class: クラス名 -->
+// Usage: <!-- _class: classname -->
 
-@mixin configure($引数1, $引数2, $引数3: デフォルト値) {
-  &.クラス名 {
-    // セレクタの役割をコメントで説明
-    セレクタ {
-      プロパティ: 値;
+@mixin configure($arg1, $arg2, $arg3: default) {
+  &.classname {
+    // Explain the role of selectors with comments
+    selector {
+      property: value;
     }
   }
 }
 ```
 
-## スコープ設定
+## Scope Settings
 
-必ず `&.クラス名` でラップする（親の `section` に依存）
+Always wrap with `&.classname` (depends on parent `section`)
 
 ```scss
 &.toc {
@@ -33,14 +33,14 @@
 }
 ```
 
-## コメント規約
+## Comment Conventions
 
-- **セレクタの役割**: 各セレクタの前にコメントで用途を説明
-- **レイアウト情報**: flexの配置方法など、視覚的な配置をコメント
+- **Selector role**: Explain the purpose with a comment before each selector
+- **Layout information**: Comment on visual arrangement such as flex positioning
 
 ```scss
-// h1: タイトル文字列
-// section上8割を占有、上下中央揃え、左寄せ
+// h1: Title text
+// Occupies top 80% of section, vertically centered, left-aligned
 h1 {
   font-size: $font-size-title;
   flex: 0 0 80%;
@@ -48,9 +48,9 @@ h1 {
 }
 ```
 
-## テーマからの呼び出し
+## Usage from Theme
 
-`white-canvas.scss` などテーマファイルで `section` ブロック内から呼び出す:
+Use within the `section` block in theme files like `white-canvas.scss`:
 
 ```scss
 @use './page/title' as page-title;
@@ -63,12 +63,12 @@ section {
 }
 ```
 
-## 既存のページスタイル一覧
+## Existing Page Styles
 
-| ファイル | クラス名 | 用途 |
-|----------|----------|------|
-| `_title.scss` | `title` | タイトルページ（h1 + メタデータ） |
-| `_toc.scss` | `toc` | 目次ページ |
-| `_agenda.scss` | `agenda` | アジェンダ（今日話すこと等） |
-| `_section.scss` | `section` | 中扉ページ |
-| `_display.scss` | `display` | 大きく表示（文章または画像） |
+| File | Class Name | Purpose |
+|------|------------|---------|
+| `_title.scss` | `title` | Title page (h1 + metadata) |
+| `_toc.scss` | `toc` | Table of contents page |
+| `_agenda.scss` | `agenda` | Agenda (topics to cover today, etc.) |
+| `_section.scss` | `section` | Section divider page |
+| `_display.scss` | `display` | Large display (text or image) |

package/scss/page/_agenda.scss

@@ -1,8 +1,8 @@
 // ===== _agenda.scss =====
-// アジェンダページ用スタイル
-// 「今日話すこと」「Learning Outcome」等を冒頭に提示するページ
+// Styles for agenda page
+// For pages presenting "Topics for today", "Learning Outcomes", etc. at the beginning
 //
-// 使用方法: <!-- _class: agenda -->
+// Usage: <!-- _class: agenda -->
 
 @mixin configure(
   $font-size-heading,
@@ -13,21 +13,21 @@
   $font-weight-body: normal
 ) {
   &.agenda {
-    // リスト: 直接の子要素
+    // List: Direct children
     > ul,
     > ol {
       font-size: $font-size-heading;
       font-weight: $font-weight-heading;
       line-height: $line-height-heading;
 
-      // ネストされたリスト（第2レベル）
+      // Nested lists (2nd level)
       ul,
       ol {
         font-size: calc(#{$font-size-body} / #{$font-size-heading} * 1em);
         font-weight: $font-weight-body;
         line-height: $line-height-body;
 
-        // 第3レベル以降はサイズを維持
+        // 3rd level and beyond maintain size
         ul,
         ol {
           font-size: 1em;

package/scss/page/_display.scss

@@ -1,7 +1,7 @@
 // ===== _display.scss =====
-// 短い文章を大きく表示したり、1枚の写真や図を目立たせるページ用スタイル
+// Styles for pages displaying short text prominently or highlighting a single photo/diagram
 //
-// 使用方法: <!-- _class: display -->
+// Usage: <!-- _class: display -->
 
 @mixin configure(
   $font-size,
@@ -9,32 +9,32 @@
   $font-weight-normal: normal
 ) {
   &.display {
-    // 上下左右中央揃え
+    // Center horizontally and vertically
     justify-content: center;
     align-items: center;
 
-    // p: メイン文章（上下左右中央揃え）
+    // p: Main text (centered horizontally and vertically)
     p {
       margin: 0;
       text-align: center;
     }
 
-    // img, iframeが存在しない場合、pタグを大きく表示
+    // When img or iframe doesn't exist, display p tag prominently
     &:not(:has(img, iframe)) p {
       font-size: $font-size;
       font-weight: $font-weight-bold;
     }
 
-    // img, iframe: メディア要素（上下左右中央揃え）
-    // emojiクラスは除外
+    // img, iframe: Media elements (centered horizontally and vertically)
+    // Excludes emoji class
     img:not(.emoji),
     iframe {
       display: block;
       margin: 0 0;
     }
 
-    // pタグが存在する場合、メディア要素の下にマージンを追加
-    // emojiクラスは除外
+    // When p tag exists, add margin below media elements
+    // Excludes emoji class
     &:has(p) img:not(.emoji),
     &:has(p) iframe {
       margin: 0 0 1em;

package/scss/page/_index.scss

@@ -1,11 +1,9 @@
 @charset "utf-8";
 
-/*!
- * Page Styles - 特定用途に特化したページスタイル
- *
- * @use '@subroh0508/marp-theme-canvas/scss/page';
- * @use '@subroh0508/marp-theme-canvas/scss/page/title';
- */
+// Page Styles - Specialized page styles for specific purposes
+//
+// @use '@subroh0508/marp-theme-canvas/scss/page';
+// @use '@subroh0508/marp-theme-canvas/scss/page/title';
 
 @forward 'agenda' as agenda-*;
 @forward 'display' as display-*;

package/scss/page/_section.scss

@@ -1,12 +1,12 @@
 // ===== _section.scss =====
-// 中扉ページ用スタイル
+// Styles for section divider page
 //
-// 使用方法: <!-- _class: section -->
+// Usage: <!-- _class: section -->
 
 @mixin configure($font-size, $font-weight: bold) {
   &.section {
-    // p: セクションタイトル
-    // 上下中央揃え、左寄せ
+    // p: Section title
+    // Vertically centered, left-aligned
     p {
       flex: 1;
       display: flex;

package/scss/page/_title.scss

@@ -1,12 +1,12 @@
 // ===== _title.scss =====
-// タイトルページ用スタイル
+// Styles for title page
 //
-// 使用方法: <!-- _class: title -->
+// Usage: <!-- _class: title -->
 
 @mixin configure($font-size-title, $color-metadata-text) {
   &.title {
-    // h1: タイトル文字列
-    // section上8割を占有、上下中央揃え、左寄せ
+    // h1: Title text
+    // Occupies 80% of section, vertically centered, left-aligned
     h1 {
       font-size: $font-size-title;
       flex: 0 0 80%;
@@ -16,14 +16,14 @@
       justify-content: center;
       margin: 0;
 
-      // small: サブタイトル
+      // small: Subtitle
       small {
         margin-top: 0.5em;
         font-size: 0.5em;
       }
     }
 
-    // h1直後のp: 日付・イベント名・著者名
+    // p after h1: Date, event name, author name
     h1 + p {
       flex: 1;
       display: flex;

package/scss/page/_toc.scss

@@ -1,11 +1,11 @@
 // ===== _toc.scss =====
-// 目次ページ用スタイル
+// Styles for table of contents page
 //
-// 使用方法: <!-- _class: toc -->
+// Usage: <!-- _class: toc -->
 
 @mixin configure($font-size, $line-height) {
   &.toc {
-    // リスト: 目次項目（直接の子要素のみ）
+    // List: Table of contents items (direct children only)
     > ul,
     > ol {
       font-size: $font-size;

package/scss/theme/CLAUDE.md

@@ -0,0 +1,110 @@
+# theme
+
+Theme modules (white-canvas and black-canvas, importable via @use)
+
+## Required CSS Variables
+
+The following CSS variables have no default values and must be defined when used.
+
+| Variable | Description | Used in |
+|----------|-------------|---------|
+| `--color-primary` | Primary color | h2 text color |
+| `--color-accent` | Accent color | mark tag background |
+
+## CSS Variables Reference
+
+### Colors (Basic)
+
+| Variable | Description | Used in | white-canvas | black-canvas |
+|----------|-------------|---------|--------------|--------------|
+| `--color-black` | Black | - | `#000` | `#000` |
+| `--color-white` | White | Slide background (white) | `#fff` | `#fff` |
+| `--color-grey-lightest` | Grey (lightest) | Table header background (white) | `#cbd5e1` (slate-300) | `#f8fafc` (slate-50) |
+| `--color-grey-lighter` | Grey (lighter) | - | `#94a3b8` (slate-400) | `#f1f5f9` (slate-100) |
+| `--color-grey-light` | Grey (light) | Title metadata (white), page number/header/footer (black) | `#64748b` (slate-500) | `#e2e8f0` (slate-200) |
+| `--color-grey-medium` | Grey (medium) | Page number/header/footer (white), blockquote text/mark, title metadata (black) | `#475569` (slate-600) | `#cbd5e1` (slate-300) |
+| `--color-grey-dark` | Grey (dark) | Table header background (black) | `#334155` (slate-700) | `#1e293b` (slate-800) |
+| `--color-grey-darker` | Grey (darker) | - | `#1e293b` (slate-800) | `#0f172a` (slate-900) |
+| `--color-grey-darkest` | Grey (darkest) | Body text (white), slide background (black) | `#0f172a` (slate-900) | `#020617` (slate-950) |
+| `--color-link` | Link color | a tag | `#2563eb` (blue-600) | `#60a5fa` (blue-400) |
+
+### Colors (Component)
+
+| Variable | Description | white-canvas | black-canvas |
+|----------|-------------|--------------|--------------|
+| `--color-blockquote-background` | Blockquote background | `color-mix(grey-light 10%)` | `color-mix(grey-light 15%)` |
+| `--color-blockquote-mark` | Blockquote mark color | `grey-medium` | `grey-medium` |
+| `--color-blockquote-text` | Blockquote text color | `grey-medium` | `grey-medium` |
+| `--color-table-row-bg` | Table row background | `white` | `grey-darkest` |
+| `--color-table-row-bg-header` | Table header background | `grey-lightest` | `grey-dark` |
+| `--color-table-border` | Table border color | `grey-light` | `grey-medium` |
+| `--color-code-bg` | Code block background | `color-mix(grey-light 10%)` | `color-mix(grey-light 15%)` |
+| `--color-code-fg` | Code block text color | `grey-darkest` | `grey-lightest` |
+
+### Fonts
+
+| Variable | Description | Used in | Default |
+|----------|-------------|---------|---------|
+| `--font-family-base` | Base font | Entire slide | `'Noto Sans JP', sans-serif` |
+| `--font-family-mono` | Monospace font | Code blocks | `ui-monospace, SFMono-Regular, ...` |
+| `--font-size-base` | Base font size | Entire slide | `40px` |
+| `--font-size-display` | Display size | title page, display page | `2.5em` |
+| `--font-size-title` | Title size | h1, section page | `2em` |
+| `--font-size-heading` | Heading size | h2, toc page, agenda page heading | `1.3em` |
+| `--font-size-medium` | Medium size | h3 | `1.15em` |
+| `--font-size-body` | Body size | agenda page body, blockquote | `1em` |
+| `--font-size-small` | Small size | - | `0.85em` |
+| `--font-size-note` | Note size | Page number, header, footer | `0.7em` |
+| `--font-weight-normal` | Normal weight | h5, h6, agenda page body | `400` |
+| `--font-weight-bold` | Bold weight | h1-h4, agenda page heading, display page emphasis | `700` |
+| `--font-weight-black` | Black weight | - | `900` |
+
+### Line Heights
+
+| Variable | Description | Used in | Default |
+|----------|-------------|---------|---------|
+| `--line-height-tight` | Tight line height | Headings, blockquote | `1.2` |
+| `--line-height-normal` | Normal line height | Entire slide, agenda page body | `1.45` |
+| `--line-height-loose` | Loose line height | toc page, agenda page heading | `2` |
+
+### Layout
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `--slide-padding-x` | Slide horizontal padding | `80px` |
+| `--slide-padding-y` | Slide vertical padding | `80px` |
+| `--header-footer-margin-x` | Header/footer/page number horizontal margin | `80px` |
+| `--header-footer-margin-y` | Header/footer/page number vertical margin | `20px` |
+| `--border-radius` | Border radius (blockquote) | `8px` |
+
+## 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) |
+
+## Usage Example
+
+```scss
+/*!
+ * @theme my-custom-theme
+ */
+
+@use '@subroh0508/marp-theme-canvas/scss/white-canvas' as white-canvas;
+
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
+
+@include white-canvas.apply() {
+  --color-primary: #e11d48;
+  --color-accent: #fde047;
+}
+```
+
+## File Structure
+
+| File | Description |
+|------|-------------|
+| `_white-canvas.scss` | Light theme module |
+| `_black-canvas.scss` | Dark theme module |