aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/style_switcher/style_switcher.js38
-rw-r--r--src/services/color_convert/color_convert.js70
2 files changed, 91 insertions, 17 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 27efa230..d4381202 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -1,4 +1,4 @@
-import { rgb2hex, hex2rgb, getContrastRatio } from '../../services/color_convert/color_convert.js'
+import { rgb2hex, hex2rgb, getContrastRatio, worstCase } 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'
@@ -144,12 +144,13 @@ export default {
}
},
previewTheme () {
- if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {}, contrast: {} }
+ if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {} }
return this.preview.theme
},
previewContrast () {
if (!this.previewTheme.colors) return {}
const colors = this.previewTheme.colors
+ const opacity = this.previewTheme.opacity
const hints = (ratio) => ({
text: ratio.toPrecision(3) + ':1',
// AA level, AAA level
@@ -160,16 +161,37 @@ export default {
laaa: ratio >= 4.5
})
+ // fgsfds :DDDD
+ const fgs = {
+ text: hex2rgb(colors.text),
+ panelText: hex2rgb(colors.panelText),
+ btnText: hex2rgb(colors.btnText),
+ topBarText: hex2rgb(colors.topBarText),
+
+ link: hex2rgb(colors.link),
+ topBarLink: hex2rgb(colors.topBarLink),
+ }
+
+ const bgs = {
+ bg: hex2rgb(colors.bg),
+ btn: hex2rgb(colors.btn),
+ panel: hex2rgb(colors.panel),
+ topBar: hex2rgb(colors.topBar)
+ }
+
const ratios = {
- bgText: getContrastRatio(hex2rgb(colors.bg), hex2rgb(colors.text)),
- bgLink: getContrastRatio(hex2rgb(colors.bg), hex2rgb(colors.link)),
+ bgText: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.text), fgs.text),
+ bgLink: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.link), fgs.link),
+
+ // User Profile
+ tintText: getContrastRatio(worstCase(bgs.bg, 0.5, fgs.panelText), fgs.text),
- panelText: getContrastRatio(hex2rgb(colors.panel), hex2rgb(colors.panelText)),
+ panelText: getContrastRatio(worstCase(bgs.panel, opacity.panel, fgs.panelText), fgs.panelText),
- btnText: getContrastRatio(hex2rgb(colors.btn), hex2rgb(colors.btnText)),
+ btnText: getContrastRatio(worstCase(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText),
- topBarText: getContrastRatio(hex2rgb(colors.topBar), hex2rgb(colors.topBarText)),
- topBarLink: getContrastRatio(hex2rgb(colors.topBar), hex2rgb(colors.topBarLink)),
+ topBarText: getContrastRatio(worstCase(bgs.topBar, opacity.topBar, fgs.topBarText), fgs.topBarText),
+ topBarLink: getContrastRatio(worstCase(bgs.topBar, opacity.topBar, fgs.topBarLink), fgs.topBarLink)
}
return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 31ee3a6b..0acc7e7c 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -19,15 +19,21 @@ 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) => {
+/**
+ * Converts 8-bit RGB component into linear component
+ * 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
+ *
+ * @param {Number} bit - color component [0..255]
+ * @returns {Number} linear component [0..1]
+ */
+const c2linear = (bit) => {
// 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
+ const c = bit / 255
if (c < 0.03928) {
return c / 12.92
} else {
@@ -35,18 +41,36 @@ const c2linear = (b) => {
}
}
+/**
+ * Converts sRGB into linear RGB
+ * @param {Object} srgb - sRGB color
+ * @returns {Object} linear rgb color
+ */
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
+/**
+ * Calculates relative luminance for given color
+ * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+ * https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
+ *
+ * @param {Object} srgb - sRGB color
+ * @returns {Number} relative luminance
+ */
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
+/**
+ * Generates color ratio between two colors. Order is unimporant
+ * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+ *
+ * @param {Object} a - sRGB color
+ * @param {Object} b - sRGB color
+ * @returns {Number} color ratio
+ */
const getContrastRatio = (a, b) => {
const la = relativeLuminance(a)
const lb = relativeLuminance(b)
@@ -55,6 +79,33 @@ const getContrastRatio = (a, b) => {
return (l1 + 0.05) / (l2 + 0.05)
}
+/**
+ * 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
+ *
+ * @param {Object} srgb - transparent color
+ * @param {Number} alpha - color's opacity/alpha channel
+ * @param {Boolean} white - use white "background" if true, black otherwise
+ * @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 }, {})
+ 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))
+ return acc
+ }, {})
+}
+
+const worstCase = (bg, bga, 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)
+}
+
const hex2rgb = (hex) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
return result ? {
@@ -84,5 +135,6 @@ export {
hex2rgb,
mixrgb,
rgbstr2hex,
- getContrastRatio
+ getContrastRatio,
+ worstCase
}
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-16 17:49:12 +0000