Gradience/data/ui/option_row.blp

using Gtk 4.0;
using Adw 1;

template GradienceOptionRow : Adw.ActionRow {
  [suffix]
  MenuButton warning-button {
    valign: center;
    icon-name: "adw-gtk3-warning-symbolic";
    popover: warning-popover;
    tooltip-text: _("GTK 3 Support Warning");
    styles ["flat"]
  }

  [suffix]
  MenuButton explanation-button {
    valign: center;
    icon-name: "dialog-information-symbolic";
    popover: explanation-popover;
    tooltip-text: _("Explanation");
    styles ["flat"]
  }

  [suffix]
  Stack value-stack {
    valign: center;
    hhomogeneous: false;
    interpolate-size: true;
    transition-type: crossfade;

    ColorButton color-value {
      rgba: "#00000000";
      use-alpha: true;
    }
    Entry text-value {
      text: "#00000000";
    }
  }

  [suffix]
  ToggleButton text-value-toggle {
    valign: center;
    icon-name: "document-edit-symbolic";
    tooltip-text: _("Toggle Text Value");
    styles ["flat"]

    toggled => on_text_value_toggled();
  }
}

Popover warning-popover {
  autohide: true;
  Label warning-label {
    margin-top: 6;
    margin-bottom: 6;
    margin-start: 6;
    margin-end: 6;
    max-width-chars: 30;
    wrap: true;
    justify: center;
  }
}

Popover explanation-popover {
  autohide: true;
  Label explanation-label {
    margin-top: 6;
    margin-bottom: 6;
    margin-start: 6;
    margin-end: 6;
    max-width-chars: 30;
    wrap: true;
    justify: center;
  }
}