Files
buzz/mobile/lib/shared/theme/buzz_theme.dart
klopez4212 c0c606e2e3 Polish mobile navigation and restore community switch animation (#8732)
Removes aggregate unread dots from mobile filters, Inbox, and Solo
section headings. The aggregate-dot removal is an explicitly requested
product change. Solo and Team names match the current `block/buzz-app`
sidebar’s light/dark colours and 400/600 read/unread weights (not this
repository’s older `desktop/` implementation); Solo rows show
owned-agent working dots with reduced-motion support.

Restores the community-switch loading and avatar flight with a leftward
arc to the community menu in its current top-right position.

Mobile uses one fixed light/dark application palette; legacy catalog
theme names do not select navigation palettes. The 600 unread weight
follows [the current desktop sidebar
override](36a283b238/src/bundled/channels/Channels.module.css (L47)).

Working status uses live agent typing; desktop’s local waiting state is
not available on mobile.

Validation: clean analysis; 3,997 mobile tests passed, 28 skipped; four
push-configuration checks passed. Navigation styling visually approved
on iPhone; community-switch regression covers portrait/landscape and
normal/reduced motion; authenticated-shell recovery is covered. Hosted
CI passed at `bfeb0fecd`. Updated Pairing Preview installed on iPhone
for transition testing.

### Snapshots

Actual Flutter widgets with sample conversations; static working dots
for reduced motion.

| Light | Dark |
|---|---|
| ![Light theme: unread chat above read
chat](https://github.com/user-attachments/assets/d83b35d5-ab9b-44e0-b7d6-6527ef10a776)
| ![Dark theme: unread chat above read
chat](https://github.com/user-attachments/assets/45f64291-5d39-4e17-8f72-1aa1271c10b7)
|

---------

Signed-off-by: kenny lopez <klopez4212@gmail.com>
Co-authored-by: Terp <5856f6900e8e0a4e0ea1f4f8d2ee33e4753d2119bc122f94ecafc660b46c0511@buzz.block.builderlab.xyz>
2026-10-30 18:03:25 +00:00

127 lines
5.3 KiB
Dart

import 'package:flutter/material.dart';
import 'accent_colors.dart';
import 'app_colors.dart';
import 'theme_extensions.dart';
/// Name of the first-party Buzz theme. Buzz reuses the GitHub Light palette for
/// every base color; the one thing that sets it apart is a branded gradient
/// painted across the app's top section. Mirrors desktop, where the same
/// gradient fills the sidebar canvas — see `data-buzz-sidebar` in
/// `desktop/src/shared/styles/globals/theme.css`.
const buzzThemeName = 'buzz';
/// Name of the dark counterpart, which reuses the GitHub Dark palette and the
/// dark-tuned gradient stops. Paired with [buzzThemeName] in `themePairs`, so
/// the two behave as a single "Buzz" choice under System mode.
const buzzDarkThemeName = 'buzz-dark';
/// Whether [themeName] is either half of the Buzz pair. Both halves enable the
/// gradient so System mode keeps it on across an OS light/dark switch.
bool isBuzzTheme(String themeName) =>
themeName == buzzThemeName || themeName == buzzDarkThemeName;
/// Whether the current widget tree is using the first-party Buzz treatment.
bool isBuzzThemeContext(BuildContext context) =>
Theme.of(context).extension<AppColors>()?.topSectionGradient != null;
/// Primary foreground for the mobile top navigation.
///
/// Every theme uses its own [ColorScheme.onSurface]. Buzz is the exception:
/// its desktop-matching top gradient needs a neutral black or white foreground
/// rather than the accent-derived color scheme foreground.
Color navigationPrimaryForeground(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
if (!isBuzzThemeContext(context)) return scheme.onSurface;
return scheme.brightness == Brightness.dark ? Colors.white : Colors.black;
}
/// Secondary label and placeholder foreground for the mobile top navigation.
Color navigationSecondaryForeground(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
if (!isBuzzThemeContext(context)) return scheme.onSurfaceVariant;
return navigationPrimaryForeground(context).withValues(alpha: 0.4);
}
/// Channel-section label and icon foreground for the mobile side navigation.
///
/// Section labels need more hierarchy than a placeholder. Buzz therefore uses
/// a stronger neutral over its gradient, while all other themes preserve their
/// established secondary foreground token.
Color navigationSectionForeground(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
if (!isBuzzThemeContext(context)) return scheme.onSurfaceVariant;
return navigationPrimaryForeground(context).withValues(alpha: 0.8);
}
/// Search-field surface for the mobile top navigation.
Color navigationSearchSurface(BuildContext context) {
return context.controlSurface;
}
/// A low-contrast navigation divider derived from the active theme foreground.
Color navigationDivider(BuildContext context, double opacity) =>
navigationPrimaryForeground(context).withValues(alpha: opacity);
/// Buzz renders with its fixed neutral foreground while preserving the stored
/// wire accent so the user's choice returns on another theme.
int effectiveAccentIndex(String themeName, String storedAccent) {
if (isBuzzTheme(themeName)) return neutralAccentIndex;
return accentIndexForWireValue(storedAccent) ?? defaultAccentIndex;
}
/// Gradient stops, matching desktop's `--buzz-gradient-*` custom properties.
const _lightTop = Color(0xFFE6E6B6);
const _lightBottom = Color(0xFFC4D0DA);
const _darkTop = Color(0xFF4A4616);
const _darkBottom = Color(0xFF0A1423);
/// The Buzz gradient for the app's top section, or null when [themeName] is not
/// a Buzz theme — in which case the section keeps its default frosted fill.
///
/// The stops are fully opaque: under Buzz the color replaces the frosted
/// treatment rather than tinting it, matching desktop's solid sidebar canvas.
///
/// [brightness] comes from the applied color scheme rather than the theme name,
/// so System mode picks the right stops as the OS switches.
LinearGradient? buzzTopSectionGradient(
String themeName,
Brightness brightness,
) {
if (!isBuzzTheme(themeName)) return null;
final isDark = brightness == Brightness.dark;
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
isDark ? _darkTop : _lightTop,
isDark ? _darkBottom : _lightBottom,
],
);
}
/// Desktop navigation ink distinguishes read destinations from unread labels.
Color channelNavigationForeground(BuildContext context, {bool unread = false}) {
final dark = Theme.of(context).brightness == Brightness.dark;
return unread
? (dark ? const Color(0xFFFFFFFF) : const Color(0xFF262626))
: (dark ? const Color(0xFFC7C7C7) : const Color(0xFF404040));
}
/// Shared desktop section-heading ink.
Color navigationHeadingForeground(BuildContext context) =>
Theme.of(context).brightness == Brightness.dark
? const Color(0xFFC7C7C7)
: const Color(0xFF525252);
/// Section disclosure controls share the heading's foreground role.
Color navigationAccessoryForeground(BuildContext context) =>
navigationHeadingForeground(context);
/// Muted destinations remain quieter than ordinary rows and section headings.
Color navigationMetadataForeground(BuildContext context) =>
Theme.of(context).brightness == Brightness.dark
? const Color(0xFFA4A4A4)
: const Color(0xFF5F5F5F);