@hubpav/hwio-ui 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "HARDWARIO web design system for Astro: DaisyUI 5 themes generated from the brand tokens, the Tailwind entry stylesheet and the HWio* components.",
   "license": "MIT",
   "type": "module",
@@ -31,9 +31,9 @@
     "build": "node scripts/build-themes.mjs"
   },
   "dependencies": {
-    "@hubpav/hwio-brand": "0.4.0",
-    "@hubpav/hwio-web-runtime": "0.4.0",
-    "@hubpav/hwio-web-worker": "0.4.0",
+    "@hubpav/hwio-brand": "0.5.0",
+    "@hubpav/hwio-web-runtime": "0.5.0",
+    "@hubpav/hwio-web-worker": "0.5.0",
     "daisyui": "5.7.28"
   },
   "peerDependencies": {

package/src/components/HWioHeader.astro

@@ -19,12 +19,10 @@ interface Props {
   labels: { nav: string; menu: string; close: string; theme?: string; languages?: string };
   /** Viewport from which the inline nav and CTAs replace the drawer (default lg; xl for long navs). */
   desktopFrom?: 'lg' | 'xl';
-  /** Desktop language control: dropdown (default) or inline pills (two-language sites). */
-  languageVariant?: 'dropdown' | 'pills';
   id?: string;
   class?: string;
 }
-const { nav, ctas = [], languages = [], showThemeToggle = true, scrollspy = false, labels, desktopFrom = 'lg', languageVariant = 'dropdown', id = 'hwio-nav-drawer', class: className = '' } = Astro.props;
+const { nav, ctas = [], languages = [], showThemeToggle = true, scrollspy = false, labels, desktopFrom = 'lg', id = 'hwio-nav-drawer', class: className = '' } = Astro.props;
 const BREAK = {
   lg: { nav: 'hidden flex-1 justify-center lg:flex', ctas: 'hidden items-center gap-2 lg:flex', drawer: 'drawer drawer-end w-auto lg:hidden' },
   xl: { nav: 'hidden flex-1 justify-center xl:flex', ctas: 'hidden items-center gap-2 xl:flex', drawer: 'drawer drawer-end w-auto xl:hidden' },
@@ -59,7 +57,7 @@ const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost'
 
     <div class="ml-auto flex items-center gap-2">
       {showThemeToggle && <HWioThemeToggle label={labels.theme ?? 'Theme'} />}
-      {languages.length > 1 && <HWioLanguageSwitcher items={languages} label={labels.languages ?? 'Language'} variant={languageVariant} />}
+      {languages.length > 1 && <HWioLanguageSwitcher items={languages} label={labels.languages ?? 'Language'} />}
       <div class={bp.ctas}>
         {ctas.map((cta) => (
           <HWioButton href={cta.href} external={cta.external} variant={CTA_VARIANT[cta.variant ?? 'primary']} size="sm" track={cta.track ?? { id: 'header-cta', location: 'header' }} class={cta.icon ? '2xl:px-4 px-2.5' : ''} aria-label={cta.icon ? cta.label : undefined} title={cta.icon ? cta.label : undefined}>

package/src/components/HWioThemeToggle.astro

@@ -11,10 +11,6 @@ const { label, class: className = '' } = Astro.props;
   .hwio-theme-toggle :global(.hwio-theme-toggle__sun) { display: none; }
   :global([data-theme$='-dark']) .hwio-theme-toggle :global(.hwio-theme-toggle__sun) { display: block; }
   :global([data-theme$='-dark']) .hwio-theme-toggle :global(.hwio-theme-toggle__moon) { display: none; }
-  @media (prefers-color-scheme: dark) {
-    :global(html:not([data-theme])) .hwio-theme-toggle :global(.hwio-theme-toggle__sun) { display: block; }
-    :global(html:not([data-theme])) .hwio-theme-toggle :global(.hwio-theme-toggle__moon) { display: none; }
-  }
 </style>
 <script>
   import { hwioThemeRuntime } from '@hubpav/hwio-web-runtime/theme';

package/src/html.ts

@@ -10,6 +10,8 @@ export interface HWioHtmlOptions {
   /** Pin data-theme on <html> (single-theme sites such as enerooo, or a fixed catalog page). */
   pinTheme?: boolean;
   font?: { family: string; sample?: string; sampleExt?: string } | null;
+  /** Share the light/dark choice across a domain's sites through a first-party cookie (e.g. '.hardwario.com'). */
+  themeCookieDomain?: string;
   class?: string;
 }
 
@@ -21,6 +23,7 @@ export function hwioHtmlAttrs(o: HWioHtmlOptions): Record<string, string> {
     'data-hwio-theme-light': o.themes.light,
   };
   if (o.themes.dark) attrs['data-hwio-theme-dark'] = o.themes.dark;
+  if (o.themeCookieDomain) attrs['data-hwio-theme-cookie-domain'] = o.themeCookieDomain;
   if (o.pinTheme || !o.themes.dark) attrs['data-theme'] = o.themes.light;
   if (o.font) {
     attrs['data-hwio-font-family'] = o.font.family;

package/src/styles/styles.css

@@ -195,10 +195,6 @@
   .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; }
-  @media (prefers-color-scheme: dark) {
-    :root:not([data-theme]) .hwio-logo-grey { filter: grayscale(100%) invert(1); }
-    :root:not([data-theme]) .hwio-logo-grey:hover { filter: grayscale(100%) invert(1); opacity: 1; }
-  }
 
   .hwio-theme-transition,
   .hwio-theme-transition *,

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

@@ -2,7 +2,7 @@
 @plugin "daisyui/theme" {
   name: "hwio-dark";
   default: false;
-  prefersdark: true;
+  prefersdark: false;
   color-scheme: dark;
   --color-base-100: #0f0f14;
   --color-base-200: #1a1a22;
@@ -40,10 +40,3 @@
   --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;
-  }
-}