hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Breezy theme update + proper iheritance of virtual directives

Browse source
This commit is contained in:
Henry Jameson 2024-12-24 16:24:13 +02:00
parent 1cc9ff70e0
commit 6bf6d102ef
3 changed files with 36 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/root.style.js
View file

@ -3,6 +3,11 @@ export default {
selector: ':root',
notEditable: true,
validInnerComponents: [
// These are purely for --parent--text et such to work
'Text',
'Link',
'Border',
'Underlay',
'Modals',
'Popover',

15
src/services/theme_data/theme_data_3.service.js
View file

@ -264,6 +264,7 @@ export const init = ({
const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw
const dynamicVars = computed[selector] || {
lowerLevelSelector,
lowerLevelBackground,
lowerLevelVirtualDirectives,
lowerLevelVirtualDirectivesRaw
@ -283,6 +284,8 @@ export const init = ({
computed[selector] = computed[selector] || {}
computed[selector].computedRule = computedRule
computed[selector].dynamicVars = dynamicVars
computed[selector].virtualDirectives = computed[lowerLevelSelector]?.virtualDirectives || {}
computed[selector].virtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw || {}
if (virtualComponents.has(combination.component)) {
const virtualName = [
@ -330,8 +333,8 @@ export const init = ({
intendedTextColor,
newTextRule.directives.textAuto === 'preserve'
)
const virtualDirectives = computed[lowerLevelSelector].virtualDirectives || {}
const virtualDirectivesRaw = computed[lowerLevelSelector].virtualDirectivesRaw || {}
const virtualDirectives = { ...(computed[lowerLevelSelector].virtualDirectives || {}) }
const virtualDirectivesRaw = { ...(computed[lowerLevelSelector].virtualDirectivesRaw || {}) }
// Storing color data in lower layer to use as custom css properties
virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
@ -345,12 +348,8 @@ export const init = ({
selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
...combination,
directives: {},
virtualDirectives: {
[virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
},
virtualDirectivesRaw: {
[virtualName]: textColor
}
virtualDirectives,
virtualDirectivesRaw
}
} else {
computed[selector] = computed[selector] || {}

27
static/styles/Breezy DX.piss
View file

@ -31,14 +31,26 @@
link: #1CA4F3;
}
@palette.Panda {
bg: #EFF0F2;
fg: #292C32;
text: #1B1F22;
link: #1CA4F3;
accent: #1CA4F3;
cRed: #f41a51;
cBlue: #1CA4F3;
cGreen: #1af46e;
cOrange: #f4af1a;
}
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 --text / 0.35, 0 5 5 -5 #000000 / 0.35;
--buttonDefaultShadow: shadow | inset 0 0 0 1 --parent--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 --text / 0.35;
--defaultInputBevel: shadow | inset 0 0 0 1 --parent--text / 0.35;
--defaultInputHoverGlow: shadow | 0 0 0 1 --accent / 1;
--defaultInputFocusGlow: shadow | 0 0 0 1 --link / 1;
}
@ -67,8 +79,13 @@ Button:toggled:hover {
background: $blend(--bg 0.3 --accent)
}
Button {
background: --parent;
}
Input {
shadow: --defaultInputBevel
shadow: --defaultInputBevel;
background: --parent;
}
PanelHeader {
@ -78,3 +95,7 @@ PanelHeader {
Tab:hover {
shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow
}
Tab {
background: --parent;
}