@subroh0508/marp-theme-canvas 0.0.1

package/scss/component/prettylights/_base.scss

@@ -0,0 +1,128 @@
+// ===== _base.scss =====
+// シンタックスハイライト用スタイル（highlight.jsクラスへのカラーマッピング）
+// marp-core v4.2.0 を改変
+// https://github.com/marp-team/marp-core/blob/v4.2.0/themes/default.scss
+
+@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)
+) {
+  pre {
+    // デフォルト色
+    :where(.hljs) {
+      color: $storage-modifier;
+    }
+
+    // キーワード系
+    :where(.hljs-doctag),
+    :where(.hljs-keyword),
+    :where(.hljs-meta .hljs-keyword),
+    :where(.hljs-template-tag),
+    :where(.hljs-template-variable),
+    :where(.hljs-type),
+    :where(.hljs-variable.language_) {
+      color: $keyword;
+    }
+
+    // 関数・クラス名
+    :where(.hljs-title),
+    :where(.hljs-title.class_),
+    :where(.hljs-title.class_.inherited__),
+    :where(.hljs-title.function_) {
+      color: $entity;
+    }
+
+    // 定数・属性・数値
+    :where(.hljs-attr),
+    :where(.hljs-attribute),
+    :where(.hljs-literal),
+    :where(.hljs-meta),
+    :where(.hljs-number),
+    :where(.hljs-operator),
+    :where(.hljs-selector-attr),
+    :where(.hljs-selector-class),
+    :where(.hljs-selector-id),
+    :where(.hljs-variable) {
+      color: $constant;
+    }
+
+    // 文字列・正規表現
+    :where(.hljs-string),
+    :where(.hljs-meta .hljs-string),
+    :where(.hljs-regexp) {
+      color: $string;
+    }
+
+    // 組み込み関数・シンボル
+    :where(.hljs-built_in),
+    :where(.hljs-symbol) {
+      color: $variable;
+    }
+
+    // コメント
+    :where(.hljs-code),
+    :where(.hljs-comment),
+    :where(.hljs-formula) {
+      color: $comment;
+    }
+
+    // タグ名・セレクタ
+    :where(.hljs-name),
+    :where(.hljs-quote),
+    :where(.hljs-selector-pseudo),
+    :where(.hljs-selector-tag) {
+      color: $entity-tag;
+    }
+
+    // 変数展開
+    :where(.hljs-subst) {
+      color: $storage-modifier;
+    }
+
+    // マークアップ: 見出し
+    :where(.hljs-section) {
+      font-weight: bold;
+      color: $markup-heading;
+    }
+
+    // マークアップ: リスト
+    :where(.hljs-bullet) {
+      color: $markup-list;
+    }
+
+    // マークアップ: 強調
+    :where(.hljs-emphasis) {
+      font-style: italic;
+      color: $storage-modifier;
+    }
+
+    :where(.hljs-strong) {
+      font-weight: bold;
+      color: $storage-modifier;
+    }
+
+    // diff: 追加行
+    :where(.hljs-addition) {
+      color: $markup-inserted-text;
+      background-color: $markup-inserted-bg;
+    }
+
+    // diff: 削除行
+    :where(.hljs-deletion) {
+      color: $markup-deleted-text;
+      background-color: $markup-deleted-bg;
+    }
+  }
+}

package/scss/component/prettylights/_dark.scss

@@ -0,0 +1,41 @@
+// ===== _dark.scss =====
+// シンタックスハイライト（Dark テーマ）カラー定義
+// github-markdown-css v5.8.1 を改変
+// https://github.com/sindresorhus/github-markdown-css/blob/v5.8.1/github-markdown-dark.css
+
+@use 'base';
+
+// ===== Dark テーマカラー =====
+$pl-comment: #9198a1;
+$pl-constant: #79c0ff;
+$pl-entity: #d2a8ff;
+$pl-entity-tag: #7ee787;
+$pl-keyword: #ff7b72;
+$pl-string: #a5d6ff;
+$pl-variable: #ffa657;
+$pl-storage-modifier: #f0f6fc;
+$pl-markup-heading: #1f6feb;
+$pl-markup-list: #f2cc60;
+$pl-markup-inserted-text: #aff5b4;
+$pl-markup-inserted-bg: #033a16;
+$pl-markup-deleted-text: #ffdcd7;
+$pl-markup-deleted-bg: #67060c;
+
+@mixin configure {
+  @include base.configure(
+    $pl-comment,
+    $pl-constant,
+    $pl-entity,
+    $pl-entity-tag,
+    $pl-keyword,
+    $pl-string,
+    $pl-variable,
+    $pl-storage-modifier,
+    $pl-markup-heading,
+    $pl-markup-list,
+    $pl-markup-inserted-text,
+    $pl-markup-inserted-bg,
+    $pl-markup-deleted-text,
+    $pl-markup-deleted-bg
+  );
+}

package/scss/component/prettylights/_index.scss

@@ -0,0 +1,13 @@
+@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';
+ */
+
+@forward 'base' as base-*;
+@forward 'light' as light-*;
+@forward 'dark' as dark-*;

package/scss/component/prettylights/_light.scss

@@ -0,0 +1,41 @@
+// ===== _light.scss =====
+// シンタックスハイライト（Light テーマ）カラー定義
+// github-markdown-css v5.8.1 を改変
+// https://github.com/sindresorhus/github-markdown-css/blob/v5.8.1/github-markdown-light.css
+
+@use 'base';
+
+// ===== Light テーマカラー =====
+$pl-comment: #59636e;
+$pl-constant: #0550ae;
+$pl-entity: #6639ba;
+$pl-entity-tag: #0550ae;
+$pl-keyword: #cf222e;
+$pl-string: #0a3069;
+$pl-variable: #953800;
+$pl-storage-modifier: #1f2328;
+$pl-markup-heading: #0550ae;
+$pl-markup-list: #3b2300;
+$pl-markup-inserted-text: #116329;
+$pl-markup-inserted-bg: #dafbe1;
+$pl-markup-deleted-text: #82071e;
+$pl-markup-deleted-bg: #ffebe9;
+
+@mixin configure {
+  @include base.configure(
+    $pl-comment,
+    $pl-constant,
+    $pl-entity,
+    $pl-entity-tag,
+    $pl-keyword,
+    $pl-string,
+    $pl-variable,
+    $pl-storage-modifier,
+    $pl-markup-heading,
+    $pl-markup-list,
+    $pl-markup-inserted-text,
+    $pl-markup-inserted-bg,
+    $pl-markup-deleted-text,
+    $pl-markup-deleted-bg
+  );
+}

package/scss/page/CLAUDE.md

@@ -0,0 +1,74 @@
+# page
+
+特定用途に特化したページスタイル（Marpのclass指定で切り替え）
+
+## ファイル構成
+
+```scss
+// ===== _ファイル名.scss =====
+// スタイルの説明（どのようなページに使うか）
+//
+// 使用方法: <!-- _class: クラス名 -->
+
+@mixin configure($引数1, $引数2, $引数3: デフォルト値) {
+  &.クラス名 {
+    // セレクタの役割をコメントで説明
+    セレクタ {
+      プロパティ: 値;
+    }
+  }
+}
+```
+
+## スコープ設定
+
+必ず `&.クラス名` でラップする（親の `section` に依存）
+
+```scss
+&.toc {
+  ul,
+  ol {
+    font-size: $font-size;
+  }
+}
+```
+
+## コメント規約
+
+- **セレクタの役割**: 各セレクタの前にコメントで用途を説明
+- **レイアウト情報**: flexの配置方法など、視覚的な配置をコメント
+
+```scss
+// h1: タイトル文字列
+// section上8割を占有、上下中央揃え、左寄せ
+h1 {
+  font-size: $font-size-title;
+  flex: 0 0 80%;
+  // ...
+}
+```
+
+## テーマからの呼び出し
+
+`white-canvas.scss` などテーマファイルで `section` ブロック内から呼び出す:
+
+```scss
+@use './page/title' as page-title;
+
+section {
+  @include page-title.configure(
+    $font-size-title: var(--font-size-display),
+    $color-metadata-text: var(--color-grey-light)
+  );
+}
+```
+
+## 既存のページスタイル一覧
+
+| ファイル | クラス名 | 用途 |
+|----------|----------|------|
+| `_title.scss` | `title` | タイトルページ（h1 + メタデータ） |
+| `_toc.scss` | `toc` | 目次ページ |
+| `_agenda.scss` | `agenda` | アジェンダ（今日話すこと等） |
+| `_section.scss` | `section` | 中扉ページ |
+| `_display.scss` | `display` | 大きく表示（文章または画像） |

package/scss/page/_agenda.scss

@@ -0,0 +1,38 @@
+// ===== _agenda.scss =====
+// アジェンダページ用スタイル
+// 「今日話すこと」「Learning Outcome」等を冒頭に提示するページ
+//
+// 使用方法: <!-- _class: agenda -->
+
+@mixin configure(
+  $font-size-heading,
+  $font-size-body,
+  $line-height-heading,
+  $line-height-body,
+  $font-weight-heading: bold,
+  $font-weight-body: normal
+) {
+  &.agenda {
+    // リスト: 直接の子要素
+    > ul,
+    > ol {
+      font-size: $font-size-heading;
+      font-weight: $font-weight-heading;
+      line-height: $line-height-heading;
+
+      // ネストされたリスト（第2レベル）
+      ul,
+      ol {
+        font-size: calc(#{$font-size-body} / #{$font-size-heading} * 1em);
+        font-weight: $font-weight-body;
+        line-height: $line-height-body;
+
+        // 第3レベル以降はサイズを維持
+        ul,
+        ol {
+          font-size: 1em;
+        }
+      }
+    }
+  }
+}

package/scss/page/_display.scss

@@ -0,0 +1,39 @@
+// ===== _display.scss =====
+// 短い文章を大きく表示したり、1枚の写真や図を目立たせるページ用スタイル
+//
+// 使用方法: <!-- _class: display -->
+
+@mixin configure(
+  $font-size,
+  $font-weight-bold: bold,
+  $font-weight-normal: normal
+) {
+  &.display {
+    // 上下左右中央揃え
+    justify-content: center;
+    align-items: center;
+
+    // p: メイン文章（上下左右中央揃え）
+    p {
+      margin: 0;
+      text-align: center;
+    }
+
+    // imgが存在しない場合、pタグを大きく表示
+    &:not(:has(img)) p {
+      font-size: $font-size;
+      font-weight: $font-weight-bold;
+    }
+
+    // img: 画像（上下左右中央揃え）
+    img {
+      display: block;
+      margin: 0 0;
+    }
+
+    // pタグが存在する場合、imgの下にマージンを追加
+    &:has(p) img {
+      margin: 0 0 1em;
+    }
+  }
+}

package/scss/page/_index.scss

@@ -0,0 +1,14 @@
+@charset "utf-8";
+
+/*!
+ * Page Styles - 特定用途に特化したページスタイル
+ *
+ * @use '@subroh0508/marp-theme-canvas/scss/page';
+ * @use '@subroh0508/marp-theme-canvas/scss/page/title';
+ */
+
+@forward 'agenda' as agenda-*;
+@forward 'display' as display-*;
+@forward 'section' as section-*;
+@forward 'title' as title-*;
+@forward 'toc' as toc-*;

package/scss/page/_section.scss

@@ -0,0 +1,20 @@
+// ===== _section.scss =====
+// 中扉ページ用スタイル
+//
+// 使用方法: <!-- _class: section -->
+
+@mixin configure($font-size, $font-weight: bold) {
+  &.section {
+    // p: セクションタイトル
+    // 上下中央揃え、左寄せ
+    p {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      font-size: $font-size;
+      font-weight: $font-weight;
+      margin: 0;
+    }
+  }
+}

package/scss/page/_title.scss

@@ -0,0 +1,38 @@
+// ===== _title.scss =====
+// タイトルページ用スタイル
+//
+// 使用方法: <!-- _class: title -->
+
+@mixin configure($font-size-title, $color-metadata-text) {
+  &.title {
+    // h1: タイトル文字列
+    // section上8割を占有、上下中央揃え、左寄せ
+    h1 {
+      font-size: $font-size-title;
+      flex: 0 0 80%;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      margin: 0;
+
+      // small: サブタイトル
+      small {
+        margin-top: 0.5em;
+        font-size: 0.5em;
+      }
+    }
+
+    // h1直後のp: 日付・イベント名・著者名
+    h1 + p {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: center;
+      text-align: right;
+      color: $color-metadata-text;
+      margin: 0;
+    }
+  }
+}

package/scss/page/_toc.scss

@@ -0,0 +1,15 @@
+// ===== _toc.scss =====
+// 目次ページ用スタイル
+//
+// 使用方法: <!-- _class: toc -->
+
+@mixin configure($font-size, $line-height) {
+  &.toc {
+    // リスト: 目次項目（直接の子要素のみ）
+    > ul,
+    > ol {
+      font-size: $font-size;
+      line-height: $line-height;
+    }
+  }
+}

package/scss/white-canvas.scss

@@ -0,0 +1,233 @@
+/*!
+ * 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
+ */
+
+// ===== コンポーネント =====
+@use './component/prettylights/light' 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;
+
+// ===== 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 300-900 ---
+  --color-grey-lightest: #cbd5e1; // slate-300
+  --color-grey-lighter: #94a3b8;  // slate-400
+  --color-grey-light: #64748b;    // slate-500
+  --color-grey-medium: #475569;   // slate-600
+  --color-grey-dark: #334155;     // slate-700
+  --color-grey-darker: #1e293b;   // slate-800
+  --color-grey-darkest: #0f172a;  // slate-900
+
+  // --- 色（コンポーネント: blockquote） ---
+  --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);
+
+  // --- 色（コンポーネント: table） ---
+  --color-table-row-bg: var(--color-white);
+  --color-table-row-bg-header: var(--color-grey-lightest);
+  --color-table-border: var(--color-grey-light);
+
+  // --- 色（コンポーネント: code） ---
+  --color-code-bg: color-mix(in srgb, var(--color-grey-light) 10%, transparent);
+  --color-code-fg: var(--color-grey-darkest);
+
+  // --- 色（コンポーネント: link） ---
+  --color-link: #2563eb; // Tailwind blue-600
+
+  // --- フォント ---
+  --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-white),
+    $color-text: var(--color-grey-darkest),
+    $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-medium)
+  );
+
+  // ===== ページスタイル =====
+  @include page-title.configure(
+    $font-size-title: var(--font-size-display),
+    $color-metadata-text: var(--color-grey-light)
+  );
+
+  @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-medium)
+);
+
+// ===== 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-medium)
+);
+
+// ===== 見出し（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)
+);