🚧 Progress on React components

packages/css-theme/src/_components.scss

@@ -1,3 +1,3 @@
 @import "components/emblem";
-@import "components/pattern-option";
-@import "components/pattern-options";
+@import "components/navbar";
+@import "components/draft-configurator";

packages/css-theme/src/_variables.scss

@@ -1,6 +1,13 @@
+$fc-text-light: $oc-gray-9;
+$fc-text-dark: $oc-gray-0;
 $fc-bg-light: $oc-gray-0;
 $fc-bg-dark: $oc-gray-9;
 $fc-notice-light: $oc-yellow-7;
 $fc-notice-dark: $oc-lime-3;
 $fc-hoverbg-light: $oc-gray-1;
 $fc-hoverbg-dark: $oc-gray-8;
+$fc-accentbg-light: $oc-teal-5;
+$fc-accentbg-dark: $oc-teal-8;
+$fc-link-light: $oc-teal-8;
+$fc-link-dark: $oc-blue-3;
+

packages/css-theme/src/components/_draft-configurator.scss

@@ -65,7 +65,8 @@ svg.icon-col-exp.expanded {
 }
 
 ul.nav.l2 div.col-exp,
-ul.nav.l3 div.col-exp {
+ul.nav.l3 div.col-exp,
+ul.nav.l4 div.col-exp {
   margin: 0 27px;
 }
 

packages/css-theme/src/components/_navbar.scss

@@ -0,0 +1,65 @@
+header.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 64px;
+  width: calc(100% - 52px);
+  margin: 0;
+  padding: 0 26px;
+  background: $fc-bg-dark;
+
+  div.logo {
+    height: 64px;
+    padding: 0;
+    margin: 0;
+    margin-right: 13px;
+    display: flex;
+    align-items: center;
+    color: $oc-gray-2;
+  }
+  div.emblem {
+    margin-right: 26px;
+  }
+  div.spread { flex-grow: 1}
+  a.nav,
+  button {
+    @include title-font;
+    margin: 0;
+    padding: 0 13px;
+    height: 60px;
+    color: $fc-text-dark;
+    border: 0;
+    line-height: 64px;
+    border-bottom: 4px solid $fc-bg-dark;
+    font-size: 18px;
+    text-decoration: none;
+    transition: color 0.2s ease, border-color 0.2s ease-in-out;
+    background:none;
+  }
+  button {
+    /* For buttons, border does not count for height */
+    height: 64px;
+  }
+  button:hover,
+  a.nav:hover {
+    cursor: pointer;
+    color: $fc-link-dark;
+    border-color: $fc-link-dark;
+  }
+  a.nav.active {
+    border-color: $fc-link-dark;
+  }
+  svg.nav-icon {
+    margin-right: 5px;
+    margin-bottom: -6px;
+  }
+  svg.nav-icon.moon {
+    transform: rotate(26deg);
+  }
+}
+
+header.navbar > div {
+  display: flex;
+  align-items: center;
+}
+

packages/css-theme/src/components/_pattern-option.scss

@@ -1,19 +0,0 @@
-div.pattern-option {
-  .po-custom {
-    color: $fc-notice-light;
-  }
-  label.po-list-item:hover {
-    background: $fc-hoverbg-light;
-  }
-}
-
-body.dark {
-  div.pattern-option {
-    .po-custom {
-      color: $fc-notice-dark;
-    }
-    label.po-list-item:hover {
-      background: $fc-hoverbg-dark;
-    }
-  }
-}