UPD: Orange sonner text

src/renderer/src/components/config/values/ValueCard.vue

@@ -1,8 +1,5 @@
-<template>
-  <div
-    :key="deviceStore.currentProfileName || 'no-profile'"
-    class="overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/50"
-  >
+<template :key="deviceStore.currentProfileName || 'no-profile'">
+  <div class="overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/50">
     <div class="p-4">
       <span class="font-mono text-sm text-muted-foreground"
         >Value{{ valueIndex ? ` ${valueIndex}` : '' }}:</span
@@ -172,10 +169,13 @@ const valueType = computed(() => {
   return null
 })
 
-const keyState = ref(props.value.keyState || 0)
-
-watch(keyState, (newKeyState) => {
-  deviceStore.updateKnobValueParameter(props.valueIndex - 1, { keyState: newKeyState })
+const keyState = computed({
+  get() {
+    return props.value.keyState || 0
+  },
+  set(newKeyState) {
+    deviceStore.updateKnobValueParameter(props.valueIndex - 1, { keyState: newKeyState })
+  }
 })
 
 const conditions = ref({

src/renderer/src/components/ui/sonner/Sonner.vue

@@ -11,7 +11,7 @@ const props = defineProps<ToasterProps>()
     :toast-options="{
       classes: {
         toast:
-          'group toast group-[.toaster]:bg-background font-heading group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          'group toast group-[.toaster]:bg-background font-heading group-[.toaster]:text-orange-500 group-[.toaster]:border-border group-[.toaster]:shadow-lg',
         description: 'group-[.toast]:text-muted-foreground font-mono',
         actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
         cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'