1// Colorize command demo - shows monochrome becoming strategically colored
2export default {
3 id: 'colorize',
4 caption: 'Monochrome UI → Strategic, harmonious color',
5
6 before: `
7 <div style="width: 100%; max-width: 240px; padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 6px;">
8 <div style="font-size: 11px; color: #999; margin-bottom: 12px;">TASK OVERVIEW</div>
9 <div style="display: flex; flex-direction: column; gap: 8px;">
10 <div style="display: flex; align-items: center; gap: 8px; padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px;">
11 <div style="width: 8px; height: 8px; background: #ccc; border-radius: 2px;"></div>
12 <span style="font-size: 12px; color: #666;">Design review</span>
13 </div>
14 <div style="display: flex; align-items: center; gap: 8px; padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px;">
15 <div style="width: 8px; height: 8px; background: #ccc; border-radius: 2px;"></div>
16 <span style="font-size: 12px; color: #666;">Update copy</span>
17 </div>
18 <div style="display: flex; align-items: center; gap: 8px; padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px;">
19 <div style="width: 8px; height: 8px; background: #ccc; border-radius: 2px;"></div>
20 <span style="font-size: 12px; color: #666;">Final QA</span>
21 </div>
22 </div>
23 <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid #e0e0e0;">
24 <div style="font-size: 11px; color: #999;">Progress: 1 of 3</div>
25 </div>
26 </div>
27 `,
28
29 after: `
30 <div style="width: 100%; max-width: 240px; padding: 16px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 8px;">
31 <div style="font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--color-ash); margin-bottom: 12px;">TASK OVERVIEW</div>
32 <div style="display: flex; flex-direction: column; gap: 8px;">
33 <div style="display: flex; align-items: center; gap: 10px; padding: 10px; background: color-mix(in oklch, var(--color-accent) 8%, var(--color-paper)); border: 1px solid color-mix(in oklch, var(--color-accent) 20%, var(--color-paper)); border-radius: 6px;">
34 <div style="width: 18px; height: 18px; background: var(--color-accent); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px;">✓</div>
35 <span style="font-size: 0.8125rem; color: var(--color-ink); text-decoration: line-through; opacity: 0.6;">Design review</span>
36 </div>
37 <div style="display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--color-paper); border: 2px solid var(--color-accent); border-radius: 6px;">
38 <div style="width: 18px; height: 18px; border: 2px solid var(--color-accent); border-radius: 4px; background: white;"></div>
39 <span style="font-size: 0.8125rem; color: var(--color-ink); font-weight: 500;">Update copy</span>
40 </div>
41 <div style="display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
42 <div style="width: 18px; height: 18px; border: 1px solid var(--color-mist); border-radius: 4px; background: white;"></div>
43 <span style="font-size: 0.8125rem; color: var(--color-ash);">Final QA</span>
44 </div>
45 </div>
46 <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-mist);">
47 <div style="display: flex; align-items: center; gap: 8px;">
48 <div style="flex: 1; height: 4px; background: var(--color-mist); border-radius: 2px; overflow: hidden;">
49 <div style="width: 33%; height: 100%; background: var(--color-accent);"></div>
50 </div>
51 <span style="font-size: 0.6875rem; color: var(--color-accent); font-weight: 500;">1/3</span>
52 </div>
53 </div>
54 </div>
55 `
56};