Use blue-300 for running (#2179)

* Use blue-300 for running * Use blue-300 for all status colors --------- Co-authored-by: Laura Whitaker <[email protected]>
temporalio · Jul 2, 2024 · 91ed958 · 91ed958
1 parent c844960
commit 91ed958
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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(