content: generateTrackInfoPage: colorize tooltips

1 files changed, 22 insertions, 2 deletions

diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index 099b889..11fb2b9 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -13,6 +13,7 @@ export default {
     'generateAlbumSidebar',
     'generateAlbumStyleRules',
     'generateChronologyLinks',
+    'generateColorStyleVariables',
     'generateCommentarySection',
     'generateContentHeading',
     'generateContributionList',
@@ -142,6 +143,10 @@ export default {
       otherReleases.heading =
         relation('generateContentHeading');
 
+      otherReleases.colorVariables =
+        track.otherReleases
+          .map(() => relation('generateColorStyleVariables'));
+
       otherReleases.trackLinks =
         track.otherReleases
           .map(track => relation('linkTrack', track));
@@ -311,6 +316,9 @@ export default {
       hasTrackNumbers: track.album.hasTrackNumbers,
       trackNumber: track.album.tracks.indexOf(track) + 1,
 
+      otherReleaseColors:
+        track.otherReleases.map(track => track.color),
+
       numAdditionalFiles: track.additionalFiles.length,
     };
   },
@@ -381,9 +389,20 @@ export default {
                 trackLink: sec.otherReleases.trackLinks,
                 albumLink: sec.otherReleases.albumLinks,
                 datetimestamp: sec.otherReleases.datetimestamps,
-              }).map(({trackLink, albumLink, datetimestamp}) => {
+                colorVariables: sec.otherReleases.colorVariables,
+                color: data.otherReleaseColors,
+              }).map(({
+                  trackLink,
+                  albumLink,
+                  datetimestamp,
+                  colorVariables,
+                  color,
+                }) => {
                   const parts = ['releaseInfo.alsoReleasedAs.item'];
-                  const options = {track: trackLink, album: albumLink};
+                  const options = {};
+
+                  options.track = trackLink.slot('color', false);
+                  options.album = albumLink;
 
                   if (datetimestamp) {
                     parts.push('withYear');
@@ -396,6 +415,7 @@ export default {
 
                   return (
                     html.tag('li',
+                      {style: colorVariables.slot('color', color).content},
                       language.$(...parts, options)));
                 })),
           ],