feat: merge a new light theme

resources/css/common.css

@@ -4,30 +4,39 @@
   --ls-page-text-size: 1em;
   --ls-page-title-size: 36px;
   --ls-font-family: 'Inter';
-  --ls-main-content-max-width: 680px;
+  --ls-main-content-max-width: 700px;
+  --ls-border-radius-low: 4px;
+  --ls-border-radius-medium: 8px;
 }
 
 @media (prefers-color-scheme: dark) {
   html {
     background-color: #002b36;
   }
+
+  html[data-theme=light] {
+    background-color: transparent;
+  }
 }
 
 .dark-theme,
 html[data-theme=dark] {
   --ls-primary-background-color: #002b36;
-  --ls-secondary-background-color: #073642;
-  --ls-tertiary-background-color: #0f4552;
-  --ls-quaternary-background-color: #01313d;
+  --ls-secondary-background-color: #023643;
+  --ls-tertiary-background-color: #08404f;
+  --ls-quaternary-background-color: #094b5a;
+  --ls-active-primary-color: #8ec2c2;
+  --ls-active-secondary-color: #d0e8e8;
   --ls-block-properties-background-color: #02222a;
   --ls-search-background-color: var(--ls-primary-background-color);
   --ls-border-color: #0e5263;
+  --ls-guideline-color: #0b4a5a;
   --ls-menu-hover-color: var(--ls-secondary-background-color);
   --ls-primary-text-color: #a4b5b6;
   --ls-secondary-text-color: #dfdfdf;
   --ls-title-text-color: #93a1a1;
   --ls-link-text-color: #8abbbb;
-  --ls-link-text-hover-color: #d0e8e8;
+  --ls-link-text-hover-color: var(--ls-active-secondary-color);
   --ls-link-ref-text-color: var(--ls-link-text-color);
   --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
   --ls-tag-text-color: var(--ls-link-text-color);
@@ -35,13 +44,13 @@ html[data-theme=dark] {
   --ls-slide-background-color: var(--ls-primary-background-color);
   --ls-block-bullet-border-color: #0f4958;
   --ls-block-bullet-color: #608e91;
-  --ls-block-highlight-color: #074758;
+  --ls-block-highlight-color: #0a3d4b;
   --ls-selection-background-color: #338fff;
   --ls-page-checkbox-color: #6093a0;
   --ls-page-checkbox-border-color: var(--ls-primary-background-color);
   --ls-page-blockquote-color: var(--ls-primary-text-color);
   --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
-  --ls-page-blockquote-border-color: #2f4f4f;
+  --ls-page-blockquote-border-color: var(--ls-border-color);
   --ls-page-inline-code-color: var(--ls-primary-text-color);
   --ls-page-inline-code-bg-color: #01222a;
   --ls-scrollbar-foreground-color: #001f27;
@@ -52,39 +61,48 @@ html[data-theme=dark] {
   --ls-search-icon-color: var(--ls-link-text-color);
   --ls-a-chosen-bg: var(--ls-secondary-background-color);
   --ls-right-sidebar-code-bg-color: #04303c;
+  --color-level-1: var(--ls-secondary-background-color);
+  --color-level-2: var(--ls-tertiary-background-color);
+  --color-level-3: var(--ls-quaternary-background-color);
+  --color-level-4: #195d6c;
+  --color-level-5: #266c7d;
+  --color-level-6: #3a7e8e;
 }
 
 .white-theme,
 html[data-theme=light] {
   --ls-primary-background-color: white;
-  --ls-secondary-background-color: #d8e1e8;
+  --ls-secondary-background-color: #dee9f2;
   --ls-tertiary-background-color: #f0f8ff;
-  --ls-quaternary-background-color: #f7f7f7;
+  --ls-quaternary-background-color: #e1f0fe;
+  --ls-active-primary-color: #045591;
+  --ls-active-secondary-color: #003761;
   --ls-block-properties-background-color: var(--ls-tertiary-background-color);
   --ls-search-background-color: var(--ls-primary-background-color);
   --ls-border-color: #ccc;
-  --ls-menu-hover-color: var(--ls-secondary-background-color);
+  --ls-guideline-color: var(--ls-border-color);
+  --ls-menu-hover-color: var(--ls-a-chosen-bg);
   --ls-primary-text-color: #24292e;
   --ls-secondary-text-color: #161e2e;
   --ls-title-text-color: #222;
-  --ls-link-text-color: #045591;
-  --ls-link-text-hover-color: #000;
+  --ls-link-text-color: var(--ls-active-primary-color);
+  --ls-link-text-hover-color: var(--ls-active-secondary-color);
   --ls-link-ref-text-color: var(--ls-link-text-color);
   --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
   --ls-tag-text-color: var(--ls-link-text-color);
   --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
   --ls-slide-background-color: #002b36;
-  --ls-block-bullet-border-color: #ced9e0;
+  --ls-block-bullet-border-color: var(--ls-border-color);
   --ls-block-bullet-color: #394b59;
-  --ls-block-highlight-color: #7cccff;
-  --ls-selection-background-color: #b1d7ff;
-  --ls-page-checkbox-color: none;
-  --ls-page-checkbox-border-color: #808080;
+  --ls-block-highlight-color: #c0e6fd;
+  --ls-selection-background-color: #e4f2ff;
+  --ls-page-checkbox-color: var(--ls-active-primary-color);
+  --ls-page-checkbox-border-color: #8c8c8c;
   --ls-page-blockquote-color: var(--ls-primary-text-color);
-  --ls-page-blockquote-bg-color: #f8f8f8;
-  --ls-page-blockquote-border-color: #ccc;
+  --ls-page-blockquote-bg-color: transparent;
+  --ls-page-blockquote-border-color: var(--ls-active-primary-color);
+  --ls-page-inline-code-bg-color: var(--ls-secondary-background-color);
   --ls-page-inline-code-color: var(--ls-primary-text-color);
-  --ls-page-inline-code-bg-color: #eee;
   --ls-scrollbar-foreground-color: var(--ls-primary-text-color);
   --ls-scrollbar-background-color: var(--ls-primary-background-color);
   --ls-scrollbar-thumb-hover-color: var(--ls-secondary-text-color);
@@ -93,6 +111,11 @@ html[data-theme=light] {
   --ls-search-icon-color: var(--ls-icon-color);
   --ls-a-chosen-bg: #f4f5f7;
   --ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color);
+  --color-level-1: var(--ls-secondary-background-color);
+  --color-level-2: var(--ls-tertiary-background-color);
+  --color-level-3: var(--ls-quaternary-background-color);
+  --color-level-4: #d0e6fa;
+  --color-level-5: #bbdaf6;
 }
 
 html {
@@ -125,15 +148,8 @@ body {
   border-color: var(--ls-border-color);
 }
 
-.form-checkbox {
-  color: var(--ls-page-checkbox-color, #137cbd);
-  background-color: var(--ls-page-checkbox-color, transparent);
-  border: 1px solid;
-  border-color: var(--ls-page-checkbox-border-color, #808080);
-
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
+.form-input:focus {
+  box-shadow: 0 0 0 2px rgba(164, 202, 254, 0.45);
 }
 
 .ls-center {
@@ -151,7 +167,7 @@ textarea {
   overflow: hidden;
   padding: 8px;
   border: 1px solid rgba(39, 41, 43, 0.15);
-  border-radius: 4px;
+  border-radius: var(--ls-border-radius-low);
   font-size: 1em;
   line-height: 1.5;
   width: 100%;
@@ -258,8 +274,7 @@ pre {
 
 a {
   cursor: pointer;
-  color: #045591;
-  color: var(--ls-link-text-color);
+  color: var(--ls-link-text-color, #045591);
   text-decoration: none;
 }
 
@@ -306,10 +321,8 @@ a.block-control:hover {
 
 h1.title {
   margin-bottom: 1.5rem;
-  color: #222;
-  color: var(--ls-title-text-color);
-  font-size: 36px;
-  font-size: var(--ls-page-title-size);
+  color: var(--ls-title-text-color, #222);
+  font-size: var(--ls-page-title-size, 36px);
 }
 
 .page-references h2 {
@@ -317,17 +330,30 @@ h1.title {
 }
 
 a.page-ref {
-  color: var(--ls-link-ref-text-color)
+  color: var(--ls-link-text-color);
 }
 
 a.page-ref:hover {
-  color: var(--ls-link-ref-text-hover-color)
+  color: var(--ls-link-text-hover-color);
+}
+
+.block-ref {
+  color: var(--ls-link-text-color);
+}
+
+.external-link {
+  text-decoration: underline;
+}
+
+.block-ref:hover {
+  color: var(--ls-link-text-hover-color)
 }
 
 .block-highlight,
 .content .selected {
-  background-color: #7cccff;
+  transition: background-color 0.15s;
   background-color: var(--ls-block-highlight-color);
+  padding: -1px;
 }
 
 span.timestamp {
@@ -366,8 +392,18 @@ svg {
   overflow-y: scroll
 }
 
-.canceled {
+.loader {
+  -webkit-animation: lds-dual-ring 2s infinite linear;
+}
+
+.canceled,
+.done {
   text-decoration: line-through;
+  opacity: 0.6;
+}
+
+.done > input {
+  opacity: 1;
 }
 
 /* Drawing */
@@ -401,6 +437,11 @@ a.star-page:hover {
 }
 
 /* block dropdown top, auto-complete, sync dropdown */
+.bg-base-2 {
+  background-color: #f0f8ff;
+  background-color: var(--ls-secondary-background-color);
+}
+
 .bg-base-3 {
   background-color: #fff;
   background-color: var(--ls-primary-background-color);
@@ -431,22 +472,6 @@ a.star-page:hover {
   color: var(--ls-secondary-text-color);
 }
 
-.bg-base-2 {
-  background-color: #f0f8ff;
-  background-color: var(--ls-secondary-background-color);
-}
-
-a.menu-link:hover,
-button.pull:hover,
-button.menu:focus {
-  background-color: var(--ls-menu-hover-color, #137cbd);
-}
-
-a.menu-link {
-  background-color: var(--ls-primary-background-color, #fff);
-  color: var(--ls-link-text-color);
-}
-
 .white-theme #head a {
   color: var(--ls-primary-text-color);
 }
@@ -469,6 +494,32 @@ button.menu {
   font-size: 1em;
 }
 
+/* TODO Check this */
+.form-checkbox {
+  color: var(--ls-page-checkbox-color, #137cbd);
+  background-color: transparent;
+  border-radius: 0;
+  border: 2px solid;
+  border-color: var(--ls-page-checkbox-border-color);
+  appearance: none
+}
+
+.form-checkbox:checked {
+  border: none;
+}
+
+.white-theme .form-checkbox:focus {
+  border-color: var(--ls-page-checkbox-border-color);
+}
+
+.form-checkbox:not(:checked):focus {
+  box-shadow: none;
+}
+
+.form-checkbox:checked:focus {
+  box-shadow: none;
+}
+
 input {
   color: var(--ls-primary-text-color);
   background: transparent;
@@ -520,8 +571,8 @@ input {
   padding: 0.1em 0.4em;
   word-spacing: -0.15em;
   background-color: #eee;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
+  -webkit-border-radius: var(--ls-border-radius-low);
+  border-radius: var(--ls-border-radius-low);
   line-height: 1.45;
   text-rendering: optimizeSpeed
 }
@@ -561,12 +612,25 @@ a.button:hover,
   color: #fff;
 }
 
-.white-theme a.menu-link {
+a.menu-link:hover,
+button.pull:hover,
+button.menu:focus {
+  background-color: var(--ls-menu-hover-color, #f4f5f7);
+}
+
+a.menu-link {
+  background-color: var(--ls-primary-background-color, #fff);
   color: var(--ls-primary-text-color);
 }
 
-a.menu-link:hover {
-  color: var(--ls-link-text-hover-color);
+a.menu-link:first-of-type {
+  border-top-left-radius: var(--ls-border-radius-low);
+  border-top-right-radius: var(--ls-border-radius-low);
+}
+
+a.menu-link:last-of-type {
+  border-bottom-left-radius: var(--ls-border-radius-low);
+  border-bottom-right-radius: var(--ls-border-radius-low);
 }
 
 a.chosen {
@@ -626,7 +690,7 @@ dt {
 blockquote {
   display: block;
   text-indent: 0;
-  padding: 10px 20px;
+  padding: 8px 20px;
   border-left: 4px solid;
   border-left-color: #d3d3d3;
   border-left-color: var(--ls-page-blockquote-border-color);
@@ -635,6 +699,7 @@ blockquote {
   margin: 1rem 0;
   color: #24292e;
   color: var(--ls-page-blockquote-color);
+  font-size: 1.25rem;
 }
 
 .svg-shadow {
@@ -652,12 +717,8 @@ svg.note {
   color: var(--ls-primary-text-color);
 }
 
-.white-theme svg.tip {
-  color: #111;
-}
-
-.dark-theme svg.tip {
-  color: #b0c8af;
+svg.tip {
+  color: var(--ls-active-primary-color);
 }
 
 .admonition-icon {
@@ -737,9 +798,8 @@ svg.note {
 }
 
 .block-children {
-  border-left: 1px solid;
-  border-left-color: #ddd;
-  border-left-color: var(--ls-border-color);
+  border-left: 2px solid;
+  border-left-color: var(--ls-guideline-color, #ddd);
 }
 
 .dnd-separator {
@@ -755,29 +815,6 @@ iframe {
   margin: 1rem 0;
 }
 
-/* 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;
-  }
-}
-
 .aspect-ratio-square {
   padding-top: 100%;
 }
@@ -870,7 +907,7 @@ a.warning,
 span.warning {
   background: #f56565;
   padding: 0.1em 0.4em;
-  border-radius: 4px;
+  border-radius: var(--ls-border-radius-low);
   color: #fff;
 }
 
@@ -1008,6 +1045,10 @@ a.tooltip-priority::after {
   align-items: center;
 }
 
+.fixed-width {
+  max-width: calc(var(--ls-main-content-max-width) - 30px);
+}
+
 #intro .content :not(img),
 .foldable-title {
   max-width: 665px;

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
+}
+
+/* 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;
-  margin-bottom: 0;
 }

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;
   }
 }