88 lines
3.5 KiB
TypeScript
88 lines
3.5 KiB
TypeScript
import { Platform } from 'react-native';
|
|
|
|
/**
|
|
* Runtime token mirror for designs/design-tokens.json.
|
|
* Components must consume this module rather than introduce screen-local values.
|
|
*/
|
|
export const colors = {
|
|
brand: {
|
|
ink: '#061430',
|
|
cobalt: '#0559FA',
|
|
cobaltPressed: '#0047D5',
|
|
cobaltSoft: '#E7F0FF',
|
|
coral: '#FF7A4F',
|
|
coralSoft: '#FFE9E1',
|
|
sky: '#D5F2FF',
|
|
skySoft: '#F0FAFF',
|
|
},
|
|
neutral: {
|
|
canvas: '#F7F9FC',
|
|
surface: '#FFFFFF',
|
|
surfaceSubtle: '#F0F4F8',
|
|
textPrimary: '#061430',
|
|
textSecondary: '#4E6078',
|
|
textMuted: '#68788F',
|
|
textDisabled: '#9AA8B8',
|
|
border: '#DDE5EE',
|
|
divider: '#E9EEF4',
|
|
scrim: 'rgba(6, 20, 48, 0.46)',
|
|
},
|
|
semantic: {
|
|
success: { solid: '#168A63', text: '#117A57', soft: '#DDF5EC' },
|
|
warning: { solid: '#F0B44D', text: '#8A5900', soft: '#FFF4CE' },
|
|
danger: { solid: '#CF4038', text: '#A82E2A', soft: '#FFE9E7' },
|
|
neutral: { solid: '#68788F', text: '#4E6078', soft: '#EDF1F5' },
|
|
},
|
|
subject: {
|
|
ocean: { surface: '#BFD5FF', accent: '#0559FA', text: '#061430' },
|
|
aqua: { surface: '#DDF7FA', accent: '#167F96', text: '#061430' },
|
|
lilac: { surface: '#FDF0FF', accent: '#9B4BA4', text: '#061430' },
|
|
sun: { surface: '#FFF3C4', accent: '#8A6400', text: '#061430' },
|
|
mint: { surface: '#DDF5EC', accent: '#117A57', text: '#061430' },
|
|
peach: { surface: '#FFE5D9', accent: '#B95230', text: '#061430' },
|
|
},
|
|
} as const;
|
|
|
|
export const spacing = { 0: 0, 1: 2, 2: 4, 3: 8, 4: 12, 5: 16, 6: 20, 7: 24, 8: 32, 9: 40, 10: 48, 11: 64 } as const;
|
|
export const radius = { small: 8, control: 12, card: 16, feature: 20, sheet: 28, pill: 999 } as const;
|
|
export const size = { touchTargetMin: 44, control: 52, controlCompact: 40, iconSmall: 16, icon: 20, iconLarge: 24, iconContainer: 40, screenGutter: 20, screenGutterWide: 24, contentMaxWidth: 560, tabBar: 68 } as const;
|
|
|
|
const fontFaces = {
|
|
regular: 'Manrope_400Regular',
|
|
medium: 'Manrope_500Medium',
|
|
semibold: 'Manrope_600SemiBold',
|
|
bold: 'Manrope_700Bold',
|
|
extrabold: 'Manrope_800ExtraBold',
|
|
} as const;
|
|
|
|
const systemFont = Platform.select({ ios: 'System', android: 'sans-serif', default: 'system-ui' });
|
|
const font = (face: keyof typeof fontFaces) => ({ fontFamily: fontFaces[face] || systemFont });
|
|
|
|
export const type = {
|
|
display: { ...font('extrabold'), fontSize: 40, lineHeight: 44, letterSpacing: -1.2 },
|
|
heading1: { ...font('extrabold'), fontSize: 32, lineHeight: 38, letterSpacing: -0.8 },
|
|
heading2: { ...font('bold'), fontSize: 24, lineHeight: 30, letterSpacing: -0.4 },
|
|
heading3: { ...font('bold'), fontSize: 20, lineHeight: 26, letterSpacing: -0.2 },
|
|
title: { ...font('bold'), fontSize: 17, lineHeight: 23, letterSpacing: 0 },
|
|
body: { ...font('regular'), fontSize: 15, lineHeight: 22, letterSpacing: 0 },
|
|
bodySmall: { ...font('regular'), fontSize: 13, lineHeight: 19, letterSpacing: 0 },
|
|
label: { ...font('semibold'), fontSize: 12, lineHeight: 16, letterSpacing: 0.1 },
|
|
caption: { ...font('medium'), fontSize: 11, lineHeight: 15, letterSpacing: 0.1 },
|
|
} as const;
|
|
|
|
export type TypeVariant = keyof typeof type;
|
|
export type SubjectTone = keyof typeof colors.subject;
|
|
export type SemanticTone = keyof typeof colors.semantic;
|
|
|
|
export const shadow = {
|
|
floating: {
|
|
shadowColor: colors.brand.ink,
|
|
shadowOpacity: 0.12,
|
|
shadowRadius: 18,
|
|
shadowOffset: { width: 0, height: 8 },
|
|
elevation: 8,
|
|
},
|
|
} as const;
|
|
|
|
export const motion = { instant: 100, quick: 160, standard: 220, emphasized: 320, pressedScale: 0.98 } as const;
|