aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/contrast_ratio/contrast_ratio.vue64
-rw-r--r--src/components/style_switcher/style_switcher.js37
-rw-r--r--src/components/style_switcher/style_switcher.vue6
3 files changed, 103 insertions, 4 deletions
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
new file mode 100644
index 00000000..6c4a59b6
--- /dev/null
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -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>
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index c419a9ce..27efa230 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -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 () {
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 1b00603c..4235d65c 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -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>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 12:36:19 +0000