forked from fa/breadcrumb-the-shire
fs
fdbf30379c
Adds an iconTone API (blue, violet, red, orange, amber, emerald, cyan, pink, green, neutral) to appTile() that derives both icon background and color from a single hue via color-mix(). Light mode keeps the pastel-pill look; dark mode picks subtle dark-tinted backgrounds with bright accent icons so tiles read clearly on the dark background. The existing iconBg/iconColor escape hatch stays for callers that need a custom hex (admin/stats); the nine settings tiles migrate to iconTone. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
60 lines
1.8 KiB
PHTML
60 lines
1.8 KiB
PHTML
<?php
|
|
|
|
/**
|
|
* @var string $href
|
|
* @var string $label
|
|
* @var string|null $count
|
|
* @var string|null $icon
|
|
* @var string|null $iconTone
|
|
* @var string|null $iconBg
|
|
* @var string|null $iconColor
|
|
* @var string|null $class
|
|
* @var string|null $tooltip
|
|
* @var string|null $tooltipPos
|
|
*/
|
|
|
|
$href = $href ?? '#';
|
|
$label = $label ?? '';
|
|
$count = $count ?? null;
|
|
$icon = $icon ?? 'bi bi-grid-1x2';
|
|
$iconTone = $iconTone ?? null;
|
|
$iconBg = $iconBg ?? null;
|
|
$iconColor = $iconColor ?? null;
|
|
$class = $class ?? '';
|
|
$tooltip = $tooltip ?? '';
|
|
$tooltipPos = $tooltipPos ?? 'top';
|
|
|
|
$allowedTones = ['blue', 'violet', 'red', 'orange', 'amber', 'emerald', 'cyan', 'pink', 'green', 'neutral'];
|
|
$resolvedTone = is_string($iconTone) && in_array($iconTone, $allowedTones, true) ? $iconTone : null;
|
|
|
|
$styleParts = [];
|
|
if ($iconBg) {
|
|
$styleParts[] = '--tile-icon-bg:' . $iconBg;
|
|
}
|
|
if ($iconColor) {
|
|
$styleParts[] = '--tile-icon-color:' . $iconColor;
|
|
}
|
|
$style = $styleParts ? implode(';', $styleParts) . ';' : '';
|
|
|
|
?>
|
|
<a
|
|
class="app-tile<?php echo $class ? ' ' . $class : ''; // raw-html-ok: internal CSS class from tile config ?>"
|
|
href="<?php e($href); ?>"
|
|
<?php if ($resolvedTone !== null) : ?>data-tone="<?php e($resolvedTone); ?>"<?php endif; ?>
|
|
<?php if ($style) : ?>style="<?php e($style); ?>"<?php endif; ?>
|
|
<?php if ($tooltip !== '') : ?>data-tooltip="<?php e($tooltip); ?>" data-tooltip-pos="<?php e($tooltipPos); ?>"<?php endif; ?>
|
|
>
|
|
<span class="app-tile-icon">
|
|
<i class="<?php e($icon); ?>" aria-hidden="true"></i>
|
|
</span>
|
|
<?php if ($count !== null && $count !== '') : ?>
|
|
<span class="app-tile-count"><?php e($count); ?></span>
|
|
<?php endif; ?>
|
|
<?php if ($label !== '') : ?>
|
|
<span class="app-tile-label"><?php e($label); ?></span>
|
|
<?php endif; ?>
|
|
<span class="app-tile-link" aria-hidden="true">
|
|
<i class="bi bi-box-arrow-up-right"></i>
|
|
</span>
|
|
</a>
|