resolveFluentPresenceBadgeStyle function

FluentPresenceBadgeStyle resolveFluentPresenceBadgeStyle(
  1. FluentPresenceBadgeState state,
  2. FluentThemeData theme
)

Resolves the default style for state against theme.

The second of the three-function recomposition contract, and the only one that reads the design axes.

The colour mapping is worth reading rather than skimming, because three of the eight statuses do not use the token their name suggests:

  • Away takes Status/Away/Background/3/Rest in office but Status/Oof/Foreground/3/Rest — berry, not marigold — out of office.
  • Blocked, busy, do not disturb and unknown all take Status/Danger/Background/3/Rest. Unknown being red is Figma's reading; React uses a neutral there.
  • Offline is the only neutral one.

Implementation

FluentPresenceBadgeStyle resolveFluentPresenceBadgeStyle(
  FluentPresenceBadgeState state,
  FluentThemeData theme,
) {
  final c = theme.colors;

  final glyphColor = switch (state.status) {
    FluentPresenceStatus.available => c.statusAvailableForeground3,
    FluentPresenceStatus.away =>
      state.outOfOffice ? c.statusOofForeground3 : c.statusAwayBackground3,
    FluentPresenceStatus.busy ||
    FluentPresenceStatus.doNotDisturb ||
    FluentPresenceStatus.blocked ||
    FluentPresenceStatus.unknown => c.statusDangerBackground3,
    FluentPresenceStatus.offline => c.neutralForeground3,
    FluentPresenceStatus.outOfOffice => c.statusOofForeground3,
  };

  final diameter = switch (state.size) {
    FluentPresenceBadgeSize.tiny => 6.0,
    FluentPresenceBadgeSize.extraSmall => FluentSize.size100,
    FluentPresenceBadgeSize.small => FluentSize.size120,
    FluentPresenceBadgeSize.medium => FluentSize.size160,
    FluentPresenceBadgeSize.large => FluentSize.size200,
    FluentPresenceBadgeSize.extraLarge => FluentSize.size280,
  };

  return FluentPresenceBadgeStyle(
    backgroundColor: FluentStateColor.tokens(rest: c.neutralBackground1),
    foregroundColor: FluentStateColor.tokens(rest: glyphColor),
    borderColor: FluentStateColor.tokens(rest: c.neutralBackground1),
    borderWidth: WidgetStatePropertyAll<double?>(
      state.size == FluentPresenceBadgeSize.tiny
          ? FluentStroke.thin
          : FluentStroke.thick,
    ),
    diameter: WidgetStatePropertyAll<double?>(diameter),
  );
}