/* ============================================================
gbppl-button-1 / -2 / gbppl-oro-icons-1 / -icon-consumers-1 /
gbppl-toggle-small-1 / gbppl-btn-ladder-1 / gbppl-227-mobile-3
THE BUTTON ORGANISM
------------------------------------------------------------
Ton's spec, 25.08, in one class: three TYPES (filled, outline,
ghost), two COLOURS (primary blue, secondary black) plus the
white INVERSE for dark grounds, a LADDER OF FIVE SIZES (xsmall,
small, medium, large, xlarge), five STATES (rest, hover, focus,
active, disabled) and an icon that can stand on either side of
the label, or on both, or on neither.
...svg...
Book a meeting
Everything is a default except the base class:
type filled (--outline, --ghost)
colour primary (--secondary, --inverse)
size large (--xsmall, --small, --medium, --xlarge)
so a bare is a filled primary large,
which is the button the product asks for most often. --filled,
--primary and --large exist as explicit spellings for people who
would rather write the whole sentence.
THE SIZES WERE LETTERS UNTIL 02.09 (gbppl-btn-ladder-1). S, M, L
and XL became medium, (dissolved), large and xlarge, and small
and xsmall were built under them, so that the system speaks the
language of the file the team reads (DS-2). Not one height moved
in the rename; the whole story, including the arithmetic of the
two new rungs and the dissolution of the old M, is in the BUTTON
ORGANISM block of tokens.css. NO ALIAS WAS LEFT BEHIND: every
carrier moved in the same commit, exactly as phase 2 did with the
four local ladders it replaced.
One SHAPE stands beside the five sizes: --icon, the circle that
holds a glyph and no label (gbppl-drawer-unify-1, 28.08). It is
a shape rather than a size because it answers a different
question. Since gbppl-oro-icons-1 it reads the size modifiers
too, on four flat rungs of the height grid (40, the live 44,
48, 56), and carries two axes of its own: --static for a glyph
that decorates a block instead of answering the pointer, and
--plain for one that never lays a wash. Its own block is near
the end of this file, and since gbppl-icon-consumers-1 it names
the ONE thing the shape must not decide for a colour family: the
hover wash of --inverse, which live measures white at 20% and
not ink at 5%. A glyph standing OUTSIDE a button is not
this shape and not this file: it is .gb-icon, in icon.css.
NOT ONE LITERAL LIVES HERE. Every number, colour and curve is
spent out of the BUTTON ORGANISM block of assets\tokens.css,
which carries the provenance of each one (ALIAS / LIVE /
DECLARED). The only bare numbers below are the media
thresholds — 640, 768, 1280 and 2000 — because CSS cannot read
a custom property inside a media query, a limitation tokens.css
already documents at its breakpoint block.
HOW THE FIVE LADDERS FIT IN ONE CLASS. The base rule defines
ALL FIVE ladders as private variables on the element, and the
size modifier only chooses which ladder the geometry slots
point at. So every media query in this file touches exactly one
selector (.gb-btn) and moves all five ladders one step at
once, and no size modifier can ever lose a specificity race to
the default. The private slots are prefixed --gbb-; nothing
outside this file should set them.
------------------------------------------------------------
THE HEIGHT GRID (Ton 26.08): 72 / 64 / 56 / 48 / 40 / 36 ...
------------------------------------------------------------
«Самый большой (2K и больше) 72px, следующий 64, далее 56, 48 и
так далее по стандарту.» Steps eight apart, and the five ladders
between them:
ladder base >=1280 >=2000 what it is for
xsmall 28* 28* 32 the densest chrome there is
small 32 36 40 dense furniture
medium 36 42* 48 chrome: bars, headers
large 48 56 64 forms, hero actions
xlarge 56 64 72 the one committing action
* 42 is the live public header at 1280 and 28 is Ton's touch
floor for xsmall; both are off the eight-grid and both stay.
Live and a finger win over the formula, and the deviations are
recorded in tokens.css and on the showcase rather than being
rounded away. xsmall does not step at 1280 because its curve
value there IS its floor.
THE TWO SMALLEST RUNGS ARE THE MOCK'S AND THE CURVE'S. Their 2K
column is DS-2 read node by node; everything under it is the
living curve of the ladders above, and every line is DECLARED.
tokens.css carries the arithmetic per line.
------------------------------------------------------------
PHASE 2 IS DONE (gbppl-button-2, 26.08): «даю добро на
миграцию». Every consumer wears this class now and the four
local button ladders are deleted, not aliased:
was is now (spelled in the names of 02.09)
.gbh-cta --medium --filled --primary
.gbh-cta--outline --medium --outline --secondary
.gbh-cta--inverted --medium --outline --inverse
.gba-btn --large --filled --primary --block
.gba-btn--inline --large --filled --primary (had no users)
.btn-xl (checkout) --xlarge --filled --primary --block
.btn-cta (portal) --large --filled --primary | --secondary, --block
.btn-start (portal) --large --filled --primary | --outline --secondary
.btn-bar (portal) --medium --filled --primary | --outline --secondary
.gsp-btn (portal) --large --filled --primary --block
.gsp-btn--quiet --large --outline --secondary --block
.btn-send (portal) --large --filled --secondary --block
Nothing was left behind as an alias: an alias is a second name
for the same thing, and a second name is the drift this organism
exists to end. The consumers renamed their markup and their own
rules went out with them. What the consumers kept is LAYOUT
only: where the button stands, how wide its row is, what margin
sits over it.
============================================================ */
/* ============================================================
THE ORGANISM
============================================================ */
.gb-btn {
/* ---- THE FIVE LADDERS, all present, all at their base step ----
xsmall, small, medium, large, xlarge (gbppl-btn-ladder-1, 02.09).
Every rung is declared here on the element and a size modifier
only repoints the ten geometry slots, so a media query moves all
five at once and no modifier can lose a specificity race to the
default. */
--gbb-xsmall-h: var(--gb-btn-xsmall-h);
--gbb-xsmall-pad-y: var(--gb-btn-xsmall-pad-y);
--gbb-xsmall-pad-x: var(--gb-btn-xsmall-pad-x);
--gbb-xsmall-gap: var(--gb-btn-xsmall-gap);
--gbb-xsmall-font-size: var(--gb-btn-xsmall-font-size);
--gbb-xsmall-font-weight: var(--gb-btn-xsmall-font-weight);
--gbb-xsmall-line-height: var(--gb-btn-xsmall-line-height);
--gbb-xsmall-tracking: var(--gb-btn-xsmall-tracking);
--gbb-xsmall-label: var(--gb-btn-xsmall-label);
--gbb-xsmall-icon: var(--gb-btn-xsmall-icon);
--gbb-small-h: var(--gb-btn-small-h);
--gbb-small-pad-y: var(--gb-btn-small-pad-y);
--gbb-small-pad-x: var(--gb-btn-small-pad-x);
--gbb-small-gap: var(--gb-btn-small-gap);
--gbb-small-font-size: var(--gb-btn-small-font-size);
--gbb-small-font-weight: var(--gb-btn-small-font-weight);
--gbb-small-line-height: var(--gb-btn-small-line-height);
--gbb-small-tracking: var(--gb-btn-small-tracking);
--gbb-small-label: var(--gb-btn-small-label);
--gbb-small-icon: var(--gb-btn-small-icon);
--gbb-medium-h: var(--gb-btn-medium-h);
--gbb-medium-pad-y: var(--gb-btn-medium-pad-y);
--gbb-medium-pad-x: var(--gb-btn-medium-pad-x);
--gbb-medium-gap: var(--gb-btn-medium-gap);
--gbb-medium-font-size: var(--gb-btn-medium-font-size);
--gbb-medium-font-weight: var(--gb-btn-medium-font-weight);
--gbb-medium-line-height: var(--gb-btn-medium-line-height);
--gbb-medium-tracking: var(--gb-btn-medium-tracking);
--gbb-medium-label: var(--gb-btn-medium-label);
--gbb-medium-icon: var(--gb-btn-medium-icon);
--gbb-large-h: var(--gb-btn-large-h);
--gbb-large-pad-y: var(--gb-btn-large-pad-y);
--gbb-large-pad-x: var(--gb-btn-large-pad-x);
--gbb-large-gap: var(--gb-btn-large-gap);
--gbb-large-font-size: var(--gb-btn-large-font-size);
--gbb-large-font-weight: var(--gb-btn-large-font-weight);
--gbb-large-line-height: var(--gb-btn-large-line-height);
--gbb-large-tracking: var(--gb-btn-large-tracking);
--gbb-large-label: var(--gb-btn-large-label);
--gbb-large-icon: var(--gb-btn-large-icon);
--gbb-xlarge-h: var(--gb-btn-xlarge-h);
--gbb-xlarge-pad-y: var(--gb-btn-xlarge-pad-y);
--gbb-xlarge-pad-x: var(--gb-btn-xlarge-pad-x);
--gbb-xlarge-gap: var(--gb-btn-xlarge-gap);
--gbb-xlarge-font-size: var(--gb-btn-xlarge-font-size);
--gbb-xlarge-font-weight: var(--gb-btn-xlarge-font-weight);
--gbb-xlarge-line-height: var(--gb-btn-xlarge-line-height);
--gbb-xlarge-tracking: var(--gb-btn-xlarge-tracking);
--gbb-xlarge-label: var(--gb-btn-xlarge-label);
--gbb-xlarge-icon: var(--gb-btn-xlarge-icon);
/* ---- geometry slots, pointed at large: the default size ---- */
--gbb-h: var(--gbb-large-h);
--gbb-pad-y: var(--gbb-large-pad-y);
--gbb-pad-x: var(--gbb-large-pad-x);
--gbb-gap: var(--gbb-large-gap);
--gbb-font-size: var(--gbb-large-font-size);
--gbb-font-weight: var(--gbb-large-font-weight);
--gbb-line-height: var(--gbb-large-line-height);
--gbb-tracking: var(--gbb-large-tracking);
--gbb-label: var(--gbb-large-label);
--gbb-icon: var(--gbb-large-icon);
/* ---- palette slots, pointed at primary: the default colour ---- */
--gbb-fill: var(--gb-btn-fill-primary);
--gbb-fill-hover: var(--gb-btn-fill-primary-hover);
--gbb-fill-active: var(--gb-btn-fill-primary-active);
--gbb-on-fill: var(--gb-btn-ink-on-primary);
--gbb-accent: var(--gb-btn-ink-primary);
--gbb-accent-hover: var(--gb-btn-ink-primary-hover);
--gbb-accent-active: var(--gb-btn-ink-primary-active);
--gbb-wash-hover: var(--gb-btn-wash-accent-hover);
--gbb-wash-active: var(--gb-btn-wash-accent-active);
--gbb-ring: var(--gb-btn-focus-ring);
/* ---- paint slots, pointed at filled: the default type ----
A filled button has border-width 0 and an outline 1px, which
is what live does (the live filled CTA declares no border at
all). With border-box that 1px eats into the padding box, so
a filled and an outlined button with the same label differ by
2px of width — the live pair differs by the same 2px, and the
organism reproduces it rather than inventing a correction. */
--gbb-bg: var(--gbb-fill);
--gbb-bg-hover: var(--gbb-fill-hover);
--gbb-bg-active: var(--gbb-fill-active);
--gbb-ink: var(--gbb-on-fill);
--gbb-ink-hover: var(--gbb-on-fill);
--gbb-ink-active: var(--gbb-on-fill);
--gbb-line-w: 0;
--gbb-line-style: none;
--gbb-line: transparent;
--gbb-line-hover: transparent;
--gbb-line-active: transparent;
/* ---- the box ---- */
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gbb-gap);
min-height: var(--gbb-h);
padding: var(--gbb-pad-y) var(--gbb-pad-x);
border: var(--gbb-line-w) var(--gbb-line-style) var(--gbb-line);
border-radius: var(--gb-btn-radius);
background: var(--gbb-bg);
color: var(--gbb-ink);
/* ---- the voice ----
The outer element carries its ladder's own type, and the
label span carries the label type on top of it. Both are
live; keeping the outer honest means a button with no label
span still speaks in the right size. */
font-family: var(--font-sans);
font-size: var(--gbb-font-size);
font-weight: var(--gbb-font-weight);
line-height: var(--gbb-line-height);
letter-spacing: var(--gbb-tracking);
text-transform: uppercase;
text-align: center;
text-decoration: none;
white-space: nowrap; /* live buttons never wrap */
cursor: pointer;
user-select: none;
/* LIVE: 200ms cubic-bezier(.4,0,.2,1) over colour, background
and border. Opacity rides along for the disabled step. */
transition:
color var(--gb-btn-duration) var(--gb-btn-easing),
background-color var(--gb-btn-duration) var(--gb-btn-easing),
border-color var(--gb-btn-duration) var(--gb-btn-easing),
opacity var(--gb-btn-duration) var(--gb-btn-easing);
}
/* The full-strength antidote the header and auth buttons already
carry: shell.css declares body.gb-demo a { color: inherit } at
0-1-2, which outweighs a bare .gb-btn and would paint a link
wearing the organism in the page's ink. Colour is read out of
the slot, so this pair inherits every state change for free —
the state rules below rewrite the SLOT, never the property. */
a.gb-btn,
body.gb-demo a.gb-btn { color: var(--gbb-ink); }
/* ============================================================
SLOTS: LABEL AND ICON
============================================================ */
/* The label is the live span[data-pc-section="label"] of the
product, given a name of our own. Size steps with the ladder;
weight, tracking, line-height and case are one value at every
size, because all three live sources agree on them. */
/* gbppl-demo-polish-1: the label does not wrap and does not collapse. A button
standing in a tight flex row used to be squeezed narrower than its own word,
and the organism printed the label straight through its right edge (caught on
the checkout toolbar, "Edit Selected" inside a 58px button). A label is one
line by definition; if the room is short, the ROW wraps, not the word. */
.gb-btn__label {
white-space: nowrap;
font-size: var(--gbb-label);
font-weight: var(--gb-btn-label-weight);
letter-spacing: var(--gb-btn-label-tracking);
line-height: var(--gb-btn-label-line-height);
text-transform: uppercase;
}
/* The icon is a square box in the current ink. Before the label
or after it is DOM order and nothing else: no --icon-left /
--icon-right modifier exists, because the flex row already
answers that question and a modifier would be a second way to
say the same thing. Two icons is two spans. */
.gb-btn__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--gbb-icon);
height: var(--gbb-icon);
color: currentColor;
}
.gb-btn__icon svg {
display: block;
width: 100%;
height: 100%;
}
/* ============================================================
SIZE: which ladder the geometry slots point at
============================================================ */
.gb-btn--xsmall {
--gbb-h: var(--gbb-xsmall-h);
--gbb-pad-y: var(--gbb-xsmall-pad-y);
--gbb-pad-x: var(--gbb-xsmall-pad-x);
--gbb-gap: var(--gbb-xsmall-gap);
--gbb-font-size: var(--gbb-xsmall-font-size);
--gbb-font-weight: var(--gbb-xsmall-font-weight);
--gbb-line-height: var(--gbb-xsmall-line-height);
--gbb-tracking: var(--gbb-xsmall-tracking);
--gbb-label: var(--gbb-xsmall-label);
--gbb-icon: var(--gbb-xsmall-icon);
}
.gb-btn--small {
--gbb-h: var(--gbb-small-h);
--gbb-pad-y: var(--gbb-small-pad-y);
--gbb-pad-x: var(--gbb-small-pad-x);
--gbb-gap: var(--gbb-small-gap);
--gbb-font-size: var(--gbb-small-font-size);
--gbb-font-weight: var(--gbb-small-font-weight);
--gbb-line-height: var(--gbb-small-line-height);
--gbb-tracking: var(--gbb-small-tracking);
--gbb-label: var(--gbb-small-label);
--gbb-icon: var(--gbb-small-icon);
}
.gb-btn--medium {
--gbb-h: var(--gbb-medium-h);
--gbb-pad-y: var(--gbb-medium-pad-y);
--gbb-pad-x: var(--gbb-medium-pad-x);
--gbb-gap: var(--gbb-medium-gap);
--gbb-font-size: var(--gbb-medium-font-size);
--gbb-font-weight: var(--gbb-medium-font-weight);
--gbb-line-height: var(--gbb-medium-line-height);
--gbb-tracking: var(--gbb-medium-tracking);
--gbb-label: var(--gbb-medium-label);
--gbb-icon: var(--gbb-medium-icon);
}
.gb-btn--large {
--gbb-h: var(--gbb-large-h);
--gbb-pad-y: var(--gbb-large-pad-y);
--gbb-pad-x: var(--gbb-large-pad-x);
--gbb-gap: var(--gbb-large-gap);
--gbb-font-size: var(--gbb-large-font-size);
--gbb-font-weight: var(--gbb-large-font-weight);
--gbb-line-height: var(--gbb-large-line-height);
--gbb-tracking: var(--gbb-large-tracking);
--gbb-label: var(--gbb-large-label);
--gbb-icon: var(--gbb-large-icon);
}
.gb-btn--xlarge {
--gbb-h: var(--gbb-xlarge-h);
--gbb-pad-y: var(--gbb-xlarge-pad-y);
--gbb-pad-x: var(--gbb-xlarge-pad-x);
--gbb-gap: var(--gbb-xlarge-gap);
--gbb-font-size: var(--gbb-xlarge-font-size);
--gbb-font-weight: var(--gbb-xlarge-font-weight);
--gbb-line-height: var(--gbb-xlarge-line-height);
--gbb-tracking: var(--gbb-xlarge-tracking);
--gbb-label: var(--gbb-xlarge-label);
--gbb-icon: var(--gbb-xlarge-icon);
}
/* ============================================================
THE LADDERS CLIMB
------------------------------------------------------------
One rule per threshold, all five ladders moved together. 640
and 768 are label-only steps that live measured on the form
submit and the product CTA respectively; 1280 is the wide step
of every ladder; 2000 is the system's off-Tailwind top step
(live sweep 17.08: 1999 = 42, 2000 = 48).
============================================================ */
@media (min-width: 640px) {
.gb-btn { --gbb-large-label: var(--gb-btn-large-label-sm); }
}
@media (min-width: 768px) {
.gb-btn { --gbb-xlarge-label: var(--gb-btn-xlarge-label-md); }
}
@media (min-width: 1280px) {
.gb-btn {
/* xsmall has no height line, and the absence is the ladder: the
curve gives it 28 at 1280 and 28 is already its base floor
(tokens.css, --gb-btn-xsmall-h). Its pad is flat too, like
small's, so gap and label are all it steps here. */
--gbb-xsmall-gap: var(--gb-btn-xsmall-gap-xl);
--gbb-xsmall-font-size: var(--gb-btn-xsmall-font-size-xl);
--gbb-xsmall-tracking: var(--gb-btn-xsmall-tracking-xl);
/* small has no pad-x line either: flat 16 at every width. */
--gbb-small-h: var(--gb-btn-small-h-xl);
--gbb-small-gap: var(--gb-btn-small-gap-xl);
--gbb-small-font-size: var(--gb-btn-small-font-size-xl);
--gbb-small-tracking: var(--gb-btn-small-tracking-xl);
--gbb-small-label: var(--gb-btn-small-label-xl);
--gbb-small-icon: var(--gb-btn-small-icon-xl);
--gbb-medium-h: var(--gb-btn-medium-h-xl);
--gbb-medium-pad-x: var(--gb-btn-medium-pad-x-xl);
--gbb-medium-gap: var(--gb-btn-medium-gap-xl);
--gbb-medium-font-size: var(--gb-btn-medium-font-size-xl);
--gbb-medium-tracking: var(--gb-btn-medium-tracking-xl);
--gbb-large-h: var(--gb-btn-large-h-xl);
--gbb-large-pad-x: var(--gb-btn-large-pad-x-xl);
--gbb-large-gap: var(--gb-btn-large-gap-xl);
--gbb-large-font-size: var(--gb-btn-large-font-size-xl);
--gbb-large-tracking: var(--gb-btn-large-tracking-xl);
--gbb-large-icon: var(--gb-btn-large-icon-xl);
--gbb-xlarge-h: var(--gb-btn-xlarge-h-xl);
--gbb-xlarge-pad-x: var(--gb-btn-xlarge-pad-x-xl);
--gbb-xlarge-gap: var(--gb-btn-xlarge-gap-xl);
--gbb-xlarge-font-size: var(--gb-btn-xlarge-font-size-xl);
--gbb-xlarge-tracking: var(--gb-btn-xlarge-tracking-xl);
--gbb-xlarge-icon: var(--gb-btn-xlarge-icon-xl);
}
}
@media (min-width: 2000px) {
.gb-btn {
/* xsmall steps ONCE, here: 28 -> 32. Its label and glyph are
flat, both already at the floor of the house. */
--gbb-xsmall-h: var(--gb-btn-xsmall-h-2xl);
--gbb-small-h: var(--gb-btn-small-h-2xl);
--gbb-small-label: var(--gb-btn-small-label-2xl);
--gbb-medium-h: var(--gb-btn-medium-h-2xl);
--gbb-medium-label: var(--gb-btn-medium-label-2xl);
--gbb-large-h: var(--gb-btn-large-h-2xl);
--gbb-large-label: var(--gb-btn-large-label-2xl);
--gbb-large-icon: var(--gb-btn-large-icon-2xl);
--gbb-xlarge-h: var(--gb-btn-xlarge-h-2xl);
--gbb-xlarge-label: var(--gb-btn-xlarge-label-2xl);
--gbb-xlarge-icon: var(--gb-btn-xlarge-icon-2xl);
}
}
/* ============================================================
COLOUR: which palette the paint slots point at
------------------------------------------------------------
Ton-5 in two words: blue is STATE, black is FURNITURE. Primary
is the action the screen is asking for; secondary is the action
that is simply always there; inverse is secondary standing on a
dark ground, which is the only place a white button belongs.
============================================================ */
.gb-btn--primary {
--gbb-fill: var(--gb-btn-fill-primary);
--gbb-fill-hover: var(--gb-btn-fill-primary-hover);
--gbb-fill-active: var(--gb-btn-fill-primary-active);
--gbb-on-fill: var(--gb-btn-ink-on-primary);
--gbb-accent: var(--gb-btn-ink-primary);
--gbb-accent-hover: var(--gb-btn-ink-primary-hover);
--gbb-accent-active: var(--gb-btn-ink-primary-active);
--gbb-wash-hover: var(--gb-btn-wash-accent-hover);
--gbb-wash-active: var(--gb-btn-wash-accent-active);
--gbb-ring: var(--gb-btn-focus-ring);
}
.gb-btn--secondary {
--gbb-fill: var(--gb-btn-fill-secondary);
--gbb-fill-hover: var(--gb-btn-fill-secondary-hover);
--gbb-fill-active: var(--gb-btn-fill-secondary-active);
--gbb-on-fill: var(--gb-btn-ink-on-secondary);
--gbb-accent: var(--gb-btn-ink-secondary);
--gbb-accent-hover: var(--gb-btn-ink-secondary-hover);
--gbb-accent-active: var(--gb-btn-ink-secondary-active);
--gbb-wash-hover: var(--gb-btn-wash-ink-hover);
--gbb-wash-active: var(--gb-btn-wash-ink-active);
--gbb-ring: var(--gb-btn-focus-ring);
}
.gb-btn--inverse {
--gbb-fill: var(--gb-btn-fill-inverse);
--gbb-fill-hover: var(--gb-btn-fill-inverse-hover);
--gbb-fill-active: var(--gb-btn-fill-inverse-active);
--gbb-on-fill: var(--gb-btn-ink-on-inverse);
--gbb-accent: var(--gb-btn-ink-inverse);
--gbb-accent-hover: var(--gb-btn-ink-inverse-hover);
--gbb-accent-active: var(--gb-btn-ink-inverse-active);
--gbb-wash-hover: var(--gb-btn-wash-inverse-hover);
--gbb-wash-active: var(--gb-btn-wash-inverse-active);
--gbb-ring: var(--gb-btn-focus-ring-inverse);
}
/* ============================================================
TYPE: how the paint slots read the palette
------------------------------------------------------------
Filled spends the fill; outline and ghost spend the accent and
lay a wash under themselves on hover. Ghost is outline minus
the hairline and nothing else — same ink, same wash, no second
value invented for it.
============================================================ */
.gb-btn--filled {
--gbb-bg: var(--gbb-fill);
--gbb-bg-hover: var(--gbb-fill-hover);
--gbb-bg-active: var(--gbb-fill-active);
--gbb-ink: var(--gbb-on-fill);
--gbb-ink-hover: var(--gbb-on-fill);
--gbb-ink-active: var(--gbb-on-fill);
--gbb-line-w: 0;
--gbb-line-style: none;
--gbb-line: transparent;
--gbb-line-hover: transparent;
--gbb-line-active: transparent;
}
.gb-btn--outline {
--gbb-bg: transparent;
--gbb-bg-hover: var(--gbb-wash-hover);
--gbb-bg-active: var(--gbb-wash-active);
--gbb-ink: var(--gbb-accent);
--gbb-ink-hover: var(--gbb-accent-hover);
--gbb-ink-active: var(--gbb-accent-active);
--gbb-line-w: var(--gb-btn-border-width);
--gbb-line-style: solid;
--gbb-line: var(--gbb-accent);
--gbb-line-hover: var(--gbb-accent-hover);
--gbb-line-active: var(--gbb-accent-active);
}
.gb-btn--ghost {
--gbb-bg: transparent;
--gbb-bg-hover: var(--gbb-wash-hover);
--gbb-bg-active: var(--gbb-wash-active);
--gbb-ink: var(--gbb-accent);
--gbb-ink-hover: var(--gbb-accent-hover);
--gbb-ink-active: var(--gbb-accent-active);
--gbb-line-w: 0;
--gbb-line-style: none;
--gbb-line: transparent;
--gbb-line-hover: transparent;
--gbb-line-active: transparent;
}
/* ============================================================
WIDTH: --block, the button that takes the whole row
------------------------------------------------------------
gbppl-button-2. A form submit does not stand in a row of
actions, it IS the row: the live guest sign-in submit and the
live checkout Place Order both run the full width of their
column. And when a button is that wide, live stops centring the
glyph next to the label and parks it against the padding edge
instead, with the label centred in the whole width on its own.
That is one anatomy, not two, so it is one modifier:
width 100%
icon absolute against the right padding edge
label padded by the same pad-x on both sides, so the
centred text can never run under the glyph
All three numbers are the ladder's own pad-x, so --block works
at every size and steps with the window like everything else.
It was .gba-btn's whole difference from the organism, measured
on the live submit 18.08 (icon right 24 -> 32 at 1280, label
padding 0 24 -> 0 32), and it is the reason the auth migration
is pixel-identical rather than merely close.
An icon BEFORE the label in a --block button lands in the same
place as one after it: absolute positioning does not read DOM
order. That is deliberate. A full width button has one glyph
and it belongs at the far edge.
============================================================ */
.gb-btn--block {
position: relative;
width: 100%;
}
.gb-btn--block .gb-btn__label {
padding-left: var(--gbb-pad-x);
padding-right: var(--gbb-pad-x);
}
.gb-btn--block .gb-btn__icon {
position: absolute;
top: 50%;
right: var(--gbb-pad-x);
transform: translateY(-50%);
}
/* ============================================================
SHAPE: --icon, the round button that is only a glyph
------------------------------------------------------------
gbppl-drawer-unify-1 (28.08). Ton, on the account drawer: «если
мы переносим крестик влево и делаем иконку круглой». The circle
he is pointing at is not new — it is the one the v1 catalogue
drawers and our own header have worn all along — but until now
every consumer drew it privately, and section 8 of the skill has
listed icon-only as a hole in the organism since the checkout
census counted twelve of them on one page.
WHY A SHAPE AND NOT A FIFTH SIZE. S, M, L and XL answer «how
loud is this action»; --icon answers «this control has no label
at all», and the two questions are independent: an icon button
is still ghost or filled, still primary or secondary. So --icon
overrides only the box (one square, one radius, no padding, no
gap) and leaves type, colour and state to the modifiers already
in the class. It does NOT step with the window: the live circle
is 44 at 390 and 44 at 1280, measured, and a target that is
large enough for a thumb is large enough for a mouse.
ONE SIZE, AND NO LABEL. A button wearing --icon carries a single
.gb-btn__icon and an aria-label; the label span has nowhere to
go inside a 44px circle. That is also the accessibility contract
every system with this variant makes, and the reason the variant
was worth putting to Ton before it shipped: a glyph alone is
only legible when the name is available some other way.
Every value comes out of the ICON block of tokens.css, which
carries the provenance and says out loud that 44 is off the
height grid on purpose.
------------------------------------------------------------
THREE MORE RUNGS AND TWO MORE AXES (gbppl-oro-icons-1, 28.08)
------------------------------------------------------------
Ton, on the round glyphs of the header and the drawer cross:
«должны быть вариативным компонентом. Разных размеров и с
разными состояниями: интерактивные (с hover) и неинтерактивные
(без hover, просто в блоках); с подложкой и обычные.» Three
axes, and every one of them is already in this class except the
last two words of each pair, so the shape grows two modifiers
and reads the size modifiers it was ignoring.
SIZE. The circle stands on the height grid, flat: 40, 48, 56,
with the live 44 as the default. It does NOT step with the
window, for the reason the block above already gives, so a size
modifier on --icon reads the BASE rung of a ladder and no media
query touches it.
--small 40 glyph 20
none 44 = LIVE glyph 22
--medium 48 glyph 24
--large 56 glyph 28
THE GLYPH IS HALF THE CIRCLE. 22 of 44 is the live ratio,
measured, and holding it lands every other rung on a number the
system already has: 20 and 24 are the L glyph at 1280 and 2000,
28 is the XL glyph at 2000. Not one new number is spent.
WHY S IS 40 AND NOT 36. A circle carries no label, so at the
same rank it sits one rung below the labelled button: the live
44 lies between 40 and 48, and the two neighbours are the step
down and the step up from it. 36 would put a 18px glyph under
the thumb minimum, and 64 has no consumer.
INTERACTIVE OR STATIC. The same circle stands in a block as
decoration, and there it must not answer the pointer at all.
--static is that: no hover, no target, no cursor of its own. It
belongs on a , not a , and it is aria-hidden.
WASH OR PLAIN. Both our round glyphs rest TRANSPARENT and wash
at 5% ink on hover — the header and the catalogue drawers, same
number. --plain takes even that away: no ground in any state,
and the hover lives in the ink alone. Which means --plain only
moves where the colour family has a hover ink to move to, and
today that is primary; secondary and inverse hold one ink at
rest and at hover because that is what live measures. The quiet
glyph family the portal bar wears by hand (Zinc 500 darkening to
Zinc 700) has NO TOKEN in this organism, and whether the
organism gets a fourth colour for it is Ton's call.
============================================================ */
.gb-btn--icon {
--gbb-circle: var(--gb-btn-icon-size); /* LIVE 44 */
--gbb-wash-hover: var(--gb-btn-wash-icon-hover);
--gbb-icon: var(--gb-btn-icon-glyph); /* LIVE 22, half the circle */
flex: 0 0 auto; /* a glyph in a tight row is not the thing that gives way */
width: var(--gbb-circle);
height: var(--gbb-circle);
min-height: var(--gbb-circle);
padding: 0;
gap: 0;
border-radius: var(--gb-btn-icon-radius);
}
/* The three rungs. Written as two classes so they outweigh both
--icon and the size modifier they stand beside, and so a size
modifier on a LABELLED button keeps meaning exactly what it
meant before this wave.
THE CIRCLE IS NOT THE LABELLED LADDER, AND IT NEVER WAS. It is
FLAT — one number at every width — and it names a rung of Ton's
height grid rather than a step of a ladder that climbs. Before
02.09 the three were lettered one step under the labelled ladder
of the same letter (icon --s was 40 while a labelled --s was 36
at base), and the renaming wave kept the three circles to the
pixel and moved the WORDS down with them: 40 is now `small`, 48
is `medium`, 56 is `large`. Two of the three now agree with the
2K rung of the labelled ladder they share a name with (small 40,
medium 48); the third does not (large is 64 labelled, 56 round),
and that disagreement is the price of not moving a single
carrier by a single pixel. It is written down rather than
smoothed over, and it is a question for Ton in the wave report.
Every carrier of an icon button today wears the 40 circle, which
is why this mapping is the one that costs nothing: what read
`--icon --s` on 01.09 reads `--icon --small` on 02.09 and
measures 40 by 40 in both. */
.gb-btn--icon.gb-btn--small {
--gbb-circle: var(--gb-btn-small-h-2xl); /* 40, the small rung at 2K */
--gbb-icon: var(--gb-btn-large-icon-xl); /* 20 */
}
.gb-btn--icon.gb-btn--medium {
--gbb-circle: var(--gb-btn-medium-h-2xl); /* 48, the medium rung at 2K */
--gbb-icon: var(--gb-btn-large-icon-2xl); /* 24 */
}
.gb-btn--icon.gb-btn--large {
--gbb-circle: var(--gb-btn-xlarge-h); /* 56, the xlarge base of the grid */
--gbb-icon: var(--gb-btn-xlarge-icon-2xl); /* 28 */
}
/* INVERSE KEEPS ITS OWN WASH (gbppl-icon-consumers-1, 28.08).
The 5% ink the shape sets above is the wash a round glyph answers
with ON WHITE — measured on the header and on the v1 catalogue
drawers. Over the hero video the same glyph washes at white 20%,
measured on the same header on 25.08 and already spelled out in
--gb-btn-wash-inverse-hover. The shape is declared AFTER the
colour families, so without this pair --icon would carry the
light wash onto the dark ground, and the header's round glyphs
would lose their hover the moment they joined the organism.
Written as a pair (0-2-0) so it outweighs both, and placed above
--plain so a plain inverse glyph still has no ground at all. */
.gb-btn--icon.gb-btn--inverse {
--gbb-wash-hover: var(--gb-btn-wash-inverse-hover);
--gbb-wash-active: var(--gb-btn-wash-inverse-active);
}
/* No ground, in any state. The wash slots are set rather than the
background, so filled keeps its fill and the modifier stays what
it says it is: a note about the WASH, not about the paint. */
.gb-btn--icon.gb-btn--plain {
--gbb-wash-hover: transparent;
--gbb-wash-active: transparent;
}
/* Decoration. pointer-events is what actually holds the promise —
:hover cannot match an element the pointer never lands on — and
it also hands the cursor back to whatever the glyph is standing
inside, which is the behaviour a decorative mark in a clickable
card needs. The cursor line says the intention out loud. */
.gb-btn--icon.gb-btn--static {
cursor: default;
pointer-events: none;
}
/* ============================================================
STATES
------------------------------------------------------------
Every state rewrites SLOTS, never properties. That is what
lets one rule serve nine type-and-colour combinations, and it
is also what keeps the a.gb-btn antidote above correct: the
winning colour declaration reads the slot, so when hover moves
the slot the link moves with it.
.is-hover / .is-focus / .is-active are DEMO-ONLY. They exist so
the showcase can stand all five states side by side on one
screen; no product page may wear them.
============================================================ */
.gb-btn:hover,
.gb-btn.is-hover {
--gbb-bg: var(--gbb-bg-hover);
--gbb-ink: var(--gbb-ink-hover);
--gbb-line: var(--gbb-line-hover);
}
.gb-btn:active,
.gb-btn.is-active {
--gbb-bg: var(--gbb-bg-active);
--gbb-ink: var(--gbb-ink-active);
--gbb-line: var(--gbb-line-active);
}
/* Keyboard focus only. A ring around every mouse click is noise;
a ring for the person who arrived by Tab is the only way they
can see where they are. */
.gb-btn:focus-visible,
.gb-btn.is-focus {
outline: var(--gb-btn-focus-ring-width) solid var(--gbb-ring);
outline-offset: var(--gb-btn-focus-ring-offset);
}
/* Disabled. One value for all nine combinations, live off the
auth submit: the button fades and stops answering. It keeps its
colour rather than turning grey, so the person can still see
WHICH action is waiting on them. pointer-events also disarms an
, which has no disabled attribute to honour. */
.gb-btn:disabled,
.gb-btn[aria-disabled="true"],
.gb-btn.is-disabled {
opacity: var(--gb-btn-disabled-opacity);
pointer-events: none;
cursor: default;
}
/* ============================================================
THE FINGER'S 44 (gbppl-227-mobile-3, 14.10, Ton «да, погнали!»
on Ren's list; the 227 mobile audit's M-13)
------------------------------------------------------------
On a device whose pointer is a finger, every button answers a
box of at least 44 by 44 while it keeps the size it is drawn
at: the small rung's 32 (WORK WITH AN EXPERT, ORDER, the cookie
strip), the icon circle's 40 (Close, Back) and the xsmall and
medium rungs under 44 alike. The box is a transparent ::before
centred on the button, as wide and tall as the button where it
is already larger; 44 is the live icon button's own size
(--gb-btn-icon-size, ALIAS of --icon-button-size, LIVE v1) and
the touch floor everyone publishes. Nothing is painted, so not
one pixel moves; only the finger finds more.
Only where hover is absent AND the pointer is coarse: a desktop
page, mouse in hand, keeps its hit boxes exactly as they were.
The button becomes a containing block there through :where(),
at zero specificity, so a consumer that positions its button
(absolute, fixed, sticky) keeps doing so; no consumer places an
absolute child inside a button but --block's glyph, and --block
is already relative.
============================================================ */
@media (hover: none) and (pointer: coarse) {
:where(.gb-btn) { position: relative; }
.gb-btn::before {
content: '';
position: absolute;
inset: min(0px, calc((100% - var(--gb-btn-icon-size)) / 2));
}
}