Work Summary — 2026-08-10 20:40

Task

Final piece of the Penpot design-system work: build TutorialTooltip from templates/components/tutorial-tooltip.html.tmpl, completing the three components surveyed at the start of this thread.

What was built

TutorialTooltip - the popover panel itself (not the invisible anchor wrapper <div>, which only carries positioning/click-handler behavior, no visual style of its own). Unlike Button and Accordion, this component has no meaningful visual state variants - its only dynamic behavior is show/hide (CSS popover/open) and a multi-step content walkthrough (swapping which <span> is visible on click), neither of which changes its appearance. Built as a single library component rather than a Variant group, which is the correct fit here, not a shortcut.

Structure: color.card background, 1px border using color.sidebar-border (a token not used by Button or Accordion, since this is the only component that references --sidebar-border in its source CSS), rounded-lg, a literal drop shadow (2px 2px 2px 1px rgb(0 0 0 / 20%) - not backed by any token in the source CSS, so applied as a direct shape shadow rather than invented as one), flex row with content text (fills available space) and a × close glyph (fixed, right-aligned) - mirroring the template's grid-template-columns: 1fr max-content.

Verification

Colors confirmed correct before exporting (fill: #ffffff, stroke: #e6e7f3 - card/sidebar-border in Light theme).
Visual export matches the template's intent: card panel, subtle border, drop shadow, content + close button.
Final full-library sweep: 3 components (Button and Accordion as Variant groups, TutorialTooltip as a single component, confirmed via isVariant()), token sets in expected state (Primitives + Semantic/Light active, Semantic/Dark inactive), all 6 typographies present. No leftover test/diagnostic artifacts anywhere in the file (swept with a name-based search across all pages).

Outcome

This closes out the original "generalize the common elements" request. All three reusable UI components implemented in templates/components/ now exist as real, token-driven Penpot library components, built from the app's actual CSS values (not guessed), with the color/typography foundation they're built on independently reusable for any future component work in this file.

Follow-ups / not done here

Two things flagged during this whole thread that are worth a decision on the code side, independent of Penpot: h5 { font-size: var(--text-md) } in styles/typography.css references an undefined variable (no typography asset was created for H5 as a result); and the TutorialTooltip's box-shadow and animate-pulse (a pulsing opacity animation on the popover, not represented in the static Penpot export) aren't tied to any reusable token, unlike everything else in the file.

2.8 KiB Raw Permalink Blame History Unescape Escape