Riebeckite
Menu
Color mode

Typography と Article Layout

このページは テーマ作成の詳細 の一部で、Typography と Article Layout の指定を扱います。

8. Typography

Theme は Typography Preset を指定できます。

ts
type ThemeTypographyPreset =
  | "system"
  | "serif"
  | "sans";

Preset は、

  • Body
  • Heading
  • Code

などの Semantic Font Token に反映されます。

Font を個々の Component に直接指定するのではなく、Semantic Token を通して Site 全体の Typography を統一します。

9. Article Layout

Theme は Article Layout Preset を指定できます。

ts
type ThemeArticleLayoutPreset =
  | "article"
  | "sidebar"
  | "full-width";

Theme が決めるのは Layout の Presentation です。

Route や Component Tree そのものを Theme が差し替えるわけではありません。

Diagram source
text
flowchart LR
    App["Application<br/>Component Structure"]
    Hooks["Stable Layout Hooks"]
    Theme["Theme<br/>Presentation"]
 
    App --> Hooks
    Theme --> Hooks

History

1 changesCollapseExpand
1 + ---
2 + title: Typography と Article Layout
3 + sidebar:
4 + label: Typography と Article Layout
5 + order: 20
6 + ---
7 + # Typography と Article Layout
8 +
9 + このページは [テーマ作成の詳細](../theme-system.ja.md) の一部で、Typography と Article Layout の指定を扱います。
10 +
11 + ## 8. Typography
12 +
13 + Theme は Typography Preset を指定できます。
14 +
15 + ```ts id="6q5em7"
16 + type ThemeTypographyPreset =
17 + | "system"
18 + | "serif"
19 + | "sans";
20 + ```
21 +
22 + Preset は、
23 +
24 + - Body
25 + - Heading
26 + - Code
27 +
28 + などの Semantic Font Token に反映されます。
29 +
30 + Font を個々の Component に直接指定するのではなく、Semantic Token を通して Site 全体の Typography を統一します。
31 +
32 +
33 + ## 9. Article Layout
34 +
35 + Theme は Article Layout Preset を指定できます。
36 +
37 + ```ts id="l0kwo9"
38 + type ThemeArticleLayoutPreset =
39 + | "article"
40 + | "sidebar"
41 + | "full-width";
42 + ```
43 +
44 + Theme が決めるのは Layout の **Presentation** です。
45 +
46 + Route や Component Tree そのものを Theme が差し替えるわけではありません。
47 +
48 + ```mermaid id="6oqsru"
49 + flowchart LR
50 + App["Application<br/>Component Structure"]
51 + Hooks["Stable Layout Hooks"]
52 + Theme["Theme<br/>Presentation"]
53 +
54 + App --> Hooks
55 + Theme --> Hooks
56 + ```
57 +