Added color scheme and new configuration options

README.md

@@ -16,31 +16,23 @@ Simple dark SDDM theme.
 
 Create file `theme.conf.user` in theme folder. See `slice/theme.conf` for reference.
 
-### Available options
+### Base options
 
 * `font` - overall font. Defaults to `Roboto`.
 * `background` - path to background image. If not set, falls back to `color_bg`. Not set by default.
 * `bg_mode` - background image fill mode. Can be either `aspect`, `fill`, `tile` or `none`. Defaults to `aspect`.
 * `parallax_bg_shift` - shifting of parallax background on tab change in pixels. `0` disables parallax motion. Negative values will scroll background in opposite direction. Default is `20`.
-* `color_bg` - main background color. Defaults to `#222222`.
+
-* `color_button_bg_idle` - button background color (in idle state). Defaults to `#888888`.
+### Color scheme
-* `color_button_bg_hover` - button background color (in hover state). Defaults to `#aaaaaa`.
+
-* `color_button_bg_selected` - selected button background color (in idle state). Defaults to `#dddddd`.
+There are many color options. In fact, too many. So now they are grouped by layers in [color scheme](https://github.com/RadRussianRus/sddm-slice/wiki/Color-scheme). Most of them are optional, only mandatory options are from [layer 1](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-1):
-* `color_button_bg_selected_hover` - selected button background color (in hover state). Defaults to `#cccccc`.
+
-* `color_button_text` - button text color (in any state). Defaults to `#1f1f1f`.
+* `color_bg` - background color. Defaults to `#222222`.
-* `color_text` - main text and foreground elements color (such as progress bar and power icons). Defaults to `#dddddd`.
+* `color_main` - main color. Defaults to `#dddddd`.
-* `color_placeholder_text` - placeholder text color (in password field). Defaults to `#888888`.
+* `color_dimmed` - dimmed main color. Defaults to `#888888`.
-* `color_input_bg` - input field background color. Defaults to `#22ffffff`.
+* `color_contrast` - color that contrasting to both main and dimmed. Defaults to `#1f1f1f`.
-* `color_input_text` - input field background color. Defaults to `#dddddd`.
+
-* `color_selection_bg` - selected text background color. Defaults to `#555555`.
+Info about other layers can be found on wiki: [layer 2](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-2), [layer 3](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-3).
-* `color_selection_text` - selected text color. Defaults to `#dddddd`.
-* `color_text_bg` - text elements background color. Defaults to `#22ffffff`.
-* `color_icon_bg` - image elements background color. Defaults to `#11ffffff`.
-* `color_error_bg` - error message background color. Defaults to `#11ffffff`.
-* `color_error_text` - error message text color. Defaults to `#dddddd`.
-* `color_progress_bar` - progress bar color. Defaults to `#dddddd`.
-* `color_progress_bar_slider` - progress bar slider color. Defaults to `#dddddd`.
-* `color_progress_bar_bg` - progress bar background color. Defaults to `#888888`.
 
 ## License
 

slice/ColorScheme.qml

@@ -0,0 +1,196 @@
+import QtQuick 2.7
+
+Item
+{
+    /* * * * * * * * * * * * * * * * * *
+     *
+     *  Layer 1 options
+     *  Required
+     *
+     * * * * * * * * * * * * * * * * * */
+
+    // Background
+    property color background: config.color_bg
+
+    // Base colors
+    property color main: config.color_main
+    property color dimmed: config.color_dimmed
+    property color contrast: config.color_contrast
+
+
+    /* * * * * * * * * * * * * * * * * *
+     *
+     *  Layer 2 options
+     *  Common
+     *
+     * * * * * * * * * * * * * * * * * */
+
+    // Text elements
+    property color text:
+    {
+        if (config.color_text) return config.color_text
+        else                   return main
+    }
+    property color textDimmed:
+    {
+        if (config.color_text_dimmed) return config.color_text_dimmed
+        else                          return dimmed
+    } 
+    property color textBg: {
+        if (config.color_text_bg) return config.color_text_bg
+        else                      return Qt.rgba(main.r, main.g, main.b, 0.1)
+    }
+    property color textHover:
+    {
+        if (config.color_text_hover) return config.color_text_hover
+        else                         return text
+    }
+    property color textDimmedHover:
+    {
+        if (config.color_text_dimmed_hover) return config.color_text_dimmed_hover
+        else                                return textDimmed
+    }
+    property color textBgHover:
+    {
+        if (config.color_text_bg_hover) return config.color_text_bg_hover
+        else if (config.color_text_bg)  return config.color_text_bg
+        else                            return Qt.rgba(main.r, main.g, main.b, 0.15)
+    }
+
+    // Icon elements
+    property color icon:
+    {
+        if (config.color_icon) return config.color_icon
+        else                   return text
+    }
+    property color iconBg:
+    { 
+        if (config.color_icon_bg) return config.color_icon_bg
+        else                      return Qt.rgba(main.r, main.g, main.b, 0.05)
+    }
+    property color iconHover:
+    {
+        if (config.color_icon_hover) return config.color_icon_hover
+        else if (config.color_icon)  return config.color_icon
+        else                         return textHover
+    }
+    property color iconBgHover:
+    {
+        if (config.color_icon_bg_hover) return config.color_icon_bg_hover
+        else if (config.color_icon_bg)  return config.color_icon_bg
+        else                            return Qt.rgba(main.r, main.g, main.b, 0.1)
+    }
+
+    // Button text
+    property color buttonText:
+    {
+        if (config.color_button_text) return config.color_button_text
+        else                          return contrast
+    }
+    property color buttonTextHover:
+    {
+        if (config.color_button_text_hover)     return config.color_button_text_hover
+        else                                    return buttonText
+    }
+    property color buttonTextHighlighted:
+    {
+        if (config.color_button_text_selected)  return config.color_button_text_selected
+        else                                    return contrast
+    } 
+    property color buttonTextHoverHighlighted:
+    {
+        if (config.color_button_text_selected_hover) return config.color_button_text_selected_hover
+        else                                         return buttonTextHighlighted
+    }
+
+    // Button background
+    property color buttonBg:
+    {
+        if (config.color_button_bg) return config.color_button_bg
+        else                        return Qt.rgba(dimmed.r, dimmed.g, dimmed.b, 0.9)
+    }
+    property color buttonBgHover:
+    {
+        if (config.color_button_bg_hover) return config.color_button_bg_hover
+        else if (config.color_button_bg)  return config.color_button_bg
+        else                              return dimmed
+    }
+    property color buttonBgHighlighted:
+    {
+        if (config.color_button_bg_selected) return config.color_button_bg_selected
+        else                                 return Qt.rgba(main.r, main.g, main.b, 0.9)
+    } 
+    property color buttonBgHoverHighlighted:
+    {
+        if (config.color_button_bg_selected_hover) return config.color_button_bg_selected_hover
+        else if (config.color_button_bg_selected)  return config.color_button_bg_selected
+        else                                       return main
+    }
+
+    // Progress bar
+    property color progressBar:
+    {
+        if (config.color_progress_bar) return config.color_progress_bar
+        else                           return main
+    }
+    property color progressBarBg: 
+    {
+        if (config.color_progress_bar_bg) return config.color_progress_bar_bg
+        else                              return dimmed
+    }
+
+
+    /* * * * * * * * * * * * * * * * * *
+     *
+     *  Layer 3 options
+     *  Control types
+     *
+     * * * * * * * * * * * * * * * * * */
+
+    // Error message
+    property color errorText:
+    {
+        if (config.color_error_text) return config.color_error_text
+        else                         return text
+    }
+    property color errorBg:
+    {
+        if (config.color_error_bg) return config.color_error_bg
+        else                       return textBg
+    } 
+
+    // Input field
+    property color inputText:
+    {
+        if (config.color_input_text) return config.color_input_text
+        else                         return text
+    }
+    property color inputBg:
+    {
+        if (config.color_input_bg) return config.color_input_bg
+        else                       return textBg
+    }
+    property color inputPlaceholderText:
+    {
+        if (config.color_placeholder_text) return config.color_placeholder_text
+        else                               return textDimmed
+    } 
+    property color inputSelectionText:
+    {
+        if (config.color_selection_text) return config.color_selection_text
+        else                             return inputBg
+    }
+    property color inputSelectionBg:
+    {
+        if (config.color_selection_bg) return config.color_selection_bg
+        else                           return inputText
+    }
+
+    // Progress bar
+    property color progressBarSlider:
+    {
+        if (config.color_progress_bar_slider) return config.color_progress_bar_slider
+        else                                  return progressBar
+    }
+
+} 

slice/LoopListPowerItem.qml

@@ -7,6 +7,7 @@ Item
     opacity: distance
     property int duration: 100
     width: parent.width
+    property bool hover: false
 
     signal clicked()
     signal entered()
@@ -43,21 +44,21 @@ Item
         id: powerItemIconOverlay
         anchors.fill: powerItemIcon
         source: powerItemIcon
-        color: config.color_text
+        color: ( hover ? colors.iconHover : colors.icon )
     }
 
     Rectangle
     {
         width: 52
         height: 52
-        color: config.color_icon_bg
+        color: ( hover ? colors.iconBgHover : colors.iconBg )
     }
 
     Text
     {
         id: descriptionLabel
         text: itemRoot.title
-        color: config.color_text
+        color: ( hover ? colors.textHover : colors.text )
 
         font
         {
@@ -75,7 +76,7 @@ Item
         x: 54
         width: parent.width - 54
         height: 52
-        color: config.color_text_bg
+        color: ( hover ? colors.textBgHover : colors.textBg )
     }
 
     MouseArea

slice/LoopListSessionItem.qml

@@ -10,13 +10,14 @@ Item
 
     property real distance: 1.0
     property string sessionName: ""
+    property bool hover: false
 
     Text
     {
         id: sessionNameLabel
         anchors.centerIn: parent
         text: sessionName
-        color: config.color_text
+        color: ( hover ? colors.textHover : colors.text )
 
         font
         {
@@ -35,6 +36,6 @@ Item
         y: sessionNameLabel.y - 5
         width: sessionNameLabel.width + 20
         height: sessionNameLabel.height + 10
-        color: config.color_text_bg
+        color: ( hover ? colors.textBgHover : colors.textBg )
     }
 }

slice/LoopListUserItem.qml

@@ -7,6 +7,9 @@ Item
     id: itemRoot
     opacity: distance
     width: parent.width
+    
+    property bool hover: false
+    property bool hoverEnabled: true
 
     transform: Scale
     {
@@ -34,14 +37,14 @@ Item
     {
         width: 68
         height: 68
-        color: config.color_icon_bg
+        color: ( hoverEnabled && hover ? colors.iconBgHover : colors.iconBg )
     }
 
 
     Text
     {
         text: userName
-        color: config.color_text
+        color: ( hoverEnabled && hover ? colors.textHover : colors.text )
         
         font
         {
@@ -57,7 +60,7 @@ Item
     Text
     {
         text: userLogin
-        color: config.color_text
+        color: ( hoverEnabled && hover ? (userName == "" ? colors.textHover : colors.textDimmedHover ) : (userName == "" ? colors.text : colors.textDimmed ) )
         y: userName == "" ? 6 : 36
         font
         {
@@ -74,6 +77,6 @@ Item
         y: 0
         width: parent.width - 70
         height: 68
-        color: config.color_text_bg
+        color: ( hoverEnabled && hover ? colors.textBgHover : colors.textBg )
     }
 }

slice/Main.qml

@@ -5,7 +5,7 @@ import SddmComponents 2.0
 Rectangle
 {
     id: root
-    color: config.color_bg
+    color: colors.background
     property variant geometry: screenModel.geometry(screenModel.primary)
 
     state: "stateUsers"
@@ -21,9 +21,9 @@ Rectangle
             PropertyChanges { target: pageSessions; enabled: false; focus: false; x: areaMain.width }
             PropertyChanges { target: pageUsers;    enabled: false; focus: false; x: areaMain.width * 2 }
 
-            PropertyChanges { target: buttonPagePower;    selected: true  }
+            PropertyChanges { target: buttonPagePower;    highlighted: true  }
-            PropertyChanges { target: buttonPageSessions; selected: false }
+            PropertyChanges { target: buttonPageSessions; highlighted: false }
-            PropertyChanges { target: buttonPageUsers;    selected: false }
+            PropertyChanges { target: buttonPageUsers;    highlighted: false }
 
         },
         State
@@ -36,9 +36,9 @@ Rectangle
             PropertyChanges { target: pageSessions; enabled: true ; focus: true ; x: 0 }
             PropertyChanges { target: pageUsers;    enabled: false; focus: false; x: areaMain.width }
 
-            PropertyChanges { target: buttonPagePower;    selected: false }
+            PropertyChanges { target: buttonPagePower;    highlighted: false }
-            PropertyChanges { target: buttonPageSessions; selected: true  }
+            PropertyChanges { target: buttonPageSessions; highlighted: true  }
-            PropertyChanges { target: buttonPageUsers;    selected: false }
+            PropertyChanges { target: buttonPageUsers;    highlighted: false }
         },
         State
         {
@@ -50,9 +50,9 @@ Rectangle
             PropertyChanges { target: pageSessions; enabled: false; focus: false; x: -areaMain.width }
             PropertyChanges { target: pageUsers;    enabled: true ; focus: true ; x: 0 }
 
-            PropertyChanges { target: buttonPagePower;    selected: false }
+            PropertyChanges { target: buttonPagePower;    highlighted: false }
-            PropertyChanges { target: buttonPageSessions; selected: false }
+            PropertyChanges { target: buttonPageSessions; highlighted: false }
-            PropertyChanges { target: buttonPageUsers;    selected: true  }
+            PropertyChanges { target: buttonPageUsers;    highlighted: true  }
         }
     ]
 
@@ -90,6 +90,8 @@ Rectangle
         Behavior on x { NumberAnimation { duration: 150 } }
     }
 
+    ColorScheme { id: colors }
+
     Item
     {
         id: areaTop
@@ -215,7 +217,7 @@ Rectangle
 
             hasLeftSlice: false
             text: "Caps Lock"
-            selected: keyboard.capsLock
+            highlighted: keyboard.capsLock
 
             onClicked: keyboard.capsLock = !keyboard.capsLock
         }
@@ -227,7 +229,7 @@ Rectangle
             y: 5
 
             text: "Num Lock"
-            selected: keyboard.numLock
+            highlighted: keyboard.numLock
 
             onClicked: keyboard.numLock = !keyboard.numLock
         }

slice/PagePower.qml

@@ -58,6 +58,7 @@ Item
             id: powerShutdownButton
             title: localeText.shutdown
             distance: selectedIndex == 0 ? 1.0 : 0.6
+            hover: selectedIndex == 0
             icon: "icons/power-off.svg"
 
             Layout.alignment: Qt.AlignVCenter
@@ -73,6 +74,7 @@ Item
             id: powerRebootButton
             title: localeText.reboot
             distance: selectedIndex == 1 ? 1.0 : 0.6
+            hover: selectedIndex == 1
             icon: "icons/reboot.svg"
 
             Layout.alignment: Qt.AlignVCenter
@@ -90,6 +92,7 @@ Item
             id: powerSuspendButton
             title: qsTr("Suspend")
             distance: selectedIndex == 2 ? 1.0 : 0.6
+            hover: selectedIndex == 2
             icon: "icons/suspend.svg"
 
             Layout.alignment: Qt.AlignVCenter
@@ -106,6 +109,7 @@ Item
             id: powerHibernateButton
             title: qsTr("Hibernate")
             distance: selectedIndex == 3 ? 1.0 : 0.6
+            hover: selectedIndex == 3
             icon: "icons/hibernate.svg"
 
             Layout.alignment: Qt.AlignVCenter
@@ -122,6 +126,7 @@ Item
             id: powerHybridSleepButton
             title: qsTr("Hybrid Sleep")
             distance: selectedIndex == 4 ? 1.0 : 0.6
+            hover: selectedIndex == 4
             icon: "icons/hybrid-sleep.svg"
 
             //Layout.fillHeight: true

slice/PageSessions.qml

@@ -44,6 +44,8 @@ Item
         MouseArea
         {
             id: topFarItemMouseArea
+            onEntered: { topFarItem.hover = true }
+            onExited: { topFarItem.hover = false }
             hoverEnabled: true
             x: -225
             width: 450
@@ -56,6 +58,8 @@ Item
         MouseArea
         {
             id: topMidItemMouseArea
+            onEntered: { topMidItem.hover = true }
+            onExited: { topMidItem.hover = false }
             y: topFarItemMouseArea.height
             hoverEnabled: true
             x: -225
@@ -69,6 +73,8 @@ Item
         MouseArea
         {
             id: middleItemMouseArea
+            onEntered: { middleItem.hover = true }
+            onExited: { middleItem.hover = false }
             y: topMidItemMouseArea.y + topMidItemMouseArea.height
             hoverEnabled: true
             x: -225
@@ -82,6 +88,8 @@ Item
         MouseArea
         {
             id: botMidItemMouseArea
+            onEntered: { botMidItem.hover = true }
+            onExited: { botMidItem.hover = false }
             y: middleItemMouseArea.y + middleItemMouseArea.height
             hoverEnabled: true
             x: -225
@@ -95,6 +103,8 @@ Item
         MouseArea
         {
             id: botFarItemMouseArea
+            onEntered: { botFarItem.hover = true }
+            onExited: { botFarItem.hover = false }
             y: botMidItemMouseArea.y + botMidItemMouseArea.height
             hoverEnabled: true
             x: -225

slice/PageUsers.qml

@@ -82,64 +82,75 @@ Item
         MouseArea
         {
             id: topFarItemMouseArea
+            onEntered: { topFarItem.hover = true }
+            onExited: { topFarItem.hover = false }
             hoverEnabled: true
             width: parent.width
             height: pageRoot.height / 6
-            enabled: !hasLoginShown
+            //enabled: !hasLoginShown
 
-            onClicked: { scrollRepeat = 1; scroll_down(); }
+            onClicked: { if (!hasLoginShown) { scrollRepeat = 1; scroll_down(); } }
 
         }
 
         MouseArea
         {
             id: topMidItemMouseArea
+            onEntered: { topMidItem.hover = true }
+            onExited: { topMidItem.hover = false }
             y: topFarItemMouseArea.height
             hoverEnabled: true
             width: parent.width
             height: pageRoot.height / 5
-            enabled: !hasLoginShown
+            propagateComposedEvents: true
+            //enabled: !hasLoginShown
 
-            onClicked: scroll_down()
+            onClicked: { if (!hasLoginShown) { scroll_down(); } }
 
         }
 
         MouseArea
         {
             id: middleItemMouseArea
-            y: topMidItemMouseArea.y + topMidItemMouseArea.height
+            onEntered: { middleItem.hover = true }
+            onExited: { middleItem.hover = false }
+            y: topMidItemMouseArea.y + topMidItemMouseArea.height - (hasLoginShown ? 60 : 0)
             hoverEnabled: true
             width: parent.width
             height: pageRoot.height / 4
-            enabled: !hasLoginShown
+            //enabled: !hasLoginShown
 
-            onClicked: select_or_login()
+            onClicked: { (hasLoginShown ? back_to_selection() : select_or_login()) } 
 
         }
 
         MouseArea
         {
             id: botMidItemMouseArea
+            onEntered: { botMidItem.hover = true }
+            onExited: { botMidItem.hover = false }
             y: middleItemMouseArea.y + middleItemMouseArea.height
             hoverEnabled: true
             width: parent.width
             height: pageRoot.height / 5
-            enabled: !hasLoginShown
+            //enabled: !hasLoginShown
 
-            onClicked: scroll_up()
+            onClicked: { if (!hasLoginShown) { scroll_up(); } }
 
         }
 
         MouseArea
         {
             id: botFarItemMouseArea
+            onEntered: { botFarItem.hover = true }
+            onExited: { botFarItem.hover = false }
             y: botMidItemMouseArea.y + botMidItemMouseArea.height
             hoverEnabled: true
             width: parent.width
             height: pageRoot.height / 6
-            enabled: !hasLoginShown
+            //enabled: !hasLoginShown
 
-            onClicked: { scrollRepeat = 1; scroll_up(); }
+            onClicked: { if (!hasLoginShown) { scrollRepeat = 1; scroll_up(); } }
 
         }
 
@@ -220,9 +231,9 @@ Item
             width: parent.width - 20
             height: 25
             opacity: hasLoginShown ? 1 : 0
-            color: config.color_input_text
+            color: colors.inputText
-            selectionColor: config.color_selection_bg
+            selectionColor: colors.inputSelectionBg
-            selectedTextColor: config.color_selection_text
+            selectedTextColor: colors.inputSelectionText
 
             echoMode: TextInput.Password
             clip: true
@@ -248,7 +259,7 @@ Item
             opacity: hasLoginShown ? 1 : 0
             visible: passwordField.text.length <= 0
 
-            color: config.color_placeholder_text
+            color: colors.inputPlaceholderText
 
             font
             {
@@ -265,8 +276,8 @@ Item
             y: hasLoginShown ? pageRoot.height / 2.3 + 30 : pageRoot.height / 2.3 + 55
             width: parent.width
             height: 40
-            color: config.color_input_bg
             opacity: hasLoginShown ? 1 : 0
+            color: colors.inputBg
         }
 
         Rectangle
@@ -276,7 +287,7 @@ Item
             width: parent.width
             height: 2
             opacity: hasLoginShown ? 1 : 0
-            color: config.color_progress_bar
+            color: colors.progressBar
         }
 
         Rectangle
@@ -286,7 +297,7 @@ Item
             width: parent.width
             height: 2
             opacity: 0
-            color: config.color_progress_bar_bg
+            color: colors.progressBarBg
         }
 
         Rectangle
@@ -297,7 +308,7 @@ Item
             width: parent.width / 5
             height: 2
             opacity: 0
-            color: config.color_progress_bar_slider
+            color: colors.progressBarSlider
         }
 
         Rectangle
@@ -308,7 +319,7 @@ Item
             width: 0
             height: 2
             opacity: 0
-            color: config.color_progress_bar_slider
+            color: colors.progressBarSlider
         }
 
         SlicedButton
@@ -317,7 +328,7 @@ Item
             x: userListContainer.width - widthFull
             y: hasLoginShown ? pageRoot.height / 2.3 + 74 : pageRoot.height / 2.3 + 109
             paddingTop: 2
-            selected: true
+            highlighted: true
             opacity: hasLoginShown ? 1 : 0
 
             text: localeText.login
@@ -346,7 +357,7 @@ Item
             y: pageRoot.height / 4.7
             opacity: 0
 
-            color: config.color_error_text
+            color: colors.errorText
 
             font
             {
@@ -366,7 +377,7 @@ Item
             y: errorMessage.y - 5
             width: errorMessage.width + 20
             height: errorMessage.height + 10
-            color: config.color_error_bg
+            color: colors.errorBg
             opacity: 0
 
             Behavior on opacity { NumberAnimation { duration: userListContainer.scrollDuration } }
@@ -624,6 +635,7 @@ Item
     {
         if (hasLoginShown)
         {
+            middleItem.hoverEnabled = false
             errorMessage.opacity = 0
             errorMessageBg.opacity = 0
             pageRoot.lockNav()
@@ -634,6 +646,11 @@ Item
         }
         else
         {
+            topFarItem.hoverEnabled = false
+            topMidItem.hoverEnabled = false
+            middleItem.hoverEnabled = true
+            botMidItem.hoverEnabled = false
+            botFarItem.hoverEnabled = false
             userListHideOther.start()
         }
     }
@@ -642,6 +659,11 @@ Item
     {
         if (hasLoginShown)
         {
+            topFarItem.hoverEnabled = true
+            topMidItem.hoverEnabled = true
+            middleItem.hoverEnabled = true
+            botMidItem.hoverEnabled = true
+            botFarItem.hoverEnabled = true
             userListShowOther.start()
             errorMessage.opacity = 0
             errorMessageBg.opacity = 0

slice/SlicedButton.qml

@@ -11,7 +11,7 @@ Item
     property bool hasLeftSlice: true
     property bool hasRightSlice: true
 
-    property bool selected: false
+    property bool highlighted: false
     readonly property int skew: 15
 
     readonly property int paddingLeft: hasLeftSlice ? skew : 5
@@ -21,6 +21,19 @@ Item
     readonly property int widthFull: buttonText.width + paddingLeft + paddingRight
     readonly property int widthPartial: buttonText.width + paddingLeft
 
+    property color bgIdle: colors.buttonBg
+    property color bgHover: colors.buttonBgHover
+
+    property color bgIdleHighlighted: colors.buttonBgHighlighted
+    property color bgHoverHighlighted: colors.buttonBgHoverHighlighted
+
+    property color textIdle: colors.buttonText
+    property color textHover: colors.buttonTextHover
+
+    property color textIdleHighlighted: colors.buttonTextHighlighted
+    property color textHoverHighlighted: colors.buttonTextHoverHighlighted
+
+
     signal clicked()
 
     Behavior on x
@@ -28,7 +41,7 @@ Item
         PropertyAnimation { duration: 100 }
     }
 
-    onSelectedChanged:
+    onHighlightedChanged:
     {
         buttonBgSliceLeft.requestPaint()
         buttonBgSliceRight.requestPaint()
@@ -48,19 +61,25 @@ Item
             PropertyChanges
             {
                 target: buttonBgSliceLeft;
-                bgColor: selected ? config.color_button_bg_selected : config.color_button_bg_idle
+                bgColor: highlighted ? bgIdleHighlighted : bgIdle
             }
 
             PropertyChanges
             {
                 target: buttonBgCenter;
-                color: selected ? config.color_button_bg_selected : config.color_button_bg_idle
+                color: highlighted ? bgIdleHighlighted : bgIdle
             }
 
             PropertyChanges
             {
                 target: buttonBgSliceRight;
-                bgColor: selected ? config.color_button_bg_selected : config.color_button_bg_idle
+                bgColor: highlighted ? bgIdleHighlighted : bgIdle
+            }
+
+            PropertyChanges
+            {
+                target: buttonText;
+                color: highlighted ? textIdleHighlighted : textIdle
             }
         },
         State
@@ -69,19 +88,25 @@ Item
             PropertyChanges
             {
                 target: buttonBgSliceLeft;
-                bgColor: selected ? config.color_button_bg_selected_hover : config.color_button_bg_hover
+                bgColor: highlighted ? bgHoverHighlighted : bgHover
             }
 
             PropertyChanges
             {
                 target: buttonBgCenter;
-                color: selected ? config.color_button_bg_selected_hover : config.color_button_bg_hover
+                color: highlighted ? bgHoverHighlighted : bgHover
             }
 
             PropertyChanges
             {
                 target: buttonBgSliceRight;
-                bgColor: selected ? config.color_button_bg_selected_hover : config.color_button_bg_hover
+                bgColor: highlighted ? bgHoverHighlighted : bgHover
+            }
+
+            PropertyChanges
+            {
+                target: buttonText;
+                color: highlighted ? textHoverHighlighted : textHover
             }
         }
     ]
@@ -92,7 +117,7 @@ Item
 
         width: paddingLeft
         height: parent.height
-        property string bgColor: config.color_button_bg_idle
+        property string bgColor: colors.buttonBg
 
         onPaint:
         {
@@ -128,7 +153,7 @@ Item
     Rectangle
     {
         id: buttonBgCenter
-        color: config.color_button_bg_idle
+        color: colors.buttonBg
         x: paddingLeft
         width: buttonText.width
         height: parent.height
@@ -160,7 +185,7 @@ Item
 
         width: paddingRight
         height: parent.height
-        property string bgColor: config.color_button_bg_idle
+        property string bgColor: colors.buttonBg
 
         onPaint:
         {
@@ -194,7 +219,7 @@ Item
         id: buttonText
         x: paddingLeft
         y: paddingTop
-        color: config.color_button_text
+        color: colors.buttonText
 
         font
         {

slice/theme.conf

@@ -4,21 +4,6 @@ background=
 bg_mode=aspect
 parallax_bg_shift=20
 color_bg=#222222
-color_button_bg_idle=#888888
+color_main=#dddddd
-color_button_bg_hover=#aaaaaa
+color_dimmed=#888888
-color_button_bg_selected=#dddddd
+color_contrast=#1f1f1f
-color_button_bg_selected_hover=#cccccc
-color_button_text=#1f1f1f
-color_text=#dddddd
-color_placeholder_text=#888888
-color_input_bg=#22ffffff
-color_input_text=#dddddd
-color_selection_bg=#555555
-color_selection_text=#dddddd
-color_text_bg=#22ffffff
-color_icon_bg=#11ffffff
-color_error_bg=#11ffffff
-color_error_text=#dddddd
-color_progress_bar=#dddddd
-color_progress_bar_slider=#dddddd
-color_progress_bar_bg=#888888