feat(admin): restyle marketplace + plugins admin to "Living systems" brand - #437
Merged
Conversation
tayebmokni
force-pushed
the
feat/brand-marketplace
branch
from
May 25, 2026 22:26
24b52fd to
b9dacc2
Compare
Apply paper-and-forest brand tokens to the catalogue browse page: the headline lands as "Marketplace catalogue." with the italic-serif accent on "catalogue", an emerald eyebrow, and a Geist lead. Filter chips toggle to emerald-soft when active; sort chips swap to a solid ink fill so the two chip rows read distinctly. MarketplaceCard sits on paper-2 with a paper-3 thumb glyph well, Archivo display title, Geist tagline, monospace slug, and a lavender-soft capability chip. Rating stars are emerald-deep on cream — the alive green that runs across the marketplace surface. Tokens used: --paper, --paper-2, --paper-3, --border, --emerald-deep, --emerald-soft, --lavender-soft, --lavender-deep, --fg-muted, --fg-subtle, --r-md, --r-lg, --r-pill, --sh-xs, --sh-md, --sh-focus, --font-display, --font-sans, --font-mono, --t-lg, --t-sm, --t-xs. Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Apply the "Living systems" brand to /marketplace/[slug]: the header lands as a heavy Archivo display title with an italic-serif accent for the author name, an emerald-soft icon well, and a meta row that pairs monospace install counts with the emerald rating stars. The install CTA is the brand's emerald button (alive/positive action). Version history sits in a paper-2 card with mono row IDs and the SHA digest in Geist Mono. The compatibility matrix moves to a paper-3 sunken surface to mark it as reference data. Ratings land as a horizontal review carousel of cream cards with the same emerald stars plus a date in `--font-mono`. Section eyebrows replace the legacy uppercase headings. Tokens used: --paper-2, --paper-3, --emerald, --emerald-deep, --emerald-ink, --emerald-soft, --warning-soft, --danger-soft, --success-soft, --border, --border-subtle, --fg-muted, --fg-subtle, --font-display, --font-serif, --font-sans, --font-mono, --t-2xs, --t-xs, --t-sm, --t-md, --t-2xl, --r-md, --r-lg, --sh-xs. Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
…ilityReview
Apply the "Living systems" brand to the install confirmation surface
and the shared CapabilityReview that both /marketplace/[slug]/install
and /plugins/install render.
CapabilityReview: panel sits on a paper-2 surface with paper header,
each capability is its own paper-2 card with a 22px circular marker.
Sensitive caps swap to a lavender-soft background and a solid lavender
marker; unknown caps stay on warning-soft. Once the consent checkbox
is ticked every non-unknown marker flips to an emerald checkmark —
the row visibly confirms it has been reviewed alongside the panel.
Capability ids land in mono code chips.
InstallConfirm: meta strip uses the brand's card chrome with mono
version label and uppercase eyebrow labels. The Install CTA is the
emerald brand button. The success panel borrows the italic-accent
pattern ("Akismet installed.") with an emerald left border.
Marketplace install page: headline reads "Install <name>." with the
listing name in italic-serif accent, plus an emerald-deep capability
eyebrow and the canonical lead.
Also: replace `border` shorthand on chip styles with non-shorthand
border-{width,style,color} to silence a React style warning.
Tokens used: --paper, --paper-2, --emerald, --emerald-ink,
--emerald-soft, --emerald-deep, --lavender, --lavender-soft,
--lavender-deep, --warning, --warning-soft, --danger, --danger-soft,
--border, --fg-muted, --fg-subtle, --font-display, --font-serif,
--font-sans, --font-mono, --t-2xs, --t-xs, --t-sm, --t-base, --t-md,
--t-lg, --t-xl, --r-xs, --r-md, --r-lg, --sh-xs.
Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Apply the "Living systems" brand to /plugins: the page head reads "Installed plugins." with the italic-serif accent on "plugins" and an emerald-deep eyebrow. The Install CTA is the ink- fill primary button so it reads as the dominant action. Status filter chips swap to emerald-soft when active; the toolbar lives in a paper-2 card with the canonical hairline border. The plugins table sits in a paper-2 card with paper-3 column headers and `--border-subtle` row hairlines. Action buttons get cream chips with `--sh-xs`; the Uninstall button keeps its danger-soft border. Feedback toasts swap legacy blue to emerald-soft success; modals lift to `--sh-lg` on a paper background. PluginStatusBadge now maps state→tokens directly off tokens.css: emerald-soft/emerald-deep for active (alive), paper-3/fg-muted for inactive (quietly present), lavender-soft/lavender-deep for installed, warning-soft/warning for pending_uninstall, danger-soft/danger for errored. Adds a leading pulse dot in `currentColor` so the row is legible without colour. Tests: update the badge palette assertion to inspect the unparsed `background` shorthand (jsdom can't resolve CSS vars to colours). Adds snapshot tests for MarketplaceCard and all five PluginStatusBadge states so the brand contract is locked in. Tokens used: --paper, --paper-2, --paper-3, --emerald-soft, --emerald-deep, --lavender-soft, --lavender-deep, --warning, --warning-soft, --danger, --danger-soft, --ink, --border, --border-subtle, --fg-muted, --fg-subtle, --font-display, --font-serif, --font-sans, --font-mono, --t-xs, --t-sm, --t-xl, --r-sm, --r-md, --r-lg, --r-pill, --sh-xs, --sh-lg. Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
tayebmokni
force-pushed
the
feat/brand-marketplace
branch
from
May 26, 2026 17:32
b9dacc2 to
ae0880b
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Restyles every screen in the GoNext plugin marketplace admin (PR #420)
and installed-plugins admin (PR #385) to the "Living systems"
brand foundation that landed via PR #432. Tokens from
src/styles/tokens.cssare honoured throughout — no hex literals, nolegacy
--color-accent. Each page lands the brand's signatureitalic-serif accent inside a heavy Archivo headline.
/marketplace— catalogue. Headline readsMarketplace catalogue.with the italic-accent on the noun, an emerald eyebrow, and a Geist
lead. Filter chips toggle to
--emerald-softwhen active; sort chipsswap to a solid
--inkfill. MarketplaceCard sits on--paper-2with a paper-3 thumb glyph well, Archivo display title, monospace
slug, lavender-soft capability chip, and emerald rating stars. Cards
lift to
--sh-mdon hover via a 2px transform — the marketplacemoodboard's hover gesture.
/marketplace/[slug]— listing detail. Headline pairs theArchivo title with an italic-serif accent on the author name.
Version history is a paper-2 table with mono row IDs + SHA digests;
the compat matrix lives on
--paper-3sunken surface to read asreference data. Ratings render as a horizontal review carousel of
cream cards with emerald stars.
/marketplace/[slug]/install— confirmation. Headline:Install <name>.with the listing name in italic-serif. The metastrip uses the brand's card chrome with mono version label and
uppercase eyebrow labels. Install CTA is the emerald brand button.
Success panel uses the italic-accent pattern with an emerald
left-border.
CapabilityReview(also rendered by/plugins/install).Each capability row is its own paper-2 card with a 22px circular
marker. Sensitive caps swap to
--lavender-softbackground + solidlavender marker; once the consent box is ticked every non-unknown
marker flips to an emerald checkmark — the row visibly confirms
it has been reviewed.
/plugins— installed plugins list. Headline:Installed plugins.with the italic-accent onplugins. Statusfilter chips and
PluginStatusBadgeshare the brand's semanticpalette: emerald for active (alive), paper-3 / fg-muted for inactive
(quietly present), lavender-soft for installed, warning-soft for
pending uninstall, danger-soft for errored. Badge gains a leading
currentColordot so the row is legible without colour.Test plan
pnpm --filter @gonext/admin lint— clean (only pre-existing<img>warnings in unrelatedmedia/files)pnpm --filter @gonext/admin typecheck— cleanpnpm --filter @gonext/admin test:ci— 349 tests pass,including new snapshot tests for
MarketplaceCardand everyPluginStatusBadgestatepnpm --filter @gonext/admin build— succeeds, marketplace +plugins routes ship under their existing bundle budgets
the snapshot and demand a deliberate update
Tokens audit
Every colour, type ramp, radius, shadow, motion, and spacing in the
diff resolves to a
var(--*)fromtokens.css. The few raw valuesthat remain are intentional: the modal backdrop scrim is
rgba(14, 26, 20, 0.55)(the ink ramp tinted at 55%, no token coversbackdrop overlays) and the icon-well letter sizes are pixel-precise
display measurements.
Co-Authored-By: Claude Opus 4.7 noreply@anthropic.com
🤖 Generated with Claude Code