1// Color and Contrast skill demos
 2export default {
 3  id: 'color-and-contrast',
 4  tabs: [
 5    {
 6      id: 'palette',
 7      label: 'Color Harmony',
 8      caption: 'Clashing colors vs harmonious palette',
 9      beforeClass: 'color-demo color-palette-before',
10      afterClass: 'color-demo color-palette-after',
11      before: `
12        <div class="color-demo color-palette-before">
13          <div class="color-swatch swatch-1"></div>
14          <div class="color-swatch swatch-2"></div>
15          <div class="color-swatch swatch-3"></div>
16          <div class="color-swatch swatch-4"></div>
17          <div class="color-swatch swatch-5"></div>
18          <div class="color-card">
19            <span class="card-title">Title</span>
20            <span class="card-subtitle">Subtitle</span>
21            <button class="card-btn">Action</button>
22          </div>
23        </div>
24      `,
25      after: null // Uses CSS class toggle
26    },
27    {
28      id: 'accent',
29      label: 'Strategic Accent',
30      caption: 'Monochrome monotony vs strategic accent',
31      beforeClass: 'color-demo color-accent-before',
32      afterClass: 'color-demo color-accent-after',
33      before: `
34        <div class="color-demo color-accent-before">
35          <div class="color-accent-card">
36            <div class="color-accent-title">Premium Plan</div>
37            <div class="color-accent-text">Unlock all features and get priority support.</div>
38            <button class="color-accent-btn">Upgrade Now</button>
39          </div>
40        </div>
41      `,
42      after: null // Uses CSS class toggle
43    },
44    {
45      id: 'contrast',
46      label: 'Contrast Ratios',
47      caption: 'Accessibility failures vs WCAG compliance',
48      hasToggle: false, // Static comparison
49      before: `
50        <div class="color-demo color-contrast-static">
51          <div class="contrast-example contrast-fail">
52            <span class="contrast-badge">Fails WCAG</span>
53            <div class="contrast-text">Hard to Read</div>
54            <div class="contrast-ratio">2.5:1</div>
55          </div>
56          <div class="contrast-example contrast-pass">
57            <span class="contrast-badge">Passes AAA</span>
58            <div class="contrast-text">Easy to Read</div>
59            <div class="contrast-ratio">12.6:1</div>
60          </div>
61        </div>
62      `
63    }
64  ]
65};
66
67
68