content: generateColorStyleAttribute

12 files changed, 119 insertions, 145 deletions

diff --git a/src/content/dependencies/generateAlbumSecondaryNav.js b/src/content/dependencies/generateAlbumSecondaryNav.js
index bbf98875..d2dd7db7 100644
--- a/src/content/dependencies/generateAlbumSecondaryNav.js
+++ b/src/content/dependencies/generateAlbumSecondaryNav.js
@@ -2,7 +2,7 @@ import {stitchArrays} from '#sugar';
 
 export default {
   contentDependencies: [
-    'generateColorStyleVariables',
+    'generateColorStyleAttribute',
     'generatePreviousNextLinks',
     'generateSecondaryNav',
     'linkAlbumDynamically',
@@ -48,9 +48,9 @@ export default {
       album.groups
         .map(group => relation('linkGroup', group));
 
-    relations.colorVariables =
+    relations.colorStyles =
       album.groups
-        .map(() => relation('generateColorStyleVariables'));
+        .map(group => relation('generateColorStyleAttribute', group.color));
 
     if (query.adjacentGroupInfo) {
       relations.previousNextLinks =
@@ -78,13 +78,6 @@ export default {
     return relations;
   },
 
-  data(query, album) {
-    return {
-      groupColors:
-        album.groups.map(group => group.color),
-    };
-  },
-
   slots: {
     mode: {
       validate: v => v.is('album', 'track'),
@@ -92,24 +85,22 @@ export default {
     },
   },
 
-  generate(data, relations, slots, {html, language}) {
+  generate(relations, slots, {html, language}) {
     return relations.secondaryNav.slots({
       class: 'nav-links-groups',
       content:
         stitchArrays({
-          colorVariables: relations.colorVariables,
+          colorStyle: relations.colorStyles,
           groupLink: relations.groupLinks,
           previousNextLinks: relations.previousNextLinks ?? null,
           previousAlbumLink: relations.previousAlbumLinks ?? null,
           nextAlbumLink: relations.nextAlbumLinks ?? null,
-          groupColor: data.groupColors,
         }).map(({
-            colorVariables,
+            colorStyle,
             groupLink,
             previousNextLinks,
             previousAlbumLink,
             nextAlbumLink,
-            groupColor,
           }) => {
             if (
               slots.mode === 'track' ||
@@ -129,10 +120,7 @@ export default {
 
             return (
               html.tag('span',
-                {style:
-                  colorVariables
-                    .slot('color', groupColor)
-                    .content},
+                colorStyle,
 
                 [
                   language.$('albumSidebar.groupBox.title', {
diff --git a/src/content/dependencies/generateColorStyleAttribute.js b/src/content/dependencies/generateColorStyleAttribute.js
new file mode 100644
index 00000000..af8633aa
--- /dev/null
+++ b/src/content/dependencies/generateColorStyleAttribute.js
@@ -0,0 +1,37 @@
+export default {
+  contentDependencies: ['generateColorStyleVariables'],
+  extraDependencies: ['html'],
+
+  relations: (relation) => ({
+    colorVariables:
+      relation('generateColorStyleVariables'),
+  }),
+
+  data: (color) => ({
+    color:
+      color ?? null,
+  }),
+
+  slots: {
+    color: {
+      validate: v => v.isColor,
+    },
+
+    context: {
+      validate: v => v.is(
+        'any-content',
+        'page-root',
+        'primary-only'),
+
+      default: 'any-content',
+    },
+  },
+
+  generate: (data, relations, slots) => ({
+    style:
+      relations.colorVariables.slots({
+        color: slots.color ?? data.color,
+        context: slots.context,
+      }).content,
+  }),
+};
diff --git a/src/content/dependencies/generateColorStyleRules.js b/src/content/dependencies/generateColorStyleRules.js
index 3f1d0130..c412b8f2 100644
--- a/src/content/dependencies/generateColorStyleRules.js
+++ b/src/content/dependencies/generateColorStyleRules.js
@@ -2,15 +2,26 @@ export default {
   contentDependencies: ['generateColorStyleVariables'],
   extraDependencies: ['html'],
 
-  relations: (relation) =>
-    ({variables: relation('generateColorStyleVariables')}),
+  relations: (relation) => ({
+    variables:
+      relation('generateColorStyleVariables'),
+  }),
+
+  data: (color) => ({
+    color:
+      color ?? null,
+  }),
 
   slots: {
-    color: {validate: v => v.isColor},
+    color: {
+      validate: v => v.isColor,
+    },
   },
 
-  generate(relations, slots) {
-    if (!slots.color) {
+  generate(data, relations, slots) {
+    const color = data.color ?? slots.color;
+
+    if (!color) {
       return '';
     }
 
@@ -19,7 +30,7 @@ export default {
       ...(
         relations.variables
           .slots({
-            color: slots.color,
+            color,
             context: 'page-root',
             mode: 'property-list',
           })
diff --git a/src/content/dependencies/generateCommentaryEntry.js b/src/content/dependencies/generateCommentaryEntry.js
index b4f24686..522a0284 100644
--- a/src/content/dependencies/generateCommentaryEntry.js
+++ b/src/content/dependencies/generateCommentaryEntry.js
@@ -2,7 +2,7 @@ import {empty} from '#sugar';
 
 export default {
   contentDependencies: [
-    'generateColorStyleVariables',
+    'generateColorStyleAttribute',
     'linkArtist',
     'transformContent',
   ],
@@ -31,8 +31,8 @@ export default {
         ? relation('transformContent', entry.body)
         : null),
 
-    colorVariables:
-      relation('generateColorStyleVariables'),
+    colorStyle:
+      relation('generateColorStyleAttribute'),
   }),
 
   data: (entry) => ({
@@ -82,19 +82,16 @@ export default {
     }
 
     const style =
-      (slots.color
-        ? relations.colorVariables
-            .slot('color', slots.color)
-            .content
-        : null);
+      slots.color &&
+        relations.colorStyle.slot('color', slots.color);
 
     return html.tags([
       html.tag('p', {class: 'commentary-entry-heading'},
-        {style},
+        style,
         language.$(...titleParts, titleOptions)),
 
       html.tag('blockquote', {class: 'commentary-entry-body'},
-        {style},
+        style,
         relations.bodyContent.slot('mode', 'multiline')),
     ]);
   },
diff --git a/src/content/dependencies/generateContentHeading.js b/src/content/dependencies/generateContentHeading.js
index 57bacbe5..816cc98a 100644
--- a/src/content/dependencies/generateContentHeading.js
+++ b/src/content/dependencies/generateContentHeading.js
@@ -1,9 +1,9 @@
 export default {
   extraDependencies: ['html'],
-  contentDependencies: ['generateColorStyleVariables'],
+  contentDependencies: ['generateColorStyleAttribute'],
 
   relations: (relation) => ({
-    colorVariables: relation('generateColorStyleVariables'),
+    colorStyle: relation('generateColorStyleAttribute'),
   }),
 
   slots: {
@@ -22,10 +22,7 @@ export default {
       {tabindex: '0'},
 
       slots.color &&
-        {style:
-          relations.colorVariables
-            .slot('color', slots.color)
-            .content},
+        relations.colorStyle.slot('color', slots.color),
 
       [
         html.tag('span', {class: 'content-heading-main-title'},
diff --git a/src/content/dependencies/generateFlashIndexPage.js b/src/content/dependencies/generateFlashIndexPage.js
index 621d62aa..57072a1f 100644
--- a/src/content/dependencies/generateFlashIndexPage.js
+++ b/src/content/dependencies/generateFlashIndexPage.js
@@ -2,7 +2,7 @@ import {empty, stitchArrays} from '#sugar';
 
 export default {
   contentDependencies: [
-    'generateColorStyleVariables',
+    'generateColorStyleAttribute',
     'generateCoverGrid',
     'generatePageLayout',
     'image',
@@ -29,13 +29,13 @@ export default {
     layout:
       relation('generatePageLayout'),
 
-    jumpLinkColorVariables:
+    jumpLinkColorStyles:
       query.jumpActs
-        .map(() => relation('generateColorStyleVariables')),
+        .map(act => relation('generateColorStyleAttribute', act.jumpColor)),
 
-    actColorVariables:
+    actColorStyles:
       query.flashActs
-        .map(() => relation('generateColorStyleVariables')),
+        .map(act => relation('generateColorStyleAttribute', act.color)),
 
     actLinks:
       query.flashActs
@@ -61,10 +61,6 @@ export default {
       query.jumpActs
         .map(act => act.directory),
 
-    jumpLinkColors:
-      query.jumpActs
-        .map(act => act.jumpColor),
-
     jumpLinkLabels:
       query.jumpActs
         .map(act => act.jump),
@@ -73,10 +69,6 @@ export default {
       query.flashActs
         .map(act => act.directory),
 
-    actColors:
-      query.flashActs
-        .map(act => act.color),
-
     actCoverGridNames:
       query.flashActs
         .map(act => act.flashes
@@ -101,28 +93,21 @@ export default {
 
           html.tag('ul', {class: 'quick-info'},
             stitchArrays({
-              colorVariables: relations.jumpLinkColorVariables,
+              colorStyle: relations.jumpLinkColorStyles,
               anchor: data.jumpLinkAnchors,
-              color: data.jumpLinkColors,
               label: data.jumpLinkLabels,
-            }).map(({colorVariables, anchor, color, label}) =>
+            }).map(({colorStyle, anchor, label}) =>
                 html.tag('li',
                   html.tag('a',
                     {href: '#' + anchor},
-
-                    {style:
-                      colorVariables
-                        .slot('color', color)
-                        .content},
-
+                    colorStyle,
                     label)))),
         ],
 
         stitchArrays({
-          colorVariables: relations.actColorVariables,
+          colorStyle: relations.actColorStyles,
           actLink: relations.actLinks,
           anchor: data.actAnchors,
-          color: data.actColors,
 
           coverGrid: relations.actCoverGrids,
           coverGridImages: relations.actCoverGridImages,
@@ -130,10 +115,9 @@ export default {
           coverGridNames: data.actCoverGridNames,
           coverGridPaths: data.actCoverGridPaths,
         }).map(({
-            colorVariables,
-            anchor,
-            color,
+            colorStyle,
             actLink,
+            anchor,
 
             coverGrid,
             coverGridImages,
@@ -143,12 +127,7 @@ export default {
           }, index) => [
             html.tag('h2',
               {id: anchor},
-
-              {style:
-                colorVariables
-                  .slot('color', color)
-                  .content},
-
+              colorStyle,
               actLink),
 
             coverGrid.slots({
diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js
index 8d123c92..3d10298d 100644
--- a/src/content/dependencies/generateGroupInfoPage.js
+++ b/src/content/dependencies/generateGroupInfoPage.js
@@ -3,7 +3,7 @@ import {empty, stitchArrays} from '#sugar';
 export default {
   contentDependencies: [
     'generateAbsoluteDatetimestamp',
-    'generateColorStyleVariables',
+    'generateColorStyleAttribute',
     'generateContentHeading',
     'generateGroupNavLinks',
     'generateGroupSecondaryNav',
@@ -64,9 +64,9 @@ export default {
       sec.albums.galleryLink =
         relation('linkGroupGallery', group);
 
-      sec.albums.colorVariables =
+      sec.albums.albumColorStyles =
         group.albums
-          .map(() => relation('generateColorStyleVariables'));
+          .map(album => relation('generateColorStyleAttribute', album.color));
 
       sec.albums.albumLinks =
         group.albums
@@ -96,9 +96,6 @@ export default {
     data.name = group.name;
     data.color = group.color;
 
-    data.albumColors =
-      group.albums.map(album => album.color);
-
     return data;
   },
 
@@ -145,14 +142,12 @@ export default {
                 albumLink: sec.albums.albumLinks,
                 groupLink: sec.albums.groupLinks,
                 datetimestamp: sec.albums.datetimestamps,
-                colorVariables: sec.albums.colorVariables,
-                albumColor: data.albumColors,
+                albumColorStyle: sec.albums.albumColorStyles,
               }).map(({
                   albumLink,
                   groupLink,
                   datetimestamp,
-                  colorVariables,
-                  albumColor,
+                  albumColorStyle,
                 }) => {
                   const prefix = 'groupInfoPage.albumList.item';
                   const parts = [prefix];
@@ -182,11 +177,7 @@ export default {
 
                   return (
                     html.tag('li',
-                      {style:
-                        colorVariables
-                          .slot('color', albumColor)
-                          .content},
-
+                      albumColorStyle,
                       language.$(...parts, options)));
                 })),
           ],
diff --git a/src/content/dependencies/generateGroupSecondaryNav.js b/src/content/dependencies/generateGroupSecondaryNav.js
index 43c78a0f..c649e300 100644
--- a/src/content/dependencies/generateGroupSecondaryNav.js
+++ b/src/content/dependencies/generateGroupSecondaryNav.js
@@ -1,6 +1,6 @@
 export default {
   contentDependencies: [
-    'generateColorStyleVariables',
+    'generateColorStyleAttribute',
     'generatePreviousNextLinks',
     'generateSecondaryNav',
     'linkGroupDynamically',
@@ -34,7 +34,7 @@ export default {
     };
   },
 
-  relations(relation, query, sprawl, _group) {
+  relations(relation, query, sprawl, group) {
     const relations = {};
 
     relations.secondaryNav =
@@ -45,8 +45,8 @@ export default {
         relation('linkListing', sprawl.groupsByCategoryListing);
     }
 
-    relations.colorVariables =
-      relation('generateColorStyleVariables');
+    relations.colorStyle =
+      relation('generateColorStyleAttribute', group.category.color);
 
     if (query.previousGroup || query.nextGroup) {
       relations.previousNextLinks =
@@ -68,7 +68,6 @@ export default {
 
   data: (query, sprawl, group) => ({
     categoryName: group.category.name,
-    categoryColor: group.category.color,
   }),
 
   generate(data, relations, {html, language}) {
@@ -89,10 +88,7 @@ export default {
         (!relations.previousGroupLink && !relations.nextGroupLink
           ? categoryLink
           : html.tag('span',
-              {style:
-                relations.colorVariables
-                  .slot('color', data.categoryColor)
-                  .content},
+              relations.colorStyle,
 
               [
                 categoryLink.slot('color', false),
diff --git a/src/content/dependencies/generateGroupSidebarCategoryDetails.js b/src/content/dependencies/generateGroupSidebarCategoryDetails.js
index 19c5447c..69de373b 100644
--- a/src/content/dependencies/generateGroupSidebarCategoryDetails.js
+++ b/src/content/dependencies/generateGroupSidebarCategoryDetails.js
@@ -2,7 +2,7 @@ import {empty, stitchArrays} from '#sugar';
 
 export default {
   contentDependencies: [
-    'generateColorStyleVariables',
+    'generateColorStyleAttribute',
     'linkGroup',
     'linkGroupGallery',
   ],
@@ -11,8 +11,8 @@ export default {
 
   relations(relation, category) {
     return {
-      colorVariables:
-        relation('generateColorStyleVariables'),
+      colorStyle:
+        relation('generateColorStyleAttribute', category.color),
 
       groupInfoLinks:
         category.groups.map(group =>
@@ -30,7 +30,6 @@ export default {
     const data = {};
 
     data.name = category.name;
-    data.color = category.color;
 
     data.isCurrentCategory = category === group.category;
 
@@ -54,10 +53,7 @@ export default {
 
       [
         html.tag('summary',
-          {style:
-            relations.colorVariables
-              .slot('color', data.color)
-              .content},
+          relations.colorStyle,
 
           html.tag('span',
             language.$('groupSidebar.groupList.category', {
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index b5121386..25664148 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -12,7 +12,7 @@ export default {
     'generateAlbumSidebar',
     'generateAlbumStyleRules',
     'generateChronologyLinks',
-    'generateColorStyleVariables',
+    'generateColorStyleAttribute',
     'generateCommentarySection',
     'generateContentHeading',
     'generateContributionList',
@@ -142,9 +142,9 @@ export default {
       otherReleases.heading =
         relation('generateContentHeading');
 
-      otherReleases.colorVariables =
+      otherReleases.colorStyles =
         track.otherReleases
-          .map(() => relation('generateColorStyleVariables'));
+          .map(track => relation('generateColorStyleAttribute', track.color));
 
       otherReleases.trackLinks =
         track.otherReleases
@@ -315,9 +315,6 @@ export default {
       hasTrackNumbers: track.album.hasTrackNumbers,
       trackNumber: track.album.tracks.indexOf(track) + 1,
 
-      otherReleaseColors:
-        track.otherReleases.map(track => track.color),
-
       numAdditionalFiles: track.additionalFiles.length,
     };
   },
@@ -387,14 +384,12 @@ export default {
                 trackLink: sec.otherReleases.trackLinks,
                 albumLink: sec.otherReleases.albumLinks,
                 datetimestamp: sec.otherReleases.datetimestamps,
-                colorVariables: sec.otherReleases.colorVariables,
-                color: data.otherReleaseColors,
+                colorStyle: sec.otherReleases.colorStyles,
               }).map(({
                   trackLink,
                   albumLink,
                   datetimestamp,
-                  colorVariables,
-                  color,
+                  colorStyle,
                 }) => {
                   const parts = ['releaseInfo.alsoReleasedAs.item'];
                   const options = {};
@@ -413,11 +408,7 @@ export default {
 
                   return (
                     html.tag('li',
-                      {style:
-                        colorVariables
-                          .slot('color', color)
-                          .content},
-
+                      colorStyle,
                       language.$(...parts, options)));
                 })),
           ],
diff --git a/src/content/dependencies/generateWikiHomeContentRow.js b/src/content/dependencies/generateWikiHomeContentRow.js
index c8354fea..8bc54e15 100644
--- a/src/content/dependencies/generateWikiHomeContentRow.js
+++ b/src/content/dependencies/generateWikiHomeContentRow.js
@@ -1,20 +1,14 @@
 export default {
-  contentDependencies: ['generateColorStyleVariables'],
+  contentDependencies: ['generateColorStyleAttribute'],
   extraDependencies: ['html'],
 
-  relations(relation) {
-    return {
-      colorVariables:
-        relation('generateColorStyleVariables'),
-    };
-  },
+  relations: (relation, row) => ({
+    colorStyle:
+      relation('generateColorStyleAttribute', row.color),
+  }),
 
-  data(row) {
-    return {
-      name: row.name,
-      color: row.color,
-    };
-  },
+  data: (row) =>
+    ({name: row.name}),
 
   slots: {
     content: {type: 'html'},
@@ -22,10 +16,7 @@ export default {
 
   generate: (data, relations, slots, {html}) =>
     html.tag('section', {class: 'row'},
-      {style:
-        relations.colorVariables
-          .slot('color', data.color)
-          .content},
+      relations.colorStyle,
 
       [
         html.tag('h2', data.name),
diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index 91bae43c..9fa2ba1c 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -14,10 +14,11 @@ export default {
     'to',
   ],
 
-  contentDependencies: ['generateColorStyleVariables'],
+  contentDependencies: ['generateColorStyleAttribute'],
 
   relations: (relation) => ({
-    colorVariables: relation('generateColorStyleVariables'),
+    colorStyle:
+      relation('generateColorStyleAttribute'),
   }),
 
   data(artTags) {
@@ -122,9 +123,8 @@ export default {
 
     const colorStyle =
       slots.color &&
-        relations.colorVariables
-          .slot('color', slots.color)
-          .content;
+        relations.colorStyle
+          .slot('color', slots.color);
 
     const willSquare = slots.square;
 
@@ -262,7 +262,7 @@ export default {
 
       wrapped =
         html.tag('div', {class: 'image-container'},
-          {style: styleOnContainer},
+          styleOnContainer,
 
           !originalSrc &&
             {style: 'placeholder-image'},
@@ -295,7 +295,7 @@ export default {
           html.tag('a', {class: ['box', 'image-link']},
             {id: idOnLink},
             {class: classOnLink},
-            {style: styleOnLink},
+            styleOnLink,
 
             hide &&
               {class: 'js-hide'},