chore: remove uses of override theme prop (#16570)

src/quo2/components/drawers/documentation_drawers/style.cljs

@@ -15,7 +15,7 @@
    :margin-bottom (+ (safe-area/get-bottom) 8)})
 
 (defn title
-  [shell?]
+  [theme]
   {:color (colors/theme-colors colors/neutral-100
                                colors/white
-                               (when shell? :dark))})
+                               theme)})

src/quo2/components/drawers/documentation_drawers/view.cljs

@@ -3,9 +3,10 @@
             [quo2.components.drawers.documentation-drawers.style :as style]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
-            [react-native.gesture :as gesture]))
+            [react-native.gesture :as gesture]
+            [quo2.theme :as quo.theme]))
 
-(defn view
+(defn- view-internal
   "Options
    - `title` Title text
    - `show-button?` Show button
@@ -15,7 +16,7 @@
    - `shell?` use shell theme
    `content` Content of the drawer
    "
-  [{:keys [title show-button? on-press-button button-label button-icon shell?]} content]
+  [{:keys [title show-button? on-press-button button-label button-icon theme shell?]} content]
   [gesture/scroll-view
    {:style                             style/outer-container
     :always-bounce-vertical            false
@@ -24,18 +25,18 @@
     [text/text
      {:size                :heading-2
       :accessibility-label :documentation-drawer-title
-      :style               (style/title shell?)
+      :style               (style/title theme)
       :weight              :semi-bold}
      title]
     [rn/view {:style style/content :accessibility-label :documentation-drawer-content}
      content]
     (when show-button?
       [button/button
-       (cond-> {:size                24
+       {:size                24
         :type                (if shell? :blur-bg-outline :outline)
         :on-press            on-press-button
         :accessibility-label :documentation-drawer-button
         :after               button-icon}
-         shell? (assoc :override-theme :dark))
        button-label])]])
 
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/inputs/input/style.cljs

@@ -3,62 +3,62 @@
             [quo2.foundations.colors :as colors]))
 
 (defn variants-colors
-  [blur? override-theme]
+  [blur? theme]
   (if blur?
-    {:label         (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
+    {:label         (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
-     :icon          (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
+     :icon          (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
-     :button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-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 override-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 override-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)
                                          colors/white
-                                         override-theme)}
+                                         theme)}
-    {:label         (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
+    {:label         (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-     :icon          (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
+     :icon          (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-     :button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 override-theme)
+     :button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
-     :clear-icon    (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
+     :clear-icon    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
-     :password-icon (colors/theme-colors colors/neutral-50 colors/white override-theme)
+     :password-icon (colors/theme-colors colors/neutral-50 colors/white theme)
      :cursor        (colors/theme-colors (colors/custom-color :blue 50)
                                          (colors/custom-color :blue 60)
-                                         override-theme)}))
+                                         theme)}))
 
 (defn status-colors
-  [status blur? override-theme]
+  [status blur? theme]
   (if blur?
     (case status
       :focus
-      {:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 override-theme)
+      {:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)
-       :placeholder  (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
+       :placeholder  (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)}
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
       :error
-      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
+      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 theme)
-       :placeholder  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
+       :placeholder  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)}
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
       :disabled
-      {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
+      {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-       :placeholder  (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)
+       :placeholder  (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 theme)
-       :text         (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)}
+       :text         (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 theme)}
       ;; :default
-      {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
+      {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-       :placeholder  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
+       :placeholder  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)})
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)})
     (case status
       :focus
-      {:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
+      {:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
-       :placeholder  (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
+       :placeholder  (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)}
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
       :error
-      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
+      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 theme)
-       :placeholder  (colors/theme-colors colors/neutral-40 colors/white-opa-40 override-theme)
+       :placeholder  (colors/theme-colors colors/neutral-40 colors/white-opa-40 theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)}
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
       :disabled
-      {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
+      {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-       :placeholder  (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)
+       :placeholder  (colors/theme-colors colors/neutral-40 colors/neutral-40 theme)
-       :text         (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)}
+       :text         (colors/theme-colors colors/neutral-40 colors/neutral-40 theme)}
       ;; :default
-      {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
+      {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-       :placeholder  (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)
+       :placeholder  (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)})))
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)})))
 
 (defn input-container
   [colors-by-status small? disabled?]

src/quo2/components/inputs/input/view.cljs

@@ -5,7 +5,7 @@
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
             [reagent.core :as reagent]
-            [quo2.theme :as theme]))
+            [quo2.theme :as quo.theme]))
 
 (defn- label-&-counter
   [{:keys [label current-chars char-limit variant-colors]}]
@@ -54,7 +54,7 @@
 
 (def ^:private custom-props
   "Custom properties that must be removed from properties map passed to InputText."
-  [:type :blur? :override-theme :error? :right-icon :left-icon :disabled? :small? :button
+  [:type :blur? :theme :error? :right-icon :left-icon :disabled? :small? :button
    :label :char-limit :on-char-limit-reach :icon-name :multiline? :on-focus :on-blur])
 
 (defn- base-input
@@ -74,15 +74,15 @@
                                 (reset! char-count amount-chars)
                                 (when (>= amount-chars char-limit)
                                   (on-char-limit-reach amount-chars))))]
-    (fn [{:keys [blur? override-theme error? right-icon left-icon disabled? small? button
+    (fn [{:keys [blur? theme error? right-icon left-icon disabled? small? button
                  label char-limit multiline? clearable? on-focus on-blur]
           :as   props}]
       (let [status-kw        (cond
                                disabled? :disabled
                                error?    :error
                                :else     @status)
-            colors-by-status (style/status-colors status-kw blur? override-theme)
+            colors-by-status (style/status-colors status-kw blur? theme)
-            variant-colors   (style/variants-colors blur? override-theme)
+            variant-colors   (style/variants-colors blur? theme)
             clean-props      (apply dissoc props custom-props)]
         [:<>
          (when (or label char-limit)
@@ -101,7 +101,7 @@
            (cond-> {:style                  (style/input colors-by-status small? @multiple-lines?)
                     :accessibility-label    :input
                     :placeholder-text-color (:placeholder colors-by-status)
-                    :keyboard-appearance    (theme/theme-value :light :dark override-theme)
+                    :keyboard-appearance    (quo.theme/theme-value :light :dark theme)
                     :cursor-color           (:cursor variant-colors)
                     :editable               (not disabled?)
                     :on-focus               (fn []
@@ -148,11 +148,11 @@
                                     :icon-name (if @password-shown? :i/hide :i/reveal)
                                     :on-press  #(swap! password-shown? not)})])))
 
-(defn input
+(defn input-internal
   "This input supports the following properties:
   - :type - Can be `:text`(default) or `:password`.
   - :blur? - Boolean to set the blur color variant.
-  - :override-theme - Can be `light` or `:dark`.
+  - :theme - Can be `light` or `:dark`.
   - :small? - Boolean to specify if this input is rendered in its small version.
   - :multiline? - Boolean to specify if this input support multiple lines.
   - :icon-name - The name of an icon to display at the left of the input.
@@ -188,3 +188,5 @@
     (if (= type :password)
       [password-input base-props]
       [base-input base-props])))
+
+(def input (quo.theme/with-theme input-internal))

src/quo2/components/inputs/recovery_phrase/style.cljs

@@ -17,29 +17,29 @@
          :text-align-vertical :top))
 
 (defn placeholder-color
-  [input-state override-theme blur?]
+  [input-state theme blur?]
   (cond
     (and (= input-state :focused) blur?)
-    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
+    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
 
     (= input-state :focused) ; Not blur
-    (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
+    (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
 
     blur? ; :default & blur
-    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme)
+    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme)
 
     :else ; :default & not blur
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
 
 (defn cursor-color
-  [customization-color override-theme]
+  [customization-color theme]
   (colors/theme-colors (colors/custom-color customization-color 50)
                        (colors/custom-color customization-color 60)
-                       override-theme))
+                       theme))
 
 (defn error-word
-  []
+  [theme]
   {:height             22
    :padding-horizontal 20
    :background-color   colors/danger-50-opa-10
-   :color              (colors/theme-colors colors/danger-50 colors/danger-60)})
+   :color              (colors/theme-colors colors/danger-50 colors/danger-60 theme)})

src/quo2/components/inputs/recovery_phrase/view.cljs

@@ -3,19 +3,19 @@
             [quo2.components.inputs.recovery-phrase.style :as style]
             [react-native.core :as rn]
             [reagent.core :as reagent]
-            [quo2.theme :as theme]))
+            [quo2.theme :as quo.theme]))
 
 (def ^:private custom-props
-  [:customization-color :override-theme :blur? :cursor-color :multiline :on-focus :on-blur
+  [:customization-color :theme :blur? :cursor-color :multiline :on-focus :on-blur
    :placeholder-text-color :mark-errors? :error-pred :word-limit])
 
 (defn- error-word
-  [text]
+  [text theme]
-  [rn/text {:style (style/error-word)}
+  [rn/text {:style (style/error-word theme)}
    text])
 
 (defn- mark-error-words
-  [pred-last-word pred-previous-words text word-limit]
+  [{:keys [pred-last-word pred-previous-words text word-limit theme]}]
   (let [last-index (dec (count (string/split text #"\s+")))
         words      (map #(apply str %)
                         (partition-by #(= " " %) text))]
@@ -31,18 +31,18 @@
                        :always           (update :result
                                                  conj
                                                  (if invalid-word?
-                                                   [error-word word]
+                                                   [error-word word theme]
                                                    word)))))
                  {:result [:<>]
                   :idx    0})
          :result)))
 
-(defn recovery-phrase-input
+(defn recovery-phrase-input-internal
   [_ _]
   (let [state       (reagent/atom :default)
         set-focused #(reset! state :focused)
         set-default #(reset! state :default)]
-    (fn [{:keys [customization-color override-theme blur? on-focus on-blur mark-errors?
+    (fn [{:keys [customization-color theme blur? on-focus on-blur mark-errors?
                  error-pred-current-word error-pred-written-words word-limit]
           :or   {customization-color      :blue
                  word-limit               ##Inf
@@ -55,9 +55,9 @@
          [rn/text-input
           (merge {:accessibility-label    :recovery-phrase-input
                   :style                  (style/input)
-                  :placeholder-text-color (style/placeholder-color @state override-theme blur?)
+                  :placeholder-text-color (style/placeholder-color @state theme blur?)
-                  :cursor-color           (style/cursor-color customization-color override-theme)
+                  :cursor-color           (style/cursor-color customization-color theme)
-                  :keyboard-appearance    (theme/theme-value :light :dark override-theme)
+                  :keyboard-appearance    (quo.theme/theme-value :light :dark theme)
                   :multiline              true
                   :on-focus               (fn []
                                             (set-focused)
@@ -67,5 +67,11 @@
                                             (when on-blur (on-blur)))}
                  extra-props)
           (if mark-errors?
-            (mark-error-words error-pred-current-word error-pred-written-words text word-limit)
+            (mark-error-words {:pred-last-word      error-pred-current-word
+                               :pred-previous-words error-pred-written-words
+                               :text                text
+                               :word-limit          word-limit
+                               :theme               theme})
             text)]]))))
+
+(def recovery-phrase-input (quo.theme/with-theme recovery-phrase-input-internal))

src/quo2/components/list_items/preview_list.cljs

@@ -5,7 +5,8 @@
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.fast-image :as fast-image]
-            [react-native.hole-view :as hole-view]))
+            [react-native.hole-view :as hole-view]
+            [quo2.theme :as quo.theme]))
 
 (def params
   {32 {:border-radius {:circular 16 :rounded 10}
@@ -61,13 +62,13 @@
      [avatar item type size border-radius]]))
 
 (defn get-overflow-color
-  [transparent? transparent-color light-color dark-color override-theme]
+  [transparent? transparent-color light-color dark-color theme]
   (if transparent?
     transparent-color
-    (colors/theme-colors light-color dark-color override-theme)))
+    (colors/theme-colors light-color dark-color theme)))
 
 (defn overflow-label
-  [label size transparent? border-radius margin-left override-theme more-than-99-label]
+  [{:keys [label size transparent? border-radius margin-left theme more-than-99-label]}]
   [rn/view
    {:style {:width            size
             :height           size
@@ -80,7 +81,7 @@
                                colors/white-opa-10
                                colors/neutral-20
                                colors/neutral-70
-                               override-theme)}}
+                               theme)}}
    (if (= size 16)
      [quo2.icons/icon :i/more
       {:size  12
@@ -89,7 +90,7 @@
                colors/white-opa-70
                colors/neutral-50
                colors/neutral-40
-               override-theme)}]
+               theme)}]
      [quo2.text/text
       {:size   (if (= size 32) :paragraph-2 :label)
        :weight :medium
@@ -98,7 +99,7 @@
                               colors/white-opa-70
                               colors/neutral-60
                               colors/neutral-40
-                              override-theme)
+                              theme)
                 :margin-left -2}}
       ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
       (if (< label 100)
@@ -111,7 +112,7 @@
     (:account :collectible :photo) :rounded
     :circular))
 
-(defn preview-list
+(defn- preview-list-internal
   "[preview-list opts items]
    opts
    {:type          :user/:community/:account/:token/:collectible/:dapp
@@ -120,7 +121,7 @@
     :transparent?  overflow-label transparent?}
    items           preview list items (only 4 items is required for preview)
   "
-  [{:keys [type size list-size transparent? override-theme more-than-99-label]} items]
+  [{:keys [type size list-size transparent? theme more-than-99-label]} items]
   (let [items-arr     (into [] items)
         list-size     (or list-size (count items))
         margin-left   (get-in params [size :margin-left])
@@ -135,5 +136,13 @@
        [list-item index type size (get items-arr index) list-size
         margin-left hole-size hole-radius hole-x hole-y border-radius])
      (when (> list-size 4)
-       [overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme
+       [overflow-label
-        more-than-99-label])]))
+        {:label              (- list-size 3)
+         :size               size
+         :transparent?       transparent?
+         :border-radius      border-radius
+         :margin-left        margin-left
+         :theme              theme
+         :more-than-99-label more-than-99-label}])]))
+
+(def preview-list (quo.theme/with-theme preview-list-internal))

src/quo2/components/selectors/filter/style.cljs

@@ -10,8 +10,8 @@
    :padding         6})
 
 (defn container-border-color
-  [pressed? blur? override-theme]
+  [pressed? blur? theme]
-  (let [dark? (= :dark override-theme)]
+  (let [dark? (= :dark theme)]
     (cond
       (and (not pressed?) (not dark?) (not blur?))
       colors/neutral-20
@@ -35,26 +35,24 @@
       nil)))
 
 (defn container-background-color
-  [pressed? override-theme]
+  [pressed? theme]
   (when pressed?
-    (if (= :dark override-theme)
+    (colors/theme-colors colors/primary-50 colors/primary-60 theme)))
-      colors/primary-60
-      colors/primary-50)))
 
 (defn container-outer
-  [pressed? override-theme]
+  [pressed? theme]
   (merge container-default
-         {:background-color (container-background-color pressed? override-theme)}))
+         {:background-color (container-background-color pressed? theme)}))
 
 (defn container-inner
-  [pressed? blur? override-theme]
+  [pressed? blur? theme]
   (merge container-default
          {:border-width 1
-          :border-color (container-border-color pressed? blur? override-theme)}))
+          :border-color (container-border-color pressed? blur? theme)}))
 
 (defn icon-color
-  [pressed? override-theme]
+  [pressed? theme]
   (if (and (not pressed?)
-           (= :light override-theme))
+           (= :light theme))
     colors/neutral-100
     colors/white))

src/quo2/components/selectors/filter/view.cljs

@@ -1,23 +1,24 @@
 (ns quo2.components.selectors.filter.view
   (:require [quo2.components.icon :as icon]
             [quo2.components.selectors.filter.style :as style]
-            [quo2.theme :as theme]
+            [quo2.theme :as quo.theme]
             [react-native.core :as rn]
             [reagent.core :as reagent]))
 
-(defn view
+(defn view-internal
   [initial-props]
   (let [pressed? (reagent/atom (:pressed? initial-props))]
-    (fn [{:keys [blur? override-theme on-press-out]
+    (fn [{:keys [blur? theme on-press-out]}]
-          :or   {override-theme (theme/get-theme)}}]
       [rn/touchable-without-feedback
        {:accessibility-label :selector-filter
         :on-press-out        (fn []
                                (swap! pressed? not)
                                (when on-press-out
                                  (on-press-out @pressed?)))}
-       [rn/view {:style (style/container-outer @pressed? override-theme)}
+       [rn/view {:style (style/container-outer @pressed? theme)}
-        [rn/view {:style (style/container-inner @pressed? blur? override-theme)}
+        [rn/view {:style (style/container-inner @pressed? blur? theme)}
          [icon/icon :i/unread
-          {:color (style/icon-color @pressed? override-theme)
+          {:color (style/icon-color @pressed? theme)
            :size  20}]]]])))
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/tabs/segmented_tab.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.tabs.segmented-tab
   (:require [quo2.components.tabs.tab.view :as tab]
             [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
             [react-native.core :as rn]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [quo2.theme :as quo.theme]))
 
 (def themes-for-blur
   {:light {:background-color colors/neutral-80-opa-5}
@@ -13,17 +13,17 @@
   {:light {:background-color colors/neutral-10}
    :dark  {:background-color colors/neutral-90}})
 
-(defn segmented-control
+(defn- segmented-control-internal
   [{:keys [default-active on-change]}]
   (let [active-tab-id (reagent/atom default-active)]
-    (fn [{:keys [data size override-theme blur? container-style item-container-style
+    (fn [{:keys [data size theme blur? container-style item-container-style
                  active-item-container-style]}]
       (let [active-id @active-tab-id]
         [rn/view
          (merge
           {:flex-direction   :row
            :background-color (get-in (if blur? themes-for-blur themes)
-                                     [(or override-theme (theme/get-theme)) :background-color])
+                                     [theme :background-color])
            :border-radius    (case size
                                32 10
                                28 8
@@ -42,7 +42,6 @@
               :item-container-style        item-container-style
               :segmented?                  true
               :size                        size
-              :override-theme              override-theme
               :blur?                       blur?
               :active                      (= id active-id)
               :on-press                    (fn [tab-id]
@@ -50,3 +49,5 @@
                                              (when on-change
                                                (on-change tab-id)))}
              label]])]))))
+
+(def segmented-control (quo.theme/with-theme segmented-control-internal))

src/quo2/components/tags/status_tags.cljs

@@ -2,8 +2,8 @@
   (:require [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [quo2.theme :as quo2.theme]
+            [react-native.core :as rn]
-            [react-native.core :as rn]))
+            [quo2.theme :as quo.theme]))
 
 (def default-container-style
   {:border-radius 20
@@ -81,7 +81,7 @@
     :border-color        colors/danger-50-opa-20
     :label               label
     ;; The negative tag uses the same color for `dark` and `dark blur` variant
-    :text-color          (if (= theme :light) colors/danger-50 colors/danger-60)}])
+    :text-color          (colors/theme-colors colors/danger-50 colors/danger-60 theme)}])
 
 (defn- pending
   [size theme label blur? no-icon?]
@@ -104,8 +104,8 @@
                            colors/white-opa-70
                            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}])
 
-(defn status-tag
+(defn- status-tag-internal
-  [{:keys [status size override-theme label blur? no-icon?]}]
+  [{:keys [status size theme label blur? no-icon?]}]
   (when status
     (when-let [status-component (case (:type status)
                                   :positive positive
@@ -114,7 +114,9 @@
                                   nil)]
       [status-component
        size
-       (or override-theme (quo2.theme/get-theme))
+       theme
        label
        blur?
        no-icon?])))
+
+(def status-tag (quo.theme/with-theme status-tag-internal))

src/quo2/core.cljs

@@ -98,30 +98,7 @@
     quo2.components.tags.token-tag
     quo2.components.text-combinations.title.view))
 
-(def icon quo2.components.icon/icon)
 (def separator quo2.components.common.separator.view/separator)
-(def header quo2.components.header/header)
-(def dropdown quo2.components.dropdowns.dropdown/dropdown)
-(def info-message quo2.components.info.info-message/info-message)
-(def information-box quo2.components.info.information-box.view/view)
-(def gap quo2.components.messages.gap/gap)
-(def system-message quo2.components.messages.system-message/system-message)
-(def reaction quo2.components.reactions.reaction/reaction)
-(def add-reaction quo2.components.reactions.reaction/add-reaction)
-(def user-avatar-tag quo2.components.tags.context-tag.view/user-avatar-tag)
-(def context-tag quo2.components.tags.context-tag.view/context-tag)
-(def group-avatar-tag quo2.components.tags.context-tag.view/group-avatar-tag)
-(def audio-tag quo2.components.tags.context-tag.view/audio-tag)
-(def community-tag quo2.components.tags.context-tag.view/community-tag)
-
-
-(def disclaimer quo2.components.selectors.disclaimer.view/view)
-(def checkbox quo2.components.selectors.selectors.view/checkbox)
-(def filter quo2.components.selectors.filter.view/view)
-(def author quo2.components.messages.author.view/author)
-
-;;;; SELECTORS
-(def reactions quo2.components.selectors.reactions.view/view)
 
 ;;;; AVATAR
 (def account-avatar quo2.components.avatars.account-avatar/account-avatar)
@@ -184,9 +161,22 @@
 (def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
 (def permission-context quo2.components.drawers.permission-context.view/view)
 
+;;;; DROPDOWNS
+(def dropdown quo2.components.dropdowns.dropdown/dropdown)
+
 ;;;; EMPTY STATE
 (def empty-state quo2.components.empty-state.empty-state.view/empty-state)
 
+;;;; HEADER
+(def header quo2.components.header/header)
+
+;;;; ICON
+(def icon quo2.components.icon/icon)
+
+;;;; INFO
+(def info-message quo2.components.info.info-message/info-message)
+(def information-box quo2.components.info.information-box.view/view)
+
 ;;;; INPUTS
 (def input quo2.components.inputs.input.view/input)
 (def profile-input quo2.components.inputs.profile-input.view/profile-input)
@@ -213,6 +203,10 @@
 (def markdown-list quo2.components.markdown.list.view/view)
 (def text quo2.components.markdown.text/text)
 
+;;;; MESSAGES
+(def gap quo2.components.messages.gap/gap)
+(def system-message quo2.components.messages.system-message/system-message)
+
 ;;;; NOTIFICATIONS
 (def activity-log quo2.components.notifications.activity-log.view/view)
 (def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view)
@@ -229,10 +223,21 @@
 (def profile-card quo2.components.profile.profile-card.view/profile-card)
 (def select-profile quo2.components.profile.select-profile.view/view)
 
+;;;; REACTIONS
+(def reaction quo2.components.reactions.reaction/reaction)
+(def add-reaction quo2.components.reactions.reaction/add-reaction)
+
 ;;;; RECORD AUDIO
 (def record-audio quo2.components.record-audio.record-audio.view/record-audio)
 (def soundtrack quo2.components.record-audio.soundtrack.view/f-soundtrack)
 
+;;;; SELECTORS
+(def author quo2.components.messages.author.view/author)
+(def disclaimer quo2.components.selectors.disclaimer.view/view)
+(def filter quo2.components.selectors.filter.view/view)
+(def reactions quo2.components.selectors.reactions.view/view)
+(def checkbox quo2.components.selectors.selectors.view/checkbox)
+
 ;;;; SETTINGS
 (def privacy-option quo2.components.settings.privacy-option/card)
 (def account quo2.components.settings.accounts.view/account)
@@ -255,6 +260,11 @@
 (def permission-tag quo2.components.tags.permission-tag/tag)
 (def status-tag quo2.components.tags.status-tags/status-tag)
 (def token-tag quo2.components.tags.token-tag/tag)
+(def user-avatar-tag quo2.components.tags.context-tag.view/user-avatar-tag)
+(def context-tag quo2.components.tags.context-tag.view/context-tag)
+(def group-avatar-tag quo2.components.tags.context-tag.view/group-avatar-tag)
+(def audio-tag quo2.components.tags.context-tag.view/audio-tag)
+(def community-tag quo2.components.tags.context-tag.view/community-tag)
 
 ;;;; TITLE
 (def title quo2.components.text-combinations.title.view/title)

src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs

@@ -31,7 +31,6 @@
         [quo/user-avatar
          {:full-name           name
           :profile-picture     profile-picture
-          :override-theme      :dark
           :size                :medium
           :status-indicator?   false
           :customization-color customization-color}]]

src/status_im2/contexts/quo_preview/inputs/input.cljs

@@ -17,13 +17,6 @@
    {:label "Blur:"
     :key   :blur?
     :type  :boolean}
-   {:label   "Override Theme:"
-    :key     :override-theme
-    :type    :select
-    :options [{:key   :dark
-               :value "Dark"}
-              {:key   :light
-               :value "Light"}]}
    {:label "Error:"
     :key   :error?
     :type  :boolean}
@@ -65,7 +58,6 @@
   []
   (let [state (reagent/atom {:type                :text
                              :blur                false
-                             :override-theme      nil
                              :placeholder         "Type something"
                              :error               false
                              :icon-name           false

src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs

@@ -78,7 +78,6 @@
 
 (def complex-user-action
   (let [tag-props {:color      :purple
-                   :override-theme :dark
                    :size       :small
                    :style      {:background-color colors/white-opa-10}
                    :text-style {:color colors/white}}]

src/status_im2/contexts/shell/activity_center/header/view.cljs

@@ -13,7 +13,6 @@
     [quo/filter
      {:pressed?     unread-filter-enabled?
       :blur?        true
-      :override-theme :dark
       :on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page
                                    {:filter-status (if unread-filter-enabled?
                                                      :all

src/status_im2/contexts/shell/activity_center/notification/common/view.cljs

@@ -10,7 +10,6 @@
 
 (def tag-params
   {:size                   :small
-   :override-theme         :dark
    :color                  colors/primary-50
    :style                  style/user-avatar-tag
    :text-style             style/user-avatar-tag-text
@@ -21,7 +20,6 @@
   (let [{:keys [primary-name] :as contact} (rf/sub [:contacts/contact-by-identity user-id])]
     [quo/user-avatar-tag
      {:color      :purple
-      :override-theme :dark
       :size       :small
       :style      style/user-avatar-tag
       :text-style style/user-avatar-tag-text}

src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs

@@ -40,12 +40,10 @@
        :pending             [quo/status-tag
                              {:status {:type :pending}
                               :label  (i18n/label :t/pending)
-                              :size           :small
+                              :size   :small}]
-                              :override-theme :dark}]
        :kicked              [quo/status-tag
                              {:status {:type :negative}
                               :size   :small
-                              :override-theme :dark
                               :label  (i18n/label :t/kicked)}]
        (:count :permission) [:<>] ;; Add components for these cases
        nil)
@@ -69,8 +67,8 @@
        [quo/preview-list
         {:type               :photo
          :more-than-99-label (i18n/label :counter-99-plus)
-         :size               24
+         :size               24}
-         :override-theme     :dark} data]
+        data]
 
        constants/content-type-sticker
        [fast-image/fast-image
@@ -266,7 +264,6 @@
             :type     :grey
             :icon     true
             :on-press #(rf/dispatch [:shell/close-switcher-card id])
-            :override-theme :dark
             :style    style/close-button}
            :i/close]]]))))
 

src/status_im2/contexts/shell/share/view.cljs

@@ -21,7 +21,6 @@
      :type                :blur-bg
      :size                32
      :accessibility-label :close-shell-share-tab
-     :override-theme      :dark
      :style               style/header-button
      :on-press            #(rf/dispatch [:navigate-back])}
     :i/close]
@@ -84,7 +83,6 @@
           :type                :blur-bg
           :size                32
           :accessibility-label :link-to-profile
-          :override-theme      :dark
           :on-press            #(list-selection/open-share {:message profile-url})}
          :i/share]]]]
 
@@ -113,7 +111,6 @@
          :type                :blur-bg
          :size                32
          :accessibility-label :link-to-profile
-         :override-theme      :dark
          :style               {:margin-right 12}
          :on-press            #(rf/dispatch [:share/copy-text-and-show-toast
                                              {:text-to-copy      emoji-hash-string
@@ -137,7 +134,6 @@
         [quo/segmented-control
          {:size           28
           :blur?          true
-          :override-theme :dark
           :on-change      #(reset! selected-tab %)
           :default-active :profile
           :data           [{:id    :profile

src/status_im2/contexts/syncing/scan_sync_code/view.cljs

@@ -54,7 +54,6 @@
          :type                :blur-bg
          :size                32
          :accessibility-label :close-sign-in-by-syncing
-         :override-theme      :dark
          :on-press            (fn []
                                 (if (and animated? reset-animations-fn)
                                   (reset-animations-fn)
@@ -70,7 +69,6 @@
          :type                :blur-bg
          :size                32
          :accessibility-label :find-sync-code
-         :override-theme      :dark
          :on-press            #(rf/dispatch [:open-modal :find-sync-code])}
         (i18n/label :t/find-sync-code)]]]
      [reanimated/view
@@ -101,7 +99,6 @@
                style/tabs-container)}
       [quo/segmented-control
        {:size           32
-        :override-theme :dark
         :blur?          true
         :default-active @active-tab
         :data           [{:id 1 :label (i18n/label :t/scan-sync-qr-code)}
@@ -151,7 +148,6 @@
        :type                :primary
        :size                32
        :accessibility-label accessibility-label
-       :override-theme      :dark
        :customization-color :blue
        :on-press            on-press}
       (i18n/label button-label)]]))

src/status_im2/contexts/syncing/setup_syncing/view.cljs

@@ -115,7 +115,6 @@
              [quo/input
               {:default-value  @code
                :type           :password
-               :override-theme :dark
                :default-shown? true
                :editable       false}]
              [quo/button

src/status_im2/contexts/syncing/syncing_instructions/view.cljs

@@ -27,7 +27,6 @@
     :button-grey
     [quo/button
      {:type  :grey
-      :override-theme :dark
       :size  24
       :style style/button-grey}
      (i18n/label value)]
@@ -35,7 +34,6 @@
     :button-grey-placeholder
     [quo/button
      {:type   :grey
-      :override-theme :dark
       :size   24
       :before :i/placeholder
       :style  style/button-grey-placeholder}
@@ -111,7 +109,6 @@
          [rn/view {:style style/tabs-container}
           [quo/segmented-control
            {:size           28
-            :override-theme :dark
             :blur?          true
             :default-active :mobile
             :data           platform-data

src/status_im2/navigation/screens.cljs

@@ -88,13 +88,11 @@
      :component add-new-contact/new-contact}
 
     {:name      :how-to-pair
-     :options   {:theme  :dark
+     :options   (assoc options/dark-screen :sheet? true)
-                 :sheet? true}
      :component how-to-pair/view}
 
     {:name      :find-sync-code
-     :options   {:theme  :dark
+     :options   (assoc options/dark-screen :sheet? true)
-                 :sheet? true}
      :component find-sync-code/view}
 
     {:name      :discover-communities