Skip to content

Commit 3e3af0d

Browse files
ethicnologyethicnology
committed
feat(catalogue): widgetbook v3 catalogue with foundation stories
1 parent a302c47 commit 3e3af0d

5 files changed

Lines changed: 457 additions & 52 deletions

File tree

‎packages/bull_ui_catalogue/CHANGELOG.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Changelog
2+
3+
## Unreleased
4+
5+
- Seed the `bull_ui_catalogue` Widgetbook (v3) app: a use-case per `Bull*`
6+
component, plus a **`Foundation/`** section showcasing Colours, Radius,
7+
Spacing and the text scale.
8+
- Light/dark theme addon (carries the `BullTheme` extension, mirroring how the
9+
app injects it) + a text-scale addon.
10+
- Navigator-less `appBuilder` workaround for the widgetbook-v3 / Flutter-3.44.1
11+
`Navigator._history.isNotEmpty` assertion (the v4 migration is deferred — v4 is
12+
a full authoring-model rewrite).
13+
- Run locally with `make catalogue` (dev-only; never shipped in the app, zero
14+
reproducible-build impact).

‎packages/bull_ui_catalogue/lib/catalogue_theme.dart‎

Lines changed: 90 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -16,52 +16,110 @@ class CatalogueColors {
1616
const CatalogueColors._();
1717

1818
static const BullTheme light = BullTheme(
19-
red: Color(0xFFC50909),
20-
onRed: Color(0xFFFFFFFF),
21-
surface: Color(0xFFFFFFFF),
22-
card: Color(0xFFFFFFFF),
23-
text: Color(0xFF15171C),
24-
muted: Color(0xFF70747D),
25-
info: Color(0xFF0063F7),
26-
success: Color(0xFF34C759),
27-
warning: Color(0xFFFB9300),
28-
btc: Color(0xFFFF9500),
29-
outlineVariant: Color(0xFFE8E8E8),
30-
shimmerBase: Color(0xFFE0E0E0),
31-
shimmerHighlight: Color(0xFFF5F5F5),
19+
primary: Color(0xFFC50909),
20+
onPrimary: Color(0xFFFFFFFF),
21+
primaryFixed: Color(0xFFC50909),
22+
onPrimaryFixed: Color(0xFFFFFFFF),
3223
secondary: Color(0xFF15171C),
3324
onSecondary: Color(0xFFFFFFFF),
25+
secondaryFixed: Color(0xFF15171C),
3426
secondaryFixedDim: Color(0xFFC9CACD),
35-
border: Color(0xFFC9CACD),
27+
onSecondaryFixed: Color(0xFFFFFFFF),
28+
tertiary: Color(0xFFFFCC00),
29+
onTertiary: Color(0xFFFF9500),
30+
tertiaryContainer: Color(0xFFFFF4E6),
31+
background: Color(0xFFF5F5F5),
32+
surface: Color(0xFFFFFFFF),
33+
surfaceContainer: Color(0xFFF5F5F5),
34+
surfaceContainerHighest: Color(0xFFE8E8E8),
35+
surfaceBright: Color(0xFFFFFFFF),
3636
onSurface: Color(0xFF15171C),
3737
onSurfaceVariant: Color(0xFF70747D),
38+
inverseSurface: Color(0xFF15171C),
39+
cardBackground: Color(0xFFFFFFFF),
40+
text: Color(0xFF15171C),
41+
textMuted: Color(0xFF70747D),
42+
border: Color(0xFFC9CACD),
43+
outline: Color(0xFFC9CACD),
44+
outlineVariant: Color(0xFFE8E8E8),
45+
error: Color(0xFFFF3B30),
46+
onError: Color(0xFFFFFFFF),
47+
errorContainer: Color(0xFFFFEBEE),
48+
success: Color(0xFF34C759),
49+
warning: Color(0xFFFB9300),
50+
warningContainer: Color(0xFFFFF4E6),
51+
info: Color(0xFF0063F7),
3852
scrim: Color(0x26000000),
53+
overlay: Color(0x80000000),
54+
transparent: Color(0x00000000),
55+
surfaceFixed: Color(0xFFFFFFFF),
56+
onSurfaceFixed: Color(0xFF15171C),
57+
shimmerBase: Color(0xFFE0E0E0),
58+
shimmerHighlight: Color(0xFFF5F5F5),
3959
);
4060

4161
static const BullTheme dark = BullTheme(
42-
red: Color(0xFFC50909),
43-
onRed: Color(0xFFFFFFFF),
44-
surface: Color(0xFF1C1C1E),
45-
card: Color(0xFF2C2C2E),
46-
text: Color(0xFFFFFFFF),
47-
muted: Color(0xFF8E8E93),
48-
info: Color(0xFF0A84FF),
49-
success: Color(0xFF32D74B),
50-
warning: Color(0xFFFF9F0A),
51-
btc: Color(0xFFFF9F0A),
52-
outlineVariant: Color(0xFF3C3C3E),
53-
shimmerBase: Color(0xFF3C3C3E),
54-
shimmerHighlight: Color(0xFF48484A),
62+
primary: Color(0xFFC50909),
63+
onPrimary: Color(0xFFFFFFFF),
64+
primaryFixed: Color(0xFFC50909),
65+
onPrimaryFixed: Color(0xFFFFFFFF),
5566
secondary: Color(0xFFFFFFFF),
5667
onSecondary: Color(0xFF15171C),
68+
secondaryFixed: Color(0xFF15171C),
5769
secondaryFixedDim: Color(0xFF58585A),
58-
border: Color(0xFF58585A),
70+
onSecondaryFixed: Color(0xFFFFFFFF),
71+
tertiary: Color(0xFFFFCC00),
72+
onTertiary: Color(0xFFFF9F0A),
73+
tertiaryContainer: Color(0xFF3D2D00),
74+
background: Color(0xFF000000),
75+
surface: Color(0xFF1C1C1E),
76+
surfaceContainer: Color(0xFF2C2C2E),
77+
surfaceContainerHighest: Color(0xFF3C3C3E),
78+
surfaceBright: Color(0xFF48484A),
5979
onSurface: Color(0xFFFFFFFF),
6080
onSurfaceVariant: Color(0xFF8E8E93),
81+
inverseSurface: Color(0xFFFFFFFF),
82+
cardBackground: Color(0xFF2C2C2E),
83+
text: Color(0xFFFFFFFF),
84+
textMuted: Color(0xFF8E8E93),
85+
border: Color(0xFF58585A),
86+
outline: Color(0xFF58585A),
87+
outlineVariant: Color(0xFF3C3C3E),
88+
error: Color(0xFFFF453A),
89+
onError: Color(0xFFFFFFFF),
90+
errorContainer: Color(0xFF3D0000),
91+
success: Color(0xFF32D74B),
92+
warning: Color(0xFFFF9F0A),
93+
warningContainer: Color(0xFF3D2D00),
94+
info: Color(0xFF0A84FF),
6195
scrim: Color(0x26000000),
96+
overlay: Color(0x80000000),
97+
transparent: Color(0x00000000),
98+
surfaceFixed: Color(0xFFFFFFFF),
99+
onSurfaceFixed: Color(0xFF15171C),
100+
shimmerBase: Color(0xFF3C3C3E),
101+
shimmerHighlight: Color(0xFF48484A),
62102
);
63103
}
64104

105+
/// Catalogue-local Golos-Text [TextTheme], mirroring the app's `AppFonts`
106+
/// roles so the catalogue renders type at the right sizes/weights. Components
107+
/// read roles via `Theme.of(context).textTheme`, so this is what matters.
108+
const TextTheme _catalogueTextTheme = TextTheme(
109+
displayLarge: TextStyle(fontSize: 46, fontWeight: FontWeight.w500),
110+
displayMedium: TextStyle(fontSize: 43, fontWeight: FontWeight.w500),
111+
displaySmall: TextStyle(fontSize: 28, fontWeight: FontWeight.w500),
112+
headlineLarge: TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
113+
headlineMedium: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
114+
headlineSmall: TextStyle(fontSize: 16),
115+
bodyLarge: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
116+
bodyMedium: TextStyle(fontSize: 14),
117+
bodySmall: TextStyle(fontSize: 14),
118+
labelLarge: TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
119+
labelMedium: TextStyle(fontSize: 12),
120+
labelSmall: TextStyle(fontSize: 10),
121+
);
122+
65123
/// Builds a Material [ThemeData] carrying the [BullTheme] extension, matching
66124
/// how the app wires `bull_ui` (extension on `ThemeData.extensions`). Components
67125
/// read their colours via `context.bull`, so the extension is what matters.
@@ -73,13 +131,14 @@ ThemeData catalogueThemeData(Brightness brightness) {
73131
useMaterial3: true,
74132
brightness: brightness,
75133
fontFamily: 'Golos Text',
134+
textTheme: _catalogueTextTheme,
76135
extensions: [bull],
77136
colorScheme: ColorScheme.fromSeed(
78-
seedColor: bull.red,
137+
seedColor: bull.primary,
79138
brightness: brightness,
80-
primary: bull.red,
139+
primary: bull.primary,
81140
),
82141
scaffoldBackgroundColor: bull.surface,
83-
canvasColor: bull.card,
142+
canvasColor: bull.cardBackground,
84143
);
85144
}

‎packages/bull_ui_catalogue/lib/main.directories.g.dart‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,58 @@
1010
// **************************************************************************
1111

1212
// ignore_for_file: no_leading_underscores_for_library_prefixes
13+
import 'package:bull_ui_catalogue/use_cases/foundation.dart'
14+
as _bull_ui_catalogue_use_cases_foundation;
1315
import 'package:bull_ui_catalogue/use_cases/use_cases.dart'
1416
as _bull_ui_catalogue_use_cases_use_cases;
1517
import 'package:widgetbook/widgetbook.dart' as _widgetbook;
1618

1719
final directories = <_widgetbook.WidgetbookNode>[
20+
_widgetbook.WidgetbookFolder(
21+
name: 'Foundation',
22+
children: [
23+
_widgetbook.WidgetbookComponent(
24+
name: 'FoundationColours',
25+
useCases: [
26+
_widgetbook.WidgetbookUseCase(
27+
name: 'Colours',
28+
builder: _bull_ui_catalogue_use_cases_foundation
29+
.foundationColoursUseCase,
30+
),
31+
],
32+
),
33+
_widgetbook.WidgetbookComponent(
34+
name: 'FoundationRadius',
35+
useCases: [
36+
_widgetbook.WidgetbookUseCase(
37+
name: 'Radius',
38+
builder:
39+
_bull_ui_catalogue_use_cases_foundation.foundationRadiusUseCase,
40+
),
41+
],
42+
),
43+
_widgetbook.WidgetbookComponent(
44+
name: 'FoundationSpacing',
45+
useCases: [
46+
_widgetbook.WidgetbookUseCase(
47+
name: 'Spacing',
48+
builder: _bull_ui_catalogue_use_cases_foundation
49+
.foundationSpacingUseCase,
50+
),
51+
],
52+
),
53+
_widgetbook.WidgetbookComponent(
54+
name: 'FoundationTextStyles',
55+
useCases: [
56+
_widgetbook.WidgetbookUseCase(
57+
name: 'TextStyles',
58+
builder: _bull_ui_catalogue_use_cases_foundation
59+
.foundationTextStylesUseCase,
60+
),
61+
],
62+
),
63+
],
64+
),
1865
_widgetbook.WidgetbookFolder(
1966
name: 'buttons',
2067
children: [

0 commit comments

Comments
 (0)