From b96993e4dd6b2d9197b430af404e8fa652888b51 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 24 Jan 2020 00:36:32 +0200 Subject: [PATCH] improved selectedMenu again --- src/components/emoji_input/emoji_input.vue | 12 ++-- src/components/emoji_picker/emoji_picker.scss | 9 +++ src/components/nav_panel/nav_panel.vue | 2 + src/components/popper/popper.scss | 12 ++-- .../selectable_list/selectable_list.vue | 1 + src/components/side_drawer/side_drawer.vue | 12 ++-- src/components/status/status.vue | 1 + src/services/color_convert/color_convert.js | 2 +- src/services/theme_data/pleromafe.js | 63 ++++++++++++++++++- src/services/theme_data/theme_data.service.js | 7 ++- static/themes/breezy-dark.json | 4 +- static/themes/breezy-light.json | 4 +- 12 files changed, 105 insertions(+), 24 deletions(-) diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 9c2501a990..94eae56065 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -115,6 +115,7 @@ color: var(--popoverText, $fallback--link); --faint: var(--popoverFaintText, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint); + --lightText: var(--popoverLightText, $fallback--lightText); --icon: var(--popoverIcon, $fallback--icon); } } @@ -160,11 +161,12 @@ &.highlighted { background-color: $fallback--fg; - background-color: var(--selectedMenu, $fallback--fg); - color: var(--selectedMenuText, $fallback--text); - --faint: var(--selectedMenuFaintText, $fallback--faint); - --faintLink: var(--selectedMenuFaintLink, $fallback--faint); - --icon: var(--selectedMenuIcon, $fallback--icon); + background-color: var(--selectedMenuPopover, $fallback--fg); + color: var(--selectedMenuPopoverText, $fallback--text); + --faint: var(--selectedMenuPopoverFaintText, $fallback--faint); + --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); + --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); + --icon: var(--selectedMenuPopoverIcon, $fallback--icon); } } } diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 6608f39304..8bd07e453f 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -8,6 +8,15 @@ left: 0; margin: 0 !important; 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, .too-many-emoji { diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index afc611ea32..a934a411ac 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -105,6 +105,7 @@ color: var(--selectedMenuText, $fallback--link); --faint: var(--selectedMenuFaintText, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --lightText: var(--selectedMenuLightText, $fallback--lightText); --icon: var(--selectedMenuIcon, $fallback--icon); } @@ -116,6 +117,7 @@ color: var(--selectedMenuText, $fallback--text); --faint: var(--selectedMenuFaintText, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --lightText: var(--selectedMenuLightText, $fallback--lightText); --icon: var(--selectedMenuIcon, $fallback--icon); &:hover { diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss index e70b277df0..591be37eb5 100644 --- a/src/components/popper/popper.scss +++ b/src/components/popper/popper.scss @@ -14,6 +14,7 @@ color: var(--popoverText, $fallback--text); --faint: var(--popoverFaintText, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint); + --lightText: var(--popoverLightText, $fallback--lightText); --icon: var(--popoverIcon, $fallback--icon); } @@ -144,12 +145,13 @@ &:active, &:hover { background-color: $fallback--lightBg; - background-color: var(--selectedMenu, $fallback--lightBg); + background-color: var(--selectedMenuPopover, $fallback--lightBg); color: $fallback--link; - color: var(--selectedMenuText, $fallback--link); - --faint: var(--selectedMenuFaintText, $fallback--faint); - --faintLink: var(--selectedMenuFaintLink, $fallback--faint); - --icon: var(--selectedMenuIcon, $fallback--icon); + color: var(--selectedMenuPopoverText, $fallback--link); + --faint: var(--selectedMenuPopoverFaintText, $fallback--faint); + --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); + --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); + --icon: var(--selectedMenuPopoverIcon, $fallback--icon); } } } diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue index 2d1e44a3af..a9bb12a187 100644 --- a/src/components/selectable_list/selectable_list.vue +++ b/src/components/selectable_list/selectable_list.vue @@ -72,6 +72,7 @@ color: var(--selectedMenuText, $fallback--text); --faint: var(--selectedMenuFaintText, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --lightText: var(--selectedMenuLightText, $fallback--lightText); --icon: var(--selectedMenuIcon, $fallback--icon); } diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index a5b754d7ce..25e4de0172 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -228,6 +228,7 @@ color: var(--popoverText, $fallback--link); --faint: var(--popoverFaintText, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint); + --lightText: var(--popoverLightText, $fallback--lightText); --icon: var(--popoverIcon, $fallback--icon); .button-icon:before { @@ -294,12 +295,13 @@ &:hover { background-color: $fallback--lightBg; - background-color: var(--selectedMenu, $fallback--lightBg); + background-color: var(--selectedMenuPopover, $fallback--lightBg); color: $fallback--text; - color: var(--selectedMenuText, $fallback--text); - --faint: var(--selectedMenuFaintText, $fallback--faint); - --faintLink: var(--selectedMenuFaintLink, $fallback--faint); - --icon: var(--selectedMenuIcon, $fallback--icon); + color: var(--selectedMenuPopoverText, $fallback--text); + --faint: var(--selectedMenuPopoverFaintText, $fallback--faint); + --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); + --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); + --icon: var(--selectedMenuPopoverIcon, $fallback--icon); } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 38d091ede9..1997e18739 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -448,6 +448,7 @@ $status-margin: 0.75em; background-color: var(--selectedPost, $fallback--lightBg); color: $fallback--text; color: var(--selectedPostText, $fallback--text); + --lightText: var(--selectedPostLightText, $fallback--light); --faint: var(--selectedPostFaintText, $fallback--faint); --faintLink: var(--selectedPostFaintLink, $fallback--faint); --icon: var(--selectedPostIcon, $fallback--icon); diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js index 93cb1ba672..0bf8f6460b 100644 --- a/src/services/color_convert/color_convert.js +++ b/src/services/color_convert/color_convert.js @@ -69,7 +69,7 @@ const srgbToLinear = (srgb) => { * @param {Object} srgb - sRGB color * @returns {Number} relative luminance */ -const relativeLuminance = (srgb) => { +export const relativeLuminance = (srgb) => { const { r, g, b } = srgbToLinear(srgb) return 0.2126 * r + 0.7152 * g + 0.0722 * b } diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js index 484874d779..a40d08a662 100644 --- a/src/services/theme_data/pleromafe.js +++ b/src/services/theme_data/pleromafe.js @@ -117,6 +117,11 @@ export const SLOT_INHERITANCE = { depends: ['bg'], color: (mod, bg) => brightness(5 * mod, bg).rgb }, + highlightLightText: { + depends: ['lightText'], + layer: 'highlight', + textColor: true + }, highlightFaintText: { depends: ['faint'], layer: 'highlight', @@ -146,6 +151,11 @@ export const SLOT_INHERITANCE = { depends: ['bg'], opacity: 'popover' }, + popoverLightText: { + depends: ['lightText'], + layer: 'popover', + textColor: true + }, popoverFaintText: { depends: ['faint'], layer: 'popover', @@ -178,6 +188,12 @@ export const SLOT_INHERITANCE = { variant: 'selectedPost', textColor: true }, + selectedPostLightText: { + depends: ['highlightLightText'], + layer: 'highlight', + variant: 'selectedPost', + textColor: true + }, selectedPostFaintLink: { depends: ['highlightFaintLink'], layer: 'highlight', @@ -202,9 +218,15 @@ export const SLOT_INHERITANCE = { }, selectedMenu: { - depends: ['popover'], + depends: ['bg'], color: (mod, bg) => brightness(5 * mod, bg).rgb }, + selectedMenuLightText: { + depends: ['highlightLightText'], + layer: 'selectedMenu', + variant: 'selectedMenu', + textColor: true + }, selectedMenuFaintText: { depends: ['highlightFaintText'], layer: 'selectedMenu', @@ -234,6 +256,45 @@ export const SLOT_INHERITANCE = { 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: { depends: ['text'], color: (mod, text) => brightness(20 * mod, text).rgb diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index ea28481b12..c0861a4a7a 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -1,5 +1,5 @@ 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' /* @@ -318,13 +318,14 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu opacity ) ) + const isLightOnDark = relativeLuminance(bg) > 127 + const mod = isLightOnDark ? 1 : -1 + if (value.textColor === 'bw') { outputColor = contrastRatio(bg).rgb } else { let color = { ...colors[deps[0]] } 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] }))) } diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json index c3bdcf652b..236b94ad9b 100644 --- a/static/themes/breezy-dark.json +++ b/static/themes/breezy-dark.json @@ -114,8 +114,8 @@ "cGreen": "#27ae60", "cOrange": "#f67400", "btnPressed": "--accent", - "highlight": "--accent", - "selectedPost": "--bg,10" + "selectedMenu": "--accent", + "selectedMenuPopover": "--accent" }, "radii": { "btn": "2", diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json index 478407c92f..d3f74cec29 100644 --- a/static/themes/breezy-light.json +++ b/static/themes/breezy-light.json @@ -117,8 +117,8 @@ "cGreen": "#27ae60", "cOrange": "#f67400", "btnPressed": "--accent", - "highlight": "--accent", - "selectedPost": "--bg,10" + "selectedMenu": "--accent", + "selectedMenuPopover": "--accent" }, "radii": { "btn": "2",