From 611da13a4b252c10f1613d70d877e2d039ba64b7 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 7 Feb 2020 01:25:26 +0200 Subject: [PATCH] Better Disabled buttons support. Mammal theme fixes. Implemented proper context-aware `mod` argument - now checks lightness of "variant" color. needs retesting tho --- src/App.scss | 4 +- src/components/checkbox/checkbox.vue | 4 +- .../style_switcher/style_switcher.vue | 57 +++++++++++++++++++ src/i18n/en.json | 1 + src/services/style_setter/style_setter.js | 17 +----- src/services/theme_data/pleromafe.js | 31 +++++----- src/services/theme_data/theme_data.service.js | 9 ++- 7 files changed, 89 insertions(+), 34 deletions(-) diff --git a/src/App.scss b/src/App.scss index 85fd0b47..9f37ff12 100644 --- a/src/App.scss +++ b/src/App.scss @@ -179,7 +179,7 @@ input, textarea, .select, .input { right: 5px; height: 100%; color: $fallback--text; - color: var(--text, $fallback--text); + color: var(--inputText, $fallback--text); line-height: 28px; z-index: 0; pointer-events: none; @@ -254,7 +254,7 @@ input, textarea, .select, .input { display: none; &:checked + label::before { color: $fallback--text; - color: var(--text, $fallback--text); + color: var(--inputText, $fallback--text); } &:disabled { &, diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue index 1113f81d..03375b2f 100644 --- a/src/components/checkbox/checkbox.vue +++ b/src/components/checkbox/checkbox.vue @@ -87,13 +87,13 @@ export default { &:checked + .checkbox-indicator::before { color: $fallback--text; - color: var(--text, $fallback--text); + color: var(--inputText, $fallback--text); } &:indeterminate + .checkbox-indicator::before { content: '–'; color: $fallback--text; - color: var(--text, $fallback--text); + color: var(--inputText, $fallback--text); } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index a3f9b488..705a60a2 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -430,6 +430,20 @@ :label="$t('settings.text')" /> + + + +

{{ $t('settings.style.advanced_colors.pressed') }}

+ + + +

{{ $t('settings.style.advanced_colors.disabled') }}

+ + + +

{{ $t('settings.style.advanced_colors.toggled') }}

+ + + + +

{{ $t('settings.style.advanced_colors.tabs') }}

diff --git a/src/i18n/en.json b/src/i18n/en.json index 4efa41c3..771805e9 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -472,6 +472,7 @@ "selectedPost": "Selected post", "selectedMenu": "Selected menu item", "disabled": "Disabled", + "toggled": "Toggled", "tabs": "Tabs" }, "radii": { diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 533145d4..b9a23ad7 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -114,10 +114,7 @@ export const generateColors = (themeData) => { ? colors2to3(themeData.colors || themeData) : themeData.colors || themeData - const isLightOnDark = convert(sourceColors.bg).hsl.l < convert(sourceColors.text).hsl.l - const mod = isLightOnDark ? 1 : -1 - - const { colors, opacity } = getColors(sourceColors, themeData.opacity || {}, mod) + const { colors, opacity } = getColors(sourceColors, themeData.opacity || {}) const htmlColors = Object.entries(colors) .reduce((acc, [k, v]) => { @@ -381,25 +378,17 @@ export const getThemes = () => { } export const colors2to3 = (colors) => { return Object.entries(colors).reduce((acc, [slotName, color]) => { - const btnStates = ['', 'Pressed', 'Disabled', 'Toggled'] const btnPositions = ['', 'Panel', 'TopBar'] switch (slotName) { case 'lightBg': return { ...acc, highlight: color } - case 'btn': - return { - ...acc, - ...btnStates.reduce((stateAcc, state) => ({ ...stateAcc, ['btn' + state]: color }), {}) - } case 'btnText': return { ...acc, ...btnPositions - .map(position => btnStates.map(state => state + position)) - .flat() .reduce( - (statePositionAcc, statePosition) => - ({ ...statePositionAcc, ['btn' + statePosition + 'Text']: color }) + (statePositionAcc, position) => + ({ ...statePositionAcc, ['btn' + position + 'Text']: color }) , {} ) } diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js index 354009ee..98fba5ef 100644 --- a/src/services/theme_data/pleromafe.js +++ b/src/services/theme_data/pleromafe.js @@ -85,6 +85,8 @@ export const SLOT_INHERITANCE = { }, text: { depends: [], + layer: 'bg', + opacity: null, priority: 1 }, underlay: { @@ -422,6 +424,7 @@ export const SLOT_INHERITANCE = { // Buttons btn: { depends: ['fg'], + variant: 'btn', opacity: 'btn' }, btnText: { @@ -430,20 +433,23 @@ export const SLOT_INHERITANCE = { textColor: true }, btnPanelText: { - depends: ['panelText'], + depends: ['btnText'], layer: 'btnPanel', variant: 'btn', textColor: true }, btnTopBarText: { - depends: ['topBarText'], + depends: ['btnText'], layer: 'btnTopBar', variant: 'btn', textColor: true }, // Buttons: pressed - btnPressed: '--btn', + btnPressed: { + depends: ['btn'], + layer: 'btn' + }, btnPressedText: { depends: ['btnText'], layer: 'btn', @@ -451,7 +457,8 @@ export const SLOT_INHERITANCE = { textColor: true }, btnPressedPanel: { - depends: ['btnPressed'] + depends: ['btnPressed'], + layer: 'btn' }, btnPressedPanelText: { depends: ['btnPanelText'], @@ -469,6 +476,7 @@ export const SLOT_INHERITANCE = { // Buttons: toggled btnToggled: { depends: ['btn'], + layer: 'btn', color: (mod, btn) => brightness(mod * 20, btn).rgb }, btnToggledText: { @@ -496,25 +504,22 @@ export const SLOT_INHERITANCE = { color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg) }, btnDisabledText: { - depends: ['btnText'], + depends: ['btnText', 'btnDisabled'], layer: 'btn', variant: 'btnDisabled', - textColor: true, - color: (mod, text) => brightness(mod * -60, text).rgb + color: (mod, text, btn) => alphaBlend(text, 0.5, btn) }, btnDisabledPanelText: { - depends: ['btnPanelText'], + depends: ['btnPanelText', 'btnDisabled'], layer: 'btnPanel', variant: 'btnDisabled', - textColor: true, - color: (mod, text) => brightness(mod * -60, text).rgb + color: (mod, text, btn) => alphaBlend(text, 0.5, btn) }, btnDisabledTopBarText: { - depends: ['btnTopBarText'], + depends: ['btnTopBarText', 'btnDisabled'], layer: 'btnTopBar', variant: 'btnDisabled', - textColor: true, - color: (mod, text) => brightness(mod * -60, text).rgb + color: (mod, text, btn) => alphaBlend(text, 0.5, btn) }, // Input fields diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index 49b99148..e9ed3781 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -255,14 +255,17 @@ export const computeDynamicColor = (sourceColor, getColor, mod) => { } /** - * THE function you want to use. Takes provided colors and opacities, mod + * THE function you want to use. Takes provided colors and opacities * value and uses inheritance data to figure out color needed for the slot. */ -export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.reduce(({ colors, opacity }, key) => { +export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({ colors, opacity }, key) => { const value = SLOT_INHERITANCE[key] const isObject = typeof value === 'object' const isString = typeof value === 'string' const sourceColor = sourceColors[key] + const variant = value.variant || value.layer || 'bg' + const isLightOnDark = relativeLuminance(colors[variant] || sourceColors[variant]) < 0.5 + const mod = isLightOnDark ? 1 : -1 let outputColor = null if (sourceColor) { // Color is defined in source color @@ -318,7 +321,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu opacity ) ) - const isLightOnDark = relativeLuminance(bg) > 127 + const isLightOnDark = relativeLuminance(bg) > 0.5 const mod = isLightOnDark ? 1 : -1 if (value.textColor === 'bw') {