Add secondary variant for control buttons

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>

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>