From b142b6ff7843cdf05df3e4a5095a2d5e484ba1af Mon Sep 17 00:00:00 2001
From: Michael Altamirano <michaeljaltamirano@gmail.com>
Date: Wed, 28 Oct 2020 11:03:00 -0500
Subject: [PATCH 1/6] Convert for Accordion.Thumbnails

---
 src/shared-components/accordion/thumbnails/style.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared-components/accordion/thumbnails/style.ts b/src/shared-components/accordion/thumbnails/style.ts
index c75ce56a8..66264b23a 100644
--- a/src/shared-components/accordion/thumbnails/style.ts
+++ b/src/shared-components/accordion/thumbnails/style.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { style as TYPOGRAPHY_STYLE } from 'src/shared-components/typography';
-import { COLORS, SPACER } from 'src/constants';
+import { SPACER } from 'src/constants';
 
 export const Container = styled.div`
   display: flex;
@@ -35,7 +35,7 @@ export const ThumbnailImage = styled.img`
 
 export const MultiplesContainer = styled.div`
   ${thumbnailBase}
-  background-color: ${COLORS.defaultBorder};
+  background-color: ${({ theme }) => theme.COLORS.defaultBorder};
 `;
 
 export const MultiplesText = styled.div`

From 30f32171333e83fb5c4fdc1972be626c091d7ce4 Mon Sep 17 00:00:00 2001
From: Michael Altamirano <michaeljaltamirano@gmail.com>
Date: Wed, 28 Oct 2020 12:16:12 -0500
Subject: [PATCH 2/6] Convert easy cases: styled component and normal component
 usage

---
 .eslint.tsconfig.json                         |  6 +-
 package.json                                  |  1 +
 shared/tsconfig.json                          |  4 ++
 src/constants/colors/secondary.ts             | 60 ++++++++--------
 src/shared-components/alert/index.tsx         |  7 +-
 src/shared-components/avatar/style.ts         |  8 +--
 src/shared-components/banner/index.tsx        |  5 +-
 .../button/components/linkButton/style.ts     |  6 +-
 src/shared-components/callout/style.ts        |  4 +-
 src/shared-components/carousel/arrow/style.ts | 13 ++--
 src/shared-components/field/index.tsx         | 10 ++-
 src/shared-components/indicator/style.ts      |  7 +-
 .../selectorButton/index.tsx                  |  8 ++-
 src/shared-components/toggle/index.tsx        | 68 ++++++++++---------
 src/shared-components/tooltip/index.tsx       |  5 +-
 src/shared-components/tooltip/style.ts        |  6 +-
 tsconfig.json                                 |  6 +-
 yarn.lock                                     | 19 +++---
 18 files changed, 128 insertions(+), 115 deletions(-)

diff --git a/.eslint.tsconfig.json b/.eslint.tsconfig.json
index 939555c14..7f60787f2 100644
--- a/.eslint.tsconfig.json
+++ b/.eslint.tsconfig.json
@@ -2,11 +2,7 @@
   "extends": "./shared/tsconfig",
   "compilerOptions": {
     "baseUrl": "./",
-    "noEmit": true,
-    "paths": {
-      "emotion-theming": ["types/emotion-theming"],
-      "@emotion/styled": ["types/@emotion/styled"]
-    }
+    "noEmit": true
   },
   "include": ["**/*.js", "**/*.ts", "**/*.tsx"]
 }
diff --git a/package.json b/package.json
index de0565e7b..a71d1e9be 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "@storybook/addon-knobs": "^6.0.27",
     "@storybook/addon-links": "^6.0.27",
     "@storybook/addon-storysource": "^6.0.27",
+    "@storybook/addon-toolbars": "^6.0.27",
     "@storybook/addon-viewport": "^6.0.27",
     "@storybook/core": "^6.0.27",
     "@storybook/react": "^6.0.27",
diff --git a/shared/tsconfig.json b/shared/tsconfig.json
index 2292c2ba5..ca63e7921 100644
--- a/shared/tsconfig.json
+++ b/shared/tsconfig.json
@@ -12,6 +12,10 @@
     "noImplicitReturns": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "paths": {
+      "emotion-theming": ["types/emotion-theming"],
+      "@emotion/styled": ["types/@emotion/styled"]
+    },
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
diff --git a/src/constants/colors/secondary.ts b/src/constants/colors/secondary.ts
index e5843821c..393d90300 100644
--- a/src/constants/colors/secondary.ts
+++ b/src/constants/colors/secondary.ts
@@ -6,48 +6,48 @@ const SECONDARY_COLORS = {
   // brand colors
   primary: '#4c0000',
   primaryTint1: '#b20000',
-  primaryTint2: null,
+  primaryTint2: undefined,
   primaryTint3: '#ff0000',
   secondary: '#ff8000',
-  tertiary: null,
+  tertiary: undefined,
 
   // general colors
-  success: null,
-  successBackground: null,
-  successBorder: null,
-  info: null,
-  infoBackground: null,
-  infoBorder: null,
-  error: null,
-  errorBackground: null,
-  errorBorder: null,
-  default: null,
-  defaultBackground: null,
-  defaultBorder: null,
-  accent: null,
-  disabled: null,
-  failure: null,
-  hover: null,
-  warning: null,
+  success: undefined,
+  successBackground: undefined,
+  successBorder: undefined,
+  info: undefined,
+  infoBackground: undefined,
+  infoBorder: undefined,
+  error: undefined,
+  errorBackground: undefined,
+  errorBorder: undefined,
+  default: undefined,
+  defaultBackground: undefined,
+  defaultBorder: undefined,
+  accent: undefined,
+  disabled: undefined,
+  failure: undefined,
+  hover: undefined,
+  warning: undefined,
 
   // ui colors
-  background: null,
-  backgroundDark: null,
-  border: null,
-  divider: null,
+  background: undefined,
+  backgroundDark: undefined,
+  border: undefined,
+  divider: undefined,
 
   // form colors
-  radioBorder: null,
-  radioBorderSelected: null,
+  radioBorder: undefined,
+  radioBorderSelected: undefined,
 
   // typography
-  textMuted: null,
-  textGhost: null,
-  textDisabled: null,
+  textMuted: undefined,
+  textGhost: undefined,
+  textDisabled: undefined,
 
   // overlay
-  overlay: null,
-  overlaySolid: null,
+  overlay: undefined,
+  overlaySolid: undefined,
 
   black: COLORS.black,
   white: COLORS.white,
diff --git a/src/shared-components/alert/index.tsx b/src/shared-components/alert/index.tsx
index b5247a5ad..242d4e69a 100644
--- a/src/shared-components/alert/index.tsx
+++ b/src/shared-components/alert/index.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import { useTheme } from 'emotion-theming';
 
 import { Avatar } from '../avatar';
 import ChevronIcon from '../../svgs/icons/chevron-icon.svg';
 import CheckmarkIcon from '../../svgs/icons/checkmark-icon.svg';
 import ErrorIcon from '../../svgs/icons/error-icon.svg';
 import InfoIcon from '../../svgs/icons/info-icon.svg';
-import { COLORS } from '../../constants';
 import {
   AlertsContainer,
   AlertContainer,
@@ -68,6 +68,7 @@ export const Alert = (alertProps: AlertProps) => {
     type = 'default',
     ...rest
   } = alertProps;
+  const theme = useTheme();
   const [exiting, setExiting] = useState(false);
   const [exited, setExited] = useState(false);
 
@@ -137,7 +138,7 @@ export const Alert = (alertProps: AlertProps) => {
           {avatarSrc ? (
             <Avatar size="small" src={avatarSrc} alt="avatar" />
           ) : (
-            <Icon fill={COLORS.white} />
+            <Icon fill={theme.COLORS.white} />
           )}
         </IconContainer>
         <ContentContainer truncateText={truncateText} ref={contentText}>
@@ -147,7 +148,7 @@ export const Alert = (alertProps: AlertProps) => {
       {ctaContent && (
         <CtaContent>
           <div>{ctaContent}</div>
-          <ChevronIcon fill={COLORS.white} width={14} height={14} />
+          <ChevronIcon fill={theme.COLORS.white} width={14} height={14} />
         </CtaContent>
       )}
     </AlertContainer>
diff --git a/src/shared-components/avatar/style.ts b/src/shared-components/avatar/style.ts
index 00dd20f99..a316c4556 100644
--- a/src/shared-components/avatar/style.ts
+++ b/src/shared-components/avatar/style.ts
@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
 
-import { COLORS } from '../../constants';
-
 const SIZES = {
   small: 32,
   medium: 48,
@@ -17,9 +15,11 @@ const determineSize = ({
   width: ${SIZES[avatarSize]}px;
 `;
 
-const AvatarImage = styled.img`
+const AvatarImage = styled.img<{
+  avatarSize: 'small' | 'medium' | 'large';
+}>`
   ${determineSize}
-  background-color: ${COLORS.secondary};
+  background-color: ${({ theme }) => theme.COLORS.secondary};
   border-radius: 50%;
   overflow: hidden;
 `;
diff --git a/src/shared-components/banner/index.tsx b/src/shared-components/banner/index.tsx
index 69e761b43..83c4c1ec5 100644
--- a/src/shared-components/banner/index.tsx
+++ b/src/shared-components/banner/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useTheme } from 'emotion-theming';
 
-import { COLORS } from '../../constants';
 import CheckmarkIcon from '../../svgs/icons/checkmark-icon.svg';
 import ErrorIcon from '../../svgs/icons/error-icon.svg';
 import InfoIcon from '../../svgs/icons/info-icon.svg';
@@ -35,6 +35,7 @@ type BannerProps = {
  * Banners are not dismissable.
  */
 export const Banner = ({ content, onClick, type = 'default' }: BannerProps) => {
+  const theme = useTheme();
   const Icon = bannerIconMapping[type];
 
   return (
@@ -45,7 +46,7 @@ export const Banner = ({ content, onClick, type = 'default' }: BannerProps) => {
     >
       <MainContainer>
         <IconContainer>
-          <Icon fill={COLORS.white} />
+          <Icon fill={theme.COLORS.white} />
         </IconContainer>
         <ContentContainer>{content}</ContentContainer>
       </MainContainer>
diff --git a/src/shared-components/button/components/linkButton/style.ts b/src/shared-components/button/components/linkButton/style.ts
index e452838ad..bb6c95521 100644
--- a/src/shared-components/button/components/linkButton/style.ts
+++ b/src/shared-components/button/components/linkButton/style.ts
@@ -4,7 +4,6 @@ import { ButtonType } from '../..';
 import { baseButtonStyles } from '../../style';
 import { COLORS } from '../../../../constants';
 
-/* eslint-disable-next-line import/prefer-default-export */
 export const linkButtonStyles = ({
   disabled,
   buttonType,
@@ -17,7 +16,10 @@ export const linkButtonStyles = ({
   textColor: string;
 }) => css`
   ${baseButtonStyles({
-    disabled, buttonType, buttonColor, textColor, 
+    disabled,
+    buttonType,
+    buttonColor,
+    textColor,
   })} span {
     ${disabled && `color: ${COLORS.textDisabled};`};
   }
diff --git a/src/shared-components/callout/style.ts b/src/shared-components/callout/style.ts
index ecd5aa915..4a5a62fc3 100644
--- a/src/shared-components/callout/style.ts
+++ b/src/shared-components/callout/style.ts
@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
 
-import { COLORS, SPACER, TYPOGRAPHY_CONSTANTS } from '../../constants';
+import { SPACER, TYPOGRAPHY_CONSTANTS } from '../../constants';
 
 export const ParentContainer = styled.div`
   max-width: 327px;
 `;
 
 export const CalloutContainer = styled.div`
-  background-color: ${COLORS.infoBackground};
+  background-color: ${({ theme }) => theme.COLORS.infoBackground};
   padding: ${SPACER.medium};
   border-radius: 8px;
   display: flex;
diff --git a/src/shared-components/carousel/arrow/style.ts b/src/shared-components/carousel/arrow/style.ts
index 137b639bc..3a5b977e2 100644
--- a/src/shared-components/carousel/arrow/style.ts
+++ b/src/shared-components/carousel/arrow/style.ts
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
 
-import { COLORS, SPACER, Z_SCALE } from '../../../constants';
+import { SPACER, Z_SCALE } from '../../../constants';
 
 export const ArrowContainer = styled.div<{
   prev: boolean;
@@ -32,16 +31,16 @@ export const BottomRightAlignedArrowContainer = styled.div<{
   ${({ prev }) => prev && `order: 2; margin-left: auto;`};
   ${({ next }) => next && `order: 3;`};
 
-  ${({ disabled }) =>
+  ${({ disabled, theme }) =>
     disabled &&
-    css`
+    `
       button {
         background-color: none;
-        border-color: ${COLORS.primary};
-        color: ${COLORS.primary};
+        border-color: ${theme.COLORS.primary};
+        color: ${theme.COLORS.primary};
 
         &:hover {
-          color: ${COLORS.primary};
+          color: ${theme.COLORS.primary};
         }
       }
     `};
diff --git a/src/shared-components/field/index.tsx b/src/shared-components/field/index.tsx
index 8d0a9a28b..b4a7746f1 100644
--- a/src/shared-components/field/index.tsx
+++ b/src/shared-components/field/index.tsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { useTheme } from 'emotion-theming';
 
 import {
   FieldContainer,
@@ -16,7 +17,6 @@ import {
   MessagesTypes,
   MessageType,
 } from '../verificationMessages';
-import { COLORS } from '../../constants';
 
 type FieldProps = {
   /**
@@ -65,17 +65,21 @@ export const Field = ({
   messages = {},
   messagesType = 'error',
 }: FieldProps) => {
+  const theme = useTheme();
   const htmlFor = labelFor || label;
   const messagesKeys = Object.keys(messages);
   const showMessages = messagesKeys.length > 0;
   const MessageIcon =
     messagesType === 'success' ? (
       <CheckmarkIcon
-        fill={COLORS.success}
+        fill={theme.COLORS.success}
         className="radiance-field-input-icon"
       />
     ) : (
-      <ErrorIcon fill={COLORS.error} className="radiance-field-input-icon" />
+      <ErrorIcon
+        fill={theme.COLORS.error}
+        className="radiance-field-input-icon"
+      />
     );
 
   return (
diff --git a/src/shared-components/indicator/style.ts b/src/shared-components/indicator/style.ts
index 4292b7aa2..95a9d4f9c 100644
--- a/src/shared-components/indicator/style.ts
+++ b/src/shared-components/indicator/style.ts
@@ -1,11 +1,10 @@
 import styled from '@emotion/styled';
 
 import { style as TYPOGRAPHY_STYLE } from '../typography';
-import { COLORS, SPACER, TYPOGRAPHY_CONSTANTS } from '../../constants';
+import { SPACER, TYPOGRAPHY_CONSTANTS } from '../../constants';
 
-// eslint-disable-next-line import/prefer-default-export
 export const IndicatorContainer = styled.div`
-  background-color: ${COLORS.error};
+  background-color: ${({ theme }) => theme.COLORS.error};
   min-height: 16px;
   height: 16px;
   max-height: 16px;
@@ -24,6 +23,6 @@ export const IndicatorContainer = styled.div`
     top: 1px;
     ${TYPOGRAPHY_STYLE.label};
     font-weight: ${TYPOGRAPHY_CONSTANTS.fontWeight.bold};
-    color: ${COLORS.white};
+    color: ${({ theme }) => theme.COLORS.white};
   }
 `;
diff --git a/src/shared-components/selectorButton/index.tsx b/src/shared-components/selectorButton/index.tsx
index 01df8f829..29a2779cc 100644
--- a/src/shared-components/selectorButton/index.tsx
+++ b/src/shared-components/selectorButton/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
+import { useTheme } from 'emotion-theming';
 
 import CheckmarkIcon from '../../svgs/icons/checkmark-icon.svg';
 import CircleSolidIcon from '../../svgs/icons/circle-solid-icon.svg';
-import { COLORS } from '../../constants';
 import {
   OuterContainer,
   Selector,
@@ -42,11 +42,13 @@ export const SelectorButton = ({
   type = 'primary',
   ...rest
 }: SelectorButtonProps) => {
+  const theme = useTheme();
+
   const checkedIcon =
     selector === 'radio' ? (
       <CircleSolidIcon
         css={css`
-          color: ${COLORS.white};
+          color: ${theme.COLORS.white};
         `}
         width={8}
         height={8}
@@ -54,7 +56,7 @@ export const SelectorButton = ({
     ) : (
       <CheckmarkIcon
         css={css`
-          color: ${COLORS.white};
+          color: ${theme.COLORS.white};
         `}
         width={16}
         height={16}
diff --git a/src/shared-components/toggle/index.tsx b/src/shared-components/toggle/index.tsx
index 2688b0268..6a841fefd 100644
--- a/src/shared-components/toggle/index.tsx
+++ b/src/shared-components/toggle/index.tsx
@@ -1,9 +1,9 @@
+import { useTheme } from 'emotion-theming';
 import PropTypes from 'prop-types';
 import React from 'react';
 // @ts-ignore
 import ToggleButton from 'react-toggle-button';
 
-import { COLORS } from '../../constants';
 import {
   Container,
   Label,
@@ -36,37 +36,41 @@ export const Toggle = ({
   checked = false,
   label = '',
   onChange,
-}: ToggleProps) => (
-  <Container>
-    {label && <Label onClick={onChange}>{label}</Label>}
-    <ReactToggleButtonContainer>
-      <ToggleButton
-        value={checked || false}
-        onToggle={onChange}
-        inactiveLabel=""
-        activeLabel=""
-        thumbStyle={thumbStyle}
-        trackStyle={trackStyle}
-        thumbAnimateRange={[1, 17]}
-        colors={{
-          active: {
-            base: COLORS.secondary,
-          },
-          inactive: {
-            base: COLORS.defaultBorder,
-          },
-          activeThumb: {
-            base: COLORS.white,
-          },
-          inactiveThumb: {
-            base: COLORS.white,
-          },
-        }}
-        passThroughInputProps={{ style: toggleInputStyles }}
-      />
-    </ReactToggleButtonContainer>
-  </Container>
-);
+}: ToggleProps) => {
+  const theme = useTheme();
+
+  return (
+    <Container>
+      {label && <Label onClick={onChange}>{label}</Label>}
+      <ReactToggleButtonContainer>
+        <ToggleButton
+          value={checked || false}
+          onToggle={onChange}
+          inactiveLabel=""
+          activeLabel=""
+          thumbStyle={thumbStyle}
+          trackStyle={trackStyle}
+          thumbAnimateRange={[1, 17]}
+          colors={{
+            active: {
+              base: theme.COLORS.secondary,
+            },
+            inactive: {
+              base: theme.COLORS.defaultBorder,
+            },
+            activeThumb: {
+              base: theme.COLORS.white,
+            },
+            inactiveThumb: {
+              base: theme.COLORS.white,
+            },
+          }}
+          passThroughInputProps={{ style: toggleInputStyles }}
+        />
+      </ReactToggleButtonContainer>
+    </Container>
+  );
+};
 
 Toggle.propTypes = {
   checked: PropTypes.bool,
diff --git a/src/shared-components/tooltip/index.tsx b/src/shared-components/tooltip/index.tsx
index bfc6f634c..35a01e451 100644
--- a/src/shared-components/tooltip/index.tsx
+++ b/src/shared-components/tooltip/index.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Global } from '@emotion/core';
 import Arrow from 'src/svgs/icons/arrow.svg';
+import { useTheme } from 'emotion-theming';
 
 import { OffClickWrapper } from '../offClickWrapper';
 import {
@@ -11,7 +12,6 @@ import {
   TooltipContent,
   ArrowImageContainer,
 } from './style';
-import { COLORS } from '../../constants';
 
 export type ArrowAlignTypes = 'left' | 'middle' | 'right';
 
@@ -91,6 +91,7 @@ export const Tooltip = ({
   nudgeTop = 0,
   position = 'top',
 }: TooltipProps) => {
+  const theme = useTheme();
   const [clicked, setClicked] = useState(false);
   const [hovered, setHovered] = useState(false);
 
@@ -149,7 +150,7 @@ export const Tooltip = ({
         >
           <TooltipContent>{content}</TooltipContent>
           <ArrowImageContainer arrowAlign={arrowAlign} position={position}>
-            <Arrow width={16} height={16} fill={COLORS.primary} />
+            <Arrow width={16} height={16} fill={theme.COLORS.primary} />
           </ArrowImageContainer>
         </TooltipBox>
       </MainContainer>
diff --git a/src/shared-components/tooltip/style.ts b/src/shared-components/tooltip/style.ts
index 1813f0a1d..8aec5f85b 100644
--- a/src/shared-components/tooltip/style.ts
+++ b/src/shared-components/tooltip/style.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
-import { COLORS, SPACER, TYPOGRAPHY_CONSTANTS } from '../../constants';
+import { SPACER, TYPOGRAPHY_CONSTANTS } from '../../constants';
 
 import { ArrowAlignTypes, PositionTypes } from '.';
 
@@ -102,10 +102,10 @@ export const TooltipBox = styled.div<{
       bottom: auto;
     `};
 
-  background: ${COLORS.primary};
+  background: ${({ theme }) => theme.COLORS.primary};
   box-shadow: 0px 8px 24px rgba(51, 46, 84, 0.05);
   border-radius: ${({ isSmall }) => (isSmall ? SPACER.xsmall : SPACER.small)};
-  color: ${COLORS.white};
+  color: ${({ theme }) => theme.COLORS.white};
   min-width: ${({ isSmall }) => (isSmall ? '0px' : '100px')};
   opacity: ${({ open }) => (open ? '1' : '0')};
   padding: ${({ isSmall }) =>
diff --git a/tsconfig.json b/tsconfig.json
index e82b6a4d3..fca75926b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,11 +5,7 @@
     "declaration": true,
     "emitDeclarationOnly": true,
     "outDir": "lib",
-    "rootDirs": ["src"],
-    "paths": {
-      "emotion-theming": ["types/emotion-theming"],
-      "@emotion/styled": ["types/@emotion/styled"]
-    }
+    "rootDirs": ["src"]
   },
   "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.tsx", "types/**/*.ts"]
 }
diff --git a/yarn.lock b/yarn.lock
index 41a1f29e0..52ca2e1a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2110,6 +2110,17 @@
     react-syntax-highlighter "^12.2.1"
     regenerator-runtime "^0.13.3"
 
+"@storybook/addon-toolbars@^6.0.27":
+  version "6.0.27"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.0.27.tgz#20632c610e2e47fb688a1794fd8d31a0c542dd85"
+  integrity sha512-Ak0srUPOX9m44UfQwZK4ue1hCNvkhfhB5PfVwjN6KyglpRCCNdFIT3BIPshmPXSyO1eeRL4rufxWtvtcqCodag==
+  dependencies:
+    "@storybook/addons" "6.0.27"
+    "@storybook/api" "6.0.27"
+    "@storybook/client-api" "6.0.27"
+    "@storybook/components" "6.0.27"
+    core-js "^3.0.1"
+
 "@storybook/addon-viewport@^6.0.27":
   version "6.0.27"
   resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.0.27.tgz#acfecc633b84b9d486e5ca7c302c4a328fe813a9"
@@ -13031,14 +13042,6 @@ resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.3
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.18.1:
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.18.1.tgz#018fcb2c5b207d2a6424aee361c5a266da8f4130"
-  integrity sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA==
-  dependencies:
-    is-core-module "^2.0.0"
-    path-parse "^1.0.6"
-
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"

From fd5381ac3b88ef5e5c93e80e8270e3e3fda21ce4 Mon Sep 17 00:00:00 2001
From: Michael Altamirano <michaeljaltamirano@gmail.com>
Date: Wed, 28 Oct 2020 13:16:25 -0500
Subject: [PATCH 3/6] Add @types/enzyme-adapter-react-16

---
 package.json | 1 +
 yarn.lock    | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a71d1e9be..d0b339d07 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "@svgr/rollup": "^4.0.2",
     "@svgr/webpack": "^4.0.2",
     "@types/enzyme": "^3.10.6",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^26.0.13",
     "@types/lodash.round": "^4.0.6",
     "@types/lodash.throttle": "^4.1.6",
diff --git a/yarn.lock b/yarn.lock
index 52ca2e1a2..761d78265 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2896,7 +2896,14 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
-"@types/enzyme@^3.10.6":
+"@types/enzyme-adapter-react-16@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.6.tgz#8aca7ae2fd6c7137d869b6616e696d21bb8b0cec"
+  integrity sha512-VonDkZ15jzqDWL8mPFIQnnLtjwebuL9YnDkqeCDYnB4IVgwUm0mwKkqhrxLL6mb05xm7qqa3IE95m8CZE9imCg==
+  dependencies:
+    "@types/enzyme" "*"
+
+"@types/enzyme@*", "@types/enzyme@^3.10.6":
   version "3.10.7"
   resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.7.tgz#ebdf3b972d293095e09af479e36c772025285e3a"
   integrity sha512-J+0wduPGAkzOvW7sr6hshGv1gBI3WXLRTczkRKzVPxLP3xAkYxZmvvagSBPw8Z452fZ8TGUxCmAXcb44yLQksw==

From 4d9ffde0b63204155acea6da7a747abfbc1d5987 Mon Sep 17 00:00:00 2001
From: Michael Altamirano <michaeljaltamirano@gmail.com>
Date: Wed, 28 Oct 2020 13:17:27 -0500
Subject: [PATCH 4/6] Pass in blank string instead of undefined to maintain
 some semblance of distinction (for now)

---
 src/constants/colors/secondary.ts | 60 +++++++++++++++----------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/constants/colors/secondary.ts b/src/constants/colors/secondary.ts
index 393d90300..3ec08853d 100644
--- a/src/constants/colors/secondary.ts
+++ b/src/constants/colors/secondary.ts
@@ -6,48 +6,48 @@ const SECONDARY_COLORS = {
   // brand colors
   primary: '#4c0000',
   primaryTint1: '#b20000',
-  primaryTint2: undefined,
+  primaryTint2: '',
   primaryTint3: '#ff0000',
   secondary: '#ff8000',
-  tertiary: undefined,
+  tertiary: '',
 
   // general colors
-  success: undefined,
-  successBackground: undefined,
-  successBorder: undefined,
-  info: undefined,
-  infoBackground: undefined,
-  infoBorder: undefined,
-  error: undefined,
-  errorBackground: undefined,
-  errorBorder: undefined,
-  default: undefined,
-  defaultBackground: undefined,
-  defaultBorder: undefined,
-  accent: undefined,
-  disabled: undefined,
-  failure: undefined,
-  hover: undefined,
-  warning: undefined,
+  success: '',
+  successBackground: '',
+  successBorder: '',
+  info: '',
+  infoBackground: '',
+  infoBorder: '',
+  error: '',
+  errorBackground: '',
+  errorBorder: '',
+  default: '',
+  defaultBackground: '',
+  defaultBorder: '',
+  accent: '',
+  disabled: '',
+  failure: '',
+  hover: '',
+  warning: '',
 
   // ui colors
-  background: undefined,
-  backgroundDark: undefined,
-  border: undefined,
-  divider: undefined,
+  background: '',
+  backgroundDark: '',
+  border: '',
+  divider: '',
 
   // form colors
-  radioBorder: undefined,
-  radioBorderSelected: undefined,
+  radioBorder: '',
+  radioBorderSelected: '',
 
   // typography
-  textMuted: undefined,
-  textGhost: undefined,
-  textDisabled: undefined,
+  textMuted: '',
+  textGhost: '',
+  textDisabled: '',
 
   // overlay
-  overlay: undefined,
-  overlaySolid: undefined,
+  overlay: '',
+  overlaySolid: '',
 
   black: COLORS.black,
   white: COLORS.white,

From a5e141e5dd7ff3b19987d30c34da55cc57db0c33 Mon Sep 17 00:00:00 2001
From: Michael Altamirano <michaeljaltamirano@gmail.com>
Date: Wed, 28 Oct 2020 13:17:59 -0500
Subject: [PATCH 5/6] Convert setupTests.js to ts

---
 jest.config.js                         | 2 +-
 tests/{setupTests.js => setupTests.ts} | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename tests/{setupTests.js => setupTests.ts} (70%)

diff --git a/jest.config.js b/jest.config.js
index e9b50c0a5..27b0b02f1 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,7 +18,7 @@ module.exports = {
   moduleNameMapper: {
     '\\.svg': '<rootDir>/tests/__mocks__/svgMock.js',
   },
-  setupFilesAfterEnv: ['<rootDir>tests/setupTests.js'],
+  setupFilesAfterEnv: ['<rootDir>tests/setupTests.ts'],
   snapshotSerializers: ['jest-emotion'],
   testPathIgnorePatterns: ['/node_modules/', '/lib/', '/__snapshots__'],
 };
diff --git a/tests/setupTests.js b/tests/setupTests.ts
similarity index 70%
rename from tests/setupTests.js
rename to tests/setupTests.ts
index 0a61b5772..759f5bd4d 100644
--- a/tests/setupTests.js
+++ b/tests/setupTests.ts
@@ -1,12 +1,12 @@
-/* eslint-disable no-undef */
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
 configure({ adapter: new Adapter() });
 
 window.matchMedia =
   window.matchMedia ||
-  function() {
+  function () {
     return {
       matches: false,
       addListener: () => undefined,

From 2f4194df622e75bafc6ef154a198ba19f2bef62a Mon Sep 17 00:00:00 2001
From: Michael Altamirano <michaeljaltamirano@gmail.com>
Date: Wed, 28 Oct 2020 14:13:56 -0500
Subject: [PATCH 6/6] Get tests passing, check on chromatic

---
 .size-snapshot.json                           | 178 +++++++++---------
 babel.config.js                               |   5 +
 src/shared-components/accordion/style.ts      |   7 +-
 src/shared-components/accordion/test.tsx      |  33 ++--
 src/shared-components/alert/style.ts          |  36 ++--
 src/shared-components/alert/test.tsx          |  24 ++-
 src/shared-components/avatar/test.tsx         |   9 +-
 src/shared-components/banner/style.ts         |  29 ++-
 src/shared-components/banner/test.tsx         |  13 +-
 src/shared-components/callout/test.tsx        |  11 +-
 src/shared-components/carousel/arrow/test.tsx |   9 +-
 src/shared-components/field/test.tsx          |  23 ++-
 src/shared-components/indicator/test.tsx      |   7 +-
 src/shared-components/selectorButton/test.tsx |  67 ++++---
 src/shared-components/toggle/test.tsx         |  18 +-
 src/shared-components/tooltip/test.tsx        |   7 +-
 tests/utils/decorateWithThemeProvider.tsx     |  18 ++
 tsconfig.json                                 |   9 +-
 18 files changed, 296 insertions(+), 207 deletions(-)
 create mode 100644 tests/utils/decorateWithThemeProvider.tsx

diff --git a/.size-snapshot.json b/.size-snapshot.json
index f4982da2c..8c7b2221f 100644
--- a/.size-snapshot.json
+++ b/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "bundle.js": {
-    "bundled": 1137206,
-    "minified": 1070344,
-    "gzipped": 102851
+    "bundled": 1107135,
+    "minified": 1039741,
+    "gzipped": 102344
   },
   "bundle.umd.js": {
-    "bundled": 1146164,
-    "minified": 1045629,
-    "gzipped": 98773
+    "bundled": 1116185,
+    "minified": 1015190,
+    "gzipped": 98267
   },
   "shared-components/avatar/index.js": {
     "bundled": 550,
@@ -38,16 +38,16 @@
     }
   },
   "shared-components/alert/index.js": {
-    "bundled": 5698,
-    "minified": 2538,
-    "gzipped": 1105,
+    "bundled": 5727,
+    "minified": 2541,
+    "gzipped": 1117,
     "treeshaked": {
       "rollup": {
-        "code": 2015,
+        "code": 2035,
         "import_statements": 652
       },
       "webpack": {
-        "code": 3562
+        "code": 3570
       }
     }
   },
@@ -94,16 +94,16 @@
     }
   },
   "shared-components/field/index.js": {
-    "bundled": 2767,
-    "minified": 1477,
-    "gzipped": 661,
+    "bundled": 2795,
+    "minified": 1480,
+    "gzipped": 670,
     "treeshaked": {
       "rollup": {
-        "code": 1238,
+        "code": 1258,
         "import_statements": 407
       },
       "webpack": {
-        "code": 2545
+        "code": 2553
       }
     }
   },
@@ -122,16 +122,16 @@
     }
   },
   "shared-components/banner/index.js": {
-    "bundled": 1448,
-    "minified": 943,
-    "gzipped": 447,
+    "bundled": 1470,
+    "minified": 944,
+    "gzipped": 452,
     "treeshaked": {
       "rollup": {
         "code": 438,
         "import_statements": 365
       },
       "webpack": {
-        "code": 1606
+        "code": 1590
       }
     }
   },
@@ -290,16 +290,16 @@
     }
   },
   "shared-components/tooltip/index.js": {
-    "bundled": 5372,
-    "minified": 2529,
-    "gzipped": 1028,
+    "bundled": 5394,
+    "minified": 2530,
+    "gzipped": 1033,
     "treeshaked": {
       "rollup": {
         "code": 642,
         "import_statements": 441
       },
       "webpack": {
-        "code": 1705
+        "code": 1689
       }
     }
   },
@@ -318,16 +318,16 @@
     }
   },
   "shared-components/toggle/index.js": {
-    "bundled": 1757,
-    "minified": 983,
-    "gzipped": 517,
+    "bundled": 1797,
+    "minified": 990,
+    "gzipped": 516,
     "treeshaked": {
       "rollup": {
         "code": 302,
         "import_statements": 268
       },
       "webpack": {
-        "code": 1346
+        "code": 1330
       }
     }
   },
@@ -402,16 +402,16 @@
     }
   },
   "shared-components/avatar/style.js": {
-    "bundled": 1539,
-    "minified": 1406,
-    "gzipped": 951,
+    "bundled": 1585,
+    "minified": 1420,
+    "gzipped": 953,
     "treeshaked": {
       "rollup": {
-        "code": 342,
-        "import_statements": 79
+        "code": 334,
+        "import_statements": 36
       },
       "webpack": {
-        "code": 1371
+        "code": 1320
       }
     }
   },
@@ -430,16 +430,16 @@
     }
   },
   "shared-components/alert/style.js": {
-    "bundled": 53374,
-    "minified": 52524,
-    "gzipped": 5533,
+    "bundled": 35497,
+    "minified": 34532,
+    "gzipped": 5262,
     "treeshaked": {
       "rollup": {
-        "code": 2956,
-        "import_statements": 442
+        "code": 3041,
+        "import_statements": 390
       },
       "webpack": {
-        "code": 4399
+        "code": 4404
       }
     }
   },
@@ -472,16 +472,16 @@
     }
   },
   "shared-components/banner/style.js": {
-    "bundled": 22381,
-    "minified": 21966,
-    "gzipped": 3404,
+    "bundled": 14830,
+    "minified": 14290,
+    "gzipped": 3374,
     "treeshaked": {
       "rollup": {
-        "code": 1521,
-        "import_statements": 361
+        "code": 1593,
+        "import_statements": 282
       },
       "webpack": {
-        "code": 2838
+        "code": 2802
       }
     }
   },
@@ -598,16 +598,16 @@
     }
   },
   "shared-components/callout/style.js": {
-    "bundled": 6861,
-    "minified": 6605,
-    "gzipped": 1569,
+    "bundled": 6951,
+    "minified": 6663,
+    "gzipped": 1585,
     "treeshaked": {
       "rollup": {
-        "code": 766,
-        "import_statements": 169
+        "code": 758,
+        "import_statements": 126
       },
       "webpack": {
-        "code": 1897
+        "code": 1846
       }
     }
   },
@@ -640,30 +640,30 @@
     }
   },
   "shared-components/tooltip/style.js": {
-    "bundled": 112563,
-    "minified": 110758,
-    "gzipped": 8246,
+    "bundled": 113561,
+    "minified": 111686,
+    "gzipped": 8309,
     "treeshaked": {
       "rollup": {
-        "code": 3186,
-        "import_statements": 205
+        "code": 3213,
+        "import_statements": 162
       },
       "webpack": {
-        "code": 4420
+        "code": 4402
       }
     }
   },
   "shared-components/indicator/style.js": {
-    "bundled": 2093,
-    "minified": 2043,
-    "gzipped": 1236,
+    "bundled": 2133,
+    "minified": 2019,
+    "gzipped": 1191,
     "treeshaked": {
       "rollup": {
-        "code": 615,
-        "import_statements": 215
+        "code": 642,
+        "import_statements": 172
       },
       "webpack": {
-        "code": 1766
+        "code": 1748
       }
     }
   },
@@ -794,16 +794,16 @@
     }
   },
   "shared-components/selectorButton/index.js": {
-    "bundled": 10188,
-    "minified": 9211,
-    "gzipped": 2590,
+    "bundled": 10336,
+    "minified": 9334,
+    "gzipped": 2640,
     "treeshaked": {
       "rollup": {
         "code": 613,
         "import_statements": 444
       },
       "webpack": {
-        "code": 1684
+        "code": 1668
       }
     }
   },
@@ -1004,16 +1004,16 @@
     }
   },
   "shared-components/carousel/arrow/style.js": {
-    "bundled": 6694,
-    "minified": 6365,
-    "gzipped": 2048,
+    "bundled": 4889,
+    "minified": 4571,
+    "gzipped": 1999,
     "treeshaked": {
       "rollup": {
-        "code": 956,
-        "import_statements": 201
+        "code": 989,
+        "import_statements": 122
       },
       "webpack": {
-        "code": 2131
+        "code": 2081
       }
     }
   },
@@ -1088,16 +1088,16 @@
     }
   },
   "shared-components/accordion/thumbnails/style.js": {
-    "bundled": 11245,
-    "minified": 11025,
-    "gzipped": 2283,
+    "bundled": 11354,
+    "minified": 11104,
+    "gzipped": 2309,
     "treeshaked": {
       "rollup": {
-        "code": 889,
-        "import_statements": 190
+        "code": 881,
+        "import_statements": 147
       },
       "webpack": {
-        "code": 2045
+        "code": 1991
       }
     }
   },
@@ -1242,9 +1242,9 @@
     }
   },
   "shared-components/button/components/linkButton/style.js": {
-    "bundled": 1729,
-    "minified": 1447,
-    "gzipped": 883,
+    "bundled": 1604,
+    "minified": 1383,
+    "gzipped": 834,
     "treeshaked": {
       "rollup": {
         "code": 77,
@@ -1312,16 +1312,16 @@
     }
   },
   "shared-components/accordion/style.js": {
-    "bundled": 41179,
-    "minified": 40097,
-    "gzipped": 4961,
+    "bundled": 36238,
+    "minified": 35182,
+    "gzipped": 4829,
     "treeshaked": {
       "rollup": {
-        "code": 2688,
-        "import_statements": 256
+        "code": 2701,
+        "import_statements": 220
       },
       "webpack": {
-        "code": 3905
+        "code": 3885
       }
     }
   },
diff --git a/babel.config.js b/babel.config.js
index 81b569233..3d9f57fe1 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -6,4 +6,9 @@ module.exports = {
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     ['@babel/plugin-transform-parameters', { loose: true }],
   ],
+  env: {
+    test: {
+      presets: ['@babel/preset-typescript'],
+    },
+  },
 };
diff --git a/src/shared-components/accordion/style.ts b/src/shared-components/accordion/style.ts
index eaf086ec1..52fc0cc2d 100644
--- a/src/shared-components/accordion/style.ts
+++ b/src/shared-components/accordion/style.ts
@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
 import {
  ANIMATION, BREAKPOINTS, BOX_SHADOWS, SPACER, 
 } from 'src/constants';
@@ -16,11 +15,11 @@ export const ExpansionWrapper = styled.div<{ contentHeight: string }>`
   transition: max-height ${ANIMATION.defaultTiming} ease-in-out;
 `;
 
-const getBorderStyle = (theme: ThemeType, isOpen: boolean) => css`
+const getBorderStyle = (theme: ThemeType, isOpen: boolean) => `
   border: 1px solid ${theme.COLORS.border};
 
   ${ExpansionWrapper} {
-    ${isOpen && `border-top: 1px solid ${theme.COLORS.border}`};
+    ${isOpen ? `border-top: 1px solid ${theme.COLORS.border};` : ''}
   }
 `;
 
@@ -30,7 +29,7 @@ export const AccordionBox = styled.div<{
   disabled: boolean;
 }>`
   ${({ noBorder, isOpen, theme }) =>
-    !noBorder ? getBorderStyle(theme, isOpen) : ''};
+    !noBorder ? getBorderStyle(theme, isOpen) : ''}
 
   width: 100%;
 
diff --git a/src/shared-components/accordion/test.tsx b/src/shared-components/accordion/test.tsx
index d239a8969..1ce71a5ce 100644
--- a/src/shared-components/accordion/test.tsx
+++ b/src/shared-components/accordion/test.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { shallow } from 'enzyme';
-import { ThemeProvider } from 'emotion-theming';
-import { primaryTheme } from 'src/constants/themes';
+import { mount } from 'enzyme';
+import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
 
 import { Accordion } from './index';
 
@@ -13,29 +12,31 @@ const testAccordionProps = {
   children: <div>expansion</div>,
 };
 
-const AccordionWithTheme = (additionalProps?: Record<string, unknown>) => (
-  <ThemeProvider theme={primaryTheme}>
-    <Accordion {...testAccordionProps} {...additionalProps} />
-  </ThemeProvider>
-);
-
 describe('<Accordion />', () => {
+  const DecoratedAccordion = decorateWithThemeProvider(Accordion);
+
   test('renders regular accordion', () => {
-    const component = renderer.create(<AccordionWithTheme />);
+    const component = renderer.create(
+      <DecoratedAccordion {...testAccordionProps} />,
+    );
 
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   test('renders no border accordion', () => {
-    const component = renderer.create(<AccordionWithTheme noBorder />);
+    const component = renderer.create(
+      <DecoratedAccordion {...testAccordionProps} noBorder />,
+    );
 
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   test('renders disabled accordion', () => {
-    const component = renderer.create(<AccordionWithTheme disabled />);
+    const component = renderer.create(
+      <DecoratedAccordion {...testAccordionProps} disabled />,
+    );
 
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
@@ -43,10 +44,12 @@ describe('<Accordion />', () => {
 
   test('invokes onClick when title is clicked', () => {
     const spy = jest.fn();
-    const titleIndex = 0;
 
-    const component = shallow(<AccordionWithTheme onClick={spy} />);
-    const title = component.childAt(titleIndex);
+    const component = mount(
+      <DecoratedAccordion {...testAccordionProps} onClick={spy} />,
+    );
+
+    const title = component.find('div[role="button"]');
 
     title.simulate('click');
     expect(spy).toHaveBeenCalled();
diff --git a/src/shared-components/alert/style.ts b/src/shared-components/alert/style.ts
index a10b3cf8d..209cae7bf 100644
--- a/src/shared-components/alert/style.ts
+++ b/src/shared-components/alert/style.ts
@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
-import { css, keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/core';
+import { ThemeType } from 'src/constants/themes/types';
 
 import {
   BOX_SHADOWS,
-  COLORS,
   MEDIA_QUERIES,
   SPACER,
   ANIMATION,
@@ -38,18 +38,18 @@ const fadeInMobile = keyframes`
   to { opacity: 1; transform: translate3d(0, 0px, 0); }
 `;
 
-const defaultAlertStyles = css`
-  background-color: ${COLORS.primary};
+const defaultAlertStyles = (theme: ThemeType) => `
+  background-color: ${theme.COLORS.primary};
   box-shadow: 0px 8px 24px rgba(51, 46, 84, 0.05);
 `;
 
-const successAlertStyles = css`
-  background-color: ${COLORS.success};
+const successAlertStyles = (theme: ThemeType) => `
+  background-color: ${theme.COLORS.success};
   box-shadow: 0px 8px 24px rgba(43, 110, 51, 0.05);
 `;
 
-const errorAlertStyles = css`
-  background-color: ${COLORS.error};
+const errorAlertStyles = (theme: ThemeType) => `
+  background-color: ${theme.COLORS.error};
   box-shadow: 0px 8px 24px rgba(189, 32, 15, 0.05);
 `;
 
@@ -76,16 +76,16 @@ export const AlertContainer = styled.button<{
     box-shadow: ${BOX_SHADOWS.focus};
   }
 
-  ${({ alertType }) => {
+  ${({ alertType, theme }) => {
     switch (alertType) {
       case 'danger':
-        return errorAlertStyles;
+        return errorAlertStyles(theme);
       case 'error':
-        return errorAlertStyles;
+        return errorAlertStyles(theme);
       case 'success':
-        return successAlertStyles;
+        return successAlertStyles(theme);
       default:
-        return defaultAlertStyles;
+        return defaultAlertStyles(theme);
     }
   }};
 
@@ -93,7 +93,7 @@ export const AlertContainer = styled.button<{
     animation: ${fadeInDesktop} ${ANIMATION.defaultTiming} 1;
     margin: 0 auto ${SPACER.medium};
     transform: ${({ exiting }) =>
-    exiting ? 'translate3d(24px, 0, 0)' : 'translate3d(0, 0, 0)'};
+      exiting ? 'translate3d(24px, 0, 0)' : 'translate3d(0, 0, 0)'};
   }
 `;
 
@@ -102,7 +102,7 @@ export const MainContainer = styled.div`
   flex-flow: row nowrap;
   justify-content: flex-start;
   align-items: flex-start;
-  color: ${COLORS.white};
+  color: ${({ theme }) => theme.COLORS.white};
   font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.caption};
   padding: ${SPACER.medium};
 `;
@@ -119,7 +119,7 @@ export const CtaContent = styled.div`
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
-  color: ${COLORS.white};
+  color: ${({ theme }) => theme.COLORS.white};
   font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.caption};
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 `;
@@ -127,13 +127,13 @@ export const CtaContent = styled.div`
 export const IconContainer = styled.div<{ hasAvatar: boolean }>`
   ${({ hasAvatar }) =>
     hasAvatar &&
-    css`
+    `
       min-width: 32px;
     `};
 
   svg {
     height: ${SPACER.medium};
     width: ${SPACER.medium};
-    fill: ${COLORS.white};
+    fill: ${({ theme }) => theme.COLORS.white};
   }
 `;
diff --git a/src/shared-components/alert/test.tsx b/src/shared-components/alert/test.tsx
index 05b64717e..4b7e0b921 100644
--- a/src/shared-components/alert/test.tsx
+++ b/src/shared-components/alert/test.tsx
@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import TestRenderer from 'react-test-renderer';
+import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
 
 import { Alert } from './index';
 
@@ -24,10 +25,15 @@ const createNodeMock = (element: ReactElement) => {
 };
 
 describe('Alert UI snapshots', () => {
+  const DecoratedAlert = decorateWithThemeProvider(Alert);
+
   test('renders a default alert', () => {
-    const component = TestRenderer.create(<Alert content={alertText} />, {
-      createNodeMock,
-    });
+    const component = TestRenderer.create(
+      <DecoratedAlert content={alertText} />,
+      {
+        createNodeMock,
+      },
+    );
 
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
@@ -35,7 +41,7 @@ describe('Alert UI snapshots', () => {
 
   test('renders success alert', () => {
     const component = TestRenderer.create(
-      <Alert content={alertText} type="success" />,
+      <DecoratedAlert content={alertText} type="success" />,
       { createNodeMock },
     );
 
@@ -45,7 +51,7 @@ describe('Alert UI snapshots', () => {
 
   test('renders error alert', () => {
     const component = TestRenderer.create(
-      <Alert content={alertText} type="error" />,
+      <DecoratedAlert content={alertText} type="error" />,
       { createNodeMock },
     );
 
@@ -55,7 +61,7 @@ describe('Alert UI snapshots', () => {
 
   test('renders a sticky alert', () => {
     const component = TestRenderer.create(
-      <Alert content={alertText} duration="sticky" />,
+      <DecoratedAlert content={alertText} duration="sticky" />,
       { createNodeMock },
     );
 
@@ -65,7 +71,7 @@ describe('Alert UI snapshots', () => {
 
   test('renders custom component passed in content prop', () => {
     const component = TestRenderer.create(
-      <Alert content={<CustomContentComponent />} />,
+      <DecoratedAlert content={<CustomContentComponent />} />,
       { createNodeMock },
     );
 
@@ -77,7 +83,7 @@ describe('Alert UI snapshots', () => {
     jest.useFakeTimers();
     const spy = jest.fn();
     const component = TestRenderer.create(
-      <Alert
+      <DecoratedAlert
         content={<CustomContentComponent />}
         onExit={spy}
         duration="sticky"
@@ -94,7 +100,7 @@ describe('Alert UI snapshots', () => {
     jest.useFakeTimers();
     const spy = jest.fn();
     const component = TestRenderer.create(
-      <Alert
+      <DecoratedAlert
         content={<CustomContentComponent />}
         type="error"
         ctaContent="Update Payment Method"
diff --git a/src/shared-components/avatar/test.tsx b/src/shared-components/avatar/test.tsx
index ddcb4206f..d1128cb68 100644
--- a/src/shared-components/avatar/test.tsx
+++ b/src/shared-components/avatar/test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
 
 import { Avatar } from '.';
 
@@ -7,10 +8,12 @@ describe('<Avatar />', () => {
   const imageExample =
     'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
 
+  const DecoratedAvatar = decorateWithThemeProvider(Avatar);
+
   describe('UI snapshot', () => {
     it('renders the component with default props', () => {
       const component = renderer.create(
-        <Avatar src={imageExample} alt="avatar" />,
+        <DecoratedAvatar src={imageExample} alt="avatar" />,
       );
 
       const tree = component.toJSON();
@@ -19,7 +22,7 @@ describe('<Avatar />', () => {
 
     it('render with size medium styles', () => {
       const component = renderer.create(
-        <Avatar size="medium" src={imageExample} alt="avatar" />,
+        <DecoratedAvatar size="medium" src={imageExample} alt="avatar" />,
       );
 
       const tree = component.toJSON();
@@ -28,7 +31,7 @@ describe('<Avatar />', () => {
 
     it('render with size large styles', () => {
       const component = renderer.create(
-        <Avatar size="large" src={imageExample} alt="avatar" />,
+        <DecoratedAvatar size="large" src={imageExample} alt="avatar" />,
       );
 
       const tree = component.toJSON();
diff --git a/src/shared-components/banner/style.ts b/src/shared-components/banner/style.ts
index b9cd5b149..d9400295e 100644
--- a/src/shared-components/banner/style.ts
+++ b/src/shared-components/banner/style.ts
@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
 import { buttonReset } from 'src/utils/styles/buttonReset';
+import { ThemeType } from 'src/constants/themes/types';
 
 import {
   BOX_SHADOWS,
-  COLORS,
   MEDIA_QUERIES,
   SPACER,
   TYPOGRAPHY_CONSTANTS,
@@ -12,18 +11,18 @@ import {
 
 import { BannerType } from '.';
 
-const defaultAlertStyles = css`
-  background-color: ${COLORS.primary};
+const defaultAlertStyles = (theme: ThemeType) => `
+  background-color: ${theme.COLORS.primary};
   box-shadow: 0px 8px 24px rgba(51, 46, 84, 0.05);
 `;
 
-const successAlertStyles = css`
-  background-color: ${COLORS.success};
+const successAlertStyles = (theme: ThemeType) => `
+  background-color: ${theme.COLORS.success};
   box-shadow: 0px 8px 24px rgba(43, 110, 51, 0.05);
 `;
 
-const errorAlertStyles = css`
-  background-color: ${COLORS.error};
+const errorAlertStyles = (theme: ThemeType) => `
+  background-color: ${theme.COLORS.error};
   box-shadow: 0px 8px 24px rgba(189, 32, 15, 0.05);
 `;
 
@@ -44,16 +43,16 @@ export const BannerContainer = styled.button<{
   padding: ${SPACER.medium};
   border-radius: ${SPACER.small};
 
-  ${({ bannerType }) => {
+  ${({ bannerType, theme }) => {
     switch (bannerType) {
       case 'danger':
-        return errorAlertStyles;
+        return errorAlertStyles(theme);
       case 'error':
-        return errorAlertStyles;
+        return errorAlertStyles(theme);
       case 'success':
-        return successAlertStyles;
+        return successAlertStyles(theme);
       default:
-        return defaultAlertStyles;
+        return defaultAlertStyles(theme);
     }
   }};
 
@@ -68,7 +67,7 @@ export const MainContainer = styled.div`
   flex-flow: row nowrap;
   justify-content: flex-start;
   align-items: flex-start;
-  color: ${COLORS.white};
+  color: ${({ theme }) => theme.COLORS.white};
   font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.caption};
 `;
 
@@ -80,6 +79,6 @@ export const IconContainer = styled.div`
   svg {
     height: ${SPACER.medium};
     width: ${SPACER.medium};
-    fill: ${COLORS.white};
+    fill: ${({ theme }) => theme.COLORS.white};
   }
 `;
diff --git a/src/shared-components/banner/test.tsx b/src/shared-components/banner/test.tsx
index fde644705..d9fdec45a 100644
--- a/src/shared-components/banner/test.tsx
+++ b/src/shared-components/banner/test.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import TestRenderer from 'react-test-renderer';
+import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
 
 import { Banner } from './index';
 
 describe('Banner UI snapshots', () => {
+  const DecoratedBanner = decorateWithThemeProvider(Banner);
+
   test('renders success type and text', () => {
     const component = TestRenderer.create(
-      <Banner content="Success Banner" type="success" />,
+      <DecoratedBanner content="Success Banner" type="success" />,
     );
 
     const tree = component.toJSON();
@@ -15,7 +18,7 @@ describe('Banner UI snapshots', () => {
 
   test('renders error type and text', () => {
     const component = TestRenderer.create(
-      <Banner content="Error banner" type="error" />,
+      <DecoratedBanner content="Error banner" type="error" />,
     );
 
     const tree = component.toJSON();
@@ -23,7 +26,9 @@ describe('Banner UI snapshots', () => {
   });
 
   test('renders info type and text', () => {
-    const component = TestRenderer.create(<Banner content="Default banner" />);
+    const component = TestRenderer.create(
+      <DecoratedBanner content="Default banner" />,
+    );
 
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
@@ -33,7 +38,7 @@ describe('Banner UI snapshots', () => {
     jest.useFakeTimers();
     const spy = jest.fn();
     const component = TestRenderer.create(
-      <Banner content="Banner with click handler" onClick={spy} />,
+      <DecoratedBanner content="Banner with click handler" onClick={spy} />,
     );
 
     component.root.findByType('button').props.onClick();
diff --git a/src/shared-components/callout/test.tsx b/src/shared-components/callout/test.tsx
index d42645de5..c4404f1e3 100644
--- a/src/shared-components/callout/test.tsx
+++ b/src/shared-components/callout/test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
 
 import NeckGlyph from '../../svgs/glyphs/neck-glyph.svg';
 import { COLORS } from '../../constants';
@@ -7,24 +8,26 @@ import { COLORS } from '../../constants';
 import { Callout } from './index';
 
 describe('<Callout />', () => {
+  const DecoratedCallout = decorateWithThemeProvider(Callout);
+
   describe('UI snapshots', () => {
     it('renders a simple callout', () => {
       const component = renderer.create(
-        <Callout>
+        <DecoratedCallout>
           Simple callout text. <strong>Bold text supported</strong>
-        </Callout>,
+        </DecoratedCallout>,
       );
       const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
     it('renders callout with custom color and icon', () => {
       const component = renderer.create(
-        <Callout
+        <DecoratedCallout
           icon={<NeckGlyph width={40} height={40} />}
           color={COLORS.primaryTint2}
         >
           Callout text with <strong>custom color</strong> and icon.
-        </Callout>,
+        </DecoratedCallout>,
       );
       const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
diff --git a/src/shared-components/carousel/arrow/test.tsx b/src/shared-components/carousel/arrow/test.tsx
index 4943f153b..28f316782 100644
--- a/src/shared-components/carousel/arrow/test.tsx
+++ b/src/shared-components/carousel/arrow/test.tsx
@@ -1,13 +1,18 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
 
 import Arrow from './index';
 
 describe('<Arrow />', () => {
+  const DecoratedArrow = decorateWithThemeProvider(Arrow);
+
   describe('UI snapshots', () => {
     it('renders with props', () => {
       const tree = renderer
-        .create(<Arrow prev disabled={false} onClick={() => undefined} />)
+        .create(
+          <DecoratedArrow prev disabled={false} onClick={() => undefined} />,
+        )
         .toJSON();
 
       expect(tree).toMatchSnapshot();
@@ -16,7 +21,7 @@ describe('<Arrow />', () => {
     it('renders with bottom right alignment', () => {
       const tree = renderer
         .create(
-          <Arrow
+          <DecoratedArrow
             bottomRightAlignedArrows
             prev
             disabled
diff --git a/src/shared-components/field/test.tsx b/src/shared-components/field/test.tsx
index cbee2abdb..72bb685ac 100644
--- a/src/shared-components/field/test.tsx
+++ b/src/shared-components/field/test.tsx
@@ -1,18 +1,21 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
+import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
 
 import { MessageItem } from '../verificationMessages/style';
 
 import { Field } from './index';
 
 describe('<Field />', () => {
+  const DecoratedField = decorateWithThemeProvider(Field);
+
   describe('UI Snapshot', () => {
     it('renders with default props', () => {
       const component = renderer.create(
-        <Field>
+        <DecoratedField>
           <Field.Input />
-        </Field>,
+        </DecoratedField>,
       );
 
       const tree = component.toJSON();
@@ -23,9 +26,9 @@ describe('<Field />', () => {
       const labelText = 'Test Label';
       const labelFor = 'for-input-id';
       const component = renderer.create(
-        <Field label={labelText} labelFor={labelFor}>
+        <DecoratedField label={labelText} labelFor={labelFor}>
           <Field.Input />
-        </Field>,
+        </DecoratedField>,
       );
 
       const tree = component.toJSON();
@@ -39,13 +42,13 @@ describe('<Field />', () => {
         </React.Fragment>
       );
       const component = renderer.create(
-        <Field
+        <DecoratedField
           hideMessagesIcon
           hintMessage="hint message"
           messages={{ error: errorMessage }}
         >
           <Field.Input />
-        </Field>,
+        </DecoratedField>,
       );
 
       const tree = component.toJSON();
@@ -57,9 +60,9 @@ describe('<Field />', () => {
     it('renders the error message', () => {
       const messages = { maxLength: 'Maximum 6 characteres' };
       const wrapper = mount(
-        <Field messages={messages} messagesType="error">
+        <DecoratedField messages={messages} messagesType="error">
           <Field.Input />
-        </Field>,
+        </DecoratedField>,
       );
 
       const li = wrapper.find(MessageItem);
@@ -71,9 +74,9 @@ describe('<Field />', () => {
     it('renders the success messages', () => {
       const messages = { success: 'Thanks for completing' };
       const wrapper = mount(
-        <Field messages={messages} messagesType="success">
+        <DecoratedField messages={messages} messagesType="success">
           <Field.Input />
-        </Field>,
+        </DecoratedField>,
       );
 
       const li = wrapper.find(MessageItem);
diff --git a/src/shared-components/indicator/test.tsx b/src/shared-components/indicator/test.tsx
index 6a95f7491..263a2e5eb 100644
--- a/src/shared-components/indicator/test.tsx
+++ b/src/shared-components/indicator/test.tsx
@@ -1,18 +1,21 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
 
 import { Indicator } from './index';
 
 describe('<Indicator />', () => {
+  const DecoratedIndicator = decorateWithThemeProvider(Indicator);
+
   describe('UI snapshots', () => {
     it('renders the correct css with a text', () => {
-      const component = renderer.create(<Indicator text="1" />);
+      const component = renderer.create(<DecoratedIndicator text="1" />);
       const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('renders the correct css with a number', () => {
-      const component = renderer.create(<Indicator text={3} />);
+      const component = renderer.create(<DecoratedIndicator text={3} />);
       const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
diff --git a/src/shared-components/selectorButton/test.tsx b/src/shared-components/selectorButton/test.tsx
index 78dfbb383..539e2d06a 100644
--- a/src/shared-components/selectorButton/test.tsx
+++ b/src/shared-components/selectorButton/test.tsx
@@ -1,16 +1,21 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
+import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
 
 import AcneOneGlyph from '../../svgs/glyphs/acne-one-glyph.svg';
 
 import { SelectorButton } from './index';
 
 describe('<SelectorButton />', () => {
+  const DecoratedSelectorButton = decorateWithThemeProvider(SelectorButton);
+
   describe('UI snapshots', () => {
     test('when children is undefined', () => {
       const tree = renderer
-        .create(<SelectorButton checked={false} onClick={() => undefined} />)
+        .create(
+          <DecoratedSelectorButton checked={false} onClick={() => undefined} />,
+        )
         .toJSON();
 
       expect(tree).toMatchSnapshot();
@@ -19,9 +24,9 @@ describe('<SelectorButton />', () => {
     test('when children is a node', () => {
       const tree = renderer
         .create(
-          <SelectorButton checked={false} onClick={() => undefined}>
+          <DecoratedSelectorButton checked={false} onClick={() => undefined}>
             SelectorButton Text
-          </SelectorButton>,
+          </DecoratedSelectorButton>,
         )
         .toJSON();
 
@@ -31,9 +36,13 @@ describe('<SelectorButton />', () => {
     test('when checked type is primary', () => {
       const tree = renderer
         .create(
-          <SelectorButton checked onClick={() => undefined} type="primary">
+          <DecoratedSelectorButton
+            checked
+            onClick={() => undefined}
+            type="primary"
+          >
             SelectorButton Text
-          </SelectorButton>,
+          </DecoratedSelectorButton>,
         )
         .toJSON();
 
@@ -43,9 +52,13 @@ describe('<SelectorButton />', () => {
     test('when checked type is secondary', () => {
       const tree = renderer
         .create(
-          <SelectorButton checked onClick={() => undefined} type="secondary">
+          <DecoratedSelectorButton
+            checked
+            onClick={() => undefined}
+            type="secondary"
+          >
             SelectorButton Text
-          </SelectorButton>,
+          </DecoratedSelectorButton>,
         )
         .toJSON();
 
@@ -55,13 +68,13 @@ describe('<SelectorButton />', () => {
     test('when is checkbox', () => {
       const tree = renderer
         .create(
-          <SelectorButton
+          <DecoratedSelectorButton
             checked={false}
             onClick={() => undefined}
             selector="checkbox"
           >
             SelectorButton Text
-          </SelectorButton>,
+          </DecoratedSelectorButton>,
         )
         .toJSON();
 
@@ -71,7 +84,7 @@ describe('<SelectorButton />', () => {
     describe('when Icon added', () => {
       it("hides icon for checkbox with size 'small'", () => {
         const tree = renderer.create(
-          <SelectorButton
+          <DecoratedSelectorButton
             checked={false}
             onClick={() => undefined}
             selector="checkbox"
@@ -79,7 +92,7 @@ describe('<SelectorButton />', () => {
             size="small"
           >
             SelectorButton Text
-          </SelectorButton>,
+          </DecoratedSelectorButton>,
         );
 
         expect(tree).toMatchSnapshot();
@@ -87,7 +100,7 @@ describe('<SelectorButton />', () => {
 
       it("hides icon for radio button size 'small'", () => {
         const tree = renderer.create(
-          <SelectorButton
+          <DecoratedSelectorButton
             checked={false}
             onClick={() => undefined}
             selector="radio"
@@ -95,7 +108,7 @@ describe('<SelectorButton />', () => {
             size="small"
           >
             SelectorButton Text
-          </SelectorButton>,
+          </DecoratedSelectorButton>,
         );
 
         expect(tree).toMatchSnapshot();
@@ -103,7 +116,7 @@ describe('<SelectorButton />', () => {
 
       it("displays icon for checkbox with size 'large'", () => {
         const tree = renderer.create(
-          <SelectorButton
+          <DecoratedSelectorButton
             checked={false}
             onClick={() => undefined}
             selector="checkbox"
@@ -111,7 +124,7 @@ describe('<SelectorButton />', () => {
             size="large"
           >
             SelectorButton Text
-          </SelectorButton>,
+          </DecoratedSelectorButton>,
         );
 
         expect(tree).toMatchSnapshot();
@@ -119,7 +132,7 @@ describe('<SelectorButton />', () => {
 
       it("displays icon for radio button with size 'large'", () => {
         const tree = renderer.create(
-          <SelectorButton
+          <DecoratedSelectorButton
             checked={false}
             onClick={() => undefined}
             selector="radio"
@@ -127,7 +140,7 @@ describe('<SelectorButton />', () => {
             size="large"
           >
             SelectorButton Text
-          </SelectorButton>,
+          </DecoratedSelectorButton>,
         );
 
         expect(tree).toMatchSnapshot();
@@ -135,7 +148,7 @@ describe('<SelectorButton />', () => {
 
       it('displays check mark for checked checkbox', () => {
         const tree = renderer.create(
-          <SelectorButton
+          <DecoratedSelectorButton
             checked
             onClick={() => undefined}
             selector="checkbox"
@@ -143,7 +156,7 @@ describe('<SelectorButton />', () => {
             size="large"
           >
             SelectorButton Text
-          </SelectorButton>,
+          </DecoratedSelectorButton>,
         );
 
         expect(tree).toMatchSnapshot();
@@ -151,7 +164,7 @@ describe('<SelectorButton />', () => {
 
       it('displays check mark for checked radio button', () => {
         const tree = renderer.create(
-          <SelectorButton
+          <DecoratedSelectorButton
             checked
             onClick={() => undefined}
             selector="radio"
@@ -159,7 +172,7 @@ describe('<SelectorButton />', () => {
             size="large"
           >
             SelectorButton Text
-          </SelectorButton>,
+          </DecoratedSelectorButton>,
         );
 
         expect(tree).toMatchSnapshot();
@@ -170,14 +183,16 @@ describe('<SelectorButton />', () => {
   describe('onClick callback', () => {
     it('is invoked on click', () => {
       const spy = jest.fn();
-      const wrapper = shallow(<SelectorButton checked={false} onClick={spy} />);
+      const wrapper = mount(
+        <DecoratedSelectorButton checked={false} onClick={spy} />,
+      );
 
       wrapper.simulate('click');
       expect(spy).toHaveBeenCalled();
     });
 
     it('Does nothing when no onClick is set', () => {
-      const wrapper = shallow(<SelectorButton checked={false} />);
+      const wrapper = mount(<DecoratedSelectorButton checked={false} />);
       // Just check that no exception is thrown
       wrapper.simulate('click');
       wrapper.simulate('keypress', { key: 'Enter' });
@@ -185,7 +200,9 @@ describe('<SelectorButton />', () => {
 
     it('is invoked when enter is pressed', () => {
       const spy = jest.fn();
-      const wrapper = shallow(<SelectorButton checked={false} onClick={spy} />);
+      const wrapper = mount(
+        <DecoratedSelectorButton checked={false} onClick={spy} />,
+      );
 
       wrapper.simulate('keypress', { key: 'Enter' });
       expect(spy).toHaveBeenCalled();
diff --git a/src/shared-components/toggle/test.tsx b/src/shared-components/toggle/test.tsx
index 76f57158d..31a64f458 100644
--- a/src/shared-components/toggle/test.tsx
+++ b/src/shared-components/toggle/test.tsx
@@ -1,16 +1,22 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import renderer from 'react-test-renderer';
+import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
 
 import { Toggle } from './index';
 
 describe('<Toggle />', () => {
   const labelText = 'Label Text';
+  const DecoratedToggle = decorateWithThemeProvider(Toggle);
 
   describe('UI snapshot', () => {
     it('renders the component', () => {
       const component = renderer.create(
-        <Toggle checked={false} label={labelText} onChange={() => undefined} />,
+        <DecoratedToggle
+          checked={false}
+          label={labelText}
+          onChange={() => undefined}
+        />,
       );
 
       const tree = component.toJSON();
@@ -21,7 +27,7 @@ describe('<Toggle />', () => {
   describe('when label is undefined', () => {
     test('does not render a label component', () => {
       const wrapper = shallow(
-        <Toggle checked={false} onChange={() => undefined} />,
+        <DecoratedToggle checked={false} onChange={() => undefined} />,
       );
       expect(wrapper.html().indexOf('label') === -1).toBe(true);
     });
@@ -30,7 +36,11 @@ describe('<Toggle />', () => {
   describe('when label is a string', () => {
     test('renders a text component', () => {
       const wrapper = shallow(
-        <Toggle checked={false} label={labelText} onChange={() => undefined} />,
+        <DecoratedToggle
+          checked={false}
+          label={labelText}
+          onChange={() => undefined}
+        />,
       );
 
       expect(wrapper.html().indexOf(labelText) > 0).toBe(true);
@@ -40,7 +50,7 @@ describe('<Toggle />', () => {
   describe('when checkbox is clicked', () => {
     test('fires onChange function with correct argument when function exists', () => {
       const spy = jest.fn();
-      const wrapper = mount(<Toggle checked={false} onChange={spy} />);
+      const wrapper = mount(<DecoratedToggle checked={false} onChange={spy} />);
 
       wrapper.find('[type="checkbox"]').simulate('click');
       expect(spy).toHaveBeenCalled();
diff --git a/src/shared-components/tooltip/test.tsx b/src/shared-components/tooltip/test.tsx
index bc989eaed..ee44e81f1 100644
--- a/src/shared-components/tooltip/test.tsx
+++ b/src/shared-components/tooltip/test.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { decorateWithThemeProvider } from 'tests/utils/decorateWithThemeProvider';
 
 import { Tooltip } from './index';
 
 describe('<Tooltip />', () => {
+  const DecoratedTooltip = decorateWithThemeProvider(Tooltip);
+
   describe('UI snapshot', () => {
     it('renders content and children', () => {
       const component = renderer.create(
-        <Tooltip position="bottom" content="Tooltip Content">
+        <DecoratedTooltip position="bottom" content="Tooltip Content">
           Tooltip Trigger
-        </Tooltip>,
+        </DecoratedTooltip>,
       );
 
       const tree = component.toJSON();
diff --git a/tests/utils/decorateWithThemeProvider.tsx b/tests/utils/decorateWithThemeProvider.tsx
new file mode 100644
index 000000000..428c8dd6a
--- /dev/null
+++ b/tests/utils/decorateWithThemeProvider.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ThemeProvider } from 'emotion-theming';
+
+import { primaryTheme } from '../../src/constants/themes';
+import type { ThemeType } from '../../src/constants/themes/types';
+
+type PropsType = Record<string, unknown>;
+
+/* eslint-disable react/jsx-props-no-spreading, @typescript-eslint/no-explicit-any */
+export const decorateWithThemeProvider = (
+  Component: any,
+  theme: ThemeType = primaryTheme,
+) => (props: PropsType) => (
+  <ThemeProvider theme={theme}>
+    <Component {...props} />
+  </ThemeProvider>
+);
+/* eslint-enable react/jsx-props-no-spreading */
diff --git a/tsconfig.json b/tsconfig.json
index fca75926b..ef4ad7086 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,5 +7,12 @@
     "outDir": "lib",
     "rootDirs": ["src"]
   },
-  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.tsx", "types/**/*.ts"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.js",
+    "src/**/*.tsx",
+    "tests/**/*.ts",
+    "tests/**/*.tsx",
+    "types/**/*.ts"
+  ]
 }