TDS TFN Theme

The TFN brand theme for the TFN Design System. It packages the Figma-generated TFN token set — colour primitives, semantic colours, component colours and brand assets — as a ready-to-use BrandTokens instance, combined with the design system's shared spacing, shapes and typography.

Installing

dependencies:
  tds_tfn_theme: ^0.1.0

Usage

The single entry point is TfnBrand.tfnBrand. Hand it to tds_base_theme to theme your whole app:

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(),
    ),
  );
}

Or provide the tokens directly with BrandThemeScope from tfn_design_system:

BrandThemeScope(
  tokens: TfnBrand.tfnBrand,
  child: const MyApp(),
);

What's inside

Class Contents
TfnBrand tfnBrand — the assembled BrandTokens for the TFN brand
TfnColourPrimitivesTokens Raw TFN colour palette primitives
TfnColourTokens Semantic colours (primary, surface, error, success, …)
TfnComponentColourTokens Per-component colours (buttons, inputs, chips, …)
TfnBrandAssets Brand asset paths — logo, auth logo, navbar logo, banner

Spacing, shapes and typography come from the design system's shared base tokens (BaseSpacing, BaseShapes, BaseTextStyles), so only brand-specific values live here.

Libraries

index
tfn_brand
tfn_brand_assets
tfn_colour
tfn_colour_primitives
tfn_component_colour