legal-markdown-js 3.0.0 → 3.0.1

package/dist/styles/{contract.petalo.css → default.css}

@@ -1,8 +1,8 @@
 /**
- * Contract Template Styles
+ * Default Legal Markdown Styles
  *
- * Stylesheet for contract documents, optimized for both screen and print media.
- * Includes typography configuration, spacing, and specific PDF optimizations.
+ * Professional stylesheet for legal documents, optimized for both screen and print media.
+ * Features modern typography, clean design, and comprehensive print optimizations.
  *
  * Structure:
  * 1. Variables and base configuration
@@ -16,31 +16,40 @@
 /* Variables and base configuration
    ========================================================================== */
 :root {
-  /* Colors */
-  --color-primary: #353954;
-  --color-accent: #41badf;
-  --color-link: #41badf;
-  --color-text: #333;
-  --color-error: #e94d5c;
+  /* Colors - Professional slate and teal palette */
+  --color-primary: #1e293b;    /* Slate 800 */
+  --color-accent: #0891b2;     /* Cyan 600 */
+  --color-link: #0891b2;       /* Cyan 600 */
+  --color-text: #334155;       /* Slate 700 */
+  --color-error: #dc2626;      /* Red 600 */
+  --color-bg: #ffffff;         /* White */
+  --color-muted: #64748b;      /* Slate 500 */
 
   /* Typography */
-  --font-primary: Helvetica, Arial, sans-serif;
-  --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
+  --font-primary: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace;
 
-  /* Assets */
-  --logo-filename: logo.petalo.transparent-colorful.png;
+  /* Assets - Default logo placeholder */
+  --logo-filename: https://placehold.co/120x40/2563eb/ffffff.png?text=LOGO;
 
   /* Spacing */
-  --spacing-xsmall: 2px;
+  --spacing-xsmall: 4px;
   --spacing-small: 8px;
-  --spacing-medium: 15px;
-  --spacing-large: 30px;
+  --spacing-medium: 16px;
+  --spacing-large: 32px;
+  --spacing-xlarge: 48px;
 
   /* Sizes */
   --font-size-base: 12pt;
-  --font-size-h1: 1.6em;
-  --font-size-h2: 14pt;
-  --font-size-h3: 10pt;
+  --font-size-h1: 1.8em;
+  --font-size-h2: 1.4em;
+  --font-size-h3: 1.2em;
+  --font-size-h4: 1.1em;
+
+  /* Layout */
+  --max-width: 210mm; /* A4 width */
+  --border-radius: 6px;
+  --border-width: 1px;
 }
 
 /* Base document configuration
@@ -48,12 +57,12 @@
 body {
   font-family: var(--font-primary);
   font-size: var(--font-size-base);
-  line-height: 1.3;
+  line-height: 1.6;
   color: var(--color-text);
-  max-width: 210mm; /* A4 width */
+  max-width: var(--max-width);
   margin: 0 auto;
   padding: 20mm 15mm;
-  background-color: white;
+  background-color: var(--color-bg);
 }
 
 /* Typography hierarchy
@@ -61,72 +70,71 @@ body {
 /* Prevent page breaks in headings */
 h1,
 h2,
-h3 {
+h3,
+h4,
+h5,
+h6 {
   page-break-after: avoid;
   page-break-inside: avoid;
+  color: var(--color-primary);
+  font-weight: 600;
 }
 
 /* Main document title */
 h1,
 .legal-header-level-1 {
-  color: var(--color-primary);
   font-size: var(--font-size-h1);
-  line-height: 1.5em;
-  margin: var(--spacing-small) var(--spacing-small) 32px;
+  line-height: 1.3;
+  margin: var(--spacing-medium) 0 var(--spacing-large);
   text-align: center;
-  border-bottom: solid var(--color-accent);
-  padding: 0 5% 0.3em;
-  display: block;
-  font-weight: bold;
+  border-bottom: 3px solid var(--color-accent);
+  padding-bottom: var(--spacing-medium);
+  color: var(--color-primary);
 }
 
 /* Section headings */
 h2,
 .legal-header-level-2 {
   font-size: var(--font-size-h2);
-  margin-top: 20px;
+  margin-top: var(--spacing-large);
   margin-bottom: var(--spacing-medium);
-  border-bottom: 1px solid var(--color-link);
-  display: block;
-  font-weight: bold;
+  border-bottom: 2px solid var(--color-accent);
+  padding-bottom: var(--spacing-small);
+  color: var(--color-primary);
 }
 
 /* Subsection headings */
 h3,
 .legal-header-level-3 {
   font-size: var(--font-size-h3);
-  font-weight: bold;
-  border-bottom: 1px solid var(--color-link);
+  font-weight: 600;
   margin-top: var(--spacing-large);
-  margin-bottom: var(--spacing-small);
+  margin-bottom: var(--spacing-medium);
+  border-bottom: 1px solid var(--color-accent);
+  padding-bottom: var(--spacing-xsmall);
+  color: var(--color-primary);
 }
 
 /* Minor headings */
 h4,
 .legal-header-level-4 {
-  font-size: 0.9em;
-  font-weight: bold;
+  font-size: var(--font-size-h4);
+  font-weight: 600;
   margin-top: var(--spacing-medium);
   margin-bottom: var(--spacing-small);
-}
-/* Legal headers */
-.legal-header-level-5 {
-  font-size: 0.8em;
-  font-weight: bold;
-  margin-top: var(--spacing-small);
-  margin-bottom: var(--spacing-xsmall);
+  color: var(--color-primary);
 }
 
-/* Annexes styling - Level 6 hack */
-/* The sublevel 6 is used as a hack to create annexes at top level */
+/* Legal headers */
+h5,
+h6,
+.legal-header-level-5,
 .legal-header-level-6 {
-  font-size: var(--font-size-h2); /* Same size as level 2 */
-  font-weight: bold;
-  margin-left: 0 !important; /* No indentation - make it look top level */
-  margin-top: var(--spacing-large); /* More space before annexes */
-  margin-bottom: var(--spacing-medium);
-  border-bottom: 1px solid var(--color-link); /* Same underline as level 2 */
-  color: var(--color-primary); /* Highlight color */
+  font-size: 1em;
+  font-weight: 600;
+  margin-top: var(--spacing-medium);
+  margin-bottom: var(--spacing-small);
+  color: var(--color-primary);
 }
 
 /* Content elements
@@ -140,13 +148,24 @@ p {
   page-break-inside: avoid;
 }
 
+/* Links */
+a {
+  color: var(--color-link);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: var(--color-accent);
+}
+
 /* Lists */
 ul,
 ol {
-  margin-left: var(--spacing-small);
-  margin-bottom: var(--spacing-medium);
-  padding-inline-start: 20px;
-  page-break-inside: auto; /* Allow page breaks in lists */
+  margin: var(--spacing-medium) 0;
+  padding-left: var(--spacing-large);
+  page-break-inside: auto;
 }
 
 li {
@@ -154,36 +173,82 @@ li {
   page-break-inside: auto;
 }
 
+/* Code blocks */
+pre {
+  background-color: #f8fafc;
+  border: var(--border-width) solid #e2e8f0;
+  border-radius: var(--border-radius);
+  padding: var(--spacing-medium);
+  margin: var(--spacing-medium) 0;
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  line-height: 1.4;
+}
+
+code {
+  background-color: #f1f5f9;
+  color: var(--color-primary);
+  padding: var(--spacing-xsmall) var(--spacing-small);
+  border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+}
+
 /* Horizontal separators */
 hr {
-  border: 1px solid var(--color-link);
-  margin: var(--spacing-medium) 0;
+  border: none;
+  border-top: 2px solid var(--color-accent);
+  margin: var(--spacing-large) 0;
 }
 
 /* Empty fields and missing values */
 .missing-value {
-  background-color: #ffebee;
-  color: #c62828;
-  padding: 2px 6px;
-  border-radius: 3px;
-  border: 1px dashed #ef5350;
+  background-color: #fef2f2;
+  color: var(--color-error);
+  padding: var(--spacing-xsmall) var(--spacing-small);
+  border-radius: 4px;
+  border: var(--border-width) dashed var(--color-error);
   font-style: italic;
 }
 
+
 /* Tables
    ========================================================================== */
+.table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin: var(--spacing-medium) 0;
+}
+
 table {
   width: 100%;
   border-collapse: collapse;
-  margin-bottom: 20px;
+  margin: var(--spacing-medium) 0;
   table-layout: fixed;
+  background-color: var(--color-bg);
+}
+
+th,
+td {
+  border: var(--border-width) solid #e2e8f0;
+  padding: var(--spacing-small) var(--spacing-medium);
+  text-align: left;
+  vertical-align: top;
+}
+
+th {
+  background-color: #f8fafc;
+  font-weight: 600;
+  color: var(--color-primary);
 }
 
 /* Signature table
    ========================================================================== */
 .signatures {
   page-break-inside: avoid;
-  margin-top: var(--spacing-large);
+  margin-top: var(--spacing-xlarge);
+  border: none;
 }
 
 .signatures th {
@@ -192,14 +257,18 @@ table {
 
 .signatures th,
 .signatures td {
-  padding: var(--spacing-small);
+  padding: var(--spacing-medium);
   text-align: left;
+  border: none;
+  border-bottom: 2px solid var(--color-primary);
 }
 
 /* Two-column layout: 1/3 for labels, 2/3 for signatures */
 .signatures th:first-child,
 .signatures td:first-child {
   width: 33.33%;
+  font-weight: 600;
+  color: var(--color-primary);
 }
 
 .signatures th:last-child,
@@ -207,7 +276,7 @@ table {
   width: 66.67%;
 }
 
-.signatures td {
+.signatures td:last-child {
   height: 6em;
   vertical-align: bottom;
   font-weight: normal;
@@ -215,8 +284,16 @@ table {
 
 /* Table of contents
    ========================================================================== */
+.table-of-contents {
+  background-color: #f8fafc;
+  border: var(--border-width) solid #e2e8f0;
+  border-radius: var(--border-radius);
+  padding: var(--spacing-medium);
+  margin: var(--spacing-large) 0;
+}
+
 .table-of-contents li {
-  margin-bottom: 5px;
+  margin-bottom: var(--spacing-small);
   list-style-type: none;
 }
 
@@ -228,19 +305,16 @@ table {
   color: white !important;
   font-weight: bold !important;
   text-align: center !important;
-  padding: var(--spacing-small) 0 !important;
-  margin: var(--spacing-medium) 0 25px !important;
+  padding: var(--spacing-medium) 0 !important;
+  margin: var(--spacing-large) 0 !important;
   text-transform: uppercase !important;
   letter-spacing: 1px !important;
   display: block !important;
+  border-radius: var(--border-radius) !important;
   -webkit-print-color-adjust: exact !important;
   print-color-adjust: exact !important;
 }
 
-#confidential-header {
-  margin-top: -20px;
-}
-
 /* Separator section
    ========================================================================== */
 .separator {
@@ -249,11 +323,12 @@ table {
   color: white !important;
   font-weight: bold !important;
   text-align: center !important;
-  padding: var(--spacing-xsmall) 0 !important;
-  margin: var(--spacing-medium) 0 10px !important;
+  padding: var(--spacing-small) 0 !important;
+  margin: var(--spacing-large) 0 var(--spacing-medium) !important;
   text-transform: uppercase !important;
   letter-spacing: 1px !important;
   display: block !important;
+  border-radius: var(--border-radius) !important;
   -webkit-print-color-adjust: exact !important;
   print-color-adjust: exact !important;
 }
@@ -261,19 +336,23 @@ table {
 /* Algorithm blocks
    ========================================================================== */
 .algorithm {
-  background-color: #f8f9fa;
-  border: 1px solid #e9ecef;
-  border-radius: 4px;
-  padding: var(--spacing-small) 12px;
-  margin: 12px 0;
+  background-color: #f8fafc;
+  border: var(--border-width) solid #e2e8f0;
+  border-left: 4px solid var(--color-accent);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-medium);
+  margin: var(--spacing-medium) 0;
   font-family: var(--font-mono);
-  font-size: 12px;
+  font-size: 0.9em;
   line-height: 1.4;
 }
 
 .algorithm pre {
   margin: 0;
-  white-space: pre;
+  white-space: pre-wrap;
+  background: none;
+  border: none;
+  padding: 0;
 }
 
 /* Utilities
@@ -282,18 +361,34 @@ table {
   page-break-inside: avoid !important;
 }
 
+.page-break-before {
+  page-break-before: always !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-muted {
+  color: var(--color-muted) !important;
+}
+
+
 /* Print optimizations
    ========================================================================== */
 @media print {
   /* Page setup */
   @page {
     size: A4;
-    margin: 20mm 10mm 10mm 10mm;
+    margin: 20mm 15mm 15mm 15mm;
   }
 
   body {
     font-size: 11pt;
     color: black;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
   }
 
   /* Links */
@@ -313,48 +408,34 @@ table {
     text-decoration: none !important;
   }
 
-  /* Show URLs after links */
+  /* Show URLs after external links */
   a[href^='http']:after {
     content: ' (' attr(href) ')';
     font-size: 90%;
+    color: var(--color-muted);
   }
 
   /* Page break control */
-  h3,
-  p {
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid;
+  }
+
+  p, li {
     page-break-inside: avoid;
   }
 
-  ul,
-  ol {
+  ul, ol {
     page-break-inside: auto;
   }
 
   img {
     page-break-inside: avoid;
+    max-width: 100%;
   }
 
-  /* Page break before annexes */
-  .legal-annex {
-    page-break-before: always !important;
-    display: block !important;
-  }
-
-  /* Alternative for modern browsers */
-  .legal-header-level-6 {
-    page-break-before: always !important;
-    break-before: page !important; /* Modern syntax */
-    display: block !important;
-  }
-
-  /* Annex separation
-  .annex-section-title {
-    page-break-before: always;
-    page-break-after: always;
-  } */
-
   /* Maintain colors in print */
-  .confidential {
+  .confidential,
+  .separator {
     background-color: var(--color-accent) !important;
     color: white !important;
     -webkit-print-color-adjust: exact !important;
@@ -366,4 +447,12 @@ table {
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
   }
+
+
+  /* Remove backgrounds for better printing */
+  pre,
+  code {
+    background-color: transparent !important;
+    border: 1px solid #ccc !important;
+  }
 }

package/dist/styles/headers.css

@@ -0,0 +1,146 @@
+/* Legal Header Styles - Header Field Tracking Support */
+
+/* Base legal header styling */
+.legal-header {
+  display: block;
+  margin: 1em 0 0.5em 0;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+/* Level-specific styling */
+.legal-header-level-1,
+.legal-article {
+  font-size: 1.6em;
+  font-weight: bold;
+  color: #1a1a1a;
+  margin: 2em 0 1em 0;
+  border-bottom: 3px solid #333;
+  padding-bottom: 0.2em;
+}
+
+.legal-header-level-2,
+.legal-section {
+  font-size: 1.3em;
+  font-weight: 600;
+  color: #333;
+  margin: 1.5em 0 0.8em 0;
+  border-bottom: 1px solid #666;
+  padding-bottom: 0.1em;
+}
+
+.legal-header-level-3,
+.legal-subsection {
+  font-size: 1.1em;
+  font-weight: 500;
+  color: #444;
+  margin: 1em 0 0.5em 0;
+}
+
+.legal-header-level-4,
+.legal-sub-subsection {
+  font-size: 1.05em;
+  font-weight: 500;
+  color: #555;
+  margin: 0.8em 0 0.4em 0;
+}
+
+.legal-header-level-5,
+.legal-paragraph {
+  font-size: 1em;
+  font-weight: 500;
+  color: #666;
+  margin: 0.6em 0 0.3em 0;
+}
+
+/* Data attribute based styling for more specificity */
+.legal-header[data-level='1'] {
+  /* Additional Article-level styling */
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.legal-header[data-level='2'] {
+  /* Additional Section-level styling */
+  font-variant: small-caps;
+}
+
+.legal-header[data-level='3'] {
+  /* Additional Subsection-level styling */
+  font-style: italic;
+}
+
+/* Hover effects for interactive documents */
+.legal-header:hover {
+  background-color: rgba(0, 120, 215, 0.1);
+  cursor: pointer;
+  border-radius: 2px;
+  padding: 2px 4px;
+  margin: -2px -4px;
+}
+
+/* Print optimizations */
+@media print {
+  .legal-header {
+    page-break-after: avoid;
+    page-break-inside: avoid;
+  }
+
+  .legal-header:hover {
+    background-color: transparent;
+    padding: 0;
+    margin: 1em 0 0.5em 0;
+  }
+
+  .legal-header-level-1,
+  .legal-article {
+    page-break-before: always;
+  }
+
+  .legal-header-level-1:first-child {
+    page-break-before: avoid;
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .legal-header-level-1,
+  .legal-article {
+    color: #e6e6e6;
+    border-bottom-color: #ccc;
+  }
+
+  .legal-header-level-2,
+  .legal-section {
+    color: #ddd;
+    border-bottom-color: #999;
+  }
+
+  .legal-header-level-3,
+  .legal-subsection {
+    color: #ccc;
+  }
+
+  .legal-header-level-4,
+  .legal-sub-subsection {
+    color: #bbb;
+  }
+
+  .legal-header-level-5,
+  .legal-paragraph {
+    color: #aaa;
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .legal-header-level-1,
+  .legal-article {
+    font-size: 1.4em;
+  }
+
+  .legal-header-level-2,
+  .legal-section {
+    font-size: 1.2em;
+  }
+}