1// Extract command demo - shows patterns being identified and documented
2export default {
3 id: 'extract',
4 caption: 'Scattered styles → Documented design tokens',
5
6 before: `
7 <div style="width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 6px; font-family: monospace; font-size: 11px;">
8 <div style="padding: 8px; background: #1e1e1e; color: #d4d4d4; border-radius: 4px; overflow: hidden;">
9 <span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">12px 16px</span><span style="color: #d4d4d4;">;</span>
10 </div>
11 <div style="padding: 8px; background: #1e1e1e; color: #d4d4d4; border-radius: 4px; overflow: hidden;">
12 <span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">18px 24px</span><span style="color: #d4d4d4;">;</span>
13 </div>
14 <div style="padding: 8px; background: #1e1e1e; color: #d4d4d4; border-radius: 4px; overflow: hidden;">
15 <span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#3b82f6</span><span style="color: #d4d4d4;">;</span>
16 </div>
17 <div style="padding: 8px; background: #1e1e1e; color: #d4d4d4; border-radius: 4px; overflow: hidden;">
18 <span style="color: #9cdcfe;">color</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">#3a80f5</span><span style="color: #d4d4d4;">;</span>
19 </div>
20 <div style="padding: 8px; background: #1e1e1e; color: #d4d4d4; border-radius: 4px; overflow: hidden;">
21 <span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">14px</span><span style="color: #d4d4d4;">;</span>
22 </div>
23 </div>
24 `,
25
26 after: `
27 <div style="width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 8px;">
28 <div style="font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ash); margin-bottom: 4px;">Design Tokens</div>
29 <div style="padding: 10px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
30 <div style="font-size: 10px; color: var(--color-ash); margin-bottom: 6px;">SPACING</div>
31 <div style="display: flex; gap: 8px;">
32 <div style="text-align: center;">
33 <div style="width: 24px; height: 8px; background: var(--color-accent); border-radius: 2px; margin-bottom: 4px;"></div>
34 <span style="font-family: monospace; font-size: 9px; color: var(--color-charcoal);">sm</span>
35 </div>
36 <div style="text-align: center;">
37 <div style="width: 32px; height: 8px; background: var(--color-accent); border-radius: 2px; margin-bottom: 4px;"></div>
38 <span style="font-family: monospace; font-size: 9px; color: var(--color-charcoal);">md</span>
39 </div>
40 <div style="text-align: center;">
41 <div style="width: 48px; height: 8px; background: var(--color-accent); border-radius: 2px; margin-bottom: 4px;"></div>
42 <span style="font-family: monospace; font-size: 9px; color: var(--color-charcoal);">lg</span>
43 </div>
44 </div>
45 </div>
46 <div style="padding: 10px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
47 <div style="font-size: 10px; color: var(--color-ash); margin-bottom: 6px;">COLORS</div>
48 <div style="display: flex; gap: 6px;">
49 <div style="width: 24px; height: 24px; background: var(--color-ink); border-radius: 4px;" title="ink"></div>
50 <div style="width: 24px; height: 24px; background: var(--color-charcoal); border-radius: 4px;" title="charcoal"></div>
51 <div style="width: 24px; height: 24px; background: var(--color-accent); border-radius: 4px;" title="accent"></div>
52 <div style="width: 24px; height: 24px; background: var(--color-mist); border-radius: 4px; border: 1px solid var(--color-ash);" title="mist"></div>
53 </div>
54 </div>
55 <div style="padding: 10px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
56 <div style="font-size: 10px; color: var(--color-ash); margin-bottom: 6px;">TYPOGRAPHY</div>
57 <div style="font-family: var(--font-display); font-size: 16px; font-style: italic; color: var(--color-ink);">Display</div>
58 <div style="font-size: 12px; color: var(--color-charcoal);">Body text</div>
59 </div>
60 </div>
61 `
62};