feat: add support for text-shadow (#49)

styled-components · Aug 28, 2019 · 96ef25a · 96ef25a
1 parent 0061b90
commit 96ef25a
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 12 deletions.
diff --git a/packages/core/src/propGetters.js b/packages/core/src/propGetters.js
@@ -91,6 +91,7 @@ export const propGetters = {
 
   // getShadow
   'box-shadow': getShadow,
+  'text-shadow': getShadow,
 
   // getSize
   width: getNumberSize,

diff --git a/packages/system/src/styles/borders.js b/packages/system/src/styles/borders.js
@@ -22,11 +22,6 @@ export const getBorderStyle = themeGetter({
   key: 'borderStyles',
 })
 
-export const getShadow = themeGetter({
-  name: 'shadow',
-  key: 'shadows',
-})
-
 // Style
 
 export const border = style({
@@ -94,11 +89,6 @@ export const borderRadius = style({
   themeGet: getRadius,
 })
 
-export const boxShadow = style({
-  prop: 'boxShadow',
-  themeGet: getShadow,
-})
-
 export const borders = compose(
   border,
   borderTop,
@@ -113,5 +103,4 @@ export const borders = compose(
   borderWidth,
   borderStyle,
   borderRadius,
-  boxShadow,
 )
diff --git a/packages/system/src/styles/index.js b/packages/system/src/styles/index.js
@@ -6,6 +6,7 @@ import { layout } from './layout'
 import { flexboxes } from './flexboxes'
 import { grids } from './grids'
 import { positioning } from './positioning'
+import { shadows } from './shadows'
 import { space } from './space'
 import { typography } from './typography'
 import { xgrids } from './xgrids'
@@ -17,6 +18,7 @@ export * from './flexboxes'
 export * from './grids'
 export * from './layout'
 export * from './positioning'
+export * from './shadows'
 export * from './space'
 export * from './typography'
 export * from './xgrids'
@@ -29,6 +31,7 @@ export const system = compose(
   grids,
   layout,
   positioning,
+  shadows,
   space,
   typography,
   xgrids,

diff --git a/packages/system/src/styles/shadows.js b/packages/system/src/styles/shadows.js
@@ -0,0 +1,25 @@
+import { style, themeGetter, compose } from '../style'
+
+// Getters
+
+export const getShadow = themeGetter({
+  name: 'shadow',
+  key: 'shadows',
+})
+
+// Style
+
+export const boxShadow = style({
+  prop: 'boxShadow',
+  themeGet: getShadow,
+})
+
+export const textShadow = style({
+  prop: 'textShadow',
+  themeGet: getShadow,
+})
+
+export const shadows = compose(
+  boxShadow,
+  textShadow,
+)
diff --git a/website/src/pages/docs/system-props.mdx b/website/src/pages/docs/system-props.mdx
@@ -279,9 +279,15 @@ Available border utilities:
 - `borderWidth`
 - `borderStyle`
 - `borderRadius`
-- `boxShadow`
 - `borders`: all border utilities
 
+## Shadows
+
+Available shadow utilities:
+
+- `boxShadow`
+- `textShadow`
+
 ## Basics
 
 Available basic utilities: