computed colors support

This commit is contained in:
Henry Jameson 2020-01-13 01:56:29 +02:00
parent 5881c13adc
commit 8d2f2866f6
6 changed files with 92 additions and 13 deletions

View File

@ -99,6 +99,10 @@ button {
&:active { &:active {
box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset; box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
box-shadow: var(--buttonPressedShadow); box-shadow: var(--buttonPressedShadow);
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg)
} }
&:disabled { &:disabled {

View File

@ -42,7 +42,7 @@ const v1OnlyNames = [
].map(_ => _ + 'ColorLocal') ].map(_ => _ + 'ColorLocal')
const colorConvert = (color) => { const colorConvert = (color) => {
if (color === 'transparent') { if (color.startsWith('--') || color === 'transparent') {
return color return color
} else { } else {
return hex2rgb(color) return hex2rgb(color)
@ -409,7 +409,9 @@ export default {
} }
keys.forEach(key => { keys.forEach(key => {
this[key + 'ColorLocal'] = rgb2hex(colors[key]) const color = colors[key]
const hex = rgb2hex(colors[key])
this[key + 'ColorLocal'] = hex === '#aN' ? color : hex
}) })
} }

View File

@ -347,6 +347,20 @@
:label="$t('settings.text')" :label="$t('settings.text')"
/> />
<ContrastRatio :contrast="previewContrast.btnText" /> <ContrastRatio :contrast="previewContrast.btnText" />
<h4>{{ $t('settings.style.advanced_colors.pressed') }}</h4>
<ColorInput
v-model="btnPressedColorLocal"
name="btnPressedColor"
:fallback="previewTheme.colors.btnPressed"
:label="$t('settings.background')"
/>
<ColorInput
v-model="btnPressedTextColorLocal"
name="btnPressedTextColor"
:fallback="previewTheme.colors.btnPressedText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.btnText" />
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.borders') }}</h4> <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
@ -433,7 +447,7 @@
<ColorInput <ColorInput
v-model="lightBgColorLocal" v-model="lightBgColorLocal"
name="lightBg" name="lightBg"
:label="$t('settings.style.advanced_colors.lightBg')" :label="$t('settings.background')"
:fallback="previewTheme.colors.lightBg" :fallback="previewTheme.colors.lightBg"
/> />
<ColorInput <ColorInput

View File

@ -433,7 +433,9 @@
"faint_text": "Faded text", "faint_text": "Faded text",
"underlay": "Underlay", "underlay": "Underlay",
"poll": "Poll graph", "poll": "Poll graph",
"icons": "Icons" "icons": "Icons",
"lightBg": "Highlighted elements",
"pressed": "Pressed"
}, },
"radii": { "radii": {
"_tab_label": "Roundness" "_tab_label": "Roundness"

View File

@ -144,8 +144,12 @@ export const generateColors = (themeData) => {
// TODO: hack to keep rest of the code from complaining // TODO: hack to keep rest of the code from complaining
value = '#FF00FF' value = '#FF00FF'
} }
if (!value || value.startsWith('--')) {
acc[k] = value
} else {
acc[k] = hex2rgb(value) acc[k] = hex2rgb(value)
} }
}
return acc return acc
}, {}) }, {})

View File

@ -40,12 +40,27 @@ export const DEFAULT_OPACITY = {
} }
export const SLOT_INHERITANCE = { export const SLOT_INHERITANCE = {
bg: null, bg: {
fg: null, depends: [],
text: null, priority: 1
},
fg: {
depends: [],
priority: 1
},
text: {
depends: [],
priority: 1
},
underlay: '#000000', underlay: '#000000',
link: '--accent', link: {
accent: '--link', depends: ['accent'],
priority: 1
},
accent: {
depends: ['link'],
priority: 1
},
faint: '--text', faint: '--text',
faintLink: '--link', faintLink: '--link',
@ -170,6 +185,26 @@ export const SLOT_INHERITANCE = {
textColor: true textColor: true
}, },
btnPressed: '--btn',
btnPressedText: {
depends: ['btnText'],
layer: 'btn',
variant: 'btnPressed',
textColor: true
},
btnPressedPanelText: {
depends: ['btnPanelText'],
layer: 'btnPanel',
variant: 'btnPressed',
textColor: true
},
btnPressedTopBarText: {
depends: ['btnTopBarText'],
layer: 'btnTopBar',
variant: 'btnPressed',
textColor: true
},
// Input fields // Input fields
input: '--fg', input: '--fg',
inputText: { inputText: {
@ -308,12 +343,30 @@ export const topoSort = (
return output return output
} }
export const SLOT_ORDERED = topoSort(SLOT_INHERITANCE) export const SLOT_ORDERED = topoSort(
Object.entries(SLOT_INHERITANCE)
.sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0))
.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
)
console.log(SLOT_ORDERED)
export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.reduce((acc, key) => { export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.reduce((acc, key) => {
const value = SLOT_INHERITANCE[key] const value = SLOT_INHERITANCE[key]
if (sourceColors[key]) { const sourceColor = sourceColors[key]
return { ...acc, [key]: { ...sourceColors[key] } } if (sourceColor) {
let targetColor = sourceColor
if (typeof sourceColor === 'string' && sourceColor.startsWith('--')) {
const [variable, modifier] = sourceColor.split(/,/g).map(str => str.trim())
const variableSlot = variable.substring(2)
targetColor = acc[variableSlot] || sourceColors[variableSlot]
if (modifier) {
console.log(targetColor, acc, variableSlot)
targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
}
console.log(targetColor, acc, variableSlot)
}
return { ...acc, [key]: { ...targetColor } }
} else if (typeof value === 'string' && value.startsWith('#')) { } else if (typeof value === 'string' && value.startsWith('#')) {
return { ...acc, [key]: convert(value).rgb } return { ...acc, [key]: convert(value).rgb }
} else { } else {