@neynar/ui 0.2.1 → 0.3.1

package/src/components/ui/typography.tsx

@@ -11,18 +11,19 @@ import { cn } from "@/lib/utils";
  * Uses Tailwind CSS 4 with custom CSS properties for theming.
  * Provides consistent text styling across the entire application.
  *
- * @variant microcopy - Very small text for fine print, timestamps, and metadata (text-microcopy, leading-tight)
- * @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 microcopy - Very small text for fine print, timestamps, and metadata (text-xs)
+ * @variant detail - Smaller text for details, captions, and descriptions (text-sm)
+ * @variant body - Standard body text for readable content (text-base, 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)
+ * @variant subHeadline - Secondary headings for subsections (text-2xl)
+ * @variant headline - Primary headings for page/section titles (text-3xl)
+ * @variant sectionTitle - Section titles (text-4xl, leading-relaxed)
+ * @variant pageTitle - Page titles (text-5xl, leading-relaxed)
+ * @variant displayTitle - Display titles (text-6xl, leading-snug)
+ * @variant heroTitle - Hero titles (text-7xl, leading-snug)
+ * @variant code - Monospace font for inline code, terminal commands, and technical references (text-base, font-mono)
  *
  * @see {@link https://cva.style/docs} CVA documentation for variant patterns
  * @see {@link https://ui.shadcn.com/docs/components/typography} Typography component inspiration
@@ -50,6 +51,7 @@ const typographyVariants = cva("", {
      *
      * @variant default - Default text color that adapts to light/dark theme (text-foreground)
      * @variant muted - Subdued text color for secondary information and descriptions (text-muted-foreground)
+     * @variant faint - Very subtle text color for minimal visual prominence (text-neynar-faint-foreground)
      * @variant accent - Accent color for emphasis, highlights, and interactive elements (text-accent-foreground)
      * @variant destructive - Red color for error messages, warnings, and destructive actions (text-destructive)
      * @variant success - Green color for success messages, confirmations, and positive states (text-success)
@@ -58,6 +60,7 @@ const typographyVariants = cva("", {
     color: {
       default: "text-foreground",
       muted: "text-muted-foreground",
+      faint: "text-neynar-faint-foreground",
       accent: "text-accent-foreground",
       destructive: "text-destructive",
       success: "text-success",
@@ -129,6 +132,7 @@ type TypographyVariant =
 type TypographyColor =
   | "default"
   | "muted"
+  | "faint"
   | "accent"
   | "destructive"
   | "success"
@@ -347,13 +351,7 @@ function Typography({
 // eslint-disable-next-line unused-imports/no-unused-vars
 type H1DocsProps = {
   /** 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 */
@@ -419,13 +417,7 @@ function H1({ variant = "displayTitle", weight = "bold", ...props }: H1Props) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type H2DocsProps = {
   /** 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 */
@@ -491,13 +483,7 @@ function H2({ variant = "sectionTitle", weight = "bold", ...props }: H2Props) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type H3DocsProps = {
   /** 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 */
@@ -557,13 +543,7 @@ function H3({ variant = "headline", weight = "bold", ...props }: H3Props) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type H4DocsProps = {
   /** 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 */
@@ -620,13 +600,7 @@ function H4({ variant = "subHeadline", weight = "bold", ...props }: H4Props) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type H5DocsProps = {
   /** 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 */
@@ -678,13 +652,7 @@ function H5({ variant = "eyebrow", weight = "bold", ...props }: H5Props) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type H6DocsProps = {
   /** 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 */
@@ -736,13 +704,7 @@ function H6({ variant = "body", weight = "bold", ...props }: H6Props) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type PDocsProps = {
   /** 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 */
@@ -809,25 +771,9 @@ function P(props: PProps) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type SpanDocsProps = {
   /** 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 */
@@ -893,13 +839,7 @@ function Span(props: SpanProps) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type CodeDocsProps = {
   /** 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 */
@@ -967,13 +907,7 @@ function Code(props: CodeProps) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type SmallDocsProps = {
   /** 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 */
@@ -1039,13 +973,7 @@ function Small({ variant = "detail", ...props }: SmallProps) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type StrongDocsProps = {
   /** 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 */
@@ -1111,13 +1039,7 @@ function Strong(props: StrongProps) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type LeadDocsProps = {
   /** Color variant for semantic meaning and visual hierarchy @default "muted" */
-  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 */
@@ -1189,25 +1111,9 @@ function Lead({
 // eslint-disable-next-line unused-imports/no-unused-vars
 type ADocsProps = {
   /** 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 */
@@ -1302,13 +1208,7 @@ function A({ href, asChild = false, className, ...props }: AProps) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type BlockquoteDocsProps = {
   /** 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 */

package/src/index.ts

@@ -1,9 +1,12 @@
 // Form & Input Components
 export * from "./components/ui/button";
+export * from "./components/ui/button-group";
 export * from "./components/ui/text-field";
+export * from "./components/ui/field";
 export * from "./components/ui/select";
 export * from "./components/ui/combobox";
 export * from "./components/ui/input";
+export * from "./components/ui/input-group";
 export * from "./components/ui/textarea";
 export * from "./components/ui/checkbox";
 export * from "./components/ui/switch";
@@ -44,6 +47,7 @@ export * from "./components/ui/drawer";
 
 // Typography
 export * from "./components/ui/typography";
+export * from "./components/ui/kbd";
 
 // Data Display
 export * from "./components/ui/table";
@@ -53,6 +57,9 @@ export * from "./components/ui/alert";
 export * from "./components/ui/progress";
 export * from "./components/ui/skeleton";
 export * from "./components/ui/empty-state";
+export * from "./components/ui/empty";
+export * from "./components/ui/item";
+export * from "./components/ui/spinner";
 export * from "./components/ui/sonner";
 
 // Interactive Controls

package/src/styles/globals.css

@@ -6,113 +6,101 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --radius: 0.625rem;
+  --radius: 0.5rem;
 
   /* Neynar Colors */
-  --neynar-surface-base-background: oklch(from #eeeeee l c h);
+  --neynar-surface-base-background: #eeeeee;
+  --neynar-faint-foreground: rgb(0, 0, 0, 0.45);
 
   /* 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 */
-  --card: oklch(from #ffffff l c h); /* Surface/Body */
-  --card-foreground: oklch(from #000000 l c h); /* Text/Content/Headers */
-  --popover: oklch(from #ffffff l c h); /* Surface/Body */
-  --popover-foreground: oklch(from #000000 l c h); /* Text/Content/Headers */
-  --primary: oklch(from #7f62c6 l c h); /* Farcaster Purple */
-  --primary-foreground: oklch(from #ffffff l c h); /* Text/UI/White (fixed) */
-  --secondary: oklch(from #eeeeee l c h); /* Surface/Base */
-  --secondary-foreground: oklch(from #000000 l c h); /* Text/Content/Headers */
-  --muted: oklch(from #eeeeee l c h); /* Surface/Base */
-  --muted-foreground: oklch(from #777777 l c h); /* Text/UI/Default */
-  --accent: oklch(from #f0ebfa l c h); /* Elevation/Info/Neutral */
-  --accent-foreground: oklch(from #7360a1 l c h); /* Text/UI/Muted Info */
-  --destructive: oklch(from #ad1b20 l c h); /* Tables/Method/DEL (text) */
-  --destructive-foreground: oklch(
-    from #ffffff l c h
-  ); /* Text/UI/White (fixed) */
-  --success: oklch(from #16a34a l c h); /* Success/Green */
-  --success-foreground: oklch(from #ffffff l c h); /* White text on success */
-  --warning: oklch(from #f59e0b l c h); /* Warning/Orange */
-  --warning-foreground: oklch(from #ffffff l c h); /* White text on warning */
-  --info: oklch(from #1976d2 l c h); /* Info/Blue */
-  --info-foreground: oklch(from #ffffff l c h); /* White text on info */
-  --border: oklch(from #dddddd l c h); /* Borders/Muted */
-  --input: oklch(from #ffffff l c h); /* Surface/Field */
-  --ring: oklch(from #7f62c6 l c h); /* Farcaster Purple */
-  --chart-1: oklch(from #829ae0 l c h); /* Charts/Blue 1 */
-  --chart-2: oklch(from #1a75ff l c h); /* Charts/Blue 2 */
-  --chart-3: oklch(from #c6acde l c h); /* Charts/Purple 1 */
-  --chart-4: oklch(from #9c27b0 l c h); /* Charts/Purple 2 */
-  --chart-5: oklch(from #7dc6da l c h); /* Charts/Violet */
-  --sidebar: oklch(from #ffffff l c h); /* Surface/Body */
-  --sidebar-foreground: oklch(from #000000 l c h); /* Text/Content/Headers */
-  --sidebar-primary: oklch(from #7f62c6 l c h); /* Farcaster Purple */
-  --sidebar-primary-foreground: oklch(
-    from #ffffff l c h
-  ); /* Text/UI/White (fixed) */
-  --sidebar-accent: oklch(from #eeeeee l c h); /* Surface/Base */
-  --sidebar-accent-foreground: oklch(
-    from #000000 l c h
-  ); /* Text/Content/Headers */
-  --sidebar-border: oklch(from #dddddd l c h); /* Borders/Muted */
-  --sidebar-ring: oklch(from #7f62c6 l c h); /* Farcaster Purple */
+  --background: #ffffff; /* Surface/Body */
+  --foreground: #000000; /* Text/Content/Headers */
+  --card: rgb(0, 0, 0, 0.05);
+  --card-foreground: #000000; /* Text/Content/Headers */
+  --popover: #ffffff; /* Surface/Body */
+  --popover-foreground: #000000; /* Text/Content/Headers */
+  --primary: #7f62c6; /* Farcaster Purple */
+  --primary-foreground: #ffffff; /* Text/UI/White (fixed) */
+  --secondary: rgb(0, 0, 0, 0.1);
+  --secondary-foreground: #000000; /* Text/Content/Headers */
+  --muted: #eeeeee; /* Surface/Base */
+  --muted-foreground: rgb(0, 0, 0, 0.6);
+  --accent: #f0ebfa; /* Elevation/Info/Neutral */
+  --accent-foreground: #7360a1; /* Text/UI/Muted Info */
+  --destructive: #ad1b20; /* Tables/Method/DEL (text) */
+  --destructive-foreground: #ffffff; /* Text/UI/White (fixed) */
+  --success: #16a34a; /* Success/Green */
+  --success-foreground: #ffffff; /* White text on success */
+  --warning: #f59e0b; /* Warning/Orange */
+  --warning-foreground: #ffffff; /* White text on warning */
+  --info: #1976d2; /* Info/Blue */
+  --info-foreground: #ffffff; /* White text on info */
+  --border: rgb(0, 0, 0, 0.1);
+  --input: rgb(0, 0, 0, 0.1);
+  --chart-1: #829ae0; /* Charts/Blue 1 */
+  --chart-2: #1a75ff; /* Charts/Blue 2 */
+  --chart-3: #c6acde; /* Charts/Purple 1 */
+  --chart-4: #9c27b0; /* Charts/Purple 2 */
+  --chart-5: #7dc6da; /* Charts/Violet */
+  --sidebar: #ffffff; /* Surface/Body */
+  --sidebar-foreground: #000000; /* Text/Content/Headers */
+  --sidebar-primary: #7f62c6; /* Farcaster Purple */
+  --sidebar-primary-foreground: #ffffff; /* Text/UI/White (fixed) */
+  --sidebar-accent: #eeeeee; /* Surface/Base */
+  --sidebar-accent-foreground: #000000; /* Text/Content/Headers */
+  --sidebar-border: #dddddd; /* Borders/Muted */
+  --sidebar-ring: #7f62c6; /* Farcaster Purple */
 }
 
 .dark {
   /* Neynar Colors */
-  --neynar-surface-base-background: oklch(from #161517 l c h);
+  --neynar-surface-base-background: #161517;
+  --neynar-faint-foreground: rgb(255, 255, 255, 0.45);
 
   /* Dark mode using actual Figma-defined dark mode colors */
-  --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 */
-  --primary-foreground: oklch(from #ffffff l c h); /* Text/UI/White (fixed) */
-  --secondary: oklch(from #161517 l c h); /* Surface/Base Dark */
-  --secondary-foreground: oklch(
-    from #ffffff l c h
-  ); /* Text/UI/Black > White Dark */
-  --muted: oklch(from #333333 l c h); /* Surface/Feature/Neutral Dark */
-  --muted-foreground: oklch(from #bbbbbb l c h); /* Text/UI/Default Dark */
-  --accent: oklch(from #25212b l c h); /* Elevation/Info/Neutral Dark */
-  --accent-foreground: oklch(from #7360a1 l c h); /* Text/UI/Muted Info */
-  --destructive: oklch(from #ad1b20 l c h); /* Tables/Method/DEL (text) */
-  --destructive-foreground: oklch(
-    from #ffffff l c h
-  ); /* Text/UI/White (fixed) */
-  --success: oklch(from #22c55e l c h); /* Success/Green Dark */
-  --success-foreground: oklch(from #272d26 l c h); /* White text on success */
-  --warning: oklch(from #fbbf24 l c h); /* Warning/Orange Dark */
-  --warning-foreground: oklch(from #000000 l c h); /* Black text on warning */
-  --info: oklch(from #1976d2 l c h); /* Info/Blue Dark */
-  --info-foreground: oklch(from #ffffff l c h); /* White text on info */
-  --border: oklch(from #444444 l c h); /* Borders/Muted Dark */
-  --input: oklch(from #222222 l c h); /* Surface/Field Dark */
-  --ring: oklch(from #7f62c6 l c h); /* Farcaster Purple */
-  --chart-1: oklch(from #829ae0 l c h); /* Charts/Blue 1 */
-  --chart-2: oklch(from #1a75ff l c h); /* Charts/Blue 2 */
-  --chart-3: oklch(from #c6acde l c h); /* Charts/Purple 1 */
-  --chart-4: oklch(from #9c27b0 l c h); /* Charts/Purple 2 */
-  --chart-5: oklch(from #7dc6da l c h); /* Charts/Violet */
-  --sidebar: oklch(from #222222 l c h); /* Surface/Body Dark */
-  --sidebar-foreground: oklch(from #ffffff l c h); /* Text/UI/White (fixed) */
-  --sidebar-primary: oklch(from #7f62c6 l c h); /* Farcaster Purple */
-  --sidebar-primary-foreground: oklch(
-    from #ffffff l c h
-  ); /* Text/UI/White (fixed) */
-  --sidebar-accent: oklch(from #161517 l c h); /* Surface/Base Dark */
-  --sidebar-accent-foreground: oklch(
-    from #ffffff l c h
-  ); /* Text/UI/Black > White Dark */
-  --sidebar-border: oklch(from #444444 l c h); /* Borders/Muted Dark */
-  --sidebar-ring: oklch(from #7f62c6 l c h); /* Farcaster Purple */
+  --background: #222222; /* Surface/Body Dark */
+  --foreground: rgb(255, 255, 255, 0.86); /* Text/UI/Active Dark */
+  --card: rgb(255, 255, 255, 0.05);
+  --card-foreground: #dddddd; /* Text/UI/Active Dark */
+  --popover: #222222; /* Surface/Body Dark */
+  --popover-foreground: #ffffff; /* Text/UI/Active Dark */
+  --primary: #7f62c6; /* Farcaster Purple */
+  --primary-foreground: #ffffff; /* Text/UI/White (fixed) */
+  --secondary: rgb(0, 0, 0, 0.25);
+  --secondary-foreground: #ffffff; /* Text/UI/Black > White Dark */
+  --muted: #333333; /* Surface/Feature/Neutral Dark */
+  --muted-foreground: rgb(255, 255, 255, 0.6);
+  --accent: #25212b; /* Elevation/Info/Neutral Dark */
+  --accent-foreground: #7f62c6; /* Text/UI/Muted Info */
+  --destructive: #ad1b20; /* Tables/Method/DEL (text) */
+  --destructive-foreground: #ffffff; /* Text/UI/White (fixed) */
+  --success: #22c55e; /* Success/Green Dark */
+  --success-foreground: #272d26; /* White text on success */
+  --warning: #fbbf24; /* Warning/Orange Dark */
+  --warning-foreground: #000000; /* Black text on warning */
+  --info: #1976d2; /* Info/Blue Dark */
+  --info-foreground: #ffffff; /* White text on info */
+  --border: rgb(255, 255, 255, 0.1);
+  --input: rgb(255, 255, 255, 0.1);
+  --ring: #7f62c6; /* Farcaster Purple */
+  --chart-1: #829ae0; /* Charts/Blue 1 */
+  --chart-2: #1a75ff; /* Charts/Blue 2 */
+  --chart-3: #c6acde; /* Charts/Purple 1 */
+  --chart-4: #9c27b0; /* Charts/Purple 2 */
+  --chart-5: #7dc6da; /* Charts/Violet */
+  --sidebar: #222222; /* Surface/Body Dark */
+  --sidebar-foreground: #ffffff; /* Text/UI/White (fixed) */
+  --sidebar-primary: #7f62c6; /* Farcaster Purple */
+  --sidebar-primary-foreground: #ffffff; /* Text/UI/White (fixed) */
+  --sidebar-accent: #161517; /* Surface/Base Dark */
+  --sidebar-accent-foreground: #ffffff; /* Text/UI/Black > White Dark */
+  --sidebar-border: #444444; /* Borders/Muted Dark */
+  --sidebar-ring: #7f62c6; /* Farcaster Purple */
 }
 
 @theme inline {
   --color-neynar-surface-base-background: var(--neynar-surface-base-background);
+  --color-neynar-faint-foreground: var(--neynar-faint-foreground);
 
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -182,6 +170,6 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-neynar-surface-base-background text-foreground;
+    @apply bg-background text-foreground;
   }
 }