@atelic-action/ui 0.5.0 → 0.6.1

package/README.md

@@ -71,6 +71,17 @@ import { Footer, SiteHeader, SkipLink, StickyCTABar } from "@atelic-action/ui/ch
 </div>;
 ```
 
+A sent artifact's header names who the document is for as well as who it is
+from: pass `recipient: { src, alt }` on the `brand` (added 0.6.0) and the
+lockup reads "atelic × <their mark>", the sender's wordmark and run first, a
+quiet times sign, then the recipient's mark at wordmark height. Cut the mark
+for the surface the header wears (a light mark for the dark bar) and keep it
+an image; the chrome draws no second wordmark. A marketing site's lockup
+passes no recipient. The run after the wordmark reads `--brand-accent` when
+the theme sets it (a client branded host pins the sender's orange there) and
+falls back to `--primary` (0.6.1), and the recipient's mark sits at the same
+30 pixel height as the sender's.
+
 The menu is a native `<dialog>` opened with `showModal()`, so Escape, focus containment, and focus return come from the browser.
 
 ## The Not Found Page

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/ui",
-	"version": "0.5.0",
+	"version": "0.6.1",
 	"description": "Shared UI for the Atelic templates: site chrome, base styles, and the component library they install",
 	"type": "module",
 	"license": "UNLICENSED",

package/src/chrome/BrandLockup.tsx

@@ -9,12 +9,17 @@ export interface BrandLockupProps {
 /**
  * The header's identity as one link: the mark (a glyph tile or an image),
  * the wordmark, and the trailing run. The image carries empty alt text
- * because the link's own label already names it.
+ * because the link's own label already names it. On a sent artifact the
+ * recipient's mark follows, after a times sign: "atelic × Wynkoop Athletics",
+ * the sender's identity and the business the document is for in one lockup.
+ * The anchor's aria-label folds in the recipient's alt too, since it
+ * overrides accessible-name computation for every child, image alt included.
  */
 export function BrandLockup({ brand, ariaLabel }: BrandLockupProps) {
-	const { name, href = "/", logo } = brand;
+	const { name, href = "/", logo, recipient } = brand;
+	const label = ariaLabel ?? (recipient ? `${name} × ${recipient.alt} home` : `${name} home`);
 	return (
-		<a className="nav-logo" href={href} aria-label={ariaLabel ?? `${name} home`}>
+		<a className="nav-logo" href={href} aria-label={label}>
 			{logo?.tile ? (
 				<span className="logo-tile" aria-hidden="true">
 					{logo.tile}
@@ -24,6 +29,14 @@ export function BrandLockup({ brand, ariaLabel }: BrandLockupProps) {
 			)}
 			<span className="wordmark">{logo?.wordmark ?? name}</span>
 			{logo?.run && <span className="wordmark-run" aria-hidden="true" />}
+			{recipient && (
+				<>
+					<span className="nav-x" aria-hidden="true">
+						×
+					</span>
+					<img className="nav-recipient" src={recipient.src} alt={recipient.alt} />
+				</>
+			)}
 		</a>
 	);
 }

package/src/styles/chrome.css

@@ -30,7 +30,10 @@
 		height: 2px;
 		margin-left: 0.38em;
 		vertical-align: middle;
-		background: linear-gradient(90deg, var(--primary), transparent);
+		/* The run is the sender's, so it reads the brand accent a client
+		   branded host pins (GATE.md, Branding an artifact host) and falls
+		   back to the primary on a site wearing its own palette. */
+		background: linear-gradient(90deg, var(--brand-accent, var(--primary)), transparent);
 	}
 	/* The glyph tile mark (logo.tile): the favicon's design as real DOM text,
 	   so the brand webfont renders it, which an SVG loaded through an img
@@ -101,6 +104,23 @@
 		height: 30px;
 		width: 30px;
 	}
+	/* The recipient half of a sent artifact's lockup (BrandLockup: recipient):
+	   a quiet times sign in the mono face, then the business's mark at
+	   wordmark height. */
+	.mkt .nav-logo .nav-x {
+		font-family: var(--font-mono);
+		font-weight: 400;
+		font-size: 0.9rem;
+		color: color-mix(in srgb, currentColor 55%, transparent);
+		margin: 0 2px;
+	}
+	.mkt .nav-logo .nav-recipient {
+		/* Matches the sender's mark, so a square recipient mark reads at the
+		   same size as the sender's would; a wide wordmark simply runs longer. */
+		height: 30px;
+		width: auto;
+		display: block;
+	}
 	.mkt .nav-links {
 		display: none;
 		align-items: center;

package/src/types.ts

@@ -20,12 +20,26 @@ export interface BrandLogo {
 	run?: boolean;
 }
 
+/**
+ * The recipient half of a sent artifact's lockup: the business a document
+ * was prepared for, whose mark follows the sender's wordmark after a times
+ * sign. An image cut for the surface the header wears (a light mark on the
+ * dark bar), never a wordmark string, since the sender's type is the one
+ * face the chrome draws in.
+ */
+export interface BrandRecipient {
+	src: string;
+	alt: string;
+}
+
 /** The identity a header or footer wears. */
 export interface Brand {
 	name: string;
 	/** Where the lockup points. Defaults to "/". */
 	href?: string;
 	logo?: BrandLogo;
+	/** Set on a sent artifact's header only; a marketing site's lockup has no recipient. */
+	recipient?: BrandRecipient;
 }
 
 /** An entry in a site's primary nav. */