@tcn/ui-typography

A comprehensive typography system that provides consistent text components with proper semantic markup, accessibility features, and design system integration for React applications.

Overview

@tcn/ui-typography provides a complete set of typography components that ensure consistent text styling and proper semantic structure across your application. These components follow typography best practices and integrate seamlessly with the Blackcat UI design system.

What's Included

Text Components

• Title: Semantic heading components (h1, h2, h3) with size variants
• Headline: Large display text for page headers and main content
• Subheadline: Secondary headings and section titles
• BodyText: Main content text with various emphasis levels
• Callout: Highlighted text for important information
• Footnote: Small text for references and additional information
• Caption: Descriptive text for images, forms, and UI elements

Typography Features

• Semantic Markup: Proper HTML structure for accessibility
• Size Variants: Consistent sizing scale (xs, sm, md, lg, xl)
• Emphasis Levels: Normal, strong, and weak text emphasis
• Hierarchy System: Primary, secondary, and tertiary text importance
• Responsive Design: Text that adapts to different screen sizes

Key Features

• Semantic HTML: Proper heading hierarchy and text structure
• Accessibility First: Built with ARIA attributes and screen reader support
• Design System Integration: Seamlessly works with Blackcat UI themes and spacing
• TypeScript Support: Full type safety with excellent IntelliSense
• Responsive Design: Adapts to different screen sizes and orientations
• Customizable: Extensive styling and behavior customization options
• Performance Optimized: Efficient rendering with minimal re-renders

Usage

Title Components

import { Title } from '@tcn/ui-typography';

function PageHeader() {
  return (
    <div>
      <Title size="lg" hierarchy="primary">
        Main Page Title
      </Title>
      <Title size="md" hierarchy="secondary">
        Section Heading
      </Title>
      <Title size="sm" hierarchy="tertiary">
        Subsection Title
      </Title>
    </div>
  );
}

Body Text

import { BodyText } from '@tcn/ui-typography';

function ArticleContent() {
  return (
    <div>
      <BodyText size="lg" emphasis="strong">
        This is the main article content with strong emphasis.
      </BodyText>

      <BodyText size="md" hierarchy="secondary">
        Regular body text for paragraphs and content.
      </BodyText>

      <BodyText size="sm" emphasis="weak" hierarchy="tertiary">
        Smaller text for less important information.
      </BodyText>
    </div>
  );
}

Callout Text

import { Callout } from '@tcn/ui-typography';

function ImportantNotice() {
  return (
    <Callout
      size="md"
      emphasis="strong"
      hierarchy="primary"
    >
      This is important information that needs attention.
    </Callout>
  );
}

Footnote and Caption

import { Footnote, Caption } from '@tcn/ui-typography';

function ImageWithText() {
  return (
    <div>
      <img src="example.jpg" alt="Example" />
      <Caption size="sm" hierarchy="secondary">
        Example image description
      </Caption>

      <Footnote size="xs" hierarchy="tertiary">
        * Additional information and references
      </Footnote>
    </div>
  );
}

Custom Styling

import { Title, BodyText } from '@tcn/ui-typography';

function CustomTypography() {
  return (
    <div>
      <Title
        size="lg"
        color="var(--accent-color)"
        pad="16px"
        selectable={false}
      >
        Custom Styled Title
      </Title>

      <BodyText
        size="md"
        color="#666666"
        padStart="24px"
        breakWords={true}
      >
        Custom styled body text with specific padding and word breaking.
      </BodyText>
    </div>
  );
}

Component Features

Size System

• xs: Extra small text for captions and footnotes
• sm: Small text for secondary information
• md: Medium text for body content (default)
• lg: Large text for headings and emphasis
• xl: Extra large text for main titles

Emphasis Levels

• normal: Standard text weight and style
• strong: Bold or emphasized text
• weak: Lighter or less prominent text

Hierarchy System

• primary: Most important text in the hierarchy
• secondary: Secondary importance text
• tertiary: Least important text

Customization Options

• Color Control: Custom text colors
• Padding Options: Flexible padding control
• Text Selection: Control over text selection behavior
• Word Breaking: Control over word breaking behavior

Design System Integration

All components automatically integrate with:

• Spacing Scale: Consistent margins, padding, and gaps
• Color System: Primary, secondary, and accent color schemes
• Typography Scale: Unified font sizes and weights
• Scalar Support: Automatic scaling for different screen densities
• Theme Support: Light and dark theme compatibility

Accessibility Features

• Semantic Markup: Proper HTML structure for screen readers
• Heading Hierarchy: Logical heading structure for navigation
• ARIA Support: Built-in accessibility attributes
• Screen Reader Support: Clear text structure and relationships
• High Contrast: Designed for various visual accessibility needs

When to Use

Choose @tcn/ui-typography when you need:

• Consistent text styling across your application
• Proper semantic HTML structure
• Accessible typography components
• Text components that integrate with your design system
• Typography that follows best practices
• Components with built-in responsive behavior

Customization

Components support extensive customization through:

• CSS Custom Properties: Dynamic styling changes
• CSS Modules: Scoped styling with design system integration
• Props Interface: Flexible configuration through component props
• Theme Integration: Automatic adaptation to different themes
• Layout Options: Flexible padding and spacing controls

Performance

• Efficient Rendering: Minimal re-renders and optimized updates
• Bundle Optimization: Tree-shakeable components for smaller bundles
• Memory Management: Proper cleanup and event handling
• Lazy Loading: Support for on-demand component loading
• Optimized Typography: Efficient text rendering and layout

License

Apache-2.0