@hraness/design-kit 0.34.0 → 0.35.1

package/src/react/setup-copy-button.tsx

@@ -0,0 +1,20 @@
+import { setupCopyButtonClassName as cx } from "./setup-copy-button.stylex.js";
+
+/** Presentation only: each setup composition retains its clipboard and recovery behavior. */
+export function SetupCopyButton({ className, iconClassName, onCopy, state, subject, failedLabel = "Copy failed" }: Readonly<{
+  className?: string;
+  iconClassName?: string;
+  onCopy: () => void;
+  state: "idle" | "copying" | "copied" | "failed";
+  subject: string;
+  failedLabel?: string;
+}>) {
+  return (
+    <button aria-busy={state === "copying" || undefined} aria-label={`${state === "copied" ? "Copied" : "Copy"} ${subject}`} className={cx("button", className)} data-copy-state={state} disabled={state === "copying"} onClick={onCopy} type="button">
+      <svg aria-hidden="true" className={cx("icon", iconClassName)} fill="none" focusable="false" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} viewBox="0 0 24 24">
+        {state === "copied" ? <path d="M5 12.5l4.5 4.5L19 7.5" /> : <><rect height="12" rx="2" width="12" x="8" y="8" /><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" /></>}
+      </svg>
+      <span>{state === "copied" ? "Copied" : state === "copying" ? "Copying" : state === "failed" ? failedLabel : "Copy"}</span>
+    </button>
+  );
+}

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;
+  }
+}