From 501047115da613f6ac182a9f0f1f2235744fa21d Mon Sep 17 00:00:00 2001
From: kirsty-hames <kirsty-hames@users.noreply.github.com>
Date: Tue, 7 May 2024 10:14:19 +0100
Subject: [PATCH] New: expand on Narrative progress indicator state styles
 (fixes #509) (#510)

* narrative progress indicator color and border-color styles added

* bg-color mixin narrative progress styles updated to include color, border-color and transparency conditions

* update legacy block-color mixin as per bg-color mixin
---
 .../adapt-contrib-narrative/narrative.less    |  6 +++++
 less/project/theme-blocks.less                | 27 +++++++++++++++++++
 less/project/theme-common.less                | 27 +++++++++++++++++++
 3 files changed, 60 insertions(+)

diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less
index c9c34327..2cafc3b7 100644
--- a/less/plugins/adapt-contrib-narrative/narrative.less
+++ b/less/plugins/adapt-contrib-narrative/narrative.less
@@ -21,15 +21,21 @@
 
   &__progress {
     background-color: @item-color;
+    color: @item-color-inverted;
+    border-color: @item-color-inverted;
     border-radius: 50%;
   }
 
   &__progress.is-visited {
     background-color: @visited;
+    color: @visited-inverted;
+    border-color: @visited-inverted;
   }
 
   &__progress.is-selected {
     background-color: @item-color-selected;
+    color: @item-color-inverted-selected;
+    border-color: @item-color-selected;
   }
 
   &__strapline-btn {
diff --git a/less/project/theme-blocks.less b/less/project/theme-blocks.less
index b9289205..7f589489 100644
--- a/less/project/theme-blocks.less
+++ b/less/project/theme-blocks.less
@@ -62,10 +62,37 @@
   .narrative {
     &__progress {
       background-color: fade(@@color-inverted, 50%);
+      color: @@color;
+      border-color: inherit;
     }
 
     &__progress.is-selected {
       background-color: @@color-inverted;
+      color: @@color;
+      border-color: @@color-inverted;
+    }
+  }
+
+  & when (@color = transparent-dark) {
+    .narrative {
+      &__progress {
+        background-color: darken(@@color-inverted, 50%);
+        color: @@color-inverted;
+        border-color: @@color;
+      }
+  
+      &__progress.is-selected  {
+        background-color: @@color-inverted;
+        color: darken(@@color-inverted, 50%);
+      }
+    }
+  }
+
+  & when (@color = transparent-light) {
+    .narrative {
+      &__progress, &__progress.is-selected {
+        color: @white;
+      }
     }
   }
 }
diff --git a/less/project/theme-common.less b/less/project/theme-common.less
index 11ff338a..7f625771 100644
--- a/less/project/theme-common.less
+++ b/less/project/theme-common.less
@@ -43,10 +43,37 @@
   .narrative {
     &__progress {
       background-color: fade(@@color-inverted, 50%);
+      color: @@color;
+      border-color: inherit;
     }
 
     &__progress.is-selected {
       background-color: @@color-inverted;
+      color: @@color;
+      border-color: @@color-inverted;
+    }
+  }
+
+  & when (@color = transparent-dark) {
+    .narrative {
+      &__progress {
+        background-color: darken(@@color-inverted, 50%);
+        color: @@color-inverted;
+        border-color: @@color;
+      }
+  
+      &__progress.is-selected  {
+        background-color: @@color-inverted;
+        color: darken(@@color-inverted, 50%);
+      }
+    }
+  }
+
+  & when (@color = transparent-light) {
+    .narrative {
+      &__progress, &__progress.is-selected {
+        color: @white;
+      }
     }
   }
 }