https://github.com/c8r/vue-styled-system
Design system utilities wrapper for Vue components, based on styled-system
https://github.com/c8r/vue-styled-system
Last synced: 9 months ago
JSON representation
Design system utilities wrapper for Vue components, based on styled-system
- Host: GitHub
- URL: https://github.com/c8r/vue-styled-system
- Owner: c8r
- License: mit
- Created: 2017-12-08T19:59:55.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-12T14:52:28.000Z (over 8 years ago)
- Last Synced: 2025-08-16T22:09:03.398Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 22
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# vue-styled-system [](https://travis-ci.org/c8r/vue-styled-system) [](https://github.com/feross/standard)
Design system utilities for Vue based on [styled-system](https://github.com/jxnblk/styled-system).
## Installation
```sh
npm i -S vue-styled-system
```
## Usage
##### Passing theme context to components
In order to allow components to access the theme, you can declare a global mixin using `withTheme`.
```js
import Vue from 'vue'
import { withTheme } from 'vue-styled-system'
import theme from './theme.json'
Vue.mixin(withTheme(theme))
```
##### Adding styled-system props
Since Vue requires all props to be defined, you can call the default function to assign all props that are missing defaults:
```js
import { color, space, fontSize, width } from 'styled-system'
import styled from 'vue-styled-components'
import system from 'vue-styled-system'
import theme from './theme.json'
export default styled('button', system({
px: { default: 4 },
py: { default: 2 },
color: { default: 'white' },
bg: { default: 'blue' },
theme: { default: theme }
}))`
display: inline-block;
font-family: inherit;
border-width: 0px;
border-radius: 4px;
appearance: none;
${color}
${space}
${fontSize}
${width}
`
```
## License
MIT
## Contributing
1. Fork it
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create new Pull Request
[Made by Compositor](https://compositor.io)
|
[MIT License](LICENSE.md)