status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-02-11 16:17:13 +00:00
Code Issues Projects Releases Wiki Activity

chore: resolve deprecation warnings related to custom-color and touchable-without-feeback (#21874)

Browse Source 
This change refactors the codebase to avoid using deprecated functions and components related to the `custom-color` function (now removed) and the touchable-without-feedback component.
This commit is contained in:
Sean Hagstrom 2025-01-14 04:09:49 -08:00 committed by GitHub
parent c11cf22bbb
commit 457ed15e0b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
55 changed files with 312 additions and 364 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/legacy/status_im/ui/components/button/view.cljs
View File

@ -67,7 +67,7 @@
:else theme) :else theme)
{:keys [icon-color background-color text-color border-color]} {:keys [icon-color background-color text-color border-color]}
(themes theme')] (themes theme')]
[rn/touchable-without-feedback [rn/pressable
(merge {:disabled disabled (merge {:disabled disabled
:accessibility-label accessibility-label} :accessibility-label accessibility-label}
(when on-press (when on-press

4
src/quo/components/avatars/group_avatar/style.cljs
View File

@ -10,9 +10,7 @@
:justify-content :center :justify-content :center
:border-radius (/ container-size 2) :border-radius (/ container-size 2)
:overflow :hidden :overflow :hidden
:background-color (colors/theme-colors (colors/custom-color customization-color 50) :background-color (colors/resolve-color customization-color theme)})
(colors/custom-color customization-color 60)
theme)})
(defn avatar-identifier (defn avatar-identifier
[theme] [theme]

7
src/quo/components/avatars/wallet_user_avatar/style.cljs
View File

@ -5,16 +5,13 @@
[customization-color neutral? theme] [customization-color neutral? theme]
(if neutral? (if neutral?
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
(colors/custom-color customization-color 50 20))) (colors/resolve-color customization-color theme 20)))
(defn- text-color (defn- text-color
[customization-color neutral? theme] [customization-color neutral? theme]
(if neutral? (if neutral?
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme) (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
(colors/theme-colors (colors/resolve-color customization-color theme)))
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme)))
(defn container (defn container
[circle-size customization-color neutral? theme] [circle-size customization-color neutral? theme]

5
src/quo/components/banners/banner/style.cljs
View File

@ -2,9 +2,10 @@
(:require (:require
[quo.foundations.colors :as colors])) [quo.foundations.colors :as colors]))
(def container (defn container
[theme]
{:height 40 {:height 40
:background-color (colors/custom-color :blue 50 20) :background-color (colors/resolve-color :blue theme 20)
:flex-direction :row :flex-direction :row
:align-items :center :align-items :center
:padding-right 22 :padding-right 22

2
src/quo/components/banners/banner/view.cljs
View File

@ -14,7 +14,7 @@
(when (pos? pins-count) (when (pos? pins-count)
[rn/touchable-opacity [rn/touchable-opacity
{:accessibility-label :pinned-banner {:accessibility-label :pinned-banner
:style style/container :style (style/container theme)
:active-opacity 1 :active-opacity 1
:on-press on-press} :on-press on-press}
(when-not hide-pin? (when-not hide-pin?

4
src/quo/components/browser/browser_input/view.cljs
View File

@ -44,9 +44,7 @@
(defn cursor-color (defn cursor-color
[customization-color theme] [customization-color theme]
(colors/theme-colors (colors/custom-color customization-color 50) (colors/resolve-color customization-color theme))
(colors/custom-color customization-color 60)
theme))
(defn placeholder-color (defn placeholder-color
[state blur? theme] [state blur? theme]

9
src/quo/components/buttons/button/view.cljs
View File

@ -54,16 +54,15 @@
(fn [] (fn []
(set-pressed-state nil) (set-pressed-state nil)
(when on-press-out (on-press-out))))] (when on-press-out (on-press-out))))]
[rn/touchable-without-feedback [rn/pressable
{:disabled (boolean disabled?) {:disabled (boolean disabled?)
:accessibility-label accessibility-label :accessibility-label accessibility-label
:on-press-in on-press-in-cb :on-press-in on-press-in-cb
:on-press-out on-press-out-cb :on-press-out on-press-out-cb
:on-press on-press :on-press on-press
:allow-multiple-presses? allow-multiple-presses? :allow-multiple-presses? allow-multiple-presses?
:on-long-press on-long-press} :on-long-press on-long-press
[rn/view :style (merge
{:style (merge
(style/shape-style-container size border-radius) (style/shape-style-container size border-radius)
container-style)} container-style)}
[rn/view [rn/view
@ -131,4 +130,4 @@
:disabled? disabled?})} :disabled? disabled?})}
[quo.icons/icon icon-right [quo.icons/icon icon-right
{:color (or icon-right-color icon-color) {:color (or icon-right-color icon-color)
:size icon-size}]])]]])) :size icon-size}]])]]))

10
src/quo/components/buttons/dynamic_button/view.cljs
View File

@ -11,14 +11,8 @@
[{:keys [type pressed? customization-color theme]}] [{:keys [type pressed? customization-color theme]}]
(if (= type :mention) (if (= type :mention)
(if pressed? (if pressed?
(colors/theme-colors (colors/resolve-color customization-color (colors/invert-theme theme))
(colors/custom-color customization-color 60) (colors/resolve-color customization-color theme))
(colors/custom-color customization-color 50)
theme)
(colors/theme-colors
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme))
(if pressed? (if pressed?
(colors/theme-colors colors/neutral-80-opa-80 colors/white-opa-80 theme) (colors/theme-colors colors/neutral-80-opa-80 colors/white-opa-80 theme)
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)))) (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))))

4
src/quo/components/buttons/slide_button/style.cljs
View File

@ -41,7 +41,7 @@
:justify-content :space-around}]) :justify-content :space-around}])
(defn track (defn track
[{:keys [disabled? customization-color height blur?]}] [{:keys [disabled? customization-color height blur? theme]}]
{:align-items :flex-start {:align-items :flex-start
:justify-content :center :justify-content :center
:border-radius 14 :border-radius 14
@ -49,7 +49,7 @@
:align-self :stretch :align-self :stretch
:padding constants/track-padding :padding constants/track-padding
:opacity (if disabled? 0.3 1) :opacity (if disabled? 0.3 1)
:background-color (utils/track-color customization-color blur?)}) :background-color (utils/track-color customization-color theme blur?)})
(defn track-cover (defn track-cover
[interpolate-track] [interpolate-track]

14
src/quo/components/buttons/slide_button/utils.cljs
View File

@ -6,27 +6,21 @@
(defn main-color (defn main-color
"`customization-color` Customization color" "`customization-color` Customization color"
[customization-color theme] [customization-color theme]
(colors/theme-colors (colors/resolve-color customization-color theme))
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme))
(defn track-color (defn track-color
"`customization-color` Customization color" "`customization-color` Customization color"
([customization-color blur?] ([customization-color theme blur?]
(if blur? (if blur?
colors/white-opa-5 colors/white-opa-5
(colors/custom-color customization-color 50 10)))) (colors/resolve-color customization-color theme 10))))
(defn text-color (defn text-color
"`customization-color` Customization color" "`customization-color` Customization color"
[customization-color theme blur?] [customization-color theme blur?]
(if blur? (if blur?
colors/white-opa-40 colors/white-opa-40
(colors/theme-colors (colors/resolve-color customization-color theme)))
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme)))
(defn clamp-value (defn clamp-value
[value min-value max-value] [value min-value max-value]

3
src/quo/components/buttons/slide_button/view.cljs
View File

@ -88,7 +88,8 @@
:style (merge (style/track {:disabled? disabled? :style (merge (style/track {:disabled? disabled?
:customization-color custom-color :customization-color custom-color
:height (dimensions :track-height) :height (dimensions :track-height)
:blur? blur?}) :blur? blur?
:theme theme})
container-style) container-style)
:on-layout on-track-layout} :on-layout on-track-layout}
[reanimated/view {:style (style/track-cover interpolate-track)} [reanimated/view {:style (style/track-cover interpolate-track)}

4
src/quo/components/colors/color/view.cljs
View File

@ -22,9 +22,7 @@
hex-color (if (= :feng-shui color) hex-color (if (= :feng-shui color)
(colors/theme-colors colors/neutral-100 colors/white theme) (colors/theme-colors colors/neutral-100 colors/white theme)
(colors/theme-colors (colors/custom-color color 50) (colors/resolve-color color theme))]
(colors/custom-color color 60)
theme))]
[rn/pressable [rn/pressable
{:style (style/color-button hex-color selected? idx window-width) {:style (style/color-button hex-color selected? idx window-width)

5
src/quo/components/common/notification_dot/style.cljs
View File

@ -7,10 +7,7 @@
(defn dot-background-color (defn dot-background-color
[customization-color theme blur?] [customization-color theme blur?]
(cond (cond
customization-color (colors/theme-colors customization-color (colors/resolve-color customization-color theme)
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme)
blur? (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme) blur? (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
:else (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))) :else (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))

8
src/quo/components/community/banner/view.cljs
View File

@ -29,12 +29,12 @@
(defn view (defn view
[{:keys [title description on-press accessibility-label banner style]}] [{:keys [title description on-press accessibility-label banner style]}]
(let [theme (quo.theme/use-theme)] (let [theme (quo.theme/use-theme)]
[rn/touchable-without-feedback [rn/pressable
{:on-press on-press {:on-press on-press
:accessibility-label accessibility-label} :accessibility-label accessibility-label
[rn/view {:style (merge (style/community-card theme) style)} :style (merge (style/community-card theme) style)}
[card-title-and-description title description theme] [card-title-and-description title description theme]
[rn/image [rn/image
{:style style/discover-illustration {:style style/discover-illustration
:source banner :source banner
:accessibility-label :discover-communities-illustration}]]])) :accessibility-label :discover-communities-illustration}]]))

8
src/quo/components/community/community_card_view.cljs
View File

@ -35,10 +35,10 @@
[{:keys [community on-press width]}] [{:keys [community on-press width]}]
(let [theme (quo.theme/use-theme) (let [theme (quo.theme/use-theme)
{:keys [name description locked? images cover status tokens tags]} community] {:keys [name description locked? images cover status tokens tags]} community]
[rn/touchable-without-feedback [rn/pressable
{:accessibility-label :community-card-item {:accessibility-label :community-card-item
:on-press on-press} :on-press on-press
[rn/view {:style (style/community-card 20 theme)} :style (style/community-card 20 theme)}
[rn/view [rn/view
{:style {:width width {:style {:width width
:height 230 :height 230
@ -67,7 +67,7 @@
[community-view/community-stats-column [community-view/community-stats-column
{:type :card-view}]] {:type :card-view}]]
[rn/view {:style (style/community-tags-position)} [rn/view {:style (style/community-tags-position)}
[community-view/community-tags {:tags tags}]]]]]]])) [community-view/community-tags {:tags tags}]]]]]]))
(defn view (defn view
[{:keys [loading?] :as props}] [{:keys [loading?] :as props}]

4
src/quo/components/counter/counter/style.cljs
View File

@ -5,9 +5,7 @@
(defn get-color (defn get-color
[type customization-color theme] [type customization-color theme]
(case type (case type
:default (colors/theme-colors (colors/custom-color customization-color 50) :default (colors/resolve-color customization-color theme)
(colors/custom-color customization-color 60)
theme)
:secondary (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) :secondary (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
:grey (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) :grey (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
:outline (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) :outline (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)

10
src/quo/components/counter/step/style.cljs
View File

@ -14,9 +14,13 @@
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 theme) (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 theme)
(colors/theme-colors colors/neutral-20 colors/neutral-80 theme))) (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)))
(defn active-background-color [customization-color] (colors/custom-color customization-color 50 10)) (defn active-background-color
[customization-color theme]
(colors/resolve-color customization-color theme 10))
(defn complete-background-color [customization-color] (colors/custom-color customization-color 50)) (defn complete-background-color
[customization-color]
(colors/resolve-color customization-color :light))
(defn container (defn container
[{:keys [size type in-blur-view? theme customization-color]}] [{:keys [size type in-blur-view? theme customization-color]}]
@ -29,7 +33,7 @@
:border-color (neutral-border-color in-blur-view? theme)) :border-color (neutral-border-color in-blur-view? theme))
(= type :active) (= type :active)
(assoc :background-color (active-background-color customization-color)) (assoc :background-color (active-background-color customization-color theme))
(= type :complete) (= type :complete)
(assoc :background-color (complete-background-color customization-color)))) (assoc :background-color (complete-background-color customization-color))))

5
src/quo/components/dividers/strength_divider/view.cljs
View File

@ -9,16 +9,15 @@
[react-native.svg :as svg] [react-native.svg :as svg]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
(def strength-divider-types (def strength-divider-types
{:very-weak {:default-text (i18n/label :t/strength-divider-very-weak-label) {:very-weak {:default-text (i18n/label :t/strength-divider-very-weak-label)
:color colors/danger-60 :color colors/danger-60
:percentage 20} :percentage 20}
:weak {:default-text (i18n/label :t/strength-divider-weak-label) :weak {:default-text (i18n/label :t/strength-divider-weak-label)
:color (colors/custom-color :orange 60) :color (colors/resolve-color :orange nil)
:percentage 40} :percentage 40}
:okay {:default-text (i18n/label :t/strength-divider-okay-label) :okay {:default-text (i18n/label :t/strength-divider-okay-label)
:color (colors/custom-color :yellow 60) :color (colors/resolve-color :yellow nil)
:percentage 60} :percentage 60}
:strong {:default-text (i18n/label :t/strength-divider-strong-label) :strong {:default-text (i18n/label :t/strength-divider-strong-label)
:color colors/success-60 :color colors/success-60

2
src/quo/components/dropdowns/dropdown/properties.cljs
View File

@ -39,7 +39,7 @@
:right-icon-color colors/white-opa-20 :right-icon-color colors/white-opa-20
:right-icon-color-2 colors/white :right-icon-color-2 colors/white
:label-color colors/white :label-color colors/white
:background-color (colors/custom-color customization-color 50)}) :background-color (colors/resolve-color customization-color :light)})
(def sizes-to-exclude-blur-in-photo-bg #{:size-40}) (def sizes-to-exclude-blur-in-photo-bg #{:size-40})

6
src/quo/components/graph/interactive_graph/view.cljs
View File

@ -76,10 +76,8 @@
y-axis-label-background-color (colors/theme-colors colors/white-70-blur-opaque y-axis-label-background-color (colors/theme-colors colors/white-70-blur-opaque
colors/neutral-95 colors/neutral-95
theme) theme)
customization-color (colors/theme-colors customization-color (colors/resolve-color customization-color
(colors/custom-color customization-color 60) (colors/invert-theme theme))
(colors/custom-color customization-color 50)
theme)
y-axis-label-texts (utils/calculate-y-axis-labels min-value step-value 4) y-axis-label-texts (utils/calculate-y-axis-labels min-value step-value 4)
x-axis-label-texts (utils/calculate-x-axis-labels data 5) x-axis-label-texts (utils/calculate-x-axis-labels data 5)
reference-label-background-color (colors/theme-colors colors/neutral-80-opa-5-opaque reference-label-background-color (colors/theme-colors colors/neutral-80-opa-5-opaque

5
src/quo/components/graph/wallet_graph/view.cljs
View File

@ -26,10 +26,7 @@
customization-color customization-color customization-color customization-color
(= state :positive) :success (= state :positive) :success
:else :danger)] :else :danger)]
(colors/theme-colors (colors/resolve-color color-keyword theme)))
(colors/custom-color color-keyword 50)
(colors/custom-color color-keyword 60)
theme)))
(defn view (defn view
[{:keys [data state time-frame customization-color]}] [{:keys [data state time-frame customization-color]}]

4
src/quo/components/inputs/address_input/view.cljs
View File

@ -37,9 +37,7 @@
[theme] [theme]
[rn/view {:style style/clear-icon-container} [rn/view {:style style/clear-icon-container}
[icon/icon :i/positive-state [icon/icon :i/positive-state
{:color (colors/theme-colors (colors/custom-color :success 50) {:color (colors/resolve-color :success theme)
(colors/custom-color :success 60)
theme)
:size 20}]]) :size 20}]])
(defn- get-placeholder-text-color (defn- get-placeholder-text-color

6
src/quo/components/inputs/input/style.cljs
View File

@ -12,7 +12,7 @@
:button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme) :button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
:password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 theme) :password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 theme)
:clear-icon (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme) :clear-icon (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
:cursor (colors/theme-colors (colors/custom-color :blue 50) :cursor (colors/theme-colors (colors/resolve-color :blue :light)
colors/white colors/white
theme)} theme)}
{:label (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) {:label (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
@ -20,9 +20,7 @@
:button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 theme) :button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
:clear-icon (colors/theme-colors colors/neutral-40 colors/neutral-60 theme) :clear-icon (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
:password-icon (colors/theme-colors colors/neutral-50 colors/white theme) :password-icon (colors/theme-colors colors/neutral-50 colors/white theme)
:cursor (colors/theme-colors (colors/custom-color :blue 50) :cursor (colors/resolve-color :blue theme)}))
(colors/custom-color :blue 60)
theme)}))
(defn status-colors (defn status-colors
[status blur? theme] [status blur? theme]

2
src/quo/components/inputs/profile_input/style.cljs
View File

@ -4,7 +4,7 @@
(defn container (defn container
[customization-color] [customization-color]
{:background-color (colors/custom-color customization-color 50 40) {:background-color (colors/resolve-color customization-color :light 40)
:padding-horizontal 12 :padding-horizontal 12
:padding-top 12 :padding-top 12
:padding-bottom 10 :padding-bottom 10

4
src/quo/components/inputs/recovery_phrase/style.cljs
View File

@ -36,9 +36,7 @@
(defn cursor-color (defn cursor-color
[customization-color theme] [customization-color theme]
(colors/theme-colors (colors/custom-color customization-color 50) (colors/resolve-color customization-color theme))
(colors/custom-color customization-color 60)
theme))
(defn error-word (defn error-word
[theme] [theme]

3
src/quo/components/inputs/title_input/style.cljs
View File

@ -25,8 +25,7 @@
[customization-color blur? theme] [customization-color blur? theme]
(colors/alpha (if blur? (colors/alpha (if blur?
(colors/theme-colors colors/neutral-100 colors/white theme) (colors/theme-colors colors/neutral-100 colors/white theme)
(colors/custom-color customization-color (colors/resolve-color customization-color theme))
(if (= :dark theme) 60 50)))
(if platform/ios? 1 0.2))) (if platform/ios? 1 0.2)))
(def text-input-container {:flex 1}) (def text-input-container {:flex 1})

4
src/quo/components/list_items/address/component_spec.cljs
View File

@ -17,7 +17,7 @@
(h/render-with-theme-provider [address/view (with-defaults)]) (h/render-with-theme-provider [address/view (with-defaults)])
(h/fire-event :on-press-in (h/get-by-label-text :container)) (h/fire-event :on-press-in (h/get-by-label-text :container))
(h/wait-for #(h/has-style (h/query-by-label-text :container) (h/wait-for #(h/has-style (h/query-by-label-text :container)
{:backgroundColor (colors/custom-color :blue 50 5)}))) {:backgroundColor (colors/resolve-color :blue :light 5)})))
(h/test "on-press-in changes state to :pressed with blur? enabled" (h/test "on-press-in changes state to :pressed with blur? enabled"
(h/render-with-theme-provider [address/view (with-defaults {:blur? true})]) (h/render-with-theme-provider [address/view (with-defaults {:blur? true})])
@ -30,7 +30,7 @@
(h/fire-event :on-press-in (h/get-by-label-text :container)) (h/fire-event :on-press-in (h/get-by-label-text :container))
(h/fire-event :on-press-out (h/get-by-label-text :container)) (h/fire-event :on-press-out (h/get-by-label-text :container))
(h/wait-for #(h/has-style (h/query-by-label-text :container) (h/wait-for #(h/has-style (h/query-by-label-text :container)
{:backgroundColor (colors/custom-color :blue 50 10)}))) {:backgroundColor (colors/resolve-color :blue :light 10)})))
(h/test "on-press-out changes state to :active with blur? enabled" (h/test "on-press-out changes state to :active with blur? enabled"
(h/render-with-theme-provider [address/view (with-defaults {:active-state? true :blur? true})]) (h/render-with-theme-provider [address/view (with-defaults {:active-state? true :blur? true})])

4
src/quo/components/list_items/address/style.cljs
View File

@ -5,11 +5,11 @@
(defn- background-color (defn- background-color
[state customization-color blur?] [state customization-color blur?]
(cond (and (or (= state :pressed) (= state :selected)) (not blur?)) (cond (and (or (= state :pressed) (= state :selected)) (not blur?))
(colors/custom-color customization-color 50 5) (colors/resolve-color customization-color :light 5)
(and (or (= state :pressed) (= state :selected)) blur?) (and (or (= state :pressed) (= state :selected)) blur?)
colors/white-opa-5 colors/white-opa-5
(and (= state :active) (not blur?)) (and (= state :active) (not blur?))
(colors/custom-color customization-color 50 10) (colors/resolve-color customization-color :light 10)
(and (= state :active) blur?) (and (= state :active) blur?)
colors/white-opa-10 colors/white-opa-10
(and (= state :pressed) blur?) colors/white-opa-10 (and (= state :pressed) blur?) colors/white-opa-10

8
src/quo/components/list_items/dapp/style.cljs
View File

@ -8,15 +8,15 @@
(and pressed? (= theme :dark) blur?) colors/white-opa-5 (and pressed? (= theme :dark) blur?) colors/white-opa-5
pressed? (colors/theme-colors pressed? (colors/theme-colors
(colors/custom-color customization-color 50 5) (colors/override-color customization-color 5 50)
(colors/custom-color customization-color 60 5) (colors/override-color customization-color 5 60)
theme) theme)
(and (= state :active) (= theme :dark) blur?) colors/white-opa-10 (and (= state :active) (= theme :dark) blur?) colors/white-opa-10
(= state :active) (colors/theme-colors (= state :active) (colors/theme-colors
(colors/custom-color customization-color 50 10) (colors/override-color customization-color 10 50)
(colors/custom-color customization-color 60 10) (colors/override-color customization-color 10 60)
theme) theme)
:else :transparent)) :else :transparent))

4
src/quo/components/list_items/saved_address/style.cljs
View File

@ -5,11 +5,11 @@
(defn- background-color (defn- background-color
[{:keys [state blur? customization-color]}] [{:keys [state blur? customization-color]}]
(cond (and (or (= state :pressed) (= state :selected)) (not blur?)) (cond (and (or (= state :pressed) (= state :selected)) (not blur?))
(colors/custom-color customization-color 50 5) (colors/resolve-color customization-color :light 5)
(and (or (= state :pressed) (= state :selected)) blur?) (and (or (= state :pressed) (= state :selected)) blur?)
colors/white-opa-5 colors/white-opa-5
(and (= state :active) (not blur?)) (and (= state :active) (not blur?))
(colors/custom-color customization-color 50 10) (colors/resolve-color customization-color :light 10)
(and (= state :active) blur?) (and (= state :active) blur?)
colors/white-opa-10 colors/white-opa-10
(and (= state :pressed) blur?) colors/white-opa-10 (and (= state :pressed) blur?) colors/white-opa-10

4
src/quo/components/list_items/saved_contact_address/component_spec.cljs
View File

@ -37,7 +37,7 @@
{:accounts (repeat 1 account)})]) {:accounts (repeat 1 account)})])
(h/fire-event :on-press-in (h/get-by-label-text :container)) (h/fire-event :on-press-in (h/get-by-label-text :container))
(h/wait-for #(h/has-style (h/query-by-label-text :container) (h/wait-for #(h/has-style (h/query-by-label-text :container)
{:backgroundColor (colors/custom-color :blue 50 5)}))) {:backgroundColor (colors/resolve-color :blue :light 5)})))
(h/test "on-press-out changes state to :active if active-state? is true (default value)" (h/test "on-press-out changes state to :active if active-state? is true (default value)"
(h/render-with-theme-provider [saved-contact-address/view (h/render-with-theme-provider [saved-contact-address/view
@ -46,7 +46,7 @@
(h/fire-event :on-press-in (h/get-by-label-text :container)) (h/fire-event :on-press-in (h/get-by-label-text :container))
(h/fire-event :on-press-out (h/get-by-label-text :container)) (h/fire-event :on-press-out (h/get-by-label-text :container))
(h/wait-for #(h/has-style (h/query-by-label-text :container) (h/wait-for #(h/has-style (h/query-by-label-text :container)
{:backgroundColor (colors/custom-color :blue 50 10)}))) {:backgroundColor (colors/resolve-color :blue :light 10)})))
(h/test "on-press-out changes state to :default if active-state? is false" (h/test "on-press-out changes state to :default if active-state? is false"
(h/render-with-theme-provider [saved-contact-address/view (h/render-with-theme-provider [saved-contact-address/view

4
src/quo/components/list_items/saved_contact_address/style.cljs
View File

@ -5,9 +5,9 @@
(defn- background-color (defn- background-color
[{:keys [state customization-color]}] [{:keys [state customization-color]}]
(cond (or (= state :pressed) (= state :selected)) (cond (or (= state :pressed) (= state :selected))
(colors/custom-color customization-color 50 5) (colors/resolve-color customization-color :light 5)
(= state :active) (= state :active)
(colors/custom-color customization-color 50 10) (colors/resolve-color customization-color :light 10)
:else :transparent)) :else :transparent))
(defn container (defn container

4
src/quo/components/messages/gap.cljs
View File

@ -95,7 +95,7 @@
(defn info-button (defn info-button
[on-press] [on-press]
[rn/touchable-without-feedback [rn/pressable
{:on-press on-press} {:on-press on-press}
[icon/icon "message-gap-info" {:size 12 :no-color true :container-style {:padding 4}}]]) [icon/icon "message-gap-info" {:size 12 :no-color true :container-style {:padding 4}}]])
@ -123,7 +123,7 @@
:margin-right 2} :margin-right 2}
[timestamp timestamp-far] [timestamp timestamp-far]
(when on-info-button-pressed [info-button on-info-button-pressed])] (when on-info-button-pressed [info-button on-info-button-pressed])]
[rn/touchable-without-feedback [rn/pressable
{:style {:flex 1 :margin-top 16 :margin-bottom 20} {:style {:flex 1 :margin-top 16 :margin-bottom 20}
:on-press #(when on-press (on-press))} :on-press #(when on-press (on-press))}
[text/text warning-label]] [text/text warning-label]]

2
src/quo/components/navigation/bottom_nav_tab/styles.cljs
View File

@ -10,7 +10,7 @@
:top 6 :top 6
:left 51 :left 51
:position :absolute :position :absolute
:background-color (colors/custom-color customization-color 60)}) :background-color (colors/resolve-color customization-color nil)})
(def notification-counter (def notification-counter
{:position :absolute {:position :absolute

8
src/quo/components/navigation/top_nav/view.cljs
View File

@ -76,15 +76,15 @@
(defn- left-section (defn- left-section
[{:keys [avatar-props on-press customization-color]}] [{:keys [avatar-props on-press customization-color]}]
[rn/touchable-without-feedback {:on-press on-press} [rn/pressable
[rn/view {:on-press on-press
{:accessibility-label :open-profile} :accessibility-label :open-profile}
[user-avatar/user-avatar [user-avatar/user-avatar
(merge {:status-indicator? true (merge {:status-indicator? true
:ring? true :ring? true
:customization-color customization-color :customization-color customization-color
:size :small} :size :small}
avatar-props)]]]) avatar-props)]])
(defn- right-section (defn- right-section
[{:keys [blur? [{:keys [blur?

2
src/quo/components/notifications/activity_log/style.cljs
View File

@ -56,7 +56,7 @@
(defn unread-dot (defn unread-dot
[customization-color] [customization-color]
{:background-color (colors/custom-color (or customization-color :blue) 60) {:background-color (colors/resolve-color (or customization-color :blue) nil)
:border-radius 4 :border-radius 4
:width 8 :width 8
:height 8}) :height 8})

2
src/quo/components/profile/profile_card/style.cljs
View File

@ -12,7 +12,7 @@
:border-top-right-radius 16 :border-top-right-radius 16
:border-bottom-left-radius border-bottom-radius :border-bottom-left-radius border-bottom-radius
:border-bottom-right-radius border-bottom-radius :border-bottom-right-radius border-bottom-radius
:background-color (colors/custom-color customization-color 50 40)}) :background-color (colors/resolve-color customization-color :light 40)})
(def card-header (def card-header
{:flex-direction :row {:flex-direction :row

2
src/quo/components/profile/select_profile/style.cljs
View File

@ -5,7 +5,7 @@
(defn container (defn container
[customization-color selected?] [customization-color selected?]
{:padding 12 {:padding 12
:background-color (colors/custom-color customization-color 50 40) :background-color (colors/resolve-color customization-color :light 40)
:border-width 1 :border-width 1
:border-radius 16 :border-radius 16
:flex 1 :flex 1

8
src/quo/components/selectors/disclaimer/view.cljs
View File

@ -11,11 +11,11 @@
(defn view (defn view
[{:keys [checked? blur? accessibility-label container-style on-change icon customization-color]} label] [{:keys [checked? blur? accessibility-label container-style on-change icon customization-color]} label]
(let [theme (quo.theme/use-theme)] (let [theme (quo.theme/use-theme)]
[rn/touchable-without-feedback [rn/pressable
{:on-press (when on-change {:on-press (when on-change
#(on-change (not checked?))) #(on-change (not checked?)))
:accessibility-label :disclaimer-touchable-opacity} :accessibility-label :disclaimer-touchable-opacity
[rn/view {:style (merge container-style (style/container blur? theme))} :style (merge container-style (style/container blur? theme))}
[selectors/view [selectors/view
{:type :checkbox {:type :checkbox
:accessibility-label accessibility-label :accessibility-label accessibility-label
@ -35,4 +35,4 @@
(colors/white-opa-70) (colors/white-opa-70)
(colors/theme-colors colors/neutral-50 (colors/theme-colors colors/neutral-50
colors/neutral-40 colors/neutral-40
theme))}]])]])) theme))}]])]))

2
src/quo/components/selectors/filter/style.cljs
View File

@ -39,7 +39,7 @@
[customization-color pressed? theme] [customization-color pressed? theme]
(when pressed? (when pressed?
(if customization-color (if customization-color
(colors/custom-color (or customization-color :blue) 60) (colors/resolve-color (or customization-color :blue) nil)
(colors/theme-colors colors/primary-50 colors/primary-60 theme)))) (colors/theme-colors colors/primary-50 colors/primary-60 theme))))
(defn container-outer (defn container-outer

8
src/quo/components/selectors/filter/view.cljs
View File

@ -12,11 +12,11 @@
on-press-out (fn [] on-press-out (fn []
(set-pressed (not pressed?)) (set-pressed (not pressed?))
(when on-press-out (on-press-out pressed?)))] (when on-press-out (on-press-out pressed?)))]
[rn/touchable-without-feedback [rn/pressable
{:accessibility-label :selector-filter {:accessibility-label :selector-filter
:on-press-out on-press-out} :on-press-out on-press-out
[rn/view {:style (style/container-outer customization-color pressed? theme)} :style (style/container-outer customization-color pressed? theme)}
[rn/view {:style (style/container-inner pressed? blur? theme)} [rn/view {:style (style/container-inner pressed? blur? theme)}
[icon/icon :i/unread [icon/icon :i/unread
{:color (style/icon-color pressed? theme) {:color (style/icon-color pressed? theme)
:size 20}]]]])) :size 20}]]]))

10
src/quo/components/settings/privacy_option/view.cljs
View File

@ -24,7 +24,7 @@
(defn- card-footer (defn- card-footer
[{:keys [active? label on-toggle theme]}] [{:keys [active? label on-toggle theme]}]
[rn/touchable-without-feedback [rn/pressable
[rn/view {:style (style/card-footer theme)} [rn/view {:style (style/card-footer theme)}
[rn/view {:style style/card-footer-label-container} [rn/view {:style style/card-footer-label-container}
[text/text {:size :paragraph-2} label]] [text/text {:size :paragraph-2} label]]
@ -54,11 +54,11 @@
:or {icon :i/world :or {icon :i/world
active? false}}] active? false}}]
(let [theme (quo.theme/use-theme)] (let [theme (quo.theme/use-theme)]
[rn/touchable-without-feedback [rn/pressable
{:on-press on-select {:on-press on-select
:accessibility-label :privacy-option-card :accessibility-label :privacy-option-card
:testID :privacy-option-card} :testID :privacy-option-card
[rn/view (style/privacy-option-card active? theme) :style (style/privacy-option-card active? theme)}
[card-header [card-header
{:theme theme {:theme theme
:active? active? :active? active?
@ -72,4 +72,4 @@
{:theme theme {:theme theme
:active? active? :active? active?
:label footer :label footer
:on-toggle on-toggle}])]])) :on-toggle on-toggle}])]))

8
src/quo/components/tabs/tab/view.cljs
View File

@ -61,13 +61,13 @@
:blur? blur? :blur? blur?
:disabled disabled :disabled disabled
:active active})] :active active})]
[rn/touchable-without-feedback [rn/pressable
(merge {:disabled disabled (merge {:disabled disabled
:accessibility-label accessibility-label} :accessibility-label accessibility-label
:style style/container}
(when on-press (when on-press
{:on-press (fn [] {:on-press (fn []
(on-press id))})) (on-press id))}))
[rn/view {:style style/container}
(when show-notification-dot? (when show-notification-dot?
[notification-dot/view [notification-dot/view
{:style style/notification-dot {:style style/notification-dot
@ -92,4 +92,4 @@
{:width (style/size->padding-left size) {:width (style/size->padding-left size)
:height size :height size
:disabled disabled :disabled disabled
:background-color background-color}])]])) :background-color background-color}])]))

15
src/quo/components/tags/base_tag.cljs
View File

@ -21,17 +21,16 @@
accessibility-label type labelled?] accessibility-label type labelled?]
:or {size 32}} :or {size 32}}
children] children]
[rn/touchable-without-feedback [rn/pressable
(merge {:disabled disabled? (merge {:disabled disabled?
:accessibility-label accessibility-label} :accessibility-label accessibility-label
(when on-press :style (style-container size
{:on-press #(on-press id)}))
[rn/view
{:style (merge (style-container size
disabled? disabled?
border-color border-color
border-width border-width
background-color background-color
labelled? labelled?
type))} type)}
children]]) (when on-press
{:on-press #(on-press id)}))
children])

10
src/quo/components/tags/context_tag/style.cljs
View File

@ -15,10 +15,7 @@
:border-radius 10 :border-radius 10
:align-items :center :align-items :center
:justify-content :center :justify-content :center
:background-color (colors/theme-colors :background-color (colors/resolve-color customization-color theme)})
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme)})
(def audio-tag-icon-color colors/white) (def audio-tag-icon-color colors/white)
@ -31,10 +28,7 @@
(not (#{:account :collectible} type)) 16 (not (#{:account :collectible} type)) 16
(= size 24) 8 (= size 24) 8
:else 10) :else 10)
border-color (colors/theme-colors border-color (colors/resolve-color customization-color theme)]
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme)]
(cond-> {:padding 2 (cond-> {:padding 2
:padding-right 8 :padding-right 8
:flex-direction :row :flex-direction :row

2
src/quo/components/tags/context_tag/view.cljs
View File

@ -135,7 +135,7 @@
[group-avatar/view [group-avatar/view
{:icon-name :i/members {:icon-name :i/members
:size (if (= size 24) :size-20 :size-28) :size (if (= size 24) :size-20 :size-28)
:customization-color (colors/custom-color customization-color 50)}]] :customization-color (colors/resolve-color customization-color :light)}]]
(:channel :community) (:channel :community)
[communities-tag (assoc props :channel? (= type :channel))] [communities-tag (assoc props :channel? (= type :channel))]

13
src/quo/components/tags/network_tags/style.cljs
View File

@ -8,14 +8,14 @@
:align-self :flex-start :align-self :flex-start
:background-color (when (= status :error) :background-color (when (= status :error)
(colors/theme-colors (colors/theme-colors
(colors/custom-color :danger 50 10) (colors/override-color :danger 10 50)
(colors/custom-color :danger 60 10) (colors/override-color :danger 10 60)
theme)) theme))
:border-width 1 :border-width 1
:border-color (cond (= status :error) :border-color (cond (= status :error)
(colors/theme-colors (colors/theme-colors
(colors/custom-color :danger 50 20) (colors/override-color :danger 20 50)
(colors/custom-color :danger 60 20) (colors/override-color :danger 20 60)
theme) theme)
(and blur? (= status :default)) (colors/theme-colors (and blur? (= status :default)) (colors/theme-colors
colors/neutral-80-opa-5 colors/neutral-80-opa-5
@ -36,7 +36,4 @@
{:padding-left 4 {:padding-left 4
:margin-top -1 :margin-top -1
:color (when (= status :error) :color (when (= status :error)
(colors/theme-colors (colors/resolve-color :danger theme))})
(colors/custom-color :danger 50)
(colors/custom-color :danger 60)
theme))})

19
src/quo/components/wallet/account_overview/style.cljs
View File

@ -38,17 +38,14 @@
(defn percentage-change (defn percentage-change
[customization-color theme] [customization-color theme]
{:color (colors/theme-colors {:color (colors/resolve-color customization-color theme)
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme)
:margin-right 4}) :margin-right 4})
(defn dot-separator (defn dot-separator
[customization-color theme] [customization-color theme]
{:background-color (colors/theme-colors {:background-color (colors/theme-colors
(colors/custom-color customization-color 60 40) (colors/override-color customization-color 40 60)
(colors/custom-color customization-color 50 40) (colors/override-color customization-color 40 50)
theme) theme)
:margin-right 4 :margin-right 4
:margin-top 8 :margin-top 8
@ -57,10 +54,7 @@
(defn currency-change (defn currency-change
[customization-color theme] [customization-color theme]
{:color (colors/theme-colors {:color (colors/resolve-color customization-color theme)
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme)
:margin-right 4}) :margin-right 4})
(defn loading-bar-margin-bottom (defn loading-bar-margin-bottom
@ -97,8 +91,5 @@
(defn icon-props (defn icon-props
[customization-color theme] [customization-color theme]
{:color (colors/theme-colors {:color (colors/resolve-color customization-color theme)
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme)
:size 16}) :size 16})

2
src/quo/components/wallet/transaction_progress/view.cljs
View File

@ -173,7 +173,7 @@
[{:keys [title on-press accessibility-label tag-photo tag-name tag-number networks] [{:keys [title on-press accessibility-label tag-photo tag-name tag-number networks]
:or {accessibility-label :transaction-progress}}] :or {accessibility-label :transaction-progress}}]
(let [theme (quo.theme/use-theme)] (let [theme (quo.theme/use-theme)]
[rn/touchable-without-feedback [rn/pressable
{:on-press on-press {:on-press on-press
:accessibility-label accessibility-label} :accessibility-label accessibility-label}
[rn/view {:style (style/box-style theme)} [rn/view {:style (style/box-style theme)}

55
src/quo/foundations/colors.cljs
View File

@ -345,6 +345,28 @@
suffix (get-from-colors-map suffix) suffix (get-from-colors-map suffix)
opacity (alpha (/ opacity 100)))))) opacity (alpha (/ opacity 100))))))
(defn- override-color*
([color]
(resolve-color* color nil nil))
([color opacity]
(resolve-color* color opacity nil))
([color opacity color-suffix]
(let [suffix (cond
(not (keyword? color)) nil
color-suffix color-suffix
opacity 50
:else 60)]
(cond-> color
suffix (get-from-colors-map suffix)
opacity (alpha (/ opacity 100))))))
(def override-color
"(override-color color opacity suffix)
color hex string or keyword - (resolves from custom, network and semantic colors)
opacity 0-100 (optional)
suffix optionally override the color suffix to use when retrieving the color"
(memoize override-color*))
(def resolve-color (def resolve-color
"(resolve-color color theme opacity) "(resolve-color color theme opacity)
color hex string or keyword (resolves from custom, network and semantic colors) color hex string or keyword (resolves from custom, network and semantic colors)
@ -352,35 +374,16 @@
opacity 0-100 (optional) - if set theme is ignored and goes to 50 suffix internally" opacity 0-100 (optional) - if set theme is ignored and goes to 50 suffix internally"
(memoize resolve-color*)) (memoize resolve-color*))
(def ^{:deprecated true :superseded-by "resolve-color"}
custom-color
"(custom-color color suffix opacity)
color :primary/:purple/...
suffix 50/60
opacity 0-100 (optional)"
(memoize
(fn
([color]
(custom-color color nil nil))
([color suffix]
(custom-color color suffix nil))
([color suffix opacity]
(let [resolved-color (cond
(not (keyword? color))
color
(hex-string? (get colors-map color))
(get colors-map color fallback-color)
:else
(get-in colors-map [color suffix] (get fallback-color suffix)))]
(if opacity
(alpha resolved-color (/ opacity 100))
resolved-color))))))
(def shadow "rgba(9,16,28,0.08)") (def shadow "rgba(9,16,28,0.08)")
(defn theme-colors (defn theme-colors
"(theme-colors light dark override-theme)" "(theme-colors light dark override-theme)"
[light dark theme] [light dark theme]
(if (= theme :light) light dark)) (if (= theme :light) light dark))
(defn invert-theme
[theme]
(case theme
:light :dark
:dark :light
nil))

2
src/status_im/contexts/preview/quo/graph/interactive_graph.cljs
View File

@ -122,7 +122,7 @@
average-value (gstring/format "%.2f" (/ (+ highest-value lowest-value) 2))] average-value (gstring/format "%.2f" (/ (+ highest-value lowest-value) 2))]
(swap! state assoc :data data :reference-value average-value))) (swap! state assoc :data data :reference-value average-value)))
[(:time-frame @state)]) [(:time-frame @state)])
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/pressable {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
[preview/customizer state descriptor theme] [preview/customizer state descriptor theme]
[quo/interactive-graph [quo/interactive-graph

2
src/status_im/contexts/preview/quo/selectors/react.cljs
View File

@ -68,7 +68,7 @@
:padding-horizontal 20 :padding-horizontal 20
:border-radius 16 :border-radius 16
:background-color (when (= :pinned (:use-case state)) :background-color (when (= :pinned (:use-case state))
(colors/custom-color :blue 50 10)) (colors/resolve-color :blue :light 10))
:align-items :flex-start} :align-items :flex-start}
[quo/react [quo/react
{:reactions reactions {:reactions reactions

5
src/status_im/contexts/preview/quo/selectors/react_selector.cljs
View File

@ -49,10 +49,7 @@
:padding-vertical 60 :padding-vertical 60
:border-radius 16 :border-radius 16
:background-color (when (= :pinned (:use-case @state)) :background-color (when (= :pinned (:use-case @state))
(colors/custom-color (colors/resolve-color :blue :light 10))
:blue
50
10))
:justify-content :space-evenly :justify-content :space-evenly
:flex-direction :row :flex-direction :row
:align-items :center} :align-items :center}

3
src/status_im/contexts/preview/quo/share/qr_code.cljs
View File

@ -98,7 +98,8 @@
;; `:channel` variant receives colors as hex strings instead of keywords ;; `:channel` variant receives colors as hex strings instead of keywords
(= (:avatar @state) :channel) (= (:avatar @state) :channel)
(update :customization-color colors/custom-color 60))] (assoc :customization-color
(colors/resolve-color (:customization-color @state) nil)))]
[rn/view {:style {:margin 12}} [rn/view {:style {:margin 12}}
[quo/text "URL:"] [quo/text "URL:"]

2
src/status_im/contexts/preview/quo/wallet/network_routing.cljs
View File

@ -67,7 +67,7 @@
{:style {:flex-direction :row {:style {:flex-direction :row
:margin-vertical 12}} :margin-vertical 12}}
[rn/view [rn/view
{:style {:background-color (colors/custom-color network-name) {:style {:background-color (colors/resolve-color network-name nil)
:width 24 :width 24
:height 24 :height 24
:margin-right 12}}] :margin-right 12}}]