150 lines
4.7 KiB
Dart
150 lines
4.7 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:moonwell_launcher/app/design_system/mw_primitives.dart';
|
|
import 'package:moonwell_launcher/app/design_system/mw_shells.dart';
|
|
import 'package:moonwell_launcher/app/theme/moonwell_design_system.dart';
|
|
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
|
|
|
|
class FoundationsGallery extends StatelessWidget {
|
|
const FoundationsGallery({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final tokens = MoonWellDesignTokens.of(context);
|
|
final colors = <String, Color>{
|
|
'Background': tokens.background,
|
|
'Surface low': tokens.surfaceLow,
|
|
'Surface': tokens.surface,
|
|
'Surface high': tokens.surfaceHigh,
|
|
'Accent': tokens.accent,
|
|
'Accent muted': tokens.accentMuted,
|
|
'Success': tokens.success,
|
|
'Warning': tokens.warning,
|
|
'Error': Theme.of(context).colorScheme.error,
|
|
};
|
|
return SingleChildScrollView(
|
|
padding: const EdgeInsets.all(24),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Semantic colors',
|
|
style: Theme.of(context).textTheme.titleLarge,
|
|
),
|
|
const SizedBox(height: 12),
|
|
Wrap(
|
|
spacing: 12,
|
|
runSpacing: 12,
|
|
children: [
|
|
for (final entry in colors.entries)
|
|
SizedBox(
|
|
width: 144,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
height: 72,
|
|
decoration: BoxDecoration(
|
|
color: entry.value,
|
|
border: Border.all(color: Colors.white24),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
const SizedBox(height: 6),
|
|
Text(entry.key),
|
|
MwStatusText(
|
|
text:
|
|
'#${entry.value.toARGB32().toRadixString(16).substring(2).toUpperCase()}',
|
|
monospace: true,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 32),
|
|
Text('Typography', style: Theme.of(context).textTheme.titleLarge),
|
|
const SizedBox(height: 12),
|
|
Text(
|
|
'MoonWell',
|
|
style: TextStyle(
|
|
fontFamily: tokens.brandFontFamily,
|
|
fontSize: 32,
|
|
letterSpacing: 2,
|
|
),
|
|
),
|
|
Text(
|
|
'Лунный колодец зовёт героев Нордскола',
|
|
style: Theme.of(context).textTheme.headlineMedium,
|
|
),
|
|
const Text('Интерфейс, формы, навигация и рабочие статусы'),
|
|
MwStatusText(
|
|
text: 'build a93fd1c2 · 12.4 MB/s · 00:01:42',
|
|
monospace: true,
|
|
),
|
|
const SizedBox(height: 32),
|
|
Text(
|
|
'Surfaces & radii',
|
|
style: Theme.of(context).textTheme.titleLarge,
|
|
),
|
|
const SizedBox(height: 12),
|
|
const Row(
|
|
children: [
|
|
Expanded(
|
|
child: MwPanel(level: MwPanelLevel.low, child: Text('Low')),
|
|
),
|
|
SizedBox(width: 12),
|
|
Expanded(child: MwPanel(child: Text('Regular'))),
|
|
SizedBox(width: 12),
|
|
Expanded(
|
|
child: MwPanel(level: MwPanelLevel.high, child: Text('High')),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
@widgetbook.UseCase(
|
|
name: 'default',
|
|
type: FoundationsGallery,
|
|
path: '[Foundations]',
|
|
)
|
|
Widget buildFoundationsGalleryUseCase(BuildContext context) {
|
|
return const FoundationsGallery();
|
|
}
|
|
|
|
class ArtworkSlot extends StatelessWidget {
|
|
const ArtworkSlot({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Stack(
|
|
fit: StackFit.expand,
|
|
children: [
|
|
Image.asset(
|
|
'assets/background.png',
|
|
package: 'moonwell_launcher',
|
|
fit: BoxFit.cover,
|
|
),
|
|
const DecoratedBox(
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [Color(0x22000000), Color(0xEE000000)],
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
),
|
|
),
|
|
),
|
|
const Center(child: MwBrandMark(width: 240)),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
@widgetbook.UseCase(name: 'default', type: ArtworkSlot, path: '[Foundations]')
|
|
Widget buildArtworkSlotUseCase(BuildContext context) {
|
|
return const ArtworkSlot();
|
|
}
|