Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VPN-6213 part 2 - Pull colors into one file #10014

Merged
merged 4 commits into from
Nov 4, 2024
Merged

VPN-6213 part 2 - Pull colors into one file #10014

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5b7a455
VPN-6213 part 2 - move colors to one file and restructure
mcleinman Nov 1, 2024
aea1a66
remove duplicate color hashes
mcleinman Nov 4, 2024
b575479
remove duplicate named colors
mcleinman Nov 4, 2024
924238c
fix missing property warnings in logs
mcleinman Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions nebula/ui/components/MZAlert.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,31 +80,31 @@ Rectangle {
name: stateNames.info
PropertyChanges {
target: focusIndicators
colorScheme: MZTheme.theme.blueButton
colorScheme: MZTheme.colors.blueButton
}

PropertyChanges {
target: style;
alertColor: MZTheme.theme.blue
alertHoverColor: MZTheme.theme.blueHovered
alertClickColor: MZTheme.theme.bluePressed
fontcolor: MZTheme.colors.white
alertColor: MZTheme.colors.blue
alertHoverColor: MZTheme.colors.blueHovered
alertClickColor: MZTheme.colors.bluePressed
fontColor: MZTheme.colors.white
closeIcon: whiteCloseIcon
}
},
State{
name: stateNames.success
PropertyChanges {
target: focusIndicators
colorScheme: MZTheme.theme.greenAlert
colorScheme: MZTheme.colors.greenAlert
}

PropertyChanges {
target: style;
alertColor: MZTheme.theme.greenAlert.defaultColor
alertHoverColor: MZTheme.theme.greenAlert.buttonHovered
alertClickColor: MZTheme.theme.greenAlert.buttonPressed
fontColor: MZTheme.theme.fontColorDark
alertColor: MZTheme.colors.greenAlert.defaultColor
alertHoverColor: MZTheme.colors.greenAlert.buttonHovered
alertClickColor: MZTheme.colors.greenAlert.buttonPressed
fontColor: MZTheme.colors.fontColorDark
closeIcon: darkCloseIcon
}
},
Expand All @@ -113,15 +113,15 @@ Rectangle {

PropertyChanges {
target: focusIndicators
colorScheme: MZTheme.theme.redButton
colorScheme: MZTheme.colors.redButton
}

PropertyChanges {
target: style;
alertColor: MZTheme.theme.red
alertHoverColor: MZTheme.theme.redHovered
alertClickColor: MZTheme.theme.redPressed
fontcolor: MZTheme.colors.white
alertColor: MZTheme.colors.red
alertHoverColor: MZTheme.colors.redHovered
alertClickColor: MZTheme.colors.redPressed
fontColor: MZTheme.colors.white
closeIcon: whiteCloseIcon
}
},
Expand All @@ -134,10 +134,10 @@ Rectangle {

PropertyChanges {
target: style
alertColor: MZTheme.theme.orange
alertHoverColor: MZTheme.theme.orangeHovered
alertClickColor: MZTheme.theme.orangePressed
fontColor: MZTheme.theme.fontColorDark
alertColor: MZTheme.colors.orange
alertHoverColor: MZTheme.colors.orangeHovered
alertClickColor: MZTheme.colors.orangePressed
fontColor: MZTheme.colors.fontColorDark
closeIcon: darkCloseIcon
}
}
Expand Down Expand Up @@ -183,7 +183,7 @@ Rectangle {
Rectangle {
id: labelWrapper
height: label.paintedHeight + MZTheme.theme.windowMargin
color: MZTheme.theme.transparent
color: MZTheme.colors.transparent
anchors.left: alertAction.left
width: alertAction.width - MZTheme.theme.rowHeight
anchors.verticalCenter: parent.verticalCenter
Expand Down Expand Up @@ -306,16 +306,16 @@ Rectangle {
id: focusIndicators
anchors.fill: closeButton.activeFocus ? closeButton : alertAction
anchors.margins: -3
border.color: colorScheme ? colorScheme.focusOutline : MZTheme.theme.transparent
border.color: colorScheme ? colorScheme.focusOutline : MZTheme.colors.transparent
border.width: 3
visible: closeButton.activeFocus || alertAction.activeFocus
color: MZTheme.theme.transparent
color: MZTheme.colors.transparent
radius: MZTheme.theme.cornerRadius + (anchors.margins * -1)

Rectangle {
color: MZTheme.theme.transparent
color: MZTheme.colors.transparent
border.width: 2
border.color: parent.colorScheme ? parent.colorScheme.focusBorder : MZTheme.theme.transparent
border.color: parent.colorScheme ? parent.colorScheme.focusBorder : MZTheme.colors.transparent
radius: MZTheme.theme.cornerRadius
anchors.fill: parent
anchors.margins: 3
Expand Down
2 changes: 1 addition & 1 deletion nebula/ui/components/MZBoldInterLabel.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Text {
font.family: MZTheme.theme.fontInterSemiBoldFamily
lineHeightMode: Text.FixedHeight
lineHeight: MZTheme.theme.controllerInterLineHeight
color: MZTheme.theme.fontColorDark
color: MZTheme.colors.fontColorDark
wrapMode: Text.Wrap
horizontalAlignment: Qt.AlignLeft

Expand Down
2 changes: 1 addition & 1 deletion nebula/ui/components/MZBoldLabel.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Mozilla.Shared 1.0
Label {
font.pixelSize: MZTheme.theme.fontSize
font.family: MZTheme.theme.fontBoldFamily
color: MZTheme.theme.fontColorDark
color: MZTheme.colors.fontColorDark
horizontalAlignment: Qt.AlignLeft

Accessible.role: Accessible.StaticText
Expand Down
4 changes: 2 additions & 2 deletions nebula/ui/components/MZBottomSheet.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ Loader {
background: Rectangle {

radius: 8
color: MZTheme.theme.bgColor
color: MZTheme.colors.bgColor

Rectangle {
color: parent.color
Expand All @@ -79,7 +79,7 @@ Loader {
}

Overlay.modal: Rectangle {
color: MZTheme.theme.overlayBackground
color: MZTheme.colors.overlayBackground
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions nebula/ui/components/MZButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import QtQuick.Layouts 1.14
import Mozilla.Shared 1.0

MZButtonBase {
property var colorScheme: MZTheme.theme.blueButton
property var colorScheme: MZTheme.colors.blueButton
property int fontSize: MZTheme.theme.fontSize
property alias label: label

Expand Down Expand Up @@ -50,7 +50,7 @@ MZButtonBase {
contentItem: Label {
id: label

color: MZTheme.theme.white
color: MZTheme.colors.white
text: button.text
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
Expand Down
2 changes: 1 addition & 1 deletion nebula/ui/components/MZButtonBase.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ RoundButton {
}

background: Rectangle {
color: MZTheme.theme.transparent
color: MZTheme.colors.transparent
}

}
2 changes: 1 addition & 1 deletion nebula/ui/components/MZButtonLoader.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Rectangle {
anchors.margins: -1
radius: MZTheme.theme.cornerRadius
opacity: 0
color: MZTheme.theme.transparent
color: MZTheme.colors.transparent

state: "inactive"

Expand Down
4 changes: 2 additions & 2 deletions nebula/ui/components/MZCallout.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ RowLayout {
Rectangle {
Layout.preferredHeight: MZTheme.theme.iconSize * 1.5
Layout.preferredWidth: MZTheme.theme.iconSize * 1.5
color: MZTheme.theme.transparent
color: MZTheme.colors.transparent

MZIcon {
id: img
Expand All @@ -35,7 +35,7 @@ RowLayout {

MZTextBlock {
id: callout
color: MZTheme.theme.fontColorDark
color: MZTheme.colors.fontColorDark
Layout.fillWidth: true
font.pixelSize: MZTheme.theme.fontSize
verticalAlignment: Text.AlignVCenter
Expand Down
2 changes: 1 addition & 1 deletion nebula/ui/components/MZCancelButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@ import components 0.1
MZLinkButton {
labelText: MZI18n.InAppSupportWorkflowSupportSecondaryActionText // "Cancel"
fontName: MZTheme.theme.fontBoldFamily
linkColor: MZTheme.theme.redLinkButton
linkColor: MZTheme.colors.redLinkButton
}
2 changes: 1 addition & 1 deletion nebula/ui/components/MZCard.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ MZButtonBase {
}

MZUIStates {
colorScheme: MZTheme.theme.card
colorScheme: MZTheme.colors.card
radius: parent.radius
}

Expand Down
12 changes: 6 additions & 6 deletions nebula/ui/components/MZCheckBox.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ CheckBox {

PropertyChanges {
target: checkBoxIndicator
border.color: checkBox.checked || checkBox.activeFocus ? MZTheme.theme.blue : MZTheme.theme.fontColor
border.color: checkBox.checked || checkBox.activeFocus ? MZTheme.colors.blue : MZTheme.colors.fontColor
}

},
Expand All @@ -65,15 +65,15 @@ CheckBox {

PropertyChanges {
target: checkBoxIndicator
border.color: checkBox.checked ? MZTheme.theme.bluePressed : MZTheme.theme.fontColorDark
border.color: checkBox.checked ? MZTheme.colors.bluePressed : MZTheme.colors.fontColorDark
}
},
State {
name: uiState.stateHovered

PropertyChanges {
target: checkBoxIndicator
border.color: if(checkBox.enabled) checkBox.checked || checkBox.activeFocus ? MZTheme.theme.blueHovered : MZTheme.theme.fontColorDark
border.color: if(checkBox.enabled) checkBox.checked || checkBox.activeFocus ? MZTheme.colors.blueHovered : MZTheme.colors.fontColorDark
}

}
Expand Down Expand Up @@ -103,8 +103,8 @@ CheckBox {

height: MZTheme.theme.checkBoxHeightWidth
width: MZTheme.theme.checkBoxHeightWidth
color: MZTheme.theme.bgColor
border.color: checkBox.checked ? MZTheme.theme.blue : MZTheme.theme.fontColor
color: MZTheme.colors.bgColor
border.color: checkBox.checked ? MZTheme.colors.blue : MZTheme.colors.fontColor
border.width: 2
radius: MZTheme.theme.cornerRadius
antialiasing: true
Expand All @@ -114,7 +114,7 @@ CheckBox {
visible: true
anchors.margins: -3
focusedComponent: checkBox
focusColorScheme: MZTheme.theme.blueButton
focusColorScheme: MZTheme.colors.blueButton
}

Behavior on border.color {
Expand Down
2 changes: 1 addition & 1 deletion nebula/ui/components/MZCheckBoxRow.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ RowLayout {
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
Layout.fillWidth: true
text: labelText
color: MZTheme.theme.fontColorDark
color: MZTheme.colors.fontColorDark
horizontalAlignment: Text.AlignLeft
visible: !!labelText.length

Expand Down
6 changes: 3 additions & 3 deletions nebula/ui/components/MZClickableRow.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ MZButtonBase {

property bool rowShouldBeDisabled: false
property string accessibleName: ""
property var backgroundColor: MZTheme.theme.iconButtonLightBackground
property var backgroundColor: MZTheme.colors.iconButtonLightBackground

property var handleMouseClick: function() { mainRow.clicked(); }
property bool canGrowVertical: false
Expand Down Expand Up @@ -47,8 +47,8 @@ MZButtonBase {
anchors.top: mainRow.top
radius: MZTheme.theme.cornerRadius
border.width: MZTheme.theme.focusBorderWidth
border.color: MZTheme.theme.transparent
color: MZTheme.theme.transparent
border.color: MZTheme.colors.transparent
color: MZTheme.colors.transparent
opacity: rowVisualStates.state === MZTheme.theme.uiState.stateFocused
? 1
: 0
Expand Down
6 changes: 3 additions & 3 deletions nebula/ui/components/MZComposerView.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ ColumnLayout {

text: loader.composerBlock.text
font.pixelSize: MZTheme.theme.fontSizeSmall
color: MZTheme.theme.fontColor
color: MZTheme.colors.fontColor
horizontalAlignment: Text.AlignLeft
}
}
Expand All @@ -112,7 +112,7 @@ ColumnLayout {
text: `<${listType} style='margin-left: -24px;-qt-list-indent:1;'>%1</${listType}>`.arg(tagsList.join(""))
textFormat: Text.RichText
font.pixelSize: MZTheme.theme.fontSizeSmall
color: MZTheme.theme.fontColor
color: MZTheme.colors.fontColor
horizontalAlignment: Text.AlignLeft
Accessible.name: tagsList.join(".\n").replace(repeater.indentTagRegex, "")
lineHeight: 20
Expand All @@ -128,7 +128,7 @@ ColumnLayout {

implicitHeight: MZTheme.theme.rowHeight
text: loader.composerBlock.text
colorScheme: loader.composerBlock.style === MZComposerBlockButton.Primary ? MZTheme.theme.blueButton : MZTheme.theme.redButton
colorScheme: loader.composerBlock.style === MZComposerBlockButton.Primary ? MZTheme.colors.blueButton : MZTheme.colors.redButton

onClicked: loader.composerBlock.click()
}
Expand Down
1 change: 1 addition & 0 deletions nebula/ui/components/MZDropShadowWithStates.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

import QtQuick 2.0
import Mozilla.VPN 1.0
import Mozilla.Shared 1.0

import compat 0.1

Expand Down
2 changes: 1 addition & 1 deletion nebula/ui/components/MZExternalLinkListItem.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ MZClickableRow {
property string iconSource: "qrc:/nebula/resources/externalLink.svg"
property alias iconMirror: icon.mirror

backgroundColor: MZTheme.theme.clickableRowBlue
backgroundColor: MZTheme.colors.clickableRowBlue

RowLayout {
anchors.fill: parent
Expand Down
2 changes: 1 addition & 1 deletion nebula/ui/components/MZFlickable.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ Flickable {
anchors.rightMargin: Qt.platform.os === "osx" ? 2 : 0

background: Rectangle {
color: MZTheme.theme.transparent
color: MZTheme.colors.transparent
anchors.fill: parent
}

Expand Down
2 changes: 1 addition & 1 deletion nebula/ui/components/MZFocusBorder.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Rectangle {

id: focusInnerBorder

color: MZTheme.theme.transparent
color: MZTheme.colors.transparent
anchors.fill: parent
radius: parent.radius
border.width: MZTheme.theme.focusBorderWidth
Expand Down
2 changes: 1 addition & 1 deletion nebula/ui/components/MZFocusOutline.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Mozilla.Shared 1.0

Rectangle {
property variant focusedComponent
property var focusColorScheme: MZTheme.theme.blueButton
property var focusColorScheme: MZTheme.colors.blueButton
property real setMargins: -3

color: focusColorScheme.focusOutline
Expand Down
2 changes: 1 addition & 1 deletion nebula/ui/components/MZGreyLink.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@ import Mozilla.Shared 1.0
MZLinkButton {
fontSize: MZTheme.theme.fontSizeSmallest
Layout.preferredHeight: 18
linkColor: MZTheme.theme.greyLink
linkColor: MZTheme.colors.greyLink
}
2 changes: 1 addition & 1 deletion nebula/ui/components/MZHeaderLink.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@ MZLinkButton {
rightMargin: MZTheme.theme.listSpacing * 1.5
}
horizontalPadding: MZTheme.theme.listSpacing * 0.5
linkColor: isLightTheme ? MZTheme.theme.blueButton : MZTheme.theme.whiteButton
linkColor: isLightTheme ? MZTheme.colors.blueButton : MZTheme.colors.whiteButton
width: contentItem.implicitWidth + leftPadding + rightPadding
}
2 changes: 1 addition & 1 deletion nebula/ui/components/MZHeadline.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Text {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
wrapMode: Text.WordWrap
color: MZTheme.theme.fontColorDark
color: MZTheme.colors.fontColorDark
font.family: MZTheme.theme.fontFamily
font.pixelSize: MZTheme.theme.fontSizeLarge
lineHeightMode: Text.FixedHeight
Expand Down
2 changes: 1 addition & 1 deletion nebula/ui/components/MZHelpSheet.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ MZBottomSheet {

text: loader.composerBlock.text
font.pixelSize: MZTheme.theme.fontSizeSmall
color: MZTheme.theme.fontColor
color: MZTheme.colors.fontColor
lineHeight: 21
horizontalAlignment: Text.AlignLeft
}
Expand Down
Loading
Loading