CSS Snippets: Typography

Obsidian CSS 变量

CSS 变量的使用¹，包括基础样式、组件、编辑器、插件、窗口以及 Obsidian Publish 相关的 CSS 变量。

Foundations：提供了抽象的变量，用于设置颜色、间距、排版和更多基础样式。这包括了边框、颜色、光标、图标、层级、圆角、间距和排版等方面的变量
Components：介绍了应用中使用的交互式组件，包括按钮、复选框、颜色输入、对话框、拖拽功能、缩进指引、模态框、多选、导航、弹出窗口、滑块、标签页、文本输入和开关等
Editor：列出了用于编辑和阅读文本文件的内容类型和变量，如区块、块引用、旁白、代码块、嵌入、文件、脚注、标题、水平分割线、行内标题、链接、列表、属性、表格和标签
Plugins：提供了与核心插件界面元素相关的变量，例如画布、文件资源管理器、图表、搜索等
Window：包含了与 Obsidian 应用窗口外观相关的变量，如分隔条、ribbon 栏、滚动条、状态栏、窗口框架和工作区
Obsidian Publish：为 Obsidian Publish 网站提供了一系列变量，用于定制网站字体、头部、导航、组件、侧边栏和页面样式

本片段用到的定义

基础·颜色

Obsidian 应用程序中使用的颜色变量，包括基础色彩、辅助色彩、扩展色彩、黑白色彩以及语义色彩²。

基础色彩 是一组中性色调，从浅到深，主要由主题定义。
辅助色彩 用于突出交互元素，如链接和主要按钮，用户可以在 Obsidian 应用的设置中自定义。
扩展色彩 包括状态信息（错误、警告、成功）、提醒框、语法高亮、图谱节点和画布元素的颜色，每种颜色都有一个额外的 RGB 变量，以便创建带有不同不透明度的颜色。
黑白色彩 用于创建带有不透明度的遮罩层，应避免更改这些变量的值。
语义色彩 基于预期用途从基础色彩派生，包括表面颜色、交互式颜色和文本颜色。

基础·排版

Obsidian 文档编辑器中与排版相关的 CSS 变量，包括字体、字号、字重、文本格式、行高和段落间距等³。

字体选择：Obsidian 使用不同的 CSS 变量来定义 UI 元素、编辑器文本和代码块的字体。
字号设置：Obsidian 采用相对单位（em）和固定单位（px）来设置不同上下文环境下的字号。
字重定义：Obsidian 为不同的文本重要性定义了一系列字重选项，并推荐使用--bold-modifier来调整加粗文本的字重。
文本格式：Obsidian 提供了相关的 CSS 变量来控制加粗和斜体文本的样式。
行高设置：Obsidian 定义了标准行高和紧凑行高，以适应不同的布局需求。
段落间距：Obsidian 通过 CSS 变量控制标题和段落之间的间距。

粗体/斜体/高亮 的定义

strong {
	font-weight: calc(var(--font-weight) + var(--bold-modifier));
	color: var(--bold-color);
}

em {
	font-style: normal;
	color: var(--italic-color);
}

mark {
	background-color: var(--text-highlight-bg);
	color: var(--text-normal);
}

编辑器·标题

标题样式的 CSS 变量列表及其描述⁴。

Obsidian 编辑器的标题样式相关的 CSS 变量列表包括了文本颜色、字体系列、行高、字号、字体风格、字体变体、字体粗细等多个方面。这些变量可以用来自定义 Markdown 标题深度语法的文本颜色，以及 H1 至 H6 标题的文本颜色、字体系列、行高、字号、字体风格、字体变体和字体粗细。此外，还有一个用于设置标题上方间距的变量，其详细信息可以在Typography 页面中找到。

Typography.css

采样自 AnupPuccin ⁵ 主题 .rosepine-light

:root {
  --color-red: rgb(180, 99, 122);
  --color-maroon: rgb(180, 99, 122);
  --color-mauve: rgb(144, 122, 169);
  --color-peach: rgb(214, 129, 125);
  --color-yellow: rgb(234, 157, 52);
  --color-green: rgb(86, 148, 159);
  --color-teal: rgb(86, 148, 159);
  --color-lavender: rgb(114, 135, 253);

  --bold-color: var(--color-red);
  --italic-color: var(--color-green);
  --text-highlight-bg: var(--color-yellow);

  --h1-color: var(--color-red);
  --h2-color: var(--color-peach);
  --h3-color: var(--color-green);
  --h4-color: var(--color-teal);
  --h5-color: var(--color-lavender);
  --h6-color: var(--color-mauve);
}