Skip to content

Commit f2b0df4

Browse files
ibrkhalilibrkhalil
committed
Add more colors
1 parent 203518e commit f2b0df4

File tree

3 files changed

+156
-8
lines changed

3 files changed

+156
-8
lines changed

‎src/quo2/components/icon_avatar.cljs

+55-3
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,76 @@
33
[quo2.foundations.colors :as colors]
44
[status-im.ui.components.icons.icons :as icons]))
55

6+
(def themes {:light {:primary {:icon-color colors/primary-50
7+
:background-color colors/primary-20}
8+
:purple {:icon-color colors/purple-opa-50
9+
:background-color colors/purple-opa-20}
10+
:indigo {:icon-color colors/indigo-opa-50
11+
:background-color colors/indigo-opa-20}
12+
:turquoise {:icon-color colors/turquoise-opa-50
13+
:background-color colors/turquoise-opa-20}
14+
:blue {:icon-color colors/blue-opa-50
15+
:background-color colors/blue-opa-20}
16+
:green {:icon-color colors/green-opa-50
17+
:background-color colors/green-opa-20}
18+
:yellow {:icon-color colors/yellow-opa-50
19+
:background-color colors/yellow-opa-20}
20+
:orange {:icon-color colors/orange-opa-50
21+
:background-color colors/orange-opa-20}
22+
:red {:icon-color colors/red-opa-50
23+
:background-color colors/red-opa-20}
24+
:pink {:icon-color colors/pink-opa-50
25+
:background-color colors/pink-opa-20}
26+
:brown {:icon-color colors/brown-opa-50
27+
:background-color colors/brown-opa-20}
28+
:beige {:icon-color colors/beige-opa-50
29+
:background-color colors/beige-opa-20}}
30+
:dark {:primary {:icon-color colors/primary-60
31+
:background-color colors/primary-20}
32+
:purple {:icon-color colors/purple-opa-60
33+
:background-color colors/purple-opa-20}
34+
:indigo {:icon-color colors/indigo-opa-60
35+
:background-color colors/indigo-opa-20}
36+
:turquoise {:icon-color colors/turquoise-opa-60
37+
:background-color colors/turquoise-opa-20}
38+
:blue {:icon-color colors/blue-opa-60
39+
:background-color colors/blue-opa-20}
40+
:green {:icon-color colors/green-opa-60
41+
:background-color colors/green-opa-20}
42+
:yellow {:icon-color colors/yellow-opa-60
43+
:background-color colors/yellow-opa-20}
44+
:orange {:icon-color colors/orange-opa-60
45+
:background-color colors/orange-opa-20}
46+
:red {:icon-color colors/red-opa-60
47+
:background-color colors/red-opa-20}
48+
:pink {:icon-color colors/pink-opa-60
49+
:background-color colors/pink-opa-20}
50+
:brown {:icon-color colors/brown-opa-60
51+
:background-color colors/brown-opa-20}
52+
:beige {:icon-color colors/beige-opa-60
53+
:background-color colors/beige-opa-20}}})
54+
655
(def sizes
756
{:big 48
857
:medium 32
958
:small 20})
1059

1160
(defn icon-avatar
12-
[{:keys [size]}]
61+
[{:keys [size color dark?]}]
1362
(let [component-size (size sizes)
63+
is-theme-dark? (if dark? :dark :light)
64+
circle-color (get-in themes [is-theme-dark? color :background-color])
65+
icon-color (get-in themes [is-theme-dark? color :icon-color])
1466
icon-size (case size
1567
:big 20
1668
:medium 16
1769
:small 12)]
1870
[rn/view {:style {:width component-size
1971
:height component-size
2072
:border-radius component-size
21-
:background-color colors/primary-50-opa-20
73+
:background-color circle-color
2274
:justify-content :center
2375
:align-items :center}}
2476
[icons/icon :main-icons/placeholder20 {:container-style {:width icon-size
2577
:height icon-size}
26-
:color "nil"}]]))
78+
:color icon-color}]]))

‎src/quo2/foundations/colors.cljs

+66
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,72 @@
183183
(def info-50-opa-30 (alpha info-50 0.3))
184184
(def info-50-opa-40 (alpha info-50 0.4))
185185

186+
;;;;Purple
187+
(def purple "#8661C1")
188+
(def purple-opa-20 (alpha purple 0.2))
189+
(def purple-opa-50 (alpha purple 0.5))
190+
(def purple-opa-60 (alpha purple 0.6))
191+
192+
;;;;Indigo
193+
(def indigo "#496289")
194+
(def indigo-opa-20 (alpha indigo 0.2))
195+
(def indigo-opa-50 (alpha indigo 0.5))
196+
(def indigo-opa-60 (alpha indigo 0.6))
197+
198+
;;;;Turquoise
199+
(def turquoise "#448EA2")
200+
(def turquoise-opa-20 (alpha turquoise 0.2))
201+
(def turquoise-opa-50 (alpha turquoise 0.5))
202+
(def turquoise-opa-60 (alpha turquoise 0.6))
203+
204+
;;;;Blue
205+
(def blue "#4CB3EF")
206+
(def blue-opa-20 (alpha blue 0.2))
207+
(def blue-opa-50 (alpha blue 0.5))
208+
(def blue-opa-60 (alpha blue 0.6))
209+
210+
;;;;green
211+
(def green "#5BCC95")
212+
(def green-opa-20 (alpha green 0.2))
213+
(def green-opa-50 (alpha green 0.5))
214+
(def green-opa-60 (alpha green 0.6))
215+
216+
;;;;yellow
217+
(def yellow "#FFCB53")
218+
(def yellow-opa-20 (alpha yellow 0.2))
219+
(def yellow-opa-50 (alpha yellow 0.5))
220+
(def yellow-opa-60 (alpha yellow 0.6))
221+
222+
;;;;orange
223+
(def orange "#FB8F61")
224+
(def orange-opa-20 (alpha orange 0.2))
225+
(def orange-opa-50 (alpha orange 0.5))
226+
(def orange-opa-60 (alpha orange 0.6))
227+
228+
;;;;red
229+
(def red "#FB8F61")
230+
(def red-opa-20 (alpha red 0.2))
231+
(def red-opa-50 (alpha red 0.5))
232+
(def red-opa-60 (alpha red 0.6))
233+
234+
;;;;pink
235+
(def pink "#FC7BAA")
236+
(def pink-opa-20 (alpha pink 0.2))
237+
(def pink-opa-50 (alpha pink 0.5))
238+
(def pink-opa-60 (alpha pink 0.6))
239+
240+
;;;;brown
241+
(def brown "#99604D")
242+
(def brown-opa-20 (alpha brown 0.2))
243+
(def brown-opa-50 (alpha brown 0.5))
244+
(def brown-opa-60 (alpha brown 0.6))
245+
246+
;;;;beige
247+
(def beige "#CAAE93")
248+
(def beige-opa-20 (alpha beige 0.2))
249+
(def beige-opa-50 (alpha beige 0.5))
250+
(def beige-opa-60 (alpha beige 0.6))
251+
186252
;;;;Switcher
187253
(def switcher-background "#040B14")
188254

‎src/quo2/screens/icon_avatar.cljs

+35-5
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,45 @@
55
[quo.design-system.colors :as colors]
66
[quo2.components.icon-avatar :as quo2]))
77

8-
(def descriptor [{:label "Size"
8+
(def descriptor [{:label "Dark"
9+
:key :dark?
10+
:type :boolean}
11+
{:label "Size"
912
:key :size
1013
:type :select
11-
:options [{:key :big
12-
:value "Big"}
14+
:options [{:key :small
15+
:value "Small"}
1316
{:key :medium
1417
:value "Medium"}
15-
{:key :small
16-
:value "Small"}]}])
18+
{:key :big
19+
:value "Big"}]}
20+
{:label "Color"
21+
:key :color
22+
:type :select
23+
:options [{:key :primary
24+
:value "Primary"}
25+
{:key :purple
26+
:value "Purple"}
27+
{:key :indigo
28+
:value "Indigo"}
29+
{:key :turquoise
30+
:value "Turquoise"}
31+
{:key :blue
32+
:value "Blue"}
33+
{:key :green
34+
:value "Green"}
35+
{:key :yellow
36+
:value "yellow"}
37+
{:key :orange
38+
:value "Orange"}
39+
{:key :red
40+
:value "Red"}
41+
{:key :pink
42+
:value "Pink"}
43+
{:key :brown
44+
:value "Brown"}
45+
{:key :beige
46+
:value "Beige"}]}])
1747

1848
(defn cool-preview []
1949
(let [state (reagent/atom {:size :small})]

0 commit comments

Comments
 (0)