pleroma-fe

commit: 6bf6d102ef56cafd880bdbe732ae3f2300464d9a
parent 1cc9ff70e0aa929d7146fa8390fe491190dd131c
Author: Henry Jameson <me@hjkos.com>
Date:   Tue, 24 Dec 2024 16:24:13 +0200

Breezy theme update + proper iheritance of virtual directives

Diffstat:
M
src/components/root.style.js
5
+++++
M
src/services/theme_data/theme_data_3.service.js
15
+++++++--------
M
static/styles/Breezy DX.piss
27
++++++++++++++++++++++++---

3 files changed, 36 insertions(+), 11 deletions(-)
diff --git a/src/components/root.style.js b/src/components/root.style.js
@@ -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',
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -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] || {}
diff --git a/static/styles/Breezy DX.piss b/static/styles/Breezy DX.piss
@@ -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;
+}