واجهات متقنة: الثيم والتباعد وإمكانية الوصول

import { View, Text, StyleSheet } from 'react-native'; const T = {  color: { brand: '#E8820C', ink: '#1A202C', muted: '#718096', card: '#FFF8F0' },  space: { sm: 8, md: 16, lg: 24 },  radius: 14,}; export default function App() {  return (    <View style={{ padding: T.space.lg }}>      <View style={styles.card}>        <Text style={styles.title}>بطاقة متقنة</Text>        <Text style={styles.body}>ألوانٌ وتباعدٌ من نظامٍ واحد، فكل شيءٍ متناغم.</Text>      </View>    </View>  );} const styles = StyleSheet.create({  card: { backgroundColor: T.color.card, padding: T.space.md, borderRadius: T.radius },  title: { color: T.color.brand, fontSize: 20, fontWeight: 'bold', marginBottom: T.space.sm },  body: { color: T.color.muted, lineHeight: 22 },});

import { View, Text, Pressable, StyleSheet } from 'react-native'; export default function App() {  return (    <View style={{ padding: 20, gap: 12 }}>      <Text accessibilityRole="header" style={styles.h}>الإعدادات</Text>      <Pressable        accessibilityRole="button"        accessibilityLabel="تفعيل الإشعارات"        style={styles.btn}      >        <Text style={styles.bt}>🔔 الإشعارات</Text>      </Pressable>    </View>  );} const styles = StyleSheet.create({  h: { fontSize: 22, fontWeight: 'bold' },  btn: { minHeight: 48, justifyContent: 'center', paddingHorizontal: 16, backgroundColor: '#E8820C', borderRadius: 12 },  bt: { color: 'white', fontSize: 16 },});