@neynar/ui 0.3.0 → 0.4.0

package/src/styles/globals.css

@@ -9,121 +9,93 @@
   --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 */
+  --background: #ffffff; /* Surface/Body */
+  --foreground: #000000; /* Text/Content/Headers */
   --card: rgb(0, 0, 0, 0.05);
-  /*--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 */
+  --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: 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 */
+  --secondary-foreground: #000000; /* Text/Content/Headers */
+  --muted: #eeeeee; /* Surface/Base */
   --muted-foreground: rgb(0, 0, 0, 0.6);
-  --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 */
+  --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: oklch(from #ffffff l c h); /* Surface/Field */
   --input: rgb(0, 0, 0, 0.1);
-  --ring: oklch(from #7f62c6 l c h); /* 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: 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 */
+  --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 rgb(255, 255, 255, 0.86) l c h
-  ); /* Text/UI/Active Dark */
+  --background: #222222; /* Surface/Body Dark */
+  --foreground: rgb(255, 255, 255, 0.86); /* Text/UI/Active Dark */
   --card: rgb(255, 255, 255, 0.05);
-  /* --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 */
+  --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: 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 */
+  --secondary-foreground: #ffffff; /* Text/UI/Black > White Dark */
+  --muted: #333333; /* Surface/Feature/Neutral Dark */
   --muted-foreground: rgb(255, 255, 255, 0.6);
-
-  --accent: oklch(from #25212b l c h); /* Elevation/Info/Neutral Dark */
-  --accent-foreground: oklch(from #7f62c6 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 */
+  --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: oklch(from #222222 l c h); /* Surface/Field Dark */
   --input: rgb(255, 255, 255, 0.1);
-  --ring: oklch(from #7f62c6 l c h); /* Farcaster Purple */
+  --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: 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 */
+  --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 {
@@ -170,27 +142,6 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Override Tailwind's default fontSize scale to match design system */
-  --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 {