Button variants - filled, tonal, outlined with proper sizing

packages/showcase/index.html

@@ -7,7 +7,7 @@
   <title>PettyUI — Component Showcase</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=SUSE+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
   <script type="module">
     import "pettyui/button"; import "pettyui/link"; import "pettyui/separator";
     import "pettyui/badge"; import "pettyui/skeleton"; import "pettyui/avatar";
@@ -46,6 +46,12 @@
         <span class="hero-stat-dot" aria-hidden="true"></span>
         <span class="hero-stat">~<petty-counter to="500" duration="1200" delay="1600" suffix="B"></petty-counter> runtime</span>
       </div>
+      <div class="hero-mcp">
+        <span class="hero-mcp-label">MCP</span>
+        <code class="hero-mcp-url">npx pettyui --mcp</code>
+        <span class="hero-mcp-sep">or</span>
+        <a href="https://petty.staythree.com/mcp" class="hero-mcp-link">petty.staythree.com/mcp</a>
+      </div>
     </section>
 
     <section class="manifesto">
@@ -92,10 +98,10 @@
         <article class="demo-card">
           <h3>Button</h3>
           <div class="demo-row">
-            <petty-button><button type="button">Default</button></petty-button>
+            <petty-button><button type="button" class="primary">Filled</button></petty-button>
-            <petty-button><button type="button" class="primary">Primary</button></petty-button>
+            <petty-button><button type="button" class="tonal">Tonal</button></petty-button>
+            <petty-button><button type="button">Outlined</button></petty-button>
             <petty-button disabled><button type="button">Disabled</button></petty-button>
-            <petty-button loading><button type="button">Loading</button></petty-button>
           </div>
           <p class="tag-name">&lt;petty-button&gt;</p>
         </article>

packages/showcase/style.css

@@ -49,8 +49,8 @@
   --color-success-subtle: #f0fdf4;
 
   /* ── Typography ── */
-  --font-sans: "Source Sans 3", system-ui, sans-serif;
+  --font-sans: "Bricolage Grotesque", system-ui, sans-serif;
-  --font-mono: "Source Code Pro", ui-monospace, monospace;
+  --font-mono: "SUSE Mono", ui-monospace, monospace;
   --text-xs: 0.75rem;
   --text-sm: 0.875rem;
   --text-base: 1rem;
@@ -176,6 +176,11 @@ body {
   outline-offset: 2px;
 }
 
+/* --- Global Button Weight --- */
+button, [role="button"] {
+  font-weight: var(--weight-medium);
+}
+
 /* --- Global Focus Styles --- */
 button, a, input, select, textarea, [tabindex] {
   outline: 2px solid transparent;
@@ -301,6 +306,47 @@ button, a, input, select, textarea, [tabindex] {
   font-size: 0;
 }
 
+/* MCP callout */
+.hero-mcp {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-top: var(--space-10);
+  padding: 6px 16px;
+  border-radius: var(--radius-pill);
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  opacity: 0.7;
+  transition: opacity var(--duration-normal);
+}
+
+.hero-mcp:hover {
+  opacity: 1;
+}
+
+.hero-mcp-label {
+  display: none;
+}
+
+.hero-mcp-url {
+  font-family: var(--font-mono);
+  color: var(--color-text-tertiary);
+}
+
+.hero-mcp-sep {
+  color: var(--color-text-tertiary);
+}
+
+.hero-mcp-link {
+  font-family: var(--font-mono);
+  color: var(--color-text-tertiary);
+  text-decoration: none;
+}
+
+.hero-mcp-link:hover {
+  color: var(--color-text-secondary);
+}
+
 /* Custom element display */
 petty-typewriter {
   display: inline;
@@ -584,18 +630,18 @@ petty-button button {
   font-family: var(--font-sans);
   font-size: var(--text-base);
   font-weight: var(--weight-medium);
-  padding: 0 24px;
+  padding: 0 16px;
   line-height: 1;
-  height: 44px;
+  height: 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 8px;
   transition: background var(--duration-normal) var(--ease-effects), border-color var(--duration-fast), box-shadow var(--duration-normal) var(--ease-effects);
 }
 
 petty-button button:hover {
   background: var(--color-surface-raised);
-  box-shadow: var(--elevation-1);
 }
 
 petty-button button:focus-visible {
@@ -614,16 +660,26 @@ petty-button[data-state="loading"] button {
 }
 
 petty-button button.primary {
-  background: var(--accent-7);
+  background: var(--color-accent);
-  border-color: var(--accent-7);
+  border-color: var(--color-accent);
   color: var(--accent-contrast);
   font-weight: var(--weight-medium);
-  box-shadow: var(--elevation-1);
 }
 
 petty-button button.primary:hover {
-  background: var(--accent-8);
+  background: var(--color-accent-hover);
-  border-color: var(--accent-8);
+  border-color: var(--color-accent-hover);
+
+}
+
+petty-button button.tonal {
+  background: var(--accent-2);
+  border-color: transparent;
+  color: var(--accent-7);
+}
+
+petty-button button.tonal:hover {
+  background: var(--accent-3);
   box-shadow: var(--elevation-2);
 }