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

Switch to Source Sans 3 + Source Code Pro font pairing

Browse Source
This commit is contained in:
Mats Bosson 2026-04-01 02:58:57 +07:00
parent 929a6585f0
commit 8f94f8d187
2 changed files with 91 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
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=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
<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" />
<script type="module">
import "pettyui/button"; import "pettyui/link"; import "pettyui/separator";
import "pettyui/badge"; import "pettyui/skeleton"; import "pettyui/avatar";
@ -48,6 +48,22 @@
</div>
</section>
<section class="manifesto">
<div class="manifesto-inner">
<p class="manifesto-kicker">// src/philosophy.txt</p>
<h2 class="manifesto-heading">Your browser already has a UI framework.<br>You just forgot.</h2>
<div class="manifesto-body">
<p>Somewhere around 2015 we collectively decided that browsers were too stupid to build interfaces. So we invented virtual DOMs, reconcilers, hydration strategies, and server components to work around a platform that wasn't ready. Fair enough. It wasn't.</p>
<p>It is now.</p>
<p>Native <code>&lt;dialog&gt;</code> with focus trapping. Popover API with light-dismiss. Anchor positioning. CSS <code>:has()</code>. Custom Elements that just work in every framework, or in none at all. The browser shipped the abstractions we spent a decade rebuilding in userland &mdash; and most of us didn't notice because we were busy migrating to the next meta-framework.</p>
<p>PettyUI is what happens when you stop fighting the platform and start reading the spec. 45 components, zero dependencies, ~500 bytes of runtime. Not because minimalism is trendy, but because there's genuinely nothing left to add. The browser does the hard parts. We just wire up the keyboard shortcuts and ARIA.</p>
<p>Now that AI writes most of the glue code anyway, do you really need 140KB of framework opinions between your intent and the DOM? For a dashboard? For a form? Really?</p>
<p>We're not saying frameworks are dead. We're saying the default answer to "how do I build a UI" shouldn't be "install 900 packages and pray." For most things most people ship, Custom Elements + the platform APIs are not just <em>enough</em> &mdash; they're <em>better</em>. Faster, smaller, no build step required, and they'll still work when whatever you're using today is in maintenance mode.</p>
<p>This library exists because building things that are simply better is more fun than arguing about it online.</p>
</div>
</div>
</section>
<section class="value-props">
<h2 class="sr-only">Why PettyUI</h2>
<dl class="value-list">

87
packages/showcase/style.css
View File

@ -49,8 +49,8 @@
--color-success-subtle: #f0fdf4;
/* ── Typography ── */
--font-sans: "Instrument Sans", -apple-system, system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
--font-sans: "Source Sans 3", system-ui, sans-serif;
--font-mono: "Source Code Pro", ui-monospace, monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
@ -217,7 +217,9 @@ button, a, input, select, textarea, [tabindex] {
align-items: center;
text-align: center;
position: relative;
padding: 8rem 0 6rem;
min-height: 100vh;
min-height: 100dvh;
padding: 0;
}
.hero::before {
@ -312,6 +314,63 @@ petty-counter {
font-variant-numeric: tabular-nums;
}
/* ============================================================
MANIFESTO
============================================================ */
.manifesto {
padding: var(--space-16) 0 var(--space-20);
border-top: 1px solid var(--color-border);
}
.manifesto-inner {
max-width: 60ch;
}
.manifesto-kicker {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-text-tertiary);
margin-bottom: var(--space-6);
letter-spacing: 0.04em;
}
.manifesto-heading {
font-family: var(--font-sans);
font-size: clamp(1.5rem, 3.5vw, 2rem);
font-weight: var(--weight-bold);
letter-spacing: -0.03em;
line-height: var(--leading-tight);
color: var(--color-text);
margin-bottom: var(--space-10);
}
.manifesto-body {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.manifesto-body p {
font-size: var(--text-base);
line-height: 1.75;
color: var(--color-text-secondary);
max-width: 60ch;
}
.manifesto-body code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--color-surface-raised);
padding: 2px 6px;
border-radius: var(--radius-xs);
color: var(--color-text);
}
.manifesto-body em {
font-style: italic;
color: var(--color-text);
}
/* ============================================================
VALUE PROPS
============================================================ */
@ -861,8 +920,7 @@ petty-switch button[data-part="control"] {
background: var(--c-surface-3);
cursor: pointer;
transition: background var(--duration-normal) var(--ease-effects);
padding: 6px 0;
box-sizing: content-box;
padding: 0;
}
petty-switch button[data-part="control"]:focus-visible {
@ -876,22 +934,23 @@ petty-switch[data-state="on"] button[data-part="control"] {
petty-switch [data-part="thumb"] {
display: block;
width: 24px;
height: 24px;
width: 16px;
height: 16px;
border-radius: 50%;
background: white;
color: var(--color-text);
position: absolute;
top: 4px;
top: 8px;
left: 6px;
transform: scale(0.667);
transform-origin: center;
transition: transform var(--duration-normal) var(--ease-expressive);
transition: transform var(--duration-normal) var(--ease-expressive), width var(--duration-normal) var(--ease-expressive), height var(--duration-normal) var(--ease-expressive), top var(--duration-normal) var(--ease-expressive);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
petty-switch[data-state="on"] [data-part="thumb"] {
transform: translateX(22px) scale(1);
width: 24px;
height: 24px;
top: 4px;
transform: translateX(22px);
}
petty-switch [data-part="label"] {
@ -1874,6 +1933,8 @@ petty-collapsible [data-part="content"] {
}
.hero {
padding: 6rem 0 4rem;
min-height: 100vh;
min-height: 100dvh;
padding: 0;
}
}