improved selectedMenu again
This commit is contained in:
parent
53576df72a
commit
b96993e4dd
@ -115,6 +115,7 @@
|
|||||||
color: var(--popoverText, $fallback--link);
|
color: var(--popoverText, $fallback--link);
|
||||||
--faint: var(--popoverFaintText, $fallback--faint);
|
--faint: var(--popoverFaintText, $fallback--faint);
|
||||||
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--popoverLightText, $fallback--lightText);
|
||||||
--icon: var(--popoverIcon, $fallback--icon);
|
--icon: var(--popoverIcon, $fallback--icon);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -160,11 +161,12 @@
|
|||||||
|
|
||||||
&.highlighted {
|
&.highlighted {
|
||||||
background-color: $fallback--fg;
|
background-color: $fallback--fg;
|
||||||
background-color: var(--selectedMenu, $fallback--fg);
|
background-color: var(--selectedMenuPopover, $fallback--fg);
|
||||||
color: var(--selectedMenuText, $fallback--text);
|
color: var(--selectedMenuPopoverText, $fallback--text);
|
||||||
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
|
||||||
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
|
||||||
--icon: var(--selectedMenuIcon, $fallback--icon);
|
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
|
||||||
|
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -8,6 +8,15 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
background-color: $fallback--bg;
|
||||||
|
background-color: var(--popover, $fallback--bg);
|
||||||
|
color: $fallback--link;
|
||||||
|
color: var(--popoverText, $fallback--link);
|
||||||
|
--lightText: var(--popoverLightText, $fallback--faint);
|
||||||
|
--faint: var(--popoverFaintText, $fallback--faint);
|
||||||
|
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--popoverLightText, $fallback--lightText);
|
||||||
|
--icon: var(--popoverIcon, $fallback--icon);
|
||||||
|
|
||||||
.keep-open,
|
.keep-open,
|
||||||
.too-many-emoji {
|
.too-many-emoji {
|
||||||
|
@ -105,6 +105,7 @@
|
|||||||
color: var(--selectedMenuText, $fallback--link);
|
color: var(--selectedMenuText, $fallback--link);
|
||||||
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
||||||
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||||
--icon: var(--selectedMenuIcon, $fallback--icon);
|
--icon: var(--selectedMenuIcon, $fallback--icon);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -116,6 +117,7 @@
|
|||||||
color: var(--selectedMenuText, $fallback--text);
|
color: var(--selectedMenuText, $fallback--text);
|
||||||
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
||||||
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||||
--icon: var(--selectedMenuIcon, $fallback--icon);
|
--icon: var(--selectedMenuIcon, $fallback--icon);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -14,6 +14,7 @@
|
|||||||
color: var(--popoverText, $fallback--text);
|
color: var(--popoverText, $fallback--text);
|
||||||
--faint: var(--popoverFaintText, $fallback--faint);
|
--faint: var(--popoverFaintText, $fallback--faint);
|
||||||
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--popoverLightText, $fallback--lightText);
|
||||||
--icon: var(--popoverIcon, $fallback--icon);
|
--icon: var(--popoverIcon, $fallback--icon);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -144,12 +145,13 @@
|
|||||||
|
|
||||||
&:active, &:hover {
|
&:active, &:hover {
|
||||||
background-color: $fallback--lightBg;
|
background-color: $fallback--lightBg;
|
||||||
background-color: var(--selectedMenu, $fallback--lightBg);
|
background-color: var(--selectedMenuPopover, $fallback--lightBg);
|
||||||
color: $fallback--link;
|
color: $fallback--link;
|
||||||
color: var(--selectedMenuText, $fallback--link);
|
color: var(--selectedMenuPopoverText, $fallback--link);
|
||||||
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
|
||||||
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
|
||||||
--icon: var(--selectedMenuIcon, $fallback--icon);
|
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
|
||||||
|
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -72,6 +72,7 @@
|
|||||||
color: var(--selectedMenuText, $fallback--text);
|
color: var(--selectedMenuText, $fallback--text);
|
||||||
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
||||||
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||||
--icon: var(--selectedMenuIcon, $fallback--icon);
|
--icon: var(--selectedMenuIcon, $fallback--icon);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -228,6 +228,7 @@
|
|||||||
color: var(--popoverText, $fallback--link);
|
color: var(--popoverText, $fallback--link);
|
||||||
--faint: var(--popoverFaintText, $fallback--faint);
|
--faint: var(--popoverFaintText, $fallback--faint);
|
||||||
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--popoverLightText, $fallback--lightText);
|
||||||
--icon: var(--popoverIcon, $fallback--icon);
|
--icon: var(--popoverIcon, $fallback--icon);
|
||||||
|
|
||||||
.button-icon:before {
|
.button-icon:before {
|
||||||
@ -294,12 +295,13 @@
|
|||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $fallback--lightBg;
|
background-color: $fallback--lightBg;
|
||||||
background-color: var(--selectedMenu, $fallback--lightBg);
|
background-color: var(--selectedMenuPopover, $fallback--lightBg);
|
||||||
color: $fallback--text;
|
color: $fallback--text;
|
||||||
color: var(--selectedMenuText, $fallback--text);
|
color: var(--selectedMenuPopoverText, $fallback--text);
|
||||||
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
|
||||||
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
|
||||||
--icon: var(--selectedMenuIcon, $fallback--icon);
|
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
|
||||||
|
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -448,6 +448,7 @@ $status-margin: 0.75em;
|
|||||||
background-color: var(--selectedPost, $fallback--lightBg);
|
background-color: var(--selectedPost, $fallback--lightBg);
|
||||||
color: $fallback--text;
|
color: $fallback--text;
|
||||||
color: var(--selectedPostText, $fallback--text);
|
color: var(--selectedPostText, $fallback--text);
|
||||||
|
--lightText: var(--selectedPostLightText, $fallback--light);
|
||||||
--faint: var(--selectedPostFaintText, $fallback--faint);
|
--faint: var(--selectedPostFaintText, $fallback--faint);
|
||||||
--faintLink: var(--selectedPostFaintLink, $fallback--faint);
|
--faintLink: var(--selectedPostFaintLink, $fallback--faint);
|
||||||
--icon: var(--selectedPostIcon, $fallback--icon);
|
--icon: var(--selectedPostIcon, $fallback--icon);
|
||||||
|
@ -69,7 +69,7 @@ const srgbToLinear = (srgb) => {
|
|||||||
* @param {Object} srgb - sRGB color
|
* @param {Object} srgb - sRGB color
|
||||||
* @returns {Number} relative luminance
|
* @returns {Number} relative luminance
|
||||||
*/
|
*/
|
||||||
const relativeLuminance = (srgb) => {
|
export const relativeLuminance = (srgb) => {
|
||||||
const { r, g, b } = srgbToLinear(srgb)
|
const { r, g, b } = srgbToLinear(srgb)
|
||||||
return 0.2126 * r + 0.7152 * g + 0.0722 * b
|
return 0.2126 * r + 0.7152 * g + 0.0722 * b
|
||||||
}
|
}
|
||||||
|
@ -117,6 +117,11 @@ export const SLOT_INHERITANCE = {
|
|||||||
depends: ['bg'],
|
depends: ['bg'],
|
||||||
color: (mod, bg) => brightness(5 * mod, bg).rgb
|
color: (mod, bg) => brightness(5 * mod, bg).rgb
|
||||||
},
|
},
|
||||||
|
highlightLightText: {
|
||||||
|
depends: ['lightText'],
|
||||||
|
layer: 'highlight',
|
||||||
|
textColor: true
|
||||||
|
},
|
||||||
highlightFaintText: {
|
highlightFaintText: {
|
||||||
depends: ['faint'],
|
depends: ['faint'],
|
||||||
layer: 'highlight',
|
layer: 'highlight',
|
||||||
@ -146,6 +151,11 @@ export const SLOT_INHERITANCE = {
|
|||||||
depends: ['bg'],
|
depends: ['bg'],
|
||||||
opacity: 'popover'
|
opacity: 'popover'
|
||||||
},
|
},
|
||||||
|
popoverLightText: {
|
||||||
|
depends: ['lightText'],
|
||||||
|
layer: 'popover',
|
||||||
|
textColor: true
|
||||||
|
},
|
||||||
popoverFaintText: {
|
popoverFaintText: {
|
||||||
depends: ['faint'],
|
depends: ['faint'],
|
||||||
layer: 'popover',
|
layer: 'popover',
|
||||||
@ -178,6 +188,12 @@ export const SLOT_INHERITANCE = {
|
|||||||
variant: 'selectedPost',
|
variant: 'selectedPost',
|
||||||
textColor: true
|
textColor: true
|
||||||
},
|
},
|
||||||
|
selectedPostLightText: {
|
||||||
|
depends: ['highlightLightText'],
|
||||||
|
layer: 'highlight',
|
||||||
|
variant: 'selectedPost',
|
||||||
|
textColor: true
|
||||||
|
},
|
||||||
selectedPostFaintLink: {
|
selectedPostFaintLink: {
|
||||||
depends: ['highlightFaintLink'],
|
depends: ['highlightFaintLink'],
|
||||||
layer: 'highlight',
|
layer: 'highlight',
|
||||||
@ -202,9 +218,15 @@ export const SLOT_INHERITANCE = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
selectedMenu: {
|
selectedMenu: {
|
||||||
depends: ['popover'],
|
depends: ['bg'],
|
||||||
color: (mod, bg) => brightness(5 * mod, bg).rgb
|
color: (mod, bg) => brightness(5 * mod, bg).rgb
|
||||||
},
|
},
|
||||||
|
selectedMenuLightText: {
|
||||||
|
depends: ['highlightLightText'],
|
||||||
|
layer: 'selectedMenu',
|
||||||
|
variant: 'selectedMenu',
|
||||||
|
textColor: true
|
||||||
|
},
|
||||||
selectedMenuFaintText: {
|
selectedMenuFaintText: {
|
||||||
depends: ['highlightFaintText'],
|
depends: ['highlightFaintText'],
|
||||||
layer: 'selectedMenu',
|
layer: 'selectedMenu',
|
||||||
@ -234,6 +256,45 @@ export const SLOT_INHERITANCE = {
|
|||||||
color: (mod, bg, text) => mixrgb(bg, text)
|
color: (mod, bg, text) => mixrgb(bg, text)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
selectedMenuPopover: {
|
||||||
|
depends: ['popover'],
|
||||||
|
color: (mod, bg) => brightness(5 * mod, bg).rgb
|
||||||
|
},
|
||||||
|
selectedMenuPopoverLightText: {
|
||||||
|
depends: ['selectedMenuLightText'],
|
||||||
|
layer: 'selectedMenuPopover',
|
||||||
|
variant: 'selectedMenuPopover',
|
||||||
|
textColor: true
|
||||||
|
},
|
||||||
|
selectedMenuPopoverFaintText: {
|
||||||
|
depends: ['selectedMenuFaintText'],
|
||||||
|
layer: 'selectedMenuPopover',
|
||||||
|
variant: 'selectedMenuPopover',
|
||||||
|
textColor: true
|
||||||
|
},
|
||||||
|
selectedMenuPopoverFaintLink: {
|
||||||
|
depends: ['selectedMenuFaintLink'],
|
||||||
|
layer: 'selectedMenuPopover',
|
||||||
|
variant: 'selectedMenuPopover',
|
||||||
|
textColor: 'preserve'
|
||||||
|
},
|
||||||
|
selectedMenuPopoverText: {
|
||||||
|
depends: ['selectedMenuText'],
|
||||||
|
layer: 'selectedMenuPopover',
|
||||||
|
variant: 'selectedMenuPopover',
|
||||||
|
textColor: true
|
||||||
|
},
|
||||||
|
selectedMenuPopoverLink: {
|
||||||
|
depends: ['selectedMenuLink'],
|
||||||
|
layer: 'selectedMenuPopover',
|
||||||
|
variant: 'selectedMenuPopover',
|
||||||
|
textColor: 'preserve'
|
||||||
|
},
|
||||||
|
selectedMenuPopoverIcon: {
|
||||||
|
depends: ['selectedMenuPopover', 'selectedMenuText'],
|
||||||
|
color: (mod, bg, text) => mixrgb(bg, text)
|
||||||
|
},
|
||||||
|
|
||||||
lightText: {
|
lightText: {
|
||||||
depends: ['text'],
|
depends: ['text'],
|
||||||
color: (mod, text) => brightness(20 * mod, text).rgb
|
color: (mod, text) => brightness(20 * mod, text).rgb
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { convert, brightness, contrastRatio } from 'chromatism'
|
import { convert, brightness, contrastRatio } from 'chromatism'
|
||||||
import { alphaBlendLayers, getTextColor } from '../color_convert/color_convert.js'
|
import { alphaBlendLayers, getTextColor, relativeLuminance } from '../color_convert/color_convert.js'
|
||||||
import { LAYERS, DEFAULT_OPACITY, SLOT_INHERITANCE } from './pleromafe.js'
|
import { LAYERS, DEFAULT_OPACITY, SLOT_INHERITANCE } from './pleromafe.js'
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -318,13 +318,14 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
|
|||||||
opacity
|
opacity
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
const isLightOnDark = relativeLuminance(bg) > 127
|
||||||
|
const mod = isLightOnDark ? 1 : -1
|
||||||
|
|
||||||
if (value.textColor === 'bw') {
|
if (value.textColor === 'bw') {
|
||||||
outputColor = contrastRatio(bg).rgb
|
outputColor = contrastRatio(bg).rgb
|
||||||
} else {
|
} else {
|
||||||
let color = { ...colors[deps[0]] }
|
let color = { ...colors[deps[0]] }
|
||||||
if (value.color) {
|
if (value.color) {
|
||||||
const isLightOnDark = convert(bg).hsl.l < convert(color).hsl.l
|
|
||||||
const mod = isLightOnDark ? 1 : -1
|
|
||||||
color = value.color(mod, ...deps.map((dep) => ({ ...colors[dep] })))
|
color = value.color(mod, ...deps.map((dep) => ({ ...colors[dep] })))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -114,8 +114,8 @@
|
|||||||
"cGreen": "#27ae60",
|
"cGreen": "#27ae60",
|
||||||
"cOrange": "#f67400",
|
"cOrange": "#f67400",
|
||||||
"btnPressed": "--accent",
|
"btnPressed": "--accent",
|
||||||
"highlight": "--accent",
|
"selectedMenu": "--accent",
|
||||||
"selectedPost": "--bg,10"
|
"selectedMenuPopover": "--accent"
|
||||||
},
|
},
|
||||||
"radii": {
|
"radii": {
|
||||||
"btn": "2",
|
"btn": "2",
|
||||||
|
@ -117,8 +117,8 @@
|
|||||||
"cGreen": "#27ae60",
|
"cGreen": "#27ae60",
|
||||||
"cOrange": "#f67400",
|
"cOrange": "#f67400",
|
||||||
"btnPressed": "--accent",
|
"btnPressed": "--accent",
|
||||||
"highlight": "--accent",
|
"selectedMenu": "--accent",
|
||||||
"selectedPost": "--bg,10"
|
"selectedMenuPopover": "--accent"
|
||||||
},
|
},
|
||||||
"radii": {
|
"radii": {
|
||||||
"btn": "2",
|
"btn": "2",
|
||||||
|
Loading…
Reference in New Issue
Block a user