[libadwaita/wip/exalm/tab-overview: 6/7] demo: Add colored backgrounds to tab pages

[Alexander Mikhaylenko <alexm src gnome org>]

commit cb5eea245184bf6cb3e982d955ef21a56ca96ee9
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Wed Sep 7 02:23:09 2022 +0400

    demo: Add colored backgrounds to tab pages

 demo/pages/tab-view/adw-tab-view-demo-page.c  | 38 +++++++++++++++++++++++++++
 demo/pages/tab-view/adw-tab-view-demo-page.ui |  1 +
 demo/style-dark.css                           | 32 ++++++++++++++++++++++
 demo/style.css                                | 32 ++++++++++++++++++++++
 4 files changed, 103 insertions(+)
---
diff --git a/demo/pages/tab-view/adw-tab-view-demo-page.c b/demo/pages/tab-view/adw-tab-view-demo-page.c
index e9d143c3..1244d20a 100644
--- a/demo/pages/tab-view/adw-tab-view-demo-page.c
+++ b/demo/pages/tab-view/adw-tab-view-demo-page.c
@@ -8,11 +8,15 @@ struct _AdwTabViewDemoPage
 
   char *title;
   GIcon *icon;
+  int color;
+
   GIcon *last_icon;
 };
 
 G_DEFINE_TYPE (AdwTabViewDemoPage, adw_tab_view_demo_page, ADW_TYPE_BIN)
 
+#define N_COLORS 8
+
 enum {
   PROP_0,
   PROP_TITLE,
@@ -49,6 +53,38 @@ get_random_icon (void)
   return g_themed_icon_new (icon_names[index]);
 }
 
+static int
+get_random_color (void)
+{
+  return g_random_int_range (0, N_COLORS) + 1;
+}
+
+static void
+set_color (AdwTabViewDemoPage *self,
+           int                 color)
+{
+  if (self->color == color)
+    return;
+
+  if (self->color > 0) {
+    char *klass = g_strdup_printf ("tab-page-color-%d", self->color);
+
+    gtk_widget_remove_css_class (GTK_WIDGET (self), klass);
+
+    g_free (klass);
+  }
+
+  if (color > 0) {
+    char *klass = g_strdup_printf ("tab-page-color-%d", color);
+
+    gtk_widget_add_css_class (GTK_WIDGET (self), klass);
+
+    g_free (klass);
+  }
+
+  self->color = color;
+}
+
 static void
 adw_tab_view_demo_page_finalize (GObject *object)
 {
@@ -133,6 +169,8 @@ adw_tab_view_demo_page_init (AdwTabViewDemoPage *self)
 {
   self->icon = get_random_icon ();
 
+  set_color (self, get_random_color ());
+
   gtk_widget_init_template (GTK_WIDGET (self));
 }
 
diff --git a/demo/pages/tab-view/adw-tab-view-demo-page.ui b/demo/pages/tab-view/adw-tab-view-demo-page.ui
index 9814b990..1cfd7371 100644
--- a/demo/pages/tab-view/adw-tab-view-demo-page.ui
+++ b/demo/pages/tab-view/adw-tab-view-demo-page.ui
@@ -12,3 +12,4 @@
     </property>
   </template>
 </interface>
+
diff --git a/demo/style-dark.css b/demo/style-dark.css
index 8086e9f4..4aebb209 100644
--- a/demo/style-dark.css
+++ b/demo/style-dark.css
@@ -5,3 +5,35 @@
 #custom-button-2 {
   color: @purple_1;
 }
+
+.tab-page-color-1 {
+  background: shade(@blue_5, 0.7);
+}
+
+.tab-page-color-2 {
+  background: shade(@green_5, 0.6);
+}
+
+.tab-page-color-3 {
+  background: shade(@yellow_5, 0.5);
+}
+
+.tab-page-color-4 {
+  background: shade(@orange_5, 0.6);
+}
+
+.tab-page-color-5 {
+  background: shade(@red_5, 0.7);
+}
+
+.tab-page-color-6 {
+  background: shade(@purple_5, 0.7);
+}
+
+.tab-page-color-7 {
+  background: shade(@brown_5, 0.7);
+}
+
+.tab-page-color-8 {
+  background: #363636;
+}
diff --git a/demo/style.css b/demo/style.css
index 53aa8b52..6f4e5d08 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -48,3 +48,35 @@ flowbox.inline flowboxchild {
   border-radius: 24px;
   background: linear-gradient(to bottom, @green_2, @green_5);
 }
+
+.tab-page-color-1 {
+  background: shade(@blue_1, 1.2);
+}
+
+.tab-page-color-2 {
+  background: shade(@green_1, 1.2);
+}
+
+.tab-page-color-3 {
+  background: shade(@yellow_1, 1.2);
+}
+
+.tab-page-color-4 {
+  background: shade(@orange_1, 1.2);
+}
+
+.tab-page-color-5 {
+  background: shade(@red_1, 1.4);
+}
+
+.tab-page-color-6 {
+  background: shade(@purple_1, 1.3);
+}
+
+.tab-page-color-7 {
+  background: shade(@brown_1, 1.3);
+}
+
+.tab-page-color-8 {
+  background: white;
+}