vapo design

packages/app/studio/src/ui/components/ParameterLabel.sass

@@ -43,5 +43,5 @@ component
     line-height: 18px
 
     &.modifying, .modifying &
-      box-shadow: 0 0 0 0.5px rgba(white, 0.2)
+      box-shadow: 0 0 0 0.5px rgba(white, 0.1)
       background-color: var(--color-black)

packages/app/studio/src/ui/devices/instruments/VaporisateurDeviceEditor.sass

@@ -16,14 +16,35 @@ component
     height: calc(50% - 4px)
     position: absolute
     pointer-events: none
-    border-radius: 3px
-    outline: 0.5px solid hsla(200, 40%, 70%, 0.12)
-    outline-offset: 1px
+    border-radius: 2px
+    //outline: 1px color-mix(in srgb, var(--color) 10%, transparent) solid
+    background: color-mix(in srgb, var(--color) 7%, transparent)
     z-index: 0
 
     &.unisono-section
       grid-row: 1 / 1
       grid-column: 5 / -1
+      --color: var(--color-orange)
+
+    &.oscillator-section
+      grid-row: 2 / 2
+      grid-column: 3 / -2
+      --color: var(--color-blue)
+
+    &.filter-section
+      grid-row: 3 / 3
+      grid-column: 3 / -1
+      --color: var(--color-green)
+
+    &.lfo-section
+      grid-row: 4 / 4
+      grid-column: 3 / -1
+      --color: var(--color-purple)
+
+    &.env-section
+      grid-row: 5 / 5
+      grid-column: 3 / -2
+      --color: var(--color-yellow)
 
   > div
     > *:first-child

packages/app/studio/src/ui/devices/instruments/VaporisateurDeviceEditor.tsx

@@ -171,6 +171,10 @@ export const VaporisateurDeviceEditor = ({lifecycle, service, adapter, deviceHos
                       populateControls={() => (
                           <div className={className}>
                               <div className="label unisono-section"/>
+                              <div className="label oscillator-section"/>
+                              <div className="label filter-section"/>
+                              <div className="label lfo-section"/>
+                              <div className="label env-section"/>
                               <div style={{display: "contents"}}>
                                   <Logo/>
                                   <div/>