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 {
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);
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg)
}
&:disabled {

View file

@ -42,7 +42,7 @@ const v1OnlyNames = [
].map(_ => _ + 'ColorLocal')
const colorConvert = (color) => {
if (color === 'transparent') {
if (color.startsWith('--') || color === 'transparent') {
return color
} else {
return hex2rgb(color)
@ -409,7 +409,9 @@ export default {
}
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')"
/>
<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 class="color-item">
<h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
@ -433,7 +447,7 @@
<ColorInput
v-model="lightBgColorLocal"
name="lightBg"
:label="$t('settings.style.advanced_colors.lightBg')"
:label="$t('settings.background')"
:fallback="previewTheme.colors.lightBg"
/>
<ColorInput

View file

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

View file

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

View file

@ -40,12 +40,27 @@ export const DEFAULT_OPACITY = {
}
export const SLOT_INHERITANCE = {
bg: null,
fg: null,
text: null,
bg: {
depends: [],
priority: 1
},
fg: {
depends: [],
priority: 1
},
text: {
depends: [],
priority: 1
},
underlay: '#000000',
link: '--accent',
accent: '--link',
link: {
depends: ['accent'],
priority: 1
},
accent: {
depends: ['link'],
priority: 1
},
faint: '--text',
faintLink: '--link',
@ -170,6 +185,26 @@ export const SLOT_INHERITANCE = {
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: '--fg',
inputText: {
@ -308,12 +343,30 @@ export const topoSort = (
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) => {
const value = SLOT_INHERITANCE[key]
if (sourceColors[key]) {
return { ...acc, [key]: { ...sourceColors[key] } }
const sourceColor = 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('#')) {
return { ...acc, [key]: convert(value).rgb }
} else {