feat(bull_ui): design-system package with official-theme foundation tokens

Author: ethicnology

lib/core/themes/app_theme.dart

@@ -11,26 +11,46 @@ enum AppThemeType { light, dark }
 /// palette per brightness, so `AppColors` stays the single source of truth.
 BullTheme _bullThemeFrom(AppColors colors) {
   return BullTheme(
-    red: colors.primary,
-    onRed: colors.onPrimary,
-    surface: colors.surface,
-    card: colors.cardBackground,
-    text: colors.text,
-    muted: colors.textMuted,
-    info: colors.info,
-    success: colors.success,
-    warning: colors.warning,
-    btc: colors.onTertiary,
-    outlineVariant: colors.outlineVariant,
-    shimmerBase: colors.shimmerBase,
-    shimmerHighlight: colors.shimmerHighlight,
+    primary: colors.primary,
+    onPrimary: colors.onPrimary,
+    primaryFixed: colors.primaryFixed,
+    onPrimaryFixed: colors.onPrimaryFixed,
     secondary: colors.secondary,
     onSecondary: colors.onSecondary,
+    secondaryFixed: colors.secondaryFixed,
     secondaryFixedDim: colors.secondaryFixedDim,
-    border: colors.border,
+    onSecondaryFixed: colors.onSecondaryFixed,
+    tertiary: colors.tertiary,
+    onTertiary: colors.onTertiary,
+    tertiaryContainer: colors.tertiaryContainer,
+    background: colors.background,
+    surface: colors.surface,
+    surfaceContainer: colors.surfaceContainer,
+    surfaceContainerHighest: colors.surfaceContainerHighest,
+    surfaceBright: colors.surfaceBright,
     onSurface: colors.onSurface,
     onSurfaceVariant: colors.onSurfaceVariant,
+    inverseSurface: colors.inverseSurface,
+    cardBackground: colors.cardBackground,
+    text: colors.text,
+    textMuted: colors.textMuted,
+    border: colors.border,
+    outline: colors.outline,
+    outlineVariant: colors.outlineVariant,
+    error: colors.error,
+    onError: colors.onError,
+    errorContainer: colors.errorContainer,
+    success: colors.success,
+    warning: colors.warning,
+    warningContainer: colors.warningContainer,
+    info: colors.info,
     scrim: colors.scrim,
+    overlay: colors.overlay,
+    transparent: colors.transparent,
+    surfaceFixed: colors.surfaceFixed,
+    onSurfaceFixed: colors.onSurfaceFixed,
+    shimmerBase: colors.shimmerBase,
+    shimmerHighlight: colors.shimmerHighlight,
   );
 }
 

packages/bull_ui/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+- **Foundation tokens now follow the design system / official theme.** `BullTheme`
+  is the full 1:1 `AppColors` mirror (all ~40 fields, official names); `BullRadius`
+  adopts the design scale (`0/4/8/12/16/28/32/999`) and `BullSpacing` the design
+  scale (`0/4/8/12/16/24/32/48/64`); `BullTextStyles` is **removed** — type comes
+  from the Material `TextTheme` (`AppFonts`). All `Bull*` components were remapped
+  (`context.bull.red→primary`, `btc→onTertiary`, `muted→textMuted`,
+  `card→cardBackground`, radius/spacing → new scales). Tokens are fixed (not
+  screen-scaled); responsiveness is a layout concern.
+- `BullSwipeAction` action panel wrapped in `FittedBox(scaleDown)` so the
+  icon+label never overflows a short row.
+
 - Expand `BullTheme` with `secondary`, `onSecondary`, `secondaryFixedDim`,
   `border`, `onSurface`, `onSurfaceVariant` and `scrim` (plus `copyWith`/`lerp`
   and the app-side `_bullThemeFrom` builder), sourced from `AppColors`.

packages/bull_ui/README.md

@@ -14,11 +14,25 @@ feature-by-feature in later scoped PRs as usages migrate. Nothing is moved or re
 `bull_ui` is **brightness-agnostic** and never hardcodes a colour. The app injects the
 palette: it builds a `BullTheme` (a `ThemeExtension`) from `AppColors.light` and another
 from `AppColors.dark`, and registers each on the matching `ThemeData` via `extensions:`.
-Components read colours through `context.bull` (e.g. `context.bull.red`); derived fills use
-`tokenColor.withValues(alpha: …)` so they adapt to both light and dark automatically.
+Components read colours through `context.bull` (e.g. `context.bull.primary`). `BullTheme` is a
+**1:1 mirror of the app's `AppColors`** — same field names — so the app wires every field through
+without translation. Derived fills use `tokenColor.withValues(alpha: …)` so they adapt to both
+light and dark automatically.
 
-Brightness-invariant tokens (radii, spacing, type over Golos Text) are static consts:
-`BullRadius`, `BullSpacing`, `BullTextStyles`. Icons are wrapped via `BullIcon(BullIcons.…)`.
+## Foundation tokens
+
+Brightness-invariant tokens are static consts, from the design system:
+
+- **`BullRadius`** — `zero·xs·sm·md·lg·xl·xxl·full` = `0·4·8·12·16·28·32·999`.
+- **`BullSpacing`** — `zero·xxs·xs·sm·md·lg·xl·xxl·xxxl` = `0·4·8·12·16·24·32·48·64`.
+- **Type** comes from the Material `TextTheme` (`Theme.of(context).textTheme`, sourced from
+  `AppFonts`) — there is no separate text-token class.
+- **Icons** via `BullIcon(BullIcons.…)`.
+
+**Tokens are fixed — never scaled by screen size.** Responsiveness is a *layout* concern
+(breakpoints, `LayoutBuilder`, max-width wrappers, adaptive columns), not a token concern; text
+already honours the user's `MediaQuery.textScaler`. The catalogue (`packages/bull_ui_catalogue`)
+has a `Foundation/` section showcasing colours, radius, spacing and the text scale.
 
 Fonts (Golos Text, Bebas Neue) are declared at the app root and resolve by family name
 across the workspace — `bull_ui` references them by name and does not re-ship the `.ttf`s.

packages/bull_ui/lib/src/buttons/bull_button.dart

@@ -91,7 +91,7 @@ class BullButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final radius = BorderRadius.circular(BullRadius.button);
+    final radius = BorderRadius.circular(BullRadius.xs);
 
     final image = iconData != null
         ? Icon(iconData, size: 20, color: textColor)
@@ -102,7 +102,7 @@ class BullButton extends StatelessWidget {
         label,
         maxLines: 1,
         overflow: TextOverflow.ellipsis,
-        style: textStyle ?? BullTextStyles.title,
+        style: textStyle ?? Theme.of(context).textTheme.headlineMedium,
         color: textColor,
       ),
     );

packages/bull_ui/lib/src/buttons/bull_tab_menu_vertical_button.dart

@@ -1,6 +1,5 @@
 import 'package:bull_ui/src/data_display/bull_text.dart';
 import 'package:bull_ui/src/theme/bull_theme.dart';
-import 'package:bull_ui/src/theme/bull_tokens.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 
@@ -49,7 +48,7 @@ class BullTabMenuVerticalButton extends StatelessWidget {
               const Gap(8),
               BullText(
                 title,
-                style: BullTextStyles.title.copyWith(
+                style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                   fontWeight: FontWeight.w700,
                 ),
               ),

packages/bull_ui/lib/src/buttons/bull_tool_button.dart

@@ -35,8 +35,8 @@ class BullToolButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final colors = context.bull;
-    final fg = primary ? colors.onRed : colors.text;
-    final bg = primary ? colors.red : colors.muted.withValues(alpha: 0.12);
+    final fg = primary ? colors.onPrimary : colors.text;
+    final bg = primary ? colors.primary : colors.textMuted.withValues(alpha: 0.12);
 
     return Semantics(
       button: true,
@@ -50,9 +50,11 @@ class BullToolButton extends StatelessWidget {
             onTap: onPressed,
             child: Container(
               height: 56,
+              constraints: const BoxConstraints(minWidth: 72),
+              padding: const EdgeInsets.symmetric(horizontal: BullSpacing.sm),
               decoration: BoxDecoration(
                 color: bg,
-                borderRadius: BorderRadius.circular(BullRadius.small),
+                borderRadius: BorderRadius.circular(BullRadius.xs),
               ),
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
@@ -61,9 +63,9 @@ class BullToolButton extends StatelessWidget {
                   const SizedBox(height: 4),
                   Text(
                     label,
-                    style: BullTextStyles.pill.copyWith(
+                    style: Theme.of(context).textTheme.labelLarge?.copyWith(
+                      fontWeight: FontWeight.w600,
                       color: fg,
-                      fontSize: 11.5,
                     ),
                   ),
                 ],

packages/bull_ui/lib/src/buttons/bull_viewer_action_button.dart

@@ -1,6 +1,5 @@
 import 'package:bull_ui/src/data_display/bull_text.dart';
 import 'package:bull_ui/src/theme/bull_theme.dart';
-import 'package:bull_ui/src/theme/bull_tokens.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 
@@ -39,11 +38,11 @@ class BullViewerActionButton extends StatelessWidget {
           child: Row(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
-              Icon(icon, size: 14, color: colors.red),
+              Icon(icon, size: 14, color: colors.primary),
               const Gap(4),
               BullText(
                 label,
-                style: BullTextStyles.body,
+                style: Theme.of(context).textTheme.bodyMedium,
                 color: colors.secondary,
               ),
             ],

packages/bull_ui/lib/src/chrome/bull_selection_action_bar.dart

@@ -36,20 +36,20 @@ class BullSelectionActionBar extends StatelessWidget {
       child: SafeArea(
         top: false,
         child: Padding(
-          padding: const EdgeInsets.fromLTRB(12, 10, 12, 22),
+          padding: const EdgeInsets.fromLTRB(12, 8, 12, 24),
           child: Column(
             mainAxisSize: MainAxisSize.min,
             crossAxisAlignment: CrossAxisAlignment.stretch,
             children: [
               Text(
                 summary,
-                style: BullTextStyles.bodyEmphasis.copyWith(color: colors.text),
+                style: Theme.of(context).textTheme.bodyLarge?.copyWith(fontWeight: FontWeight.w600, color: colors.text),
               ),
-              const SizedBox(height: 10),
+              const SizedBox(height: 8),
               Row(
                 children: [
                   for (var i = 0; i < actions.length; i++) ...[
-                    if (i > 0) const SizedBox(width: BullSpacing.s),
+                    if (i > 0) const SizedBox(width: BullSpacing.xs),
                     Expanded(child: actions[i]),
                   ],
                 ],

packages/bull_ui/lib/src/chrome/bull_top_bar.dart

@@ -1,6 +1,5 @@
 import 'package:bull_ui/src/theme/bull_icon.dart';
 import 'package:bull_ui/src/theme/bull_theme.dart';
-import 'package:bull_ui/src/theme/bull_tokens.dart';
 import 'package:flutter/material.dart';
 
 /// Top bar — back button + centered title + an optional trailing action.
@@ -58,7 +57,7 @@ class BullTopBar extends StatelessWidget {
               alignment: Alignment.bottomCenter,
               child: Text(
                 title,
-                style: BullTextStyles.title.copyWith(color: colors.text),
+                style: Theme.of(context).textTheme.headlineMedium?.copyWith(color: colors.text),
               ),
             ),
           ),
@@ -81,7 +80,7 @@ class BullTopBar extends StatelessWidget {
                       width: 8,
                       height: 8,
                       decoration: BoxDecoration(
-                        color: colors.red,
+                        color: colors.primary,
                         shape: BoxShape.circle,
                       ),
                     ),

packages/bull_ui/lib/src/controls/bull_segmented.dart

@@ -44,7 +44,7 @@ class _BullSegmentedState extends State<BullSegmented> {
     final colors = context.bull;
     return Center(
       child: ClipRRect(
-        borderRadius: BorderRadius.circular(BullRadius.button),
+        borderRadius: BorderRadius.circular(BullRadius.xs),
         clipBehavior: Clip.antiAliasWithSaveLayer,
         child: CustomSlidingSegmentedControl<String>(
           initialValue: widget.initialValue ?? widget.items.first,
@@ -59,27 +59,27 @@ class _BullSegmentedState extends State<BullSegmented> {
           isStretch: true,
           customSegmentSettings: CustomSegmentSettings(),
           decoration: BoxDecoration(
-            color: colors.muted.withValues(alpha: 0.1),
-            borderRadius: BorderRadius.circular(BullRadius.button),
+            color: colors.textMuted.withValues(alpha: 0.1),
+            borderRadius: BorderRadius.circular(BullRadius.xs),
           ),
           thumbDecoration: BoxDecoration(
             color: colors.surface,
-            borderRadius: BorderRadius.circular(BullRadius.button),
+            borderRadius: BorderRadius.circular(BullRadius.xs),
           ),
           children: {
             for (final item in widget.items)
               item: Text(
                 item,
                 style: item == selectedSegment
-                    ? BullTextStyles.label.copyWith(
+                    ? Theme.of(context).textTheme.labelMedium?.copyWith(
                         fontWeight: FontWeight.w500,
-                        color: colors.red,
+                        color: colors.primary,
                       )
                     : widget.disabledItems.contains(item)
-                    ? BullTextStyles.label.copyWith(
-                        color: colors.muted.withValues(alpha: 0.5),
+                    ? Theme.of(context).textTheme.labelMedium?.copyWith(
+                        color: colors.textMuted.withValues(alpha: 0.5),
                       )
-                    : BullTextStyles.label.copyWith(color: colors.text),
+                    : Theme.of(context).textTheme.labelMedium?.copyWith(color: colors.text),
               ),
           },
         ),