diff options
Diffstat (limited to 'src/components/style_switcher')
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 24 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 26 |
2 files changed, 38 insertions, 12 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 7f794608..8953dc49 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -39,6 +39,10 @@ export default { topBarLinkColorLocal: undefined, alertOpacityLocal: undefined, + alertErrorColorLocal: undefined, + + badgeOpacityLocal: undefined, + badgeNotificationColorLocal: undefined, borderColorLocal: undefined, borderOpacityLocal: undefined, @@ -102,6 +106,9 @@ export default { btn: this.btnColorLocal, btnText: this.btnTextColorLocal, + alertError: this.alertErrorColorLocal, + badgeNotification: this.badgeNotificationColorLocal, + faint: this.faintColorLocal, faintLink: this.faintLinkColorLocal, border: this.borderColorLocal, @@ -116,6 +123,8 @@ export default { btn: this.btnOpacityLocal, input: this.inputOpacityLocal, panel: this.panelOpacityLocal, + alert: this.alertOpacityLocal, + badge: this.badgeOpacityLocal, topBar: this.topBarOpacityLocal, border: this.borderOpacityLocal, faint: this.faintOpacityLocal @@ -167,6 +176,7 @@ export default { panelText: hex2rgb(colors.panelText), btnText: hex2rgb(colors.btnText), topBarText: hex2rgb(colors.topBarText), + inputText: hex2rgb(colors.inputText), link: hex2rgb(colors.link), topBarLink: hex2rgb(colors.topBarLink), @@ -181,7 +191,10 @@ export default { bg: hex2rgb(colors.bg), btn: hex2rgb(colors.btn), panel: hex2rgb(colors.panel), - topBar: hex2rgb(colors.topBar) + topBar: hex2rgb(colors.topBar), + input: hex2rgb(colors.input), + alertError: hex2rgb(colors.alertError), + badgeNotification: hex2rgb(colors.badgeNotification) } const ratios = { @@ -198,6 +211,10 @@ export default { btnText: getContrastRatio(worstCase(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText), + inputText: getContrastRatio(worstCase(bgs.input, opacity.input, fgs.inputText), fgs.inputText), + + badgeNotification: getContrastRatio(worstCase(bgs.badgeNotification, opacity.badge, fgs.text), fgs.text), + topBarText: getContrastRatio(worstCase(bgs.topBar, opacity.topBar, fgs.topBarText), fgs.topBarText), topBarLink: getContrastRatio(worstCase(bgs.topBar, opacity.topBar, fgs.topBarLink), fgs.topBarLink) } @@ -317,6 +334,10 @@ export default { this.faintColorLocal = undefined this.faintOpacityLocal = undefined this.faintLinkColorLocal = undefined + + this.alertErrorColorLocal = undefined + + this.badgeNotificationColorLocal = undefined }, /** @@ -348,6 +369,7 @@ export default { } const keys = new Set(version !== 1 ? Object.keys(colors) : []) + console.log(keys) if (version === 1) { // V1 ignores the rest this.clearV1() diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index cecd6bc0..f4b4e88f 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -74,21 +74,27 @@ <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/> <ContrastRatio :contrast="previewContrast.bgOrange"/> </div> - <div class="color-item wide"> - <h4>Alert opacity</h4> - <OpacityInput name="alertOpacity" v-model="alertOpacityLocal" fallback="previewTheme.opacity.alert || 1"/> - </div> </div> <h3>More customs!</h3> <div> <div class="color-item"> + <h4>Alerts</h4> + <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.error')" :fallback="previewTheme.colors.alertError"/> + <OpacityInput name="alertOpacity" v-model="alertOpacityLocal" :fallback="previewTheme.opacity.alert || 1"/> + </div> + <div class="color-item"> + <h4>Alerts</h4> + <ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.notification')" :fallback="previewTheme.colors.badgeNotification"/> + <ContrastRatio :contrast="previewContrast.badgeNotification"/> + <OpacityInput name="badgeOpacity" v-model="badgeOpacityLocal" :fallback="previewTheme.opacity.badge || 1"/> + </div> + <div class="color-item"> <h4>Panel header</h4> <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> @@ -99,10 +105,11 @@ <ContrastRatio :contrast="previewContrast.topBarLink"/> </div> <div class="color-item"> - <h4>Inputs</h4> + <h4>Text fields</h4> <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/> <OpacityInput name="inputOpacity" v-model="inputOpacityLocal" :fallback="previewTheme.opacity.input || 1"/> <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/> + <ContrastRatio :contrast="previewContrast.inputText"/> </div> <div class="color-item"> <h4>Buttons</h4> @@ -120,7 +127,8 @@ <h4>Faint text</h4> <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint || 1" :label="$t('settings.text')"/> <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.links')"/> - <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" fallback="previewTheme.opacity.faint"/> + <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.panel')"/> + <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" :fallback="previewTheme.opacity.faint || 0.5"/> </div> </div> </div> @@ -259,10 +267,6 @@ h4 { margin-top: 1em; } - - label { - color: var(--faint, $fallback--faint); - } } .radius-item { |