Why isn't my text appearing inside the rectangle even though they have entirely different color?

[timelessnesses]

so here's my slint code

import "./Sen-VariableFont_wght.ttf";

export component MainWindow inherits Window {
    title: "Contrasity";
    width: 858px;
    height: 520px;

    in property <color> background-color;
    in property <color> text-color;
    in property <float> rating;
    in property <bool> pass-AA;
    in property <bool> pass-AAA;
    in property <bool> pass-AALarge;
    in property <string> font;

    background: black;
    text-color: cyan;
    font: "Sen";
    
   // ...
    
    Rectangle {
        background: text-color;
        border-width: 5px;
        x: 511px;
        y: 186px;
        width: 133px;
        height: 47px;
        border-radius: 5px;
    
        Text {
            font-size: 30px;
            text: "Pass";
            font-italic: false;
            vertical-alignment: center;
            font-family: font;
            color: background-color;
        }
    }
    
}

the text is somehow isn't appearing but it is clickable on the Slint live preview

I have tried to change my variable name but it didn't help, until I actually not using the color variable in text then the text then appears

When making the font bigger it actually doesn't show up at all?

[hunger]

I think it is related to declaring properties and only then assigning into them...

If I avoid that it works for me:

export component MainWindow inherits Window {
    width: 300px;
    height: 200px;

    in property <color> background-color: black;
    in property <color> text-color: cyan;
    
    Rectangle {
        background: text-color;
    
        Text {
            text: "Pass";
            vertical-alignment: center;
            color: background-color;
        }
    } 
}

This works because it actually changes background-color from its default value (fully transparent) to black.

your example only sets the window background to black and leaves the background-color unassigned.

[tronical]

To clarify further:

• The provided example uses color: background-color; for the Text element.
• The component declares in property <color> background-color;
• However, the initialisation uses a different property: background: black;. Therefore background-color remains initialised to transparent.
• Change background: black; to background-color: black;` and the text isn't shown transparent anymore.

[hunger]

You might want to keep background: black; in addition to background-color: black;. The first sets the background color of the window.