content: image-box color context

5 files changed, 22 insertions, 1 deletions

diff --git a/src/content/dependencies/generateColorStyleAttribute.js b/src/content/dependencies/generateColorStyleAttribute.js
index b1901616..03d95ac5 100644
--- a/src/content/dependencies/generateColorStyleAttribute.js
+++ b/src/content/dependencies/generateColorStyleAttribute.js
@@ -20,6 +20,7 @@ export default {
     context: {
       validate: v => v.is(
         'any-content',
+        'image-box',
         'primary-only'),
 
       default: 'any-content',
diff --git a/src/content/dependencies/generateColorStyleVariables.js b/src/content/dependencies/generateColorStyleVariables.js
index 7cd04bd1..d1c121fe 100644
--- a/src/content/dependencies/generateColorStyleVariables.js
+++ b/src/content/dependencies/generateColorStyleVariables.js
@@ -9,6 +9,7 @@ export default {
     context: {
       validate: v => v.is(
         'any-content',
+        'image-box',
         'page-root',
         'primary-only'),
 
@@ -51,6 +52,13 @@ export default {
         selectedProperties = anyContent;
         break;
 
+      case 'image-box':
+        selectedProperties = [
+          `--primary-color: ${primary}`,
+          `--dim-color: ${dim}`,
+        ];
+        break;
+
       case 'page-root':
         selectedProperties = [
           ...anyContent,
diff --git a/src/content/dependencies/generateCoverGrid.js b/src/content/dependencies/generateCoverGrid.js
index 5636e4f3..e2212b70 100644
--- a/src/content/dependencies/generateCoverGrid.js
+++ b/src/content/dependencies/generateCoverGrid.js
@@ -31,6 +31,7 @@ export default {
         }).map(({image, link, name, info}, index) =>
             link.slots({
               attributes: {class: ['grid-item', 'box']},
+              colorContext: 'image-box',
               content: [
                 image.slots({
                   thumb: 'medium',
diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index bc3cc173..fb4b59b6 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -158,7 +158,10 @@ export default {
 
     if (slots.color) {
       const colorStyle =
-        relations.colorStyle.slot('color', slots.color);
+        relations.colorStyle.slots({
+          color: slots.color,
+          context: 'image-box',
+        });
 
       if (willLink) {
         linkAttributes.add(colorStyle);
diff --git a/src/content/dependencies/linkThing.js b/src/content/dependencies/linkThing.js
index 320368a8..60fcc3ef 100644
--- a/src/content/dependencies/linkThing.js
+++ b/src/content/dependencies/linkThing.js
@@ -36,6 +36,7 @@ export default {
 
     colorContext: {
       validate: v => v.is(
+        'image-box',
         'primary-only'),
 
       default: 'primary-only',
@@ -81,6 +82,13 @@ export default {
       let selectColors;
 
       switch (slots.colorContext) {
+        case 'image-box':
+          selectColors = {
+            '--primary-color': 'primary',
+            '--dim-color': 'dim',
+          };
+          break;
+
         case 'primary-only':
           selectColors = {
             '--primary-color': 'primary',