this broke nice UI for more clear usage of penguin ui

This commit is contained in:
Priec
2026-06-17 22:52:07 +02:00
parent 0754e014a3
commit ae99ec079f
14 changed files with 72 additions and 57 deletions

View File

@@ -285,22 +285,27 @@ This is copy-pasted 5 times.
---
## 17. Buttons — ✅ DONE (canonical macros + adopted)
## 17. Buttons — ✅ DONE
**Penguin UI: `buttons/default-button.html`, `outline-button.html`, `ghost-button.html`, `button-with-icon.html`**
- Exact upstream mirrors at `assets/views/penguinui/buttons/*.html` (reference only).
- Canonical button macros in `assets/views/macros/ui.html`:
`ui::button_primary`, `ui::button_outline` (neutral secondary), `ui::button_danger`,
`ui::button_ghost`. Each takes `label`, `type`, `href` (renders `<a>` vs `<button>`),
`attrs` (raw — htmx / `:disabled` / name / value), `extra` (extra classes).
Upstream's color-button token typos (`text-onDanger` etc.) are fixed to our real
tokens (`text-on-danger`).
- One macro `ui::button(label, variant="primary", type, href, attrs, extra, pad="px-4 py-2")`
in `assets/views/macros/ui.html`. The per-variant class strings are the
**verbatim** Penguin variants (solid `primary|secondary|danger|success|warning|info`,
`outline-*`, `ghost-*`) — only `inline-flex items-center justify-center` is added
so `<a>`/`w-full` render, and upstream's `text-onDanger`/`text-onSuccess`… token
typos are fixed to our real `text-on-*` tokens. `href``<a>` else `<button>`;
`attrs` is raw (htmx / `:disabled` / name / value).
- **Sizes are NOT normalized**: `pad` defaults to Penguin's `px-4 py-2` but each
call site that was a different size keeps it (`px-3 py-2` form-header cancels &
order back, `px-5 py-2` add-to-cart / cart-checkout / order-confirmed continue,
`px-6 py-2.5` checkout place-order).
- Adopted across every standard filled/outline/submit button: login, product &
category forms (save/cancel), products/categories "new" + empty-state CTAs,
orders detail (back/ship/status), shipping save, cart (continue/checkout/empty),
checkout place-order (`:disabled` via `attrs`), product detail add-to-cart,
order-confirmed continue.
- Intentionally left inline (different components, not the standard button):
category forms (save / cancel = `outline-secondary`), products/categories "new" +
empty-state CTAs, orders detail (back/ship/status), shipping save, cart
(continue/checkout/empty), checkout place-order (`:disabled` via `attrs`),
product detail add-to-cart, order-confirmed continue.
- Left inline (these are other Penguin variants/components, not this button):
icon-only ghost buttons (#51 gear/hamburger/chevron), compact table row-action
buttons (`edit`/`view`/`delete`, `px-3 py-1.5 text-xs`), the `text-danger`
"Remove" text link (#52), the file-input button (#13), and nav menu links.