status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add shadows to foundations (#14839) 

* chore: add shadows to foundations
This commit is contained in:
Jamie Caprani 2023-01-23 11:06:26 +00:00 committed by GitHub
parent 6722b45076
commit 92a180c477
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 149 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/quo2/foundations/shadows.cljs Normal file
View File

@ -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})

73
src/status_im2/contexts/quo_preview/foundations/shadows.cljs Normal file
View File

@ -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}]])

6
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -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