Add color styles for PDF generation

Author: webstackdev

src/pages/print/index.css

@@ -0,0 +1,168 @@
+/* ==========================================================================
+   PDF Generation Styles
+   ==========================================================================
+   Styles for the /print/ pages consumed by Puppeteer's page.pdf().
+   Puppeteer controls page sizing, margins, headers, and footers.
+   This CSS controls the visual layout of content within the page.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   Override print.css @page margins and running elements.
+   Puppeteer provides its own header/footer via page.pdf() options,
+   so suppress the CSS-based running elements to avoid duplication.
+   -------------------------------------------------------------------------- */
+
+@page {
+  @bottom-left {
+    content: none;
+  }
+
+  @bottom-right {
+    content: none;
+  }
+}
+
+/**
+* =============================================================================
+*  Colors for Print
+* =============================================================================
+*/
+@media print {
+  html[data-theme="light"] {
+    --theme-color-primary: #001A39;
+    --theme-color-primary-offset: #003d86;
+    --theme-color-primary-inverse: #FFF;
+    --theme-color-secondary: #006dca;
+    --theme-color-secondary-offset: #1894ff;
+    --theme-color-secondary-inverse: #FFF;
+    --theme-color-accent: #7c3aed;
+    --theme-color-accent-offset: #d28fe0;
+    --theme-color-page-base: #f3f4f6;
+    --theme-color-page-inverse: #003d86;
+    --theme-color-page-offset: #e5e7eb;
+    --theme-color-page-active: #9ca3af;
+    --theme-color-content: #374151;
+    --theme-color-content-offset: #6b7280;
+    --theme-color-content-active: #001a39;
+    --theme-color-content-inverse: #f3f4f6;
+    --theme-color-content-inverse-active: #bfdbfe;
+    --theme-color-trim: #4b5563;
+    --theme-color-trim-offset: #9ca3af;
+    --theme-color-spotlight: #facc15;
+    --theme-color-spotlight-offset: #ca8a04;
+    --theme-color-success: #15803d;
+    --theme-color-success-offset: #22c55e;
+    --theme-color-success-inverse: #dcfce7;
+    --theme-color-info: #0891b2;
+    --theme-color-info-offset: #38bdf8;
+    --theme-color-info-inverse: #cffafe;
+    --theme-color-note: #374151;
+    --theme-color-note-offset: #6b7280;
+    --theme-color-note-inverse: #d1d5db;
+    --theme-color-warning: #a16207;
+    --theme-color-warning-offset: #ca8a04;
+    --theme-color-warning-inverse: #fef3c7;
+    --theme-color-danger: #dc2626;
+    --theme-color-danger-offset: #b91c1c;
+    --theme-color-danger-inverse: #fecaca;
+    --theme-color-icons: #374151;
+    --theme-color-icons-active: #9ca3af;
+    --theme-color-black: #000;
+    --theme-color-white: #fff;
+    --theme-color-blue-50: #eff6ff;
+    --theme-color-blue-100: #dbeafe;
+    --theme-color-blue-200: #bfdbfe;
+    --theme-color-blue-300: #93c5fd;
+    --theme-color-blue-400: #60a5fa;
+    --theme-color-blue-500: #3b82f6;
+    --theme-color-blue-600: #2563eb;
+    --theme-color-blue-800: #1e40af;
+    --theme-color-blue-900: #1e3a8a;
+    --theme-color-gray-50: #f9fafb;
+    --theme-color-gray-100: #f3f4f6;
+    --theme-color-gray-200: #e5e7eb;
+    --theme-color-gray-300: #d1d5db;
+    --theme-color-gray-400: #9ca3af;
+    --theme-color-gray-500: #6b7280;
+    --theme-color-gray-600: #4b5563;
+    --theme-color-gray-700: #374151;
+    --theme-color-gray-800: #1f2937;
+    --theme-color-gray-900: #111827;
+    --theme-color-gray-offset: #9ca3af;
+    --theme-color-green-100: #d1fae5;
+    --theme-color-green-200: #bbf7d0;
+    --theme-color-green-300: #86efac;
+    --theme-color-green-400: #4ade80;
+    --theme-color-green-500: #22c55e;
+    --theme-color-green-600: #16a34a;
+    --theme-color-green-700: #15803d;
+    --theme-color-green-900: #14532d;
+    --theme-color-orange-100: #ffedd5;
+    --theme-color-orange-200: #fed7aa;
+    --theme-color-orange-300: #fdba74;
+    --theme-color-orange-500: #f97316;
+    --theme-color-orange-600: #ea580c;
+    --theme-color-orange-700: #c2410c;
+    --theme-color-purple-100: #f3e8ff;
+    --theme-color-purple-600: #9333ea;
+    --theme-color-red-400: #f87171;
+    --theme-color-red-500: #ef4444;
+    --theme-color-yellow-100: #fef9c3;
+    --theme-color-yellow-200: #fef08a;
+    --theme-color-yellow-300: #fde047;
+    --theme-color-yellow-400: #facc15;
+    --theme-color-yellow-500: #eab308;
+    --theme-color-yellow-600: #ca8a04;
+    --theme-color-yellow-700: #a16207;
+    --theme-color-bluesky: #00A8E8;
+    --theme-color-bluesky-active: #0087bd;
+    --theme-color-codepen: #000;
+    --theme-color-codepen-active: #1a1a1a;
+    --theme-color-github: #211F1F;
+    --theme-color-github-active: #333131;
+    --theme-color-linkedin: #0a66c2;
+    --theme-color-linkedin-active: #084c9e;
+    --theme-color-mastodon: #6364FF;
+    --theme-color-mastodon-active: #5557e6;
+    --theme-color-google-red: #EA4335;
+    --theme-color-google-yellow: #FBBC04;
+    --theme-color-google-blue: #4285F4;
+    --theme-color-google-blue-dark: #1967D2;
+    --theme-color-google-green: #34A853;
+    --theme-color-google-green-dark: #188038;
+    --theme-color-reddit: #FF4500;
+    --theme-color-reddit-active: #e03d00;
+    --theme-color-x: #000;
+    --theme-color-x-active: #1a1a1a;
+    --shiki-foreground: #24292e;
+    --shiki-background: #fff;
+    --shiki-token-constant: #005cc5;
+    --shiki-token-string: #032f62;
+    --shiki-token-comment: #6a737d;
+    --shiki-token-keyword: #d73a49;
+    --shiki-token-parameter: #24292e;
+    --shiki-token-function: #6f42c1;
+    --shiki-token-string-expression: #032f62;
+    --shiki-token-punctuation: #24292e;
+    --shiki-token-link: #032f62;
+    --shiki-token-inserted: #22863a;
+    --shiki-token-deleted: #b31d28;
+    --shiki-token-changed: #e36209;
+    --shiki-ansi-black: #24292e;
+    --shiki-ansi-red: #d73a49;
+    --shiki-ansi-green: #28a745;
+    --shiki-ansi-yellow: #dbab09;
+    --shiki-ansi-blue: #0366d6;
+    --shiki-ansi-magenta: #5a32a3;
+    --shiki-ansi-cyan: #1b7c83;
+    --shiki-ansi-white: #6a737d;
+    --shiki-ansi-bright-black: #959da5;
+    --shiki-ansi-bright-red: #cb2431;
+    --shiki-ansi-bright-green: #22863a;
+    --shiki-ansi-bright-yellow: #b08800;
+    --shiki-ansi-bright-blue: #005cc5;
+    --shiki-ansi-bright-magenta: #5a32a3;
+    --shiki-ansi-bright-cyan: #3192aa;
+    --shiki-ansi-bright-white: #d1d5da;
+  }
+}