@hubpav/hwio-ui 0.6.5 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-ui",
-  "version": "0.6.5",
+  "version": "0.7.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.6.5",
-    "@hubpav/hwio-web-runtime": "0.6.5",
-    "@hubpav/hwio-web-worker": "0.6.5",
+    "@hubpav/hwio-brand": "0.7.0",
+    "@hubpav/hwio-web-runtime": "0.7.0",
+    "@hubpav/hwio-web-worker": "0.7.0",
     "daisyui": "5.7.28"
   },
   "peerDependencies": {

package/src/components/HWioHeader.astro

@@ -45,7 +45,7 @@ const linkAttrs = (item: HWioLinkItem) => (item.external ? { target: '_blank', r
     </div>
 
     <nav class={bp.nav} aria-label={labels.nav} data-hwio-scrollspy={scrollspy ? 'true' : undefined}>
-      <ul class="menu menu-horizontal h-full flex-nowrap items-center gap-0 px-0 py-0 whitespace-nowrap">
+      <ul class="menu hwio-nav menu-horizontal h-full flex-nowrap items-stretch gap-0 px-0 py-0 whitespace-nowrap">
         {nav.map((item) => (
           <li class:list={[item.current && 'hwio-nav-current']}>
             {item.mega ? (
@@ -54,7 +54,7 @@ const linkAttrs = (item: HWioLinkItem) => (item.external ? { target: '_blank', r
                 <HWioIcon name="chevron-down" size="sm" class="opacity-50 transition-transform duration-200" />
               </button>
             ) : (
-              <a href={item.href} class="px-3 text-[15px] font-medium text-base-content/80 hover:text-accent" aria-current={item.current ? 'page' : undefined} data-track={item.track?.id} data-track-location={item.track?.location ?? 'header'}>{item.label}</a>
+              <a href={item.href} class="px-3 text-[15px] font-medium text-base-content/80 hover:text-accent aria-[current=page]:text-[var(--hwio-nav-active,var(--color-primary))]" aria-current={item.current ? 'page' : undefined} data-track={item.track?.id} data-track-location={item.track?.location ?? 'header'}>{item.label}</a>
             )}
           </li>
         ))}

package/src/styles/prose.css

@@ -8,7 +8,7 @@
   .hwio-prose ul { list-style: disc; padding-left: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 4); }
   .hwio-prose ol { list-style: decimal; padding-left: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 4); }
   .hwio-prose li { padding-left: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 2); }
-  .hwio-prose a { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 0.2em; }
+  .hwio-prose a { color: var(--hwio-link, var(--color-secondary)); text-decoration: underline; text-underline-offset: 0.2em; }
   .hwio-prose a:hover { color: var(--color-primary); }
   .hwio-prose strong { font-weight: 600; }
   .hwio-prose blockquote { border-left: 4px solid var(--color-secondary); padding-left: calc(var(--spacing) * 4); font-style: italic; margin-block: calc(var(--spacing) * 6); }

package/src/styles/styles.css

@@ -94,13 +94,12 @@
   /* Current page in the header nav: coloured label plus a 2px bar on the header's bottom edge
      (the nav stretches to the bar's full height, so the li reaches the border). Themes set
      --hwio-nav-active; the primary colour is the default. */
+  .hwio-nav > li {
+    justify-content: center; /* items span the bar's full height; the link stays centred */
+  }
   .hwio-nav-current {
     position: relative;
   }
-  .hwio-nav-current > a,
-  .hwio-nav-current > button {
-    color: var(--hwio-nav-active, var(--color-primary));
-  }
   .hwio-nav-current::after {
     content: '';
     position: absolute;
@@ -242,3 +241,11 @@
 .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; }
+/* DaisyUI sets .label to 60 % of the text colour, which fails AA at 14 px (4.1:1 on white). R5:
+   darken muted text only. 78 % keeps the label visibly secondary and clears 4.5:1 on every theme. */
+.label { color: color-mix(in oklab, currentColor 78%, transparent); }
+/* Same for inactive tabs (DaisyUI: 50 %, 3.1:1 on white at 14 px). */
+.tab:not(.tab-active, :hover, :focus-visible) { color: color-mix(in oklab, currentColor 78%, transparent); }
+/* Text links: themes whose primary is too light for text on the page ground (er3o teal) set
+   --hwio-link to their text-safe hue; the default keeps DaisyUI's primary. */
+.btn-link { color: var(--hwio-link, var(--color-primary)); }

package/src/styles/themes/er3o.css

@@ -42,6 +42,8 @@
   --er3o-gradient-to: #14A0C0;
   --hwio-footer-hover: #ffffff;
   --hwio-nav-active: #296ea7;
+  --hwio-kicker-on-neutral: #01CC9B;
+  --hwio-link: #0C6678;
 }
 
 /* ENEROOO carries its gradient as a theme rule: DaisyUI slots are single colours. Only the filled

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

@@ -10,8 +10,8 @@
   --color-base-content: #e7e7ee;
   --color-primary: #009cfa;
   --color-primary-content: #0f0f14;
-  --color-secondary: #016ad4;
-  --color-secondary-content: #ffffff;
+  --color-secondary: #009cfa;
+  --color-secondary-content: #0f0f14;
   --color-accent: #f43f5e;
   --color-accent-content: #0f0f14;
   --color-neutral: #23232f;

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

@@ -10,8 +10,8 @@
   --color-base-content: #e7e7ee;
   --color-primary: #5aa864;
   --color-primary-content: #0f0f14;
-  --color-secondary: #016ad4;
-  --color-secondary-content: #ffffff;
+  --color-secondary: #009cfa;
+  --color-secondary-content: #0f0f14;
   --color-accent: #5aa864;
   --color-accent-content: #0f0f14;
   --color-neutral: #23232f;