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 { &:disabled {
cursor: not-allowed; 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 { &.pressed {
@ -365,6 +368,26 @@ i[class*=icon-] {
height: 50px; height: 50px;
box-sizing: border-box; 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 { .logo {
display: flex; display: flex;
position: absolute; position: absolute;
@ -525,6 +548,25 @@ main-router {
align-self: stretch; 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 { a {
color: $fallback--link; color: $fallback--link;
color: var(--panelLink, $fallback--link) color: var(--panelLink, $fallback--link)

View file

@ -360,7 +360,21 @@
:fallback="previewTheme.colors.btnPressedText" :fallback="previewTheme.colors.btnPressedText"
:label="$t('settings.text')" :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>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.borders') }}</h4> <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>

View file

@ -36,7 +36,8 @@ export const DEFAULT_OPACITY = {
input: 0.5, input: 0.5,
faint: 0.5, faint: 0.5,
underlay: 0.15, underlay: 0.15,
poll: 1 poll: 1,
topBar: 1
} }
export const SLOT_INHERITANCE = { export const SLOT_INHERITANCE = {
@ -222,7 +223,8 @@ export const SLOT_INHERITANCE = {
btn: '--fg', btn: '--fg',
btnText: { btnText: {
depends: ['fgText'], depends: ['fgText'],
layer: 'btn' layer: 'btn',
textColor: true
}, },
btnPanelText: { btnPanelText: {
depends: ['panelText'], depends: ['panelText'],
@ -257,6 +259,32 @@ export const SLOT_INHERITANCE = {
textColor: true 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 fields
input: '--fg', input: '--fg',
inputText: { inputText: {
@ -329,7 +357,10 @@ export const getLayers = (layer, variant = layer, colors, opacity) => {
currentLayer === layer currentLayer === layer
? colors[variant] ? colors[variant]
: colors[currentLayer], : 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 [key]: contrastRatio(bg).rgb
} }
} else { } 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 { return {
...acc, ...acc,
[key]: getTextColor( [key]: getTextColor(
bg, bg,
{ ...acc[deps[0]] }, { ...color },
value.textColor === 'preserve' value.textColor === 'preserve'
) )
} }