@hraness/design-kit 0.33.0 → 0.35.0

package/src/react/product-marketing.tsx

@@ -546,6 +546,8 @@ export interface ProductHeroProps {
   readonly heading: string;
   readonly headingId: string;
   readonly headingLevel?: MarketingHeadingLevel;
+  /** An install command or installer selector directly below the summary. */
+  readonly install?: ReactNode;
   readonly name: string;
   /** Product-owned notice after the copy boundary, without an added wrapper. */
   readonly notice?: ReactNode;
@@ -571,6 +573,7 @@ export function ProductHero({
   heading,
   headingId,
   headingLevel = 1,
+  install,
   name,
   notice,
   proof,
@@ -587,11 +590,12 @@ export function ProductHero({
     >
       <div className={classNames("hraness-marketing-hero__copy", undefined, align === "start" ? "start" : "default")}>
         {eyebrow === undefined || eyebrow === "" ? null : <p className={classNames("hraness-marketing-hero__eyebrow", undefined, tone === "accent" ? "accent" : "default")}>{eyebrow}</p>}
-        <p className={classNames("hraness-marketing-hero__name")}>{name}</p>
+        {name === "" ? null : <p className={classNames("hraness-marketing-hero__name")}>{name}</p>}
         <Heading className={classNames("hraness-marketing-hero__heading")} id={headingId} level={headingLevel}>
           {heading}
         </Heading>
         <p className={classNames("hraness-marketing-hero__summary")}>{summary}</p>
+        {install === undefined ? null : <div className={classNames("hraness-marketing-hero__install")}>{install}</div>}
         {example === undefined
           ? null
           : <p className={classNames("hraness-marketing-hero__example")}>{example}</p>}
@@ -627,6 +631,7 @@ export function ProductHero({
 }
 
 export interface MarketingPillar {
+  readonly icon?: ReactNode;
   readonly label: string;
   readonly summary: string;
 }
@@ -636,25 +641,28 @@ export function MarketingPillars({
   className,
   columns,
   pillars,
+  presentation = "columns",
 }: Readonly<{
   ariaLabel: string;
   className?: string;
   /** Static desktop columns without inline styles; omission uses the collection length. Mobile stays one column. */
   columns?: MarketingColumnCount;
   pillars: readonly MarketingPillar[];
+  presentation?: "columns" | "benefits";
 }>) {
-  const rootClassName = marketingColumnClassName("hraness-marketing-pillars", className, columns);
+  const rootClassName = marketingColumnClassName("hraness-marketing-pillars", className, columns, presentation === "benefits" ? "benefits" : "default");
   if (pillars.length === 0) return null;
   return (
     <dl
       aria-label={ariaLabel}
       className={rootClassName}
       data-hraness-marketing="pillars"
+      data-presentation={presentation}
       style={columns === undefined ? { "--hraness-marketing-pillar-columns": String(pillars.length) } as Record<string, string> : undefined}
     >
       {pillars.map((pillar, index) => (
-        <div className={classNames("hraness-marketing-pillars__item", undefined, index === 0 ? "default" : "later")} key={pillar.label}>
-          <dt className={classNames("hraness-marketing-pillars__label")}>{pillar.label}</dt>
+        <div className={classNames("hraness-marketing-pillars__item", undefined, presentation === "benefits" ? "benefit" : index === 0 ? "default" : "later")} key={pillar.label}>
+          <dt className={classNames("hraness-marketing-pillars__label")}>{pillar.icon === undefined ? null : <span aria-hidden="true" className={classNames("hraness-marketing-pillars__icon")}>{pillar.icon}</span>}{pillar.label}</dt>
           <dd className={classNames("hraness-marketing-pillars__summary")}>{pillar.summary}</dd>
         </div>
       ))}
@@ -1148,6 +1156,7 @@ export interface MarketingInterface {
 
 export function MarketingInterfaceGrid({
   className,
+  columns,
   heading,
   headingId,
   headingLevel = 2,
@@ -1157,6 +1166,8 @@ export function MarketingInterfaceGrid({
   summary,
 }: Readonly<{
   className?: string;
+  /** Maximum columns; cards wrap within the available container width. */
+  columns?: MarketingColumnCount;
   heading: string;
   headingId: string;
   headingLevel?: MarketingHeadingLevel;
@@ -1173,7 +1184,7 @@ export function MarketingInterfaceGrid({
       id={id}
     >
       <MarketingCollectionHeader {...{ heading, headingId, headingLevel, label, summary }} prefix="interfaces" />
-      <div className={classNames("hraness-marketing-interface-grid")}>
+      <div className={marketingColumnClassName("hraness-marketing-interface-grid", undefined, columns)}>
         {interfaces.map((entry) => (
           <article className={classNames("hraness-marketing-interface")} key={entry.label}>
             <Heading
@@ -1198,6 +1209,7 @@ export interface MarketingTrustItem {
 
 export function MarketingTrustBoundary({
   className,
+  columns,
   heading,
   headingId,
   headingLevel = 2,
@@ -1207,6 +1219,8 @@ export function MarketingTrustBoundary({
   summary,
 }: Readonly<{
   className?: string;
+  /** Maximum columns; cards wrap within the available container width. */
+  columns?: MarketingColumnCount;
   heading: string;
   headingId: string;
   headingLevel?: MarketingHeadingLevel;
@@ -1223,7 +1237,7 @@ export function MarketingTrustBoundary({
       id={id}
     >
       <MarketingCollectionHeader {...{ heading, headingId, headingLevel, label, summary }} prefix="trust" />
-      <dl className={classNames("hraness-marketing-trust-grid")}>
+      <dl className={marketingColumnClassName("hraness-marketing-trust-grid", undefined, columns)}>
         {items.map((item) => (
           <div className={classNames("hraness-marketing-trust-item")} key={item.label}>
             <dt className={classNames("hraness-marketing-trust-item__label")}>{item.label}</dt>
@@ -1481,8 +1495,10 @@ export function MarketingMaker({
 }
 
 export interface MarketingRelatedProduct {
-  /** Custom artwork in place of `mark`, drawn in the same 44px slot. */
+  /** Custom artwork in place of `mark`, drawn in the same 28px slot. */
   readonly art?: ReactNode;
+  /** Optional public host, displayed beside the product name. */
+  readonly domain?: string;
   readonly href: string;
   /** Transparent product mark, such as a portfolio item's `mark`; drawn as a foil mark before the name. */
   readonly mark?: string;
@@ -1496,39 +1512,54 @@ export interface MarketingRelatedProduct {
   readonly role: string;
 }
 
+export type MarketingRelatedTone = "rose" | "indigo" | "amber" | "emerald" | "neutral";
+
 export interface MarketingRelatedGroup {
+  /** Maximum columns for this group, overriding the section default. */
+  readonly columns?: MarketingColumnCount;
   /** Heading naming this tier of siblings, rendered one level below the section heading. */
   readonly heading: string;
   readonly headingId: string;
   readonly items: readonly MarketingRelatedProduct[];
   readonly summary?: string;
+  /** The category color used on the studio portfolio. */
+  readonly tone?: MarketingRelatedTone;
 }
 
 function MarketingRelatedCards({
+  ariaLabel,
+  columns,
   items,
   level,
 }: Readonly<{
+  ariaLabel?: string;
+  columns?: MarketingColumnCount;
   items: readonly MarketingRelatedProduct[];
   level: MarketingHeadingLevel;
 }>) {
   return (
-    <>
+    <ul aria-label={ariaLabel} className={marketingColumnClassName("hraness-marketing-related__list", undefined, columns)}>
       {items.map((item) => (
-        <a className={classNames("hraness-marketing-related__card")} data-foil="" data-hraness-marketing="card" href={item.href} key={item.name}>
-          {isPresentNode(item.art) || (item.mark !== undefined && item.mark !== "")
-            ? (
-              <span aria-hidden="true" className={classNames("hraness-marketing-related__card-mark")}>
-                {isPresentNode(item.art) ? item.art : <FoilMark size={44} src={item.mark ?? ""} />}
-              </span>
-            )
-            : null}
-          <span className={classNames("hraness-marketing-related__card-text")}>
-            <Heading className={classNames("hraness-marketing-related__card-name")} level={level}>{item.name}</Heading>
-            <span className={classNames("hraness-marketing-related__card-role")}>{item.role}</span>
-          </span>
-        </a>
+        <li className={classNames("hraness-marketing-related__item")} key={item.name}>
+          <a className={classNames("hraness-marketing-related__card")} data-foil="" data-hraness-marketing="card" href={item.href}>
+            {isPresentNode(item.art) || (item.mark !== undefined && item.mark !== "")
+              ? (
+                <span aria-hidden="true" className={classNames("hraness-marketing-related__card-mark")}>
+                  {isPresentNode(item.art) ? item.art : <FoilMark size={28} src={item.mark ?? ""} />}
+                </span>
+              )
+              : null}
+            <div className={classNames("hraness-marketing-related__card-text")}>
+              <div className={classNames("hraness-marketing-related__card-heading")}>
+                <Heading className={classNames("hraness-marketing-related__card-name")} level={level}>{item.name}</Heading>
+                {item.domain === undefined ? null : <span className={classNames("hraness-marketing-related__card-domain")}>{item.domain}</span>}
+              </div>
+              <span className={classNames("hraness-marketing-related__card-role")}>{item.role}</span>
+            </div>
+          </a>
+        </li>
       ))}
-    </>
+    </ul>
   );
 }
 
@@ -1536,9 +1567,10 @@ type MarketingRelatedBody =
   | Readonly<{ groups: readonly MarketingRelatedGroup[]; items?: undefined }>
   | Readonly<{ groups?: undefined; items: readonly MarketingRelatedProduct[] }>;
 
-/** Linked cards for sibling products: each shows the product's mark, name, and one-line description. */
+/** Compact studio product rows, grouped by portfolio category when supplied. */
 export function MarketingRelated({
   className,
+  columns,
   heading,
   headingId,
   headingLevel = 2,
@@ -1549,6 +1581,8 @@ export function MarketingRelated({
   summary,
 }: Readonly<{
   className?: string;
+  /** Maximum columns for each card row; a group can override it. */
+  columns?: MarketingColumnCount;
   heading: string;
   headingId: string;
   headingLevel?: MarketingHeadingLevel;
@@ -1557,6 +1591,7 @@ export function MarketingRelated({
   summary?: string;
 }> &
   MarketingRelatedBody) {
+  const defaultColumnProps = columns === undefined ? {} : { columns };
   return (
     <section
       aria-labelledby={headingId}
@@ -1573,30 +1608,33 @@ export function MarketingRelated({
         summary={summary}
       />
       {groups === undefined
-        ? (
-          <MarketingCardRow>
-            <MarketingRelatedCards items={items} level={childHeadingLevel(headingLevel)} />
-          </MarketingCardRow>
-        )
-        : groups.map((group) => (
-          <div className={classNames("hraness-marketing-related__group")} key={group.headingId}>
-            <div className={classNames("hraness-marketing-related__group-header")}>
-              <Heading
-                className={classNames("hraness-marketing-related__group-heading")}
-                id={group.headingId}
-                level={childHeadingLevel(headingLevel)}
+        ? <MarketingRelatedCards {...defaultColumnProps} items={items} level={childHeadingLevel(headingLevel)} />
+        : (
+          <div className={classNames("hraness-marketing-related__groups")}>
+            {groups.map((group) => (
+              <div
+                aria-labelledby={group.headingId}
+                className={classNames("hraness-marketing-related__group", undefined, group.tone ?? "neutral")}
+                data-tone={group.tone ?? "neutral"}
+                key={group.headingId}
               >
-                {group.heading}
-              </Heading>
-              {group.summary === undefined
-                ? null
-                : <p className={classNames("hraness-marketing-related__group-summary")}>{group.summary}</p>}
-            </div>
-            <MarketingCardRow ariaLabel={group.heading}>
-              <MarketingRelatedCards items={group.items} level={childHeadingLevel(childHeadingLevel(headingLevel))} />
-            </MarketingCardRow>
+                <div className={classNames("hraness-marketing-related__group-header")}>
+                  <Heading
+                    className={classNames("hraness-marketing-related__group-heading")}
+                    id={group.headingId}
+                    level={childHeadingLevel(headingLevel)}
+                  >
+                    {group.heading}
+                  </Heading>
+                  {group.summary === undefined
+                    ? null
+                    : <p className={classNames("hraness-marketing-related__group-summary")}>{group.summary}</p>}
+                </div>
+                <MarketingRelatedCards ariaLabel={group.heading} {...(group.columns === undefined ? defaultColumnProps : { columns: group.columns })} items={group.items} level={childHeadingLevel(childHeadingLevel(headingLevel))} />
+              </div>
+            ))}
           </div>
-        ))}
+        )}
     </section>
   );
 }

package/src/react/server.ts

@@ -3,9 +3,12 @@ export * from "./particle-halo.js";
 export * from "./procedural-backdrop.js";
 export * from "./procedural-recipe.js";
 export * from "./product-marketing.js";
+export * from "./marketing-account.js";
+export * from "./marketing-comparison.js";
 export * from "./surfaces.js";
 export * from "./syntax-code.js";
 export * from "./foil-mark.js";
 export * from "./provider-mark.js";
 export * from "./platform-icons.js";
 export * from "./launch-beats.js";
+export * from "./marketing-diagram.js";

package/src/styles.css

@@ -12,6 +12,8 @@
 @import "./charts.css";
 @import "./plain-site.css";
 @import "./plain-publication.css";
+@import "./marketing-comparison.css";
+@import "./marketing-diagram.css";
 @import "./reading.css";
 @import "./status-page.css";
 @import "./product-marketing.css";

package/src/typography.css

@@ -11,6 +11,12 @@
  * face. */
 @layer base {
   :root {
+    /* Shared studio category accents. Text names retain the foreground role. */
+    --hraness-studio-rose: light-dark(#b03a5b, #f39cb5);
+    --hraness-studio-indigo: light-dark(#4a4fbf, #a9adff);
+    --hraness-studio-amber: light-dark(#9a5a00, #f0b659);
+    --hraness-studio-emerald: light-dark(#1d7a55, #71d2a6);
+
     --hraness-type-reading-size: clamp(1rem, .95rem + .25vw, 1.0625rem);
     --hraness-type-reading-leading: 1.7;
     --hraness-type-reading-measure: 70ch;
@@ -84,3 +90,29 @@
     -webkit-text-fill-color: currentColor;
   }
 }
+
+/* Prose and secondary text actions share a quiet, persistent link affordance. */
+.hraness-text-link,
+.hraness-prose :where(a:not([role="button"], [data-emphasis], [data-foil])),
+.plain-publication__article-body :where(a:not([role="button"], [data-emphasis], [data-foil])),
+.plain-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-foil]) {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+}
+
+.hraness-text-link:is(:hover, :focus-visible),
+.hraness-prose :where(a:not([role="button"], [data-emphasis], [data-foil])):is(:hover, :focus-visible),
+.plain-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-foil]):is(:hover, :focus-visible) {
+  text-decoration-color: currentColor;
+}
+
+@media (forced-colors: active) {
+  .hraness-text-link,
+  .hraness-prose :where(a),
+  .plain-page :where(p, li, dd, dt, figcaption) a {
+    text-decoration-color: LinkText;
+  }
+}