# Globals

> Global design constants for consistent spacing, sizing, and styling across your React Native app components.

**BNA UI** — a React Native / Expo component library.
These components render through `react-native`, not the DOM: there are no HTML
elements, no Tailwind classes and no Radix primitives. Source is copied into your
project and imported through `@/components/ui/*`, `@/components/charts/*`,
`@/hooks/*` and `@/theme/*`. Colours come from the `useColor` hook rather than
hardcoded hex; sizing tokens (`HEIGHT`, `FONT_SIZE`, `BORDER_RADIUS`, `CORNERS`)
come from `@/theme/globals`.

- Docs: https://ui.ahmedbna.com/docs/theme/globals
- Markdown: https://ui.ahmedbna.com/docs/theme/globals.md
- Structured JSON (props, usage, source, examples): https://ui.ahmedbna.com/r/ai/globals.json
- Install payload (source plus every file it imports): https://ui.ahmedbna.com/r/globals.json
- Install: `npx bna-ui add globals`

---

## Installation

### CLI

```bash
npx bna-ui add globals
```

### Manual

**1.** Copy and paste the following code into your project.

```ts
// theme/globals.ts
export const HEIGHT = 48;
export const FONT_SIZE = 17;
export const BORDER_RADIUS = 26;
export const CORNERS = 999;

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

**2.** Update the import paths to match your project setup.

## Usage

```tsx
import { HEIGHT, FONT_SIZE, BORDER_RADIUS, CORNERS } from '@/theme/globals';
```

```tsx
export function StyledButton({ title, onPress }) {
  return (
    <TouchableOpacity
      style={{
        height: HEIGHT,
        backgroundColor: '#007AFF',
        borderRadius: BORDER_RADIUS,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 16,
      }}
      onPress={onPress}
    >
      <Text
        style={{
          color: 'white',
          fontSize: FONT_SIZE,
          fontWeight: '600',
        }}
      >
        {title}
      </Text>
    </TouchableOpacity>
  );
}
```

## Constants

### HEIGHT

Standard height for interactive elements like buttons, input fields, and list items.

| Value | Description                                            |
| ----- | ------------------------------------------------------ |
| `48`  | Standard height in pixels for consistent touch targets |

**Usage:**

```tsx
const buttonStyle = {
  height: HEIGHT,
  minHeight: HEIGHT,
};
```

### FONT\_SIZE

Standard font size for body text and interactive elements.

| Value | Description                                              |
| ----- | -------------------------------------------------------- |
| `17`  | Base font size in pixels following iOS design guidelines |

**Usage:**

```tsx
const textStyle = {
  fontSize: FONT_SIZE,
  lineHeight: FONT_SIZE * 1.4, // 23.8px line height
};
```

### BORDER\_RADIUS

Standard border radius for rounded elements like buttons and cards.

| Value | Description                                            |
| ----- | ------------------------------------------------------ |
| `26`  | Border radius in pixels for moderately rounded corners |

**Usage:**

```tsx
const cardStyle = {
  borderRadius: BORDER_RADIUS,
  backgroundColor: '#F2F2F7',
};
```

### CORNERS

Maximum border radius for fully rounded elements like circular buttons or pills.

| Value | Description                                          |
| ----- | ---------------------------------------------------- |
| `999` | Large border radius value for fully rounded elements |

**Usage:**

```tsx
const pillStyle = {
  borderRadius: CORNERS,
  paddingHorizontal: 16,
  paddingVertical: 8,
};
```

### SPACING

A five-step spacing scale for margins, padding, and gaps.

| Key  | Value | Description                             |
| ---- | ----- | --------------------------------------- |
| `xs` | `4`   | Tight spacing, icon gaps                |
| `sm` | `8`   | Compact spacing between related content |
| `md` | `16`  | Default spacing between elements        |
| `lg` | `24`  | Section-level spacing                   |
| `xl` | `32`  | Large layout spacing                    |

**Usage:**

```tsx
const cardStyle = {
  padding: SPACING.md,
  gap: SPACING.sm,
  marginBottom: SPACING.lg,
};
```

## Usage Examples

### Standard Button Component

```tsx
import { HEIGHT, FONT_SIZE, BORDER_RADIUS } from '@/theme/globals';
import { Colors } from '@/theme/colors';

export function Button({ title, variant = 'primary', onPress, disabled }) {
  const colors = Colors.light; // or use useColorScheme hook

  const getButtonStyle = () => {
    const baseStyle = {
      height: HEIGHT,
      borderRadius: BORDER_RADIUS,
      justifyContent: 'center',
      alignItems: 'center',
      paddingHorizontal: 24,
    };

    switch (variant) {
      case 'primary':
        return {
          ...baseStyle,
          backgroundColor: disabled ? colors.muted : colors.primary,
        };
      case 'secondary':
        return {
          ...baseStyle,
          backgroundColor: colors.secondary,
          borderWidth: 1,
          borderColor: colors.border,
        };
      default:
        return baseStyle;
    }
  };

  const getTextStyle = () => ({
    fontSize: FONT_SIZE,
    fontWeight: '600',
    color: variant === 'primary' ? colors.primaryForeground : colors.text,
  });

  return (
    <TouchableOpacity
      style={getButtonStyle()}
      onPress={onPress}
      disabled={disabled}
    >
      <Text style={getTextStyle()}>{title}</Text>
    </TouchableOpacity>
  );
}
```

### Input Field Component

```tsx
import { HEIGHT, FONT_SIZE, BORDER_RADIUS } from '@/theme/globals';
import { Colors } from '@/theme/colors';

export function TextInput({ placeholder, value, onChangeText, ...props }) {
  const colors = Colors.light;

  return (
    <View
      style={{
        height: HEIGHT,
        borderRadius: BORDER_RADIUS,
        backgroundColor: colors.input,
        borderWidth: 1,
        borderColor: colors.border,
        paddingHorizontal: 16,
        justifyContent: 'center',
      }}
    >
      <TextInput
        style={{
          fontSize: FONT_SIZE,
          color: colors.text,
          flex: 1,
        }}
        placeholder={placeholder}
        placeholderTextColor={colors.mutedForeground}
        value={value}
        onChangeText={onChangeText}
        {...props}
      />
    </View>
  );
}
```

## Best Practices

### Consistency

Always use the global constants instead of hardcoded values to ensure consistency across your app.

```tsx
// ✅ Good - uses global constants
const styles = StyleSheet.create({
  button: {
    height: HEIGHT,
    borderRadius: BORDER_RADIUS,
  },
  text: {
    fontSize: FONT_SIZE,
  },
});

// ❌ Bad - hardcoded values
const styles = StyleSheet.create({
  button: {
    height: 48,
    borderRadius: 26,
  },
  text: {
    fontSize: 17,
  },
});
```

### Variations

Use the constants as a base and create variations when needed.

```tsx
// Standard size
const normalButton = {
  height: HEIGHT,
  fontSize: FONT_SIZE,
};

// Large size
const largeButton = {
  height: HEIGHT * 1.25, // 60px
  fontSize: FONT_SIZE + 2, // 19px
};

// Small size
const smallButton = {
  height: HEIGHT * 0.75, // 36px
  fontSize: FONT_SIZE - 2, // 15px
};
```

### Responsive Design

Consider using these constants as a base for responsive design calculations.

```tsx
import { Dimensions } from 'react-native';
import { HEIGHT, FONT_SIZE } from '@/theme/globals';

const { width } = Dimensions.get('window');
const isTablet = width > 768;

const responsiveStyles = {
  button: {
    height: isTablet ? HEIGHT * 1.2 : HEIGHT,
    fontSize: isTablet ? FONT_SIZE + 1 : FONT_SIZE,
  },
};
```

## Design System Integration

These constants form the foundation of your design system and should be used alongside your color system for consistent theming.

```tsx
import {
  HEIGHT,
  FONT_SIZE,
  BORDER_RADIUS,
  CORNERS,
  SPACING,
} from '@/theme/globals';
import { Colors } from '@/theme/colors';

export const designSystem = {
  spacing: SPACING,
  sizing: {
    height: HEIGHT,
    borderRadius: BORDER_RADIUS,
    corners: CORNERS,
  },
  typography: {
    fontSize: FONT_SIZE,
    lineHeight: FONT_SIZE * 1.4,
  },
  colors: Colors,
};
```

## Platform Considerations

The global constants follow iOS design guidelines and provide optimal touch targets and readability across different screen sizes and densities. The 48px height ensures comfortable interaction on both phones and tablets.

## Accessibility

The HEIGHT constant (48px) meets accessibility guidelines for minimum touch target size, ensuring comfortable interaction for users with motor impairments. The FONT\_SIZE (17px) provides good readability while maintaining the platform's design language.