Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions app/lib/themes/card_overlay_colors.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import 'package:flutter/material.dart';

class CardOverlayColors {
CardOverlayColors._();

static const background = Color(0x99000000);

static Color selection(ColorScheme colors) =>
_foreground(colors.brightness == Brightness.light ? colors.primaryContainer : colors.primary);

static Color favorite(ColorScheme colors) =>
_foreground(colors.brightness == Brightness.light ? colors.errorContainer : colors.error);

static Color _foreground(Color preferred) {
// A white cover is the brightest possible backing behind the dark scrim.
// High-contrast and e-ink schemes can supply dark container colors.
final brightestBackground = Color.alphaBlend(background, Colors.white);
final contrast = (preferred.computeLuminance() + 0.05) / (brightestBackground.computeLuminance() + 0.05);

if (contrast >= 3) {
return preferred;
}

return Colors.white;
}
}
5 changes: 3 additions & 2 deletions app/lib/widgets/library/acquisition_placeholder_card.dart
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:papyrus/acquisition/acquisition_models.dart';
import 'package:papyrus/themes/design_tokens.dart';
import 'package:papyrus/themes/card_overlay_colors.dart';
import 'package:papyrus/widgets/library/acquisition_status_text.dart';
import 'package:papyrus/themes/app_motion.dart';
import 'package:papyrus/widgets/shared/app_progress_indicator.dart';
Expand Down Expand Up @@ -187,7 +188,7 @@ class _SelectionIconButton extends StatelessWidget {
final colorScheme = Theme.of(context).colorScheme;

return Material(
color: Colors.black45,
color: CardOverlayColors.background,
borderRadius: BorderRadius.circular(AppRadius.full),
child: InkWell(
borderRadius: BorderRadius.circular(AppRadius.full),
Expand All @@ -197,7 +198,7 @@ class _SelectionIconButton extends StatelessWidget {
child: Icon(
selected ? Icons.check_circle : Icons.radio_button_unchecked,
size: IconSizes.small,
color: selected ? colorScheme.primary : Colors.white,
color: selected ? CardOverlayColors.selection(colorScheme) : Colors.white,
),
),
),
Expand Down
8 changes: 5 additions & 3 deletions app/lib/widgets/library/book_card.dart
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'package:papyrus/models/book.dart';
import 'package:papyrus/providers/book_storage_status_controller.dart';
import 'package:papyrus/providers/enums/library_reading_status.dart';
import 'package:papyrus/themes/design_tokens.dart';
import 'package:papyrus/themes/card_overlay_colors.dart';
import 'package:papyrus/utils/book_actions.dart';
import 'package:papyrus/widgets/book/private_book_cover.dart';
import 'package:papyrus/widgets/library/acquisition_status_text.dart';
Expand Down Expand Up @@ -108,6 +109,7 @@ class _BookCardState extends State<BookCard> {
margin: EdgeInsets.zero,
clipBehavior: Clip.antiAlias,
color: isUnavailable ? colorScheme.surfaceContainerLow : null,
shadowColor: colorScheme.brightness == Brightness.dark ? colorScheme.outline : null,
child: InkWell(
onTap: effectiveTap,
child: Column(
Expand Down Expand Up @@ -140,7 +142,7 @@ class _BookCardState extends State<BookCard> {
child: _CardIconButton(
tooltip: widget.isFavorite ? 'Remove from favorites' : 'Add to favorites',
icon: widget.isFavorite ? Icons.favorite : Icons.favorite_border,
color: widget.isFavorite ? colorScheme.error : Colors.white,
color: widget.isFavorite ? CardOverlayColors.favorite(colorScheme) : Colors.white,
onTap: widget.onToggleFavorite != null
? () => widget.onToggleFavorite!(widget.isFavorite)
: null,
Expand All @@ -157,7 +159,7 @@ class _BookCardState extends State<BookCard> {
? 'Deselect ${widget.book.title}'
: 'Select ${widget.book.title}',
icon: widget.isSelected ? Icons.check_circle : Icons.radio_button_unchecked,
color: widget.isSelected ? colorScheme.primary : Colors.white,
color: widget.isSelected ? CardOverlayColors.selection(colorScheme) : Colors.white,
onTap: widget.onSelectToggle,
),
),
Expand Down Expand Up @@ -466,7 +468,7 @@ class _CardIconButton extends StatelessWidget {
container: true,
button: true,
child: Material(
color: Colors.black45,
color: CardOverlayColors.background,
borderRadius: BorderRadius.circular(AppRadius.full),
child: InkWell(
borderRadius: BorderRadius.circular(AppRadius.full),
Expand Down
1 change: 1 addition & 0 deletions app/lib/widgets/shelves/shelf_card.dart
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ class _ShelfCardState extends State<ShelfCard> {
margin: EdgeInsets.zero,
clipBehavior: Clip.antiAlias,
elevation: AppElevation.level1,
shadowColor: colorScheme.brightness == Brightness.dark ? colorScheme.outline : null,
child: InkWell(
onTap: widget.onTap,
onLongPress: widget.onLongPress,
Expand Down
73 changes: 73 additions & 0 deletions app/test/widgets/library/card_overlay_contrast_test.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:papyrus/acquisition/acquisition_models.dart';
import 'package:papyrus/themes/app_theme.dart';
import 'package:papyrus/widgets/library/acquisition_placeholder_card.dart';
import 'package:papyrus/widgets/library/book_card.dart';

import '../../helpers/test_helpers.dart';

void main() {
final themes = {
'light': AppTheme.light,
'dark': AppTheme.dark,
'high contrast light': AppTheme.highContrastLight,
'high contrast dark': AppTheme.highContrastDark,
'e-ink': AppTheme.eink,
};

final job = AcquisitionJob.fromJson({
'job_id': 'contrast-job',
'title': 'Downloading book',
'status': 'queued',
});

final cards = <String, Widget>{
'favorite': BookCard(book: buildTestBook(), isFavorite: true),
'selected book': BookCard(
book: buildTestBook(),
isFavorite: false,
isSelectionMode: true,
isSelected: true,
),
'selected download': AcquisitionPlaceholderCard(job: job, isSelectionMode: true, isSelected: true),
'unselected book': BookCard(book: buildTestBook(), isFavorite: false, isSelectionMode: true),
'unselected download': AcquisitionPlaceholderCard(job: job, isSelectionMode: true),
};

for (final theme in themes.entries) {
for (final card in cards.entries) {
testWidgets('${card.key} stays visible over cover colors in ${theme.key}', (tester) async {
await tester.pumpWidget(
MaterialApp(
theme: theme.value,
home: Scaffold(
body: SizedBox(width: 200, height: 300, child: card.value),
),
),
);

final icon = switch (card.key) {
'favorite' => Icons.favorite,
'selected book' || 'selected download' => Icons.check_circle,
_ => Icons.radio_button_unchecked,
};

final finder = find.byIcon(icon);
final foreground = tester.widget<Icon>(finder).color!;
final material = tester.widget<Material>(find.ancestor(of: finder, matching: find.byType(Material)).first);

for (final cover in [Colors.white, Colors.black, Colors.red, Colors.green, Colors.blue]) {
final background = Color.alphaBlend(material.color!, cover);
final foregroundLuminance = foreground.computeLuminance();
final backgroundLuminance = background.computeLuminance();
final lighter = foregroundLuminance > backgroundLuminance ? foregroundLuminance : backgroundLuminance;
final darker = foregroundLuminance < backgroundLuminance ? foregroundLuminance : backgroundLuminance;
expect((lighter + 0.05) / (darker + 0.05), greaterThanOrEqualTo(3), reason: 'Cover: $cover');
}

expect(tester.takeException(), isNull);
});
}
}
}
Binary file added docs/images/card-contrast/dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/card-contrast/eink.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/card-contrast/high-contrast-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/card-contrast/light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading