# @trend/type

> Typographic normalize, classes, mixins, and configuration for TREND components.

Latest version **0.4.0** (published 2018-12-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @trend/type
pnpm add @trend/type
yarn add @trend/type
bun add @trend/type
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2018-12-12 |
| First published | 2018-12-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 16.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | defo550 |
| Keywords | typography, font, spacing |

## Links

- npm: https://www.npmjs.com/package/@trend/type
- npm.io page: https://npm.io/package/@trend/type

## Dependencies (1)

- [@trend/helpers](https://npm.io/package/@trend/helpers.md) ^0.3.0

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2018-12-12
- 0.3.0 — 2018-12-03

## README

# Type

Apply consistent typographic styling to project.

* [Installation](#installation)
* [Basic Usage](#usage)
* [Variables](#variables)
* [Classes](#classes)
* [Mixins](#mixins)
* [Functions](#functions)

## <a name="installation"></a> Installation

```bash
npm install @trend/type
```
## <a name="usage"></a> Basic Usage

```css
// Import entire package.
@import "@trend/type/styles";

// Import specific pieces.
@import "@trend/scss/variables";
@import "@trend/scss/functions";
@import "@trend/scss/mixins";

// Default (normalization styles).
@import "@trend/scss/type";

// Additional typographic helper classes.
@import "@trend/scss/helpers";

// Import more granular pieces.
@import "@trend/scss/functions/modular-scale";
@import "@trend/scss/mixins/leading";
@import "@trend/scss/mixins/styles-map";
@import "@trend/scss/mixins/type";
```

## <a name="variables"></a> Variables

> `$tc-type-font-size-root` | `string` | Defaults to 16px

> `$tc-type-font-famly` | `variable` | `$helvetica` from `@trend/helpers/scss/addon/font-stacks`.

```css
@import "@trend/helpers/scss/addons/font-stacks";

$tc-type-font-family: $helvetica !default;
```

> `$tc-type-base` | `map` | Default css properties and values.

```css
$tc-type-base: (
  font-family: $tc-type-font-family,
  -moz-osx-font-smoothing: grayscale,
  -webkit-font-smoothing: antialiased
);
```

> `tc-type-font-weights` | `map` | Set of standard weights to keywords.

```css
$tc-type-font-weights: (
  thin: 100,
  light: 300,
  regular: 400,
  medium: 500,
  bold: 700,
  black: 900
) !default;
```

> `$tc-type-styles` | `map` | Set of standard typographic styles.

```css
$tc-type-styles: (
  // Maps of rules to add to rulesets.
  h1: (...),
  h2: (...),
  h3: (...),
  h4: (...),
  h5: (...),
  h6: (...),
  subtitle1: (...),
  subtitle2: (...),
  body1: (...),
  body2: (...),
  caption: (...),
  button: (...)
) !default;
```

## <a name="classes"></a> Classes

Adjust typographic appearance of any HTML element with `tc-type` helper class.

```markup
  <span class="tc-type-h1">...</span>
  <span class="tc-type-h2">...</span>
  <span class="tc-type-h3">...</span>
  <span class="tc-type-h4">...</span>
  <span class="tc-type-h5">...</span>
  <span class="tc-type-h6">...</span>
  <span class="tc-type-subtitle1">...</span>
  <span class="tc-type-subtitle2">...</span>
  <span class="tc-type-body1">...</span>
  <span class="tc-type-body2">...</span>
  <span class="tc-type-caption">...</span>
```

## <a name="mixins"></a> Mixins

### tc-styles-map

Create rules from a map of rules. Not recursive, will only work on a single level maps.

> `map: $map` | Required | Map that has key/value pairs that will work as css properties with corresponding css values.

```css
@import "@trend/type/styles";
// or 
@import "@trend/type/scss/mixins";
// or 
@import "@trend/type/scss/mixins/styles-map";

$header: (
  font-size: 20px,
  font-weight: bold,
  text-transform: inherit
);

.h2 {
  @include tc-styles-map($header);
}
```

### tc-type

Add **type** map to an existing ruleset.  Usage of this mixin requires that `$tc-type-styles` is in scope.

> `string: $style` | required | One of h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2, caption, button.

> `boolean: $important` | Optional, Defaults to false | Add !important declaration to each rule.

```css
@import "@trend/type/styles";
// or 
@import "@trend/type/scss/mixins";
// or 
@import "@trend/type/scss/mixins/type";

.Button {
  @include tc-type(button);
}
```

## <a name="functions"></a> Functions

### tc-modular-scale

alias: **tc-ms**

Increments up or down a defined scale and returns an adjusted value.

> `number: $value` | Required

> `number: $increment` | Required | Increment the value (e.g. -2, -1, 0...)

> `string: $ratio` | Optional, defaults to `$major-third` | Values should align with `@trend/helpers/scss/addons/ratio-variables`.

```css
// Increment up by 1 with a ratio of 1.2
font-size: ms(16px, 1, 1.25);
// returns 20.00

// Increment down by 1 with a ratio of 1.2
font-size: ms(16px, -1, 1.25);
// returns 12.800
```

---
_Source: https://npm.io/package/@trend/type · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._