content: pass color directly through slots in various places

Primarily through generateColorStyle{Rules,Variables}, the former
of which is also refactored into generatePageLayout, which now
takes a direct color slot itself as well.

1 files changed, 16 insertions, 15 deletions

diff --git a/src/content/dependencies/generateColorStyleRules.js b/src/content/dependencies/generateColorStyleRules.js
index fbc32599..1b316a3c 100644
--- a/src/content/dependencies/generateColorStyleRules.js
+++ b/src/content/dependencies/generateColorStyleRules.js
@@ -1,26 +1,27 @@
 export default {
-  contentDependencies: [
-    'generateColorStyleVariables',
-  ],
+  contentDependencies: ['generateColorStyleVariables'],
+  extraDependencies: ['html'],
 
-  relations(relation, color) {
-    const relations = {};
+  relations: (relation) =>
+    ({variables: relation('generateColorStyleVariables')}),
 
-    if (color) {
-      relations.variables =
-        relation('generateColorStyleVariables', color);
-    }
-
-    return relations;
+  slots: {
+    color: {validate: v => v.isColor},
   },
 
-  generate(relations) {
-    if (!relations.variables) return '';
+  generate(relations, slots) {
+    if (!slots.color) {
+      return '';
+    }
 
     return [
       `:root {`,
-      // This is pretty hilariously hacky.
-      ...relations.variables.split(';').map(line => line + ';'),
+      ...(
+        relations.variables
+          .slot('color', slots.color)
+          .content
+          .split(';')
+          .map(line => line + ';')),
       `}`,
     ].join('\n');
   },