forked from AkkomaGang/akkoma-fe
replace hsl's l with relative luminance for better lightness detection
This commit is contained in:
parent
88f83fc9fa
commit
39dd08e694
4 changed files with 10 additions and 12 deletions
|
@ -2,9 +2,7 @@ import { set, delete as del } from 'vue'
|
|||
import {
|
||||
rgb2hex,
|
||||
hex2rgb,
|
||||
getContrastRatio,
|
||||
getContrastRatioLayers,
|
||||
alphaBlend
|
||||
getContrastRatioLayers
|
||||
} from '../../services/color_convert/color_convert.js'
|
||||
import {
|
||||
generateColors,
|
||||
|
@ -265,7 +263,6 @@ export default {
|
|||
|
||||
const theme = this.previewTheme
|
||||
|
||||
console.log(source)
|
||||
return {
|
||||
// To separate from other random JSON files and possible future source formats
|
||||
_pleroma_theme_version: 2, theme, source
|
||||
|
|
|
@ -430,7 +430,8 @@
|
|||
"borders": "Borders",
|
||||
"buttons": "Buttons",
|
||||
"inputs": "Input fields",
|
||||
"faint_text": "Faded text"
|
||||
"faint_text": "Faded text",
|
||||
"underlay": "Underlay"
|
||||
},
|
||||
"radii": {
|
||||
"_tab_label": "Roundness"
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { invertLightness, convert, contrastRatio } from 'chromatism'
|
||||
import { invertLightness, contrastRatio } from 'chromatism'
|
||||
|
||||
// useful for visualizing color when debugging
|
||||
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)
|
||||
*/
|
||||
export const getTextColor = function (bg, text, preserve) {
|
||||
const bgIsLight = convert(bg).hsl.l > 50
|
||||
const textIsLight = convert(text).hsl.l > 50
|
||||
const bgIsLight = relativeLuminance(bg) > 0.5
|
||||
const textIsLight = relativeLuminance(text) > 0.5
|
||||
|
||||
if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
|
||||
const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
|
||||
|
|
|
@ -159,13 +159,13 @@ export const SLOT_INHERITANCE = {
|
|||
|
||||
alertError: '--cRed',
|
||||
alertErrorText: {
|
||||
depends: ['text', 'alertError'],
|
||||
depends: ['text'],
|
||||
layer: 'alert',
|
||||
variant: 'alertError',
|
||||
textColor: true
|
||||
},
|
||||
alertErrorPanelText: {
|
||||
depends: ['panelText', 'alertError'],
|
||||
depends: ['panelText'],
|
||||
layer: 'alertPanel',
|
||||
variant: 'alertError',
|
||||
textColor: true
|
||||
|
@ -173,13 +173,13 @@ export const SLOT_INHERITANCE = {
|
|||
|
||||
alertWarning: '--cOrange',
|
||||
alertWarningText: {
|
||||
depends: ['text', 'alertWarning'],
|
||||
depends: ['text'],
|
||||
layer: 'alert',
|
||||
variant: 'alertWarning',
|
||||
textColor: true
|
||||
},
|
||||
alertWarningPanelText: {
|
||||
depends: ['panelText', 'alertWarning'],
|
||||
depends: ['panelText'],
|
||||
layer: 'alertPanel',
|
||||
variant: 'alertWarning',
|
||||
textColor: true
|
||||
|
|
Loading…
Reference in a new issue