From 00eabd24474538f7cdbffa1ec38740f1e7ab23b9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 26 Mar 2025 16:20:42 +0200 Subject: [PATCH 1/4] fix breezy theme --- public/static/styles/Breezy DX.iss | 14 +++++++------- src/services/theme_data/theme_data_3.service.js | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/public/static/styles/Breezy DX.iss b/public/static/styles/Breezy DX.iss index fcaa7a8eb..e6ef9dfec 100644 --- a/public/static/styles/Breezy DX.iss +++ b/public/static/styles/Breezy DX.iss @@ -25,7 +25,7 @@ accent: #1CA4F3; cBlue: #1CA4F3; cRed: #f41a51; - cGreen: #1af46e; + cGreen: #0b6a30; cOrange: #f4af1a; border: #d8e6f9; link: #1CA4F3; @@ -39,7 +39,7 @@ accent: #1CA4F3; cRed: #f41a51; cBlue: #1CA4F3; - cGreen: #1af46e; + cGreen: #0b6a30; cOrange: #f4af1a; } @@ -47,10 +47,10 @@ Root { --badgeNotification: color | --cRed; --buttonDefaultHoverGlow: shadow | inset 0 0 0 1 --accent / 1; --buttonDefaultFocusGlow: shadow | inset 0 0 0 1 --accent / 1; - --buttonDefaultShadow: shadow | inset 0 0 0 1 --parent--text / 0.35, 0 5 5 -5 #000000 / 0.35; + --buttonDefaultShadow: shadow | inset 0 0 0 1 --text / 0.35, 0 5 5 -5 #000000 / 0.35; --buttonDefaultBevel: shadow | inset 0 14 14 -14 #FFFFFF / 0.1; --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05; - --defaultInputBevel: shadow | inset 0 0 0 1 --parent--text / 0.35; + --defaultInputBevel: shadow | inset 0 0 0 1 --text / 0.35; --defaultInputHoverGlow: shadow | 0 0 0 1 --accent / 1; --defaultInputFocusGlow: shadow | 0 0 0 1 --link / 1; } @@ -80,12 +80,12 @@ Button:toggled:hover { } Button { - background: --parent; + background: --bg; } Input { shadow: --defaultInputBevel; - background: --parent; + background: $mod(--bg -10); } PanelHeader { @@ -97,5 +97,5 @@ Tab:hover { } Tab { - background: --parent; + background: --bg; } diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index 320196493..810aec489 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -109,7 +109,7 @@ export const findColor = (color, { dynamicVars, staticVars }) => { try { targetColor = process(color, colorFunctions, { findColor }, { dynamicVars, staticVars }) } catch (e) { - console.error('Failure executing color function', e) + console.error('Failure executing color function', e ,'\n Function: ' + color) targetColor = '#FF00FF' } } From 926f45df8527f115540966e8cbeb966c688dc1b5 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 26 Mar 2025 16:21:41 +0200 Subject: [PATCH 2/4] add that teeny tiny nudge to buttons when they are pressed --- src/App.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/App.scss b/src/App.scss index 34cb590a2..521be05c6 100644 --- a/src/App.scss +++ b/src/App.scss @@ -388,6 +388,10 @@ nav { &:disabled { cursor: not-allowed; } + + &:active { + transform: translate(1px, 1px); + } } .menu-item { From a2d9c4db6aa0bb62bf5a18163e5bd6472c26a220 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 26 Mar 2025 17:37:41 +0200 Subject: [PATCH 3/4] simplify theme3 variable code and fix some issues --- .../theme_data/theme3_slot_functions.js | 5 +--- .../theme_data/theme_data_3.service.js | 25 ++++++++++--------- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js index e7293a03c..137f19bf0 100644 --- a/src/services/theme_data/theme3_slot_functions.js +++ b/src/services/theme_data/theme3_slot_functions.js @@ -112,10 +112,7 @@ export const colorFunctions = { const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb const amount = Number(amountArg) - const effectiveBackground = dynamicVars.lowerLevelBackground ?? - dynamicVars.background ?? - dynamicVars.inheritedBackground ?? - staticVars[colorArg] + const effectiveBackground = dynamicVars.lowerLevelBackground ?? color const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5 const mod = isLightOnDark ? 1 : -1 return brightness(amount * mod, color).rgb diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index 810aec489..b85d917de 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -78,23 +78,24 @@ export const findColor = (color, { dynamicVars, staticVars }) => { targetColor = { r, g, b } } else if (variableSlot.startsWith('parent')) { if (variableSlot === 'parent') { - const { r, g, b } = dynamicVars.lowerLevelBackground + const { r, g, b } = dynamicVars.lowerLevelBackground ?? {} targetColor = { r, g, b } } else { const virtualSlot = variableSlot.replace(/^parent/, '') targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb } } else { - switch (variableSlot) { - case 'inheritedBackground': - targetColor = convert(dynamicVars.inheritedBackground).rgb - break - case 'background': - targetColor = convert(dynamicVars.background).rgb - break - default: - targetColor = convert(staticVars[variableSlot]).rgb + const staticVar = staticVars[variableSlot] + const dynamicVar = dynamicVars[variableSlot] + if (!staticVar && !dynamicVar) { + console.warn(dynamicVars, variableSlot, dynamicVars[variableSlot]) + console.warn(`Couldn't find variable "${variableSlot}", falling back to magenta. Variables are: +Static: +${JSON.stringify(staticVars, null, 2)} +Dynamic: +${JSON.stringify(dynamicVars, null, 2)}`) } + targetColor = convert(staticVar ?? dynamicVar ?? '#FF00FF').rgb } if (modifier) { @@ -120,7 +121,7 @@ export const findColor = (color, { dynamicVars, staticVars }) => { Static: ${JSON.stringify(staticVars, null, 2)} Dynamic: -${JSON.stringify(dynamicVars, null, 2)}`, e) +${JSON.stringify(dynamicVars, null, 2)}\nError: ${e}`) } } @@ -516,7 +517,7 @@ export const init = ({ .filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c)) } else if (liteMode) { validInnerComponents = (component.validInnerComponentsLite || component.validInnerComponents || []) - } else if (component.name === 'Root' || component.states != null) { + } else if (component.name === 'Root' || component.states != null || component.background?.includes('--parent')) { validInnerComponents = component.validInnerComponents || [] } else { validInnerComponents = component From 7e0bc054d041f3e20b2cff6a3e6e68ca8d72ce88 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 26 Mar 2025 17:37:59 +0200 Subject: [PATCH 4/4] update BreezyDX --- public/static/styles/Breezy DX.iss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/public/static/styles/Breezy DX.iss b/public/static/styles/Breezy DX.iss index e6ef9dfec..69cc3befe 100644 --- a/public/static/styles/Breezy DX.iss +++ b/public/static/styles/Breezy DX.iss @@ -55,32 +55,33 @@ Root { --defaultInputFocusGlow: shadow | 0 0 0 1 --link / 1; } +Button { + background: --parent; +} + Button:disabled { shadow: --buttonDefaultBevel, --buttonDefaultShadow } Button:hover { + background: --inheritedBackground; shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow } Button:toggled { - background: $blend(--bg 0.3 --accent) + background: $blend(--inheritedBackground 0.3 --accent) } Button:pressed { - background: $blend(--bg 0.8 --accent) + background: $blend(--inheritedBackground 0.8 --accent) } Button:pressed:toggled { - background: $blend(--bg 0.2 --accent) + background: $blend(--inheritedBackground 0.2 --accent) } Button:toggled:hover { - background: $blend(--bg 0.3 --accent) -} - -Button { - background: --bg; + background: $blend(--inheritedBackground 0.3 --accent) } Input {