expand the $custom-colors options

Author: alishaevn

src/assets/theme/bootstrap-preview.scss

@@ -18,10 +18,24 @@ $black: #000000;
 
 // create our own custom colors map, and merge it with bootstrap's theme-colors map to generate utility functions that can be used throughout the map
 $custom-colors: (
-  'light-2': darken($light, 3%),
+  'light-1': darken($light, 3%),
+  'light-2': darken($light, 5%),
   'light-3': darken($light, 10%),
-  'secondary-2': darken($secondary, 3%),
+  'light-4': darken($light, 20%),
+  'light-5': $light,
+  'light-6': lighten($light, 3%),
+  'light-7': lighten($light, 5%),
+  'light-8': lighten($light, 10%),
+  'light-9': lighten($light, 20%),
+  'secondary-1': darken($secondary, 3%),
+  'secondary-2': darken($secondary, 5%),
   'secondary-3': darken($secondary, 10%),
+  'secondary-4': darken($secondary, 20%),
+  'secondary-5': $secondary,
+  'secondary-6': lighten($secondary, 3%),
+  'secondary-7': lighten($secondary, 5%),
+  'secondary-8': lighten($secondary, 10%),
+  'secondary-9': lighten($secondary, 20%),
   'black': $black,
   'white': $white,
 );

src/components/StatusBar/StatusBar.jsx

@@ -43,7 +43,7 @@ const StatusBar = ({ backgroundColor, statusArray, apiRequestStatus, addClass })
 StatusBar.propTypes = {
   addClass: PropTypes.string,
   apiRequestStatus: PropTypes.string.isRequired,
-  // the webstore is currently configured to only accept 'light' or 'secondary' as the backgroundColor options.
+  // the webstore is currently configured to only accept 'light' or 'secondary' as the backgroundColor options because of the $custom-colors variable.
   // we are not limiting the prop type to only those two strings because the webstore options may expand in the future.
   backgroundColor: PropTypes.string,
   statusArray: PropTypes.arrayOf(PropTypes.shape({})).isRequired,

src/compounds/RequestItem/RequestItem.jsx

@@ -10,7 +10,7 @@ const RequestItem = React.forwardRef(({ backgroundColor, index, request }, ref)
   const { createdAt, description, href, img, title, status, updatedAt } = request
   const { text, textColor } = status
   const image = { ...img, height: 70, width: 70 }
-  const bg = index % 2 === 0 ? `bg-${backgroundColor}` : `bg-${backgroundColor}-2`
+  const bg = index % 2 === 0 ? `bg-${backgroundColor}` : `bg-${backgroundColor}-1`
 
   return (
     <article