style: update color palette in global.css and enhance author handling… (#83)

Author: JerryWu1234

.changeset/eighty-phones-juggle.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/devtools': patch
+---
+
+style: update color palette in global.css and enhance author handling

packages/ui/src/features/Packages/components/DependencyCard/DependencyCard.tsx

@@ -3,11 +3,26 @@ import { Package } from '../../types';
 import { PackageIcon } from '../PackageIcon';
 
 export const DependencyCard = component$(({ pkg }: { pkg: Package }) => {
+  const author = pkg.author;
+  const authorName =
+    typeof author === 'string' ? author.trim() : (author?.name || '').trim();
+  const authorDisplayName = authorName || 'Unknown';
+  const authorInitials =
+    authorDisplayName
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((n) => n.charAt(0))
+      .join('')
+      .substring(0, 2)
+      .toUpperCase() || '??';
+
   const handleAuthorClick = $(() => {
-    if (pkg.author?.url) {
-      window.open(pkg.author.url, '_blank');
-    } else if (pkg.author?.email) {
-      window.open(`mailto:${pkg.author.email}`, '_blank');
+    if (typeof author !== 'string') {
+      if (author?.url) {
+        window.open(author.url, '_blank');
+      } else if (author?.email) {
+        window.open(`mailto:${author.email}`, '_blank');
+      }
     }
   });
 
@@ -84,25 +99,20 @@ export const DependencyCard = component$(({ pkg }: { pkg: Package }) => {
         {/* Footer with author and links */}
         <div class="flex items-center justify-between gap-3">
           {/* Author Information */}
-          {pkg.author ? (
+          {author ? (
             <div class="flex min-w-0 flex-1 items-center gap-2">
               <div
                 class="from-accent/20 to-accent/40 border-accent/30 flex h-7 w-7 flex-shrink-0 cursor-pointer items-center justify-center rounded-full border bg-gradient-to-br transition-transform hover:scale-110"
                 onClick$={handleAuthorClick}
-                title={`Contact ${pkg.author.name}`}
+                title={`Contact ${authorDisplayName}`}
               >
                 <span class="text-accent text-[10px] font-semibold">
-                  {pkg.author.name
-                    .split(' ')
-                    .map((n) => n.charAt(0))
-                    .join('')
-                    .substring(0, 2)
-                    .toUpperCase()}
+                  {authorInitials}
                 </span>
               </div>
               <span class="text-muted-foreground truncate text-xs">
                 <span class="text-foreground font-medium">
-                  {pkg.author.name}
+                  {authorDisplayName}
                 </span>
               </span>
             </div>

packages/ui/src/features/Packages/types.ts

@@ -2,11 +2,21 @@ export interface Package {
   name: string;
   version: string;
   description: string;
-  author?: {
-    name: string;
-    email?: string;
-    url?: string;
-  };
+  /**
+   * npm package.json `author` can be:
+   * - string: "Jane Doe <[email protected]> (https://example.com)"
+   * - object: { name, email?, url? }
+   * - missing / partial
+   *
+   * Runtime data may not match strict typings, so keep this permissive.
+   */
+  author?:
+    | string
+    | {
+        name?: string;
+        email?: string;
+        url?: string;
+      };
   authorAvatar?: string;
   packageAvatar?: string;
   homepage?: string;

packages/ui/src/global.css

@@ -9,16 +9,16 @@
   /* default (light) tokens; can be overridden by :root rules below */
   --color-background: #ffffff;
   --color-foreground: #000000;
-  --color-primary: #10b981;
-  --color-primary-hover: #f2f2f2;
-  --color-primary-active: #047857;
+  --color-primary: #16b6f6;
+  --color-primary-hover: #38bdf8;
+  --color-primary-active: #0ea5e9;
   --color-secondary: #6b7280;
   --color-muted: #9ca3af;
   --color-muted-foreground: #6b7280;
-  --color-accent: #10b981;
+  --color-accent: #16b6f6;
   --color-border: #e5e7eb;
   --color-input: #e5e7eb;
-  --color-ring: #10b981;
+  --color-ring: #16b6f6;
   --color-card: #f2f2f2;
   --color-card-item-bg: rgba(0, 0, 0, 0.02);
   --color-card-item-hover-bg: rgba(0, 0, 0, 0.03);
@@ -28,9 +28,9 @@
   --theme-name: 'light';
   --color-background: #ffffff;
   --color-foreground: #000000;
-  --color-primary: #10b981;
-  --color-primary-hover: #f2f2f2; /* green-600 */
-  --color-primary-active: #047857; /* green-700 */
+  --color-primary: #16b6f6;
+  --color-primary-hover: #38bdf8; /* sky-400 */
+  --color-primary-active: #0ea5e9; /* sky-500 */
   --color-secondary: #6b7280; /* Tailwind's secondary.light */
   --color-border: #e5e7eb;
   --color-card: #f2f2f2;
@@ -52,7 +52,7 @@
   /* Tailwind semantic variables */
   --color-muted: #9ca3af; /* Similar to existing --color-text-subtle */
   --color-muted-foreground: #6b7280;
-  --color-accent: #10b981; /* Green accent */
+  --color-accent: #16b6f6; /* Accent */
   --color-input: var(--color-border); /* Alias to border */
   --color-ring: var(--color-primary); /* Alias to primary */
 }
@@ -65,9 +65,9 @@
   --theme-name: 'dark';
   --color-background: #18181b;
   --color-foreground: #ffffff;
-  --color-primary: #34d399; /* Tailwind's primary.dark */
-  --color-primary-hover: #10b981; /* green-500 */
-  --color-primary-active: #059669; /* green-600 */
+  --color-primary: #16b6f6; /* primary */
+  --color-primary-hover: #38bdf8; /* hover */
+  --color-primary-active: #0ea5e9; /* active */
   --color-secondary: #9ca3af; /* Tailwind's secondary.dark */
   --color-border: #374151;
   --color-card: #27272a;
@@ -83,7 +83,7 @@
   /* Tailwind semantic variables */
   --color-muted: #374151; /* Similar to existing html.dark --color-border */
   --color-muted-foreground: #9ca3af; /* Similar to existing html.dark --color-secondary */
-  --color-accent: #10b981; /* Matches existing html.dark --color-icon-accent */
+  --color-accent: #16b6f6; /* Accent */
   --color-input: var(--color-border); /* Alias to border */
   --color-ring: var(--color-primary); /* Alias to primary */
 }
@@ -97,7 +97,7 @@
     --theme-name: 'dark';
     --color-background: #18181b;
     --color-foreground: #ffffff;
-    --color-primary: #10b981; /* Tailwind's primary.dark */
+    --color-primary: #16b6f6; /* primary */
     --color-secondary: #9ca3af; /* Tailwind's secondary.dark */
     --color-border: #374151;
     --color-card: #27272a;
@@ -113,7 +113,7 @@
     /* Tailwind semantic variables */
     --color-muted: #374151; /* Similar to existing html.dark --color-border */
     --color-muted-foreground: #9ca3af; /* Similar to existing html.dark --color-secondary */
-    --color-accent: #10b981; /* Matches existing html.dark --color-icon-accent */
+    --color-accent: #16b6f6; /* Accent */
     --color-input: var(--color-border); /* Alias to border */
     --color-ring: var(--color-primary); /* Alias to primary */
   }