@hraness/design-kit 0.36.2 → 0.36.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.36.2",
+  "version": "0.36.4",
   "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.4"
     }
   ],
   "contract": "hraness.portfolio-inventory/v1",

package/src/palette-bridge.css

@@ -101,7 +101,7 @@
   .hraness-palette.hraness-palette[data-palette],
   :root[data-palette][data-theme],
   [data-palette][data-theme],
-  :root[data-palette]:not([data-theme]),
+  :root[data-palette][data-palette]:not([data-theme]),
   [data-palette]:not([data-theme]),
   :root.hraness-palette.hraness-palette[data-theme],
   .hraness-palette.hraness-palette[data-theme] {

package/src/palette-system.css

@@ -1,5 +1,5 @@
 /* Generated by scripts/generate-palettes.ts. System-first palette paint without JavaScript. */
-:root[data-palette="catppuccin"]:not([data-theme]),
+:root[data-palette][data-palette="catppuccin"]:not([data-theme]),
 [data-palette="catppuccin"]:not([data-theme]) {
   color-scheme: light dark;
   --hraness-palette-background: light-dark(#eff1f5, #1e1e2e);
@@ -143,7 +143,7 @@
   --hraness-palette-chart4: #f9e2af;
   --hraness-palette-chart5: #cda9f7;
 }
-:root[data-palette="gruvbox"]:not([data-theme]),
+:root[data-palette][data-palette="gruvbox"]:not([data-theme]),
 [data-palette="gruvbox"]:not([data-theme]) {
   color-scheme: light dark;
   --hraness-palette-background: light-dark(#fbf1c7, #282828);
@@ -287,7 +287,7 @@
   --hraness-palette-chart4: #fabd2f;
   --hraness-palette-chart5: #e2aebc;
 }
-:root[data-palette="rose-pine"]:not([data-theme]),
+:root[data-palette][data-palette="rose-pine"]:not([data-theme]),
 [data-palette="rose-pine"]:not([data-theme]) {
   color-scheme: light dark;
   --hraness-palette-background: light-dark(#faf4ed, #191724);
@@ -431,7 +431,7 @@
   --hraness-palette-chart4: #f6c177;
   --hraness-palette-chart5: #c4a7e7;
 }
-:root[data-palette="tokyo-night"]:not([data-theme]),
+:root[data-palette][data-palette="tokyo-night"]:not([data-theme]),
 [data-palette="tokyo-night"]:not([data-theme]) {
   color-scheme: light dark;
   --hraness-palette-background: light-dark(#e1e2e7, #1a1b26);
@@ -575,7 +575,7 @@
   --hraness-palette-chart4: #e0af68;
   --hraness-palette-chart5: #bb9af7;
 }
-:root[data-palette="paper"]:not([data-theme]),
+:root[data-palette][data-palette="paper"]:not([data-theme]),
 [data-palette="paper"]:not([data-theme]) {
   color-scheme: light dark;
   --hraness-palette-background: light-dark(#f8f7f4, #12100f);

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

@@ -286,14 +286,14 @@ export function DesignSystemGallery({
       <section className="design-gallery__section" id="paper-theme">
         <h2>Paper theme</h2>
         <p>Import paper-theme.css to share warm neutral colors and compact typography without replacing layouts or saved appearance choices.</p>
-        <div className="design-gallery__paper" data-hraness-theme="paper" data-theme="light">
+        <div className="design-gallery__paper" data-hraness-theme="paper" data-palette="paper" data-theme="light">
           <MarketingSiteHeader brand="Light paper" brandHref="#paper-theme" links={[{ href: "#foundation", label: "Foundation" }]} sticky={false} />
           <TopBar surface="glass" title="Glass application header" data-gallery-glass-top-bar="" />
           <h3>Light paper</h3><p>Headers blur scrolling content and become opaque when reduced transparency is preferred.</p>
           <p><a className="design-gallery__paper-link" href="#foundation">Read about the foundation</a></p>
           <Button variant="primary">Create note</Button>
         </div>
-        <div className="design-gallery__paper" data-hraness-theme="paper" data-theme="dark">
+        <div className="design-gallery__paper" data-hraness-theme="paper" data-palette="paper" data-theme="dark">
           <MarketingSiteHeader brand="Dark paper" brandHref="#paper-theme" links={[{ href: "#foundation", label: "Foundation" }]} sticky={false} />
           <TopBar surface="glass" title="Glass application header" data-gallery-glass-top-bar="" />
           <h3>Dark paper</h3><p>The same header treatment follows an explicit dark preference.</p>
@@ -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;
   }
 }