From a26b54f6e2b24e643175f709c8ffd2e641d27f45 Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Fri, 4 Mar 2022 11:28:11 +0100 Subject: [PATCH 1/9] Fix checkboxes not showing check marks when disabled. Update checkboxes to align with new designs. Update SettingCheckBox to match checkbox styling. Remove duplicated styling inside cura-dark/theme.json CURA-8991 --- resources/qml/Settings/SettingCheckBox.qml | 10 +++++----- resources/themes/cura-dark/theme.json | 9 --------- resources/themes/cura-light/theme.json | 15 +++++++++------ 3 files changed, 14 insertions(+), 20 deletions(-) diff --git a/resources/qml/Settings/SettingCheckBox.qml b/resources/qml/Settings/SettingCheckBox.qml index 1b4e4ac143..3f8f1de89d 100644 --- a/resources/qml/Settings/SettingCheckBox.qml +++ b/resources/qml/Settings/SettingCheckBox.qml @@ -11,7 +11,7 @@ SettingItem { id: base property var focusItem: control - + enabled: false contents: MouseArea { id: control @@ -98,7 +98,7 @@ SettingItem { if(!enabled) { - return UM.Theme.getColor("checkbox_border") + return UM.Theme.getColor("checkbox_border_disabled") } switch (propertyProvider.properties.validationState) { @@ -116,7 +116,7 @@ SettingItem { return UM.Theme.getColor("checkbox_border_hover") } - return UM.Theme.getColor("setting_control_border") + return UM.Theme.getColor("checkbox_border") } color: { @@ -138,7 +138,7 @@ SettingItem // Validation is OK. if (control.containsMouse || control.activeFocus) { - return UM.Theme.getColor("setting_control_highlight") + return UM.Theme.getColor("checkbox_hover") } return UM.Theme.getColor("checkbox") } @@ -150,7 +150,7 @@ SettingItem height: UM.Theme.getSize("checkbox_mark").height width: UM.Theme.getSize("checkbox_mark").width sourceSize.height: width - color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text"); + color: !enabled ? UM.Theme.getColor("checkbox_mark_disabled") : UM.Theme.getColor("checkbox_mark"); source: UM.Theme.getIcon("Check", "low") opacity: control.checked ? 1 : 0 Behavior on opacity { NumberAnimation { duration: 100; } } diff --git a/resources/themes/cura-dark/theme.json b/resources/themes/cura-dark/theme.json index 7b2c19ff01..bc1f6e3b9f 100644 --- a/resources/themes/cura-dark/theme.json +++ b/resources/themes/cura-dark/theme.json @@ -155,15 +155,6 @@ "slider_handle": [255, 255, 255, 255], "slider_handle_active": [68, 192, 255, 255], - "checkbox": "background_1", - "checkbox_hover": [43, 48, 52, 255], - "checkbox_border": "text_disabled", - "checkbox_border_hover": "border_main", - "checkbox_mark": "text_default", - "checkbox_square": "text_disabled", - "checkbox_text": "text_default", - "checkbox_disabled": "background_2", - "category_background": "background_3", "tooltip": "background_2", diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index ba18e5d0d2..b71d6c0167 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -324,13 +324,16 @@ "quality_slider_unavailable": [179, 179, 179, 255], "quality_slider_available": [0, 0, 0, 255], - "checkbox": [255, 255, 255, 255], - "checkbox_hover": "border_main", - "checkbox_border": [180, 180, 180, 255], - "checkbox_border_hover": [25, 110, 240, 255], - "checkbox_mark": [35, 35, 35, 255], + "checkbox": "background_1", + "checkbox_hover": "background_1", "checkbox_disabled": "background_2", - "checkbox_text": [0, 12, 26, 255], + "checkbox_border": [180, 180, 180, 255], + "checkbox_border_hover": "border_main", + "checkbox_border_disabled": "text_disabled", + "checkbox_mark": "text_default", + "checkbox_mark_disabled": "text_disabled", + "checkbox_text": "text_default", + "checkbox_text_disabled": "text_disabled", "category_background": "background_2", From b86b1133df928c0d65da888001b8965106268c66 Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Fri, 4 Mar 2022 13:02:21 +0100 Subject: [PATCH 2/9] Remove enable:false assignment that was used for testing CURA-8991 --- resources/qml/Settings/SettingCheckBox.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/qml/Settings/SettingCheckBox.qml b/resources/qml/Settings/SettingCheckBox.qml index 3f8f1de89d..4987eedb83 100644 --- a/resources/qml/Settings/SettingCheckBox.qml +++ b/resources/qml/Settings/SettingCheckBox.qml @@ -11,7 +11,7 @@ SettingItem { id: base property var focusItem: control - enabled: false + contents: MouseArea { id: control From b3e8c7190e04d028c9828e2e43bce90af2c829dd Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Fri, 4 Mar 2022 13:18:00 +0100 Subject: [PATCH 3/9] Align radio buttons with new designs. Fix radiobutton looking the same checked and unchecked when disabled CURA-8991 --- resources/qml/Widgets/RadioButton.qml | 79 ++++++++++++++++++-------- resources/themes/cura-light/theme.json | 13 +++++ 2 files changed, 68 insertions(+), 24 deletions(-) diff --git a/resources/qml/Widgets/RadioButton.qml b/resources/qml/Widgets/RadioButton.qml index 428eb8a4e5..add708507c 100644 --- a/resources/qml/Widgets/RadioButton.qml +++ b/resources/qml/Widgets/RadioButton.qml @@ -1,4 +1,4 @@ -// Copyright (c) 2019 Ultimaker B.V. +// Copyright (c) 2022 Ultimaker B.V. // Cura is released under the terms of the LGPLv3 or higher. import QtQuick 2.10 @@ -13,32 +13,58 @@ import Cura 1.0 as Cura // RadioButton { - id: radioButton + id: control font: UM.Theme.getFont("default") states: [ State { - name: "checked" - when: radioButton.checked + name: "selected-hover" + when: control.enabled && control.checked && control.hovered PropertyChanges { - target: indicator - color: UM.Theme.getColor("accent_1") - border.width: 0 + target: indicator_background + color: UM.Theme.getColor("radio_selected") + border.color: UM.Theme.getColor("radio_border_hover") } }, - State - { - name: "disabled" - when: !radioButton.enabled - PropertyChanges { target: indicator; color: UM.Theme.getColor("background_1")} + State { + name: "selected" + when: control.enabled && control.checked + PropertyChanges + { + target: indicator_background + color: UM.Theme.getColor("radio_selected") + } }, - State - { - name: "highlighted" - when: radioButton.hovered || radioButton.activeFocus - PropertyChanges { target: indicator; border.color: UM.Theme.getColor("border_main_light")} + State { + name: "hovered" + when: control.enabled && control.hovered + PropertyChanges + { + target: indicator_background + border.color: UM.Theme.getColor("radio_border_hover") + } + }, + State { + name: "selected_disabled" + when: !control.enabled && control.checked + PropertyChanges + { + target: indicator_background + color: UM.Theme.getColor("radio_selected_disabled") + border.color: UM.Theme.getColor("radio_border_disabled") + } + }, + State { + name: "disabled" + when: !control.enabled + PropertyChanges + { + target: indicator_background + color: UM.Theme.getColor("radio_disabled") + border.color: UM.Theme.getColor("radio_border_disabled") + } } ] @@ -49,30 +75,35 @@ RadioButton indicator: Rectangle { + id: indicator_background implicitWidth: UM.Theme.getSize("radio_button").width implicitHeight: UM.Theme.getSize("radio_button").height anchors.verticalCenter: parent.verticalCenter anchors.alignWhenCentered: false radius: width / 2 - color: UM.Theme.getColor("background_2") + color: UM.Theme.getColor("radio") border.width: UM.Theme.getSize("default_lining").width - border.color: UM.Theme.getColor("text_disabled") + border.color: UM.Theme.getColor("radio_border") Rectangle { + id: indicator_dot width: (parent.width / 2) | 0 height: width anchors.centerIn: parent radius: width / 2 - color: radioButton.enabled ? UM.Theme.getColor("background_2") : UM.Theme.getColor("background_1") - visible: radioButton.checked + color: control.enabled ? UM.Theme.getColor("radio_dot") : UM.Theme.getColor("radio_dot_disabled") + visible: control.checked + + } } contentItem: UM.Label { - leftPadding: radioButton.indicator.width + radioButton.spacing - text: radioButton.text - font: radioButton.font + leftPadding: control.indicator.width + control.spacing + text: control.text + font: control.font + color: control.enabled ? UM.Theme.getColor("radio_text"): UM.Theme.getColor("radio_text_disabled") } } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index b71d6c0167..f96a45e32f 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -335,6 +335,19 @@ "checkbox_text": "text_default", "checkbox_text_disabled": "text_disabled", + "radio": "background_1", + "radio_disabled": "background_2", + "radio_selected": "accent_1", + "radio_selected_disabled": "text_disabled", + "radio_border": [180, 180, 180, 255], + "radio_border_hover": "border_main", + "radio_border_disabled": "text_disabled", + "radio_dot": "background_1", + "radio_dot_disabled": "background_2", + "radio_text": "text_default", + "radio_text_disabled": "text_disabled", + + "category_background": "background_2", "tooltip": [25, 25, 25, 255], From 1fc6b8ced62cdc41bbec5b0ecfc1c46eb2a04b46 Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Fri, 4 Mar 2022 13:22:55 +0100 Subject: [PATCH 4/9] New designs use dark mode border_main for dark theme. Remove uses of border_main_light. The only puprose of this color was to give dark mode access to the border_main of the light theme. CURA-8991 --- resources/qml/MachineSettings/GcodeTextArea.qml | 2 +- resources/qml/MachineSettings/NumericTextFieldWithUnit.qml | 2 +- resources/qml/PrintSetupHeaderButton.qml | 2 +- resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml | 2 +- resources/qml/Settings/SettingExtruder.qml | 2 +- resources/qml/Settings/SettingOptionalExtruder.qml | 2 +- resources/qml/Settings/SettingTextField.qml | 2 +- resources/qml/Widgets/ComboBox.qml | 2 +- resources/qml/Widgets/TextField.qml | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/resources/qml/MachineSettings/GcodeTextArea.qml b/resources/qml/MachineSettings/GcodeTextArea.qml index bb14dafcc6..7791e169c2 100644 --- a/resources/qml/MachineSettings/GcodeTextArea.qml +++ b/resources/qml/MachineSettings/GcodeTextArea.qml @@ -91,7 +91,7 @@ UM.TooltipArea } if (gcodeTextArea.hovered || gcodeTextArea.activeFocus) { - return UM.Theme.getColor("border_main_light") + return UM.Theme.getColor("border_main") } return UM.Theme.getColor("border_field_light") } diff --git a/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml b/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml index 0e1f296cfa..18c3f8bbe5 100644 --- a/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml +++ b/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml @@ -107,7 +107,7 @@ UM.TooltipArea // Validation is OK. if (textFieldWithUnit.hovered || textFieldWithUnit.activeFocus) { - return UM.Theme.getColor("border_main_light") + return UM.Theme.getColor("border_main") } return UM.Theme.getColor("border_field_light") } diff --git a/resources/qml/PrintSetupHeaderButton.qml b/resources/qml/PrintSetupHeaderButton.qml index e41f95f778..f552b9fc37 100644 --- a/resources/qml/PrintSetupHeaderButton.qml +++ b/resources/qml/PrintSetupHeaderButton.qml @@ -69,7 +69,7 @@ ToolButton { target: background color: UM.Theme.getColor("setting_control") - liningColor: UM.Theme.getColor("border_main_light") + liningColor: UM.Theme.getColor("border_main") } }, State diff --git a/resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml b/resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml index 440c9e4e78..6d3682d9ff 100644 --- a/resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml +++ b/resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml @@ -129,7 +129,7 @@ Item background: UM.UnderlineBackground { id: backgroundItem - liningColor: intentSelection.hovered ? UM.Theme.getColor("border_main_light") : UM.Theme.getColor("border_field_light") + liningColor: intentSelection.hovered ? UM.Theme.getColor("border_main") : UM.Theme.getColor("border_field_light") } UM.SimpleButton diff --git a/resources/qml/Settings/SettingExtruder.qml b/resources/qml/Settings/SettingExtruder.qml index 6b2ac55066..c3bc472fbe 100644 --- a/resources/qml/Settings/SettingExtruder.qml +++ b/resources/qml/Settings/SettingExtruder.qml @@ -135,7 +135,7 @@ SettingItem } if (control.hovered || control.activeFocus) { - return UM.Theme.getColor("border_main_light") + return UM.Theme.getColor("border_main") } return UM.Theme.getColor("border_field_light") } diff --git a/resources/qml/Settings/SettingOptionalExtruder.qml b/resources/qml/Settings/SettingOptionalExtruder.qml index 1ac7afe967..2a4db2ab31 100644 --- a/resources/qml/Settings/SettingOptionalExtruder.qml +++ b/resources/qml/Settings/SettingOptionalExtruder.qml @@ -136,7 +136,7 @@ SettingItem } if (control.hovered || control.activeFocus) { - return UM.Theme.getColor("border_main_light") + return UM.Theme.getColor("border_main") } return UM.Theme.getColor("border_field_light") } diff --git a/resources/qml/Settings/SettingTextField.qml b/resources/qml/Settings/SettingTextField.qml index 83b5d2a987..7aacad21da 100644 --- a/resources/qml/Settings/SettingTextField.qml +++ b/resources/qml/Settings/SettingTextField.qml @@ -52,7 +52,7 @@ SettingItem //Validation is OK. if(hovered || input.activeFocus) { - return UM.Theme.getColor("border_main_light") + return UM.Theme.getColor("border_main") } return UM.Theme.getColor("border_field_light") } diff --git a/resources/qml/Widgets/ComboBox.qml b/resources/qml/Widgets/ComboBox.qml index f84772e609..5d31348597 100644 --- a/resources/qml/Widgets/ComboBox.qml +++ b/resources/qml/Widgets/ComboBox.qml @@ -33,7 +33,7 @@ ComboBox { name: "highlighted" when: control.hovered || control.activeFocus - PropertyChanges { target: background; liningColor: UM.Theme.getColor("border_main_light")} + PropertyChanges { target: background; liningColor: UM.Theme.getColor("border_main")} } ] diff --git a/resources/qml/Widgets/TextField.qml b/resources/qml/Widgets/TextField.qml index 7803c17396..2dc0882b4b 100644 --- a/resources/qml/Widgets/TextField.qml +++ b/resources/qml/Widgets/TextField.qml @@ -44,7 +44,7 @@ TextField { name: "hovered" when: textField.hovered || textField.activeFocus - PropertyChanges { target: backgroundRectangle; liningColor: UM.Theme.getColor("border_main_light")} + PropertyChanges { target: backgroundRectangle; liningColor: UM.Theme.getColor("border_main")} } ] From fb42679d0800907c749f1ac36b37d0a128644509 Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Fri, 4 Mar 2022 13:39:50 +0100 Subject: [PATCH 5/9] Update TextField to match designs when disabled. CURA-8991 --- resources/qml/Widgets/TextField.qml | 19 ++++++++++--------- resources/themes/cura-light/theme.json | 8 ++++++++ 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/resources/qml/Widgets/TextField.qml b/resources/qml/Widgets/TextField.qml index 2dc0882b4b..b708446d65 100644 --- a/resources/qml/Widgets/TextField.qml +++ b/resources/qml/Widgets/TextField.qml @@ -1,4 +1,4 @@ -// Copyright (c) 2021 Ultimaker B.V. +// Copyright (c) 2022 Ultimaker B.V. // Cura is released under the terms of the LGPLv3 or higher. import QtQuick 2.10 @@ -13,7 +13,7 @@ import Cura 1.1 as Cura // TextField { - id: textField + id: control property alias leftIcon: iconLeft.source @@ -22,7 +22,7 @@ TextField hoverEnabled: true selectByMouse: true font: UM.Theme.getFont("default") - color: UM.Theme.getColor("text") + color: UM.Theme.getColor("text_field_text") renderType: Text.NativeRendering selectionColor: UM.Theme.getColor("text_selection") leftPadding: iconLeft.visible ? iconLeft.width + UM.Theme.getSize("default_margin").width * 2 : UM.Theme.getSize("thin_margin").width @@ -31,20 +31,21 @@ TextField State { name: "disabled" - when: !textField.enabled - PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_control_disabled")} + when: !control.enabled + PropertyChanges { target: control; color: UM.Theme.getColor("text_field_text_disabled")} + PropertyChanges { target: backgroundRectangle; liningColor: UM.Theme.getColor("text_field_border_disabled")} }, State { name: "invalid" - when: !textField.acceptableInput + when: !control.acceptableInput PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_validation_error_background")} }, State { name: "hovered" - when: textField.hovered || textField.activeFocus - PropertyChanges { target: backgroundRectangle; liningColor: UM.Theme.getColor("border_main")} + when: control.hovered || control.activeFocus + PropertyChanges { target: backgroundRectangle; liningColor: UM.Theme.getColor("text_field_border_hovered")} } ] @@ -66,7 +67,7 @@ TextField visible: source != "" height: UM.Theme.getSize("small_button_icon").height width: visible ? height : 0 - color: textField.color + color: control.color } } } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index f96a45e32f..9ef04873c1 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -347,6 +347,14 @@ "radio_text": "text_default", "radio_text_disabled": "text_disabled", + "text_field": "background_1", + "text_field_border": [180, 180, 180, 255], + "text_field_border_hovered": "border_main", + "text_field_border_disabled": "border_main", + "text_field_text": "text_default", + "text_field_text_disabled": "text_disabled", + + "category_background": "background_2", From 7dabcfafb0d640bb0d2c6cd2d226e842304f496d Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Fri, 4 Mar 2022 13:48:01 +0100 Subject: [PATCH 6/9] Add checkbox square coloring back. CURA-8991 --- resources/themes/cura-light/theme.json | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 9ef04873c1..9569ccfc53 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -332,6 +332,7 @@ "checkbox_border_disabled": "text_disabled", "checkbox_mark": "text_default", "checkbox_mark_disabled": "text_disabled", + "checkbox_square": [180, 180, 180, 255], "checkbox_text": "text_default", "checkbox_text_disabled": "text_disabled", From 1eb16c0ec558ed012c7db1a98cdaf78e7abecbeb Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Fri, 4 Mar 2022 13:53:59 +0100 Subject: [PATCH 7/9] Update SettingTextField to match TextField CURA-8991 --- resources/qml/Settings/SettingTextField.qml | 10 +++++----- resources/themes/cura-light/theme.json | 2 -- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/resources/qml/Settings/SettingTextField.qml b/resources/qml/Settings/SettingTextField.qml index 7aacad21da..68d206b96c 100644 --- a/resources/qml/Settings/SettingTextField.qml +++ b/resources/qml/Settings/SettingTextField.qml @@ -36,7 +36,7 @@ SettingItem { if(!enabled) { - return UM.Theme.getColor("setting_control_disabled_border") + return UM.Theme.getColor("text_field_border_disabled") } switch(propertyProvider.properties.validationState) { @@ -52,15 +52,15 @@ SettingItem //Validation is OK. if(hovered || input.activeFocus) { - return UM.Theme.getColor("border_main") + return UM.Theme.getColor("text_field_border_hovered") } - return UM.Theme.getColor("border_field_light") + return UM.Theme.getColor("text_field_border") } color: { if(!enabled) { - return UM.Theme.getColor("setting_control_disabled") + return UM.Theme.getColor("text_field") } switch(propertyProvider.properties.validationState) { @@ -76,7 +76,7 @@ SettingItem return UM.Theme.getColor("setting_validation_ok") default: - return UM.Theme.getColor("setting_control") + return UM.Theme.getColor("text_field") } } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 9569ccfc53..5adb140802 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -355,8 +355,6 @@ "text_field_text": "text_default", "text_field_text_disabled": "text_disabled", - - "category_background": "background_2", "tooltip": [25, 25, 25, 255], From 719257bb63b1dafcaa69bbd3158584cc313d3e74 Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Fri, 4 Mar 2022 15:05:30 +0100 Subject: [PATCH 8/9] Update validation colors to match new designs CURA-8991 --- resources/qml/Settings/SettingTextField.qml | 8 ------- resources/themes/cura-dark/theme.json | 21 ++++++++++++++----- resources/themes/cura-light/theme.json | 23 ++++++++++++++++----- 3 files changed, 34 insertions(+), 18 deletions(-) diff --git a/resources/qml/Settings/SettingTextField.qml b/resources/qml/Settings/SettingTextField.qml index 68d206b96c..95976ad58e 100644 --- a/resources/qml/Settings/SettingTextField.qml +++ b/resources/qml/Settings/SettingTextField.qml @@ -80,14 +80,6 @@ SettingItem } } - Rectangle - { - anchors.fill: parent - anchors.margins: Math.round(UM.Theme.getSize("default_lining").width) - color: UM.Theme.getColor("setting_control_highlight") - opacity: !control.hovered ? 0 : propertyProvider.properties.validationState == "ValidatorState.Valid" ? 1.0 : 0.35 - } - UM.Label { anchors diff --git a/resources/themes/cura-dark/theme.json b/resources/themes/cura-dark/theme.json index bc1f6e3b9f..afd36e8741 100644 --- a/resources/themes/cura-dark/theme.json +++ b/resources/themes/cura-dark/theme.json @@ -23,7 +23,20 @@ "text_primary_button": [255, 255, 255, 255], "text_secondary_button": [255, 255, 255, 255], "text_link_hover": [156, 195, 255, 255], - "text_lighter": [243, 243, 243, 255] + "text_lighter": [243, 243, 243, 255], + + "um_green_1": [233, 245, 237, 255], + "um_green_5": [36, 162, 73, 255], + "um_green_9": [31, 44, 36, 255], + "um_red_1": [251, 232, 233, 255], + "um_red_5": [218, 30, 40, 255], + "um_red_9": [59, 31, 33, 255], + "um_orange_1": [255, 235, 221, 255], + "um_orange_5": [252, 123, 30, 255], + "um_orange_9": [64, 45, 32, 255], + "um_yellow_1": [255, 248, 225, 255], + "um_yellow_5": [253, 209, 58, 255], + "um_yellow_9": [64, 58, 36, 255] }, "colors": { @@ -140,10 +153,8 @@ "setting_control_disabled_text": [255, 255, 255, 101], "setting_control_disabled_border": [255, 255, 255, 101], "setting_unit": [255, 255, 255, 127], - "setting_validation_error_background": [59, 31, 53, 255], - "setting_validation_error": [212, 31, 53, 255], - "setting_validation_warning_background": [62, 54, 46, 255], - "setting_validation_warning": [245, 166, 35, 255], + "setting_validation_error_background": "um_red_9", + "setting_validation_warning_background": "um_yellow_9", "setting_validation_ok": "background_2", "progressbar_background": [255, 255, 255, 48], diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 5adb140802..4d89c37609 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -188,7 +188,20 @@ "text_primary_button": [255, 255, 255, 255], "text_secondary_button": [25, 110, 240, 255], "text_link_hover": [16, 70, 156, 255], - "text_lighter": [108, 108, 108, 255] + "text_lighter": [108, 108, 108, 255], + + "um_green_1": [233, 245, 237, 255], + "um_green_5": [36, 162, 73, 255], + "um_green_9": [31, 44, 36, 255], + "um_red_1": [251, 232, 233, 255], + "um_red_5": [218, 30, 40, 255], + "um_red_9": [59, 31, 33, 255], + "um_orange_1": [255, 235, 221, 255], + "um_orange_5": [252, 123, 30, 255], + "um_orange_9": [64, 45, 32, 255], + "um_yellow_1": [255, 248, 225, 255], + "um_yellow_5": [253, 209, 58, 255], + "um_yellow_9": [64, 58, 36, 255] }, "colors": { @@ -304,10 +317,10 @@ "setting_control_disabled_text": [127, 127, 127, 255], "setting_control_disabled_border": [127, 127, 127, 255], "setting_unit": [127, 127, 127, 255], - "setting_validation_error_background": [255, 66, 60, 255], - "setting_validation_error": [127, 127, 127, 255], - "setting_validation_warning_background": [255, 145, 62, 255], - "setting_validation_warning": [127, 127, 127, 255], + "setting_validation_error_background": "um_red_1", + "setting_validation_error": "um_red_5", + "setting_validation_warning_background": "um_yellow_1", + "setting_validation_warning": "um_yellow_5", "setting_validation_ok": "background_2", "material_compatibility_warning": [243, 166, 59, 255], From 7b0e954f121f9278dd78957344db9fc668cb6701 Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Fri, 4 Mar 2022 15:20:46 +0100 Subject: [PATCH 9/9] Change machine setting page text box text highlight color to match designs. CURA-8991 --- resources/qml/MachineSettings/NumericTextFieldWithUnit.qml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml b/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml index 18c3f8bbe5..67840d4f26 100644 --- a/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml +++ b/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml @@ -77,6 +77,8 @@ UM.TooltipArea anchors.left: fieldLabel.right anchors.leftMargin: UM.Theme.getSize("default_margin").width verticalAlignment: Text.AlignVCenter + selectionColor: UM.Theme.getColor("text_selection") + selectedTextColor: UM.Theme.getColor("setting_control_text") padding: 0 leftPadding: UM.Theme.getSize("narrow_margin").width width: numericTextFieldWithUnit.controlWidth