[gnome-todo] theme-selector: Improve selector style

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit fb0553109f20555bebab39cb7b7eb913b050cc41
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Fri Oct 8 12:54:57 2021 -0300

    theme-selector: Improve selector style

 src/gui/gtd-theme-selector.ui        | 21 +++++++++++++++++
 src/themes/Adwaita-themeselector.css | 44 ++++++++++++++++++++++++++++--------
 2 files changed, 56 insertions(+), 9 deletions(-)
---
diff --git a/src/gui/gtd-theme-selector.ui b/src/gui/gtd-theme-selector.ui
index 5d329bf5..ef10457c 100644
--- a/src/gui/gtd-theme-selector.ui
+++ b/src/gui/gtd-theme-selector.ui
@@ -20,6 +20,13 @@
             <property name="action-name">settings.style-variant</property>
             <property name="action-target">'system'</property>
             <property name="tooltip-text" translatable="yes">System</property>
+            <child>
+              <object class="GtkImage">
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <property name="icon-name">object-select-symbolic</property>
+              </object>
+            </child>
           </object>
         </child>
 
@@ -32,6 +39,13 @@
             <property name="action-name">settings.style-variant</property>
             <property name="action-target">'light'</property>
             <property name="tooltip-text" translatable="yes">Light style</property>
+            <child>
+              <object class="GtkImage">
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <property name="icon-name">object-select-symbolic</property>
+              </object>
+            </child>
           </object>
         </child>
 
@@ -45,6 +59,13 @@
             <property name="action-name">settings.style-variant</property>
             <property name="action-target">'dark'</property>
             <property name="tooltip-text" translatable="yes">Dark style</property>
+            <child>
+              <object class="GtkImage">
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <property name="icon-name">object-select-symbolic</property>
+              </object>
+            </child>
           </object>
         </child>
 
diff --git a/src/themes/Adwaita-themeselector.css b/src/themes/Adwaita-themeselector.css
index a7676b6e..01086f16 100644
--- a/src/themes/Adwaita-themeselector.css
+++ b/src/themes/Adwaita-themeselector.css
@@ -5,21 +5,47 @@ themeselector checkbutton radio {
   padding: 12px;
   min-height: 24px;
   min-width: 24px;
-  border-width: 3px;
-  border-style: solid;
-  border-color: transparent;
+  margin: 2px;
+  border: solid 1px @light_4;
+}
+
+themeselector checkbutton image {
+  margin: 0;
+  padding: 2px;
+  margin-top: 24px;
+  margin-left: -24px;
+  min-width: 24px;
+  min-height: 24px;
+  background-color: @accent_bg_color;
+  color: @accent_fg_color;
+  border-radius: 100%;
+  opacity: 0;
+  transform: scale(0.75) translate(-1px, -1px);
 }
 
+/* Checked */
 themeselector checkbutton radio:checked {
-  border-color: @theme_selected_bg_color;
-  -gtk-icon-source: -gtk-scaled(-gtk-icontheme("object-select-symbolic"));
+  margin: 0;
+  border-width: 3px;
+  border-color: @accent_bg_color;
+}
+
+themeselector checkbutton:checked image {
+  opacity: 1;
+}
+
+/* Individual styles */
+themeselector checkbutton.system radio {
+  color: #1e1e1e;
+  background: linear-gradient(135deg, @light_1 0%, @light_1 49%, @dark_3 51%, @dark_3 100%);
 }
 
 themeselector checkbutton.light radio {
-  color: #2e3436;
-  background-color: #fff;
+  color: @dark_3;
+  background-color: @light_1;
 }
+
 themeselector checkbutton.dark radio {
-  color: #fff;
-  background-color: #2e3436;
+  color: @light_1;
+  background-color: @dark_3;
 }