From 1e574a81c34c296dfc1e64a7e8a0a00aa1c86e31 Mon Sep 17 00:00:00 2001
From: Zef Hemel <zef@zef.me>
Date: Tue, 2 Aug 2022 14:40:04 +0200
Subject: [PATCH] Work on #10 theming

---
 CHANGELOG.md                        |   2 +-
 packages/web/components/filter.tsx  |  20 +-
 packages/web/components/panel.tsx   |   2 +-
 packages/web/components/top_bar.tsx |  10 +-
 packages/web/editor.tsx             |  26 +--
 packages/web/index.html             |   1 +
 packages/web/style.ts               |  72 ++++----
 packages/web/styles/constants.scss  |   5 -
 packages/web/styles/editor.scss     | 213 ++--------------------
 packages/web/styles/filter_box.scss |  45 ++---
 packages/web/styles/main.scss       |  59 ++----
 packages/web/styles/theme.css       | 272 ++++++++++++++++++++++++++++
 12 files changed, 381 insertions(+), 346 deletions(-)
 mode change 100644 => 120000 CHANGELOG.md
 delete mode 100644 packages/web/styles/constants.scss
 create mode 100644 packages/web/styles/theme.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
deleted file mode 100644
index 2b618be5..00000000
--- a/CHANGELOG.md
+++ /dev/null
@@ -1 +0,0 @@
-See [website/CHANGELOG.md](https://github.com/silverbulletmd/silverbullet/blob/main/website/CHANGELOG.md)
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 120000
index 00000000..6a281943
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1 @@
+website/CHANGELOG.md
\ No newline at end of file
diff --git a/packages/web/components/filter.tsx b/packages/web/components/filter.tsx
index 2da6d049..d94d8d33 100644
--- a/packages/web/components/filter.tsx
+++ b/packages/web/components/filter.tsx
@@ -124,9 +124,9 @@ export function FilterList({
   let exiting = false;
 
   const returnEl = (
-    <div className="filter-wrapper">
-      <div className="filter-box">
-        <div className="header">
+    <div className="sb-filter-wrapper">
+      <div className="sb-filter-box">
+        <div className="sb-header">
           <label>{label}</label>
           <input
             type="text"
@@ -187,17 +187,17 @@ export function FilterList({
           />
         </div>
         <div
-          className="help-text"
+          className="sb-help-text"
           dangerouslySetInnerHTML={{ __html: helpText }}
         ></div>
-        <div className="result-list">
+        <div className="sb-result-list">
           {matchingOptions && matchingOptions.length > 0
             ? matchingOptions.map((option, idx) => (
                 <div
                   key={"" + idx}
                   ref={selectedOption === idx ? selectedElementRef : undefined}
                   className={
-                    selectedOption === idx ? "selected-option" : "option"
+                    selectedOption === idx ? "sb-selected-option" : "sb-option"
                   }
                   onMouseOver={(e) => {
                     setSelectionOption(idx);
@@ -207,18 +207,20 @@ export function FilterList({
                     onSelect(option);
                   }}
                 >
-                  <span className="icon">
+                  <span className="sb-icon">
                     {icon && <FontAwesomeIcon icon={icon} />}
                   </span>
                   <span
-                    className="name"
+                    className="sb-name"
                     dangerouslySetInnerHTML={{
                       __html: option?.result?.indexes
                         ? fuzzysort.highlight(option.result, "<b>", "</b>")!
                         : escapeHtml(option.name),
                     }}
                   ></span>
-                  {option.hint && <span className="hint">{option.hint}</span>}
+                  {option.hint && (
+                    <span className="sb-hint">{option.hint}</span>
+                  )}
                 </div>
               ))
             : null}
diff --git a/packages/web/components/panel.tsx b/packages/web/components/panel.tsx
index a32e7bdc..f029a29e 100644
--- a/packages/web/components/panel.tsx
+++ b/packages/web/components/panel.tsx
@@ -54,7 +54,7 @@ export function Panel({
   }, []);
 
   return (
-    <div className="panel" style={{ flex }}>
+    <div className="sb-panel" style={{ flex }}>
       <iframe srcDoc={iframeHtml} ref={iFrameRef} />
     </div>
   );
diff --git a/packages/web/components/top_bar.tsx b/packages/web/components/top_bar.tsx
index 96e24824..e75e1b98 100644
--- a/packages/web/components/top_bar.tsx
+++ b/packages/web/components/top_bar.tsx
@@ -34,23 +34,25 @@ export function TopBar({
       <div className="main">
         <div className="inner">
           <span
-            className={`current-page ${unsavedChanges ? "unsaved" : "saved"}`}
+            className={`sb-current-page ${
+              unsavedChanges ? "sb-unsaved" : "sb-saved"
+            }`}
           >
             {prettyName(pageName)}
           </span>
           {notifications.length > 0 && (
-            <div className="notifications">
+            <div className="sb-notifications">
               {notifications.map((notification) => (
                 <div
                   key={notification.id}
-                  className={`notification-${notification.type}`}
+                  className={`sb-notification-${notification.type}`}
                 >
                   {notification.message}
                 </div>
               ))}
             </div>
           )}
-          <div className="actions">
+          <div className="sb-actions">
             <button
               onClick={(e) => {
                 onHomeClick();
diff --git a/packages/web/editor.tsx b/packages/web/editor.tsx
index 715b387e..43c73adc 100644
--- a/packages/web/editor.tsx
+++ b/packages/web/editor.tsx
@@ -395,18 +395,18 @@ export class Editor {
         }),
         EditorView.lineWrapping,
         lineWrapper([
-          { selector: "ATXHeading1", class: "line-h1" },
-          { selector: "ATXHeading2", class: "line-h2" },
-          { selector: "ATXHeading3", class: "line-h3" },
-          { selector: "ListItem", class: "line-li", nesting: true },
-          { selector: "Blockquote", class: "line-blockquote" },
-          { selector: "Task", class: "line-task" },
-          { selector: "CodeBlock", class: "line-code" },
-          { selector: "FencedCode", class: "line-fenced-code" },
-          { selector: "Comment", class: "line-comment" },
-          { selector: "BulletList", class: "line-ul" },
-          { selector: "OrderedList", class: "line-ol" },
-          { selector: "TableHeader", class: "line-tbl-header" },
+          { selector: "ATXHeading1", class: "sb-line-h1" },
+          { selector: "ATXHeading2", class: "sb-line-h2" },
+          { selector: "ATXHeading3", class: "sb-line-h3" },
+          { selector: "ListItem", class: "sb-line-li", nesting: true },
+          { selector: "Blockquote", class: "sb-line-blockquote" },
+          { selector: "Task", class: "sb-line-task" },
+          { selector: "CodeBlock", class: "sb-line-code" },
+          { selector: "FencedCode", class: "sb-line-fenced-code" },
+          { selector: "Comment", class: "sb-line-comment" },
+          { selector: "BulletList", class: "sb-line-ul" },
+          { selector: "OrderedList", class: "sb-line-ol" },
+          { selector: "TableHeader", class: "sb-line-tbl-header" },
         ]),
         keymap.of([
           ...smartQuoteKeymap,
@@ -754,7 +754,7 @@ export class Editor {
           )}
         </div>
         {!!viewState.showBHS && (
-          <div className="bhs">
+          <div className="sb-bhs">
             <Panel
               html={viewState.bhsHTML}
               script={viewState.bhsScript}
diff --git a/packages/web/index.html b/packages/web/index.html
index b007c458..54b5861e 100644
--- a/packages/web/index.html
+++ b/packages/web/index.html
@@ -14,6 +14,7 @@
       }
     </style>
     <link rel="stylesheet" href="styles/main.scss" />
+    <link rel="stylesheet" href="styles/theme.css" />
     <script type="module" src="boot.ts"></script>
     <link rel="manifest" href="manifest.json" />
     <link rel="icon" type="image/x-icon" href="images/favicon.gif" />
diff --git a/packages/web/style.ts b/packages/web/style.ts
index 348dab93..b2785f6f 100644
--- a/packages/web/style.ts
+++ b/packages/web/style.ts
@@ -5,43 +5,43 @@ import { MDExt } from "@silverbulletmd/common/markdown_ext";
 
 export default function highlightStyles(mdExtension: MDExt[]) {
   const hls = HighlightStyle.define([
-    { tag: t.heading1, class: "h1" },
-    { tag: t.heading2, class: "h2" },
-    { tag: t.heading3, class: "h3" },
-    { tag: t.link, class: "link" },
-    { tag: t.meta, class: "meta" },
-    { tag: t.quote, class: "quote" },
-    { tag: t.monospace, class: "code" },
-    { tag: t.url, class: "url" },
-    { tag: ct.WikiLinkTag, class: "wiki-link" },
-    { tag: ct.WikiLinkPageTag, class: "wiki-link-page" },
-    { tag: ct.TaskTag, class: "task" },
-    { tag: ct.TaskMarkerTag, class: "task-marker" },
-    { tag: ct.CodeInfoTag, class: "code-info" },
-    { tag: ct.CommentTag, class: "comment" },
-    { tag: ct.CommentMarkerTag, class: "comment-marker" },
-    { tag: ct.Highlight, class: "highlight" },
-    { tag: t.emphasis, class: "emphasis" },
-    { tag: t.strong, class: "strong" },
-    { tag: t.atom, class: "atom" },
-    { tag: t.bool, class: "bool" },
-    { tag: t.url, class: "url" },
-    { tag: t.inserted, class: "inserted" },
-    { tag: t.deleted, class: "deleted" },
-    { tag: t.literal, class: "literal" },
-    { tag: t.keyword, class: "keyword" },
-    { tag: t.list, class: "list" },
-    // { tag: t.def, class: "li" },
-    { tag: t.string, class: "string" },
-    { tag: t.number, class: "number" },
-    { tag: [t.regexp, t.escape, t.special(t.string)], class: "string2" },
-    { tag: t.variableName, class: "variableName" },
-    { tag: t.typeName, class: "typeName" },
-    { tag: t.comment, class: "comment" },
-    { tag: t.invalid, class: "invalid" },
-    { tag: t.processingInstruction, class: "meta" },
+    { tag: t.heading1, class: "sb-h1" },
+    { tag: t.heading2, class: "sb-h2" },
+    { tag: t.heading3, class: "sb-h3" },
+    { tag: t.link, class: "sb-link" },
+    { tag: t.meta, class: "sb-meta" },
+    { tag: t.quote, class: "sb-quote" },
+    { tag: t.monospace, class: "sb-code" },
+    { tag: t.url, class: "sb-url" },
+    { tag: ct.WikiLinkTag, class: "sb-wiki-link" },
+    { tag: ct.WikiLinkPageTag, class: "sb-wiki-link-page" },
+    { tag: ct.TaskTag, class: "sb-task" },
+    { tag: ct.TaskMarkerTag, class: "sb-task-marker" },
+    { tag: ct.CodeInfoTag, class: "sb-code-info" },
+    { tag: ct.CommentTag, class: "sb-comment" },
+    { tag: ct.CommentMarkerTag, class: "sb-comment-marker" },
+    { tag: ct.Highlight, class: "sb-highlight" },
+    { tag: t.emphasis, class: "sb-emphasis" },
+    { tag: t.strong, class: "sb-strong" },
+    { tag: t.atom, class: "sb-atom" },
+    { tag: t.bool, class: "sb-bool" },
+    { tag: t.url, class: "sb-url" },
+    { tag: t.inserted, class: "sb-inserted" },
+    { tag: t.deleted, class: "sb-deleted" },
+    { tag: t.literal, class: "sb-literal" },
+    { tag: t.keyword, class: "sb-keyword" },
+    { tag: t.list, class: "sb-list" },
+    // { tag: t.def, class: "sb-li" },
+    { tag: t.string, class: "sb-string" },
+    { tag: t.number, class: "sb-number" },
+    { tag: [t.regexp, t.escape, t.special(t.string)], class: "sb-string2" },
+    { tag: t.variableName, class: "sb-variableName" },
+    { tag: t.typeName, class: "sb-typeName" },
+    { tag: t.comment, class: "sb-comment" },
+    { tag: t.invalid, class: "sb-invalid" },
+    { tag: t.processingInstruction, class: "sb-meta" },
     // { tag: t.content, class: "tbl-content" },
-    { tag: t.punctuation, class: "punctuation" },
+    { tag: t.punctuation, class: "sb-punctuation" },
     ...mdExtension.map((mdExt) => {
       return { tag: mdExt.tag, ...mdExt.styles };
     }),
diff --git a/packages/web/styles/constants.scss b/packages/web/styles/constants.scss
deleted file mode 100644
index fb0505ba..00000000
--- a/packages/web/styles/constants.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-$max-editor-width: 800px;
-$top-bar-height: 55px;
-$bottom-bar-height: 30px;
-$editor-font: "iA-Mono", "Menlo";
-$ui-font: "Arial";
diff --git a/packages/web/styles/editor.scss b/packages/web/styles/editor.scss
index c58ca25f..8ff748ed 100644
--- a/packages/web/styles/editor.scss
+++ b/packages/web/styles/editor.scss
@@ -1,257 +1,78 @@
-@import "constants.scss";
-
 .cm-editor {
-  font-size: var(--ident);
+  font-size: 18px;
   padding: 0 20px;
 
   .cm-content {
-    font-family: $editor-font;
     margin: auto;
-    max-width: $max-editor-width;
+    max-width: 800px;
   }
 
   &.cm-focused {
     outline: none !important;
   }
 
-  .cm-selectionBackground {
-    background-color: #d7e1f6 !important;
-  }
-
-  .line-h1,
-  .line-h2,
-  .line-h3 {
-    background-color: rgba(0, 30, 77, 0.5);
-    color: #fff;
-    font-weight: bold;
-    padding: 2px 2px;
-
-    .meta {
-      color: orange;
-    }
-  }
-
-  .line-h1 {
-    font-size: 1.5em;
-  }
-
-  .line-h2 {
-    font-size: 1.2em;
-  }
-
-  .line-h3 {
-    font-size: 1.1em;
-  }
-
-  /* Color list item this way */
-  .line-li .meta {
-    color: rgb(150, 150, 150);
-  }
-  /* Then undo other meta */
-  .line-li .meta ~ .meta {
-    color: #650007;
-  }
-
-  .line-code {
-    background-color: rgba(72, 72, 72, 0.1);
-
-    .code {
-      background-color: transparent;
-    }
-  }
-
-  .line-tbl-header {
-    font-weight: bold;
-
-    .meta {
-      font-weight: normal;
-    }
-  }
-
-  .struct {
-    color: darkred;
-  }
-
-  .code {
-    background-color: rgba(72, 72, 72, 0.1);
-  }
-
-  .highlight {
-    background-color: rgba(255, 255, 0, 0.5);
-  }
-
-  .line-fenced-code {
-    background-color: rgba(72, 72, 72, 0.1);
-
-    .code {
-      background-color: transparent;
-    }
-
-    // Set this to defaults
-    .comment {
-      color: #989797;
-      background-color: transparent;
-      border-radius: 0;
-      font-style: inherit;
-      font-size: inherit;
-      line-height: inherit;
-    }
-
-    .keyword {
-      color: #830000;
-    }
-
-    .variableName {
-      color: #036d9b;
-    }
-
-    .typeName {
-      color: #038138;
-    }
-
-    .string,
-    .string2 {
-      color: #440377;
-    }
-
-    //.code-info {
-    //  background: black;
-    //  border-radius: 3px;
-    //}
-  }
-
-  .meta {
-    color: #650007;
-  }
-
-  .line-blockquote {
-    background-color: rgba(220, 220, 220, 0.5);
-    color: #676767;
-    text-indent: -2ch;
-    padding-left: 2ch;
-  }
-
-  .emphasis {
-    font-style: italic;
-  }
-
-  .strong {
-    font-weight: 900;
-  }
-
-  .link {
-    cursor: pointer;
-  }
-
-  .link:not(.meta, .url) {
-    color: #0330cb;
-    text-decoration: underline;
-  }
-
-  .link.url {
-    color: #7e7d7d;
-  }
-
-  .url:not(.link) {
-    color: #0330cb;
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
-  .atom {
-    color: darkred;
-  }
-
-  .wiki-link-page {
-    color: #0330cb;
-    background-color: rgba(77, 141, 255, 0.07);
-    border-radius: 5px;
-    padding: 0 5px;
-    cursor: pointer;
-  }
-  .wiki-link {
-    cursor: pointer;
-    color: #a8abbd;
-  }
-
   // Indentation of follow-up lines
   @mixin lineOverflow($baseIndent) {
     text-indent: -1 * ($baseIndent + 2ch);
     padding-left: $baseIndent + 2ch;
 
-    &.line-task {
+    &.sb-line-task {
       text-indent: -1 * ($baseIndent + 6ch);
       padding-left: $baseIndent + 6ch;
     }
 
-    &.line-blockquote {
+    &.sb-line-blockquote {
       text-indent: -1 * ($baseIndent + 4ch);
       padding-left: $baseIndent + 4ch;
     }
   }
 
-  .line-ul {
-    &.line-li-1 {
+  .sb-line-ul {
+    &.sb-line-li-1 {
       @include lineOverflow(0);
     }
 
-    &.line-li-1.line-li-2 {
+    &.sb-line-li-1.sb-line-li-2 {
       @include lineOverflow(2);
     }
 
-    &.line-li-1.line-li-2.line-li-3 {
+    &.sb-line-li-1.sb-line-li-2.sb-line-li-3 {
       @include lineOverflow(4);
     }
 
-    &.line-li-1.line-li-2.line-li-3.line-li-4 {
+    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4 {
       @include lineOverflow(6);
     }
 
-    &.line-li-1.line-li-2.line-li-3.line-li-4.line-li-5 {
+    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4.sb-line-li-5 {
       @include lineOverflow(8);
     }
   }
 
-  .line-ol {
-    &.line-li-1 {
+  .sb-line-ol {
+    &.sb-line-li-1 {
       @include lineOverflow(1);
     }
 
-    &.line-li-1.line-li-2 {
+    &.sb-line-li-1.sb-line-li-2 {
       @include lineOverflow(2);
     }
 
-    &.line-li-1.line-li-2.line-li-3 {
+    &.sb-line-li-1.sb-line-li-2.sb-line-li-3 {
       @include lineOverflow(4);
     }
 
-    &.line-li-1.line-li-2.line-li-3.line-li-4 {
+    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4 {
       @include lineOverflow(6);
     }
 
-    &.line-li-1.line-li-2.line-li-3.line-li-4.line-li-5 {
+    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4.sb-line-li-5 {
       @include lineOverflow(8);
     }
   }
 
-  .line-comment {
+  .sb-line-comment {
     text-indent: -1 * 3ch;
     padding-left: 3ch;
   }
-
-  .task-marker {
-    background-color: #ddd;
-  }
-
-  .line-comment {
-    background-color: rgba(255, 255, 0, 0.5);
-  }
-
-  .comment {
-    color: #989797;
-    background-color: rgba(210, 210, 210, 0.2);
-    border-radius: 5px;
-    font-size: 75%;
-    line-height: 75%;
-  }
 }
diff --git a/packages/web/styles/filter_box.scss b/packages/web/styles/filter_box.scss
index 1783b5cb..73686031 100644
--- a/packages/web/styles/filter_box.scss
+++ b/packages/web/styles/filter_box.scss
@@ -1,6 +1,4 @@
-@import "constants";
-
-.filter-wrapper {
+.sb-filter-wrapper {
   position: absolute;
   margin: auto;
   max-width: 500px;
@@ -10,21 +8,15 @@
   top: 0;
   bottom: 0;
   max-height: 290px;
-  // overflow: hide;
   z-index: 100;
 }
 
-.filter-box {
-  font-family: $ui-font;
-  background-color: #fff;
-  border: rgb(103, 103, 103) 1px solid;
+.sb-filter-box {
   border-radius: 8px;
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 20px 20px;
   overflow: hidden;
   margin: 10px;
 
-  .header {
-    border-bottom: 1px rgb(108, 108, 108) solid;
+  .sb-header {
     padding: 13px 10px 10px 10px;
     display: flex;
     label {
@@ -33,56 +25,45 @@
     }
 
     input {
-      font-family: "Arial";
       background: transparent;
-      color: #000;
       border: 0;
       padding: 3px;
       outline: 0;
       font-size: 1em;
       flex-grow: 100;
     }
-    input::placeholder {
-      color: rgb(199, 199, 199);
-      font-weight: normal;
-    }
   }
 
-  .help-text {
-    background-color: #eee;
-    border-bottom: 1px rgb(108, 108, 108) solid;
+  .sb-help-text {
     padding: 5px;
-    color: #555;
   }
 
-  .result-list {
+  .sb-result-list {
     max-height: 216px;
     overflow-y: scroll;
 
-    .icon {
+    .sb-icon {
       padding: 0 8px 0 5px;
     }
-    .name {
+    .sb-name {
       padding-top: -3px;
     }
   }
 
-  .option,
-  .selected-option {
+  .sb-option,
+  .sb-selected-option {
     padding: 8px;
     cursor: pointer;
     height: 20px;
     line-height: 20px;
   }
 
-  .selected-option {
+  .sb-selected-option {
     background-color: var(--highlight-color);
-    color: #eee;
-    // border-radius: 5px;
   }
 
-  .option .hint,
-  .selected-option .hint {
+  .sb-option .sb-hint,
+  .sb-selected-option .sb-hint {
     float: right;
     margin-right: 0;
     margin-top: -4px;
@@ -90,8 +71,6 @@
     padding-right: 5px;
     padding-top: 3px;
     padding-bottom: 3px;
-    color: #eee;
-    background-color: #212476;
     border-radius: 5px;
   }
 }
diff --git a/packages/web/styles/main.scss b/packages/web/styles/main.scss
index eed9627c..056846f9 100644
--- a/packages/web/styles/main.scss
+++ b/packages/web/styles/main.scss
@@ -1,6 +1,5 @@
 @use "editor.scss";
 @use "filter_box.scss";
-@import "constants";
 
 @font-face {
   font-family: "iA-Mono";
@@ -30,12 +29,6 @@
   font-style: italic;
 }
 
-#sb-root {
-  --ident: 18px;
-  --top-bar-bg: rgb(41, 41, 41);
-  --highlight-color: #464cfc;
-}
-
 #sb-root {
   display: flex;
   flex-direction: column;
@@ -48,25 +41,22 @@
   flex-direction: row;
   z-index: 20;
 
-  height: $top-bar-height;
-  background-color: rgb(213, 213, 213);
-  border-bottom: rgb(193, 193, 193) 1px solid;
-  color: rgb(55, 55, 55);
+  height: 55px;
+
   .main {
     flex: 2;
     max-width: 100%;
 
     .inner {
-      max-width: $max-editor-width;
+      max-width: 800px;
       margin: auto;
       font-size: 28px;
       padding: 10px 20px;
       display: flex;
       flex-direction: row;
 
-      .notifications {
+      .sb-notifications {
         position: absolute;
-        font-family: "iA-Mono";
         bottom: 0;
         left: 5px;
         right: 5px;
@@ -77,19 +67,10 @@
           padding: 3px;
           margin-bottom: 3px;
           border-radius: 5px;
-          border: rgb(41, 41, 41) 1px solid;
-        }
-
-        .notification-info {
-          background-color: rgb(187, 221, 247);
-        }
-        .notification-error {
-          background-color: rgb(255, 84, 84);
         }
       }
 
-      .current-page {
-        font-family: $ui-font;
+      .sb-current-page {
         font-weight: bold;
         flex: 1;
         font-size: 28px;
@@ -100,30 +81,14 @@
         display: block;
         text-overflow: ellipsis;
       }
-
-      .saved {
-        color: #111;
-      }
-
-      .unsaved {
-        color: #5e5e5e;
-      }
     }
-    .actions {
-      text-align: right;
 
-      button {
-        border: 1px solid #7897d0;
-        border-radius: 3px;
-        margin: 3px;
-        font-size: 15px;
-        padding: 5px;
-        background-color: #e6e6e6;
-      }
+    .sb-actions {
+      text-align: right;
     }
   }
 
-  .panel {
+  .sb-panel {
     flex: 1;
   }
 }
@@ -134,9 +99,8 @@
   flex-grow: 1;
   height: 0;
 
-  .panel {
+  .sb-panel {
     flex: 1;
-    border-left: 1px solid #eee;
 
     iframe {
       border: 0;
@@ -154,12 +118,11 @@
   height: 100%;
 }
 
-.bhs {
+.sb-bhs {
   height: 300px;
   width: 100%;
-  border-top: rgb(193, 193, 193) 1px solid;
 
-  .panel {
+  .sb-panel {
     height: 100%;
 
     iframe {
diff --git a/packages/web/styles/theme.css b/packages/web/styles/theme.css
new file mode 100644
index 00000000..972dd12a
--- /dev/null
+++ b/packages/web/styles/theme.css
@@ -0,0 +1,272 @@
+#sb-root {
+  font-family: Arial;
+  --highlight-color: #464cfc;
+}
+
+#sb-top {
+  background-color: rgb(213, 213, 213);
+  border-bottom: rgb(193, 193, 193) 1px solid;
+  color: rgb(55, 55, 55);
+}
+
+.sb-panel {
+  border-left: 1px solid #eee;
+}
+
+.sb-bhs {
+  border-top: rgb(193, 193, 193) 1px solid;
+}
+
+.sb-notifications {
+  font-family: "iA-Mono";
+}
+
+.sb-notifications > div {
+  border: rgb(41, 41, 41) 1px solid;
+}
+
+.sb-notification-info {
+  background-color: rgb(187, 221, 247);
+}
+.sb-notification-error {
+  background-color: rgb(255, 84, 84);
+}
+
+.sb-saved {
+  color: #111;
+}
+
+.sb-unsaved {
+  color: #5e5e5e;
+}
+
+.sb-actions button {
+  border: 1px solid #7897d0;
+  border-radius: 3px;
+  margin: 3px;
+  font-size: 15px;
+  padding: 5px;
+  background-color: #e6e6e6;
+}
+
+/* Filter boxes */
+.sb-filter-box {
+  background-color: #fff;
+  border: rgb(103, 103, 103) 1px solid;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 20px 20px;
+}
+
+.sb-filter-box .sb-header {
+  border-bottom: 1px rgb(108, 108, 108) solid;
+}
+
+.sb-filter-box .sb-header input {
+  font-family: "Arial";
+  color: #000;
+}
+
+.sb-filter-box .sb-header input::placeholder {
+  color: rgb(199, 199, 199);
+  font-weight: normal;
+}
+
+.sb-filter-box .sb-help-text {
+  background-color: #eee;
+  border-bottom: 1px rgb(108, 108, 108) solid;
+  color: #555;
+}
+
+.sb-filter-box .sb-selected-option {
+  color: #eee;
+}
+
+.sb-filter-box .sb-option .sb-hint,
+.sb-filter-box .sb-selected-option .sb-hint {
+  color: #eee;
+  background-color: #212476;
+}
+
+/* Editor */
+
+.cm-content {
+  font-family: "iA-Mono", "Menlo";
+}
+
+.cm-selectionBackground {
+  background-color: #d7e1f6 !important;
+}
+
+.sb-line-h1,
+.sb-line-h2,
+.sb-line-h3 {
+  background-color: rgba(0, 30, 77, 0.5);
+  color: #fff;
+  font-weight: bold;
+  padding: 2px 2px !important;
+}
+
+.sb-line-h1 .sb-meta {
+  color: orange;
+}
+.sb-line-h2 .sb-meta {
+  color: orange;
+}
+
+.sb-line-h3 .sb-meta {
+  color: orange;
+}
+
+.sb-line-h1 {
+  font-size: 1.5em;
+}
+
+.sb-line-h2 {
+  font-size: 1.2em;
+}
+
+.sb-line-h3 {
+  font-size: 1.1em;
+}
+
+/* Color list item this way */
+.sb-line-li .sb-meta {
+  color: rgb(150, 150, 150);
+}
+/* Then undo other meta */
+.sb-line-li .sb-meta ~ .sb-meta {
+  color: #650007;
+}
+
+.sb-line-code {
+  background-color: rgba(72, 72, 72, 0.1);
+}
+
+.sb-line-code .sb-code {
+  background-color: transparent;
+}
+
+.sb-line-tbl-header {
+  font-weight: bold;
+}
+
+.sb-line-tbl-header .meta {
+  font-weight: normal;
+}
+
+.sb-struct {
+  color: darkred;
+}
+
+.sb-code {
+  background-color: rgba(72, 72, 72, 0.1);
+}
+
+.sb-highlight {
+  background-color: rgba(255, 255, 0, 0.5);
+}
+
+.sb-line-fenced-code {
+  background-color: rgba(72, 72, 72, 0.1);
+}
+
+/* Mostly for JS when that comes back */
+.sb-line-fenced-code .sb-code {
+  background-color: transparent;
+}
+
+.sb-line-fenced-code .sb-comment {
+  color: #989797;
+  background-color: transparent;
+  border-radius: 0;
+  font-style: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.sb-line-fenced-code .sb-keyword {
+  color: #830000;
+}
+
+.sb-line-fenced-code .sb-variableName {
+  color: #036d9b;
+}
+
+.sb-line-fenced-code .sb-typeName {
+  color: #038138;
+}
+
+.sb-line-fenced-code .sb-string,
+.sb-line-fenced-code .sb-string2 {
+  color: #440377;
+}
+
+.sb-meta {
+  color: #650007;
+}
+
+.sb-line-blockquote {
+  background-color: rgba(220, 220, 220, 0.5);
+  color: #676767;
+  text-indent: -2ch;
+  padding-left: 2ch;
+}
+
+.sb-emphasis {
+  font-style: italic;
+}
+
+.sb-strong {
+  font-weight: 900;
+}
+
+.sb-link {
+  cursor: pointer;
+}
+
+.sb-link:not(.sb-meta, .sb-url) {
+  color: #0330cb;
+  text-decoration: underline;
+}
+
+.sb-link.sb-url {
+  color: #7e7d7d;
+}
+
+.sb-url:not(.sb-link) {
+  color: #0330cb;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.sb-atom {
+  color: darkred;
+}
+
+.sb-wiki-link-page {
+  color: #0330cb;
+  background-color: rgba(77, 141, 255, 0.07);
+  border-radius: 5px;
+  padding: 0 5px;
+  cursor: pointer;
+}
+
+.sb-wiki-link {
+  cursor: pointer;
+  color: #a8abbd;
+}
+
+.sb-task-marker {
+  background-color: #ddd;
+}
+
+.sb-line-comment {
+  background-color: rgba(255, 255, 0, 0.5);
+}
+
+.sb-comment {
+  color: #989797;
+  background-color: rgba(210, 210, 210, 0.2);
+  border-radius: 5px;
+  font-size: 75%;
+  line-height: 75%;
+}