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:
parent
eb87aa4bcb
commit
608fdbdac8
|
@ -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'
|
||||
}
|
||||
}
|
||||
|
|
@ -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')
|
||||
}
|
||||
|
|
@ -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')
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
pragma Singleton
|
||||
|
||||
import QtQuick 2.13
|
||||
|
||||
QtObject {
|
||||
id: appTheme
|
||||
property ThemePalette palette: StatusLightTheme {}
|
||||
|
||||
function setTheme(theme) {
|
||||
palette = theme
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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]
|
||||
}
|
||||
}
|
||||
|
|
@ -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.
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.
Loading…
Reference in New Issue