[Bug] Ellipsis color is wrong in panel UI

When using text-overflow: ellipsis the color of ellipsis always turns black when text won’t fit at all
image

It is fine on light themes
image

<style>
.buttons-holder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

sp-action-button {
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-grow:1;
    flex-basis:0;
    min-width: 32px;
    max-width: max-content;
    margin: 2.5px;
    white-space: nowrap;
}

sp-action-button .label {
    font-size: 1em;
    font-weight: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

<sp-action-group>
    <sp-action-button>
        <div slot="icon" class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
                <rect width="18" height="18" style="fill:transparent;stroke: currentColor;stroke-width: 2;" />
                <path d="M12,0 L18,0 L18,18 L6,18Z" />
            </svg>
        </div>
        <div class="label">Huge label</div>
    </sp-action-button>
</sp-action-group>

Add color: var(--uxp-host-text-color) to the .label rule and see if that helps any. (Docs: https://www.adobe.io/photoshop/uxp/guides/theme-awareness/#built-in-theme-colors)

DIVs and SPANs are generally not theme aware, so you have to give them some styling to get them to act correctly.

1 Like

Nope :frowning: Even setting to color: white; doesn’t help. Of course even on light theme it keeps white text, but ellipsis still turns dark when no letters would fit to label

What OS are you running on? Also, what version of Ps?

I’ll note that in my internal build on macOS Big Sur, I can’t replicate this; so the bug may have been fixed internally.

Ah, sorry, forgot to mention :man_facepalming:

Currently latest Ps v22.4.3 on Win10 Pro

Ps v23
Still not fixed :frowning:

Same happens on API v2 and manifest v5

Apparently same issue with picker too
image image

image image