feat(ui): tone-based icon palette for app-tile, dark-mode aware

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>

core/Support/helpers/ui.php

@@ -827,6 +827,7 @@ function appTile(array $options = []): void
         'label' => '',
         'count' => null,
         'icon' => 'bi bi-grid-1x2',
+        'iconTone' => null,
         'iconBg' => null,
         'iconColor' => null,
         'class' => '',

pages/admin/settings/index(default).phtml

@@ -19,72 +19,63 @@
       'href' => 'admin/settings/general',
       'label' => t('General'),
       'icon' => 'bi bi-sliders',
-      'iconBg' => '#e0ecff',
+      'iconTone' => 'blue',
-      'iconColor' => '#2563eb',
       'tooltip' => t('App title, language, user creation defaults'),
     ]);
     appTile([
       'href' => 'admin/settings/account-access',
       'label' => t('Account access'),
       'icon' => 'bi bi-shield-lock',
-      'iconBg' => '#ede9fe',
+      'iconTone' => 'violet',
-      'iconColor' => '#7c3aed',
       'tooltip' => t('Registration, sessions, login persistence'),
     ]);
     appTile([
       'href' => 'admin/settings/user-lifecycle',
       'label' => t('User lifecycle'),
       'icon' => 'bi bi-arrow-repeat',
-      'iconBg' => '#fee2e2',
+      'iconTone' => 'red',
-      'iconColor' => '#b91c1c',
       'tooltip' => t('Inactivity deactivation and deletion policy'),
     ]);
     appTile([
       'href' => 'admin/settings/audit',
       'label' => t('Audit log'),
       'icon' => 'bi bi-journal-text',
-      'iconBg' => '#fff7ed',
+      'iconTone' => 'orange',
-      'iconColor' => '#c2410c',
       'tooltip' => t('System audit log enable and retention'),
     ]);
     appTile([
       'href' => 'admin/settings/telemetry',
       'label' => t('Telemetry'),
       'icon' => 'bi bi-graph-up',
-      'iconBg' => '#ecfdf5',
+      'iconTone' => 'green',
-      'iconColor' => '#047857',
       'tooltip' => t('Frontend telemetry collection and event allowlist'),
     ]);
     appTile([
       'href' => 'admin/settings/email',
       'label' => t('Email'),
       'icon' => 'bi bi-envelope',
-      'iconBg' => '#fef3c7',
+      'iconTone' => 'amber',
-      'iconColor' => '#d97706',
       'tooltip' => t('SMTP connection and sender details'),
     ]);
     appTile([
       'href' => 'admin/settings/api',
       'label' => t('API'),
       'icon' => 'bi bi-key',
-      'iconBg' => '#d1fae5',
+      'iconTone' => 'emerald',
-      'iconColor' => '#059669',
       'tooltip' => t('API token policy and CORS allowlist'),
     ]);
     appTile([
       'href' => 'admin/settings/sso',
       'label' => t('Microsoft SSO'),
       'icon' => 'bi bi-microsoft',
-      'iconBg' => '#dbeafe',
+      'iconTone' => 'cyan',
-      'iconColor' => '#0891b2',
       'tooltip' => t('Shared Microsoft Entra ID credentials'),
     ]);
     appTile([
       'href' => 'admin/settings/branding',
       'label' => t('Branding'),
       'icon' => 'bi bi-palette',
-      'iconBg' => '#fce7f3',
+      'iconTone' => 'pink',
-      'iconColor' => '#be185d',
       'tooltip' => t('App logo and favicon'),
     ]);
     ?>

templates/partials/app-tile.phtml

@@ -5,6 +5,7 @@
  * @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
@@ -16,12 +17,16 @@ $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;
@@ -35,6 +40,7 @@ $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; ?>
 >

web/css/components/app-tile.css

@@ -34,9 +34,12 @@
     padding: var(--app-spacing);
   }
 
+  /* Tone palette — single hue per tone, bg + icon-color derived via color-mix
+     so dark-mode automatically produces a subtle dark-tinted bg + bright icon. */
   .app-tile {
-    --tile-icon-bg: var(--app-tile-icon-bg);
+    --tile-tone: hsl(220 12% 50%);
-    --tile-icon-color: var(--app-tile-icon-color);
+    --tile-icon-bg: color-mix(in oklab, var(--tile-tone) 14%, white);
+    --tile-icon-color: var(--tile-tone);
     --tile-count-color: var(--app-tile-count-color);
     --tile-label-color: var(--app-tile-label-color);
     --tile-link-color: var(--app-tile-link-color);
@@ -70,6 +73,31 @@
     font-size: var(--text-lg);
   }
 
+  /* Per-tone hues — pick one base color, light/dark blocks derive bg + icon. */
+  .app-tile[data-tone="blue"]    { --tile-tone: hsl(217 91% 55%); }
+  .app-tile[data-tone="violet"]  { --tile-tone: hsl(263 80% 58%); }
+  .app-tile[data-tone="red"]     { --tile-tone: hsl(0 75% 55%); }
+  .app-tile[data-tone="orange"]  { --tile-tone: hsl(20 90% 55%); }
+  .app-tile[data-tone="amber"]   { --tile-tone: hsl(38 95% 55%); }
+  .app-tile[data-tone="emerald"] { --tile-tone: hsl(160 75% 40%); }
+  .app-tile[data-tone="cyan"]    { --tile-tone: hsl(190 85% 45%); }
+  .app-tile[data-tone="pink"]    { --tile-tone: hsl(330 80% 58%); }
+  .app-tile[data-tone="green"]   { --tile-tone: hsl(142 70% 45%); }
+  .app-tile[data-tone="neutral"] { --tile-tone: hsl(220 10% 55%); }
+
+  /* Dark-mode tone derivation: subtle dark-tinted bg + brighter icon for contrast.
+     Mirrors the existing :root/[data-theme] split used in variables.base.css. */
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme]) .app-tile {
+      --tile-icon-bg: color-mix(in oklab, var(--tile-tone) 22%, var(--app-background-color));
+      --tile-icon-color: color-mix(in oklab, var(--tile-tone) 80%, white);
+    }
+  }
+  [data-theme="dark"] .app-tile {
+    --tile-icon-bg: color-mix(in oklab, var(--tile-tone) 22%, var(--app-background-color));
+    --tile-icon-color: color-mix(in oklab, var(--tile-tone) 80%, white);
+  }
+
   .app-tile-count {
     position: absolute;
     top: calc(var(--app-spacing) * 1);