@scribdown/ui-handdrawn 0.1.0 → 0.2.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scribdown/ui-handdrawn",
3
- "version": "0.1.0",
3
+ "version": "0.2.1",
4
4
  "description": "Scribdown 手绘风格视觉组件:设计 Token、样式与 SVG 资产。",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -0,0 +1,54 @@
1
+ /* Frontmatter 元数据卡片:文档头部 YAML 键值对展示。
2
+ 手绘边框由 .scribdown-frame 基底提供(渲染器输出时显式 opt-in),
3
+ 本文件仅负责底色、留白与键值列表排版。 */
4
+ .scribdown-markdown .scribdown-frontmatter {
5
+ margin: 0 0 var(--scribdown-space-6);
6
+ padding: var(--scribdown-space-3) var(--scribdown-space-4) var(--scribdown-space-4);
7
+ background: var(--scribdown-color-surface);
8
+ border-radius: var(--scribdown-radius-md);
9
+ box-shadow: var(--scribdown-shadow-sm);
10
+ }
11
+
12
+ /* 顶部 chrome:仅承载「元数据」标签,与正文列表拉开间距。 */
13
+ .scribdown-markdown .scribdown-frontmatter__chrome {
14
+ display: flex;
15
+ align-items: center;
16
+ margin-bottom: var(--scribdown-space-2);
17
+ }
18
+
19
+ /* 标签样式与 mermaid / 代码块语言标签保持一致的手写标注感。 */
20
+ .scribdown-markdown .scribdown-frontmatter__label {
21
+ font-family: var(--scribdown-font-heading);
22
+ font-size: 13px;
23
+ font-weight: 700;
24
+ letter-spacing: 0.06em;
25
+ color: color-mix(in srgb, var(--scribdown-color-text-primary) 78%, transparent);
26
+ }
27
+
28
+ /* 键值列表:键列按内容宽度收缩,值列占满剩余空间。 */
29
+ .scribdown-markdown .scribdown-frontmatter__list {
30
+ display: grid;
31
+ grid-template-columns: max-content 1fr;
32
+ column-gap: var(--scribdown-space-4);
33
+ row-gap: var(--scribdown-space-1);
34
+ margin: 0;
35
+ }
36
+
37
+ .scribdown-markdown .scribdown-frontmatter__list dt {
38
+ font-family: var(--scribdown-font-code);
39
+ font-size: 0.88em;
40
+ font-weight: 600;
41
+ color: var(--scribdown-color-accent);
42
+ }
43
+
44
+ .scribdown-markdown .scribdown-frontmatter__list dd {
45
+ margin: 0;
46
+ color: var(--scribdown-color-text-primary);
47
+ overflow-wrap: anywhere;
48
+ }
49
+
50
+ /* 嵌套键值列表:对象类型的值向下展开一层,靠左侧细线体现层级。 */
51
+ .scribdown-markdown .scribdown-frontmatter__list--nested {
52
+ padding-left: var(--scribdown-space-3);
53
+ border-left: 2px solid color-mix(in srgb, var(--scribdown-color-border) 60%, transparent);
54
+ }
@@ -181,12 +181,13 @@
181
181
  visibility: visible;
182
182
  }
183
183
 
184
- /* 单个菜单项:横向 icon + 文本。 */
184
+ /* 单个菜单项:横向 icon + 文本(可能是 button 或 a,链接形态需去掉下划线)。 */
185
185
  .scribdown-toolbar-menu-item {
186
186
  display: flex;
187
187
  align-items: center;
188
188
  gap: var(--scribdown-space-2);
189
189
  width: 100%;
190
+ box-sizing: border-box;
190
191
  padding: 8px 10px;
191
192
  background: transparent;
192
193
  border: 0;
@@ -195,6 +196,7 @@
195
196
  font-family: var(--scribdown-font-body);
196
197
  font-size: 14px;
197
198
  text-align: left;
199
+ text-decoration: none;
198
200
  cursor: pointer;
199
201
  transition:
200
202
  color var(--scribdown-duration-fast) var(--scribdown-easing-standard),
package/src/styles.css CHANGED
@@ -31,6 +31,9 @@
31
31
  /* 7. 目录([TOC]) */
32
32
  @import "./styles/toc.css";
33
33
 
34
+ /* 7.1 Frontmatter 元数据卡片 */
35
+ @import "./styles/frontmatter.css";
36
+
34
37
  /* 8. 代码:inline code + 代码块 + 语言标签 + 复制按钮 */
35
38
  @import "./styles/code.css";
36
39