Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 2 months 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 (over 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 (about 2 months 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