jhxk68cdy: Add the five approved button styles, the glossy icon button and a dev story page

2026-10-19 21:55:26 -06:00
parent 3306a24d33
commit dd47cfd911
7 changed files with 1010 additions and 3 deletions
@@ -0,0 +1,79 @@
+// Every button style and state, in one theme scope. Used by the dev story page
+// (src/app/dev/buttons) and the button tests.
+import type { CSSProperties, ReactNode } from "react";
+import type { Theme } from "@/lib/theme";
+import { DepthButton, FlipButton, GrowButton, IconButton, SendIcon, SparkleButton, SweepButton } from "./Buttons";
+
+const scope: CSSProperties = {
+  background: "var(--bg)",
+  color: "var(--ink)",
+  padding: "32px 28px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 28,
+};
+const row: CSSProperties = { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 14 };
+const heading: CSSProperties = { margin: "0 0 10px", fontSize: 12, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--ink-3)" };
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section>
+      <h2 style={heading}>{title}</h2>
+      <div style={row}>{children}</div>
+    </section>
+  );
+}
+
+const FlameIcon = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.7} strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 21c4 0 7-2.8 7-6.8 0-4.5-4-6.7-5-11.2-2.3 1.7-3.5 4-3.2 6.5C9.5 9 8.6 8 8.3 6.6 6.3 8.5 5 10.9 5 14.2 5 18.2 8 21 12 21z" />
+  </svg>
+);
+const TrashIcon = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M4 7h16M9 7V4.5h6V7M6.5 7l1 13h9l1-13" />
+  </svg>
+);
+const PlayIcon = (
+  <svg viewBox="0 0 24 24" aria-hidden="true">
+    <path d="M8 5.5v13l11-6.5z" fill="currentColor" />
+  </svg>
+);
+
+export function ButtonGallery({ theme }: { theme: Theme }) {
+  return (
+    <div data-theme={theme} style={scope} aria-label={`Buttons, ${theme} theme`} role="region">
+      <h1 className="type-title type-title-strong" style={{ margin: 0 }}>
+        {theme === "dark" ? "Dark" : "Light"} theme
+      </h1>
+      <Section title="Flip reveal: ready, disabled, posting">
+        <FlipButton state="ready" type="button" />
+        <FlipButton state="disabled" type="button" />
+        <FlipButton state="posting" type="button" />
+      </Section>
+      <Section title="Circle expand">
+        <GrowButton label="3 new posts" />
+      </Section>
+      <Section title="Outline fill sweep">
+        <SweepButton label="Business" selected />
+        <SweepButton label="Media" selected={false} />
+        <SweepButton label="Cancel" />
+      </Section>
+      <Section title="Soft depth, rising liquid">
+        <div style={{ width: 280 }}>
+          <DepthButton label="Trending minnects" sublabel="What people are watching" icon={FlameIcon} />
+        </div>
+      </Section>
+      <Section title="Sparkle glow: sign in, mobile new post">
+        <SparkleButton label="Sign in" />
+        <SparkleButton variant="fab" label="New post" />
+      </Section>
+      <Section title="Glossy crimson icon button">
+        <IconButton label="Send comment" icon={<SendIcon />} />
+        <IconButton label="Delete post" icon={TrashIcon} size="sm" />
+        <IconButton label="Play video" icon={PlayIcon} shape="round" />
+        <IconButton label="Send comment (disabled)" icon={<SendIcon />} disabled />
+      </Section>
+    </div>
+  );
+}