resolveFluentPresenceBadgeStyle function
FluentPresenceBadgeStyle
resolveFluentPresenceBadgeStyle(
- FluentPresenceBadgeState state,
- 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/Restin office butStatus/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),
);
}