library: add css example

src/Library/demos/Styling with CSS/main.blp

@@ -0,0 +1,83 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: "Styling with CSS";
+  description: "Change the appearence of widgets";
+
+  Box {
+    orientation: vertical;
+    halign: center;
+
+    Label {
+      // Set the name property to style using an id selector #css_text
+      name: "css_text";
+      label: _("This widget is styled with an id selector");
+      margin-bottom: 12;
+    }
+
+    Label {
+      // Set styles to style using class selector .css_text
+      styles ["css_text"]
+      label: _("This widget is styled with a class selector");
+      margin-bottom: 12;
+    }
+
+    Label basic_label {
+      // Open the Code panel to see how
+      label: _("Classes can be applied programmatically");
+      margin-bottom: 12;
+    }
+
+    Box {
+      name: "linked_box";
+      margin-top: 24;
+      styles ["linked"]
+      halign: center;
+
+      Button {
+        icon-name: "stop-large-symbolic";
+      }
+
+      Button {
+        icon-name: "play-large-symbolic";
+      }
+
+      Button {
+        icon-name: "playlist-symbolic";
+      }
+    }
+
+    Label {
+      label: _("Documentation");
+      margin-top: 24;
+      styles ["title-2"]
+    }
+
+    Box {
+      orientation: horizontal;
+      halign: center;
+      margin-top: 24;
+
+      LinkButton {
+        label: _("Overview");
+        uri: "https://docs.gtk.org/gtk4/css-overview.html";
+      }
+
+      LinkButton {
+        label: _("Properties");
+        uri: "https://docs.gtk.org/gtk4/css-properties.html";
+      }
+
+      LinkButton {
+        label: _("Style Classes");
+        uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/style-classes.html";
+      }
+
+      LinkButton {
+        label: _("Named Colors");
+        uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/named-colors.html";
+      }
+    }
+  }
+}

src/Library/demos/Styling with CSS/main.css

@@ -0,0 +1,25 @@
+#css_text {
+  color: @blue_1; /* Adwaita Named Color */
+}
+
+.css_text {
+  color: @green_1; /* Adwaita Named Color */
+}
+
+.my_custom_class {
+  color: @red_1;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+#linked_box > :hover:first-child {
+  background-color: @destructive_bg_color;
+}
+
+#linked_box > :hover:nth-child(2) {
+  background-color: @success_bg_color;
+}
+
+#linked_box > :hover:last-child {
+  background-color: @accent_bg_color;
+}

src/Library/demos/Styling with CSS/main.js

@@ -0,0 +1,3 @@
+const basic_label = workbench.builder.get_object("basic_label");
+
+basic_label.add_css_class("css_text");

src/Library/demos/Styling with CSS/main.json

@@ -0,0 +1,7 @@
+{
+  "name": "Styling with CSS",
+  "category": "user_interface",
+  "description": "Change the appearence of widgets",
+  "panels": ["ui", "style", "preview"],
+  "autorun": true
+}