/* ============================================================ gbppl-lab-f-2 / gbppl-toggle-hover-1 / gbppl-toggle-family-1 / gbppl-panel-mode-toggle-1 / gbppl-toggle-type-1 / gbppl-toggle-small-1 / gbppl-btn-ladder-1 THE TOGGLE BUTTON ------------------------------------------------------------ THE RUNGS HAVE WORDS FOR NAMES NOW, AND THE CHECKOUT MOVED DOWN ONE (gbppl-btn-ladder-1, 02.09). Ton settled the ladder by principle the evening before: five rungs, xsmall / small / medium / large / xlarge, the mock's own names, our own curve down to small screens, and the rung at 56 dissolved. This file followed the button in the same commit, and nothing here is a decision of its own: --s -> --medium 36 / 42 / 48, not one number moved --m -> dissolved it had no carrier outside the showcase --l -> --large 48 / 56 / 64, not one number moved --small unchanged 32 / 36 / 40 --xsmall NEW 28 / 28 / 32, the button's new floor AND ONE HEIGHT DID MOVE, on purpose and on Ton's word: THE CHECKOUT'S OWN TOGGLE IS `--small` NOW. It is the only deliberate change of geometry in the wave, it is the same instruction that built `small` in the first place, and the before and after are measured in the wave report rather than asserted here. NO XLARGE, STILL. The fifth rung is not carried here and the argument is unchanged and written at the size block below: xlarge is the ladder of the one committing action of a template, and a toggle never commits anything. So the toggle's ladder is four of the five, and the missing one is named on the showcase rather than left as a gap somebody has to notice. ------------------------------------------------------------ AND THERE IS A RUNG UNDER THE SMALLEST ONE (gbppl-toggle-small-1, 02.09). Ton, on the console the morning after the model below landed: «уменьшить размер вот этих тогглов в панели управления прототипом. Там должен быть самый маленький тоггл, который у нас есть. Это просто гигантское.» There was no smallest. Today's medium was the floor of the house, and the model below had just put half a toggle on it literally, which is exactly how the console's Mode row went from 42.26 to 51.76 at 1280 (the cost is written out further down, and Ton read it on his screen before we finished writing it). So the answer is not a patch on this file: the BUTTON got a new bottom rung, `small` = 32 / 36 / 40, built on the living curve of the four ladders it stands under (tokens.css, SIZE SMALL — the arithmetic and every provenance are there). This file only points five slots at it, the way it points them at the other three. ONE WORD AMONG THREE LETTERS, FOR A FEW HOURS AND ON PURPOSE. The five-rung ladder was already settled when this rung was cut (docs\BUTTON-FIGMA-RECONCILIATION.md §6), so it was born under its final name and the renaming wave later the same day had one fewer name to move. gbppl-btn-ladder-1 closed the mismatch. WHAT THAT WAVE DID NOT TOUCH: the button's own modifiers and the showcases. A rung enters the system with a carrier, and this one had exactly one: the Mode switch of . The checkout joined it a wave later, by Ton's word. ------------------------------------------------------------ HALF A TOGGLE IS A BUTTON (gbppl-toggle-type-1, 01.09). Ton, on a screenshot of the console's Mode switch: «в наших Toggle Buttons, по крайней мере в этом размере, шрифт какой-то великоватый. Если сравнить с кнопками, в кнопках шрифт меньше, даже на больших.» And then, before the instrument had finished answering him, he settled the question with a MODEL instead of a number: «Наведи порядок в размерах тоглов. Они должны быть разных размеров и иметь ту же сетку свойств (Properties), что и кнопки. Отступы и размеры шрифта — всё должно быть абсолютно идентичным. Ведь тоггл-кнопка это та же кнопка, только помещённая в общую рамку и состэканная по несколько штук.» WHAT THE INSTRUMENT HAD FOUND BY THEN, because it decides which half of this file moves. The label was never inflated: the console's Mode switch reads 11 / 600 / 1px at 1280 and 12 at 2026, which is --gb-btn-medium-label to the token, the same value the checkout renders and the same value a .gb-btn --medium renders beside it. There was no defect in the type. What there WAS, measured at 390 / 1280 / 2026 in one document with both ladders in it: rung the button the toggle half, before medium 36 / 42 / 48 tall 32.5 / 32.5 / 34, no height pad-x 16 / 20 / 20 pad-x 16 flat at all widths gap 12 / 20 / 20 gap 8 flat (56) 40 / 48 / 56 tall 34 / 37 / 38.5, no height large 48 / 56 / 64 tall 37 / 38.5 / 40, no height all label line-height normal line-height 1.5 So the half was a third shorter than the button of its own rung and drifted further with every step up the ladder, while the label — the thing Ton was looking at — was already identical. A 12px word inside a 34px half reads bigger than the same 12px word inside a 48px button, and that is what he saw. THE MODEL IS NOW LITERAL. Every geometry the half spends is the BUTTON'S OWN TOKEN, not a copy of its value: height, both pads, the glyph gap, the label and the radius, at every rung and every width. The size modifier moves five slots instead of three, and the track is what it always was — the half plus 4 of inset and one hairline. Read the ladder below against the ladder in button.css and the two are the same lines. WHAT THIS COSTS, SAID OUT LOUD RATHER THAN BURIED. This is a DELIBERATE DECISION OF TON'S ON TOP OF A LIVE MEASUREMENT (Ton-17), and the measurement it overrides is the checkout's: the half was 32.49 tall at 1280 with 16 of side pad, read on the real page at three widths on 29.08, and it is now 42 with 20. The two carriers move with it: checkout, 1280 track 314.70 x 42.26 -> 330.68 x 51.76 checkout, 2026 track 333.50 x 43.75 -> 349.49 x 57.76 checkout, 390 track 234.79 x 58.77 -> 234.79 x 52.30 SHORTER, and the same width to the pixel: the second label still wraps to two lines inside its own half, but on the button's line-height instead of on 1.5, and 36 of floor is under a 42.53 half rather than over it. console Mode 287.11 x 42.26 -> 287.11 x 51.76 at 1280, x 57.76 at 2026, x 45.75 at 390. The width is fixed by --spread, so the whole cost is height, and Ton asked for compactness in the console that same morning: the price of the model is nine and a half pixels of the console's first section at 1280 and fourteen on his own screen. WHAT DID NOT MOVE TO THE BUTTON, each with its reason at the rule below: the one pixel of optical cap-lift (his own request of the same day, and the sum of the pads is the button's 16 exactly), the wrapping label (measured behaviour at 390, and a button never wraps), the flat --space-8 pad floor under --fill and --spread (a floor is not a pad), and XL (a toggle commits nothing). There is no colour family beyond --inverse and no type axis, for the reasons already written further down. ------------------------------------------------------------ THE INVERSE FAMILY (gbppl-panel-mode-toggle-1, 01.09). Ton, on the console: «Мне вообще не нравятся эти табы для переключения — я бы, честно говоря, заменил их на наш Toggle Button. Было бы отлично вообще убрать эти табы отовсюду из панели управления.» The console is Zinc 950 and this control was a white sheet, so the switch he asked for could not be carried without a second colour family — and a colour family is a cell of the component, not a patch in the consumer (Ton-8). It is answered THE WAY THE BUTTON ANSWERS IT: every colour of the control moved onto a slot on the element, and --inverse repoints the slots. Nothing else changed; the checkout's paint is the same eight values it has always rendered, now spelled through slots. The inverse cell is the ORGANISM'S OWN INVERSE, spent rather than reinvented: --gb-btn-fill-inverse (white), --gb-btn-ink-on- inverse (Zinc 900), --gb-btn-ink-inverse (white), --gb-btn-wash-inverse-hover (white at 20%, LIVE 24-25.08 — the inverse twin of the ink wash this file already spends) and --gb-btn-focus-ring-inverse (white). Two values had no cell to borrow and are DECLARED here with the argument at the rule: the track ground and the track line. FIRST CARRIER: the Mode switch of , which is also where the second layout modifier below comes from. ------------------------------------------------------------ THE FAMILY (gbppl-toggle-family-1, 01.09). Ton: «Toggle, как и обычная кнопка, должен быть в разных вариантах. То есть фактически мы берем кнопку и чуть трансформируем ее, сохраняя стейты и прочее. Даже, наверное, иконки там нужны, поэтому компонент нужно допилить. И нужно создать отдельную страницу под компонент.» So the file grew three rungs, a glyph and a page, and it grew them by SPENDING THE BUTTON rather than by drawing beside it: the ladder architecture is button.css's, the pads and the labels of the rungs above the default are the button's own, the focus ring and the disabled fade were already its. What did NOT come across is written down where it is missing — no colour family, no fill or outline, no press state, no top rung — each with the reason at the rule that would have carried it. The showcase is system/oro/toggle.html. WHAT THE CHECKOUT SAW OF ALL THIS, on the day: one pixel of the label, and nothing else. Every rung above S was a modifier the page did not wear, and the one change to the default was the optical lift of the caps under --gbtg-cap-lift, which left the box to the pixel. That held until gbppl-toggle-type-1 later the same day, when Ton put the default rung itself on the button's ladder; from there the checkout moves, and by how much is at the top. ------------------------------------------------------------ Ton, 29.08 14:55, on variant F of the playground bench: «использованы сторонние компоненты, которых у нас нет: там должны быть toggle buttons, их нужно создать; на прототипе чекаута есть toggle button, его просто нужно сделать системным.» So this file invents nothing. It is the ONE / DIFFERENT ADDRESSES control that has stood in the head of every shipment card on live/checkout.html since 21.08, measured with the instrument at 390 and 1280 on 29.08 and moved out of the page into the system without a pixel changing.
------------------------------------------------------------ WHERE EVERY NUMBER COMES FROM ------------------------------------------------------------ PROVENANCE: LIVE checkout, measured 29.08.2026 (gbppl-lab-f-2), headed Chrome through the harvest playwright, widths 390 and 1280, on the address segment of the first shipment card. track ground --white. The parent is the white sheet and the pressed half is the black card floating in it (Ton, 21.08). Measured rgb(255,255,255). track line 1px --zinc-300, measured rgb(212,212,216). track radius --radius, measured 5px. track inset 4px on all four sides, and the gap between two items is the same 4. NO TOKEN: the space scale starts at 8 and this is half a step. It is not promoted to a token by this wave, because one consumer is not a scale; it is written twice below as --gbtg-inset so there is one place to change when a second consumer arrives. item pad 8 by 16 — --space-8 and --space-16, measured. SUPERSEDED 01.09 (gbppl-toggle-type-1) in the horizontal only: the measurement stands, the ladder is now the button's, and the button's chrome steps to 20 at 1280. The vertical 8 was the button's number all along. item radius --radius, measured 5px: the pressed half has its own corners inside the parent's. Spelled --gb-btn-radius since 01.09, which is the same five pixels through the button's own alias. item line none. Measured 0px; the item is a fill, not a box. label 11 / 600 / 1px tracking / uppercase — exactly --gb-btn-medium-label, --gb-btn-label-weight and --gb-btn-label-tracking, the button label ladder, which is what the page was already spending here by hand. line-height 1.5, measured 16.5px on 11px. SUPERSEDED 01.09 (gbppl-toggle-type-1): it is the button label's normal now. The old argument — that normal «would take 3px off the height of the control» — was true only while the half had no height of its own, and it has one. height no height is set. The control is its label plus 8 above and 8 below: 32.5 on one line at 1280, 49 at 390 where DIFFERENT ADDRESSES wraps to two. Both measured, both unchanged after the migration. SUPERSEDED 01.09 (gbppl-toggle-type-1) by Ton's model: the half is a button, so it declares the button's min-height and stands on the height grid. The 390 case is still safe, because min-height is a floor and not a ceiling — the wrapped half grows past its rung exactly as it did. pressed ground --zinc-900, ink --white. Measured rgb(24,24,27) on rgb(255,255,255). at rest ground transparent, ink --zinc-700. Measured rgba(0,0,0,0) on rgb(63,63,70). hover ground --zinc-50 on the unpressed half only, ink unchanged. Measured rgb(250,250,250). SUPERSEDED 01.09 (gbppl-toggle-hover-1). The measurement stands; the value does not. Two per cent against a white track is a hover nobody sees, and Ton said so out loud. The wash and the ink it moved to, and why, are in the hover block further down this file. motion --mo-micro (160ms) with --mo-move, measured 0.16s cubic-bezier(0.4, 0, 0.2, 1) — the same pair the page was already rendering. DECLARED, AND SAID OUT LOUD (there is no live specimen): focus the button organism's ring, --gb-btn-focus-ring 2px at 2px offset. The checkout showed the browser's own hairline outline and nothing designed; a control a person can Tab into needs to say where they are, and the house already has exactly one answer for that. disabled --gb-btn-disabled-opacity, the one value the button spends. No segment on live is disabled. OPEN TO TON (report of 29.08, gbppl-lab-f-2): the label is 11px caps. The documentation atoms floor at 12 (eyebrow) and read at 14, and the 11px caps family is still an open item in section 8 of the skill. The measurement was taken as it stands rather than rounded up to 14, because a component lifted out of a page is that page's control or it is a new one. Whether a showcase rail may carry 11px caps is Ton's call, not this wave's. ------------------------------------------------------------ WHAT THIS FILE DOES NOT DO ------------------------------------------------------------ It said here, from 29.08 until 01.09, that this file «is not the button organism and does not borrow from it», because an item of a toggle «has no size ladder to choose from». SUPERSEDED by Ton, 01.09 — see THE FAMILY further down. The half that still stands is the second half: a button PERFORMS and a toggle HOLDS A VALUE, so what the two share is the ladder of the box and the ladder of the label, and what they do not share is the colour family and the press. .gb-btn inside a .gb-toggle is still wrong: it would drag a fill, an outline and three palettes into a control whose whole paint is «this half, not that one». It is also not .gbdoc-seg, the underlined segment of the documentation furniture. That one is a view switch inside a document; this one is a value of a form. AND IT IS NOT WHAT PRIMEVUE CALLS A ToggleButton. Checked on primevue.dev on 01.09, because the client's stack is the client's dictionary and we got this wrong once already with the input number: PrimeVue's ToggleButton «is used to select a boolean value using a button» — ONE button with two faces — and the control this file draws, a row of buttons holding one value between them, is their SelectButton («used to choose single or multiple items from a list using buttons»). The house name is still Toggle button, the showcase says the finding out loud, and the rename is Ton's call: it would move a class the checkout wears, and the checkout is not this wave's to touch. ============================================================ */ .gb-toggle { /* The one number without a rung. See the provenance above. */ --gbtg-inset: 4px; /* ---- THE THREE LADDERS, all present, all at their base step ---- The architecture is the button organism's, one ladder short: every rung is declared on the element and the size modifier only chooses which one the five geometry slots point at, so a media query moves all three at once and no modifier can lose a specificity race to the default. Nothing outside this file should set a --gbtg- slot. AND SINCE gbppl-toggle-type-1 THE RUNGS ARE THE BUTTON'S, LINE FOR LINE. Ton: «тоггл-кнопка это та же кнопка, только помещённая в общую рамку и состэканная по несколько штук... отступы и размеры шрифта — всё должно быть абсолютно идентичным.» So not one number is typed here and not one value is copied: every line below is a --gb-btn- token, and the only way this ladder can drift from the button's is if somebody edits button.css, which is the point. WHAT THAT REPLACED, because it was measured and measurement is never deleted quietly: the default carried no height at all and a pad-x of 16 flat at every width, both read on the checkout at 390, 1280 and 2258 on 29.08. The half came out 32.49 tall against a 42px button of the same rung. Ton chose the model over the measurement (Ton-17), and the cost in pixels is written at the head of this file rather than left to be discovered. */ /* THE RUNG UNDER ALL OF THEM (gbppl-toggle-small-1, 02.09), and the one word in a file of letters. Ton, on the console: «уменьшить размер вот этих тогглов в панели управления прототипом. Там должен быть самый маленький тоггл, который у нас есть. Это просто гигантское.» There was no smallest, so it was built: --gb-btn-small-* in tokens.css, 32 / 36 / 40, the living curve of the four ladders continued one step down. The arithmetic is there, not here. IT IS BORN UNDER ITS FINAL NAME. The five-rung ladder is decided (docs\BUTTON-FIGMA-RECONCILIATION.md §6): xsmall / small / medium / large / xlarge, where our S becomes `medium`. Naming this one `--s` that morning today would mean renaming it twice. So the file speaks two dialects until the renaming wave runs — three letters and one word — and that is a known, temporary state, not a slip. No alias is created either way (precedent: button phase 2). */ --gbtg-xsmall-h: var(--gb-btn-xsmall-h); /* 28, and 32 from 2000 */ --gbtg-xsmall-pad-y: var(--gb-btn-xsmall-pad-y); /* 4, the one rung whose pad-y is not 8 */ --gbtg-xsmall-pad-x: var(--gb-btn-xsmall-pad-x); /* 16, flat */ --gbtg-xsmall-gap: var(--gb-btn-xsmall-gap); /* 8, 12 from 1280 */ --gbtg-xsmall-label: var(--gb-btn-xsmall-label); /* 10, flat: the floor of the house */ --gbtg-small-h: var(--gb-btn-small-h); /* 32, 36 from 1280, 40 from 2000 */ --gbtg-small-pad-y: var(--gb-btn-small-pad-y); /* 8, flat on every button rung */ --gbtg-small-pad-x: var(--gb-btn-small-pad-x); /* 16, flat: see the token */ --gbtg-small-gap: var(--gb-btn-small-gap); /* 12, 16 from 1280 */ --gbtg-small-label: var(--gb-btn-small-label); /* 10, 11 from 1280, 12 from 2000 */ --gbtg-medium-h: var(--gb-btn-medium-h); /* 36, 42 from 1280, 48 from 2000 */ --gbtg-medium-pad-y: var(--gb-btn-medium-pad-y); /* 8, flat on every button rung */ --gbtg-medium-pad-x: var(--gb-btn-medium-pad-x); /* 16, 20 from 1280 */ --gbtg-medium-gap: var(--gb-btn-medium-gap); /* 12, 20 from 1280 */ --gbtg-medium-label: var(--gb-btn-medium-label); /* LIVE 11, 12 from 2000 */ --gbtg-large-h: var(--gb-btn-large-h); /* 48, 56 from 1280, 64 from 2000 */ --gbtg-large-pad-y: var(--gb-btn-large-pad-y); /* 8 */ --gbtg-large-pad-x: var(--gb-btn-large-pad-x); /* LIVE 24, 32 from 1280 */ --gbtg-large-gap: var(--gb-btn-large-gap); /* LIVE 20, 24 from 1280 */ --gbtg-large-label: var(--gb-btn-large-label); /* LIVE 14, 15 from 640, 16 from 2000 */ /* ---- the slots, pointed at medium: the default size ---- */ --gbtg-h: var(--gbtg-medium-h); --gbtg-pad-y: var(--gbtg-medium-pad-y); --gbtg-pad-x: var(--gbtg-medium-pad-x); --gbtg-gap: var(--gbtg-medium-gap); --gbtg-label: var(--gbtg-medium-label); /* ---- THE LABEL SITS HALF A PIXEL HIGH, AND A WHOLE ONE FIXES IT ---- Ton, 01.09: «в тогле текст внутри чуть вверх сдвинут визуально». He is right, and the amount was scanned rather than guessed (scratchpad optic-scan.js: the pressed half shot at eight device pixels to the css pixel, the black card's own edges and the white ink found in the same image so no clip rounding can be mistaken for the effect). On the checkout at 1280: card 32.63 tall cap ink 8.25 tall above ink 11.25 below ink 13.13 so the ink sits 0.94 above the optical centre. THE CAUSE IS THE CAPS, not the padding. A line box is balanced around the FONT box, ascent over descent, and Inter reserves 5.13 under the baseline against 3.25 between the cap and the top of its em box. An all-caps label has no descender to put in that space: every letter stops at the baseline, and the empty descender pushes the ink up by half the difference. Nothing is asymmetric in the CSS; the asymmetry is in the alphabet. SO THE BOX IS UNBALANCED BY EXACTLY AS MUCH AS THE ALPHABET IS. One device pixel down, taken off the top pad and given to the bottom one, so the SUM IS UNTOUCHED and the half, the track and every rect on the checkout stay to the pixel. 1px rather than the measured 0.94 because a whole device pixel is a value the renderer can hit exactly and a reader can count; the residue is six hundredths of a pixel. It holds across the ladder: the same arithmetic at the large label of 14 asks for 1.19 and at 16 for 1.36, and one whole pixel is the nearest answer to all three. NO TOKEN, and it should not become one: this is not a length off the space scale, it is an optical correction the size of a hairline, and the scale's smallest step is eight of it. DECLARED under Ton-17. The checkout rendered the label high and we read it as measurement for three days; an obvious shortfall of the source is repaired at the owner rather than carried forward. */ --gbtg-cap-lift: 1px; /* ---- THE COLOUR CELL (gbppl-panel-mode-toggle-1) ---- Eight slots, the whole paint of the control, declared here at the light values MEASURED on the checkout and repointed as a set by --inverse. The architecture is the button organism's: the family modifier moves the slots, no rule below names a colour of its own, and a family can never lose a specificity race to the default because the default is on the element. Nothing outside this file may set a --gbtg- slot. A consumer that needs a third family asks for one here. */ --gbtg-track: var(--white); /* LIVE checkout 29.08 */ --gbtg-line: var(--zinc-300); /* LIVE checkout 29.08 */ --gbtg-ink: var(--zinc-700); /* LIVE checkout 29.08 */ --gbtg-ink-hover: var(--zinc-900); /* DECLARED, gbppl-toggle-hover-1 */ --gbtg-wash-hover: var(--gb-btn-wash-ink-hover); /* LIVE 24-25.08, Zinc 300 at 20% */ --gbtg-on-fill: var(--zinc-900); /* LIVE checkout 29.08 */ --gbtg-on-ink: var(--white); /* LIVE checkout 29.08 */ --gbtg-ring: var(--gb-btn-focus-ring); /* DECLARED, the organism's ring */ display: inline-flex; gap: var(--gbtg-inset); padding: var(--gbtg-inset); background: var(--gbtg-track); border: 1px solid var(--gbtg-line); border-radius: var(--radius); /* NEITHER nowrap NOR a fixed track: the items themselves narrow and let their labels wrap, which is measured behaviour and not a choice. At 390 the checkout header is a wrapping flex row, DIFFERENT ADDRESSES takes two lines inside its own item, and the track is 234.79 by 58.77. Pinning the track (flex: 0 0 auto) would push it to 314.7 and walk it off a 390 screen — exactly the bug gbppl-checkout-15 fixed on this band. */ } .gb-toggle__item { display: inline-flex; align-items: center; justify-content: center; /* The glyph's air, and it is the BUTTON'S gap now (gbppl-toggle-type-1): 8 / 12 on xsmall, 12 / 16 on small, 12 / 20 on medium and 20 / 24 on large, the same tokens a button spends between its own mark and its own word. It used to be a flat --space-8, argued from the 17.08 proportion formula because live had measured no glyph in a toggle; the formula is what you use when there is nothing to copy, and now there is. A half with nothing but a word in it has no second flex item and spends nothing, which is why the checkout is untouched by this line. */ gap: var(--gbtg-gap); margin: 0; /* THE HALF IS THE BUTTON'S BOX (gbppl-toggle-type-1). min-height, not height, and that is the whole reason this component can now stand on the 72 / 64 / 56 / 48 / 40 / 36 grid at all: the button declares the same way, so a half that has to wrap grows past the rung instead of clipping. At 390 the checkout's DIFFERENT ADDRESSES still takes two lines inside its own half and the track still grows with it, which is the behaviour gbppl-checkout-15 fixed on that band. */ min-height: var(--gbtg-h); /* Written as the two logical properties rather than the shorthand because the vertical pair is deliberately uneven: see --gbtg-cap-lift above. The sum is 2 * --gbtg-pad-y, which is the button's own pad exactly, so the ONE property of the half that is not the button's to the letter costs zero height. */ padding-block: calc(var(--gbtg-pad-y) + var(--gbtg-cap-lift)) calc(var(--gbtg-pad-y) - var(--gbtg-cap-lift)); padding-inline: var(--gbtg-pad-x); border: 0; /* The button's radius token rather than the raw brand radius: same five pixels, one source. The TRACK keeps --radius, which is what the instrument read on it. */ border-radius: var(--gb-btn-radius); background: transparent; font-family: var(--font-sans); font-size: var(--gbtg-label); font-weight: var(--gb-btn-label-weight); letter-spacing: var(--gb-btn-label-tracking); /* The button label's own line, normal (gbppl-toggle-type-1). It was 1.5 here, and the argument at the time was that normal «would take 3px off the height of the control» — true while the half had no height of its own, and dead the moment it got one. What 1.5 costs now is a wrapped half taller than a wrapped button, which is the one place the two could still disagree. */ line-height: var(--gb-btn-label-line-height); text-align: center; text-transform: uppercase; color: var(--gbtg-ink); cursor: pointer; transition: color var(--mo-micro) var(--mo-move), background-color var(--mo-micro) var(--mo-move), border-color var(--mo-micro) var(--mo-move); } /* ============================================================ THE TWO SLOTS ------------------------------------------------------------ BOTH ARE OPTIONAL, and that is the difference from the button, whose label span is required. The checkout writes its two words as bare text nodes and will go on doing so; a half with only a word in it needs no span, and every rule above reaches a text node through the flex box just as well. THE LABEL, when a half has a glyph beside it and the markup would rather name its parts. It carries NO type of its own: the ladder is on the half, so a span here cannot drift from a text node there. And unlike .gb-btn__label it does NOT say nowrap — the label of a toggle is the one in this house that is allowed to break, because at 390 DIFFERENT ADDRESSES takes two lines inside its own half and that is measured behaviour. THE GLYPH IS NOT A SLOT OF THIS FILE AT ALL. It is .gb-icon --16 out of icon.css, written inside the half beside the word: a mark that does not answer the pointer is an icon and not a button shape (icon.css, THE LINE BETWEEN THEM), and the half itself is the control. 16 is the rung, flat, at every size and every width, because that is what the button family already spends beside a label of 11 to 14 — its medium ladder carries a flat 16 glyph at every width, and its large ladder pairs 16 with 14 at base. Nothing new is named. ============================================================ */ .gb-toggle__label { /* The floor of a flex item is its longest word unless it is told otherwise, and a long word would hold the half wider than its share inside --fill. */ min-width: 0; } /* ============================================================ SIZE: which ladder the two geometry slots point at ------------------------------------------------------------ Ton, 01.09: «Toggle, как и обычная кнопка, должен быть в разных вариантах. То есть фактически мы берем кнопку и чуть трансформируем ее, сохраняя стейты и прочее.» FOUR RUNGS OF THE HOUSE'S FIVE, and every one of them is the button's, to the token (gbppl-toggle-type-1). There is no `xlarge`, and the omission is the argument: xlarge is the ladder of the ONE COMMITTING ACTION of a template — Place Order, Continue — and a toggle never commits anything. It holds a value while somebody decides. AND THE HALF IS NOW ON THE HEIGHT GRID, which is the change of 01.09. It used to declare no height at all: the track was its label plus its air, and it landed at 42.5, 44 and 47 on the three rungs it had then, none a rung of the 72 / 64 / 56 / 48 / 40 / 36 grid every other control in the house stands on. The file argued that pinning it was the one change the component could not take, because a fixed height would clip the wrapped label at 390. That argument was about HEIGHT. What the half declares is MIN-HEIGHT, the same property the button declares, and a floor does not clip: at 390 DIFFERENT ADDRESSES still takes two lines and the half still grows past its rung to hold them. So the size axis moves the height, the pads, the gap and the label — five slots, the button's five — and the track is those plus 4 of inset. THE TWO SMALLEST ARRIVED LAST AND FROM THE BOTTOM. gbppl-toggle-small-1 added --small (02.09, for the console's Mode switch) and gbppl-btn-ladder-1 added --xsmall the same day, both as the same five slots pointed at a new button ladder; nothing else about either differs from the two above, which is the whole point of the model Ton set on 01.09. --xsmall has NO CARRIER yet: it exists because the button's floor exists, it is drawn on the showcase, and the first control to stand on it arrives with its own reason. --small carries the console's Mode switch and, since 02.09, the checkout's own address toggle. ============================================================ */ .gb-toggle--xsmall { --gbtg-h: var(--gbtg-xsmall-h); --gbtg-pad-y: var(--gbtg-xsmall-pad-y); --gbtg-pad-x: var(--gbtg-xsmall-pad-x); --gbtg-gap: var(--gbtg-xsmall-gap); --gbtg-label: var(--gbtg-xsmall-label); } .gb-toggle--small { --gbtg-h: var(--gbtg-small-h); --gbtg-pad-y: var(--gbtg-small-pad-y); --gbtg-pad-x: var(--gbtg-small-pad-x); --gbtg-gap: var(--gbtg-small-gap); --gbtg-label: var(--gbtg-small-label); } .gb-toggle--medium { --gbtg-h: var(--gbtg-medium-h); --gbtg-pad-y: var(--gbtg-medium-pad-y); --gbtg-pad-x: var(--gbtg-medium-pad-x); --gbtg-gap: var(--gbtg-medium-gap); --gbtg-label: var(--gbtg-medium-label); } .gb-toggle--large { --gbtg-h: var(--gbtg-large-h); --gbtg-pad-y: var(--gbtg-large-pad-y); --gbtg-pad-x: var(--gbtg-large-pad-x); --gbtg-gap: var(--gbtg-large-gap); --gbtg-label: var(--gbtg-large-label); } /* ============================================================ FAMILY: which colours the eight slots point at (gbppl-panel-mode-toggle-1, 01.09) ------------------------------------------------------------ ONE FAMILY BESIDE THE DEFAULT, AND IT IS A GROUND, NOT A HUE. The button has three colour families because a button can be primary, secondary or standing on a dark ground. A toggle holds a value and never shouts, so it has no primary and no secondary; what it does have is the same two grounds the house has, and --inverse is the second one. THE MIRROR IS TAKEN ROLE BY ROLE, not by swapping numbers: track the SHEET the control stands on, so that a track is a card of its own wherever it is put down. Light is the white page; dark is --zinc-950. DECLARED: the house has no measured dark toggle, and 950 is the ground the first carrier stands on (the console) and the darkest rung we own, which is what a sheet under a white card should be. line light is Zinc 300 against white, two rungs of separation. DECLARED Zinc 700 against Zinc 950, the same two rungs read the other way. It is one step louder than the console's own hairlines (Zinc 800) on purpose: those divide, this one contains. ink the quiet half. Light Zinc 700 on white, DECLARED Zinc 300 on 950 — the mirrored rung, and the same ink the console already reads its own rows in. pressed the CARD. Light is the black card on the white sheet; inverse is the white card on the dark one, and both are the button organism's own inverse cell: --gb-btn-fill-inverse over --gb-btn-ink-on-inverse. Nothing new is named. hover --gb-btn-wash-inverse-hover, white at 20%, LIVE 24-25.08. It is the exact twin of the ink wash the light family spends, measured on the same day off the header's glyphs over the hero video, and being translucent it composites onto whatever dark ground the item stands on. The ink steps to --gb-btn-ink-inverse (white) — the same movement as Zinc 700 -> Zinc 900 on light: the quiet half stepping toward the card it is about to become. ring --gb-btn-focus-ring-inverse, white. Blue 600 at two pixels is unreadable on Zinc 950, which is the reason that token exists. ============================================================ */ .gb-toggle--inverse { --gbtg-track: var(--zinc-950); /* DECLARED */ --gbtg-line: var(--zinc-700); /* DECLARED */ --gbtg-ink: var(--zinc-300); /* DECLARED */ --gbtg-ink-hover: var(--gb-btn-ink-inverse); /* LIVE 24-25.08 */ --gbtg-wash-hover: var(--gb-btn-wash-inverse-hover); /* LIVE 24-25.08 */ --gbtg-on-fill: var(--gb-btn-fill-inverse); /* DECLARED in tokens.css */ --gbtg-on-ink: var(--gb-btn-ink-on-inverse); /* DECLARED in tokens.css */ --gbtg-ring: var(--gb-btn-focus-ring-inverse); /* DECLARED in tokens.css */ } /* ============================================================ THE LADDERS CLIMB ------------------------------------------------------------ One rule per threshold, all four ladders moved together, and every step is the button's own token so a toggle lettered 12 never stands beside a button lettered 14. SINCE gbppl-toggle-type-1 THESE ARE THE BUTTON'S OWN MEDIA RULES with the xlarge block struck out. Read them side by side with the climbing block of button.css: same thresholds, same tokens, same order. The S rung used to miss the 1280 step on purpose, because live measured 16 of pad at every width on the checkout; Ton's model overrides that measurement, so the missing line is now a present one and the deviation is recorded at the head of the file instead of in the stylesheet. 640 and 768: 640 moves the large label, exactly as on the button. The button's 768 step belongs to xlarge alone, and there is no xlarge here, so that threshold does not appear. ============================================================ */ @media (min-width: 640px) { .gb-toggle { --gbtg-large-label: var(--gb-btn-large-label-sm); } /* 15 */ } @media (min-width: 1280px) { .gb-toggle { /* small has no pad-x line, and the absence is the ladder: its pad is flat 16 at every width (tokens.css, --gb-btn-small-pad-x). */ /* xsmall steps neither height nor pad here: its 1280 curve value is its own floor, and its pad is flat (tokens.css). */ --gbtg-xsmall-gap: var(--gb-btn-xsmall-gap-xl); /* 12 */ --gbtg-small-h: var(--gb-btn-small-h-xl); /* 36 */ --gbtg-small-gap: var(--gb-btn-small-gap-xl); /* 16 */ --gbtg-small-label: var(--gb-btn-small-label-xl); /* 11 */ --gbtg-medium-h: var(--gb-btn-medium-h-xl); /* 42, LIVE header */ --gbtg-medium-pad-x: var(--gb-btn-medium-pad-x-xl); /* 20 */ --gbtg-medium-gap: var(--gb-btn-medium-gap-xl); /* 20 */ --gbtg-large-h: var(--gb-btn-large-h-xl); /* 56 */ --gbtg-large-pad-x: var(--gb-btn-large-pad-x-xl); /* 32 */ --gbtg-large-gap: var(--gb-btn-large-gap-xl); /* 24 */ } } @media (min-width: 2000px) { .gb-toggle { --gbtg-xsmall-h: var(--gb-btn-xsmall-h-2xl); /* 32 */ --gbtg-small-h: var(--gb-btn-small-h-2xl); /* 40 */ --gbtg-small-label: var(--gb-btn-small-label-2xl); /* 12 */ --gbtg-medium-h: var(--gb-btn-medium-h-2xl); /* 48 */ --gbtg-medium-label: var(--gb-btn-medium-label-2xl); /* 12, LIVE */ --gbtg-large-h: var(--gb-btn-large-h-2xl); /* 64 */ --gbtg-large-label: var(--gb-btn-large-label-2xl); /* 16 */ } } /* ============================================================ THE HOVER HAS TO BE SEEN (gbppl-toggle-hover-1, 01.09) ------------------------------------------------------------ Ton, 01.09: «нет ховер стейта в прототипе чекаута». THE RULE WAS NEVER BROKEN, AND NOTHING WAS OVERRIDING IT. Measured live on 01.09 through the harvest Chrome at 1280, with a real CDP Input.dispatchMouseEvent onto the centre of the unpressed half: the item computed rgb(250, 250, 250) under the pointer, the pressed half held rgb(24, 24, 27), and the console was clean. Same result on all three consumers — live/checkout.html, system/oro/button.html (5 tracks) and system/oro/lab/playground.html (8 tracks). CSS.getMatchedStylesForNode on the hovered node lists exactly four rules that touch background: the UA sheet, Tailwind preflight's `background-color: transparent` at 0-0-1, this file's base at 0-1-0 and this hover at 0-3-0. The bundle never had a say. WHAT IS BROKEN IS THE VALUE. Zinc 50 is #fafafa and the track it lies on is #ffffff: five units out of 255, two per cent, on a 32px pill — a step nobody sees. And on the bench bar it was worse than invisible: .gbdoc-pg__bar WAS Zinc 50, so a hovered half there turned exactly the colour of the furniture around the control. (Both are gone since gbppl-showcase-tools-1: the band, and this toggle's last stand inside a playground rail, which wears .gbdoc-seg now. The argument still holds wherever a .gb-toggle stands on a Zinc 50 strip.) Zinc 50 is a GROUND in this house (docs.css: «Zinc 50 только полоса внутри объекта»), and a ground cannot also be the wash of a control standing on white. The 29.08 measurement was honest — the checkout really did spend hover:bg-zinc-50 by hand — and this is exactly what Ton-17 is for: an obvious shortfall of the source is repaired at our owner instead of being carried forward because it was measured. SO THE HOVER TAKES THE ANSWER THE HOUSE ALREADY HAS. Nothing is invented and no new grey is named: wash --gb-btn-wash-ink-hover, Zinc 300 at 20%, LIVE 24-25.08. It is the one wash an ink-coloured transparent control lays down in this system; it is what the ghost Remove button standing twelve pixels away in the same checkout band already spends; and being translucent it composites onto whatever ground the item stands on — rgb(246, 246, 247) over the white track — rather than naming a ground of its own. Two controls in one band with two different hover washes would be two houses. ink --zinc-700 -> --zinc-900. DECLARED, and at 1:1 it is the half a person actually reads: screenshots of the real checkout at 1280 put the wash alone still quiet and the label coming forward unmistakable. It is also what the state MEANS — the unpressed half stepping up toward the black card it is about to become — and Zinc 900 is the ink the pressed half and the secondary ghost button already carry, so it is a rung of the same voice. THE PRESSED HALF IS STILL NEVER WASHED, and the guard now names all three markers the pressed rule below accepts, not just the class: a consumer that presses with aria alone would otherwise have its black card go grey under the pointer, and with a wash this visible that would be a bug you could see across the room. Specificity is unchanged at 0-3-0 — :not() takes the weight of its heaviest argument, so the list costs nothing. GEOMETRY UNTOUCHED. Checkout at 1280, before and after: track 314.70 x 42.26, items 121.28 x 32.49 and 179.66 x 32.49, pressed ground rgb(24, 24, 27), motion --mo-micro. Identical to the pixel. .is-hover joins .is-focus as a demo-only class, so a showcase can hold the state still. A state only a pointer can prove is a state nobody checks, which is how this one got two per cent deep. ============================================================ */ .gb-toggle__item:hover:not(.is-on, [aria-checked="true"], [aria-pressed="true"]), .gb-toggle__item.is-hover:not(.is-on, [aria-checked="true"], [aria-pressed="true"]) { background: var(--gbtg-wash-hover); color: var(--gbtg-ink-hover); } .gb-toggle__item.is-on, .gb-toggle__item[aria-checked="true"], .gb-toggle__item[aria-pressed="true"] { background: var(--gbtg-on-fill); color: var(--gbtg-on-ink); } /* DECLARED. Keyboard only, the button organism's ring. */ .gb-toggle__item:focus-visible, .gb-toggle__item.is-focus { outline: var(--gb-btn-focus-ring-width) solid var(--gbtg-ring); outline-offset: var(--gb-btn-focus-ring-offset); } /* DECLARED. A value the system cannot hold stays readable and stops answering, the way the button fades rather than greys. */ .gb-toggle__item:disabled, .gb-toggle__item[aria-disabled="true"], .gb-toggle__item.is-disabled { opacity: var(--gb-btn-disabled-opacity); pointer-events: none; cursor: default; } .gb-toggle.is-disabled, .gb-toggle[aria-disabled="true"] { opacity: var(--gb-btn-disabled-opacity); pointer-events: none; } /* TWO FADES ARE NOT TWICE AS OFF (gbppl-toggle-family-1, 01.09). A group turned off for the pointer still owes the keyboard a real `disabled` on each half — pointer-events cannot take a button out of the tab order — so the correct markup wears both markers at once. Opacity multiplies, and 0.6 inside 0.6 is 0.36: the control would go twice as pale as anything else the house switches off, for writing the accessible version of the same state. The group owns the fade; a half inside it just stops answering. Found on the showcase's own «all out» specimen, which is the reason the showcase draws states rather than describing them. */ .gb-toggle.is-disabled .gb-toggle__item:disabled, .gb-toggle.is-disabled .gb-toggle__item.is-disabled, .gb-toggle[aria-disabled="true"] .gb-toggle__item:disabled, .gb-toggle[aria-disabled="true"] .gb-toggle__item.is-disabled { opacity: 1; } /* ============================================================ BLOCK ------------------------------------------------------------ One modifier, and it exists for the rail of a showcase: a segment in a 320 column reads as a row of choices across the whole column rather than as a pill floating at its left edge. The TRACK spans and WRAPS; the ITEMS keep every measured number and fall to a second row inside it. Items stretched to an equal share would break SECONDARY across two lines at 320, and the label is the one thing a control may not make unreadable; a track that does not wrap would squeeze four of them to nothing. Wrapping is the modifier's job and not the default, because the default is the checkout, where the measurement says narrow. ============================================================ */ .gb-toggle--block { display: flex; flex-wrap: wrap; width: 100%; } /* ============================================================ FILL (gbppl-lab-f-5, 31.08) ------------------------------------------------------------ Ton, 31.08 12:23, on a screenshot of the F rail: «трек toggle тянется на всю ширину, а дети не заполняют его» — a track as wide as the rail with three items huddled at its left edge is a half empty container, and a half empty container reads as a mistake. So the second modifier of the rail, and it is the one --block should have been there: the TRACK spans the parent and the ITEMS SPLIT IT IN EQUAL SHARES, each label centred in its own share. One line of controls, one edge on both sides, nothing floating. flex: 1 1 0 every item the same share whatever its label is long. Basis 0 rather than auto: on auto the share is the label plus the growth, and three different labels give three different widths, which is a filled track but not an equal one. min-width: 0 the flex floor is min-content by default, and a long label would hold its item wider than its share and push the row unequal. Zero lets the share be the share; whether the label then FITS the share is a question answered before the track is drawn (the budget rule of the bench that carries this, playground.html f-5), not by letting it wrap here. centre stated, not inherited: the base already centres its items, and an equal share whose label sat left would be the same half empty look one level down. pad-x 8 ONE MEASURED NUMBER CHANGES UNDER THIS MODIFIER, and it changes because it stops meaning what it meant. In a hug the 16 IS the item's air, measured off the checkout. In a share the air is whatever the share leaves over, and the padding is only the floor between a centred label and its own edge: at 16 that floor turns away labels that would sit with fifteen pixels of calm on either side. So it is --space-8, and nothing visible moves: in fill the item is as wide as its share and never as wide as its padding. Flat 8 on all three size rungs, and not one step under each of them, for the same reason — a floor is a floor whatever the letters are, and a large half whose share is 240 wide does not need 32 of guaranteed calm to keep its word off the edge. Vertical padding, height, ink, ground, radius, motion and the label ladder are untouched. No wrap here, unlike --block: shares that fit never fold, and shares that do not fit are a schema that should not have asked for a toggle. The two modifiers are alternatives, not a pair. THE CHECKOUT IS NOT TOUCHED: it wears neither modifier, its track still hugs its two labels, and every number measured on 21.08 and 29.08 stands. ============================================================ */ .gb-toggle--fill { display: flex; width: 100%; } .gb-toggle--fill .gb-toggle__item { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: var(--space-8); } /* ============================================================ SPREAD (gbppl-panel-mode-toggle-1, 01.09) ------------------------------------------------------------ THE SECOND WAY TO FILL A TRACK, and the argument for it is already written in --fill above: «Basis 0 rather than auto: on auto the share is the label plus the growth, and three different labels give three different widths, which is a filled track but not an equal one.» That paragraph names both behaviours and picks the equal one for the rail, where the halves are values of one axis and equality is the point. THE CONSOLE IS THE OTHER CASE. Its Mode switch is VIEW / INSPECT / COMMENT in a rail 287.11 wide, and the third half also carries the unread count. Measured at 1280: equal shares give 95.7 each and COMMENT with its count needs 106.1, so the badge climbs over the label — the track is full and the control is broken. On basis auto the same three halves come out 60.4 / 82.1 / 126.8, the track is full to the pixel, and nothing overlaps. So: shares that FOLLOW THE LABELS. Use it when the halves are not comparable in length or when one of them carries something besides its word; use --fill when they are three readings of one axis. The two are alternatives, and both are alternatives to the hug, which is the default and the checkout. Everything else is --fill's, to the line: the same floor of --space-8 (in a share the padding is a floor, not the air), the same min-width: 0, the same centring stated rather than inherited, no wrap. Vertical padding, height, ink, ground, radius, motion and the label ladder are untouched. ============================================================ */ .gb-toggle--spread { display: flex; width: 100%; } .gb-toggle--spread .gb-toggle__item { flex: 1 1 auto; min-width: 0; justify-content: center; padding-inline: var(--space-8); }