upgrade to tamagui v2 and guest pwa overhaul
This commit is contained in:
Codex Agent
@@ -1,4 +1,4 @@
|
||||
import { defaultConfig } from '@tamagui/config/v4';
|
||||
import { defaultConfig } from '@tamagui/config/v5';
|
||||
import { createTamagui } from '@tamagui/core';
|
||||
import { shorthands } from '@tamagui/shorthands';
|
||||
import { tokens as baseTokens, themes as baseThemes } from '@tamagui/themes';
|
||||
@@ -28,60 +28,122 @@ const tokens = {
|
||||
// ...
|
||||
};
|
||||
|
||||
const lightTheme = {
|
||||
...baseThemes.light,
|
||||
primary: tokens.color.primary,
|
||||
accent: tokens.color.accent,
|
||||
background: '#FFF8F5', // Brand Cream
|
||||
backgroundHover: '#E2E8F0',
|
||||
backgroundPress: '#CBD5E1',
|
||||
backgroundStrong: tokens.color.surface,
|
||||
backgroundTransparent: 'rgba(241, 245, 249, 0)',
|
||||
color: tokens.color.text,
|
||||
colorHover: '#1E293B',
|
||||
colorPress: '#1E293B',
|
||||
colorFocus: '#1E293B',
|
||||
borderColor: tokens.color.border,
|
||||
borderColorHover: '#CBD5E1',
|
||||
borderColorPress: '#94A3B8',
|
||||
shadowColor: 'rgba(15, 23, 42, 0.08)',
|
||||
shadowColorPress: 'rgba(15, 23, 42, 0.12)',
|
||||
shadowColorFocus: 'rgba(15, 23, 42, 0.12)',
|
||||
surface: tokens.color.surface,
|
||||
muted: tokens.color.muted,
|
||||
blue3: tokens.color.accentSoft,
|
||||
blue6: '#6366F1', // Indigo 500
|
||||
blue10: tokens.color.primary,
|
||||
blue11: '#4338CA', // Indigo 700
|
||||
};
|
||||
|
||||
const guestLightTheme = {
|
||||
...baseThemes.light,
|
||||
primary: 'var(--guest-primary, #FF5A5F)',
|
||||
accent: 'var(--guest-secondary, #F43F5E)',
|
||||
background: 'var(--guest-background, #FFF8F5)',
|
||||
backgroundHover: '#F1E7E2',
|
||||
backgroundPress: '#EBDCD6',
|
||||
backgroundStrong: 'var(--guest-surface, #FFFFFF)',
|
||||
backgroundTransparent: 'rgba(255, 248, 245, 0)',
|
||||
color: 'var(--foreground, #0F172A)',
|
||||
colorHover: 'var(--foreground, #0F172A)',
|
||||
colorPress: 'var(--foreground, #0F172A)',
|
||||
colorFocus: 'var(--foreground, #0F172A)',
|
||||
borderColor: 'var(--border, #E2E8F0)',
|
||||
borderColorHover: '#CBD5E1',
|
||||
borderColorPress: '#94A3B8',
|
||||
shadowColor: 'rgba(15, 23, 42, 0.08)',
|
||||
shadowColorPress: 'rgba(15, 23, 42, 0.12)',
|
||||
shadowColorFocus: 'rgba(15, 23, 42, 0.12)',
|
||||
surface: 'var(--guest-surface, #FFFFFF)',
|
||||
muted: 'var(--muted, #F8FAFC)',
|
||||
blue3: 'var(--guest-secondary, #F43F5E)',
|
||||
blue6: 'var(--guest-secondary, #F43F5E)',
|
||||
blue10: 'var(--guest-primary, #FF5A5F)',
|
||||
blue11: '#4338CA',
|
||||
};
|
||||
|
||||
const darkTheme = {
|
||||
...baseThemes.dark,
|
||||
primary: tokens.color.primary,
|
||||
accent: tokens.color.accent,
|
||||
background: '#171219',
|
||||
backgroundHover: '#101A36',
|
||||
backgroundPress: '#132142',
|
||||
backgroundStrong: '#101A36',
|
||||
backgroundTransparent: 'rgba(11, 19, 43, 0)',
|
||||
color: '#F8FAFF',
|
||||
colorHover: '#FFFFFF',
|
||||
colorPress: '#F2F6FF',
|
||||
colorFocus: '#FFFFFF',
|
||||
borderColor: '#1F2A4A',
|
||||
borderColorHover: '#29345A',
|
||||
borderColorPress: '#313D67',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.55)',
|
||||
shadowColorPress: 'rgba(0, 0, 0, 0.65)',
|
||||
shadowColorFocus: 'rgba(0, 0, 0, 0.6)',
|
||||
surface: '#0F1B36',
|
||||
muted: '#121F3D',
|
||||
blue3: '#1B2550',
|
||||
blue6: '#3D5AFE',
|
||||
blue10: '#FF5C5C',
|
||||
blue11: '#FF8A8A',
|
||||
};
|
||||
|
||||
const guestNightTheme = {
|
||||
...baseThemes.dark,
|
||||
primary: 'var(--guest-primary, #FF4FD8)',
|
||||
accent: 'var(--guest-secondary, #4FD1FF)',
|
||||
accentSoft: 'rgba(79, 209, 255, 0.18)',
|
||||
background: 'var(--guest-background, #0A0F1F)',
|
||||
backgroundHover: '#10172A',
|
||||
backgroundPress: '#0D1324',
|
||||
backgroundStrong: 'var(--guest-surface, #121A32)',
|
||||
backgroundTransparent: 'rgba(10, 15, 31, 0)',
|
||||
color: '#F8FAFF',
|
||||
colorHover: '#FFFFFF',
|
||||
colorPress: '#E8EEFF',
|
||||
colorFocus: '#FFFFFF',
|
||||
borderColor: 'rgba(255, 255, 255, 0.08)',
|
||||
borderColorHover: 'rgba(255, 255, 255, 0.16)',
|
||||
borderColorPress: 'rgba(255, 255, 255, 0.22)',
|
||||
shadowColor: 'rgba(2, 6, 23, 0.7)',
|
||||
shadowColorPress: 'rgba(2, 6, 23, 0.8)',
|
||||
shadowColorFocus: 'rgba(2, 6, 23, 0.8)',
|
||||
surface: 'var(--guest-surface, #131B33)',
|
||||
muted: '#0F152B',
|
||||
blue3: 'rgba(79, 209, 255, 0.15)',
|
||||
blue6: 'var(--guest-secondary, #4FD1FF)',
|
||||
blue10: 'var(--guest-primary, #FF4FD8)',
|
||||
blue11: '#F9A8D4',
|
||||
};
|
||||
|
||||
const themes = {
|
||||
...baseThemes,
|
||||
light: {
|
||||
...baseThemes.light,
|
||||
primary: tokens.color.primary,
|
||||
accent: tokens.color.accent,
|
||||
background: '#FFF8F5', // Brand Cream
|
||||
backgroundHover: '#E2E8F0',
|
||||
backgroundPress: '#CBD5E1',
|
||||
backgroundStrong: tokens.color.surface,
|
||||
backgroundTransparent: 'rgba(241, 245, 249, 0)',
|
||||
color: tokens.color.text,
|
||||
colorHover: '#1E293B',
|
||||
colorPress: '#1E293B',
|
||||
colorFocus: '#1E293B',
|
||||
borderColor: tokens.color.border,
|
||||
borderColorHover: '#CBD5E1',
|
||||
borderColorPress: '#94A3B8',
|
||||
shadowColor: 'rgba(15, 23, 42, 0.08)',
|
||||
shadowColorPress: 'rgba(15, 23, 42, 0.12)',
|
||||
shadowColorFocus: 'rgba(15, 23, 42, 0.12)',
|
||||
surface: tokens.color.surface,
|
||||
muted: tokens.color.muted,
|
||||
blue3: tokens.color.accentSoft,
|
||||
blue6: '#6366F1', // Indigo 500
|
||||
blue10: tokens.color.primary,
|
||||
blue11: '#4338CA', // Indigo 700
|
||||
},
|
||||
dark: {
|
||||
...baseThemes.dark,
|
||||
primary: tokens.color.primary,
|
||||
accent: tokens.color.accent,
|
||||
background: '#171219',
|
||||
backgroundHover: '#101A36',
|
||||
backgroundPress: '#132142',
|
||||
backgroundStrong: '#101A36',
|
||||
backgroundTransparent: 'rgba(11, 19, 43, 0)',
|
||||
color: '#F8FAFF',
|
||||
colorHover: '#FFFFFF',
|
||||
colorPress: '#F2F6FF',
|
||||
colorFocus: '#FFFFFF',
|
||||
borderColor: '#1F2A4A',
|
||||
borderColorHover: '#29345A',
|
||||
borderColorPress: '#313D67',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.55)',
|
||||
shadowColorPress: 'rgba(0, 0, 0, 0.65)',
|
||||
shadowColorFocus: 'rgba(0, 0, 0, 0.6)',
|
||||
surface: '#0F1B36',
|
||||
muted: '#121F3D',
|
||||
blue3: '#1B2550',
|
||||
blue6: '#3D5AFE',
|
||||
blue10: '#FF5C5C',
|
||||
blue11: '#FF8A8A',
|
||||
},
|
||||
light: lightTheme,
|
||||
dark: darkTheme,
|
||||
guestLight: { ...guestLightTheme },
|
||||
guestDark: { ...darkTheme },
|
||||
guestNight: { ...guestNightTheme },
|
||||
};
|
||||
|
||||
const sharedWeights = {
|
||||
@@ -97,17 +159,17 @@ const fonts = {
|
||||
...defaultConfig.fonts,
|
||||
body: {
|
||||
...defaultConfig.fonts.body,
|
||||
family: 'Manrope',
|
||||
family: 'var(--guest-body-font, Manrope)',
|
||||
weight: sharedWeights,
|
||||
},
|
||||
heading: {
|
||||
...defaultConfig.fonts.heading,
|
||||
family: 'Fraunces',
|
||||
family: 'var(--guest-heading-font, Fraunces)',
|
||||
weight: sharedWeights,
|
||||
},
|
||||
display: {
|
||||
...defaultConfig.fonts.heading,
|
||||
family: 'Fraunces',
|
||||
family: 'var(--guest-heading-font, Fraunces)',
|
||||
weight: sharedWeights,
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user