@subroh0508/marp-theme-canvas 0.0.1

package/scss/black-canvas.scss

@@ -0,0 +1,233 @@
+/*!
+ * Black Canvas - 極力余計なスタイリングを廃した、シンプルなダークスライドテーマ
+ *
+ * 使用時はMarpのインラインスタイル指定で以下の変数を必ず定義してください。
+ * - --color-primary: メインカラー（h2の文字色など）
+ * - --color-accent: アクセントカラー（markタグの背景色など）
+ *
+ * 例:
+ *   style: |
+ *     :root {
+ *       --color-primary: #3b91c4;
+ *       --color-accent: #ead7a4;
+ *     }
+ *
+ * @theme black-canvas
+ * @author subroh_0508
+ *
+ * @auto-scaling true
+ * @size 16:9 1920px 1080px
+ */
+
+// ===== コンポーネント =====
+@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;
+
+// ===== 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)
+);

package/scss/component/CLAUDE.md

@@ -0,0 +1,55 @@
+# component
+
+スライド共通で使用する要素のスタイル
+
+## ファイル構成
+
+```scss
+// ===== _ファイル名.scss =====
+// コンポーネントの説明
+
+@mixin configure($引数1, $引数2, $引数3: デフォルト値) {
+  セレクタ {
+    プロパティ: 値;
+  }
+}
+```
+
+## テーマからの呼び出し
+
+### section内で呼び出すコンポーネント
+
+```scss
+section {
+  @include section.configure(...);
+  @include pagination.configure(...);
+  @include prettylights.configure;
+}
+```
+
+### グローバルスコープで呼び出すコンポーネント
+
+```scss
+@include header.configure(...);
+@include footer.configure(...);
+@include heading.configure(...);
+@include blockquote.configure(...);
+@include text-decorator.configure(...);
+@include table.configure(...);
+@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-*` | シンタックスハイライト |

package/scss/component/_a.scss

@@ -0,0 +1,13 @@
+// ===== _a.scss =====
+// リンク（aタグ）のスタイル
+
+@mixin configure($color-text) {
+  a {
+    color: $color-text;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

package/scss/component/_blockquote.scss

@@ -0,0 +1,36 @@
+// ===== _blockquote.scss =====
+// Marpスライドの引用スタイル
+
+@mixin configure($font-size, $line-height, $color-text, $color-bg, $color-mark, $border-radius) {
+  blockquote {
+    position: relative;
+    margin-left: 0;
+    margin-right: 0;
+    padding: 0.5em 0.5em 0.5em 2em;
+    font-size: $font-size;
+    font-style: italic;
+    line-height: $line-height;
+    color: $color-text;
+    background: $color-bg;
+    border-radius: $border-radius;
+
+    // 左上の引用符
+    &::before {
+      content: '“';
+      position: absolute;
+      left: 0.2em;
+      font-size: 2em;
+      line-height: 1;
+      color: $color-mark;
+    }
+
+    // 子要素のmargin調整
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/scss/component/_code.scss

@@ -0,0 +1,31 @@
+// ===== _code.scss =====
+// コードブロック用スタイル
+// github-markdown-css v5.8.1 を改変
+// https://github.com/sindresorhus/github-markdown-css/blob/v5.8.1/github-markdown.css
+
+@mixin configure($font-mono, $color-bg, $color-fg) {
+  code, tt {
+    font-family: $font-mono;
+    padding: .2em .4em;
+    font-size: 85%;
+    white-space: break-spaces;
+    background-color: $color-bg;
+    border-radius: 6px;
+  }
+  pre {
+    font-family: $font-mono;
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    color: $color-fg;
+    background-color: $color-bg;
+    border-radius: 6px;
+  }
+  pre > code {
+    padding: 0;
+    background: transparent;
+    border: 0;
+    white-space: pre;
+  }
+}

package/scss/component/_columns.scss

@@ -0,0 +1,56 @@
+// ===== _columns.scss =====
+// Flexboxベースのカラムレイアウトコンポーネント
+//
+// 使い方1: _class: columns（スライド全体がカラムレイアウト）
+// 使い方2: <div class="columns">（部分的なカラムレイアウト）
+//
+// ※ divタグの直後・直前に空行を入れることでMarkdownが正しく解釈される
+
+$_column-widths: (2, 3, 4, 6, 7, 8);
+
+// カラム要素の共通スタイル
+// - flex: $n ... 比率ベースの幅指定（gapを考慮した配分になる）
+//                例: column-4 + column-6 = 4:6の比率で配分
+// - min-width: 0 ... Flex子要素のデフォルト値(auto)を上書きし、
+//                    コンテンツサイズに関係なくflex-basisの幅を維持する
+// - > *, p > * { max-width: 100% } ... 子要素および段落内の要素（画像等）をカラム幅に収める
+@mixin _column-children {
+  > .column {
+    flex: 1;
+    min-width: 0;
+
+    > *,
+    p > * {
+      max-width: 100%;
+    }
+  }
+
+  @each $n in $_column-widths {
+    > .column-#{$n} {
+      flex: $n;
+      min-width: 0;
+
+      > *,
+      p > * {
+        max-width: 100%;
+      }
+    }
+  }
+}
+
+@mixin configure() {
+  // 使い方1: _class: columns（section自体がFlexコンテナになる）
+  &.columns {
+    flex-direction: row;
+    gap: 1em;
+    @include _column-children;
+  }
+
+  // 使い方2: <div class="columns">（部分的なカラムレイアウト）
+  .columns {
+    display: flex;
+    gap: 1em;
+    width: 100%;
+    @include _column-children;
+  }
+}

package/scss/component/_footer.scss

@@ -0,0 +1,12 @@
+// ===== _footer.scss =====
+// Marpスライドのフッタースタイル
+
+@mixin configure($margin-x, $margin-y, $font-size, $color-text) {
+  footer {
+    position: absolute;
+    bottom: $margin-y;
+    left: $margin-x;
+    font-size: $font-size;
+    color: $color-text;
+  }
+}

package/scss/component/_header.scss

@@ -0,0 +1,12 @@
+// ===== _header.scss =====
+// Marpスライドのヘッダースタイル
+
+@mixin configure($margin-x, $margin-y, $font-size, $color-text) {
+  header {
+    position: absolute;
+    top: $margin-y;
+    left: $margin-x;
+    font-size: $font-size;
+    color: $color-text;
+  }
+}

package/scss/component/_heading.scss

@@ -0,0 +1,71 @@
+// ===== _heading.scss =====
+// Marpスライドの見出しスタイル（h1-h6）
+
+@mixin configure(
+  $line-height,
+  $font-size-h1: 1em,
+  $font-size-h2: 1em,
+  $font-size-h3: 1em,
+  $font-size-h4: 1em,
+  $font-size-h5: 1em,
+  $font-size-h6: 1em,
+  $font-weight-h1: bold,
+  $font-weight-h2: bold,
+  $font-weight-h3: bold,
+  $font-weight-h4: bold,
+  $font-weight-h5: normal,
+  $font-weight-h6: normal,
+  $color-text-h1: inherit,
+  $color-text-h2: inherit,
+  $color-text-h3: inherit,
+  $color-text-h4: inherit,
+  $color-text-h5: inherit,
+  $color-text-h6: inherit
+) {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: $line-height;
+    margin: 0 0 0.5em;
+  }
+
+  h1 {
+    font-size: $font-size-h1;
+    font-weight: $font-weight-h1;
+    color: $color-text-h1;
+  }
+
+  h2 {
+    font-size: $font-size-h2;
+    font-weight: $font-weight-h2;
+    color: $color-text-h2;
+    margin: 0 0 0.8em;
+  }
+
+  h3 {
+    font-size: $font-size-h3;
+    font-weight: $font-weight-h3;
+    color: $color-text-h3;
+  }
+
+  h4 {
+    font-size: $font-size-h4;
+    font-weight: $font-weight-h4;
+    color: $color-text-h4;
+  }
+
+  h5 {
+    font-size: $font-size-h5;
+    font-weight: $font-weight-h5;
+    color: $color-text-h5;
+  }
+
+  h6 {
+    font-size: $font-size-h6;
+    font-weight: $font-weight-h6;
+    color: $color-text-h6;
+  }
+}

package/scss/component/_index.scss

@@ -0,0 +1,23 @@
+@charset "utf-8";
+
+/*!
+ * Components - スライド共通で使用する要素のスタイル
+ *
+ * @use '@subroh0508/marp-theme-canvas/scss/component';
+ * @use '@subroh0508/marp-theme-canvas/scss/component/heading';
+ */
+
+@forward 'a' as a-*;
+@forward 'blockquote' as blockquote-*;
+@forward 'code' as code-*;
+@forward 'columns' as columns-*;
+@forward 'footer' as footer-*;
+@forward 'header' as header-*;
+@forward 'heading' as heading-*;
+@forward 'pagination' as pagination-*;
+@forward 'section' as section-*;
+@forward 'table' as table-*;
+@forward 'text-decorator' as text-decorator-*;
+
+// シンタックスハイライト
+@forward 'prettylights' as prettylights-*;

package/scss/component/_pagination.scss

@@ -0,0 +1,14 @@
+// ===== _pagination.scss =====
+// Marpスライドのページ番号スタイル（section::after）
+// Marpの paginate: true 指定時に表示される要素
+
+@mixin configure($margin-x, $margin-y, $font-size, $color-text) {
+  &::after {
+    position: absolute;
+    padding: 0;
+    right: $margin-x;
+    bottom: $margin-y;
+    font-size: $font-size;
+    color: $color-text;
+  }
+}

package/scss/component/_section.scss

@@ -0,0 +1,43 @@
+// ===== _section.scss =====
+// Marpスライドのsection（本体）スタイル
+
+@mixin configure(
+  $width,
+  $height,
+  $padding-x,
+  $padding-y,
+  $color-bg,
+  $color-text,
+  $font-family,
+  $font-size,
+  $line-height,
+  $list-indent
+) {
+  width: $width;
+  height: $height;
+  padding: $padding-y $padding-x;
+  background-color: $color-bg;
+  color: $color-text;
+  font-family: $font-family;
+  font-size: $font-size;
+  line-height: $line-height;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  // コンテンツ要素のmargin-topを0に
+  p,
+  ul,
+  ol,
+  blockquote,
+  pre {
+    margin-top: 0;
+  }
+
+  // リストのインデント調整
+  ul,
+  ol {
+    padding-inline-start: $list-indent;
+  }
+}

package/scss/component/_table.scss

@@ -0,0 +1,30 @@
+// ===== _table.scss =====
+// テーブル用スタイル
+// 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) {
+  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 $color-border-vert;
+  }
+  th {
+    font-weight: 600;
+    background-color: $color-header-bg;
+  }
+  tr {
+    background-color: $color-row-bg;
+    border-top: 1px solid $color-border-horz;
+  }
+  tr:nth-child(2n) {
+    background-color: $color-even-row-bg;
+  }
+}

package/scss/component/_text-decorator.scss

@@ -0,0 +1,17 @@
+// ===== _text-decorator.scss =====
+// テキスト装飾スタイル（strong, mark, rp）
+
+@mixin configure($font-weight-bold, $font-weight-normal, $color-text-highlight) {
+  strong {
+    font-weight: $font-weight-bold;
+  }
+
+  mark {
+    font-weight: $font-weight-bold;
+    background-color: $color-text-highlight;
+  }
+
+  rp {
+    font-weight: $font-weight-normal;
+  }
+}

package/scss/component/prettylights/CLAUDE.md

@@ -0,0 +1,41 @@
+# prettylights
+
+シンタックスハイライト用スタイル（highlight.jsクラスへのカラーマッピング）
+
+## 構成
+
+```
+prettylights/
+├── _base.scss   # 共通ロジック（引数付きmixin）
+├── _light.scss  # Lightテーマ色定義
+└── _dark.scss   # Darkテーマ色定義
+```
+
+## パターン
+
+- `_base.scss`: highlight.jsクラスへのカラーマッピングを引数付きmixinで定義
+- `_light.scss` / `_dark.scss`: 色変数を定義し、引数なしmixinでbaseを呼び出す
+
+```scss
+// _light.scss
+@use 'base';
+
+$pl-comment: #59636e;
+// ... 色定義
+
+@mixin configure {
+  @include base.configure($pl-comment, ...);
+}
+```
+
+## テーマからの呼び出し
+
+section内で呼び出す:
+
+```scss
+@use './component/prettylights/light' as prettylights;
+
+section {
+  @include prettylights.configure;
+}
+```