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,
  },
});