Make slide transitions themeable

package-lock.json

@@ -6420,6 +6420,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",

package.json

@@ -43,6 +43,7 @@
     "koa-webpack": "^5.1.0",
     "loader-utils": "^1.1.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.get": "^4.4.2",
     "meow": "^5.0.0",
     "mini-html-webpack-plugin": "^0.2.3",
     "normalize-newline": "^3.0.0",

src/Carousel.js

@@ -1,6 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
+import get from 'lodash.get'
+
+const themeable = key => props => ({
+  [key]: get(props.theme, key, props[key])
+})
 
 const CarouselRoot = styled.div([], {
   overflowX: 'hidden',
@@ -16,21 +21,28 @@ const CarouselInner = styled.div([], {
   display: 'flex',
   width: '100%',
   height: '100%',
-  transitionProperty: 'transform',
-  transitionTimingFunction: 'ease-out',
-  transitionDuration: '.3s',
   '@media print': {
     height: 'auto',
     display: 'block'
-  }
-}, props => ({
-  transform: `translateX(${-100 * props.index}%)`
-}))
+  },
+  transitionProperty: 'transform',
+},
+  themeable('transitionTimingFunction'),
+  themeable('transitionDuration'),
+  props => ({
+    transform: `translateX(${-100 * props.index}%)`
+  })
+)
 
 CarouselInner.propTypes = {
   index: PropTypes.number.isRequired
 }
 
+CarouselInner.defaultProps = {
+  transitionTimingFunction: 'ease-out',
+  transitionDuration: '.3s',
+}
+
 export const Carousel = props =>
   <CarouselRoot>
     <CarouselInner {...props} />