@deernova/style 0.3.2 → 0.3.4
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 +1 -1
- package/skill/SKILL.md +10 -8
- package/skill/assets/DeernovaTokens.swift +24 -0
- package/skill/assets/tokens.css +41 -0
- package/skill/assets/tokens.json +137 -0
- package/skill/manifest.json +2 -2
- package/skill/references/components/button.md +7 -5
- package/skill/references/components/card.md +1 -1
- package/skill/references/components/composer.md +2 -1
- package/skill/references/components/empty-state.md +1 -1
- package/skill/references/components/menu.md +1 -0
- package/skill/references/components/message.md +1 -0
- package/skill/references/components/segmented.md +1 -1
- package/skill/references/components/sidebar.md +3 -2
- package/skill/references/components/step-row.md +3 -2
- package/skill/references/components/toolbar.md +4 -3
- package/skill/references/components/tooltip.md +145 -0
- package/skill/references/foundations/accessibility.md +1 -1
- package/skill/references/foundations/color.md +1 -1
- package/skill/references/foundations/elevation.md +1 -0
- package/skill/references/foundations/layout.md +245 -0
- package/skill/references/foundations/spacing.md +3 -8
- package/skill/references/foundations/states.md +98 -0
- package/skill/references/review.md +3 -2
- package/skill/references/scenes/ipados.md +1 -1
- package/skill/references/scenes/macos.md +1 -1
- package/skill/references/scenes/web-marketing.md +1 -1
- package/skill/references/scenes/web.md +3 -2
- package/skill/references/tokens.md +27 -0
|
@@ -211,6 +211,7 @@
|
|
|
211
211
|
| `z-dropdown` | `100` | 弹出菜单、下拉列表、popover。 |
|
|
212
212
|
| `z-overlay` | `1000` | 遮罩和弹窗。 |
|
|
213
213
|
| `z-toast` | `1100` | 轻提示，压在弹窗之上。 |
|
|
214
|
+
| `z-tooltip` | `1200` | tooltip 和悬停卡片，压在所有层之上。 |
|
|
214
215
|
|
|
215
216
|
## 动效
|
|
216
217
|
|
|
@@ -248,15 +249,23 @@
|
|
|
248
249
|
| Token | 值 | 用途 |
|
|
249
250
|
| --- | --- | --- |
|
|
250
251
|
| `content-max` | `680px` | 对话栏和长文阅读栏的最大宽度。 |
|
|
252
|
+
| `form-max` | `560px` | 表单页、设置页内容栏的最大宽度。 |
|
|
253
|
+
| `wide-max` | `1120px` | 表格、看板和官网内容的最大宽度。 |
|
|
251
254
|
| `breakpoint-sm` | `760px` | 窄屏：侧边栏收起，多栏变单栏。 |
|
|
252
255
|
| `breakpoint-md` | `960px` | 中等宽度：目录和次要栏收起。 |
|
|
253
256
|
| `breakpoint-lg` | `1280px` | 宽屏：内容不再继续变宽，两侧留白。 |
|
|
257
|
+
| `scrollbar-size` | `10px` | 网页滚动条占的宽度（横向滚动条是高度）。（仅网页） |
|
|
258
|
+
| `scrollbar-thumb-size` | `6px` | 滚动条里胶囊滑块的粗细，两边各留 (scrollbar-size − 它) ÷ 2。（仅网页） |
|
|
254
259
|
|
|
255
260
|
| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
|
|
256
261
|
| --- | --- | --- | --- | --- |
|
|
257
262
|
| `hit-min` | 24 | 44 | 24 | 最小点击区域。可见尺寸比它小时，用透明的命中区补足，不加大可见的按钮。 |
|
|
258
263
|
| `sidebar-width` | 288 | 320 | 260 | 侧边栏默认宽度。iPhone 没有侧边栏；macOS 用系统侧边栏，宽度只作参考。 |
|
|
264
|
+
| `sidebar-width-min` | 200 | 260 | 200 | 侧边栏拖动时的最小宽度。 |
|
|
265
|
+
| `sidebar-width-max` | 400 | 400 | 320 | 侧边栏拖动时的最大宽度。 |
|
|
266
|
+
| `pane-width` | 320 | 360 | 320 | 列表加详情里列表栏的默认宽度，也是右侧 inspector 的默认宽度。 |
|
|
259
267
|
| `toolbar-height` | 44 | 44 | 52 | Web 应用顶栏、侧面板标签头的高度。macOS 用系统工具栏。 |
|
|
268
|
+
| `grid-gutter` | 24 | 16 | 32 | 官网和文档 12 栏网格的栏间距。应用里的卡片网格用 card-gap。 |
|
|
260
269
|
|
|
261
270
|
## 组件尺寸
|
|
262
271
|
|
|
@@ -445,6 +454,24 @@
|
|
|
445
454
|
| `sheet-grabber-width` | `36px` | 底部弹窗顶部拖拽条的宽度。 |
|
|
446
455
|
| `sheet-grabber-height` | `5px` | 拖拽条的高度。 |
|
|
447
456
|
|
|
457
|
+
### Tooltip 与悬停浮层
|
|
458
|
+
|
|
459
|
+
见 [components/tooltip.md](components/tooltip.md)。
|
|
460
|
+
|
|
461
|
+
| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
|
|
462
|
+
| --- | --- | --- | --- | --- |
|
|
463
|
+
| `tooltip-height` | 24 | 28 | 28 | 单行 tooltip 的高度；折成两行时随内容长高。 |
|
|
464
|
+
| `tooltip-padding-x` | 8 | 10 | 10 | tooltip 左右内边距。 |
|
|
465
|
+
| `tooltip-font-size` | 12 | 13 | 13 | tooltip 字号。 |
|
|
466
|
+
| `tooltip-radius` | 6 | 8 | 8 | tooltip 圆角。 |
|
|
467
|
+
|
|
468
|
+
| Token | 值 | 用途 |
|
|
469
|
+
| --- | --- | --- |
|
|
470
|
+
| `tooltip-offset` | `8px` | tooltip 和触发它的控件之间的距离。 |
|
|
471
|
+
| `tooltip-max-width` | `240px` | tooltip 最大宽度，超过时折行，最多两行。 |
|
|
472
|
+
| `tooltip-delay` | `500ms` | 指针停留多久后显示 tooltip 和悬停卡片。SwiftUI 的 .help() 用系统的时间。（仅网页） |
|
|
473
|
+
| `tooltip-skip-window` | `300ms` | 一个 tooltip 刚关闭的这段时间里，移到相邻控件立即显示，不再等待。（仅网页） |
|
|
474
|
+
|
|
448
475
|
### 消息
|
|
449
476
|
|
|
450
477
|
见 [components/message.md](components/message.md)。
|