mirror of
https://github.com/block/buzz.git
synced 2026-11-01 15:01:12 +00:00
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 |
|---|---|
| 
| 
|
---------
Signed-off-by: kenny lopez <klopez4212@gmail.com>
Co-authored-by: Terp <5856f6900e8e0a4e0ea1f4f8d2ee33e4753d2119bc122f94ecafc660b46c0511@buzz.block.builderlab.xyz>
127 lines
5.3 KiB
Dart
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);
|