Skip to content

Add product-landscape.css and the page drawing host contract - #157

Merged
0thernet merged 1 commit into
mainfrom
codex/product-landscape
Oct 5, 2026
Merged

0thernet merged 1 commit into
mainfrom
codex/product-landscape

Conversation

@0thernet

@0thernet 0thernet commented Oct 5, 2026

Copy link
Copy Markdown
Member

Summary

  • Adds src/product-landscape.css: one product-specific drawing painted behind public marketing, documentation, and blog pages. The product supplies a grayscale luminance mask; the kit tints it from the page's text and background palette, tiles it down the page (repeat-y) so long pages never run out, swaps in a narrow image on phones, and hides it in forced colors and print.
  • Host contract: data-hraness-landscape="page" paints behind the whole page, "contained" behind one element, "off" suppresses inherited scenery on application routes. No host or no configured image means no visual change.
  • Surface hooks: data-hraness-landscape-surface="clear"|"solid"|"glass" — wrappers clear, code blocks and tables stay opaque with rounded edges, small cards frost over the drawing and fall back to opaque without backdrop support, under reduced transparency, and in forced colors.
  • MarketingPage gains a typed landscape?: "page" | "contained" | "off" prop that emits the attribute and rejects unknown values with RangeError.
  • Exported as @hraness/design-kit/product-landscape.css and included in styles.css and compiler-foundation.css. Documented in LANDSCAPE.md; DESIGN.md records the landscape as the sanctioned exception to the Quiet direction for page-level drawings.
  • Prepares the v0.41.0 release.

Test plan

  • Unit: stylesheet contract (self-contained, no @import/url(), export wiring, MarketingPage host values and RangeError on unknown values
  • Browser: scripts/product-landscape-browser.ts — page tiling, contained host, off suppression, narrow image, clear/glass/solid surfaces, forced colors, print
  • bun run lint, bun run typecheck, bun run build (dist regenerated)

Generated with Devin

@0thernet
0thernet enabled auto-merge (squash) October 5, 2026 03:51
@0thernet
0thernet force-pushed the codex/product-landscape branch 4 times, most recently from c80001d to 5a6595b Compare October 5, 2026 04:14
One opt-in primitive draws a product's grayscale luminance mask behind
public marketing, documentation, and blog pages: tinted from the page's
own foreground over its background, tiled vertically so long pages never
run out of scenery, swapped for a narrow image on phones, and hidden for
forced colors and print.

Hosts opt in with data-hraness-landscape="page" (or MarketingPage's
landscape prop), application routes opt out with "off", and "contained"
draws behind one element. Over the drawing, page wrappers clear to the
body colour, code blocks and tables keep opaque rounded surfaces, and
small cards and callouts become frosted panels that fall back to opaque
without backdrop support, under reduced transparency, and in forced
colours. Products pick per-surface behaviour with
data-hraness-landscape-surface="clear"|"solid"|"glass".

Without a host or --hraness-landscape-image the ruleset is fully inert.
styles.css and compiler-foundation.css include it; released as v0.41.0.
See LANDSCAPE.md for the image contract and rollout notes.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@0thernet
0thernet force-pushed the codex/product-landscape branch from 5a6595b to 8947a49 Compare October 5, 2026 04:33
@0thernet
0thernet merged commit ff54061 into main Oct 5, 2026
8 checks passed
@0thernet
0thernet deleted the codex/product-landscape branch October 5, 2026 04:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant