[gnome-clocks] Set colors as in Software Lozenges

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 4c1146d68006f6f1c59ccd0930f5e404d93c7b5b
Author: Maximiliano Sandoval R <msandova gnome org>
Date:   Tue Dec 14 01:15:02 2021 +0100

    Set colors as in Software Lozenges
    
    See https://gitlab.gnome.org/GNOME/gnome-software/-/merge_requests/1127
    
    Fixes: https://gitlab.gnome.org/GNOME/gnome-clocks/-/issues/200.

 data/css/gnome-clocks.css              | 35 ++++++++++++++++++++--------------
 data/css/gnome-clocks.dark.css         | 17 +++++++----------
 data/css/gnome-clocks.highcontrast.css |  4 +---
 3 files changed, 29 insertions(+), 27 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index 6e546233..7425e799 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -1,5 +1,9 @@
 window > stack:backdrop {
-       background-color: mix(@theme_unfocused_fg_color, @theme_unfocused_bg_color, 0.95);
+       background-color: mix(
+               @theme_unfocused_fg_color,
+               @theme_unfocused_bg_color,
+               0.95
+       );
        box-shadow: none;
 }
 
@@ -88,12 +92,16 @@ spinbutton.clocks-timer-label button {
 }
 
 @keyframes clocks-blink {
-       0% { color: @theme_fg_color; }
-       100% { color: @accent_color; }
+       0% {
+               color: @theme_fg_color;
+       }
+       100% {
+               color: @accent_color;
+       }
 }
 
 .timer-countdown.timer-paused {
-       opacity: .55;
+       opacity: 0.55;
        animation-name: clocks-blink;
        animation-iteration-count: infinite;
        animation-timing-function: steps(2);
@@ -154,32 +162,31 @@ spinbutton.clocks-timer-label button {
        font-size: 2em;
        padding: 0.2em 0.5em;
        border-radius: 1em;
-       color: alpha(black, 0.8);
-       font-weight: 300;
-       transition: 0.4s background ease-in;
 }
 
 .none .clock-time {
-       background: #f6f5f4;
+       background: alpha(currentColor, 0.2);
 }
 
 .night .clock-time {
-       background: #a0a2b7;
+       color: @blue_4;
+       background-color: alpha(@blue_3, 0.25);
 }
 
 .astro .clock-time {
-       background: #c6adaa;
+       color: @orange_5;
+       background-color: alpha(@orange_4, 0.25);
 }
 
 .naut .clock-time {
-       background: #ecb89c;
+       background: alpha(@orange_2, 0.4);
 }
 
 .civil .clock-time {
-       background: #FAE189;
+       background: alpha(@yellow_2, 0.4);
 }
 
 .day .clock-time {
-       background: #fcf7b0;
+       color: #ae7b03;
+       background: alpha(@yellow_5, 0.25);
 }
-
diff --git a/data/css/gnome-clocks.dark.css b/data/css/gnome-clocks.dark.css
index 79df2648..9ca8300f 100644
--- a/data/css/gnome-clocks.dark.css
+++ b/data/css/gnome-clocks.dark.css
@@ -1,27 +1,24 @@
-.clock-time {
-       color: alpha(black, 0.8);
-}
-
 .none .clock-time {
-       background: #f6f5f4;
+       background: alpha(currentColor, 0.2);
 }
 
 .night .clock-time {
-       background: #a0a2b7;
+       color: @blue_1;
 }
 
 .astro .clock-time {
-       background: #c6adaa;
+       background: alpha(@orange_2, 0.2);
 }
 
 .naut .clock-time {
-       background: #ecb89c;
+       color: @orange_1;
 }
 
 .civil .clock-time {
-       background: #fae189;
+       background: alpha(@yellow_2, 0.2);
 }
 
 .day .clock-time {
-       background: #fcf7b0;
+       color: @yellow_2;
+       background: alpha(#cd9309, 0.25);
 }
diff --git a/data/css/gnome-clocks.highcontrast.css b/data/css/gnome-clocks.highcontrast.css
index 4665c7d3..81e4676d 100644
--- a/data/css/gnome-clocks.highcontrast.css
+++ b/data/css/gnome-clocks.highcontrast.css
@@ -18,7 +18,5 @@ row.snoozing {
 /* World */
 
 .clock-time {
-       background: transparent;
-       color: #000000;
-       font-weight: normal;
+       font-weight: bold;
 }