mats.bosson/PettyUI
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Button variants - filled, tonal, outlined with proper sizing

Browse Source
This commit is contained in:
Mats Bosson 2026-04-01 03:48:45 +07:00
parent 8f94f8d187
commit 789bc91dfb
2 changed files with 76 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/showcase/index.html
View File

@ -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">Primary</button></petty-button>
<petty-button><button type="button" class="primary">Filled</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>

76
packages/showcase/style.css
View File

@ -49,8 +49,8 @@
--color-success-subtle: #f0fdf4;
/* ── Typography ── */
--font-sans: "Source Sans 3", system-ui, sans-serif;
--font-mono: "Source Code Pro", ui-monospace, monospace;
--font-sans: "Bricolage Grotesque", system-ui, sans-serif;
--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);
border-color: var(--accent-7);
background: var(--color-accent);
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);
border-color: var(--accent-8);
background: var(--color-accent-hover);
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);
}