forked from AkkomaGang/akkoma-fe
initial contrast display support
This commit is contained in:
Henry Jameson
parent
4d77b0c86b
commit
87e98772b0
4 changed files with 141 additions and 5 deletions
64
src/components/contrast_ratio/contrast_ratio.vue
Normal file
64
src/components/contrast_ratio/contrast_ratio.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div class="contrast-ratio">
|
||||
<span class="label">
|
||||
Contrast:
|
||||
</span>
|
||||
<span>
|
||||
<span>
|
||||
{{contrast.text}}
|
||||
</span>
|
||||
<span class="rating">
|
||||
<span v-if="contrast.aaa">
|
||||
AAA
|
||||
</span>
|
||||
<span v-if="!contrast.aaa && contrast.aa">
|
||||
AA
|
||||
</span>
|
||||
<span v-if="!contrast.aaa && !contrast.aa">
|
||||
bad
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span v-if="large">
|
||||
<span>
|
||||
18pt+:
|
||||
</span>
|
||||
<span class="rating">
|
||||
<span v-if="contrast.aaa">
|
||||
AAA
|
||||
</span>
|
||||
<span v-if="!contrast.aaa && contrast.aa">
|
||||
AA
|
||||
</span>
|
||||
<span v-if="!contrast.aaa && !contrast.aa">
|
||||
bad
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'large', 'contrast'
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.contrast-ratio {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
|
||||
.label {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.rating {
|
||||
display: inline-block;
|
||||
min-width: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { rgb2hex } from '../../services/color_convert/color_convert.js'
|
||||
import { rgb2hex, hex2rgb, getContrastRatio } from '../../services/color_convert/color_convert.js'
|
||||
import ColorInput from '../color_input/color_input.vue'
|
||||
import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
|
||||
import OpacityInput from '../opacity_input/opacity_input.vue'
|
||||
import StyleSetter from '../../services/style_setter/style_setter.js'
|
||||
|
||||
|
|
@ -127,7 +128,7 @@ export default {
|
|||
avatarAltRadius: this.avatarAltRadiusLocal,
|
||||
tooltipRadius: this.tooltipRadiusLocal,
|
||||
attachmentRadius: this.attachmentRadiusLocal
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
preview () {
|
||||
|
|
@ -143,9 +144,36 @@ export default {
|
|||
}
|
||||
},
|
||||
previewTheme () {
|
||||
if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {} }
|
||||
if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {}, contrast: {} }
|
||||
return this.preview.theme
|
||||
},
|
||||
previewContrast () {
|
||||
if (!this.previewTheme.colors) return {}
|
||||
const colors = this.previewTheme.colors
|
||||
const hints = (ratio) => ({
|
||||
text: ratio.toPrecision(3) + ':1',
|
||||
// AA level, AAA level
|
||||
aa: ratio >= 4.5,
|
||||
aaa: ratio >= 7,
|
||||
// same but for 18pt+ texts
|
||||
laa: ratio >= 3,
|
||||
laaa: ratio >= 4.5
|
||||
})
|
||||
|
||||
const ratios = {
|
||||
bgText: getContrastRatio(hex2rgb(colors.bg), hex2rgb(colors.text)),
|
||||
bgLink: getContrastRatio(hex2rgb(colors.bg), hex2rgb(colors.link)),
|
||||
|
||||
panelText: getContrastRatio(hex2rgb(colors.panel), hex2rgb(colors.panelText)),
|
||||
|
||||
btnText: getContrastRatio(hex2rgb(colors.btn), hex2rgb(colors.btnText)),
|
||||
|
||||
topBarText: getContrastRatio(hex2rgb(colors.topBar), hex2rgb(colors.topBarText)),
|
||||
topBarLink: getContrastRatio(hex2rgb(colors.topBar), hex2rgb(colors.topBarLink)),
|
||||
}
|
||||
|
||||
return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
|
||||
},
|
||||
previewRules () {
|
||||
if (!this.preview.colorRules) return ''
|
||||
return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';')
|
||||
|
|
@ -153,7 +181,8 @@ export default {
|
|||
},
|
||||
components: {
|
||||
ColorInput,
|
||||
OpacityInput
|
||||
OpacityInput,
|
||||
ContrastRatio
|
||||
},
|
||||
methods: {
|
||||
exportCurrentTheme () {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,9 @@
|
|||
<ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/>
|
||||
<ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
|
||||
<ContrastRatio :contrast="previewContrast.bgText"/>
|
||||
<ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
|
||||
<ContrastRatio :contrast="previewContrast.bgLink"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
|
||||
|
|
@ -81,13 +83,16 @@
|
|||
<ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
|
||||
<ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
|
||||
<ContrastRatio :contrast="previewContrast.panelText" large="1"/>
|
||||
<ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.faint')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>Top bar</h4>
|
||||
<ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
|
||||
<ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
|
||||
<ContrastRatio :contrast="previewContrast.topBarText"/>
|
||||
<ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
|
||||
<ContrastRatio :contrast="previewContrast.topBarLink"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>Inputs</h4>
|
||||
|
|
@ -100,6 +105,7 @@
|
|||
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" :fallback="previewTheme.opacity.btn || 1"/>
|
||||
<ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
|
||||
<ContrastRatio :contrast="previewContrast.btnText"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>Borders</h4>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,42 @@ const rgb2hex = (r, g, b) => {
|
|||
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
|
||||
}
|
||||
|
||||
// https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
|
||||
// https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
|
||||
// https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation
|
||||
const c2linear = (b) => {
|
||||
// W3C gives 0.03928 while wikipedia states 0.04045
|
||||
// what those magical numbers mean - I don't know.
|
||||
// something about gamma-correction, i suppose.
|
||||
// Sticking with W3C example.
|
||||
const c = b / 255
|
||||
if (c < 0.03928) {
|
||||
return c / 12.92
|
||||
} else {
|
||||
return Math.pow((c + 0.055) / 1.055, 2.4)
|
||||
}
|
||||
}
|
||||
|
||||
const srgbToLinear = (srgb) => {
|
||||
return 'rgb'.split('').reduce((acc, c) => { acc[c] = c2linear(srgb[c]); return acc }, {})
|
||||
}
|
||||
|
||||
// https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
|
||||
// https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
|
||||
const relativeLuminance = (srgb) => {
|
||||
const {r, g, b} = srgbToLinear(srgb)
|
||||
return 0.2126 * r + 0.7152 * g + 0.0722 * b
|
||||
}
|
||||
|
||||
// https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
|
||||
const getContrastRatio = (a, b) => {
|
||||
const la = relativeLuminance(a)
|
||||
const lb = relativeLuminance(b)
|
||||
const [l1, l2] = la > lb ? [la, lb] : [lb, la]
|
||||
|
||||
return (l1 + 0.05) / (l2 + 0.05)
|
||||
}
|
||||
|
||||
const hex2rgb = (hex) => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
||||
return result ? {
|
||||
|
|
@ -47,5 +83,6 @@ export {
|
|||
rgb2hex,
|
||||
hex2rgb,
|
||||
mixrgb,
|
||||
rgbstr2hex
|
||||
rgbstr2hex,
|
||||
getContrastRatio
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue