diff options
| author | Henry Jameson <me@hjkos.com> | 2018-10-21 15:25:21 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2018-10-21 15:25:21 +0300 |
| commit | 7b657fcccd3524aba552cab4ee1005057fd83d41 (patch) | |
| tree | a7fc8d7d3d8d946a6aa8b51890dfadd6faf4562c | |
| parent | 4b7b7d9905b965c225fd42fb68682b9602254c82 (diff) | |
added contrasts for rgbo
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 20 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 4 |
2 files changed, 18 insertions, 6 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index d4381202..7f794608 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -128,7 +128,7 @@ export default { avatarAltRadius: this.avatarAltRadiusLocal, tooltipRadius: this.tooltipRadiusLocal, attachmentRadius: this.attachmentRadiusLocal - }, + } } }, preview () { @@ -170,6 +170,11 @@ export default { link: hex2rgb(colors.link), topBarLink: hex2rgb(colors.topBarLink), + + red: hex2rgb(colors.cRed), + green: hex2rgb(colors.cGreen), + blue: hex2rgb(colors.cBlue), + orange: hex2rgb(colors.cOrange) } const bgs = { @@ -182,8 +187,11 @@ export default { const ratios = { bgText: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.text), fgs.text), bgLink: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.link), fgs.link), + bgRed: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.red), fgs.red), + bgGreen: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.green), fgs.green), + bgBlue: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.blue), fgs.blue), + bgOrange: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.orange), fgs.orange), - // User Profile tintText: getContrastRatio(worstCase(bgs.bg, 0.5, fgs.panelText), fgs.text), panelText: getContrastRatio(worstCase(bgs.panel, opacity.panel, fgs.panelText), fgs.panelText), @@ -378,10 +386,10 @@ export default { this.fgColorLocal = this.selected[2] this.textColorLocal = this.selected[3] this.linkColorLocal = this.selected[4] - this.redColorLocal = this.selected[5] - this.greenColorLocal = this.selected[6] - this.blueColorLocal = this.selected[7] - this.orangeColorLocal = this.selected[8] + this.cRedColorLocal = this.selected[5] + this.cGreenColorLocal = this.selected[6] + this.cBlueColorLocal = this.selected[7] + this.cOrangeColorLocal = this.selected[8] } } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 4235d65c..cecd6bc0 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -64,11 +64,15 @@ </div> <div class="color-item"> <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/> + <ContrastRatio :contrast="previewContrast.bgRed"/> <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/> + <ContrastRatio :contrast="previewContrast.bgBlue"/> </div> <div class="color-item"> <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/> + <ContrastRatio :contrast="previewContrast.bgGreen"/> <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/> + <ContrastRatio :contrast="previewContrast.bgOrange"/> </div> <div class="color-item wide"> <h4>Alert opacity</h4> |