@dankupfer/create-dn-starter/template/src/modules/feature/cards/styles.ts

Interactive CLI for creating modular React Native apps with Expo

// template/src/modules/feature/cards/styles.ts
import { StyleSheet } from 'react-native';
import { ProcessedTheme } from '../../../theme/tokenProcessor';

export const createCardsStyles = (theme: ProcessedTheme) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: theme.colors.background,
    },

    // Header styles (matching main app)
    header: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: theme.spacing.md,
      paddingTop: theme.spacing.sm,
    },
    headerLeft: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    notificationBadge: {
      backgroundColor: theme.colors.semantic.error,
      borderRadius: theme.borderRadius.sm * 3,
      paddingHorizontal: theme.spacing.xs + 2,
      paddingVertical: 2,
      marginRight: theme.spacing.md,
    },
    notificationCount: {
      color: theme.colors.neutral[50],
      fontSize: theme.fontSize.sm,
      fontWeight: 'bold',
    },
    sectionTitle: {
      color: theme.colors.text,
      fontSize: theme.fontSize.lg,
      fontWeight: '600',
    },
    logoutButton: {
      backgroundColor: theme.colors.surface,
      paddingHorizontal: theme.spacing.md,
      paddingVertical: theme.spacing.xs + 2,
      borderRadius: theme.borderRadius.sm,
    },
    logoutText: {
      color: theme.colors.text,
      fontSize: theme.fontSize.sm,
    },

    // Content styles
    content: {
      flex: 1,
    },
    welcomeSection: {
      padding: theme.spacing.lg,
      alignItems: 'center',
    },
    welcomeTitle: {
      color: theme.colors.text,
      fontSize: theme.fontSize.xl,
      fontWeight: 'bold',
      textAlign: 'center',
      marginBottom: theme.spacing.sm,
    },
    welcomeSubtitle: {
      color: theme.colors.textSecondary,
      fontSize: theme.fontSize.base,
      textAlign: 'center',
      lineHeight: 24,
    },

    // Cards section
    cardsSection: {
      paddingHorizontal: theme.spacing.md,
      marginBottom: theme.spacing.xl,
    },
    sectionHeading: {
      color: theme.colors.text,
      fontSize: theme.fontSize.lg,
      fontWeight: '600',
      marginBottom: theme.spacing.md,
    },

    // Card container
    cardContainer: {
      marginBottom: theme.spacing.lg,
    },
    cardVisual: {
      backgroundColor: theme.colors.primary[600], // Credit card uses primary color
      borderRadius: theme.borderRadius.lg,
      padding: theme.spacing.lg,
      marginBottom: theme.spacing.md,
      minHeight: 120,
      justifyContent: 'space-between',
    },
    debitCard: {
      backgroundColor: theme.colors.primary[900], // Darker shade for debit card
    },
    cardType: {
      color: theme.colors.neutral[50],
      fontSize: theme.fontSize.sm,
      fontWeight: '600',
      textTransform: 'uppercase',
      letterSpacing: 1,
    },
    cardNumber: {
      color: theme.colors.neutral[50],
      fontSize: theme.fontSize.lg,
      fontWeight: '600',
      letterSpacing: 2,
      marginVertical: theme.spacing.sm,
    },
    cardName: {
      color: theme.colors.neutral[50],
      fontSize: theme.fontSize.sm,
      fontWeight: '600',
      marginTop: 'auto',
    },
    cardExpiry: {
      color: theme.colors.neutral[50],
      fontSize: theme.fontSize.sm,
      position: 'absolute',
      bottom: theme.spacing.lg,
      right: theme.spacing.lg,
    },

    // Card actions
    cardActions: {
      flexDirection: 'row',
      gap: theme.spacing.md,
    },
    actionButton: {
      backgroundColor: theme.colors.surface,
      borderColor: theme.colors.border,
      borderWidth: 1,
      borderRadius: theme.borderRadius.md,
      paddingVertical: theme.spacing.sm + 2,
      paddingHorizontal: theme.spacing.md,
      flex: 1,
    },
    actionButtonText: {
      color: theme.colors.text,
      fontSize: theme.fontSize.sm,
      fontWeight: '600',
      textAlign: 'center',
    },

    // Services section
    servicesSection: {
      paddingHorizontal: theme.spacing.md,
      marginBottom: theme.spacing.xl,
    },
    serviceItem: {
      backgroundColor: theme.colors.surface,
      borderRadius: theme.borderRadius.md,
      padding: theme.spacing.md,
      marginBottom: theme.spacing.md,
      flexDirection: 'row',
      alignItems: 'center',
      borderWidth: 1,
      borderColor: theme.colors.border,
    },
    serviceIcon: {
      width: 48,
      height: 48,
      borderRadius: 24,
      backgroundColor: theme.colors.primary[500],
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: theme.spacing.md,
    },
    serviceIconText: {
      fontSize: 20,
    },
    serviceContent: {
      flex: 1,
    },
    serviceTitle: {
      color: theme.colors.text,
      fontSize: theme.fontSize.base,
      fontWeight: '600',
      marginBottom: theme.spacing.xs,
    },
    serviceDescription: {
      color: theme.colors.textSecondary,
      fontSize: theme.fontSize.sm,
      lineHeight: 20,
    },
    serviceArrow: {
      color: theme.colors.primary[500],
      fontSize: theme.fontSize.lg,
      marginLeft: theme.spacing.sm,
    },

    // Spacing
    bottomPadding: {
      height: theme.spacing.xl,
    },
  });