x-ipe 1.0.18__py3-none-any.whl → 1.0.19__py3-none-any.whl
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.
- x_ipe/cli/main.py +3 -0
- x_ipe/core/scaffold.py +29 -0
- x_ipe/resources/themes/theme-default/component-visualization.html +738 -0
- x_ipe/resources/themes/theme-default/design-system.md +302 -0
- x_ipe/static/js/terminal-v2.js +2 -2
- x_ipe/static/js/terminal.js +2 -2
- x_ipe/static/js/uiux-feedback.js +1 -1
- {x_ipe-1.0.18.dist-info → x_ipe-1.0.19.dist-info}/METADATA +2 -1
- {x_ipe-1.0.18.dist-info → x_ipe-1.0.19.dist-info}/RECORD +12 -10
- {x_ipe-1.0.18.dist-info → x_ipe-1.0.19.dist-info}/WHEEL +0 -0
- {x_ipe-1.0.18.dist-info → x_ipe-1.0.19.dist-info}/entry_points.txt +0 -0
- {x_ipe-1.0.18.dist-info → x_ipe-1.0.19.dist-info}/licenses/LICENSE +0 -0
x_ipe/cli/main.py
CHANGED
|
@@ -214,6 +214,9 @@ def init(ctx: click.Context, force: bool, dry_run: bool, no_skills: bool) -> Non
|
|
|
214
214
|
# Copy planning templates (features.md, task-board.md)
|
|
215
215
|
scaffold.copy_planning_templates()
|
|
216
216
|
|
|
217
|
+
# Copy default theme
|
|
218
|
+
scaffold.copy_themes()
|
|
219
|
+
|
|
217
220
|
# Create config file
|
|
218
221
|
scaffold.create_config_file()
|
|
219
222
|
|
x_ipe/core/scaffold.py
CHANGED
|
@@ -15,6 +15,7 @@ class ScaffoldManager:
|
|
|
15
15
|
"x-ipe-docs/features",
|
|
16
16
|
"x-ipe-docs/ideas",
|
|
17
17
|
"x-ipe-docs/config",
|
|
18
|
+
"x-ipe-docs/themes",
|
|
18
19
|
]
|
|
19
20
|
|
|
20
21
|
GITIGNORE_ENTRIES = [
|
|
@@ -282,6 +283,33 @@ class ScaffoldManager:
|
|
|
282
283
|
shutil.copy2(source_file, target_file)
|
|
283
284
|
self.created.append(target_file)
|
|
284
285
|
|
|
286
|
+
def copy_themes(self) -> None:
|
|
287
|
+
"""Copy default theme to x-ipe-docs/themes/."""
|
|
288
|
+
themes_source = self._get_resource_path("themes")
|
|
289
|
+
if themes_source is None or not themes_source.exists():
|
|
290
|
+
return
|
|
291
|
+
|
|
292
|
+
target_dir = self.project_root / "x-ipe-docs" / "themes"
|
|
293
|
+
|
|
294
|
+
# Copy entire theme-default folder
|
|
295
|
+
theme_source = themes_source / "theme-default"
|
|
296
|
+
theme_target = target_dir / "theme-default"
|
|
297
|
+
|
|
298
|
+
if not theme_source.exists():
|
|
299
|
+
return
|
|
300
|
+
|
|
301
|
+
if theme_target.exists():
|
|
302
|
+
if not self.force:
|
|
303
|
+
self.skipped.append(theme_target)
|
|
304
|
+
return
|
|
305
|
+
|
|
306
|
+
if not self.dry_run:
|
|
307
|
+
target_dir.mkdir(parents=True, exist_ok=True)
|
|
308
|
+
if theme_target.exists() and self.force:
|
|
309
|
+
shutil.rmtree(theme_target)
|
|
310
|
+
shutil.copytree(theme_source, theme_target, dirs_exist_ok=True)
|
|
311
|
+
self.created.append(theme_target)
|
|
312
|
+
|
|
285
313
|
def create_config_file(self, config_content: Optional[str] = None) -> None:
|
|
286
314
|
"""Create .x-ipe.yaml with defaults.
|
|
287
315
|
|
|
@@ -356,6 +384,7 @@ server:
|
|
|
356
384
|
self.copy_copilot_instructions()
|
|
357
385
|
self.copy_config_files()
|
|
358
386
|
self.copy_planning_templates()
|
|
387
|
+
self.copy_themes()
|
|
359
388
|
self.create_config_file()
|
|
360
389
|
self.update_gitignore()
|
|
361
390
|
self.merge_mcp_config()
|
|
@@ -0,0 +1,738 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Default Theme - Component Visualization</title>
|
|
7
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
8
|
+
<style>
|
|
9
|
+
:root {
|
|
10
|
+
/* Colors */
|
|
11
|
+
--color-primary: #0f172a;
|
|
12
|
+
--color-secondary: #475569;
|
|
13
|
+
--color-accent: #10b981;
|
|
14
|
+
--color-neutral: #e2e8f0;
|
|
15
|
+
--color-success: #22c55e;
|
|
16
|
+
--color-warning: #f59e0b;
|
|
17
|
+
--color-error: #ef4444;
|
|
18
|
+
--color-info: #3b82f6;
|
|
19
|
+
|
|
20
|
+
/* Neutrals */
|
|
21
|
+
--slate-50: #f8fafc;
|
|
22
|
+
--slate-100: #f1f5f9;
|
|
23
|
+
--slate-200: #e2e8f0;
|
|
24
|
+
--slate-300: #cbd5e1;
|
|
25
|
+
--slate-400: #94a3b8;
|
|
26
|
+
--slate-500: #64748b;
|
|
27
|
+
--slate-600: #475569;
|
|
28
|
+
--slate-700: #334155;
|
|
29
|
+
--slate-800: #1e293b;
|
|
30
|
+
--slate-900: #0f172a;
|
|
31
|
+
|
|
32
|
+
/* Typography */
|
|
33
|
+
--font-heading: 'Inter', system-ui, sans-serif;
|
|
34
|
+
--font-body: system-ui, -apple-system, sans-serif;
|
|
35
|
+
--font-mono: 'JetBrains Mono', monospace;
|
|
36
|
+
|
|
37
|
+
/* Spacing */
|
|
38
|
+
--space-xs: 4px;
|
|
39
|
+
--space-sm: 8px;
|
|
40
|
+
--space-md: 16px;
|
|
41
|
+
--space-lg: 24px;
|
|
42
|
+
--space-xl: 32px;
|
|
43
|
+
|
|
44
|
+
/* Border Radius */
|
|
45
|
+
--radius-sm: 4px;
|
|
46
|
+
--radius-md: 8px;
|
|
47
|
+
--radius-lg: 12px;
|
|
48
|
+
--radius-full: 9999px;
|
|
49
|
+
|
|
50
|
+
/* Shadows */
|
|
51
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
52
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
53
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
* {
|
|
57
|
+
margin: 0;
|
|
58
|
+
padding: 0;
|
|
59
|
+
box-sizing: border-box;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
body {
|
|
63
|
+
font-family: var(--font-body);
|
|
64
|
+
background: var(--slate-50);
|
|
65
|
+
color: var(--color-primary);
|
|
66
|
+
line-height: 1.5;
|
|
67
|
+
padding: 48px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.container {
|
|
71
|
+
max-width: 1200px;
|
|
72
|
+
margin: 0 auto;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
h1 {
|
|
76
|
+
font-family: var(--font-heading);
|
|
77
|
+
font-size: 36px;
|
|
78
|
+
font-weight: 700;
|
|
79
|
+
color: var(--color-primary);
|
|
80
|
+
margin-bottom: 8px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.subtitle {
|
|
84
|
+
font-size: 18px;
|
|
85
|
+
color: var(--color-secondary);
|
|
86
|
+
margin-bottom: 48px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.section {
|
|
90
|
+
background: white;
|
|
91
|
+
border-radius: var(--radius-lg);
|
|
92
|
+
padding: var(--space-lg);
|
|
93
|
+
margin-bottom: var(--space-lg);
|
|
94
|
+
box-shadow: var(--shadow-sm);
|
|
95
|
+
border: 1px solid var(--slate-200);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.section-title {
|
|
99
|
+
font-family: var(--font-heading);
|
|
100
|
+
font-size: 20px;
|
|
101
|
+
font-weight: 600;
|
|
102
|
+
color: var(--color-primary);
|
|
103
|
+
margin-bottom: var(--space-md);
|
|
104
|
+
padding-bottom: var(--space-sm);
|
|
105
|
+
border-bottom: 1px solid var(--slate-200);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Color Swatches */
|
|
109
|
+
.color-grid {
|
|
110
|
+
display: grid;
|
|
111
|
+
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
112
|
+
gap: var(--space-md);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.color-swatch {
|
|
116
|
+
border-radius: var(--radius-md);
|
|
117
|
+
overflow: hidden;
|
|
118
|
+
box-shadow: var(--shadow-sm);
|
|
119
|
+
border: 1px solid var(--slate-200);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.color-swatch-preview {
|
|
123
|
+
height: 80px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.color-swatch-info {
|
|
127
|
+
padding: var(--space-sm) var(--space-md);
|
|
128
|
+
background: white;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.color-swatch-name {
|
|
132
|
+
font-size: 13px;
|
|
133
|
+
font-weight: 600;
|
|
134
|
+
color: var(--color-primary);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.color-swatch-value {
|
|
138
|
+
font-family: var(--font-mono);
|
|
139
|
+
font-size: 11px;
|
|
140
|
+
color: var(--color-secondary);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* Typography Samples */
|
|
144
|
+
.typography-grid {
|
|
145
|
+
display: flex;
|
|
146
|
+
flex-direction: column;
|
|
147
|
+
gap: var(--space-lg);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.type-sample {
|
|
151
|
+
display: flex;
|
|
152
|
+
align-items: baseline;
|
|
153
|
+
gap: var(--space-lg);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.type-label {
|
|
157
|
+
width: 100px;
|
|
158
|
+
flex-shrink: 0;
|
|
159
|
+
font-family: var(--font-mono);
|
|
160
|
+
font-size: 12px;
|
|
161
|
+
color: var(--color-secondary);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.text-xs { font-size: 12px; }
|
|
165
|
+
.text-sm { font-size: 14px; }
|
|
166
|
+
.text-base { font-size: 16px; }
|
|
167
|
+
.text-lg { font-size: 18px; }
|
|
168
|
+
.text-xl { font-size: 20px; }
|
|
169
|
+
.text-2xl { font-size: 24px; }
|
|
170
|
+
.text-3xl { font-size: 30px; }
|
|
171
|
+
.text-4xl { font-size: 36px; }
|
|
172
|
+
|
|
173
|
+
/* Spacing Visualization */
|
|
174
|
+
.spacing-grid {
|
|
175
|
+
display: flex;
|
|
176
|
+
flex-wrap: wrap;
|
|
177
|
+
gap: var(--space-lg);
|
|
178
|
+
align-items: flex-end;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.spacing-item {
|
|
182
|
+
display: flex;
|
|
183
|
+
flex-direction: column;
|
|
184
|
+
align-items: center;
|
|
185
|
+
gap: var(--space-xs);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.spacing-bar {
|
|
189
|
+
background: var(--color-accent);
|
|
190
|
+
border-radius: var(--radius-sm);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.spacing-label {
|
|
194
|
+
font-family: var(--font-mono);
|
|
195
|
+
font-size: 11px;
|
|
196
|
+
color: var(--color-secondary);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* Component Samples */
|
|
200
|
+
.component-grid {
|
|
201
|
+
display: flex;
|
|
202
|
+
flex-wrap: wrap;
|
|
203
|
+
gap: var(--space-lg);
|
|
204
|
+
align-items: flex-start;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/* Buttons */
|
|
208
|
+
.btn {
|
|
209
|
+
display: inline-flex;
|
|
210
|
+
align-items: center;
|
|
211
|
+
justify-content: center;
|
|
212
|
+
padding: 12px 24px;
|
|
213
|
+
border-radius: var(--radius-md);
|
|
214
|
+
font-size: 14px;
|
|
215
|
+
font-weight: 600;
|
|
216
|
+
cursor: pointer;
|
|
217
|
+
border: none;
|
|
218
|
+
transition: all 0.2s ease;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.btn-primary {
|
|
222
|
+
background: var(--color-accent);
|
|
223
|
+
color: white;
|
|
224
|
+
box-shadow: var(--shadow-sm);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.btn-primary:hover {
|
|
228
|
+
background: #059669;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.btn-secondary {
|
|
232
|
+
background: var(--slate-100);
|
|
233
|
+
color: var(--slate-700);
|
|
234
|
+
border: 1px solid var(--slate-200);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.btn-secondary:hover {
|
|
238
|
+
background: var(--slate-200);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.btn-outline {
|
|
242
|
+
background: transparent;
|
|
243
|
+
color: var(--color-accent);
|
|
244
|
+
border: 1px solid var(--color-accent);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.btn-outline:hover {
|
|
248
|
+
background: rgba(16, 185, 129, 0.1);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
/* Cards */
|
|
252
|
+
.sample-card {
|
|
253
|
+
width: 280px;
|
|
254
|
+
background: white;
|
|
255
|
+
border: 1px solid var(--slate-200);
|
|
256
|
+
border-radius: var(--radius-lg);
|
|
257
|
+
padding: var(--space-lg);
|
|
258
|
+
box-shadow: var(--shadow-sm);
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.sample-card-title {
|
|
262
|
+
font-size: 18px;
|
|
263
|
+
font-weight: 600;
|
|
264
|
+
color: var(--color-primary);
|
|
265
|
+
margin-bottom: 8px;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.sample-card-body {
|
|
269
|
+
font-size: 14px;
|
|
270
|
+
color: var(--color-secondary);
|
|
271
|
+
line-height: 1.5;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
/* Form Input */
|
|
275
|
+
.sample-input {
|
|
276
|
+
width: 280px;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.input {
|
|
280
|
+
width: 100%;
|
|
281
|
+
padding: 12px 16px;
|
|
282
|
+
font-size: 14px;
|
|
283
|
+
border: 1px solid var(--slate-200);
|
|
284
|
+
border-radius: var(--radius-md);
|
|
285
|
+
background: white;
|
|
286
|
+
color: var(--color-primary);
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.input:focus {
|
|
290
|
+
outline: none;
|
|
291
|
+
border-color: var(--color-accent);
|
|
292
|
+
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.input::placeholder {
|
|
296
|
+
color: var(--slate-400);
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.input-label {
|
|
300
|
+
display: block;
|
|
301
|
+
font-size: 13px;
|
|
302
|
+
font-weight: 500;
|
|
303
|
+
color: var(--color-primary);
|
|
304
|
+
margin-bottom: 6px;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
/* Border Radius Demo */
|
|
308
|
+
.radius-grid {
|
|
309
|
+
display: flex;
|
|
310
|
+
flex-wrap: wrap;
|
|
311
|
+
gap: var(--space-lg);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.radius-item {
|
|
315
|
+
display: flex;
|
|
316
|
+
flex-direction: column;
|
|
317
|
+
align-items: center;
|
|
318
|
+
gap: var(--space-sm);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.radius-box {
|
|
322
|
+
width: 64px;
|
|
323
|
+
height: 64px;
|
|
324
|
+
background: var(--color-accent);
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.radius-label {
|
|
328
|
+
font-family: var(--font-mono);
|
|
329
|
+
font-size: 11px;
|
|
330
|
+
color: var(--color-secondary);
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
/* Shadow Demo */
|
|
334
|
+
.shadow-grid {
|
|
335
|
+
display: flex;
|
|
336
|
+
flex-wrap: wrap;
|
|
337
|
+
gap: var(--space-xl);
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.shadow-item {
|
|
341
|
+
display: flex;
|
|
342
|
+
flex-direction: column;
|
|
343
|
+
align-items: center;
|
|
344
|
+
gap: var(--space-sm);
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.shadow-box {
|
|
348
|
+
width: 100px;
|
|
349
|
+
height: 100px;
|
|
350
|
+
background: white;
|
|
351
|
+
border-radius: var(--radius-md);
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.shadow-label {
|
|
355
|
+
font-family: var(--font-mono);
|
|
356
|
+
font-size: 11px;
|
|
357
|
+
color: var(--color-secondary);
|
|
358
|
+
}
|
|
359
|
+
</style>
|
|
360
|
+
|
|
361
|
+
<!-- JSON-LD Structured Data for AI Parsing -->
|
|
362
|
+
<script type="application/ld+json">
|
|
363
|
+
{
|
|
364
|
+
"@context": "https://schema.org",
|
|
365
|
+
"@type": "DesignSystem",
|
|
366
|
+
"name": "Default Theme",
|
|
367
|
+
"description": "A clean, neutral design system for X-IPE mockups",
|
|
368
|
+
"version": "1.0",
|
|
369
|
+
"tokens": {
|
|
370
|
+
"colors": {
|
|
371
|
+
"primary": "#0f172a",
|
|
372
|
+
"secondary": "#475569",
|
|
373
|
+
"accent": "#10b981",
|
|
374
|
+
"neutral": "#e2e8f0",
|
|
375
|
+
"success": "#22c55e",
|
|
376
|
+
"warning": "#f59e0b",
|
|
377
|
+
"error": "#ef4444",
|
|
378
|
+
"info": "#3b82f6"
|
|
379
|
+
},
|
|
380
|
+
"neutralScale": {
|
|
381
|
+
"slate-50": "#f8fafc",
|
|
382
|
+
"slate-100": "#f1f5f9",
|
|
383
|
+
"slate-200": "#e2e8f0",
|
|
384
|
+
"slate-300": "#cbd5e1",
|
|
385
|
+
"slate-400": "#94a3b8",
|
|
386
|
+
"slate-500": "#64748b",
|
|
387
|
+
"slate-600": "#475569",
|
|
388
|
+
"slate-700": "#334155",
|
|
389
|
+
"slate-800": "#1e293b",
|
|
390
|
+
"slate-900": "#0f172a"
|
|
391
|
+
},
|
|
392
|
+
"typography": {
|
|
393
|
+
"fontHeading": "Inter, system-ui, sans-serif",
|
|
394
|
+
"fontBody": "system-ui, -apple-system, sans-serif",
|
|
395
|
+
"fontMono": "JetBrains Mono, monospace",
|
|
396
|
+
"sizes": {
|
|
397
|
+
"xs": "12px",
|
|
398
|
+
"sm": "14px",
|
|
399
|
+
"base": "16px",
|
|
400
|
+
"lg": "18px",
|
|
401
|
+
"xl": "20px",
|
|
402
|
+
"2xl": "24px",
|
|
403
|
+
"3xl": "30px",
|
|
404
|
+
"4xl": "36px"
|
|
405
|
+
}
|
|
406
|
+
},
|
|
407
|
+
"spacing": {
|
|
408
|
+
"xs": "4px",
|
|
409
|
+
"sm": "8px",
|
|
410
|
+
"md": "16px",
|
|
411
|
+
"lg": "24px",
|
|
412
|
+
"xl": "32px",
|
|
413
|
+
"2xl": "48px",
|
|
414
|
+
"3xl": "64px"
|
|
415
|
+
},
|
|
416
|
+
"borderRadius": {
|
|
417
|
+
"sm": "4px",
|
|
418
|
+
"md": "8px",
|
|
419
|
+
"lg": "12px",
|
|
420
|
+
"xl": "16px",
|
|
421
|
+
"2xl": "24px",
|
|
422
|
+
"full": "9999px"
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
</script>
|
|
427
|
+
</head>
|
|
428
|
+
<body>
|
|
429
|
+
<div class="container">
|
|
430
|
+
<h1>Default Theme</h1>
|
|
431
|
+
<p class="subtitle">Component Visualization & Design Token Reference</p>
|
|
432
|
+
|
|
433
|
+
<!-- Color Palette -->
|
|
434
|
+
<div class="section">
|
|
435
|
+
<h2 class="section-title">Color Palette</h2>
|
|
436
|
+
<h3 style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--color-secondary);">Core Colors</h3>
|
|
437
|
+
<div class="color-grid" style="margin-bottom: 24px;">
|
|
438
|
+
<div class="color-swatch">
|
|
439
|
+
<div class="color-swatch-preview" style="background: #0f172a;" data-color="primary"></div>
|
|
440
|
+
<div class="color-swatch-info">
|
|
441
|
+
<div class="color-swatch-name">Primary</div>
|
|
442
|
+
<div class="color-swatch-value">#0f172a</div>
|
|
443
|
+
</div>
|
|
444
|
+
</div>
|
|
445
|
+
<div class="color-swatch">
|
|
446
|
+
<div class="color-swatch-preview" style="background: #475569;" data-color="secondary"></div>
|
|
447
|
+
<div class="color-swatch-info">
|
|
448
|
+
<div class="color-swatch-name">Secondary</div>
|
|
449
|
+
<div class="color-swatch-value">#475569</div>
|
|
450
|
+
</div>
|
|
451
|
+
</div>
|
|
452
|
+
<div class="color-swatch">
|
|
453
|
+
<div class="color-swatch-preview" style="background: #10b981;" data-color="accent"></div>
|
|
454
|
+
<div class="color-swatch-info">
|
|
455
|
+
<div class="color-swatch-name">Accent</div>
|
|
456
|
+
<div class="color-swatch-value">#10b981</div>
|
|
457
|
+
</div>
|
|
458
|
+
</div>
|
|
459
|
+
<div class="color-swatch">
|
|
460
|
+
<div class="color-swatch-preview" style="background: #e2e8f0;" data-color="neutral"></div>
|
|
461
|
+
<div class="color-swatch-info">
|
|
462
|
+
<div class="color-swatch-name">Neutral</div>
|
|
463
|
+
<div class="color-swatch-value">#e2e8f0</div>
|
|
464
|
+
</div>
|
|
465
|
+
</div>
|
|
466
|
+
</div>
|
|
467
|
+
|
|
468
|
+
<h3 style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--color-secondary);">Semantic Colors</h3>
|
|
469
|
+
<div class="color-grid" style="margin-bottom: 24px;">
|
|
470
|
+
<div class="color-swatch">
|
|
471
|
+
<div class="color-swatch-preview" style="background: #22c55e;" data-color="success"></div>
|
|
472
|
+
<div class="color-swatch-info">
|
|
473
|
+
<div class="color-swatch-name">Success</div>
|
|
474
|
+
<div class="color-swatch-value">#22c55e</div>
|
|
475
|
+
</div>
|
|
476
|
+
</div>
|
|
477
|
+
<div class="color-swatch">
|
|
478
|
+
<div class="color-swatch-preview" style="background: #f59e0b;" data-color="warning"></div>
|
|
479
|
+
<div class="color-swatch-info">
|
|
480
|
+
<div class="color-swatch-name">Warning</div>
|
|
481
|
+
<div class="color-swatch-value">#f59e0b</div>
|
|
482
|
+
</div>
|
|
483
|
+
</div>
|
|
484
|
+
<div class="color-swatch">
|
|
485
|
+
<div class="color-swatch-preview" style="background: #ef4444;" data-color="error"></div>
|
|
486
|
+
<div class="color-swatch-info">
|
|
487
|
+
<div class="color-swatch-name">Error</div>
|
|
488
|
+
<div class="color-swatch-value">#ef4444</div>
|
|
489
|
+
</div>
|
|
490
|
+
</div>
|
|
491
|
+
<div class="color-swatch">
|
|
492
|
+
<div class="color-swatch-preview" style="background: #3b82f6;" data-color="info"></div>
|
|
493
|
+
<div class="color-swatch-info">
|
|
494
|
+
<div class="color-swatch-name">Info</div>
|
|
495
|
+
<div class="color-swatch-value">#3b82f6</div>
|
|
496
|
+
</div>
|
|
497
|
+
</div>
|
|
498
|
+
</div>
|
|
499
|
+
|
|
500
|
+
<h3 style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--color-secondary);">Neutral Scale (Slate)</h3>
|
|
501
|
+
<div class="color-grid">
|
|
502
|
+
<div class="color-swatch">
|
|
503
|
+
<div class="color-swatch-preview" style="background: #f8fafc;"></div>
|
|
504
|
+
<div class="color-swatch-info">
|
|
505
|
+
<div class="color-swatch-name">Slate 50</div>
|
|
506
|
+
<div class="color-swatch-value">#f8fafc</div>
|
|
507
|
+
</div>
|
|
508
|
+
</div>
|
|
509
|
+
<div class="color-swatch">
|
|
510
|
+
<div class="color-swatch-preview" style="background: #f1f5f9;"></div>
|
|
511
|
+
<div class="color-swatch-info">
|
|
512
|
+
<div class="color-swatch-name">Slate 100</div>
|
|
513
|
+
<div class="color-swatch-value">#f1f5f9</div>
|
|
514
|
+
</div>
|
|
515
|
+
</div>
|
|
516
|
+
<div class="color-swatch">
|
|
517
|
+
<div class="color-swatch-preview" style="background: #e2e8f0;"></div>
|
|
518
|
+
<div class="color-swatch-info">
|
|
519
|
+
<div class="color-swatch-name">Slate 200</div>
|
|
520
|
+
<div class="color-swatch-value">#e2e8f0</div>
|
|
521
|
+
</div>
|
|
522
|
+
</div>
|
|
523
|
+
<div class="color-swatch">
|
|
524
|
+
<div class="color-swatch-preview" style="background: #cbd5e1;"></div>
|
|
525
|
+
<div class="color-swatch-info">
|
|
526
|
+
<div class="color-swatch-name">Slate 300</div>
|
|
527
|
+
<div class="color-swatch-value">#cbd5e1</div>
|
|
528
|
+
</div>
|
|
529
|
+
</div>
|
|
530
|
+
<div class="color-swatch">
|
|
531
|
+
<div class="color-swatch-preview" style="background: #94a3b8;"></div>
|
|
532
|
+
<div class="color-swatch-info">
|
|
533
|
+
<div class="color-swatch-name">Slate 400</div>
|
|
534
|
+
<div class="color-swatch-value">#94a3b8</div>
|
|
535
|
+
</div>
|
|
536
|
+
</div>
|
|
537
|
+
<div class="color-swatch">
|
|
538
|
+
<div class="color-swatch-preview" style="background: #64748b;"></div>
|
|
539
|
+
<div class="color-swatch-info">
|
|
540
|
+
<div class="color-swatch-name">Slate 500</div>
|
|
541
|
+
<div class="color-swatch-value">#64748b</div>
|
|
542
|
+
</div>
|
|
543
|
+
</div>
|
|
544
|
+
<div class="color-swatch">
|
|
545
|
+
<div class="color-swatch-preview" style="background: #475569;"></div>
|
|
546
|
+
<div class="color-swatch-info">
|
|
547
|
+
<div class="color-swatch-name">Slate 600</div>
|
|
548
|
+
<div class="color-swatch-value">#475569</div>
|
|
549
|
+
</div>
|
|
550
|
+
</div>
|
|
551
|
+
<div class="color-swatch">
|
|
552
|
+
<div class="color-swatch-preview" style="background: #334155;"></div>
|
|
553
|
+
<div class="color-swatch-info">
|
|
554
|
+
<div class="color-swatch-name">Slate 700</div>
|
|
555
|
+
<div class="color-swatch-value">#334155</div>
|
|
556
|
+
</div>
|
|
557
|
+
</div>
|
|
558
|
+
<div class="color-swatch">
|
|
559
|
+
<div class="color-swatch-preview" style="background: #1e293b;"></div>
|
|
560
|
+
<div class="color-swatch-info">
|
|
561
|
+
<div class="color-swatch-name">Slate 800</div>
|
|
562
|
+
<div class="color-swatch-value">#1e293b</div>
|
|
563
|
+
</div>
|
|
564
|
+
</div>
|
|
565
|
+
<div class="color-swatch">
|
|
566
|
+
<div class="color-swatch-preview" style="background: #0f172a;"></div>
|
|
567
|
+
<div class="color-swatch-info">
|
|
568
|
+
<div class="color-swatch-name">Slate 900</div>
|
|
569
|
+
<div class="color-swatch-value">#0f172a</div>
|
|
570
|
+
</div>
|
|
571
|
+
</div>
|
|
572
|
+
</div>
|
|
573
|
+
</div>
|
|
574
|
+
|
|
575
|
+
<!-- Typography -->
|
|
576
|
+
<div class="section">
|
|
577
|
+
<h2 class="section-title">Typography</h2>
|
|
578
|
+
<div class="typography-grid">
|
|
579
|
+
<div class="type-sample">
|
|
580
|
+
<span class="type-label">text-4xl</span>
|
|
581
|
+
<span class="text-4xl" style="font-family: var(--font-heading); font-weight: 700;">The quick brown fox</span>
|
|
582
|
+
</div>
|
|
583
|
+
<div class="type-sample">
|
|
584
|
+
<span class="type-label">text-3xl</span>
|
|
585
|
+
<span class="text-3xl" style="font-family: var(--font-heading); font-weight: 600;">The quick brown fox</span>
|
|
586
|
+
</div>
|
|
587
|
+
<div class="type-sample">
|
|
588
|
+
<span class="type-label">text-2xl</span>
|
|
589
|
+
<span class="text-2xl" style="font-family: var(--font-heading); font-weight: 600;">The quick brown fox</span>
|
|
590
|
+
</div>
|
|
591
|
+
<div class="type-sample">
|
|
592
|
+
<span class="type-label">text-xl</span>
|
|
593
|
+
<span class="text-xl" style="font-family: var(--font-heading); font-weight: 600;">The quick brown fox</span>
|
|
594
|
+
</div>
|
|
595
|
+
<div class="type-sample">
|
|
596
|
+
<span class="type-label">text-lg</span>
|
|
597
|
+
<span class="text-lg">The quick brown fox jumps over the lazy dog</span>
|
|
598
|
+
</div>
|
|
599
|
+
<div class="type-sample">
|
|
600
|
+
<span class="type-label">text-base</span>
|
|
601
|
+
<span class="text-base">The quick brown fox jumps over the lazy dog</span>
|
|
602
|
+
</div>
|
|
603
|
+
<div class="type-sample">
|
|
604
|
+
<span class="type-label">text-sm</span>
|
|
605
|
+
<span class="text-sm">The quick brown fox jumps over the lazy dog</span>
|
|
606
|
+
</div>
|
|
607
|
+
<div class="type-sample">
|
|
608
|
+
<span class="type-label">text-xs</span>
|
|
609
|
+
<span class="text-xs">The quick brown fox jumps over the lazy dog</span>
|
|
610
|
+
</div>
|
|
611
|
+
<div class="type-sample">
|
|
612
|
+
<span class="type-label">mono</span>
|
|
613
|
+
<span style="font-family: var(--font-mono); font-size: 14px;">const theme = 'default';</span>
|
|
614
|
+
</div>
|
|
615
|
+
</div>
|
|
616
|
+
</div>
|
|
617
|
+
|
|
618
|
+
<!-- Spacing -->
|
|
619
|
+
<div class="section">
|
|
620
|
+
<h2 class="section-title">Spacing Scale</h2>
|
|
621
|
+
<div class="spacing-grid">
|
|
622
|
+
<div class="spacing-item">
|
|
623
|
+
<div class="spacing-bar" style="width: 4px; height: 40px;"></div>
|
|
624
|
+
<span class="spacing-label">4px</span>
|
|
625
|
+
</div>
|
|
626
|
+
<div class="spacing-item">
|
|
627
|
+
<div class="spacing-bar" style="width: 8px; height: 40px;"></div>
|
|
628
|
+
<span class="spacing-label">8px</span>
|
|
629
|
+
</div>
|
|
630
|
+
<div class="spacing-item">
|
|
631
|
+
<div class="spacing-bar" style="width: 12px; height: 40px;"></div>
|
|
632
|
+
<span class="spacing-label">12px</span>
|
|
633
|
+
</div>
|
|
634
|
+
<div class="spacing-item">
|
|
635
|
+
<div class="spacing-bar" style="width: 16px; height: 40px;"></div>
|
|
636
|
+
<span class="spacing-label">16px</span>
|
|
637
|
+
</div>
|
|
638
|
+
<div class="spacing-item">
|
|
639
|
+
<div class="spacing-bar" style="width: 24px; height: 40px;"></div>
|
|
640
|
+
<span class="spacing-label">24px</span>
|
|
641
|
+
</div>
|
|
642
|
+
<div class="spacing-item">
|
|
643
|
+
<div class="spacing-bar" style="width: 32px; height: 40px;"></div>
|
|
644
|
+
<span class="spacing-label">32px</span>
|
|
645
|
+
</div>
|
|
646
|
+
<div class="spacing-item">
|
|
647
|
+
<div class="spacing-bar" style="width: 48px; height: 40px;"></div>
|
|
648
|
+
<span class="spacing-label">48px</span>
|
|
649
|
+
</div>
|
|
650
|
+
<div class="spacing-item">
|
|
651
|
+
<div class="spacing-bar" style="width: 64px; height: 40px;"></div>
|
|
652
|
+
<span class="spacing-label">64px</span>
|
|
653
|
+
</div>
|
|
654
|
+
</div>
|
|
655
|
+
</div>
|
|
656
|
+
|
|
657
|
+
<!-- Border Radius -->
|
|
658
|
+
<div class="section">
|
|
659
|
+
<h2 class="section-title">Border Radius</h2>
|
|
660
|
+
<div class="radius-grid">
|
|
661
|
+
<div class="radius-item">
|
|
662
|
+
<div class="radius-box" style="border-radius: 4px;"></div>
|
|
663
|
+
<span class="radius-label">4px (sm)</span>
|
|
664
|
+
</div>
|
|
665
|
+
<div class="radius-item">
|
|
666
|
+
<div class="radius-box" style="border-radius: 8px;"></div>
|
|
667
|
+
<span class="radius-label">8px (md)</span>
|
|
668
|
+
</div>
|
|
669
|
+
<div class="radius-item">
|
|
670
|
+
<div class="radius-box" style="border-radius: 12px;"></div>
|
|
671
|
+
<span class="radius-label">12px (lg)</span>
|
|
672
|
+
</div>
|
|
673
|
+
<div class="radius-item">
|
|
674
|
+
<div class="radius-box" style="border-radius: 16px;"></div>
|
|
675
|
+
<span class="radius-label">16px (xl)</span>
|
|
676
|
+
</div>
|
|
677
|
+
<div class="radius-item">
|
|
678
|
+
<div class="radius-box" style="border-radius: 9999px;"></div>
|
|
679
|
+
<span class="radius-label">full</span>
|
|
680
|
+
</div>
|
|
681
|
+
</div>
|
|
682
|
+
</div>
|
|
683
|
+
|
|
684
|
+
<!-- Shadows -->
|
|
685
|
+
<div class="section">
|
|
686
|
+
<h2 class="section-title">Shadows</h2>
|
|
687
|
+
<div class="shadow-grid">
|
|
688
|
+
<div class="shadow-item">
|
|
689
|
+
<div class="shadow-box" style="box-shadow: var(--shadow-sm);"></div>
|
|
690
|
+
<span class="shadow-label">shadow-sm</span>
|
|
691
|
+
</div>
|
|
692
|
+
<div class="shadow-item">
|
|
693
|
+
<div class="shadow-box" style="box-shadow: var(--shadow-md);"></div>
|
|
694
|
+
<span class="shadow-label">shadow-md</span>
|
|
695
|
+
</div>
|
|
696
|
+
<div class="shadow-item">
|
|
697
|
+
<div class="shadow-box" style="box-shadow: var(--shadow-lg);"></div>
|
|
698
|
+
<span class="shadow-label">shadow-lg</span>
|
|
699
|
+
</div>
|
|
700
|
+
</div>
|
|
701
|
+
</div>
|
|
702
|
+
|
|
703
|
+
<!-- Components -->
|
|
704
|
+
<div class="section">
|
|
705
|
+
<h2 class="section-title">Components</h2>
|
|
706
|
+
<div class="component-grid">
|
|
707
|
+
<!-- Buttons -->
|
|
708
|
+
<div>
|
|
709
|
+
<h3 style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--color-secondary);">Buttons</h3>
|
|
710
|
+
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
|
|
711
|
+
<button class="btn btn-primary">Primary</button>
|
|
712
|
+
<button class="btn btn-secondary">Secondary</button>
|
|
713
|
+
<button class="btn btn-outline">Outline</button>
|
|
714
|
+
</div>
|
|
715
|
+
</div>
|
|
716
|
+
|
|
717
|
+
<!-- Card -->
|
|
718
|
+
<div>
|
|
719
|
+
<h3 style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--color-secondary);">Card</h3>
|
|
720
|
+
<div class="sample-card">
|
|
721
|
+
<h4 class="sample-card-title">Card Title</h4>
|
|
722
|
+
<p class="sample-card-body">This is a sample card component with the default theme styling applied.</p>
|
|
723
|
+
</div>
|
|
724
|
+
</div>
|
|
725
|
+
|
|
726
|
+
<!-- Input -->
|
|
727
|
+
<div>
|
|
728
|
+
<h3 style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--color-secondary);">Form Input</h3>
|
|
729
|
+
<div class="sample-input">
|
|
730
|
+
<label class="input-label">Email Address</label>
|
|
731
|
+
<input type="email" class="input" placeholder="you@example.com">
|
|
732
|
+
</div>
|
|
733
|
+
</div>
|
|
734
|
+
</div>
|
|
735
|
+
</div>
|
|
736
|
+
</div>
|
|
737
|
+
</body>
|
|
738
|
+
</html>
|
|
@@ -0,0 +1,302 @@
|
|
|
1
|
+
# Design System: Default Theme
|
|
2
|
+
|
|
3
|
+
A clean, neutral design system that serves as the foundation for X-IPE mockups.
|
|
4
|
+
This theme provides a professional baseline suitable for any project type.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Core Tokens
|
|
9
|
+
|
|
10
|
+
### Color Palette
|
|
11
|
+
|
|
12
|
+
#### Primary Colors
|
|
13
|
+
```
|
|
14
|
+
Primary: #0f172a (Slate 900 - Main text, headings)
|
|
15
|
+
Secondary: #475569 (Slate 600 - Secondary text)
|
|
16
|
+
Accent: #10b981 (Emerald 500 - CTAs, highlights)
|
|
17
|
+
Neutral: #e2e8f0 (Slate 200 - Backgrounds, borders)
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
#### Neutral Scale (Slate)
|
|
21
|
+
```
|
|
22
|
+
slate-50: #f8fafc (Lightest background)
|
|
23
|
+
slate-100: #f1f5f9 (Card backgrounds)
|
|
24
|
+
slate-200: #e2e8f0 (Borders, dividers)
|
|
25
|
+
slate-300: #cbd5e1 (Disabled states)
|
|
26
|
+
slate-400: #94a3b8 (Placeholder text)
|
|
27
|
+
slate-500: #64748b (Muted text)
|
|
28
|
+
slate-600: #475569 (Secondary text)
|
|
29
|
+
slate-700: #334155 (Body text)
|
|
30
|
+
slate-800: #1e293b (Headings)
|
|
31
|
+
slate-900: #0f172a (Primary text)
|
|
32
|
+
slate-950: #020617 (Darkest)
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
#### Semantic Colors
|
|
36
|
+
```
|
|
37
|
+
Success: #22c55e (Green 500 - Confirmations)
|
|
38
|
+
Warning: #f59e0b (Amber 500 - Warnings)
|
|
39
|
+
Error: #ef4444 (Red 500 - Errors)
|
|
40
|
+
Info: #3b82f6 (Blue 500 - Information)
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
#### Accent Variants
|
|
44
|
+
```
|
|
45
|
+
accent-light: #d1fae5 (Emerald 100)
|
|
46
|
+
accent-DEFAULT: #10b981 (Emerald 500)
|
|
47
|
+
accent-dark: #059669 (Emerald 600)
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
### Typography
|
|
53
|
+
|
|
54
|
+
#### Font Families
|
|
55
|
+
```css
|
|
56
|
+
--font-heading: 'Inter', system-ui, sans-serif;
|
|
57
|
+
--font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
58
|
+
--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
#### Font Sizes (rem scale)
|
|
62
|
+
```
|
|
63
|
+
text-xs: 0.75rem (12px) - Captions, labels
|
|
64
|
+
text-sm: 0.875rem (14px) - Secondary text
|
|
65
|
+
text-base: 1rem (16px) - Body text
|
|
66
|
+
text-lg: 1.125rem (18px) - Lead text
|
|
67
|
+
text-xl: 1.25rem (20px) - H4
|
|
68
|
+
text-2xl: 1.5rem (24px) - H3
|
|
69
|
+
text-3xl: 1.875rem (30px) - H2
|
|
70
|
+
text-4xl: 2.25rem (36px) - H1
|
|
71
|
+
text-5xl: 3rem (48px) - Hero
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
#### Font Weights
|
|
75
|
+
```
|
|
76
|
+
font-normal: 400 (Body text)
|
|
77
|
+
font-medium: 500 (Emphasis)
|
|
78
|
+
font-semibold: 600 (Headings)
|
|
79
|
+
font-bold: 700 (Strong emphasis)
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
#### Line Heights
|
|
83
|
+
```
|
|
84
|
+
leading-tight: 1.25 (Headings)
|
|
85
|
+
leading-snug: 1.375 (Compact text)
|
|
86
|
+
leading-normal: 1.5 (Body text)
|
|
87
|
+
leading-relaxed: 1.625 (Readable prose)
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
### Spacing
|
|
93
|
+
|
|
94
|
+
#### Base Unit
|
|
95
|
+
4px base unit with 8-step geometric scale.
|
|
96
|
+
|
|
97
|
+
#### Spacing Scale
|
|
98
|
+
```
|
|
99
|
+
space-1: 4px (0.25rem) - Tight gaps
|
|
100
|
+
space-2: 8px (0.5rem) - Small gaps
|
|
101
|
+
space-3: 12px (0.75rem) - Compact padding
|
|
102
|
+
space-4: 16px (1rem) - Standard padding
|
|
103
|
+
space-5: 20px (1.25rem) - Medium gaps
|
|
104
|
+
space-6: 24px (1.5rem) - Section padding
|
|
105
|
+
space-8: 32px (2rem) - Large gaps
|
|
106
|
+
space-10: 40px (2.5rem) - Extra large
|
|
107
|
+
space-12: 48px (3rem) - Section margins
|
|
108
|
+
space-16: 64px (4rem) - Page margins
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
### Border Radius
|
|
114
|
+
|
|
115
|
+
```
|
|
116
|
+
rounded-sm: 4px (Subtle rounding)
|
|
117
|
+
rounded-md: 8px (Standard rounding)
|
|
118
|
+
rounded-lg: 12px (Card corners)
|
|
119
|
+
rounded-xl: 16px (Large elements)
|
|
120
|
+
rounded-2xl: 24px (Modals, panels)
|
|
121
|
+
rounded-full: 9999px (Pills, avatars)
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
### Shadows
|
|
127
|
+
|
|
128
|
+
```css
|
|
129
|
+
/* Small - Subtle elevation */
|
|
130
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
131
|
+
|
|
132
|
+
/* Medium - Cards, dropdowns */
|
|
133
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
|
|
134
|
+
0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
135
|
+
|
|
136
|
+
/* Large - Modals, popovers */
|
|
137
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
|
|
138
|
+
0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
139
|
+
|
|
140
|
+
/* XL - Floating elements */
|
|
141
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
|
|
142
|
+
0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
## Component Specs
|
|
148
|
+
|
|
149
|
+
### Buttons
|
|
150
|
+
|
|
151
|
+
#### Primary Button
|
|
152
|
+
```css
|
|
153
|
+
.btn-primary {
|
|
154
|
+
background: #10b981;
|
|
155
|
+
color: #ffffff;
|
|
156
|
+
padding: 12px 24px;
|
|
157
|
+
border-radius: 8px;
|
|
158
|
+
font-weight: 600;
|
|
159
|
+
font-size: 14px;
|
|
160
|
+
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
161
|
+
}
|
|
162
|
+
.btn-primary:hover {
|
|
163
|
+
background: #059669;
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
#### Secondary Button
|
|
168
|
+
```css
|
|
169
|
+
.btn-secondary {
|
|
170
|
+
background: #f1f5f9;
|
|
171
|
+
color: #334155;
|
|
172
|
+
border: 1px solid #e2e8f0;
|
|
173
|
+
padding: 12px 24px;
|
|
174
|
+
border-radius: 8px;
|
|
175
|
+
font-weight: 500;
|
|
176
|
+
}
|
|
177
|
+
.btn-secondary:hover {
|
|
178
|
+
background: #e2e8f0;
|
|
179
|
+
}
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
### Cards
|
|
183
|
+
|
|
184
|
+
```css
|
|
185
|
+
.card {
|
|
186
|
+
background: #ffffff;
|
|
187
|
+
border: 1px solid #e2e8f0;
|
|
188
|
+
border-radius: 12px;
|
|
189
|
+
padding: 24px;
|
|
190
|
+
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
191
|
+
}
|
|
192
|
+
.card-title {
|
|
193
|
+
font-size: 18px;
|
|
194
|
+
font-weight: 600;
|
|
195
|
+
color: #0f172a;
|
|
196
|
+
margin-bottom: 8px;
|
|
197
|
+
}
|
|
198
|
+
.card-body {
|
|
199
|
+
font-size: 14px;
|
|
200
|
+
color: #475569;
|
|
201
|
+
line-height: 1.5;
|
|
202
|
+
}
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
### Form Inputs
|
|
206
|
+
|
|
207
|
+
```css
|
|
208
|
+
.input {
|
|
209
|
+
background: #ffffff;
|
|
210
|
+
border: 1px solid #e2e8f0;
|
|
211
|
+
border-radius: 8px;
|
|
212
|
+
padding: 12px 16px;
|
|
213
|
+
font-size: 14px;
|
|
214
|
+
color: #0f172a;
|
|
215
|
+
width: 100%;
|
|
216
|
+
}
|
|
217
|
+
.input:focus {
|
|
218
|
+
border-color: #10b981;
|
|
219
|
+
outline: none;
|
|
220
|
+
box-shadow: 0 0 0 3px rgb(16 185 129 / 0.15);
|
|
221
|
+
}
|
|
222
|
+
.input::placeholder {
|
|
223
|
+
color: #94a3b8;
|
|
224
|
+
}
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
---
|
|
228
|
+
|
|
229
|
+
## Usage Guidelines
|
|
230
|
+
|
|
231
|
+
### Accessibility
|
|
232
|
+
|
|
233
|
+
- Maintain minimum 4.5:1 contrast ratio for body text
|
|
234
|
+
- Use 3:1 contrast for large text (18px+ or 14px bold)
|
|
235
|
+
- Primary (#0f172a) on white: 15.98:1 ✓
|
|
236
|
+
- Secondary (#475569) on white: 5.91:1 ✓
|
|
237
|
+
- Accent (#10b981) on white: 3.03:1 (use for large text/graphics only)
|
|
238
|
+
|
|
239
|
+
### Best Practices
|
|
240
|
+
|
|
241
|
+
1. **Color Usage**
|
|
242
|
+
- Use primary for main headings and important text
|
|
243
|
+
- Use secondary for body text and descriptions
|
|
244
|
+
- Reserve accent for CTAs, links, and interactive elements
|
|
245
|
+
- Use semantic colors consistently (green=success, red=error)
|
|
246
|
+
|
|
247
|
+
2. **Typography**
|
|
248
|
+
- Limit to 2-3 font sizes per component
|
|
249
|
+
- Use Inter for headings, system fonts for body (faster loading)
|
|
250
|
+
- Maintain readable line lengths (45-75 characters)
|
|
251
|
+
|
|
252
|
+
3. **Spacing**
|
|
253
|
+
- Use 8px increments for consistency
|
|
254
|
+
- Apply consistent padding within components
|
|
255
|
+
- Increase spacing for visual hierarchy between sections
|
|
256
|
+
|
|
257
|
+
4. **Components**
|
|
258
|
+
- Round corners consistently (8px for buttons, 12px for cards)
|
|
259
|
+
- Use subtle shadows for elevation, not heavy borders
|
|
260
|
+
- Ensure interactive elements have clear hover/focus states
|
|
261
|
+
|
|
262
|
+
---
|
|
263
|
+
|
|
264
|
+
## CSS Variables
|
|
265
|
+
|
|
266
|
+
```css
|
|
267
|
+
:root {
|
|
268
|
+
/* Colors */
|
|
269
|
+
--color-primary: #0f172a;
|
|
270
|
+
--color-secondary: #475569;
|
|
271
|
+
--color-accent: #10b981;
|
|
272
|
+
--color-neutral: #e2e8f0;
|
|
273
|
+
--color-success: #22c55e;
|
|
274
|
+
--color-warning: #f59e0b;
|
|
275
|
+
--color-error: #ef4444;
|
|
276
|
+
--color-info: #3b82f6;
|
|
277
|
+
|
|
278
|
+
/* Typography */
|
|
279
|
+
--font-heading: 'Inter', system-ui, sans-serif;
|
|
280
|
+
--font-body: system-ui, -apple-system, sans-serif;
|
|
281
|
+
--font-mono: 'JetBrains Mono', monospace;
|
|
282
|
+
|
|
283
|
+
/* Spacing */
|
|
284
|
+
--space-unit: 4px;
|
|
285
|
+
--space-xs: 4px;
|
|
286
|
+
--space-sm: 8px;
|
|
287
|
+
--space-md: 16px;
|
|
288
|
+
--space-lg: 24px;
|
|
289
|
+
--space-xl: 32px;
|
|
290
|
+
|
|
291
|
+
/* Border Radius */
|
|
292
|
+
--radius-sm: 4px;
|
|
293
|
+
--radius-md: 8px;
|
|
294
|
+
--radius-lg: 12px;
|
|
295
|
+
--radius-full: 9999px;
|
|
296
|
+
|
|
297
|
+
/* Shadows */
|
|
298
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
299
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
300
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
|
301
|
+
}
|
|
302
|
+
```
|
x_ipe/static/js/terminal-v2.js
CHANGED
|
@@ -583,8 +583,8 @@
|
|
|
583
583
|
const instance = this.terminals[targetIndex];
|
|
584
584
|
if (!instance?.socket?.connected) return;
|
|
585
585
|
|
|
586
|
-
// Type 'copilot' then wait and type command
|
|
587
|
-
this._typeWithEffect(instance.socket, 'copilot', () => {
|
|
586
|
+
// Type 'copilot --allow-all-tools' then wait and type command
|
|
587
|
+
this._typeWithEffect(instance.socket, 'copilot --allow-all-tools', () => {
|
|
588
588
|
this._waitForCopilotReady(instance, () => {
|
|
589
589
|
this._typeWithEffect(instance.socket, command, null, pressEnter);
|
|
590
590
|
});
|
x_ipe/static/js/terminal.js
CHANGED
|
@@ -837,7 +837,7 @@
|
|
|
837
837
|
this.setFocus(targetIndex);
|
|
838
838
|
|
|
839
839
|
// Build the command sequence
|
|
840
|
-
const copilotCommand = 'copilot';
|
|
840
|
+
const copilotCommand = 'copilot --allow-all-tools';
|
|
841
841
|
const refineCommand = `refine the idea ${filePath}`;
|
|
842
842
|
|
|
843
843
|
// Send commands with typing simulation
|
|
@@ -874,7 +874,7 @@
|
|
|
874
874
|
this.setFocus(targetIndex);
|
|
875
875
|
|
|
876
876
|
// Build the command sequence
|
|
877
|
-
const copilotCommand = 'copilot';
|
|
877
|
+
const copilotCommand = 'copilot --allow-all-tools';
|
|
878
878
|
|
|
879
879
|
// Send commands with typing simulation
|
|
880
880
|
this._sendWithTypingEffect(targetIndex, copilotCommand, () => {
|
x_ipe/static/js/uiux-feedback.js
CHANGED
|
@@ -1592,7 +1592,7 @@ class UIUXFeedbackManager {
|
|
|
1592
1592
|
|
|
1593
1593
|
// Use terminalManager's sendCopilotPromptCommandNoEnter which:
|
|
1594
1594
|
// 1. Creates terminal if needed
|
|
1595
|
-
// 2. Types 'copilot' and presses Enter
|
|
1595
|
+
// 2. Types 'copilot --allow-all-tools' and presses Enter
|
|
1596
1596
|
// 3. Waits for Copilot CLI to be ready
|
|
1597
1597
|
// 4. Types the command WITHOUT pressing Enter (user can review/edit)
|
|
1598
1598
|
if (window.terminalManager && window.terminalManager.sendCopilotPromptCommandNoEnter) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
Metadata-Version: 2.4
|
|
2
2
|
Name: x-ipe
|
|
3
|
-
Version: 1.0.
|
|
3
|
+
Version: 1.0.19
|
|
4
4
|
Summary: X-IPE: AI-powered development framework
|
|
5
5
|
License-File: LICENSE
|
|
6
6
|
Requires-Python: >=3.12
|
|
@@ -12,6 +12,7 @@ Requires-Dist: flask-socketio>=5.6.0
|
|
|
12
12
|
Requires-Dist: flask>=3.1.2
|
|
13
13
|
Requires-Dist: gevent-websocket>=0.10.1
|
|
14
14
|
Requires-Dist: gevent>=25.9.1
|
|
15
|
+
Requires-Dist: pillow>=12.1.0
|
|
15
16
|
Requires-Dist: ptyprocess>=0.7.0
|
|
16
17
|
Requires-Dist: python-socketio>=5.16.0
|
|
17
18
|
Requires-Dist: pyyaml>=6.0.3
|
|
@@ -4,12 +4,12 @@ x_ipe/app.py,sha256=EkOYKxF-nKnRG2ev6tC-Fw5EHikWJyVxO7hfLAouJPE,5262
|
|
|
4
4
|
x_ipe/app.py.bak,sha256=WRuPkrHkS77BAMFYV5uVS2Xl2-QDwQE0KdgTyJHxMpk,45732
|
|
5
5
|
x_ipe/config.py,sha256=NYLhpfhxVMZETHW2SNej3sVoUutuPzTGrQTsJTuie80,1685
|
|
6
6
|
x_ipe/cli/__init__.py,sha256=yAg0J4ULFDPnVbtFOORPAcWT_SwjW4CK9bNDd-c2xPg,80
|
|
7
|
-
x_ipe/cli/main.py,sha256=
|
|
7
|
+
x_ipe/cli/main.py,sha256=ZX0zNh5k2dV897K3YWD_OJcKABkGR4zLX2CQuU6gpCw,14788
|
|
8
8
|
x_ipe/core/__init__.py,sha256=aB6UCmjC3QRrJfHPTV0uBqGHnnnQncX6rl4i6PKI5oo,556
|
|
9
9
|
x_ipe/core/config.py,sha256=9JmWcVqBvfcqwkWnfx4WvmSi65JVnfhERE5w6pBZSRI,5590
|
|
10
10
|
x_ipe/core/hashing.py,sha256=brF5W8fHZVxADkRqztoBg9yNkN8PpbLI7WWrsRY54Zg,3573
|
|
11
11
|
x_ipe/core/paths.py,sha256=bTXouYy0-_k7A1mNaRg2MLWnfDuzZesPlsY9Rg6nMOo,2562
|
|
12
|
-
x_ipe/core/scaffold.py,sha256
|
|
12
|
+
x_ipe/core/scaffold.py,sha256=-Jw6jI6oMcwWJ5JMB2iENXxK2ywDhAsx-ADjrd6K2Lo,14337
|
|
13
13
|
x_ipe/core/skills.py,sha256=sZSk-eDLYxvpa9J1a7HIv3xuwrDLinvL7tLIcmTXixc,8535
|
|
14
14
|
x_ipe/handlers/__init__.py,sha256=asR3VNYqVYbOowET6Nxn82S7hM52ySEuCmqAaKaZ78E,359
|
|
15
15
|
x_ipe/handlers/terminal_handlers.py,sha256=1vc34FAdaBL2J_wi3BSlGKw6HmWADXf83O-ECTO8Ov0,4463
|
|
@@ -19,6 +19,8 @@ x_ipe/resources/config/copilot-prompt.json,sha256=R6aG7x63Kw_YHIZgs0QVNMA1w4DBY8
|
|
|
19
19
|
x_ipe/resources/config/tools.json,sha256=WilFs7YfsbPEhml10ksFcba61F1OU-iMqYocogqTefE,595
|
|
20
20
|
x_ipe/resources/planning/features.md,sha256=NhWPI3eeC7EN5yqWwR-7pKbLrbBJ5JVKDtWoiYOOiAY,981
|
|
21
21
|
x_ipe/resources/planning/task-board.md,sha256=y_TZ7SZxCZCRUTs-g04BWewSb3CnX_lXY3UP7_5vkF4,2028
|
|
22
|
+
x_ipe/resources/themes/theme-default/component-visualization.html,sha256=0Ykm6QxVsEyk4Xpt7uNggZnqD1UxAR0vN3qtLbb3OLk,27908
|
|
23
|
+
x_ipe/resources/themes/theme-default/design-system.md,sha256=L34LZACOYoIng_lXcKI2FdkKeJfJ-RVh8j_9xPMsyyU,6774
|
|
22
24
|
x_ipe/routes/__init__.py,sha256=nDrWR3a9cOaLQnFzAk3__JHO9n8o_GxSR6x2RXzHZWo,405
|
|
23
25
|
x_ipe/routes/ideas_routes.py,sha256=QNqD8OBPKhO33uitRPHLQ4xCAL4ozIXkSm3nSHNLywM,7599
|
|
24
26
|
x_ipe/routes/main_routes.py,sha256=U_HY_JQtlG30hIqnfna55DoqVEJxkrHJKbeSg4pjo7M,5959
|
|
@@ -72,9 +74,9 @@ x_ipe/static/css/uiux-feedback.css,sha256=bQMbBvRDBw47MAE-DvJJMyviFQFTatYuEyIXoo
|
|
|
72
74
|
x_ipe/static/css/workplace.css,sha256=4fjyTzdCKej38354Y9FS7DUpGuQPCczLn2W1aoptFhc,18892
|
|
73
75
|
x_ipe/static/css/features/stage-toolbox.css,sha256=skJSGyvFizQEJeZEKADdO-FgdLOxoD0lfyR8Ve2zKSE,11282
|
|
74
76
|
x_ipe/static/js/init.js,sha256=r36q709OPRLYHa0hfKeUzM4ZTTUoTZ-jNRH24CzbMSM,9190
|
|
75
|
-
x_ipe/static/js/terminal-v2.js,sha256=
|
|
76
|
-
x_ipe/static/js/terminal.js,sha256=
|
|
77
|
-
x_ipe/static/js/uiux-feedback.js,sha256=
|
|
77
|
+
x_ipe/static/js/terminal-v2.js,sha256=zlxO1iKLtTR7jFsfhwE_cHcyQZ7dqo3tikY7-0iJ6GY,34610
|
|
78
|
+
x_ipe/static/js/terminal.js,sha256=oVMsI6B1cGO6yj1lBSE-LTSB_4FrxktDGbW1XzEh_ic,45845
|
|
79
|
+
x_ipe/static/js/uiux-feedback.js,sha256=3_2y5ksuc3bAi17A2v38Y1L0km1m3JCe5cJUG3aSUew,59508
|
|
78
80
|
x_ipe/static/js/core/content-renderer.js,sha256=y0SK58Sp4kcxxnnYf5CKtzCG8fX-p458vePRLg3URA8,12218
|
|
79
81
|
x_ipe/static/js/features/content-editor.js,sha256=gT3Z8amTLhw9EafJdiu_0HoYhDxxbjFxR-obDWeq2R4,9964
|
|
80
82
|
x_ipe/static/js/features/live-refresh.js,sha256=YkFOUXMZrfUioFa7N_TlmEXqnuuDqdQsvDX-n6jrkmI,11140
|
|
@@ -1238,8 +1240,8 @@ x_ipe/resources/skills/x-ipe-skill-creator/templates/references/examples.md,sha2
|
|
|
1238
1240
|
x_ipe/resources/skills/xlsx/LICENSE.txt,sha256=efbY9bQnJS-jscEezb22v2ELlE91MLTeePdw84dBz6o,1467
|
|
1239
1241
|
x_ipe/resources/skills/xlsx/SKILL.md,sha256=AgzNtZMiV7ZsY47BFX6iSNV_pSyMAfH2i1WbWXDH3zU,10632
|
|
1240
1242
|
x_ipe/resources/skills/xlsx/recalc.py,sha256=qx7wyUU2uyO2xqPTJ2mwQB7DzIXnPCR9V03YTsc68V0,6408
|
|
1241
|
-
x_ipe-1.0.
|
|
1242
|
-
x_ipe-1.0.
|
|
1243
|
-
x_ipe-1.0.
|
|
1244
|
-
x_ipe-1.0.
|
|
1245
|
-
x_ipe-1.0.
|
|
1243
|
+
x_ipe-1.0.19.dist-info/METADATA,sha256=dLATENpbAnlU4_JMD_N82OphD1-enFXv1fDRQaDiDiw,637
|
|
1244
|
+
x_ipe-1.0.19.dist-info/WHEEL,sha256=WLgqFyCfm_KASv4WHyYy0P3pM_m7J5L9k2skdKLirC8,87
|
|
1245
|
+
x_ipe-1.0.19.dist-info/entry_points.txt,sha256=b787rsvZAIjLgjBzB87D_BE8yu6DCqBqv9zv4F6_j6M,41
|
|
1246
|
+
x_ipe-1.0.19.dist-info/licenses/LICENSE,sha256=8lS-M88bBvSI9_8kauYvQRu03WEMnj1Q5KoxOFKFnhc,1062
|
|
1247
|
+
x_ipe-1.0.19.dist-info/RECORD,,
|
|
File without changes
|
|
File without changes
|
|
File without changes
|