[APP-2429] Add Sunlight and Twilight color options to the Invite Friends QR code (#10921)

Co-authored-by: Eric Bailey <git@esb.lol>

src/features/inviteFriends/components/ThemePicker.tsx

@@ -26,8 +26,10 @@ export function ThemePicker({
 
   const labels: Record<InviteThemeKey, string> = {
     dawn: l`Dawn`,
+    sunlight: l`Sunlight`,
     day: l`Day`,
     dusk: l`Dusk`,
+    twilight: l`Twilight`,
     night: l`Night`,
   }
 

src/features/inviteFriends/themes.test.ts

@@ -3,8 +3,15 @@ import {describe, expect, it} from '@jest/globals'
 import {getInviteTheme, INVITE_THEME_KEYS, INVITE_THEMES} from './themes'
 
 describe('invite themes', () => {
-  it('exposes four themes in canonical order', () => {
-    expect(INVITE_THEME_KEYS).toEqual(['dawn', 'day', 'dusk', 'night'])
+  it('exposes six themes in canonical order', () => {
+    expect(INVITE_THEME_KEYS).toEqual([
+      'dawn',
+      'sunlight',
+      'day',
+      'dusk',
+      'twilight',
+      'night',
+    ])
   })
 
   it('has light and dark variants for every theme', () => {

src/features/inviteFriends/themes.ts

@@ -5,7 +5,13 @@
  * matching primary color; the QR data uses qrPrimary; the avatar handle text
  * follows handleColor.
  */
-export type InviteThemeKey = 'dawn' | 'day' | 'dusk' | 'night'
+export type InviteThemeKey =
+  | 'dawn'
+  | 'sunlight'
+  | 'day'
+  | 'dusk'
+  | 'twilight'
+  | 'night'
 
 export type InviteThemeVariant = {
   /** QR data + eye color */
@@ -30,8 +36,10 @@ export type InviteTheme = {
 
 export const INVITE_THEME_KEYS: readonly InviteThemeKey[] = [
   'dawn',
+  'sunlight',
   'day',
   'dusk',
+  'twilight',
   'night',
 ] as const
 
@@ -54,6 +62,24 @@ export const INVITE_THEMES: Record<InviteThemeKey, InviteTheme> = {
       handleColor: '#ffffff',
     },
   },
+  sunlight: {
+    key: 'sunlight',
+    swatch: '#ff8159',
+    light: {
+      qrPrimary: '#ff8159',
+      gradientFrom: '#ffc785',
+      gradientTo: '#ff8159',
+      shadowColor: '#ff8159',
+      handleColor: '#ffffff',
+    },
+    dark: {
+      qrPrimary: '#ff8159',
+      gradientFrom: '#ffc785',
+      gradientTo: '#ff8159',
+      shadowColor: '#ff8159',
+      handleColor: '#ffffff',
+    },
+  },
   day: {
     key: 'day',
     swatch: '#006aff',
@@ -90,6 +116,24 @@ export const INVITE_THEMES: Record<InviteThemeKey, InviteTheme> = {
       handleColor: '#ffffff',
     },
   },
+  twilight: {
+    key: 'twilight',
+    swatch: '#8b60f7',
+    light: {
+      qrPrimary: '#8b60f7',
+      gradientFrom: '#8ec1ff',
+      gradientTo: '#8b60f7',
+      shadowColor: '#8b60f7',
+      handleColor: '#ffffff',
+    },
+    dark: {
+      qrPrimary: '#8b60f7',
+      gradientFrom: '#8ec1ff',
+      gradientTo: '#8b60f7',
+      shadowColor: '#8b60f7',
+      handleColor: '#ffffff',
+    },
+  },
   night: {
     key: 'night',
     swatch: '#0048ad',