TDS Base Theme

Theme building utilities for the TFN Design System. This package turns a brand's BrandTokens (colours, typography, spacing, shapes) into a complete Material 3 ThemeData plus a curated, strongly typed DesignSystemTheme — so every TFN-branded app derives its Flutter theme from design tokens instead of hand-written styles.

Brand token sets are supplied by the brand theme packages (tds_tfn_theme, tds_kilomita_theme).

Installing

dependencies:
  tds_base_theme: ^0.1.0

Quick start

Wrap your app (or any subtree) with buildDesignSystemTheme. It builds the Material ThemeData from the tokens and sets up the inherited scopes that design system components rely on:

import 'package:flutter/material.dart';
import 'package:tds_base_theme/index.dart';
import 'package:tds_tfn_theme/index.dart';

void main() {
  runApp(
    buildDesignSystemTheme(
      tokens: TfnBrand.tfnBrand,
      child: const MyApp(),
    ),
  );
}

If you only need the ThemeData (for example to pass to MaterialApp.theme), use buildThemeData directly:

MaterialApp(
  theme: buildThemeData(TfnBrand.tfnBrand),
  home: const HomeScreen(),
);

What gets themed

buildThemeData maps the brand tokens onto Material 3:

  • A full ColorScheme (primary/secondary/tertiary, error, surfaces, outlines, inverse)
  • A TextTheme built from the brand typography tokens
  • Component themes: elevated/outlined/text/icon buttons, input decoration, checkbox, radio, app bar, snack bar, card, bottom sheet, drawer, popup menu, expansion tile, dropdown menu, chip, divider, icons and progress indicators
  • Page transitions are disabled via NoTransitionsBuilder for instant navigation

Curated theme access

DesignSystemTheme is a small, opinionated view over the full token set for everyday use:

final theme = DesignSystemThemeScope.of(context);

Container(
  color: theme.colors.surface,
  padding: EdgeInsets.all(theme.spacing.md),
  child: Text('Hello', style: theme.typography.body),
);
  • theme.colors — primary, surface, outline, success/warning/information/error, disabled
  • theme.typography — display, headline, title, body, label, button, caption
  • theme.spacing — xs / sm / md / lg / xl
  • theme.shapes — corner radii from none to fully round
  • theme.tokens — escape hatch to the complete BrandTokens

Use DesignSystemThemeScope.maybeOf(context) when the scope may be absent.

Libraries

design_system_theme
index
theme_base
theme_builder