yesBad/proton-bridge
1
0
Fork 0
forked from Silverfish/proton-bridge
Code Actions Activity

GODT-1502: Rebranding: color and radius.

Browse Source
This commit is contained in:
Jakub
2022-02-07 11:19:06 +01:00
parent 415d08b411
commit e353dc554d
19 changed files with 252 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
internal/frontend/qml/AccountDelegate.qml
View File

@ -27,7 +27,7 @@ Item {
property ColorScheme colorScheme property ColorScheme colorScheme
property var user property var user
property var _spacing: 12 property var _spacing: 12 * ProtonStyle.px
property color usedSpaceColor : { property color usedSpaceColor : {
if (!root.enabled) return root.colorScheme.text_weak if (!root.enabled) return root.colorScheme.text_weak
@ -86,7 +86,7 @@ Item {
Layout.fillHeight: true Layout.fillHeight: true
Layout.preferredWidth: height Layout.preferredWidth: height
radius: 4 radius: ProtonStyle.avatar_radius
color: root.colorScheme.background_avatar color: root.colorScheme.background_avatar
@ -130,7 +130,7 @@ Item {
elide: Text.ElideMiddle elide: Text.ElideMiddle
} }
Item { implicitHeight: root.type == AccountDelegate.LargeView ? 6 : 0 } Item { implicitHeight: root.type == AccountDelegate.LargeView ? 6 * ProtonStyle.px : 0 }
RowLayout { RowLayout {
spacing: 0 spacing: 0
@ -161,14 +161,16 @@ Item {
Rectangle { Rectangle {
id: storage_bar
visible: root.user ? root.type == AccountDelegate.LargeView : false visible: root.user ? root.type == AccountDelegate.LargeView : false
width: 140 width: 140 * ProtonStyle.px
height: 4 height: 4 * ProtonStyle.px
radius: 3 radius: ProtonStyle.storage_bar_radius
color: root.colorScheme.border_weak color: root.colorScheme.border_weak
Rectangle { Rectangle {
radius: 3 id: storage_bar_filled
radius: ProtonStyle.storage_bar_radius
color: root.usedSpaceColor color: root.usedSpaceColor
visible: root.user ? parent.visible && root.user.loggedIn : false visible: root.user ? parent.visible && root.user.loggedIn : false
anchors { anchors {

4
internal/frontend/qml/Banner.qml
View File

@ -73,7 +73,7 @@ Popup {
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.left: parent.left anchors.left: parent.left
width: parent.width + 10 width: parent.width + 10
radius: 10 radius: ProtonStyle.banner_radius
color: { color: {
if (!root.notification) { if (!root.notification) {
return "transparent" return "transparent"
@ -180,7 +180,7 @@ Popup {
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.right: parent.right anchors.right: parent.right
width: parent.width + 10 width: parent.width + 10
radius: 10 radius: ProtonStyle.banner_radius
color: { color: {
if (!root.notification) { if (!root.notification) {
return "transparent" return "transparent"

2
internal/frontend/qml/Configuration.qml
View File

@ -37,7 +37,7 @@ Rectangle {
implicitHeight: content.height + 2*root._margin implicitHeight: content.height + 2*root._margin
color: root.colorScheme.background_norm color: root.colorScheme.background_norm
radius: 9 radius: ProtonStyle.card_radius
property int _margin: 24 property int _margin: 24

2
internal/frontend/qml/ContentWrapper.qml
View File

@ -159,7 +159,7 @@ Item {
highlight: Rectangle { highlight: Rectangle {
color: leftBar.colorScheme.interaction_default_active color: leftBar.colorScheme.interaction_default_active
radius: 4 radius: ProtonStyle.account_row_radius
} }
model: root.backend.users model: root.backend.users

2
internal/frontend/qml/Proton/Button.qml
View File

@ -147,7 +147,7 @@ T.Button {
background: Rectangle { background: Rectangle {
implicitWidth: 36 implicitWidth: 36
implicitHeight: 36 implicitHeight: 36
radius: 4 radius: Style.button_radius
visible: true visible: true
color: { color: {
if (!isIcon) { if (!isIcon) {

10
internal/frontend/qml/Proton/CheckBox.qml
View File

@ -28,10 +28,10 @@ T.CheckBox {
id: control id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding, implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding) implicitIndicatorHeight + topPadding + bottomPadding)
padding: 0 padding: 0
spacing: 8 spacing: 8
@ -39,7 +39,7 @@ T.CheckBox {
indicator: Rectangle { indicator: Rectangle {
implicitWidth: 20 implicitWidth: 20
implicitHeight: 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 x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
y: control.topPadding + (control.availableHeight - height) / 2 y: control.topPadding + (control.availableHeight - height) / 2
@ -96,7 +96,7 @@ T.CheckBox {
// TODO: do we need PartiallyChecked state? // TODO: do we need PartiallyChecked state?
//Rectangle { // Rectangle {
// x: (parent.width - width) / 2 // x: (parent.width - width) / 2
// y: (parent.height - height) / 2 // y: (parent.height - height) / 2
// width: 16 // width: 16

14
internal/frontend/qml/Proton/ComboBox.qml
View File

@ -27,10 +27,10 @@ T.ComboBox {
property ColorScheme colorScheme property ColorScheme colorScheme
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding, implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding) implicitIndicatorHeight + topPadding + bottomPadding)
leftPadding: 12 + (!root.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing) leftPadding: 12 + (!root.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
rightPadding: 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 placeholderTextColor: root.enabled ? root.colorScheme.text_hint : root.colorScheme.text_disabled
background: Rectangle { background: Rectangle {
radius: 4 radius: Style.context_item_radius
visible: root.enabled && root.editable && !root.flat visible: root.enabled && root.editable && !root.flat
border.color: { border.color: {
if (root.activeFocus) { if (root.activeFocus) {
@ -85,7 +85,7 @@ T.ComboBox {
background: Rectangle { background: Rectangle {
implicitWidth: 140 implicitWidth: 140
implicitHeight: 36 implicitHeight: 36
radius: 4 radius: Style.context_item_radius
color: { color: {
if (root.down) { if (root.down) {
return root.colorScheme.interaction_default_active return root.colorScheme.interaction_default_active
@ -142,7 +142,7 @@ T.ComboBox {
palette.highlightedText: selected ? root.colorScheme.text_invert : root.colorScheme.text_norm palette.highlightedText: selected ? root.colorScheme.text_invert : root.colorScheme.text_norm
background: PaddedRectangle { background: PaddedRectangle {
radius: 4 radius: Style.context_item_radius
color: { color: {
if (parent.down) { if (parent.down) {
return root.colorScheme.interaction_default_active return root.colorScheme.interaction_default_active
@ -187,7 +187,7 @@ T.ComboBox {
background: Rectangle { background: Rectangle {
color: root.colorScheme.background_norm color: root.colorScheme.background_norm
radius: 10 radius: Style.dialog_radius
border.color: root.colorScheme.border_weak border.color: root.colorScheme.border_weak
border.width: 1 border.width: 1
} }

14
internal/frontend/qml/Proton/Dialog.qml
View File

@ -53,19 +53,19 @@ T.Dialog {
anchors.centerIn: Overlay.overlay anchors.centerIn: Overlay.overlay
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding, contentWidth + leftPadding + rightPadding,
implicitHeaderWidth, implicitHeaderWidth,
implicitFooterWidth) implicitFooterWidth)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding contentHeight + topPadding + bottomPadding
+ (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0) + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+ (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0)) + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
padding: 24 padding: 24
background: Rectangle { background: Rectangle {
color: root.colorScheme.background_norm color: root.colorScheme.background_norm
radius: 10 radius: Style.dialog_radius
} }
// TODO: Add DropShadow here // TODO: Add DropShadow here

14
internal/frontend/qml/Proton/Menu.qml
View File

@ -27,10 +27,14 @@ T.Menu {
property ColorScheme colorScheme property ColorScheme colorScheme
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(
contentWidth + leftPadding + rightPadding) implicitBackgroundWidth + leftInset + rightInset,
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, contentWidth + leftPadding + rightPadding
contentHeight + topPadding + bottomPadding) )
implicitHeight: Math.max(
implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding
)
margins: 0 margins: 0
overlap: 1 overlap: 1
@ -63,6 +67,6 @@ T.Menu {
color: colorScheme.background_norm color: colorScheme.background_norm
border.width: 1 border.width: 1
border.color: colorScheme.border_weak border.color: colorScheme.border_weak
radius: 10 radius: Style.account_row_radius
} }
} }

8
internal/frontend/qml/Proton/MenuItem.qml
View File

@ -27,10 +27,10 @@ T.MenuItem {
property ColorScheme colorScheme property ColorScheme colorScheme
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding, implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding) implicitIndicatorHeight + topPadding + bottomPadding)
padding: 6 padding: 6
spacing: 6 spacing: 6
@ -66,7 +66,7 @@ T.MenuItem {
background: Rectangle { background: Rectangle {
implicitWidth: 164 implicitWidth: 164
implicitHeight: 36 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 color: control.down ? control.colorScheme.interaction_default_active : control.highlighted ? control.colorScheme.interaction_default_hover : control.colorScheme.interaction_default
} }
} }

331
internal/frontend/qml/Proton/Style.qml
View File

@ -25,6 +25,7 @@ import "./"
// http://imaginativethinking.ca/make-qml-component-singleton/ // http://imaginativethinking.ca/make-qml-component-singleton/
QtObject { QtObject {
id: root
// TODO: Once we will use Qt >=5.15 this should be refactored with inline components as follows: // 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 // https://doc.qt.io/qt-5/qtqml-documents-definetypes.html#inline-components
@ -39,69 +40,69 @@ QtObject {
prominent: lightProminentStyle prominent: lightProminentStyle
// Primary // Primary
primay_norm: "#657EE4" primay_norm: "#6D4AFF"
// Interaction-norm // Interaction-norm
interaction_norm: "#657EE4" interaction_norm: "#6D4AFF"
interaction_norm_hover: "#5064B6" interaction_norm_hover: "#4D34B3"
interaction_norm_active: "#3C4B88" interaction_norm_active: "#372580"
// Text // Text
text_norm: "#262A33" text_norm: "#0C0C14"
text_weak: "#696F7D" text_weak: "#706D6B"
text_hint: "#A4A9B5" text_hint: "#8F8D8A"
text_disabled: "#BABEC7" text_disabled: "#C2BFBC"
text_invert: "#FFFFFF" text_invert: "#FFFFFF"
// Field // Field
field_norm: "#BABEC7" field_norm: "#ADABA8"
field_hover: "#A4A9B5" field_hover: "#8F8D8A"
field_disabled: "#D0D3DA" field_disabled: "#D1CFCD"
// Border // Border
border_norm: "#D0D3DA" border_norm: "#D1CFCD"
border_weak: "#E7E9EC" border_weak: "#EAE7E4"
// Background // Background
background_norm: "#FFFFFF" background_norm: "#FFFFFF"
background_weak: "#F3F4F6" background_weak: "#F5F4F2"
background_strong: "#E7E9EC" background_strong: "#EAE7E4"
background_avatar: "#A4A9B5" background_avatar: "#C2BFBC"
// Interaction-weak // Interaction-weak
interaction_weak: "#D0D3DA" interaction_weak: "#D1CFCD"
interaction_weak_hover: "#BABEC7" interaction_weak_hover: "#C2BFBC"
interaction_weak_active: "#A4A9B5" interaction_weak_active: "#A8A6A3"
// Interaction-default // Interaction-default
interaction_default: "#00000000" interaction_default: Qt.rgba(0,0,0,0)
interaction_default_hover: "#33BABEC7" interaction_default_hover: Qt.rgba(194./255., 191./255., 188./255., 0.2)
interaction_default_active: "#4DBABEC7" interaction_default_active: Qt.rgba(194./255., 191./255., 188./255., 0.4)
// Scrollbar // Scrollbar
scrollbar_norm: "#D0D3DA" scrollbar_norm: "#D1CFCD"
scrollbar_hover: "#BABEC7" scrollbar_hover: "#C2BFBC"
// Signal // Signal
signal_danger: "#D42F34" signal_danger: "#DC3251"
signal_danger_hover: "#C7262B" signal_danger_hover: "#F74F6D"
signal_danger_active: "#BA1E23" signal_danger_active: "#B72346"
signal_warning: "#F5830A" signal_warning: "#FF9900"
signal_warning_hover: "#F5740A" signal_warning_hover: "#FFB800"
signal_warning_active: "#F5640A" signal_warning_active: "#FF851A"
signal_success: "#1B8561" signal_success: "#1EA885"
signal_success_hover: "#147857" signal_success_hover: "#23C299"
signal_success_active: "#0F6B4C" signal_success_active: "#198F71"
signal_info: "#1578CF" signal_info: "#239ECE"
signal_info_hover: "#0E6DC2" signal_info_hover: "#27B1E8"
signal_info_active: "#0764B5" signal_info_active: "#1F83B5"
// Shadows // Shadows
shadow_norm: "#FFFFFF" shadow_norm: Qt.rgba(0,0,0, 0.1) // #000000 10% x:0 y:1 blur:4
shadow_lifted: "#FFFFFF" shadow_lifted: Qt.rgba(0,0,0, 0.16) // #000000 16% x:0 y:8 blur:24
// Backdrop // Backdrop
backdrop_norm: "#7A262A33" backdrop_norm: Qt.rgba(12./255., 12./255., 20./255., 0.32)
// Images // Images
welcome_img: "icons/img-welcome.png" welcome_img: "icons/img-welcome.png"
@ -113,69 +114,69 @@ QtObject {
prominent: this prominent: this
// Primary // Primary
primay_norm: "#657EE4" primay_norm: "#8A6EFF"
// Interaction-norm // Interaction-norm
interaction_norm: "#657EE4" interaction_norm: "#6D4AFF"
interaction_norm_hover: "#7D92E8" interaction_norm_hover: "#7C5CFF"
interaction_norm_active: "#98A9EE" interaction_norm_active: "#8A6EFF"
// Text // Text
text_norm: "#FFFFFF" text_norm: "#FFFFFF"
text_weak: "#949BB9" text_weak: "#9282D4"
text_hint: "#565F84" text_hint: "#544399"
text_disabled: "#444E72" text_disabled: "#4A398F"
text_invert: "#1C223D" text_invert: "#1B1340"
// Field // Field
field_norm: "#565F84" field_norm: "#9282D4"
field_hover: "#949BB9" field_hover: "#7C5CFF"
field_disabled: "#353E60" field_disabled: "#38277A"
// Border // Border
border_norm: "#353E60" border_norm: "#413085"
border_weak: "#2D3657" border_weak: "#3C2B80"
// Background // Background
background_norm: "#1C223D" background_norm: "#1B1340"
background_weak: "#272F4F" background_weak: "#271C57"
background_strong: "#2D3657" background_strong: "#38277A"
background_avatar: "#444E72" background_avatar: "#6D4AFF"
// Interaction-weak // Interaction-weak
interaction_weak: "#353E60" interaction_weak: "#4A398F"
interaction_weak_hover: "#444E72" interaction_weak_hover: "#6D4AFF"
interaction_weak_active: "#565F84" interaction_weak_active: "#8A6EFF"
// Interaction-default // Interaction-default
interaction_default: "#00000000" interaction_default: Qt.rgba(0,0,0,0)
interaction_default_hover: "#4D444E72" interaction_default_hover: Qt.rgba(68./255., 78./255., 114./255., 0.2)
interaction_default_active: "#66444E72" interaction_default_active: Qt.rgba(68./255., 78./255., 114./255., 0.3)
// Scrollbar // Scrollbar
scrollbar_norm: "#353E60" scrollbar_norm: "#413085"
scrollbar_hover: "#444E72" scrollbar_hover: "#4A398F"
// Signal // Signal
signal_danger: "#ED4C51" signal_danger: "#F5385A"
signal_danger_hover: "#F7595E" signal_danger_hover: "#FF5473"
signal_danger_active: "#FF666B" signal_danger_active: "#DC3251"
signal_warning: "#F5930A" signal_warning: "#FF9900"
signal_warning_hover: "#F5A716" signal_warning_hover: "#FFB800"
signal_warning_active: "#F5B922" signal_warning_active: "#FF8419"
signal_success: "#349172" signal_success: "#1EA885"
signal_success_hover: "#339C79" signal_success_hover: "#23C299"
signal_success_active: "#31A67F" signal_success_active: "#198F71"
signal_info: "#2C89DB" signal_info: "#2C89DB"
signal_info_hover: "#3491E3" signal_info_hover: "#3491E3"
signal_info_active: "#3D99EB" signal_info_active: "#1F83B5"
// Shadows // Shadows
shadow_norm: "#1C223D" shadow_norm: Qt.rgba(0,0,0, 0.32) // #000000 32% x:0 y:1 blur:4
shadow_lifted: "#1C223D" shadow_lifted: Qt.rgba(0,0,0, 0.40) // #000000 40% x:0 y:8 blur:24
// Backdrop // Backdrop
backdrop_norm: "#52000000" backdrop_norm: Qt.rgba(0,0,0, 0.32)
// Images // Images
welcome_img: "icons/img-welcome-dark.png" welcome_img: "icons/img-welcome-dark.png"
@ -187,69 +188,69 @@ QtObject {
prominent: darkProminentStyle prominent: darkProminentStyle
// Primary // Primary
primay_norm: "#657EE4" primay_norm: "#8A6EFF"
// Interaction-norm // Interaction-norm
interaction_norm: "#657EE4" interaction_norm: "#6D4AFF"
interaction_norm_hover: "#7D92E8" interaction_norm_hover: "#7C5CFF"
interaction_norm_active: "#98A9EE" interaction_norm_active: "#8A6EFF"
// Text // Text
text_norm: "#FFFFFF" text_norm: "#FFFFFF"
text_weak: "#A4A9B5" text_weak: "#A7A4B5"
text_hint: "#696F7D" text_hint: "#6D697D"
text_disabled: "#575D6B" text_disabled: "#5B576B"
text_invert: "#262A33" text_invert: "#1C1B24"
// Field // Field
field_norm: "#575D6B" field_norm: "#5B576B"
field_hover: "#696F7D" field_hover: "#6D697D"
field_disabled: "#464B58" field_disabled: "#3F3B4C"
// Border // Border
border_norm: "#464B58" border_norm: "#4A4658"
border_weak: "#363A46" border_weak: "#343140"
// Background // Background
background_norm: "#262A33" background_norm: "#1C1B24"
background_weak: "#2E323C" background_weak: "#292733"
background_strong: "#363A46" background_strong: "#3F3B4C"
background_avatar: "#575D6B" background_avatar: "#6D4AFF"
// Interaction-weak // Interaction-weak
interaction_weak: "#464B58" interaction_weak: "#4A4658"
interaction_weak_hover: "#575D6B" interaction_weak_hover: "#5B576B"
interaction_weak_active: "#696F7D" interaction_weak_active: "#6D697D"
// Interaction-default // Interaction-default
interaction_default: "#00000000" interaction_default: "#00000000"
interaction_default_hover: "#33575D6B" interaction_default_hover: Qt.rgba(91./255.,87./255.,107./255.,0.2)
interaction_default_active: "#4D575D6B" interaction_default_active: Qt.rgba(91./255.,87./255.,107./255.,0.4)
// Scrollbar // Scrollbar
scrollbar_norm: "#464B58" scrollbar_norm: "#4A4658"
scrollbar_hover: "#575D6B" scrollbar_hover: "#5B576B"
// Signal // Signal
signal_danger: "#ED4C51" signal_danger: "#F5385A"
signal_danger_hover: "#F7595E" signal_danger_hover: "#FF5473"
signal_danger_active: "#FF666B" signal_danger_active: "#DC3251"
signal_warning: "#F5930A" signal_warning: "#FF9900"
signal_warning_hover: "#F5A716" signal_warning_hover: "#FFB800"
signal_warning_active: "#F5B922" signal_warning_active: "#FF8419"
signal_success: "#349172" signal_success: "#1EA885"
signal_success_hover: "#339C79" signal_success_hover: "#23C299"
signal_success_active: "#31A67F" signal_success_active: "#198F71"
signal_info: "#2C89DB" signal_info: "#239ECE"
signal_info_hover: "#3491E3" signal_info_hover: "#27B1E8"
signal_info_active: "#3D99EB" signal_info_active: "#1F83B5"
// Shadows // Shadows
shadow_norm: "#262A33" // #000000 32% x+0 y+1 blur:4 shadow_norm: Qt.rgba(0,0,0,0.4) // #000000 40% x+0 y+1 blur:4
shadow_lifted: "#262A33" // #000000 40% x+0 y+8 blur:24 shadow_lifted: Qt.rgba(0,0,0,0.48) // #000000 48% x+0 y+8 blur:24
// Backdrop // Backdrop
backdrop_norm: "#52000000" backdrop_norm: Qt.rgba(0,0,0,0.32)
// Images // Images
welcome_img: "icons/img-welcome-dark.png" welcome_img: "icons/img-welcome-dark.png"
@ -261,69 +262,69 @@ QtObject {
prominent: this prominent: this
// Primary // Primary
primay_norm: "#657EE4" primay_norm: "#8A6EFF"
// Interaction-norm // Interaction-norm
interaction_norm: "#657EE4" interaction_norm: "#6D4AFF"
interaction_norm_hover: "#7D92E8" interaction_norm_hover: "#7C5CFF"
interaction_norm_active: "#98A9EE" interaction_norm_active: "#8A6EFF"
// Text // Text
text_norm: "#FFFFFF" text_norm: "#FFFFFF"
text_weak: "#A4A9B5" text_weak: "#A7A4B5"
text_hint: "#696F7D" text_hint: "#6D697D"
text_disabled: "#575D6B" text_disabled: "#5B576B"
text_invert: "#262A33" text_invert: "#1C1B24"
// Field // Field
field_norm: "#575D6B" field_norm: "#5B576B"
field_hover: "#696F7D" field_hover: "#6D697D"
field_disabled: "#464B58" field_disabled: "#3F3B4C"
// Border // Border
border_norm: "#464B58" border_norm: "#4A4658"
border_weak: "#363A46" border_weak: "#343140"
// Background // Background
background_norm: "#1A1D24" background_norm: "#16141c"
background_weak: "#2E323C" background_weak: "#292733"
background_strong: "#363A46" background_strong: "#3F3B4C"
background_avatar: "#575D6B" background_avatar: "#6D4AFF"
// Interaction-weak // Interaction-weak
interaction_weak: "#464B58" interaction_weak: "#4A4658"
interaction_weak_hover: "#575D6B" interaction_weak_hover: "#5B576B"
interaction_weak_active: "#696F7D" interaction_weak_active: "#6D697D"
// Interaction-default // Interaction-default
interaction_default: "#00000000" interaction_default: "#00000000"
interaction_default_hover: "#33575D6B" interaction_default_hover: Qt.rgba(91./255.,87./255.,107./255.,0.2)
interaction_default_active: "#4D575D6B" interaction_default_active: Qt.rgba(91./255.,87./255.,107./255.,0.4)
// Scrollbar // Scrollbar
scrollbar_norm: "#464B58" scrollbar_norm: "#4A4658"
scrollbar_hover: "#575D6B" scrollbar_hover: "#5B576B"
// Signal // Signal
signal_danger: "#ED4C51" signal_danger: "#F5385A"
signal_danger_hover: "#F7595E" signal_danger_hover: "#FF5473"
signal_danger_active: "#FF666B" signal_danger_active: "#DC3251"
signal_warning: "#F5930A" signal_warning: "#FF9900"
signal_warning_hover: "#F5A716" signal_warning_hover: "#FFB800"
signal_warning_active: "#F5B922" signal_warning_active: "#FF8419"
signal_success: "#349172" signal_success: "#1EA885"
signal_success_hover: "#339C79" signal_success_hover: "#23C299"
signal_success_active: "#31A67F" signal_success_active: "#198F71"
signal_info: "#2C89DB" signal_info: "#239ECE"
signal_info_hover: "#3491E3" signal_info_hover: "#27B1E8"
signal_info_active: "#3D99EB" signal_info_active: "#1F83B5"
// Shadows // Shadows
shadow_norm: "#262A33" // #000000 32% x+0 y+1 blur:4 shadow_norm: Qt.rgba(0,0,0,0.4) // #000000 40% x+0 y+1 blur:4
shadow_lifted: "#262A33" // #000000 40% x+0 y+8 blur:24 shadow_lifted: Qt.rgba(0,0,0,0.48) // #000000 48% x+0 y+8 blur:24
// Backdrop // Backdrop
backdrop_norm: "#52000000" backdrop_norm: Qt.rgba(0,0,0,0.32)
// Images // Images
welcome_img: "icons/img-welcome-dark.png" 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_font_size: 28
property int heading_line_height: 36 property int heading_line_height: 36
@ -355,11 +372,11 @@ QtObject {
property int body_font_size: 14 property int body_font_size: 14
property int body_line_height: 20 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_font_size: 12
property int caption_line_height: 16 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_100: Font.Thin
property int fontWeight_200: Font.Light property int fontWeight_200: Font.Light

10
internal/frontend/qml/Proton/Switch.qml
View File

@ -38,10 +38,10 @@ T.Switch {
id: control id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding, implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding) implicitIndicatorHeight + topPadding + bottomPadding)
padding: 0 padding: 0
spacing: 7 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 x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
y: control.topPadding + (control.availableHeight - height) / 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 color: control.enabled || control.loading ? control.colorScheme.background_norm : control.colorScheme.background_strong
border.width: control.enabled && !loading ? 1 : 0 border.width: control.enabled && !loading ? 1 : 0
border.color: control.hovered ? control.colorScheme.field_hover : control.colorScheme.field_norm border.color: control.hovered ? control.colorScheme.field_hover : control.colorScheme.field_norm
@ -63,7 +63,7 @@ T.Switch {
y: (parent.height - height) / 2 y: (parent.height - height) / 2
width: 24 width: 24
height: 24 height: 24
radius: 12 radius: parent.radius
visible: !loading visible: !loading

18
internal/frontend/qml/Proton/TextArea.qml
View File

@ -183,15 +183,15 @@ FocusScope {
id: control id: control
implicitWidth: Math.max( implicitWidth: Math.max(
contentWidth + leftPadding + rightPadding, contentWidth + leftPadding + rightPadding,
implicitBackgroundWidth + leftInset + rightInset, implicitBackgroundWidth + leftInset + rightInset,
placeholder.implicitWidth + leftPadding + rightPadding placeholder.implicitWidth + leftPadding + rightPadding
) )
implicitHeight: Math.max( implicitHeight: Math.max(
contentHeight + topPadding + bottomPadding, contentHeight + topPadding + bottomPadding,
implicitBackgroundHeight + topInset + bottomInset, implicitBackgroundHeight + topInset + bottomInset,
placeholder.implicitHeight + topPadding + bottomPadding placeholder.implicitHeight + topPadding + bottomPadding
) )
topPadding: 8 topPadding: 8
bottomPadding: 8 bottomPadding: 8
@ -270,7 +270,7 @@ FocusScope {
background: Rectangle { background: Rectangle {
anchors.fill: parent anchors.fill: parent
radius: 4 radius: Style.input_radius
visible: true visible: true
color: root.colorScheme.background_norm color: root.colorScheme.background_norm
border.color: { border.color: {

8
internal/frontend/qml/Proton/TextField.qml
View File

@ -160,7 +160,7 @@ FocusScope {
Layout.fillHeight: true Layout.fillHeight: true
Layout.fillWidth: true Layout.fillWidth: true
radius: 4 radius: Style.input_radius
visible: true visible: true
color: root.colorScheme.background_norm color: root.colorScheme.background_norm
border.color: { border.color: {
@ -198,10 +198,10 @@ FocusScope {
Layout.fillWidth: true Layout.fillWidth: true
implicitWidth: implicitBackgroundWidth + leftInset + rightInset implicitWidth: implicitBackgroundWidth + leftInset + rightInset
|| Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding || Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding, contentHeight + topPadding + bottomPadding,
placeholder.implicitHeight + topPadding + bottomPadding) placeholder.implicitHeight + topPadding + bottomPadding)
topPadding: 8 topPadding: 8
bottomPadding: 8 bottomPadding: 8

4
internal/frontend/qml/Proton/Toggle.qml
View File

@ -39,7 +39,7 @@ Item {
implicitWidth: 40 implicitWidth: 40
implicitHeight: 24 implicitHeight: 24
radius: 20 radius: width/2
color: { color: {
if (root.loading) return "transparent" if (root.loading) return "transparent"
if (root._disabled) return root.colorScheme.background_strong if (root._disabled) return root.colorScheme.background_strong
@ -56,7 +56,7 @@ Item {
anchors.leftMargin: root.checked ? 16 : 0 anchors.leftMargin: root.checked ? 16 : 0
width: 24 width: 24
height: 24 height: 24
radius: 12 radius: width/2
color: { color: {
if (root.loading) return "transparent" if (root.loading) return "transparent"
if (root._disabled) return root.colorScheme.field_disabled if (root._disabled) return root.colorScheme.field_disabled

4
internal/frontend/qml/SetupGuide.qml
View File

@ -145,7 +145,7 @@ Item {
highlight: Rectangle { highlight: Rectangle {
color: root.colorScheme.interaction_default_active color: root.colorScheme.interaction_default_active
radius: 4 radius: ProtonStyle.context_item_radius
} }
delegate: Item { delegate: Item {
@ -220,7 +220,7 @@ Item {
highlight: Rectangle { highlight: Rectangle {
color: root.colorScheme.interaction_default_active color: root.colorScheme.interaction_default_active
radius: 4 radius: ProtonStyle.context_item_radius
} }
delegate: Item { delegate: Item {

4
internal/frontend/qml/StatusWindow.qml
View File

@ -67,7 +67,7 @@ Window {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: parent.height * 2 height: parent.height * 2
radius: 10 radius: ProtonStyle.dialog_radius
color: { color: {
if (!statusItem.activeNotification) { if (!statusItem.activeNotification) {
@ -232,7 +232,7 @@ Window {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: parent.height * 2 height: parent.height * 2
radius: 10 radius: ProtonStyle.dialog_radius
color: root.colorScheme.background_weak color: root.colorScheme.background_weak
} }

BIN
internal/frontend/qml/icons/img-welcome-dark.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 67 KiB

16
internal/frontend/qml/icons/img-welcome-dark.svg
View File

@ -7,8 +7,8 @@
version="1.1" version="1.1"
id="svg90" id="svg90"
sodipodi:docname="img-welcome-dark.svg" sodipodi:docname="img-welcome-dark.svg"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)" 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.png" 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-xdpi="400"
inkscape:export-ydpi="400" inkscape:export-ydpi="400"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
@ -27,15 +27,15 @@
inkscape:snap-page="true" inkscape:snap-page="true"
inkscape:zoom="4.3513514" inkscape:zoom="4.3513514"
inkscape:cx="132.02795" inkscape:cx="132.02795"
inkscape:cy="74.114907" inkscape:cy="37.459627"
inkscape:window-width="2556" inkscape:window-width="1276"
inkscape:window-height="1404" inkscape:window-height="1401"
inkscape:window-x="0" inkscape:window-x="1280"
inkscape:window-y="16" inkscape:window-y="18"
inkscape:window-maximized="1" inkscape:window-maximized="1"
inkscape:current-layer="svg90" /> inkscape:current-layer="svg90" />
<rect <rect
style="fill:#262a33;stroke-width:1.88976;stroke-linecap:round;stroke-linejoin:round;fill-opacity:1" style="fill:#1c1b24;stroke-width:1.88976;stroke-linecap:round;stroke-linejoin:round;fill-opacity:1"
id="rect931" id="rect931"
width="264" width="264"
height="148" height="148"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB