Merge lp:~fboucault/ubuntu-ui-toolkit/color_palette into lp:ubuntu-ui-toolkit

[Florian Boucault]

Introduce new theme color palette API centralising the definition of the colors used by the widgets to draw themselves.
Adapted most widgets to use the theme color palette.
The color palette defined in the Ambiance theme is the one from the new visual design.

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:611
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/274/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-saucy/735
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-amd64-ci/131
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/131
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/131/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/737
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/737/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-saucy/660

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/274/rebuild

review: Approve (continuous-integration)

[Tim Peeters (tpeeters)]

make check gives me failures for textarea

[Tim Peeters (tpeeters)]

and the link for the failures: https://pastebin.canonical.com/93854/

[Tim Peeters (tpeeters)]

normal/selected for palette names and background/base/field/... for colors are specific names in a certain use case. Is there a way we could generalize these, and get colors using, for example something like color: Theme.paletteColor("paletteName", "colorName")?

[Tim Peeters (tpeeters)]

perhaps my screen is not very good, but the contrast between secondary labels and the grey backgrounds of the mainview are quite low: http://ubuntuone.com/2YQhgU5gLDrJxlMnBfLU9k
It will be tiring to read a lot with such low contrast.

[Tim Peeters (tpeeters)]

There is a change in button colors that was not introduced in this MR, but it is related. Dialogs and Sheets (in uitk component gallery) can have two buttons (for example 'confirm' and 'cancel') which used to have strongly contrasting colors, and in the current version they are two different shades of orange. We need an updated design for this or revert to the "old" colors.

[Tim Peeters (tpeeters)]

tim@ideapad:~/dev/ubuntu-ui-toolkit/color_palette$ UBUNTU_UI_TOOLKIT_THEMES_PATH=modules qmlscene -I modules/ tests/resources/tabs/Tabs.qml

that command should work right? It gives me a black window and a lot of error output: https://pastebin.canonical.com/93856/

[Tim Peeters (tpeeters)]

> normal/selected for palette names and background/base/field/... for colors are
> specific names in a certain use case. Is there a way we could generalize
> these, and get colors using, for example something like color:
> Theme.paletteColor("paletteName", "colorName")?

Do we have different options for the interface for defining and using palettes? Is there a doc to compare them?

review: Needs Fixing

[Florian Boucault (fboucault)]

> normal/selected for palette names and background/base/field/... for colors are
> specific names in a certain use case. Is there a way we could generalize
> these, and get colors using, for example something like color:
> Theme.paletteColor("paletteName", "colorName")?

The main idea behind the palette is to ensure consistency, hence we will by design keep the number of colors (base, background, etc.) very low. It's likely not to grow beyond what we have now.

[Florian Boucault (fboucault)]

> There is a change in button colors that was not introduced in this MR, but it
> is related. Dialogs and Sheets (in uitk component gallery) can have two
> buttons (for example 'confirm' and 'cancel') which used to have strongly
> contrasting colors, and in the current version they are two different shades
> of orange. We need an updated design for this or revert to the "old" colors.

Fixed in latest commit.

[lp:~fboucault/ubuntu-ui-toolkit/color_palette]

612. By Florian Boucault on 2013-07-05

Added FIXME.

613. By Florian Boucault on 2013-07-05

Made dialog cancel button use grey gradient.

[Florian Boucault (fboucault)]

> tim@ideapad:~/dev/ubuntu-ui-toolkit/color_palette$
> UBUNTU_UI_TOOLKIT_THEMES_PATH=modules qmlscene -I modules/
> tests/resources/tabs/Tabs.qml
>
> that command should work right? It gives me a black window and a lot of error
> output: https://pastebin.canonical.com/93856/

It does not work here either however the following works:
QML2_IMPORT_PATH=modules UBUNTU_UI_TOOLKIT_THEMES_PATH=modules qmlscene tests/resources/tabs/Tabs.qml

Strange.

[Florian Boucault (fboucault)]

> > normal/selected for palette names and background/base/field/... for colors
> are
> > specific names in a certain use case. Is there a way we could generalize
> > these, and get colors using, for example something like color:
> > Theme.paletteColor("paletteName", "colorName")?
>
> Do we have different options for the interface for defining and using
> palettes? Is there a doc to compare them?

I'm not sure what you mean by that.

[Florian Boucault (fboucault)]

> perhaps my screen is not very good, but the contrast between secondary labels
> and the grey backgrounds of the mainview are quite low:
> http://ubuntuone.com/2YQhgU5gLDrJxlMnBfLU9k
> It will be tiring to read a lot with such low contrast.

I added a few small fixes:
- the gallery was using an extra Rectangle behind the lists that I just removed.
- the color of the text alpha value was an approximation from 50% to 7F, so I rounded up to 81.
- the PNG with the noise tiled over the background color was incorrect and making the background darker than it should be.

Can you tell if it looks the same as in there for you? That's the mockup from design.
http://people.canonical.com/~kaleo/themes.png

[Florian Boucault (fboucault)]

> and the link for the failures: https://pastebin.canonical.com/93854/

I don't see how this MR could have broken that. Hmm

[Tim Peeters (tpeeters)]

> > perhaps my screen is not very good, but the contrast between secondary
> labels
> > and the grey backgrounds of the mainview are quite low:
> > http://ubuntuone.com/2YQhgU5gLDrJxlMnBfLU9k
> > It will be tiring to read a lot with such low contrast.
>
> I added a few small fixes:
> - the gallery was using an extra Rectangle behind the lists that I just
> removed.
> - the color of the text alpha value was an approximation from 50% to 7F, so I
> rounded up to 81.
> - the PNG with the noise tiled over the background color was incorrect and
> making the background darker than it should be.
>
> Can you tell if it looks the same as in there for you? That's the mockup from
> design.
> http://people.canonical.com/~kaleo/themes.png

Color seems the same, but in the gallery the fonts are a lot smaller, so there is probably some anti-aliasing which makes the edges of the letters lighter. I'd say it is an issue for design.

[lp:~fboucault/ubuntu-ui-toolkit/color_palette]

614. By Florian Boucault on 2013-07-05

Tuned colors for background.

615. By Florian Boucault on 2013-07-05

Removed background Rectangle behind list items in gallery.

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:613
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/276/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-saucy/764
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-amd64-ci/133
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/133
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/133/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/766
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/766/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-saucy/688

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/276/rebuild

review: Approve (continuous-integration)

[Tim Peeters (tpeeters)]

> > > normal/selected for palette names and background/base/field/... for colors
> > are
> > > specific names in a certain use case. Is there a way we could generalize
> > > these, and get colors using, for example something like color:
> > > Theme.paletteColor("paletteName", "colorName")?
> >
> > Do we have different options for the interface for defining and using
> > palettes? Is there a doc to compare them?
>
> I'm not sure what you mean by that.

If PaletteValues should be considered as part of our API, it needs more discussion, and an overview of alternatives (such as the Theme.paletteColor("paletteName", "colorName")). The names of the properties (do we need a nameText in addition to every property name, is "Text" the best name since it can also be an image, ..) would also be part of that discussion.

But I'm not sure if we consider PaletteValues as such. Can each Theme deffine its own PaletteValues properties?

[Florian Boucault (fboucault)]

> > > > normal/selected for palette names and background/base/field/... for
> colors
> > > are
> > > > specific names in a certain use case. Is there a way we could generalize
> > > > these, and get colors using, for example something like color:
> > > > Theme.paletteColor("paletteName", "colorName")?
> > >
> > > Do we have different options for the interface for defining and using
> > > palettes? Is there a doc to compare them?
> >
> > I'm not sure what you mean by that.
>
> If PaletteValues should be considered as part of our API, it needs more
> discussion, and an overview of alternatives (such as the
> Theme.paletteColor("paletteName", "colorName")). The names of the properties
> (do we need a nameText in addition to every property name, is "Text" the best
> name since it can also be an image, ..) would also be part of that discussion.

The names were agreed upon by design. The *Text suffix follows the convention used by Qt.
http://qt-project.org/doc/qt-5.0/qtgui/qpalette.html#ColorRole-enum

>
> But I'm not sure if we consider PaletteValues as such. Can each Theme deffine
> its own PaletteValues properties?

No, it's meant to be a single palette API for everybody, like in Qt.

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:615
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/277/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-saucy/769
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-amd64-ci/134
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/134
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/134/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/771
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/771/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-saucy/692

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/277/rebuild

review: Approve (continuous-integration)

[Tim Peeters (tpeeters)]

"field" colors are never used. Are they needed?

[lp:~fboucault/ubuntu-ui-toolkit/color_palette]

616. By Florian Boucault on 2013-07-05

Updated background noise with asset provided by Rosie.

617. By Florian Boucault on 2013-07-05

Removed pointless color tests.

618. By Florian Boucault on 2013-07-05

Merged trunk

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:618
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/280/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-saucy/780
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-amd64-ci/137
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/137
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/137/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/782
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/782/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-saucy/701

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/280/rebuild

review: Approve (continuous-integration)

[lp:~fboucault/ubuntu-ui-toolkit/color_palette]

619. By Florian Boucault on 2013-07-05

Added missing documentation.

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:619
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/283/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-saucy/791
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-amd64-ci/140
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/140
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/140/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/793
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/793/artifact/work/output/*zip*/output.zip
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-saucy/709

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/283/rebuild

review: Needs Fixing (continuous-integration)

[lp:~fboucault/ubuntu-ui-toolkit/color_palette]

620. By Florian Boucault on 2013-07-08

Merged from trunk

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:620
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/284/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-saucy/794
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-amd64-ci/141
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/141
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/141/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/796
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/796/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-saucy/712

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/284/rebuild

review: Approve (continuous-integration)

[Florian Boucault (fboucault)]

Everything is good to go now.

[Andrea Cimitan (cimi)]

I was wondering whether normal and selected are enough, or we will need something like 'insensitive' (imagine a button you can't press because is disabled, like in an indicator or a system setting..)

[Florian Boucault (fboucault)]

> I was wondering whether normal and selected are enough, or we will need
> something like 'insensitive' (imagine a button you can't press because is
> disabled, like in an indicator or a system setting..)

These things will be added later as we need them.

[Tim Peeters (tpeeters)]

qt patched to fix the tabs header font color (opacity) problem.

review: Approve

=== modified file 'examples/jokes/jokes.qml'
--- examples/jokes/jokes.qml	2013-05-02 00:34:47 +0000
+++ examples/jokes/jokes.qml	2013-07-08 02:02:26 +0000
@@ -88,7 +88,7 @@
     }
 
     UbuntuShape {
-        color: "#888888"
+        color: Theme.palette.normal.base
         radius: "medium"
         anchors.centerIn: parent
         anchors.margins: units.gu(10)
@@ -106,7 +106,7 @@
             anchors.fill: parent
             text: "Tap here!"
             fontSize: "large"
-            color: "#f1f1f1"
+            color: Theme.palette.normal.baseText
             textFormat: Text.RichText
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter

=== modified file 'examples/locale/locale.qml'
--- examples/locale/locale.qml	2013-05-02 00:01:27 +0000
+++ examples/locale/locale.qml	2013-07-08 02:02:26 +0000
@@ -89,7 +89,7 @@
                 highlight: Rectangle {
                     height: units.gu(2)
                     width: view.width
-                    color: "pink"
+                    color: Theme.palette.selected.background
                 }
             }
         }
@@ -100,7 +100,7 @@
                 leftMargin: units.gu(0.5)
                 bottom: parent.bottom
             }
-            color: "lightgrey"
+            color: Theme.palette.normal.base
             width: parent.width
             Column {
                 anchors.fill: parent

=== modified file 'examples/ubuntu-ui-toolkit-gallery/Dialog.qml'
--- examples/ubuntu-ui-toolkit-gallery/Dialog.qml	2013-07-01 05:54:33 +0000
+++ examples/ubuntu-ui-toolkit-gallery/Dialog.qml	2013-07-08 02:02:26 +0000
@@ -43,11 +43,11 @@
 
                 Button {
                     text: "Cancel"
+                    gradient: UbuntuColors.greyGradient
                     onClicked: PopupUtils.close(dialogue)
                 }
                 Button {
                     text: "Delete"
-                    color: UbuntuColors.orange
                     onClicked: PopupUtils.close(dialogue)
                 }
             }

=== modified file 'examples/ubuntu-ui-toolkit-gallery/ListItems.qml'
--- examples/ubuntu-ui-toolkit-gallery/ListItems.qml	2013-06-19 09:43:01 +0000
+++ examples/ubuntu-ui-toolkit-gallery/ListItems.qml	2013-07-08 02:02:26 +0000
@@ -107,7 +107,7 @@
             removable: true
             backgroundIndicator: Rectangle {
                 anchors.fill: parent
-                color: "gray"
+                color: Theme.palette.normal.base
             }
         }
     }
@@ -117,7 +117,7 @@
         className: "Header"
 
         Rectangle {
-            color: "#f7f7f7"
+            color: Qt.rgba(0.0, 0.0, 0.0, 0.01)
             anchors.left: parent.left
             anchors.right: parent.right
             height: groupedList.height

=== modified file 'examples/ubuntu-ui-toolkit-gallery/ListItemsSection.qml'
--- examples/ubuntu-ui-toolkit-gallery/ListItemsSection.qml	2013-04-24 17:09:29 +0000
+++ examples/ubuntu-ui-toolkit-gallery/ListItemsSection.qml	2013-07-08 02:02:26 +0000
@@ -22,21 +22,14 @@
     property alias delegate: repeater.delegate
     documentation: "qml-ubuntu-components-listitems0-%1.html".arg(className.toLowerCase())
 
-    Rectangle {
-        color: "#f7f7f7"
+    Column {
+        id: column
         anchors.left: parent.left
         anchors.right: parent.right
-        height: column.height
-
-        Column {
-            id: column
-            anchors.left: parent.left
-            anchors.right: parent.right
-
-            Repeater {
-                id: repeater
-                model: 4
-            }
+
+        Repeater {
+            id: repeater
+            model: 4
         }
     }
 }

=== modified file 'examples/ubuntu-ui-toolkit-gallery/UbuntuShape.qml'
--- examples/ubuntu-ui-toolkit-gallery/UbuntuShape.qml	2013-07-01 05:54:33 +0000
+++ examples/ubuntu-ui-toolkit-gallery/UbuntuShape.qml	2013-07-08 02:02:26 +0000
@@ -66,27 +66,27 @@
             UbuntuShape {
                 objectName: "ubuntushape_radius_small"
 
-                color: "#dd4814"
+                color: Theme.palette.normal.foreground
                 radius: "small"
 
                 Label {
                     anchors.centerIn: parent
                     text: "small"
                     fontSize: "x-small"
-                    color: "#f1f1f1"
+                    color: Theme.palette.normal.foregroundText
                 }
             }
 
             UbuntuShape {
                 objectName: "ubuntushape_radius_medium"
-                color: "#dd4814"
+                color: Theme.palette.normal.foreground
                 radius: "medium"
 
                 Label {
                     anchors.centerIn: parent
                     text: "medium"
                     fontSize: "x-small"
-                    color: "#f1f1f1"
+                    color: Theme.palette.normal.foregroundText
                 }
             }
         }
@@ -98,7 +98,7 @@
 
             UbuntuShape {
                 objectName: "ubuntushape_sizes_15_6"
-                color: "#dd4814"
+                color: Theme.palette.normal.foreground
                 width: units.gu(15)
                 height: units.gu(6)
                 anchors.verticalCenter: parent.verticalCenter
@@ -106,7 +106,7 @@
 
             UbuntuShape {
                 objectName: "ubuntushape_sizes_10_14"
-                color: "#dd4814"
+                color: Theme.palette.normal.foreground
                 width: units.gu(10)
                 height: units.gu(14)
             }

=== modified file 'examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml'
--- examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml	2013-06-19 10:17:28 +0000
+++ examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml	2013-07-08 02:02:26 +0000
@@ -76,7 +76,7 @@
             flickable: widgetList
 
             Rectangle {
-                color: "#e0e0e0"
+                color: Qt.rgba(0.0, 0.0, 0.0, 0.01)
                 anchors.fill: parent
 
                 ListView {

=== modified file 'modules/Ubuntu/Components/Label.qml'
--- modules/Ubuntu/Components/Label.qml	2013-07-01 05:54:33 +0000
+++ modules/Ubuntu/Components/Label.qml	2013-07-08 02:02:26 +0000
@@ -56,5 +56,5 @@
 
     font.pixelSize: FontUtils.sizeToPixels(fontSize)
     font.family: "Ubuntu"
-    color: UbuntuColors.coolGrey
+    color: Theme.palette.selected.backgroundText
 }

=== modified file 'modules/Ubuntu/Components/ListItems/Caption.qml'
--- modules/Ubuntu/Components/ListItems/Caption.qml	2012-11-29 18:13:17 +0000
+++ modules/Ubuntu/Components/ListItems/Caption.qml	2013-07-08 02:02:26 +0000
@@ -38,7 +38,7 @@
     \b{This component is under heavy development.}
 */
 Item {
-    height: framing.height
+    height: captionText.height + units.gu(1)
     width: parent ? parent.width : units.gu(31)
 
     /*!
@@ -48,23 +48,13 @@
      */
     property alias text: captionText.text
 
-    Rectangle {
-        id: framing
-        color: "#e0e0e0"
-        anchors {
-            left: parent.left
-            right: parent.right
-        }
-        height: captionText.height + units.gu(1)
-
-        Label {
-            id: captionText
-            anchors.centerIn: parent
-            width: parent.width - units.gu(1)
-            wrapMode: Text.Wrap
-            color: Qt.rgba(0.4, 0.4, 0.4, 1.0)
-            horizontalAlignment: Text.AlignLeft
-            fontSize: "small"
-        }
+    Label {
+        id: captionText
+        anchors.centerIn: parent
+        width: parent.width - units.gu(1)
+        wrapMode: Text.Wrap
+        color: Theme.palette.normal.backgroundText
+        horizontalAlignment: Text.AlignLeft
+        fontSize: "small"
     }
 }

=== modified file 'modules/Ubuntu/Components/ListItems/Empty.qml'
--- modules/Ubuntu/Components/ListItems/Empty.qml	2013-06-12 18:22:07 +0000
+++ modules/Ubuntu/Components/ListItems/Empty.qml	2013-07-08 02:02:26 +0000
@@ -283,8 +283,7 @@
             top: parent.top
         }
         height: emptyListItem.height - bottomDividerLine.height
-        color: "#E6E6E6"
-        opacity: 0.7
+        color: Theme.palette.selected.background
     }
 
 

=== modified file 'modules/Ubuntu/Components/ListItems/LabelVisual.qml'
--- modules/Ubuntu/Components/ListItems/LabelVisual.qml	2013-07-01 05:54:33 +0000
+++ modules/Ubuntu/Components/ListItems/LabelVisual.qml	2013-07-08 02:02:26 +0000
@@ -21,9 +21,10 @@
 Label {
     id: label
     property bool selected: false
+    property bool secondary: false
 
     fontSize: "medium"
     elide: Text.ElideRight
-    color: selected ? UbuntuColors.orange : Qt.rgba(0.4, 0.4, 0.4, 1.0)
+    color: selected ? UbuntuColors.orange : secondary ? Theme.palette.normal.backgroundText : Theme.palette.selected.backgroundText
     opacity: label.enabled ? 1.0 : 0.5
 }

=== modified file 'modules/Ubuntu/Components/ListItems/MultiValue.qml'
--- modules/Ubuntu/Components/ListItems/MultiValue.qml	2013-06-12 18:25:32 +0000
+++ modules/Ubuntu/Components/ListItems/MultiValue.qml	2013-07-08 02:02:26 +0000
@@ -77,6 +77,7 @@
         LabelVisual {
             id: valueLabel
             selected: multiValueListItem.selected
+            secondary: true
             anchors {
                 top: label.bottom
                 left: parent.left

=== modified file 'modules/Ubuntu/Components/ListItems/Standard.qml'
--- modules/Ubuntu/Components/ListItems/Standard.qml	2013-06-25 16:46:30 +0000
+++ modules/Ubuntu/Components/ListItems/Standard.qml	2013-07-08 02:02:26 +0000
@@ -160,8 +160,7 @@
             bottom: parent.bottom
             left: parent.left
         }
-        color: "#E6E6E6"
-        opacity: 0.7
+        color: Theme.palette.selected.background
     }
 
     Rectangle {
@@ -174,8 +173,7 @@
             bottom: parent.bottom
             right: parent.right
         }
-        color: "#E6E6E6"
-        opacity: 0.7
+        color: Theme.palette.selected.background
     }
 
     IconVisual {

=== modified file 'modules/Ubuntu/Components/ListItems/Subtitled.qml'
--- modules/Ubuntu/Components/ListItems/Subtitled.qml	2013-02-05 16:10:59 +0000
+++ modules/Ubuntu/Components/ListItems/Subtitled.qml	2013-07-08 02:02:26 +0000
@@ -104,6 +104,7 @@
         LabelVisual {
             id: subLabel
             selected: subtitledListItem.selected
+            secondary: true
             anchors {
 
                 left: parent.left

=== modified file 'modules/Ubuntu/Components/ListItems/ValueSelector.qml'
--- modules/Ubuntu/Components/ListItems/ValueSelector.qml	2013-06-12 18:25:32 +0000
+++ modules/Ubuntu/Components/ListItems/ValueSelector.qml	2013-07-08 02:02:26 +0000
@@ -248,7 +248,7 @@
 
             model: selector.values
             Rectangle {
-                color: "#e0e0e0"
+                color: Qt.lighter(Theme.palette.normal.base)
                 height: valueRepeater.valueHeight
                 width: parent.width
 

=== modified file 'modules/Ubuntu/Components/Panel.qml'
--- modules/Ubuntu/Components/Panel.qml	2013-06-26 19:25:09 +0000
+++ modules/Ubuntu/Components/Panel.qml	2013-07-08 02:02:26 +0000
@@ -55,7 +55,7 @@
 
                 Rectangle {
                     anchors.fill: parent
-                    color: "black"
+                    color: Theme.palette.normal.overlay
 
                     Button {
                         anchors.centerIn: parent
@@ -110,7 +110,7 @@
         import Ubuntu.Components 0.1
 
         Rectangle {
-            color: "grey"
+            color: Theme.palette.normal.background
             width: units.gu(40)
             height: units.gu(40)
 
@@ -124,13 +124,13 @@
                 height: units.gu(8)
 
                 Rectangle {
-                    color: "white"
+                    color: Theme.palette.normal.overlay
                     anchors.fill: parent
                     Rectangle {
                         width: units.gu(8)
                         height: units.gu(4)
                         anchors.centerIn: parent
-                        color: "red"
+                        color: Theme.palette.normal.foreground
                         signal clicked()
                         onClicked: print("The red rectangle was clicked");
                     }

=== modified file 'modules/Ubuntu/Components/Popups/ActionSelectionPopover.qml'
--- modules/Ubuntu/Components/Popups/ActionSelectionPopover.qml	2013-06-26 19:25:09 +0000
+++ modules/Ubuntu/Components/Popups/ActionSelectionPopover.qml	2013-07-08 02:02:26 +0000
@@ -116,6 +116,7 @@
                 horizontalCenter: parent.horizontalCenter
             }
             wrapMode: Text.Wrap
+            color: Theme.palette.normal.overlayText
         }
         /*! \internal */
         onTriggered: popover.hide()

=== modified file 'modules/Ubuntu/Components/Popups/Popover.qml'
--- modules/Ubuntu/Components/Popups/Popover.qml	2013-06-27 15:20:12 +0000
+++ modules/Ubuntu/Components/Popups/Popover.qml	2013-07-08 02:02:26 +0000
@@ -37,7 +37,7 @@
         import Ubuntu.Components.Popups 0.1
 
         Rectangle {
-            color: "grey"
+            color: Theme.palette.normal.background
             width: units.gu(80)
             height: units.gu(80)
             Component {

=== modified file 'modules/Ubuntu/Components/TextArea.qml'
--- modules/Ubuntu/Components/TextArea.qml	2013-06-30 20:54:11 +0000
+++ modules/Ubuntu/Components/TextArea.qml	2013-07-08 02:02:26 +0000
@@ -723,6 +723,8 @@
 
     //internals
 
+    opacity: enabled ? 1.0 : 0.3
+
     /*!\internal */
     onVisibleChanged: {
         if (!visible)
@@ -888,7 +890,6 @@
 
     // holding default values
     Label { id: fontHolder }
-    SystemPalette { id: systemColors }
 
     //hint
     Label {
@@ -899,7 +900,7 @@
         }
         // hint is shown till user types something in the field
         visible: (editor.getText(0, editor.length) == "") && !editor.inputMethodComposing
-        color: Qt.rgba(0.5, 0.5, 0.5, 0.5)
+        color: Theme.palette.normal.backgroundText
         fontSize: "medium"
         elide: Text.ElideRight
         wrapMode: Text.WordWrap
@@ -958,8 +959,8 @@
             selectByMouse: false
             cursorDelegate: cursor
             color: control.__styleInstance.color
-            selectedTextColor: "#F3F3E7"
-            selectionColor: "#19B6EE"
+            selectedTextColor: Theme.palette.selected.foregroundText
+            selectionColor: Theme.palette.selected.foreground
             font.pixelSize: FontUtils.sizeToPixels("medium")
             // forward keys to the root element so it can be captured outside of it
             Keys.forwardTo: [control]

=== modified file 'modules/Ubuntu/Components/TextField.qml'
--- modules/Ubuntu/Components/TextField.qml	2013-07-03 10:30:54 +0000
+++ modules/Ubuntu/Components/TextField.qml	2013-07-08 02:02:26 +0000
@@ -786,6 +786,8 @@
 
     // internals
 
+    opacity: enabled ? 1.0 : 0.3
+
     /*! \internal */
     onVisibleChanged: {
         if (!visible)
@@ -801,7 +803,6 @@
     }
 
     Text { id: fontHolder }
-    SystemPalette { id: systemColors }
 
     //internals
     /*! \internal */
@@ -959,7 +960,7 @@
         }
         // hint is shown till user types something in the field
         visible: (editor.text == "") && !editor.inputMethodComposing
-        color: Qt.rgba(0.5, 0.5, 0.5, 0.5)
+        color: Theme.palette.normal.backgroundText
         fontSize: "medium"
         elide: Text.ElideRight
     }
@@ -981,8 +982,8 @@
         onTextChanged: internal.textChanged = true
         cursorDelegate: cursor
         color: control.__styleInstance.color
-        selectedTextColor: "#F3F3E7"
-        selectionColor: "#19B6EE"
+        selectedTextColor: Theme.palette.selected.foregroundText
+        selectionColor: Theme.palette.selected.foreground
         font.pixelSize: FontUtils.sizeToPixels("medium")
         passwordCharacter: "\u2022"
         // forward keys to the root element so it can be captured outside of it

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml	2013-07-01 22:26:49 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/CheckBoxStyle.qml	2013-07-08 02:02:26 +0000
@@ -20,8 +20,8 @@
 Item {
     id: visuals
     // styling properties
-    property color checkedColor: "#DD4814"
-    property color uncheckedColor: Qt.rgba(0.0, 0.0, 0.0, 0.1)
+    property color checkedColor: Theme.palette.selected.foreground
+    property color uncheckedColor: Theme.palette.normal.foreground
 
     /*!
       The image to show inside the checkbox when it is checked.

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/HeaderStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/HeaderStyle.qml	2013-06-27 15:20:12 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/HeaderStyle.qml	2013-07-08 02:02:26 +0000
@@ -27,7 +27,7 @@
     /*!
       The background color of the header.
      */
-    property color backgroundColor: "#ededf0"
+    property color backgroundColor: Theme.palette.normal.background
 
     /*!
       The source of the background image of the header. If the image is has (semi-)transparent
@@ -50,7 +50,7 @@
 
     property int fontWeight: Font.Light
     property string fontSize: "x-large"
-    property color textColor: Qt.rgba(0.51, 0.51, 0.51, 0.9)
+    property color textColor: Theme.palette.selected.backgroundText
     property real textLeftMargin: units.gu(2)
 
     implicitHeight: headerStyle.contentHeight + separator.height + separatorBottom.height

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/MainViewStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/MainViewStyle.qml	2013-06-27 15:20:12 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/MainViewStyle.qml	2013-07-08 02:02:26 +0000
@@ -25,7 +25,7 @@
     /*!
       The background color of the main view.
      */
-    property color backgroundColor: "#ededf0"
+    property color backgroundColor: Theme.palette.normal.background
 
     /*!
       The background texture of the main view. The image will be drawn over the background color,

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/NewTabBar.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/NewTabBar.qml	2013-06-26 22:44:07 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/NewTabBar.qml	2013-07-08 02:02:26 +0000
@@ -22,8 +22,6 @@
     // styling properties
     property color headerTextColor
     property color headerTextSelectedColor
-    property real headerTextOpacity
-    property real headerTextSelectedOpacity
     property int headerTextFadeDuration
     property url indicatorImageSource
 
@@ -109,7 +107,7 @@
 
                     // Use opacity 0 to hide instead of setting visibility to false in order to
                     // make fading work well, and not to mess up width/offset computations
-                    opacity: isVisible() ? (selected ? headerTextSelectedOpacity : headerTextOpacity) : 0
+                    opacity: isVisible() ? 1.0 : 0.0
                     function isVisible() {
                         if (selected) return true;
                         if (!tabBar.active) return false;
@@ -159,6 +157,13 @@
                         id: text
                         color: selected ? headerTextSelectedColor : headerTextColor
 
+                        Behavior on color {
+                            ColorAnimation {
+                                duration: headerTextFadeDuration
+                                easing.type: Easing.InOutQuad
+                            }
+                        }
+
                         anchors {
                             left: parent.left
                             leftMargin: headerTextLeftMargin

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/Palette.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/Palette.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/Palette.qml	2013-07-08 02:02:26 +0000
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components.Themes 0.1
+
+Palette {
+    normal: PaletteValues {
+        background: "#EDEDED"
+        backgroundText: "#81888888"
+        base: "#1A000000"
+        baseText: "#888888"
+        foreground: "#888888"
+        foregroundText: "#F3F3E7"
+        overlay: "#FDFDFD"
+        overlayText: "#888888"
+        field: "#1A000000"
+        fieldText: "#888888"
+    }
+    selected: PaletteValues {
+        /* FIXME: 'background' does not come from design
+           it is used solely in the list items for the selection highlight
+           that will go away with the new design.
+        */
+        background: "#B2E6E6E6"
+        backgroundText: "#888888"
+        foreground: "#DD4814"
+        foregroundText: "#F3F3E7"
+        field: "#FFFFFF"
+        fieldText: "#888888"
+    }
+}

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/PointerStyleShader.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/PointerStyleShader.qml	2013-06-27 15:20:12 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/PointerStyleShader.qml	2013-07-08 02:02:26 +0000
@@ -23,7 +23,7 @@
         id: effect
         anchors.fill: parent
 
-        property color color: "white"
+        property color color: Theme.palette.normal.overlay
 
         // FIXME: It would be nicer to have a single transformation matrix that flips and rotates,
         //  but I did not manage to get a 3x3 matrix from QML into the shader.

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/PopoverForegroundStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/PopoverForegroundStyle.qml	2013-07-01 22:13:31 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/PopoverForegroundStyle.qml	2013-07-08 02:02:26 +0000
@@ -22,7 +22,7 @@
     id: frame
     // styling properties
     property string radius: "medium"
-    property color color: "white"
+    property color color: Theme.palette.normal.overlay
 
     property alias contentItem: body
 

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/ScrollbarStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/ScrollbarStyle.qml	2013-06-27 15:20:12 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/ScrollbarStyle.qml	2013-07-08 02:02:26 +0000
@@ -70,7 +70,7 @@
     property PropertyAnimation thumbConnectorFading: UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
     property PropertyAnimation thumbFading: UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
 
-    property color sliderColor: Qt.rgba(0.5, 0.5, 0.5, 0.7)
+    property color sliderColor: Theme.palette.normal.base
     property real sliderRadius: units.gu(0.5)
     property color thumbConnectorColor: "white"
     property url forwardThumbReleased: (styledItem.align === Qt.AlignLeading || styledItem.align === Qt.AlignTrailing) ? "artwork/ScrollbarBottomIdle.png" : "artwork/ScrollbarRightIdle.png"
@@ -177,8 +177,6 @@
         return Qt.point(map.x, map.y)
     }
 
-    SystemPalette { id: systemColors }
-
     SmoothedAnimation {
         id: scrollAnimation
 

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/SliderStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/SliderStyle.qml	2013-06-30 20:54:11 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/SliderStyle.qml	2013-07-08 02:02:26 +0000
@@ -25,19 +25,15 @@
   - backgroundColor: color for the slider bar
   - thumbColor: color for the thumb
   - thumbSpacing: spacing between the thumb and the bar
-  - backgroundOpacity: transparency for the background
-  - thumbOpacity: transparency for the thumb
   */
 
 Item {
     id: main
     // styling properties
 
-    property color backgroundColor: "#c0c0c0"
-    property color thumbColor: "#bbbbbb"
+    property color backgroundColor: Theme.palette.normal.base
+    property color thumbColor: Theme.palette.selected.foreground
     property real thumbSpacing: units.dp(2)
-    property real backgroundOpacity: 0.1
-    property real thumbOpacity: 1.0
 
     // visuals
     anchors.fill: parent
@@ -58,7 +54,6 @@
 
         anchors.fill: parent
         color: main.backgroundColor
-        opacity: main.backgroundOpacity
     }
 
     UbuntuShape {
@@ -69,7 +64,6 @@
         width: thumbWidth
         height: backgroundShape.height - (2.0 * thumbSpacing)
         color: main.thumbColor
-        opacity: main.thumbOpacity
     }
 
     Label {
@@ -82,7 +76,7 @@
         horizontalAlignment: Text.AlignHCenter
         text: styledItem.formatValue(MathUtils.clamp(liveValue, styledItem.minimumValue, styledItem.maximumValue))
         fontSize: "medium"
-        color: "white"
+        color: Theme.palette.selected.foregroundText
         font.weight: Font.Bold
     }
 }

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/SwitchStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/SwitchStyle.qml	2013-07-01 22:26:49 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/SwitchStyle.qml	2013-07-08 02:02:26 +0000
@@ -38,11 +38,11 @@
     /*!
       Color of the thumb when the switch is checked.
      */
-    property color checkedThumbColor: "#DD4814"
+    property color checkedThumbColor: Theme.palette.selected.foreground
     /*!
       Color of the thumb when the switch is not checked.
      */
-    property color uncheckedThumbColor: "#bbbbbb"
+    property color uncheckedThumbColor: Theme.palette.normal.foreground
     /*!
       The animation to fade the color from checkedColor to uncheckedColor and vice versa.
      */
@@ -52,7 +52,7 @@
      */
     property NumberAnimation moveThumbAnimation: UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
 
-    property color backgroundColor: Qt.rgba(0.78, 0.78, 0.78, 0.1)
+    property color backgroundColor: Theme.palette.normal.base
     property real thumbWidth: units.gu(4)
     property real thumbHeight: units.gu(4)
 

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/TabsStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/TabsStyle.qml	2013-06-27 15:20:12 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/TabsStyle.qml	2013-07-08 02:02:26 +0000
@@ -38,10 +38,8 @@
      */
     onSwipeToSwitchTabsChanged: print("swipeToSwitchTabs property is DEPRECATED.")
 
-    property color headerTextColor: "#333333"
-    property color headerTextSelectedColor: "#333333"
-    property real headerTextOpacity: 0.4
-    property real headerTextSelectedOpacity: 0.9
+    property color headerTextColor: Theme.palette.normal.backgroundText
+    property color headerTextSelectedColor: Theme.palette.selected.backgroundText
     property int headerTextFadeDuration: 350
     property string headerFontSize: "x-large"
     property int headerFontWeight: Font.Light
@@ -78,8 +76,6 @@
             //height: tabBarHeight
             headerTextColor: tabsStyle.headerTextColor
             headerTextSelectedColor: tabsStyle.headerTextSelectedColor
-            headerTextOpacity: tabsStyle.headerTextOpacity
-            headerTextSelectedOpacity: tabsStyle.headerTextSelectedOpacity
             headerTextFadeDuration: tabsStyle.headerTextFadeDuration
             indicatorImageSource: tabsStyle.indicatorImageSource
             headerFontSize: tabsStyle.headerFontSize

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/TextAreaStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/TextAreaStyle.qml	2013-07-01 05:54:33 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/TextAreaStyle.qml	2013-07-08 02:02:26 +0000
@@ -25,13 +25,12 @@
     // FIXME: needs type checking in themes to define the proper type to be used
     // if color type is used, alpha value gets lost
 
-    property color color: (styledItem.enabled) ? "#757373"  : "darkgray"
+    property color color: (styledItem.focus || styledItem.highlighted) ? Theme.palette.selected.fieldText : Theme.palette.normal.fieldText
     /*!
       Background fill color
       */
-    property color backgroundColor: (styledItem.focus || styledItem.highlighted) ? "white" : Qt.rgba(0, 0, 0, 0.1)
+    property color backgroundColor: (styledItem.focus || styledItem.highlighted) ? Theme.palette.selected.field : Theme.palette.normal.field
     property color errorColor: UbuntuColors.orange
-    property real backgroundOpacity: styledItem.enabled ? 1.0 : 0.1
 
     /*!
       Spacing between the frame and the text editor area
@@ -48,7 +47,6 @@
         onErrorChanged: (error) ? visuals.errorColor : visuals.backgroundColor;
         color: visuals.backgroundColor;
         anchors.fill: parent
-        opacity: visuals.backgroundOpacity
 
         MouseArea {
             anchors.fill: parent

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml	2013-06-27 15:20:12 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml	2013-07-08 02:02:26 +0000
@@ -21,7 +21,7 @@
     /*!
       Cursor color
       */
-    property color color: Qt.rgba(0.4, 0.4, 0.4, 1.0)
+    property color color: Theme.palette.selected.foreground
 
     /*!
       Properties driving cursor blinking. If either of these values are 0, no
@@ -36,7 +36,7 @@
       */
     property var pinSize: units.gu(1.2)
     property var pinSensingOffset: units.dp(4)
-    property color pinColor: "blue"
+    property color pinColor: Theme.palette.selected.foreground
 
     anchors.fill: parent
     Rectangle {

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/ToolbarButtonStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/ToolbarButtonStyle.qml	2013-06-27 15:20:12 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/ToolbarButtonStyle.qml	2013-07-08 02:02:26 +0000
@@ -51,7 +51,7 @@
             width: paintedWidth
             text: styledItem.text
             fontSize: "x-small"
-            color: "#888888"
+            color: Theme.palette.normal.overlayText
         }
     }
 

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/ToolbarStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/ToolbarStyle.qml	2013-06-27 15:20:12 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/ToolbarStyle.qml	2013-07-08 02:02:26 +0000
@@ -19,8 +19,7 @@
 Item {
     id: visuals
     // styling properties
-    property color color: "white"
-    property real barOpacity: 0.9
+    property color color: Theme.palette.normal.overlay
 
     anchors.fill: parent
 
@@ -28,7 +27,6 @@
         id: background
         anchors.fill: parent
         color: visuals.color
-        opacity: visuals.barOpacity
     }
 
     Image {

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/artwork/[e-mail]'
Binary files modules/Ubuntu/Components/Themes/Ambiance/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/Themes/Ambiance/artwork/[e-mail]	2013-07-08 02:02:26 +0000 differ
=== removed file 'modules/Ubuntu/Components/Themes/Ambiance/artwork/[e-mail]'
Binary files modules/Ubuntu/Components/Themes/Ambiance/artwork/[e-mail]	2013-02-26 16:58:55 +0000 and modules/Ubuntu/Components/Themes/Ambiance/artwork/[e-mail]	1970-01-01 00:00:00 +0000 differ
=== added file 'modules/Ubuntu/Components/Themes/Palette.qml'
--- modules/Ubuntu/Components/Themes/Palette.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Palette.qml	2013-07-08 02:02:26 +0000
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+
+/*!
+    \qmltype Palette
+    \inqmlmodule Ubuntu.Components.Themes 0.1
+    \ingroup theming
+    \brief Palette of colors from the theme that widgets use to draw themselves.
+
+    Palette provides access to colors defined by the current theme. The actual
+    color palette to use depends on the state of the widget being drawn.
+
+    A color palette (\l PaletteValues) has various roles to choose from depending
+    on what part of the widget is being drawn (the base of the widget, the
+    foreground, etc.).
+
+    For each color there is a corresponding 'text' color that is guaranteed to
+    provide good legibility for text or icons placed on top of a background
+    of the corresponding color.
+
+    Example of a Text on top of a background Rectangle:
+    \qml
+    Item {
+        Rectangle {
+            color: Theme.palette.normal.base
+        }
+
+        Text {
+            color: Theme.palette.normal.baseText
+        }
+    }
+    \endqml
+*/
+QtObject {
+    /*!
+       Color palette to use when the widget is not in any particular state.
+    */
+    property PaletteValues normal
+    /*!
+       Color palette to use when the widget is selected, for example when
+       a tab is the current one.
+    */
+    property PaletteValues selected
+}

=== added file 'modules/Ubuntu/Components/Themes/PaletteValues.qml'
--- modules/Ubuntu/Components/Themes/PaletteValues.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/PaletteValues.qml	2013-07-08 02:02:26 +0000
@@ -0,0 +1,72 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+
+/*!
+    \qmltype PaletteValues
+    \inqmlmodule Ubuntu.Components.Themes 0.1
+    \ingroup theming
+    \brief Color values used for a given widget state.
+*/
+QtObject {
+    /*!
+       Color applied to the background of the application.
+    */
+    property color background
+    /*!
+       Color applied to elements placed on top of the \l background color.
+       Typically used for labels and images.
+    */
+    property color backgroundText
+    /*!
+       Color applied to the background of widgets.
+    */
+    property color base
+    /*!
+       Color applied to elements placed on top of the \l base color.
+       Typically used for labels and images.
+    */
+    property color baseText
+    /*!
+       Color applied to widgets on top of the base colour.
+    */
+    property color foreground
+    /*!
+       Color applied to elements placed on top of the \l foreground color.
+       Typically used for labels and images.
+    */
+    property color foregroundText
+    /*!
+       Color applied to the background of widgets floating over other widgets.
+       For example: popovers, Toolbar.
+    */
+    property color overlay
+    /*!
+       Color applied to elements placed on top of the \l overlay color.
+       Typically used for labels and images.
+    */
+    property color overlayText
+    /*!
+       Colour applied to the backgrouhnd of text input fields.
+    */
+    property color field
+    /*!
+       Color applied to elements placed on top of the \l field color.
+       Typically used for labels and images.
+    */
+    property color fieldText
+}

=== modified file 'modules/Ubuntu/Components/Themes/Themes.pro'
--- modules/Ubuntu/Components/Themes/Themes.pro	2013-06-30 13:04:37 +0000
+++ modules/Ubuntu/Components/Themes/Themes.pro	2013-07-08 02:02:26 +0000
@@ -1,2 +1,13 @@
 TEMPLATE = subdirs
 SUBDIRS += Ambiance
+
+uri = Ubuntu.Components.Themes
+installPath = $$[QT_INSTALL_QML]/$$replace(uri, \\., /)
+
+qmldir_file.path = $$installPath
+qmldir_file.files = qmldir
+
+qml_files.path = $$installPath
+qml_files.files = *.qml
+
+INSTALLS += qmldir_file qml_files

=== added file 'modules/Ubuntu/Components/Themes/qmldir'
--- modules/Ubuntu/Components/Themes/qmldir	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/qmldir	2013-07-08 02:02:26 +0000
@@ -0,0 +1,3 @@
+module Ubuntu.Components.Themes
+Palette 0.1 Palette.qml
+PaletteValues 0.1 PaletteValues.qml

=== modified file 'modules/Ubuntu/Components/plugin/uctheme.cpp'
--- modules/Ubuntu/Components/plugin/uctheme.cpp	2013-07-01 16:03:38 +0000
+++ modules/Ubuntu/Components/plugin/uctheme.cpp	2013-07-08 02:02:26 +0000
@@ -19,6 +19,7 @@
 
 #include "uctheme.h"
 #include "listener.h"
+#include "quickutils.h"
 
 #include <QtQml/qqml.h>
 #include <QtQml/QQmlEngine>
@@ -71,12 +72,17 @@
 
 UCTheme::UCTheme(QObject *parent) :
     QObject(parent),
-    m_name("")
+    m_name(""),
+    m_palette(NULL)
 {
     m_name = m_themeSettings.themeName();
     QObject::connect(&m_themeSettings, &UCThemeSettings::themeNameChanged,
                      this, &UCTheme::onThemeNameChanged);
     updateThemePaths();
+
+    loadPalette();
+    QObject::connect(this, &UCTheme::nameChanged,
+                     this, &UCTheme::loadPalette, Qt::UniqueConnection);
 }
 
 void UCTheme::onThemeNameChanged()
@@ -132,6 +138,16 @@
     }
 }
 
+/*!
+    \qmlproperty Palette Theme::palette
+
+    The palette of the current theme.
+*/
+QObject* UCTheme::palette() const
+{
+    return m_palette;
+}
+
 QUrl UCTheme::styleUrl(QString styleName)
 {
     QUrl styleUrl;
@@ -191,3 +207,12 @@
     QObject::connect(this, SIGNAL(nameChanged()),
                      &themeChangeListener, SLOT(updateContextProperty()));
 }
+
+void UCTheme::loadPalette()
+{
+    if (m_palette != NULL) {
+        delete m_palette;
+    }
+    m_palette = QuickUtils::instance().createQmlObject((styleUrl("Palette.qml")));
+    Q_EMIT paletteChanged();
+}

=== modified file 'modules/Ubuntu/Components/plugin/uctheme.h'
--- modules/Ubuntu/Components/plugin/uctheme.h	2013-07-01 00:36:03 +0000
+++ modules/Ubuntu/Components/plugin/uctheme.h	2013-07-08 02:02:26 +0000
@@ -32,6 +32,7 @@
     Q_OBJECT
 
     Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
+    Q_PROPERTY(QObject* palette READ palette NOTIFY paletteChanged)
 public:
     static UCTheme& instance() {
         static UCTheme instance;
@@ -43,12 +44,14 @@
     // getter/setters
     QString name() const;
     void setName(QString name);
+    QObject* palette() const;
 
     Q_INVOKABLE QQmlComponent* createStyleComponent(QString styleName, QObject* parent);
     void registerToContext(QQmlContext* context);
 
 Q_SIGNALS:
     void nameChanged();
+    void paletteChanged();
 
 private Q_SLOTS:
     void onThemeNameChanged();
@@ -56,8 +59,11 @@
     void updateThemePaths();
     QUrl styleUrl(QString styleName);
     QString parentThemeName(QString themeName);
+    void loadPalette();
+
 private:
     QString m_name;
+    QObject* m_palette;
     QList<QUrl> m_themePaths;
     UCThemeSettings m_themeSettings;
 };

=== modified file 'tests/unit_x11/tst_components/tst_textfield.qml'
--- tests/unit_x11/tst_components/tst_textfield.qml	2013-07-03 10:20:24 +0000
+++ tests/unit_x11/tst_components/tst_textfield.qml	2013-07-08 02:02:26 +0000
@@ -205,14 +205,6 @@
             compare(textField.selectByMouse, true, "selectByMouse default")
         }
 
-        function test_0_selectedTextColor() {
-            compare(textField.selectedTextColor, "#f3f3e7", "selectedTextColor default")
-        }
-
-        function test_0_selectionColor() {
-            compare(textField.selectionColor, "#19b6ee", "selectionColor default")
-        }
-
         function test_0_placeholderText() {
             compare(textField.placeholderText, "", "placeholderText is '' by default")
         }