From 52e4dcc9838216d027258dd3796eb2d696b85f29 Mon Sep 17 00:00:00 2001
From: Mati <matiasfornes@gmail.com>
Date: Fri, 28 Aug 2020 13:09:50 +0200
Subject: [PATCH] feat(theme): box shadow snippet

---
 src/theme/snippets.ts | 18 ++++++++++++++++++
 src/theme/theme.ts    |  8 +++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/theme/snippets.ts

diff --git a/src/theme/snippets.ts b/src/theme/snippets.ts
new file mode 100644
index 0000000..1b2364e
--- /dev/null
+++ b/src/theme/snippets.ts
@@ -0,0 +1,18 @@
+export const boxShadow = ({
+  colors,
+  type,
+}: {
+  colors: {
+    [key: string]: {
+      shadow: string
+    }
+  }
+  type: string
+}) => `
+  box-shadow: \
+    0 4px ${colors[type].shadow}, \
+    0 -4px ${colors[type].shadow}, \
+    4px 0 ${colors[type].shadow}, \
+    -4px 0 ${colors[type].shadow};
+  margin: 4px;
+`
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index d21d356..8ca9597 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -1,5 +1,7 @@
 import baseStyled, { keyframes, ThemedStyledInterface } from 'styled-components'
 
+import { boxShadow } from './snippets'
+
 const animations = {
   blink: keyframes`
   0% {
@@ -21,7 +23,6 @@ const colors = {
     outline: '#212529',
     shadow: '#4d5256',
   },
-  disabled: '#ebebe4',
   error: {
     background: '#ffd7cf',
     outline: '#ce372b',
@@ -44,10 +45,15 @@ const fonts = {
   lineHeight: '1.5em',
 }
 
+const snippets = {
+  boxShadow,
+}
+
 export const theme = {
   animations,
   colors,
   fonts,
+  snippets,
 }
 
 export type Theme = typeof theme