@subroh0508/marp-theme-canvas 0.0.3 → 0.0.4

package/scss/white-canvas.scss

@@ -1,11 +1,11 @@
 /*!
- * 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;
@@ -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/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;
+@use './theme/white-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 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)
-);
+// ===== Apply theme =====
+@include theme.apply;

package/scss/CLAUDE.md

@@ -1,59 +0,0 @@
-# scss
-
-Marpテーマ用SCSSファイル
-
-## ディレクトリ構成
-
-- `page/` - 特定用途に特化したページスタイル（title、section、toc、agenda、display）
-- `component/` - スライド共通で使用する要素のスタイル（heading、table、code、blockquote等）
-
-## 共通命名規約
-
-- ファイル名: `_名前.scss`（アンダースコアプレフィックス必須、Sassパーシャル）
-- 名前: kebab-case（例: `title`, `text-decorator`）
-
-## @mixin configure() 規約
-
-全てのスタイルファイルは `@mixin configure()` でカプセル化する。
-
-### 引数の設計
-
-- **必須引数**: デフォルト値なし、リストの先頭に配置
-- **任意引数**: デフォルト値あり、リストの後方に配置
-- **命名**: セマンティックな名前を使用
-
-### 引数の命名パターン
-
-| 接頭辞 | 用途 | 例 |
-|--------|------|-----|
-| `$font-size-*` | フォントサイズ | `$font-size-title`, `$font-size-body` |
-| `$font-weight-*` | フォントウェイト | `$font-weight-bold`, `$font-weight-normal` |
-| `$font-family` | フォントファミリー | `$font-family`, `$font-mono` |
-| `$color-*` | 色 | `$color-text`, `$color-bg`, `$color-border` |
-| `$line-height-*` | 行間 | `$line-height-heading`, `$line-height-body` |
-| `$margin-*` | マージン | `$margin-x`, `$margin-y` |
-| `$padding-*` | パディング | `$padding-x`, `$padding-y` |
-| `$border-radius` | 角丸 | `$border-radius` |
-
-## 実装上のルール
-
-- **CSS変数の宣言・参照はテーマファイルのみ**: `var(--*)` の宣言および参照は `scss/` 直下に配置されたテーマファイル（例: `white-canvas.scss`）でのみ許可
-  - 理由: Marp用Markdownファイルのフロントマターでインラインスタイルとして変数を上書きし、スライドごとにスタイルを柔軟にカスタマイズできるようにするため
-  - 例: Markdownファイルで `--color-primary` を上書き
-    ```markdown
-    ---
-    theme: white-canvas
-    style: |
-      :root {
-        --color-primary: #3b91c4;
-        --color-accent: #ead7a4;
-      }
-    ---
-    ```
-- **page/ component/ 配下では禁止**: サブディレクトリ内のスタイルファイルでは CSS変数を直接参照しない。必要な値は全て `@mixin configure()` の引数として受け取る
-  - 理由: テーマとスタイルの疎結合を保つため
-  - テーマ側で `@include` 時に CSS変数を引数として渡す
-
-## 注意事項
-
-- コメントは `/*!` で始める（`/*` ではない）ことでCSSに出力される