Button: drop the optical shift, centre the label geometrically
Tried on the eye rather than the ruler: with the label a pixel low it read
worse, not better. Back to plain --_pad-y top and bottom. The size ramp
(27/34/43) is unaffected — the shift only ever moved the label inside the
box.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019yEVAE5whghEqnU1g2tuX7
diff --git a/_components/button.md b/_components/button.md
index 64af107..5ec2fd6 100644
--- a/_components/button.md
+++ b/_components/button.md
@@ -40,11 +40,6 @@ with it — weight, radius, and letter-spacing never move. Medium is the
default, and it lands within a pixel of a default IconButton's 34px box, so
a button and an icon button in the same row line up.
-At every size the label sits one pixel below the geometric centre of the
-box. Centred exactly, a word with no descenders reads high — the eye counts
-the empty descender space under it as part of the word. The pixel is a
-deliberate correction, not a rounding error.
-
<figure class="example">
<figcaption>Sizes</figcaption>
<div>
diff --git a/_sass/components/button.css b/_sass/components/button.css
index 8593328..feab235 100644
--- a/_sass/components/button.css
+++ b/_sass/components/button.css
@@ -25,18 +25,13 @@ a.btn {
--_fg: var(--gl-color-text-primary);
--_pad-y: 0.5rem;
--_pad-x: 1rem;
- --_shift: 1px;
--_font: var(--gl-step--1);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gl-space-2xs);
- /* Optically centred, not geometrically: a mono label reads a shade high
- in the box, so it gets one pixel more above it than below. The two
- calcs cancel, so the button's height is exactly 2 × --_pad-y + the
- line box either way. */
- padding: calc(var(--_pad-y) + var(--_shift)) var(--_pad-x) calc(var(--_pad-y) - var(--_shift));
+ padding: var(--_pad-y) var(--_pad-x);
border: none;
border-radius: var(--gl-radius-md);
background: var(--_bg);