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

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"]]