From 42cb1c35e02fccc144b6a7963c331bee9b470099 Mon Sep 17 00:00:00 2001
From: Mike Tasset <mike.tasset@gmail.com>
Date: Tue, 29 Jul 2025 23:17:53 +0200
Subject: [PATCH] Add secondary variant for control buttons

---
 .../frontend-2/components/viewer/controls/ButtonToggle.vue   | 5 ++++-
 packages/frontend-2/components/viewer/controls/Left.vue      | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/viewer/controls/ButtonToggle.vue b/packages/frontend-2/components/viewer/controls/ButtonToggle.vue
index 692745a96..ecf3a6048 100644
--- a/packages/frontend-2/components/viewer/controls/ButtonToggle.vue
+++ b/packages/frontend-2/components/viewer/controls/ButtonToggle.vue
@@ -4,7 +4,9 @@
     :class="
       active
         ? 'bg-info-lighter text-primary-focus dark:text-foreground-on-primary'
-        : 'bg-foundation text-foreground md:hover:bg-primary-muted md:focus-visible:border-foundation'
+        : `bg-foundation ${
+            secondary ? 'text-foreground-3' : 'text-foreground'
+          } md:hover:bg-primary-muted md:focus-visible:border-foundation`
     "
   >
     <component :is="icon" v-if="icon" class="size-5" />
@@ -16,5 +18,6 @@
 defineProps<{
   active?: boolean
   icon?: string
+  secondary?: boolean
 }>()
 </script>
diff --git a/packages/frontend-2/components/viewer/controls/Left.vue b/packages/frontend-2/components/viewer/controls/Left.vue
index dbebc30e5..1a7da62e0 100644
--- a/packages/frontend-2/components/viewer/controls/Left.vue
+++ b/packages/frontend-2/components/viewer/controls/Left.vue
@@ -67,17 +67,20 @@
           "
           :active="activePanel === 'devMode'"
           :icon="'IconViewerDev'"
+          secondary
           @click="toggleActivePanel('devMode')"
         />
         <ViewerControlsButtonToggle
           v-tippy="getTooltipProps('Documentation', { placement: 'right' })"
           :icon="'IconDocs'"
+          secondary
           @click="openDocs"
         />
         <!-- TODO: Add intercom click event -->
         <ViewerControlsButtonToggle
           v-tippy="getTooltipProps('Get help', { placement: 'right' })"
           :icon="'IconIntercom'"
+          secondary
         />
       </div>
     </div>