Updated theme to appear more like a native part of Obsidian

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "editor.formatOnSave": true
-}
+  "editor.formatOnSave": false
+}

src/view/compile/CompileStepView.svelte

@@ -42,7 +42,7 @@
   {:else}
     <div class="longform-compile-step-title-outer">
       <div class="longform-compile-step-title-container">
-        <h4>{ordinal}. {step.description.name}</h4>
+        <h4><span class="longform-compile-step-number">{ordinal}</span>{step.description.name}</h4>
         {#if calculatedKind !== null}
           <div
             class="longform-step-kind-pill"
@@ -100,10 +100,11 @@
 
 <style>
   .longform-compile-step {
-    background-color: var(--background-modifier-form-field);
+    background-color: var(--background-modifier-border);
+    border: 1px solid var(--background-modifier-border);
     border-radius: var(--radius-s);
-    padding: var(--size-4-1) var(--size-4-1) var(--size-4-3) var(--size-4-1);
-    margin-bottom: var(--size-4-4);
+    padding: 0;
+    margin: var(--size-4-4) 0;
   }
 
   .longform-compile-step-title-outer {
@@ -118,59 +119,73 @@
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
+    font-size: var(--font-ui-smaller);
   }
 
   .longform-compile-step-title-container h4 {
     display: inline-block;
-    margin: 0 var(--size-4-2) 0 0;
+    margin: var(--size-4-1) var(--size-4-2) var(--size-4-1) 0;
     padding: 0;
   }
 
   .longform-compile-step-title-container .longform-step-kind-pill {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--text-accent);
+    background-color: color-mix(in srgb, var(--text-accent) 50%, var(--background-modifier-border) 50%);
     color: var(--text-on-accent);
     border-radius: var(--radius-l);
     font-size: var(--font-smallest);
     font-weight: bold;
-    padding: var(--size-4-1);
+    padding: var(--size-4-1) var(--size-4-2);
     margin-right: var(--size-4-1);
     height: var(--h1-line-height);
   }
 
+  .longform-compile-step-number {
+    color: var(--text-faint);
+    display: inline-block;
+    width: var(--size-4-6);
+    padding-left: var(--size-4-1);
+  }
+
   .longform-remove-step-button {
     display: flex;
     width: var(--size-4-5);
-    margin: 0;
+    height: 100%;
+    margin: 1px;
     align-items: center;
     justify-content: center;
     font-weight: bold;
+    background: var(--background-modifier-error);
   }
 
   .longform-compile-step p {
     margin: 0;
-    padding: 0;
+    background: var(--background-primary);
   }
 
   .longform-compile-step-description {
     font-size: var(--font-smallest);
     color: var(--text-muted);
-    margin-top: var(--size-2-1);
+    padding: var(--size-4-2) var(--size-4-1) var(--size-4-2) var(--size-4-6);
   }
 
+    .longform-compile-step-description .solo {
+      padding-right: var(--size-4-6);
+    }
+
   .longform-compile-step-options {
     padding: var(--size-4-2) 0;
+    background: var(--background-primary);
   }
 
   .longform-compile-step-options > div {
-    border-left: var(--border-width) solid var(--interactive-accent);
-    padding: 0 var(--size-4-2);
+    margin: 0 var(--size-4-2) 0 var(--size-4-6)
   }
 
   .longform-compile-step-option {
-    margin-top: var(--size-4-2);
+    margin: 0 var(--size-4-4) var(--size-4-4) 0;
   }
 
   .longform-compile-step-option label {
@@ -179,10 +194,6 @@
     font-size: var(--font-smallest);
   }
 
-  .longform-compile-step-option input {
-    color: var(--text-accent);
-  }
-
   .longform-compile-step-checkbox-container {
     display: flex;
     flex-direction: row;
@@ -191,13 +202,11 @@
   }
 
   .longform-compile-step-option input[type="text"] {
-    color: var(--text-accent);
     margin: 0 0 var(--size-4-1) 0;
     width: 100%;
   }
 
   .longform-compile-step-option input[type="checkbox"] {
-    color: var(--text-accent);
     margin: 0 var(--size-4-2) var(--size-2-1) 0;
   }
 
@@ -207,7 +216,7 @@
 
   .longform-compile-step-option-description {
     font-size: var(--font-smallest);
-    line-height: 90%;
+    line-height: 1em;
     color: var(--text-faint);
   }
 
@@ -218,6 +227,6 @@
   .longform-compile-step-error {
     color: var(--text-error);
     font-size: var(--font-smallest);
-    line-height: 90%;
+    line-height: 1em;
   }
-</style>
+</style>

src/view/compile/CompileView.svelte

@@ -348,15 +348,24 @@
       </div>
     {/if}
 
-    <p>
-      Compile workflows run their steps in order.<br /><b>Scene</b> workflows
-      run once per scene.<br /><b>Join</b> workflows run once and combine the
-      rest of your scene steps into a single manuscript.<br /><b>Manuscript</b>
-      steps run once on the joined manuscript.<br />Drag to rearrange.
-      <a href="https://github.com/kevboh/longform/blob/main/docs/COMPILE.md"
-        >Documentation here.</a
+    <ul class="longform-compile-instructions">
+      <li>
+        Compile workflows run their steps in order.
+      </li>
+      <li>
+        <strong>Scene</strong> workflows run once per scene.
+      </li>
+      <li>
+        <strong>Join</strong> workflows run once and combine the rest of your scene steps into a single manuscript.
+      </li>
+      <li>
+        <strong>Manuscript</strong> steps run once on the joined manuscript.
+      </li>
+      <li>
+        Drag to rearrange. <a href="https://github.com/kevboh/longform/blob/main/docs/COMPILE.md">Documentation here.</a
       >
-    </p>
+      </li>
+    </ul>
 
     <div class="longform-compile-run-container">
       {#if $currentWorkflow && $currentWorkflow.steps.length > 0}
@@ -378,13 +387,16 @@
 
 <style>
   .longform-workflow-picker-container {
-    margin-bottom: var(--size-4-8);
-    padding: var(--size-4-2) 0;
-    border-bottom: var(--border-width) solid var(--background-modifier-border);
+    padding: var(--size-4-2);
+    background: var(--background-primary);
     display: flex;
     flex-direction: column;
   }
 
+  #longform-workflows {
+    color: var(--color-accent-2);
+  }
+
   .longform-workflow-picker {
     display: flex;
     flex-direction: row;
@@ -457,6 +469,20 @@
     color: var(--text-accent-hover);
   }
 
+  .longform-compile-instructions {
+    font-size: var(--font-smallest);
+    padding: var(--size-4-4) var(--size-4-4) var(--size-4-1) var(--size-4-8);
+    color: var(--text-muted);
+  }
+
+    .longform-compile-instructions li {
+      margin-bottom: var(--size-4-1)
+    }
+
+    .longform-compile-instructions strong {
+      color: var(--color-accent-2);
+    }
+
   .compile-button {
     font-weight: bold;
     background-color: var(--interactive-accent);

src/view/components/Disclosure.svelte

@@ -5,13 +5,7 @@
 </script>
 
 <span class:collapsed class={className} on:click>
-  <svg viewBox="0 0 100 100" class="right-triangle" width="8" height="8"
-    ><path
-      fill="currentColor"
-      stroke="currentColor"
-      d="M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z"
-    /></svg
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle"><path d="M3 8L12 17L21 8"></path></svg>
 </span>
 
 <style>
@@ -20,6 +14,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    width: var(--size-4-3);
+    color: var(--icon-color);
+    margin-left: calc(var(--size-4-1) * -1);
+    margin-top: calc(var(--size-4-1) * -.25);
   }
 
   .collapsed .right-triangle {

src/view/explorer/ExplorerView.svelte

@@ -67,7 +67,7 @@
             <ProjectDetails />
           </div>
         {:else}
-          <div class="tab-panel-container">
+          <div class="tab-panel-container disconnected">
             <CompileView />
           </div>
         {/if}
@@ -109,11 +109,17 @@
   }
 
   .tab-list {
-    margin: var(--size-4-1) 0;
-    border-bottom: var(--border-width) solid var(--text-muted);
+    margin: 0;
+    font-size: 0; /* To remove spacing between tabs */
   }
 
   .tab-panel-container {
+    background: var(--background-primary);
+    padding: var(--size-4-1) var(--size-4-2);
+  }
+
+  .tab-panel-container.disconnected {
+    background: none;
     padding: 0;
   }
 </style>

src/view/explorer/NewSceneField.svelte

@@ -38,7 +38,7 @@
   <input
     id="new-scene"
     type="text"
-    placeholder="New Scene…"
+    placeholder="New Scene"
     bind:value={newSceneName}
     bind:this={newSceneInput}
     on:keydown={(e) => {
@@ -59,24 +59,20 @@
 <style>
   .new-scene-container {
     margin: 0;
-    border-top: var(--border-width) solid var(--text-muted);
-    padding: var(--size-4-1) 0;
+    padding: var(--size-4-2) 0;
   }
 
   #new-scene {
-    padding: 0;
-    border: 0;
-    background: inherit;
-    font-size: 1em;
-    line-height: var(--h3-line-height);
     width: 100%;
+    background: var(--background-modifier-form-field);
+    border: var(--input-border-width) solid var(--background-modifier-border);
+    border-radius: var(--input-radius);
+    font-size: var(--font-ui-small);
+    padding: var(--size-4-1) var(--size-4-2);
   }
 
   #new-scene.invalid {
     color: var(--text-error);
   }
 
-  #new-scene::placeholder {
-    font-style: italic;
-  }
 </style>