# rtg-design-web

> Web design system for my personal digital properties.

Latest version **1.5.1** (published 2023-12-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install rtg-design-web
pnpm add rtg-design-web
yarn add rtg-design-web
bun add rtg-design-web
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.1 |
| Published | 2023-12-07 |
| First published | 2022-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ryan Todd Garza |
| Maintainers | ryantoddgarza |

## Links

- npm: https://www.npmjs.com/package/rtg-design-web
- Repository: https://github.com/ryantoddgarza/rtg-design-web
- Homepage: https://github.com/ryantoddgarza/rtg-design-web#readme
- Issues: https://github.com/ryantoddgarza/rtg-design-web/issues
- npm.io page: https://npm.io/package/rtg-design-web

## Recent versions

- 1.5.1 (latest) — 2023-12-07
- 1.5.0 — 2023-12-04
- 1.4.0 — 2023-09-20
- 1.3.1 — 2023-08-13
- 1.3.0 — 2023-08-11
- 1.2.0 — 2023-04-26
- 1.1.0 — 2022-10-26
- 1.0.0 — 2022-10-05
- 0.4.1 — 2022-09-30
- 0.4.0 — 2022-09-29
- 0.3.0 — 2022-09-27
- 0.2.2 — 2022-09-25
- 0.2.1 — 2022-09-25
- 0.2.0 — 2022-09-25
- 0.1.0 — 2022-09-24

## README

# rtg-design-web

Web design system for my personal digital properties.

Additional design systems:

-   [rtg-design](https://github.com/ryantoddgarza/rtg-design.git): Core design system

## Using SASS in your project

Compile your project's CSS from the rtg-design-web source SASS.

```scss
@use 'rtg-design-web';
```

## Using design tokens

### Color

Use theme color tokens to produce a coherent user experience.

#### Color theme tokens

| Token          | Value     |
| -------------- | --------- |
| `'background'` | `#f9f9f9` |
| `'border'`     | `#e6e6e6` |
| `'text'`       | `#1b1b1b` |

#### Using color tokens

| Context  | Usage          | Example                |
| -------- | -------------- | ---------------------- |
| function | `color(token)` | `color: color('text')` |

### Font family

Font family tokens make it possible to set font family based on type or role.

#### Available fonts

The following font stacks are available.

| Token         | Value                                                                                                          |
| ------------- | -------------------------------------------------------------------------------------------------------------- |
| `'helvetica'` | `Helvetica Neue, Helvetica, Roboto, Arial, sans-serif`                                                         |
| `'monospace'` | `ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace`                           |
| `'system'`    | `-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji` |

#### Type-based theme tokens

| Token     | Value       |
| --------- | ----------- |
| `'mono'`  | `monospace` |
| `'sans'`  | `helvetica` |
| `'serif'` | `false`     |

#### Role-based theme tokens

| Token       | Value       |
| ----------- | ----------- |
| `'alt'`     | `false`     |
| `'body'`    | `helvetica` |
| `'code'`    | `monospace` |
| `'heading'` | `helvetica` |
| `'ui'`      | `helvetica` |

#### Using font family tokens

| Context  | Usage           | Example                       |
| -------- | --------------- | ----------------------------- |
| function | `family(token)` | `font-family: family('body')` |

### Font weight

There are nine font weight theme tokens drawn from corresponding system tokens.

#### Font weight theme tokens

Font weight theme tokens use common weight names. Most projects will use only a few of these tokens, with the majority set to `false`.

| Token        | Value   |
| ------------ | ------- |
| `'thin'`     | `false` |
| `'light'`    | `false` |
| `'normal'`   | `400`   |
| `'medium'`   | `500`   |
| `'semibold'` | `false` |
| `'bold'`     | `700`   |
| `'heavy'`    | `false` |

#### Using font weight tokens

| Context  | Usage                | Example                            |
| -------- | -------------------- | ---------------------------------- |
| function | `font-weight(token)` | `font-weight: font-weight('bold')` |

### Line height

There are four role-based line height tokens to control the amount of space between lines in a block of text.

#### Line height theme tokens

| Token      | Value  |
| ---------- | ------ |
| `ui`       | `1`    |
| `heading`  | `1.25` |
| `body`     | `1.5`  |
| `extended` | `1.75` |

#### Using line height tokens

| Context  | Usage                | Example                            |
| -------- | -------------------- | ---------------------------------- |
| function | `line-height(token)` | `line-height: line-height('body')` |

### Type scale

The system type scale is based on 16px by default. Custom scale factors and base font sizes can be used to build unique exponential type scales.

#### Using type scale

| Context  | Usage                                          | Example                    |
| -------- | ---------------------------------------------- | -------------------------- |
| function | `type-scale(exponent[, scaling-factor, base])` | `font-size: type-scale(2)` |

### Spacing units

Spacing unit tokens are based on multiples of 8px.

#### Spacing unit tokens

**Any** numeric token is supported.

#### Using spacing unit tokens

| Context  | Usage          | Example             |
| -------- | -------------- | ------------------- |
| function | `units(token)` | `padding: units(2)` |

### Breakpoints

#### Breakpoint theme tokens

| Token          | Value    |
| -------------- | -------- |
| `'phone'`      | `320px`  |
| `'phone-lg'`   | `480px`  |
| `'tablet'`     | `640px`  |
| `'tablet-lg'`  | `880px`  |
| `'desktop'`    | `1024px` |
| `'desktop-lg'` | `1200px` |
| `'widescreen'` | `1400px` |

#### Using breakpoint tokens

| Context  | Usage               | Example                           |
| -------- | ------------------- | --------------------------------- |
| function | `breakpoint(token)` | `max-width: breakpoint('tablet')` |
| mixin    | `at-media(token)`   | `@include at-media('desktop')`    |

## Contributing

### Versioning

This design system uses [SemVer](https://semver.org/)—Semantic Versioning. The three types of versions are:

-   **Major** versions contain breaking changes.
-   **Minor** versions add new features or deprecate existing features without breaking changes.
-   **Patch** versions fix defects or optimize existing features without breaking changes.

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