feat: merge a new light theme

src/main/frontend/components/block.cljs

@@ -313,9 +313,8 @@
 (rum/defc block-embed < rum/reactive db-mixins/query
   [config id]
   (let [blocks (db/get-block-and-children (state/get-current-repo) id)]
-    [:div.embed-block.bg-base-2 {:style {:z-index 2}}
-     [:code "Embed block:"]
-     [:div.px-2
+    [:div.color-level.embed-block.bg-base-2 {:style {:z-index 2}}
+     [:div.px-3.pt-1.pb-2
       (blocks-container blocks (assoc config
                                       :embed? true
                                       :ref? false))]]))
@@ -325,10 +324,10 @@
   (let [page-name (string/lower-case page-name)
         page-original-name (:page/original-name (db/entity [:page/name page-name]))
         current-page (state/get-current-page)]
-    [:div.embed-page.bg-base-2
+    [:div.color-level.embed.embed-page.bg-base-2
      {:class (if (:sidebar? config) "in-sidebar")}
-     [:section
-      [:code.mr-2 "Embed page:"]
+     [:section.flex.items-center.p-1.embed-header
+      [:div.mr-3 svg/page]
       (page-cp config {:page/name page-name})]
      (when (and
             (not= (string/lower-case (or current-page ""))
@@ -550,7 +549,7 @@
 
             :else
             (->elem
-             :a
+             :a.external-link
              (cond->
               {:href href
                :target "_blank"}
@@ -945,8 +944,7 @@
           (when (and marker
                      (not (string/blank? marker))
                      (not= "nil" marker))
-            {:class (str (string/lower-case marker)
-                         "flex flex-row items-center")})
+            {:class (str (string/lower-case marker))})
           (when bg-color
             {:style {:background-color bg-color
                      :padding-left 6
@@ -1332,7 +1330,7 @@
                                  (when-let [parent (gdom/getElement block-id)]
                                    (when-let [node (.querySelector parent ".bullet-container")]
                                      (d/add-class! node "hide-inner-bullet")))))}]
-    [:div.ls-block.flex.flex-col.pt-1
+    [:div.ls-block.flex.flex-col.mt-1
      (cond->
       {:id block-id
        :style {:position "relative"}
@@ -1847,7 +1845,7 @@
         (let [page (db/entity (:db/id page))]
           [:div.my-2 (cond-> {:key (str "page-" (:db/id page))}
                        (:ref? config)
-                       (assoc :class "bg-base-2 px-7 py-2 rounded"))
+                       (assoc :class "color-level px-7 py-2 rounded"))
            (ui/foldable
             (page-cp config page)
             (blocks-container blocks config))]))]

src/main/frontend/components/block.css

@@ -4,7 +4,7 @@
 .block-content {
   min-height: 24px;
   max-width: 100%;
-  overflow: auto;
+  overflow: initial;
   cursor: text;
 
   img {
@@ -27,42 +27,97 @@
   }
 }
 
+.color-level {
+  background-color: var(--color-level-1);
+}
+
+.color-level .color-level {
+  background-color: var(--color-level-2);
+}
+
+.color-level .color-level .color-level {
+  background-color: var(--color-level-3);
+}
+
+.color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-4);
+}
+
+.color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-5);
+}
+
+.color-level .color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-3);
+}
+
+.color-level .color-level .color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-4);
+}
+
+.color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-5);
+}
+
+.color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-3);
+}
+
+.color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-4);
+}
+
+.color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level .color-level {
+  background-color: var(--color-level-5);
+}
+
 .ls-block {
   min-height: 24px;
-  margin: 0 auto;
+  margin: 4px auto;
 
   img {
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   }
 }
 
+.ls-block,
+.foldable-title {
+  max-width: var(--ls-main-content-max-width);
+}
+
+.ls-block,
+.editor-wrapper {
+  margin-right: auto;
+  margin-left: auto;
+}
+
 .ls-block h1 {
   font-size: 2em;
-  margin: 0.67em 0;
+  margin: 0.67em 0
 }
 
 .ls-block h2 {
   font-size: 1.5em;
-  margin: 0.75em 0;
+  margin: 0.75em 0
 }
 
 .ls-block h3 {
   font-size: 1.17em;
-  margin: 0.83em 0;
+  margin: 0.83em 0
 }
 
 .ls-block h4 {
-  margin: 1.12em 0;
+  margin: 1.12em 0
 }
 
 .ls-block h5 {
   font-size: 0.83em;
-  margin: 1.5em 0;
+  margin: 1.5em 0
 }
 
 .ls-block h6 {
   font-size: 0.75em;
-  margin: 1.67em 0;
+  margin: 1.67em 0
 }
 
 .ls-block h1,
@@ -71,6 +126,36 @@
 .ls-block h4,
 .ls-block h5,
 .ls-block h6 {
-  font-weight: 600;
-  margin-bottom: 0;
+  font-weight: 600
+}
+
+/* copied from https://github.com/drdogbot7/tailwindcss-responsive-embed */
+.embed-responsive {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+
+  .embed-responsive-item,
+  iframe,
+  embed,
+  object,
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    border: 0;
+  }
+}
+
+.embed {
+  border-radius: var(--ls-border-radius-low);
+}
+
+.embed-header {
+  font-weight: 600;
 }

src/main/frontend/components/sidebar.css

@@ -78,6 +78,7 @@
   overflow-y: auto;
   z-index: 9;
   transition: width 0.3s, opacity 0.2s;
+  border-radius: var(--ls-border-radius-low) 0 0 0;
 
   box-sizing: border-box;
   background-color: var(--ls-secondary-background-color, #d8e1e8);

src/main/frontend/components/theme.cljs

@@ -4,7 +4,7 @@
 (rum/defc container
   [{:keys [theme on-click] :as props} child]
   (rum/use-effect! #(-> js/document.documentElement
-                        (.setAttribute "data-theme" theme))
+                        (.setAttribute "data-theme" (if (= theme "white") "light" theme)))
                    [theme])
   [:div
    {:class (str theme "-theme")

src/main/frontend/components/theme.css

@@ -35,5 +35,6 @@ html[data-theme=dark] {
     color: var(--ls-page-checkbox-color, #6093a0);
     background-color: var(--ls-page-checkbox-color, #6093a0);
     border-color: var(--ls-page-checkbox-border-color, #6093a0);
+    border: none;
   }
 }