225 lines
5.0 KiB
TypeScript
225 lines
5.0 KiB
TypeScript
import { StyleSheet } from 'react-native';
|
|
import { ThemeColors, colors as globalColors } from '../../theme';
|
|
|
|
export const getStyles = (colors: ThemeColors, isDark: boolean) =>
|
|
StyleSheet.create({
|
|
card: {
|
|
backgroundColor: colors.card,
|
|
borderRadius: 20,
|
|
marginBottom: 20,
|
|
shadowColor: isDark ? '#000000' : '#0F172A',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: isDark ? 0.25 : 0.08,
|
|
shadowRadius: 12,
|
|
elevation: 4,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
},
|
|
|
|
/* ── Header ── */
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
paddingTop: 16,
|
|
paddingBottom: 14,
|
|
},
|
|
titleRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
},
|
|
titleIconBadge: {
|
|
width: 34,
|
|
height: 34,
|
|
borderRadius: 10,
|
|
backgroundColor: globalColors.primary,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
shadowColor: globalColors.primary,
|
|
shadowOffset: { width: 0, height: 3 },
|
|
shadowOpacity: 0.4,
|
|
shadowRadius: 6,
|
|
elevation: 4,
|
|
},
|
|
title: {
|
|
fontSize: 15,
|
|
fontWeight: '700',
|
|
color: colors.text,
|
|
letterSpacing: 0.1,
|
|
},
|
|
subtitle: {
|
|
fontSize: 11,
|
|
fontWeight: '500',
|
|
color: colors.textMuted,
|
|
marginTop: 1,
|
|
letterSpacing: 0.2,
|
|
textTransform: 'lowercase',
|
|
},
|
|
|
|
/* ── Dropdown Pill ── */
|
|
dropdown: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 5,
|
|
paddingHorizontal: 11,
|
|
paddingVertical: 7,
|
|
borderRadius: 20,
|
|
borderWidth: 1.5,
|
|
borderColor: isDark
|
|
? `${globalColors.primary}55`
|
|
: `${globalColors.primary}33`,
|
|
backgroundColor: isDark
|
|
? `${globalColors.primary}18`
|
|
: `${globalColors.primary}0D`,
|
|
},
|
|
dropdownDot: {
|
|
width: 6,
|
|
height: 6,
|
|
borderRadius: 3,
|
|
backgroundColor: globalColors.primary,
|
|
},
|
|
dropdownText: {
|
|
fontSize: 12,
|
|
fontWeight: '700',
|
|
color: globalColors.primary,
|
|
letterSpacing: 0.2,
|
|
},
|
|
|
|
/* ── Divider ── */
|
|
divider: {
|
|
height: 1,
|
|
backgroundColor: colors.border,
|
|
marginHorizontal: 16,
|
|
marginBottom: 16,
|
|
opacity: isDark ? 0.5 : 0.8,
|
|
},
|
|
|
|
/* ── Body ── */
|
|
body: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: 16,
|
|
paddingBottom: 16,
|
|
},
|
|
chartContainer: {
|
|
width: 140,
|
|
height: 140,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
position: 'relative',
|
|
},
|
|
loaderContainer: {
|
|
flex: 1,
|
|
height: 140,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
centerLabelContainer: {
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
centerNumber: {
|
|
fontSize: 24,
|
|
fontWeight: '800',
|
|
color: colors.text,
|
|
lineHeight: 28,
|
|
},
|
|
centerText: {
|
|
fontSize: 12,
|
|
color: colors.textMuted,
|
|
fontWeight: '600',
|
|
marginTop: 2,
|
|
},
|
|
|
|
/* ── Legend ── */
|
|
legendContainer: {
|
|
flex: 1,
|
|
marginLeft: 16,
|
|
maxHeight: 140,
|
|
},
|
|
legendItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 7,
|
|
},
|
|
legendItemLeft: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
},
|
|
bullet: {
|
|
width: 10,
|
|
height: 10,
|
|
borderRadius: 5,
|
|
marginRight: 8,
|
|
},
|
|
legendLabel: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: colors.text,
|
|
},
|
|
legendItemRight: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
width: 76,
|
|
},
|
|
legendCount: {
|
|
fontSize: 13,
|
|
fontWeight: '700',
|
|
color: colors.text,
|
|
textAlign: 'right',
|
|
width: 32,
|
|
},
|
|
legendPercentage: {
|
|
fontSize: 12,
|
|
color: colors.textMuted,
|
|
textAlign: 'right',
|
|
width: 44,
|
|
},
|
|
|
|
/* ── Dropdown Menu ── */
|
|
menuOverlay: {
|
|
position: 'absolute',
|
|
top: 52,
|
|
right: 14,
|
|
backgroundColor: colors.card,
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
zIndex: 9999,
|
|
elevation: 20,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 6 },
|
|
shadowOpacity: isDark ? 0.35 : 0.12,
|
|
shadowRadius: 12,
|
|
minWidth: 120,
|
|
},
|
|
menuItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 11,
|
|
paddingHorizontal: 16,
|
|
},
|
|
menuItemActive: {
|
|
backgroundColor: isDark
|
|
? `${globalColors.primary}25`
|
|
: `${globalColors.primary}0F`,
|
|
},
|
|
menuItemText: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: colors.textSecondary,
|
|
},
|
|
menuItemTextActive: {
|
|
color: globalColors.primary,
|
|
fontWeight: '700',
|
|
},
|
|
});
|
|
|