styled-system - npm Package Compare versions

Comparing version 1.0.0-3 to 1.0.0-4

dist/glamorous/hoc.js

@@ -7,6 +7,7 @@ 'use strict';
 var space = require('../space');
+var color = require('../color');
 
 module.exports = function (Component) {
-  var SystemComponent = glamorous(Component)(fontSize, width, space);
+  var SystemComponent = glamorous(Component)(fontSize, width, space, color);
   return SystemComponent;
 };

dist/index.js

@@ -6,2 +6,3 @@ 'use strict';
 var fontSize = require('./font-size');
+var color = require('./color');
 var util = require('./util');
@@ -14,4 +15,5 @@ var constants = require('./constants');
   fontSize: fontSize,
+  color: color,
   util: util,
   constants: constants
 };

dist/styled-components/hoc.js

 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n    ', '\n    ', '\n    ', '\n  '], ['\n    ', '\n    ', '\n    ', '\n  ']);
+var _templateObject = _taggedTemplateLiteral(['\n    ', '\n    ', '\n    ', '\n    ', '\n  '], ['\n    ', '\n    ', '\n    ', '\n    ', '\n  ']);
 
@@ -11,7 +11,8 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var space = require('../space');
+var color = require('../color');
 
 module.exports = function (Component) {
-  var SystemComponent = styled(Component)(_templateObject, fontSize, width, space);
+  var SystemComponent = styled(Component)(_templateObject, fontSize, width, space, color);
 
   return SystemComponent;
 };

package.json

 {
   "name": "styled-system",
-  "version": "1.0.0-3",
+  "version": "1.0.0-4",
   "description": "Design system utilities for styled-components, glamorous, and other css-in-js libraries",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -16,3 +16,3 @@ # styled-system
 import styled from 'styled-components'
-import { space, width, fontSize } from 'styled-system'
+import { space, width, fontSize, color } from 'styled-system'
 
@@ -23,2 +23,3 @@ const Box = styled.div`
   ${fontSize}
+  ${color}
 `
@@ -30,5 +31,5 @@ ```
 import glamorous from 'glamorous'
-import { space, width, fontSize } from 'styled-system'
+import { space, width, fontSize, color } from 'styled-system'
 
-const Box = glamorous.div(space, width, fontSize)
+const Box = glamorous.div(space, width, fontSize, color)
 ```
@@ -49,2 +50,8 @@
 
+// color
+<Box color='tomato' />
+
+// background color
+<Box bg='tomato' />
+
 // responsive width
@@ -118,3 +125,14 @@ <Box width={[ 1, 1/2, 1/4 ]} />
 
+## color
 
+```js
+import { color } from 'styled-system'
+```
+
+The color utility parses a component's `color` and `bg` props and converts them into CSS declarations.
+By default the raw value of the prop is returned.
+Color palettes can be configured with the [ThemeProvider](#configuration) to use keys as prop values.
+Array values are converted into [responsive values](#responsive-styles).
+
+
 ## Responsive Styles
@@ -121,0 +139,0 @@

src/glamorous/hoc.js

@@ -5,6 +5,7 @@ const glamorous = require('glamorous').default
 const space = require('../space')
+const color = require('../color')
 
 module.exports = Component => {
-  const SystemComponent = glamorous(Component)(fontSize, width, space)
+  const SystemComponent = glamorous(Component)(fontSize, width, space, color)
   return SystemComponent
 }

src/index.js

 const space = require('./space')
 const width = require('./width')
 const fontSize = require('./font-size')
+const color = require('./color')
 const util = require('./util')
@@ -11,4 +12,5 @@ const constants = require('./constants')
   fontSize,
+  color,
   util,
   constants
 }

src/styled-components/hoc.js

@@ -5,2 +5,3 @@ const styled = require('styled-components').default
 const space = require('../space')
+const color = require('../color')
 
@@ -12,2 +13,3 @@ module.exports = Component => {
     ${space}
+    ${color}
   `
@@ -14,0 +16,0 @@

test.js

 import test from 'ava'
-import {space, width, fontSize, util} from './src'
+import {
+  space,
+  width,
+  fontSize,
+  color,
+  util
+} from './src'
 
@@ -8,2 +14,6 @@ const theme = {
   fontSizes: [12, 16, 18, 24, 36, 72],
+  colors: {
+    blue: '#07c',
+    green: '#1c0'
+  }
 }
@@ -253,3 +263,3 @@
 
-test('fontSize returns object values', t => {
+test('fontSize returns string values', t => {
   const a = fontSize({fontSize: '2em'})
@@ -262,5 +272,5 @@ t.deepEqual(a, {'fontSize': '2em'})
   t.deepEqual(a, {
-    'fontSize': '14px',
+    fontSize: '14px',
     '@media screen and (min-width: 40em)': {
-      'fontSize': '16px',
+      fontSize: '16px',
     },
@@ -290,2 +300,36 @@ })
 
+test('color returns color and backgroundColor styles', t => {
+  const a = color({ color: 'tomato' })
+  const b = color({ bg: 'tomato' })
+  t.deepEqual(a, { color: 'tomato' })
+  t.deepEqual(b, { backgroundColor: 'tomato' })
+})
+
+test('color returns theme.colors values', t => {
+  const a = color({ theme, color: 'blue' })
+  const b = color({ theme, bg: 'green' })
+  t.deepEqual(a, { color: theme.colors.blue })
+  t.deepEqual(b, { backgroundColor: theme.colors.green })
+})
+
+test('color returns responsive values', t => {
+  const a = color({ theme, color: [ 'blue', 'green' ] })
+  t.deepEqual(a, {
+    color: theme.colors.blue,
+    '@media screen and (min-width: 32em)': {
+      color: theme.colors.green
+    }
+  })
+})
+
+test('color works with array theme.colors', t => {
+  const a = color({
+    theme: {
+      colors: [ 'tomato', 'plum' ]
+    },
+    color: 0
+  })
+  t.is(a.color, 'tomato')
+})
+
 test('breakpoints can be configured with a theme', t => {
@@ -292,0 +336,0 @@ const a = space({theme, m: [1, 2, 3, 4]})

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28369

increased by12.32%

Number of package files

35

increased by6.06%

Lines of code

770

increased by14.41%

Number of lines in readme file

228

increased by8.57%

No dependency changes