@hraness/design-kit 0.36.2 → 0.36.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.36.2",
+  "version": "0.36.3",
   "description": "React components and CSS for Hraness apps and product sites: application shells, marketing sections, charts, themes, effects, and syntax highlighting. Built on @hraness/ui.",
   "license": "MIT",
   "type": "module",

package/portfolio-inventory.json

@@ -6,7 +6,7 @@
       "name": "@hraness/design-kit",
       "path": ".",
       "visibility": "public",
-      "version": "0.36.2"
+      "version": "0.36.3"
     }
   ],
   "contract": "hraness.portfolio-inventory/v1",

package/src/plain-publication.css

@@ -725,8 +725,10 @@
   text-underline-offset: 0.18em;
 }
 
-.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body a:is(:hover, :focus-visible) {
-  text-decoration-color: currentColor;
+@media (forced-colors: none) {
+  .plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body a:is(:hover, :focus-visible) {
+    text-decoration-color: currentColor;
+  }
 }
 
 .plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body pre {
@@ -952,6 +954,7 @@
     background: Canvas;
   }
 
+  .plain-site.plain-publication.plain-publication--embedded .plain-publication__byline a,
   .plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body a {
     text-decoration-color: LinkText;
   }

package/src/react/design-gallery.tsx

@@ -593,7 +593,7 @@ export function DesignSystemGallery({
             { label: "Bring your model", values: [true, { status: "optional", label: "On some plans" }] },
             { label: "Local storage", values: [true, { status: "depends", detail: "Check the provider's export format." }] },
             { label: "Cost", values: ["Free locally", "Subscription"] },
-          ]} note="An illustrative comparison. Product pages supply current facts and sources." />
+          ]} note={<span>An illustrative comparison. Product pages supply current facts and <a href="#articles">sources</a>.</span>} />
           <MarketingAccount id="gallery-account" summary="Keep your preferences and shared work together.">
             <MarketingAccountActions primary={{ href: "#gallery-account", label: "Create account" }} signIn={{ href: "#gallery-account" }} />
           </MarketingAccount>
@@ -695,7 +695,7 @@ export function DesignSystemGallery({
               ]}
             />
           )}
-          author={{ kind: "organization", name: "Hraness" }}
+          author={{ kind: "organization", name: "Hraness", href: "https://hraness.com" }}
           dek="Relay replays a failed webhook from the stored request body, so the retry sends the same bytes the provider signed."
           eyebrow="Technique"
           heading="Replaying webhooks without breaking signatures"
@@ -714,7 +714,7 @@ export function DesignSystemGallery({
         >
           <h2 id="gallery-article-problem">The problem</h2>
           <p>
-            A provider signs the exact request body. Parsing the JSON and serializing it again changes
+            A provider signs the <a href="#gallery-article-approach">exact request body</a>. Parsing the JSON and serializing it again changes
             whitespace and key order, and the signature check then fails on every retry.
           </p>
           <ArticleCallout label="Limit" tone="limit">
@@ -758,6 +758,7 @@ export function DesignSystemGallery({
             },
           ]}
         />
+        <p className="plain-publication__provenance"><a href="#gallery-article-title">Read the article</a></p>
         <div className="hraness-prose">
           <h3>Shared reading scale</h3>
           <p>

package/src/typography.css

@@ -94,7 +94,7 @@
 /* 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])),
+:is(.plain-publication__article-body, .plain-publication__sources, .plain-publication__provenance, .hraness-marketing-comparison__note) :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;
@@ -103,16 +103,20 @@
   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: none) {
+  .hraness-text-link:is(:hover, :focus-visible),
+  .hraness-prose :where(a:not([role="button"], [data-emphasis], [data-foil])):is(:hover, :focus-visible),
+  :is(.plain-publication__article-body, .plain-publication__sources, .plain-publication__provenance, .hraness-marketing-comparison__note) :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 {
+  .hraness-prose :where(a:not([role="button"], [data-emphasis], [data-foil])),
+  :is(.plain-publication__article-body, .plain-publication__sources, .plain-publication__provenance, .hraness-marketing-comparison__note) :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-color: LinkText;
   }
 }