@retronew/typography

A foundational typography styles library built with SCSS, based on Pico CSS. Provides comprehensive typographic styles and utilities for modern web applications.

Features

- 🎨 Comprehensive Typography Styles - Well-designed typography styles for headings, paragraphs, lists, blockquotes, code blocks, tables, and more
- 🌓 Theme Support - Built-in support for light and dark themes with automatic color scheme detection
- 🎯 Modular Architecture - Modular SCSS structure for easy customization and tree-shaking
- 📦 Framework Agnostic - Works with any framework (Vue, React, Svelte, etc.) or vanilla HTML
- 🎨 CSS Variables - Uses CSS custom properties for easy theming and runtime customization
- 📱 Responsive - Mobile-first approach with responsive typography
- ⚡ No Build Required - Pure SCSS, no JavaScript dependencies for the library itself

Installation

``bash npm install @retronew/typography

`or`


pnpm add @retronew/typography
or

yarn add @retronew/typography

> Note: This package requires sassas a peer dependency. Make sure you have it installed: > >`bash > npm install -D sass >`

`Usage`

`$3`

Import the main stylesheet in your SCSS file using @use:

`scss @use '@retronew/typography';`

`$3`

`scss // Main entry - includes all typography styles @use '@retronew/typography';

// Full Pico styles @use '@retronew/typography/pico';

// Pico with color utilities @use '@retronew/typography/pico.colors';

// Colors only @use '@retronew/typography/colors';

// Access settings/variables @use '@retronew/typography/_settings';`

`$3`

You can customize the library by forwarding with configuration:

`scss @use '@retronew/typography' with ( $semantic-root-element: 'body', $enable-semantic-container: true, $enable-responsive-typography: true // ... other custom variables );`

`$3`

For more granular control, import specific modules directly:

`scss // Typography content only @use '@retronew/typography/scss/content/typography';

// Code styling @use '@retronew/typography/scss/content/code';

// Tables @use '@retronew/typography/scss/content/table';

// Theme colors @use '@retronew/typography/scss/themes/default';

// Helpers @use '@retronew/typography/scss/helpers/mixin'; @use '@retronew/typography/scss/helpers/functions';`

`$3`

Simply use semantic HTML elements and the typography styles will be applied automatically:

`html


  Heading 1

  Heading 2

  This is a paragraph with beautiful typography.
  

    List item 1

    List item 2

  
  
This is a blockquote with elegant styling.
  
const hello = "world";
  

    
    Image caption

  
  













                  Header 1         Header 2       
    
                  Cell 1         Cell 2

Header 1	Header 2
Cell 1	Cell 2


Requirements

- Sass: >=1.23.0 (peer dependency)

`Project Structure`

`scss/ ├── _index.scss # Main entry point ├── _settings.scss # Global settings and variables ├── pico.scss # Full Pico bundle ├── pico.colors.scss # Pico with colors │ ├── colors/ # Color system │ ├── _index.scss │ └── utilities/ │ ├── _background-colors.scss │ ├── _colors.scss │ ├── _css-vars.scss │ └── _utils.scss │ ├── content/ # Content styles │ ├── _code.scss │ ├── _embedded.scss │ ├── _figure.scss │ ├── _link.scss │ ├── _misc.scss │ ├── _table.scss │ └── _typography.scss │ ├── helpers/ # SCSS helpers │ ├── _functions.scss │ └── _mixin.scss │ ├── layout/ # Layout styles │ └── _document.scss │ ├── themes/ # Theme definitions │ ├── _default.scss │ └── default/ │ ├── _dark.scss │ ├── _light.scss │ ├── _schemes.scss │ ├── _styles.scss │ └── _theme-colors.scss │ ├── utilities/ # Utility styles │ ├── _accessibility.scss │ └── _reduce-motion.scss │ └── components/ # Component styles (extensible)`

`Theming`

The library supports automatic light/dark theme switching based on user's system preference:

`scss // The default theme automatically responds to prefers-color-scheme @use '@retronew/typography';`

You can also manually control the theme using CSS classes or data attributes on your root element.

`Browser Support`

This library uses modern CSS features including:

- CSS Custom Properties (CSS Variables) -prefers-color-schememedia query -prefers-reduced-motion` media query

Supports all modern browsers (Chrome, Firefox, Safari, Edge).

Credits

This library is based on Pico CSS - Minimal CSS Framework for semantic HTML.

License

MIT

Author

Retronew

@retronew/typography

A foundational typography styles library built with SCSS, based on Pico CSS. Provides comprehensive typographic styles and utilities for modern web applications.

Features

Installation

``bash npm install @retronew/typography

`or`


pnpm add @retronew/typography
or

yarn add @retronew/typography

> Note: This package requires sassas a peer dependency. Make sure you have it installed: > >`bash > npm install -D sass >`

`Usage`

`$3`

Import the main stylesheet in your SCSS file using @use:

`scss @use '@retronew/typography';`

`$3`

`scss // Main entry - includes all typography styles @use '@retronew/typography';

// Full Pico styles @use '@retronew/typography/pico';

// Pico with color utilities @use '@retronew/typography/pico.colors';

// Colors only @use '@retronew/typography/colors';

// Access settings/variables @use '@retronew/typography/_settings';`

`$3`

You can customize the library by forwarding with configuration:

`scss @use '@retronew/typography' with ( $semantic-root-element: 'body', $enable-semantic-container: true, $enable-responsive-typography: true // ... other custom variables );`

`$3`

For more granular control, import specific modules directly:

`scss // Typography content only @use '@retronew/typography/scss/content/typography';

// Code styling @use '@retronew/typography/scss/content/code';

// Tables @use '@retronew/typography/scss/content/table';

// Theme colors @use '@retronew/typography/scss/themes/default';

// Helpers @use '@retronew/typography/scss/helpers/mixin'; @use '@retronew/typography/scss/helpers/functions';`

`$3`

Simply use semantic HTML elements and the typography styles will be applied automatically:

`html


  Heading 1

  Heading 2

  This is a paragraph with beautiful typography.
  

    List item 1

    List item 2

  
  
This is a blockquote with elegant styling.
  
const hello = "world";
  

    
    Image caption

  
  













                  Header 1         Header 2       
    
                  Cell 1         Cell 2

Header 1	Header 2
Cell 1	Cell 2


Requirements

- Sass: >=1.23.0 (peer dependency)

`Project Structure`

`Theming`

The library supports automatic light/dark theme switching based on user's system preference:

`scss // The default theme automatically responds to prefers-color-scheme @use '@retronew/typography';`

You can also manually control the theme using CSS classes or data attributes on your root element.

`Browser Support`

This library uses modern CSS features including:

- CSS Custom Properties (CSS Variables) -prefers-color-schememedia query -prefers-reduced-motion` media query

Supports all modern browsers (Chrome, Firefox, Safari, Edge).

Credits

This library is based on Pico CSS - Minimal CSS Framework for semantic HTML.

License

MIT

Author

Retronew