tint the Claude sidebar tab icon with the Claude accent (T-418)

TabContribution gains an optional iconColor honoured by the icon rail:
full-strength when active/hovered, dimmed (70%) when idle, so the tint
reads as identity without outshouting the active-state border. The
Claude Activity tab sets claudeAccent (#D97757) — nominative use per the
licenses.yaml trademark note (it marks Claude's own panel).

Filed and closed as a try-it-out (user request); trivially revertible if
the accent doesn't land visually.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-06-12 13:30:22 +02:00
co-authored by Claude Fable 5
parent 959ec7ddc4
commit 1674d3021a
8 changed files with 108 additions and 3 deletions
+10 -2
View File
@@ -4,11 +4,16 @@ import 'package:clide/widgets/src/clide_tappable.dart';
import 'package:flutter/widgets.dart';
class ClideIconRailItem {
const ClideIconRailItem({required this.id, required this.icon, required this.tooltip});
const ClideIconRailItem({required this.id, required this.icon, required this.tooltip, this.iconColor});
final String id;
final ClideIconPainter icon;
final String tooltip;
/// Brand/identity tint for this tab's icon (e.g. the Claude accent on the
/// Claude tab, T-418). Shown full-strength when active/hovered and slightly
/// dimmed when idle; null keeps the normal state colours.
final Color? iconColor;
}
class ClideIconRail extends StatelessWidget {
@@ -60,7 +65,10 @@ class _RailButton extends StatelessWidget {
onTap: onTap,
tooltip: item.tooltip,
builder: (ctx, hovered, _) {
final color = active
final tint = item.iconColor;
final color = tint != null
? (active || hovered ? tint : tint.withValues(alpha: 0.7))
: active
? tokens.globalForeground
: hovered
? tokens.sidebarForeground