1 files changed, 40 insertions, 81 deletions
diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss
index e27984bc..28bfe890 100644
--- a/src/assets/styles/_colors.scss
+++ b/src/assets/styles/_colors.scss
@@ -1,115 +1,74 @@
-// Custom Color system
+// SASS Color Variables
 $black: #000;
 $white: #fff;
 
+$blue-100: #eff2fb;
+$blue-500: #2d60e5;
+
+$green-100: #ecfdf1;
+$green-500: #0a7d06;
+
+$red-100: #feeeed;
+$red-500: #da1416;
+
+$yellow-100: #fff8e4;
+$yellow-500: #efc100;
+
 $gray-100: #fafafa;
 $gray-200: #f4f4f4;
 $gray-300: #dcdee0;
-$gray-400: #cccccc;
-$gray-500: #B3B3B3;
+$gray-400: #ccc;
+$gray-500: #b3b3b3;
 $gray-600: #999999;
 $gray-700: #666666;
 $gray-800: #333333;
 $gray-900: #161616;
 
-$blue-10: #eff2fb;
-$blue-20: #ccd7f4;
-$blue-30: #7295f1;
-$blue-40: #2d60e5;
-$blue-50: #1d3458;
-$blue-100: #1b2834;
-$blues: (
-  "100": $blue-10,
-  "200": $blue-20,
-  "300": $blue-30,
-  "400": $blue-40,
-  "500": $blue-50,
-  "900": $blue-100
-);
-
-// Accent colors
-$teal-20: #ccf0f5;
-$teal-50: #00b6cb;
-$teal-70: #098292;
-$teals: (
-  "200": $teal-20,
-  "500": $teal-50,
-  "700": $teal-70
-);
-
-$green-50: #0a7d06;
-$green-20: #c6e8c5;
-$green-10: #ecfdf1;
-$greens: (
-  "100": $green-10,
-  "200": $green-20,
-  "500": $green-50
-);
-
-$yellow-70: #db7c00;
-$yellow-50: #fedf39;
-$yellow-20: #fff8e4;
-$yellow-10: #fff8e4;
-$yellows: (
-  "100": $yellow-10,
-  "200": $yellow-20,
-  "500": $yellow-50,
-  "700": $yellow-70
-);
-
-$red-10: #fce9e9;
-$red-20: #fad3d3;
-$red-50: #da1416;
-$reds: (
-  "100": $red-10,
-  "200": $red-20,
-  "500": $red-50
-);
-
-$blue: $blue-40;
-$red: $red-50;
-$yellow: $yellow-50;
-$green: $green-50;
-$teal: $teal-50;
-$gray: $gray-400;
+// SASS Base Color Variables
+$blue: $blue-500;
+$green: $green-500;
+$red: $red-500;
+$yellow: $yellow-500;
 
 // Bootstrap will generate CSS variables for
 // all of the colors in this map.
 // https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables
 $colors: (
   "blue": $blue,
+  "green": $green,
   "red": $red,
   "yellow": $yellow,
-  "green": $green,
-  "teal": $teal,
-  "white": $white,
-  "gray": $gray
 );
 
+// SASS Theme Color Variables
+// Can be used as variants
+$danger: $red;
+$dark: $gray-900;
+$info: $blue;
+$light: $gray-100;
 $primary: $blue;
-$secondary: $gray-600;
-$secondary-dark: $gray-800;
-$secondary-light: $gray-200;
+$secondary: $gray-800;
 $success: $green;
-$info: $teal;
 $warning: $yellow;
-$danger: $red;
-$light: $gray-100;
-$dark: $gray-900;
+
+// Sass Color Variable Accents
+// Used for component styles and are
+// not available as variants
+$danger-light: $red-100;
+$info-light: $blue-100;
+$warning-light: $yellow-100;
+$success-light: $green-100;
 
 // Bootstrap will generate CSS variables for
 // all of the colors in this map.
 // https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables
 $theme-colors: (
   "primary": $primary,
-  "primary-dark": $blue-100,
-  "primary-light": $blue-10,
   "secondary": $secondary,
-  "secondary-dark": $secondary-dark,
-  "secondary-light": $secondary-light,
+  "dark": $dark,
+  "light": $light,
   "danger": $danger,
-  "warning": $warning,
   "info": $info,
-  "dark": $dark,
-  "light": $light
+  "success": $success,
+  "warning": $warning
 );