Better styling for pane and KCL editor focus (#2691)

* Pane styling first steps

* More style tweaks

* Make pane background nearly opaque when focus is within them

src/components/ModelingSidebar/ModelingPane.module.css

@@ -2,7 +2,7 @@
   @apply relative z-0 rounded-r max-w-full h-full flex-1;
   display: grid;
   grid-template-rows: auto 1fr;
-  @apply bg-chalkboard-10/50 backdrop-blur-sm border border-chalkboard-20;
+  @apply bg-chalkboard-10/50 focus-within:bg-chalkboard-10/90 backdrop-blur-sm border border-chalkboard-20;
   scroll-margin-block-start: 41px;
 }
 
@@ -12,7 +12,7 @@
 }
 
 :global(.dark) .panel {
-  @apply bg-chalkboard-100/50 backdrop-blur-[3px] border-chalkboard-80;
+  @apply bg-chalkboard-100/50 focus-within:bg-chalkboard-100/90 backdrop-blur-[3px] border-chalkboard-80;
 }
 
 .header {

src/components/ModelingSidebar/ModelingPane.tsx

@@ -46,7 +46,11 @@ export const ModelingPane = ({
       data-testid={detailsTestId}
       id={id}
       className={
-        pointerEventsCssClass + styles.panel + ' group ' + (className || '')
+        'group-focus-within:border-primary dark:group-focus-within:border-chalkboard-50 ' +
+        pointerEventsCssClass +
+        styles.panel +
+        ' group ' +
+        (className || '')
       }
     >
       <ModelingPaneHeader title={title} Menu={Menu} />

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -123,6 +123,7 @@ function ModelingSidebarSection({
   }, [showDebugPanel.current, togglePane, openPanes])
 
   return (
+    <div className="group contents">
       <Tab.Group
         vertical
         selectedIndex={
@@ -142,7 +143,8 @@ function ModelingSidebarSection({
             (currentPane === 'none'
               ? ' rounded-r focus-within:!border-primary/50'
               : ' border-r-0') +
-          ' p-2 col-start-1 col-span-1 h-fit w-fit flex flex-col items-start gap-2 bg-chalkboard-10 border border-solid border-chalkboard-20 dark:bg-chalkboard-90 dark:border-chalkboard-80 ' +
+            ' p-2 col-start-1 col-span-1 h-fit w-fit flex flex-col items-start gap-2 ' +
+            'bg-chalkboard-10 border border-solid border-chalkboard-20 dark:bg-chalkboard-90 dark:border-chalkboard-80 group-focus-within:border-primary dark:group-focus-within:border-chalkboard-50 ' +
             (openPanes.length === 1 && currentPane === 'none' ? 'pr-0.5' : '')
           }
         >
@@ -187,6 +189,7 @@ function ModelingSidebarSection({
           ))}
         </Tab.Panels>
       </Tab.Group>
+    </div>
   )
 }
 

src/index.css

@@ -147,15 +147,33 @@ code {
 
 #code-mirror-override .cm-activeLine,
 #code-mirror-override .cm-activeLineGutter {
-  @apply bg-primary/10;
+  @apply bg-primary/5;
 }
 
 .dark #code-mirror-override .cm-activeLine,
 .dark #code-mirror-override .cm-activeLineGutter {
-  @apply bg-primary/20;
+  @apply bg-chalkboard-70/20;
   mix-blend-mode: lighten;
 }
 
+#code-mirror-override .cm-focused .cm-activeLine,
+#code-mirror-override .cm-focused .cm-activeLineGutter {
+  @apply bg-primary/10;
+}
+
+.dark #code-mirror-override .cm-focused .cm-activeLine,
+.dark #code-mirror-override .cm-focused .cm-activeLineGutter {
+  @apply bg-chalkboard-70/40;
+}
+
+#code-mirror-override .cm-matchingBracket {
+  @apply bg-primary/20;
+}
+
+.dark #code-mirror-override .cm-matchingBracket {
+  @apply bg-chalkboard-70/60;
+}
+
 #code-mirror-override .cm-gutters {
   @apply bg-chalkboard-10/30;
 }
@@ -171,22 +189,8 @@ code {
   @apply caret-chalkboard-10;
 }
 
-#code-mirror-override .cm-focused .cm-cursor {
-  width: 0px;
-}
-#code-mirror-override .cm-cursor {
-  display: block;
-  width: 1ch;
-  @apply mix-blend-multiply;
-  @apply border-l-primary;
-}
-
-.dark #code-mirror-override .cm-cursor {
-  @apply border-l-chalkboard-10;
-}
-
-#code-mirror-override.blink .cm-cursor {
-  animation: blink 1200ms ease-out infinite;
+#code-mirror-override .cm-focused {
+  outline: none;
 }
 
 @keyframes blink {