@hubpav/hwio-ui 0.1.0

package/src/styles/styles.css

@@ -0,0 +1,221 @@
+/*
+ * @hubpav/hwio-ui entry stylesheet. A site's global.css does:
+ *   @import "tailwindcss";
+ *   @import "@hubpav/hwio-ui/styles.css";
+ *   @import "@hubpav/hwio-ui/themes/hwio.css";        exactly one light theme (default: true)
+ *   @import "@hubpav/hwio-ui/themes/hwio-dark.css";   optional: at most one dark theme (prefersdark)
+ *   @import "@hubpav/hwio-brand/fonts/inter.css";
+ *   :root { --hwio-container: 1640px; }               landing preset only (hub sites keep 1275px)
+ */
+@plugin "daisyui" {
+  themes: false;
+  exclude: rootscrollgutter;
+  logs: false;
+}
+
+/* The package's own component sources, so Tailwind emits the classes they use. */
+@source "../components";
+
+@theme inline {
+  --font-sans: var(--hwio-font-sans);
+}
+
+/* One container for the fleet; width comes from the theme (hub) or the site (landing). */
+@utility container {
+  width: 100%;
+  margin-inline: auto;
+  max-width: var(--hwio-container);
+  padding-inline: var(--hwio-container-pad);
+}
+
+@layer base {
+  html {
+    font-family: var(--hwio-font-sans);
+    scroll-behavior: smooth;
+    scroll-padding-top: 100px;
+  }
+  html.is-routing {
+    scroll-behavior: auto;
+  }
+  body {
+    -webkit-font-smoothing: antialiased;
+    overflow-x: hidden;
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    font-size: 1.0625rem; /* 17 px body (direction A) */
+    line-height: 1.6;
+  }
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+  /* Type ramp (direction A): 56 / 40 / 28 / 22 / 17 on large screens, tighter tracking as size grows. */
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+    text-wrap: balance;
+  }
+  h1 { font-size: 2.5rem; line-height: 1.05; letter-spacing: -0.03em; }
+  h2 { font-size: 2rem; line-height: 1.1; letter-spacing: -0.025em; }
+  h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; }
+  h4 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.005em; }
+  @media (width >= 48rem) {
+    h1 { font-size: 3rem; }
+    h2 { font-size: 2.5rem; }
+    h3 { font-size: 1.375rem; }
+  }
+  @media (width >= 64rem) {
+    h1 { font-size: 3.5rem; }
+  }
+  :focus-visible {
+    outline: 2px solid var(--color-secondary);
+    outline-offset: 2px;
+  }
+  /* Font gate (owner ruling R3): text stays invisible until the face decodes; a bounded
+     failure pins the metric-matched fallback so nothing repaints later. */
+  html.fonts-loading body > :not([data-hwio-font-exempt]) {
+    visibility: hidden;
+  }
+  html.fonts-failed {
+    --hwio-font-sans: 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
+  }
+}
+
+@layer components {
+  /* Rhythm (direction A): 80 / 112 px sections, 40 / 48 px compact bands. */
+  .hwio-section { padding-block: calc(var(--spacing) * 20); }
+  .hwio-section-compact { padding-block: calc(var(--spacing) * 10); }
+  @media (width >= 64rem) {
+    .hwio-section { padding-block: calc(var(--spacing) * 28); }
+    .hwio-section-compact { padding-block: calc(var(--spacing) * 12); }
+  }
+  /* Kicker: the sentence-case red label above a heading (replaces www's uppercase eyebrows). */
+  .hwio-kicker,
+  .hwio-eyebrow {
+    color: var(--color-accent);
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+  .hwio-tone-neutral .hwio-kicker,
+  .hwio-tone-neutral .hwio-eyebrow {
+    color: var(--hwio-kicker-on-neutral, var(--color-accent));
+  }
+  .hwio-muted {
+    color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
+  }
+  .hwio-tone-neutral .hwio-muted {
+    color: color-mix(in oklab, var(--color-neutral-content) 75%, transparent);
+  }
+  .hwio-lead {
+    font-size: 1.1875rem;
+    line-height: 1.55;
+    color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
+  }
+  .hwio-tone-neutral .hwio-lead {
+    color: color-mix(in oklab, var(--color-neutral-content) 75%, transparent);
+  }
+  .hwio-hairline { border-color: var(--color-base-300); }
+  /* Inverse button for ink/neutral panels (navy on ink has no contrast). */
+  .hwio-btn-inverse {
+    background-color: var(--color-base-100);
+    border-color: var(--color-base-100);
+    color: var(--color-neutral);
+  }
+  .hwio-btn-inverse:hover {
+    background-color: var(--color-base-200);
+    border-color: var(--color-base-200);
+  }
+  .hwio-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
+    border-radius: 9999px;
+    background: color-mix(in oklab, var(--color-base-content) 6%, transparent);
+    font-size: var(--text-sm);
+    font-weight: 500;
+  }
+  /* Honeypot: off-screen, never display:none (bots check that), no inline style attribute. */
+  .hwio-hp {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    opacity: 0;
+  }
+  [data-hs-status] {
+    margin-top: calc(var(--spacing) * 3);
+    font-size: var(--text-sm);
+    line-height: 1.4;
+  }
+  [data-hs-status].hs-status-success { color: var(--color-success); }
+  [data-hs-status].hs-status-error { color: var(--color-error); }
+
+  /* Scroll reveal: visible at rest for no-JS, animates in once the runtime marks it. */
+  .js [data-hwio-reveal]:not([data-hwio-revealed]) {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  [data-hwio-reveal] {
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+  }
+  [data-hwio-reveal][data-hwio-revealed] {
+    opacity: 1;
+    transform: none;
+  }
+
+  /* Count-up: reserve the width of the final value so the layout never jumps. */
+  .hwio-stat-value {
+    display: block;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  /* Logo marquee */
+  .hwio-marquee-track {
+    width: max-content;
+    animation: hwio-marquee 38s linear infinite;
+    will-change: transform;
+  }
+  .hwio-marquee-track:hover,
+  .hwio-marquee-track:focus-within {
+    animation-play-state: paused;
+  }
+  @keyframes hwio-marquee {
+    to { transform: translate3d(-25%, 0, 0); }
+  }
+  .hwio-logo-grey {
+    filter: grayscale(100%);
+    opacity: 0.55;
+    transition: filter 0.3s, opacity 0.3s;
+  }
+  .hwio-logo-grey:hover { filter: none; opacity: 1; }
+  [data-theme$='-dark'] .hwio-logo-grey { filter: grayscale(100%) invert(1); }
+  [data-theme$='-dark'] .hwio-logo-grey:hover { filter: grayscale(100%) invert(1); opacity: 1; }
+
+  .hwio-theme-transition,
+  .hwio-theme-transition *,
+  .hwio-theme-transition *::before,
+  .hwio-theme-transition *::after {
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-hwio-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
+    .hwio-marquee-track { animation: none; transform: none; will-change: auto; }
+    .hwio-marquee-track > [aria-hidden='true'] { display: none; }
+  }
+}
+
+/* Brand overrides of DaisyUI defaults. Unlayered on purpose: DaisyUI lives in the utilities layer
+   and would otherwise win. Direction A: 15 px/600 sentence-case buttons, 48 px tall, 8 px radius,
+   28 px padding on large buttons at the same height; card padding 32 px. */
+.btn {
+  --fontsize: 0.9375rem;
+  font-weight: 600;
+  padding-inline: 1.5rem;
+}
+.btn-sm { --fontsize: 0.875rem; padding-inline: 1rem; }
+.btn-lg { height: var(--size); --fontsize: 0.9375rem; padding-inline: 1.75rem; }
+.btn-square, .btn-circle { padding-inline: 0; }
+.card .card-body { --card-p: 2rem; }

package/src/styles/themes/er3o.css

@@ -0,0 +1,55 @@
+/* Generated from brand.json by @hubpav/hwio-ui (scripts/build-themes.mjs). Theme "er3o". */
+@plugin "daisyui/theme" {
+  name: "er3o";
+  default: false;
+  prefersdark: false;
+  color-scheme: light;
+  --color-base-100: #ffffff;
+  --color-base-200: #f9fafb;
+  --color-base-300: #f3f4f6;
+  --color-base-content: #333333;
+  --color-primary: #14A0C0;
+  --color-primary-content: #ffffff;
+  --color-secondary: #01CC9B;
+  --color-secondary-content: #061920;
+  --color-accent: #0C6678;
+  --color-accent-content: #ffffff;
+  --color-neutral: #252532;
+  --color-neutral-content: #ffffff;
+  --color-info: #19768B;
+  --color-info-content: #ffffff;
+  --color-success: #15803d;
+  --color-success-content: #ffffff;
+  --color-warning: #b45309;
+  --color-warning-content: #ffffff;
+  --color-error: #dc2626;
+  --color-error-content: #ffffff;
+  --radius-selector: 2rem;
+  --radius-field: 2rem;
+  --radius-box: 1.5rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.3rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+[data-theme="er3o"] {
+  --hwio-font-sans: 'Poppins', 'Poppins Fallback', ui-sans-serif, system-ui, sans-serif;
+  --hwio-container: 1275px;
+  --hwio-container-pad: 27px;
+  --er3o-gradient-from: #01CC9B;
+  --er3o-gradient-to: #14A0C0;
+}
+
+/* ENEROOO carries its gradient as a theme rule: DaisyUI slots are single colours. */
+[data-theme="er3o"] .btn-primary {
+  background-image: linear-gradient(90deg, var(--er3o-gradient-from), var(--er3o-gradient-to));
+  border-color: transparent;
+}
+[data-theme="er3o"] .er3o-gradient-text {
+  background-image: linear-gradient(90deg, var(--er3o-gradient-from), var(--er3o-gradient-to));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}

package/src/styles/themes/hwio-dark.css

@@ -0,0 +1,49 @@
+/* Generated from brand.json by @hubpav/hwio-ui (scripts/build-themes.mjs). Theme "hwio-dark". */
+@plugin "daisyui/theme" {
+  name: "hwio-dark";
+  default: false;
+  prefersdark: true;
+  color-scheme: dark;
+  --color-base-100: #0f0f14;
+  --color-base-200: #1a1a22;
+  --color-base-300: #23232f;
+  --color-base-content: #e7e7ee;
+  --color-primary: #06367a;
+  --color-primary-content: #ffffff;
+  --color-secondary: #016ad4;
+  --color-secondary-content: #ffffff;
+  --color-accent: #f43f5e;
+  --color-accent-content: #0f0f14;
+  --color-neutral: #23232f;
+  --color-neutral-content: #e7e7ee;
+  --color-info: #009cfa;
+  --color-info-content: #06367a;
+  --color-success: #15803d;
+  --color-success-content: #ffffff;
+  --color-warning: #b45309;
+  --color-warning-content: #ffffff;
+  --color-error: #dc2626;
+  --color-error-content: #ffffff;
+  --radius-selector: 2rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.3rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+[data-theme="hwio-dark"] {
+  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
+  --hwio-container: 1275px;
+  --hwio-container-pad: 27px;
+  --hwio-kicker-on-neutral: #f43f5e;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
+  --hwio-kicker-on-neutral: #f43f5e;
+  }
+}

package/src/styles/themes/hwio-forestry-dark.css

@@ -0,0 +1,42 @@
+/* Generated from brand.json by @hubpav/hwio-ui (scripts/build-themes.mjs). Theme "hwio-forestry-dark". */
+@plugin "daisyui/theme" {
+  name: "hwio-forestry-dark";
+  default: false;
+  prefersdark: false;
+  color-scheme: dark;
+  --color-base-100: #0f0f14;
+  --color-base-200: #1a1a22;
+  --color-base-300: #23232f;
+  --color-base-content: #e7e7ee;
+  --color-primary: #2B7036;
+  --color-primary-content: #ffffff;
+  --color-secondary: #016ad4;
+  --color-secondary-content: #ffffff;
+  --color-accent: #5aa864;
+  --color-accent-content: #0f0f14;
+  --color-neutral: #23232f;
+  --color-neutral-content: #e7e7ee;
+  --color-info: #009cfa;
+  --color-info-content: #06367a;
+  --color-success: #15803d;
+  --color-success-content: #ffffff;
+  --color-warning: #b45309;
+  --color-warning-content: #ffffff;
+  --color-error: #dc2626;
+  --color-error-content: #ffffff;
+  --radius-selector: 2rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.3rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+[data-theme="hwio-forestry-dark"] {
+  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
+  --hwio-container: 1275px;
+  --hwio-container-pad: 27px;
+  --hwio-kicker-on-neutral: #f43f5e;
+}

package/src/styles/themes/hwio-forestry.css

@@ -0,0 +1,42 @@
+/* Generated from brand.json by @hubpav/hwio-ui (scripts/build-themes.mjs). Theme "hwio-forestry". */
+@plugin "daisyui/theme" {
+  name: "hwio-forestry";
+  default: false;
+  prefersdark: false;
+  color-scheme: light;
+  --color-base-100: #ffffff;
+  --color-base-200: #F1FAFF;
+  --color-base-300: #e5e7eb;
+  --color-base-content: #252532;
+  --color-primary: #2B7036;
+  --color-primary-content: #ffffff;
+  --color-secondary: #016ad4;
+  --color-secondary-content: #ffffff;
+  --color-accent: #2B7036;
+  --color-accent-content: #ffffff;
+  --color-neutral: #252532;
+  --color-neutral-content: #f3f4f6;
+  --color-info: #009cfa;
+  --color-info-content: #06367a;
+  --color-success: #15803d;
+  --color-success-content: #ffffff;
+  --color-warning: #b45309;
+  --color-warning-content: #ffffff;
+  --color-error: #dc2626;
+  --color-error-content: #ffffff;
+  --radius-selector: 2rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.3rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+[data-theme="hwio-forestry"] {
+  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
+  --hwio-container: 1275px;
+  --hwio-container-pad: 27px;
+  --hwio-kicker-on-neutral: #f43f5e;
+}

package/src/styles/themes/hwio.css

@@ -0,0 +1,42 @@
+/* Generated from brand.json by @hubpav/hwio-ui (scripts/build-themes.mjs). Theme "hwio". */
+@plugin "daisyui/theme" {
+  name: "hwio";
+  default: true;
+  prefersdark: false;
+  color-scheme: light;
+  --color-base-100: #ffffff;
+  --color-base-200: #F1FAFF;
+  --color-base-300: #e5e7eb;
+  --color-base-content: #252532;
+  --color-primary: #06367a;
+  --color-primary-content: #ffffff;
+  --color-secondary: #016ad4;
+  --color-secondary-content: #ffffff;
+  --color-accent: #e30427;
+  --color-accent-content: #ffffff;
+  --color-neutral: #252532;
+  --color-neutral-content: #f3f4f6;
+  --color-info: #009cfa;
+  --color-info-content: #06367a;
+  --color-success: #15803d;
+  --color-success-content: #ffffff;
+  --color-warning: #b45309;
+  --color-warning-content: #ffffff;
+  --color-error: #dc2626;
+  --color-error-content: #ffffff;
+  --radius-selector: 2rem;
+  --radius-field: 0.5rem;
+  --radius-box: 1rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.3rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+:root, [data-theme="hwio"] {
+  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
+  --hwio-container: 1275px;
+  --hwio-container-pad: 27px;
+  --hwio-kicker-on-neutral: #f43f5e;
+}

package/src/types.ts

@@ -0,0 +1,51 @@
+/** Measurement contract shared with the GTM containers: data-track / data-track-location. */
+export interface HWioTrack {
+  id: string;
+  location?: string;
+}
+
+export interface HWioLinkItem {
+  label: string;
+  href: string;
+  external?: boolean;
+  current?: boolean;
+  track?: HWioTrack;
+}
+
+export interface HWioMedia {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  srcset?: string;
+  sizes?: string;
+}
+
+export interface HWioCta extends HWioLinkItem {
+  /** Visual weight; primary is the DaisyUI btn-primary fill. */
+  variant?: 'primary' | 'secondary' | 'ghost';
+}
+
+export type HWioTone = 'base' | 'alt' | 'neutral';
+export type HWioLocale = string;
+
+export interface HWioAlternate {
+  lang: string;
+  href: string;
+}
+
+/** A form field definition for HWioHubSpotForm / HWioFormField. */
+export interface HWioFieldDef {
+  name: string;
+  label: string;
+  type?: 'text' | 'email' | 'tel' | 'url' | 'textarea' | 'select' | 'checkbox' | 'hidden';
+  required?: boolean;
+  placeholder?: string;
+  autocomplete?: string;
+  options?: { value: string; label: string }[];
+  /** UI-only qualification field folded into the message ("Label: value"). */
+  messageField?: boolean;
+  half?: boolean;
+  value?: string;
+  rows?: number;
+}