expo-theme

Files (1)

• SKILL.md

SKILL.md (first lines)

## Propósito

Mantener estilos consistentes usando theme tokens y StyleSheet.create().

---

## Theme Tokens

Ubicación: `src/shared/theme/tokens.ts`

```typescript
export const colors = {
  primary: "#007BFF",
  danger: "#DC3545",
  success: "#28A745",
  warning: "#FFC107",
  bgLight: "#F8F9FA",
  textPrimary: "#212529",
  textSecondary: "#495057",
  textMuted: "#868E96",
  white: "#FFFFFF",
  border: "#DEE2E6",
} as const;

export const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
} as const;

export const fontSizes = {
  xs: 11,
  sm: 13,
  md: 15,
  lg: 18,
  xl: 22,
  xxl: 28,
} as const;

export const borderRadius = {
  sm: 4,
  md: 8,
  lg: 12,
  full: 9999,
} as const;
```

---

## Importar Tokens

```typescript
import { colors, spacing, fontSizes } from "@/shared/theme/tokens";
```

**NUNCA** hardcodear colores:

```typescript
// ❌ Incorrecto
backgroundColor: "#007BFF",

// ✅ Correcto
backgroundColor: colors.primary,
```

---

## StyleSheet Pattern

```tsx
import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { colors, spacing, fontSizes } from "@/shared/theme/tokens";

export default function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Título</Text>
      <Text style={styles.subtitle}>Subtítulo</Text>
    </View>
  );
}

// Siempre al final del archivo
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.bgLight,
    padding: spacing.md,
  },
  title: {
    fontSize: fontSizes.xl,
    fontWeight: "700",
    color: colors.textPrimary,
    marginBottom: spacing.sm,
  },
  subtitle: {
    fontSize: fontSizes.md,
    color: colors.textSecondary,
  },
});
```

---

## Patrones Comunes

### Container Centrado

```typescript
centered: {
  flex: 1,
  justifyContent: "center",
  alignItems: "center",
},
```

From cabrerojas/myquota-app, MIT.

More from cabrerojas/myquota-app