From ae93ab04d0775a5638a86adf2a71d067549456a3 Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <qznebula@protonmail.com>
Date: Tue, 27 May 2025 15:57:52 -0300
Subject: content: generateColorStyleRules -> generateColorStyleTag

---
 .../dependencies/generateColorStyleRules.js        | 42 -------------------
 src/content/dependencies/generateColorStyleTag.js  | 47 ++++++++++++++++++++++
 src/content/dependencies/generatePageLayout.js     | 12 +++---
 3 files changed, 53 insertions(+), 48 deletions(-)
 delete mode 100644 src/content/dependencies/generateColorStyleRules.js
 create mode 100644 src/content/dependencies/generateColorStyleTag.js

(limited to 'src')

diff --git a/src/content/dependencies/generateColorStyleRules.js b/src/content/dependencies/generateColorStyleRules.js
deleted file mode 100644
index c412b8f2..00000000
--- a/src/content/dependencies/generateColorStyleRules.js
+++ /dev/null
@@ -1,42 +0,0 @@
-export default {
-  contentDependencies: ['generateColorStyleVariables'],
-  extraDependencies: ['html'],
-
-  relations: (relation) => ({
-    variables:
-      relation('generateColorStyleVariables'),
-  }),
-
-  data: (color) => ({
-    color:
-      color ?? null,
-  }),
-
-  slots: {
-    color: {
-      validate: v => v.isColor,
-    },
-  },
-
-  generate(data, relations, slots) {
-    const color = data.color ?? slots.color;
-
-    if (!color) {
-      return '';
-    }
-
-    return [
-      `:root {`,
-      ...(
-        relations.variables
-          .slots({
-            color,
-            context: 'page-root',
-            mode: 'property-list',
-          })
-          .content
-          .map(line => line + ';')),
-      `}`,
-    ].join('\n');
-  },
-};
diff --git a/src/content/dependencies/generateColorStyleTag.js b/src/content/dependencies/generateColorStyleTag.js
new file mode 100644
index 00000000..3b24fdfa
--- /dev/null
+++ b/src/content/dependencies/generateColorStyleTag.js
@@ -0,0 +1,47 @@
+export default {
+  contentDependencies: ['generateColorStyleVariables'],
+  extraDependencies: ['html'],
+
+  relations: (relation) => ({
+    variables:
+      relation('generateColorStyleVariables'),
+  }),
+
+  data: (color) => ({
+    color:
+      color ?? null,
+  }),
+
+  slots: {
+    color: {
+      validate: v => v.isColor,
+    },
+  },
+
+  generate(data, relations, slots, {html}) {
+    const color =
+      data.color ?? slots.color;
+
+    if (!color) {
+      return html.blank();
+    }
+
+    const style =
+      html.tag('style', {class: 'color-style'},
+        {'data-color': color},
+
+        `:root {\n` +
+        relations.variables
+          .slots({
+            color,
+            context: 'page-root',
+            mode: 'property-list',
+          })
+          .content
+          .map(line => '    ' + line + ';\n')
+          .join('') +
+        `}`);
+
+    return style;
+  },
+};
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index 2a4f5ae2..db5b0d71 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -3,7 +3,7 @@ import {atOffset, empty, repeat} from '#sugar';
 
 export default {
   contentDependencies: [
-    'generateColorStyleRules',
+    'generateColorStyleTag',
     'generateFooterLocalizationLinks',
     'generateImageOverlay',
     'generatePageSidebar',
@@ -60,8 +60,8 @@ export default {
         relation('transformContent', sprawl.footerContent);
     }
 
-    relations.colorStyleRules =
-      relation('generateColorStyleRules');
+    relations.colorStyleTag =
+      relation('generateColorStyleTag');
 
     relations.imageOverlay =
       relation('generateImageOverlay');
@@ -748,10 +748,10 @@ export default {
               href: to('staticCSS.path', 'site.css'),
             }),
 
-            html.tag('style', [
-              relations.colorStyleRules
-                .slot('color', slots.color ?? data.wikiColor),
+            relations.colorStyleTag
+              .slot('color', slots.color ?? data.wikiColor),
 
+            html.tag('style', [
               fallbackBackgroundStyleRule,
               goshFrigginDarnitStyleRule,
               slots.styleRules,
-- 
cgit 1.3.0-6-gf8a5