vue-styled-system

Design system utilities for Vue based on styled-system.

Installation

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.

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:

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 | MIT License