diff --git a/internal/frontend/qml/AccountDelegate.qml b/internal/frontend/qml/AccountDelegate.qml index b150da7..3ba931c 100644 --- a/internal/frontend/qml/AccountDelegate.qml +++ b/internal/frontend/qml/AccountDelegate.qml @@ -27,7 +27,7 @@ Item { property ColorScheme colorScheme property var user - property var _spacing: 12 + property var _spacing: 12 * ProtonStyle.px property color usedSpaceColor : { if (!root.enabled) return root.colorScheme.text_weak @@ -86,7 +86,7 @@ Item { Layout.fillHeight: true Layout.preferredWidth: height - radius: 4 + radius: ProtonStyle.avatar_radius color: root.colorScheme.background_avatar @@ -130,7 +130,7 @@ Item { elide: Text.ElideMiddle } - Item { implicitHeight: root.type == AccountDelegate.LargeView ? 6 : 0 } + Item { implicitHeight: root.type == AccountDelegate.LargeView ? 6 * ProtonStyle.px : 0 } RowLayout { spacing: 0 @@ -161,14 +161,16 @@ Item { Rectangle { + id: storage_bar visible: root.user ? root.type == AccountDelegate.LargeView : false - width: 140 - height: 4 - radius: 3 + width: 140 * ProtonStyle.px + height: 4 * ProtonStyle.px + radius: ProtonStyle.storage_bar_radius color: root.colorScheme.border_weak Rectangle { - radius: 3 + id: storage_bar_filled + radius: ProtonStyle.storage_bar_radius color: root.usedSpaceColor visible: root.user ? parent.visible && root.user.loggedIn : false anchors { diff --git a/internal/frontend/qml/Banner.qml b/internal/frontend/qml/Banner.qml index f5e41c8..f024057 100644 --- a/internal/frontend/qml/Banner.qml +++ b/internal/frontend/qml/Banner.qml @@ -73,7 +73,7 @@ Popup { anchors.bottom: parent.bottom anchors.left: parent.left width: parent.width + 10 - radius: 10 + radius: ProtonStyle.banner_radius color: { if (!root.notification) { return "transparent" @@ -180,7 +180,7 @@ Popup { anchors.bottom: parent.bottom anchors.right: parent.right width: parent.width + 10 - radius: 10 + radius: ProtonStyle.banner_radius color: { if (!root.notification) { return "transparent" diff --git a/internal/frontend/qml/Configuration.qml b/internal/frontend/qml/Configuration.qml index e6c0917..f6a843c 100644 --- a/internal/frontend/qml/Configuration.qml +++ b/internal/frontend/qml/Configuration.qml @@ -37,7 +37,7 @@ Rectangle { implicitHeight: content.height + 2*root._margin color: root.colorScheme.background_norm - radius: 9 + radius: ProtonStyle.card_radius property int _margin: 24 diff --git a/internal/frontend/qml/ContentWrapper.qml b/internal/frontend/qml/ContentWrapper.qml index 66bf2e8..ef63a63 100644 --- a/internal/frontend/qml/ContentWrapper.qml +++ b/internal/frontend/qml/ContentWrapper.qml @@ -159,7 +159,7 @@ Item { highlight: Rectangle { color: leftBar.colorScheme.interaction_default_active - radius: 4 + radius: ProtonStyle.account_row_radius } model: root.backend.users diff --git a/internal/frontend/qml/Proton/Button.qml b/internal/frontend/qml/Proton/Button.qml index cbc8e67..9049f23 100644 --- a/internal/frontend/qml/Proton/Button.qml +++ b/internal/frontend/qml/Proton/Button.qml @@ -147,7 +147,7 @@ T.Button { background: Rectangle { implicitWidth: 36 implicitHeight: 36 - radius: 4 + radius: Style.button_radius visible: true color: { if (!isIcon) { diff --git a/internal/frontend/qml/Proton/CheckBox.qml b/internal/frontend/qml/Proton/CheckBox.qml index 66563bc..ffb0050 100644 --- a/internal/frontend/qml/Proton/CheckBox.qml +++ b/internal/frontend/qml/Proton/CheckBox.qml @@ -28,10 +28,10 @@ T.CheckBox { id: control implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, - implicitContentWidth + leftPadding + rightPadding) + implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, - implicitContentHeight + topPadding + bottomPadding, - implicitIndicatorHeight + topPadding + bottomPadding) + implicitContentHeight + topPadding + bottomPadding, + implicitIndicatorHeight + topPadding + bottomPadding) padding: 0 spacing: 8 @@ -39,7 +39,7 @@ T.CheckBox { indicator: Rectangle { implicitWidth: 20 implicitHeight: 20 - radius: 4 + radius: Style.checkbox_radius x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2 y: control.topPadding + (control.availableHeight - height) / 2 @@ -96,7 +96,7 @@ T.CheckBox { // TODO: do we need PartiallyChecked state? - //Rectangle { + // Rectangle { // x: (parent.width - width) / 2 // y: (parent.height - height) / 2 // width: 16 diff --git a/internal/frontend/qml/Proton/ComboBox.qml b/internal/frontend/qml/Proton/ComboBox.qml index 94515c5..e347a47 100644 --- a/internal/frontend/qml/Proton/ComboBox.qml +++ b/internal/frontend/qml/Proton/ComboBox.qml @@ -27,10 +27,10 @@ T.ComboBox { property ColorScheme colorScheme implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, - implicitContentWidth + leftPadding + rightPadding) + implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, - implicitContentHeight + topPadding + bottomPadding, - implicitIndicatorHeight + topPadding + bottomPadding) + implicitContentHeight + topPadding + bottomPadding, + implicitIndicatorHeight + topPadding + bottomPadding) leftPadding: 12 + (!root.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing) rightPadding: 12 + (root.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing) @@ -64,7 +64,7 @@ T.ComboBox { placeholderTextColor: root.enabled ? root.colorScheme.text_hint : root.colorScheme.text_disabled background: Rectangle { - radius: 4 + radius: Style.context_item_radius visible: root.enabled && root.editable && !root.flat border.color: { if (root.activeFocus) { @@ -85,7 +85,7 @@ T.ComboBox { background: Rectangle { implicitWidth: 140 implicitHeight: 36 - radius: 4 + radius: Style.context_item_radius color: { if (root.down) { return root.colorScheme.interaction_default_active @@ -142,7 +142,7 @@ T.ComboBox { palette.highlightedText: selected ? root.colorScheme.text_invert : root.colorScheme.text_norm background: PaddedRectangle { - radius: 4 + radius: Style.context_item_radius color: { if (parent.down) { return root.colorScheme.interaction_default_active @@ -187,7 +187,7 @@ T.ComboBox { background: Rectangle { color: root.colorScheme.background_norm - radius: 10 + radius: Style.dialog_radius border.color: root.colorScheme.border_weak border.width: 1 } diff --git a/internal/frontend/qml/Proton/Dialog.qml b/internal/frontend/qml/Proton/Dialog.qml index 44f6b4b..d5d6395 100644 --- a/internal/frontend/qml/Proton/Dialog.qml +++ b/internal/frontend/qml/Proton/Dialog.qml @@ -53,19 +53,19 @@ T.Dialog { anchors.centerIn: Overlay.overlay implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, - contentWidth + leftPadding + rightPadding, - implicitHeaderWidth, - implicitFooterWidth) + contentWidth + leftPadding + rightPadding, + implicitHeaderWidth, + implicitFooterWidth) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, - contentHeight + topPadding + bottomPadding - + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0) - + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0)) + contentHeight + topPadding + bottomPadding + + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0) + + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0)) padding: 24 background: Rectangle { color: root.colorScheme.background_norm - radius: 10 + radius: Style.dialog_radius } // TODO: Add DropShadow here diff --git a/internal/frontend/qml/Proton/Menu.qml b/internal/frontend/qml/Proton/Menu.qml index e950d84..3c6b236 100644 --- a/internal/frontend/qml/Proton/Menu.qml +++ b/internal/frontend/qml/Proton/Menu.qml @@ -27,10 +27,14 @@ T.Menu { property ColorScheme colorScheme - implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, - contentWidth + leftPadding + rightPadding) - implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, - contentHeight + topPadding + bottomPadding) + implicitWidth: Math.max( + implicitBackgroundWidth + leftInset + rightInset, + contentWidth + leftPadding + rightPadding + ) + implicitHeight: Math.max( + implicitBackgroundHeight + topInset + bottomInset, + contentHeight + topPadding + bottomPadding + ) margins: 0 overlap: 1 @@ -63,6 +67,6 @@ T.Menu { color: colorScheme.background_norm border.width: 1 border.color: colorScheme.border_weak - radius: 10 + radius: Style.account_row_radius } } diff --git a/internal/frontend/qml/Proton/MenuItem.qml b/internal/frontend/qml/Proton/MenuItem.qml index fd856d2..a2cd617 100644 --- a/internal/frontend/qml/Proton/MenuItem.qml +++ b/internal/frontend/qml/Proton/MenuItem.qml @@ -27,10 +27,10 @@ T.MenuItem { property ColorScheme colorScheme implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, - implicitContentWidth + leftPadding + rightPadding) + implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, - implicitContentHeight + topPadding + bottomPadding, - implicitIndicatorHeight + topPadding + bottomPadding) + implicitContentHeight + topPadding + bottomPadding, + implicitIndicatorHeight + topPadding + bottomPadding) padding: 6 spacing: 6 @@ -66,7 +66,7 @@ T.MenuItem { background: Rectangle { implicitWidth: 164 implicitHeight: 36 - radius: 4 + radius: Style.button_radius color: control.down ? control.colorScheme.interaction_default_active : control.highlighted ? control.colorScheme.interaction_default_hover : control.colorScheme.interaction_default } } diff --git a/internal/frontend/qml/Proton/Style.qml b/internal/frontend/qml/Proton/Style.qml index 922c85c..34cfd0f 100644 --- a/internal/frontend/qml/Proton/Style.qml +++ b/internal/frontend/qml/Proton/Style.qml @@ -25,6 +25,7 @@ import "./" // http://imaginativethinking.ca/make-qml-component-singleton/ QtObject { + id: root // TODO: Once we will use Qt >=5.15 this should be refactored with inline components as follows: // https://doc.qt.io/qt-5/qtqml-documents-definetypes.html#inline-components @@ -39,69 +40,69 @@ QtObject { prominent: lightProminentStyle // Primary - primay_norm: "#657EE4" + primay_norm: "#6D4AFF" // Interaction-norm - interaction_norm: "#657EE4" - interaction_norm_hover: "#5064B6" - interaction_norm_active: "#3C4B88" + interaction_norm: "#6D4AFF" + interaction_norm_hover: "#4D34B3" + interaction_norm_active: "#372580" // Text - text_norm: "#262A33" - text_weak: "#696F7D" - text_hint: "#A4A9B5" - text_disabled: "#BABEC7" + text_norm: "#0C0C14" + text_weak: "#706D6B" + text_hint: "#8F8D8A" + text_disabled: "#C2BFBC" text_invert: "#FFFFFF" // Field - field_norm: "#BABEC7" - field_hover: "#A4A9B5" - field_disabled: "#D0D3DA" + field_norm: "#ADABA8" + field_hover: "#8F8D8A" + field_disabled: "#D1CFCD" // Border - border_norm: "#D0D3DA" - border_weak: "#E7E9EC" + border_norm: "#D1CFCD" + border_weak: "#EAE7E4" // Background background_norm: "#FFFFFF" - background_weak: "#F3F4F6" - background_strong: "#E7E9EC" - background_avatar: "#A4A9B5" + background_weak: "#F5F4F2" + background_strong: "#EAE7E4" + background_avatar: "#C2BFBC" // Interaction-weak - interaction_weak: "#D0D3DA" - interaction_weak_hover: "#BABEC7" - interaction_weak_active: "#A4A9B5" + interaction_weak: "#D1CFCD" + interaction_weak_hover: "#C2BFBC" + interaction_weak_active: "#A8A6A3" // Interaction-default - interaction_default: "#00000000" - interaction_default_hover: "#33BABEC7" - interaction_default_active: "#4DBABEC7" + interaction_default: Qt.rgba(0,0,0,0) + interaction_default_hover: Qt.rgba(194./255., 191./255., 188./255., 0.2) + interaction_default_active: Qt.rgba(194./255., 191./255., 188./255., 0.4) // Scrollbar - scrollbar_norm: "#D0D3DA" - scrollbar_hover: "#BABEC7" + scrollbar_norm: "#D1CFCD" + scrollbar_hover: "#C2BFBC" // Signal - signal_danger: "#D42F34" - signal_danger_hover: "#C7262B" - signal_danger_active: "#BA1E23" - signal_warning: "#F5830A" - signal_warning_hover: "#F5740A" - signal_warning_active: "#F5640A" - signal_success: "#1B8561" - signal_success_hover: "#147857" - signal_success_active: "#0F6B4C" - signal_info: "#1578CF" - signal_info_hover: "#0E6DC2" - signal_info_active: "#0764B5" + signal_danger: "#DC3251" + signal_danger_hover: "#F74F6D" + signal_danger_active: "#B72346" + signal_warning: "#FF9900" + signal_warning_hover: "#FFB800" + signal_warning_active: "#FF851A" + signal_success: "#1EA885" + signal_success_hover: "#23C299" + signal_success_active: "#198F71" + signal_info: "#239ECE" + signal_info_hover: "#27B1E8" + signal_info_active: "#1F83B5" // Shadows - shadow_norm: "#FFFFFF" - shadow_lifted: "#FFFFFF" + shadow_norm: Qt.rgba(0,0,0, 0.1) // #000000 10% x:0 y:1 blur:4 + shadow_lifted: Qt.rgba(0,0,0, 0.16) // #000000 16% x:0 y:8 blur:24 // Backdrop - backdrop_norm: "#7A262A33" + backdrop_norm: Qt.rgba(12./255., 12./255., 20./255., 0.32) // Images welcome_img: "icons/img-welcome.png" @@ -113,69 +114,69 @@ QtObject { prominent: this // Primary - primay_norm: "#657EE4" + primay_norm: "#8A6EFF" // Interaction-norm - interaction_norm: "#657EE4" - interaction_norm_hover: "#7D92E8" - interaction_norm_active: "#98A9EE" + interaction_norm: "#6D4AFF" + interaction_norm_hover: "#7C5CFF" + interaction_norm_active: "#8A6EFF" // Text text_norm: "#FFFFFF" - text_weak: "#949BB9" - text_hint: "#565F84" - text_disabled: "#444E72" - text_invert: "#1C223D" + text_weak: "#9282D4" + text_hint: "#544399" + text_disabled: "#4A398F" + text_invert: "#1B1340" // Field - field_norm: "#565F84" - field_hover: "#949BB9" - field_disabled: "#353E60" + field_norm: "#9282D4" + field_hover: "#7C5CFF" + field_disabled: "#38277A" // Border - border_norm: "#353E60" - border_weak: "#2D3657" + border_norm: "#413085" + border_weak: "#3C2B80" // Background - background_norm: "#1C223D" - background_weak: "#272F4F" - background_strong: "#2D3657" - background_avatar: "#444E72" + background_norm: "#1B1340" + background_weak: "#271C57" + background_strong: "#38277A" + background_avatar: "#6D4AFF" // Interaction-weak - interaction_weak: "#353E60" - interaction_weak_hover: "#444E72" - interaction_weak_active: "#565F84" + interaction_weak: "#4A398F" + interaction_weak_hover: "#6D4AFF" + interaction_weak_active: "#8A6EFF" // Interaction-default - interaction_default: "#00000000" - interaction_default_hover: "#4D444E72" - interaction_default_active: "#66444E72" + interaction_default: Qt.rgba(0,0,0,0) + interaction_default_hover: Qt.rgba(68./255., 78./255., 114./255., 0.2) + interaction_default_active: Qt.rgba(68./255., 78./255., 114./255., 0.3) // Scrollbar - scrollbar_norm: "#353E60" - scrollbar_hover: "#444E72" + scrollbar_norm: "#413085" + scrollbar_hover: "#4A398F" // Signal - signal_danger: "#ED4C51" - signal_danger_hover: "#F7595E" - signal_danger_active: "#FF666B" - signal_warning: "#F5930A" - signal_warning_hover: "#F5A716" - signal_warning_active: "#F5B922" - signal_success: "#349172" - signal_success_hover: "#339C79" - signal_success_active: "#31A67F" + signal_danger: "#F5385A" + signal_danger_hover: "#FF5473" + signal_danger_active: "#DC3251" + signal_warning: "#FF9900" + signal_warning_hover: "#FFB800" + signal_warning_active: "#FF8419" + signal_success: "#1EA885" + signal_success_hover: "#23C299" + signal_success_active: "#198F71" signal_info: "#2C89DB" signal_info_hover: "#3491E3" - signal_info_active: "#3D99EB" + signal_info_active: "#1F83B5" // Shadows - shadow_norm: "#1C223D" - shadow_lifted: "#1C223D" + shadow_norm: Qt.rgba(0,0,0, 0.32) // #000000 32% x:0 y:1 blur:4 + shadow_lifted: Qt.rgba(0,0,0, 0.40) // #000000 40% x:0 y:8 blur:24 // Backdrop - backdrop_norm: "#52000000" + backdrop_norm: Qt.rgba(0,0,0, 0.32) // Images welcome_img: "icons/img-welcome-dark.png" @@ -187,69 +188,69 @@ QtObject { prominent: darkProminentStyle // Primary - primay_norm: "#657EE4" + primay_norm: "#8A6EFF" // Interaction-norm - interaction_norm: "#657EE4" - interaction_norm_hover: "#7D92E8" - interaction_norm_active: "#98A9EE" + interaction_norm: "#6D4AFF" + interaction_norm_hover: "#7C5CFF" + interaction_norm_active: "#8A6EFF" // Text text_norm: "#FFFFFF" - text_weak: "#A4A9B5" - text_hint: "#696F7D" - text_disabled: "#575D6B" - text_invert: "#262A33" + text_weak: "#A7A4B5" + text_hint: "#6D697D" + text_disabled: "#5B576B" + text_invert: "#1C1B24" // Field - field_norm: "#575D6B" - field_hover: "#696F7D" - field_disabled: "#464B58" + field_norm: "#5B576B" + field_hover: "#6D697D" + field_disabled: "#3F3B4C" // Border - border_norm: "#464B58" - border_weak: "#363A46" + border_norm: "#4A4658" + border_weak: "#343140" // Background - background_norm: "#262A33" - background_weak: "#2E323C" - background_strong: "#363A46" - background_avatar: "#575D6B" + background_norm: "#1C1B24" + background_weak: "#292733" + background_strong: "#3F3B4C" + background_avatar: "#6D4AFF" // Interaction-weak - interaction_weak: "#464B58" - interaction_weak_hover: "#575D6B" - interaction_weak_active: "#696F7D" + interaction_weak: "#4A4658" + interaction_weak_hover: "#5B576B" + interaction_weak_active: "#6D697D" // Interaction-default interaction_default: "#00000000" - interaction_default_hover: "#33575D6B" - interaction_default_active: "#4D575D6B" + interaction_default_hover: Qt.rgba(91./255.,87./255.,107./255.,0.2) + interaction_default_active: Qt.rgba(91./255.,87./255.,107./255.,0.4) // Scrollbar - scrollbar_norm: "#464B58" - scrollbar_hover: "#575D6B" + scrollbar_norm: "#4A4658" + scrollbar_hover: "#5B576B" // Signal - signal_danger: "#ED4C51" - signal_danger_hover: "#F7595E" - signal_danger_active: "#FF666B" - signal_warning: "#F5930A" - signal_warning_hover: "#F5A716" - signal_warning_active: "#F5B922" - signal_success: "#349172" - signal_success_hover: "#339C79" - signal_success_active: "#31A67F" - signal_info: "#2C89DB" - signal_info_hover: "#3491E3" - signal_info_active: "#3D99EB" + signal_danger: "#F5385A" + signal_danger_hover: "#FF5473" + signal_danger_active: "#DC3251" + signal_warning: "#FF9900" + signal_warning_hover: "#FFB800" + signal_warning_active: "#FF8419" + signal_success: "#1EA885" + signal_success_hover: "#23C299" + signal_success_active: "#198F71" + signal_info: "#239ECE" + signal_info_hover: "#27B1E8" + signal_info_active: "#1F83B5" // Shadows - shadow_norm: "#262A33" // #000000 32% x+0 y+1 blur:4 - shadow_lifted: "#262A33" // #000000 40% x+0 y+8 blur:24 + shadow_norm: Qt.rgba(0,0,0,0.4) // #000000 40% x+0 y+1 blur:4 + shadow_lifted: Qt.rgba(0,0,0,0.48) // #000000 48% x+0 y+8 blur:24 // Backdrop - backdrop_norm: "#52000000" + backdrop_norm: Qt.rgba(0,0,0,0.32) // Images welcome_img: "icons/img-welcome-dark.png" @@ -261,69 +262,69 @@ QtObject { prominent: this // Primary - primay_norm: "#657EE4" + primay_norm: "#8A6EFF" // Interaction-norm - interaction_norm: "#657EE4" - interaction_norm_hover: "#7D92E8" - interaction_norm_active: "#98A9EE" + interaction_norm: "#6D4AFF" + interaction_norm_hover: "#7C5CFF" + interaction_norm_active: "#8A6EFF" // Text text_norm: "#FFFFFF" - text_weak: "#A4A9B5" - text_hint: "#696F7D" - text_disabled: "#575D6B" - text_invert: "#262A33" + text_weak: "#A7A4B5" + text_hint: "#6D697D" + text_disabled: "#5B576B" + text_invert: "#1C1B24" // Field - field_norm: "#575D6B" - field_hover: "#696F7D" - field_disabled: "#464B58" + field_norm: "#5B576B" + field_hover: "#6D697D" + field_disabled: "#3F3B4C" // Border - border_norm: "#464B58" - border_weak: "#363A46" + border_norm: "#4A4658" + border_weak: "#343140" // Background - background_norm: "#1A1D24" - background_weak: "#2E323C" - background_strong: "#363A46" - background_avatar: "#575D6B" + background_norm: "#16141c" + background_weak: "#292733" + background_strong: "#3F3B4C" + background_avatar: "#6D4AFF" // Interaction-weak - interaction_weak: "#464B58" - interaction_weak_hover: "#575D6B" - interaction_weak_active: "#696F7D" + interaction_weak: "#4A4658" + interaction_weak_hover: "#5B576B" + interaction_weak_active: "#6D697D" // Interaction-default interaction_default: "#00000000" - interaction_default_hover: "#33575D6B" - interaction_default_active: "#4D575D6B" + interaction_default_hover: Qt.rgba(91./255.,87./255.,107./255.,0.2) + interaction_default_active: Qt.rgba(91./255.,87./255.,107./255.,0.4) // Scrollbar - scrollbar_norm: "#464B58" - scrollbar_hover: "#575D6B" + scrollbar_norm: "#4A4658" + scrollbar_hover: "#5B576B" // Signal - signal_danger: "#ED4C51" - signal_danger_hover: "#F7595E" - signal_danger_active: "#FF666B" - signal_warning: "#F5930A" - signal_warning_hover: "#F5A716" - signal_warning_active: "#F5B922" - signal_success: "#349172" - signal_success_hover: "#339C79" - signal_success_active: "#31A67F" - signal_info: "#2C89DB" - signal_info_hover: "#3491E3" - signal_info_active: "#3D99EB" + signal_danger: "#F5385A" + signal_danger_hover: "#FF5473" + signal_danger_active: "#DC3251" + signal_warning: "#FF9900" + signal_warning_hover: "#FFB800" + signal_warning_active: "#FF8419" + signal_success: "#1EA885" + signal_success_hover: "#23C299" + signal_success_active: "#198F71" + signal_info: "#239ECE" + signal_info_hover: "#27B1E8" + signal_info_active: "#1F83B5" // Shadows - shadow_norm: "#262A33" // #000000 32% x+0 y+1 blur:4 - shadow_lifted: "#262A33" // #000000 40% x+0 y+8 blur:24 + shadow_norm: Qt.rgba(0,0,0,0.4) // #000000 40% x+0 y+1 blur:4 + shadow_lifted: Qt.rgba(0,0,0,0.48) // #000000 48% x+0 y+8 blur:24 // Backdrop - backdrop_norm: "#52000000" + backdrop_norm: Qt.rgba(0,0,0,0.32) // Images welcome_img: "icons/img-welcome-dark.png" @@ -344,6 +345,22 @@ QtObject { } } + property real px : 1.00 // px + + property real input_radius : 8 * root.px // px + property real button_radius : 8 * root.px // px + property real checkbox_radius : 4 * root.px // px + property real avatar_radius : 8 * root.px // px + property real big_avatar_radius : 12 * root.px // px + property real account_hover_radius : 12 * root.px // px + property real account_row_radius : 12 * root.px // px + property real context_item_radius : 8 * root.px // px + property real banner_radius : 12 * root.px // px + property real dialog_radius : 12 * root.px // px + property real card_radius : 12 * root.px // px + property real storage_bar_radius : 3 * root.px // px + property real tooltip_radius : 8 * root.px // px + property int heading_font_size: 28 property int heading_line_height: 36 @@ -355,11 +372,11 @@ QtObject { property int body_font_size: 14 property int body_line_height: 20 - property real body_letter_spacing: 0.2 + property real body_letter_spacing: 0.2 * root.px property int caption_font_size: 12 property int caption_line_height: 16 - property real caption_letter_spacing: 0.4 + property real caption_letter_spacing: 0.4 * root.px property int fontWeight_100: Font.Thin property int fontWeight_200: Font.Light diff --git a/internal/frontend/qml/Proton/Switch.qml b/internal/frontend/qml/Proton/Switch.qml index 12bbef9..a6d1531 100644 --- a/internal/frontend/qml/Proton/Switch.qml +++ b/internal/frontend/qml/Proton/Switch.qml @@ -38,10 +38,10 @@ T.Switch { id: control implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, - implicitContentWidth + leftPadding + rightPadding) + implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, - implicitContentHeight + topPadding + bottomPadding, - implicitIndicatorHeight + topPadding + bottomPadding) + implicitContentHeight + topPadding + bottomPadding, + implicitIndicatorHeight + topPadding + bottomPadding) padding: 0 spacing: 7 @@ -53,7 +53,7 @@ T.Switch { x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2 y: control.topPadding + (control.availableHeight - height) / 2 - radius: 12 + radius: height / 2. color: control.enabled || control.loading ? control.colorScheme.background_norm : control.colorScheme.background_strong border.width: control.enabled && !loading ? 1 : 0 border.color: control.hovered ? control.colorScheme.field_hover : control.colorScheme.field_norm @@ -63,7 +63,7 @@ T.Switch { y: (parent.height - height) / 2 width: 24 height: 24 - radius: 12 + radius: parent.radius visible: !loading diff --git a/internal/frontend/qml/Proton/TextArea.qml b/internal/frontend/qml/Proton/TextArea.qml index 18c3c6a..5d00205 100644 --- a/internal/frontend/qml/Proton/TextArea.qml +++ b/internal/frontend/qml/Proton/TextArea.qml @@ -183,15 +183,15 @@ FocusScope { id: control implicitWidth: Math.max( - contentWidth + leftPadding + rightPadding, - implicitBackgroundWidth + leftInset + rightInset, - placeholder.implicitWidth + leftPadding + rightPadding - ) + contentWidth + leftPadding + rightPadding, + implicitBackgroundWidth + leftInset + rightInset, + placeholder.implicitWidth + leftPadding + rightPadding + ) implicitHeight: Math.max( - contentHeight + topPadding + bottomPadding, - implicitBackgroundHeight + topInset + bottomInset, - placeholder.implicitHeight + topPadding + bottomPadding - ) + contentHeight + topPadding + bottomPadding, + implicitBackgroundHeight + topInset + bottomInset, + placeholder.implicitHeight + topPadding + bottomPadding + ) topPadding: 8 bottomPadding: 8 @@ -270,7 +270,7 @@ FocusScope { background: Rectangle { anchors.fill: parent - radius: 4 + radius: Style.input_radius visible: true color: root.colorScheme.background_norm border.color: { diff --git a/internal/frontend/qml/Proton/TextField.qml b/internal/frontend/qml/Proton/TextField.qml index 00485ee..a81b102 100644 --- a/internal/frontend/qml/Proton/TextField.qml +++ b/internal/frontend/qml/Proton/TextField.qml @@ -160,7 +160,7 @@ FocusScope { Layout.fillHeight: true Layout.fillWidth: true - radius: 4 + radius: Style.input_radius visible: true color: root.colorScheme.background_norm border.color: { @@ -198,10 +198,10 @@ FocusScope { Layout.fillWidth: true implicitWidth: implicitBackgroundWidth + leftInset + rightInset - || Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding + || Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, - contentHeight + topPadding + bottomPadding, - placeholder.implicitHeight + topPadding + bottomPadding) + contentHeight + topPadding + bottomPadding, + placeholder.implicitHeight + topPadding + bottomPadding) topPadding: 8 bottomPadding: 8 diff --git a/internal/frontend/qml/Proton/Toggle.qml b/internal/frontend/qml/Proton/Toggle.qml index ae8a67e..28a129c 100644 --- a/internal/frontend/qml/Proton/Toggle.qml +++ b/internal/frontend/qml/Proton/Toggle.qml @@ -39,7 +39,7 @@ Item { implicitWidth: 40 implicitHeight: 24 - radius: 20 + radius: width/2 color: { if (root.loading) return "transparent" if (root._disabled) return root.colorScheme.background_strong @@ -56,7 +56,7 @@ Item { anchors.leftMargin: root.checked ? 16 : 0 width: 24 height: 24 - radius: 12 + radius: width/2 color: { if (root.loading) return "transparent" if (root._disabled) return root.colorScheme.field_disabled diff --git a/internal/frontend/qml/SetupGuide.qml b/internal/frontend/qml/SetupGuide.qml index d8b4481..0dc48b8 100644 --- a/internal/frontend/qml/SetupGuide.qml +++ b/internal/frontend/qml/SetupGuide.qml @@ -145,7 +145,7 @@ Item { highlight: Rectangle { color: root.colorScheme.interaction_default_active - radius: 4 + radius: ProtonStyle.context_item_radius } delegate: Item { @@ -220,7 +220,7 @@ Item { highlight: Rectangle { color: root.colorScheme.interaction_default_active - radius: 4 + radius: ProtonStyle.context_item_radius } delegate: Item { diff --git a/internal/frontend/qml/StatusWindow.qml b/internal/frontend/qml/StatusWindow.qml index 366e3fc..4285db7 100644 --- a/internal/frontend/qml/StatusWindow.qml +++ b/internal/frontend/qml/StatusWindow.qml @@ -67,7 +67,7 @@ Window { anchors.left: parent.left anchors.right: parent.right height: parent.height * 2 - radius: 10 + radius: ProtonStyle.dialog_radius color: { if (!statusItem.activeNotification) { @@ -232,7 +232,7 @@ Window { anchors.left: parent.left anchors.right: parent.right height: parent.height * 2 - radius: 10 + radius: ProtonStyle.dialog_radius color: root.colorScheme.background_weak } diff --git a/internal/frontend/qml/icons/img-welcome-dark.png b/internal/frontend/qml/icons/img-welcome-dark.png index 3d8e0bb..830c00a 100644 Binary files a/internal/frontend/qml/icons/img-welcome-dark.png and b/internal/frontend/qml/icons/img-welcome-dark.png differ diff --git a/internal/frontend/qml/icons/img-welcome-dark.svg b/internal/frontend/qml/icons/img-welcome-dark.svg index 49d6c13..305e799 100644 --- a/internal/frontend/qml/icons/img-welcome-dark.svg +++ b/internal/frontend/qml/icons/img-welcome-dark.svg @@ -7,8 +7,8 @@ version="1.1" id="svg90" sodipodi:docname="img-welcome-dark.svg" - inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)" - inkscape:export-filename="/home/dev/gopath/src/github.com/ProtonMail/proton-bridge/internal/frontend/qml/icons/img-welcome.png" + inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)" + inkscape:export-filename="/home/dev/gopath/src/github.com/ProtonMail/proton-bridge/internal/frontend/qml/icons/img-welcome-dark.png" inkscape:export-xdpi="400" inkscape:export-ydpi="400" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" @@ -27,15 +27,15 @@ inkscape:snap-page="true" inkscape:zoom="4.3513514" inkscape:cx="132.02795" - inkscape:cy="74.114907" - inkscape:window-width="2556" - inkscape:window-height="1404" - inkscape:window-x="0" - inkscape:window-y="16" + inkscape:cy="37.459627" + inkscape:window-width="1276" + inkscape:window-height="1401" + inkscape:window-x="1280" + inkscape:window-y="18" inkscape:window-maximized="1" inkscape:current-layer="svg90" />