@subroh0508/marp-theme-canvas 0.1.1 → 0.2.0

package/README.ja.md

@@ -7,10 +7,9 @@
 
 シンプル・ミニマルな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)
+[subroh0508.github.io/marp-theme-canvas/](https://subroh0508.github.io/marp-theme-canvas/)
 
 ## 特徴
 
@@ -208,14 +207,14 @@ Canvasのスタイルはモジュール化されており、独自テーマ作
 scss/
 ├── canvas/                 # ベースmixin（@useでインポート可能）
 │   ├── token/              # デザイントークン（色、タイポグラフィ）
-│   ├── element/            # HTML要素スタイル（見出し、テーブル、コード等）
-│   ├── component/          # 複合コンポーネント（セクション、ヘッダー、フッター等）
-│   └── pattern/            # ページレイアウトパターン（タイトル、目次、アジェンダ等）
+│   ├── component/          # HTML要素単体・組み合わせのスタイル（見出し、テーブル、コード、セクション等）
+│   ├── common-layout/      # 複数のslide-patternから参照される再利用可能なレイアウト定義
+│   ├── decorator/          # 明示的なクラス指定が必要な装飾スタイル
+│   └── slide-pattern/      # ページレイアウトパターン（タイトル、目次、アジェンダ等）
 ├── white-canvas/           # ライトテーマ設定
 │   ├── token/              # テーマ固有のトークン
-│   ├── element/            # 要素の設定
 │   ├── component/          # コンポーネントの設定
-│   └── pattern/            # パターンの設定
+│   └── slide-pattern/      # スライドパターンの設定
 ├── black-canvas/           # ダークテーマ設定
 │   └── （white-canvasと同じ構造）
 ├── white-canvas.scss       # ライトテーマのエントリーポイント
@@ -232,9 +231,9 @@ scss/
  */
 
 // ベースmixinをインポート
-@use '@subroh0508/marp-theme-canvas/scss/canvas/element/heading' as heading;
+@use '@subroh0508/marp-theme-canvas/scss/canvas/component/heading' as heading;
 @use '@subroh0508/marp-theme-canvas/scss/canvas/component/section' as section;
-@use '@subroh0508/marp-theme-canvas/scss/canvas/pattern/title' as title;
+@use '@subroh0508/marp-theme-canvas/scss/canvas/slide-pattern/title' as title;
 
 // Google Fonts
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
@@ -282,7 +281,7 @@ scss/
 
 ```scss
 // テーマ設定ファイルをインポート
-@use '@subroh0508/marp-theme-canvas/scss/white-canvas/element/heading';
+@use '@subroh0508/marp-theme-canvas/scss/white-canvas/component/heading';
 @use '@subroh0508/marp-theme-canvas/scss/white-canvas/component/section';
 ```
 
@@ -294,7 +293,7 @@ import '@subroh0508/marp-theme-canvas/white-canvas.css'
 import '@subroh0508/marp-theme-canvas/black-canvas.css'
 
 // 個別のCSSモジュールをインポート
-import '@subroh0508/marp-theme-canvas/white-canvas/element/heading.css'
+import '@subroh0508/marp-theme-canvas/white-canvas/component/heading.css'
 ```
 
 ## 開発

package/README.md

@@ -9,7 +9,7 @@ A simple and minimal Marp theme. A design that eliminates unnecessary decoration
 
 ## Docs
 
-https://subroh0508.github.io/marp-theme-canvas/
+[subroh0508.github.io/marp-theme-canvas/](https://subroh0508.github.io/marp-theme-canvas/)
 
 ## Features
 
@@ -207,14 +207,14 @@ Canvas styles are modularized and can be imported individually when creating cus
 scss/
 ├── canvas/                 # Base mixins (importable via @use)
 │   ├── token/              # Design tokens (color, typography)
-│   ├── element/            # HTML element styles (heading, table, code, etc.)
-│   ├── component/          # Composite components (section, header, footer, etc.)
-│   └── pattern/            # Page layout patterns (title, toc, agenda, etc.)
+│   ├── component/          # Styles for HTML elements and their combinations (heading, table, code, section, etc.)
+│   ├── common-layout/      # Reusable layout definitions referenced by multiple slide patterns
+│   ├── decorator/          # Decorative styles requiring explicit class specification
+│   └── slide-pattern/      # Page layout patterns (title, toc, agenda, etc.)
 ├── white-canvas/           # Light theme configuration
 │   ├── token/              # Theme-specific tokens
-│   ├── element/            # Element configurations
 │   ├── component/          # Component configurations
-│   └── pattern/            # Pattern configurations
+│   └── slide-pattern/      # Slide pattern configurations
 ├── black-canvas/           # Dark theme configuration
 │   └── (same structure as white-canvas)
 ├── white-canvas.scss       # Light theme entry point
@@ -231,9 +231,9 @@ Import base mixins from `canvas/` to create custom themes:
  */
 
 // Import base mixins
-@use '@subroh0508/marp-theme-canvas/scss/canvas/element/heading' as heading;
+@use '@subroh0508/marp-theme-canvas/scss/canvas/component/heading' as heading;
 @use '@subroh0508/marp-theme-canvas/scss/canvas/component/section' as section;
-@use '@subroh0508/marp-theme-canvas/scss/canvas/pattern/title' as title;
+@use '@subroh0508/marp-theme-canvas/scss/canvas/slide-pattern/title' as title;
 
 // Google Fonts
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
@@ -281,7 +281,7 @@ You can also import pre-configured theme files:
 
 ```scss
 // Import theme configuration files
-@use '@subroh0508/marp-theme-canvas/scss/white-canvas/element/heading';
+@use '@subroh0508/marp-theme-canvas/scss/white-canvas/component/heading';
 @use '@subroh0508/marp-theme-canvas/scss/white-canvas/component/section';
 ```
 
@@ -293,7 +293,7 @@ import '@subroh0508/marp-theme-canvas/white-canvas.css'
 import '@subroh0508/marp-theme-canvas/black-canvas.css'
 
 // Import individual CSS modules
-import '@subroh0508/marp-theme-canvas/white-canvas/element/heading.css'
+import '@subroh0508/marp-theme-canvas/white-canvas/component/heading.css'
 ```
 
 ## Development

package/css/black-canvas/common-layout/columns.css

@@ -0,0 +1,173 @@
+:root {
+  --cols-gap: 1em;
+}
+
+section.cols {
+  flex-direction: row;
+  gap: var(--cols-gap);
+}
+section.cols > .col {
+  flex: 1;
+  min-width: 0;
+}
+section.cols > .col > *,
+section.cols > .col p > * {
+  max-width: 100%;
+}
+section.cols > .col-1 {
+  flex: 1;
+  min-width: 0;
+}
+section.cols > .col-1 > *,
+section.cols > .col-1 p > * {
+  max-width: 100%;
+}
+section.cols > .col-2 {
+  flex: 2;
+  min-width: 0;
+}
+section.cols > .col-2 > *,
+section.cols > .col-2 p > * {
+  max-width: 100%;
+}
+section.cols > .col-3 {
+  flex: 3;
+  min-width: 0;
+}
+section.cols > .col-3 > *,
+section.cols > .col-3 p > * {
+  max-width: 100%;
+}
+section.cols > .col-4 {
+  flex: 4;
+  min-width: 0;
+}
+section.cols > .col-4 > *,
+section.cols > .col-4 p > * {
+  max-width: 100%;
+}
+section.cols > .col-6 {
+  flex: 6;
+  min-width: 0;
+}
+section.cols > .col-6 > *,
+section.cols > .col-6 p > * {
+  max-width: 100%;
+}
+section.cols > .col-7 {
+  flex: 7;
+  min-width: 0;
+}
+section.cols > .col-7 > *,
+section.cols > .col-7 p > * {
+  max-width: 100%;
+}
+section.cols > .col-8 {
+  flex: 8;
+  min-width: 0;
+}
+section.cols > .col-8 > *,
+section.cols > .col-8 p > * {
+  max-width: 100%;
+}
+section.cols > .col-9 {
+  flex: 9;
+  min-width: 0;
+}
+section.cols > .col-9 > *,
+section.cols > .col-9 p > * {
+  max-width: 100%;
+}
+section.cols > .col-10 {
+  flex: 10;
+  min-width: 0;
+}
+section.cols > .col-10 > *,
+section.cols > .col-10 p > * {
+  max-width: 100%;
+}
+section .cols {
+  display: flex;
+  gap: var(--cols-gap);
+  width: 100%;
+}
+section .cols > .col {
+  flex: 1;
+  min-width: 0;
+}
+section .cols > .col > *,
+section .cols > .col p > * {
+  max-width: 100%;
+}
+section .cols > .col-1 {
+  flex: 1;
+  min-width: 0;
+}
+section .cols > .col-1 > *,
+section .cols > .col-1 p > * {
+  max-width: 100%;
+}
+section .cols > .col-2 {
+  flex: 2;
+  min-width: 0;
+}
+section .cols > .col-2 > *,
+section .cols > .col-2 p > * {
+  max-width: 100%;
+}
+section .cols > .col-3 {
+  flex: 3;
+  min-width: 0;
+}
+section .cols > .col-3 > *,
+section .cols > .col-3 p > * {
+  max-width: 100%;
+}
+section .cols > .col-4 {
+  flex: 4;
+  min-width: 0;
+}
+section .cols > .col-4 > *,
+section .cols > .col-4 p > * {
+  max-width: 100%;
+}
+section .cols > .col-6 {
+  flex: 6;
+  min-width: 0;
+}
+section .cols > .col-6 > *,
+section .cols > .col-6 p > * {
+  max-width: 100%;
+}
+section .cols > .col-7 {
+  flex: 7;
+  min-width: 0;
+}
+section .cols > .col-7 > *,
+section .cols > .col-7 p > * {
+  max-width: 100%;
+}
+section .cols > .col-8 {
+  flex: 8;
+  min-width: 0;
+}
+section .cols > .col-8 > *,
+section .cols > .col-8 p > * {
+  max-width: 100%;
+}
+section .cols > .col-9 {
+  flex: 9;
+  min-width: 0;
+}
+section .cols > .col-9 > *,
+section .cols > .col-9 p > * {
+  max-width: 100%;
+}
+section .cols > .col-10 {
+  flex: 10;
+  min-width: 0;
+}
+section .cols > .col-10 > *,
+section .cols > .col-10 p > * {
+  max-width: 100%;
+}

package/css/black-canvas/component/hr.css

@@ -0,0 +1,12 @@
+:root {
+  --hr-height: 1px;
+  --hr-width: 100%;
+  --hr-color: var(--color-grey-medium);
+}
+
+hr {
+  width: var(--hr-width);
+  border: none;
+  border-top: var(--hr-height) solid var(--hr-color);
+  margin: 0 0 1em;
+}

package/css/{white-canvas/element → black-canvas/decorator}/hr.css

@@ -1,16 +1,3 @@
-:root {
-  --hr-height: 1px;
-  --hr-width: 100%;
-  --hr-color: var(--color-grey-light);
-}
-
-hr {
-  width: var(--hr-width);
-  border: none;
-  border-top: var(--hr-height) solid var(--hr-color);
-  margin: 0 0 1em;
-}
-
 section.hr-solid hr {
   width: var(--hr-width);
   border: none;

package/css/black-canvas/{pattern → slide-pattern}/display.css

@@ -1,5 +1,5 @@
 section.display {
-  --display-font-size: var(--font-size-x3l);
+  --display-font-size: var(--font-size-3xl);
   --display-font-weight: var(--font-weight-bold);
   justify-content: center;
   align-items: center;

package/css/black-canvas/{pattern → slide-pattern}/title.css

@@ -1,5 +1,5 @@
 section.title {
-  --title-h1-font-size: var(--font-size-x3l);
+  --title-h1-font-size: var(--font-size-3xl);
   --title-metadata-color-text: var(--color-grey-medium);
   justify-content: center;
 }

package/css/black-canvas/token/typography.css

@@ -6,7 +6,7 @@
   --font-size-l: 1.15em;
   --font-size-xl: 1.3em;
   --font-size-xxl: 2em;
-  --font-size-x3l: 2.5em;
+  --font-size-3xl: 2.5em;
   --font-weight-normal: 400;
   --font-weight-bold: 700;
   --font-weight-black: 900;

package/css/black-canvas.css

@@ -45,7 +45,7 @@
   --font-size-l: 1.15em;
   --font-size-xl: 1.3em;
   --font-size-xxl: 2em;
-  --font-size-x3l: 2.5em;
+  --font-size-3xl: 2.5em;
   --font-weight-normal: 400;
   --font-weight-bold: 700;
   --font-weight-black: 900;
@@ -304,19 +304,6 @@ hr {
   margin: 0 0 1em;
 }
 
-section.hr-solid hr {
-  width: var(--hr-width);
-  border: none;
-  border-top: var(--hr-height) solid var(--hr-color);
-  margin: 0 0 1em;
-}
-section.hr-dashed hr {
-  width: var(--hr-width);
-  border: none;
-  border-top: var(--hr-height) dashed var(--hr-color);
-  margin: 0 0 1em;
-}
-
 :root {
   --strong-font-weight: var(--font-weight-bold);
   --mark-font-weight: var(--font-weight-bold);
@@ -686,8 +673,21 @@ section .cols > .col-10 p > * {
   max-width: 100%;
 }
 
+section.hr-solid hr {
+  width: var(--hr-width);
+  border: none;
+  border-top: var(--hr-height) solid var(--hr-color);
+  margin: 0 0 1em;
+}
+section.hr-dashed hr {
+  width: var(--hr-width);
+  border: none;
+  border-top: var(--hr-height) dashed var(--hr-color);
+  margin: 0 0 1em;
+}
+
 section.title {
-  --title-h1-font-size: var(--font-size-x3l);
+  --title-h1-font-size: var(--font-size-3xl);
   --title-metadata-color-text: var(--color-grey-medium);
   justify-content: center;
 }
@@ -771,7 +771,7 @@ section.agenda > ol ol ol {
 }
 
 section.display {
-  --display-font-size: var(--font-size-x3l);
+  --display-font-size: var(--font-size-3xl);
   --display-font-weight: var(--font-weight-bold);
   justify-content: center;
   align-items: center;

package/css/white-canvas/common-layout/columns.css

@@ -0,0 +1,173 @@
+:root {
+  --cols-gap: 1em;
+}
+
+section.cols {
+  flex-direction: row;
+  gap: var(--cols-gap);
+}
+section.cols > .col {
+  flex: 1;
+  min-width: 0;
+}
+section.cols > .col > *,
+section.cols > .col p > * {
+  max-width: 100%;
+}
+section.cols > .col-1 {
+  flex: 1;
+  min-width: 0;
+}
+section.cols > .col-1 > *,
+section.cols > .col-1 p > * {
+  max-width: 100%;
+}
+section.cols > .col-2 {
+  flex: 2;
+  min-width: 0;
+}
+section.cols > .col-2 > *,
+section.cols > .col-2 p > * {
+  max-width: 100%;
+}
+section.cols > .col-3 {
+  flex: 3;
+  min-width: 0;
+}
+section.cols > .col-3 > *,
+section.cols > .col-3 p > * {
+  max-width: 100%;
+}
+section.cols > .col-4 {
+  flex: 4;
+  min-width: 0;
+}
+section.cols > .col-4 > *,
+section.cols > .col-4 p > * {
+  max-width: 100%;
+}
+section.cols > .col-6 {
+  flex: 6;
+  min-width: 0;
+}
+section.cols > .col-6 > *,
+section.cols > .col-6 p > * {
+  max-width: 100%;
+}
+section.cols > .col-7 {
+  flex: 7;
+  min-width: 0;
+}
+section.cols > .col-7 > *,
+section.cols > .col-7 p > * {
+  max-width: 100%;
+}
+section.cols > .col-8 {
+  flex: 8;
+  min-width: 0;
+}
+section.cols > .col-8 > *,
+section.cols > .col-8 p > * {
+  max-width: 100%;
+}
+section.cols > .col-9 {
+  flex: 9;
+  min-width: 0;
+}
+section.cols > .col-9 > *,
+section.cols > .col-9 p > * {
+  max-width: 100%;
+}
+section.cols > .col-10 {
+  flex: 10;
+  min-width: 0;
+}
+section.cols > .col-10 > *,
+section.cols > .col-10 p > * {
+  max-width: 100%;
+}
+section .cols {
+  display: flex;
+  gap: var(--cols-gap);
+  width: 100%;
+}
+section .cols > .col {
+  flex: 1;
+  min-width: 0;
+}
+section .cols > .col > *,
+section .cols > .col p > * {
+  max-width: 100%;
+}
+section .cols > .col-1 {
+  flex: 1;
+  min-width: 0;
+}
+section .cols > .col-1 > *,
+section .cols > .col-1 p > * {
+  max-width: 100%;
+}
+section .cols > .col-2 {
+  flex: 2;
+  min-width: 0;
+}
+section .cols > .col-2 > *,
+section .cols > .col-2 p > * {
+  max-width: 100%;
+}
+section .cols > .col-3 {
+  flex: 3;
+  min-width: 0;
+}
+section .cols > .col-3 > *,
+section .cols > .col-3 p > * {
+  max-width: 100%;
+}
+section .cols > .col-4 {
+  flex: 4;
+  min-width: 0;
+}
+section .cols > .col-4 > *,
+section .cols > .col-4 p > * {
+  max-width: 100%;
+}
+section .cols > .col-6 {
+  flex: 6;
+  min-width: 0;
+}
+section .cols > .col-6 > *,
+section .cols > .col-6 p > * {
+  max-width: 100%;
+}
+section .cols > .col-7 {
+  flex: 7;
+  min-width: 0;
+}
+section .cols > .col-7 > *,
+section .cols > .col-7 p > * {
+  max-width: 100%;
+}
+section .cols > .col-8 {
+  flex: 8;
+  min-width: 0;
+}
+section .cols > .col-8 > *,
+section .cols > .col-8 p > * {
+  max-width: 100%;
+}
+section .cols > .col-9 {
+  flex: 9;
+  min-width: 0;
+}
+section .cols > .col-9 > *,
+section .cols > .col-9 p > * {
+  max-width: 100%;
+}
+section .cols > .col-10 {
+  flex: 10;
+  min-width: 0;
+}
+section .cols > .col-10 > *,
+section .cols > .col-10 p > * {
+  max-width: 100%;
+}

package/css/white-canvas/component/hr.css

@@ -0,0 +1,12 @@
+:root {
+  --hr-height: 1px;
+  --hr-width: 100%;
+  --hr-color: var(--color-grey-light);
+}
+
+hr {
+  width: var(--hr-width);
+  border: none;
+  border-top: var(--hr-height) solid var(--hr-color);
+  margin: 0 0 1em;
+}

package/css/{black-canvas/element → white-canvas/decorator}/hr.css

@@ -1,16 +1,3 @@
-:root {
-  --hr-height: 1px;
-  --hr-width: 100%;
-  --hr-color: var(--color-grey-medium);
-}
-
-hr {
-  width: var(--hr-width);
-  border: none;
-  border-top: var(--hr-height) solid var(--hr-color);
-  margin: 0 0 1em;
-}
-
 section.hr-solid hr {
   width: var(--hr-width);
   border: none;

package/css/white-canvas/{pattern → slide-pattern}/display.css

@@ -1,5 +1,5 @@
 section.display {
-  --display-font-size: var(--font-size-x3l);
+  --display-font-size: var(--font-size-3xl);
   --display-font-weight: var(--font-weight-bold);
   justify-content: center;
   align-items: center;

package/css/white-canvas/{pattern → slide-pattern}/title.css

@@ -1,5 +1,5 @@
 section.title {
-  --title-h1-font-size: var(--font-size-x3l);
+  --title-h1-font-size: var(--font-size-3xl);
   --title-metadata-color-text: var(--color-grey-light);
   justify-content: center;
 }

package/css/white-canvas/token/typography.css

@@ -6,7 +6,7 @@
   --font-size-l: 1.15em;
   --font-size-xl: 1.3em;
   --font-size-xxl: 2em;
-  --font-size-x3l: 2.5em;
+  --font-size-3xl: 2.5em;
   --font-weight-normal: 400;
   --font-weight-bold: 700;
   --font-weight-black: 900;

package/css/white-canvas.css

@@ -45,7 +45,7 @@
   --font-size-l: 1.15em;
   --font-size-xl: 1.3em;
   --font-size-xxl: 2em;
-  --font-size-x3l: 2.5em;
+  --font-size-3xl: 2.5em;
   --font-weight-normal: 400;
   --font-weight-bold: 700;
   --font-weight-black: 900;
@@ -304,19 +304,6 @@ hr {
   margin: 0 0 1em;
 }
 
-section.hr-solid hr {
-  width: var(--hr-width);
-  border: none;
-  border-top: var(--hr-height) solid var(--hr-color);
-  margin: 0 0 1em;
-}
-section.hr-dashed hr {
-  width: var(--hr-width);
-  border: none;
-  border-top: var(--hr-height) dashed var(--hr-color);
-  margin: 0 0 1em;
-}
-
 :root {
   --strong-font-weight: var(--font-weight-bold);
   --mark-font-weight: var(--font-weight-bold);
@@ -686,8 +673,21 @@ section .cols > .col-10 p > * {
   max-width: 100%;
 }
 
+section.hr-solid hr {
+  width: var(--hr-width);
+  border: none;
+  border-top: var(--hr-height) solid var(--hr-color);
+  margin: 0 0 1em;
+}
+section.hr-dashed hr {
+  width: var(--hr-width);
+  border: none;
+  border-top: var(--hr-height) dashed var(--hr-color);
+  margin: 0 0 1em;
+}
+
 section.title {
-  --title-h1-font-size: var(--font-size-x3l);
+  --title-h1-font-size: var(--font-size-3xl);
   --title-metadata-color-text: var(--color-grey-light);
   justify-content: center;
 }
@@ -771,7 +771,7 @@ section.agenda > ol ol ol {
 }
 
 section.display {
-  --display-font-size: var(--font-size-x3l);
+  --display-font-size: var(--font-size-3xl);
   --display-font-weight: var(--font-weight-bold);
   justify-content: center;
   align-items: center;