library: Add CSS gradients demo

src/Library/demos/CSS Gradients/main.blp

@@ -0,0 +1,213 @@
+using Gtk 4.0;
+using Adw 1;
+using GtkSource 5;
+
+Adw.StatusPage {
+  title: "CSS Gradients";
+  description: _("Generate an image that smoothly fades from one color to another.");
+
+  Box {
+    orientation: vertical;
+    halign: center;
+
+    Adw.Bin {
+      halign: center;
+      margin-bottom: 18;
+
+      Grid {
+        row-spacing: 18;
+        column-spacing: 18;
+        margin-top: 18;
+        margin-bottom: 18;
+        margin-start: 18;
+        margin-end: 18;
+
+        Frame {
+          layout {
+            row: "0";
+            column: "0";
+          }
+
+          styles [
+            "linear",
+            "circular",
+            "gradient-card",
+          ]
+        }
+
+        Frame {
+          layout {
+            row: "0";
+            column: "1";
+          }
+
+          styles [
+            "radial",
+            "gradient-card",
+          ]
+        }
+
+        Frame {
+          layout {
+            row: "0";
+            column: "2";
+          }
+
+          styles [
+            "conic",
+            "gradient-card",
+          ]
+        }
+
+        Frame {
+          layout {
+            row: "1";
+            column: "0";
+          }
+
+          styles [
+            "repeating-linear",
+            "circular",
+            "gradient-card",
+          ]
+        }
+
+        Frame {
+          layout {
+            row: "1";
+            column: "1";
+          }
+
+          styles [
+            "repeating-radial",
+            "gradient-card",
+          ]
+        }
+      }
+
+      styles [
+        "card",
+      ]
+    }
+
+    ListBox {
+      selection-mode: none;
+      margin-bottom: 12;
+
+      styles [
+        "boxed-list",
+      ]
+
+      Adw.ActionRow {
+        [suffix]
+        Frame {
+          valign: center;
+          width-request: 312;
+          height-request: 140;
+          margin-top: 18;
+          margin-bottom: 18;
+          margin-end: 6;
+
+          styles [
+            "background-gradient",
+          ]
+        }
+      }
+
+      Adw.ComboRow combo_row_gradient_type {
+        title: _("Gradient type");
+        model: StringList list {
+          strings [_("Linear"), _("Radial"), _("Conic")]
+        };
+      }
+
+      Adw.SpinRow spin_row_angle {
+        title: _("Angle");
+        climb-rate: 0.2;
+        adjustment: Adjustment adjustment_angle {
+          lower: 0;
+          upper: 360;
+          step-increment: 10;
+          value: 90;
+        };
+      }
+
+      Adw.ActionRow {
+        title: _("First color stop");
+        activatable-widget: button_color_1;
+
+        [suffix]
+        ColorDialogButton button_color_1 {
+          valign: center;
+          dialog: color_dialog;
+          rgba: "#e01b24";
+        }
+      }
+
+      Adw.ActionRow {
+        title: _("Second color stop");
+        activatable-widget: button_color_2;
+
+        [suffix]
+        ColorDialogButton button_color_2 {
+          valign: center;
+          dialog: color_dialog;
+          rgba: "#3584e4";
+        }
+      }
+
+      Adw.ActionRow {
+        title: _("Third color stop");
+        activatable-widget: button_color_3;
+
+        [suffix]
+        ColorDialogButton button_color_3 {
+          valign: center;
+          dialog: color_dialog;
+          rgba: "#f6d32d";
+        }
+      }
+
+      Adw.ExpanderRow {
+        title: _("Generated CSS");
+
+        Overlay {
+          [overlay]
+          Button button_copy_css {
+            margin-bottom: 6;
+            margin-end: 6;
+            valign: end;
+            halign: end;
+            tooltip-text: _("Copy");
+            icon-name: "edit-copy-symbolic";
+            styles ["flat"]
+          }
+
+          GtkSource.View source_view {
+            top-margin: 6;
+            bottom-margin: 6;
+            left-margin: 6;
+            right-margin: 6;
+            editable: false;
+            monospace: true;
+            buffer: GtkSource.Buffer gtksource_buffer {
+              highlight-syntax: true;
+            };
+          }
+        }
+      }
+    }
+
+    LinkButton {
+      label: _("Using CSS gradients");
+      uri: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients";
+    }
+
+    LinkButton {
+      label: _("Specifications");
+      uri: "https://www.w3.org/TR/css-images-3/#gradients";
+    }
+  }
+}
+
+ColorDialog color_dialog {}

src/Library/demos/CSS Gradients/main.css

@@ -0,0 +1,32 @@
+.linear {
+  background-image: linear-gradient(@red_3, @yellow_3, @blue_3);
+}
+
+.radial {
+  background-image: radial-gradient(@red_3, @yellow_3, @blue_3);
+}
+
+.conic {
+  background-image: conic-gradient(@red_3, @yellow_3, @blue_3, @red_3);
+}
+
+.repeating-linear {
+  background-image: repeating-linear-gradient(
+    @red_3,
+    @yellow_3 15%,
+    @blue_3 30%
+  );
+}
+
+.repeating-radial {
+  background-image: repeating-radial-gradient(
+    @red_3,
+    @yellow_3 15%,
+    @blue_3 30%
+  );
+}
+
+.gradient-card {
+  min-width: 90px;
+  min-height: 90px;
+}

src/Library/demos/CSS Gradients/main.js

@@ -0,0 +1,120 @@
+import Gtk from "gi://Gtk";
+import Gdk from "gi://Gdk";
+import GtkSource from "gi://GtkSource";
+import Adw from "gi://Adw";
+
+let css_provider;
+
+const combo_row_gradient_type = workbench.builder.get_object(
+  "combo_row_gradient_type",
+);
+const adjustment_angle = workbench.builder.get_object("adjustment_angle");
+const spin_row_angle = workbench.builder.get_object("spin_row_angle");
+const button_color_1 = workbench.builder.get_object("button_color_1");
+const button_color_2 = workbench.builder.get_object("button_color_2");
+const button_color_3 = workbench.builder.get_object("button_color_3");
+const gtksource_buffer = workbench.builder.get_object("gtksource_buffer");
+const button_copy_css = workbench.builder.get_object("button_copy_css");
+
+combo_row_gradient_type.connect("notify::selected", update);
+adjustment_angle.connect("value-changed", update);
+button_color_1.connect("notify::rgba", update);
+button_color_2.connect("notify::rgba", update);
+button_color_3.connect("notify::rgba", update);
+
+function update() {
+  spin_row_angle.sensitive = combo_row_gradient_type.selected !== 1;
+  const css = generateCss();
+  gtksource_buffer.set_text(css, -1);
+  updateCssProvider(css);
+}
+update();
+
+function generateCss() {
+  const angle_string = adjustment_angle.value;
+  const first_color_string = button_color_1.rgba.to_string();
+  const second_color_string = button_color_2.rgba.to_string();
+  const third_color_string = button_color_3.rgba.to_string();
+
+  let css = "";
+
+  console.log(combo_row_gradient_type.selected);
+
+  if (combo_row_gradient_type.selected === 0) {
+    css = `
+.background-gradient {
+  background-image: linear-gradient(
+    ${angle_string}deg,
+    ${first_color_string},
+    ${second_color_string},
+    ${third_color_string}
+  );
+}`;
+  } else if (combo_row_gradient_type.selected === 1) {
+    css = `
+.background-gradient {
+  background-image: radial-gradient(
+    ${first_color_string},
+    ${second_color_string},
+    ${third_color_string}
+  );
+}
+`;
+  } else if (combo_row_gradient_type.selected === 2) {
+    css = `
+.background-gradient {
+  background-image: conic-gradient(
+    from ${angle_string}deg,
+    ${first_color_string},
+    ${second_color_string},
+    ${third_color_string}
+  );
+}`;
+  }
+
+  return css.trimStart();
+}
+
+function updateCssProvider(css) {
+  const display = Gdk.Display.get_default();
+
+  if (css_provider) {
+    Gtk.StyleContext.remove_provider_for_display(display, css_provider);
+  }
+
+  css_provider = new Gtk.CssProvider();
+  css_provider.load_from_string(css);
+  Gtk.StyleContext.add_provider_for_display(
+    display,
+    css_provider,
+    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION,
+  );
+}
+
+/*
+ * code view
+ */
+
+const clipboard = Gdk.Display.get_default().get_clipboard();
+
+button_copy_css.connect("clicked", () => {
+  clipboard.set(gtksource_buffer.text);
+});
+
+const scheme_manager = GtkSource.StyleSchemeManager.get_default();
+const style_manager = Adw.StyleManager.get_default();
+style_manager.connect("notify::dark", () => {
+  updateColorScheme();
+});
+
+function updateColorScheme() {
+  const scheme = scheme_manager.get_scheme(
+    style_manager.dark ? "Adwaita-dark" : "Adwaita",
+  );
+  gtksource_buffer.set_style_scheme(scheme);
+}
+updateColorScheme();
+
+const language_manager = GtkSource.LanguageManager.get_default();
+const css_language = language_manager.get_language("css");
+gtksource_buffer.set_language(css_language);

src/Library/demos/CSS Gradients/main.json

@@ -0,0 +1,6 @@
+{
+  "category": "user_interface",
+  "description": "Generate an image that smoothly fades from one color to another.",
+  "panels": ["style", "preview"],
+  "autorun": true
+}

src/about.js

@@ -79,6 +79,7 @@ ${getBlueprintVersion()}
     "Muhammad Bilal https://github.com./mbilal234",
     "Onkar https://github.com./onkarrai06",
     "Sabrina Meindlhumer https://github.com./m-sabrina",
+    "Urtsi Santsi <[email protected]>",
     // Add yourself as
     // "John Doe",
     // or