Added dark emerald theme

.changeset/violet-comics-give.md

@@ -0,0 +1,5 @@
+---
+"@gitroll/profile-card": patch
+---
+
+Added Dark Emerald theme

README.md

@@ -4,7 +4,7 @@
 
 ## Available Themes
 
-We now have 7 preset themes to choose from! 🎉
+We now have 9 preset themes to choose from! 🎉
 
 - **`light`** (default)
 - **`dark`**
@@ -15,6 +15,8 @@ We now have 7 preset themes to choose from! 🎉
 - **`nord`**
 - **`midnight`**
 - **`kawaiiCat`**
+- **`retro`**
+- **`darkEmerald`**
 
 To use a preset theme, simply add the `theme` query parameter to the image URL. For example:
 

src/OGCard.tsx

@@ -1,7 +1,7 @@
 import { Rating } from './rating'
 import { preset, type Theme } from './theme'
 import { GitRollLogo } from './logo'
-import { KawaiiCatDecoration, RetroThemeDecoration } from './decorations'
+import { DarkEmeraldDecoration, KawaiiCatDecoration, RetroThemeDecoration } from './decorations'
 
 
 export interface OGCardProps {
@@ -39,6 +39,7 @@ export function OGCard({
         width: '100%',
         height: '100%',
         backgroundColor: theme.backgroundColor,
+        backgroundImage: theme === preset.darkEmerald ? theme.backgroundColor : '',
         color: theme.textColor,
         borderRadius: '10px',
       }}
@@ -149,8 +150,10 @@ export function OGCard({
                 height: 80,
                 backgroundColor: bg,
                 borderRadius: 1000,
+                position: 'relative'
               }}
             >
+              {theme === preset.darkEmerald && (<DarkEmeraldDecoration color={bg} rating={overallRating}/>)}
               <div
                 id='overall-rating'
                 style={{

src/decorations.tsx

@@ -1,8 +1,12 @@
 interface KawaiiCatDecorationProps {
-  color: string
+  color: string;
 }
 interface RetroThemeDecorationProps {
-  color: string
+  color: string;
+}
+interface DarkEmeraldDecorationProps {
+  color: string;
+  rating: string;
 }
 export function KawaiiCatDecoration({ color }: KawaiiCatDecorationProps) {
   return (
@@ -121,3 +125,71 @@ export function RetroThemeDecoration({ color }: RetroThemeDecorationProps) {
     </svg>
   )
 }
+
+export function DarkEmeraldDecoration({ color, rating }: DarkEmeraldDecorationProps) {
+  let endColor=''
+  switch(rating) {
+    case 'S':
+      endColor = '#1e1b4b'
+      break
+    case 'A':
+      endColor = '#052e16'
+      break
+    case 'B':
+      endColor = '#1a2e05'
+      break
+    case 'C':
+      endColor = '#431407'
+      break
+    case 'D':
+      endColor = '#450a0a'
+      break
+    default:
+      endColor = '#030712'
+      break
+  }
+  return (
+    <svg
+      width='80'
+      height='80'
+      viewBox='0 0 80 80'
+      xmlns='http://www.w3.org/2000/svg'
+      style={{
+        position: 'absolute'
+      }}
+    >
+      <defs>
+        <radialGradient id='shine' cx='0.3' cy='0.3' r='0.8'>
+          <stop offset='0%' stop-color={color} />
+          <stop offset='100%' stop-color={endColor} />
+        </radialGradient>
+        <pattern
+          id='retro-grid'
+          width='20'
+          height='20'
+          patternUnits='userSpaceOnUse'
+        >
+          <path
+            d='M 20 0 L 0 0 0 20'
+            fill='none'
+            stroke='white'
+            stroke-width='0.5'
+            opacity='0.2'
+          />
+        </pattern>
+      </defs>
+      <rect width='80' height='80' fill='url(#shine)' rx='1000' />
+      <rect width='80' height='80' fill='url(#retro-grid)' rx='1000' />
+      <g fill='white' opacity='0.4'>
+        <path
+          transform='translate(20, 20) scale(0.3)'
+          d='M10 0 L13 7 L21 7 L15 13 L17 21 L10 17 L3 21 L5 13 L-1 7 L7 7Z'
+        />
+        <path
+          transform='translate(60, 25) scale(0.25)'
+          d='M10 0 L13 7 L21 7 L15 13 L17 21 L10 17 L3 21 L5 13 L-1 7 L7 7Z'
+        />
+      </g>
+    </svg>
+  )
+}

src/theme.ts

@@ -2,16 +2,16 @@ import { Rating } from './rating'
 
 
 export interface Theme {
-  backgroundColor: string
-  textColor: string
-  textColorSecondary: string
-  badgeColors: Record<Rating, string>
-  badgeTextColors: Record<Rating, string>
-  barBackground: string
-  barForeground: string
-  borderColor: string
-  avatarPlaceholderColor: string
-  logoColor: string
+  backgroundColor: string;
+  textColor: string;
+  textColorSecondary: string;
+  badgeColors: Record<Rating, string>;
+  badgeTextColors: Record<Rating, string>;
+  barBackground: string;
+  barForeground: string;
+  borderColor: string;
+  avatarPlaceholderColor: string;
+  logoColor: string;
 }
 
 const light = {
@@ -24,15 +24,15 @@ const light = {
     [Rating.B]: '#d9f99d',
     [Rating.C]: '#fef08a',
     [Rating.D]: '#fed7aa',
-    [Rating.E]: '#fecaca'
+    [Rating.E]: '#fecaca',
   },
   badgeTextColors: {
     [Rating.S]: '#000',
     [Rating.A]: '#000',
     [Rating.B]: '#000',
     [Rating.C]: '#000',
     [Rating.D]: '#000',
-    [Rating.E]: '#000'
+    [Rating.E]: '#000',
   },
   barBackground: '#F4F4F5',
   barForeground: '#18181B',
@@ -51,15 +51,15 @@ const dark = {
     [Rating.B]: '#65a30d',
     [Rating.C]: '#ca8a04',
     [Rating.D]: '#ea580c',
-    [Rating.E]: '#dc2626'
+    [Rating.E]: '#dc2626',
   },
   badgeTextColors: {
     [Rating.S]: '#fff',
     [Rating.A]: '#fff',
     [Rating.B]: '#fff',
     [Rating.C]: '#fff',
     [Rating.D]: '#fff',
-    [Rating.E]: '#fff'
+    [Rating.E]: '#fff',
   },
   barBackground: '#27272A',
   barForeground: '#fff',
@@ -78,15 +78,15 @@ const sepia = {
     [Rating.B]: '#eedd82',
     [Rating.C]: '#ffd700',
     [Rating.D]: '#daa520',
-    [Rating.E]: '#cd853f'
+    [Rating.E]: '#cd853f',
   },
   badgeTextColors: {
     [Rating.S]: '#5b4636',
     [Rating.A]: '#5b4636',
     [Rating.B]: '#5b4636',
     [Rating.C]: '#5b4636',
     [Rating.D]: '#5b4636',
-    [Rating.E]: '#5b4636'
+    [Rating.E]: '#5b4636',
   },
   barBackground: '#e8dcc2',
   barForeground: '#5b4636',
@@ -105,15 +105,15 @@ const solarizedLight = {
     [Rating.B]: '#2aa198',
     [Rating.C]: '#268bd2',
     [Rating.D]: '#d33682',
-    [Rating.E]: '#dc322f'
+    [Rating.E]: '#dc322f',
   },
   badgeTextColors: {
     [Rating.S]: '#002b36',
     [Rating.A]: '#002b36',
     [Rating.B]: '#002b36',
     [Rating.C]: '#fdf6e3',
     [Rating.D]: '#fdf6e3',
-    [Rating.E]: '#fdf6e3'
+    [Rating.E]: '#fdf6e3',
   },
   barBackground: '#eee8d5',
   barForeground: '#073642',
@@ -132,15 +132,15 @@ const solarizedDark = {
     [Rating.B]: '#2aa198',
     [Rating.C]: '#268bd2',
     [Rating.D]: '#d33682',
-    [Rating.E]: '#dc322f'
+    [Rating.E]: '#dc322f',
   },
   badgeTextColors: {
     [Rating.S]: '#002b36',
     [Rating.A]: '#002b36',
     [Rating.B]: '#002b36',
     [Rating.C]: '#002b36',
     [Rating.D]: '#002b36',
-    [Rating.E]: '#002b36'
+    [Rating.E]: '#002b36',
   },
   barBackground: '#073642',
   barForeground: '#fdf6e3',
@@ -159,15 +159,15 @@ const tokyoNight = {
     [Rating.B]: '#e0af68',
     [Rating.C]: '#f7768e',
     [Rating.D]: '#ff9e64',
-    [Rating.E]: '#bb9af7'
+    [Rating.E]: '#bb9af7',
   },
   badgeTextColors: {
     [Rating.S]: '#1a1b26',
     [Rating.A]: '#1a1b26',
     [Rating.B]: '#1a1b26',
     [Rating.C]: '#1a1b26',
     [Rating.D]: '#1a1b26',
-    [Rating.E]: '#1a1b26'
+    [Rating.E]: '#1a1b26',
   },
   barBackground: '#1f2335',
   barForeground: '#c0caf5',
@@ -186,15 +186,15 @@ const nord = {
     [Rating.B]: '#5e81ac',
     [Rating.C]: '#a3be8c',
     [Rating.D]: '#ebcb8b',
-    [Rating.E]: '#bf616a'
+    [Rating.E]: '#bf616a',
   },
   badgeTextColors: {
     [Rating.S]: '#2e3440',
     [Rating.A]: '#2e3440',
     [Rating.B]: '#2e3440',
     [Rating.C]: '#2e3440',
     [Rating.D]: '#2e3440',
-    [Rating.E]: '#2e3440'
+    [Rating.E]: '#2e3440',
   },
   barBackground: '#3b4252',
   barForeground: '#d8dee9',
@@ -204,24 +204,24 @@ const nord = {
 }
 
 const midnight = {
-  backgroundColor: '#1c1e2d', 
-  textColor: '#d3d7e1', 
-  textColorSecondary: 'rgba(211, 215, 225, 0.7)', 
+  backgroundColor: '#1c1e2d',
+  textColor: '#d3d7e1',
+  textColorSecondary: 'rgba(211, 215, 225, 0.7)',
   badgeColors: {
     [Rating.S]: '#3A506B',
     [Rating.A]: '#4C6A92',
     [Rating.B]: '#5C7A9D',
     [Rating.C]: '#3D4C6D',
     [Rating.D]: '#2B3A4A',
-    [Rating.E]: '#1D2A38' 
+    [Rating.E]: '#1D2A38',
   },
   badgeTextColors: {
     [Rating.S]: '#ffffff',
     [Rating.A]: '#ffffff',
     [Rating.B]: '#ffffff',
     [Rating.C]: '#ffffff',
     [Rating.D]: '#ffffff',
-    [Rating.E]: '#ffffff' 
+    [Rating.E]: '#ffffff',
   },
   barBackground: '#2c3e50',
   barForeground: '#ecf0f1',
@@ -235,20 +235,20 @@ const kawaiiCat = {
   textColor: '#7A5C58',
   textColorSecondary: 'rgba(122, 92, 88, 0.65)',
   badgeColors: {
-    [Rating.S]: '#FFCAD4', 
-    [Rating.A]: '#FFD7DE', 
-    [Rating.B]: '#66B2B2', 
-    [Rating.C]: '#80BFBF', 
-    [Rating.D]: '#99CCCC', 
-    [Rating.E]: '#B3D9D9'
+    [Rating.S]: '#FFCAD4',
+    [Rating.A]: '#FFD7DE',
+    [Rating.B]: '#66B2B2',
+    [Rating.C]: '#80BFBF',
+    [Rating.D]: '#99CCCC',
+    [Rating.E]: '#B3D9D9',
   },
   badgeTextColors: {
-    [Rating.S]: '#7A5C58', 
-    [Rating.A]: '#7A5C58', 
-    [Rating.B]: '#FFFFFF', 
+    [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',
@@ -283,7 +283,32 @@ const retro = {
   avatarPlaceholderColor: '#9ca3af',
   logoColor: '#ebd9fc',
 }
-
+const darkEmerald = {
+  backgroundColor: 'linear-gradient(to top left, #00bc7d, #1a1a24, #1a1a24)',
+  textColor: '#ffffffff',
+  textColorSecondary: '#22c55e',
+  badgeColors: {
+    [Rating.S]: '#a78bfa',
+    [Rating.A]: '#4ade80',
+    [Rating.B]: '#a3e635',
+    [Rating.C]: '#fb923c',
+    [Rating.D]: '#f87171',
+    [Rating.E]: '#6b7280',
+  },
+  badgeTextColors: {
+    [Rating.S]: '#0a0a0a',
+    [Rating.A]: '#0a0a0a',
+    [Rating.B]: '#0a0a0a',
+    [Rating.C]: '#0a0a0a',
+    [Rating.D]: '#0a0a0a',
+    [Rating.E]: '#fff',
+  },
+  barBackground: '#F4F4F5',
+  barForeground: '#00bc7d',
+  borderColor: '#1cab90',
+  avatarPlaceholderColor: '#9ca3af',
+  logoColor: '#00bc7d',
+}
 export const preset: Record<string, Theme> = {
   light,
   dark,
@@ -295,4 +320,5 @@ export const preset: Record<string, Theme> = {
   midnight,
   kawaiiCat,
   retro,
+  darkEmerald
 }