remove custom-color-by-theme method, add resolve-color method (#17567)

src/quo2/components/avatars/account_avatar/component_spec.cljs

@@ -28,7 +28,7 @@
                    {:height          (:size opts)
                     :width           (:size opts)
                     :borderRadius    (style/get-border-radius (:size opts))
-                    :backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 60)})
+                    :backgroundColor (colors/resolve-color (:customization-color opts) :dark)})
       (h/is-truthy (h/query-by-label-text :account-emoji))
       (h/has-style (h/query-by-label-text :account-emoji)
                    {:fontSize (style/get-emoji-size (:size opts))})
@@ -47,7 +47,7 @@
         :width           (:size opts)
         :borderRadius    (style/get-border-radius (:size opts))
         :borderWidth     1
-        :backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 50 10 10)})
+        :backgroundColor (colors/resolve-color (:customization-color opts) :light 10)})
       (h/is-truthy (h/query-by-label-text :account-emoji))
       (h/has-style (h/query-by-label-text :account-emoji)
                    {:fontSize (style/get-emoji-size (:size opts))})
@@ -64,7 +64,7 @@
                    {:height          (:size opts)
                     :width           (:size opts)
                     :borderRadius    (style/get-border-radius (:size opts))
-                    :backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 60)})
+                    :backgroundColor (colors/resolve-color (:customization-color opts) :dark)})
       (h/is-truthy (h/query-by-label-text :account-emoji))
       (h/has-style (h/query-by-label-text :account-emoji)
                    {:fontSize (style/get-emoji-size (:size opts))})
@@ -83,7 +83,7 @@
         :width           (:size opts)
         :borderRadius    (style/get-border-radius (:size opts))
         :borderWidth     0.8
-        :backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 50 10 10)})
+        :backgroundColor (colors/resolve-color (:customization-color opts) :light 10)})
       (h/is-truthy (h/query-by-label-text :account-emoji))
       (h/has-style (h/query-by-label-text :account-emoji)
                    {:fontSize (style/get-emoji-size (:size opts))})

src/quo2/components/avatars/account_avatar/style.cljs

@@ -63,14 +63,14 @@
                       (keyword? size) (container-size size))]
     (cond-> {:width            width
              :height           width
-             :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)
+             :background-color (colors/resolve-color customization-color theme)
              :border-radius    (get-border-radius size)
-             :border-color     (if (= theme :light) colors/neutral-80-opa-5 colors/white-opa-5)
+             :border-color     (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
              :padding          (get-padding size)
              :align-items      :center
              :justify-content  :center}
 
       watch-only?
       (assoc :border-width     (get-border-width size)
-             :background-color (colors/custom-color-by-theme customization-color 50 50 10 10 theme)))))
+             :background-color (colors/resolve-color customization-color theme 10)))))
 

src/quo2/components/avatars/channel_avatar/style.cljs

@@ -4,7 +4,7 @@
 (def lock-icon-size 12)
 
 (defn outer-container
-  [{:keys [size color]}]
+  [{:keys [size customization-color theme]}]
   (let [container-size (case size
                          :size-64 64
                          :size-32 32
@@ -14,7 +14,7 @@
      :border-radius    container-size
      :justify-content  :center
      :align-items      :center
-     :background-color (colors/theme-alpha color 0.1 0.1)}))
+     :background-color (colors/resolve-color customization-color theme 10)}))
 
 (defn emoji-size
   [size]
@@ -24,12 +24,12 @@
                 11)})
 
 (defn lock-container
-  [size]
+  [size theme]
   (let [distance (if (= size :size-32) 20 12)]
     {:position         :absolute
      :left             distance
      :top              distance
-     :background-color (colors/theme-colors colors/white colors/neutral-95)
+     :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
      :border-radius    (* 2 lock-icon-size)
      :padding          2}))
 

src/quo2/components/avatars/channel_avatar/view.cljs

@@ -5,34 +5,35 @@
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
-            [utils.string]))
+            [utils.string]
+            [quo2.theme :as quo.theme]))
 
 (defn- initials
-  [full-name size color]
+  [{:keys [full-name size customization-color theme]}]
   (let [amount-initials (if (#{:size-32 :size-64} size) 2 1)
         channel-name    (string/replace full-name "#" "")]
     [text/text
      (cond-> {:accessibility-label :initials
-              :style               {:color color}
+              :style               {:color (colors/resolve-color customization-color theme)}
               :size                :paragraph-2
               :weight              :semi-bold}
        (= size :size-64) (assoc :size   :heading-1
                                 :weight :medium))
      (utils.string/get-initials channel-name amount-initials)]))
 
 (defn- lock
-  [locked? size]
+  [locked? size theme]
   ;; When `locked?` is nil, we must not display the unlocked icon.
   (when (boolean? locked?)
     [rn/view
      {:accessibility-label :lock
-      :style               (style/lock-container size)}
+      :style               (style/lock-container size theme)}
      [icons/icon (if locked? :i/locked :i/unlocked)
-      {:color           (colors/theme-colors colors/neutral-50 colors/neutral-40)
+      {:color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
        :container-style style/lock-icon
        :size            12}]]))
 
-(defn view
+(defn- view-internal
   "Options:
 
   :size - keyword (default nil) - Container size, for the moment,
@@ -50,14 +51,22 @@
   :full-name - string (default nil) - When :emoji is blank, this value will be
   used to extract the initials.
   "
-  [{:keys [size emoji customization-color locked? full-name]}]
+  [{:keys [size emoji customization-color locked? full-name theme]}]
   [rn/view
    {:accessibility-label :channel-avatar
-    :style               (style/outer-container {:size size :color customization-color})}
+    :style               (style/outer-container {:theme               theme
+                                                 :size                size
+                                                 :customization-color customization-color})}
    (if (string/blank? emoji)
-     [initials full-name size customization-color]
+     [initials
+      {:full-name           full-name
+       :size                size
+       :customization-color customization-color
+       :theme               theme}]
      [rn/text
       {:style               (style/emoji-size size)
        :accessibility-label :emoji}
       (string/trim emoji)])
-   [lock locked? size]])
+   [lock locked? size theme]])
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/avatars/icon_avatar.cljs

@@ -19,8 +19,8 @@
     :or   {opacity 20
            size    :size-32}}]
   (let [{component-size :component icon-size :icon} (get sizes size)
-        circle-color                                (colors/custom-color color 50 opacity)
-        icon-color                                  (colors/custom-color-by-theme color 50 60)]
+        circle-color                                (colors/resolve-color color theme opacity)
+        icon-color                                  (colors/resolve-color color theme)]
     [rn/view
      {:style {:width            component-size
               :height           component-size

src/quo2/components/avatars/user_avatar/style.cljs

@@ -62,7 +62,7 @@
      :border-radius    dimensions
      :justify-content  :center
      :align-items      :center
-     :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)}))
+     :background-color (colors/resolve-color customization-color theme)}))
 
 (def indicator-color
   {:online  colors/success-50
@@ -80,7 +80,7 @@
 
 (defn customization-color
   [color-id theme]
-  (colors/custom-color-by-theme color-id 50 60 nil nil theme))
+  (colors/resolve-color color-id theme))
 
 (def initials-avatar-text
   {:color colors/white-opa-70})

src/quo2/components/avatars/wallet_user_avatar.cljs

@@ -2,7 +2,8 @@
   (:require [clojure.string :as string]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]))
+            [react-native.core :as rn]
+            [quo2.theme :as quo.theme]))
 
 (def circle-sizes
   {:small   20
@@ -25,10 +26,10 @@
    :size-64 :medium
    :x-large :medium})
 
-(defn wallet-user-avatar
-  "params, first name, last name, color, size
+(defn- view-internal
+  "params, first name, last name, customization-color, size
    and if it's dark or not!"
-  [{:keys [f-name l-name customization-color size monospace? uppercase?]
+  [{:keys [f-name l-name customization-color size theme monospace? uppercase?]
     :or   {f-name     "John"
            l-name     "Doe"
            size       :x-large
@@ -42,11 +43,11 @@
                            (#(if uppercase? (string/upper-case %) %))
                            (subs 0 1))
         circle-color   (if customization-color
-                         (colors/custom-color customization-color 50 20)
-                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))
+                         (colors/resolve-color customization-color theme 20)
+                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))
         text-color     (if customization-color
-                         (colors/custom-color-by-theme customization-color 50 60)
-                         (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70))]
+                         (colors/resolve-color customization-color theme)
+                         (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))]
     [rn/view
      {:style {:width            circle-size
               :height           circle-size
@@ -62,3 +63,5 @@
       (if small?
         (str f-name-initial)
         (str f-name-initial l-name-initial))]]))
+
+(def wallet-user-avatar (quo.theme/with-theme view-internal))

src/quo2/components/calendar/calendar_day/style.cljs

@@ -50,7 +50,7 @@
     (assoc :opacity 0.3)
 
     (= state :selected)
-    (assoc :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme))))
+    (assoc :background-color (colors/resolve-color customization-color theme))))
 
 (defn text
   [{:keys [state theme]}]
@@ -65,5 +65,5 @@
    :height           2
    :border-radius    8
    :background-color (if (= state :today)
-                       (colors/custom-color-by-theme customization-color 50 60 nil nil theme)
+                       (colors/resolve-color customization-color theme)
                        colors/neutral-100-opa-0)})

src/quo2/components/code/common/style.cljs

@@ -4,34 +4,34 @@
 ;; Example themes:
 ;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
 (defn highlight-theme
-  [theme-key]
-  (case theme-key
-    :hljs-comment      (colors/theme-colors colors/neutral-40 colors/neutral-60)
-    :hljs-title        (colors/custom-color-by-theme :sky 50 60)
-    :hljs-keyword      (colors/custom-color-by-theme :green 50 60)
-    :hljs-string       (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-literal      (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-number       (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-symbol       (colors/custom-color-by-theme :orange 50 50)
-    :hljs-builtin-name (colors/custom-color-by-theme :pink 50 50)
+  [class-name theme]
+  (case class-name
+    :hljs-comment      (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+    :hljs-title        (colors/resolve-color :sky theme)
+    :hljs-keyword      (colors/resolve-color :green theme)
+    :hljs-string       (colors/resolve-color :turquoise theme)
+    :hljs-literal      (colors/resolve-color :turquoise theme)
+    :hljs-number       (colors/resolve-color :turquoise theme)
+    :hljs-symbol       (colors/resolve-color :orange theme)
+    :hljs-builtin-name (colors/resolve-color :pink theme)
     :line-number       colors/neutral-40
     nil))
 
 (defn text-style
-  [class-names preview?]
+  [class-names preview? theme]
   (let [text-color (->> class-names
                         (map keyword)
                         (some (fn [class-name]
-                                (when-let [text-color (highlight-theme class-name)]
+                                (when-let [text-color (highlight-theme class-name theme)]
                                   text-color))))]
     (cond-> {:flex-shrink 1
              :line-height 18}
       preview?   (assoc :color colors/white)
       text-color (assoc :color text-color))))
 
 (defn border-color
-  []
-  (colors/theme-colors colors/neutral-20 colors/neutral-80))
+  [theme]
+  (colors/theme-colors colors/neutral-20 colors/neutral-80 theme))
 
 (defn container
   [preview? theme]
@@ -43,7 +43,7 @@
     {:overflow         :hidden
      :padding          8
      :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)
-     :border-color     (border-color)
+     :border-color     (border-color theme)
      :border-width     1
      :border-radius    16}))
 
@@ -68,14 +68,14 @@
                     :background-color (colors/theme-colors colors/neutral-10 colors/neutral-70 theme))))
 
 (defn divider
-  [line-number-width]
+  [line-number-width theme]
   {:position         :absolute
    :bottom           0
    :top              0
    :left             (+ line-number-width 7 7)
    :width            1
    :z-index          2
-   :background-color (border-color)})
+   :background-color (border-color theme)})
 
 (def line {:flex-direction :row})
 
@@ -100,8 +100,4 @@
    :right    8
    :z-index  1})
 
-(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
-
-(defn button-background-color
-  []
-  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))
+(defn gradient-color [theme] (colors/theme-colors colors/white colors/neutral-80 theme))