Add new text colors and update severity colors

- bring in more colors from gitlab-ui for the project
  dashboard security status severity colors

app/assets/stylesheets/utilities.scss

@@ -76,10 +76,16 @@
 .gl-bg-green-100 { @include gl-bg-green-100;}
 
 .gl-text-blue-500 { @include gl-text-blue-500; }
+.gl-text-gray-500 { @include gl-text-gray-500; }
 .gl-text-gray-700 { @include gl-text-gray-700; }
 .gl-text-gray-900 { @include gl-text-gray-900; }
 .gl-text-red-700 { @include gl-text-red-700; }
+.gl-text-red-900 { @include gl-text-red-900; }
+.gl-text-orange-400 { @include gl-text-orange-400; }
+.gl-text-orange-500 { @include gl-text-orange-500; }
+.gl-text-orange-600 { @include gl-text-orange-600; }
 .gl-text-orange-700 { @include gl-text-orange-700; }
+.gl-text-green-500 { @include gl-text-green-500; }
 .gl-text-green-700 { @include gl-text-green-700; }
 
 .gl-align-items-center { @include gl-align-items-center; }

ee/app/assets/javascripts/security_dashboard/components/vulnerability_severity.vue

@@ -14,19 +14,19 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   css: {
     severityGroups: {
-      [severityGroupTypes.F]: ['gl-bg-red-100', 'gl-text-red-700'],
-      [severityGroupTypes.D]: ['gl-bg-orange-100', 'gl-text-orange-700'],
-      [severityGroupTypes.C]: ['gl-bg-purple-light', 'gl-text-purple'],
-      [severityGroupTypes.B]: ['gl-bg-gray-100', 'gl-text-gray-800'],
-      [severityGroupTypes.A]: ['gl-bg-green-100', 'gl-text-green-700'],
+      [severityGroupTypes.F]: ['gl-text-red-900'],
+      [severityGroupTypes.D]: ['gl-text-red-700'],
+      [severityGroupTypes.C]: ['gl-text-orange-600'],
+      [severityGroupTypes.B]: ['gl-text-orange-400'],
+      [severityGroupTypes.A]: ['gl-text-green-500'],
     },
     severityLevels: {
-      [severityLevels.CRITICAL]: ['gl-text-red-700'],
-      [severityLevels.HIGH]: ['gl-text-orange-700'],
-      [severityLevels.UNKNOWN]: ['gl-text-gray-800'],
-      [severityLevels.MEDIUM]: ['gl-text-purple'],
-      [severityLevels.LOW]: ['gl-text-gray-800'],
-      [severityLevels.NONE]: ['gl-text-green-700'],
+      [severityLevels.CRITICAL]: ['gl-text-red-900'],
+      [severityLevels.HIGH]: ['gl-text-red-700'],
+      [severityLevels.UNKNOWN]: ['gl-text-gray-500'],
+      [severityLevels.MEDIUM]: ['gl-text-orange-600'],
+      [severityLevels.LOW]: ['gl-text-orange-500'],
+      [severityLevels.NONE]: ['gl-text-green-500'],
     },
   },
   accordionItemsContentMaxHeight: '445px',
@@ -58,7 +58,7 @@ export default {
       return projects && projects.length < 1;
     },
     cssForSeverityGroup({ type }) {
-      return this.$options.css.severityGroups[type];
+      return [...this.$options.css.severityGroups[type], 'bg-transparent'];
     },
     cssForMostSevereVulnerability({ level }) {
       return this.$options.css.severityLevels[level] || [];