[libhandy/more_colors_avatar: 51/51] avatar: Add more colors and dark variant

[Julian Sparber <jsparber src gnome org>]

commit f3bf0a02f416d0f41b5b021ca6db3b8e81c9f106
Author: Julian Sparber <julian sparber net>
Date:   Fri Mar 27 13:21:15 2020 +0100

    avatar: Add more colors and dark variant
    
    Signed-off-by: Julian Sparber <julian sparber net>

 src/hdy-avatar.c                   |  2 +-
 src/themes/Adwaita-dark.css        | 28 +++++++++++++++++++---
 src/themes/Adwaita.css             | 28 +++++++++++++++++++---
 src/themes/HighContrast.css        | 28 +++++++++++++++++++---
 src/themes/HighContrastInverse.css | 28 +++++++++++++++++++---
 src/themes/_shared-base.scss       | 49 ++++++++++++++++++++++++++++++++++++++
 src/themes/shared.css              | 22 +++++++++++++++++
 7 files changed, 172 insertions(+), 13 deletions(-)
---
diff --git a/src/hdy-avatar.c b/src/hdy-avatar.c
index 31ae8026..4abf52e1 100644
--- a/src/hdy-avatar.c
+++ b/src/hdy-avatar.c
@@ -16,7 +16,7 @@
 #include "hdy-avatar.h"
 #include "hdy-cairo-private.h"
 
-#define NUMBER_OF_COLORS 8
+#define NUMBER_OF_COLORS 10
 /**
  * SECTION:hdy-avatar
  * @short_description: A widget displaying an image, with a generated fallback.
diff --git a/src/themes/Adwaita-dark.css b/src/themes/Adwaita-dark.css
index 7fed6d0d..15b5dc6c 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -66,6 +66,28 @@ window.csd.unified:not(.solid-csd), window.csd.unified:not(.solid-csd) headerbar
 
 .windowhandle, .windowhandle * { -GtkWidget-window-dragging: true; }
 
+avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
+
+avatar.color1 { background-image: linear-gradient(#f5ca35, #ce8d09); color: #f9f4e1; }
+
+avatar.color2 { background-image: linear-gradient(#ff8c26, #cf4900); color: #ffe5c5; }
+
+avatar.color3 { background-image: linear-gradient(#ed333b, #b01f30); color: #f6c8c4; }
+
+avatar.color4 { background-image: linear-gradient(#ec86a9, #bf4e86); color: #fad1df; }
+
+avatar.color5 { background-image: linear-gradient(#62a0ea, #1a5fb4); color: #cfe1f5; }
+
+avatar.color6 { background-image: linear-gradient(#b154bb, #76419e); color: #e7c2e8; }
+
+avatar.color7 { background-image: linear-gradient(#b5835a, #704f32); color: #e5d6ca; }
+
+avatar.color8 { background-image: linear-gradient(#9a9996, #5e5c64); color: #d8d7d3; }
+
+avatar.color9 { background-image: linear-gradient(#0bbaf4, #098ab2); color: #b9eefe; }
+
+avatar.color10 { background-image: linear-gradient(#57e389, #26a269); color: #cbf7d5; }
+
 popover.combo { padding: 0px; }
 
 popover.combo list { border-style: none; background-color: transparent; }
@@ -154,11 +176,11 @@ list.preferences, list.preferences list { background-color: transparent; }
 
 list.preferences list.nested > row:not(:active):not(:hover):not(:selected), list.preferences list.nested > 
row:not(:active):hover:not(.activatable):not(:selected) { background-color: mix(#353535, #2d2d2d, 0.5); }
 
-list.preferences list.nested > row:not(:active):hover.activatable:not(:selected) { background-color: 
mix(#eeeeec, #2d2d2d, 0.95); }
+list.preferences list.nested > row.activatable:not(:active):hover:not(:selected) { background-color: 
mix(#eeeeec, #2d2d2d, 0.95); }
 
 list.preferences > row:not(.expander):not(:active):not(:hover):not(:selected), list.preferences > 
row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.preferences > row.expander 
row.header:not(:active):not(:hover):not(:selected), list.preferences > row.expander 
row.header:not(:active):hover:not(.activatable):not(:selected) { background-color: #2d2d2d; }
 
-list.preferences > row:not(.expander):not(:active):hover.activatable:not(:selected), list.preferences > 
row.expander row.header:not(:active):hover.activatable:not(:selected) { background-color: mix(#eeeeec, 
#2d2d2d, 0.95); }
+list.preferences > row.activatable:not(.expander):not(:active):hover:not(:selected), list.preferences > 
row.expander row.header.activatable:not(:active):hover:not(:selected) { background-color: mix(#eeeeec, 
#2d2d2d, 0.95); }
 
 list.preferences > row, list.preferences > row list > row { border-color: alpha(#1b1b1b, 0.7); border-style: 
solid; transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
@@ -168,7 +190,7 @@ list.preferences > row:first-child, list.preferences > row.expander:first-child
 
 list.preferences > row:last-child, list.preferences > row.checked-expander-row-previous-sibling, 
list.preferences > row.expander:checked { border-width: 1px; }
 
-list.preferences > row:last-child, list.preferences > row.checked-expander-row-previous-sibling, 
list.preferences > row.expander:checked, list.preferences > row.expander:not(:checked):last-child row.header, 
list.preferences > row.expander:not(:checked).checked-expander-row-previous-sibling row.header, 
list.preferences > row.expander.empty:checked row.header, list.preferences > row.expander list.nested > 
row:last-child { border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; 
border-bottom-right-radius: 8px; -gtk-outline-bottom-right-radius: 7px; }
+list.preferences > row:last-child, list.preferences > row.checked-expander-row-previous-sibling, 
list.preferences > row.expander:checked, list.preferences > row.expander:not(:checked):last-child row.header, 
list.preferences > row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, 
list.preferences > row.expander.empty:checked row.header, list.preferences > row.expander list.nested > 
row:last-child { border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; 
border-bottom-right-radius: 8px; -gtk-outline-bottom-right-radius: 7px; }
 
 list.preferences > row.expander:checked:not(:first-child), list.preferences > row.expander:checked + row { 
margin-top: 6px; }
 
diff --git a/src/themes/Adwaita.css b/src/themes/Adwaita.css
index 866817c6..96459ba7 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -66,6 +66,28 @@ window.csd.unified:not(.solid-csd), window.csd.unified:not(.solid-csd) headerbar
 
 .windowhandle, .windowhandle * { -GtkWidget-window-dragging: true; }
 
+avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
+
+avatar.color1 { background-image: linear-gradient(#f9eaaf, #e5d475); color: #d99d0a; }
+
+avatar.color2 { background-image: linear-gradient(#ffdcb2, #ffbb69); color: #e5763a; }
+
+avatar.color3 { background-image: linear-gradient(#f6cac7, #f6968c); color: #db4651; }
+
+avatar.color4 { background-image: linear-gradient(#fedae9, #fda7c5); color: #cf5d95; }
+
+avatar.color5 { background-image: linear-gradient(#d2e6fa, #9ec5f7); color: #4583cc; }
+
+avatar.color6 { background-image: linear-gradient(#e7c8e8, #d291d2); color: #9552b0; }
+
+avatar.color7 { background-image: linear-gradient(#e5d6ca, #cdab8f); color: #916949; }
+
+avatar.color8 { background-image: linear-gradient(#d8d7d3, #aeada8); color: #64626b; }
+
+avatar.color9 { background-image: linear-gradient(#c4f0fe, #82daf6); color: #11a0cf; }
+
+avatar.color10 { background-image: linear-gradient(#c4f2cf, #82d49f); color: #28ab6f; }
+
 popover.combo { padding: 0px; }
 
 popover.combo list { border-style: none; background-color: transparent; }
@@ -154,11 +176,11 @@ list.preferences, list.preferences list { background-color: transparent; }
 
 list.preferences list.nested > row:not(:active):not(:hover):not(:selected), list.preferences list.nested > 
row:not(:active):hover:not(.activatable):not(:selected) { background-color: mix(#f6f5f4, #ffffff, 0.5); }
 
-list.preferences list.nested > row:not(:active):hover.activatable:not(:selected) { background-color: 
mix(#2e3436, #ffffff, 0.95); }
+list.preferences list.nested > row.activatable:not(:active):hover:not(:selected) { background-color: 
mix(#2e3436, #ffffff, 0.95); }
 
 list.preferences > row:not(.expander):not(:active):not(:hover):not(:selected), list.preferences > 
row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.preferences > row.expander 
row.header:not(:active):not(:hover):not(:selected), list.preferences > row.expander 
row.header:not(:active):hover:not(.activatable):not(:selected) { background-color: #ffffff; }
 
-list.preferences > row:not(.expander):not(:active):hover.activatable:not(:selected), list.preferences > 
row.expander row.header:not(:active):hover.activatable:not(:selected) { background-color: mix(#2e3436, 
#ffffff, 0.95); }
+list.preferences > row.activatable:not(.expander):not(:active):hover:not(:selected), list.preferences > 
row.expander row.header.activatable:not(:active):hover:not(:selected) { background-color: mix(#2e3436, 
#ffffff, 0.95); }
 
 list.preferences > row, list.preferences > row list > row { border-color: alpha(#cdc7c2, 0.7); border-style: 
solid; transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
@@ -168,7 +190,7 @@ list.preferences > row:first-child, list.preferences > row.expander:first-child
 
 list.preferences > row:last-child, list.preferences > row.checked-expander-row-previous-sibling, 
list.preferences > row.expander:checked { border-width: 1px; }
 
-list.preferences > row:last-child, list.preferences > row.checked-expander-row-previous-sibling, 
list.preferences > row.expander:checked, list.preferences > row.expander:not(:checked):last-child row.header, 
list.preferences > row.expander:not(:checked).checked-expander-row-previous-sibling row.header, 
list.preferences > row.expander.empty:checked row.header, list.preferences > row.expander list.nested > 
row:last-child { border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; 
border-bottom-right-radius: 8px; -gtk-outline-bottom-right-radius: 7px; }
+list.preferences > row:last-child, list.preferences > row.checked-expander-row-previous-sibling, 
list.preferences > row.expander:checked, list.preferences > row.expander:not(:checked):last-child row.header, 
list.preferences > row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, 
list.preferences > row.expander.empty:checked row.header, list.preferences > row.expander list.nested > 
row:last-child { border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; 
border-bottom-right-radius: 8px; -gtk-outline-bottom-right-radius: 7px; }
 
 list.preferences > row.expander:checked:not(:first-child), list.preferences > row.expander:checked + row { 
margin-top: 6px; }
 
diff --git a/src/themes/HighContrast.css b/src/themes/HighContrast.css
index 32f4a63b..21f302cc 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -66,6 +66,28 @@ window.csd.unified:not(.solid-csd), window.csd.unified:not(.solid-csd) headerbar
 
 .windowhandle, .windowhandle * { -GtkWidget-window-dragging: true; }
 
+avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
+
+avatar.color1 { background-image: linear-gradient(#f9eaaf, #e5d475); color: #d99d0a; }
+
+avatar.color2 { background-image: linear-gradient(#ffdcb2, #ffbb69); color: #e5763a; }
+
+avatar.color3 { background-image: linear-gradient(#f6cac7, #f6968c); color: #db4651; }
+
+avatar.color4 { background-image: linear-gradient(#fedae9, #fda7c5); color: #cf5d95; }
+
+avatar.color5 { background-image: linear-gradient(#d2e6fa, #9ec5f7); color: #4583cc; }
+
+avatar.color6 { background-image: linear-gradient(#e7c8e8, #d291d2); color: #9552b0; }
+
+avatar.color7 { background-image: linear-gradient(#e5d6ca, #cdab8f); color: #916949; }
+
+avatar.color8 { background-image: linear-gradient(#d8d7d3, #aeada8); color: #64626b; }
+
+avatar.color9 { background-image: linear-gradient(#c4f0fe, #82daf6); color: #11a0cf; }
+
+avatar.color10 { background-image: linear-gradient(#c4f2cf, #82d49f); color: #28ab6f; }
+
 popover.combo { padding: 0px; }
 
 popover.combo list { border-style: none; background-color: transparent; }
@@ -154,11 +176,11 @@ list.preferences, list.preferences list { background-color: transparent; }
 
 list.preferences list.nested > row:not(:active):not(:hover):not(:selected), list.preferences list.nested > 
row:not(:active):hover:not(.activatable):not(:selected) { background-color: mix(#fdfdfc, #ffffff, 0.5); }
 
-list.preferences list.nested > row:not(:active):hover.activatable:not(:selected) { background-color: 
mix(#272c2e, #ffffff, 0.95); }
+list.preferences list.nested > row.activatable:not(:active):hover:not(:selected) { background-color: 
mix(#272c2e, #ffffff, 0.95); }
 
 list.preferences > row:not(.expander):not(:active):not(:hover):not(:selected), list.preferences > 
row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.preferences > row.expander 
row.header:not(:active):not(:hover):not(:selected), list.preferences > row.expander 
row.header:not(:active):hover:not(.activatable):not(:selected) { background-color: #ffffff; }
 
-list.preferences > row:not(.expander):not(:active):hover.activatable:not(:selected), list.preferences > 
row.expander row.header:not(:active):hover.activatable:not(:selected) { background-color: mix(#272c2e, 
#ffffff, 0.95); }
+list.preferences > row.activatable:not(.expander):not(:active):hover:not(:selected), list.preferences > 
row.expander row.header.activatable:not(:active):hover:not(:selected) { background-color: mix(#272c2e, 
#ffffff, 0.95); }
 
 list.preferences > row, list.preferences > row list > row { border-color: alpha(#877b6e, 0.7); border-style: 
solid; transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
@@ -168,7 +190,7 @@ list.preferences > row:first-child, list.preferences > row.expander:first-child
 
 list.preferences > row:last-child, list.preferences > row.checked-expander-row-previous-sibling, 
list.preferences > row.expander:checked { border-width: 1px; }
 
-list.preferences > row:last-child, list.preferences > row.checked-expander-row-previous-sibling, 
list.preferences > row.expander:checked, list.preferences > row.expander:not(:checked):last-child row.header, 
list.preferences > row.expander:not(:checked).checked-expander-row-previous-sibling row.header, 
list.preferences > row.expander.empty:checked row.header, list.preferences > row.expander list.nested > 
row:last-child { border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; 
border-bottom-right-radius: 8px; -gtk-outline-bottom-right-radius: 7px; }
+list.preferences > row:last-child, list.preferences > row.checked-expander-row-previous-sibling, 
list.preferences > row.expander:checked, list.preferences > row.expander:not(:checked):last-child row.header, 
list.preferences > row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, 
list.preferences > row.expander.empty:checked row.header, list.preferences > row.expander list.nested > 
row:last-child { border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; 
border-bottom-right-radius: 8px; -gtk-outline-bottom-right-radius: 7px; }
 
 list.preferences > row.expander:checked:not(:first-child), list.preferences > row.expander:checked + row { 
margin-top: 6px; }
 
diff --git a/src/themes/HighContrastInverse.css b/src/themes/HighContrastInverse.css
index d7e0ecb7..0c5eef3e 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -66,6 +66,28 @@ window.csd.unified:not(.solid-csd), window.csd.unified:not(.solid-csd) headerbar
 
 .windowhandle, .windowhandle * { -GtkWidget-window-dragging: true; }
 
+avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
+
+avatar.color1 { background-image: linear-gradient(#f5ca35, #ce8d09); color: #f9f4e1; }
+
+avatar.color2 { background-image: linear-gradient(#ff8c26, #cf4900); color: #ffe5c5; }
+
+avatar.color3 { background-image: linear-gradient(#ed333b, #b01f30); color: #f6c8c4; }
+
+avatar.color4 { background-image: linear-gradient(#ec86a9, #bf4e86); color: #fad1df; }
+
+avatar.color5 { background-image: linear-gradient(#62a0ea, #1a5fb4); color: #cfe1f5; }
+
+avatar.color6 { background-image: linear-gradient(#b154bb, #76419e); color: #e7c2e8; }
+
+avatar.color7 { background-image: linear-gradient(#b5835a, #704f32); color: #e5d6ca; }
+
+avatar.color8 { background-image: linear-gradient(#9a9996, #5e5c64); color: #d8d7d3; }
+
+avatar.color9 { background-image: linear-gradient(#0bbaf4, #098ab2); color: #b9eefe; }
+
+avatar.color10 { background-image: linear-gradient(#57e389, #26a269); color: #cbf7d5; }
+
 popover.combo { padding: 0px; }
 
 popover.combo list { border-style: none; background-color: transparent; }
@@ -154,11 +176,11 @@ list.preferences, list.preferences list { background-color: transparent; }
 
 list.preferences list.nested > row:not(:active):not(:hover):not(:selected), list.preferences list.nested > 
row:not(:active):hover:not(.activatable):not(:selected) { background-color: mix(#303030, #2d2d2d, 0.5); }
 
-list.preferences list.nested > row:not(:active):hover.activatable:not(:selected) { background-color: 
mix(#f3f3f1, #2d2d2d, 0.95); }
+list.preferences list.nested > row.activatable:not(:active):hover:not(:selected) { background-color: 
mix(#f3f3f1, #2d2d2d, 0.95); }
 
 list.preferences > row:not(.expander):not(:active):not(:hover):not(:selected), list.preferences > 
row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.preferences > row.expander 
row.header:not(:active):not(:hover):not(:selected), list.preferences > row.expander 
row.header:not(:active):hover:not(.activatable):not(:selected) { background-color: #2d2d2d; }
 
-list.preferences > row:not(.expander):not(:active):hover.activatable:not(:selected), list.preferences > 
row.expander row.header:not(:active):hover.activatable:not(:selected) { background-color: mix(#f3f3f1, 
#2d2d2d, 0.95); }
+list.preferences > row.activatable:not(.expander):not(:active):hover:not(:selected), list.preferences > 
row.expander row.header.activatable:not(:active):hover:not(:selected) { background-color: mix(#f3f3f1, 
#2d2d2d, 0.95); }
 
 list.preferences > row, list.preferences > row list > row { border-color: alpha(#686868, 0.7); border-style: 
solid; transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
@@ -168,7 +190,7 @@ list.preferences > row:first-child, list.preferences > row.expander:first-child
 
 list.preferences > row:last-child, list.preferences > row.checked-expander-row-previous-sibling, 
list.preferences > row.expander:checked { border-width: 1px; }
 
-list.preferences > row:last-child, list.preferences > row.checked-expander-row-previous-sibling, 
list.preferences > row.expander:checked, list.preferences > row.expander:not(:checked):last-child row.header, 
list.preferences > row.expander:not(:checked).checked-expander-row-previous-sibling row.header, 
list.preferences > row.expander.empty:checked row.header, list.preferences > row.expander list.nested > 
row:last-child { border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; 
border-bottom-right-radius: 8px; -gtk-outline-bottom-right-radius: 7px; }
+list.preferences > row:last-child, list.preferences > row.checked-expander-row-previous-sibling, 
list.preferences > row.expander:checked, list.preferences > row.expander:not(:checked):last-child row.header, 
list.preferences > row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, 
list.preferences > row.expander.empty:checked row.header, list.preferences > row.expander list.nested > 
row:last-child { border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; 
border-bottom-right-radius: 8px; -gtk-outline-bottom-right-radius: 7px; }
 
 list.preferences > row.expander:checked:not(:first-child), list.preferences > row.expander:checked + row { 
margin-top: 6px; }
 
diff --git a/src/themes/_shared-base.scss b/src/themes/_shared-base.scss
index 934eeda1..dbc94e46 100644
--- a/src/themes/_shared-base.scss
+++ b/src/themes/_shared-base.scss
@@ -19,3 +19,52 @@ window.csd.unified:not(.solid-csd) {
     -GtkWidget-window-dragging: true;
   }
 }
+
+// Avatar
+
+avatar {
+  border-radius: 9999px;
+  -gtk-outline-radius: 9999px;
+  font-weight: bold;
+
+  // The list of colors to generate avatars.
+  // Each avatar color is rapresented by a font color, a gradient start color and a gradient stop color.
+  // There are 10 differnt colors for avtars in the list if you change the number of them you 
+  // need to update the NUMBER_OF_COLORS in src/hdy-avatar.c.
+  // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
+
+  $avatarcolorlist: (
+    (#d99d0a, #f9eaaf, #e5d475)
+    (#e5763a, #ffdcb2, #ffbb69)
+    (#db4651, #f6cac7, #f6968c)
+    (#cf5d95, #fedae9, #fda7c5)
+    (#4583cc, #d2e6fa, #9ec5f7)
+    (#9552b0, #e7c8e8, #d291d2)
+    (#916949, #e5d6ca, #cdab8f)
+    (#64626b, #d8d7d3, #aeada8)
+    (#11a0cf, #c4f0fe, #82daf6)
+    (#28ab6f, #c4f2cf, #82d49f)
+  );
+
+  @if $variant == 'dark' {
+    $avatarcolorlist: (
+      (#f9f4e1, #f5ca35, #ce8d09)
+      (#ffe5c5, #ff8c26, #cf4900)
+      (#f6c8c4, #ed333b, #b01f30)
+      (#fad1df, #ec86a9, #bf4e86)
+      (#cfe1f5, #62a0ea, #1a5fb4)
+      (#e7c2e8, #b154bb, #76419e)
+      (#e5d6ca, #b5835a, #704f32)
+      (#d8d7d3, #9a9996, #5e5c64)
+      (#b9eefe, #0bbaf4, #098ab2)
+      (#cbf7d5, #57e389, #26a269)
+    );
+  }
+  @for $i from 1 through length($avatarcolorlist) {
+    &.color#{$i} {
+      $avatarcolor: nth($avatarcolorlist, $i);
+      background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
+      color: nth($avatarcolor, 1);
+    }
+  }
+}
diff --git a/src/themes/shared.css b/src/themes/shared.css
index 6bfd522b..1421f01d 100644
--- a/src/themes/shared.css
+++ b/src/themes/shared.css
@@ -4,3 +4,25 @@ popover.combo list { min-width: 200px; }
 window.csd.unified:not(.solid-csd), window.csd.unified:not(.solid-csd) headerbar { border-radius: 0; }
 
 .windowhandle, .windowhandle * { -GtkWidget-window-dragging: true; }
+
+avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
+
+avatar.color1 { background-image: linear-gradient(#f9eaaf, #e5d475); color: #d99d0a; }
+
+avatar.color2 { background-image: linear-gradient(#ffdcb2, #ffbb69); color: #e5763a; }
+
+avatar.color3 { background-image: linear-gradient(#f6cac7, #f6968c); color: #db4651; }
+
+avatar.color4 { background-image: linear-gradient(#fedae9, #fda7c5); color: #cf5d95; }
+
+avatar.color5 { background-image: linear-gradient(#d2e6fa, #9ec5f7); color: #4583cc; }
+
+avatar.color6 { background-image: linear-gradient(#e7c8e8, #d291d2); color: #9552b0; }
+
+avatar.color7 { background-image: linear-gradient(#e5d6ca, #cdab8f); color: #916949; }
+
+avatar.color8 { background-image: linear-gradient(#d8d7d3, #aeada8); color: #64626b; }
+
+avatar.color9 { background-image: linear-gradient(#c4f0fe, #82daf6); color: #11a0cf; }
+
+avatar.color10 { background-image: linear-gradient(#c4f2cf, #82d49f); color: #28ab6f; }