add shadows to foundations (#14839)

* chore: add shadows to foundations

src/quo2/foundations/shadows.cljs

@@ -0,0 +1,71 @@
+(ns quo2.foundations.shadows
+  (:require [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]))
+
+(defn- get-inverted
+  [inverted? number]
+  (if inverted? (* -1 number) number))
+
+(defn- get-scales
+  [inverted?]
+  (if (theme/dark?)
+    {:shadow-1 {:shadow-color   (colors/alpha colors/neutral-100 0.5)
+                :shadow-offset  {:width  0
+                                 :height (get-inverted inverted? 4)}
+                :elevation      3
+                :shadow-opacity 1
+                :shadow-radius  20}
+     :shadow-2 {:shadow-color   (colors/alpha colors/neutral-100 0.64)
+                :shadow-offset  {:width  0
+                                 :height (get-inverted inverted? 4)}
+                :elevation      4
+                :shadow-opacity 1
+                :shadow-radius  20}
+     :shadow-3 {:shadow-color   (colors/alpha colors/neutral-100 0.64)
+                :shadow-offset  {:width  0
+                                 :height (get-inverted inverted? 12)}
+                :elevation      8
+                :shadow-opacity 1
+                :shadow-radius  20}
+     :shadow-4 {:shadow-color   (colors/alpha colors/neutral-100 0.72)
+                :shadow-offset  {:width  0
+                                 :height (get-inverted inverted? 16)}
+                :shadow-opacity 1
+                :shadow-radius  20
+                :elevation      15}}
+    {:shadow-1 {:shadow-color   (colors/alpha colors/neutral-100 0.04)
+                :shadow-offset  {:width  0
+                                 :height (get-inverted inverted? 4)}
+                :elevation      1
+                :shadow-opacity 1
+                :shadow-radius  16}
+     :shadow-2 {:shadow-color   (colors/alpha colors/neutral-100 0.08)
+                :shadow-offset  {:width  0
+                                 :height (get-inverted inverted? 4)}
+                :elevation      2
+                :shadow-opacity 1
+                :shadow-radius  16}
+     :shadow-3 {:shadow-color   (colors/alpha colors/neutral-100 0.12)
+                :shadow-offset  {:width  0
+                                 :height (get-inverted inverted? 12)}
+                :elevation      5
+                :shadow-opacity 1
+                :shadow-radius  16}
+     :shadow-4 {:shadow-color   (colors/alpha colors/neutral-100 0.16)
+                :shadow-offset  {:width  0
+                                 :height (get-inverted inverted? 16)}
+                :shadow-opacity 1
+                :shadow-radius  16
+                :elevation      13}}))
+
+(def normal-scale (get-scales false))
+
+(def inverted-scale (get-scales true))
+
+(def inner-shadow
+  {:shadow-color   (colors/alpha colors/neutral-100 0.08)
+   :shadow-offset  {:width  0
+                    :height 0}
+   :shadow-opacity 1
+   :shadow-radius  16
+   :elevation      13})

src/status_im2/contexts/quo_preview/foundations/shadows.cljs

@@ -0,0 +1,73 @@
+(ns status-im2.contexts.quo-preview.foundations.shadows
+  (:require
+   [quo2.foundations.shadows :as shadows]
+   [quo2.foundations.colors :as colors]
+   [quo2.core :as quo]
+   [react-native.core :as rn]
+   [reagent.core :as reagent]
+   [status-im2.contexts.quo-preview.preview :as preview]))
+
+(defn demo-box
+  [shadow-on? name shadow-style]
+  [rn/view
+   {:margin-left   :auto
+    :margin-right  :auto
+    :margin-top    8
+    :margin-bottom 8
+    :align-items   :center}
+   [quo/text {} name]
+   [rn/view
+    {:style (merge {:width            60
+                    :height           60
+                    :border-radius    16
+                    :background-color (colors/theme-colors colors/white colors/neutral-90)}
+                   (when shadow-on? shadow-style))}]])
+
+(def descriptor
+  [{:label "Shadow on?"
+    :key   :shadow-on?
+    :type  :boolean}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:shadow-on? true})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [:<>
+         [quo/text
+          {:style {:margin-left  :auto
+                   :margin-right :auto
+                   :align-items  :center}}
+          "Normal Scales"]
+         [demo-box (:shadow-on? @state) "shadow 1" (:shadow-1 shadows/normal-scale)]
+         [demo-box (:shadow-on? @state) "shadow 2" (:shadow-2 shadows/normal-scale)]
+         [demo-box (:shadow-on? @state) "shadow 3" (:shadow-3 shadows/normal-scale)]
+         [demo-box (:shadow-on? @state) "shadow 4" (:shadow-4 shadows/normal-scale)]
+         [quo/text
+          {:style {:margin-left  :auto
+                   :margin-right :auto
+                   :align-items  :center}}
+          "Inverted Scales"]
+         [demo-box (:shadow-on? @state) "shadow 1" (:shadow-1 shadows/inverted-scale)]
+         [demo-box (:shadow-on? @state) "shadow 2" (:shadow-2 shadows/inverted-scale)]
+         [demo-box (:shadow-on? @state) "shadow 3" (:shadow-3 shadows/inverted-scale)]
+         [demo-box (:shadow-on? @state) "shadow 4" (:shadow-4 shadows/inverted-scale)]
+         [quo/text
+          {:style {:margin-left  :auto
+                   :margin-right :auto
+                   :align-items  :center}}
+          "Inverted Scales"]
+         [demo-box (:shadow-on? @state) "Inner Shadow" shadows/inner-shadow]]]])))
+
+(defn preview-shadows
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/neutral-30 colors/neutral-95)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -31,6 +31,7 @@
    [status-im2.contexts.quo-preview.drawers.action-drawers :as drawers]
    [status-im2.contexts.quo-preview.drawers.permission-drawers :as permission-drawers]
    [status-im2.contexts.quo-preview.dropdowns.dropdown :as dropdown]
+   [status-im2.contexts.quo-preview.foundations.shadows :as shadows]
    [status-im2.contexts.quo-preview.info.info-message :as info-message]
    [status-im2.contexts.quo-preview.info.information-box :as information-box]
    [status-im2.contexts.quo-preview.list-items.channel :as channel]
@@ -70,7 +71,10 @@
    [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]))
 
 (def screens-categories
-  {:avatar                [{:name      :group-avatar
+  {:foundations           [{:name      :shadows
+                            :insets    {:top false}
+                            :component shadows/preview-shadows}]
+   :avatar                [{:name      :group-avatar
                             :insets    {:top false}
                             :component group-avatar/preview-group-avatar}
                            {:name      :icon-avatar