From 91ed958309cb4935a20577a6c619033ea05ad6d9 Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Tue, 2 Jul 2024 11:34:29 -0500
Subject: [PATCH] Use blue-300 for running (#2179)

* Use blue-300 for running

* Use blue-300 for all status colors

---------

Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io>
---
 .../event/event-history-timeline.svelte       |  6 ++---
 .../components/heart-beat-indicator.svelte    | 26 +++++++++----------
 src/lib/components/workflow-status.svelte     | 10 +++----
 src/lib/holocene/badge.svelte                 |  4 +--
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/event/event-history-timeline.svelte b/src/lib/components/event/event-history-timeline.svelte
index c5f3f4b64..898676f0c 100644
--- a/src/lib/components/event/event-history-timeline.svelte
+++ b/src/lib/components/event/event-history-timeline.svelte
@@ -466,8 +466,8 @@
       .vis-item.vis-range.Initiated,
       .vis-item.vis-range.Scheduled
     ) {
-    background-color: theme(colors.blue.200);
-    border-color: theme(colors.blue.200);
+    background-color: theme(colors.blue.300);
+    border-color: theme(colors.blue.300);
     border-radius: 9999px;
     border-width: 2px;
     color: theme(colors.space-black);
@@ -480,7 +480,7 @@
       .vis-item.vis-point.Initiated,
       .vis-item.vis-point.Scheduled
     ) {
-    color: theme(colors.blue.200);
+    color: theme(colors.blue.300);
   }
 
   :global(.vis-item.vis-range.workflow.Running) {
diff --git a/src/lib/components/heart-beat-indicator.svelte b/src/lib/components/heart-beat-indicator.svelte
index 8ace01883..9aa5ca0d5 100644
--- a/src/lib/components/heart-beat-indicator.svelte
+++ b/src/lib/components/heart-beat-indicator.svelte
@@ -40,7 +40,7 @@
 
 <style lang="postcss">
   .heart-beat {
-    @apply relative flex items-center justify-center bg-blue-200 text-center;
+    @apply relative flex items-center justify-center bg-blue-300 text-center;
   }
 
   .heart-rate {
@@ -52,7 +52,7 @@
   }
 
   .fade-in {
-    @apply absolute right-0 top-0 h-full w-full bg-blue-200;
+    @apply absolute right-0 top-0 h-full w-full bg-blue-300;
 
     animation: heartRateIn 2s linear infinite;
     animation-delay: var(--animation-delay, 0);
@@ -65,35 +65,35 @@
     left: 0;
     animation: heartRateOut 2s linear infinite;
     animation-delay: var(--animation-delay, 0);
-    background: rgb(191 215 254);
+    background: rgb(147 187 253);
     background: linear-gradient(
       to left,
-      hsl(217deg 97% 87%) 50%,
-      rgb(191 215 254) 50%,
+      rgb(147 187 253) 50%,
+      rgb(147 187 253) 50%,
       rgb(255 255 255 / 0%) 100%
     );
     background: linear-gradient(
       to left,
-      rgb(191 215 254) 0%,
-      rgb(191 215 254) 50%,
+      rgb(147 187 253) 0%,
+      rgb(147 187 253) 50%,
       rgb(255 255 255 / 0%) 100%
     );
     background: linear-gradient(
       to left,
-      rgb(191 215 254) 0%,
-      rgb(191 215 254) 50%,
+      rgb(147 187 253) 0%,
+      rgb(147 187 253) 50%,
       rgb(255 255 255 / 0%) 100%
     );
     background: linear-gradient(
       to left,
-      rgb(191 215 254) 0%,
-      rgb(191 215 254) 50%,
+      rgb(147 187 253) 0%,
+      rgb(147 187 253) 50%,
       rgb(255 255 255 / 0%) 100%
     );
     background: linear-gradient(
       to right,
-      rgb(191 215 254) 0%,
-      rgb(191 215 254) 80%,
+      rgb(147 187 253) 0%,
+      rgb(147 187 253) 80%,
       rgb(255 255 255 / 0%) 100%
     );
   }
diff --git a/src/lib/components/workflow-status.svelte b/src/lib/components/workflow-status.svelte
index 572afb0d1..f7e017979 100644
--- a/src/lib/components/workflow-status.svelte
+++ b/src/lib/components/workflow-status.svelte
@@ -48,7 +48,7 @@
     {
       variants: {
         status: {
-          Running: 'bg-blue-200',
+          Running: 'bg-blue-300',
           TimedOut: 'bg-orange-200',
           Completed: 'bg-green-200',
           Failed: 'bg-red-200',
@@ -57,11 +57,11 @@
           Terminated: 'bg-yellow-200',
           Paused: 'bg-yellow-200',
           Unspecified: 'bg-slate-100',
-          Scheduled: 'bg-blue-200',
-          Started: 'bg-blue-200',
+          Scheduled: 'bg-blue-300',
+          Started: 'bg-blue-300',
           Open: 'bg-green-200',
-          New: 'bg-blue-200',
-          Initiated: 'bg-blue-200',
+          New: 'bg-blue-300',
+          Initiated: 'bg-blue-300',
           Fired: 'bg-pink-200',
           CancelRequested: 'bg-yellow-200',
           Signaled: 'bg-pink-200',
diff --git a/src/lib/holocene/badge.svelte b/src/lib/holocene/badge.svelte
index b9c3af832..be4caa249 100644
--- a/src/lib/holocene/badge.svelte
+++ b/src/lib/holocene/badge.svelte
@@ -5,13 +5,13 @@
   export type BadgeType = VariantProps<typeof types>['type'];
 
   const type = {
-    primary: 'bg-blue-200',
+    primary: 'bg-blue-300',
     secondary: 'bg-purple-200',
     default: 'bg-slate-100',
     warning: 'bg-yellow-200',
     success: 'bg-green-200',
     danger: 'bg-red-200',
-    count: 'h-6 w-6 min-w-max rounded-full bg-blue-200',
+    count: 'h-6 w-6 min-w-max rounded-full bg-blue-300',
   };
 
   const types = cva(