Gradience/data/ui/option.blp

using Gtk 4.0;
using Adw 1;

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

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

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

    ColorButton color-value {
      rgba: "#00000000";
      use-alpha: true;
      color-set => on_color_value_changed();
    }
    Entry text-value {
      text: "#00000000";
      changed => on_text_value_changed();
    }
  }

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

    toggled => on_text_value_toggled();
  }
}

Popover warning-popover {
  autohide: true;
  Label warning-label {
    margin-top: 10;
    margin-bottom: 10;
    max-width-chars: 50;
    wrap: true;
    justify: center;
  }
}

Popover explanation-popover {
  autohide: true;
  Label explanation-label {
    margin-top: 10;
    margin-bottom: 10;
    max-width-chars: 50;
    wrap: true;
    justify: center;
  }
}