@subroh0508/marp-theme-canvas 0.1.2 → 0.2.0

package/README.ja.md

@@ -207,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       # ライトテーマのエントリーポイント
@@ -231,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');
@@ -281,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';
 ```
 
@@ -293,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

@@ -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.css

@@ -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,6 +673,19 @@ 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-3xl);
   --title-metadata-color-text: var(--color-grey-medium);

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.css

@@ -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,6 +673,19 @@ 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-3xl);
   --title-metadata-color-text: var(--color-grey-light);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@subroh0508/marp-theme-canvas",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "description": "A simple Marp theme with minimal styling",
   "repository": {
@@ -36,17 +36,20 @@
     "./canvas/token/*": {
       "sass": "./scss/canvas/token/*"
     },
-    "./canvas/element/*": {
-      "sass": "./scss/canvas/element/*"
-    },
-    "./canvas/element/prettylights/*": {
-      "sass": "./scss/canvas/element/prettylights/*"
-    },
     "./canvas/component/*": {
       "sass": "./scss/canvas/component/*"
     },
-    "./canvas/pattern/*": {
-      "sass": "./scss/canvas/pattern/*"
+    "./canvas/component/prettylights/*": {
+      "sass": "./scss/canvas/component/prettylights/*"
+    },
+    "./canvas/decorator/*": {
+      "sass": "./scss/canvas/decorator/*"
+    },
+    "./canvas/common-layout/*": {
+      "sass": "./scss/canvas/common-layout/*"
+    },
+    "./canvas/slide-pattern/*": {
+      "sass": "./scss/canvas/slide-pattern/*"
     },
     "./white-canvas.css": "./css/white-canvas.css",
     "./black-canvas.css": "./css/black-canvas.css",

package/scss/black-canvas/{component → common-layout}/columns.scss

@@ -1,5 +1,5 @@
 // black-canvas columns configuration
 
-@use '../../canvas/component/columns' as base;
+@use '../../canvas/common-layout/columns' as base;
 
 @include base.configure();

package/scss/black-canvas/{element → component}/blockquote.scss

@@ -1,6 +1,6 @@
 // black-canvas blockquote configuration
 
-@use '../../canvas/element/blockquote' as base;
+@use '../../canvas/component/blockquote' as base;
 
 @include base.configure(
   $font-size: var(--font-size-m),

package/scss/black-canvas/{element → component}/code.scss

@@ -1,6 +1,6 @@
 // black-canvas code configuration
 
-@use '../../canvas/element/code' as base;
+@use '../../canvas/component/code' as base;
 
 @include base.configure(
   $font-mono: var(--font-family-mono),

package/scss/black-canvas/{element → component}/heading.scss

@@ -1,6 +1,6 @@
 // black-canvas heading configuration
 
-@use '../../canvas/element/heading' as base;
+@use '../../canvas/component/heading' as base;
 
 @include base.configure(
   $h1-font-size: var(--font-size-xxl),

package/scss/black-canvas/{element → component}/hr.scss

@@ -1,6 +1,6 @@
 // black-canvas hr configuration
 
-@use '../../canvas/element/hr' as base;
+@use '../../canvas/component/hr' as base;
 
 @include base.configure(
   $height: 1px,

package/scss/black-canvas/{element → component}/link.scss

@@ -1,6 +1,6 @@
 // black-canvas link configuration
 
-@use '../../canvas/element/link' as base;
+@use '../../canvas/component/link' as base;
 
 @include base.configure(
   $color-text: var(--color-blue)

package/scss/black-canvas/{element → component}/list.scss

@@ -1,6 +1,6 @@
 // black-canvas list configuration
 
-@use '../../canvas/element/list' as base;
+@use '../../canvas/component/list' as base;
 
 @include base.configure(
   $ul-indent: 1.1em,

package/scss/black-canvas/{element → component}/paragraph.scss

@@ -1,5 +1,5 @@
 // black-canvas paragraph configuration
 
-@use '../../canvas/element/paragraph' as base;
+@use '../../canvas/component/paragraph' as base;
 
 @include base.configure();