move the default theme colors into a module.scss file

this move was done in preparation for allowing the toggle icon rendered
by the "navbar-toggler" class to be styled with the same colors as the
rest of the navbar. the colors exist in a "module.scss" file so that they
can be imported into our ".scss" AND ".jsx" files.

I also updated the colors from greyscale to match those in the webstore
template. greyscale was chosen initially as not to spend too much time
picking a color palette and distracting from component creation. using
color now allows us to see some of the slight color variances better.

- ref: #207

Author: alishaevn

src/assets/theme/bootstrap-preview.scss

@@ -1,17 +1,5 @@
-// these colors and variables match what is in the webstore's theme.module.scss file. this file enables us to see the preview of what these overrides will look like without actually importing these from here into the webstore project. In order to see a preview in storybook of how components will look with custom colors, these values must be updated.
-
-$primary: #333333;
-$secondary: #CCCCCC;
-$success: #666666;
-$info: #999999;
-$warning: #2A2A2A;
-$danger: #606060;
-$light: #F8F9FA;
-$dark: #212529;
-$white: #FFFFFF;
-$black: #000000;
-
-// these imports must be AFTER the theme color overrides above in order to properly override bootstrap's colors, but before the theme maps.
+@import './default-colors.module.scss';
+// these imports must be AFTER the theme colors override import above in order to properly override bootstrap's colors, but before the theme maps.
 @import '../../../node_modules/bootstrap/scss/functions';
 @import '../../../node_modules/bootstrap/scss/variables';
 @import '../../../node_modules/bootstrap/scss/mixins';

src/assets/theme/default-colors.module.scss

@@ -0,0 +1,28 @@
+/**
+ * This file contains the color variables for the theme. Matching those in each webstore instance's "theme.module.scss" file.
+ *
+ * They exist in a "module.scss" file so that they can be imported into our ".scss" AND ".jsx" files.
+ */
+$primary: #614570;
+$secondary: #936AAA;
+$light: #F2F2F2;
+$dark: #070818;
+$success: #B0E298;
+$info: #8eb3fc;
+$warning: #E9DF00;
+$danger: #D20000;
+$black: #000000;
+$white: #FFFFFF;
+
+:export {
+  primary: $primary;
+  secondary: $secondary;
+  success: $success;
+  info: $info;
+  warning: $warning;
+  danger: $danger;
+  light: $light;
+  dark: $dark;
+  black: $black;
+  white: $white;
+}