diff --git a/src/OGCard.tsx b/src/OGCard.tsx index 58ad9d8..2c99472 100644 --- a/src/OGCard.tsx +++ b/src/OGCard.tsx @@ -1,7 +1,7 @@ import { Rating } from './rating' import { preset, type Theme } from './theme' import { GitRollLogo } from './logo' -import { KawaiiCatDecoration } from './decorations' +import { KawaiiCatDecoration, RetroThemeDecoration } from './decorations' export interface OGCardProps { @@ -26,7 +26,7 @@ export function OGCard({ reliabilityScore, securityScore, maintainabilityScore, contributor, regionalRank, campusRank, - theme = preset.light + theme = preset.light, }: OGCardProps) { const bg = theme.badgeColors[overallRating] ?? theme.badgeColors[Rating.E] return ( @@ -46,6 +46,9 @@ export function OGCard({ {theme === preset.kawaiiCat && ( )} + {theme === preset.retro && ( + + )}
) } + +export function RetroThemeDecoration({ color }: RetroThemeDecorationProps) { + return ( + + {/* Retro-style grid background */} + + + + + + + {/* Stars */} + + {[ + // Stars on Top-left of logo + [90, 60, 0.8], + [66, 69, 0.8], + [58, 95, 0.8], + ].map(([x, y], i) => ( + + ))} + {/* Dotted border lines */} + + + + ) +} diff --git a/src/theme.ts b/src/theme.ts index 7ac5dbd..14edf6f 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -227,7 +227,7 @@ const midnight = { barForeground: '#ecf0f1', borderColor: '#34495e', avatarPlaceholderColor: '#7f8c8d', - logoColor: '#ecf0f1' + logoColor: '#ecf0f1', } const kawaiiCat = { @@ -240,7 +240,7 @@ const kawaiiCat = { [Rating.B]: '#66B2B2', [Rating.C]: '#80BFBF', [Rating.D]: '#99CCCC', - [Rating.E]: '#B3D9D9', + [Rating.E]: '#B3D9D9' }, badgeTextColors: { [Rating.S]: '#7A5C58', @@ -248,7 +248,7 @@ const kawaiiCat = { [Rating.B]: '#FFFFFF', [Rating.C]: '#FFFFFF', [Rating.D]: '#7A5C58', - [Rating.E]: '#7A5C58', + [Rating.E]: '#7A5C58' }, barBackground: '#FFCAD4', barForeground: '#66B2B2', @@ -257,6 +257,33 @@ const kawaiiCat = { logoColor: '#FFCAD4', } +const retro = { + backgroundColor: '#240046', + textColor: '#f2ebfb', + textColorSecondary: 'rgba(255, 255, 255, 0.6)', + badgeColors: { + [Rating.S]: '#fbe300', + [Rating.A]: '#9cf945', + [Rating.B]: '#4cc9f0', + [Rating.C]: '#9d4edd', + [Rating.D]: '#f72585', + [Rating.E]: '#ff6200', + }, + badgeTextColors: { + [Rating.S]: '#240046', + [Rating.A]: '#240046', + [Rating.B]: '#240046', + [Rating.C]: '#240046', + [Rating.D]: '#240046', + [Rating.E]: '#240046', + }, + barBackground: '#F4F4F5', + barForeground: '#9d4edd', + borderColor: '#E4E4E7', + avatarPlaceholderColor: '#9ca3af', + logoColor: '#ebd9fc', +} + export const preset: Record = { light, dark, @@ -266,5 +293,6 @@ export const preset: Record = { tokyoNight, nord, midnight, - kawaiiCat + kawaiiCat, + retro, }