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,70 +123,73 @@ function ModelingSidebarSection({
   }, [showDebugPanel.current, togglePane, openPanes])
 
   return (
-    <Tab.Group
+    <div className="group contents">
-      vertical
+      <Tab.Group
-      selectedIndex={
+        vertical
-        currentPane === 'none' ? 0 : paneIds.indexOf(currentPane) + 1
+        selectedIndex={
-      }
+          currentPane === 'none' ? 0 : paneIds.indexOf(currentPane) + 1
-      onChange={(index) => {
-        const newPane = index === 0 ? 'none' : paneIds[index - 1]
-        togglePane(newPane)
-      }}
-    >
-      <Tab.List
-        className={
-          'pointer-events-auto ' +
-          (alignButtons === 'start'
-            ? 'justify-start self-start'
-            : 'justify-end self-end') +
-          (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 ' +
-          (openPanes.length === 1 && currentPane === 'none' ? 'pr-0.5' : '')
         }
+        onChange={(index) => {
+          const newPane = index === 0 ? 'none' : paneIds[index - 1]
+          togglePane(newPane)
+        }}
       >
-        <Tab key="none" className="sr-only">
+        <Tab.List
-          No panes open
+          className={
-        </Tab>
+            'pointer-events-auto ' +
-        {filteredPanes.map((pane) => (
+            (alignButtons === 'start'
-          <ModelingPaneButton
+              ? 'justify-start self-start'
-            key={pane.id}
+              : 'justify-end self-end') +
-            paneConfig={pane}
+            (currentPane === 'none'
-            currentPane={currentPane}
+              ? ' rounded-r focus-within:!border-primary/50'
-            togglePane={() => togglePane(pane.id)}
+              : ' 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 group-focus-within:border-primary dark:group-focus-within:border-chalkboard-50 ' +
-      </Tab.List>
+            (openPanes.length === 1 && currentPane === 'none' ? 'pr-0.5' : '')
-      <Tab.Panels
+          }
-        as="article"
+        >
-        className={
+          <Tab key="none" className="sr-only">
-          'col-start-2 col-span-1 ' +
+            No panes open
-          (openPanes.length === 1
+          </Tab>
-            ? currentPane !== 'none'
+          {filteredPanes.map((pane) => (
-              ? `row-start-1 row-end-3`
+            <ModelingPaneButton
-              : `hidden`
+              key={pane.id}
-            : ``)
+              paneConfig={pane}
-        }
+              currentPane={currentPane}
-      >
+              togglePane={() => togglePane(pane.id)}
-        <Tab.Panel key="none" />
+            />
-        {filteredPanes.map((pane) => (
+          ))}
-          <Tab.Panel key={pane.id} className="h-full">
+        </Tab.List>
-            <ModelingPane
+        <Tab.Panels
-              id={`${pane.id}-pane`}
+          as="article"
-              title={pane.title}
+          className={
-              Menu={pane.Menu}
+            'col-start-2 col-span-1 ' +
-            >
+            (openPanes.length === 1
-              {pane.Content instanceof Function ? (
+              ? currentPane !== 'none'
-                <pane.Content />
+                ? `row-start-1 row-end-3`
-              ) : (
+                : `hidden`
-                pane.Content
+              : ``)
-              )}
+          }
-            </ModelingPane>
+        >
-          </Tab.Panel>
+          <Tab.Panel key="none" />
-        ))}
+          {filteredPanes.map((pane) => (
-      </Tab.Panels>
+            <Tab.Panel key={pane.id} className="h-full">
-    </Tab.Group>
+              <ModelingPane
+                id={`${pane.id}-pane`}
+                title={pane.title}
+                Menu={pane.Menu}
+              >
+                {pane.Content instanceof Function ? (
+                  <pane.Content />
+                ) : (
+                  pane.Content
+                )}
+              </ModelingPane>
+            </Tab.Panel>
+          ))}
+        </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 {
+#code-mirror-override .cm-focused {
-  width: 0px;
+  outline: none;
-}
-#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;
 }
 
 @keyframes blink {