klz-cables.com/scripts/pdf/react-pdf/styles.ts

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 = {
  primary: '#001a4d',
  primaryDark: '#000d26',
  accent: '#82ed20',
  textPrimary: '#111827',
  textSecondary: '#4b5563',
  textLight: '#9ca3af',
  neutral: '#f8f9fa',
  border: '#e5e7eb',
} as const;

export const styles = StyleSheet.create({
  page: {
    paddingTop: 0,
    paddingLeft: 30,
    paddingRight: 30,
    paddingBottom: 60,
    fontFamily: 'Helvetica',
    fontSize: 10,
    color: COLORS.textPrimary,
    backgroundColor: '#FFFFFF',
  },

  // Hero-style header
  hero: {
    backgroundColor: '#FFFFFF',
    paddingTop: 30,
    paddingBottom: 0,
    paddingHorizontal: 0,
    marginBottom: 20,
    position: 'relative',
    borderBottomWidth: 0,
    borderBottomColor: COLORS.border,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 24,
    paddingHorizontal: 0,
  },
  headerLeft: { flexDirection: 'row', alignItems: 'center', gap: 10 },
  logo: { width: 100, height: 22, objectFit: 'contain' },
  brandFallback: { fontSize: 20, fontWeight: 700, color: COLORS.primaryDark, letterSpacing: 1, textTransform: 'uppercase' },
  headerRight: { flexDirection: 'row', alignItems: 'center', gap: 10 },
  headerTitle: { fontSize: 9, fontWeight: 700, color: COLORS.primary, letterSpacing: 1.5, textTransform: 'uppercase' },
  qr: { width: 30, height: 30, objectFit: 'contain' },

  productRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 20,
  },
  productInfoCol: {
    flex: 1,
    justifyContent: 'center',
  },
  productImageCol: {
    flex: 1,
    height: 120,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: COLORS.border,
    backgroundColor: '#FFFFFF',
    overflow: 'hidden',
  },

  productHero: {
    marginTop: 0,
    paddingHorizontal: 0,
  },
  productName: {
    fontSize: 24,
    fontWeight: 700,
    color: COLORS.primaryDark,
    marginBottom: 0,
    textTransform: 'uppercase',
    letterSpacing: -0.5,
  },
  productMeta: {
    fontSize: 9,
    color: COLORS.textSecondary,
    fontWeight: 700,
    textTransform: 'uppercase',
    letterSpacing: 1,
    marginBottom: 4,
  },

  content: {
    paddingHorizontal: 0,
  },

  footer: {
    position: 'absolute',
    left: 30,
    right: 30,
    bottom: 30,
    paddingTop: 16,
    borderTopWidth: 1,
    borderTopColor: COLORS.border,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  footerBrand: { fontSize: 9, fontWeight: 700, color: COLORS.primaryDark, textTransform: 'uppercase', letterSpacing: 1 },
  footerText: { fontSize: 8, color: COLORS.textLight, fontWeight: 500, textTransform: 'uppercase', letterSpacing: 0.5 },

  h1: { fontSize: 22, fontWeight: 700, color: COLORS.primaryDark, marginBottom: 8, textTransform: 'uppercase' },
  subhead: { fontSize: 10, fontWeight: 700, color: COLORS.textSecondary, marginBottom: 16, textTransform: 'uppercase', letterSpacing: 0.5 },

  heroBox: {
    height: 180,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: COLORS.border,
    backgroundColor: '#FFFFFF',
    marginBottom: 24,
    justifyContent: 'center',
    overflow: 'hidden',
    padding: 0,
  },
  heroImage: { width: '100%', height: '100%', objectFit: 'contain' },
  noImage: { fontSize: 8, color: COLORS.textLight, textAlign: 'center' },

  section: {
    marginBottom: 10,
  },
  sectionTitle: {
    fontSize: 14,
    fontWeight: 700,
    color: COLORS.primaryDark,
    marginBottom: 8,
    textTransform: 'uppercase',
    letterSpacing: -0.2,
  },
  sectionAccent: {
    width: 30,
    height: 3,
    backgroundColor: COLORS.accent,
    marginBottom: 8,
    borderRadius: 1.5,
  },
  body: { fontSize: 10, lineHeight: 1.6, color: COLORS.textSecondary },

  kvGrid: {
    width: '100%',
    borderWidth: 1,
    borderColor: COLORS.border,
    borderRadius: 8,
    overflow: 'hidden',
  },
  kvRow: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: COLORS.border,
  },
  kvRowAlt: { backgroundColor: COLORS.neutral },
  kvRowLast: { borderBottomWidth: 0 },
  kvCell: { paddingVertical: 3, paddingHorizontal: 12 },
  kvMidDivider: {
    borderRightWidth: 1,
    borderRightColor: COLORS.border,
  },
  kvLabelText: { fontSize: 8, fontWeight: 700, color: COLORS.primaryDark, textTransform: 'uppercase', letterSpacing: 0.3 },
  kvValueText: { fontSize: 9, color: COLORS.textPrimary, fontWeight: 500 },

  tableWrap: {
    width: '100%',
    borderWidth: 1,
    borderColor: COLORS.border,
    borderRadius: 8,
    overflow: 'hidden',
    marginBottom: 16,
  },
  tableHeader: {
    width: '100%',
    flexDirection: 'row',
    backgroundColor: COLORS.neutral,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.border,
  },
  tableHeaderCell: {
    paddingVertical: 8,
    paddingHorizontal: 6,
    fontSize: 7,
    fontWeight: 700,
    color: COLORS.primaryDark,
    textTransform: 'uppercase',
    letterSpacing: 0.2,
  },
  tableHeaderCellCfg: {
    paddingHorizontal: 8,
  },
  tableHeaderCellDivider: {
    borderRightWidth: 1,
    borderRightColor: COLORS.border,
  },
  tableRow: { width: '100%', flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: COLORS.border },
  tableRowAlt: { backgroundColor: '#FFFFFF' },
  tableCell: { paddingVertical: 6, paddingHorizontal: 6, fontSize: 7, color: COLORS.textSecondary, fontWeight: 500 },
  tableCellCfg: {
    paddingHorizontal: 8,
  },
  tableCellDivider: {
    borderRightWidth: 1,
    borderRightColor: COLORS.border,
  },
});