mirror of
https://github.com/bulwarkmail/native.git
synced 2026-11-02 16:07:12 +00:00
Linus Rath
cf3f919fa2
- Integrated useColors hook for dynamic theming in SettingsScreen. - Updated tab labels and titles to use localized strings. - Refactored styles to utilize theme palette for consistent styling. - Improved locale subscription to re-render labels on language change. feat: implement useSheetDrag hook for bottom sheet gesture handling - Added useSheetDrag hook to manage drag-to-dismiss functionality for bottom sheets. - Configured pan responder for handling drag gestures and dismissing the sheet based on distance and velocity. refactor: restructure color and token management - Introduced useColors and useResolvedTheme hooks for better theme management. - Separated light and dark color palettes for improved maintainability. - Updated tokens to reflect new theming structure and ensure consistency across components.
48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, ViewStyle } from 'react-native';
|
|
import { radius, typography, type ThemePalette } from '../theme/tokens';
|
|
import { useColors } from '../theme/colors';
|
|
|
|
interface BadgeProps {
|
|
children: string;
|
|
variant?: 'default' | 'primary' | 'destructive' | 'outline' | 'muted';
|
|
style?: ViewStyle;
|
|
}
|
|
|
|
export default function Badge({ children, variant = 'default', style }: BadgeProps) {
|
|
const c = useColors();
|
|
const styles = React.useMemo(() => makeStyles(c), [c]);
|
|
return (
|
|
<View style={[styles.base, styles[`bg_${variant}` as const], style]}>
|
|
<Text style={[styles.text, styles[`text_${variant}` as const]]}>
|
|
{children}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function makeStyles(c: ThemePalette) {
|
|
return StyleSheet.create({
|
|
base: {
|
|
borderRadius: radius.full,
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 2,
|
|
alignSelf: 'flex-start',
|
|
},
|
|
text: { ...typography.caption, fontWeight: '500' },
|
|
|
|
bg_default: { backgroundColor: c.surface },
|
|
bg_primary: { backgroundColor: c.primaryBg },
|
|
bg_destructive: { backgroundColor: c.errorBg },
|
|
bg_outline: { backgroundColor: 'transparent', borderWidth: 1, borderColor: c.border },
|
|
bg_muted: { backgroundColor: c.muted },
|
|
|
|
text_default: { color: c.text },
|
|
text_primary: { color: c.primary },
|
|
text_destructive: { color: c.error },
|
|
text_outline: { color: c.text },
|
|
text_muted: { color: c.mutedForeground },
|
|
});
|
|
}
|
|
|