From 7402718e682c00e26872caff06b069ab66a3ee77 Mon Sep 17 00:00:00 2001
From: Gheorghe Pinzaru <feross95@gmail.com>
Date: Fri, 30 Oct 2020 14:10:42 +0300
Subject: [PATCH] Use custom color for disabled state of controls

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
---
 src/quo/components/controls/styles.cljs | 18 ++++++++++++------
 src/quo/components/controls/view.cljs   | 15 ++++++++-------
 src/quo/design_system/colors.cljs       |  2 ++
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/quo/components/controls/styles.cljs b/src/quo/components/controls/styles.cljs
index 04a4a0dbfe..b58cac2ff4 100644
--- a/src/quo/components/controls/styles.cljs
+++ b/src/quo/components/controls/styles.cljs
@@ -2,14 +2,16 @@
   (:require [quo.animated :as animated]
             [quo.design-system.colors :as colors]))
 
-(defn switch-style [state]
+(defn switch-style [state disabled]
   {:width            52
    :height           28
    :border-radius    14
    :padding          4
    :background-color (animated/mix-color state
                                          (:ui-01 @colors/theme)
-                                         (:interactive-01 @colors/theme))})
+                                         (if disabled
+                                           (:interactive-04 @colors/theme)
+                                           (:interactive-01 @colors/theme)))})
 
 (defn switch-bullet-style [state hold]
   {:width            20
@@ -24,14 +26,16 @@
    :shadow-color     (:shadow-01 @colors/theme)
    :shadow-offset    {:width 0 :height 4}})
 
-(defn radio-style [state]
+(defn radio-style [state disabled]
   {:width            20
    :height           20
    :border-radius    10
    :padding          4
    :background-color (animated/mix-color state
                                          (:ui-01 @colors/theme)
-                                         (:interactive-01 @colors/theme))})
+                                         (if disabled
+                                           (:interactive-04 @colors/theme)
+                                           (:interactive-01 @colors/theme)))})
 
 (defn radio-bullet-style [state hold]
   {:width            12
@@ -46,7 +50,7 @@
    :shadow-color     (:shadow-01 @colors/theme)
    :shadow-offset    {:width 0 :height 4}})
 
-(defn checkbox-style [state]
+(defn checkbox-style [state disabled]
   {:width            18
    :height           18
    :border-radius    4
@@ -54,7 +58,9 @@
    :align-items      :center
    :background-color (animated/mix-color state
                                          (:ui-01 @colors/theme)
-                                         (:interactive-01 @colors/theme))})
+                                         (if disabled
+                                           (:interactive-04 @colors/theme)
+                                           (:interactive-01 @colors/theme)))})
 
 (defn check-icon-style [state hold]
   {:opacity       (animated/mix hold 1 0.6)
diff --git a/src/quo/components/controls/view.cljs b/src/quo/components/controls/view.cljs
index 0828f1ff7f..579737957c 100644
--- a/src/quo/components/controls/view.cljs
+++ b/src/quo/components/controls/view.cljs
@@ -45,22 +45,23 @@
                                        :enabled                 (boolean (and onChange (not disabled)))})
         [animated/view
          [component {:transition transition
-                     :hold       hold}]]]))))
+                     :hold       hold
+                     :disabled   disabled}]]]))))
 
-(defn switch-view [{:keys [transition hold]}]
-  [animated/view {:style               (styles/switch-style transition)
+(defn switch-view [{:keys [transition hold disabled]}]
+  [animated/view {:style               (styles/switch-style transition disabled)
                   :accessibility-label :switch
                   :accessibility-role  :switch}
    [animated/view {:style (styles/switch-bullet-style transition hold)}]])
 
-(defn radio-view [{:keys [transition hold]}]
-  [animated/view {:style (styles/radio-style transition)
+(defn radio-view [{:keys [transition hold disabled]}]
+  [animated/view {:style (styles/radio-style transition disabled)
                   :accessibility-label :radio
                   :accessibility-role  :radio}
    [animated/view {:style (styles/radio-bullet-style transition hold)}]])
 
-(defn checkbox-view [{:keys [transition hold]}]
-  [animated/view {:style               (styles/checkbox-style transition)
+(defn checkbox-view [{:keys [transition hold disabled]}]
+  [animated/view {:style               (styles/checkbox-style transition disabled)
                   :accessibility-label :checkbox
                   :accessibility-role  :checkbox}
    [animated/view {:style (styles/check-icon-style transition hold)}
diff --git a/src/quo/design_system/colors.cljs b/src/quo/design_system/colors.cljs
index c7348319f0..cd83972c9c 100644
--- a/src/quo/design_system/colors.cljs
+++ b/src/quo/design_system/colors.cljs
@@ -29,6 +29,7 @@
    :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
@@ -59,6 +60,7 @@
    :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)"
    :ui-01          "rgba(37,37,40,1)"
    :ui-02          "rgba(0,0,0,0.1)"