background: Implement accent colours

Adds a row to toggle the system accent colour

meson.build

@@ -184,7 +184,7 @@ gnome_bg_dep = dependency('gnome-bg-4')
 gnome_rr_dep = dependency('gnome-rr-4')
 gnome_settings_dep = dependency('gnome-settings-daemon', version: '>= 41.0')
 goa_dep = dependency('goa-1.0', version: goa_req_version)
-gsettings_desktop_dep = dependency('gsettings-desktop-schemas', version: '>= 46.beta')
+gsettings_desktop_dep = dependency('gsettings-desktop-schemas', version: '>= 47.alpha')
 libxml_dep = dependency('libxml-2.0')
 pulse_dep = dependency('libpulse', version: pulse_req_version)
 pulse_mainloop_dep = dependency('libpulse-mainloop-glib', version: pulse_req_version)

panels/background/cc-background-panel.c

@@ -45,6 +45,7 @@
 
 #define INTERFACE_PATH_ID "org.gnome.desktop.interface"
 #define INTERFACE_COLOR_SCHEME_KEY "color-scheme"
+#define INTERFACE_ACCENT_COLOR_KEY "accent-color"
 
 struct _CcBackgroundPanel
 {
@@ -60,6 +61,7 @@ struct _CcBackgroundPanel
 
   CcBackgroundItem *current_background;
 
+  GtkWidget *accent_box;
   CcBackgroundChooser *background_chooser;
   CcBackgroundPreview *default_preview;
   CcBackgroundPreview *dark_preview;
@@ -84,7 +86,151 @@ load_custom_css (CcBackgroundPanel *self)
 }
 
 static void
-reload_color_scheme_toggles (CcBackgroundPanel *self)
+transition_screen (CcBackgroundPanel *self)
+{
+  g_autoptr (GError) error = NULL;
+
+  if (!self->proxy)
+    return;
+
+  g_dbus_proxy_call_sync (self->proxy,
+                          "ScreenTransition",
+                          NULL,
+                          G_DBUS_CALL_FLAGS_NONE,
+                          -1,
+                          NULL,
+                          &error);
+
+  if (error)
+    g_warning ("Couldn't transition screen: %s", error->message);
+}
+
+static void
+on_accent_color_toggled_cb (CcBackgroundPanel *self,
+                            GtkToggleButton   *toggle)
+{
+  GDesktopAccentColor accent_color_from_key;
+  GDesktopAccentColor accent_color = GPOINTER_TO_INT (g_object_get_data (G_OBJECT (toggle), "accent-color"));
+
+  accent_color_from_key = g_settings_get_enum (self->interface_settings,
+                                               INTERFACE_ACCENT_COLOR_KEY);
+
+  /* Don't unnecessarily set the key again */
+  if (accent_color == accent_color_from_key)
+    return;
+
+  transition_screen (self);
+
+  g_settings_set_enum (self->interface_settings,
+                       INTERFACE_ACCENT_COLOR_KEY,
+                       accent_color);
+}
+
+/* Adapted from adw-inspector-page.c */
+static const char *
+get_color_tooltip (GDesktopAccentColor color)
+{
+  switch (color)
+    {
+    case G_DESKTOP_ACCENT_COLOR_BLUE:
+      return _("Blue");
+    case G_DESKTOP_ACCENT_COLOR_TEAL:
+      return _("Teal");
+    case G_DESKTOP_ACCENT_COLOR_GREEN:
+      return _("Green");
+    case G_DESKTOP_ACCENT_COLOR_YELLOW:
+      return _("Yellow");
+    case G_DESKTOP_ACCENT_COLOR_ORANGE:
+      return _("Orange");
+    case G_DESKTOP_ACCENT_COLOR_RED:
+      return _("Red");
+    case G_DESKTOP_ACCENT_COLOR_PINK:
+      return _("Pink");
+    case G_DESKTOP_ACCENT_COLOR_PURPLE:
+      return _("Purple");
+    case G_DESKTOP_ACCENT_COLOR_SLATE:
+      return _("Slate");
+    default:
+      g_assert_not_reached ();
+    }
+}
+
+static const char *
+get_untranslated_color (GDesktopAccentColor color)
+{
+  switch (color)
+    {
+    case G_DESKTOP_ACCENT_COLOR_BLUE:
+      return "blue";
+    case G_DESKTOP_ACCENT_COLOR_TEAL:
+      return "teal";
+    case G_DESKTOP_ACCENT_COLOR_GREEN:
+      return "green";
+    case G_DESKTOP_ACCENT_COLOR_YELLOW:
+      return "yellow";
+    case G_DESKTOP_ACCENT_COLOR_ORANGE:
+      return "orange";
+    case G_DESKTOP_ACCENT_COLOR_RED:
+      return "red";
+    case G_DESKTOP_ACCENT_COLOR_PINK:
+      return "pink";
+    case G_DESKTOP_ACCENT_COLOR_PURPLE:
+      return "purple";
+    case G_DESKTOP_ACCENT_COLOR_SLATE:
+      return "slate";
+    default:
+      g_assert_not_reached ();
+    }
+}
+
+static void
+setup_accent_color_toggles (CcBackgroundPanel *self)
+{
+  GDesktopAccentColor accent_color = g_settings_get_enum (self->interface_settings, INTERFACE_ACCENT_COLOR_KEY);
+  GDesktopAccentColor i;
+
+  for (i = G_DESKTOP_ACCENT_COLOR_BLUE; i <= G_DESKTOP_ACCENT_COLOR_SLATE; i++)
+    {
+      GtkWidget *button = GTK_WIDGET (gtk_toggle_button_new ());
+      GtkToggleButton *grouping_button = GTK_TOGGLE_BUTTON (gtk_widget_get_first_child (self->accent_box));
+
+      gtk_widget_set_tooltip_text (button, get_color_tooltip (i));
+      gtk_widget_add_css_class (button, "accent-button");
+      gtk_widget_add_css_class (button, get_untranslated_color (i));
+      g_object_set_data (G_OBJECT (button), "accent-color", GINT_TO_POINTER (i));
+      g_signal_connect_object (button, "toggled",
+                               G_CALLBACK (on_accent_color_toggled_cb),
+                               self,
+                               G_CONNECT_SWAPPED);
+
+      if (grouping_button != NULL)
+        gtk_toggle_button_set_group (GTK_TOGGLE_BUTTON (button), grouping_button);
+
+      if (i == accent_color)
+        gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (button), TRUE);
+
+      gtk_box_append (GTK_BOX (self->accent_box), button);
+    }
+}
+
+static void
+reload_accent_color_toggles (CcBackgroundPanel *self)
+{
+  GDesktopAccentColor accent_color = g_settings_get_enum (self->interface_settings, INTERFACE_ACCENT_COLOR_KEY);
+  GtkWidget *child;
+
+  for (child = gtk_widget_get_first_child (self->accent_box);
+       child;
+       child = gtk_widget_get_next_sibling (child))
+    {
+      GDesktopAccentColor child_color = GPOINTER_TO_INT (g_object_get_data (G_OBJECT (child), "accent-color"));
+
+      gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (child), child_color == accent_color);
+    }
+}
+
+static void
+reload_color_scheme (CcBackgroundPanel *self)
 {
   GDesktopColorScheme scheme;
 
@@ -105,26 +251,6 @@ reload_color_scheme_toggles (CcBackgroundPanel *self)
     }
 }
 
-static void
-transition_screen (CcBackgroundPanel *self)
-{
-  g_autoptr (GError) error = NULL;
-
-  if (!self->proxy)
-    return;
-
-  g_dbus_proxy_call_sync (self->proxy,
-                          "ScreenTransition",
-                          NULL,
-                          G_DBUS_CALL_FLAGS_NONE,
-                          -1,
-                          NULL,
-                          &error);
-
-  if (error)
-    g_warning ("Couldn't transition screen: %s", error->message);
-}
-
 static void
 set_color_scheme (CcBackgroundPanel   *self,
                   GDesktopColorScheme  color_scheme)
@@ -394,6 +520,7 @@ cc_background_panel_class_init (CcBackgroundPanelClass *klass)
 
   gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/control-center/background/cc-background-panel.ui");
 
+  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPanel, accent_box);
   gtk_widget_class_bind_template_child (widget_class, CcBackgroundPanel, background_chooser);
   gtk_widget_class_bind_template_child (widget_class, CcBackgroundPanel, default_preview);
   gtk_widget_class_bind_template_child (widget_class, CcBackgroundPanel, dark_preview);
@@ -437,11 +564,18 @@ cc_background_panel_init (CcBackgroundPanel *self)
   g_signal_connect_object (self->settings, "changed", G_CALLBACK (on_settings_changed), self, G_CONNECT_SWAPPED);
 
   /* Interface settings */
-  reload_color_scheme_toggles (self);
+  reload_color_scheme (self);
+  setup_accent_color_toggles (self);
 
   g_signal_connect_object (self->interface_settings,
                            "changed::" INTERFACE_COLOR_SCHEME_KEY,
-                           G_CALLBACK (reload_color_scheme_toggles),
+                           G_CALLBACK (reload_color_scheme),
+                           self,
+                           G_CONNECT_SWAPPED);
+
+  g_signal_connect_object (self->interface_settings,
+                           "changed::" INTERFACE_ACCENT_COLOR_KEY,
+                           G_CALLBACK (reload_accent_color_toggles),
                            self,
                            G_CONNECT_SWAPPED);
 

panels/background/cc-background-panel.ui

@@ -2,143 +2,172 @@
 <interface>
   <template class="CcBackgroundPanel" parent="CcPanel">
     <property name="child">
-      <object class="AdwToolbarView">
-        <child type="top">
-          <object class="AdwHeaderBar"/>
+      <object class="AdwBreakpointBin">
+        <property name="width-request">346</property>
+        <property name="height-request">200</property>
+        <child>
+          <object class="AdwBreakpoint">
+            <condition>max-width: 420px</condition>
+            <setter object="accent_box" property="spacing">6</setter>
+            <setter object="accent_box" property="margin-top">6</setter>
+            <setter object="accent_box" property="margin-bottom">6</setter>
+          </object>
         </child>
+        <property name="child">
+          <object class="AdwToolbarView">
+            <child type="top">
+              <object class="AdwHeaderBar"/>
+            </child>
 
-        <property name="content">
-          <object class="AdwPreferencesPage">
-
-            <child>
-              <object class="AdwPreferencesGroup">
-                <property name="title" translatable="yes">Style</property>
+            <property name="content">
+              <object class="AdwPreferencesPage">
 
                 <child>
-                  <object class="AdwPreferencesRow">
-                    <property name="activatable">False</property>
-                    <property name="focusable">False</property>
+                  <object class="AdwPreferencesGroup">
+                    <property name="title" translatable="yes">Style</property>
+
                     <child>
-                      <object class="AdwClamp">
-                        <property name="maximum-size">400</property>
-                        <property name="tightening-threshold">300</property>
+                      <object class="AdwPreferencesRow">
+                        <property name="activatable">False</property>
+                        <property name="focusable">False</property>
                         <child>
-                          <object class="GtkGrid">
-                            <property name="column-homogeneous">True</property>
-                            <property name="column-spacing">24</property>
-                            <property name="row-spacing">12</property>
-                            <property name="margin-start">12</property>
-                            <property name="margin-end">12</property>
-                            <property name="margin-top">18</property>
-                            <property name="margin-bottom">12</property>
-                            <property name="hexpand">True</property>
+                          <object class="AdwClamp">
+                            <property name="maximum-size">400</property>
+                            <property name="tightening-threshold">300</property>
                             <child>
-                              <object class="GtkToggleButton" id="default_toggle">
-                                <accessibility>
-                                  <relation name="labelled-by">default_label</relation>
-                                </accessibility>
-                                <signal name="notify::active" handler="on_color_scheme_toggle_active_cb" swapped="true"/>
+                              <object class="GtkGrid">
+                                <property name="column-homogeneous">True</property>
+                                <property name="column-spacing">24</property>
+                                <property name="row-spacing">12</property>
+                                <property name="margin-start">12</property>
+                                <property name="margin-end">12</property>
+                                <property name="margin-top">18</property>
+                                <property name="margin-bottom">12</property>
+                                <property name="hexpand">True</property>
                                 <child>
-                                  <object class="CcBackgroundPreview" id="default_preview"/>
-                                </child>
-                                <style>
-                                  <class name="background-preview-button"/>
-                                </style>
-                                <layout>
-                                  <property name="column">0</property>
-                                  <property name="row">0</property>
-                                </layout>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkLabel" id="default_label">
-                                <property name="label" translatable="yes">_Default</property>
-                                <property name="use-underline">True</property>
-                                <property name="mnemonic-widget">default_toggle</property>
-                                <layout>
-                                  <property name="column">0</property>
-                                  <property name="row">1</property>
-                                </layout>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkToggleButton" id="dark_toggle">
-                                <property name="group">default_toggle</property>
-                                <accessibility>
-                                  <relation name="labelled-by">dark_label</relation>
-                                </accessibility>
-                                <signal name="notify::active" handler="on_color_scheme_toggle_active_cb" swapped="true"/>
-                                <child>
-                                  <object class="CcBackgroundPreview" id="dark_preview">
-                                    <property name="is-dark">True</property>
+                                  <object class="GtkToggleButton" id="default_toggle">
+                                    <accessibility>
+                                      <relation name="labelled-by">default_label</relation>
+                                    </accessibility>
+                                    <signal name="notify::active" handler="on_color_scheme_toggle_active_cb" swapped="true"/>
+                                    <child>
+                                      <object class="CcBackgroundPreview" id="default_preview"/>
+                                    </child>
+                                    <style>
+                                      <class name="background-preview-button"/>
+                                    </style>
+                                    <layout>
+                                      <property name="column">0</property>
+                                      <property name="row">0</property>
+                                    </layout>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel" id="default_label">
+                                    <property name="label" translatable="yes">_Default</property>
+                                    <property name="use-underline">True</property>
+                                    <property name="mnemonic-widget">default_toggle</property>
+                                    <layout>
+                                      <property name="column">0</property>
+                                      <property name="row">1</property>
+                                    </layout>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkToggleButton" id="dark_toggle">
+                                    <property name="group">default_toggle</property>
+                                    <accessibility>
+                                      <relation name="labelled-by">dark_label</relation>
+                                    </accessibility>
+                                    <signal name="notify::active" handler="on_color_scheme_toggle_active_cb" swapped="true"/>
+                                    <child>
+                                      <object class="CcBackgroundPreview" id="dark_preview">
+                                        <property name="is-dark">True</property>
+                                      </object>
+                                    </child>
+                                    <style>
+                                      <class name="background-preview-button"/>
+                                    </style>
+                                    <layout>
+                                      <property name="column">1</property>
+                                      <property name="row">0</property>
+                                    </layout>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel" id="dark_label">
+                                    <property name="label" translatable="yes">Da_rk</property>
+                                    <property name="use-underline">True</property>
+                                    <property name="mnemonic-widget">dark_toggle</property>
+                                    <layout>
+                                      <property name="column">1</property>
+                                      <property name="row">1</property>
+                                    </layout>
                                   </object>
                                 </child>
-                                <style>
-                                  <class name="background-preview-button"/>
-                                </style>
-                                <layout>
-                                  <property name="column">1</property>
-                                  <property name="row">0</property>
-                                </layout>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkLabel" id="dark_label">
-                                <property name="label" translatable="yes">Da_rk</property>
-                                <property name="use-underline">True</property>
-                                <property name="mnemonic-widget">dark_toggle</property>
-                                <layout>
-                                  <property name="column">1</property>
-                                  <property name="row">1</property>
-                                </layout>
                               </object>
                             </child>
                           </object>
                         </child>
                       </object>
                     </child>
-                  </object>
-                </child>
 
-              </object>
-            </child>
-
-            <child>
-              <object class="AdwPreferencesGroup">
-                <property name="title" translatable="yes">Background</property>
-                <property name="header-suffix">
-                  <object class="GtkButton">
                     <child>
-                      <object class="AdwButtonContent">
-                        <property name="icon-name">list-add-symbolic</property>
-                        <property name="label" translatable="yes">_Add Picture…</property>
-                        <property name="use-underline">True</property>
+                      <object class="AdwPreferencesRow">
+                        <property name="activatable">False</property>
+                        <property name="focusable">False</property>
+                        <child>
+                          <object class="GtkBox" id="accent_box">
+                            <property name="spacing">12</property>
+                            <property name="margin-top">12</property>
+                            <property name="margin-bottom">12</property>
+                            <property name="halign">center</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
-                    <signal name="clicked" handler="on_add_picture_button_clicked_cb" object="CcBackgroundPanel" swapped="yes" />
-                    <style>
-                      <class name="flat"/>
-                    </style>
+
                   </object>
-                </property>
+                </child>
 
                 <child>
-                  <object class="AdwBin">
-                    <style>
-                      <class name="card"/>
-                    </style>
+                  <object class="AdwPreferencesGroup">
+                    <property name="title" translatable="yes">Background</property>
+                    <property name="header-suffix">
+                      <object class="GtkButton">
+                        <child>
+                          <object class="AdwButtonContent">
+                            <property name="icon-name">list-add-symbolic</property>
+                            <property name="label" translatable="yes">_Add Picture…</property>
+                            <property name="use-underline">True</property>
+                          </object>
+                        </child>
+                        <signal name="clicked" handler="on_add_picture_button_clicked_cb" object="CcBackgroundPanel" swapped="yes" />
+                        <style>
+                          <class name="flat"/>
+                        </style>
+                      </object>
+                    </property>
+
                     <child>
-                      <object class="CcBackgroundChooser" id="background_chooser">
-                        <property name="hexpand">True</property>
-                        <signal name="background-chosen" handler="on_chooser_background_chosen_cb" object="CcBackgroundPanel" swapped="yes" />
+                      <object class="AdwBin">
+                        <style>
+                          <class name="card"/>
+                        </style>
+                        <child>
+                          <object class="CcBackgroundChooser" id="background_chooser">
+                            <property name="hexpand">True</property>
+                            <signal name="background-chosen" handler="on_chooser_background_chosen_cb" object="CcBackgroundPanel" swapped="yes" />
+                          </object>
+                        </child>
                       </object>
                     </child>
+
                   </object>
                 </child>
 
               </object>
-            </child>
-
+            </property>
           </object>
         </property>
       </object>

panels/background/preview.css

@@ -49,11 +49,11 @@ background-preview .window.front.dark .header-bar {
 }
 
 .background-preview-button:checked {
-  box-shadow: 0 0 0 3px @accent_color;
+  box-shadow: 0 0 0 3px @accent_bg_color;
 }
 
 .background-preview-button:focus:focus-visible {
-  box-shadow: 0 0 0 3px alpha(@accent_color, .3);
+  box-shadow: 0 0 0 3px @accent_bg_color, 0 0 0 6px alpha(@accent_color, .3);
 }
 
 .background-preview-button:checked:focus:focus-visible {
@@ -95,3 +95,67 @@ flowboxchild.active-item .selected-check {
   min-height: 0;
   margin: 6px;
 }
+
+.accent-button {
+  border-radius: 9999px;
+  padding: 3px;
+  background: var(--accent-bg-color);
+  min-width: 24px;
+  min-height: 24px;
+  outline: none;
+  background-clip: content-box;
+  box-shadow: none;
+}
+
+.accent-button:checked {
+  box-shadow: 0 0 0 3px var(--accent-bg-color);
+}
+
+.accent-button:focus:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent);
+}
+
+.accent-button:checked:focus:focus-visible {
+  box-shadow: 0 0 0 3px var(--accent-bg-color),
+              0 0 0 6px color-mix(in srgb, var(--accent-color) 30%, transparent);
+}
+
+.blue, .teal, .green, .yellow, .orange, .red, .pink, .purple, .slate {
+  --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
+}
+
+.blue {
+  --accent-bg-color: var(--accent-blue);
+}
+
+.teal {
+  --accent-bg-color: var(--accent-teal);
+}
+
+.green {
+  --accent-bg-color: var(--accent-green);
+}
+
+.yellow {
+  --accent-bg-color: var(--accent-yellow);
+}
+
+.orange {
+  --accent-bg-color: var(--accent-orange);
+}
+
+.red {
+  --accent-bg-color: var(--accent-red);
+}
+
+.pink {
+  --accent-bg-color: var(--accent-pink);
+}
+
+.purple {
+  --accent-bg-color: var(--accent-purple);
+}
+
+.slate {
+  --accent-bg-color: var(--accent-slate);
+}