Add colors tokens

src/fiddle/components/header.cljs

@@ -1,8 +1,7 @@
 (ns fiddle.components.header
   (:require [reagent.core :as reagent]
             [oops.core :refer [oget]]
-            ;; TODO(Ferossgp): Move colors into fiddle
-            [status-im.ui.components.colors :as colors]
+            [fiddle.design-system.colors :as colors]
             ;; TODO(Ferossgp): Move icon component to fiddle
             [status-im.ui.components.icons.vector-icons :as icons]
             [fiddle.design-system.spacing :as spacing]
@@ -14,7 +13,7 @@
 (def header-height 56)
 
 (defn header-wrapper-style [{:keys [height]}]
-  {:background-color colors/white
+  {:background-color (:ui-background @colors/theme)
    :height           height})
 
 (def absolute-fill {:position :absolute

src/fiddle/components/text.cljs

@@ -1,8 +1,7 @@
 (ns fiddle.components.text
   (:require [reagent.core :as reagent]
             [fiddle.react-native :as rn]
-            ;; TODO(Ferossgp): Move colors into fiddle
-            [status-im.ui.components.colors :as colors]
+            [fiddle.design-system.colors :as colors]
             [fiddle.design-system.typography :as typography]
             [fiddle.animated :as animated]))
 
@@ -17,8 +16,12 @@
            :semi-bold typography/font-semi-bold
            :bold      typography/font-bold)
          (case color
-           :link {:color colors/blue}
-           :main {:color colors/black})
+           :main              {:color (:text-01 @colors/theme)}
+           :secondary         {:color (:text-02 @colors/theme)}
+           :secondary-inverse {:color (:text-03 @colors/theme)}
+           :link              {:color (:text-04 @colors/theme)}
+           :positive          {:color (:positive-01 @colors/theme)}
+           :negative          {:color (:negative-01 @colors/theme)})
          (case size
            :tiny     typography/tiny
            :small    typography/small

src/fiddle/design_system/colors.cljs

@@ -0,0 +1,51 @@
+(ns fiddle.design-system.colors
+  (:require [reagent.core :as reagent]))
+
+(def white "#FFFFFF")
+(def black "#000000")
+
+(def light-theme
+  {:positive-01    "#44D058"               ; Primary Positive, text, icons color
+   :positive-02    "rgba(78,188,96,0.1)"   ; Secondary Positive, Supporting color for success illustrations
+   :negative-01    "#FF2D55"               ; Primary Negative, text, icons color
+   :negative-02    "rgba(255,45,85,0.1))"  ; Secondary Negative, Supporting color for errors illustrations
+   :interactive-01 "#4360DF"               ; Accent color, buttons, own message, actions, active state
+   :interactive-02 "#ECEFFC"               ; Light Accent, buttons background, actions background, messages
+   :interactive-03 "rgba(255,255,255,0.1)" ; Background for interactive above accent
+   :ui-background  "#FFFFFF"               ; Default view background
+   :ui-01          "#EEF2F5"               ; Secondary background
+   :ui-02          "rgba(0,0,0,0.1)"       ; Deviders
+   :text-01        "#000000"               ; Main text color
+   :text-02        "#939BA1"               ; Secondary text
+   :text-03        "rgba(255,255,255,0.7)" ; Secondary on accent
+   :text-04        "#4360DF"               ; Links text color
+   :icon-01        "#000000"               ; Primary icons
+   :icon-02        "#939BA1"               ; Secondary icons
+   :icon-03        "rgba(255,255,255,0.4)" ; Secondary icons on accent bg
+   :icon-04        "#FFFFFF"               ; Icons on inverse background
+   :shadow-01      "rgba(0, 9, 26, 0.12)"  ; Main shadow color
+   })
+
+(def dark-theme
+  {:positive-01    "#44D058"                ; Primary Positive, text, icons color
+   :positive-02    "rgba(78,188,96,0.1)"    ; Secondary Positive, Supporting color for success illustrations
+   :negative-01    "#FC5F5F"                ; Primary Negative, text, icons color
+   :negative-02    "rgba(252, 95, 95, 0.1)" ; Secondary Negative, Supporting color for errors illustrations
+   :interactive-01 "#6177E5"                ; Accent color, buttons, own message, actions, active state
+   :interactive-02 "#23252F"                ; Light Accent, buttons background, actions background, messages
+   :interactive-03 "rgba(255,255,255,0.1)"  ; Background for interactive above accent
+   :ui-background  "#141414"                ; Default view background
+   :ui-01          "#252528"                ; Secondary background
+   :ui-02          "rgba(0,0,0,0.1)"        ; Deviders
+   :text-01        "#FFFFFF"                ; Main text color
+   :text-02        "#838C91"                ; Secondary text
+   :text-03        "rgba(255,255,255,0.7)"  ; Secondary on accent
+   :text-04        "#6177E5"                ; Links text color
+   :icon-01        "#FFFFFF"                ; Primary icons
+   :icon-02        "#838C91"                ; Secondary icons
+   :icon-03        "rgba(255,255,255,0.4)"  ; Secondary icons on accent bg
+   :icon-04        "#141414"                ; Icons on inverse background
+   :shadow-01      "rgba(0, 0, 0, 0.75)"    ; Main shadow color
+   })
+
+(def theme (reagent/atom light-theme))

src/fiddle/theme.cljs

@@ -0,0 +1,7 @@
+(ns fiddle.theme
+  (:require [fiddle.design-system.colors :as colors]))
+
+(defn set-theme [theme]
+  (reset! colors/theme (case theme
+                         :dark colors/dark-theme
+                         colors/light-theme)))

src/status_im/init/core.cljs

@@ -8,6 +8,7 @@
             [status-im.utils.fx :as fx]
             [status-im.utils.platform :as platform]
             [clojure.string :as string]
+            [fiddle.theme :as fiddle-theme]
             [status-im.utils.theme :as theme]
             [status-im.ui.components.colors :as colors]))
 
@@ -94,4 +95,5 @@
  (fn []
    (theme/add-mode-change-listener #(re-frame/dispatch [:system-theme-mode-changed %]))
    (when (theme/is-dark-mode)
-     (colors/set-theme :dark))))
+     (fiddle-theme/set-theme :dark)
+     (colors/set-theme :dark))))

src/status_im/multiaccounts/core.cljs

@@ -9,6 +9,7 @@
             [status-im.utils.gfycat.core :as gfycat]
             [status-im.utils.identicon :as identicon]
             [status-im.ui.components.colors :as colors]
+            [fiddle.theme :as fiddle-theme]
             [status-im.utils.theme :as theme]))
 
 (defn displayed-name
@@ -101,15 +102,16 @@
 
 (re-frame/reg-fx
  ::switch-theme
- (fn [theme]
-   (colors/set-theme
-    (if (or (= 2 theme) (and (= 0 theme) (theme/is-dark-mode)))
-      :dark
-      :light))))
+ (fn [theme-id]
+   (let [theme (if (or (= 2 theme-id) (and (= 0 theme-id) (theme/is-dark-mode)))
+                 :dark
+                 :light)]
+     (fiddle-theme/set-theme theme)
+     (colors/set-theme theme))))
 
 (fx/defn switch-appearance
   {:events [:multiaccounts.ui/appearance-switched]}
   [cofx theme]
   (fx/merge cofx
             {::switch-theme theme}
-            (multiaccounts.update/multiaccount-update :appearance theme {})))
+            (multiaccounts.update/multiaccount-update :appearance theme {})))