[gnome-todo] theme-selector: Use GtkToggleButton

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

commit d6d74fdb50b7f849398d0d3685ab27d9a92dad0d
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Wed Nov 17 23:45:36 2021 -0300

    theme-selector: Use GtkToggleButton
    
    Rework the CSS to match that.

 src/gui/gtd-theme-selector.ui        | 30 ++++++------------------------
 src/themes/Adwaita-themeselector.css | 23 +++++++++--------------
 2 files changed, 15 insertions(+), 38 deletions(-)
---
diff --git a/src/gui/gtd-theme-selector.ui b/src/gui/gtd-theme-selector.ui
index ffa3ca17..a831f8ed 100644
--- a/src/gui/gtd-theme-selector.ui
+++ b/src/gui/gtd-theme-selector.ui
@@ -11,7 +11,7 @@
         <property name="spacing">18</property>
 
         <child>
-          <object class="GtkCheckButton" id="system">
+          <object class="GtkToggleButton" id="system">
             <style>
               <class name="system"/>
             </style>
@@ -20,18 +20,12 @@
             <property name="action-name">settings.style-variant</property>
             <property name="action-target">'system'</property>
             <property name="tooltip-text" translatable="yes">Use system 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>
+            <property name="icon-name">object-select-symbolic</property>
           </object>
         </child>
 
         <child>
-          <object class="GtkCheckButton" id="light">
+          <object class="GtkToggleButton" id="light">
             <style>
               <class name="light"/>
             </style>
@@ -39,18 +33,12 @@
             <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>
+            <property name="icon-name">object-select-symbolic</property>
           </object>
         </child>
 
         <child>
-          <object class="GtkCheckButton" id="dark">
+          <object class="GtkToggleButton" id="dark">
             <style>
               <class name="dark"/>
             </style>
@@ -59,13 +47,7 @@
             <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>
+            <property name="icon-name">object-select-symbolic</property>
           </object>
         </child>
 
diff --git a/src/themes/Adwaita-themeselector.css b/src/themes/Adwaita-themeselector.css
index 01086f16..53760802 100644
--- a/src/themes/Adwaita-themeselector.css
+++ b/src/themes/Adwaita-themeselector.css
@@ -1,51 +1,46 @@
-themeselector checkbutton radio {
+themeselector button {
   -gtk-icon-source: none;
   background: none;
   box-shadow: none;
   padding: 12px;
-  min-height: 24px;
-  min-width: 24px;
   margin: 2px;
+  border-radius: 100%;
   border: solid 1px @light_4;
 }
 
-themeselector checkbutton image {
+themeselector button 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);
+  transform: scale(0.75) translate(24px, 24px);
 }
 
 /* Checked */
-themeselector checkbutton radio:checked {
+themeselector button:checked {
   margin: 0;
   border-width: 3px;
   border-color: @accent_bg_color;
 }
 
-themeselector checkbutton:checked image {
+themeselector button:checked image {
   opacity: 1;
 }
 
 /* Individual styles */
-themeselector checkbutton.system radio {
+themeselector button.system {
   color: #1e1e1e;
   background: linear-gradient(135deg, @light_1 0%, @light_1 49%, @dark_3 51%, @dark_3 100%);
 }
 
-themeselector checkbutton.light radio {
+themeselector button.light {
   color: @dark_3;
   background-color: @light_1;
 }
 
-themeselector checkbutton.dark radio {
+themeselector button.dark {
   color: @light_1;
   background-color: @dark_3;
 }