@hubpav/hwio-ui 0.6.3 → 0.6.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hubpav/hwio-ui",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.5",
|
|
4
4
|
"description": "HARDWARIO web design system for Astro: DaisyUI 5 themes generated from the brand tokens, the Tailwind entry stylesheet and the HWio* components.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
"build": "node scripts/build-themes.mjs"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@hubpav/hwio-brand": "0.6.
|
|
35
|
-
"@hubpav/hwio-web-runtime": "0.6.
|
|
36
|
-
"@hubpav/hwio-web-worker": "0.6.
|
|
34
|
+
"@hubpav/hwio-brand": "0.6.5",
|
|
35
|
+
"@hubpav/hwio-web-runtime": "0.6.5",
|
|
36
|
+
"@hubpav/hwio-web-worker": "0.6.5",
|
|
37
37
|
"daisyui": "5.7.28"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
@@ -30,8 +30,8 @@ interface Props {
|
|
|
30
30
|
}
|
|
31
31
|
const { nav, ctas = [], languages = [], showThemeToggle = true, scrollspy = false, labels, desktopFrom = 'lg', id = 'hwio-nav-drawer', class: className = '' } = Astro.props;
|
|
32
32
|
const BREAK = {
|
|
33
|
-
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', panels: 'hidden lg:block' },
|
|
34
|
-
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', panels: 'hidden xl:block' },
|
|
33
|
+
lg: { nav: 'hidden flex-1 self-stretch justify-center lg:flex', ctas: 'hidden items-center gap-2 lg:flex', drawer: 'drawer drawer-end w-auto lg:hidden', panels: 'hidden lg:block' },
|
|
34
|
+
xl: { nav: 'hidden flex-1 self-stretch justify-center xl:flex', ctas: 'hidden items-center gap-2 xl:flex', drawer: 'drawer drawer-end w-auto xl:hidden', panels: 'hidden xl:block' },
|
|
35
35
|
} as const;
|
|
36
36
|
const bp = BREAK[desktopFrom];
|
|
37
37
|
const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost' } as const;
|
|
@@ -45,9 +45,9 @@ const linkAttrs = (item: HWioLinkItem) => (item.external ? { target: '_blank', r
|
|
|
45
45
|
</div>
|
|
46
46
|
|
|
47
47
|
<nav class={bp.nav} aria-label={labels.nav} data-hwio-scrollspy={scrollspy ? 'true' : undefined}>
|
|
48
|
-
<ul class="menu menu-horizontal flex-nowrap gap-0 px-0 whitespace-nowrap">
|
|
48
|
+
<ul class="menu menu-horizontal h-full flex-nowrap items-center gap-0 px-0 py-0 whitespace-nowrap">
|
|
49
49
|
{nav.map((item) => (
|
|
50
|
-
<li>
|
|
50
|
+
<li class:list={[item.current && 'hwio-nav-current']}>
|
|
51
51
|
{item.mega ? (
|
|
52
52
|
<button type="button" class="px-3 text-[15px] font-medium text-base-content/80 hover:text-accent" data-hwio-mega-trigger={item.mega} aria-expanded="false" aria-haspopup="true" aria-controls={`${id}-mega-${item.mega}`}>
|
|
53
53
|
{item.label}
|
package/src/styles/styles.css
CHANGED
|
@@ -91,6 +91,26 @@
|
|
|
91
91
|
.hwio-section-compact { padding-block: calc(var(--spacing) * 12); }
|
|
92
92
|
}
|
|
93
93
|
/* Kicker: the sentence-case red label above a heading (replaces www's uppercase eyebrows). */
|
|
94
|
+
/* Current page in the header nav: coloured label plus a 2px bar on the header's bottom edge
|
|
95
|
+
(the nav stretches to the bar's full height, so the li reaches the border). Themes set
|
|
96
|
+
--hwio-nav-active; the primary colour is the default. */
|
|
97
|
+
.hwio-nav-current {
|
|
98
|
+
position: relative;
|
|
99
|
+
}
|
|
100
|
+
.hwio-nav-current > a,
|
|
101
|
+
.hwio-nav-current > button {
|
|
102
|
+
color: var(--hwio-nav-active, var(--color-primary));
|
|
103
|
+
}
|
|
104
|
+
.hwio-nav-current::after {
|
|
105
|
+
content: '';
|
|
106
|
+
position: absolute;
|
|
107
|
+
inset-inline: 0.75rem;
|
|
108
|
+
bottom: 0;
|
|
109
|
+
height: 2px;
|
|
110
|
+
border-radius: 1px;
|
|
111
|
+
background: var(--hwio-nav-active, var(--color-primary));
|
|
112
|
+
}
|
|
113
|
+
|
|
94
114
|
.hwio-kicker,
|
|
95
115
|
.hwio-eyebrow {
|
|
96
116
|
color: var(--color-accent);
|
|
@@ -41,6 +41,7 @@
|
|
|
41
41
|
--er3o-gradient-from: #01CC9B;
|
|
42
42
|
--er3o-gradient-to: #14A0C0;
|
|
43
43
|
--hwio-footer-hover: #ffffff;
|
|
44
|
+
--hwio-nav-active: #296ea7;
|
|
44
45
|
}
|
|
45
46
|
|
|
46
47
|
/* ENEROOO carries its gradient as a theme rule: DaisyUI slots are single colours. Only the filled
|
|
@@ -49,6 +50,10 @@
|
|
|
49
50
|
background-image: linear-gradient(90deg, var(--er3o-gradient-from), var(--er3o-gradient-to));
|
|
50
51
|
border-color: transparent;
|
|
51
52
|
}
|
|
53
|
+
/* DaisyUI's hover darkens background-color, which the gradient image covers; dim the gradient instead. */
|
|
54
|
+
[data-theme="er3o"] .btn-primary:not(.btn-outline):not(.btn-ghost):not(.btn-link):hover {
|
|
55
|
+
filter: brightness(0.92);
|
|
56
|
+
}
|
|
52
57
|
/* The outline button reads in the AA teal (the theme's accent, 6.6:1); the filled primary teal is 2.9:1 as text. */
|
|
53
58
|
[data-theme="er3o"] .btn-outline.btn-primary:not(:hover):not(:active) {
|
|
54
59
|
color: var(--color-accent);
|