@neynar/ui 0.1.3 → 0.2.0

package/src/components/ui/typography.tsx

@@ -11,16 +11,18 @@ import { cn } from "@/lib/utils";
  * Uses Tailwind CSS 4 with custom CSS properties for theming.
  * Provides consistent text styling across the entire application.
  *
- * @variant heading - Primary headings for page/section titles (text-lg, font-semibold, leading-tight)
- * @variant subheading - Secondary headings for subsections (text-base, font-medium, leading-relaxed)
- * @variant body - Standard body text for readable content (text-sm, leading-relaxed)
- * @variant bodyEmphasized - Emphasized body text with medium weight for important information (text-sm, font-medium)
- * @variant details - Smaller text for details, captions, and descriptions (text-xs, leading-normal)
- * @variant field - Text for form fields, labels, and input elements (text-base, leading-normal)
- * @variant code - Monospace text for code snippets and technical content (text-base, font-mono)
  * @variant microcopy - Very small text for fine print, timestamps, and metadata (text-microcopy, leading-tight)
- * @variant tableCell - Text optimized for table cell content with proper line height (text-base, leading-normal)
- * @variant tableHeader - Text for table headers with medium weight for emphasis (text-base, font-medium)
+ * @variant detail - Smaller text for details, captions, and descriptions (text-xs, leading-normal)
+ * @variant body - Standard body text for readable content (text-sm, leading-snug)
+ * @variant blogBody - Body text for blog posts and long form content (text-lg, leading-loose)
+ * @variant paragraphLead - Paragraph lead text for blog posts and long form content (text-lg)
+ * @variant eyebrow - Eyebrow text for blog posts and long form content (text-xl)
+ * @variant subHeadline - Secondary headings for subsections (text-base, font-medium, leading-relaxed)
+ * @variant headline - Primary headings for page/section titles (text-lg, font-semibold, leading-tight)
+ * @variant sectionTitle - Section titles (text-2xl, leading-relaxed)
+ * @variant pageTitle - Page titles (text-3xl, leading-relaxed)
+ * @variant displayTitle - Display titles (text-4xl, leading-snug)
+ * @variant heroTitle - Hero titles (text-5xl, leading-snug)
  *
  * @see {@link https://cva.style/docs} CVA documentation for variant patterns
  * @see {@link https://ui.shadcn.com/docs/components/typography} Typography component inspiration
@@ -29,16 +31,19 @@ import { cn } from "@/lib/utils";
 const typographyVariants = cva("", {
   variants: {
     variant: {
-      heading: "text-lg font-semibold leading-tight",
-      subheading: "text-base font-medium leading-relaxed",
-      body: "text-sm leading-relaxed",
-      bodyEmphasized: "text-sm font-medium leading-relaxed",
-      details: "text-xs leading-normal",
-      field: "text-base leading-normal",
-      code: "text-base font-mono leading-normal",
-      microcopy: "text-microcopy leading-tight",
-      tableCell: "text-base leading-normal",
-      tableHeader: "text-base font-medium leading-normal",
+      microcopy: "text-xs",
+      detail: "text-sm",
+      body: "text-base leading-snug",
+      blogBody: "text-lg leading-loose",
+      paragraphLead: "text-lg",
+      eyebrow: "text-xl",
+      subHeadline: "text-2xl",
+      headline: "text-3xl",
+      sectionTitle: "text-4xl leading-relaxed",
+      pageTitle: "text-5xl leading-relaxed",
+      displayTitle: "text-6xl leading-snug",
+      heroTitle: "text-7xl leading-snug",
+      code: "text-base font-mono",
     },
     /**
      * Color variants for different semantic meanings and visual hierarchy
@@ -106,28 +111,35 @@ const typographyVariants = cva("", {
   },
 });
 
+type TypographyVariant =
+  | "microcopy"
+  | "detail"
+  | "body"
+  | "blogBody"
+  | "paragraphLead"
+  | "eyebrow"
+  | "subHeadline"
+  | "headline"
+  | "sectionTitle"
+  | "pageTitle"
+  | "displayTitle"
+  | "heroTitle"
+  | "code";
+
+type TypographyColor =
+  | "default"
+  | "muted"
+  | "accent"
+  | "destructive"
+  | "success"
+  | "warning";
+
 // eslint-disable-next-line unused-imports/no-unused-vars
 type TypographyDocsProps = {
   /** Typography variant that determines text size, weight, and line height @default "body" */
-  variant?:
-    | "heading"
-    | "subheading"
-    | "body"
-    | "bodyEmphasized"
-    | "details"
-    | "field"
-    | "code"
-    | "microcopy"
-    | "tableCell"
-    | "tableHeader";
+  variant?: TypographyVariant;
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -161,9 +173,9 @@ type TypographyDocsProps = {
  */
 type TypographyBaseProps = {
   /** Typography variant that determines text size, weight, and line height */
-  variant?: VariantProps<typeof typographyVariants>["variant"];
+  variant?: TypographyVariant;
   /** Color variant for semantic meaning and visual hierarchy */
-  color?: VariantProps<typeof typographyVariants>["color"];
+  color?: TypographyColor;
   /** Text alignment within the container */
   align?: VariantProps<typeof typographyVariants>["align"];
   /** Text transformation for stylistic effects */
@@ -369,12 +381,12 @@ type H1DocsProps = {
 } & React.HTMLAttributes<HTMLHeadingElement>;
 
 /** Props for H1 heading component */
-type H1Props = Omit<TypographyProps, "as" | "variant">;
+type H1Props = Omit<TypographyProps, "as">;
 
 /**
  * H1 - Primary page heading component
  *
- * The main heading for a page or major section. Uses the "heading" variant with h1 semantic element.
+ * The main heading for a page or major section. Uses the "displayTitle" variant with h1 semantic element.
  * Should be used once per page for proper document outline and SEO.
  *
  * @example
@@ -400,8 +412,8 @@ type H1Props = Omit<TypographyProps, "as" | "variant">;
  * @see {@link H2} Secondary heading component
  * @see {@link Typography} Base typography component
  */
-function H1(props: H1Props) {
-  return <Typography variant="heading" as="h1" {...props} />;
+function H1({ variant = "displayTitle", weight = "bold", ...props }: H1Props) {
+  return <Typography variant={variant} weight={weight} as="h1" {...props} />;
 }
 
 // eslint-disable-next-line unused-imports/no-unused-vars
@@ -441,12 +453,12 @@ type H2DocsProps = {
 } & React.HTMLAttributes<HTMLHeadingElement>;
 
 /** Props for H2 heading component */
-type H2Props = Omit<TypographyProps, "as" | "variant">;
+type H2Props = Omit<TypographyProps, "as">;
 
 /**
  * H2 - Secondary section heading component
  *
- * Section headings that divide page content into logical groups. Uses the "subheading" variant
+ * Section headings that divide page content into logical groups. Uses the "sectionTitle" variant
  * with h2 semantic element. Essential for creating proper document hierarchy.
  *
  * @example
@@ -472,8 +484,8 @@ type H2Props = Omit<TypographyProps, "as" | "variant">;
  * @see {@link H1} Primary heading component
  * @see {@link H3} Tertiary heading component
  */
-function H2(props: H2Props) {
-  return <Typography variant="subheading" as="h2" {...props} />;
+function H2({ variant = "sectionTitle", weight = "bold", ...props }: H2Props) {
+  return <Typography variant={variant} weight={weight} as="h2" {...props} />;
 }
 
 // eslint-disable-next-line unused-imports/no-unused-vars
@@ -513,12 +525,12 @@ type H3DocsProps = {
 } & React.HTMLAttributes<HTMLHeadingElement>;
 
 /** Props for H3 heading component */
-type H3Props = Omit<TypographyProps, "as" | "variant">;
+type H3Props = Omit<TypographyProps, "as">;
 
 /**
  * H3 - Tertiary subsection heading component
  *
- * Subsection headings for further content division. Uses the "subheading" variant
+ * Subsection headings for further content division. Uses the "headline" variant
  * with h3 semantic element for consistent visual hierarchy.
  *
  * @example
@@ -538,8 +550,8 @@ type H3Props = Omit<TypographyProps, "as" | "variant">;
  * - Improves navigation with assistive technologies
  * - Supports table of contents generation
  */
-function H3(props: H3Props) {
-  return <Typography variant="subheading" as="h3" {...props} />;
+function H3({ variant = "headline", weight = "bold", ...props }: H3Props) {
+  return <Typography variant={variant} weight={weight} as="h3" {...props} />;
 }
 
 // eslint-disable-next-line unused-imports/no-unused-vars
@@ -579,12 +591,12 @@ type H4DocsProps = {
 } & React.HTMLAttributes<HTMLHeadingElement>;
 
 /** Props for H4 heading component */
-type H4Props = Omit<TypographyProps, "as" | "variant">;
+type H4Props = Omit<TypographyProps, "as">;
 
 /**
  * H4 - Minor heading component for detailed sections
  *
- * Minor headings for detailed content organization. Uses "bodyEmphasized" variant
+ * Minor headings for detailed content organization. Uses "subHeadline" variant
  * with h4 semantic element for subtle but distinct hierarchy.
  *
  * @example
@@ -601,8 +613,8 @@ type H4Props = Omit<TypographyProps, "as" | "variant">;
  * - Provides fine-grained content organization
  * - Supports screen reader document navigation
  */
-function H4(props: H4Props) {
-  return <Typography variant="bodyEmphasized" as="h4" {...props} />;
+function H4({ variant = "subHeadline", weight = "bold", ...props }: H4Props) {
+  return <Typography variant={variant} weight={weight} as="h4" {...props} />;
 }
 
 // eslint-disable-next-line unused-imports/no-unused-vars
@@ -642,12 +654,12 @@ type H5DocsProps = {
 } & React.HTMLAttributes<HTMLHeadingElement>;
 
 /** Props for H5 heading component */
-type H5Props = Omit<TypographyProps, "as" | "variant">;
+type H5Props = Omit<TypographyProps, "as">;
 
 /**
  * H5 - Small heading component for micro-sections
  *
- * Small headings for very specific content divisions. Uses "bodyEmphasized" variant
+ * Small headings for very specific content divisions. Uses "eyebrow" variant
  * with h5 semantic element.
  *
  * @example
@@ -659,8 +671,8 @@ type H5Props = Omit<TypographyProps, "as" | "variant">;
  * <H5 weight="semibold">Step 1: Setup</H5>
  * ```
  */
-function H5(props: H5Props) {
-  return <Typography variant="bodyEmphasized" as="h5" {...props} />;
+function H5({ variant = "eyebrow", weight = "bold", ...props }: H5Props) {
+  return <Typography variant={variant} weight={weight} as="h5" {...props} />;
 }
 
 // eslint-disable-next-line unused-imports/no-unused-vars
@@ -700,7 +712,7 @@ type H6DocsProps = {
 } & React.HTMLAttributes<HTMLHeadingElement>;
 
 /** Props for H6 heading component */
-type H6Props = Omit<TypographyProps, "as" | "variant">;
+type H6Props = Omit<TypographyProps, "as">;
 
 /**
  * H6 - Smallest heading component for minimal emphasis
@@ -717,8 +729,8 @@ type H6Props = Omit<TypographyProps, "as" | "variant">;
  * <H6 color="muted">Technical Details</H6>
  * ```
  */
-function H6(props: H6Props) {
-  return <Typography variant="details" as="h6" {...props} />;
+function H6({ variant = "body", weight = "bold", ...props }: H6Props) {
+  return <Typography variant={variant} weight={weight} as="h6" {...props} />;
 }
 
 // eslint-disable-next-line unused-imports/no-unused-vars
@@ -758,7 +770,7 @@ type PDocsProps = {
 } & React.HTMLAttributes<HTMLParagraphElement>;
 
 /** Props for P paragraph component */
-type PProps = Omit<TypographyProps, "as" | "variant">;
+type PProps = Omit<TypographyProps, "as">;
 
 /**
  * P - Paragraph component for body text content
@@ -791,7 +803,7 @@ type PProps = Omit<TypographyProps, "as" | "variant">;
  * @see {@link Typography} Base typography component
  */
 function P(props: PProps) {
-  return <Typography variant="body" as="p" {...props} />;
+  return <Typography as="p" {...props} />;
 }
 
 // eslint-disable-next-line unused-imports/no-unused-vars
@@ -989,7 +1001,7 @@ type SmallDocsProps = {
 } & React.HTMLAttributes<HTMLElement>;
 
 /** Props for Small component */
-type SmallProps = Omit<TypographyProps, "as" | "variant">;
+type SmallProps = Omit<TypographyProps, "as">;
 
 /**
  * Small - Fine print component for supplementary information
@@ -1020,8 +1032,8 @@ type SmallProps = Omit<TypographyProps, "as" | "variant">;
  * - Maintains sufficient contrast for readability
  * - Works well with form help text and descriptions
  */
-function Small(props: SmallProps) {
-  return <Typography variant="microcopy" as="small" {...props} />;
+function Small({ variant = "detail", ...props }: SmallProps) {
+  return <Typography variant={variant} as="small" {...props} />;
 }
 
 // eslint-disable-next-line unused-imports/no-unused-vars
@@ -1061,7 +1073,7 @@ type StrongDocsProps = {
 } & React.HTMLAttributes<HTMLElement>;
 
 /** Props for Strong component */
-type StrongProps = Omit<TypographyProps, "as" | "variant">;
+type StrongProps = Omit<TypographyProps, "as">;
 
 /**
  * Strong - Emphasized text component for important content
@@ -1093,7 +1105,7 @@ type StrongProps = Omit<TypographyProps, "as" | "variant">;
  * - Maintains proper emphasis hierarchy in content
  */
 function Strong(props: StrongProps) {
-  return <Typography variant="bodyEmphasized" as="strong" {...props} />;
+  return <Typography weight="bold" as="strong" {...props} />;
 }
 
 // eslint-disable-next-line unused-imports/no-unused-vars
@@ -1133,10 +1145,7 @@ type LeadDocsProps = {
 } & React.HTMLAttributes<HTMLParagraphElement>;
 
 /** Props for Lead component */
-type LeadProps = Omit<TypographyProps, "as" | "variant" | "color"> & {
-  /** Color override for lead text @default "muted" */
-  color?: TypographyProps["color"];
-};
+type LeadProps = Omit<TypographyProps, "as">;
 
 /**
  * Lead - Introductory paragraph component for article openings
@@ -1169,8 +1178,12 @@ type LeadProps = Omit<TypographyProps, "as" | "variant" | "color"> & {
  * - Larger text size improves readability for introductory content
  * - Maintains proper document flow and structure
  */
-function Lead({ color = "muted", ...props }: LeadProps) {
-  return <Typography variant="subheading" as="p" color={color} {...props} />;
+function Lead({
+  variant = "paragraphLead",
+  color = "muted",
+  ...props
+}: LeadProps) {
+  return <Typography variant={variant} as="p" color={color} {...props} />;
 }
 
 // eslint-disable-next-line unused-imports/no-unused-vars
@@ -1224,7 +1237,7 @@ type ADocsProps = {
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
 /** Props for A anchor component */
-type AProps = Omit<TypographyProps, "as" | "variant"> & {
+type AProps = Omit<TypographyProps, "as"> & {
   /** Link destination URL */
   href?: string;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
@@ -1274,7 +1287,6 @@ type AProps = Omit<TypographyProps, "as" | "variant"> & {
 function A({ href, asChild = false, className, ...props }: AProps) {
   return (
     <Typography
-      variant="body"
       as={asChild ? undefined : "a"}
       asChild={asChild}
       className={cn(
@@ -1324,7 +1336,7 @@ type BlockquoteDocsProps = {
 } & React.HTMLAttributes<HTMLQuoteElement>;
 
 /** Props for Blockquote component */
-type BlockquoteProps = Omit<TypographyProps, "as" | "variant">;
+type BlockquoteProps = Omit<TypographyProps, "as">;
 
 /**
  * Blockquote - Quoted text component for citations and excerpts
@@ -1367,7 +1379,6 @@ type BlockquoteProps = Omit<TypographyProps, "as" | "variant">;
 function Blockquote({ className, ...props }: BlockquoteProps) {
   return (
     <Typography
-      variant="body"
       as="blockquote"
       italic
       className={cn("border-l-4 border-border pl-4 my-2", className)}

package/src/styles/globals.css

@@ -7,6 +7,10 @@
 
 :root {
   --radius: 0.625rem;
+
+  /* Neynar Colors */
+  --neynar-surface-base-background: oklch(from #eeeeee l c h);
+
   /* Map Figma colors to shadcn semantic tokens */
   --background: oklch(from #ffffff l c h); /* Surface/Body */
   --foreground: oklch(from #000000 l c h); /* Text/Content/Headers */
@@ -53,11 +57,14 @@
 }
 
 .dark {
+  /* Neynar Colors */
+  --neynar-surface-base-background: oklch(from #161517 l c h);
+
   /* Dark mode using actual Figma-defined dark mode colors */
-  --background: oklch(from #161517 l c h); /* Surface/Body Dark */
-  --foreground: oklch(from #ffffff l c h); /* Text/UI/Active Dark */
-  --card: oklch(from #222222 l c h); /* Surface/Feature Neutral Dark */
-  --card-foreground: oklch(from #ffffff l c h); /* Text/UI/Active Dark */
+  --background: oklch(from #222222 l c h); /* Surface/Body Dark */
+  --foreground: oklch(from #dddddd l c h); /* Text/UI/Active Dark */
+  --card: oklch(from #2d2d2d l c h); /* Surface/Feature Neutral Dark */
+  --card-foreground: oklch(from #dddddd l c h); /* Text/UI/Active Dark */
   --popover: oklch(from #222222 l c h); /* Surface/Body Dark */
   --popover-foreground: oklch(from #ffffff l c h); /* Text/UI/Active Dark */
   --primary: oklch(from #7f62c6 l c h); /* Farcaster Purple */
@@ -101,6 +108,8 @@
 }
 
 @theme inline {
+  --color-neynar-surface-base-background: var(--neynar-surface-base-background);
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -143,11 +152,25 @@
   --color-sidebar-ring: var(--sidebar-ring);
 
   /* Override Tailwind's default fontSize scale to match design system */
-  --text-xs: 0.75rem; /* 12px - Details */
-  --text-sm: 0.875rem; /* 14px - Body */
-  --text-base: 1.0625rem; /* 17px - Sub Headings, Fields, Code, Table */
-  --text-lg: 1.25rem; /* 20px - Headings */
-  --text-microcopy: 0.625rem; /* 10px - Microcopy (custom) */
+  --text-xs: 0.625rem; /* 10px - Microcopy */
+  --text-sm: 0.8125rem; /* 13px - Details */
+  --text-base: 0.9375rem; /* 15px - Body */
+  --text-lg: 1.0625rem; /* 17px - Paragraph Lead, Blog Body */
+  --text-xl: 1.25rem; /* 20px - Headings */
+  --text-2xl: 1.375rem; /* 22px - Paragraph Lead, Blog Body */
+  --text-3xl: 2.25rem; /* 36px - Headline */
+  --text-4xl: 2.8125rem; /* 45px - Section Title */
+  --text-5xl: 3.5rem; /* 56px - Page Title */
+  --text-6xl: 4.5rem; /* 72px - Display Title */
+  --text-7xl: 5.625rem; /* 90px - Hero Title */
+  /* --text-8xl: 6.75rem; */
+  /* --text-9xl: 8.25rem; */
+
+  /* --leading-tight: 1.1; */
+  --leading-snug: 1.1;
+  --leading-normal: 1.2;
+  --leading-relaxed: 1.4;
+  --leading-loose: 1.5;
 }
 
 @layer base {
@@ -155,6 +178,6 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-neynar-surface-base-background text-foreground;
   }
 }