151 lines
4.3 KiB
TypeScript
151 lines
4.3 KiB
TypeScript
import { Font, StyleSheet } from '@react-pdf/renderer';
|
|
|
|
// Prevent automatic word hyphenation, which can create multi-line table headers
|
|
// even when we try to keep them single-line.
|
|
Font.registerHyphenationCallback(word => [word]);
|
|
|
|
export const COLORS = {
|
|
navy: '#0E2A47',
|
|
mediumGray: '#6B7280',
|
|
darkGray: '#1F2933',
|
|
lightGray: '#E6E9ED',
|
|
almostWhite: '#F8F9FA',
|
|
headerBg: '#F6F8FB',
|
|
} as const;
|
|
|
|
export const styles = StyleSheet.create({
|
|
page: {
|
|
paddingTop: 54,
|
|
paddingLeft: 54,
|
|
paddingRight: 54,
|
|
paddingBottom: 72,
|
|
fontFamily: 'Helvetica',
|
|
fontSize: 10,
|
|
color: COLORS.darkGray,
|
|
backgroundColor: '#FFFFFF',
|
|
},
|
|
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 16,
|
|
backgroundColor: COLORS.headerBg,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: COLORS.lightGray,
|
|
marginBottom: 16,
|
|
},
|
|
headerLeft: { flexDirection: 'row', alignItems: 'center', gap: 10 },
|
|
logo: { width: 110, height: 24, objectFit: 'contain' },
|
|
brandFallback: { flexDirection: 'row', alignItems: 'baseline', gap: 6 },
|
|
brandFallbackKlz: { fontSize: 18, fontWeight: 700, color: COLORS.navy },
|
|
brandFallbackCables: { fontSize: 10, color: COLORS.mediumGray },
|
|
headerRight: { flexDirection: 'row', alignItems: 'center', gap: 10 },
|
|
headerTitle: { fontSize: 9, fontWeight: 700, color: COLORS.navy, letterSpacing: 0.2 },
|
|
qr: { width: 34, height: 34, objectFit: 'contain' },
|
|
|
|
footer: {
|
|
position: 'absolute',
|
|
left: 54,
|
|
right: 54,
|
|
bottom: 36,
|
|
paddingTop: 10,
|
|
borderTopWidth: 1,
|
|
borderTopColor: COLORS.lightGray,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
fontSize: 8,
|
|
color: COLORS.mediumGray,
|
|
},
|
|
|
|
h1: { fontSize: 18, fontWeight: 700, color: COLORS.navy, marginBottom: 6 },
|
|
subhead: { fontSize: 10.5, color: COLORS.mediumGray, marginBottom: 14 },
|
|
|
|
heroBox: {
|
|
height: 110,
|
|
borderWidth: 1,
|
|
borderColor: COLORS.lightGray,
|
|
backgroundColor: COLORS.almostWhite,
|
|
marginBottom: 16,
|
|
justifyContent: 'center',
|
|
overflow: 'hidden',
|
|
},
|
|
heroImage: { width: '100%', height: '100%', objectFit: 'contain' },
|
|
noImage: { fontSize: 8, color: COLORS.mediumGray, paddingHorizontal: 12 },
|
|
|
|
section: {
|
|
borderWidth: 1,
|
|
borderColor: COLORS.lightGray,
|
|
padding: 14,
|
|
marginBottom: 14,
|
|
},
|
|
sectionPlain: {
|
|
paddingVertical: 2,
|
|
marginBottom: 12,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 10,
|
|
fontWeight: 700,
|
|
color: COLORS.navy,
|
|
marginBottom: 8,
|
|
letterSpacing: 0.2,
|
|
},
|
|
body: { fontSize: 10, lineHeight: 1.5, color: COLORS.darkGray },
|
|
|
|
kvGrid: {
|
|
width: '100%',
|
|
borderWidth: 1,
|
|
borderColor: COLORS.lightGray,
|
|
},
|
|
kvRow: {
|
|
flexDirection: 'row',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: COLORS.lightGray,
|
|
},
|
|
kvRowAlt: { backgroundColor: COLORS.almostWhite },
|
|
kvRowLast: { borderBottomWidth: 0 },
|
|
kvCell: { paddingVertical: 6, paddingHorizontal: 8 },
|
|
// Visual separator between (label,value) pairs in the 4-col KV grid.
|
|
// Matches the engineering-table look and improves scanability.
|
|
kvMidDivider: {
|
|
borderRightWidth: 1,
|
|
borderRightColor: COLORS.lightGray,
|
|
},
|
|
kvLabelText: { fontSize: 8.5, fontWeight: 700, color: COLORS.mediumGray },
|
|
kvValueText: { fontSize: 9.5, color: COLORS.darkGray },
|
|
|
|
tableWrap: { width: '100%', borderWidth: 1, borderColor: COLORS.lightGray, marginBottom: 14 },
|
|
tableHeader: {
|
|
width: '100%',
|
|
flexDirection: 'row',
|
|
backgroundColor: '#FFFFFF',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: COLORS.lightGray,
|
|
},
|
|
tableHeaderCell: {
|
|
paddingVertical: 5,
|
|
paddingHorizontal: 4,
|
|
fontSize: 6.6,
|
|
fontWeight: 700,
|
|
color: COLORS.navy,
|
|
},
|
|
tableHeaderCellCfg: {
|
|
paddingHorizontal: 6,
|
|
},
|
|
tableHeaderCellDivider: {
|
|
borderRightWidth: 1,
|
|
borderRightColor: COLORS.lightGray,
|
|
},
|
|
tableRow: { width: '100%', flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: COLORS.lightGray },
|
|
tableRowAlt: { backgroundColor: COLORS.almostWhite },
|
|
tableCell: { paddingVertical: 4, paddingHorizontal: 4, fontSize: 6.6, color: COLORS.darkGray },
|
|
tableCellCfg: {
|
|
paddingHorizontal: 6,
|
|
},
|
|
tableCellDivider: {
|
|
borderRightWidth: 1,
|
|
borderRightColor: COLORS.lightGray,
|
|
},
|
|
});
|