@decantr/cli 1.0.0-beta.10 → 1.0.0-beta.11
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/dist/index.js +903 -75
- package/package.json +1 -1
- package/src/templates/DECANTR.md.template +142 -3
package/package.json
CHANGED
|
@@ -98,6 +98,20 @@ When a user request would violate guard rules:
|
|
|
98
98
|
}
|
|
99
99
|
```
|
|
100
100
|
|
|
101
|
+
### Theme Quick Reference
|
|
102
|
+
|
|
103
|
+
{{THEME_QUICK_REFERENCE}}
|
|
104
|
+
|
|
105
|
+
**To fetch complete theme and recipe specs:**
|
|
106
|
+
```bash
|
|
107
|
+
npx decantr get theme {{THEME_STYLE}}
|
|
108
|
+
npx decantr get recipe {{THEME_RECIPE}}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
{{ACCESSIBILITY_SECTION}}
|
|
112
|
+
|
|
113
|
+
{{SEO_SECTION}}
|
|
114
|
+
|
|
101
115
|
### Pages
|
|
102
116
|
|
|
103
117
|
{{PAGES_TABLE}}
|
|
@@ -112,16 +126,32 @@ When a user request would violate guard rules:
|
|
|
112
126
|
|
|
113
127
|
**Always check these before generating UI code:**
|
|
114
128
|
|
|
115
|
-
###
|
|
129
|
+
### Quick Commands
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
# Get full theme spec (colors, palette, modes)
|
|
133
|
+
npx decantr get theme {{THEME_STYLE}}
|
|
134
|
+
|
|
135
|
+
# Get recipe decorators and effects
|
|
136
|
+
npx decantr get recipe {{THEME_RECIPE}}
|
|
137
|
+
|
|
138
|
+
# Get pattern structure and presets
|
|
139
|
+
npx decantr get pattern <pattern-name>
|
|
116
140
|
|
|
117
|
-
|
|
141
|
+
# Search for patterns
|
|
142
|
+
npx decantr search <query>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### With MCP Tools (If Available)
|
|
146
|
+
|
|
147
|
+
> Note: MCP tools require the `@decantr/mcp-server` to be configured. If these tools are not available, use the CLI commands above.
|
|
118
148
|
|
|
119
149
|
1. `decantr_read_essence` — Load the current essence
|
|
120
150
|
2. `decantr_check_drift` — Verify your planned changes won't violate rules
|
|
121
151
|
3. `decantr_resolve_pattern` — Get pattern details before implementing
|
|
122
152
|
4. `decantr_suggest_patterns` — Find appropriate patterns for new sections
|
|
123
153
|
|
|
124
|
-
### Without MCP Tools
|
|
154
|
+
### Without MCP Tools or CLI
|
|
125
155
|
|
|
126
156
|
1. Read `decantr.essence.json` in the project root
|
|
127
157
|
2. Verify the page you're editing exists in `structure[]`
|
|
@@ -205,6 +235,115 @@ Use the same component variants throughout a pattern. If buttons are `primary` s
|
|
|
205
235
|
|
|
206
236
|
---
|
|
207
237
|
|
|
238
|
+
## CSS Implementation
|
|
239
|
+
|
|
240
|
+
### HTML Setup
|
|
241
|
+
|
|
242
|
+
Your `index.html` MUST have theme and mode attributes:
|
|
243
|
+
|
|
244
|
+
```html
|
|
245
|
+
<!DOCTYPE html>
|
|
246
|
+
<html lang="en" data-theme="{{THEME_STYLE}}" data-mode="{{THEME_MODE}}">
|
|
247
|
+
<head>
|
|
248
|
+
<meta name="color-scheme" content="{{THEME_MODE}}">
|
|
249
|
+
...
|
|
250
|
+
</head>
|
|
251
|
+
</html>
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
**Why this matters:**
|
|
255
|
+
- `data-theme` enables theme switching via JS without reloading CSS
|
|
256
|
+
- `data-mode` enables light/dark toggle
|
|
257
|
+
- `color-scheme` tells the browser to style native controls (scrollbars, inputs) correctly
|
|
258
|
+
|
|
259
|
+
### CSS Layer Structure
|
|
260
|
+
|
|
261
|
+
Use `@layer` for proper cascade control:
|
|
262
|
+
|
|
263
|
+
```css
|
|
264
|
+
@layer decantr.reset, decantr.tokens, decantr.decorators, decantr.patterns, decantr.utilities, app;
|
|
265
|
+
|
|
266
|
+
@layer decantr.reset {
|
|
267
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
268
|
+
body { margin: 0; }
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
@layer decantr.tokens {
|
|
272
|
+
/* Base spacing (theme-agnostic) */
|
|
273
|
+
:root {
|
|
274
|
+
--gap1: 4px;
|
|
275
|
+
--gap2: 8px;
|
|
276
|
+
--gap3: 12px;
|
|
277
|
+
--gap4: 16px;
|
|
278
|
+
--gap6: 24px;
|
|
279
|
+
--gap8: 32px;
|
|
280
|
+
--gap12: 48px;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
/* Theme-specific tokens */
|
|
284
|
+
html[data-theme="{{THEME_STYLE}}"] {
|
|
285
|
+
color-scheme: {{THEME_MODE}};
|
|
286
|
+
|
|
287
|
+
/* Seed colors from theme */
|
|
288
|
+
--d-primary: /* from theme.seed.primary */;
|
|
289
|
+
--d-secondary: /* from theme.seed.secondary */;
|
|
290
|
+
--d-accent: /* from theme.seed.accent */;
|
|
291
|
+
--d-bg: /* from theme.seed.background */;
|
|
292
|
+
|
|
293
|
+
/* Surface stack */
|
|
294
|
+
--d-surface: rgba(255, 255, 255, 0.03);
|
|
295
|
+
--d-surface-raised: rgba(255, 255, 255, 0.06);
|
|
296
|
+
--d-border: rgba(255, 255, 255, 0.1);
|
|
297
|
+
|
|
298
|
+
/* Text hierarchy */
|
|
299
|
+
--d-text: #FFFFFF;
|
|
300
|
+
--d-text-secondary: rgba(255, 255, 255, 0.7);
|
|
301
|
+
--d-text-muted: rgba(255, 255, 255, 0.4);
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
@layer decantr.decorators {
|
|
306
|
+
/* Recipe-specific classes from {{THEME_RECIPE}} */
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
@layer decantr.patterns {
|
|
310
|
+
.pattern-hero { }
|
|
311
|
+
.pattern-kpi-grid { }
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
@layer app {
|
|
315
|
+
/* Your application overrides */
|
|
316
|
+
}
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
### Variable Naming Convention
|
|
320
|
+
|
|
321
|
+
| Prefix | Purpose | Example |
|
|
322
|
+
|--------|---------|---------|
|
|
323
|
+
| `--d-` | Core Decantr tokens | `--d-primary`, `--d-bg` |
|
|
324
|
+
| `--{recipe}-` | Recipe-specific | `--lum-orb-opacity` |
|
|
325
|
+
| `--gap{N}` | Spacing tokens | `--gap4`, `--gap8` |
|
|
326
|
+
|
|
327
|
+
### Theme Switching (JavaScript)
|
|
328
|
+
|
|
329
|
+
```javascript
|
|
330
|
+
// Switch theme
|
|
331
|
+
document.documentElement.dataset.theme = 'newTheme';
|
|
332
|
+
|
|
333
|
+
// Switch mode
|
|
334
|
+
document.documentElement.dataset.mode = 'light';
|
|
335
|
+
document.querySelector('meta[name="color-scheme"]').content = 'light';
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
### Get Full Theme/Recipe Specs
|
|
339
|
+
|
|
340
|
+
```bash
|
|
341
|
+
npx decantr get theme {{THEME_STYLE}} # See seed colors, palette
|
|
342
|
+
npx decantr get recipe {{THEME_RECIPE}} # See decorators, effects
|
|
343
|
+
```
|
|
344
|
+
|
|
345
|
+
---
|
|
346
|
+
|
|
208
347
|
## Spatial Guidelines
|
|
209
348
|
|
|
210
349
|
### Personality to Density Mapping
|