Merge pull request #866 from peduarte/add-opacities-scale

Add `opacities` scale to CSS function

Author: jxnblk

packages/css/src/index.ts

@@ -56,6 +56,7 @@ export const scales = {
   color: 'colors',
   backgroundColor: 'colors',
   borderColor: 'colors',
+  opacity: 'opacities',
   margin: 'space',
   marginTop: 'space',
   marginRight: 'space',

packages/css/src/types.ts

@@ -530,6 +530,7 @@ export interface Theme {
   colorStyles?: ObjectOrArray<SystemCssProperties>
   textStyles?: ObjectOrArray<SystemCssProperties>
   text?: ObjectOrArray<SystemCssProperties>
+  opacities?: ObjectOrArray<CSS.OpacityProperty>
   /**
    * Enable/disable custom CSS properties/variables if lower browser
    * support is required (for eg. IE 11).

packages/css/test/index.ts

@@ -52,6 +52,7 @@ const theme: Theme = {
   radii: {
     small: 5,
   },
+  opacities: [0, '50%'],
 }
 
 test('returns a function', () => {
@@ -140,6 +141,7 @@ test('handles all core styled system props', () => {
     fontWeight: 'bold',
     color: 'primary',
     bg: 'secondary',
+    opacity: 1,
     fontFamily: 'monospace',
     lineHeight: 'body',
   })({ theme })
@@ -153,6 +155,7 @@ test('handles all core styled system props', () => {
     paddingBottom: 32,
     color: 'tomato',
     backgroundColor: 'cyan',
+    opacity: '50%',
     fontFamily: 'Menlo, monospace',
     fontSize: 24,
     fontWeight: 600,