White text with opacity turns too gray

GoJS
1

When I change the opacity of my Button, it turns my white text too gray.
Here’s what I get:
image

Here’s what I expect:
image

My coworker said it’s because there’s a box shadow somewhere, but I wasn’t able to pinpoint where it was coming from.

Here’s my Button. I’ve added a shape underneath it because I’m using the opacity to get a lighter shade, but I don’t really want it to be see through.

        $(go.Panel, "Spot",
            $("Shape", {
                figure: "Pill",
                width: 264,
                height: 32,
                fill: colorText,
                stroke: colorText,
                strokeWidth: 1,
                parameter1: 100
            }),
            $("Button",
                new go.Binding("isEnabled", "_isReadOnly", function(isReadOnly) {
                    return !isReadOnly;
                }).ofModel(),
                new go.Binding("opacity", "_isReadOnly", function(isReadOnly) {
                    return isReadOnly ? 0.25 : 1;
                }).ofModel(), {
                    // set properties on the border Shape of the "Button"
                    "ButtonBorder.figure": "Pill",
                    "ButtonBorder.fill": primary1,
                    "ButtonBorder.stroke": primary1,
                    "ButtonBorder.strokeWidth": 1,
                    "ButtonBorder.width": 264,
                    "ButtonBorder.height": 32,
                    // parameter1 is similar (but not exact) to the border radius
                    "ButtonBorder.parameter1": 100,
                    // set properties on the "Button" itself used by its event handlers
                    "_buttonFillOver": primary2,
                    "_buttonStrokeOver": primary2,
                    "_buttonFillPressed": primary3,
                    "_buttonStrokePressed": primary3,
                    "_buttonFillDisabled": primary1,
                    "_buttonFillNormal": primary1,
                    click: function(event, buttonObject) {
                        // click handler
                    }
                },
                $(go.Panel, "Horizontal",
                    $(go.Picture, {
                        source: "images/circle-plus-md-white.svg",
                        height: 16,
                        width: 16,
                        margin: new go.Margin(0, 8, 0, 0)
                    }),
                    $(go.TextBlock,
                        new go.Binding("text", "labelText"), {
                            stroke: nowColorText,
                            font: "16px 'Open Sans', sans-serif",
                            verticalAlignment: go.Spot.Center,
                            margin: new go.Margin(2, 0, 0, 0)
                        })
                )
            )
        )
    );
2

You are making the button mostly transparent, so the translucent white is mixing with the translucent blue fill (primary1?) and with whatever is behind the “Spot” Panel.

See if your node template has set or bound Part.isShadowed to true. But that’s probably not the problem.

You could merely bind the opacity of the “ButtonBorder” Shape.

new go.Binding("ButtonBorder.opacity", "_isReadOnly", ...
3

That did the trick for the text, thank you! However, the border is darker than the background, even though they’re set to be the same color. Is there a separate property I need to set for that?

image

4

You could set or bind the “ButtonBorder.stroke” property to whatever seems best.

5

Both “ButtonBorder.stroke” and “ButtonBorder.fill” are set to the same value though. Do you mean I have to set them to be different values because stroke will come out darker than fill, even if set to the same value?

6

I don’t understand what you really want. Maybe set it to null?

7

With the default, hover, and pressed states, the stroke and fill match in color. However, when disabled, the stroke is slightly darker than the fill, which you can see in my last screenshot. However, I found that setting strokeWidth to 0 fixes the issue. Thanks for all the help!