create-rn-starter-kit

// template/src/components/Tile/styles.ts import { StyleSheet } from 'react-native'; import { ProcessedTheme } from '../../theme/tokenProcessor'; export const createTileStyles = (theme: ProcessedTheme) => StyleSheet.create({ // Base tile styles tile: { backgroundColor: theme.colors.surface, borderRadius: theme.borderRadius.md, padding: theme.spacing.md, marginBottom: theme.spacing.md, borderWidth: 1, borderColor: theme.colors.border, }, // Tile header tileHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: theme.spacing.md, }, tileHeaderLeft: { flex: 1, }, tileTitle: { color: theme.colors.text, fontSize: theme.fontSize.lg, fontWeight: '600', marginBottom: theme.spacing.xs, }, tileSubtitle: { color: theme.colors.textSecondary, fontSize: theme.fontSize.sm, }, menuButton: { padding: theme.spacing.xs, }, menuDots: { color: theme.colors.text, fontSize: theme.fontSize.base, }, // Condensed account tile layout condensedAccountTile: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: theme.spacing.md, paddingHorizontal: theme.spacing.md, }, condensedAccountLeft: { flex: 1, }, condensedAccountTitle: { color: theme.colors.text, fontSize: theme.fontSize.base, fontWeight: '500', marginBottom: theme.spacing.xs, }, condensedAccountSubtitle: { color: theme.colors.textSecondary, fontSize: theme.fontSize.sm, }, condensedAccountRight: { alignItems: 'flex-end', }, condensedBalance: { color: theme.colors.text, fontSize: theme.fontSize.lg, fontWeight: '600', }, // Balance and amounts balance: { color: theme.colors.text, fontSize: theme.fontSize.xl, fontWeight: 'bold', marginBottom: theme.spacing.xs, }, negativeBalance: { color: theme.colors.semantic.error, }, positiveBalance: { color: theme.colors.text, }, balanceLabel: { color: theme.colors.textSecondary, fontSize: theme.fontSize.sm, marginBottom: 2, }, additionalInfo: { color: theme.colors.textSecondary, fontSize: theme.fontSize.sm, marginBottom: theme.spacing.md, }, // Promo message styles promoContainer: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: theme.spacing.md, paddingHorizontal: theme.spacing.md, marginBottom: theme.spacing.md, // Move the bottom margin here backgroundColor: theme.colors.surface, // Same as tile background borderRadius: theme.borderRadius.md, borderWidth: 1, borderColor: theme.colors.border, borderTopWidth: 0, // Remove top border to connect with tile above borderTopLeftRadius: 0, // Remove top border radius borderTopRightRadius: 0, // Remove top border radius }, // Special style for tiles that have promos - no bottom margin tileWithPromo: { marginBottom: 0, }, promoText: { color: theme.colors.text, fontSize: theme.fontSize.base, fontWeight: '500', flex: 1, }, promoArrow: { color: theme.colors.text, fontSize: theme.fontSize.lg, marginLeft: theme.spacing.sm, }, // Actions actionsContainer: { flexDirection: 'row', marginTop: theme.spacing.md, }, actionButton: { backgroundColor: theme.colors.primary[500], paddingVertical: theme.spacing.md, paddingHorizontal: theme.spacing.md, borderRadius: theme.borderRadius.md, marginRight: theme.spacing.sm, flex: 1, }, actionButtonText: { color: theme.colors.neutral[50], textAlign: 'center', fontSize: theme.fontSize.sm, }, // Credit card details detailsContainer: { backgroundColor: theme.colors.background, borderRadius: theme.borderRadius.md, padding: theme.spacing.md, marginTop: theme.spacing.md, marginBottom: theme.spacing.md, borderWidth: 1, borderColor: theme.colors.border, }, detailRow: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: theme.spacing.xs, borderBottomWidth: 1, borderBottomColor: theme.colors.border, }, detailLabel: { color: theme.colors.text, fontSize: theme.fontSize.sm, }, detailValue: { color: theme.colors.text, fontSize: theme.fontSize.sm, fontWeight: '500', }, primaryActionButton: { backgroundColor: theme.colors.primary[500], paddingVertical: theme.spacing.md, borderRadius: theme.borderRadius.md, alignItems: 'center', }, primaryActionText: { color: theme.colors.neutral[50], fontSize: theme.fontSize.base, fontWeight: '600', }, // Service tiles serviceTile: { padding: theme.spacing.md, }, serviceTileContent: { flexDirection: 'row', alignItems: 'center', }, serviceIcon: { width: 50, height: 50, borderRadius: 25, justifyContent: 'center', alignItems: 'center', marginRight: theme.spacing.md, }, serviceIconText: { color: theme.colors.neutral[50], fontSize: theme.fontSize.sm, fontWeight: 'bold', }, serviceTextContainer: { flex: 1, }, serviceTitleRow: { flexDirection: 'row', alignItems: 'center', marginBottom: theme.spacing.xs, }, serviceTitle: { color: theme.colors.text, fontSize: theme.fontSize.base, fontWeight: '600', marginRight: theme.spacing.sm, }, serviceDescription: { color: theme.colors.textSecondary, fontSize: theme.fontSize.sm, }, badge: { paddingHorizontal: theme.spacing.sm, paddingVertical: 2, borderRadius: theme.borderRadius.sm * 3, }, badgeText: { color: theme.colors.neutral[50], fontSize: theme.fontSize.sm, fontWeight: 'bold', }, arrow: { color: theme.colors.text, fontSize: theme.fontSize.lg, marginLeft: theme.spacing.sm, }, // Service grid serviceGrid: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', }, gridItem: { width: '48%', backgroundColor: theme.colors.surface, borderRadius: theme.borderRadius.md, padding: theme.spacing.md, marginBottom: theme.spacing.md, borderWidth: 1, borderColor: theme.colors.border, }, gridIcon: { width: 40, height: 40, borderRadius: 20, justifyContent: 'center', alignItems: 'center', marginBottom: theme.spacing.md, }, gridIconText: { color: theme.colors.neutral[50], fontSize: 10, fontWeight: 'bold', }, gridTitle: { color: theme.colors.text, fontSize: theme.fontSize.base, fontWeight: '600', marginBottom: theme.spacing.xs, }, gridDescription: { color: theme.colors.textSecondary, fontSize: theme.fontSize.sm, lineHeight: 16, }, // Promotional tiles promotionalTile: { padding: theme.spacing.md, }, promotionalContent: { flexDirection: 'row', alignItems: 'center', }, promotionalText: { flex: 1, marginRight: theme.spacing.md, }, promotionalTitle: { color: theme.colors.text, fontSize: theme.fontSize.lg, fontWeight: '600', marginBottom: theme.spacing.sm, }, promotionalDescription: { color: theme.colors.textSecondary, fontSize: theme.fontSize.sm, lineHeight: 20, marginBottom: theme.spacing.md, }, promotionalAction: { flexDirection: 'row', alignItems: 'center', }, promotionalActionText: { color: theme.colors.primary[500], fontSize: theme.fontSize.base, fontWeight: '600', marginRight: theme.spacing.xs, }, promotionalArrow: { color: theme.colors.primary[500], fontSize: theme.fontSize.base, }, promotionalImage: { width: 60, height: 60, borderRadius: 30, justifyContent: 'center', alignItems: 'center', }, promotionalImageText: { color: theme.colors.neutral[50], fontSize: 10, fontWeight: 'bold', }, });