https://github.com/rmariuzzo/shorted-theme

Shorted theme references for Styled Components.
https://github.com/rmariuzzo/shorted-theme

styled styled-components theme utility

Last synced: 9 days ago
JSON representation

Shorted theme references for Styled Components.

• Host: GitHub
• URL: https://github.com/rmariuzzo/shorted-theme
• Owner: rmariuzzo
• License: mit
• Created: 2020-09-18T02:38:10.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-09-23T16:11:06.000Z (about 4 years ago)
• Last Synced: 2024-10-24T15:45:41.457Z (12 days ago)
• Topics: styled, styled-components, theme, utility
• Language: TypeScript
• Homepage:
• Size: 533 KB
• Stars: 13
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ![shorted-theme - Shorted theme references for Styled Components.](.github/assets/banner.svg)

![Comparison: before and after](.github/assets/comparison.png)






## Features

- Zero dependencies.

- [TypeScript support](#typescript-support).

- Write less characters.

- Tests with 100% coverage.

## Installation

```bash

npm i shorted-theme

```

## Usage

```ts

import styled from 'styled-components'

import shorted from 'shorted-theme'

const theme = {

  colors: {

    primary: 'red',

    secondary: 'blue'

  },

  fontFamily: '"Roboto", sans-serif',

  fontSizes: {

    small: 12,

    regular: 14,

    large: 18

  }

}

const t = shorted(theme) // 👈 short your theme then use everywhere.

const Button = styled.button`

  color: ${t.colors.primary};

  color: ${t.colors.primary};

  font-family: ${t.fontFamily};

  font-size: ${t.fontSizes.regular};

`

```

## TypeScript Support

`shorted-theme` use all your typings.

![](.github/assets/typescript-support.png)

### Suggestion

You can destructure the shorted theme object. That way you can reference direct children properties instead of a root object.

```ts

const { colors, fontFamily, fontSizes } = shorted(theme)

const Button = styled.button`

  color: ${colors.primary};

  color: ${colors.primary};

  font-family: ${fontFamily};

  font-size: ${fontSizes.regular};

`

```

## Limitations

`shorted-theme` is useful for writing less when referencing theme values. However, it can't be used in expressions. For example:

```ts

// THIS WILL NOT WORK

const Button = styled.button`

  padding: ${t.padding.default * 10};

`

```

Instead you should use the function expression:

```ts

const Button = styled.button`

  padding: ${(props) => props.theme.padding.default * 10};

`

```

## Development

1.  Clone this repository.

2.  Install dependencies: `npm i`.

3.  Run it locally: `npm start` or `./src/bin.js`

### Tests

```sh

npm run test

```

### Releases

Releases are triggered by `npm version` and handled by [GitHub Actions](https://github.com/rmariuzzo/shorted-theme/actions?query=workflow%3Apublish).






Made with ♥ by @rmariuzzo