feat(css): create a Theme to override Bootstrap colors

Add scss to overwrite default Bootstrap colors. Add scss to toast component to demonstrate how theme
can be used.

#35

.storybook/webpack.config.js

@@ -18,6 +18,17 @@ module.exports = async ({ config, mode }) => {
       },
     ],
   })
+  config.module.rules.push({
+    test: /\.s[ac]ss$/i,
+    use: [
+      // Creates `style` nodes from JS strings
+      'style-loader',
+      // Translates CSS into CommonJS
+      'css-loader',
+      // Compiles Sass to CSS
+      'sass-loader',
+    ],
+  })
   config.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx']
   config.resolve.plugins = [new TsConfigPathsPlugin({})]
   config.plugins.push(

package.json

@@ -103,12 +103,14 @@
     "husky": "~4.0.0",
     "jest-canvas-mock": "~2.2.0",
     "lint-staged": "~9.5.0",
+    "node-sass": "~4.13.0",
     "prettier": "~1.19.1",
     "react": "~16.12.0",
     "react-bootstrap": "~1.0.0-beta.14",
     "react-docgen": "~5.1.0",
     "react-docgen-typescript-loader": "~3.6.0",
     "react-dom": "~16.12.0",
+    "sass-loader": "~8.0.0",
     "semantic-release": "~15.14.0",
     "sinon": "~8.0.1",
     "tsdx": "~0.12.0",

scss/_variables.scss

@@ -0,0 +1,10 @@
+$theme-colors: (
+  "primary": #1abc9c,
+  "secondary": #009b9e,
+  "success": #273647,
+  "warning": #ffc107,
+  "danger": #dc3545,
+  "info": #177db8,
+  "light": #fdfffc,
+  "dark": #011627
+);

scss/main.scss

@@ -0,0 +1,7 @@
+/* Bootstrap overrides */
+
+@import "./_variables";
+
+/* Import bootstrap */
+
+@import "node_modules/bootstrap/scss/bootstrap";

src/components/Toaster/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { ToastContainer, toast, Slide } from 'react-toastify'
 import { ToastProps, ToasterProps } from './interfaces'
 import { titleWithMessage, titleWithoutMessage } from './components'
+import './toaster.scss'
 
 export const Toast: any = (
   type: ToastProps['type'],

src/components/Toaster/toaster.scss

@@ -0,0 +1,17 @@
+@import "../../../scss/_variables";
+
+div.Toastify__toast.Toastify__toast--error {
+  background: map-get($theme-colors, error);
+}
+
+div.Toastify__toast.Toastify__toast--info {
+  background: map-get($theme-colors, info);
+}
+
+div.Toastify__toast.Toastify__toast--success {
+  background: map-get($theme-colors, success);
+}
+
+div.Toastify__toast.Toastify__toast--warning {
+  background: map-get($theme-colors, warning);
+}

src/index.tsx

@@ -1,6 +1,8 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 
+import '../scss/main.scss'
+
 library.add(fas)
 export * from './components/Toaster'
 export * from './components/Spinner'