From ed2eb036ae9e2ebacf701f78f887a1bc34cbf21d Mon Sep 17 00:00:00 2001
From: Priec <filippriec@gmail.com>
Date: Wed, 17 Jun 2026 22:52:20 +0200
Subject: [PATCH] still not fully migrated to penguinui

---
 assets/views/admin/catalog/categories.html    |  5 ++---
 assets/views/admin/catalog/category_form.html |  2 +-
 assets/views/admin/catalog/product_form.html  |  2 +-
 assets/views/admin/catalog/products.html      |  8 +++-----
 assets/views/admin/orders/index.html          |  2 +-
 assets/views/admin/orders/show.html           |  5 ++---
 assets/views/home/index.html                  |  1 +
 assets/views/macros/ui.html                   | 19 ++++++++++++++++---
 assets/views/shop/_card.html                  |  8 +-------
 assets/views/shop/_cart_body.html             |  4 ++--
 assets/views/shop/category.html               |  1 +
 assets/views/shop/checkout.html               |  2 +-
 assets/views/shop/index.html                  |  1 +
 assets/views/shop/order_confirmed.html        |  2 +-
 assets/views/shop/show.html                   |  2 +-
 15 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/assets/views/admin/catalog/categories.html b/assets/views/admin/catalog/categories.html
index 65289b2..ce0d2a8 100644
--- a/assets/views/admin/catalog/categories.html
+++ b/assets/views/admin/catalog/categories.html
@@ -43,11 +43,10 @@
         </td>
         <td class="px-4 py-3">
           <div class="flex flex-wrap justify-end gap-2">
-            <a href="/admin/catalog/categories/{{ row.category.id }}/edit"
-              class="inline-flex items-center rounded-radius border border-outline px-3 py-1.5 text-xs font-medium text-on-surface transition hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">{{ t(key="edit", lang=lang | default(value='sk')) }}</a>
+            {{ ui::button(variant="outline-secondary", label=t(key="edit", lang=lang | default(value='sk')), href="/admin/catalog/categories/" ~ row.category.id ~ "/edit", size="px-3 py-1.5 text-xs") }}
             <form method="post" action="/admin/catalog/categories/{{ row.category.id }}/delete"
               onsubmit="return confirm('{{ t(key="confirm-delete", lang=lang | default(value='sk')) }}')">
-              <button type="submit" class="inline-flex items-center rounded-radius border border-outline px-3 py-1.5 text-xs font-medium text-danger transition hover:bg-danger/10 dark:border-outline-dark">{{ t(key="delete", lang=lang | default(value='sk')) }}</button>
+              {{ ui::button(variant="outline-danger", label=t(key="delete", lang=lang | default(value='sk')), type="submit", size="px-3 py-1.5 text-xs") }}
             </form>
           </div>
         </td>
diff --git a/assets/views/admin/catalog/category_form.html b/assets/views/admin/catalog/category_form.html
index 4be7bfb..b1e1113 100644
--- a/assets/views/admin/catalog/category_form.html
+++ b/assets/views/admin/catalog/category_form.html
@@ -9,7 +9,7 @@
   <h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
     {% if category %}{{ t(key="edit-category", lang=lang | default(value='sk')) }}{% else %}{{ t(key="new-category", lang=lang | default(value='sk')) }}{% endif %}
   </h1>
-  {{ ui::button(variant="outline-secondary", label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/categories", pad="px-3 py-2") }}
+  {{ ui::button(variant="outline-secondary", label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/categories", size="px-3 py-2 text-sm") }}
 </div>
 
 <form method="post" enctype="multipart/form-data"
diff --git a/assets/views/admin/catalog/product_form.html b/assets/views/admin/catalog/product_form.html
index 547c95c..4bf8b83 100644
--- a/assets/views/admin/catalog/product_form.html
+++ b/assets/views/admin/catalog/product_form.html
@@ -9,7 +9,7 @@
   <h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
     {% if product %}{{ t(key="edit-product", lang=lang | default(value='sk')) }}{% else %}{{ t(key="new-product", lang=lang | default(value='sk')) }}{% endif %}
   </h1>
-  {{ ui::button(variant="outline-secondary", label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/products", pad="px-3 py-2") }}
+  {{ ui::button(variant="outline-secondary", label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/products", size="px-3 py-2 text-sm") }}
 </div>
 
 <form method="post" enctype="multipart/form-data"
diff --git a/assets/views/admin/catalog/products.html b/assets/views/admin/catalog/products.html
index a6e80f9..5ede4d6 100644
--- a/assets/views/admin/catalog/products.html
+++ b/assets/views/admin/catalog/products.html
@@ -52,13 +52,11 @@
         </td>
         <td class="px-4 py-3">
           <div class="flex flex-wrap justify-end gap-2">
-            <a href="/admin/catalog/products/{{ product.id }}/edit"
-              class="inline-flex items-center rounded-radius border border-outline px-3 py-1.5 text-xs font-medium text-on-surface transition hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">{{ t(key="edit", lang=lang | default(value='sk')) }}</a>
-            <a href="/shop/{{ product.slug }}"
-              class="inline-flex items-center rounded-radius border border-outline px-3 py-1.5 text-xs font-medium text-on-surface transition hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">{{ t(key="view", lang=lang | default(value='sk')) }}</a>
+            {{ ui::button(variant="outline-secondary", label=t(key="edit", lang=lang | default(value='sk')), href="/admin/catalog/products/" ~ product.id ~ "/edit", size="px-3 py-1.5 text-xs") }}
+            {{ ui::button(variant="outline-secondary", label=t(key="view", lang=lang | default(value='sk')), href="/shop/" ~ product.slug, size="px-3 py-1.5 text-xs") }}
             <form method="post" action="/admin/catalog/products/{{ product.id }}/delete"
               onsubmit="return confirm('{{ t(key="confirm-delete", lang=lang | default(value='sk')) }}')">
-              <button type="submit" class="inline-flex items-center rounded-radius border border-outline px-3 py-1.5 text-xs font-medium text-danger transition hover:bg-danger/10 dark:border-outline-dark">{{ t(key="delete", lang=lang | default(value='sk')) }}</button>
+              {{ ui::button(variant="outline-danger", label=t(key="delete", lang=lang | default(value='sk')), type="submit", size="px-3 py-1.5 text-xs") }}
             </form>
           </div>
         </td>
diff --git a/assets/views/admin/orders/index.html b/assets/views/admin/orders/index.html
index f951e51..6a0be1c 100644
--- a/assets/views/admin/orders/index.html
+++ b/assets/views/admin/orders/index.html
@@ -29,7 +29,7 @@
         </td>
         <td class="px-4 py-3 text-right tabular-nums">{{ order.total }} {{ order.currency }}</td>
         <td class="px-4 py-3 text-right">
-          <a href="/admin/orders/{{ order.id }}" class="inline-flex items-center rounded-radius border border-outline px-3 py-1.5 text-xs font-medium text-on-surface transition hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">{{ t(key="view", lang=lang | default(value='sk')) }}</a>
+          {{ ui::button(variant="outline-secondary", label=t(key="view", lang=lang | default(value='sk')), href="/admin/orders/" ~ order.id, size="px-3 py-1.5 text-xs") }}
         </td>
       </tr>
       {% endfor %}
diff --git a/assets/views/admin/orders/show.html b/assets/views/admin/orders/show.html
index 081fc13..b891765 100644
--- a/assets/views/admin/orders/show.html
+++ b/assets/views/admin/orders/show.html
@@ -7,7 +7,7 @@
 {% block content %}
 <div class="flex flex-wrap items-center justify-between gap-3">
   <h1 class="font-mono text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ order.order_number }}</h1>
-  {{ ui::button(variant="outline-secondary", label=t(key="admin-orders", lang=lang | default(value='sk')), href="/admin/orders", pad="px-3 py-2") }}
+  {{ ui::button(variant="outline-secondary", label=t(key="admin-orders", lang=lang | default(value='sk')), href="/admin/orders", size="px-3 py-2 text-sm") }}
 </div>
 
 {% if ship_error %}
@@ -85,8 +85,7 @@
         {{ t(key="order-tracking", lang=lang | default(value='sk')) }}: <span class="font-mono font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ order.tracking_number }}</span>
       </p>
       {% if order.label_url %}
-      <a href="{{ order.label_url }}" target="_blank" rel="noopener"
-        class="inline-flex items-center rounded-radius border border-outline px-3 py-1.5 text-xs font-medium text-on-surface transition hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">{{ t(key="order-label", lang=lang | default(value='sk')) }}</a>
+      {{ ui::button(variant="outline-secondary", label=t(key="order-label", lang=lang | default(value='sk')), href=order.label_url, size="px-3 py-1.5 text-xs", attrs='target="_blank" rel="noopener"') }}
       {% endif %}
       {% elif carrier == "none" %}
       <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="order-manual-fulfillment", lang=lang | default(value='sk')) }}</p>
diff --git a/assets/views/home/index.html b/assets/views/home/index.html
index 2ffb798..32f8006 100644
--- a/assets/views/home/index.html
+++ b/assets/views/home/index.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% import "macros/ui.html" as ui %}
 
 {% block title %}{{ t(key="brand", lang=lang | default(value='sk')) }}{% endblock title %}
 
diff --git a/assets/views/macros/ui.html b/assets/views/macros/ui.html
index 168d5f6..a85fee2 100644
--- a/assets/views/macros/ui.html
+++ b/assets/views/macros/ui.html
@@ -9,7 +9,7 @@
      {{ ui::button(label=t(key="save", lang=lang)) }}                         {# default primary #}
      {{ ui::button(label="Add", attrs='hx-post="/x"' | safe) }}
      {{ ui::button(label="Cancel", variant="outline-secondary", href="/back") }}
-     {{ ui::button(label="Send", pad="px-6 py-2.5") }}                        {# keep a non-default size #}
+     {{ ui::button(label="Send", size="px-6 py-2.5 text-sm") }}                        {# keep a non-default size #}
      {{ ui::badge(label="Published", variant="success") }}
 
    Notes:
@@ -29,7 +29,7 @@
        outline : outline-primary | outline-secondary | outline-alternate | outline-danger
        ghost   : ghost-primary | ghost-secondary | ghost-danger #}
 
-{% macro button(label, variant="primary", type="button", href="", attrs="", extra="", pad="px-4 py-2") -%}
+{% macro button(label, variant="primary", type="button", href="", attrs="", extra="", icon="", size="px-4 py-2 text-sm") -%}
 {%- if variant == "secondary" -%}{% set cls = "border border-secondary bg-secondary text-on-secondary focus-visible:outline-secondary dark:border-secondary-dark dark:bg-secondary-dark dark:text-on-secondary-dark dark:focus-visible:outline-secondary-dark" -%}
 {%- elif variant == "danger" -%}{% set cls = "border border-danger bg-danger text-on-danger focus-visible:outline-danger dark:bg-danger dark:border-danger dark:text-on-danger dark:focus-visible:outline-danger" -%}
 {%- elif variant == "success" -%}{% set cls = "border border-success bg-success text-on-success focus-visible:outline-success dark:bg-success dark:border-success dark:text-on-success dark:focus-visible:outline-success" -%}
@@ -44,9 +44,22 @@
 {%- elif variant == "ghost-danger" -%}{% set cls = "bg-transparent text-danger focus-visible:outline-danger dark:text-danger dark:focus-visible:outline-danger" -%}
 {%- else -%}{% set cls = "border border-primary bg-primary text-on-primary focus-visible:outline-primary dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark" -%}
 {%- endif -%}
-{% if href %}<a href="{{ href }}"{% else %}<button type="{{ type }}"{% endif %} class="inline-flex items-center justify-center whitespace-nowrap rounded-radius {{ pad }} text-center text-sm font-medium tracking-wide transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 {{ cls }} {{ extra }}" {{ attrs | safe }}>{{ label }}</{% if href %}a{% else %}button{% endif %}>
+{% if href %}<a href="{{ href }}"{% else %}<button type="{{ type }}"{% endif %} class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-radius {{ size }} text-center font-medium tracking-wide transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 {{ cls }} {{ extra }}" {{ attrs | safe }}>{{ icon | safe }}{{ label }}</{% if href %}a{% else %}button{% endif %}>
 {%- endmacro button %}
 
+{# Icon-only button (square). Penguin ghost treatment (bg-transparent,
+   hover:opacity-75); pass the raw <svg> as `icon`, an accessible name via
+   `aria_label`/`sr`, and any Alpine/htmx via `attrs` (raw). variant ∈
+   ghost-secondary (default) | ghost-primary | ghost-danger | ghost-alternate. #}
+{% macro icon_button(icon, variant="ghost-secondary", type="button", href="", attrs="", extra="", aria_label="", sr="", size="size-9") -%}
+{%- if variant == "ghost-primary" -%}{% set cls = "text-primary focus-visible:outline-primary dark:text-primary-dark dark:focus-visible:outline-primary-dark" -%}
+{%- elif variant == "ghost-danger" -%}{% set cls = "text-danger focus-visible:outline-danger dark:text-danger dark:focus-visible:outline-danger" -%}
+{%- elif variant == "ghost-alternate" -%}{% set cls = "text-outline focus-visible:outline-outline dark:text-outline-dark dark:focus-visible:outline-outline-dark" -%}
+{%- else -%}{% set cls = "text-secondary focus-visible:outline-secondary dark:text-secondary-dark dark:focus-visible:outline-secondary-dark" -%}
+{%- endif -%}
+{% if href %}<a href="{{ href }}"{% else %}<button type="{{ type }}"{% endif %}{% if aria_label %} aria-label="{{ aria_label }}" title="{{ aria_label }}"{% endif %} class="inline-flex shrink-0 items-center justify-center rounded-radius bg-transparent {{ size }} transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 {{ cls }} {{ extra }}" {{ attrs | safe }}>{{ icon | safe }}{% if sr %}<span class="sr-only">{{ sr }}</span>{% endif %}</{% if href %}a{% else %}button{% endif %}>
+{%- endmacro icon_button %}
+
 {# Compact danger alert (form/inline errors). Adapted from
    penguinui/alert/default-alert.html (danger variant), trimmed to a single line
    with the danger icon. #}
diff --git a/assets/views/shop/_card.html b/assets/views/shop/_card.html
index 976d612..ad13bce 100644
--- a/assets/views/shop/_card.html
+++ b/assets/views/shop/_card.html
@@ -28,13 +28,7 @@
       hx-on::after-request="if (event.detail.successful) toast('{{ t(key='cart-added', lang=lang | default(value='sk')) }}')">
       <input type="hidden" name="product_id" value="{{ product.id }}">
       <input type="hidden" name="quantity" value="1">
-      <button type="submit"
-        class="flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-radius bg-primary px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-3.5">
-          <path fill-rule="evenodd" d="M5 4a3 3 0 0 1 6 0v1h.643a1.5 1.5 0 0 1 1.492 1.35l.7 7A1.5 1.5 0 0 1 12.342 15H3.657a1.5 1.5 0 0 1-1.492-1.65l.7-7A1.5 1.5 0 0 1 4.357 5H5V4Zm4.5 0v1h-3V4a1.5 1.5 0 0 1 3 0Zm-3 3.75a.75.75 0 0 0-1.5 0v1a3 3 0 1 0 6 0v-1a.75.75 0 0 0-1.5 0v1a1.5 1.5 0 1 1-3 0v-1Z" clip-rule="evenodd" />
-        </svg>
-        {{ t(key="add-to-cart", lang=lang | default(value='sk')) }}
-      </button>
+      {{ ui::button(label=t(key="add-to-cart", lang=lang | default(value='sk')), type="submit", extra="w-full", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-3.5"><path fill-rule="evenodd" d="M5 4a3 3 0 0 1 6 0v1h.643a1.5 1.5 0 0 1 1.492 1.35l.7 7A1.5 1.5 0 0 1 12.342 15H3.657a1.5 1.5 0 0 1-1.492-1.65l.7-7A1.5 1.5 0 0 1 4.357 5H5V4Zm4.5 0v1h-3V4a1.5 1.5 0 0 1 3 0Zm-3 3.75a.75.75 0 0 0-1.5 0v1a3 3 0 1 0 6 0v-1a.75.75 0 0 0-1.5 0v1a1.5 1.5 0 1 1-3 0v-1Z" clip-rule="evenodd" /></svg>') }}
     </form>
     {% else %}
     <p class="inline-flex justify-center rounded-radius bg-danger/10 px-3 py-2 text-xs font-medium text-danger">{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}</p>
diff --git a/assets/views/shop/_cart_body.html b/assets/views/shop/_cart_body.html
index ab683cb..a1b1020 100644
--- a/assets/views/shop/_cart_body.html
+++ b/assets/views/shop/_cart_body.html
@@ -44,7 +44,7 @@
           <form method="post" action="/cart/remove"
             hx-post="/cart/remove" hx-target="#cart-body" hx-swap="innerHTML">
             <input type="hidden" name="product_id" value="{{ item.id }}">
-            <button type="submit" class="text-xs font-medium text-danger hover:underline">{{ t(key="cart-remove", lang=lang | default(value='sk')) }}</button>
+            {{ ui::button(variant="ghost-danger", label=t(key="cart-remove", lang=lang | default(value='sk')), type="submit", size="px-2 py-1 text-xs") }}
           </form>
         </td>
       </tr>
@@ -62,7 +62,7 @@
 
 <div class="mt-6 flex flex-wrap justify-between gap-3">
   {{ ui::button(variant="outline-secondary", label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop") }}
-  {{ ui::button(label=t(key="cart-checkout", lang=lang | default(value='sk')), href="/checkout", pad="px-5 py-2") }}
+  {{ ui::button(label=t(key="cart-checkout", lang=lang | default(value='sk')), href="/checkout", size="px-5 py-2 text-sm") }}
 </div>
 {% else %}
 <div class="rounded-radius border border-outline px-6 py-16 text-center dark:border-outline-dark">
diff --git a/assets/views/shop/category.html b/assets/views/shop/category.html
index 2d902a8..7c0c939 100644
--- a/assets/views/shop/category.html
+++ b/assets/views/shop/category.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% import "macros/ui.html" as ui %}
 
 {% block title %}{{ category.name }}{% endblock title %}
 
diff --git a/assets/views/shop/checkout.html b/assets/views/shop/checkout.html
index af4347b..d9b5619 100644
--- a/assets/views/shop/checkout.html
+++ b/assets/views/shop/checkout.html
@@ -212,7 +212,7 @@
       <span>{{ t(key="cart-total", lang=lang | default(value='sk')) }}</span>
       <span class="tabular-nums text-primary dark:text-primary-dark" x-text="fmt(subtotal + carrierPrice) + ' {{ currency }}'"></span>
     </div>
-    {{ ui::button(label=t(key="checkout-place-order", lang=lang | default(value='sk')), type="submit", attrs=':disabled="!canSubmit"', extra="w-full", pad="px-6 py-2.5") }}
+    {{ ui::button(label=t(key="checkout-place-order", lang=lang | default(value='sk')), type="submit", attrs=':disabled="!canSubmit"', extra="w-full", size="px-6 py-2.5 text-sm") }}
   </aside>
 </form>
 {% endblock content %}
diff --git a/assets/views/shop/index.html b/assets/views/shop/index.html
index db8db84..8439da9 100644
--- a/assets/views/shop/index.html
+++ b/assets/views/shop/index.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% import "macros/ui.html" as ui %}
 
 {% block title %}{{ t(key="nav-shop", lang=lang | default(value='sk')) }}{% endblock title %}
 
diff --git a/assets/views/shop/order_confirmed.html b/assets/views/shop/order_confirmed.html
index d9689c5..42d430c 100644
--- a/assets/views/shop/order_confirmed.html
+++ b/assets/views/shop/order_confirmed.html
@@ -56,7 +56,7 @@
   {% endif %}
 
   <div class="text-center">
-    {{ ui::button(variant="outline-secondary", label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop", pad="px-5 py-2") }}
+    {{ ui::button(variant="outline-secondary", label=t(key="cart-continue", lang=lang | default(value='sk')), href="/shop", size="px-5 py-2 text-sm") }}
   </div>
 </div>
 {% endblock content %}
diff --git a/assets/views/shop/show.html b/assets/views/shop/show.html
index 338d8db..2d62aca 100644
--- a/assets/views/shop/show.html
+++ b/assets/views/shop/show.html
@@ -48,7 +48,7 @@
         <input id="quantity" name="quantity" type="number" min="1" max="{{ product.stock }}" value="1"
           class="w-24 rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
       </div>
-      {{ ui::button(label=t(key="add-to-cart", lang=lang | default(value='sk')), type="submit", pad="px-5 py-2") }}
+      {{ ui::button(label=t(key="add-to-cart", lang=lang | default(value='sk')), type="submit", size="px-5 py-2 text-sm") }}
     </form>
     <p class="text-sm text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="in-stock", lang=lang | default(value='sk')) }}: {{ product.stock }}</p>
     {% else %}