// QSStyle.qml
import QtQuick 2.0

QtObject
{
    property color cool_color: "#008ED6"
    property color warm_color: "#AE8E77";
}



// QSButton.qml
import QtQuick 2.0

Rectangle
{
    id: root;
    signal clicked;
    property alias icon:  p_icon;
    property alias icon_color: p_icon.color;

    width:  p_container.width;
    color:  "grey";

    MouseArea
    {
        id: p_mousearea;
        anchors.fill: parent;
        onClicked:
        {  parent.clicked();  }
    }

    Row
    {
        id: p_container;
        height: parent.height;
        width:  childrenRect.width;
        anchors.horizontalCenter: parent.horizontalCenter;

        QSIcon   {
            id: p_icon;
            height: parent.height*0.8;
            width: height;
            anchors.verticalCenter: parent.verticalCenter;
        }
    }
}


// QSIcon.qml
import QtQuick 2.0

Item
{
    id: root;
    property alias source: image.source;
    property alias status: image.status;
    property alias color: rect.fgcolor;

    Rectangle {
        id: rect;
        anchors.fill: parent;
        property color fgcolor: qo.warm_color;
        color: fgcolor;
    }

    Image   {
        id: image;
        anchors.fill: parent;
        sourceSize.width:  128;
        sourceSize.height: 128;
        visible: false;
    }
}


// main.qml
import QtQuick 2.0

Rectangle
{
    id: root;
    width: 500; height: 500;

    QSStyle { id: qo; }
    
    QSButton {
        id: button;

        // We assigned an existing property to
        // the nested property that icon.color
        // aliases in QSIcon.qml.

        // Uncomment the following cases one by one

        // Assigning a value - WORKS
//        icon.color: "red";

        // Binding a property to a direct alias - WORKS
//        icon_color: qo.cool_color;

        // Binding a property to an indirect alias
        // (ie through an Item) - DOESN'T WORK
//        icon.color: qo.cool_color;

        width: 500; height: 500;
    }
}