css changes from asya

buildAndCopy.sh

@@ -3,7 +3,8 @@
 PREVIOUS_DIR=$(pwd)
 DIR=${0:a:h}
 SOURCE="$DIR/packages/browser-bundles/dist"
-DESTINATION="/Users/asuk/Documents/Variable Font Tool/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist"
+DESTINATION="/Users/asuk/Documents/openFrameworks/apps/variableLab/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist"
+# DESTINATION="/Users/asuk/Documents/Variable Font Tool/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist"
 # DESTINATION="jrkb@nature.fritz.box:/home/jrkb/openFrameworks/apps/celinesTypeGarden/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist"
 
 cd $DIR

theatre/studio/src/panels/BasePanel/common.tsx

@@ -58,6 +58,7 @@ export const TitleBar = styled.div`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  background: #f2f2f2;
 `
 
 // the minimum visible width or height when the panel is partially offscreen

theatre/studio/src/panels/DetailPanel/DetailPanel.tsx

@@ -33,11 +33,11 @@ const Container = styled.div<{pin: boolean}>`
   border-radius: 0px;
   color: black;
   position: fixed;
-  right: 10px;
+  right: 0px;
-  top: 10px;
+  top: 0px;
   // Temporary, see comment about CSS grid in SingleRowPropEditor.
   width: 280px;
-  height: fit-content;
+  height: 100vh;
   z-index: ${panelZIndexes.propsPanel};
   backdrop-filter: blur(2px);
 
@@ -74,6 +74,7 @@ const Header = styled.div`
 const Body = styled.div`
   ${pointerEventsAutoInNormalMode};
   max-height: calc(80vh - 100px);
+  height: inherit;
   border-bottom: 1px dashed #91919177;
   overflow-y: scroll;
   &::-webkit-scrollbar {

theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx

@@ -42,6 +42,7 @@ const Header = styled.div<{isHighlighted: PropHighlighted}>`
   display: grid;
   align-items: stretch;
   position: relative;
+  opacity: 0.8;
 `
 
 const Padding = styled.div<{isVectorProp: boolean}>`
@@ -81,7 +82,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>`
   display: flex;
   align-items: center;
   justify-content: center;
-
+  display: none;
   transition: transform 0.05s ease-out, color 0.1s ease-out;
   transform: rotateZ(${(props) => (props.isCollapsed ? 0 : 90)}deg);
   color: black;

theatre/studio/src/panels/DetailPanel/EmptyState.tsx

@@ -5,9 +5,10 @@ import {Outline} from '@theatre/studio/uiComponents/icons'
 
 const Container = styled.div`
   padding: 16px;
-  display: flex;
+  display: none;
   flex-direction: column;
   gap: 24px;
+  pointer-events: none;
 `
 
 const Message = styled.div`

theatre/studio/src/propEditors/DefaultValueIndicator.tsx

@@ -34,6 +34,10 @@ const DefaultIcon = styled.div`
   border-radius: 2px;
   transform: rotate(45deg);
   background: #a3a3a3;
+  cursor: pointer;
+  &:hover {
+    background: red;
+  }
 `
 
 const FilledIcon = styled.div`
@@ -42,6 +46,10 @@ const FilledIcon = styled.div`
   border-radius: 2px;
   transform: rotate(45deg);
   background: #a3a3a3;
+  cursor: pointer;
+  &:hover {
+    background: red;
+  }
 `
 
 const DefaultOrStaticValueIndicator: React.FC<{

theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx

@@ -14,22 +14,21 @@ const MenuContainer = styled.ul`
   position: absolute;
   min-width: ${minWidth}px;
   z-index: 10000;
-  background: ${transparentize(0.2, '#9c9c9c')};
+  background: ${transparentize(0.0, '#d3d3d3')};
   backdrop-filter: blur(2px);
   color: black;
   list-style-type: none;
-  padding: 2px 0;
+  overflow: hidden;
   margin: 0;
-  border-radius: 1px;
   cursor: default;
   ${pointerEventsAutoInNormalMode};
-  border-radius: 0px;
+  border-radius: 9px;
 `
 
 const MenuTitle = styled.div`
   padding: 4px 10px;
   border-bottom: 1px solid #6262626d;
-  color: #ffffff;
+  color: #000000;
   font-size: 11px;
   font-weight: 500;
 `

theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx

@@ -14,17 +14,19 @@ const ItemContainer = styled.li<{enabled: boolean}>`
   font-size: 11px;
   font-weight: 400;
   position: relative;
+  font-family: 'Tonka';
+  text-transform: uppercase;
   color: ${(props) => (props.enabled ? 'white' : '#484848')};
   cursor: ${(props) => (props.enabled ? 'normal' : 'not-allowed')};
 
   &:after {
     position: absolute;
-    inset: 2px 1px;
+    inset: 0px 1px;
     display: block;
     content: ' ';
     pointer-events: none;
     z-index: -1;
-    border-radius: 3px;
+    border-radius: 0px;
   }
 
   &:hover:after {