@jmruthers/pace-core 0.2.4

package/dist/styles/core.css

@@ -0,0 +1,401 @@
+@import "tailwindcss";
+
+/* @source directives for Tailwind v4 content scanning */
+@source "../../src/**/*.{js,ts,jsx,tsx}";
+@source "../../src/components/**/*.{js,ts,jsx,tsx}";
+@source "../../src/providers/**/*.{js,ts,jsx,tsx}";
+@source "../../src/hooks/**/*.{js,ts,jsx,tsx}";
+@source "../../src/utils/**/*.{js,ts,jsx,tsx}";
+@source "../../src/types/**/*.{js,ts,jsx,tsx}";
+@source "../../src/validation/**/*.{js,ts,jsx,tsx}";
+@source "../../src/rbac/**/*.{js,ts,jsx,tsx}";
+
+@theme {
+  /* reset all color variables and fonts */
+  --color-*: initial;
+  --font-sans: "Open Sans", sans-serif;
+  --font-serif: "Open Sans", sans-serif;
+  --font-mono: "Reddit Mono", monospace;
+}
+
+@theme static {
+
+  --app-width: 90rem;
+  
+  /* MAIN palette - silver */
+  --color-main-raw: oklch(0.7 0.057 252.02);
+  --color-main-50: oklch(0.98 0.001 252.02);
+  --color-main-100: oklch(0.96 0.005 252.02);
+  --color-main-200: oklch(0.927 0.012 252.02);
+  --color-main-300: oklch(0.881 0.021 252.02);
+  --color-main-400: oklch(0.822 0.032 252.02);
+  --color-main-500: oklch(0.75 0.047 252.02);
+  --color-main-600: oklch(0.7 0.057 252.02);
+  --color-main-700: oklch(0.567 0.044 252.02);
+  --color-main-800: oklch(0.456 0.034 252.02);
+  --color-main-900: oklch(0.332 0.024 252.02);
+  --color-main-950: oklch(0.195 0.014 252.02);
+  
+  /* SEC palette - violet */
+  --color-sec-raw: oklch(0.58 0.23 280.75);
+  --color-sec-50: oklch(0.98 0.003 280.75);
+  --color-sec-100: oklch(0.96 0.014 280.75);
+  --color-sec-200: oklch(0.927 0.033 280.75);
+  --color-sec-300: oklch(0.881 0.059 280.75);
+  --color-sec-400: oklch(0.822 0.093 280.75);
+  --color-sec-500: oklch(0.75 0.133 280.75);
+  --color-sec-600: oklch(0.665 0.182 280.75);
+  --color-sec-700: oklch(0.58 0.23 280.75);
+  --color-sec-800: oklch(0.456 0.158 280.75);
+  --color-sec-900: oklch(0.332 0.099 280.75);
+  --color-sec-950: oklch(0.195 0.047 280.75);
+  
+  /* ACC palette - blood orange */
+  --color-acc-raw: oklch(0.64 0.21 37.76);
+  --color-acc-50: oklch(0.98 0.003 37.76);
+  --color-acc-100: oklch(0.96 0.015 37.76);
+  --color-acc-200: oklch(0.927 0.035 37.76);
+  --color-acc-300: oklch(0.881 0.063 37.76);
+  --color-acc-400: oklch(0.822 0.099 37.76);
+  --color-acc-500: oklch(0.75 0.143 37.76);
+  --color-acc-600: oklch(0.64 0.21 37.76);
+  --color-acc-700: oklch(0.567 0.177 37.76);
+  --color-acc-800: oklch(0.456 0.13 37.76);
+  --color-acc-900: oklch(0.332 0.085 37.76);
+  --color-acc-950: oklch(0.195 0.044 37.76);
+}
+
+
+@theme inline {
+  /* Semantic token mapping */
+  --color-border: var(--color-main-500);
+  --color-input: var(--color-sec-200);
+  --color-ring: var(--color-main-950);
+  --color-background: var(--color-main-50);
+  --color-foreground: var(--color-main-950);
+  --color-primary: var(--color-main-600);
+  --color-primary-foreground: var(--color-main-50);
+  --color-secondary: var(--color-sec-400);
+  --color-secondary-foreground: var(--color-main-950);
+  --color-destructive: var(--color-acc-700);
+  --color-destructive-foreground: var(--color-main-50);
+  --color-muted: var(--color-sec-100);
+  --color-muted-foreground: var(--color-main-700);
+  --color-accent: var(--color-acc-400);
+  --color-accent-foreground: var(--color-main-950);
+  --color-popover: var(--color-main-50);
+  --color-popover-foreground: var(--color-main-950);
+  --color-card: var(--color-main-50);
+  --color-card-foreground: var(--color-main-950);
+
+  /* Print-specific variables */
+  --print-margin: 0.5in;
+  --print-font-size: 12pt;
+  --print-line-height: 1.4;
+  --print-color: #000;
+  --print-bg: #fff;
+  --print-first-page-margin: 1in;
+  --print-cover-logo-size: 120px;
+  --print-cover-title-size: 2.5rem;
+  --print-page-width: 8.27in; /* A4 width */
+  --print-page-height: 11.69in; /* A4 height */
+  --print-landscape-width: 11.69in; /* A4 landscape width */
+  --print-landscape-height: 8.27in; /* A4 landscape height */
+}
+
+@layer base {
+
+  /*base resets */
+  * {
+    font-family: 'Open Sans';
+    border-color: var(--color-border);
+  }
+
+  body {
+    min-height: 100vh;
+    color: var(--color-foreground);
+  }
+
+  /* Font definitions - Loading from consuming app's public directory with system font fallbacks */
+/* Font definitions */
+@font-face {
+  font-family: "Georama";
+  font-style: normal;
+  font-weight: 100 200 300 400 500 600 700 800 900;
+  font-display: swap;
+  src: url("/fonts/georama.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Georama";
+  font-style: italic;
+  font-weight: 100 200 300 400 500 600 700 800 900;
+  font-display: swap;
+  src: url("/fonts/georama-italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 100 200 300 400 500 600 700 800 900;
+  font-display: swap;
+  src: url("/fonts/open-sans.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: 100 200 300 400 500 600 700 800 900;
+  font-display: swap;
+  src: url("/fonts/open-sans-italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Reddit Mono";
+  font-style: normal;
+  font-weight: 200 300 400 500 600 700 800 900;
+  font-display: swap;
+  src: url("/fonts/reddit-mono.woff2") format("woff2");
+}
+
+  /* Elements */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-bottom: 0.25lh;
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-family: 'Georama';
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--color-main-600);
+  }
+
+  h2 {
+    font-size: 2rem;
+    font-weight: 700;
+    line-height: 1.3;
+    color: var(--color-main-600);
+  }
+
+  h3 {
+    font-size: 1.75rem;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--color-main-700);
+  }
+
+  h4 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--color-main-700);
+  }
+
+  h5 {
+    font-size: 1.25rem;
+    font-weight: 500;
+    line-height: 1.4;
+    color: var(--color-main-800);
+  }
+
+  h6 {
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.4;
+    color: var(--color-main-800);
+  }
+
+  p {
+    margin-bottom: 1rem;
+    line-height: 1.6;
+  }
+
+  a {
+    color: var(--color-main-700);
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+
+  a:hover {
+    color: var(--color-acc-700);
+    text-decoration: underline;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  u {
+    text-decoration: underline;
+  }
+
+  pre,
+  code {
+    font-family: "Reddit Mono";
+    font-size: 0.875em;
+    background-color: var(--color-sec-100);
+    padding: 0.2em 0.4em;
+    border-radius: 0.25rem;
+  }
+
+  pre code {
+    display: inline-block;
+  }
+
+  blockquote {
+    border-left: 4px solid var(--color-main-600);
+    padding: 0.5rem 1rem;
+    margin: 1.5rem 0;
+    font-style: italic;
+    color: var(--color-main-800);
+  }
+
+  ul,
+  ol {
+    margin: 0.25lh 0;
+    padding-left: 1.5rem;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  li {
+    margin-bottom: 0.25lh;
+    line-height: 1.6;
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid var(--color-sec-200);
+    margin: 2rem 0;
+  }
+
+  small {
+    font-size: 0.875em;
+    color: var(--color-main-500);
+  }
+
+  .appGradient {
+    background: linear-gradient(145deg, var(--color-main-100) 10%, var(--color-main-200) 30%, var(--color-main-200) 70%, var(--color-main-300) 90%);
+    background-attachment: fixed;
+  }
+}
+
+@layer components {
+  /* Custom component styles go here */
+}
+
+@layer utilities {
+  /* Print-specific utilities */
+  .print-break-avoid { page-break-inside: avoid; }
+  .print-break-before { page-break-before: always; }
+  .print-break-after { page-break-after: always; }
+  
+  /* Print page size controls */
+  .print-a4-portrait {
+    @media print {
+      @page {
+        size: A4 portrait;
+        margin: var(--print-margin);
+      }
+    }
+  }
+  
+  .print-a4-landscape {
+    @media print {
+      @page {
+        size: A4 landscape;
+        margin: var(--print-margin);
+      }
+    }
+  }
+  
+  /* First page header styles */
+  .print-first-page-header {
+    @media print {
+      @page :first {
+        margin-top: var(--print-first-page-margin);
+      }
+    }
+  }
+  
+  .print-cover-header {
+    @media print {
+      @page :first {
+        margin-top: var(--print-first-page-margin);
+      }
+    }
+  }
+  
+  .print-subsequent-header {
+    @media print {
+      @page :not(:first) {
+        margin-top: var(--print-margin);
+      }
+    }
+  }
+  
+  /* Print-specific layouts */
+  @media print {
+    .print-hidden { display: none !important; }
+    .print-visible { display: block !important; }
+    .print-first-page-only { 
+      display: block;
+    }
+    .print-subsequent-pages-only {
+      display: none;
+    }
+  }
+  
+  @media print {
+    @page :not(:first) {
+      .print-first-page-only { 
+        display: none !important;
+      }
+      .print-subsequent-pages-only {
+        display: block !important;
+      }
+    }
+  }
+  
+  /* Print typography */
+  .print-text {
+    @media print {
+      font-size: var(--print-font-size);
+      line-height: var(--print-line-height);
+      color: var(--print-color);
+    }
+  }
+  
+  /* Print layout container */
+  .print-layout {
+    @media print {
+      width: 100%;
+      max-width: none;
+      margin: 0;
+      padding: 0;
+      background: var(--print-bg);
+      color: var(--print-color);
+    }
+  }
+}

package/dist/styles/index.d.ts

@@ -0,0 +1,36 @@
+export { ColorPalette, ColorShade, PaletteData, applyPalette, clearPalette, generateSSRThemeCSS, getCurrentThemeData, isDynamicThemingActive } from '../theming/runtime.js';
+
+/**
+ * @file Styles Index
+ * @package @jmruthers/pace-core
+ * @module Styles
+ * @since 2.0.0
+ *
+ * Central export for all pace-core styles.
+ * This file provides easy access to all CSS files for consuming applications.
+ *
+ * @example
+ * ```tsx
+ * // Import the core CSS file
+ * import '@jmruthers/pace-core/styles/core.css';
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Import theming runtime
+ * import { applyPalette, clearPalette } from '@jmruthers/pace-core/theming/runtime';
+ * ```
+ */
+interface StyleImport {
+    default: string;
+}
+declare const styleConfig: {
+    readonly core: {
+        readonly path: "./core.css";
+        readonly description: "Complete CSS foundation including base styles, theme mappings, fonts, resets, and neutral tokens";
+    };
+};
+declare function getStylePath(style: keyof typeof styleConfig): string;
+declare function getAllStylePaths(): string[];
+
+export { type StyleImport, getAllStylePaths, getStylePath, styleConfig };

package/dist/styles/index.js

@@ -0,0 +1,24 @@
+import {
+  getAllStylePaths,
+  getStylePath,
+  styleConfig
+} from "../chunk-NQ4TOOO6.js";
+import {
+  applyPalette,
+  clearPalette,
+  generateSSRThemeCSS,
+  getCurrentThemeData,
+  isDynamicThemingActive
+} from "../chunk-N2EUGZRW.js";
+import "../chunk-PLDDJCW6.js";
+export {
+  applyPalette,
+  clearPalette,
+  generateSSRThemeCSS,
+  getAllStylePaths,
+  getCurrentThemeData,
+  getStylePath,
+  isDynamicThemingActive,
+  styleConfig
+};
+//# sourceMappingURL=index.js.map

package/dist/styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/theming/runtime.d.ts

@@ -0,0 +1,73 @@
+/**
+ * @file PACE Core Theming Runtime
+ * @package @jmruthers/pace-core
+ * @module Theming/Runtime
+ * @since 2.0.0
+ *
+ * Runtime helpers for palette replacement from organisation/event payloads.
+ * Provides simple applyPalette() and clearPalette() API with SSR support.
+ *
+ * @example
+ * ```ts
+ * import { applyPalette, clearPalette } from '@jmruthers/pace-core/theming/runtime';
+ *
+ * // Apply organisation colors
+ * applyPalette({
+ *   main: { // main palette shades
+ *     50: { L: 0.95, C: 0.02, H: 0 },
+ *     500: { L: 0.5, C: 0.2, H: 0 }
+ *   },
+ *   sec: { // secondary palette shades
+ *     50: { L: 0.95, C: 0.02, H: 120 },
+ *     500: { L: 0.5, C: 0.2, H: 120 }
+ *   },
+ *   acc: { // accent palette shades
+ *     50: { L: 0.95, C: 0.02, H: 240 },
+ *     500: { L: 0.5, C: 0.2, H: 240 }
+ *   }
+ * });
+ *
+ * // Clear dynamic theming
+ * clearPalette();
+ * ```
+ */
+interface ColorShade {
+    L: number;
+    C: number;
+    H: number;
+}
+interface ColorPalette {
+    [shade: string]: ColorShade;
+}
+interface PaletteData {
+    main: ColorPalette;
+    sec: ColorPalette;
+    acc: ColorPalette;
+}
+/**
+ * Applies a complete palette to the document by replacing all three palette variable sets.
+ * Writes a single <style id="pace-theme-dynamic"> block into <head>.
+ *
+ * @param palette - Complete palette data with main, sec, and acc palettes
+ */
+declare function applyPalette(palette: PaletteData): void;
+/**
+ * Removes the dynamic theme block, returning to app-defined CSS values.
+ */
+declare function clearPalette(): void;
+/**
+ * Generates the same CSS block for SSR rendering
+ * Use this in your SSR setup to avoid FOUC
+ */
+declare function generateSSRThemeCSS(palette: PaletteData): string;
+/**
+ * Checks if dynamic theming is currently active
+ */
+declare function isDynamicThemingActive(): boolean;
+/**
+ * Gets the current dynamic theme data (if any)
+ * Useful for debugging or persistence
+ */
+declare function getCurrentThemeData(): PaletteData | null;
+
+export { type ColorPalette, type ColorShade, type PaletteData, applyPalette, clearPalette, generateSSRThemeCSS, getCurrentThemeData, isDynamicThemingActive };

package/dist/theming/runtime.js

@@ -0,0 +1,16 @@
+import {
+  applyPalette,
+  clearPalette,
+  generateSSRThemeCSS,
+  getCurrentThemeData,
+  isDynamicThemingActive
+} from "../chunk-N2EUGZRW.js";
+import "../chunk-PLDDJCW6.js";
+export {
+  applyPalette,
+  clearPalette,
+  generateSSRThemeCSS,
+  getCurrentThemeData,
+  isDynamicThemingActive
+};
+//# sourceMappingURL=runtime.js.map

package/dist/theming/runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}