feat: unify pdf datasheet architecture and regenerate all products

scripts/pdf/react-pdf/styles.ts

@@ -0,0 +1,155 @@
+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,
+  },
+});