/* * Woo Add Product — the Woo Inbox drawer's sibling. * * Same parts as the Inbox, so the three blocks read as one control cluster beside * the Mini Cart: the same button box and count badge, the same overlay tint and * .3s slide, the same dark base surface with white type under a 2rem Uncut Sans * title band. Three things part company on purpose: this block's counts are round * rather than pills, its panel holds a new-product form instead of a list, and it * draws nothing at all for anyone who cannot edit products. Every * token below is named and defaulted exactly like the Inbox's, shipped from this * plugin's theme.json, so Global Styles → Blocks → Woo Add Product tunes this * drawer on its own without disturbing the Inbox. */ .woo-add-product { display: inline-block; color: inherit; /* * Design tokens. Every value below ships as a default in this plugin's * theme.json and can be retuned from Global Styles → Blocks → Woo Add Product. */ --woo-add-product-accent: var(--wp--custom--woo-add-product--accent, var(--wp--preset--color--contrast, #265cd9)); --woo-add-product-accent-fg: var(--wp--custom--woo-add-product--accent-text, var(--wp--preset--color--primary, #ffffff)); /* * Condition tones, the pair the Inbox gives its alert chips: a translucent tint of one * hue for a surface and a light ink of that same hue for what sits on it. Every state * in this drawer is named by one of the four, and each is used whole, so a colour and * the meaning it carries never come apart. */ /* * The condition tones, and their history with this drawer's footer. The footer's Publish and Save * draft chips wore the success and warning pairs whole until the drawer was asked to match the * filter's sidebar, whose footer pair rests on the palette's control step under a #303030 hover; the chips wear that * pair now, and these four tones are left to the places that still speak in a condition - the queue * badge, the is-style-filled variation, the form's note and its error. * * The pairs themselves are palette entries: the palette holds the grounds to the same figures - * status-success-background #1a7a3c38 is the rgba above, and status-warning-background #c482043d is * the other - and it holds the inks beside them as status-success-text-dark and * status-warning-text-dark, the light tints a chip wears on this dark page, kept apart from the dark * inks (status-success-text, status-warning-text) the same pairs wear on a light one. The order here * is the one the rest of this sheet keeps - the block's own key, then the palette's token, then the * literal. */ --woo-add-product-status-success-bg: var(--wp--custom--woo-add-product--status-success-background, var(--wp--preset--color--status-success-background, rgba(26, 122, 60, 0.22))); --woo-add-product-status-success-fg: var(--wp--custom--woo-add-product--status-success-text, var(--wp--preset--color--status-success-text-dark, #7fd39b)); --woo-add-product-status-info-bg: var(--wp--custom--woo-add-product--status-info-background, rgba(38, 92, 217, 0.28)); --woo-add-product-status-info-fg: var(--wp--custom--woo-add-product--status-info-text, #a9c1ff); --woo-add-product-status-warning-bg: var(--wp--custom--woo-add-product--status-warning-background, var(--wp--preset--color--status-warning-background, rgba(196, 130, 4, 0.24))); --woo-add-product-status-warning-fg: var(--wp--custom--woo-add-product--status-warning-text, var(--wp--preset--color--status-warning-text-dark, #f0c675)); --woo-add-product-status-danger-bg: var(--wp--custom--woo-add-product--status-danger-background, rgba(214, 54, 56, 0.22)); --woo-add-product-status-danger-fg: var(--wp--custom--woo-add-product--status-danger-text, #ff9d9f); --woo-add-product-urgent: var(--wp--custom--woo-add-product--urgent, var(--woo-add-product-status-danger-fg)); /* * The badge takes the success tone's tint, and the hue's own base rather than the tone's * light ink: it sits on the header's near-white band, where a light ink is drawn for a * dark panel and would leave the count unreadable. */ --woo-add-product-badge-bg-default: var(--wp--custom--woo-add-product--badge-background, var(--woo-add-product-status-success-bg)); --woo-add-product-badge-fg: var(--wp--custom--woo-add-product--badge-text, #1a7a3c); /* * The panel's surfaces are the product filter's surfaces. The filter states its dark theme in one * rule - background #202020, border none, colour #e4e6ea - and draws its controls as a field and a * chip: the sort trigger and the find input take #303030, an 8px radius, 10px 14px of padding and * 16px at weight 500, and the chips take #303030 on a 6px radius. So the ground here is the * palette's surface-raised, #202020, where it was base, #1a1a1a - a shade off the panel it sits * beside - and the field's fill below is the palette's control, #303030, the filter's own figure. * * The edges and the muted ink were light-mode literals, and on this panel they did not read as * light-mode values but as nothing: rgba(11, 10, 15, 0.06) under a field is a 6% black wash, so * the fields had no fill to find; 0.14 and 0.24 under the panel's borders and separators drew them * darker than the panel they sit on; and 0.55 under the field labels and placeholders painted them * out rather than muting them. They are palette tokens now - hairline, #ffffff0f, the dark hairline * the rest of the site separates with, and ink-muted, #888888, the grey it mutes in. * * The filter sets its own labels in the full ink, but it has no field labels to set - only section * headers and chips - so this is the one place the drawer keeps its own reading rather than the * filter's: a 13px uppercase label above a value is a quieter thing than the value it names. * * Not taken from the filter, deliberately: its wrapper's 10px radius and 420px cap, which are not a * drawer's box; its focus treatment, which clears the outline and colours the border, against the * transparent 1px border this panel keeps so the ring below has something to colour; and the * footer's two chips, which wear the status pair they were asked for rather than the filter grey. */ --woo-add-product-panel-bg: var(--wp--custom--woo-add-product--panel-background, var(--wp--preset--color--surface-raised, #202020)); --woo-add-product-panel-fg: var(--wp--custom--woo-add-product--panel-text, var(--wp--preset--color--primary, #ffffff)); --woo-add-product-panel-muted: var(--wp--custom--woo-add-product--panel-muted, var(--wp--preset--color--secondary, #a5a5a7)); --woo-add-product-panel-border: var(--wp--custom--woo-add-product--panel-border, var(--wp--preset--color--hairline, #ffffff0f)); --woo-add-product-panel-width: var(--wp--custom--woo-add-product--panel-width, 30rem); --woo-add-product-panel-size: var(--wp--custom--woo-add-product--panel-font-size, 1rem); --woo-add-product-panel-title-bg: var(--wp--custom--woo-add-product--panel-title-background, var(--wp--preset--color--surface-raised, #202020)); --woo-add-product-panel-title-fg: var(--wp--custom--woo-add-product--panel-title-text, var(--wp--preset--color--primary, #ffffff)); --woo-add-product-heading-font: var(--wp--preset--font-family--uncut-sans, inherit); /* * The filter's own muted: #9a9fa6, the figure its dark theme gives --woo-filter-dark-text-muted, * which is what its find input's placeholder and its theme toggle are set in. The palette carries no * dark muted - it holds filter-light-text-muted, #5f6570, for the light theme - so the figure stands * here as the filter writes it rather than being rounded onto ink-muted, #888888, which is a * different grey and one this panel's labels no longer wear anyway. */ --woo-add-product-panel-faint: var(--wp--custom--woo-add-product--panel-faint, #9a9fa6); /* * The panel is set in the filter's type. The filter declares --woo-filter-font, and that token * resolves to the theme's ui family - -apple-system through Helvetica Neue - which is the stack every * control in the sidebar is measured in. The drawer reads the same family now instead of inheriting * whatever the template has set around it, and the fields and buttons below name this token rather * than inherit, so a control and its label can never come from two different families. */ --woo-add-product-ui-font: var(--wp--custom--woo-add-product--ui-font, var(--wp--preset--font-family--ui, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif)); --woo-add-product-panel-line: var(--wp--custom--woo-add-product--panel-line, var(--wp--preset--color--hairline, #ffffff0f)); /* * The row fill the filter draws on its sort menu and its category checklist: rgba(255, 255, 255, 0.1) * over whatever the menu's ground is. This token was panel-tint, the palette's tertiary - a blue at * 8% - and it named that same moment; a white lift is what the filter puts there, so the name follows * the figure. The palette's nearest entry is field, #ffffff14, a shade under the filter's 0.1, so the * figure is written as the filter writes it rather than rounded onto a token. The old panel-tint key * stays in the plugin's theme.json and is simply unread now. */ --woo-add-product-row-hover: var(--wp--custom--woo-add-product--row-hover, rgba(255, 255, 255, 0.06)); /* * Every other value above is reachable three ways - the block's own key, the palette token, then the * literal - so the label ink gets the same chain rather than reading the palette token alone. */ --woo-add-product-label-fg: var(--wp--custom--woo-add-product--label-text, var(--wp--preset--color--filter-dark-text, #e4e6ea)); --woo-add-product-button-radius: var(--wp--custom--woo-add-product--panel-button-radius, 6px); /* * The filter draws two radii and they are a pair: 8px on a field, 6px on a chip. The buttons keep * the 6px above, the chips share it, and the fields take the filter's 8px from their own key. */ --woo-add-product-field-radius: var(--wp--custom--woo-add-product--field-radius, 8px); --woo-add-product-field-bg: var(--wp--custom--woo-add-product--field-background, var(--wp--preset--color--control, #292929)); --woo-add-product-scrim: var(--wp--custom--woo-add-product--panel-scrim, rgba(0, 0, 0, 0.35)); } /* === button === */ /* Same box as the Mini Cart's and the Inbox's. It began at 0.4em of padding around a 1.7em glyph * - the cluster's original 46px - and was asked down twice: a half step of 0.1em with the other * three, then a second half step on all four button paddings at once. That second cut took this * figure to 0.1em 0.2em 0, which left the glyph with 2px above it and none below, and it has * since been asked back. The top then took a further half step up, on the round that lowered the * mark; the round that has just raised the mark again by the same pixel has taken that half step * back out of the top and a half step out of the sides with it, so the button then wore 0.175em * above, 0.15em at the sides and 0.075em below - 3.5px over the glyph, 3px beside it and 1.5px * under it at this header's 20px. The three figures had moved together through every round, so the * cluster keeps the spacing it had rather than closing onto one square. * * The reader has since asked the mark up the same single step, and this round takes it from the same * two edges: 1.6em to 1.65em, 32px to 33px at this header's 20px, paid by the padding over it and * beside it - 0.175em to 0.125em above, which is 3.5px to 2.5px, so the ascent still reads 35.5 as * 2.5 over 33, and 0.15em to 0.125em at the sides, which is 3px to 2.5px each, so the button still * measures its 38 across. The bottom edge is untouched at 0.075em, where the round above had already * asked it down and this ask has no business with it. The button's 38 by 37 and the plate's 40 by * 42.6875 are what they were; the mark's centre pays half a pixel, as it did the last time it grew, * and the note on the mark's own rule has that sum. * * Every one of the three is doing a job this round and none of them is the ask; the ask was the * mark's own size, up a pixel to 1.6em. The 0.175em above is what holds the plate's height, since * the plate's line box is the padding over the glyph plus the glyph itself - 3.5 over 32 reads the * same 35.5 that 4.5 over 31 read - and the 0.15em at the sides is what holds the plate's width: * the glyph takes its pixel back inside the button rather than pushing the button out, so the button * measures its 38 by 37 again and the plate behind it its 40 by 42.6875, both figures unchanged. * The pixel comes off those two edges and nowhere else, which is the whole of the payment; what the * drawing pays for it is half a pixel of position and half a pixel of air at the plate's sides, and * the mark's own note below has both. * * The bottom edge was the figure that wanted an ask of its own, and it has not had one: the * revert restored the whole inset, so the 2px the second cut took off the top and the sides came * back with it. A button with more room over the glyph than under it is what wants that ask named. * * NOTE ON THIS FILE'S HISTORY: it was destroyed by a bad in-place edit and restored from a copy * of this plugin found on this machine, which held an earlier design generation - 0.4em of * padding, a 1.7em glyph, and the grey disc the notes further down record taking off. The two * rules restored here are the ones that copy disagreed with this site about. The rest of the * sheet is the earlier generation and may differ from this site's most recent state. One thing it is * known to have been missing is the button's hover treatment, asked for here: the plate that treatment * paints is the wrapper group's, stated at the foot of the sheet under the variations, and the note * there says why it has to be. */ .woo-add-product__button { align-items: center; background-color: transparent; border: none; color: inherit; display: flex; font-family: inherit; font-size: inherit; font-weight: inherit; gap: 0.5em; line-height: 1; padding: 0.2em 0.1625em 0.075em; white-space: nowrap; } /* * The pointer's own cursor, and nothing else, exactly as the Inbox bell states it. The plate this button * stands on is not painted here at all - it belongs to the wrapper group, and it is stated at the foot * of the sheet, beside the variations, where the ghost rule above can be answered. The note down there * has the whole of it. */ .woo-add-product__button:hover { cursor: pointer; } .woo-add-product__button:focus-visible { border-radius: 2px; outline: 2px solid currentColor; outline-offset: 2px; } .woo-add-product__quantity-badge { align-items: center; display: flex; position: relative; } .woo-add-product__quantity-badge:empty { display: none; } /* * The add glyph, drawn on the same 32-unit grid as the Inbox bell, so * the buttons in the cluster sit on one line. The glyph carries its own * colours — a grey disc with a white plus on it — so nothing is set here * that a child could inherit. That disc is gone in this site's later work, which redrew the mark * as a bare plus on the plate the header draws; the figure below has moved seven times now - 1.7em to * 1.65em, then to 1.6em, then to 1.55em on the reader's ask for a slightly lighter mark, then back up * to 1.6em a round later, down to 1.55em on the ask for a slightly lower height, back up once more on * the ask for a very slightly larger one, and now down again on a second ask for a lower height, with * the plate's own width asked down in the same breath: 1.55em, 31px at the header's 20px. Width falls * with height because the drawing is square, so the plate the mark sits on narrows with it - except in the round below, which was asked for the * mark alone and so takes its pixel out of the button's insets instead. * * The reader's ask has since moved this figure back up, by that same single step and for the eighth * time: 1.55em to 1.6em, 31px to 32px at the header's 20px, the figure this mark has now worn three * times. Nothing outside the mark moves with it: the button keeps the 38 by 37 it has measured since * the round before this one, and the plate behind it keeps its 40 by 42.6875, because the pixel the * glyph takes back comes out of the button's own insets rather than out of the button. The button's * note above carries those three figures and the sum that holds the plate; what the drawing pays for * the pixel is in two halves of its own, and they are the figures that move. It comes back to the * 19.5px centre it read before the round that lowered it, half a pixel higher than that round left * it, and the air the side insets give it comes in with it - 3px where those insets met it at 3.5. * * The figure is the only weight this mark has, which is why the step is taken here rather than on a * stroke. It is a solid plus, not one of the line drawings beside it: Font Awesome's shape arrives * filled, the fill rule below is the whole of its ink, and no stroke is laid along it - a stroke * could only fatten a silhouette, never thin one. So the cluster's lightness is asked for in the two * currencies it has: the bell and the Cart take a thinner line, and this mark takes a smaller * figure. The two are no longer quite the same size, then, where this note kept them in step; they * are the same weight, which is what the four marks were asked to be. * * That round had taken the figure down by the same single step: 1.6em back to 1.55em, 31px at the * header's 20px, the size this mark has worn twice before. The reader asked the two halves of it * separately - the mark's height down, and the plate behind it a shade narrower - and this one figure * answers both, because the drawing is square and scales to fit the box it is given: the mark's width * comes down with its height, and the plate, content-sized to what it holds, comes down with that. The * box's two figures are stated together here so that they keep step - one declaration rather than two * levers free to drift apart. Every padding on that line is written in em, so a header set at another * font size keeps the box as well. * * The pixel the glyph gives up in height is paid back above it in the button's padding, so nothing * outside the mark moves vertically: the button measures 38 by 37 - 3.5px at each side over a 31px * glyph, 4.5px above it and 1.5px below, and the 37 is the figure the button has worn through every * round since these paddings were written in em. The plate behind it is the figure easiest to lose here, * and it is not the button's height that sets it but the mark's ascent: the plate's line box is built * from the padding above the glyph plus the glyph, and this round leaves that sum exactly where it was - * it read 35.5px as 3.5 over 32 and reads 35.5px again as 4.5 over 31, which is the one thing that keeps * the plate's height at 42.6875. Its width is the other half of the ask, and that comes down with the * mark: 41 to 40, with the plate's own padding untouched, because the sides keep their 3.5px and the * glyph is the pixel narrower. The plate's note further down has that, and the step that would have * reached 40 by the padding alone. * * So the top takes the whole pixel the glyph gives up and the sides keep the figure they had, which is * what brings the button's width down to 38 while its height stays. The plate's height follows the ascent * alone and is unmoved; its width follows the button and comes down with it. An earlier cut in this * family, one that gave its pixel back at the top alone and took another from the bottom, measured the * plate half a pixel short - 42.1875 - which is what named the ascent as the figure to hold. * * The mark's centre drops half a pixel with this round, which is the ask itself: 4.5px of padding plus * half a 31px glyph is 20px from the button's top, where 3.5 plus half of 32 is 19.5. The ascent is the * figure that holds the plate's height and it reads 35.5 either way, so the half pixel costs the cluster * nothing: the four marks of it keep their plates on one line, which is what the eye reads. * * The reader has since asked this mark down one pixel for its own sake, and that pixel could not come out * of an inset - which is a point this sheet has already established twice. The figure that holds the * plate's height is the padding above the glyph plus the glyph, 3.5 over 32 reading the same 35.5 the * earlier cuts read; the mark's own place in the button is that same sum, so a pixel taken off the top * would take it off the plate with it and the background would move after all. The offset is therefore a * paint step on the mark itself, taken in the rule below and nowhere else. What it leaves is the whole * payment's worth: the button keeps its 38 by 37, the plate its 40 by 42.6875, the plate's ground its * #303030, and the ascent its 35.5. What it costs is the mark's dead centring - its centre now sits * 20.5px from the button's top, where the insets put it at 19.5, half a pixel of which the earlier size * round had already spent - and one line of the rule below is the whole of the reversal. * * The reader then asked this mark's weight down, and that glyph had no weight channel to take it from: * it was Font Awesome's solid plus, drawn as a filled figure with no stroke in it, and the note below * records that a stroke would only have fattened it. The one axis that moves a solid glyph's bars is its * size, so the mark gives up its pixel again - 1.6em to 1.55em, 32px to 31px - and the two figures built * around it are paid that pixel back: the padding above it takes the whole of it, 0.175em to 0.225em, * which is 3.5px to 4.5px, so the ascent still reads 35.5 as 4.5 over 31, and the sides take half each, * 0.15em to 0.175em, which is 3px to 3.5px, so the button still measures its 38 across. Every figure * outside the mark is what it was: the button its 38 by 37, the plate its 40 by 42.6875, the plate's * ground its #303030, the ascent its 35.5, and the offset below its pixel. The bars come down by about a * tenth of a pixel - the drawing's own thickness is 3.8px at 32 and 3.68px at 31 - and the mark's centre * drops the half pixel the earlier size round recorded, measured from a top that has moved the other way: * 4.5px of padding plus half a 31px glyph is 20px where 3.5 plus half of 32 was 19.5, which with the * offset below puts this mark 21px from the button's top. * The reader then asked the mark up again by that same single step, for the ninth time: 1.55em to 1.6em, * 31px to 32px at the header's 20px, the figure this mark has now worn four times. It is the exact mirror of the * round above, and it is paid for in the same currency in reverse - the padding over the mark gives back the * whole pixel it took, 0.225em to 0.175em, and the sides give back half a pixel each, 0.175em to 0.15em - so * the ascent still reads 35.5 as 3.5 over 32, the button still measures its 38 by 37, and the plate behind it * keeps its 40 by 42.6875. The bars thicken back to the 3.8px they read at 32, and the mark's centre comes * back up the half pixel the lowering round spent: 3.5px of padding plus half a 32px glyph is 19.5, which with * the offset below puts this mark 20.5px from the button's top, where the round above had left it at 21. The * three padding figures and the sum that holds the plate are in the button's rule and its note above, and that * note carries this same sequence. * * The reader has since asked the mark up that same single step once more - 1.65em, 33px at the header's * 20px - and this is the tenth round to name a figure for it. The payment is the button's, in the same two * edges the button's note holds: 2.5px over the glyph and 2.5px beside it, so the ascent reads 35.5 as 2.5 * over 33 and the button still measures its 38. What the drawing pays is the half pixel of position the * last growth round also charged - 2.5px of padding plus half a 33px glyph is 19, which with the offset * below puts this mark 20px from the button's top, where it stood at 20.5 - and its bars, which have no * channel but this one, thicken with it: the 3.8px they read at 32 becomes about 3.92px at 33. The reader's * ask had two halves, a size up and a weight down, and only the first of them was available on the solid * glyph the mark then wore; the ink rule below held that reading, and it was the rule the weight came from. * * The reader has since taken that route: the glyph is gone and the mark is the cluster's own stroked cross, * drawn in render.php on this same 32-unit grid. So this rule now states the mark's thickness as well as its * box - stroke-width 3.6, which is 3.6 units of the grid and about 3.71px at the 1.65em box below, very * slightly under the 3.8px the solid plus's bars read at 32px and under the 3.92px they read at the 33px * this round's box gives them. The stroke's colour is the ink rule's business and is not set here; what is * set here is the figure a later weight ask moves, and it moves nothing else. The arms run 8 units each way * from the centre - 16 units of line, about 16.5px, the round cap adding half the stroke back at each end - * so the ink reads about 20.2px where the solid plus drew 19.7px at this box: half a pixel longer, which is * this round's size ask showing through the weight one. The box, the ascent and the button are the figures * the round above left them. * * The weight ask this rule was written to answer has now come in, and it moves the one figure: the stroke comes * down a step, 3.6 units to 3.4, which is about 3.51px at the 1.65em box where it read about 3.71 - still very * slightly under the 3.8px the solid plus's bars read at 32px, and further under the 3.92px they read at the 33px * this box gives them. The arms are untouched at 8 units each way from the centre, so the ink follows the stroke * alone: 16 units of line with half the stroke back at each end is 19.4 units, about 20px, where it read about * 20.2px - a third of a pixel past the 19.7px the solid plus drew at this box rather than half of one. Nothing * else on this rule moves: the box, the ascent, the button and the offset below are the figures the rounds above * left them, and whichever way a further ask goes it is this same one number. * * The further ask has come, and it names the mark the figure is to meet: the Inbox panel's bell. The bell is * the one mark of the cluster whose line is drawn rather than stated - a filled WordPress glyph whose wall * runs 1.5 to 3 units of the 24 it was drawn in, inside a `scale(1.2744)` group, so a unit of its grid reaches * the page at 1.2744px, with a 0.25-unit stroke laid along both edges of that wall: 2.23px at its lightest, * 4.14px at its heaviest, 3.19px through the middle of the wall. A uniform stroke cannot take a range, so the * cross takes the middle - and takes it in the pixel rather than in the figure, since the two grids differ: * 3.19px is what the bell's line measures there, and 3.09 units of this 32-unit grid draws 3.19px at the 1.65em * box. Set beside the bell, the two marks' lines agree. * * Two figures stand either side if the reading should differ: at the bell's lightest line, 2.23px, this figure * is 2.16, and 2.6 sits between the two. The box, the ascent, the button and the offset below are the figures * the rounds above left them. * * The size ask has come back the other way - slightly down, one step: 1.65em to 1.6em, 33px to 32px at the * header's 20px, the box the Inbox panel's bell stands in and the figure this mark wore before the last growth * round. Being the mirror of that round, it is paid for in the same currency: the padding over the mark takes on * the whole pixel the box gives up, 0.125em to 0.175em, and the sides take half a pixel each, 0.125em to 0.15em * - so the ascent still reads 35.5 as 3.5 over 32, the button still measures its 38 by 37, and the plate behind * it keeps its 40 by 42.6875. The mark's centre comes back down the half pixel that round lifted it by: 3.5px * of padding over the mark plus half a 32px glyph is 19.5, which with the offset below puts this mark 20.5px * from the button's top, where the round above had left it at 20. * * The drawing's own line follows the box without a further figure being named for it: the viewBox is 32 units, * so a unit now reaches the page at exactly 1px where it reached it at 1.03125px, and the 3.09 units the round * above matched to the bell read 3.09px at this box, a tenth of a pixel under the bell's mid-wall 3.186px - the * gap a stroke figure of 3.19 would close if the reading should want it closed. The ink follows too: 19.09 units * now read 19.1px. * * The reader has since asked the mark down in size so that it stands on an even line with the bell, and the two * marks have now been measured as drawn rather than as boxed: the bell's own path fills 18 by 20px inside its * 32px box, with its ink centred on 42px from the header's top, and this cross's arms fill 16 by 16, which the * stroke takes to 19.09px either way, with its ink centred on 43px. The sizes are even already - the two boxes * are the same 32px, and 19.09 sits between the bell's 18 and its 20 - so the pixel the eye was catching was not * the box at all but the offset this rule has carried since the round that could not take its pixel out of the * button's insets: one paint step down, which is exactly the 1px between 43 and 42. That step is retired here, * and taken off rather than reduced, because a mark drawn square has no business sitting under the mark beside * it: the cross's ink centre now reads 42, on the bell's line, and both its top and its bottom fall within half * a pixel of the bell's. Nothing else moves - the box, the stroke, the button's insets, its 38 by 37 and the * plate's 40 by 42.6875 are the figures the rounds above left them - and the mark's centre is the 19.5px from * the button's top the padding set rather than the 20.5 the offset had made of it. * * If the drawn span itself is what should meet the bell's, that is a drawing figure and not a box one: the arms * run 8 units each way from the centre, and 15 would draw 18.09px where the bell draws 18; the stroke alone * could do it at 2 units; and 17 units of arm would draw 20.09px to meet the bell's height. * * The reader has since asked this mark slightly lower, with the background to stay where it is - and the step is * the sheet's own for a nudge of this kind, half a pixel being the very-slight one and this the whole pixel below * it. It is taken in the way the round above took it out: as a paint step on the mark itself, a transform in this * rule and nowhere else, which is why nothing behind the mark can move with it - the button keeps its 38 by 37 and * its three insets, the plate its 40 by 42.6875 and its ground, and the mark's box its 32px. What moves is the * ink and the box's top edge with it: the ink's centre reads 43px from the header's top where the round above * measured 42, one pixel under the bell's line rather than on it, and the box's top edge follows it to y=27 while * the button's own top stays at 23. * * The weight has since been asked down very slightly, which is half a rung of the stroke's own ladder - the rungs * being the 0.2 units the rounds above moved it by, so half of one is 0.1. The figure taken is the rung the * ladder already has: 3 units, 0.09 under the 3.09 the bell's line had put here, which at this box draws 3px * where it drew 3.09px. Nothing else needs to move: the arms still run 8 units each way, so the ink comes in with * the stroke - 16 units of line with half of it back at each rounded end is 19 units, 19px at this box where it * read 19.09px - and the box, the offset, the button's insets, its 38 by 37 and the plate's 40 by 42.6875 are the * figures the rounds above left them. * * The bell's line is untouched at 3.19px through the middle of its wall, so this figure now reads about a fifth * of a pixel under it rather than a tenth; 3.19 units would meet that line exactly if the reading should want it, * and 2 units is the figure nearest the bell's lightest line, which measures 2.23px. The drawn span is the other * half of that pair and is untouched: the arms still run 16 units, 15 of them would draw 18.09px to meet the * bell's 18 across, and 17 would draw 20.09px to meet its 20 down. * * The whole rung has since been asked for, after the half one: 3 units to 2.8, the ladder's own 0.2, which draws * a 2.8px line at this box where 3 drew 3px. The arms are untouched again at 8 units each way, so the ink comes * in with the stroke alone - 16 units of line with half of it back at each rounded end is 18.8 units, 18.8px, * where it read 19px. That figure is worth noting against the bell: its own path fills 18px across, so the drawn * span now sits eight tenths of a pixel under the bell's width, where the last round had it near nineteen * hundredths over. Everything else is where the rounds above left it - the box, the offset, the button's insets, * its 38 by 37, the plate's 40 by 42.6875. * * The bell's line is untouched at 3.19px through the middle of its wall and 2.23px at its lightest, so this figure * now reads about two fifths of a pixel under the middle and about six tenths of one over the lightest: 2.2 is * the whole figure nearest that light line, and 2.4 sits between the two if the reading wants a middle. * * The size has since been asked down very slightly, which is half the step every size round here has taken - the * whole step being 0.05em, so this is 0.025em: 1.6em to 1.575em, 32px to 31.5px at the header's 20px. As in every * round before it, the pixel is paid for by the button's padding rather than by the header's spacing: the padding * over the mark takes the half pixel on, 0.175em to 0.2em, so the ascent still reads 35.5 as 4 over 31.5, and the * sides take a quarter each, 0.15em to 0.1625em, so the button still measures its 38 across. Its height follows * from the same sum - 4 over 31.5 over 1.5 - and stays 37, and the plate behind it keeps its 40 by 42.6875 and * its ground. Two derived figures move with the box and are worth recording: a unit of the grid now reaches the * page at 0.984375px where it reached it at exactly 1px, so the line reads 2.756px where it read 2.8, and the ink * 18.51px where it read 18.8. The mark's centre pays a quarter of a pixel for the half: 4px of padding over the * mark plus half a 31.5px glyph is 19.75, which with the offset below puts it 20.75px from the button's top where * it stood at 20.5. * * The weight has since been asked down very slightly once more, and it is the same half rung: 2.8 units to 2.7, * the 0.1 that sits between the ladder's 2.8 and its 2.6. At this box a unit of the grid draws 0.984375px, so * the line reads 2.658px where it read 2.756, and the ink comes in with it - 16 units of line, half of the * stroke back at each rounded end, is 18.7 units, about 18.41px, where it read about 18.51 - while the box, the * offset, the button's insets and its 38 by 37, the plate and its ground are the figures the rounds above left * them. * * Against the bell, whose line is untouched at 3.19px through the middle of its wall and 2.23px at its lightest, * this figure now reads about half a pixel under the middle and about two fifths of one over the lightest; the * figures that would meet those lines exactly are 3.19 and 2.2, and 2.4 is the whole rung below this one. * * The mark was then asked slightly to the left, with the background named as the thing that must not move, * and the transform on the rule below answered it: it took an X of -1px where it had carried only the Y of * 1px, written as `translate(-1px, 1px)`. A transform is a paint step, so the icon's own box held its place * in the button and nothing laid out moved with the ink: the button kept its 38 by 37 at x 912, the badge * its 31.5 at x 916, the plate its 40.5 by 42.6875 at x 911 with its ground and its radius. The drawing * moved the pixel and only the pixel: its geometric centre went from 933 to 932, where its own box centres * at 931.75 and the plate at 931.25, so the mark read centred in the box it is drawn in - having stood * 1.25px right of that centre - and half a pixel right of the plate's. * * The ask was then repeated, and the same lever took the same step again: -1px to -2px, the transform on the * rule below reading `translate(-2px, 1px)` for that round. That was the first step past a centre. The ink's * geometric centre came to 931, a quarter pixel left of the plate's 931.25 and three quarters of one left of * its own box's 931.75, where the round above had it right of both. Everything laid out was the figure the * rounds above left it, for the third time: the box at 916, the badge's 31.5, the button's 38 by 37 at x 912, * and the plate's 40.5 by 42.6875 at x 911 with its ground and its radius. * * The mark has since been asked back, and the lever reads the round-56 figure again: -2px to -1px, written as * `translate(-1px, 1px)`. The ink's geometric centre comes back to 932, three quarters of a pixel right of its * own box's 931.75 and half of one right of the plate's 931.25 - the reading the round above named as centred * in the box the mark is drawn in. Everything laid out is untouched for the fourth time: the box at 916, the * badge's 31.5, the button's 38 by 37 at x 912, and the plate's 40.5 by 42.6875 at x 911 with its ground and * its radius. One step further back takes the X out of this transform altogether - `translateY(1px)` - which is * where the mark stood before the leftward work began, its centre at 933. */ .woo-add-product__icon { display: block; height: 1.575em; margin: 0; stroke: var(--wp--preset--color--filter-dark-text, #e4e6ea); stroke-width: 2.7; transform: translate(-1px, 1px); width: 1.575em; } /* * The mark's ink. It was the path's fill while the glyph was solid, repainted from Font Awesome's own grey * attribute: #666666 tops out at about 2.3 to 1 on the header's #303030 plate, where this mark has to read * as one of the cluster beside it, and the sheet's ink - the product search box's, the same figure the bell * and the Cart take - reads 10.5 to 1 on that plate. The drawing is a stroked cross now, so the figure has * moved onto the icon's own rule above as a stroke, at the same token and the same fallback. * * RECONSTRUCTED, NOT RECOVERED. This rule was lost when this file was destroyed by a bad in-place edit * and restored from an earlier generation of the plugin that predates it, so it is rebuilt from evidence * rather than from memory. Three things established it. The comment on the glyph above says outright that * "the sheet repaints the mark in the product search box's ink". The Inbox and the Mini Cart each carry * the rule this is modelled on, and both name the ink the same way. And the comment's own contrast figure * - 10.5 to 1 on the plate - is satisfied by this ink and by nothing else in the cluster's palette, * #666666 reaching only 2.3. * * This note closed by saying the mark's weight had one channel only, its size, and that a stroke in the * plate's own #303030 was the one lever left, not taken because the block can be placed off that plate, * where it would paint a dark rim. The reader has since asked for the stroke, and the cross above answers * it without that cost: the ink is a colour the mark carries rather than a ground it assumes, so it reads * the same on the plate and off it, and the thickness is the 3.6 units the icon's rule states - about * 3.71px at the 33px box - a figure of its own, one number for any later weight ask. */ .woo-add-product__icon path { /* * Taken off with the solid glyph: the mark is a stroked cross now, drawn with two lines and no path, * so nothing on this page matches this selector and the fill it set has moved to the icon's own rule * above, as a stroke. The selector stands so the round that removed it stays readable here. */ } /* * No hover ink on this mark, and nothing follows this note: it records a rule that has been taken off. * * The four marks of the cluster were once asked to take one hover ink - a figure a step above the box, * then #404040, what the sidebar's two search marks wore - and it was written here on the path, one class * wider than the ink rule above, because that rule names the path and not the button. It has since been * asked back off, so that the marks do not change under the pointer at all, and the figure has moved to * the plate beneath them; the plates have since come back to #353535, the box's own warm. The plate is the * better home for it, which the arithmetic agrees with: at #353535 the mark's own #e4e6ea falls to about * 1.2 to 1 as the pointer arrives, where on the plate it holds at about 9.8 to 1 and only the control * lights up. */ .woo-add-product__label { white-space: nowrap; } /* === badge === */ /* Count badge: the cart badge's diameter, drawn as a circle, filled with the success tone's tint. */ .woo-add-product__badge { align-items: center; background-color: var(--woo-add-product-badge-bg, var(--woo-add-product-badge-bg-default)); /* * A circle, so one digit and two sit in the same round face. Only the "99+" cap * widens it into a stadium, which is the one case where it is not a true circle. */ border-radius: 50%; box-sizing: border-box; color: var(--woo-add-product-badge-color, var(--woo-add-product-badge-fg)); display: flex; font-size: 0.875em; font-weight: inherit; height: 1.4285714286em; justify-content: center; /* * Half the badge's own width back from the right edge of the icon box — the * landing spot the Inbox badge uses, so the count sits on the button's edge. */ left: 100%; margin-left: -50%; min-width: 1.4285714286em; padding: 0 0.1em; position: absolute; transform: translateY(-50%); white-space: nowrap; z-index: 1; } .woo-add-product__badge:empty { opacity: 0; } /* === drawer === */ /* * The Mini Cart's slide-out drawer, down to the overlay tint and the .3s slide: * a base-coloured surface of white type pinned to the inline-end edge, square * cornered because it meets the viewport edge. The scrim and the panel are both * position: fixed, so no header ancestor can clip either of them. */ .woo-add-product__scrim { background: var(--woo-add-product-scrim); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity 0.3s, visibility 0.3s; visibility: hidden; z-index: 9999; } .woo-add-product__scrim.is-open { opacity: 1; pointer-events: auto; visibility: visible; } /* * Sits clear of the admin bar exactly as WooCommerce's drawer does, and leaves * towards the edge it is pinned to, so RTL mirrors for free. */ .woo-add-product__drawer { background: var(--woo-add-product-panel-bg); box-sizing: border-box; color: var(--woo-add-product-panel-fg); display: flex; flex-direction: column; font-size: var(--woo-add-product-panel-size); height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); inset-inline-end: 0; line-height: 1.5; margin-top: var(--wp-admin--admin-bar--height, 0); position: fixed; top: 0; transform: translateX(100%); transition: transform 0.3s, visibility 0.3s; visibility: hidden; width: min(var(--woo-add-product-panel-width, 30rem), 100vw); z-index: 10000; } html[dir="rtl"] .woo-add-product__drawer { transform: translateX(-100%); } .woo-add-product__drawer.is-open { transform: none; visibility: visible; } /* The page behind an open overlay stops scrolling, as it does behind the cart's. */ html.woo-add-product-drawer-open { overflow: hidden; } /* Title band and foot stay put; only the fields between them scroll. */ .woo-add-product__drawer > :not(.woo-add-product__panel) { flex: none; } .woo-add-product__drawer .woo-add-product__panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* === head === */ /* * The Mini Cart's title band: same surface as the panel, white Uncut Sans, and no rule under * it — the cart's drawer runs the band and the panel together as one surface, so the panel * carries no border anywhere. * * The reader has since asked this panel's bands onto the Inbox's, which is the one other drawer that * divides its three parts rather than running them together: there the head carries a border-bottom and * the foot a border-top, both 1px of #252525. So this band's under-edge is stated here where none was - * a change of idiom rather than a recolouring, the way that panel's own row rule arrived - and the hex is * written literally to match it rather than through this sheet's `--woo-add-product-panel-border`, which * is a 6% white hairline. The panel's other hairlines keep that token and now part company with these * two: the three dropdown lists and the form-done rule. On this drawer's #1a1a1a surface #252525 reads * about 1.14 to 1, the figure the Inbox's own note gives its hairlines - an edge found by its line rather * than by its contrast, and the pair of them now drawn to one figure. * * The border is 1px, so the band grows by one and the panel between the two bands gives that pixel back; * nothing is sized against either figure. The close button is positioned against this band's top edge, * which a bottom border does not touch. * * The reader has since asked this panel's border colours away, as they asked the Inbox panel's and the * vendor drawer's before it, so the figure above is gone and the pixel stays: transparent rather than * none, which is what the drawer's three rules take in this round - this band, the foot's top and the * form-done rule. The band keeps the depth described here and the step under the title is the one it was. * The token named just above keeps its own readers: the three dropdown lists, whose border is the edge of * a popup rather than a hairline the panel draws across itself, and which is what leaves * `--woo-add-product-panel-border` a live hook for Global Styles. */ .woo-add-product__drawer-head { background: var(--woo-add-product-panel-title-bg); border-bottom: 1px solid transparent; color: var(--woo-add-product-panel-title-fg); padding: 20px; padding-inline-end: 64px; position: relative; } .woo-add-product__drawer-title { /* * The footer pair's own figure, so the title and the buttons that close the drawer read as one size: * the ui family at 17px and weight 500, with the .01rem of tracking and the normal leading the * buttons take. The number had already come to 17px on the search box's figure, which is what title * and footer both compute now - but the title was set in the heading face on a 1.5 line, and a * display face at the same px reads larger than the ui stack beside it. The face and the leading are * what moved; the size did not have to. The heading-font token stays in the head of this sheet for * anything that still wants the display face, and the four drawers' shared 22px note is in its * history rather than in this rule. */ /* * 19px - the one figure in this sheet chosen by eye rather than read from a token, and a step above * what the footer pair carries. The title and the Publish button take the same type: 17px in the ui * stack, weight 500, the .01rem of tracking this site's controls carry. They were measured equal - * and they do not read equal, because Publish stands in a 46px #303030 chip with 10px 16px of * padding, and that box makes its type look larger than the same words in the open. Two steps of * type is what answers the box, so the heading sits at 19px: above the control's 17px, below the * 22px the four drawers give their titles. At 22px it reads as a heading over a control again. * * The face and the size are carried with !important. No competing rule was found for either: the * panel's sheet is the only one that names this heading, and the global styles declare headings' * family and weight but give no h2 a font-size at all. It is stated firmly because the request has * come four times: if something on screen is still sizing this heading, it is not a rule this sheet * can see, and the one the site serves should not be the thing that gives way. * * The heading-font token above stays declared for anything that still wants the display face. */ font-family: var(--woo-add-product-ui-font) !important; font-size: 1.1875rem !important; font-weight: 500; letter-spacing: 0.01rem; line-height: normal; margin: 0; overflow-wrap: break-word; } /* * The live line under the title. It reads in the same small caps as the Inbox's * row summary, but it is a moving figure — "24 orders · 12 products" — and it * is rewritten by the view script on every refresh. */ /* * The Mini Cart's cross, at the Mini Cart's own size: a 56px box holding the same 24px * glyph, 12px from the top and inline-end edge, at 60% opacity. */ /* * The box is placed so its centre lands on the title's. The head pads 20px and the * title's line is 24.2px tall, so that centre sits 32.1px below the head's top; this box * is 56px tall, half of it 28px — 20 + 12.1 - 28 = 4.1. The head's padding drops to 16px * on phones, where the same sum gives 0.1px, so the media query at the foot names it too. */ .woo-add-product__drawer-close { align-items: center; background: transparent; border: none; border-radius: var(--woo-add-product-button-radius); color: inherit; cursor: pointer; display: flex; inset-inline-end: 12px; justify-content: center; opacity: 0.6; padding: 16px; position: absolute; top: 4.1px; z-index: 2; } .woo-add-product__drawer-close:hover, .woo-add-product__drawer-close:focus-visible { opacity: 1; } /* * The X is a filled outline polygon, not a stroked path, so there is no stroke width to raise. * Stroking it in its own colour grows the drawn shape by half the width on every side, which is * what thickens the two arms — over half, at the 1.35 units they are drawn at — and the geometry * itself is untouched. The round join keeps the four corners from throwing a spike. * * The figure below was the whole of the weight *and* the whole of the round while it stood at 1.35 - the * width the arms are drawn at, and so the first figure at which every end closed as a semicircle instead * of a shaved corner - which is the weight the reader asked on the four drawer heads together. At that * figure the arms read 2.7 units against the 2.1 the 0.75 gave them and the 1.85 the 0.5 before it, so * that close was heavier as well as rounder; half the stroke is added to every side, which is what * rounding a filled glyph costs. It still sits a step above the toggle glyphs and reads heavier than the * rest of the header's icons by design rather than by drift. * * The reader then asked the four closes a slight step lighter, and this one stepped with them: the * figure was 1.2 for a round, and the arms read 2.55 units. It is a shade under the drawn width, which is where a * stroked filled glyph gives its round back - each end loses (1.35 - 1.2) / 2 = 0.075 units - 0.075px in the 24-unit * frame this 24px box renders the glyph at - so the ends no longer close as full * semicircles, and the notch is under a fifth of a pixel, which did not read. The 1.35 stands as the * figure at which the round is complete; 0.75 is still the one number for the weight this close wore * before that round. * * The round after took the same step again, so the four closes are a step lighter once more and this one * steps with them: the figure below is 1.05, and the arms read 2.4 units - 0.15 down, which is the step * the round above took, and the smallest this family's notes have figures for. Each end now loses * (1.35 - 1.05) / 2 = 0.15 units - 0.15px in the 24-unit frame - which is still under the fifth of a * pixel that round named as the point the notch would begin to read at, so the ends give back a little * more of their semicircle and the eye still does not find it. The rung after this one, 1.0, leaves * 0.175px and stays under that figure as well; 0.9 passes it at 0.225px and the round would begin to * show, so 1.0 is where this ladder ends rather than the next step's figure. The 1.35 still stands as the * figure at which the round is complete, 1.2 as the figure that was a step under it, and 0.75 as the one * number for the weight this close wore before that pair. */ .woo-add-product__drawer-close svg { display: block; height: 24px; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.05; width: 24px; } /* === panel === */ /* * The panel holds one form, and scrolls on its own: the title band above and the * actions in the foot below stay put, and the fields scroll between them. */ .woo-add-product__panel { color-scheme: dark; flex: 1; overflow-y: auto; /* * The bar is back, deliberately, and drawn by the rules below. A previous pass hid it; the * fields are the only thing in this drawer that scrolls, and with no bar there was nothing to * say the form runs on past the fold — which, on a laptop, it does. Styling a scrollbar is * also the only lever on what the bar looks like. The form itself is only about 640px tall, so * in a window tall enough to hold it whole there is nothing to scroll and no bar to see at all * — the bar is something the shorter windows get, which is where the fields do run past the * fold. * * Those rules are read only where the platform draws a classic bar, and on this machine's * browsers it does not: a probe page holding the panel's own rules beside a plain scroller * showed neither bar painting anything while idle and neither reserving width, because macOS * hands the browser an overlay bar that fades as soon as it is left alone. The strip the rules * below describe is therefore real where they apply and absent at rest where they do not — the * same finding the sidebar's own sheet records, and the reason the bar beside this panel is * drawn as elements rather than asked of the platform. So the 8px below is a choice rather * than an observation, and it is the width that drawn bar wears. * * The standard scrollbar-width and scrollbar-color are deliberately left unset. Setting either * makes Chrome and Safari ignore the rules below and draw their own, wider bar — and this is * the browser the drawer is being looked at in. Firefox, which honours only the standard pair, * still draws a visible bar in the scheme this panel hands it. */ /* * The same 20px the head sets, so the fields stand on the title's own left edge * instead of 4px outside it. * * The top figure was 8px. The reader has since asked it onto the bottom's 20, so the space above * the form's first field matches the space below its last, and both answer the two bands that hold * this panel: the head pads 20px above its border, the foot 20px below its own. Nothing in the form * adds to either figure - the first field carries no top margin and no margin sits on the form - so * this pair is the whole distance. The sides keep the head's 20px. The phone rule below took the * same step for the same reason. */ padding: 20px; } /* * 8px against the panel's 20px of right padding, so where the engine does reserve space for the * bar it comes out of the gutter the fields already leave rather than crowding them, and the * thumb reads as a shape inside the content rather than as the edge of the drawer. It is also the * sidebar's drawn bar's own width, so the two rails are the same width wherever both are seen. */ .woo-add-product__panel::-webkit-scrollbar { width: 8px; } /* * The trough is #202020, the panel's own ground: opaque, so the page behind it never shows * through, and the colour the fields' surface already wears, so the rail reads as one surface * with a thumb on it rather than as a second channel down the drawer's edge. Written out rather * than read through the palette, the way the sidebar's drawn bar writes its own figures out: the * panel is pinned to its dark scheme in every page mode, so there is no light variant for a token * to answer, and the trough and the thumb move as one pair. */ .woo-add-product__panel::-webkit-scrollbar-track { background: #202020; } /* * The rail's fill is the palette's control step, which the reader has now asked onto every control on the * site - this panel's Apply and Clear, the header's search box, the filter's fields and pills and the cards' * buttons - so the rail answers the plates the drawer is built from rather than standing off them. The * figure was written out here as #303030, which is the value that entry held until the reader retuned it. * A step above the trough's #202020, so the pair reads as a rise rather than as one grey band. * Square, and stated rather than left to the platform: the radius that was here drew a full-round * thumb, and the rail this one is matched to — the sidebar's drawn bar — is square-ended, so its * corners and its sides meet the trough's own. A mix of the panel's ink has no part in that: what * the thumb wears is a fixed pair, of which the rest reads the preset and the hover is still named. */ .woo-add-product__panel::-webkit-scrollbar-thumb { background-color: var(--wp--preset--color--control, #292929); border-radius: 0; } /* * Hovering or grabbing it is the one moment it comes forward: #303030, the figure the reader has asked * onto this site's controls, which the header's search box warms to on the same 0.15s fade and this * panel's two footer buttons take with it. * The trough behind it does not move — on the sidebar's bar only the thumb warms, since the strip * there has no counterpart to the search box's plate. */ .woo-add-product__panel::-webkit-scrollbar-thumb:hover { background-color: #303030; } /* === form === */ .woo-add-product__form { display: flex; flex-direction: column; gap: 22px; /* Section to section: the fields read as separate blocks, not a list. */ } /* === fields === */ /* * Labels take the cart's small-caps treatment — 13px, secondary, spaced — the same * voice the drawers use for their counters, so the form reads as part of the panel * rather than as a page that landed in it. */ .woo-add-product__field { display: flex; flex-direction: column; gap: 4px; /* Label to control: the smaller half of the distance; the label's own margin-bottom, below, is the rest. */ min-width: 0; } .woo-add-product__field-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } /* * The filter's label dress, one step under its figure: 16px at weight 500 in the full ink, with the * 0.16px of tracking its section labels carry and their 1.3 of leading. What stood here before that * was the panel's own device - 13px uppercase at 600 in a faint grey, with 0.04em of its own tracking * - and the two do not mix: uppercase at this size reads as a shout, so the treatment came off with * the figure, and the label became the same object as the "Sort" and "Categories" labels the panel * sits beside on the page, at that filter's own 17px. The reader has since asked the labels down * slightly, so it stood a step under them: 1rem, this panel's own base figure, which is the size * its fields and its buttons are set at - the labels measured the controls they named rather than * standing a step above them. * * The reader has now asked them back onto the filter's figure, naming the filter's own "Locate" label * as the size to take, so the step under is given up and the two read as one figure again: 1.0625rem, * which is that label's 17px at this site's 16px root. It is written in rem rather than in em because * the body's own 17.4688px would carry an em past the figure being matched. The figure itself is the * filter's - the block states it as a literal in its own built sheet, which this one does not touch: * the Add Product's label was asked onto it, not the other way about. The rest of the dress already * matched: weight 500, 0.16px of tracking, 1.3 of leading and the same ink, so the size was the only * figure standing between the two. The labels stand a step above the controls they name again, which * is the relation the round before this one took away. */ .woo-add-product__field label { color: var(--woo-add-product-label-fg); font-size: 1.0625rem; font-weight: 500; letter-spacing: 0.16px; line-height: 1.3; /* * Label to control: the theme's global label style puts 11.9px under every label, and with the * field's 4px of flex gap that made the distance 15.9px - a gap rather than a pair. Stated here * at 6px, so the distance is 10px: the pair is still read as one object, with the air between the * label's ink and the control's edge the last two steps have opened up. Scoped to the panel, so * nothing else's labels move. * * !important because this one is reclaimed, not declared against nothing: WooCommerce's * woocommerce-blocktheme.css carries ".woocommerce-page label { margin-bottom: 0.7em }" at the * same specificity, in a sheet that loads after this one - and 0.7em at the label's own size is * the 11.9px the global style was showing at the 17px the label wears again, 11.2px at the 16px it * wore for a round between, either way some three times the field's own 4px of flex gap. */ margin-bottom: 6px !important; } .woo-add-product__field input, .woo-add-product__field select, .woo-add-product__field textarea, /* * The Type control stands on the same ground as the fields: it is a button for the reason the * Category one is, and it takes its fill, ring, corner, padding and type from here rather than * repeating them. */ .woo-add-product__category-button, .woo-add-product__kind-button { background: var(--woo-add-product-field-bg); /* * No ring: the fill alone carries the field's shape. Transparent rather than none, so the * box keeps its 1px and the focus ring still has a border to colour. */ border: 1px solid transparent; /* * The filter's field figure: 8px on the radius rather than the button-radius, 10px 14px of * padding rather than 12px 14px, and weight 500 - the filter sets its trigger and its find * input at 16px/500, which is this sheet's 1rem already. The transparent border stays: this * panel colours it on focus where the filter clears its outline and colours the border itself. */ border-radius: var(--woo-add-product-field-radius); box-sizing: border-box; color: var(--woo-add-product-panel-fg); font-family: var(--woo-add-product-ui-font); font-size: 1rem; font-weight: 500; line-height: normal; margin: 0; max-width: 100%; padding: 10px 14px; /* * The filter's transition, verbatim: all 0.15s ease, where this rule moved only the border and the * ring. It is what carries the hover below as well as the focus the sheet already had. */ transition: all 0.15s ease; width: 100%; } /* * The Category and Type controls are buttons, not selects: a browser draws a select's popup * itself and no sheet reaches inside it, so its rows could never be dressed like the * Location suggestions beside them. The button stands on the same ground as the other * fields — fill, ring, corner, padding and type come from the rule above — and the * chevron is the filter's own, drawn as a stroked polyline so it travels with the ink * instead of being painted in behind the button as a data URI. * * The control now measures what the filter's Categories trigger measures: 38px tall, a 16px * figure at normal leading, its chevron pushed to the far edge by space-between, and 14px of * padding-right rather than the 38px an absolutely positioned background chevron needed. A * long category name is ellipsised rather than wrapped. * * The Type control carries the same rule, named in the selector below: it is the same control with * a different list behind it, so it measures the same and needs nothing of its own. */ .woo-add-product__category-button, .woo-add-product__kind-button { align-items: center; /* * The chevron is a child of the button now, not a background (see render.php). The filter draws * its own as an 18px stroked polyline at stroke-width 3, and a drawn mark is the one thing a * painted one cannot be: currentColor. Painted, this chevron had to be frozen to a literal * (#e4e6ea, and #a5a5a7 before that); drawn, it takes the button's ink, so it greys with the * placeholder label rather than staying full ink beside it. */ cursor: pointer; display: flex; gap: 10px; justify-content: space-between; min-height: 38px; padding-right: 14px; text-align: left; } .woo-add-product__category-value, .woo-add-product__kind-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * The description is the one field that carries more than a line, so it is given a taller floor * than the rest of the form and left draggable from there. */ .woo-add-product__field textarea { min-height: 128px; resize: vertical; } /* * Placeholders wear the grey the cards' brand and location wear: #888888, the palette's ink-muted. Both * .woo-product-brand__value and .woo-product-location__value compute to it - it is the admin menu's * own sub-label grey, which the collection sheet asks those two chips onto, one step back from the * figures either side of them. * * This rule has now stood in three places. It was the muted grey #9a9fa6, the filter's own dark muted; * it was moved to the field's own ink, #e4e6ea, when matching the input was asked for; and it is this * grey now, by request, which puts an empty field a step back from what a filled one says while keeping * the figure the rest of the page mutes in. It is read from the palette token, not written as a hex. */ .woo-add-product__field input::placeholder, .woo-add-product__field textarea::placeholder { color: var(--wp--preset--color--ink-muted, #888888); } /* * "Uncategorised" is not a choice: while it is the one showing, the control takes the * faint colour an empty text field gives its placeholder, and the field's own colour * comes back with a real category. */ /* The same grey, for the select: its placeholder state stands with the brand and the location too. */ .woo-add-product__category-button.is-placeholder, .woo-add-product__kind-button.is-placeholder { color: var(--wp--preset--color--ink-muted, #888888); } /* The Inbox drawer's ring: currentColor, so a field is ringed in its own ink. */ /* * The white edge on a selected field is gone, and so is the edge it left behind: this rule was colouring * the 1px border currentColor and drawing a 2px outline, and the border went first, leaving the outline - * 2px of currentColor, which on this panel is #e4e6ea, near enough to white that a clicked field still * read as if it had grown a border. * * outline: none is stated rather than the declaration simply dropped, because dropping it hands the field * back to the browser's own focus ring, which is a blue box on this browser. The filter's trigger states * outline: none in its own rule, so clearing it is what matching the sidebar means. What stands in its * place is the ground the pointer already uses: a focused field takes #303030, so it still says which one * holds the caret without drawing a line around itself. */ .woo-add-product__field input:focus-visible, .woo-add-product__field select:focus-visible, .woo-add-product__field textarea:focus-visible, .woo-add-product__category-button:focus-visible, .woo-add-product__kind-button:focus-visible { background: #303030; outline: none; } /* * The filter answers the pointer, and so do its fields: the sort trigger goes to #303030 under the * pointer, and it is not only a button - the find input carries the same class and lifts with it, so * a field in that sidebar is never still while it is being aimed at. The rest is the palette's control * step and the pointer takes #303030, written out rather than read from the control-hover entry, which * still holds the older #353535. */ .woo-add-product__field input:hover, .woo-add-product__field select:hover, .woo-add-product__field textarea:hover, .woo-add-product__category-button:hover, .woo-add-product__kind-button:hover { background: #303030; } /* === suggestion lists === */ /* * The Location input sits in a positioned wrapper so its suggestions can hang off it * and float over the fields below, instead of pushing them down the panel while * someone types. The note under the field only ever shows while the list is closed — * either "no places match" or where the picked place was — so the two never want the * same space. */ .woo-add-product__place { position: relative; } /* * The Locate field wears the filter's locate box, marks and all: the same 40px box, the same 46px * inset on the left for the mark it carries there, the same 76px on the right for the two it carries * there, and the same marks. Every figure below was measured on the filter's own rendered box, not * read off its sheet - the sheet leans on colour entries that no longer describe it. * * The magnifier is the filter's own 16.25px one, drawn mirrored, in a plate 8px in from the left with * 2px of the plate's own padding under it so the ink sits where the filter's ink sits; the plate * measures as a border-box, as the filter's does, so the 2px is taken out of its 28px rather than * added under it, and the plate lands 6px down, which is what centring 28px in 40px comes to. * * It is the button the filter's is, not the span it began as: the field searches as typing settles, * so the mark adds no capability - it adds impatience, which is what the mark on the provider's own * box is for. It is there for the visitor who has typed and would rather not wait out the pause, and * for the one who dismissed the list and wants it back. It answers its pointer with the panel's own * control-hover, which is the figure the filter answers its pointers with too. * * The clear mark sits where the filter's clear mark sits: 30px wide by 28px, 47px in from the right * - the filter's own figure, which puts its inner edge one pixel past the 76px the box keeps clear. * That pixel is the filter's off-by-one rather than a mistake here, so it is kept rather than * tidied: these two boxes are meant to measure the same. It holds the filter's 17px cross at its own * stroke, and the filter shows it as soon as the box has text; so does this one, from the derived * state rather than from a script. * * The crosshair is the outermost of the two right-hand marks, 8px in, holding the filter's 19px * crosshair at its own stroke. The filter's asks the browser for a position and then a place * provider for the address under it; so does this one, except that the lookup goes through the * panel's own route, which is the only thing in the panel that speaks to a provider. 8 + 28 = 36 * for the crosshair and 47 + 30 = 77 for the clear: the marks and the gap between them are what the * right inset is for, and both figures are the filter's own. * * While a lookup is out, the filter's own spinner appears beside the field: a 14px ring two pixels * thick with one quarter of it brighter, measured over the border as the filter's ring is and so 14px * across rather than 18, 76px in from the right and centred on the box - the filter's ring, in the * filter's place, hidden again as soon as the answer is in. It needs no room of its own because it * stands inside the inset the box already keeps clear. */ .woo-add-product__place .woo-add-product__place-input { height: 40px; padding-left: 46px; padding-right: 76px; } .woo-add-product__place-mark, .woo-add-product__place-clear, .woo-add-product__place-locate { align-items: center; border-radius: 6px; box-sizing: border-box; display: flex; height: 28px; justify-content: center; position: absolute; top: 6px; width: 28px; } .woo-add-product__place-mark { background: transparent; border: none; color: var(--woo-add-product-panel-fg); cursor: pointer; left: 8px; padding: 0 0 2px; transition: background 0.15s ease, color 0.15s ease; } /* * Hover for the three marks in this field: the magnifier here, and the cross and the crosshair in * the rule further down. They answer a pointer the way the filter's own marks do — a 10% white lift * over whatever they stand on, which is the `background` on `.woo-filter--dark * .woo-filter__find-btn--search:hover`. That lift is a lift, not a colour, so it reads the same on * the panel's #303030 field as it does on the sidebar's; the ink is left at rest in both. */ .woo-add-product__place-mark:hover { background: hsla(0, 0%, 100%, 0.1); } /* The glyph keeps the filter's mirroring; the plate is what turns while a lookup is out. */ .woo-add-product__place-mark svg { display: block; transform: scaleX(-1); } .woo-add-product__place-clear { background: transparent; border: none; color: var(--woo-add-product-panel-fg); cursor: pointer; padding: 0; right: 47px; transition: background 0.15s ease, color 0.15s ease; width: 30px; } .woo-add-product__place-locate { background: transparent; border: none; color: var(--woo-add-product-panel-fg); cursor: pointer; padding: 0; right: 8px; transition: background 0.15s ease, color 0.15s ease; } .woo-add-product__place-clear svg, .woo-add-product__place-locate svg { display: block; } /* * The same lift for the cross and the crosshair. The crosshair has one exception the filter also * keeps for the field it mirrors: while the field is asking, that mark is not answering a pointer, * so it takes no lift until the ask is over — written there as `:hover:not(:disabled)`, here as * `:hover:not(.is-loading)`. */ .woo-add-product__place-clear:hover, .woo-add-product__place-locate:hover:not(.is-loading) { background: hsla(0, 0%, 100%, 0.1); } /* The crosshair while its own lookup is out: faded and inert, as the filter fades and disables its own. */ .woo-add-product__place-locate.is-loading { cursor: default; opacity: 0.5; } /* * A lookup that is out: the filter's own spinner, at the filter's own figure and in the filter's own * place - a 14px ring two pixels thick, one quarter of it brighter than the rest, 76px in from the * right edge and centred on the box, which is just inside the 76px the box keeps clear. It is hidden * whenever nothing is in flight, so it appears where the padding already reserves room and the three * marks beside it never move. */ .woo-add-product__place-spinner { animation: woo-add-product-spin 0.6s linear infinite; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 50%; border-top-color: currentColor; box-sizing: border-box; color: var(--woo-add-product-panel-fg); height: 14px; margin-top: -7px; position: absolute; right: 76px; top: 50%; width: 14px; z-index: 2; } @keyframes woo-add-product-spin { to { transform: rotate(360deg); } } /* * The turn is decoration and the three marks' hover is a fade, so both go where motion is not * wanted. This block sits with the rules it switches off rather than with the sheet's other two, * because what it overrides is declared here. */ @media (prefers-reduced-motion: reduce) { .woo-add-product__place-mark, .woo-add-product__place-clear, .woo-add-product__place-locate, .woo-add-product__place-spinner { animation: none; transition: none; } } .woo-add-product__category, .woo-add-product__kind { position: relative; } .woo-add-product__places, .woo-add-product__categories, .woo-add-product__kinds { background: var(--woo-add-product-panel-bg); border: 1px solid var(--woo-add-product-panel-border); border-radius: var(--woo-add-product-button-radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); inset-inline: 0; list-style: none; margin: 6px 0 0; /* * A cap that answers the screen as well as the menu: the filter's own 300px where there is room for * it, and never more than just under half the viewport where the viewport is the smaller of the two * - a phone in landscape, a laptop with the browser at half height, a keyboard up. svh measures the * phone's *small* viewport, so the cap holds still while the browser's own bars slide away instead * of growing and shrinking with them; the vh line above is what engines that do not know svh use. */ max-height: min(300px, 45vh); max-height: min(300px, 45svh); /* * Scrolling a suggestion to its end scrolls the suggestion, not the panel behind it. Without * this the momentum carries straight on into the form and the field being typed in slides away. */ overscroll-behavior: contain; overflow-y: auto; padding: 4px; position: absolute; top: 100%; z-index: 10; } /* * The filter's row figure: 10px 14px, the padding its sort options and its category rows take. All * three menus now take their row shape from the rules further down - flush rows, square corners, a * tick column - so what stands here is the padding a row is led by and the pointer, and the radius * and the block display are the shape a row would have if none of those rules applied. */ .woo-add-product__place-option, .woo-add-product__category-option, .woo-add-product__kind-option { border-radius: calc(var(--woo-add-product-button-radius) - 2px); cursor: pointer; display: block; padding: 10px 14px; } /* * The row the arrow keys are on, and the one under the pointer, read the same - and they read as the * filter's rows read: a white lift over the menu's ground, where these wore the panel's blue tint. */ .woo-add-product__place-option.is-active, .woo-add-product__place-option:hover, .woo-add-product__category-option.is-active, .woo-add-product__category-option:hover, .woo-add-product__kind-option.is-active, .woo-add-product__kind-option:hover { background: var(--woo-add-product-row-hover); } .woo-add-product__place-label, .woo-add-product__category-label, .woo-add-product__kind-label { color: var(--woo-add-product-panel-fg); display: block; font-size: 1rem; font-weight: 500; line-height: 1.35; } /* * All three menus read as the filter's menus read. The filter's menu is a flat #303030 plate with no * border, an 8px corner, its rows sitting flush (hence padding: 0, and the square row corners * below), a softer and higher shadow, and it opens 4px down rather than 6px. The 264px cap is kept: * the filter's menu never has to scroll and this one does. * * The Location suggestions were the one that kept the older dress - a translucent ground, a 1px * border, the 4px inset and the 6px corner - on the reasoning that they are a different control * from the two pickers. They are the same control to look at: what the form asks for in each is one * choice from a list, and the three lists now carry the same plate and the same rows. */ .woo-add-product__places, .woo-add-product__categories, .woo-add-product__kinds { background: var(--wp--preset--color--control, #292929); border: none; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); margin-top: 4px; padding: 0; z-index: 20; } /* * The filter's rows sit flush and square inside the menu, which is what the menu's own radius is * measured against, and they fade rather than cut as the pointer moves down them. They carry one * label each, at the filter's own padding: the tick column these three menus used to lead with is * gone, because the sidebar's result rows have none and these rows are meant to read as those do. * * What is left of the tick's work is the row the arrows are on. The sidebar shows the row under the * pointer with a lift over the menu's ground - six per cent white, which is the value the shared * token above now carries - and the same lift marks the row Enter would take here, so the keyboard * keeps a cursor without borrowing a shape the sidebar does not have. * * The type is the sidebar's too: 16px at weight 500, which its result rows set on the row itself and * which these did not state, leaving them on the theme's inherited 17.47px at weight 400. */ .woo-add-product__place-option, .woo-add-product__category-option, .woo-add-product__kind-option { align-items: center; border-radius: 0; display: flex; font-size: 16px; font-weight: 500; gap: 10px; transition: background 0.1s ease, color 0.1s ease; } /* The filter's row labels sit at normal leading, where the shared rule above gives 1.35. */ .woo-add-product__place-label, .woo-add-product__category-label, .woo-add-product__kind-label { line-height: normal; } .woo-add-product__place-note { color: var(--woo-add-product-panel-faint); font-size: 0.8125rem; line-height: 1.35; margin: 6px 0 0; } /* * The provider's attribution, under the form rather than in the suggestion list: it * belongs to the panel, not to the choices, and it appears only while the provider that * asks for it is the one answering. */ .woo-add-product__panel-credit { color: var(--woo-add-product-panel-faint); font-size: 0.75rem; letter-spacing: 0.01em; line-height: 1.35; margin: 14px 0 0; } /* * A button mid-save. The panel says so through the buttons themselves, which read * as busy rather than merely dimmed. */ .woo-add-product__action[disabled] { cursor: progress; opacity: 0.6; } /* === form messages === */ .woo-add-product__form-note, .woo-add-product__form-error { font-size: 0.875rem; line-height: 1.4; margin: 0; } .woo-add-product__form-note { color: var(--woo-add-product-panel-muted); } /* The error wears the danger tone whole, the way a condition chip does. */ .woo-add-product__form-error { background: var(--woo-add-product-status-danger-bg); border-radius: var(--woo-add-product-button-radius); color: var(--woo-add-product-status-danger-fg); padding: 8px 12px; } /* * What was just created, with the two places to go next. Set off by the same * hairline the drawers use between their rows - which the reader has since asked * this panel's colours away from, so the rule is transparent now and still 1px: * the block keeps the step it takes under what came before it, and only the ink * has gone. The three dropdown lists keep their border, being the edges of the * popups they are rather than a rule drawn across the panel, and that is what * keeps `--woo-add-product-panel-border` a hook a Global Styles round can retune. */ .woo-add-product__form-done { align-items: baseline; border-top: 1px solid transparent; color: var(--woo-add-product-panel-fg); display: flex; flex-wrap: wrap; font-size: 0.875rem; gap: 4px 12px; margin: 0; padding-top: 16px; } .woo-add-product__form-link { color: var(--woo-add-product-status-info-fg); text-decoration: underline; text-underline-offset: 2px; } .woo-add-product__form-link:hover, .woo-add-product__form-link:focus-visible { color: var(--woo-add-product-panel-fg); } /* === narrow === */ @media (max-width: 480px) { .woo-add-product__field-row { gap: 12px; } } /* Visibility directives own the hidden attribute; keep it authoritative. */ .woo-add-product [hidden] { display: none; } /* === footer === */ /* * The drawer's foot, with nothing in it but the form's two buttons — publish and * save draft. They live outside the form element and belong to it through `form=`, * so they can sit down here while the fields scroll in the panel above. * * Its top rule has had the figure taken out of it in the round that asked this panel's border colours * away, which is where the head's own line went too: transparent rather than none, so the band and the * panel above it part by the same pixel they did. The Inbox panel and the vendor drawer, which gave * their edges the same #252525 on earlier asks, now draw them the same way. */ .woo-add-product__drawer-foot { align-items: center; border-top: 1px solid transparent; display: flex; flex-wrap: wrap; gap: 16px; /* * The band's own depth is the filter sidebar footer's: 20px above and below its pair, measured * there as a 20px 16px band around a 46px button, 86px in all. This foot stood at 16px, which put * the two buttons 16px under the fields' line, and takes the 20px on the ask that its top and * bottom match that sidebar. The sides keep the 20px this drawer's fields run to rather than the * sidebar's 16px: each band is measured against its own panel's edge, not against the other. * * Its top rule is the other half of the ask above, in the same figure and for the same reason - the * Inbox's foot carries 1px of #252525 across its top. It is 1px, so this band's depth becomes 87px * where the 20px of padding above and below its 46px pair came to 86, the rule taking the step the * padding does not, which is the arithmetic that panel's note states for its own foot. Nothing below * is measured against it: the pair keeps its 46px and the band gains its line. */ padding: 20px 20px; } /* * The footer's pair, in the filter sidebar's own figure. Both buttons take what the filter's footer * gives its Apply and Clear: a neutral #303030 under the full ink, the ui family at 17px and weight * 500, the .01rem of tracking this site's controls carry, 10px 16px of padding inside a 46px minimum, * and a pointer state of #353535 on a background-and-colour transition of 0.15s ease. The corner is * 8px - not the 6px button-radius the drawer's chips use - because the filter draws its footer pair * at its field's corner rather than at its chip's. * * Until this, each button wore a condition tone whole: the success pair for Publish, which completes * the product, and the warning pair for Save draft, which leaves it unpublished. They are the * sidebar's neutral pair now, by request; the tones stay in the head of this sheet for the queue * badge, the filled variation and the form's own note and error. * * What the pair does not take from the filter is the split of the row: the filter gives its Apply * three quarters of the footer and its Clear a quarter, where these two still take half each. */ .woo-add-product__action { align-items: center; background: var(--wp--preset--color--control, #292929); border: 0; border-radius: 8px; box-sizing: border-box; color: var(--wp--preset--color--filter-dark-text, #e4e6ea); display: flex; flex: 1 1 0; font-family: var(--woo-add-product-ui-font); font-size: 1.0625rem; font-weight: 500; justify-content: center; letter-spacing: 0.01rem; line-height: normal; min-height: 46px; padding: 10px 16px; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .woo-add-product__secondary { align-items: center; background: var(--wp--preset--color--control, #292929); border: 0; border-radius: 8px; box-sizing: border-box; color: var(--wp--preset--color--filter-dark-text, #e4e6ea); display: flex; flex: 1 1 0; font-family: var(--woo-add-product-ui-font); font-size: 1.0625rem; font-weight: 500; justify-content: center; letter-spacing: 0.01rem; line-height: normal; min-height: 46px; padding: 10px 16px; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } /* * Hover and keyboard focus take the pair one step up the same ladder the filter's footer uses: the * rest to #303030, the figure the reader has asked onto this site's controls - written out rather than * read from the palette's control-hover entry, which still holds the older #353535 - on the 0.15s ease * the rule above * carries. The fill used to be mixed from the button's own tone, which spoke the state on the hue; * there is no hue to speak it on now. */ .woo-add-product__action:hover, .woo-add-product__action:focus-visible, .woo-add-product__secondary:hover, .woo-add-product__secondary:focus-visible { background: #303030; } .woo-add-product__action:focus-visible, .woo-add-product__secondary:focus-visible { outline: 2px solid currentColor; outline-offset: 0; } /* === responsive === */ @media (max-width: 600px) { .woo-add-product__drawer-head { padding: 16px; padding-inline-end: 56px; } /* The head pads 16px here, so the close's own sum changes with it: 0.1px. */ .woo-add-product__drawer-close { top: 0.1px; } /* The top figure takes the same step here: the 0 above the form became the 12 its own bottom carries. */ .woo-add-product__panel { padding: 12px; } .woo-add-product__drawer-foot { padding: 12px; } /* * The suggestions are tapped rather than pointed at here, so a row keeps a 44px box - the * smallest a finger is meant to hit - and the cap comes down with the screen: 240px is about * five rows, which is enough to choose from without covering the field they belong to, and the * svh figures keep that true on a phone held sideways, where the screen is barely 400px tall. * * border-box, as the marks' plate is stated above: the row's 10px 14px of padding is inside the 44px * rather than added to it. Measured without this a row stood 64px, which is not what 44px means - * four rows to a screenful where the cap was meant to hold five. */ .woo-add-product__places, .woo-add-product__categories, .woo-add-product__kinds { max-height: min(240px, 40vh); max-height: min(240px, 40svh); } .woo-add-product__place-option, .woo-add-product__category-option, .woo-add-product__kind-option { box-sizing: border-box; min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .woo-add-product__drawer, .woo-add-product__scrim, /* The fields and the footer chips carry transitions of their own now - the hover the filter * answers the pointer with, and the 0.15s ease the filter moves everything on - so they are * named here with the drawer rather than left to run on a reader who has asked for stillness, and * so are the three menus' rows, which fade over 0.1s as the pointer moves down them, and the clear * mark beside the Locate field, which lifts to control-hover under the pointer. */ .woo-add-product__field input, .woo-add-product__field select, .woo-add-product__field textarea, .woo-add-product__category-button, .woo-add-product__kind-button, .woo-add-product__place-option, .woo-add-product__category-option, .woo-add-product__kind-option, .woo-add-product__place-clear, .woo-add-product__action, .woo-add-product__secondary { transition: none; } } /* === variations === */ .woo-add-product.is-style-ghost .woo-add-product__button { background-color: transparent; } /* * The plate the button stands on, and the pointer that warms it. * * The site's controls wear one pair - the palette's control step at rest, #303030 under the pointer - and the search box, * the sort pill, the section rows and the grid's gallery arrows all read it from the palette's named * tokens; they still do. The Inbox bell beside this button in the cluster took that pair too, and did not * wear it on its button: it wears it on the wrapper group, which is the block's own box. This button * stands on the same plate, and the plate has since been asked onto a pointer figure of its own. * * The four chips of this cluster warm to #303030 on the reader's newest ask, the figure the whole family * of controls takes under the pointer now; they had been asked #353535, and a step past that onto #404040, * for a round each. The figure is written out here rather than read from the palette's control-hover * token, which still spells #353535 - that entry is what would carry this warm away from its family if it * were retuned. The * mark on the plate does not move at all, so the pointer lightens the control and nothing else: the mark's * own #e4e6ea holds at about 11.6 to 1 at rest and about 10.6 to 1 under the pointer. * * On the group rather than on the button, for the two reasons the bell's sheet records. The button * fills its group, so a plate on the group leaves no ring uncovered for the pointer to stand on and the * hover takes one target instead of two. And the ghost variation above declares this button's own * ground transparent with three classes - that rule is what lets the group's plate show through, since * a plate painted on the button would have to be named against it. The variation keeps governing the * button; the plate is the group's. * * :has(> .woo-add-product) scopes it to the group that actually holds this block. The cluster's plates * are siblings in one flex row, and the bare group selector would repaint every one of them - the * search box and the Cart included. * * The figures are the bell's exactly, transition and all, so the pair behaves as one control across the * cluster, and the reduce block is stated under them so it switches off the step it actually names. */ .wp-block-group.has-background:has(> .woo-add-product) { background-color: var(--wp--preset--color--control, #292929) !important; transition: background-color 0.15s ease; } .wp-block-group.has-background:has(> .woo-add-product):hover { background-color: #303030 !important; } @media (prefers-reduced-motion: reduce) { .wp-block-group.has-background:has(> .woo-add-product) { transition: none; } } /* * The plate's width, and the one figure on it the mark does not set. * * Everything else on this sheet measures the mark and the button: the glyph at 1.575em, the four * paddings written in em around it, the 38 by 37 those come to. The plate behind them has been wider * than the button by nothing at all - it is the group the button is dropped into, content-sized to * what it holds, so its width has read the button's width exactly since the mark arrived. The reader * asked it very slightly wider once, and that is the one figure the button cannot give it: a padding on * the button would move the button's own box, which the mark's note above pins by its height and from * which the cluster's spacing is read. So the plate took a padding of its own, 1px at each side, and the * group is what grew: 39 to 41px at the mark's 1.6em. * * The reader then asked that width very slightly down again, in the same breath as a lower mark, and that * ask was answered by the mark rather than by this rule: the glyph gave up a pixel of height and its * width with it, so the button narrowed 39 to 38 and the plate narrowed with it, 41 to 40. Nothing on the * plate was touched to get there, which was the point. * * The reader has now asked the plate very slightly wider, with the mark named nowhere at all, so this rule * is what answers and the quarter pixel a side is the whole of the ask: 1px to 1.25px, the plate 40 to * 40.5. This is the step the first round refused as a route to 40 - 0.5px a side - taken at half its size * and the other way, and the objection it drew comes back at half its strength: the plate's right edge now * lands on a half pixel, where the mark's own narrowing had put every figure on a whole one. The mark * keeps its 31 by 31 and the button its 38 by 37; the quarter pixel the padding gains on the left is what * moves both a quarter of one to the right, and that is the whole of their movement. * * It moves what stands beside it, by the width it holds, and the direction is worth naming because the * cluster is right-justified and does not read that way: this plate's left edge holds and its right edge * takes the difference - the mirror of the round that took a pixel off that same edge - so the three chips * after it, the Inbox, the Cart and the vendor menu, each step half a pixel to the right. * * The height is left alone through all of this: the group's own inline style pins padding-top and * padding-bottom to 0 where the Site Editor wrote it, and the plate's 42.6875 is the line box the mark's * ascent builds, which a side padding cannot reach. A side of 1.5px is the one-line form of going back to * 41, and it is stated in px like these two, so no em base stands between the figure and the box. * * The reader asked the plate very slightly wider a second time, naming the mark nowhere again, and nothing * moved: the quarter pixel a side is already what the rule below states, and the plate measures its 40.5 on * the live page - 40.5 computed, the box 41 rendered - with the button still 38 by 37 and the mark still * 31.5 at its 1.575em. It is recorded here so the figure is not taken a further step on a repeat of the * same ask. What is left above the plate is the half pixel a side named in the paragraph above, and that * is an ask of its own. * * The plate's size is the family's figure now. The reader asked that all four header plates match this one, * and this one measures 40.5 by 42.6875 - 40.5 computed, the box 41 rendered - with its sides stated here * and its height built by the line box the mark's ascent makes. The three beside it stood at 42 by 43.4375 * (the Inbox), 42 by 44.1875 (the Cart) and 42 by 44.4375 (the vendor menu), which is what the row's own * notes had been recording a pair at a time. So this rule states the height the mark builds, 42.6875, and * the three sheets beside this one take the same box: the height is a figure of the family now rather than * the sum each mark's ascent happened to make, and a plate asked to match another can be answered with a * number. Nothing here moves: 42.6875 is what this plate already drew, and it is the figure the other three * are brought to. */ .wp-block-group.has-background:has(> .woo-add-product) { height: 42.6875px !important; padding-left: 1.25px; padding-right: 1.25px; } /* Filled: the success tone becomes a pill, the pair the Publish button wears. */ .woo-add-product.is-style-filled .woo-add-product__button { background-color: var(--woo-add-product-status-success-bg); border-radius: 999px; color: var(--woo-add-product-status-success-fg); padding: 0.5em 0.85em; } .woo-add-product.is-style-filled .woo-add-product__badge { background-color: var(--woo-add-product-status-success-fg); color: var(--woo-add-product-panel-bg); } /* Outline: a hairline ring in the block's own colour. */ .woo-add-product.is-style-outline .woo-add-product__button { border: 1px solid currentColor; border-radius: 999px; padding: 0.5em 0.85em; } /* ------------------------------------------------------------- editor only -- */ /* Help text inside the block's inspector panels (never rendered on the front end). */ .woo-add-product-editor-note { color: #757575; font-size: 12px; line-height: 1.5; margin: 12px 0 0; }