aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.scss4
-rw-r--r--src/_variables.scss2
-rw-r--r--src/components/contrast_ratio/contrast_ratio.vue50
-rw-r--r--src/components/notifications/notifications.scss8
-rw-r--r--src/components/opacity_input/opacity_input.vue10
-rw-r--r--src/components/style_switcher/style_switcher.js24
-rw-r--r--src/components/style_switcher/style_switcher.vue26
-rw-r--r--src/services/color_convert/color_convert.js16
-rw-r--r--src/services/style_setter/style_setter.js6
9 files changed, 74 insertions, 72 deletions
diff --git a/src/App.scss b/src/App.scss
index c91b6a61..0a2ff5cc 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -479,8 +479,8 @@ nav {
line-height: 28px;
&.error {
- background-color: $fallback--cAlertRed;
- background-color: var(--cAlertRed, $fallback--cAlertRed);
+ background-color: $fallback--alertError;
+ background-color: var(--alertError, $fallback--alertError);
}
}
diff --git a/src/_variables.scss b/src/_variables.scss
index 0f73e929..d0d91efe 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -16,7 +16,7 @@ $fallback--cBlue: #0095ff;
$fallback--cGreen: #0fa00f;
$fallback--cOrange: orange;
-$fallback--cAlertRed: rgba(211,16,20,.5);
+$fallback--alertError: rgba(211,16,20,.5);
$fallback--panelRadius: 10px;
$fallback--checkBoxRadius: 2px;
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index 6c4a59b6..a428e75f 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -1,41 +1,28 @@
<template>
-<div class="contrast-ratio">
- <span class="label">
- Contrast:
- </span>
- <span>
- <span>
- {{contrast.text}}
+<span class="contrast-ratio">
+ <span :title="`Contrast is ${contrast.text}`" class="rating">
+ <span v-if="contrast.aaa">
+ <i class="icon-thumbs-up-alt"/>
+ </span>
+ <span v-if="!contrast.aaa && contrast.aa">
+ <i class="icon-adjust"/>
</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 v-if="!contrast.aaa && !contrast.aa">
+ <i class="icon-attention"/>
</span>
</span>
- <span v-if="large">
- <span>
- 18pt+:
+ <span class="rating" v-if="large" :title="`Contrast is ${contrast.text} (18pt+)`">
+ <span v-if="contrast.aaa">
+ <i class="icon-thumbs-up-alt"/>
+ </span>
+ <span v-if="!contrast.aaa && contrast.aa">
+ <i class="icon-adjust"/>
</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 v-if="!contrast.aaa && !contrast.aa">
+ <i class="icon-attention"/>
</span>
</span>
-</div>
+</span>
</template>
<script>
@@ -57,7 +44,6 @@ export default {
.rating {
display: inline-block;
- min-width: 3em;
text-align: center;
}
}
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index a98c2549..98fdd3f5 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -7,7 +7,7 @@
.unseen-count {
display: inline-block;
background-color: $fallback--cRed;
- background-color: var(--cRed, $fallback--cRed);
+ background-color: var(--badgeNotification, $fallback--cRed);
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
border-radius: 99px;
min-width: 22px;
@@ -27,7 +27,7 @@
}
.unseen {
- box-shadow: inset 4px 0 0 var(--cRed, $fallback--cRed);
+ box-shadow: inset 4px 0 0 var(--badgeNotification, $fallback--cRed);
padding-left: 0;
}
}
@@ -44,8 +44,8 @@
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
color: $fallback--faint;
color: var(--faint, $fallback--faint);
- background-color: $fallback--cAlertRed;
- background-color: var(--cAlertRed, $fallback--cAlertRed);
+ background-color: $fallback--alertError;
+ background-color: var(--alertError, $fallback--alertError);
padding: 2px .5em
}
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
index 09972868..efa6c449 100644
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@@ -14,16 +14,6 @@
<label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
<input
:id="name"
- class="input-range"
- type="range"
- :value="value || fallback"
- :disabled="!present"
- @input="$emit('input', $event.target.value)"
- max="1"
- min="0"
- step=".05">
- <input
- :id="name"
class="input-number"
type="number"
:value="value || fallback"
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 {
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 0acc7e7c..7a5254b9 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -81,29 +81,27 @@ const getContrastRatio = (a, b) => {
/**
* This generates what "worst case" color would look like for transparent
- * segments. I.e. black with .2 alpha and pure-white background image
- * could make white text unreadable
+ * segments. I.e. transparent black with yellow text over yellow background.
*
* @param {Object} srgb - transparent color
* @param {Number} alpha - color's opacity/alpha channel
- * @param {Boolean} white - use white "background" if true, black otherwise
+ * @param {Object} textSrgb - text color (considered as worst case scenario for transparent background)
* @returns {Object} sRGB of resulting color
*/
-const transparentWorstCase = (srgb, alpha, white = false) => {
- const bg = 'rgb'.split('').reduce((acc, c) => { acc[c] = Number(white) * 255; return acc }, {})
+const transparentWorstCase = (srgb, alpha, textSrgb) => {
return 'rgb'.split('').reduce((acc, c) => {
// Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
// for opaque bg and transparent fg
- acc[c] = (srgb[c] * alpha + bg[c] * (1 - alpha))
+ acc[c] = (srgb[c] * alpha + textSrgb[c] * (1 - alpha))
return acc
}, {})
}
const worstCase = (bg, bga, text) => {
+ console.log(bg)
+ console.log(text)
if (bga === 1 || typeof bga === 'undefined') return bg
- // taken from https://github.com/toish/chromatism/blob/master/src/operations/contrastRatio.js
- const blackWorse = ((text.r * 299) + (text.g * 587) + (text.b * 114)) / 1000 <= 128
- return transparentWorstCase(bg, bga, !blackWorse)
+ return transparentWorstCase(bg, bga, text)
}
const hex2rgb = (hex) => {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 4de39f79..666e74c1 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -155,12 +155,14 @@ const generatePreset = (input) => {
colors.cGreen = col.cGreen
colors.cOrange = col.cOrange
- colors.cAlertRed = col.cAlertRed || Object.assign({}, col.cRed)
+ colors.alertError = col.alertError || Object.assign({}, col.cRed)
+ colors.badgeNotification = col.badgeNotification || Object.assign({}, col.cRed)
+ colors.badgeNotificationText = col.badgeNotification || Object.assign({}, col.cRed)
Object.entries(opacity).forEach(([ k, v ]) => {
if (typeof v === 'undefined') return
if (k === 'alert') {
- colors.cAlertRed.a = v
+ colors.alertError.a = v
return
}
if (k === 'faint') {
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 11:28:56 +0000