streamline menubar css

src/editor/MenuBar.svelte

@@ -12,7 +12,9 @@
   export let state: EditorState;
 </script>
 
-<div class="menubar sticky top-0 flex py-2 px-4 z-50 items-center">
+<div
+  class="sticky top-0 z-50 flex items-center border-b border-neutral-200/60 bg-white px-4 py-2 dark:border-neutral-700 dark:bg-neutral-800"
+>
   <BlockSelect {view} {state} />
   <!-- <UploadItem {view} {state} /> -->
   <ListItem {view} {state} kind={ListKind.Unordered} />
@@ -20,9 +22,14 @@
   <BlockQuoteItem {view} {state} />
 </div>
 
-<style>
+<style lang="postcss">
-  .menubar {
+  div :global(button) {
-    background: var(--background, white);
+    @apply m-1 appearance-none rounded p-2 leading-none transition-colors hover:bg-neutral-600/20 dark:hover:bg-neutral-600/40;
-    border-bottom: 1px solid var(--accent-bg);
+  }
+  div :global(button.active) {
+    @apply bg-neutral-300 dark:bg-neutral-700;
+  }
+  div :global(button svg) {
+    @apply h-6 w-6;
   }
 </style>

src/editor/editor.css

@@ -4,36 +4,6 @@
   position: relative;
 }
 
-.editor *::before,
-.editor *::after {
-  box-sizing: border-box;
-}
-
-.editor .menubar button {
-  appearance: none;
-  background: none;
-  border: none;
-  border-radius: 2px;
-  line-height: 1;
-  padding: 0.4em 0.6em;
-  margin: 0.2em;
-  transition: all 0.2s;
-  color: var(--foreground);
-}
-
-.editor .menubar button:hover {
-  background: var(--transparentish);
-}
-
-.editor .menubar button.active {
-  background: var(--accent-bg);
-}
-
-.editor .menubar button svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
 .ProseMirror {
   width: 100%;
   padding: 0.5em;