Identicon - Align GitLab UI Colors

This change updates the identicon classes
to use the GitLab UI color pallete.

Changelog: changed
EE: true

app/assets/stylesheets/components/avatar.scss

@@ -67,15 +67,12 @@ $avatar-sizes: (
   )
 );
 
-$identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $identicon-blue, $identicon-teal,
-  $identicon-orange, $identicon-gray;
-
 .avatar,
 .avatar-container {
   float: left;
   margin-right: $gl-padding;
   border-radius: $avatar-radius;
-  border: 1px solid $gray-normal;
+  border: 1px solid $t-gray-a-08;
 
   @each $size, $size-config in $avatar-sizes {
     &.s#{$size} {
@@ -125,8 +122,8 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: $identicon-text-color;
-  background-color: $identicon-gray;
+  color: $gray-900;
+  background-color: $gray-50;
 
   // Sizes
   @each $size, $size-config in $avatar-sizes {
@@ -143,9 +140,9 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
   }
 
   // Background colors
-  @for $i from 1 through length($identicon-backgrounds) {
+  @for $i from 1 through length($gl-avatar-identicon-bgs) {
     &.bg#{$i} {
-      background-color: nth($identicon-backgrounds, $i);
+      background-color: nth($gl-avatar-identicon-bgs, $i);
     }
   }
 }

app/assets/stylesheets/framework/variables.scss

@@ -633,18 +633,6 @@ $note-disabled-comment-color: #b2b2b2;
 $note-targe3-outside: #fffff0;
 $note-targe3-inside: #ffffd3;
 
-/*
-* Identicon
-*/
-$identicon-text-color: #525252 !default;
-$identicon-red: #ffebee !default;
-$identicon-purple: #f3e5f5 !default;
-$identicon-indigo: #e8eaf6 !default;
-$identicon-blue: #e3f2fd !default;
-$identicon-teal: #e0f2f1 !default;
-$identicon-orange: #fbe9e7 !default;
-$identicon-gray: #eee !default;
-
 /*
 * Calendar
 */

app/assets/stylesheets/startup/startup-dark.scss

@@ -2066,7 +2066,7 @@ svg.s16 {
   float: left;
   margin-right: 16px;
   border-radius: 50%;
-  border: 1px solid #333;
+  border: 1px solid rgba(255, 255, 255, 0.08);
 }
 .avatar.s16,
 .avatar-container.s16 {
@@ -2108,8 +2108,8 @@ svg.s16 {
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: #525252;
-  background-color: #eee;
+  color: #fafafa;
+  background-color: #303030;
 }
 .identicon.s16 {
   font-size: 10px;
@@ -2124,25 +2124,25 @@ svg.s16 {
   line-height: 38px;
 }
 .identicon.bg1 {
-  background-color: #ffebee;
+  background-color: #660e00;
 }
 .identicon.bg2 {
-  background-color: #f3e5f5;
+  background-color: #f4f0ff;
 }
 .identicon.bg3 {
-  background-color: #e8eaf6;
+  background-color: #f1f1ff;
 }
 .identicon.bg4 {
-  background-color: #e3f2fd;
+  background-color: #033464;
 }
 .identicon.bg5 {
-  background-color: #e0f2f1;
+  background-color: #0a4020;
 }
 .identicon.bg6 {
-  background-color: #fbe9e7;
+  background-color: #5c2900;
 }
 .identicon.bg7 {
-  background-color: #eee;
+  background-color: #303030;
 }
 .avatar-container {
   overflow: hidden;

app/assets/stylesheets/startup/startup-general.scss

@@ -1934,7 +1934,7 @@ svg.s16 {
   float: left;
   margin-right: 16px;
   border-radius: 50%;
-  border: 1px solid #f5f5f5;
+  border: 1px solid rgba(0, 0, 0, 0.08);
 }
 .avatar.s16,
 .avatar-container.s16 {
@@ -1976,8 +1976,8 @@ svg.s16 {
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: #525252;
-  background-color: #eee;
+  color: #303030;
+  background-color: #f0f0f0;
 }
 .identicon.s16 {
   font-size: 10px;
@@ -1992,25 +1992,25 @@ svg.s16 {
   line-height: 38px;
 }
 .identicon.bg1 {
-  background-color: #ffebee;
+  background-color: #fcf1ef;
 }
 .identicon.bg2 {
-  background-color: #f3e5f5;
+  background-color: #f4f0ff;
 }
 .identicon.bg3 {
-  background-color: #e8eaf6;
+  background-color: #f1f1ff;
 }
 .identicon.bg4 {
-  background-color: #e3f2fd;
+  background-color: #e9f3fc;
 }
 .identicon.bg5 {
-  background-color: #e0f2f1;
+  background-color: #ecf4ee;
 }
 .identicon.bg6 {
-  background-color: #fbe9e7;
+  background-color: #fdf1dd;
 }
 .identicon.bg7 {
-  background-color: #eee;
+  background-color: #f0f0f0;
 }
 .avatar-container {
   overflow: hidden;

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -2066,7 +2066,7 @@ svg.s16 {
   float: left;
   margin-right: 16px;
   border-radius: 50%;
-  border: 1px solid #333;
+  border: 1px solid rgba(255, 255, 255, 0.08);
 }
 .avatar.s16,
 .avatar-container.s16 {
@@ -2108,8 +2108,8 @@ svg.s16 {
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: #525252;
-  background-color: #eee;
+  color: #fafafa;
+  background-color: #303030;
 }
 .identicon.s16 {
   font-size: 10px;
@@ -2124,25 +2124,25 @@ svg.s16 {
   line-height: 38px;
 }
 .identicon.bg1 {
-  background-color: #ffebee;
+  background-color: #660e00;
 }
 .identicon.bg2 {
-  background-color: #f3e5f5;
+  background-color: #f4f0ff;
 }
 .identicon.bg3 {
-  background-color: #e8eaf6;
+  background-color: #f1f1ff;
 }
 .identicon.bg4 {
-  background-color: #e3f2fd;
+  background-color: #033464;
 }
 .identicon.bg5 {
-  background-color: #e0f2f1;
+  background-color: #0a4020;
 }
 .identicon.bg6 {
-  background-color: #fbe9e7;
+  background-color: #5c2900;
 }
 .identicon.bg7 {
-  background-color: #eee;
+  background-color: #303030;
 }
 .avatar-container {
   overflow: hidden;

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -1934,7 +1934,7 @@ svg.s16 {
   float: left;
   margin-right: 16px;
   border-radius: 50%;
-  border: 1px solid #f5f5f5;
+  border: 1px solid rgba(0, 0, 0, 0.08);
 }
 .avatar.s16,
 .avatar-container.s16 {
@@ -1976,8 +1976,8 @@ svg.s16 {
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: #525252;
-  background-color: #eee;
+  color: #303030;
+  background-color: #f0f0f0;
 }
 .identicon.s16 {
   font-size: 10px;
@@ -1992,25 +1992,25 @@ svg.s16 {
   line-height: 38px;
 }
 .identicon.bg1 {
-  background-color: #ffebee;
+  background-color: #fcf1ef;
 }
 .identicon.bg2 {
-  background-color: #f3e5f5;
+  background-color: #f4f0ff;
 }
 .identicon.bg3 {
-  background-color: #e8eaf6;
+  background-color: #f1f1ff;
 }
 .identicon.bg4 {
-  background-color: #e3f2fd;
+  background-color: #e9f3fc;
 }
 .identicon.bg5 {
-  background-color: #e0f2f1;
+  background-color: #ecf4ee;
 }
 .identicon.bg6 {
-  background-color: #fbe9e7;
+  background-color: #fdf1dd;
 }
 .identicon.bg7 {
-  background-color: #eee;
+  background-color: #f0f0f0;
 }
 .avatar-container {
   overflow: hidden;