feat(webkit): add frame-box, section-gap, section-title and hero-title - #880
feat(webkit): add frame-box, section-gap, section-title and hero-title#880gabriel-lisboa-azion wants to merge 13 commits into
Conversation
The framed layout set the marketing pages are built from, promoted out of the sample app into the design system. frame-box is the registration frame: a hairline box with a corner mark inside each corner, an optional hatch texture, a borders prop (all|x|y|none) so a neighbour or a divider grid can own an edge, and flush to collapse a junction between two frames to a single hairline. section-gap is that frame used empty, as the air between two sections. Its size steps are one, two or three times --spacing-xxl, so the page rhythm comes from the theme's own scale and inherits its responsiveness. section-title and hero-title are the section and page headers: kind picks the section layout (centered, left, or a two-column horizontal row) and the hero paints an optional accent phrase into its h1.
One story file per component (Default plus the composite axis story and the boolean states), and a Templates/PageExample story that composes the whole set as a marketing page — hero band, a large gap, a horizontal section header, a divider grid of borderless frames, a medium gap, and a centered closing header.
f9559a8 to
a450d95
Compare
84 new snapshots: the 14 gated stories of frame-box, section-gap, section-title and hero-title across the six theme x viewport modes. No existing baseline changes — the set only adds components. The PageExample story gets none because src/stories/templates/ is in the runner's testPathIgnorePatterns.
Acredito que a gente não consiga trabalhar com opacidade. Quando tivermos overlap vai ficar assim
|
Tanto o hatch quanto o flush nao parecem terem efeitos.
|
Hatch nao parece ter efeito no SectionTitle
|
|
Control Panel do sectiongap nao altera o componente |
|
@isaque-bock-azion otimos pontos, ta faltando um pouco de contraste. E tambem o flush das bordas era para funcionar... não sei pq rolou isso. Mas vejo com calma e atualizo. |
Review found a stacked junction reading as two rules. `flush` was a `-mt-px` that pulled the frame up so its own top rule landed ON the neighbour's bottom rule; because the border tokens are semi-transparent, the two composited into a line measurably brighter than every other hairline instead of merging. It now names the sides a neighbour already draws and SUBTRACTS them from this frame's own set, so a shared edge is one rule at one colour and nothing overlaps. That also makes it work on both axes: `flush` (shorthand for `top`) for a vertical stack, `flush="left"` for a horizontal row, a list for a grid cell. Sides and corners are now addressable individually. `borders` and `marks` each take a keyword, a single name, or an explicit list, so a frame can draw one rule or one corner tick. Pairing `flush` with the opposite `marks` keyword is what stops a shared edge carrying two ticks per corner a few pixels apart. The hatch is the section gap's design asset, so `section-gap` gains `hatch` and `section-title` loses it. Its texture was `--border-muted` behind an `opacity-40` wrapper, compounding to roughly 2% — measured rgb(4) on the dark canvas against rgb(26) for the frame's own rules, which is why it read as absent. It now draws at the token's full strength and the radial mask alone does the fading.
… the hatch
Review found the SectionGap `size` control changing nothing. The composite
stories hard-code their props, and `controls: { disable: true }` was nested
under `parameters.docs` — which only governs the Docs page, so the story-view
Controls panel stayed populated and live while the canvas ignored it. Hoisted
to the story-level `parameters`, where it actually hides the tab.
The hatch belongs to the gap, the one band with no copy of its own, so it moves
off both section headers and the hero band onto the two `SectionGap` frames.
Adds a Marks composite and a Hatch story for the gap, and the Flush story now
shows a vertical stack and a horizontal row so the shared edge reads on both
axes.
…rks work Marks are now per corner, so every stacked frame drops its top pair; the hatch draws at the token's full strength; and FrameBox Marks and SectionGap Hatch are new stories. Also prunes the six SectionTitle Hatch snapshots — that story is gone, and the CI update pass leaves obsolete files behind rather than deleting them.
|
@isaque-bock-azion updated — obrigado pelos apontamentos, os três eram reais. Split em dois PRs porque a causa raiz é de token, não de componente. #889 (theme) — a causa raiz do overlap que você apontou. #880 (componentes)
Também deixei cada lado e cada canto endereçáveis individualmente ( Ordem: #889 primeiro, depois rebase do #880 e regenero as baselines. Sem ele o hatch fica com low contrast dos tokens alpha. |
…dgets The three budgets were written earlier in this PR, against a frame-box whose borders/marks were single keywords. The component since gained per-side and per-corner addressing (and flush as a side subtraction), which is what section-gap and section-title inherit by composing it. Measured gzip: frame-box 1.93, section-gap 2.53, section-title 3.59 KB. Collapsing the four corner spans into a v-for was measured and is larger (1.96 KB), so there is no shrink to take here.
|
Bundle budget raise — justification per The size gate started running on this PR once the build paths were flagged, and three entries were over:
These are not raises of a released ceiling: all three budgets were introduced earlier in this same PR (6a53c21), sized against a No shrink was available: the three import only |
3 participants
Summary
frame-box,section-gap,section-titleandhero-title, each with its spec, a browser-mode test suite, a story and a flat export.frame-boxaddresses every side and every corner individually:bordersandmarkseach take a keyword, a single name or an explicit list, andflushnames the sides a neighbour already draws and subtracts them — so a shared edge is one rule at one colour, on either axis (flushfor a stack,flush="left"for a row).section-gapowns the hatch texture; it is the one band with no copy of its own, so the texture gives a break its identity without sitting behind a headline.How to test
pnpm storybook:dev→ Components/Layout/FrameBox → Flush: a vertical stack and a horizontal row. Each shared edge is a single hairline with one mark per corner — not two rules, and not one line at doubled opacity.pnpm webkit:test→ the four co-located suites pass in Chromium, includingaxeon each component.Notes
./frame-box,./section-gap,./section-title,./hero-title), each with asize-limitbudget.--border-default/--border-muted. Those tokens are semi-transparent onmain, so a rule paints a different colour on every backdrop and the hatch reads faint; feat(theme): make the neutral border tokens opaque surface steps #889 makes them opaque steps of the surface palette. This PR needs no change when that lands — merge feat(theme): make the neutral border tokens opaque surface steps #889 first, then rebase here and regenerate baselines.demo/vue-sample:apps/webkit-sampledoes not exist onmain, so it cannot ride in this PR.sizevocabulary issmall | medium | large. Recorded in.specs/section-gap.md§ Theme gaps — exposing it would mean amending the size scale in.claude/rules/prop-vocabulary.md+.claude/hooks/_lib/prop-vocabulary.mjs, which belongs in its own PR.