Enhance: Color system (#6821)

* refactor: remove redundant utility classes

* chore: expose tailwind colors to css vars

* refactor: introduce error/warning/success colors

* fix: move tailwind utilities import

* fix: extend tailwind font sizes

* fix: exclude color classes from purge

* refactor: admonition component

* fix: admonition warning color

* fix: notification icon color

* fix: capitalize icon title

* chore: remove caution color

* feat: highlighting system

* chore: add color title and remove comment

* chore: add color translations

* chore: add missing bg classes

* refactor: highlight system

* fix: color id

* fix: bg color value

* fix: pdf highlight colors

* fix: resolve conflicts

* fix: class directive typo

resources/css/common.css

@@ -14,9 +14,9 @@
   --ls-left-sidebar-width: 246px;
   --ls-left-sidebar-sm-width: 70%;
   --ls-left-sidebar-nav-btn-size: 38px;
-  --ls-color-file-sync-error: #ff0000;
-  --ls-color-file-sync-pending: #ffbb4d;
-  --ls-color-file-sync-idle: #04b404;
+  --ls-error-color: var(--color-red-500);
+  --ls-warning-color: var(--color-orange-500);
+  --ls-success-color: var(--color-green-500);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -90,6 +90,17 @@ html[data-theme='dark'] {
   --ls-right-sidebar-code-bg-color: #04303c;
   --ls-pie-bg-color: #01303b;
   --ls-pie-fg-color: #0b5869;
+  --ls-highlight-color-gray: var(--color-gray-900);
+  --ls-highlight-color-red: var(--color-red-900);
+  --ls-highlight-color-yellow: var(--color-yellow-900);
+  --ls-highlight-color-green: var(--color-green-900);
+  --ls-highlight-color-blue: var(--color-blue-900);
+  --ls-highlight-color-purple: var(--color-purple-900);
+  --ls-highlight-color-pink: var(--color-pink-900);
+  --ls-error-text-color: var(--color-red-100);
+  --ls-error-background-color: var(--color-red-900);
+  --ls-warning-text-color: var(--color-yellow-100);
+  --ls-warning-background-color: var(--color-yellow-900);
   --color-level-1: var(--ls-secondary-background-color);
   --color-level-2: var(--ls-tertiary-background-color);
   --color-level-3: var(--ls-quaternary-background-color);
@@ -152,6 +163,17 @@ html[data-theme='light'] {
   --ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color);
   --ls-pie-bg-color: #e1e1e1;
   --ls-pie-fg-color: #0a4a5d;
+  --ls-highlight-color-gray: var(--color-gray-100);
+  --ls-highlight-color-red: var(--color-red-100);
+  --ls-highlight-color-yellow: var(--color-yellow-100);
+  --ls-highlight-color-green: var(--color-green-100);
+  --ls-highlight-color-blue: var(--color-blue-100);
+  --ls-highlight-color-purple: var(--color-purple-100);
+  --ls-highlight-color-pink: var(--color-pink-100);
+  --ls-error-text-color: var(--color-red-800);
+  --ls-error-background-color: var(--color-red-100);
+  --ls-warning-text-color: var(--color-yellow-800);
+  --ls-warning-background-color: var(--color-yellow-100);
   --color-level-1: var(--ls-secondary-background-color);
   --color-level-2: var(--ls-tertiary-background-color);
   --color-level-3: var(--ls-quaternary-background-color);
@@ -309,373 +331,6 @@ video {
 
 /* endregion */
 
-/** region Common utilities **/
-.w10 {
-  max-width: 10%;
-}
-
-.w20 {
-  max-width: 20%;
-}
-
-.w30 {
-  max-width: 30%;
-}
-
-.w40 {
-  max-width: 40%;
-}
-
-.w50 {
-  max-width: 50%;
-}
-
-.w60 {
-  max-width: 60%;
-}
-
-.w70 {
-  max-width: 70%;
-}
-
-.w80 {
-  max-width: 80%;
-}
-
-.w90 {
-  max-width: 90%;
-}
-
-.w100 {
-  max-width: 100%;
-}
-
-.bg-black {
-  background-color: rgba(0, 0, 0);
-}
-
-.bg-white {
-  background-color: rgba(255, 255, 255);
-}
-
-.bg-gray-50 {
-  background-color: rgba(249, 250, 251);
-}
-
-.bg-gray-100 {
-  background-color: rgba(243, 244, 246);
-}
-
-.bg-gray-200 {
-  background-color: rgba(229, 231, 235);
-}
-
-.bg-gray-300 {
-  background-color: rgba(209, 213, 219);
-}
-
-.bg-gray-400 {
-  background-color: rgba(156, 163, 175);
-}
-
-.bg-gray-500 {
-  background-color: rgba(107, 114, 128);
-}
-
-.bg-gray-600 {
-  background-color: rgba(75, 85, 99);
-}
-
-.bg-gray-700 {
-  background-color: rgba(55, 65, 81);
-}
-
-.bg-gray-800 {
-  background-color: rgba(31, 41, 55);
-}
-
-.bg-gray-900 {
-  background-color: rgba(17, 24, 39);
-}
-
-.bg-red-50 {
-  background-color: rgba(254, 242, 242);
-}
-
-.bg-red-100 {
-  background-color: rgba(254, 226, 226);
-}
-
-.bg-red-200 {
-  background-color: rgba(254, 202, 202);
-}
-
-.bg-red-300 {
-  background-color: rgba(252, 165, 165);
-}
-
-.bg-red-400 {
-  background-color: rgba(248, 113, 113);
-}
-
-.bg-red-500 {
-  background-color: rgba(239, 68, 68);
-}
-
-.bg-red-600 {
-  background-color: rgba(220, 38, 38);
-}
-
-.bg-red-700 {
-  background-color: rgba(185, 28, 28);
-}
-
-.bg-red-800 {
-  background-color: rgba(153, 27, 27);
-}
-
-.bg-red-900 {
-  background-color: rgba(127, 29, 29);
-}
-
-.bg-yellow-50 {
-  background-color: rgba(255, 251, 235);
-}
-
-.bg-yellow-100 {
-  background-color: rgba(254, 243, 199);
-}
-
-.bg-yellow-200 {
-  background-color: rgba(253, 230, 138);
-}
-
-.bg-yellow-300 {
-  background-color: rgba(252, 211, 77);
-}
-
-.bg-yellow-400 {
-  background-color: rgba(251, 191, 36);
-}
-
-.bg-yellow-500 {
-  background-color: rgba(245, 158, 11);
-}
-
-.bg-yellow-600 {
-  background-color: rgba(217, 119, 6);
-}
-
-.bg-yellow-700 {
-  background-color: rgba(180, 83, 9);
-}
-
-.bg-yellow-800 {
-  background-color: rgba(146, 64, 14);
-}
-
-.bg-yellow-900 {
-  background-color: rgba(120, 53, 15);
-}
-
-.bg-green-50 {
-  background-color: rgba(236, 253, 245);
-}
-
-.bg-green-100 {
-  background-color: rgba(209, 250, 229);
-}
-
-.bg-green-200 {
-  background-color: rgba(167, 243, 208);
-}
-
-.bg-green-300 {
-  background-color: rgba(110, 231, 183);
-}
-
-.bg-green-400 {
-  background-color: rgba(52, 211, 153);
-}
-
-.bg-green-500 {
-  background-color: rgba(16, 185, 129);
-}
-
-.bg-green-600 {
-  background-color: rgba(5, 150, 105);
-}
-
-.bg-green-700 {
-  background-color: rgba(4, 120, 87);
-}
-
-.bg-green-800 {
-  background-color: rgba(6, 95, 70);
-}
-
-.bg-green-900 {
-  background-color: rgba(6, 78, 59);
-}
-
-.bg-blue-50 {
-  background-color: rgba(239, 246, 255);
-}
-
-.bg-blue-100 {
-  background-color: rgba(219, 234, 254);
-}
-
-.bg-blue-200 {
-  background-color: rgba(191, 219, 254);
-}
-
-.bg-blue-300 {
-  background-color: rgba(147, 197, 253);
-}
-
-.bg-blue-400 {
-  background-color: rgba(96, 165, 250);
-}
-
-.bg-blue-500 {
-  background-color: rgba(59, 130, 246);
-}
-
-.bg-blue-600 {
-  background-color: rgba(37, 99, 235);
-}
-
-.bg-blue-700 {
-  background-color: rgba(29, 78, 216);
-}
-
-.bg-blue-800 {
-  background-color: rgba(30, 64, 175);
-}
-
-.bg-blue-900 {
-  background-color: rgba(30, 58, 138);
-}
-
-.bg-indigo-50 {
-  background-color: rgba(238, 242, 255);
-}
-
-.bg-indigo-100 {
-  background-color: rgba(224, 231, 255);
-}
-
-.bg-indigo-200 {
-  background-color: rgba(199, 210, 254);
-}
-
-.bg-indigo-300 {
-  background-color: rgba(165, 180, 252);
-}
-
-.bg-indigo-400 {
-  background-color: rgba(129, 140, 248);
-}
-
-.bg-indigo-500 {
-  background-color: rgba(99, 102, 241);
-}
-
-.bg-indigo-600 {
-  background-color: rgba(79, 70, 229);
-}
-
-.bg-indigo-700 {
-  background-color: rgba(67, 56, 202);
-}
-
-.bg-indigo-800 {
-  background-color: rgba(55, 48, 163);
-}
-
-.bg-indigo-900 {
-  background-color: rgba(49, 46, 129);
-}
-
-.bg-purple-50 {
-  background-color: rgba(245, 243, 255);
-}
-
-.bg-purple-100 {
-  background-color: rgba(237, 233, 254);
-}
-
-.bg-purple-200 {
-  background-color: rgba(221, 214, 254);
-}
-
-.bg-purple-300 {
-  background-color: rgba(196, 181, 253);
-}
-
-.bg-purple-400 {
-  background-color: rgba(167, 139, 250);
-}
-
-.bg-purple-500 {
-  background-color: rgba(139, 92, 246);
-}
-
-.bg-purple-600 {
-  background-color: rgba(124, 58, 237);
-}
-
-.bg-purple-700 {
-  background-color: rgba(109, 40, 217);
-}
-
-.bg-purple-800 {
-  background-color: rgba(91, 33, 182);
-}
-
-.bg-purple-900  {
-  background-color: rgba(76, 29, 149);
-}
-
-.bg-pink-100 {
-  background-color: #fff5f7;
-}
-
-.bg-pink-200 {
-  background-color: #fed7e2;
-}
-
-.bg-pink-300 {
-  background-color: #fbb6ce;
-}
-
-.bg-pink-400 {
-  background-color: #f687b3;
-}
-
-.bg-pink-500 {
-  background-color: #ed64a6;
-}
-
-.bg-pink-600 {
-  background-color: #d53f8c;
-}
-
-.bg-pink-700 {
-  background-color: #b83280;
-}
-
-.bg-pink-800 {
-  background-color: #97266d;
-}
-
-.bg-pink-900 {
-  background-color: #702459;
-}
-
-/** endregion **/
-
 /** region App utilities **/
 .ls-center {
   position: absolute;
@@ -780,11 +435,6 @@ li p:last-child,
   opacity: 0.7;
 }
 
-.svg-shadow {
-  -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.7));
-  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
-}
-
 .tip-shadow {
   -webkit-filter: drop-shadow(1px 1px 2px rgba(155, 155, 0, 0.8));
   filter: drop-shadow(1px 1px 2px rgba(155, 155, 0, 0.8));
@@ -845,8 +495,8 @@ i.ti {
 
 .heading-bg {
   border-radius: 50%;
-  width: 14px;
-  height: 14px;
+  width: 18px;
+  height: 18px;
 
   &.remove {
     @apply border flex items-center justify-center;
@@ -855,6 +505,10 @@ i.ti {
   }
 }
 
+.to-heading-button {
+  @apply px-1 !important;
+}
+
 /** endregion **/
 
 /* region FIXME: override elements (?) */
@@ -960,24 +614,45 @@ a.chosen {
 
 a.warning,
 span.warning, div.warning:not(.admonitionblock), p.warning {
-  background: #f56565;
+  background: var(--ls-warning-background-color);
   padding: 0.1em 0.4em;
   border-radius: var(--ls-border-radius-low);
-  color: #fff;
+  color: var(--ls-warning-text-color);
+}
+
+.text-warning {
+  color: var(--ls-warning-text-color);
 }
 
-.warning-text {
-  color: #f56565;
+.bg-warning {
+  background: var(--ls-waring-background-color);
 }
 
 a.error,
 span.error {
-    background: red;
+    background: var(--ls-error-background-color);
     padding: 0.1em 0.4em;
     border-radius: var(--ls-border-radius-low);
-    color: #fff;
+    color: var(--ls-error-text-color);
+}
+
+.text-error {
+  color: var(--ls-error-text-color);
+}
+
+.bg-error {
+  background: var(--ls-error-background-color);
+}
+
+.text-success {
+  color: var(--ls-success-text-color);
 }
 
+.bg-success {
+  background: var(--ls-success-background-color);
+}
+
+
 img.small {
   display: inline;
   width: 20px;

src/main/frontend/components/block.cljs

@@ -239,7 +239,7 @@
         (if (or (not asset-file?)
                 (and exist? (not loading?)))
           (content-fn)
-          [:p.text-red-500.text-xs [:small.opacity-80
+          [:p.text-error.text-xs [:small.opacity-80
                                     (util/format "%s not found!" (string/capitalize type))]])))))
 
 (defn open-lightbox
@@ -1877,8 +1877,10 @@
                  (not= "nil" marker))
         {:class (str (string/lower-case marker))})
       (when bg-color
-        {:style {:background-color bg-color}
-         :class "with-bg-color"}))
+        {:style {:background-color (if (some #{bg-color} ui/block-background-colors) 
+                                     (str "var(--ls-highlight-color-" bg-color ")")
+                                     bg-color)}
+         :class "px-1 with-bg-color"}))
      (remove-nils
       (concat
        [(when-not slide? checkbox)
@@ -3097,22 +3099,6 @@
     {:debug-id q
      :trigger-once? false})))
 
-(defn admonition
-  [config type result]
-  (when-let [icon (case (string/lower-case (name type))
-                    "note" svg/note
-                    "tip" svg/tip
-                    "important" svg/important
-                    "caution" svg/caution
-                    "warning" svg/warning
-                    "pinned" svg/pinned
-                    nil)]
-    [:div.flex.flex-row.admonitionblock.align-items {:class type}
-     [:div.pr-4.admonition-icon.flex.flex-col.justify-center
-      {:title (string/upper-case type)} (icon)]
-     [:div.ml-4.text-lg
-      (markup-elements-cp config result)]]))
-
 ;; TODO: move to mldoc
 ;; (defn- convert-md-src-to-custom-block
 ;;   [item]
@@ -3256,22 +3242,22 @@
           (ui/block-error "Invalid query:" {:content content})))
 
       ["Custom" "note" _options result _content]
-      (admonition config "note" result)
+      (ui/admonition "note" (markup-elements-cp config result))
 
       ["Custom" "tip" _options result _content]
-      (admonition config "tip" result)
+      (ui/admonition "tip" (markup-elements-cp config result))
 
       ["Custom" "important" _options result _content]
-      (admonition config "important" result)
+      (ui/admonition "important" (markup-elements-cp config result))
 
       ["Custom" "caution" _options result _content]
-      (admonition config "caution" result)
+      (ui/admonition "caution" (markup-elements-cp config result))
 
       ["Custom" "warning" _options result _content]
-      (admonition config "warning" result)
+      (ui/admonition "warning" (markup-elements-cp config result))
 
       ["Custom" "pinned" _options result _content]
-      (admonition config "pinned" result)
+      (ui/admonition "pinned" (markup-elements-cp config result))
 
       ["Custom" "center" _options l _content]
       (->elem

src/main/frontend/components/block.css

@@ -305,20 +305,6 @@
   }
 }
 
-.with-bg-color {
-  @apply px-1;
-
-  color: #fff;
-
-  a, .page-reference:not(:hover) {
-    color: #aacece;
-
-    .bracket {
-      color: #aacece;
-    }
-  }
-}
-
 .block-properties {
   margin: 4px 0;
   padding: 4px 8px;

src/main/frontend/components/content.cljs

@@ -93,15 +93,6 @@
     "Cycle todos"
     nil)])
 
-;; FIXME: Make it configurable
-(def block-background-colors
-  ["#533e7d"
-   "#497d46"
-   "#787f97"
-   "#978626"
-   "#49767b"
-   "#264c9b"])
-
 (defonce *template-including-parent? (atom nil))
 
 (rum/defc template-checkbox
@@ -164,13 +155,14 @@
     (when-let [block (db/entity [:block/uuid block-id])]
       (let [format (:block/format block)]
         [:.menu-links-wrapper
-         [:div.flex.flex-row.justify-between.pb-2.pt-1.px-2.items-center
+         [:div.flex.flex-row.justify-between.py-1.px-2.items-center
           [:div.flex.flex-row.justify-between.flex-1
-           (for [color block-background-colors]
+           (for [color ui/block-background-colors]
              [:a.m-2.shadow-sm
-              {:on-click (fn [_e]
+              {:title (t (keyword "color" color))
+               :on-click (fn [_e]
                            (editor-handler/set-block-property! block-id "background-color" color))}
-              [:div.heading-bg {:style {:background-color color}}]])
+              [:div.heading-bg {:style {:background-color (str "var(--color-" color "-500)")}}]])
            [:a.m-2.shadow-sm
             {:title    (t :remove-background)
              :on-click (fn [_e]
@@ -178,16 +170,18 @@
             [:div.heading-bg.remove "-"]]]]
 
          [:div.flex.flex-row.justify-between.pb-2.pt-1.px-2.items-center
-          [:div.flex.flex-row.justify-between.flex-1
+          [:div.flex.flex-row.justify-between.flex-1.px-1
            (for [i (range 1 7)]
              (ui/button
               (str "H" i)
+              :class "to-heading-button"
               :on-click (fn [_e]
                           (editor-handler/set-heading! block-id format i))
               :intent "link"
               :small? true))
            (ui/button
             "H-"
+            :class "to-heading-button"
             :title (t :remove-heading)
             :on-click (fn [_e]
                         (editor-handler/remove-heading! block-id format))

src/main/frontend/components/encryption.cljs

@@ -170,8 +170,8 @@
          [:div.input-hints.text-sm.py-2.px-3.rounded.mb-2.mt-2.flex.items-center
           (if-let [display-str (:fail set-remote-graph-pwd-result)]
             [:<>
-             [:span.flex.pr-1.text-red-600 (ui/icon "alert-circle" {:class "text-md mr-1"})]
-             [:span.text-red-600 display-str]]
+             [:span.flex.pr-1.text-error (ui/icon "alert-circle" {:class "text-md mr-1"})]
+             [:span.text-error display-str]]
             [:<>
              [:span.flex.pr-1 (ui/icon "bulb" {:class "text-md mr-1"})]
              [:span "Please enter the password for this graph to continue syncing."]])]])
@@ -187,8 +187,8 @@
                     (not (string/blank? @*pw-confirm)))
               (if (or (not (pattern-ok?))
                       (not= @*password @*pw-confirm))
-                [:span.flex.pr-1.text-red-600 (ui/icon "alert-circle" {:class "text-md mr-1"})]
-                [:span.flex.pr-1.text-green-600 (ui/icon "circle-check" {:class "text-md mr-1"})])
+                [:span.flex.pr-1.text-error (ui/icon "alert-circle" {:class "text-md mr-1"})]
+                [:span.flex.pr-1.text-success (ui/icon "circle-check" {:class "text-md mr-1"})])
               [:span.flex.pr-1 (ui/icon "bulb" {:class "text-md mr-1"})])
 
             (if (not (string/blank? @*password))

src/main/frontend/components/file_sync.cljs

@@ -85,8 +85,8 @@
       (when (not (string/blank? selected-path))
         [:h5.text-xs.pt-1.-mb-1.flex.items-center.leading-none
          (if (mobile-util/iCloud-container-path? selected-path)
-           [:span.inline-block.pr-1.text-red-600.scale-75 (ui/icon "alert-circle")]
-           [:span.inline-block.pr-1.text-green-600.scale-75 (ui/icon "circle-check")])
+           [:span.inline-block.pr-1.text-error.scale-75 (ui/icon "alert-circle")]
+           [:span.inline-block.pr-1.text-success.scale-75 (ui/icon "circle-check")])
          selected-path])
 
       [:div.out-icloud

src/main/frontend/components/file_sync.css

@@ -1,3 +1,9 @@
+:root {
+  --ls-color-file-sync-error: var(--ls-error-color);
+  --ls-color-file-sync-pending: var(--color-yellow-500);
+  --ls-color-file-sync-idle: var(--ls-success-color);
+}
+
 .cp__file-sync {
   &-indicator {
     a.cloud {

src/main/frontend/components/page.cljs

@@ -723,8 +723,8 @@
   (fn [close-fn]
     [:div
      [:div.sm:flex.items-center
-      [:div.mx-auto.flex-shrink-0.flex.items-center.justify-center.h-12.w-12.rounded-full.bg-red-100.sm:mx-0.sm:h-10.sm:w-10
-       [:span.text-red-600.text-xl
+      [:div.mx-auto.flex-shrink-0.flex.items-center.justify-center.h-12.w-12.rounded-full.bg-error.sm:mx-0.sm:h-10.sm:w-10
+       [:span.text-error.text-xl
         (ui/icon "alert-triangle")]]
       [:div.mt-3.text-center.sm:mt-0.sm:ml-4.sm:text-left
        [:h3#modal-headline.text-lg.leading-6.font-medium

src/main/frontend/components/page.css

@@ -133,7 +133,7 @@
 
     .r {
       @apply text-base space-x-2;
-      
+
       a.button {
         color: var(--ls-primary-text-color);
         margin-top: 1px;
@@ -363,11 +363,6 @@ html.is-native-ios {
   }
  }
 
- .text-2xs {
-  font-size: 0.625rem; /* 10px */
-  line-height: 0.875rem; /* 14px */
- }
-
  .toned-down {
    opacity: 0.5;
   color: var(--ls-secondary-text-color);

src/main/frontend/components/page_menu.cljs

@@ -33,8 +33,8 @@
   (fn [close-fn]
     [:div
      [:div.sm:flex.items-center
-      [:div.mx-auto.flex-shrink-0.flex.items-center.justify-center.h-12.w-12.rounded-full.bg-red-100.sm:mx-0.sm:h-10.sm:w-10
-       [:span.text-red-600.text-xl
+      [:div.mx-auto.flex-shrink-0.flex.items-center.justify-center.h-12.w-12.rounded-full.bg-error.sm:mx-0.sm:h-10.sm:w-10
+       [:span.text-error.text-xl
         (ui/icon "alert-triangle")]]
       [:div.mt-3.text-center.sm:mt-0.sm:ml-4.sm:text-left
        [:h3#modal-headline.text-lg.leading-6.font-medium

src/main/frontend/components/plugins.cljs

@@ -292,7 +292,7 @@
         svg/folder)
 
       (when (and (not market?) unpacked?)
-        [:span.flex.justify-center.text-xs.text-red-500.pt-2 (t :plugin/unpacked)])]
+        [:span.flex.justify-center.text-xs.text-error.pt-2 (t :plugin/unpacked)])]
 
      [:div.r
       [:h3.head.text-xl.font-bold.pt-1.5
@@ -1004,7 +1004,7 @@
   [:div
    [:span.block.whitespace-normal
     "This plugin "
-    [:strong.text-red-500 "#" name]
+    [:strong.text-error "#" name]
     " takes too long to load, affecting the application startup time and
      potentially causing other plugins to fail to load."]
 
@@ -1021,7 +1021,7 @@
                                 (notification/clear! pid)
                                 (notification/show!
                                  [:span "The plugin "
-                                  [:strong.text-red-500 "#" name]
+                                  [:strong.text-error "#" name]
                                   " is disabled."] :success
                                  true nil 3000)))
                      (p/catch #(js/console.error %)))))]])

src/main/frontend/components/reference.cljs

@@ -148,11 +148,11 @@
                                    (empty? filter-state)
                                    ""
                                    (every? true? (vals filter-state))
-                                   "text-green-400"
+                                   "text-success"
                                    (every? false? (vals filter-state))
-                                   "text-red-400"
+                                   "text-error"
                                    :else
-                                   "text-yellow-400")
+                                   "text-warning")
                           :style {:fontSize 24}})]]
 
      (fn []

src/main/frontend/components/svg.cljs

@@ -70,7 +70,7 @@
      :d               "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"}]])
 (rum/defc note
   []
-  [:svg.h-8.w-8.svg-shadow.note
+  [:svg.h-8.w-8.note
    {:view-box "0 0 512 512"
     :fill     "currentColor"}
    [:path
@@ -88,20 +88,18 @@
 
 (rum/defc important
   []
-  [:svg.h-8.w-8.svg-shadow.important
+  [:svg.h-8.w-8.important
    {:view-box "0 0 512 512"
-    :fill     "currentColor"
-    :color    "#bf0000"}
+    :fill     "var(--ls-error-color)"}
    [:path
     {:d
      "M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"}]])
 
 (rum/defc caution
   []
-  [:svg.h-8.w-8.svg-shadow.caution
+  [:svg.h-8.w-8.caution
    {:view-box "0 0 384 512"
-    :fill     "currentColor"
-    :color    "#bf3400"}
+    :fill     "var(--ls-warning-color)"}
    [:path
     {:d
      "M216 23.86c0-23.8-30.65-32.77-44.15-13.04C48 191.85 224 200 224 288c0 35.63-29.11 64.46-64.85 63.99-35.17-.45-63.15-29.77-63.15-64.94v-85.51c0-21.7-26.47-32.23-41.43-16.5C27.8 213.16 0 261.33 0 320c0 105.87 86.13 192 192 192s192-86.13 192-192c0-170.29-168-193-168-296.14z"}]])
@@ -110,11 +108,10 @@
   ([]
    (warning nil))
   ([opts]
-   [:svg.h-8.w-8.svg-shadow.warning
+   [:svg.h-8.w-8.warning
     (merge
       {:view-box "0 0 576 512"
-       :fill     "currentColor"
-       :color    "#bf6900"}
+       :fill     "var(--ls-warning-color)"}
       opts)
     [:path
      {:d

src/main/frontend/dicts.cljc

@@ -139,6 +139,13 @@
         :asset/maximize "Maximize image"
         :asset/confirm-delete "Are you sure you want to delete this {1}?"
         :asset/physical-delete "Remove the file too (notice it can't be restored)"
+        :color/gray "Gray"
+        :color/red "Red"
+        :color/yellow "Yellow"
+        :color/green "Green"
+        :color/blue "Blue"
+        :color/purple "Purple"
+        :color/pink "Pink"
         :content/copy "Copy"
         :content/cut "Cut"
         :content/make-todos "Make {1}s"

src/main/frontend/extensions/pdf/pdf.css

@@ -1,11 +1,11 @@
 @import "_viewer.css";
 
 :root {
-  --ph-highlight-color-blue: #55b8fe;
-  --ph-highlight-color-green: #46da48;
-  --ph-highlight-color-red: #fd709a;
-  --ph-highlight-color-purple: #ac8cf1;
-  --ph-highlight-color-yellow: #fcd713;
+  --ph-highlight-color-blue: var(--color-blue-100);
+  --ph-highlight-color-green: var(--color-green-100);
+  --ph-highlight-color-red: var(--color-red-100);
+  --ph-highlight-color-purple: var(--color-purple-100);
+  --ph-highlight-color-yellow: var(--color-yellow-100);
 
   --ph-highlight-scroll-into-color: rgba(255, 75, 93, 0.67);
 
@@ -385,23 +385,23 @@ input::-webkit-inner-spin-button {
           }
 
           &[data-color=yellow] {
-            background-color: var(--ph-highlight-color-yellow);
+            background-color: var(--color-yellow-500);
           }
 
           &[data-color=blue] {
-            background-color: var(--ph-highlight-color-blue);
+            background-color: var(--color-blue-500);
           }
 
           &[data-color=green] {
-            background-color: var(--ph-highlight-color-green);
+            background-color: var(--color-green-500);
           }
 
           &[data-color=red] {
-            background-color: var(--ph-highlight-color-red);
+            background-color: var(--color-red-500);
           }
 
           &[data-color=purple] {
-            background-color: var(--ph-highlight-color-purple);
+            background-color: var(--color-purple-500);
           }
         }
       }

src/main/frontend/extensions/zotero.cljs

@@ -95,7 +95,7 @@
 
        [:span.animate-spin-reverse {:style {:visibility (if is-searching "visible"  "hidden")}}  svg/refresh]]]
 
-     [:div.h-2.text-sm.text-red-400.mb-2 (if search-error (str "Search error: " search-error) "")]
+     [:div.h-2.text-sm.text-error.mb-2 (if search-error (str "Search error: " search-error) "")]
 
      [:div
       (map
@@ -154,7 +154,7 @@
          (not (re-matches #"^\d+$" (str @(::type-id state)))))
      (ui/admonition
       :warning
-      [:p.text-red-500
+      [:p.text-error
        "User ID is different from username and can be found on the "
        [:a {:href "https://www.zotero.org/settings/keys" :target "_blank"}
         "https://www.zotero.org/settings/keys"]
@@ -176,7 +176,7 @@
    (when (setting/setting :overwrite-mode?)
      (ui/admonition
       :warning
-      [:p.text-red-500
+      [:p.text-error
        "Dangerous! This will delete and recreate Zotero existing page! Make sure to backup your notes first in case something goes wrong. Make sure you don't put any personal item in previous Zotero page and it's OK to overwrite the page!"]))])
 
 (rum/defc attachment-setting <

src/main/frontend/ui.cljs

@@ -51,6 +51,14 @@
 
 (defonce icon-size (if (mobile-util/native-platform?) 26 20))
 
+(def block-background-colors
+  ["gray"
+   "red"
+   "yellow"
+   "green"
+   "blue"
+   "purple"])
+
 (rum/defc ls-textarea
   < rum/reactive
   {:did-mount (fn [state]
@@ -226,8 +234,8 @@
           (case status
             :success
             ["text-gray-900 dark:text-gray-300 "
-             [:svg.h-6.w-6.text-green-400
-              {:stroke "currentColor", :viewBox "0 0 24 24", :fill "none"}
+             [:svg.h-6.w-6
+              {:stroke "var(--ls-success-color)", :viewBox "0 0 24 24", :fill "none"}
               [:path
                {:d               "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                 :stroke-width    "2"
@@ -235,17 +243,17 @@
                 :stroke-linecap  "round"}]]]
             :warning
             ["text-gray-900 dark:text-gray-300 "
-             [:svg.h-6.w-6.text-yellow-500
-              {:stroke "currentColor", :viewBox "0 0 24 24", :fill "none"}
+             [:svg.h-6.w-6
+              {:stroke "var(--ls-warning-color)", :viewBox "0 0 24 24", :fill "none"}
               [:path
                {:d               "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                 :stroke-width    "2"
                 :stroke-linejoin "round"
                 :stroke-linecap  "round"}]]]
 
-            ["text-red-500"
-             [:svg.h-6.w-6.text-red-500
-              {:view-box "0 0 20 20", :fill "currentColor"}
+            ["text-error"
+             [:svg.h-6.w-6
+              {:view-box "0 0 20 20", :fill "var(--ls-error-color)"}
               [:path
                {:clip-rule "evenodd"
                 :d
@@ -625,8 +633,8 @@
       [:div.ui__confirm-modal
        {:class (str "is-" tag)}
        [:div.sm:flex.sm:items-start
-        [:div.mx-auto.flex-shrink-0.flex.items-center.justify-center.h-12.w-12.rounded-full.bg-red-100.sm:mx-0.sm:h-10.sm:w-10
-         [:svg.h-6.w-6.text-red-600
+        [:div.mx-auto.flex-shrink-0.flex.items-center.justify-center.h-12.w-12.rounded-full.bg-error.sm:mx-0.sm:h-10.sm:w-10
+         [:svg.h-6.w-6.text-error
           {:stroke "currentColor", :view-box "0 0 24 24", :fill "none"}
           [:path
            {:d
@@ -764,7 +772,7 @@
                       nil)]
       [:div.flex.flex-row.admonitionblock.align-items {:class type}
        [:div.pr-4.admonition-icon.flex.flex-col.justify-center
-        {:title (string/upper-case type)} (icon)]
+        {:title (string/capitalize type)} (icon)]
        [:div.ml-4.text-lg
         content]])))
 
@@ -797,7 +805,7 @@
   [:section.border.mt-1.p-1.cursor-pointer.block-content-fallback-ui
    section-attrs
    [:div.flex.justify-between.items-center.px-1
-    [:h5.text-red-600.pb-1 title]
+    [:h5.text-error.pb-1 title]
     [:a.text-xs.opacity-50.hover:opacity-80
      {:href "https://github.com/logseq/logseq/issues/new?labels=from:in-app&template=bug_report.yaml"
       :target "_blank"} "report issue"]]

tailwind.all.css

@@ -1,6 +1,7 @@
 @charset "utf-8";
 @import "tailwindcss/base";
 @import "tailwindcss/components";
+@import "tailwindcss/utilities";
 @import "resources/css/inter.css";
 @import "resources/css/reveal.min.css";
 @import "resources/css/reveal_black.min.css";
@@ -20,4 +21,3 @@
 @import "resources/css/srs_cards.css";
 @import "resources/css/tabler-extension.css";
 @import-glob "src/main/frontend/**/[!_]*.css";
-@import "tailwindcss/utilities";

tailwind.config.js

@@ -1,16 +1,56 @@
 const colors = require('tailwindcss/colors')
 
+function exposeColorsToCssVars({ addBase, theme }) {
+  function extractColorVars(colorObj, colorGroup = '') {
+    return Object.keys(colorObj).reduce((vars, colorKey) => {
+      const value = colorObj[colorKey];
+
+      const newVars =
+        typeof value === 'string'
+          ? { [`--color${colorGroup}-${colorKey}`]: value }
+          : extractColorVars(value, `-${colorKey}`);
+
+      return { ...vars, ...newVars };
+    }, {});
+  }
+
+  addBase({
+    ':root': extractColorVars(theme('colors')),
+  });
+}
+
 module.exports = {
   mode: 'jit',
-  purge: [
-    './src/**/*.js',
-    './src/**/*.cljs',
-    './resources/**/*.html',
-  ],
-  plugins: [require('@tailwindcss/ui')],
+  purge: {
+    content: [
+      './src/**/*.js',
+      './src/**/*.cljs',
+      './resources/**/*.html'
+    ],
+    safelist: [
+      "bg-black",
+      "bg-white",
+      "bg-gray-50",  "bg-red-50",  "bg-yellow-50",  "bg-green-50",  "bg-blue-50",  "bg-indigo-50",  "bg-orange-50",  "bg-rose-50",  "bg-purple-50",
+      "bg-gray-100", "bg-red-100", "bg-yellow-100", "bg-green-100", "bg-blue-100", "bg-indigo-100", "bg-orange-100", "bg-rose-100", "bg-purple-100", "bg-pink-100",
+      "bg-gray-200", "bg-red-200", "bg-yellow-200", "bg-green-200", "bg-blue-200", "bg-indigo-200", "bg-orange-200", "bg-rose-200", "bg-purple-200", "bg-pink-200",
+      "bg-gray-300", "bg-red-300", "bg-yellow-300", "bg-green-300", "bg-blue-300", "bg-indigo-300", "bg-orange-300", "bg-rose-300", "bg-purple-300", "bg-pink-300",
+      "bg-gray-400", "bg-red-400", "bg-yellow-400", "bg-green-400", "bg-blue-400", "bg-indigo-400", "bg-orange-400", "bg-rose-400", "bg-purple-400", "bg-pink-400",
+      "bg-gray-500", "bg-red-500", "bg-yellow-500", "bg-green-500", "bg-blue-500", "bg-indigo-500", "bg-orange-500", "bg-rose-500", "bg-purple-500", "bg-pink-500",
+      "bg-gray-600", "bg-red-600", "bg-yellow-600", "bg-green-600", "bg-blue-600", "bg-indigo-600", "bg-orange-600", "bg-rose-600", "bg-purple-600", "bg-pink-600",
+      "bg-gray-700", "bg-red-700", "bg-yellow-700", "bg-green-700", "bg-blue-700", "bg-indigo-700", "bg-orange-700", "bg-rose-700", "bg-purple-700", "bg-pink-700",
+      "bg-gray-800", "bg-red-800", "bg-yellow-800", "bg-green-800", "bg-blue-800", "bg-indigo-800", "bg-orange-800", "bg-rose-800", "bg-purple-800", "bg-pink-800",
+      "bg-gray-900", "bg-red-900", "bg-yellow-900", "bg-green-900", "bg-blue-900", "bg-indigo-900", "bg-orange-900", "bg-rose-900", "bg-purple-900", "bg-pink-900",
+    ]
+  },
+  plugins: [
+    require('@tailwindcss/ui'),
+    exposeColorsToCssVars],
   darkMode: 'class',
   theme: {
     extend: {
+      fontSize: {
+        '2xs': ['0.625rem', '0.875rem']
+      },
       animation: {
         'spin-reverse': 'spin 2s linear infinite reverse',
       },
@@ -48,7 +88,9 @@ module.exports = {
       red: colors.red,
       yellow: colors.amber,
       orange: colors.orange,
-      rose: colors.rose
+      rose: colors.rose,
+      purple: colors.purple,
+      pink: colors.pink
     }
   }
 }