Angular Typography Library

A modern, flexible typography library for Angular with built-in styles, semantic colors, and interactive features.

✨ Features

• 🎨 Pre-configured Font Sizes - Headings (32, 28, 24, 20, 18, 16px) & Text (16, 14, 18px)
• 🎯 Semantic Types - Default, Secondary, Muted, Success, Warning, Danger
• ⚡ Zero Config - Import and use, styles cmmlied automatically
• 🔧 Fully Customizable - Global config + per-element overrides
• 📱 Responsive - Built-in responsive breakpoints
• 🌙 Dark Mode - Optional dark mode support
• 🚀 Standalone - Tree-shakeable, minimal bundle size
• ♿ Accessible - WCAG compliant color contrasts

📦 Installation

npm install vtit-typepography
# or
yarn add vtit-typepography

🚀 Quick Start

1. Import Styles

// angular.json
"styles": [
  "node_modules/vtit-typepography/styles.scss"
]

2. Import Directives

import { Component } from '@angular/core';
import { TYPOGRAPHY_DIRECTIVES } from 'vtit-typepography';

@Component({
  standalone: true,
  imports: [TYPOGRAPHY_DIRECTIVES],
  template: `
    <h1 cmmHeading>Hello World</h1>
    <p cmmParagraph type="muted">This is muted text</p>
  `
})
export class MyComponent {}

That's it! Font sizes are cmmlied automatically. ✅

📖 Usage

Headings

Automatic font sizes based on heading level:

<h1 cmmHeading>32px Heading</h1>
<h2 cmmHeading>28px Heading</h2>
<h3 cmmHeading>24px Heading</h3>
<h4 cmmHeading>20px Heading</h4>
<h5 cmmHeading>18px Heading</h5>
<h6 cmmHeading>16px Heading</h6>

Font Weights

<h1 cmmHeading weight="normal">400</h1>
<h1 cmmHeading weight="medium">500</h1>
<h1 cmmHeading weight="semibold">600 (default)</h1>
<h1 cmmHeading weight="bold">700</h1>

Semantic Types

<h2 cmmHeading type="secondary">Secondary</h2>
<h2 cmmHeading type="muted">Muted</h2>
<h2 cmmHeading type="success">Success</h2>
<h2 cmmHeading type="warning">Warning</h2>
<h2 cmmHeading type="danger">Danger</h2>

Paragraphs & Text

Paragraph Sizes

<p cmmParagraph size="small">14px paragraph</p>
<p cmmParagraph size="base">16px paragraph (default)</p>
<p cmmParagraph size="large">18px paragraph</p>

Text Types

<!-- Regular text -->
<p cmmParagraph>Default paragraph</p>

<!-- Secondary - less emphasized -->
<p cmmParagraph type="secondary">
  Secondary text (rgba(0,0,0,0.65))
</p>

<!-- Muted - hints, metadata -->
<p cmmParagraph type="muted">
  Muted text (rgba(0,0,0,0.45) • 14px)
</p>

<!-- Semantic colors -->
<p cmmParagraph type="success">Success message</p>
<p cmmParagraph type="warning">Warning message</p>
<p cmmParagraph type="danger">Error message</p>

Inline Text

<p cmmParagraph>
  This is <span cmmText type="secondary">secondary</span>,
  <span cmmText type="muted">muted</span>, and
  <span cmmText type="danger">danger</span> text.
</p>

🎨 Practical Examples

User Profile Card

<div class="profile-card">
  <h3 cmmHeading>John Doe</h3>
  <p cmmParagraph type="muted">Senior Product Designer</p>
  <p cmmParagraph type="secondary">San Francisco, CA</p>
  <p cmmParagraph>
    Passionate about creating intuitive user experiences.
  </p>
</div>

Article Header

<article>
  <h1 cmmHeading>Article Title</h1>
  <p cmmParagraph type="muted">
    Published on Dec 6, 2024 • 5 min read
  </p>
  <p cmmParagraph size="large" type="secondary">
    Lead paragraph with emphasis...
  </p>
  <p cmmParagraph>
    Main article content...
  </p>
</article>

Form Field

<div class="form-field">
  <label>
    <h4 cmmHeading>Email Address</h4>
  </label>
  <input type="email" />
  <p cmmParagraph type="muted" size="small">
    We'll never share your email.
  </p>
</div>

Status Messages

<p cmmParagraph type="success">✓ Success message</p>
<p cmmParagraph type="warning">⚠ Warning message</p>
<p cmmParagraph type="danger">✕ Error message</p>

⚙️ Global Configuration

Configure Default Sizes

// cmm.config.ts or main.ts
import { cmmlicationConfig, cmm_INITIALIZER } from '@angular/core';
import { TypographyConfigService } from 'vtit-typepography';

export const cmmConfig: cmmlicationConfig = {
  providers: [
    {
      provide: cmm_INITIALIZER,
      useFactory: (config: TypographyConfigService) => {
        return () => {
          // Customize heading sizes
          config.setHeadingSizes({
            h1: '40px',
            h2: '32px',
            // ... rest use defaults
          });
          
          // Customize text sizes
          config.setTextSizes({
            base: '18px',
            small: '14px',
            large: '20px'
          });
          
          // Set global features
          config.setConfig({
            copyable: false,
            ellipsis: false
          });
        };
      },
      deps: [TypographyConfigService],
      multi: true
    }
  ]
};

Per-Element Override

<!-- Override any element's font size -->
<h1 cmmHeading fontSize="48px">Custom Size</h1>
<p cmmParagraph fontSize="20px">Custom paragraph size</p>

🎯 Advanced Features

Copyable Text

<h1 cmmHeading [copyable]="true" (copy)="onCopy($event)">
  Click to copy
</h1>

Ellipsis

<p cmmParagraph [ellipsis]="true">
  Long text that will be truncated...
</p>

Disabled State

<p cmmParagraph [disabled]="true">
  Disabled text
</p>

Combine Features

<h2 cmmHeading 
    weight="bold" 
    type="success"
    [copyable]="true"
    (copy)="handleCopy($event)">
  Full Featured Heading
</h2>

🎨 Color Reference

Light Mode Colors

| Type | Color | Use Case | |------|-------|----------| | Default | rgba(0,0,0,0.88) | Main content | | Secondary | rgba(0,0,0,0.65) | Less important text | | Muted | rgba(0,0,0,0.45) | Hints, metadata | | Disabled | rgba(0,0,0,0.25) | Disabled state | | Success | #52c41a | Success messages | | Warning | #faad14 | Warnings | | Danger | #ff4d4f | Errors |

Dark Mode Support

// Automatic with prefers-color-scheme
@media (prefers-color-scheme: dark) { }

// Or manual with data attribute
<body data-theme="dark">

📏 Size Reference

Headings

• H1: 32px (mobile: 28px)
• H2: 28px (mobile: 24px)
• H3: 24px (mobile: 20px)
• H4: 20px (mobile: 18px)
• H5: 18px (mobile: 16px)
• H6: 16px (mobile: 14px)

Text

• Small: 14px
• Base: 16px (mobile: 14px)
• Large: 18px (mobile: 16px)

🔧 API Reference

HeadingDirective

Selector: h1[cmmHeading], h2[cmmHeading], h3[cmmHeading], h4[cmmHeading], h5[cmmHeading], h6[cmmHeading]

Inputs:

• level?: 1 | 2 | 3 | 4 | 5 | 6 - Auto-detected from tag
• weight?: 'normal' | 'medium' | 'semibold' | 'bold' - Default: 'semibold'
• fontSize?: string - Override font-size
• type?: 'default' | 'secondary' | 'muted' | 'success' | 'warning' | 'danger'
• copyable?: boolean
• editable?: boolean
• disabled?: boolean
• ellipsis?: boolean

Outputs:

• contentChange: EventEmitter<string>
• copy: EventEmitter<string>

TextDirective

Selector: p[cmmParagraph], span[cmmText]

Inputs:

• size?: 'small' | 'base' | 'large' - Default: 'base'
• fontSize?: string - Override font-size
• type?: 'default' | 'secondary' | 'muted' | 'success' | 'warning' | 'danger'
• copyable?: boolean
• editable?: boolean
• disabled?: boolean
• ellipsis?: boolean

Outputs:

• contentChange: EventEmitter<string>
• copy: EventEmitter<string>

🧪 Testing

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HeadingDirective } from 'vtit-typepography';

describe('Typography', () => {
  it('should cmmly correct font-size to h1', () => {
    @Component({
      standalone: true,
      imports: [HeadingDirective],
      template: '<h1 cmmHeading>Test</h1>'
    })
    class TestComponent {}

    const fixture = TestBed.createComponent(TestComponent);
    const h1 = fixture.nativeElement.querySelector('h1');
    fixture.detectChanges();

    expect(h1.style.fontSize).toBe('32px');
    expect(h1.style.fontWeight).toBe('600');
  });
});

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide.

📄 License

MIT © [Xuân Thành - [email protected]]

🔗 Links

• Documentation
• GitHub
• NPM
• Changelog

Made with ❤️ for the Angular community