From 7334d0a6ea99fa19dbd8cf89027dff4ed1da2b4c Mon Sep 17 00:00:00 2001 From: Jerry_Wu <409187100@qq.com> Date: Tue, 23 Dec 2025 17:21:10 +0800 Subject: [PATCH 1/2] style: update color palette in global.css and enhance author handling in DependencyCard component - Changed primary, hover, and active colors to a new blue palette in global.css. - Improved author handling in DependencyCard to support string and object formats, ensuring better display and interaction. --- .../DependencyCard/DependencyCard.tsx | 36 ++++++++++++------- packages/ui/src/features/Packages/types.ts | 20 ++++++++--- packages/ui/src/global.css | 30 ++++++++-------- 3 files changed, 53 insertions(+), 33 deletions(-) diff --git a/packages/ui/src/features/Packages/components/DependencyCard/DependencyCard.tsx b/packages/ui/src/features/Packages/components/DependencyCard/DependencyCard.tsx index a7c96c2..d0fa8fd 100644 --- a/packages/ui/src/features/Packages/components/DependencyCard/DependencyCard.tsx +++ b/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 */}
{/* Author Information */} - {pkg.author ? ( + {author ? (
- {pkg.author.name - .split(' ') - .map((n) => n.charAt(0)) - .join('') - .substring(0, 2) - .toUpperCase()} + {authorInitials}
- {pkg.author.name} + {authorDisplayName}
diff --git a/packages/ui/src/features/Packages/types.ts b/packages/ui/src/features/Packages/types.ts index 9332c14..2d879ec 100644 --- a/packages/ui/src/features/Packages/types.ts +++ b/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 (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; diff --git a/packages/ui/src/global.css b/packages/ui/src/global.css index f1ba904..e5eaa7f 100644 --- a/packages/ui/src/global.css +++ b/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 */ } From fc767637f706a2f2fa527f9fc881e775054c362a Mon Sep 17 00:00:00 2001 From: Jerry_Wu <409187100@qq.com> Date: Tue, 23 Dec 2025 17:22:33 +0800 Subject: [PATCH 2/2] add changeset --- .changeset/eighty-phones-juggle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/eighty-phones-juggle.md diff --git a/.changeset/eighty-phones-juggle.md b/.changeset/eighty-phones-juggle.md new file mode 100644 index 0000000..64464be --- /dev/null +++ b/.changeset/eighty-phones-juggle.md @@ -0,0 +1,5 @@ +--- +'@qwik.dev/devtools': patch +--- + +style: update color palette in global.css and enhance author handling