@subroh0508/marp-theme-canvas 0.1.2 → 0.3.0

package/README.ja.md

@@ -19,6 +19,8 @@
 - **SCSSモジュール**: 必要なスタイルだけを個別にインポート可能
 - **GitHub風シンタックスハイライト**: prettylightsベースのコードハイライト
 - **マルチカラムレイアウト**: 2カラム・3カラムレイアウトに対応
+- **Flexアラインメントユーティリティ**: Tailwind風のjustify-content・align-itemsクラス
+- **テキストアラインメントユーティリティ**: Tailwind風のtext-alignクラス
 
 ## インストール
 
@@ -207,14 +209,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 +233,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 +283,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 +295,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

@@ -19,6 +19,8 @@ A simple and minimal Marp theme. A design that eliminates unnecessary decoration
 - **SCSS Modules**: Import only the styles you need
 - **GitHub-style Syntax Highlighting**: Code highlighting based on prettylights
 - **Multi-column Layout**: Support for 2-column and 3-column layouts
+- **Flex Alignment Utilities**: Tailwind-style justify-content and align-items classes
+- **Text Alignment Utilities**: Tailwind-style text-align classes
 
 ## Installation
 
@@ -207,14 +209,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 +233,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 +283,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 +295,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,213 @@
+:root {
+  --cols-gap: 1em;
+}
+
+section.cols {
+  flex-direction: row;
+  gap: var(--cols-gap);
+}
+section.cols > .col {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section.cols > .col > *,
+section.cols > .col p > * {
+  max-width: 100%;
+}
+section.cols > .col-1 {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section.cols > .col-1 > *,
+section.cols > .col-1 p > * {
+  max-width: 100%;
+}
+section.cols > .col-2 {
+  flex: 2;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section.cols > .col-2 > *,
+section.cols > .col-2 p > * {
+  max-width: 100%;
+}
+section.cols > .col-3 {
+  flex: 3;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section.cols > .col-3 > *,
+section.cols > .col-3 p > * {
+  max-width: 100%;
+}
+section.cols > .col-4 {
+  flex: 4;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section.cols > .col-4 > *,
+section.cols > .col-4 p > * {
+  max-width: 100%;
+}
+section.cols > .col-6 {
+  flex: 6;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section.cols > .col-6 > *,
+section.cols > .col-6 p > * {
+  max-width: 100%;
+}
+section.cols > .col-7 {
+  flex: 7;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section.cols > .col-7 > *,
+section.cols > .col-7 p > * {
+  max-width: 100%;
+}
+section.cols > .col-8 {
+  flex: 8;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section.cols > .col-8 > *,
+section.cols > .col-8 p > * {
+  max-width: 100%;
+}
+section.cols > .col-9 {
+  flex: 9;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section.cols > .col-9 > *,
+section.cols > .col-9 p > * {
+  max-width: 100%;
+}
+section.cols > .col-10 {
+  flex: 10;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+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;
+  display: flex;
+  flex-direction: column;
+}
+section .cols > .col > *,
+section .cols > .col p > * {
+  max-width: 100%;
+}
+section .cols > .col-1 {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section .cols > .col-1 > *,
+section .cols > .col-1 p > * {
+  max-width: 100%;
+}
+section .cols > .col-2 {
+  flex: 2;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section .cols > .col-2 > *,
+section .cols > .col-2 p > * {
+  max-width: 100%;
+}
+section .cols > .col-3 {
+  flex: 3;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section .cols > .col-3 > *,
+section .cols > .col-3 p > * {
+  max-width: 100%;
+}
+section .cols > .col-4 {
+  flex: 4;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section .cols > .col-4 > *,
+section .cols > .col-4 p > * {
+  max-width: 100%;
+}
+section .cols > .col-6 {
+  flex: 6;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section .cols > .col-6 > *,
+section .cols > .col-6 p > * {
+  max-width: 100%;
+}
+section .cols > .col-7 {
+  flex: 7;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section .cols > .col-7 > *,
+section .cols > .col-7 p > * {
+  max-width: 100%;
+}
+section .cols > .col-8 {
+  flex: 8;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section .cols > .col-8 > *,
+section .cols > .col-8 p > * {
+  max-width: 100%;
+}
+section .cols > .col-9 {
+  flex: 9;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section .cols > .col-9 > *,
+section .cols > .col-9 p > * {
+  max-width: 100%;
+}
+section .cols > .col-10 {
+  flex: 10;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+section .cols > .col-10 > *,
+section .cols > .col-10 p > * {
+  max-width: 100%;
+}

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

@@ -0,0 +1,89 @@
+section.justify-start {
+  justify-content: flex-start;
+}
+section.justify-end {
+  justify-content: flex-end;
+}
+section.justify-center {
+  justify-content: center;
+}
+section.justify-between {
+  justify-content: space-between;
+}
+section.justify-around {
+  justify-content: space-around;
+}
+section.justify-evenly {
+  justify-content: space-evenly;
+}
+section.items-start {
+  align-items: flex-start;
+}
+section.items-end {
+  align-items: flex-end;
+}
+section.items-center {
+  align-items: center;
+}
+section.items-baseline {
+  align-items: baseline;
+}
+section.items-stretch {
+  align-items: stretch;
+}
+
+.col.justify-start,
+[class^=col-].justify-start,
+[class*=" col-"].justify-start {
+  justify-content: flex-start;
+}
+.col.justify-end,
+[class^=col-].justify-end,
+[class*=" col-"].justify-end {
+  justify-content: flex-end;
+}
+.col.justify-center,
+[class^=col-].justify-center,
+[class*=" col-"].justify-center {
+  justify-content: center;
+}
+.col.justify-between,
+[class^=col-].justify-between,
+[class*=" col-"].justify-between {
+  justify-content: space-between;
+}
+.col.justify-around,
+[class^=col-].justify-around,
+[class*=" col-"].justify-around {
+  justify-content: space-around;
+}
+.col.justify-evenly,
+[class^=col-].justify-evenly,
+[class*=" col-"].justify-evenly {
+  justify-content: space-evenly;
+}
+.col.items-start,
+[class^=col-].items-start,
+[class*=" col-"].items-start {
+  align-items: flex-start;
+}
+.col.items-end,
+[class^=col-].items-end,
+[class*=" col-"].items-end {
+  align-items: flex-end;
+}
+.col.items-center,
+[class^=col-].items-center,
+[class*=" col-"].items-center {
+  align-items: center;
+}
+.col.items-baseline,
+[class^=col-].items-baseline,
+[class*=" col-"].items-baseline {
+  align-items: baseline;
+}
+.col.items-stretch,
+[class^=col-].items-stretch,
+[class*=" col-"].items-stretch {
+  align-items: stretch;
+}

package/css/black-canvas/common-layout/text-align.css

@@ -0,0 +1,73 @@
+section.text-left p {
+  text-align: left;
+}
+section.text-center p {
+  text-align: center;
+}
+section.text-right p {
+  text-align: right;
+}
+section.text-justify p {
+  text-align: justify;
+}
+section.text-start p {
+  text-align: start;
+}
+section.text-end p {
+  text-align: end;
+}
+section.text-has-img-left p:has(img:not(.emoji)) {
+  text-align: left;
+}
+section.text-has-img-center p:has(img:not(.emoji)) {
+  text-align: center;
+}
+section.text-has-img-right p:has(img:not(.emoji)) {
+  text-align: right;
+}
+
+.col.text-left p,
+[class^=col-].text-left p,
+[class*=" col-"].text-left p {
+  text-align: left;
+}
+.col.text-center p,
+[class^=col-].text-center p,
+[class*=" col-"].text-center p {
+  text-align: center;
+}
+.col.text-right p,
+[class^=col-].text-right p,
+[class*=" col-"].text-right p {
+  text-align: right;
+}
+.col.text-justify p,
+[class^=col-].text-justify p,
+[class*=" col-"].text-justify p {
+  text-align: justify;
+}
+.col.text-start p,
+[class^=col-].text-start p,
+[class*=" col-"].text-start p {
+  text-align: start;
+}
+.col.text-end p,
+[class^=col-].text-end p,
+[class*=" col-"].text-end p {
+  text-align: end;
+}
+.col.text-has-img-left p:has(img:not(.emoji)),
+[class^=col-].text-has-img-left p:has(img:not(.emoji)),
+[class*=" col-"].text-has-img-left p:has(img:not(.emoji)) {
+  text-align: left;
+}
+.col.text-has-img-center p:has(img:not(.emoji)),
+[class^=col-].text-has-img-center p:has(img:not(.emoji)),
+[class*=" col-"].text-has-img-center p:has(img:not(.emoji)) {
+  text-align: center;
+}
+.col.text-has-img-right p:has(img:not(.emoji)),
+[class^=col-].text-has-img-right p:has(img:not(.emoji)),
+[class*=" col-"].text-has-img-right p:has(img:not(.emoji)) {
+  text-align: right;
+}

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

@@ -46,7 +46,6 @@ h2 {
   font-weight: var(--h2-font-weight);
   line-height: var(--h2-line-height);
   color: var(--h2-color-text);
-  margin: 0 0 0.8em;
 }
 
 h3 {

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/black-canvas/component/section.css

@@ -6,12 +6,13 @@
   --base-font-family: var(--font-family-base);
   --base-font-size: var(--font-size-base);
   --base-line-height: var(--line-height-normal);
+  --base-section-title-height: calc(var(--font-size-xl) * var(--line-height-tight) + var(--font-size-xl) * 0.8em / 1em);
 }
 
 section {
   width: 1920px;
   height: 1080px;
-  padding: var(--base-padding-y) var(--base-padding-x);
+  padding: calc(var(--base-padding-y) + var(--base-section-title-height)) var(--base-padding-x) var(--base-padding-y);
   background-color: var(--base-color-bg);
   color: var(--base-color-text);
   font-family: var(--base-font-family);
@@ -22,3 +23,9 @@ section {
   box-sizing: border-box;
   overflow: hidden;
 }
+
+section > h2:first-child {
+  position: absolute;
+  top: var(--base-padding-y);
+  left: var(--base-padding-x);
+}

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,6 +1,7 @@
 section.display {
   --display-font-size: var(--font-size-3xl);
   --display-font-weight: var(--font-weight-bold);
+  padding-top: var(--base-padding-y);
   justify-content: center;
   align-items: center;
 }

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

@@ -1,6 +1,7 @@
 section.section {
   --section-font-size: var(--font-size-xxl);
   --section-font-weight: bold;
+  padding-top: var(--base-padding-y);
   justify-content: center;
 }
 section.section p {

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

@@ -1,6 +1,7 @@
 section.title {
   --title-h1-font-size: var(--font-size-3xl);
   --title-metadata-color-text: var(--color-grey-medium);
+  padding-top: var(--base-padding-y);
   justify-content: center;
 }
 section.title h1 {