mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 19:19:41 +02:00
e7f5f942f3
Projects included: - maerchenzauber (NestJS backend + Expo mobile + SvelteKit web + Astro landing) - manacore (Expo mobile + SvelteKit web + Astro landing) - manadeck (NestJS backend + Expo mobile + SvelteKit web) - memoro (Expo mobile + SvelteKit web + Astro landing) This commit preserves the current state before monorepo restructuring. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
/**
|
|
* Central spacing configuration for consistent layout across the app
|
|
*
|
|
* Usage:
|
|
* ```tsx
|
|
* import { spacing } from '~/utils/spacing';
|
|
*
|
|
* <View style={{ padding: spacing.container.horizontal, marginBottom: spacing.section }}>
|
|
* ```
|
|
*/
|
|
|
|
export const spacing = {
|
|
// Base spacing units (multiples of 4)
|
|
xs: 4,
|
|
sm: 8,
|
|
md: 12,
|
|
lg: 16,
|
|
xl: 24,
|
|
xxl: 32,
|
|
xxxl: 48,
|
|
|
|
// Container spacing (standard padding for screen containers)
|
|
container: {
|
|
horizontal: 16,
|
|
vertical: 24,
|
|
top: 24, // Top padding after PageHeader
|
|
bottom: 24, // Bottom padding before tab bar
|
|
},
|
|
|
|
// Section spacing (between major sections/cards)
|
|
section: 24,
|
|
|
|
// Card spacing
|
|
card: {
|
|
gap: 24, // Gap between cards
|
|
padding: 16, // Internal padding (maps to "lg" in Card component)
|
|
},
|
|
|
|
// Content spacing
|
|
content: {
|
|
title: 16, // Space after section titles
|
|
item: 16, // Space between list items
|
|
small: 12, // Small spacing between related elements
|
|
micro: 8, // Very small spacing
|
|
},
|
|
|
|
// Layout specific
|
|
header: {
|
|
paddingBottom: 16,
|
|
},
|
|
|
|
tabBar: {
|
|
clearance: 100, // Bottom padding to clear tab bar
|
|
},
|
|
} as const;
|
|
|
|
// Type for spacing values
|
|
export type Spacing = typeof spacing;
|
|
|
|
/**
|
|
* Hook to access spacing values
|
|
* Future: Could be extended to provide different spacing scales per theme
|
|
*/
|
|
export function useSpacing() {
|
|
return spacing;
|
|
}
|