buttonPressed & buttonDisabled slots

This commit is contained in:
Henry Jameson 2020-01-13 21:30:55 +02:00
parent 8a7f3fc16a
commit 4b8e0f0afa
3 changed files with 100 additions and 6 deletions

View File

@ -107,7 +107,10 @@ button {
&:disabled {
cursor: not-allowed;
opacity: 0.5;
color: $fallback--text;
color: var(--btnDisabledText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnDisabled, $fallback--fg)
}
&.pressed {
@ -365,6 +368,26 @@ i[class*=icon-] {
height: 50px;
box-sizing: border-box;
button {
&, i[class*=icon-] {
color: $fallback--text;
color: var(--btnTopBarText, $fallback--text);
}
&:active {
background-color: $fallback--fg;
background-color: var(--btnTopBarPressed, $fallback--fg);
color: $fallback--text;
color: var(--btnTopBarPressedText, $fallback--text);
}
&:disabled {
color: $fallback--text;
color: var(--btnTopBarDisabledText, $fallback--text);
}
}
.logo {
display: flex;
position: absolute;
@ -525,6 +548,25 @@ main-router {
align-self: stretch;
}
button {
&, i[class*=icon-] {
color: $fallback--text;
color: var(--btnPanelText, $fallback--text);
}
&:active {
background-color: $fallback--fg;
background-color: var(--btnPanelPressed, $fallback--fg);
color: $fallback--text;
color: var(--btnPanelPressedText, $fallback--text);
}
&:disabled {
color: $fallback--text;
color: var(--btnPanelDisabledText, $fallback--text);
}
}
a {
color: $fallback--link;
color: var(--panelLink, $fallback--link)

View File

@ -360,7 +360,21 @@
:fallback="previewTheme.colors.btnPressedText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.btnText" />
<ContrastRatio :contrast="previewContrast.btnPressedText" />
<h4>{{ $t('settings.style.advanced_colors.disabled') }}</h4>
<ColorInput
v-model="btnDisabledColorLocal"
name="btnDisabledColor"
:fallback="previewTheme.colors.btnDisabled"
:label="$t('settings.background')"
/>
<ColorInput
v-model="btnDisabledTextColorLocal"
name="btnDisabledTextColor"
:fallback="previewTheme.colors.btnDisabledText"
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.btnDisabledText" />
</div>
<div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>

View File

@ -36,7 +36,8 @@ export const DEFAULT_OPACITY = {
input: 0.5,
faint: 0.5,
underlay: 0.15,
poll: 1
poll: 1,
topBar: 1
}
export const SLOT_INHERITANCE = {
@ -222,7 +223,8 @@ export const SLOT_INHERITANCE = {
btn: '--fg',
btnText: {
depends: ['fgText'],
layer: 'btn'
layer: 'btn',
textColor: true
},
btnPanelText: {
depends: ['panelText'],
@ -257,6 +259,32 @@ export const SLOT_INHERITANCE = {
textColor: true
},
btnDisabled: {
depends: ['btn', 'bg'],
color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)
},
btnDisabledText: {
depends: ['btnText'],
layer: 'btn',
variant: 'btnDisabled',
textColor: true,
color: (mod, text) => brightness(mod * -60, text).rgb
},
btnDisabledPanelText: {
depends: ['btnPanelText'],
layer: 'btnPanel',
variant: 'btnDisabled',
textColor: true,
color: (mod, text) => brightness(mod * -60, text).rgb
},
btnDisabledTopBarText: {
depends: ['btnTopBarText'],
layer: 'btnTopBar',
variant: 'btnDisabled',
textColor: true,
color: (mod, text) => brightness(mod * -60, text).rgb
},
// Input fields
input: '--fg',
inputText: {
@ -329,7 +357,10 @@ export const getLayers = (layer, variant = layer, colors, opacity) => {
currentLayer === layer
? colors[variant]
: colors[currentLayer],
opacity[currentLayer]
// TODO: Remove this hack when opacities/layers system is improved
currentLayer.startsWith('btn')
? opacity.btn
: opacity[currentLayer]
]))
}
@ -443,11 +474,18 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
[key]: contrastRatio(bg).rgb
}
} else {
let color = { ...acc[deps[0]] }
if (value.color) {
const isLightOnDark = convert(bg).hsl.l < convert(color).hsl.l
const mod = isLightOnDark ? 1 : -1
color = value.color(mod, ...deps.map((dep) => ({ ...acc[dep] })))
}
return {
...acc,
[key]: getTextColor(
bg,
{ ...acc[deps[0]] },
{ ...color },
value.textColor === 'preserve'
)
}