replace hsl's l with relative luminance for better lightness detection

This commit is contained in:
Henry Jameson 2020-01-12 17:58:26 +02:00
parent 88f83fc9fa
commit 39dd08e694
4 changed files with 10 additions and 12 deletions

View file

@ -2,9 +2,7 @@ import { set, delete as del } from 'vue'
import { import {
rgb2hex, rgb2hex,
hex2rgb, hex2rgb,
getContrastRatio, getContrastRatioLayers
getContrastRatioLayers,
alphaBlend
} from '../../services/color_convert/color_convert.js' } from '../../services/color_convert/color_convert.js'
import { import {
generateColors, generateColors,
@ -265,7 +263,6 @@ export default {
const theme = this.previewTheme const theme = this.previewTheme
console.log(source)
return { return {
// To separate from other random JSON files and possible future source formats // To separate from other random JSON files and possible future source formats
_pleroma_theme_version: 2, theme, source _pleroma_theme_version: 2, theme, source

View file

@ -430,7 +430,8 @@
"borders": "Borders", "borders": "Borders",
"buttons": "Buttons", "buttons": "Buttons",
"inputs": "Input fields", "inputs": "Input fields",
"faint_text": "Faded text" "faint_text": "Faded text",
"underlay": "Underlay"
}, },
"radii": { "radii": {
"_tab_label": "Roundness" "_tab_label": "Roundness"

View file

@ -1,4 +1,4 @@
import { invertLightness, convert, contrastRatio } from 'chromatism' import { invertLightness, contrastRatio } from 'chromatism'
// useful for visualizing color when debugging // useful for visualizing color when debugging
export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color) export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)
@ -185,8 +185,8 @@ export const rgba2css = function (rgba) {
* @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW) * @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW)
*/ */
export const getTextColor = function (bg, text, preserve) { export const getTextColor = function (bg, text, preserve) {
const bgIsLight = convert(bg).hsl.l > 50 const bgIsLight = relativeLuminance(bg) > 0.5
const textIsLight = convert(text).hsl.l > 50 const textIsLight = relativeLuminance(text) > 0.5
if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) { if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
const base = typeof text.a !== 'undefined' ? { a: text.a } : {} const base = typeof text.a !== 'undefined' ? { a: text.a } : {}

View file

@ -159,13 +159,13 @@ export const SLOT_INHERITANCE = {
alertError: '--cRed', alertError: '--cRed',
alertErrorText: { alertErrorText: {
depends: ['text', 'alertError'], depends: ['text'],
layer: 'alert', layer: 'alert',
variant: 'alertError', variant: 'alertError',
textColor: true textColor: true
}, },
alertErrorPanelText: { alertErrorPanelText: {
depends: ['panelText', 'alertError'], depends: ['panelText'],
layer: 'alertPanel', layer: 'alertPanel',
variant: 'alertError', variant: 'alertError',
textColor: true textColor: true
@ -173,13 +173,13 @@ export const SLOT_INHERITANCE = {
alertWarning: '--cOrange', alertWarning: '--cOrange',
alertWarningText: { alertWarningText: {
depends: ['text', 'alertWarning'], depends: ['text'],
layer: 'alert', layer: 'alert',
variant: 'alertWarning', variant: 'alertWarning',
textColor: true textColor: true
}, },
alertWarningPanelText: { alertWarningPanelText: {
depends: ['panelText', 'alertWarning'], depends: ['panelText'],
layer: 'alertPanel', layer: 'alertPanel',
variant: 'alertWarning', variant: 'alertWarning',
textColor: true textColor: true