Merge pull request #441 from colebemis/patch-1

[@theme-ui/colors] Implement alpha color function

Author: jxnblk

packages/color/README.md

@@ -116,6 +116,16 @@ import { tint } from '@theme-ui/color'
 // tint('primary', amount)
 ```
 
+### `alpha`
+
+Set the transparency of a color to an amount 0-1
+
+```js
+
+import { alpha } from '@theme-ui/color'
+// alpha('primary', amount)
+```
+
 ### `mix`
 
 Mix two colors by a specific ratio

packages/color/src/index.js

@@ -17,8 +17,7 @@ export const saturate = (c, n) => t => P.saturate(n, g(t, c))
 export const shade = (c, n) => t => P.shade(n, g(t, c))
 export const tint = (c, n) => t => P.tint(n, g(t, c))
 
-// maybe not from polished? opacify??
-// export const alpha = (c, n) => t =>
+export const alpha = (c, n) => t => P.rgba(g(t, c), n)
 
 export const mix = (a, b, n = 0.5) => t => P.mix(n, g(t, a), g(t, b))
 

packages/color/test/index.js

@@ -9,6 +9,7 @@ import {
   saturate,
   shade,
   tint,
+  alpha,
   mix,
   complement,
   invert,
@@ -72,6 +73,11 @@ test('tint', () => {
   expect(n).toBe('#3fd8ff')
 })
 
+test('alpha', () => {
+  const n = alpha('primary', 0.25)(theme)
+  expect(n).toBe('rgba(0,204,255,0.25)')
+})
+
 test('mix', () => {
   const n = mix('primary', 'secondary', 0.25)(theme)
   expect(n).toBe('#4c59b2')
@@ -149,6 +155,11 @@ test('tintCustomProps', () => {
   expect(n).toBe('#3fd8ff')
 })
 
+test('alphaCustomProps', () => {
+  const n = alpha('primary', 0.25)(themeCustomProps)
+  expect(n).toBe('rgba(0,204,255,0.25)')
+})
+
 test('mixCustomProps', () => {
   const n = mix('primary', 'secondary', 0.25)(themeCustomProps)
   expect(n).toBe('#4c59b2')
@@ -189,4 +200,4 @@ const themeTomatoCustomProps = {
 test('darkenTomatoCustomProps', () => {
   const n = darken('primary', 0.25)(themeTomatoCustomProps)
   expect(n).toBe('#c61e00')
-})
+})