Design system utilities wrapper for Vue components, based on styled-system
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig
.gitignore
.npmrc
.travis.yml
index.js
license
package.json
readme.md
system.js
test.js
test.js.md
test.js.snap

readme.md

vue-styled-system Build Status js-standard-style

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