I've streamlined my code to a basic example:
<togglebutton id="btnormal" style="tabbutton1">
<text value="label 1" style="tblabel" background="color(0xa1b32d)"/>
<button name="$btn_normal$" title="Test off" style="btn_normal" >
<box name="$up$"/>
<box name="$over$" style="over"/>
<box name="$down$" style="down"/>
</button>
<button name="$btn_toggled$" title="Test on" style="btn_toggled" >
<box name="$up$"/>
<box name="$over$" style="over"/>
<box name="$down$" style="down"/>
</button>
</togglebutton>
Problem is: you put this code on a single page with or without the <text/> tag and it works right
But if you put it on a spreadpage with the <text> tag then the pink background appears when you mouseover the togglebuttom. Remove the <text> tag and everything works.
Tu put the Asul on the page I use a custom AsulElement element that just uses
megazine.asulFactory.createAsulObjectById(id) to load the asul component, like this:
<spreadpage anchor="intro">
<txt top="10" left="100" >
<content>spreadpage</content>
</txt>
<AsulElement top="10" left="10" width="500" height="100" asulid="btnormal"/>
</spreadpage>
Hope this helps to solve the bug!