feat: introduce theming capability

This commit introduces the theming story discussed in #3.
Once this lands, we'll have a new namespace `StatusQ.Core.Theme` which
can be used as follows:

```qml
import StatusQ.Core.Theme

StatusLightTheme {}
StatusDarkTheme {}

Theme.palette.[SOME_THEME_PROP] // as spec'ed in #3
```

Closes #3
This commit is contained in:
Pascal Precht 2021-05-04 19:18:57 +02:00 committed by Pascal Precht
parent eb87aa4bcb
commit 608fdbdac8
43 changed files with 284 additions and 0 deletions

View File

@ -0,0 +1,65 @@
pragma Singleton
import QtQuick 2.13
QtObject {
property var colors: {
'black': '#000000',
'white': '#FFFFFF',
'blue': '#4360DF',
'blue2': '#2946C4',
'blue3': '#88B0FF',
'blue4': '#869EFF',
'blue5': '#AAC6FF',
'brown': '#8B3131',
'brown2': '#9B832F',
'brown3': '#AD4343',
'cyan': '#51D0F0',
'graphite': '#212121',
'graphite2': '#252525',
'graphite3': '#2C2C2C',
'graphite4': '#373737',
'graphite5': '#909090',
'green': '#4EBC60',
'green2': '#7CDA00',
'green3': '#60C370',
'green4': '#93DB33',
'grey': '#F0F2F5',
'grey2': '#F6F8FA',
'grey3': '#E9EDF1',
'grey4': '#EEF2F5',
'grey5': '#939BA1',
'moss': '#26A69A',
'moss2': '#10A88E',
'orange': '#FE8F59',
'orange2': '#FF9F0F',
'orange3': '#FFA67B',
'orange4': '#FE8F59',
'purple': '#887AF9',
'red': '#FF2D55',
'red2': '#FA6565',
'red3': '#FF5C7B',
'turquoise': '#0DA4C9',
'turquoise2': '#07BCE9',
'turquoise3': '#7BE5FF',
'turquoise4': '#0DA4C9',
'violet': '#D37EF4',
'yellow': '#FFCA0F',
'yellow2': '#EAD27B'
}
}

View File

@ -0,0 +1,64 @@
import QtQuick 2.13
ThemePalette {
property QtObject baseFont: FontLoader {
source: "../../../assets/fonts/Inter/Inter-Regular.otf"
}
property QtObject monoFont: FontLoader {
source: "../../../assets/fonts/InterStatus/InterStatus-Regular.otf"
}
baseColor1: getColor('graphite5')
baseColor2: getColor('graphite4')
baseColor3: getColor('graphite3')
baseColor4: getColor('graphite2')
baseColor5: getColor('graphite')
primaryColor1: getColor('blue3')
primaryColor2: getColor('blue4', 0.3)
primaryColor3: getColor('blue4', 0.2)
dangerColor1: getColor('red3')
dangerColor2: getColor('red3', 0.3)
dangerColor3: getColor('red3', 0.2)
successColor1: getColor('green3')
successColor2: getColor('green3', 0.2)
mentionColor1: getColor('turquoise3')
mentionColor2: getColor('turquoise4', 0.3)
mentionColor3: getColor('turquoise4', 0.2)
mentionColor4: getColor('turquoise4', 0.1)
pinColor1: getColor('orange3')
pinColor2: getColor('orange4', 0.2)
pinColor3: getColor('orange4', 0.1)
directColor1: getColor('white')
directColor2: getColor('white', 0.9)
directColor3: getColor('white', 0.8)
directColor4: getColor('white', 0.7)
directColor5: getColor('white', 0.4)
directColor6: getColor('white', 0.2)
directColor7: getColor('white', 0.1)
directColor8: getColor('white', 0.05)
indirectColor1: getColor('black')
indirectColor2: getColor('black', 0.7)
indirectColor3: getColor('black', 0.4)
miscColor1: getColor('blue5')
miscColor2: getColor('purple')
miscColor3: getColor('cyan')
miscColor4: getColor('violet')
miscColor5: getColor('red2')
miscColor6: getColor('orange')
miscColor7: getColor('yellow')
miscColor8: getColor('green4')
miscColor9: getColor('moss2')
miscColor10: getColor('brown3')
miscColor11: getColor('yellow2')
}

View File

@ -0,0 +1,64 @@
import QtQuick 2.13
ThemePalette {
property QtObject baseFont: FontLoader {
source: "../../../assets/fonts/Inter/Inter-Regular.otf"
}
property QtObject monoFont: FontLoader {
source: "../../../assets/fonts/InterStatus/InterStatus-Regular.otf"
}
baseColor1: getColor('grey5')
baseColor2: getColor('grey4')
baseColor3: getColor('grey3')
baseColor4: getColor('grey2')
baseColor5: getColor('grey')
primaryColor1: getColor('blue')
primaryColor2: getColor('blue', 0.2)
primaryColor3: getColor('blue', 0.1)
dangerColor1: getColor('red')
dangerColor2: getColor('red', 0.2)
dangerColor3: getColor('red', 0.1)
successColor1: getColor('green')
successColor2: getColor('green', 0.1)
mentionColor1: getColor('turquoise')
mentionColor2: getColor('turquoise2', 0.3)
mentionColor3: getColor('turquoise2', 0.2)
mentionColor4: getColor('turquoise2', 0.1)
pinColor1: getColor('orange')
pinColor2: getColor('orange2', 0.2)
pinColor3: getColor('orange2', 0.1)
directColor1: getColor('black')
directColor2: getColor('black', 0.9)
directColor3: getColor('black', 0.8)
directColor4: getColor('black', 0.7)
directColor5: getColor('black', 0.4)
directColor6: getColor('black', 0.3)
directColor7: getColor('black', 0.1)
directColor8: getColor('black', 0.05)
indirectColor1: getColor('white')
indirectColor2: getColor('white', 0.7)
indirectColor3: getColor('white', 0.4)
miscColor1: getColor('blue2')
miscColor2: getColor('purple')
miscColor3: getColor('cyan')
miscColor4: getColor('violet')
miscColor5: getColor('red2')
miscColor6: getColor('orange')
miscColor7: getColor('yellow')
miscColor8: getColor('green2')
miscColor9: getColor('moss')
miscColor10: getColor('brown')
miscColor11: getColor('brown2')
}

View File

@ -0,0 +1,14 @@
pragma Singleton
import QtQuick 2.13
QtObject {
id: appTheme
property ThemePalette palette: StatusLightTheme {}
function setTheme(theme) {
palette = theme
}
}

View File

@ -0,0 +1,71 @@
import QtQuick 2.13
QtObject {
id: theme
property QtObject baseFont
property QtObject monoFont
property color baseColor1
property color baseColor2
property color baseColor3
property color baseColor4
property color baseColor5
property color primaryColor1
property color primaryColor2
property color primaryColor3
property color dangerColor1
property color dangerColor2
property color dangerColor3
property color successColor1
property color successColor2
property color mentionColor1
property color mentionColor2
property color mentionColor3
property color mentionColor4
property color pinColor1
property color pinColor2
property color pinColor3
property color directColor1
property color directColor2
property color directColor3
property color directColor4
property color directColor5
property color directColor6
property color directColor7
property color directColor8
property color indirectColor1
property color indirectColor2
property color indirectColor3
property color miscColor1
property color miscColor2
property color miscColor3
property color miscColor4
property color miscColor5
property color miscColor6
property color miscColor7
property color miscColor8
property color miscColor9
property color miscColor10
property color miscColor11
function alphaColor(color, alpha) {
let actualColor = Qt.darker(color, 1)
actualColor.a = alpha
return actualColor
}
function getColor(name, alpha) {
return !!alpha ? alphaColor(StatusColors.colors[name], alpha) : StatusColors.colors[name]
}
}

View File

@ -0,0 +1,6 @@
singleton StatusColors 0.1 StatusColors.qml
ThemePalette 0.1 ThemePalette.qml
StatusLightTheme 0.1 StatusLightTheme.qml
StatusDarkTheme 0.1 StatusDarkTheme.qml
singleton Theme 0.1 Theme.qml

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.