[gnome-software/wip/exalm/lozenges: 158/158] style: Refresh lozenges

[Alexander Mikhaylenko <alexm src gnome org>]

commit d4a0e974ef7a61a8b18efbef12a8733c1d4f1ace
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sat Dec 4 05:11:33 2021 +0500

    style: Refresh lozenges
    
    Make them work in dark, improve HC.
    
    Fixes https://gitlab.gnome.org/GNOME/gnome-software/-/issues/1539

 src/style-dark.css | 26 ++++++++++++++++++++++++++
 src/style-hc.css   | 11 +++--------
 src/style.css      | 39 +++++++++++++++++++++++++++++++++------
 3 files changed, 62 insertions(+), 14 deletions(-)
---
diff --git a/src/style-dark.css b/src/style-dark.css
index dfc920768..2ee783f7c 100644
--- a/src/style-dark.css
+++ b/src/style-dark.css
@@ -1,3 +1,29 @@
 .upgrade-banner-background {
        background: linear-gradient(to bottom, @green_5, @blue_5);
 }
+
+.context-tile-lozenge.green,
+.context-tile-lozenge.details-rating-0 {
+       color: @green_1;
+       background-color: alpha(@green_4, .25);
+}
+
+.context-tile-lozenge.blue,
+.context-tile-lozenge.details-rating-5 {
+       color: @blue_1;
+}
+
+.context-tile-lozenge.yellow,
+.context-tile-lozenge.details-rating-12 {
+       color: @yellow_2;
+       background: alpha(#cd9309, .25);
+}
+
+.context-tile-lozenge.details-rating-15 {
+       color: @orange_1;
+}
+
+.context-tile-lozenge.red,
+.context-tile-lozenge.details-rating-18 {
+       color: #ff7b63;
+}
diff --git a/src/style-hc.css b/src/style-hc.css
index 5240a206e..c28c23157 100644
--- a/src/style-hc.css
+++ b/src/style-hc.css
@@ -24,11 +24,6 @@ star-image {
        color: #000000;
 }
 
-.context-tile-lozenge.grey { background-color: #deddda; color: @theme_fg_color; }
-.context-tile-lozenge.green, .context-tile-lozenge.details-rating-0 { background-color: #b6f2c4; color: 
@theme_fg_color; }
-.context-tile-lozenge.red, .context-tile-lozenge.details-rating-18 { background-color: #fbd3cf; color: 
@theme_fg_color; }
-.context-tile-lozenge.details-rating-15 { background-color: #ffd7a5; color: @theme_fg_color; }
-.context-tile-lozenge.yellow, .context-tile-lozenge.details-rating-12 { background-color: #f7eb9f; color: 
@theme_fg_color; }
-.context-tile-lozenge.blue, .context-tile-lozenge.details-rating-5 { background-color: #d1e4fb; color: 
@theme_fg_color; }
-
-.community-built { color: @theme_fg_color; }
+.context-tile-lozenge {
+       box-shadow: inset 0 0 0 2px currentColor;
+}
diff --git a/src/style.css b/src/style.css
index ea098ddda..6cca2ea40 100644
--- a/src/style.css
+++ b/src/style.css
@@ -433,12 +433,39 @@ app-context-bar.vertical box:first-child .context-tile {
 
 .context-tile-lozenge image { -gtk-icon-style: symbolic; }
 
-.context-tile-lozenge.grey { background-color: #deddda; color: #5e5c64; }
-.context-tile-lozenge.green, .context-tile-lozenge.details-rating-0 { background-color: #b6f2c4; color: 
#208255; }
-.context-tile-lozenge.red, .context-tile-lozenge.details-rating-18 { background-color: #fbd3cf; color: 
#ab3342; }
-.context-tile-lozenge.details-rating-15 { background-color: #ffd7a5; color: #c75400; }
-.context-tile-lozenge.yellow, .context-tile-lozenge.details-rating-12 { background-color: #f7eb9f; color: 
#9c7107; }
-.context-tile-lozenge.blue, .context-tile-lozenge.details-rating-5 { background-color: #d1e4fb; color: 
#294d7a; }
+.context-tile-lozenge.grey {
+       color: alpha(@window_fg_color, .75);
+       background-color: alpha(@window_fg_color, .15);
+}
+
+.context-tile-lozenge.green,
+.context-tile-lozenge.details-rating-0 {
+       color: @green_5;
+       background-color: alpha(@green_3, .25);
+}
+
+.context-tile-lozenge.blue,
+.context-tile-lozenge.details-rating-5 {
+       color: @blue_4;
+       background-color: alpha(@blue_3, .25);
+}
+
+.context-tile-lozenge.yellow,
+.context-tile-lozenge.details-rating-12 {
+       color: #ae7b03;
+       background: alpha(@yellow_5, .25);
+}
+
+.context-tile-lozenge.details-rating-15 {
+       color: @orange_5;
+       background-color: alpha(@orange_4, .25);
+}
+
+.context-tile-lozenge.red,
+.context-tile-lozenge.details-rating-18 {
+       color: @red_4;
+       background-color: alpha(@red_2, .25);
+}
 
 .eol-red {
        font-weight: bold;