feat(theme): box shadow snippet

sombreroEnPuntas · Aug 28, 2020 · 52e4dcc · 52e4dcc
1 parent 53fa224
commit 52e4dcc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/src/theme/snippets.ts 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
@@ -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