@subroh0508/marp-theme-canvas 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.ja.md +5 -5
  2. package/README.md +7 -8
  3. package/css/black-canvas/element/blockquote.css +1 -1
  4. package/css/black-canvas/element/code.css +3 -2
  5. package/css/black-canvas/token/corner-radius.css +5 -0
  6. package/css/black-canvas.css +10 -3
  7. package/css/white-canvas/element/blockquote.css +1 -1
  8. package/css/white-canvas/element/code.css +3 -2
  9. package/css/white-canvas/token/corner-radius.css +5 -0
  10. package/css/white-canvas.css +10 -3
  11. package/package.json +14 -4
  12. package/scss/black-canvas/element/blockquote.scss +1 -1
  13. package/scss/black-canvas/element/code.scss +2 -1
  14. package/scss/black-canvas/token/corner-radius.scss +5 -0
  15. package/scss/black-canvas.scss +1 -0
  16. package/scss/canvas/element/_code.scss +4 -3
  17. package/scss/canvas/token/_corner-radius.scss +14 -0
  18. package/scss/white-canvas/element/blockquote.scss +1 -1
  19. package/scss/white-canvas/element/code.scss +2 -1
  20. package/scss/white-canvas/token/corner-radius.scss +5 -0
  21. package/scss/white-canvas.scss +1 -0
package/README.ja.md CHANGED
@@ -232,9 +232,9 @@ scss/
232
232
  */
233
233
 
234
234
  // ベースmixinをインポート
235
- @use '@subroh0508/marp-theme-canvas/canvas/element/heading' as heading;
236
- @use '@subroh0508/marp-theme-canvas/canvas/component/section' as section;
237
- @use '@subroh0508/marp-theme-canvas/canvas/pattern/title' as title;
235
+ @use '@subroh0508/marp-theme-canvas/scss/canvas/element/heading' as heading;
236
+ @use '@subroh0508/marp-theme-canvas/scss/canvas/component/section' as section;
237
+ @use '@subroh0508/marp-theme-canvas/scss/canvas/pattern/title' as title;
238
238
 
239
239
  // Google Fonts
240
240
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
@@ -282,8 +282,8 @@ scss/
282
282
 
283
283
  ```scss
284
284
  // テーマ設定ファイルをインポート
285
- @use '@subroh0508/marp-theme-canvas/white-canvas/element/heading';
286
- @use '@subroh0508/marp-theme-canvas/white-canvas/component/section';
285
+ @use '@subroh0508/marp-theme-canvas/scss/white-canvas/element/heading';
286
+ @use '@subroh0508/marp-theme-canvas/scss/white-canvas/component/section';
287
287
  ```
288
288
 
289
289
  ### CSSファイルを直接使用する
package/README.md CHANGED
@@ -7,10 +7,9 @@
7
7
 
8
8
  A simple and minimal Marp theme. A design that eliminates unnecessary decorations and lets you focus on your content.
9
9
 
10
- ## Demo
10
+ ## Docs
11
11
 
12
- - [White Canvas Demo](https://subroh0508.github.io/marp-theme-canvas/white_canvas_demo.html)
13
- - [Black Canvas Demo](https://subroh0508.github.io/marp-theme-canvas/black_canvas_demo.html)
12
+ https://subroh0508.github.io/marp-theme-canvas/
14
13
 
15
14
  ## Features
16
15
 
@@ -232,9 +231,9 @@ Import base mixins from `canvas/` to create custom themes:
232
231
  */
233
232
 
234
233
  // Import base mixins
235
- @use '@subroh0508/marp-theme-canvas/canvas/element/heading' as heading;
236
- @use '@subroh0508/marp-theme-canvas/canvas/component/section' as section;
237
- @use '@subroh0508/marp-theme-canvas/canvas/pattern/title' as title;
234
+ @use '@subroh0508/marp-theme-canvas/scss/canvas/element/heading' as heading;
235
+ @use '@subroh0508/marp-theme-canvas/scss/canvas/component/section' as section;
236
+ @use '@subroh0508/marp-theme-canvas/scss/canvas/pattern/title' as title;
238
237
 
239
238
  // Google Fonts
240
239
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
@@ -282,8 +281,8 @@ You can also import pre-configured theme files:
282
281
 
283
282
  ```scss
284
283
  // Import theme configuration files
285
- @use '@subroh0508/marp-theme-canvas/white-canvas/element/heading';
286
- @use '@subroh0508/marp-theme-canvas/white-canvas/component/section';
284
+ @use '@subroh0508/marp-theme-canvas/scss/white-canvas/element/heading';
285
+ @use '@subroh0508/marp-theme-canvas/scss/white-canvas/component/section';
287
286
  ```
288
287
 
289
288
  ### Using CSS Files Directly
package/css/black-canvas/element/blockquote.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --blockquote-color-text: var(--color-grey-medium);
6
6
  --blockquote-color-bg: color-mix(in srgb, var(--color-grey-light) 15%, transparent);
7
7
  --blockquote-color-mark: var(--color-grey-medium);
8
- --blockquote-border-radius: 8px;
8
+ --blockquote-border-radius: var(--corner-radius-m);
9
9
  }
10
10
 
11
11
  blockquote {
package/css/black-canvas/element/code.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --code-font-mono: var(--font-family-mono);
8
8
  --code-color-bg: color-mix(in srgb, var(--color-grey-light) 15%, transparent);
9
9
  --code-color-fg: var(--color-grey-lightest);
10
+ --code-border-radius: var(--corner-radius-m);
10
11
  }
11
12
 
12
13
  code, tt {
@@ -15,7 +16,7 @@ code, tt {
15
16
  font-size: 85%;
16
17
  white-space: break-spaces;
17
18
  background-color: var(--code-color-bg);
18
- border-radius: 6px;
19
+ border-radius: var(--code-border-radius);
19
20
  }
20
21
 
21
22
  pre {
@@ -27,7 +28,7 @@ pre {
27
28
  line-height: 1.45;
28
29
  color: var(--code-color-fg);
29
30
  background-color: var(--code-color-bg);
30
- border-radius: 6px;
31
+ border-radius: var(--code-border-radius);
31
32
  }
32
33
 
33
34
  pre > code {
package/css/black-canvas/token/corner-radius.css ADDED
@@ -0,0 +1,5 @@
1
+ :root {
2
+ --corner-radius-s: 4px;
3
+ --corner-radius-m: 8px;
4
+ --corner-radius-l: 12px;
5
+ }
package/css/black-canvas.css CHANGED
@@ -54,6 +54,12 @@
54
54
  --line-height-loose: 2;
55
55
  }
56
56
 
57
+ :root {
58
+ --corner-radius-s: 4px;
59
+ --corner-radius-m: 8px;
60
+ --corner-radius-l: 12px;
61
+ }
62
+
57
63
  :root {
58
64
  --h1-font-size: var(--font-size-xxl);
59
65
  --h2-font-size: var(--font-size-xl);
@@ -217,6 +223,7 @@ tr:nth-child(2n) {
217
223
  --code-font-mono: var(--font-family-mono);
218
224
  --code-color-bg: color-mix(in srgb, var(--color-grey-light) 15%, transparent);
219
225
  --code-color-fg: var(--color-grey-lightest);
226
+ --code-border-radius: var(--corner-radius-m);
220
227
  }
221
228
 
222
229
  code, tt {
@@ -225,7 +232,7 @@ code, tt {
225
232
  font-size: 85%;
226
233
  white-space: break-spaces;
227
234
  background-color: var(--code-color-bg);
228
- border-radius: 6px;
235
+ border-radius: var(--code-border-radius);
229
236
  }
230
237
 
231
238
  pre {
@@ -237,7 +244,7 @@ pre {
237
244
  line-height: 1.45;
238
245
  color: var(--code-color-fg);
239
246
  background-color: var(--code-color-bg);
240
- border-radius: 6px;
247
+ border-radius: var(--code-border-radius);
241
248
  }
242
249
 
243
250
  pre > code {
@@ -253,7 +260,7 @@ pre > code {
253
260
  --blockquote-color-text: var(--color-grey-medium);
254
261
  --blockquote-color-bg: color-mix(in srgb, var(--color-grey-light) 15%, transparent);
255
262
  --blockquote-color-mark: var(--color-grey-medium);
256
- --blockquote-border-radius: 8px;
263
+ --blockquote-border-radius: var(--corner-radius-m);
257
264
  }
258
265
 
259
266
  blockquote {
package/css/white-canvas/element/blockquote.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --blockquote-color-text: var(--color-grey-medium);
6
6
  --blockquote-color-bg: color-mix(in srgb, var(--color-grey-light) 10%, transparent);
7
7
  --blockquote-color-mark: var(--color-grey-medium);
8
- --blockquote-border-radius: 8px;
8
+ --blockquote-border-radius: var(--corner-radius-m);
9
9
  }
10
10
 
11
11
  blockquote {
package/css/white-canvas/element/code.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --code-font-mono: var(--font-family-mono);
8
8
  --code-color-bg: color-mix(in srgb, var(--color-grey-light) 10%, transparent);
9
9
  --code-color-fg: var(--color-grey-darkest);
10
+ --code-border-radius: var(--corner-radius-m);
10
11
  }
11
12
 
12
13
  code, tt {
@@ -15,7 +16,7 @@ code, tt {
15
16
  font-size: 85%;
16
17
  white-space: break-spaces;
17
18
  background-color: var(--code-color-bg);
18
- border-radius: 6px;
19
+ border-radius: var(--code-border-radius);
19
20
  }
20
21
 
21
22
  pre {
@@ -27,7 +28,7 @@ pre {
27
28
  line-height: 1.45;
28
29
  color: var(--code-color-fg);
29
30
  background-color: var(--code-color-bg);
30
- border-radius: 6px;
31
+ border-radius: var(--code-border-radius);
31
32
  }
32
33
 
33
34
  pre > code {
package/css/white-canvas/token/corner-radius.css ADDED
@@ -0,0 +1,5 @@
1
+ :root {
2
+ --corner-radius-s: 4px;
3
+ --corner-radius-m: 8px;
4
+ --corner-radius-l: 12px;
5
+ }
package/css/white-canvas.css CHANGED
@@ -54,6 +54,12 @@
54
54
  --line-height-loose: 2;
55
55
  }
56
56
 
57
+ :root {
58
+ --corner-radius-s: 4px;
59
+ --corner-radius-m: 8px;
60
+ --corner-radius-l: 12px;
61
+ }
62
+
57
63
  :root {
58
64
  --h1-font-size: var(--font-size-xxl);
59
65
  --h2-font-size: var(--font-size-xl);
@@ -217,6 +223,7 @@ tr:nth-child(2n) {
217
223
  --code-font-mono: var(--font-family-mono);
218
224
  --code-color-bg: color-mix(in srgb, var(--color-grey-light) 10%, transparent);
219
225
  --code-color-fg: var(--color-grey-darkest);
226
+ --code-border-radius: var(--corner-radius-m);
220
227
  }
221
228
 
222
229
  code, tt {
@@ -225,7 +232,7 @@ code, tt {
225
232
  font-size: 85%;
226
233
  white-space: break-spaces;
227
234
  background-color: var(--code-color-bg);
228
- border-radius: 6px;
235
+ border-radius: var(--code-border-radius);
229
236
  }
230
237
 
231
238
  pre {
@@ -237,7 +244,7 @@ pre {
237
244
  line-height: 1.45;
238
245
  color: var(--code-color-fg);
239
246
  background-color: var(--code-color-bg);
240
- border-radius: 6px;
247
+ border-radius: var(--code-border-radius);
241
248
  }
242
249
 
243
250
  pre > code {
@@ -253,7 +260,7 @@ pre > code {
253
260
  --blockquote-color-text: var(--color-grey-medium);
254
261
  --blockquote-color-bg: color-mix(in srgb, var(--color-grey-light) 10%, transparent);
255
262
  --blockquote-color-mark: var(--color-grey-medium);
256
- --blockquote-border-radius: 8px;
263
+ --blockquote-border-radius: var(--corner-radius-m);
257
264
  }
258
265
 
259
266
  blockquote {
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@subroh0508/marp-theme-canvas",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
+ "type": "module",
4
5
  "description": "A simple Marp theme with minimal styling",
5
6
  "repository": {
6
7
  "type": "git",
@@ -72,11 +73,20 @@
72
73
  "license": "MIT",
73
74
  "devDependencies": {
74
75
  "@marp-team/marp-cli": "^4.2.3",
75
- "sass": "^1.97.2"
76
+ "sass": "^1.97.2",
77
+ "vitepress": "^1.6.4"
76
78
  },
77
79
  "scripts": {
78
- "serve": "marp --allow-local-files --html -s demo",
80
+ "serve:white": "marp --allow-local-files --html --theme css/white-canvas.css -s demo",
81
+ "serve:black": "marp --allow-local-files --html --theme css/black-canvas.css -s demo",
79
82
  "build": "find scss -name '[!_]*.scss' -type f | while read f; do out=\"css/${f#scss/}\"; out=\"${out%.scss}.css\"; mkdir -p \"$(dirname \"$out\")\"; sass --no-source-map \"$f\" \"$out\"; done",
80
- "build:demo": "marp --allow-local-files --html --input-dir demo --output public"
83
+ "build:html:white": "marp --allow-local-files --html --theme css/white-canvas.css --input-dir demo --output docs/public/white-canvas",
84
+ "build:html:black": "marp --allow-local-files --html --theme css/black-canvas.css --input-dir demo --output docs/public/black-canvas",
85
+ "build:png:white": "marp --allow-local-files --images png --theme css/white-canvas.css --input-dir demo --output docs/public/white-canvas",
86
+ "build:png:black": "marp --allow-local-files --images png --theme css/black-canvas.css --input-dir demo --output docs/public/black-canvas",
87
+ "docs:dev": "vitepress dev docs",
88
+ "docs:build": "vitepress build docs",
89
+ "docs:preview": "vitepress preview docs",
90
+ "build:site": "pnpm build:html:white && pnpm build:html:black && pnpm build:png:white && pnpm build:png:black && pnpm docs:build"
81
91
  }
82
92
  }
package/scss/black-canvas/element/blockquote.scss CHANGED
@@ -8,5 +8,5 @@
8
8
  $color-text: var(--color-grey-medium),
9
9
  $color-bg: color-mix(in srgb, var(--color-grey-light) 15%, transparent),
10
10
  $color-mark: var(--color-grey-medium),
11
- $border-radius: 8px
11
+ $border-radius: var(--corner-radius-m)
12
12
  );
package/scss/black-canvas/element/code.scss CHANGED
@@ -5,5 +5,6 @@
5
5
  @include base.configure(
6
6
  $font-mono: var(--font-family-mono),
7
7
  $color-bg: color-mix(in srgb, var(--color-grey-light) 15%, transparent),
8
- $color-fg: var(--color-grey-lightest)
8
+ $color-fg: var(--color-grey-lightest),
9
+ $border-radius: var(--corner-radius-m)
9
10
  );
package/scss/black-canvas/token/corner-radius.scss ADDED
@@ -0,0 +1,5 @@
1
+ // black-canvas corner-radius configuration
2
+
3
+ @use '../../canvas/token/corner-radius' as base;
4
+
5
+ @include base.configure();
package/scss/black-canvas.scss CHANGED
@@ -26,6 +26,7 @@
26
26
  // Token
27
27
  @use 'black-canvas/token/color';
28
28
  @use 'black-canvas/token/typography';
29
+ @use 'black-canvas/token/corner-radius';
29
30
 
30
31
  // Element
31
32
  @use 'black-canvas/element/heading';
package/scss/canvas/element/_code.scss CHANGED
@@ -9,11 +9,12 @@
9
9
  * https://github.com/sindresorhus/github-markdown-css/blob/main/license
10
10
  */
11
11
 
12
- @mixin configure($font-mono, $color-bg, $color-fg) {
12
+ @mixin configure($font-mono, $color-bg, $color-fg, $border-radius) {
13
13
  :root {
14
14
  --code-font-mono: #{$font-mono};
15
15
  --code-color-bg: #{$color-bg};
16
16
  --code-color-fg: #{$color-fg};
17
+ --code-border-radius: #{$border-radius};
17
18
  }
18
19
 
19
20
  code, tt {
@@ -22,7 +23,7 @@
22
23
  font-size: 85%;
23
24
  white-space: break-spaces;
24
25
  background-color: var(--code-color-bg);
25
- border-radius: 6px;
26
+ border-radius: var(--code-border-radius);
26
27
  }
27
28
  pre {
28
29
  margin-top: 0;
@@ -33,7 +34,7 @@
33
34
  line-height: 1.45;
34
35
  color: var(--code-color-fg);
35
36
  background-color: var(--code-color-bg);
36
- border-radius: 6px;
37
+ border-radius: var(--code-border-radius);
37
38
  }
38
39
  pre > code {
39
40
  padding: 0;
package/scss/canvas/token/_corner-radius.scss ADDED
@@ -0,0 +1,14 @@
1
+ // ===== _corner-radius.scss =====
2
+ // Corner radius design tokens
3
+
4
+ @mixin configure(
5
+ $corner-radius-s: 4px,
6
+ $corner-radius-m: 8px,
7
+ $corner-radius-l: 12px
8
+ ) {
9
+ :root {
10
+ --corner-radius-s: #{$corner-radius-s};
11
+ --corner-radius-m: #{$corner-radius-m};
12
+ --corner-radius-l: #{$corner-radius-l};
13
+ }
14
+ }
package/scss/white-canvas/element/blockquote.scss CHANGED
@@ -8,5 +8,5 @@
8
8
  $color-text: var(--color-grey-medium),
9
9
  $color-bg: color-mix(in srgb, var(--color-grey-light) 10%, transparent),
10
10
  $color-mark: var(--color-grey-medium),
11
- $border-radius: 8px
11
+ $border-radius: var(--corner-radius-m)
12
12
  );
package/scss/white-canvas/element/code.scss CHANGED
@@ -5,5 +5,6 @@
5
5
  @include base.configure(
6
6
  $font-mono: var(--font-family-mono),
7
7
  $color-bg: color-mix(in srgb, var(--color-grey-light) 10%, transparent),
8
- $color-fg: var(--color-grey-darkest)
8
+ $color-fg: var(--color-grey-darkest),
9
+ $border-radius: var(--corner-radius-m)
9
10
  );
package/scss/white-canvas/token/corner-radius.scss ADDED
@@ -0,0 +1,5 @@
1
+ // white-canvas corner-radius configuration
2
+
3
+ @use '../../canvas/token/corner-radius' as base;
4
+
5
+ @include base.configure();
package/scss/white-canvas.scss CHANGED
@@ -26,6 +26,7 @@
26
26
  // Token
27
27
  @use 'white-canvas/token/color';
28
28
  @use 'white-canvas/token/typography';
29
+ @use 'white-canvas/token/corner-radius';
29
30
 
30
31
  // Element
31
32
  @use 'white-canvas/element/heading';