diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js index ae644763a..3ca8af437 100644 --- a/src/services/theme_data/theme3_slot_functions.js +++ b/src/services/theme_data/theme3_slot_functions.js @@ -81,9 +81,27 @@ export const colorFunctions = { return alphaBlend(background, amount, foreground) } }, + boost: { + argsNeeded: 2, + documentation: 'If given color is dark makes it darker, if color is light - makes it lighter', + args: [ + 'color: source color', + 'amount: how much darken/brighten the color' + ], + exec: (args, { findColor }, { dynamicVars, staticVars }) => { + const [colorArg, amountArg] = args + + const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb + const amount = Number(amountArg) + + const isLight = relativeLuminance(color) < 0.5 + const mod = isLight ? -1 : 1 + return brightness(amount * mod, color).rgb + } + }, mod: { argsNeeded: 2, - documentation: 'Old function that increases or decreases brightness depending if color is dark or light. Advised against using it as it might give unexpected results.', + documentation: 'Old function that increases or decreases brightness depending if background color is dark or light. Advised against using it as it might give unexpected results.', args: [ 'color: source color', 'amount: how much darken/brighten the color' diff --git a/static/styles/Redmond DX.iss b/static/styles/Redmond DX.iss index 7777b7d33..76e325932 100644 --- a/static/styles/Redmond DX.iss +++ b/static/styles/Redmond DX.iss @@ -94,7 +94,7 @@ Button:toggled:pressed { } Input { - background: $mod(--bg -80); + background: $boost(--bg 20); shadow: --defaultInputBevel; roundness: 0 }