Retro theme (#16)

* Added retro decorations and retro preset theme

* reverted to double quotes to single quotes

* Applied ESLint

* Added retro theme

Author: emmanyouwell

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 && (
         <KawaiiCatDecoration color={theme.barForeground} />
       )}
+      {theme === preset.retro && (
+        <RetroThemeDecoration color={theme.barForeground} />
+      )}
       <GitRollLogo fill={theme.logoColor} />
       <div
         style={{

src/decorations.tsx

@@ -1,7 +1,9 @@
 interface KawaiiCatDecorationProps {
   color: string
 }
-
+interface RetroThemeDecorationProps {
+  color: string
+}
 export function KawaiiCatDecoration({ color }: KawaiiCatDecorationProps) {
   return (
     <svg
@@ -59,3 +61,63 @@ export function KawaiiCatDecoration({ color }: KawaiiCatDecorationProps) {
     </svg>
   )
 }
+
+export function RetroThemeDecoration({ color }: RetroThemeDecorationProps) {
+  return (
+    <svg
+      width='1200'
+      height='675'
+      viewBox='0 0 1200 675'
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        pointerEvents: 'none',
+        overflow: 'visible',
+      }}
+    >
+      {/* Retro-style grid background */}
+      <defs>
+        <pattern
+          id='retro-grid'
+          width='40'
+          height='40'
+          patternUnits='userSpaceOnUse'
+        >
+          <path
+            d='M 40 0 L 0 0 0 40'
+            fill='none'
+            stroke={color}
+            strokeWidth='0.5'
+            opacity='0.8'
+          />
+        </pattern>
+      </defs>
+      <rect width='1200' height='675' fill='url(#retro-grid)' />
+      {/* Stars */}
+      <g fill={color} opacity='0.5'>
+        {[
+          // Stars on Top-left of logo
+          [90, 60, 0.8],
+          [66, 69, 0.8],
+          [58, 95, 0.8],
+        ].map(([x, y], i) => (
+          <path
+            key={i}
+            transform={`translate(${x}, ${y}) scale(0.8)`}
+            d='M10 0 L13 7 L21 7 L15 13 L17 21 L10 17 L3 21 L5 13 L-1 7 L7 7Z'
+            fill={color}
+          />
+        ))}
+        {/* Dotted border lines */}
+        <path
+          d='M80 20 H1120 M80 655 H1120'
+          stroke={color}
+          strokeWidth='2'
+          strokeDasharray='6 6'
+          opacity='0.5'
+        />
+      </g>
+    </svg>
+  )
+}

src/theme.ts

@@ -227,7 +227,7 @@ const midnight = {
   barForeground: '#ecf0f1',
   borderColor: '#34495e',
   avatarPlaceholderColor: '#7f8c8d',
-  logoColor: '#ecf0f1'
+  logoColor: '#ecf0f1',
 }
 
 const kawaiiCat = {
@@ -240,15 +240,15 @@ const kawaiiCat = {
     [Rating.B]: '#66B2B2', 
     [Rating.C]: '#80BFBF', 
     [Rating.D]: '#99CCCC', 
-    [Rating.E]: '#B3D9D9', 
+    [Rating.E]: '#B3D9D9'
   },
   badgeTextColors: {
     [Rating.S]: '#7A5C58', 
     [Rating.A]: '#7A5C58', 
     [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<string, Theme> = {
   light,
   dark,
@@ -266,5 +293,6 @@ export const preset: Record<string, Theme> = {
   tokyoNight,
   nord,
   midnight,
-  kawaiiCat
+  kawaiiCat,
+  retro,
 }