diff --git a/resources/js/admin/mobile/theme.ts b/resources/js/admin/mobile/theme.ts index 210333c..c0be95d 100644 --- a/resources/js/admin/mobile/theme.ts +++ b/resources/js/admin/mobile/theme.ts @@ -10,8 +10,8 @@ export const ADMIN_COLORS = { success: '#10B981', // Emerald 500 danger: '#EF4444', // Red 500 text: '#0F172A', // Slate 900 - textMuted: '#475569', // Slate 600 - textSubtle: '#64748B', // Slate 500 + textMuted: '#64748B', // Slate 500 + textSubtle: '#94A3B8', // Slate 400 border: '#E2E8F0', // Slate 200 surface: '#FFFFFF', surfaceMuted: '#F8FAFC', // Slate 50 @@ -97,13 +97,25 @@ function isDarkColor(color: string): boolean { export function useAdminTheme() { const theme = useTheme(); - const background = String(theme.background?.val ?? ADMIN_COLORS.surfaceMuted); + + // Resolve core colors + const primary = String(theme.primary?.val ?? ADMIN_COLORS.primary); const surface = String(theme.surface?.val ?? ADMIN_COLORS.surface); const border = String(theme.borderColor?.val ?? ADMIN_COLORS.border); + const text = String(theme.color?.val ?? ADMIN_COLORS.text); + + // Muted/Subtle should NOT use theme.muted (which is a background color in Tamagui standard) + // Instead, we derive them from Text with opacity or use specific palette values if available + // But safer is Alpha since it works in both Light (Dark Text) and Dark (Light Text) modes. + const muted = withAlpha(text, 0.65); + const subtle = withAlpha(text, 0.45); + + const background = String(theme.background?.val ?? ADMIN_COLORS.surfaceMuted); const isDark = isDarkColor(background); - const glassSurface = withAlpha(surface, isDark ? 0.96 : 0.98); - const glassSurfaceStrong = withAlpha(surface, isDark ? 1 : 1); - const glassBorder = withAlpha(border, isDark ? 0.85 : 0.95); + + const glassSurface = withAlpha(surface, isDark ? 0.90 : 0.85); + const glassSurfaceStrong = withAlpha(surface, isDark ? 0.96 : 0.95); + const glassBorder = withAlpha(border, 0.5); const glassShadow = isDark ? 'rgba(0, 0, 0, 0.55)' : 'rgba(15, 23, 42, 0.08)'; const appBackground = isDark ? ADMIN_GRADIENTS.appBackgroundDark : ADMIN_GRADIENTS.appBackground; @@ -111,13 +123,13 @@ export function useAdminTheme() { theme, background, surface, - surfaceMuted: String(theme.muted?.val ?? ADMIN_COLORS.surfaceMuted), + surfaceMuted: String(theme.muted?.val ?? ADMIN_COLORS.surfaceMuted), // Use theme.muted as BG border, - text: String(theme.color?.val ?? ADMIN_COLORS.text), - textStrong: String(theme.text?.val ?? theme.color?.val ?? ADMIN_COLORS.text), - muted: String(theme.muted?.val ?? ADMIN_COLORS.textMuted), - subtle: String(theme.textSubtle?.val ?? ADMIN_COLORS.textSubtle), - primary: String(theme.primary?.val ?? ADMIN_COLORS.primary), + text, + textStrong: text, // Alias + muted, // Now properly derived from text color + subtle, // Now properly derived from text color + primary, accent: String(theme.accent?.val ?? ADMIN_COLORS.accent), accentSoft: String(theme.blue3?.val ?? ADMIN_COLORS.accentSoft), accentStrong: String(theme.blue11?.val ?? ADMIN_COLORS.primaryStrong), @@ -140,4 +152,4 @@ export function useAdminTheme() { glassShadow, appBackground, }; -} \ No newline at end of file +}