@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/AccessibilityPanel.tsx

@@ -11,7 +11,7 @@
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import type { Result, NodeResult, ImpactValue, RunOptions } from "axe-core";
-import clsx from "clsx";
+import { Badge, Tabs, Dialog, Card, Alert, Text, Stack, Box, Button, Chip, EmptyState } from "@fragments/ui";
 import { BRAND } from "../../core/index.js";
 import {
   updateComponentA11yResult,
@@ -84,6 +84,13 @@ const IMPACT_ORDER: Record<string, number> = {
   minor: 3,
 };
 
+// WCAG level color mapping
+const WCAG_LEVEL_COLORS: Record<string, { bg: string; color: string }> = {
+  A: { bg: 'var(--color-success-bg)', color: 'var(--color-success)' },
+  AA: { bg: 'var(--color-info-bg)', color: 'var(--color-info)' },
+  AAA: { bg: 'var(--color-accent-subtle)', color: 'var(--color-accent)' },
+};
+
 // Cache the axe-core module to avoid repeated dynamic imports
 let axeModule: typeof import("axe-core") | null = null;
 
@@ -574,112 +581,102 @@ export function AccessibilityPanel({
   // Render loading state
   if (isScanning && !results) {
     return (
-      <div className="flex flex-col items-center justify-center p-8 text-tertiary">
-        <LoadingIcon className="w-6 h-6 animate-spin mb-2" />
-        <span className="text-xs">Running accessibility checks...</span>
-      </div>
+      <Stack align="center" justify="center" style={{ padding: 32 }}>
+        <LoadingIcon style={{ width: 24, height: 24, animation: 'spin 1s linear infinite', marginBottom: 8 }} />
+        <Text size="xs" color="tertiary">Running accessibility checks...</Text>
+      </Stack>
     );
   }
 
   // Render error state
   if (error) {
     return (
-      <div className="flex flex-col items-center justify-center p-8">
-        <XIcon className="w-6 h-6 text-red-500 mb-2" />
-        <span className="text-xs text-red-600 mb-2">{error}</span>
-        <button
-          onClick={runScan}
-          className="text-xs text-[--color-accent] hover:underline"
-        >
-          Retry Scan
-        </button>
-      </div>
+      <Stack align="center" justify="center" style={{ padding: 32 }}>
+        <XIcon style={{ width: 24, height: 24, color: 'var(--color-danger)', marginBottom: 8 }} />
+        <Text size="xs" color="secondary" style={{ color: 'var(--color-danger)', marginBottom: 8 }}>{error}</Text>
+        <Button variant="ghost" size="sm" onClick={runScan}>Retry Scan</Button>
+      </Stack>
     );
   }
 
   // Render no results state
   if (!results) {
     return (
-      <div className="flex flex-col items-center justify-center p-8 text-tertiary">
-        <AccessibilityIcon className="w-8 h-8 mb-2 opacity-50" />
-        <span className="text-xs mb-2">No accessibility scan results</span>
-        <button
-          onClick={runScan}
-          className="text-xs px-3 py-1 rounded bg-[--color-accent] text-white hover:opacity-90"
-        >
-          Run Scan
-        </button>
-      </div>
+      <Stack align="center" justify="center" style={{ padding: 32 }}>
+        <AccessibilityIcon style={{ width: 32, height: 32, marginBottom: 8, opacity: 0.5, color: 'var(--text-tertiary)' }} />
+        <Text size="xs" color="tertiary" style={{ marginBottom: 8 }}>No accessibility scan results</Text>
+        <Button size="sm" onClick={runScan}>Run Scan</Button>
+      </Stack>
     );
   }
 
   return (
-    <div className="flex flex-col h-full overflow-hidden">
-      {/* Tabs */}
-      <div className="flex items-center gap-1 px-4 py-2 border-b border-[--border] bg-[--bg-secondary] flex-shrink-0">
-        <TabButton
-          active={activeTab === "violations"}
-          onClick={() => setActiveTab("violations")}
-          count={counts.violations}
-          label="Violations"
-          variant="error"
-        />
-        <TabButton
-          active={activeTab === "passes"}
-          onClick={() => setActiveTab("passes")}
-          count={counts.passes}
-          label="Passes"
-          variant="success"
-        />
-        <TabButton
-          active={activeTab === "incomplete"}
-          onClick={() => setActiveTab("incomplete")}
-          count={counts.incomplete}
-          label="Incomplete"
-          variant="warning"
-        />
-
-        <div className="flex-1" />
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
+      {/* Tabs header with actions */}
+      <Stack direction="row" align="center" gap="xs" style={{
+        padding: '8px 16px',
+        borderBottom: '1px solid var(--border)',
+        background: 'var(--bg-secondary)',
+        flexShrink: 0,
+      }}>
+        <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as TabType)}>
+          <Tabs.List>
+            <Tabs.Tab value="violations">
+              <span style={{ color: 'var(--color-danger)' }}>{counts.violations}</span> Violations
+            </Tabs.Tab>
+            <Tabs.Tab value="passes">
+              <span style={{ color: 'var(--color-success)' }}>{counts.passes}</span> Passes
+            </Tabs.Tab>
+            <Tabs.Tab value="incomplete">
+              <span style={{ color: 'var(--color-warning)' }}>{counts.incomplete}</span> Incomplete
+            </Tabs.Tab>
+          </Tabs.List>
+        </Tabs>
+
+        <div style={{ flex: 1 }} />
 
         {/* Re-scanning indicator */}
         {isReScanning && (
-          <span className="flex items-center gap-1 px-2 py-1 text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30 rounded animate-pulse">
-            <LoadingIcon className="w-3 h-3 animate-spin" />
-            Re-scanning...
-          </span>
+          <Badge variant="warning" size="sm">
+            <Stack direction="row" align="center" gap="xs">
+              <LoadingIcon style={{ width: 12, height: 12, animation: 'spin 1s linear infinite' }} />
+              Re-scanning...
+            </Stack>
+          </Badge>
         )}
 
         {/* Rescan button */}
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
           onClick={runScan}
           disabled={isScanning}
-          className="flex items-center gap-1 px-2 py-1 text-xs text-tertiary hover:text-primary hover:bg-[--bg-hover] rounded disabled:opacity-50"
           title="Re-run accessibility scan"
         >
           <LoadingIcon
-            className={clsx("w-3 h-3", isScanning && "animate-spin")}
+            style={{
+              width: 12,
+              height: 12,
+              ...(isScanning ? { animation: 'spin 1s linear infinite' } : {}),
+            }}
           />
           {isScanning ? "Scanning..." : "Rescan"}
-        </button>
+        </Button>
 
         {/* AI Setup button */}
-        <button
+        <Button
+          variant={aiConfig ? "secondary" : "ghost"}
+          size="sm"
           onClick={() => setShowAISetup(true)}
-          className={clsx(
-            "flex items-center gap-1 px-2 py-1 text-xs rounded",
-            aiConfig
-              ? "text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-950/30"
-              : "text-tertiary hover:text-primary hover:bg-[--bg-hover]"
-          )}
           title={aiConfig ? "AI fixes enabled" : "Configure AI for fix suggestions"}
         >
-          <WandIcon className="w-3 h-3" />
+          <WandIcon style={{ width: 12, height: 12 }} />
           {aiConfig ? "AI Ready" : "Setup AI"}
-        </button>
-      </div>
+        </Button>
+      </Stack>
 
       {/* Content */}
-      <div className="flex-1 overflow-y-auto p-4">
+      <div style={{ flex: 1, overflowY: 'auto', padding: 16 }}>
         {activeTab === "violations" && (
           <>
             {counts.violations === 0 ? (
@@ -738,51 +735,22 @@ export function AccessibilityPanel({
         )}
       </div>
 
-      {/* AI Setup Modal */}
-      {showAISetup && (
-        <AISetupModal
-          onSave={saveAIConfig}
-          onClose={() => setShowAISetup(false)}
-          currentConfig={aiConfig}
-        />
-      )}
+      {/* AI Setup Dialog */}
+      <Dialog open={showAISetup} onOpenChange={(open) => !open && setShowAISetup(false)}>
+        <Dialog.Content>
+          <AISetupModalContent
+            onSave={saveAIConfig}
+            onClose={() => setShowAISetup(false)}
+            currentConfig={aiConfig}
+          />
+        </Dialog.Content>
+      </Dialog>
     </div>
   );
 }
 
 // ----- Sub-components -----
 
-interface TabButtonProps {
-  active: boolean;
-  onClick: () => void;
-  count: number;
-  label: string;
-  variant: "error" | "success" | "warning";
-}
-
-function TabButton({ active, onClick, count, label, variant }: TabButtonProps) {
-  const variantStyles = {
-    error: "text-red-600 dark:text-red-400",
-    success: "text-green-600 dark:text-green-400",
-    warning: "text-amber-600 dark:text-amber-400",
-  };
-
-  return (
-    <button
-      onClick={onClick}
-      className={clsx(
-        "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded transition-colors",
-        active
-          ? "text-primary bg-[--bg-hover]"
-          : "text-tertiary hover:text-secondary"
-      )}
-    >
-      <span className={variantStyles[variant]}>{count}</span>
-      <span>{label}</span>
-    </button>
-  );
-}
-
 interface EnhancedRuleListProps {
   rules: Result[];
   expandedRules: Set<string>;
@@ -812,7 +780,7 @@ function EnhancedRuleList({
   copiedFix,
 }: EnhancedRuleListProps) {
   return (
-    <div className="space-y-3">
+    <Stack gap="md">
       {rules.map((rule) => {
         const isExpanded = expandedRules.has(rule.id);
         const impactColors = getImpactColorClass(rule.impact || null);
@@ -820,140 +788,170 @@ function EnhancedRuleList({
         const wcagTags = extractWcagTags(rule.tags);
 
         return (
-          <div
-            key={rule.id}
-            className={clsx(
-              "rounded-lg border border-[--border] overflow-hidden border-l-4",
-              impactColors.borderLeft
-            )}
-          >
+          <Card key={rule.id} style={{ borderLeft: `4px solid ${impactColors.borderLeft}` }}>
             {/* Rule Header */}
             <button
               onClick={() => onToggleRule(rule.id)}
-              className="w-full flex items-center gap-2 px-3 py-2.5 text-left hover:bg-[--bg-hover] transition-colors"
+              style={{
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                padding: '10px 12px',
+                textAlign: 'left',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                transition: 'background var(--transition-fast)',
+              }}
             >
               {isExpanded ? (
-                <ChevronDownIcon className="w-4 h-4 text-tertiary flex-shrink-0" />
+                <ChevronDownIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)', flexShrink: 0 }} />
               ) : (
-                <ChevronRightIcon className="w-4 h-4 text-tertiary flex-shrink-0" />
+                <ChevronRightIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)', flexShrink: 0 }} />
               )}
 
               {/* Impact badge */}
               {rule.impact && (
-                <span
-                  className={clsx(
-                    "text-[10px] font-semibold px-1.5 py-0.5 rounded uppercase tracking-wide",
-                    impactColors.bg,
-                    impactColors.text
-                  )}
-                >
+                <Badge variant={impactColors.variant} size="sm">
                   {rule.impact}
-                </span>
+                </Badge>
               )}
 
               {/* Rule ID */}
-              <span className="text-xs font-mono text-tertiary">
-                {rule.id}
-              </span>
+              <Text font="mono" size="xs" color="tertiary">{rule.id}</Text>
 
               {/* Rule description */}
-              <span className="text-xs text-primary flex-1 truncate">
+              <Text size="xs" style={{
+                flex: 1,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}>
                 {rule.description}
-              </span>
+              </Text>
 
               {/* Element count */}
-              <span className="text-[10px] text-tertiary flex-shrink-0 bg-[--bg-hover] px-1.5 py-0.5 rounded">
+              <Badge size="sm">
                 {rule.nodes.length} element{rule.nodes.length !== 1 ? "s" : ""}
-              </span>
+              </Badge>
             </button>
 
             {/* Expanded content */}
             {isExpanded && (
-              <div className="border-t border-[--border] bg-[--bg-secondary]">
+              <div style={{ borderTop: '1px solid var(--border)', background: 'var(--bg-secondary)' }}>
                 {/* Why it matters + WCAG reference */}
                 {staticFix && (
-                  <div className="px-3 py-3 border-b border-[--border-subtle] space-y-2">
-                    <div>
-                      <p className="text-[10px] font-semibold text-tertiary uppercase tracking-wide mb-1">
-                        Why it matters
-                      </p>
-                      <p className="text-xs text-secondary leading-relaxed">
-                        {staticFix.whyItMatters}
-                      </p>
-                    </div>
-
-                    {/* WCAG criterion */}
-                    {staticFix.wcagCriterion && (
-                      <div className="flex items-center gap-2">
-                        <span className={clsx(
-                          "text-[10px] px-1.5 py-0.5 rounded font-medium",
-                          staticFix.wcagCriterion.level === 'A' && "bg-green-100 dark:bg-green-950/50 text-green-700 dark:text-green-300",
-                          staticFix.wcagCriterion.level === 'AA' && "bg-blue-100 dark:bg-blue-950/50 text-blue-700 dark:text-blue-300",
-                          staticFix.wcagCriterion.level === 'AAA' && "bg-purple-100 dark:bg-purple-950/50 text-purple-700 dark:text-purple-300",
-                        )}>
-                          WCAG {staticFix.wcagCriterion.id} Level {staticFix.wcagCriterion.level}
-                        </span>
-                        <span className="text-xs text-secondary">
-                          {staticFix.wcagCriterion.name}
-                        </span>
-                        <a
-                          href={staticFix.wcagCriterion.url}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-xs text-[--color-accent] hover:underline ml-auto"
-                        >
-                          Learn more
-                        </a>
-                      </div>
-                    )}
+                  <Box padding="sm" style={{ borderBottom: '1px solid var(--border-subtle)' }}>
+                    <Stack gap="sm">
+                      <Alert severity="info">
+                        <Alert.Body>
+                          <Alert.Title>Why it matters</Alert.Title>
+                          <Alert.Content>
+                            <Text size="xs">{staticFix.whyItMatters}</Text>
+                          </Alert.Content>
+                        </Alert.Body>
+                      </Alert>
+
+                      {/* WCAG criterion */}
+                      {staticFix.wcagCriterion && (
+                        <Stack direction="row" align="center" gap="sm">
+                          <Badge size="sm" style={{
+                            background: WCAG_LEVEL_COLORS[staticFix.wcagCriterion.level]?.bg || 'var(--bg-hover)',
+                            color: WCAG_LEVEL_COLORS[staticFix.wcagCriterion.level]?.color || 'var(--text-secondary)',
+                          }}>
+                            WCAG {staticFix.wcagCriterion.id} Level {staticFix.wcagCriterion.level}
+                          </Badge>
+                          <Text size="xs" color="secondary">{staticFix.wcagCriterion.name}</Text>
+                          <a
+                            href={staticFix.wcagCriterion.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{
+                              fontSize: 12,
+                              color: 'var(--color-accent)',
+                              marginLeft: 'auto',
+                              textDecoration: 'none',
+                            }}
+                          >
+                            Learn more
+                          </a>
+                        </Stack>
+                      )}
 
-                    {/* Before/After examples */}
-                    {(staticFix.badExample || staticFix.goodExample) && (
-                      <div className="grid grid-cols-2 gap-2 mt-2">
-                        {staticFix.badExample && (
-                          <div>
-                            <p className="text-[10px] font-medium text-red-600 dark:text-red-400 mb-1">
-                              Before
-                            </p>
-                            <pre className="text-[10px] font-mono p-2 rounded bg-red-50 dark:bg-red-950/30 text-red-800 dark:text-red-200 overflow-x-auto whitespace-pre-wrap">
-                              {staticFix.badExample}
-                            </pre>
-                          </div>
-                        )}
-                        {staticFix.goodExample && (
-                          <div>
-                            <p className="text-[10px] font-medium text-green-600 dark:text-green-400 mb-1">
-                              After
-                            </p>
-                            <pre className="text-[10px] font-mono p-2 rounded bg-green-50 dark:bg-green-950/30 text-green-800 dark:text-green-200 overflow-x-auto whitespace-pre-wrap">
-                              {staticFix.goodExample}
-                            </pre>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
+                      {/* Before/After examples */}
+                      {(staticFix.badExample || staticFix.goodExample) && (
+                        <div style={{
+                          display: 'grid',
+                          gridTemplateColumns: '1fr 1fr',
+                          gap: 8,
+                          marginTop: 8,
+                        }}>
+                          {staticFix.badExample && (
+                            <div>
+                              <Text size="xs" weight="medium" style={{ color: 'var(--color-danger)', marginBottom: 4 }}>
+                                Before
+                              </Text>
+                              <pre style={{
+                                fontSize: 10,
+                                fontFamily: 'monospace',
+                                padding: 8,
+                                borderRadius: 'var(--radius-sm)',
+                                background: 'var(--color-danger-bg)',
+                                color: 'var(--color-danger)',
+                                overflowX: 'auto',
+                                whiteSpace: 'pre-wrap',
+                                margin: 0,
+                              }}>
+                                {staticFix.badExample}
+                              </pre>
+                            </div>
+                          )}
+                          {staticFix.goodExample && (
+                            <div>
+                              <Text size="xs" weight="medium" style={{ color: 'var(--color-success)', marginBottom: 4 }}>
+                                After
+                              </Text>
+                              <pre style={{
+                                fontSize: 10,
+                                fontFamily: 'monospace',
+                                padding: 8,
+                                borderRadius: 'var(--radius-sm)',
+                                background: 'var(--color-success-bg)',
+                                color: 'var(--color-success)',
+                                overflowX: 'auto',
+                                whiteSpace: 'pre-wrap',
+                                margin: 0,
+                              }}>
+                                {staticFix.goodExample}
+                              </pre>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </Stack>
+                  </Box>
                 )}
 
                 {/* Help info (fallback if no static fix) */}
                 {!staticFix && (
-                  <div className="px-3 py-2 border-b border-[--border-subtle]">
-                    <p className="text-xs text-secondary mb-1">{rule.help}</p>
+                  <Box padding="sm" style={{ borderBottom: '1px solid var(--border-subtle)' }}>
+                    <Text size="xs" color="secondary" style={{ marginBottom: 4 }}>{rule.help}</Text>
                     {rule.helpUrl && (
                       <a
                         href={rule.helpUrl}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="text-xs text-[--color-accent] hover:underline"
+                        style={{ fontSize: 12, color: 'var(--color-accent)', textDecoration: 'none' }}
                       >
                         Learn more about {rule.id}
                       </a>
                     )}
-                  </div>
+                  </Box>
                 )}
 
                 {/* Affected elements */}
-                <div className="divide-y divide-[--border-subtle]">
+                <div>
                   {rule.nodes.map((node, i) => {
                     const fixKey = `${rule.id}-${node.html}`;
                     const isHighlighted =
@@ -961,135 +959,171 @@ function EnhancedRuleList({
                     const elementFix = generateElementFix(rule.id, node as unknown as SerializedNode);
 
                     return (
-                      <div
+                      <Box
                         key={i}
-                        className={clsx(
-                          "px-3 py-3",
-                          isHighlighted && "bg-red-50 dark:bg-red-950/30"
-                        )}
+                        padding="sm"
+                        style={{
+                          borderTop: i > 0 ? '1px solid var(--border-subtle)' : undefined,
+                          background: isHighlighted ? 'var(--color-danger-bg)' : undefined,
+                        }}
                       >
                         {/* Element selector + actions */}
-                        <div className="flex items-center gap-2 mb-2">
-                          <button
+                        <Stack direction="row" align="center" gap="sm" style={{ marginBottom: 8 }}>
+                          <Button
+                            variant={isHighlighted ? "primary" : "ghost"}
+                            size="sm"
                             onClick={() =>
                               onHighlight(
                                 isHighlighted ? null : node.target.join(", ")
                               )
                             }
-                            className={clsx(
-                              "text-[10px] font-mono px-2 py-1 rounded truncate max-w-[200px] transition-colors",
-                              isHighlighted
-                                ? "bg-red-200 dark:bg-red-800 text-red-800 dark:text-red-200"
-                                : "bg-[--bg-hover] text-secondary hover:text-primary hover:bg-[--bg-tertiary]"
-                            )}
                             title={node.target.join(" > ")}
+                            style={{
+                              fontFamily: 'monospace',
+                              fontSize: 10,
+                              maxWidth: 200,
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'nowrap',
+                            }}
                           >
                             {isHighlighted ? "Hide" : "Highlight"}: {node.target[node.target.length - 1]}
-                          </button>
+                          </Button>
 
                           {aiEnabled && onGenerateFix && (
-                            <button
+                            <Button
+                              variant="ghost"
+                              size="sm"
                               onClick={() => onGenerateFix(rule, node)}
                               disabled={generatingFix === fixKey}
-                              className={clsx(
-                                "flex items-center gap-1 px-2 py-1 text-[10px] rounded transition-colors",
-                                generatingFix === fixKey
-                                  ? "bg-purple-100 dark:bg-purple-950/50 text-purple-600 dark:text-purple-400"
-                                  : "bg-[--bg-hover] text-tertiary hover:text-primary"
-                              )}
                               title="Generate AI fix suggestion"
                             >
                               <WandIcon
-                                className={clsx(
-                                  "w-3 h-3",
-                                  generatingFix === fixKey && "animate-pulse"
-                                )}
+                                style={{
+                                  width: 12,
+                                  height: 12,
+                                  ...(generatingFix === fixKey ? { animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' } : {}),
+                                }}
                               />
                               {generatingFix === fixKey ? "Generating..." : "AI Fix"}
-                            </button>
+                            </Button>
                           )}
-                        </div>
+                        </Stack>
 
                         {/* HTML snippet */}
-                        <pre className="text-[10px] font-mono text-tertiary bg-[--bg-primary] rounded p-2 overflow-x-auto whitespace-pre-wrap border border-[--border-subtle]">
+                        <pre style={{
+                          fontSize: 10,
+                          fontFamily: 'monospace',
+                          color: 'var(--text-tertiary)',
+                          background: 'var(--bg-primary)',
+                          borderRadius: 'var(--radius-sm)',
+                          padding: 8,
+                          overflowX: 'auto',
+                          whiteSpace: 'pre-wrap',
+                          border: '1px solid var(--border-subtle)',
+                          margin: 0,
+                        }}>
                           {node.html}
                         </pre>
 
                         {/* Failure summary */}
                         {node.failureSummary && (
-                          <p className="text-xs text-secondary mt-2 leading-relaxed">
+                          <Text size="xs" color="secondary" style={{ marginTop: 8, lineHeight: 1.6 }}>
                             {node.failureSummary}
-                          </p>
+                          </Text>
                         )}
 
                         {/* Static element fix */}
                         {elementFix && (
-                          <div className="mt-2 p-2 rounded bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800">
-                            <div className="flex items-center justify-between mb-1">
-                              <span className="text-[10px] font-medium text-blue-700 dark:text-blue-300">
-                                Suggested Fix
-                              </span>
-                              <button
-                                onClick={() => onCopyFix(elementFix.fixedHtml, fixKey)}
-                                className="text-[10px] text-blue-600 dark:text-blue-400 hover:underline"
-                              >
-                                {copiedFix === fixKey ? "Copied!" : "Copy"}
-                              </button>
-                            </div>
-                            <p className="text-[10px] text-blue-800 dark:text-blue-200 mb-2">
-                              {elementFix.explanation}
-                            </p>
-                            <pre className="text-[10px] font-mono text-blue-800 dark:text-blue-200 bg-blue-100 dark:bg-blue-900/50 rounded p-2 overflow-x-auto whitespace-pre-wrap">
-                              {elementFix.fixedHtml}
-                            </pre>
-                          </div>
+                          <Alert severity="info" style={{ marginTop: 8 }}>
+                            <Alert.Body>
+                              <Stack direction="row" align="center" justify="between" style={{ marginBottom: 4 }}>
+                                <Text size="xs" weight="medium" style={{ color: 'var(--color-info)' }}>
+                                  Suggested Fix
+                                </Text>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() => onCopyFix(elementFix.fixedHtml, fixKey)}
+                                  style={{ fontSize: 10, color: 'var(--color-info)' }}
+                                >
+                                  {copiedFix === fixKey ? "Copied!" : "Copy"}
+                                </Button>
+                              </Stack>
+                              <Alert.Content>
+                                <Text size="xs" style={{ color: 'var(--color-info)', marginBottom: 8 }}>
+                                  {elementFix.explanation}
+                                </Text>
+                                <pre style={{
+                                  fontSize: 10,
+                                  fontFamily: 'monospace',
+                                  color: 'var(--color-info)',
+                                  background: 'var(--bg-secondary)',
+                                  borderRadius: 'var(--radius-sm)',
+                                  padding: 8,
+                                  overflowX: 'auto',
+                                  whiteSpace: 'pre-wrap',
+                                  margin: 0,
+                                }}>
+                                  {elementFix.fixedHtml}
+                                </pre>
+                              </Alert.Content>
+                            </Alert.Body>
+                          </Alert>
                         )}
 
                         {/* AI fix suggestion */}
                         {aiFixes?.[fixKey] && (
-                          <div className="mt-2 p-2 rounded bg-purple-50 dark:bg-purple-950/30 border border-purple-200 dark:border-purple-800">
-                            <div className="flex items-center gap-1 mb-1">
-                              <WandIcon className="w-3 h-3 text-purple-600 dark:text-purple-400" />
-                              <span className="text-[10px] font-medium text-purple-700 dark:text-purple-300">
+                          <div style={{
+                            marginTop: 8,
+                            padding: 8,
+                            borderRadius: 'var(--radius-sm)',
+                            background: 'var(--color-accent-subtle)',
+                            border: '1px solid var(--color-accent)',
+                          }}>
+                            <Stack direction="row" align="center" gap="xs" style={{ marginBottom: 4 }}>
+                              <WandIcon style={{ width: 12, height: 12, color: 'var(--color-accent)' }} />
+                              <Text size="xs" weight="medium" style={{ color: 'var(--color-accent)' }}>
                                 AI Fix Suggestion
-                              </span>
-                            </div>
-                            <pre className="text-[10px] font-mono text-purple-800 dark:text-purple-200 whitespace-pre-wrap">
+                              </Text>
+                            </Stack>
+                            <pre style={{
+                              fontSize: 10,
+                              fontFamily: 'monospace',
+                              color: 'var(--color-accent)',
+                              whiteSpace: 'pre-wrap',
+                              margin: 0,
+                            }}>
                               {aiFixes[fixKey]}
                             </pre>
                           </div>
                         )}
-                      </div>
+                      </Box>
                     );
                   })}
                 </div>
 
                 {/* Tags */}
                 {rule.tags && rule.tags.length > 0 && (
-                  <div className="px-3 py-2 border-t border-[--border-subtle]">
-                    <div className="flex flex-wrap gap-1">
+                  <Box padding="sm" style={{ borderTop: '1px solid var(--border-subtle)' }}>
+                    <Stack direction="row" gap="xs" style={{ flexWrap: 'wrap' }}>
                       {rule.tags.slice(0, 8).map((tag) => (
-                        <span
-                          key={tag}
-                          className="text-[10px] px-1.5 py-0.5 rounded bg-[--bg-hover] text-tertiary"
-                        >
-                          {tag}
-                        </span>
+                        <Chip key={tag} size="sm">{tag}</Chip>
                       ))}
                       {rule.tags.length > 8 && (
-                        <span className="text-[10px] text-tertiary">
+                        <Text size="xs" color="tertiary">
                           +{rule.tags.length - 8} more
-                        </span>
+                        </Text>
                       )}
-                    </div>
-                  </div>
+                    </Stack>
+                  </Box>
                 )}
               </div>
             )}
-          </div>
+          </Card>
         );
       })}
-    </div>
+    </Stack>
   );
 }
 
@@ -1111,140 +1145,177 @@ function RuleList({
   type,
 }: RuleListProps) {
   return (
-    <div className="space-y-2">
+    <Stack gap="sm">
       {rules.map((rule) => {
         const isExpanded = expandedRules.has(rule.id);
 
         return (
-          <div
-            key={rule.id}
-            className="rounded-lg border border-[--border] overflow-hidden"
-          >
+          <Card key={rule.id}>
             {/* Rule Header */}
             <button
               onClick={() => onToggleRule(rule.id)}
-              className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-[--bg-hover] transition-colors"
+              style={{
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                padding: '8px 12px',
+                textAlign: 'left',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                transition: 'background var(--transition-fast)',
+              }}
             >
               {isExpanded ? (
-                <ChevronDownIcon className="w-4 h-4 text-tertiary flex-shrink-0" />
+                <ChevronDownIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)', flexShrink: 0 }} />
               ) : (
-                <ChevronRightIcon className="w-4 h-4 text-tertiary flex-shrink-0" />
+                <ChevronRightIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)', flexShrink: 0 }} />
               )}
 
               {type === "pass" && (
-                <CheckIcon className="w-4 h-4 text-green-600 flex-shrink-0" />
+                <CheckIcon style={{ width: 16, height: 16, color: 'var(--color-success)', flexShrink: 0 }} />
               )}
 
               {type === "incomplete" && (
-                <span className="text-[10px] font-medium px-1.5 py-0.5 rounded uppercase bg-amber-100 dark:bg-amber-950/50 text-amber-700 dark:text-amber-300">
-                  Review
-                </span>
+                <Badge variant="warning" size="sm">Review</Badge>
               )}
 
-              <span className="text-xs text-primary flex-1 truncate">
+              <Text size="xs" style={{
+                flex: 1,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}>
                 {rule.description}
-              </span>
+              </Text>
 
-              <span className="text-[10px] text-tertiary flex-shrink-0">
+              <Text size="xs" color="tertiary" style={{ flexShrink: 0 }}>
                 {rule.nodes.length} element{rule.nodes.length !== 1 ? "s" : ""}
-              </span>
+              </Text>
             </button>
 
             {/* Expanded content */}
             {isExpanded && (
-              <div className="border-t border-[--border] bg-[--bg-secondary]">
-                <div className="px-3 py-2 border-b border-[--border-subtle]">
-                  <p className="text-xs text-secondary mb-1">{rule.help}</p>
+              <div style={{ borderTop: '1px solid var(--border)', background: 'var(--bg-secondary)' }}>
+                <Box padding="sm" style={{ borderBottom: '1px solid var(--border-subtle)' }}>
+                  <Text size="xs" color="secondary" style={{ marginBottom: 4 }}>{rule.help}</Text>
                   {rule.helpUrl && (
                     <a
                       href={rule.helpUrl}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-xs text-[--color-accent] hover:underline"
+                      style={{ fontSize: 12, color: 'var(--color-accent)', textDecoration: 'none' }}
                     >
                       Learn more about {rule.id}
                     </a>
                   )}
-                </div>
+                </Box>
 
-                <div className="divide-y divide-[--border-subtle]">
+                <div>
                   {rule.nodes.map((node, i) => {
                     const isHighlighted =
                       highlightedElement === node.target.join(", ");
 
                     return (
-                      <div
+                      <Box
                         key={i}
-                        className={clsx(
-                          "px-3 py-2",
-                          isHighlighted && "bg-green-50 dark:bg-green-950/30"
-                        )}
+                        padding="sm"
+                        style={{
+                          borderTop: i > 0 ? '1px solid var(--border-subtle)' : undefined,
+                          background: isHighlighted ? 'var(--color-success-bg)' : undefined,
+                        }}
                       >
-                        <button
+                        <Button
+                          variant={isHighlighted ? "primary" : "ghost"}
+                          size="sm"
                           onClick={() =>
                             onHighlight(
                               isHighlighted ? null : node.target.join(", ")
                             )
                           }
-                          className={clsx(
-                            "text-[10px] font-mono px-1.5 py-0.5 rounded truncate max-w-[200px] mb-1",
-                            isHighlighted
-                              ? "bg-green-200 dark:bg-green-800 text-green-800 dark:text-green-200"
-                              : "bg-[--bg-hover] text-secondary hover:text-primary"
-                          )}
                           title={node.target.join(" > ")}
+                          style={{
+                            fontFamily: 'monospace',
+                            fontSize: 10,
+                            maxWidth: 200,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            marginBottom: 4,
+                          }}
                         >
                           {node.target[node.target.length - 1]}
-                        </button>
-
-                        <pre className="text-[10px] font-mono text-tertiary bg-[--bg-primary] rounded p-2 overflow-x-auto whitespace-pre-wrap">
+                        </Button>
+
+                        <pre style={{
+                          fontSize: 10,
+                          fontFamily: 'monospace',
+                          color: 'var(--text-tertiary)',
+                          background: 'var(--bg-primary)',
+                          borderRadius: 'var(--radius-sm)',
+                          padding: 8,
+                          overflowX: 'auto',
+                          whiteSpace: 'pre-wrap',
+                          margin: 0,
+                        }}>
                           {node.html}
                         </pre>
-                      </div>
+                      </Box>
                     );
                   })}
                 </div>
               </div>
             )}
-          </div>
+          </Card>
         );
       })}
-    </div>
+    </Stack>
   );
 }
 
 function SuccessMessage({ message }: { message: string }) {
   return (
-    <div className="flex flex-col items-center justify-center py-8 text-center">
-      <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-950/50 flex items-center justify-center mb-3">
-        <CheckIcon className="w-6 h-6 text-green-600 dark:text-green-400" />
-      </div>
-      <p className="text-sm font-medium text-green-700 dark:text-green-300">
-        {message}
-      </p>
-      <p className="text-xs text-tertiary mt-1">
+    <EmptyState>
+      <EmptyState.Icon>
+        <div style={{
+          width: 48,
+          height: 48,
+          borderRadius: '50%',
+          background: 'var(--color-success-bg)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+          <CheckIcon style={{ width: 24, height: 24, color: 'var(--color-success)' }} />
+        </div>
+      </EmptyState.Icon>
+      <EmptyState.Title style={{ color: 'var(--color-success)' }}>{message}</EmptyState.Title>
+      <EmptyState.Description>
         This component passed all automated accessibility checks.
-      </p>
-    </div>
+      </EmptyState.Description>
+    </EmptyState>
   );
 }
 
 function EmptyMessage({ message }: { message: string }) {
   return (
-    <div className="flex flex-col items-center justify-center py-8 text-center">
-      <AccessibilityIcon className="w-8 h-8 text-tertiary mb-2 opacity-50" />
-      <p className="text-xs text-tertiary">{message}</p>
-    </div>
+    <EmptyState>
+      <EmptyState.Icon>
+        <AccessibilityIcon style={{ width: 32, height: 32, opacity: 0.5 }} />
+      </EmptyState.Icon>
+      <EmptyState.Description>{message}</EmptyState.Description>
+    </EmptyState>
   );
 }
 
-interface AISetupModalProps {
+interface AISetupModalContentProps {
   onSave: (config: AIProviderConfig) => void;
   onClose: () => void;
   currentConfig: AIProviderConfig | null;
 }
 
-function AISetupModal({ onSave, onClose, currentConfig }: AISetupModalProps) {
+function AISetupModalContent({ onSave, onClose, currentConfig }: AISetupModalContentProps) {
   const [provider, setProvider] = useState<"anthropic" | "openai">(
     currentConfig?.provider || "anthropic"
   );
@@ -1258,117 +1329,106 @@ function AISetupModal({ onSave, onClose, currentConfig }: AISetupModalProps) {
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="bg-[--bg-primary] rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden">
-        <div className="flex items-center justify-between px-4 py-3 border-b border-[--border]">
-          <h3 className="text-sm font-medium text-primary">
-            Configure AI Fix Suggestions
-          </h3>
-          <button
-            onClick={onClose}
-            className="p-1 text-tertiary hover:text-primary hover:bg-[--bg-hover] rounded"
-          >
-            <XIcon className="w-4 h-4" />
-          </button>
-        </div>
+    <>
+      <Dialog.Header>
+        <Dialog.Title>Configure AI Fix Suggestions</Dialog.Title>
+        <Dialog.Description>
+          Enter your API key to enable AI-powered fix suggestions for
+          accessibility violations. Your key is stored locally and never sent
+          to our servers.
+        </Dialog.Description>
+      </Dialog.Header>
+
+      <Dialog.Body>
+        <form onSubmit={handleSubmit}>
+          <Stack gap="md">
+            <div>
+              <Text size="xs" weight="medium" style={{ marginBottom: 4 }}>Provider</Text>
+              <Stack direction="row" gap="sm">
+                <Button
+                  variant={provider === "anthropic" ? "primary" : "secondary"}
+                  size="sm"
+                  onClick={() => setProvider("anthropic")}
+                  type="button"
+                  style={{ flex: 1 }}
+                >
+                  Anthropic (Claude)
+                </Button>
+                <Button
+                  variant={provider === "openai" ? "primary" : "secondary"}
+                  size="sm"
+                  onClick={() => setProvider("openai")}
+                  type="button"
+                  style={{ flex: 1 }}
+                >
+                  OpenAI (GPT-4)
+                </Button>
+              </Stack>
+            </div>
 
-        <form onSubmit={handleSubmit} className="p-4 space-y-4">
-          <p className="text-xs text-secondary">
-            Enter your API key to enable AI-powered fix suggestions for
-            accessibility violations. Your key is stored locally and never sent
-            to our servers.
-          </p>
-
-          <div>
-            <label className="block text-xs font-medium text-primary mb-1">
-              Provider
-            </label>
-            <div className="flex gap-2">
-              <button
-                type="button"
-                onClick={() => setProvider("anthropic")}
-                className={clsx(
-                  "flex-1 px-3 py-2 text-xs rounded border transition-colors",
+            <div>
+              <Text size="xs" weight="medium" style={{ marginBottom: 4 }}>API Key</Text>
+              <input
+                type="password"
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                placeholder={
                   provider === "anthropic"
-                    ? "bg-[--color-accent] text-white border-[--color-accent]"
-                    : "bg-[--bg-secondary] text-secondary border-[--border] hover:border-[--color-accent]"
-                )}
-              >
-                Anthropic (Claude)
-              </button>
-              <button
-                type="button"
-                onClick={() => setProvider("openai")}
-                className={clsx(
-                  "flex-1 px-3 py-2 text-xs rounded border transition-colors",
-                  provider === "openai"
-                    ? "bg-[--color-accent] text-white border-[--color-accent]"
-                    : "bg-[--bg-secondary] text-secondary border-[--border] hover:border-[--color-accent]"
+                    ? "sk-ant-api03-..."
+                    : "sk-..."
+                }
+                style={{
+                  width: '100%',
+                  padding: '8px 12px',
+                  fontSize: 12,
+                  borderRadius: 'var(--radius-sm)',
+                  border: '1px solid var(--border)',
+                  background: 'var(--bg-secondary)',
+                  color: 'var(--text-primary)',
+                  outline: 'none',
+                  boxSizing: 'border-box',
+                }}
+              />
+              <Text size="xs" color="tertiary" style={{ marginTop: 4 }}>
+                Get your API key from{" "}
+                {provider === "anthropic" ? (
+                  <a
+                    href="https://console.anthropic.com/settings/keys"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{ color: 'var(--color-accent)', textDecoration: 'none' }}
+                  >
+                    console.anthropic.com
+                  </a>
+                ) : (
+                  <a
+                    href="https://platform.openai.com/api-keys"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{ color: 'var(--color-accent)', textDecoration: 'none' }}
+                  >
+                    platform.openai.com
+                  </a>
                 )}
-              >
-                OpenAI (GPT-4)
-              </button>
+              </Text>
             </div>
-          </div>
-
-          <div>
-            <label className="block text-xs font-medium text-primary mb-1">
-              API Key
-            </label>
-            <input
-              type="password"
-              value={apiKey}
-              onChange={(e) => setApiKey(e.target.value)}
-              placeholder={
-                provider === "anthropic"
-                  ? "sk-ant-api03-..."
-                  : "sk-..."
-              }
-              className="w-full px-3 py-2 text-xs rounded border border-[--border] bg-[--bg-secondary] text-primary placeholder:text-tertiary focus:outline-none focus:border-[--color-accent]"
-            />
-            <p className="text-[10px] text-tertiary mt-1">
-              Get your API key from{" "}
-              {provider === "anthropic" ? (
-                <a
-                  href="https://console.anthropic.com/settings/keys"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-[--color-accent] hover:underline"
-                >
-                  console.anthropic.com
-                </a>
-              ) : (
-                <a
-                  href="https://platform.openai.com/api-keys"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-[--color-accent] hover:underline"
-                >
-                  platform.openai.com
-                </a>
-              )}
-            </p>
-          </div>
 
-          <div className="flex justify-end gap-2 pt-2">
-            <button
-              type="button"
-              onClick={onClose}
-              className="px-3 py-1.5 text-xs rounded border border-[--border] text-secondary hover:bg-[--bg-hover]"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={!apiKey.trim()}
-              className="px-3 py-1.5 text-xs rounded bg-[--color-accent] text-white hover:opacity-90 disabled:opacity-50"
-            >
-              Save Configuration
-            </button>
-          </div>
+            <Dialog.Footer>
+              <Button variant="secondary" size="sm" onClick={onClose} type="button">
+                Cancel
+              </Button>
+              <Button
+                size="sm"
+                type="submit"
+                disabled={!apiKey.trim()}
+              >
+                Save Configuration
+              </Button>
+            </Dialog.Footer>
+          </Stack>
         </form>
-      </div>
-    </div>
+      </Dialog.Body>
+    </>
   );
 }