From 0ad67e335da71eb2502711a8927007a188c4ddc6 Mon Sep 17 00:00:00 2001
From: Jason <mrloureed@gmail.com>
Date: Thu, 18 Apr 2024 16:36:25 -0400
Subject: [PATCH] design maintenance - Button indeterminant button variant
 (#511)

---
 packages/core/package.json                   | 2 +-
 packages/core/src/lib/button/button.svelte   | 2 +-
 packages/core/src/lib/button/progress.svelte | 9 ++++++++-
 packages/core/src/routes/+page.svelte        | 4 ++++
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index c9fb0cc9..e5dbd0a5 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.111",
+  "version": "0.0.112",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/core/src/lib/button/button.svelte b/packages/core/src/lib/button/button.svelte
index 8f6e8796..bb14e83c 100644
--- a/packages/core/src/lib/button/button.svelte
+++ b/packages/core/src/lib/button/button.svelte
@@ -90,7 +90,7 @@ $: handleDisabled = preventHandler(disabled);
         'text-gray-4': disabled,
       })}
     >
-      <Progress />
+      <Progress variant={variant === 'danger' ? 'light' : 'dark'} />
     </span>
   {:else if icon}
     <span
diff --git a/packages/core/src/lib/button/progress.svelte b/packages/core/src/lib/button/progress.svelte
index e831b210..2f57ceeb 100644
--- a/packages/core/src/lib/button/progress.svelte
+++ b/packages/core/src/lib/button/progress.svelte
@@ -1,3 +1,7 @@
+<script lang="ts">
+export let variant: 'dark' | 'light';
+</script>
+
 <!-- @TODO(mp) Rip this out and make it our canonical loader. -->
 <div class="container -ml-1 flex w-4 items-center p-[1.5px]">
   {#each { length: 8 } as _, index}
@@ -6,7 +10,10 @@
         transform: rotate({index * 45}deg);
         animation-delay: {index * 100}ms;
       "
-      class="pill absolute -mt-[0.5px] h-px w-[3px] rounded-[1px] bg-gray-8"
+      class="pill absolute -mt-[0.5px] h-px w-[3px] rounded-[1px] {variant ===
+      'dark'
+        ? 'bg-gray-8'
+        : 'bg-white'}"
     />
   {/each}
 </div>
diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
index b1508a9f..b262d613 100644
--- a/packages/core/src/routes/+page.svelte
+++ b/packages/core/src/routes/+page.svelte
@@ -560,6 +560,10 @@ const onHoverDelayMsInput = (event: Event) => {
     </Button>
 
     <Button progress="indeterminate">Loading</Button>
+    <Button
+      progress="indeterminate"
+      variant="danger">Loading</Button
+    >
 
     <Button
       variant="dark"