create-zudo-doc 2.5.1 → 3.1.0
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/README.md +5 -5
- package/dist/api.js +16 -0
- package/dist/cli.js +1 -6
- package/dist/constants.js +5 -66
- package/dist/index.js +1 -1
- package/dist/prompts.js +4 -43
- package/dist/scaffold.d.ts +1 -1
- package/dist/scaffold.js +22 -11
- package/dist/settings-gen.js +5 -4
- package/package.json +1 -1
- package/templates/base/src/config/color-scheme-utils.ts +14 -5
- package/templates/base/src/config/color-schemes.ts +158 -129
- package/templates/base/src/config/docs-schema.ts +1 -0
- package/templates/base/src/config/frontmatter-preview-defaults.ts +1 -0
- package/templates/base/src/config/settings-types.ts +1 -0
- package/templates/base/src/styles/global.css +5 -31
- package/templates/features/designTokenPanel/files/src/config/design-token-panel-config.ts +296 -149
- package/templates/features/designTokenPanel/files/src/lib/design-token-panel-bootstrap.ts +12 -5
|
@@ -1,136 +1,165 @@
|
|
|
1
|
-
/**
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Ramp-native color schemes (Color Ramp Restructure — zudolab/zudo-doc#2584;
|
|
3
|
+
* minimize pass #2601 / #2602).
|
|
4
|
+
*
|
|
5
|
+
* A `ColorScheme` is `{ ramps, map }` (the MECHANISM types live in the package
|
|
6
|
+
* and are re-exported by `./color-scheme-utils`):
|
|
7
|
+
* - `ramps` — the shared Tier-1 source of truth: a warm-neutral `base` ramp
|
|
8
|
+
* (5 stops, index 0 = lightest), an `accent` ramp (3 stops), and 4 `state`
|
|
9
|
+
* colors. Light and dark modes SHARE these values.
|
|
10
|
+
* - `map` — the per-mode Tier-2 wiring: which ramp stop (or literal OKLCH)
|
|
11
|
+
* each UI role points at.
|
|
12
|
+
*
|
|
13
|
+
* The palette was minimized from base=12 / accent=7 to **base=5 / accent=3**
|
|
14
|
+
* (#2602): the ramp-native engine is length-agnostic, so this is a DATA change.
|
|
15
|
+
* Semantic roles are aggressively merged onto shared stops to keep the number of
|
|
16
|
+
* distinct tones small — most notably `surface`, `codeBg`(light) and
|
|
17
|
+
* `chatAssistantBg` collapse onto `bg`, so header Version boxes and doc cards
|
|
18
|
+
* render as page-bg + border only (no gray fill). 5 stops leave no subtle
|
|
19
|
+
* near-white, so light-mode elevated fills are border-only by design.
|
|
20
|
+
*
|
|
21
|
+
* `ColorScheme` is re-exported here so the many sites that still
|
|
22
|
+
* `import { ColorScheme } from "./color-schemes"` (contrast tooling,
|
|
23
|
+
* zfb.config.ts, …) keep resolving until their own waves port them.
|
|
24
|
+
*/
|
|
3
25
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
cursor: ColorRef;
|
|
8
|
-
selectionBg: ColorRef;
|
|
9
|
-
selectionFg: ColorRef;
|
|
10
|
-
palette: [
|
|
11
|
-
string, string, string, string, string, string, string, string,
|
|
12
|
-
string, string, string, string, string, string, string, string,
|
|
13
|
-
];
|
|
14
|
-
/** Optional, vestigial. Carried only in the optional color-scheme config
|
|
15
|
-
* envelope consumed by the design token panel tooling (falls back to
|
|
16
|
-
* DEFAULT_SHIKI_THEME when omitted), but has no visible effect: that
|
|
17
|
-
* tooling's Shiki integration is a no-op stub, and page code highlighting is
|
|
18
|
-
* done by syntect (dual-theme, configured via `codeHighlight` in
|
|
19
|
-
* zfb.config.ts), not Shiki. */
|
|
20
|
-
shikiTheme?: string;
|
|
21
|
-
/** Optional semantic overrides — when omitted, defaults are used:
|
|
22
|
-
* surface=p0, muted=p8, accent=p5, accentHover=p14
|
|
23
|
-
* codeBg=p10, codeFg=p11, success=p2, danger=p1, warning=p3, info=p4
|
|
24
|
-
* Each field accepts a palette index (number) or a direct color value (string). */
|
|
25
|
-
semantic?: {
|
|
26
|
-
surface?: ColorRef;
|
|
27
|
-
muted?: ColorRef;
|
|
28
|
-
accent?: ColorRef;
|
|
29
|
-
accentHover?: ColorRef;
|
|
30
|
-
codeBg?: ColorRef;
|
|
31
|
-
codeFg?: ColorRef;
|
|
32
|
-
success?: ColorRef;
|
|
33
|
-
danger?: ColorRef;
|
|
34
|
-
warning?: ColorRef;
|
|
35
|
-
info?: ColorRef;
|
|
36
|
-
mermaidNodeBg?: ColorRef;
|
|
37
|
-
mermaidText?: ColorRef;
|
|
38
|
-
mermaidLine?: ColorRef;
|
|
39
|
-
mermaidLabelBg?: ColorRef;
|
|
40
|
-
mermaidNoteBg?: ColorRef;
|
|
41
|
-
chatUserBg?: ColorRef;
|
|
42
|
-
chatUserText?: ColorRef;
|
|
43
|
-
chatAssistantBg?: ColorRef;
|
|
44
|
-
chatAssistantText?: ColorRef;
|
|
45
|
-
/** UI chrome over user images — enlarge/close overlay buttons */
|
|
46
|
-
imageOverlayBg?: ColorRef;
|
|
47
|
-
imageOverlayFg?: ColorRef;
|
|
48
|
-
/** <mark> highlight for matched keywords in search results */
|
|
49
|
-
matchedKeywordBg?: ColorRef;
|
|
50
|
-
matchedKeywordFg?: ColorRef;
|
|
51
|
-
};
|
|
52
|
-
}
|
|
26
|
+
import type { ColorScheme, Ramps, ModeMap } from "./color-scheme-utils";
|
|
27
|
+
|
|
28
|
+
export type { ColorScheme } from "./color-scheme-utils";
|
|
53
29
|
|
|
54
30
|
/**
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
*
|
|
59
|
-
* | p0 | Dark surface | Deepest surface (code blocks, mermaid) |
|
|
60
|
-
* | p1 | Danger | Red family — errors, destructive actions |
|
|
61
|
-
* | p2 | Success | Green family — confirmations, tips |
|
|
62
|
-
* | p3 | Warning | Yellow/amber — caution messages |
|
|
63
|
-
* | p4 | Info | Blue family — informational highlights |
|
|
64
|
-
* | p5 | Accent | Primary interactive color (links, CTA) |
|
|
65
|
-
* | p6 | Neutral | Slate/cyan — borders, secondary elements |
|
|
66
|
-
* | p7 | Secondary neutral | Gray or muted accent |
|
|
67
|
-
* | p8 | Muted | Gray — borders, secondary text, comments |
|
|
68
|
-
* | p9 | Background | Page background |
|
|
69
|
-
* | p10 | Surface | Elevated surface (panels, sidebars) |
|
|
70
|
-
* | p11 | Text primary | Main body text |
|
|
71
|
-
* | p12 | Accent variant | Brighter or alternate accent |
|
|
72
|
-
* | p13 | Decorative | Purple/lavender — non-semantic decoration |
|
|
73
|
-
* | p14 | Accent hover | Hover state for interactive elements |
|
|
74
|
-
* | p15 | Text secondary | Secondary text or muted foreground |
|
|
31
|
+
* Shared Tier-1 ramps — identical across Default Light and Default Dark.
|
|
32
|
+
* Minimized to 5 base / 3 accent (#2602). The warm-neutral spine keeps hue 65;
|
|
33
|
+
* the accent stops are the three tuned orange stops carried over from the 7-stop
|
|
34
|
+
* ramp (old accent2/3/6, re-indexed). Index 0 = lightest.
|
|
75
35
|
*/
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
36
|
+
const ramps: Ramps = {
|
|
37
|
+
base: [
|
|
38
|
+
"oklch(.965 .004 65)", // 0 — lightest (light bg / dark fg)
|
|
39
|
+
"oklch(.705 .008 65)", // 1 — dark muted / light selection & mermaid fill
|
|
40
|
+
"oklch(.480 .008 65)", // 2 — light muted / dark selection & mermaid note
|
|
41
|
+
"oklch(.300 .006 65)", // 3 — dark codeBg / mermaid fill
|
|
42
|
+
"oklch(.185 .005 65)", // 4 — darkest (dark bg / light fg)
|
|
43
|
+
],
|
|
44
|
+
accent: [
|
|
45
|
+
"oklch(.755 .130 64)", // 0 — dark hover (was accent2)
|
|
46
|
+
"oklch(.700 .158 62)", // 1 — dark accent (was accent3)
|
|
47
|
+
"oklch(.470 .120 56)", // 2 — light accent (was accent6)
|
|
48
|
+
],
|
|
49
|
+
state: {
|
|
50
|
+
danger: "oklch(.640 .170 25)",
|
|
51
|
+
success: "oklch(.680 .145 145)",
|
|
52
|
+
warning: "oklch(.760 .135 82)",
|
|
53
|
+
info: "oklch(.680 .130 245)",
|
|
54
|
+
},
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Default Dark — the authored reference scheme (epic #2584; minimized #2602).
|
|
59
|
+
* bg = darkest base stop, fg = lightest. Roles merged onto shared stops:
|
|
60
|
+
* `surface`, `chatAssistantBg`, `imageOverlayBg` all = `bg` (b4) so elevated
|
|
61
|
+
* panels are bg + border only. Per-mode AA-tuned literals: `danger`,
|
|
62
|
+
* `matchedKeyword*` (carried from #2593). Full WCAG matrix passes at
|
|
63
|
+
* threshold+0.1.
|
|
64
|
+
*/
|
|
65
|
+
const darkMap: ModeMap = {
|
|
66
|
+
bg: { base: 4 },
|
|
67
|
+
fg: { base: 0 },
|
|
68
|
+
selectionBg: { base: 2 },
|
|
69
|
+
selectionFg: { base: 0 },
|
|
70
|
+
semantic: {
|
|
71
|
+
// Merged onto bg (b4) — elevated panels read as page-bg + border, no gray fill.
|
|
72
|
+
surface: { base: 4 },
|
|
73
|
+
muted: { base: 1 },
|
|
74
|
+
accent: { accent: 1 },
|
|
75
|
+
accentHover: { accent: 0 },
|
|
76
|
+
codeBg: { base: 3 },
|
|
77
|
+
codeFg: { base: 0 },
|
|
78
|
+
success: { state: "success" },
|
|
79
|
+
// Per-mode AA-tuned literal — shared state.danger oklch(.640 .170 25) is too
|
|
80
|
+
// dark for the danger-admonition title on its 12%-tint dark bg. L .640→.655
|
|
81
|
+
// (H/C fixed) — admonition-danger at threshold+0.1; carried from #2593.
|
|
82
|
+
danger: "oklch(.655 .170 25)",
|
|
83
|
+
warning: { state: "warning" },
|
|
84
|
+
info: { state: "info" },
|
|
85
|
+
mermaidNodeBg: { base: 3 },
|
|
86
|
+
mermaidText: { base: 0 },
|
|
87
|
+
mermaidLine: { base: 1 },
|
|
88
|
+
mermaidLabelBg: { base: 3 },
|
|
89
|
+
mermaidNoteBg: { base: 2 },
|
|
90
|
+
chatUserBg: { accent: 1 },
|
|
91
|
+
chatUserText: { base: 4 },
|
|
92
|
+
// Merged onto bg (b4) — the chat assistant bubble reads as page-bg + border.
|
|
93
|
+
chatAssistantBg: { base: 4 },
|
|
94
|
+
chatAssistantText: { base: 0 },
|
|
95
|
+
imageOverlayBg: { base: 4 },
|
|
96
|
+
imageOverlayFg: { base: 0 },
|
|
97
|
+
// Search-result <mark> highlight: an amber (accent-hue) fill with dark text —
|
|
98
|
+
// the classic highlighter look, identical in both modes. Kept as literals so
|
|
99
|
+
// the amber fill is scheme-stable; matchedKeywordFg dark so text clears AA on
|
|
100
|
+
// the amber bg — matched-keyword at threshold+0.1; carried from #2593.
|
|
101
|
+
matchedKeywordBg: "oklch(.700 .158 62)",
|
|
102
|
+
matchedKeywordFg: "oklch(.300 .003 65)",
|
|
106
103
|
},
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* Default Light — the authored light-mode scheme (epic #2584; minimized #2602).
|
|
108
|
+
* Shares `ramps` with Default Dark; the `map` inverts (light bg = lightest base
|
|
109
|
+
* stop, dark fg = darkest). Roles merged onto shared stops: `surface`, `codeBg`,
|
|
110
|
+
* `chatAssistantBg` all = `bg` (b0) so elevated panels are bg + border only
|
|
111
|
+
* (the intended flat, few-tone look — 5 stops leave no subtle near-white fill).
|
|
112
|
+
* The accent/state colors — authored for a dark bg — need darker per-mode
|
|
113
|
+
* literals to clear AA on a near-white bg. Full WCAG matrix passes at
|
|
114
|
+
* threshold+0.1; ramps untouched so Default Dark is unaffected.
|
|
115
|
+
*/
|
|
116
|
+
const lightMap: ModeMap = {
|
|
117
|
+
bg: { base: 0 },
|
|
118
|
+
fg: { base: 4 },
|
|
119
|
+
selectionBg: { base: 1 },
|
|
120
|
+
selectionFg: { base: 4 },
|
|
121
|
+
semantic: {
|
|
122
|
+
// Merged onto bg (b0) — elevated panels read as page-bg + border, no gray fill.
|
|
123
|
+
surface: { base: 0 },
|
|
124
|
+
muted: { base: 2 },
|
|
125
|
+
accent: { accent: 2 },
|
|
126
|
+
// Light: per-mode literal — the accent ramp has no stop darker than accent2,
|
|
127
|
+
// so the link-hover state darkens further (hover-darkens-on-light
|
|
128
|
+
// convention). L .400, C fitted to the sRGB gamut edge at that L; carried
|
|
129
|
+
// from #2595. accent-hover-vs-bg clears threshold+0.1.
|
|
130
|
+
accentHover: "oklch(.400 .096 56)",
|
|
131
|
+
// Merged onto bg (b0) — inline/code-block fill reads as page-bg + border.
|
|
132
|
+
codeBg: { base: 0 },
|
|
133
|
+
codeFg: { base: 4 },
|
|
134
|
+
// Light: per-mode literals — the shared state colors are authored for a dark
|
|
135
|
+
// bg and are too light on the 12%-tint admonition backgrounds over a light
|
|
136
|
+
// page bg. Each darkened (H fixed; C at gamut max, clipped where noted) to
|
|
137
|
+
// clear its admonition pair at threshold+0.1; carried from #2595.
|
|
138
|
+
success: "oklch(.470 .140 145)",
|
|
139
|
+
danger: "oklch(.505 .170 25)",
|
|
140
|
+
warning: "oklch(.490 .100 82)", // C .135→.100 (gamut-clips at this L)
|
|
141
|
+
info: "oklch(.485 .122 245)",
|
|
142
|
+
mermaidNodeBg: { base: 1 },
|
|
143
|
+
mermaidText: { base: 4 },
|
|
144
|
+
mermaidLine: { base: 2 },
|
|
145
|
+
mermaidLabelBg: { base: 1 },
|
|
146
|
+
mermaidNoteBg: { base: 1 },
|
|
147
|
+
chatUserBg: { accent: 1 },
|
|
148
|
+
// Dark text on the amber user bubble (matches Default Dark).
|
|
149
|
+
chatUserText: { base: 4 },
|
|
150
|
+
// Merged onto bg (b0) — the chat assistant bubble reads as page-bg + border.
|
|
151
|
+
chatAssistantBg: { base: 0 },
|
|
152
|
+
chatAssistantText: { base: 4 },
|
|
153
|
+
imageOverlayBg: { base: 4 },
|
|
154
|
+
imageOverlayFg: { base: 0 },
|
|
155
|
+
// Search-result <mark>: amber highlighter fill with dark text — same look as
|
|
156
|
+
// Default Dark (an amber-on-white highlight reads identically in both modes).
|
|
157
|
+
matchedKeywordBg: "oklch(.700 .158 62)",
|
|
158
|
+
matchedKeywordFg: "oklch(.300 .003 65)",
|
|
135
159
|
},
|
|
136
160
|
};
|
|
161
|
+
|
|
162
|
+
export const colorSchemes: Record<string, ColorScheme> = {
|
|
163
|
+
"Default Light": { ramps, map: lightMap },
|
|
164
|
+
"Default Dark": { ramps, map: darkMap },
|
|
165
|
+
};
|
|
@@ -62,6 +62,7 @@ export function buildDocsSchema() {
|
|
|
62
62
|
unlisted: z.boolean().optional(),
|
|
63
63
|
hide_sidebar: z.boolean().optional(),
|
|
64
64
|
hide_toc: z.boolean().optional(),
|
|
65
|
+
wide: z.boolean().optional(),
|
|
65
66
|
doc_history: z.boolean().optional(),
|
|
66
67
|
standalone: z.boolean().optional(),
|
|
67
68
|
slug: z.string().optional(),
|
|
@@ -74,18 +74,10 @@
|
|
|
74
74
|
* Tight token strategy: import preflight + utilities only (no default theme).
|
|
75
75
|
* Only project-specific tokens are available.
|
|
76
76
|
*
|
|
77
|
-
*
|
|
77
|
+
* Base roles: --zd-bg/--zd-fg/--zd-selection-bg/--zd-selection-fg + ramps
|
|
78
|
+
* (--palette-base-0..4 / --palette-accent-0..2 / --palette-state-*) +
|
|
79
|
+
* 23 --zd-{role} semantic tokens, all injected by ColorSchemeProvider.
|
|
78
80
|
* Tailwind tokens: registered below via @theme
|
|
79
|
-
*
|
|
80
|
-
* Palette slots:
|
|
81
|
-
* 0/8: black / bright-black (surfaces, muted text, borders)
|
|
82
|
-
* 1/9: red / bright-red
|
|
83
|
-
* 2/10: green / bright-green
|
|
84
|
-
* 3/11: yellow / bright-yellow
|
|
85
|
-
* 4/12: blue / bright-blue
|
|
86
|
-
* 5/13: magenta / bright-magenta
|
|
87
|
-
* 6/14: cyan / bright-cyan
|
|
88
|
-
* 7/15: white / bright-white
|
|
89
81
|
* ======================================== */
|
|
90
82
|
|
|
91
83
|
@theme {
|
|
@@ -117,26 +109,8 @@
|
|
|
117
109
|
/* ── Base ── */
|
|
118
110
|
--color-bg: var(--zd-bg);
|
|
119
111
|
--color-fg: var(--zd-fg);
|
|
120
|
-
--color-sel-bg: var(--zd-
|
|
121
|
-
--color-sel-fg: var(--zd-
|
|
122
|
-
|
|
123
|
-
/* ── Raw palette (p0–p15) ── */
|
|
124
|
-
--color-p0: var(--zd-0);
|
|
125
|
-
--color-p1: var(--zd-1);
|
|
126
|
-
--color-p2: var(--zd-2);
|
|
127
|
-
--color-p3: var(--zd-3);
|
|
128
|
-
--color-p4: var(--zd-4);
|
|
129
|
-
--color-p5: var(--zd-5);
|
|
130
|
-
--color-p6: var(--zd-6);
|
|
131
|
-
--color-p7: var(--zd-7);
|
|
132
|
-
--color-p8: var(--zd-8);
|
|
133
|
-
--color-p9: var(--zd-9);
|
|
134
|
-
--color-p10: var(--zd-10);
|
|
135
|
-
--color-p11: var(--zd-11);
|
|
136
|
-
--color-p12: var(--zd-12);
|
|
137
|
-
--color-p13: var(--zd-13);
|
|
138
|
-
--color-p14: var(--zd-14);
|
|
139
|
-
--color-p15: var(--zd-15);
|
|
112
|
+
--color-sel-bg: var(--zd-selection-bg);
|
|
113
|
+
--color-sel-fg: var(--zd-selection-fg);
|
|
140
114
|
|
|
141
115
|
/* ── Semantic aliases ── */
|
|
142
116
|
--color-surface: var(--zd-surface);
|