Control scale: Button/IconButton primitives, two-height tokens, app-wide migration

src/app/components/Onboarding.tsx

@@ -24,6 +24,7 @@ import { renderSpec, type RenderHandle } from '../services/chart-renderer';
 import { useAppStore } from '../stores/AppStore';
 import { usePanesStore } from '../stores/PanesStore';
 import { useSnippetStore } from '../stores/SnippetStore';
+import { Button } from './Button';
 import { Icon } from './Icon';
 import styles from './Onboarding.module.css';
 
@@ -141,19 +142,19 @@ export function Onboarding() {
         </p>
 
         <div className={styles.ctaRow}>
-          <button type="button" className={styles.primary} onClick={handleCreate}>
+          <Button variant="primary" size="lg" onClick={handleCreate}>
             <Icon name="add" /> Create your first snippet
-          </button>
-          <button type="button" className={styles.buildCta} onClick={handleBuild}>
+          </Button>
+          <Button size="lg" onClick={handleBuild}>
             <Icon name="chart" /> Build a chart from your data
-          </button>
+          </Button>
         </div>
 
         <div className={styles.galleryHead}>
           <h3 className={styles.galleryTitle}>Or start from an example</h3>
-          <button type="button" className={styles.addAll} onClick={handleAddAll}>
+          <Button className={styles.addAll} onClick={handleAddAll}>
             Add all
-          </button>
+          </Button>
         </div>
 
         <ul className={styles.gallery}>
@@ -164,14 +165,13 @@ export function Onboarding() {
                 <span className={styles.cardName}>{example.name}</span>
                 <span className={styles.cardDesc}>{example.description}</span>
               </div>
-              <button
-                type="button"
+              <Button
                 className={styles.add}
                 aria-label={`Add ${example.name}`}
                 onClick={() => handleAdd(example)}
               >
                 <Icon name="add" /> Add
-              </button>
+              </Button>
             </li>
           ))}
         </ul>