Skip to content

Commit

Permalink
Comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@ibrkhalil
ibrkhalil committed Sep 18, 2022
1 parent 772bb5a commit 0a0f358
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 75 deletions.
126 changes: 64 additions & 62 deletions src/quo/design_system/colors.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,70 +18,72 @@
"Devider, 0.1 of black" [:ui-02]})

(def light-theme
{:positive-01 "rgba(68,208,88,1)" ; Primary Positive, text, icons color
:positive-02 "rgba(78,188,96,0.1)" ; Secondary Positive, Supporting color for success illustrations
:positive-03 "rgba(78,188,96,1)" ; Lighter Positive, Supporting color for success illustrations
:negative-01 "rgba(255,45,85,1)" ; Primary Negative, text, icons color
:negative-02 "rgba(255,45,85,0.1))" ; Secondary Negative, Supporting color for errors illustrations
:warning-01 "rgba(255, 202, 15, 1)"
:warning-02 "rgba(255, 202, 15, 0.1)"
:interactive-01 "rgba(67,96,223,1)" ; Accent color, buttons, own message, actions,active state
:interactive-02 "rgba(236,239,252,1)" ; Light Accent, buttons background, actions background, messages
:interactive-03 "rgba(255,255,255,0.1)" ; Background for interactive above accent
:interactive-04 "rgba(147,155,161,1)" ; Disabled state
:ui-background "rgba(255,255,255,1)" ; Default view background
:ui-01 "rgba(238,242,245,1)" ; Secondary background
:ui-02 "rgba(0,0,0,0.1)" ; Deviders
:ui-03 "rgba(0,0,0,0.86)" ; Dark background
:text-01 "rgba(0,0,0,1)" ; Main text color
:text-02 "rgba(147,155,161,1)" ; Secondary text
:text-03 "rgba(255,255,255,0.7)" ; Secondary on accent
:text-04 "rgba(67,96,223,1)" ; Links text color
:text-05 "rgba(255,255,255,1)" ; Text inverse on accent
:icon-01 "rgba(0,0,0,1)" ; Primary icons
:icon-02 "rgba(147,155,161,1)" ; Secondary icons
:icon-03 "rgba(255,255,255,0.4)" ; Secondary icons on accent bg
:icon-04 "rgba(67,96,223,1)" ; Interactive icon
:icon-05 "rgba(255,255,255,1)" ; Icons inverse on accent background
:shadow-01 "rgba(0,9,26,0.12)" ; Main shadow color
:backdrop "rgba(0,0,0,0.4)" ; Backdrop for modals and bottom sheet
:border-01 "rgba(238,242,245,1)"
:border-02 "rgba(67, 96, 223, 0.1)"
:highlight "rgba(67,96,223,0.4)"
:blurred-bg "rgba(255,255,255,0.3)"})
{:positive-01 "rgba(68,208,88,1)" ; Primary Positive, text, icons color
:positive-02 "rgba(78,188,96,0.1)" ; Secondary Positive, Supporting color for success illustrations
:positive-03 "rgba(78,188,96,1)" ; Lighter Positive, Supporting color for success illustrations
:negative-01 "rgba(255,45,85,1)" ; Primary Negative, text, icons color
:negative-02 "rgba(255,45,85,0.1))" ; Secondary Negative, Supporting color for errors illustrations
:warning-01 "rgba(255, 202, 15, 1)"
:warning-02 "rgba(255, 202, 15, 0.1)"
:interactive-01 "rgba(67,96,223,1)" ; Accent color, buttons, own message, actions,active state
:interactive-02 "rgba(236,239,252,1)" ; Light Accent, buttons background, actions background, messages
:interactive-03 "rgba(255,255,255,0.1)" ; Background for interactive above accent
:interactive-04 "rgba(147,155,161,1)" ; Disabled state
:ui-background "rgba(255,255,255,1)" ; Default view background
:preview-background "rgba(255,255,255,1)" ; Preview page background
:ui-01 "rgba(238,242,245,1)" ; Secondary background
:ui-02 "rgba(0,0,0,0.1)" ; Deviders
:ui-03 "rgba(0,0,0,0.86)" ; Dark background
:text-01 "rgba(0,0,0,1)" ; Main text color
:text-02 "rgba(147,155,161,1)" ; Secondary text
:text-03 "rgba(255,255,255,0.7)" ; Secondary on accent
:text-04 "rgba(67,96,223,1)" ; Links text color
:text-05 "rgba(255,255,255,1)" ; Text inverse on accent
:icon-01 "rgba(0,0,0,1)" ; Primary icons
:icon-02 "rgba(147,155,161,1)" ; Secondary icons
:icon-03 "rgba(255,255,255,0.4)" ; Secondary icons on accent bg
:icon-04 "rgba(67,96,223,1)" ; Interactive icon
:icon-05 "rgba(255,255,255,1)" ; Icons inverse on accent background
:shadow-01 "rgba(0,9,26,0.12)" ; Main shadow color
:backdrop "rgba(0,0,0,0.4)" ; Backdrop for modals and bottom sheet
:border-01 "rgba(238,242,245,1)"
:border-02 "rgba(67, 96, 223, 0.1)"
:highlight "rgba(67,96,223,0.4)"
:blurred-bg "rgba(255,255,255,0.3)"})

(def dark-theme
{:positive-01 "rgba(68,208,88,1)"
:positive-02 "rgba(78,188,96,0.1)"
:positive-03 "rgba(78,188,96,1)"
:negative-01 "rgba(252,95,95,1)"
:negative-02 "rgba(252,95,95,0.1)"
:warning-01 "rgba(255, 202, 15, 1)"
:warning-02 "rgba(255, 202, 15, 0.1)"
:interactive-01 "rgba(97,119,229,1)"
:interactive-02 "rgba(35,37,47,1)"
:interactive-03 "rgba(255,255,255,0.1)"
:interactive-04 "rgba(131,140,145,1)"
:ui-background "rgba(13,22,37,1)"
:ui-01 "rgba(37,37,40,1)"
:ui-02 "rgba(0,0,0,0.1)"
:ui-03 "rgba(0,0,0,0.86)"
:text-01 "rgba(255,255,255,1)"
:text-02 "rgba(131,140,145,1)"
:text-03 "rgba(255,255,255,0.7)"
:text-04 "rgba(97,119,229,1)"
:text-05 "rgba(20,20,20,1)"
:icon-01 "rgba(255,255,255,1)"
:icon-02 "rgba(131,140,145,1)"
:icon-03 "rgba(255,255,255,0.4)"
:icon-04 "rgba(97,119,229,1)"
:icon-05 "rgba(20,20,20,1)"
:shadow-01 "rgba(0,0,0,0.75)"
:backdrop "rgba(0,0,0,0.4)"
:border-01 "rgba(37,37,40,1)"
:border-02 "rgba(97,119,229,0.1)"
:highlight "rgba(67,96,223,0.4)"
:blurred-bg "rgba(0,0,0,0.3)"})
{:positive-01 "rgba(68,208,88,1)"
:positive-02 "rgba(78,188,96,0.1)"
:positive-03 "rgba(78,188,96,1)"
:negative-01 "rgba(252,95,95,1)"
:negative-02 "rgba(252,95,95,0.1)"
:warning-01 "rgba(255, 202, 15, 1)"
:warning-02 "rgba(255, 202, 15, 0.1)"
:interactive-01 "rgba(97,119,229,1)"
:interactive-02 "rgba(35,37,47,1)"
:interactive-03 "rgba(255,255,255,0.1)"
:interactive-04 "rgba(131,140,145,1)"
:ui-background "rgba(20,20,20,1)"
:preview-background "rgba(13,22,37,1)"
:ui-01 "rgba(37,37,40,1)"
:ui-02 "rgba(0,0,0,0.1)"
:ui-03 "rgba(0,0,0,0.86)"
:text-01 "rgba(255,255,255,1)"
:text-02 "rgba(131,140,145,1)"
:text-03 "rgba(255,255,255,0.7)"
:text-04 "rgba(97,119,229,1)"
:text-05 "rgba(20,20,20,1)"
:icon-01 "rgba(255,255,255,1)"
:icon-02 "rgba(131,140,145,1)"
:icon-03 "rgba(255,255,255,0.4)"
:icon-04 "rgba(97,119,229,1)"
:icon-05 "rgba(20,20,20,1)"
:shadow-01 "rgba(0,0,0,0.75)"
:backdrop "rgba(0,0,0,0.4)"
:border-01 "rgba(37,37,40,1)"
:border-02 "rgba(97,119,229,0.1)"
:highlight "rgba(67,96,223,0.4)"
:blurred-bg "rgba(0,0,0,0.3)"})

(def theme (reagent/atom light-theme))

Expand Down
15 changes: 8 additions & 7 deletions src/quo2/components/avatars/user_avatar.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,14 @@
:border-radius inner-dimensions})

(defn container [inner-dimensions outer-dimensions & children]
[rn/view {:style (merge {:background-color (colors/custom-color
:turquoise
:light)
:justify-content :center
:align-items :center}
(container-styling inner-dimensions outer-dimensions))}
children])
(let [dark-kw (if dark? :dark :light)]
[rn/view {:style (merge {:background-color (colors/custom-color
:turquoise
dark-kw)
:justify-content :center
:align-items :center}
(container-styling inner-dimensions outer-dimensions))}
children]))

(def small-sizes #{:xs :xxs :xxxs})
(def identicon-sizes #{:big :medium :small})
Expand Down
10 changes: 5 additions & 5 deletions src/quo2/screens/avatars/account_avatar.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
:type :select
:options [{:key :main-icons/wallet
:value "Wallet"}
{:key :main-icons/placeholder
:value "Placeholder"}
{:key :main-icons/peach20
:value "Peach"}]}
{:key :main-icons/token
:value "Token"}
{:key :main-icons/status
:value "Status"}]}
{:label "Size"
:key :size
:type :select
Expand All @@ -40,7 +40,7 @@
[quo2/account-avatar @state]]])))

(defn preview-account-avatar []
[rn/view {:background-color (:ui-background @colors/theme)
[rn/view {:background-color (:preview-background @colors/theme)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
Expand Down
2 changes: 1 addition & 1 deletion src/quo2/screens/main.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
{:name :wallet-user-avatar
:insets {:top false}
:component wallet-user-avatar/preview-wallet-user-avatar}
{:name :quo2-account-avatar
{:name :account-avatar
:insets {:top false}
:component account-avatar/preview-account-avatar}]
:buttons [{:name :button
Expand Down

0 comments on commit 0a0f358

Please sign in to comment.