Rename quo.theme to quo.context (#22373)

Author: Parveshdhull

doc/ui-guidelines.md

@@ -31,7 +31,7 @@ NOW:
 (defn view
   [{:keys [on-press on-long-press icon]}]
   (let [[pressed? set-pressed] (rn/use-state false)
-        theme                  (theme/use-theme)
+        theme                  (context/use-theme)
         on-press-in            (rn/use-callback #(set-pressed true))
         on-press-out           (rn/use-callback #(set-pressed nil))]
     [rn/pressable

src/legacy/status_im/ui/components/chat_icon/screen.cljs

@@ -6,8 +6,8 @@
     [legacy.status-im.ui.screens.chat.photos :as photos]
     [legacy.status-im.ui.screens.profile.visibility-status.utils :as visibility-status-utils]
     [quo.components.avatars.user-avatar.style :as user-avatar.style]
+    [quo.context]
     [quo.core :as quo]
-    [quo.theme]
     [re-frame.core :as re-frame.core]
     [react-native.core :as rn]
     [status-im.contexts.profile.utils :as profile.utils]

src/legacy/status_im/ui/components/topbar.cljs

@@ -1,8 +1,8 @@
 (ns legacy.status-im.ui.components.topbar
   (:require
     [legacy.status-im.ui.components.core :as quo]
+    [quo.context]
     [quo.foundations.colors :as quo.colors]
-    [quo.theme]
     [re-frame.core :as re-frame]
     [react-native.safe-area :as safe-area]))
 
@@ -33,7 +33,7 @@
     :or   {border-bottom? true
            new-ui?        false}
     :as   props}]
-  (let [theme      (quo.theme/use-theme)
+  (let [theme      (quo.context/use-theme)
         navigation (if (= navigation :none)
                      nil
                      [(default-navigation modal? navigation)])]

src/legacy/status_im/ui/screens/chat/message/legacy_view.cljs

@@ -2,10 +2,10 @@
   (:require
     [legacy.status-im.ui.components.colors :as quo.colors]
     [legacy.status-im.ui.screens.chat.message.legacy-style :as style]
+    [quo.context]
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
     [quo.foundations.typography :as typography]
-    [quo.theme]
     [react-native.core :as rn]
     [status-im.constants :as constants]
     [status-im.contexts.chat.messenger.messages.delete-message-for-me.events]
@@ -126,7 +126,7 @@
   [{:keys [content chat-id]
     :as   message-data}]
   (let [community-id (rf/sub [:community-id-by-chat-id chat-id])
-        theme        (quo.theme/use-theme)]
+        theme        (quo.context/use-theme)]
     (reduce (fn [acc e]
               (render-block message-data
                             acc
@@ -145,7 +145,7 @@
 ;; STATUS ? whats that ?
 (defmethod ->message constants/content-type-status
   [{:keys [content content-type]}]
-  (let [theme (quo.theme/use-theme)]
+  (let [theme (quo.context/use-theme)]
     [rn/view style/status-container
      [rn/text {:style (style/status-text)}
       (reduce

src/legacy/status_im/ui/screens/communities/members.cljs

@@ -7,7 +7,7 @@
     [legacy.status-im.ui.components.react :as react]
     [legacy.status-im.ui.components.topbar :as topbar]
     [legacy.status-im.ui.components.unviewed-indicator :as unviewed-indicator]
-    [quo.theme]
+    [quo.context]
     [react-native.core :as rn]
     [status-im.constants :as constants]
     [status-im.contexts.profile.utils :as profile.utils]
@@ -110,7 +110,7 @@
 
 (defn view
   []
-  (let [{:keys [community-id]} (quo.theme/use-screen-params)]
+  (let [{:keys [community-id]} (quo.context/use-screen-params)]
     (rn/use-mount
      #(rf/dispatch [:community/fetch-requests-to-join community-id]))
     (fn []

src/legacy/status_im/ui/screens/profile/user/views.cljs

@@ -2,8 +2,8 @@
   (:require
     [legacy.status-im.ui.components.core :as components]
     [legacy.status-im.ui.components.list.item :as list.item]
+    [quo.context]
     [quo.core :as quo]
-    [quo.theme]
     [re-frame.core :as re-frame]
     [react-native.core :as rn]
     [utils.i18n :as i18n]

src/legacy/status_im/ui/screens/profile/visibility_status/utils.cljs

@@ -2,8 +2,8 @@
   (:require
     [legacy.status-im.ui.components.colors :as colors]
     [legacy.status-im.ui.screens.profile.visibility-status.styles :as styles]
+    [quo.context]
     [quo.foundations.colors :as quo.colors]
-    [quo.theme]
     [status-im.constants :as constants]
     [utils.datetime :as datetime]
     [utils.i18n :as i18n]
@@ -71,7 +71,7 @@
 (defn icon-visibility-status-dot
   [public-key container-size]
   (let [status    (rf/sub [:visibility-status-updates/visibility-status-update public-key])
-        theme     (quo.theme/use-theme)
+        theme     (quo.context/use-theme)
         size      (icon-dot-size container-size)
         margin    -2
         dot-color (icon-dot-color status)

src/quo/README.md

@@ -179,20 +179,20 @@ Our goal is to make all design system components *themeable*, which means they
 should not use, nor fallback to the OS theme, because themes are *contextual*
 and can be overridden in specific parts of the app.
 
-To achieve this, use the higher-order function `quo.theme/with-theme` to
+To achieve this, use the higher-order function `quo.context/with-theme` to
 automatically inject the current theme context (based on the [React Context
 API](https://react.dev/learn/passing-data-deeply-with-context)).
 
 Use the following pattern:
 
 ```clojure
 (ns quo.components.<figma page>.<component name>.view
-  (:require [quo.theme :as quo.theme]))
+  (:require [quo.context :as quo.context]))
 
 (defn- view-internal [{:keys [theme]}]
   ...)
 
-(def view (quo.theme/with-theme view-internal))
+(def view (quo.context/with-theme view-internal))
 ```
 
 Then pass the `theme` value down to all functions that may rely on the OS theme,
@@ -213,12 +213,12 @@ file.
 ```clojure
 ;; bad
 (ns ...
-  (require [quo.theme :as quo.theme]
+  (require [quo.context :as quo.context]
            [quo.core :as quo]))
 
 ;; good
 (ns ...
-  (require [quo.theme :as quo.theme]
+  (require [quo.context :as quo.context]
            [quo.core :as quo]))
 ```
 

src/quo/components/animated_header_flatlist/view.cljs

@@ -3,8 +3,8 @@
     [oops.core :as oops]
     [quo.components.animated-header-flatlist.style :as style]
     [quo.components.icon :as icon]
+    [quo.context :as quo.context]
     [quo.foundations.colors :as colors]
-    [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.fast-image :as fast-image]
     [react-native.platform :as platform]
@@ -54,7 +54,7 @@
 
 (defn- f-animated-header-list
   [{:keys [header-comp main-comp back-button-on-press] :as params}]
-  (let [theme                   (quo.theme/use-theme)
+  (let [theme                   (quo.context/use-theme)
         window-height           (:height (rn/get-window))
         {:keys [top bottom]}    (safe-area/get-insets)
         ;; view height calculation is different because window height is different on iOS and

src/quo/components/avatars/account_avatar/view.cljs

@@ -2,7 +2,7 @@
   (:require
     [clojure.string :as string]
     [quo.components.avatars.account-avatar.style :as style]
-    [quo.theme :as quo.theme]
+    [quo.context :as quo.context]
     [react-native.core :as rn]))
 
 (defn view
@@ -21,7 +21,7 @@
     :or   {size  style/default-size
            emoji "🍑"}
     :as   opts}]
-  (let [theme      (quo.theme/use-theme)
+  (let [theme      (quo.context/use-theme)
         emoji-size (style/get-emoji-size size)]
     [rn/view
      {:accessible          true

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

@@ -4,8 +4,8 @@
     [quo.components.avatars.channel-avatar.style :as style]
     [quo.components.icon :as icons]
     [quo.components.markdown.text :as text]
+    [quo.context :as quo.context]
     [quo.foundations.colors :as colors]
-    [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [utils.string]))
 
@@ -53,7 +53,7 @@
   used to extract the initials.
   "
   [{:keys [size emoji customization-color locked? full-name]}]
-  (let [theme (quo.theme/use-theme)]
+  (let [theme (quo.context/use-theme)]
     [rn/view
      {:accessibility-label :channel-avatar
       :style               (style/outer-container {:theme               theme

src/quo/components/avatars/collection_avatar/view.cljs

@@ -1,7 +1,7 @@
 (ns quo.components.avatars.collection-avatar.view
   (:require
     [quo.components.avatars.collection-avatar.style :as style]
-    [quo.theme :as quo.theme]
+    [quo.context :as quo.context]
     [react-native.core :as rn]
     [react-native.fast-image :as fast-image]))
 
@@ -11,7 +11,7 @@
     :image - collection image
     :theme - keyword -> :light/:dark"
   [{:keys [image size on-load-start on-load-end on-error] :or {size :size-24}}]
-  (let [theme (quo.theme/use-theme)]
+  (let [theme (quo.context/use-theme)]
     [rn/view {:style (style/collection-avatar-container theme size)}
      [fast-image/fast-image
       {:accessibility-label :collection-avatar

src/quo/components/avatars/group_avatar/view.cljs

@@ -3,8 +3,8 @@
     [quo.components.avatars.group-avatar.style :as style]
     [quo.components.icon :as icon]
     [quo.components.markdown.text :as text]
+    [quo.context :as quo.context]
     [quo.foundations.colors :as colors]
-    [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.fast-image :as fast-image]))
 
@@ -26,7 +26,7 @@
            customization-color :blue
            picture             nil
            icon-name           :i/members}}]
-  (let [theme          (quo.theme/use-theme)
+  (let [theme          (quo.context/use-theme)
         container-size (get-in sizes [size :container])
         icon-size      (get-in sizes [size :icon])]
     [rn/view

src/quo/components/avatars/icon_avatar.cljs

@@ -1,8 +1,8 @@
 (ns quo.components.avatars.icon-avatar
   (:require
     [quo.components.icon :as icons]
+    [quo.context :as quo.context]
     [quo.foundations.colors :as colors]
-    [quo.theme :as quo.theme]
     [react-native.core :as rn]))
 
 (def ^:private sizes
@@ -19,7 +19,7 @@
   [{:keys [size icon color opacity border? blur?]
     :or   {opacity 20
            size    :size-32}}]
-  (let [theme                                       (quo.theme/use-theme)
+  (let [theme                                       (quo.context/use-theme)
         {component-size :component icon-size :icon} (get sizes size)
         circle-color                                (colors/resolve-color color theme opacity)
         icon-color                                  (colors/resolve-color color theme)]

src/quo/components/avatars/user_avatar/view.cljs

@@ -4,7 +4,7 @@
     [quo.components.avatars.user-avatar.style :as style]
     [quo.components.common.no-flicker-image :as no-flicker-image]
     [quo.components.markdown.text :as text]
-    [quo.theme]
+    [quo.context]
     [react-native.core :as rn]
     [react-native.fast-image :as fast-image]
     [schema.core :as schema]
@@ -14,7 +14,7 @@
 (defn initials-avatar
   [{:keys [full-name size customization-color]
     :or   {customization-color :blue}}]
-  (let [theme           (quo.theme/use-theme)
+  (let [theme           (quo.context/use-theme)
         font-size       (get-in style/sizes [size :font-size])
         amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
     [rn/view
@@ -39,7 +39,7 @@
            online?           true
            ring?             true}
     :as   props}]
-  (let [theme           (quo.theme/use-theme)
+  (let [theme           (quo.context/use-theme)
         picture-config  (:config profile-picture)
         full-name       (or full-name "Your Name")
         ;; image generated with `profile-picture-fn` is round cropped

src/quo/components/avatars/wallet_user_avatar/view.cljs

@@ -2,7 +2,7 @@
   (:require [clojure.string :as string]
             [quo.components.avatars.wallet-user-avatar.style :as style]
             [quo.components.markdown.text :as text]
-            [quo.theme :as quo.theme]
+            [quo.context :as quo.context]
             [react-native.core :as rn]
             utils.string))
 
@@ -46,7 +46,7 @@
   :neutral? - boolean (default: false) - use neutral colors variant"
   [{:keys [full-name customization-color size monospace? lowercase? neutral? container-style]
     :or   {size biggest-possible}}]
-  (let [theme       (quo.theme/use-theme)
+  (let [theme       (quo.context/use-theme)
         circle-size (:size (size properties))
         small?      (check-if-size-small size)
         initials    (utils.string/get-initials full-name (if small? 1 2))]

src/quo/components/banners/alert_banner/view.cljs

@@ -4,15 +4,15 @@
             [quo.components.buttons.button.view :as button]
             [quo.components.icon :as icon]
             [quo.components.markdown.text :as text]
+            [quo.context]
             [quo.foundations.colors :as colors]
-            [quo.theme]
             [react-native.core :as rn]
             [react-native.linear-gradient :as linear-gradient]
             [schema.core :as schema]))
 
 (defn- view-internal
   [{:keys [action? text button-text text-number-of-lines container-style on-button-press]}]
-  (let [theme (quo.theme/use-theme)]
+  (let [theme (quo.context/use-theme)]
     [rn/view
      {:accessibility-label :alert-banner
       :style               (style/alert-banner-container theme)}

src/quo/components/banners/banner/view.cljs

@@ -4,13 +4,13 @@
     [quo.components.counter.counter.view :as counter]
     [quo.components.icon :as icons]
     [quo.components.markdown.text :as text]
+    [quo.context :as quo.context]
     [quo.foundations.colors :as colors]
-    [quo.theme :as quo.theme]
     [react-native.core :as rn]))
 
 (defn view
   [{:keys [hide-pin? latest-pin-text pins-count on-press]}]
-  (let [theme (quo.theme/use-theme)]
+  (let [theme (quo.context/use-theme)]
     (when (pos? pins-count)
       [rn/touchable-opacity
        {:accessibility-label :pinned-banner

src/quo/components/blur/view.cljs

@@ -1,14 +1,14 @@
 (ns quo.components.blur.view
-  (:require [quo.foundations.colors :as colors]
-            [quo.theme]
+  (:require [quo.context]
+            [quo.foundations.colors :as colors]
             [react-native.blur :as blur]
             [react-native.core :as rn]
             [react-native.platform :as platform]))
 
 (defn- view-android
   ([props] (view-android props nil))
   ([{:keys [style]} child]
-   (let [theme (quo.theme/use-theme)]
+   (let [theme (quo.context/use-theme)]
      [rn/view
       {:style [style
                {:pointer-events   :box-none

src/quo/components/browser/browser_input/view.cljs

@@ -3,8 +3,8 @@
     [clojure.string :as string]
     [quo.components.browser.browser-input.style :as style]
     [quo.components.icon :as icon]
+    [quo.context :as quo.context]
     [quo.foundations.colors :as colors]
-    [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.platform :as platform]))
 
@@ -77,7 +77,7 @@
                              (reset! ref r)
                              (when get-ref (get-ref r)))
                            [get-ref])
-        theme             (quo.theme/use-theme)
+        theme             (quo.context/use-theme)
         [state set-state] (rn/use-state :default)
         [value set-value] (rn/use-state default-value)
         on-clear          (rn/use-callback