NebuxTypography

Overview

The NebuxTypography class defines the complete typography system for the NebuX Design System. It provides semantic text styles for all UI elements including headings, paragraphs, captions, labels, actions, and form inputs. Built with Freezed and integrated with Google Fonts (Montserrat by default), it provides a Material Design 3 aligned type scale with proper line heights and letter spacing. Source: lib/src/core/theme/typography/nebux_typography.dart

Class Definition

@Freezed(fromJson: false, toJson: false)
abstract class NebuxTypography with _$NebuxTypography

Properties

All text styles include explicit height (line-height multiplier) and letterSpacing values aligned with Material Design 3.

Content Text Styles

content

TextStyle

required

Style for main content text (e.g., articles, descriptions)Font size: 12pxFont weight: 400 (Regular)Line height: 1.4Letter spacing: 0.0

paragraph

TextStyle

required

Style for regular paragraph text (e.g., default content, paragraphs)Font size: 14pxFont weight: 400 (Regular)Line height: 1.5Letter spacing: 0.15

caption

TextStyle

required

Style for small supporting text (e.g., captions, metadata)Font size: 10pxFont weight: 400 (Regular)Line height: 1.3Letter spacing: 0.1

Heading Styles

heading

TextStyle

required

Style for main headings (e.g., page titles, primary headers)Font size: 18pxFont weight: 600 (SemiBold)Line height: 1.2Letter spacing: -0.5

section

TextStyle

required

Style for section headers (e.g., content sections)Font size: 14pxFont weight: 500 (Medium)Line height: 1.25Letter spacing: -0.25

Label Styles

label

TextStyle

required

Style for small labels (e.g., timestamps, status indicators)Font size: 10pxFont weight: 500 (Medium)Line height: 1.3Letter spacing: 0.1

Action Styles

primaryAction

TextStyle

required

Style for primary action buttonsFont size: 14pxFont weight: 700 (Bold)Line height: 1.2Letter spacing: 0.5

secondaryAction

TextStyle

required

Style for secondary action buttonsFont size: 14pxFont weight: 600 (SemiBold)Line height: 1.2Letter spacing: 0.5

Form Input Styles

formInput

TextStyle

required

Style for form input text fieldsFont size: 14pxFont weight: 400 (Regular)Line height: 1.4Letter spacing: 0.15

placeholder

TextStyle

required

Style for placeholder text in inputsFont size: 14pxFont weight: 400 (Regular)Font style: ItalicLine height: 1.4Letter spacing: 0.15

Constructors

NebuxTypography (default)

Creates a new NebuxTypography instance with all text style properties.

const factory NebuxTypography({
  required TextStyle content,
  required TextStyle paragraph,
  required TextStyle caption,
  required TextStyle heading,
  required TextStyle section,
  required TextStyle label,
  required TextStyle primaryAction,
  required TextStyle secondaryAction,
  required TextStyle formInput,
  required TextStyle placeholder,
})

Factory Constructors

standard

Creates a standard set of text styles using Google Fonts Montserrat with Material Design 3 type scale.

factory NebuxTypography.standard()

Each TextStyle includes:

Google Fonts Montserrat font family
Appropriate font size from NebuxFontSize.standard()
Explicit height (line-height multiplier)
letterSpacing values aligned with Material Design 3

Example

final typography = NebuxTypography.standard();
Text(
  'Hello World',
  style: typography.heading,
);

custom

Creates a NebuxTypography instance with a custom font family and package.

factory NebuxTypography.custom(String fontFamily, String? package)

fontFamily

String

required

The custom font family name to use for all text styles

package

String

Optional package name if the font is bundled in a package

All text styles use the same font sizes, weights, line heights, and letter spacing as the standard typography.

Example

final customTypography = NebuxTypography.custom('Roboto', null);

fromThemeData

Creates NebuxTypography from a Material ThemeData. Maps Material’s TextTheme to NebuX typography roles.

factory NebuxTypography.fromThemeData(ThemeData themeData)

themeData

ThemeData

required

The Material ThemeData to extract text styles from

Show Material TextTheme → NebuX Typography Mapping

heading ← headlineMedium (page titles, primary headers)
section ← titleLarge (section headers)
content ← bodyLarge (articles, descriptions)
paragraph ← bodyMedium (default body text)
caption ← bodySmall (captions, metadata)
label ← labelLarge (small labels, status)
primaryAction ← labelLarge with FontWeight.w700
secondaryAction ← labelLarge with FontWeight.w600
formInput ← bodyMedium (input text)
placeholder ← bodyMedium with FontStyle.italic

Example

final materialTheme = ThemeData.light();
final typography = NebuxTypography.fromThemeData(materialTheme);

withOverrides

Creates a custom NebuxTypography with individual TextStyle overrides. All parameters are optional.

factory NebuxTypography.withOverrides({
  TextStyle? content,
  TextStyle? paragraph,
  TextStyle? caption,
  TextStyle? heading,
  TextStyle? section,
  TextStyle? label,
  TextStyle? primaryAction,
  TextStyle? secondaryAction,
  TextStyle? formInput,
  TextStyle? placeholder,
  NebuxTypography? base,
})

content

TextStyle

Optional override for content text style

paragraph

TextStyle

Optional override for paragraph text style

caption

TextStyle

Optional override for caption text style

heading

TextStyle

Optional override for heading text style

section

TextStyle

Optional override for section text style

label

TextStyle

Optional override for label text style

primaryAction

TextStyle

Optional override for primary action text style

secondaryAction

TextStyle

Optional override for secondary action text style

formInput

TextStyle

Optional override for form input text style

placeholder

TextStyle

Optional override for placeholder text style

base

NebuxTypography

Optional base typography to start from. Defaults to NebuxTypography.standard() if not provided. Useful in tests to avoid Google Fonts network calls.

Example

final customTypography = NebuxTypography.withOverrides(
  heading: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
  paragraph: TextStyle(
    fontSize: 16,
  ),
);

Instance Methods

copyWith

Creates a copy with optional property overrides. Generated by Freezed.

NebuxTypography copyWith({
  TextStyle? content,
  TextStyle? paragraph,
  TextStyle? caption,
  TextStyle? heading,
  TextStyle? section,
  TextStyle? label,
  TextStyle? primaryAction,
  TextStyle? secondaryAction,
  TextStyle? formInput,
  TextStyle? placeholder,
})

Example

final original = NebuxTypography.standard();
final modified = original.copyWith(
  heading: original.heading.copyWith(
    color: Colors.blue,
    fontSize: 20,
  ),
);

merge

Merges this typography scheme with another NebuxTypography. Styles from the other typography take precedence.

NebuxTypography merge(NebuxTypography? other)

other

NebuxTypography

The typography to merge with. If null, returns this instance unchanged.

Example

final baseTypography = NebuxTypography.standard();
final overrideTypography = NebuxTypography.withOverrides(
  heading: TextStyle(fontSize: 24),
);

final merged = baseTypography.merge(overrideTypography);
// merged.heading will have fontSize 24, other styles from baseTypography

Usage Examples

Basic Text Styling

class TypographyExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final typography = NebuxTypography.standard();
    
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Page Title', style: typography.heading),
        SizedBox(height: 16),
        Text('Section Header', style: typography.section),
        SizedBox(height: 8),
        Text(
          'This is a paragraph with regular body text. '
          'It uses the paragraph style with appropriate '
          'line height and letter spacing.',
          style: typography.paragraph,
        ),
        SizedBox(height: 8),
        Text(
          'This is caption text for metadata',
          style: typography.caption,
        ),
      ],
    );
  }
}

Button Text Styling

class ButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final typography = NebuxTypography.standard();
    final colors = NebuxColors.standardLight();
    
    return Column(
      children: [
        ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            backgroundColor: colors.actionPrimary,
          ),
          child: Text(
            'Primary Action',
            style: typography.primaryAction.copyWith(
              color: colors.white,
            ),
          ),
        ),
        SizedBox(height: 8),
        OutlinedButton(
          onPressed: () {},
          child: Text(
            'Secondary Action',
            style: typography.secondaryAction.copyWith(
              color: colors.actionSecondary,
            ),
          ),
        ),
      ],
    );
  }
}

Form Input Styling

class FormExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final typography = NebuxTypography.standard();
    final colors = NebuxColors.standardLight();
    
    return TextField(
      style: typography.formInput.copyWith(
        color: colors.textPrimary,
      ),
      decoration: InputDecoration(
        labelText: 'Email',
        labelStyle: typography.label.copyWith(
          color: colors.textSecondary,
        ),
        hintText: 'Enter your email',
        hintStyle: typography.placeholder.copyWith(
          color: colors.textSecondary,
        ),
      ),
    );
  }
}

Custom Font Family

class CustomFontExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Use Roboto instead of Montserrat
    final typography = NebuxTypography.custom('Roboto', null);
    
    return Text(
      'Custom Font Family',
      style: typography.heading,
    );
  }
}

Using with NebuxTheme

class ThemeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final nebuxTheme = Theme.of(context).extension<NebuxTheme>()!;
    final typography = nebuxTheme.typography;
    
    return Column(
      children: [
        Text(
          'Themed Heading',
          style: typography.heading.copyWith(
            color: nebuxTheme.colors.textPrimary,
          ),
        ),
        Text(
          'Themed paragraph text.',
          style: typography.paragraph.copyWith(
            color: nebuxTheme.colors.textPrimary,
          ),
        ),
      ],
    );
  }
}

Typography with Color Variations

class ColoredTypography extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final typography = NebuxTypography.standard();
    final colors = NebuxColors.standardLight();
    
    return Column(
      children: [
        Text(
          'Primary Text',
          style: typography.heading.copyWith(color: colors.textPrimary),
        ),
        Text(
          'Secondary Text',
          style: typography.paragraph.copyWith(color: colors.textSecondary),
        ),
        Text(
          'Success Message',
          style: typography.label.copyWith(color: colors.success),
        ),
        Text(
          'Error Message',
          style: typography.label.copyWith(color: colors.error),
        ),
      ],
    );
  }
}

Responsive Typography

class ResponsiveTypography extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final typography = NebuxTypography.standard();
    final screenWidth = MediaQuery.of(context).size.width;
    
    // Scale font sizes for larger screens
    final scale = screenWidth > 600 ? 1.2 : 1.0;
    
    return Text(
      'Responsive Text',
      style: typography.heading.copyWith(
        fontSize: typography.heading.fontSize! * scale,
      ),
    );
  }
}

Typography Hierarchy

Recommended usage for each text style:

Style	Use Cases	Font Size	Weight
`heading`	Page titles, main headers, screen titles	18px	600
`section`	Section headers, card titles, dialog titles	14px	500
`paragraph`	Body text, descriptions, default content	14px	400
`content`	Dense text, list items, secondary content	12px	400
`caption`	Metadata, timestamps, supporting text	10px	400
`label`	Small labels, badges, status indicators	10px	500
`primaryAction`	Primary buttons, main CTAs	14px	700
`secondaryAction`	Secondary buttons, tertiary actions	14px	600
`formInput`	Text field content, user input	14px	400
`placeholder`	Input placeholders, hints	14px	400 (italic)

Theme

Components

Configuration

Utilities

Overview

Class Definition

Properties

Content Text Styles

Heading Styles

Label Styles

Action Styles

Form Input Styles

Constructors

NebuxTypography (default)

Factory Constructors

standard

Example

custom

Example

fromThemeData

Example

withOverrides

Example

Instance Methods

copyWith

Example

merge

Example

Usage Examples

Basic Text Styling

Button Text Styling

Form Input Styling

Custom Font Family

Using with NebuxTheme

Typography with Color Variations

Responsive Typography

Typography Hierarchy

See Also

Theme

Components

Configuration

Utilities

Documentation Index

​Overview

​Class Definition

​Properties

​Content Text Styles

​Heading Styles

​Label Styles

​Action Styles

​Form Input Styles

​Constructors

​NebuxTypography (default)

​Factory Constructors

​standard

​Example

​custom

​Example

​fromThemeData

​Example

​withOverrides

​Example

​Instance Methods

​copyWith

​Example

​merge

​Example

​Usage Examples

​Basic Text Styling

​Button Text Styling

​Form Input Styling

​Custom Font Family

​Using with NebuxTheme

​Typography with Color Variations

​Responsive Typography

​Typography Hierarchy

​See Also

Overview

Class Definition

Properties

Content Text Styles

Heading Styles

Label Styles

Action Styles

Form Input Styles

Constructors

NebuxTypography (default)

Factory Constructors

standard

Example

custom

Example

fromThemeData

Example

withOverrides

Example

Instance Methods

copyWith

Example

merge

Example

Usage Examples

Basic Text Styling

Button Text Styling

Form Input Styling

Custom Font Family

Using with NebuxTheme

Typography with Color Variations

Responsive Typography

Typography Hierarchy

See Also