Use Tailwind and DaisyUI for shared UI styles

config/paginator-templates.php

@@ -5,15 +5,15 @@
  * Shared pagination and sorting links, including Interact's enhanced navigation.
  */
 return [
-    'nextActive' => '<a class="page-link" rel="next nofollow" href="{{url}}">{{text}}</a>',
-    'nextDisabled' => '<span class="page-link" aria-disabled="true">{{text}}</span>',
-    'prevActive' => '<a class="page-link" rel="prev nofollow" href="{{url}}">{{text}}</a>',
-    'prevDisabled' => '<span class="page-link" aria-disabled="true">{{text}}</span>',
-    'number' => '<a class="page-link numbered-page" rel="nofollow" href="{{url}}">{{text}}</a>',
-    'current' => '<span class="page-link numbered-page" aria-current="page">{{text}}</span>',
+    'nextActive' => '<a class="page-link btn btn-outline" rel="next nofollow" href="{{url}}">{{text}}</a>',
+    'nextDisabled' => '<span class="page-link btn btn-outline" aria-disabled="true">{{text}}</span>',
+    'prevActive' => '<a class="page-link btn btn-outline" rel="prev nofollow" href="{{url}}">{{text}}</a>',
+    'prevDisabled' => '<span class="page-link btn btn-outline" aria-disabled="true">{{text}}</span>',
+    'number' => '<a class="page-link btn btn-outline numbered-page" rel="nofollow" href="{{url}}">{{text}}</a>',
+    'current' => '<span class="page-link btn btn-outline numbered-page" aria-current="page">{{text}}</span>',
     'ellipsis' => '<span class="numbered-page" aria-hidden="true">&hellip;</span>',
-    'first' => '<a class="page-link" rel="nofollow" href="{{url}}">{{text}}</a>',
-    'last' => '<a class="page-link" rel="nofollow" href="{{url}}">{{text}}</a>',
+    'first' => '<a class="page-link btn btn-outline" rel="nofollow" href="{{url}}">{{text}}</a>',
+    'last' => '<a class="page-link btn btn-outline" rel="nofollow" href="{{url}}">{{text}}</a>',
     'sort' => '<a class="sort-option" rel="nofollow" href="{{url}}">{{text}}</a>',
     'sortAsc' => '<a class="sort-option sort-option-active" rel="nofollow" href="{{url}}">{{text}} ↑</a>',
     'sortDesc' => '<a class="sort-option sort-option-active" rel="nofollow" href="{{url}}">{{text}} ↓</a>',

templates/Error/error400.php

@@ -25,5 +25,5 @@
         <strong><?= __d('cake', 'Error') ?>: </strong>
         <?= __d('cake', 'The requested address {0} was not found on this server.', "<strong>'" . h($url) . "'</strong>") ?>
     </p>
-    <?= $this->Html->link(__('Browse plugins'), '/', ['class' => 'action-link']) ?>
+    <?= $this->Html->link(__('Browse plugins'), '/', ['class' => 'action-link btn btn-outline']) ?>
 </div>

templates/Error/error500.php

@@ -36,5 +36,5 @@
         <strong><?= __d('cake', 'Error') ?>: </strong>
         <?= h($message) ?>
     </p>
-    <?= $this->Html->link(__('Browse plugins'), '/', ['class' => 'action-link']) ?>
+    <?= $this->Html->link(__('Browse plugins'), '/', ['class' => 'action-link btn btn-outline']) ?>
 </div>

templates/Packages/view.php

@@ -7,7 +7,7 @@
 ?>
 <div class="plugin-page site-width">
     <h1 class="sr-only"><?= h($package->package) ?></h1>
-    <a class="plugin-back-link" href="<?= $this->Url->build(['controller' => 'Packages', 'action' => 'index']) ?>" x-interact:navigate>
+    <a class="mb-5 inline-flex items-center gap-2 text-sm leading-[1.6]" href="<?= $this->Url->build(['controller' => 'Packages', 'action' => 'index']) ?>" x-interact:navigate>
         <span aria-hidden="true">←</span> <?= __('Browse plugins') ?>
     </a>
     <div class="plugin-page-panel">

templates/Pages/requirements.php

@@ -26,7 +26,7 @@
     <section class="docs-section">
         <h2><?= __('What does not qualify') ?></h2>
         <p>A generic library depending only on PSR interfaces does not qualify. A README that mentions CakePHP support is not enough without a Composer dependency.</p>
-        <p class="muted">Only <?= $this->element('code_chip', ['text' => 'require']) ?> dependencies are considered for compatibility tags.</p>
+        <p class="text-muted">Only <?= $this->element('code_chip', ['text' => 'require']) ?> dependencies are considered for compatibility tags.</p>
     </section>
     <section class="docs-section">
         <h2><?= __('Composer examples') ?></h2>
@@ -53,5 +53,5 @@
             </div>
         </div>
     </section>
-    <?= $this->Html->link(__('Browse plugins'), '/', ['class' => 'action-link', 'x-interact:navigate' => '']) ?>
+    <?= $this->Html->link(__('Browse plugins'), '/', ['class' => 'action-link btn btn-outline', 'x-interact:navigate' => '']) ?>
 </section>

templates/element/Packages/awesome_badge.php

@@ -5,7 +5,7 @@
  */
 ?>
 <?php if ($package->categories) : ?>
-    <span class="awesome-badge" title="<?= __('Listed in the community-curated Awesome CakePHP list') ?>">
+    <span class="awesome-badge badge badge-soft badge-primary" title="<?= __('Listed in the community-curated Awesome CakePHP list') ?>">
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
             <path d="m12 3 2.8 5.7 6.3.9-4.6 4.5 1.1 6.3-5.6-3-5.6 3 1.1-6.3-4.6-4.5 6.3-.9L12 3Z" stroke-linejoin="round"></path>
         </svg>

templates/element/Packages/category_browser.php

@@ -10,7 +10,7 @@
  */
 $allCategoriesSelected = $category === '';
 ?>
-<details class="category-browser" id="catalogue-categories" x-ref="categoryBrowser" @toggle="categoriesToggled($event)">
+<details class="category-browser group" id="catalogue-categories" x-ref="categoryBrowser" @toggle="categoriesToggled($event)">
     <summary>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
             <rect x="3" y="3" width="5" height="5" rx="1"></rect>
@@ -23,21 +23,22 @@
             <path d="m4 6 4 4 4-4" stroke-linecap="round" stroke-linejoin="round"></path>
         </svg>
     </summary>
-    <div class="category-browser-content">
-        <div class="category-browser-heading">
-            <p class="category-source">
+    <div class="pt-3">
+        <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
+            <p class="text-xs leading-[1.6] text-muted">
                 <?= __('Categories from') ?>
                 <a href="<?= AwesomeListImporter::SOURCE_URL ?>" target="_blank" rel="noopener noreferrer">Awesome CakePHP</a>.
             </p>
             <label class="category-search" x-cloak>
                 <span class="sr-only"><?= __('Find a category') ?></span>
-                <input type="search" x-model="categorySearch" placeholder="<?= __('Find a category') ?>" autocomplete="off" aria-controls="category-grid">
+                <input class="input input-sm" type="search" x-model="categorySearch" placeholder="<?= __('Find a category') ?>"
+                       autocomplete="off" aria-controls="category-grid">
             </label>
         </div>
-        <div class="category-grid" id="category-grid" x-ref="categoryGrid" role="group" aria-label="<?= __('Plugin categories') ?>">
+        <div class="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-4" id="category-grid" x-ref="categoryGrid" role="group" aria-label="<?= __('Plugin categories') ?>">
             <a class="category-choice" href="<?= h($clearCategoryUrl) ?>" data-category-slug="" data-category-name="<?= __('All categories') ?>"
                x-show="matchesCategory($el.dataset.categoryName)" <?= $allCategoriesSelected ? 'aria-current="true"' : '' ?>>
-                <span class="category-choice-label"><?= __('All categories') ?></span>
+                <span class="wrap-anywhere"><?= __('All categories') ?></span>
                 <span aria-hidden="true">→</span>
             </a>
             <?php foreach ($categoryOptions as $slug => $option) : ?>
@@ -49,11 +50,11 @@
                    data-category-slug="<?= h($slug) ?>" data-category-name="<?= h($option['name']) ?>"
                    aria-label="<?= h(__n('{0}, {1} plugin', '{0}, {1} plugins', $option['count'], $option['name'], $option['count'])) ?>"
                    title="<?= __('Total plugins in this category') ?>" x-show="matchesCategory($el.dataset.categoryName)" <?= $categorySelected ? 'aria-current="true"' : '' ?>>
-                    <span class="category-choice-label"><?= h($option['name']) ?></span>
-                    <span class="category-choice-count" aria-hidden="true"><?= $this->Number->format($option['count']) ?></span>
+                    <span class="wrap-anywhere"><?= h($option['name']) ?></span>
+                    <span class="shrink-0 text-xs leading-normal text-muted tabular-nums" aria-hidden="true"><?= $this->Number->format($option['count']) ?></span>
                 </a>
             <?php endforeach; ?>
         </div>
-        <p class="category-no-matches" role="status" x-show="categorySearch && !hasCategoryMatches()" x-cloak><?= __('No matching categories. Try another name.') ?></p>
+        <p class="mt-4 text-sm leading-[1.6] text-muted" role="status" x-show="categorySearch && !hasCategoryMatches()" x-cloak><?= __('No matching categories. Try another name.') ?></p>
     </div>
 </details>

templates/element/Packages/package-row.php

@@ -13,26 +13,26 @@
 $detailsUrl = $this->Url->build(['_name' => 'plugin:view', 'id' => $package->id]);
 ?>
 <article class="package-row" id="package-<?= (int)$package->id ?>" data-package-row>
-    <div class="package-info">
+    <div class="min-w-0">
         <h3 class="package-name">
             <a href="<?= $detailsUrl ?>" data-open-plugin data-plugin-id="<?= (int)$package->id ?>" data-plugin-name="<?= h($package->package) ?>">
                 <?= h($package->package) ?>
             </a>
         </h3>
-        <p class="package-description"><?= h($package->description ?: __('No description available.')) ?></p>
+        <p class="line-clamp-2 text-[0.9375rem] wrap-anywhere"><?= h($package->description ?: __('No description available.')) ?></p>
         <?php if ($package->categories) : ?>
-            <div class="package-curation">
+            <div class="mt-2 flex flex-wrap items-center gap-1.5">
                 <?= $this->element('Packages/awesome_badge', compact('package')) ?>
                 <?php foreach (array_slice($package->categories, 0, 2) as $category) : ?>
-                    <span class="category-label"><?= h($category->name) ?></span>
+                    <span class="category-label badge badge-outline"><?= h($category->name) ?></span>
                 <?php endforeach; ?>
                 <?php if (count($package->categories) > 2) : ?>
-                    <span class="category-label">+<?= count($package->categories) - 2 ?></span>
+                    <span class="category-label badge badge-outline">+<?= count($package->categories) - 2 ?></span>
                 <?php endif; ?>
             </div>
         <?php endif; ?>
         <?php if ($summaries !== []) : ?>
-            <p class="package-compatibility"><?= h(implode(' · ', $summaries)) ?></p>
+            <p class="mt-2 text-[0.8125rem] text-muted"><?= h(implode(' · ', $summaries)) ?></p>
         <?php endif; ?>
     </div>
     <div class="package-summary">
@@ -42,7 +42,7 @@
                 <dd><?= $this->Number->format($package->downloads) ?></dd>
             </div>
         </dl>
-        <a class="package-details-link" href="<?= $detailsUrl ?>" aria-label="<?= __('View {0} details', h($package->package)) ?>"
+        <a class="inline-flex min-h-8 items-center gap-1.5 text-[0.8125rem] font-[550]" href="<?= $detailsUrl ?>" aria-label="<?= __('View {0} details', h($package->package)) ?>"
            data-open-plugin data-plugin-id="<?= (int)$package->id ?>" data-plugin-name="<?= h($package->package) ?>">
             <?= __('View details') ?> <span aria-hidden="true">→</span>
         </a>

templates/element/Packages/plugin-avatar.php

@@ -9,7 +9,7 @@
 $initials = mb_substr($words[0], 0, 1);
 $initials .= count($words) > 1 ? mb_substr($words[1], 0, 1) : mb_substr($words[0], 1, 1);
 ?>
-<div class="avatar avatar-placeholder plugin-avatar" aria-hidden="true">
+<div class="avatar avatar-placeholder shrink-0 self-start" aria-hidden="true">
     <div class="plugin-avatar-tile">
         <span><?= h(mb_strtoupper($initials)) ?></span>
         <?php if ($logo !== null) : ?>

templates/element/Packages/plugin-details.php

@@ -14,10 +14,10 @@
 ?>
 <article class="plugin-details" id="plugin-details-<?= (int)$package->id ?>">
     <header class="plugin-details-heading">
-        <p class="plugin-vendor"><?= h($vendor) ?> /</p>
+        <p class="mb-1 text-[0.9375rem] font-medium text-muted wrap-anywhere"><?= h($vendor) ?> /</p>
         <h2><?= h($name ?: $vendor) ?></h2>
         <?= $this->element('Packages/awesome_badge', compact('package')) ?>
-        <p class="plugin-details-description"><?= h($package->description ?: __('No description available.')) ?></p>
+        <p class="mt-4 text-base leading-[1.7] text-base-content wrap-anywhere"><?= h($package->description ?: __('No description available.')) ?></p>
         <div class="plugin-resource-links">
             <a class="btn btn-sm btn-primary" href="<?= h($package->repo_url) ?>" target="_blank" rel="noopener noreferrer">
                 <?= $this->element('github_icon') ?>
@@ -59,7 +59,8 @@
             <h3><?= __('Categories') ?></h3>
             <div class="plugin-category-links">
                 <?php foreach ($package->categories as $category) : ?>
-                    <a class="category-label" href="<?= $this->Url->build(['plugin' => null, 'controller' => 'Packages', 'action' => 'index', '?' => ['category' => $category->slug]]) ?>"
+                    <a class="category-label badge badge-outline"
+                       href="<?= $this->Url->build(['plugin' => null, 'controller' => 'Packages', 'action' => 'index', '?' => ['category' => $category->slug]]) ?>"
                        data-filter-package-category data-category-slug="<?= h($category->slug) ?>"><?= h($category->name) ?></a>
                 <?php endforeach; ?>
             </div>
@@ -91,14 +92,14 @@
         <?php foreach ($groups as $group) : ?>
             <div class="plugin-version-group">
                 <h4><?= h($group['label']) ?></h4>
-                <div class="compatibility-versions" role="group" aria-label="<?= __('{0} compatibility', $group['label']) ?>">
+                <div class="flex flex-wrap gap-1.5 p-0.5" role="group" aria-label="<?= __('{0} compatibility', $group['label']) ?>">
                     <?php if ($group['tags'] === []) : ?>
                         <span class="plugin-section-hint"><?= __('Not listed') ?></span>
                     <?php endif; ?>
                     <?php foreach ($group['tags'] as $tags) : ?>
                         <?php foreach ($tags as $tag) : ?>
                             <?php $version = str_replace($group['label'] . ': ', '', $tag->label); ?>
-                            <a class="version-pill"
+                            <a class="version-pill badge badge-outline"
                                aria-label="<?= h($group['label'] . ' ' . $version) ?>"
                                href="<?= $this->Url->build(['controller' => 'Packages', 'action' => 'index', 'plugin' => null, '?' => [$group['query'] => [$tag->slug]]]) ?>"
                                data-filter-package-version data-version-group="<?= h($group['query']) ?>" data-version-slug="<?= h($tag->slug) ?>">

templates/element/awesome_logo.php

@@ -6,7 +6,7 @@
  * @link https://github.com/sindresorhus/awesome/blob/main/media/readme.md
  */
 ?>
-<svg class="awesome-toggle-logo" xmlns="http://www.w3.org/2000/svg" width="24" height="14" viewBox="20 -55 604 320"
+<svg class="h-3.5 w-6 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="14" viewBox="20 -55 604 320"
      fill="currentColor" aria-hidden="true" focusable="false">
     <path d="M614.2 91l-150-137.6-21.1 23L568.1 91H75.4l125-114.7-21.1-23L29.3 91h-.1v90.7c0 41 39.5 74.4 88 74.4h92.5c48.5 0 88-33.4 88-74.4
              v-59.6h48v59.6c0 41 39.5 74.4 88 74.4h92.5c48.5 0 88-33.4 88-74.4V91z"></path>

templates/element/brand.php

@@ -1,13 +1,14 @@
 <?php
 /** @var \App\View\AppView $this */
 ?>
-<a class="brand" href="<?= $this->Url->build('/') ?>" x-interact:navigate.hover aria-label="<?= __('CakePHP Plugins home') ?>">
-    <svg class="brand-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 45.258" fill="currentColor" aria-hidden="true">
+<a class="inline-flex shrink-0 items-center gap-2.5 font-bold tracking-[-0.02em] text-base-content no-underline hover:text-base-content"
+   href="<?= $this->Url->build('/') ?>" x-interact:navigate.hover aria-label="<?= __('CakePHP Plugins home') ?>">
+    <svg class="h-[1.6rem] w-8 shrink-0 text-cake-red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 45.258" fill="currentColor" aria-hidden="true">
         <path d="M28.993,18.11l22.685,5.632c3.948-1.541,6.318-3.505,6.318-5.632V9.052C57.996,4.058,45.011,0,28.993,0
             C12.979,0,0,4.058,0,9.052v9.058c0,4.995,12.979,9.05,28.993,9.05V18.11z" />
         <path d="M51.676,32.796L28.993,27.16v9.051l22.683,5.638c3.95-1.549,6.322-3.504,6.322-5.638V27.16
             C57.999,29.292,55.626,31.25,51.676,32.796" />
         <path d="M0,27.16v9.052c0,4.996,12.979,9.047,28.993,9.047v-9.047C12.979,36.211,0,32.155,0,27.16" />
     </svg>
-    <span>CakePHP <span class="brand-label">Plugins</span></span>
+    <span>CakePHP <span class="font-[450] text-muted max-[384px]:hidden">Plugins</span></span>
 </a>

templates/element/code_chip.php

@@ -5,4 +5,4 @@
  * @var string|null $variant
  */
 ?>
-<code class="code-chip"><?= h($text) ?></code>
+<code class="rounded-sm border border-base-300 bg-base-100 px-1.5 py-0.5 text-[0.875em] text-base-content wrap-anywhere"><?= h($text) ?></code>

templates/element/flash/message.php

@@ -9,9 +9,9 @@
     $message = h($message);
 }
 ?>
-<div class="flash-message site-width flash-<?= h($type) ?>" role="<?= $type === 'error' ? 'alert' : 'status' ?>" x-data="flashMessage" x-show="open">
+<div class="alert flash-message site-width flash-<?= h($type) ?>" role="<?= $type === 'error' ? 'alert' : 'status' ?>" x-data="flashMessage" x-show="open">
     <p><?= $message ?></p>
-    <button type="button" class="icon-button" @click="close()" aria-label="<?= __('Dismiss message') ?>" x-cloak>
+    <button type="button" class="icon-button btn btn-square btn-ghost" @click="close()" aria-label="<?= __('Dismiss message') ?>" x-cloak>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
             <path d="m4 4 8 8M12 4l-8 8" stroke-linecap="round"></path>
         </svg>