@hubpav/hwio-ui 0.1.3 → 0.1.4
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.1.
|
|
3
|
+
"version": "0.1.4",
|
|
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.1.
|
|
35
|
-
"@hubpav/hwio-web-runtime": "0.1.
|
|
36
|
-
"@hubpav/hwio-web-worker": "0.1.
|
|
34
|
+
"@hubpav/hwio-brand": "0.1.4",
|
|
35
|
+
"@hubpav/hwio-web-runtime": "0.1.4",
|
|
36
|
+
"@hubpav/hwio-web-worker": "0.1.4",
|
|
37
37
|
"daisyui": "5.7.28"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
---
|
|
2
2
|
/** Numbered process steps. Order carries meaning here, so the numbers are content, not decoration. */
|
|
3
|
-
|
|
3
|
+
/** `number` overrides the rendered ordinal (sites whose copy numbers steps "01", "02"…). */
|
|
4
|
+
interface Props { items: { title: string; text: string; number?: string }[]; orientation?: 'horizontal' | 'vertical'; class?: string }
|
|
4
5
|
const { items, orientation = 'horizontal', class: className = '' } = Astro.props;
|
|
5
6
|
const LAYOUT = { horizontal: 'grid gap-8 md:grid-cols-2 lg:grid-cols-4', vertical: 'grid gap-8' } as const;
|
|
6
7
|
---
|
|
7
8
|
<ol class:list={[LAYOUT[orientation], className]} data-hwio-steps>
|
|
8
9
|
{items.map((step, i) => (
|
|
9
10
|
<li class="flex gap-4">
|
|
10
|
-
<span class="badge badge-primary badge-lg shrink-0 font-semibold" aria-hidden="true">{i + 1}</span>
|
|
11
|
+
<span class="badge badge-primary badge-lg shrink-0 font-semibold tabular-nums" aria-hidden="true">{step.number ?? i + 1}</span>
|
|
11
12
|
<div>
|
|
12
|
-
<h3 class="text-lg font-semibold"><span class="sr-only">{i + 1}. </span>{step.title}</h3>
|
|
13
|
+
<h3 class="text-lg font-semibold"><span class="sr-only">{step.number ?? i + 1}. </span>{step.title}</h3>
|
|
13
14
|
<p class="mt-1 opacity-80">{step.text}</p>
|
|
14
15
|
</div>
|
|
15
16
|
</li>
|
package/src/styles/styles.css
CHANGED
|
@@ -118,14 +118,15 @@
|
|
|
118
118
|
}
|
|
119
119
|
.hwio-hairline { border-color: var(--color-base-300); }
|
|
120
120
|
/* Inverse button for ink/neutral panels (navy on ink has no contrast). */
|
|
121
|
+
/* Button for neutral (dark) surfaces: reads from the neutral pair so it stays light in both themes. */
|
|
121
122
|
.hwio-btn-inverse {
|
|
122
|
-
background-color: var(--color-
|
|
123
|
-
border-color: var(--color-
|
|
123
|
+
background-color: var(--color-neutral-content);
|
|
124
|
+
border-color: var(--color-neutral-content);
|
|
124
125
|
color: var(--color-neutral);
|
|
125
126
|
}
|
|
126
127
|
.hwio-btn-inverse:hover {
|
|
127
|
-
background-color: var(--color-
|
|
128
|
-
border-color: var(--color-
|
|
128
|
+
background-color: color-mix(in oklab, var(--color-neutral-content) 88%, var(--color-neutral));
|
|
129
|
+
border-color: color-mix(in oklab, var(--color-neutral-content) 88%, var(--color-neutral));
|
|
129
130
|
}
|
|
130
131
|
.hwio-chip {
|
|
131
132
|
display: inline-flex;
|