From f4f2579eb85c66ad27a362ab5dbc5b6429e3d94c Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Thu, 6 Jun 2019 14:22:09 +0100
Subject: [PATCH 01/17] WIP update loading spinner

---
 docs/Examples/Loader.example.purs |  9 ++++++--
 src/Lumi/Components/Loader.purs   | 36 +++++++++++++++++++++++++------
 2 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/docs/Examples/Loader.example.purs b/docs/Examples/Loader.example.purs
index d586d99b..d135be58 100644
--- a/docs/Examples/Loader.example.purs
+++ b/docs/Examples/Loader.example.purs
@@ -2,8 +2,10 @@ module Lumi.Components.Examples.Loader where
 
 import Prelude
 
+import Color (cssStringHSLA)
 import Data.Nullable (null)
-import Lumi.Components.Column (column_)
+import Lumi.Components.Color (colors)
+import Lumi.Components.Column (column, column_)
 import Lumi.Components.Loader (loader)
 import Lumi.Components.Example (example)
 import React.Basic (JSX)
@@ -13,5 +15,8 @@ docs :: JSX
 docs =
   column_
     [ example $
-        loader { style: R.css {}, testId: null }
+        column {
+          children: [ loader { style: R.css {}, testId: null } ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.accent1 }
+        }
     ]
diff --git a/src/Lumi/Components/Loader.purs b/src/Lumi/Components/Loader.purs
index 8121696d..1682469d 100644
--- a/src/Lumi/Components/Loader.purs
+++ b/src/Lumi/Components/Loader.purs
@@ -29,6 +29,7 @@ loader = makeStateless component $ loaderElement <<< mapProps
 styles :: JSS
 styles = jss
   { "@global":
+      -- @TODO how to pass backgroundColor as prop down from LoaderProps?
       { "lumi-loader": spinnerMixin { radius: "3.8rem", borderWidth: "0.5rem" }
       , "@keyframes spin":
           { from: { transform: "rotate(0deg)" }
@@ -39,14 +40,37 @@ styles = jss
 
 spinnerMixin :: { radius :: String, borderWidth :: String } -> JSS
 spinnerMixin { radius, borderWidth } = jss
-  { boxSizing: "border-box"
-  , content: "\"\""
-  , display: "inline-block"
+  { width: radius
   , height: radius
-  , width: radius
-  , border: [ borderWidth, "solid", cssStringHSLA colors.black1 ]
-  , borderTopColor: cssStringHSLA colors.black4
   , borderRadius: "50%"
+  , background: "linear-gradient(to right, " <> cssStringHSLA colors.white <> " 10%, rgba(255, 255, 255, 0) 42%)"
+  , position: "relative"
   , animation: "spin 1s infinite linear"
   , animationName: "spin"
+  , "&::before":
+      { width: "50%"
+      , height: "50%"
+      , background: cssStringHSLA colors.white
+      , borderRadius: "100% 0 0 0"
+      , position: "absolute"
+      , top: "0"
+      , left: "0"
+      , content: "\"\""
+      }
+  , "&::after":
+      -- @TODO this should be passed down from the loader
+      -- cannot use alpha/transparency because we need background in order to have the linear-gradient affect on the spinner
+      -- this solid background will cut the "hole" out of the center
+      { background: cssStringHSLA colors.accent1
+      , width: "75%"
+      , height: "75%"
+      , borderRadius: "50%"
+      , content: "\"\""
+      , margin: "auto"
+      , position: "absolute"
+      , top: "0"
+      , left: "0"
+      , bottom: "0"
+      , right: "0"
+      }
   }

From cf15e4292be6d7aa18076c94129530fb437da8e4 Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Thu, 6 Jun 2019 14:22:42 +0100
Subject: [PATCH 02/17] note

---
 src/Lumi/Components/Loader.purs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Lumi/Components/Loader.purs b/src/Lumi/Components/Loader.purs
index 1682469d..4bf6bf5f 100644
--- a/src/Lumi/Components/Loader.purs
+++ b/src/Lumi/Components/Loader.purs
@@ -30,6 +30,7 @@ styles :: JSS
 styles = jss
   { "@global":
       -- @TODO how to pass backgroundColor as prop down from LoaderProps?
+      -- we should also be passing the spinner color as we cannot assume it will be white (esp over a white background, such as a page)
       { "lumi-loader": spinnerMixin { radius: "3.8rem", borderWidth: "0.5rem" }
       , "@keyframes spin":
           { from: { transform: "rotate(0deg)" }

From 690a13579cbecd9223e864ad69a5d87090a73d68 Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Fri, 7 Jun 2019 17:03:13 +0100
Subject: [PATCH 03/17] primary bg color test

---
 docs/Examples/Loader.example.purs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/Examples/Loader.example.purs b/docs/Examples/Loader.example.purs
index d135be58..fd5f4994 100644
--- a/docs/Examples/Loader.example.purs
+++ b/docs/Examples/Loader.example.purs
@@ -17,6 +17,6 @@ docs =
     [ example $
         column {
           children: [ loader { style: R.css {}, testId: null } ]
-          , style: R.css { backgroundColor: cssStringHSLA colors.accent1 }
+          , style: R.css { backgroundColor: cssStringHSLA colors.primary }
         }
     ]

From 73364e79e1e29c375aff2a1d28fe1388a55e79da Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Tue, 25 Jun 2019 00:43:52 +0200
Subject: [PATCH 04/17] WIP potential loader with fade

---
 docs/Examples/Loader.example.purs | 23 ++++++++++++++--
 src/Lumi/Components/Button.purs   | 29 +++++++++----------
 src/Lumi/Components/Form.purs     |  9 +++---
 src/Lumi/Components/Loader.purs   | 46 ++++++++++++++++++++++---------
 src/Lumi/Components/Select.purs   |  4 +--
 5 files changed, 76 insertions(+), 35 deletions(-)

diff --git a/docs/Examples/Loader.example.purs b/docs/Examples/Loader.example.purs
index fd5f4994..f2ee57e1 100644
--- a/docs/Examples/Loader.example.purs
+++ b/docs/Examples/Loader.example.purs
@@ -4,7 +4,7 @@ import Prelude
 
 import Color (cssStringHSLA)
 import Data.Nullable (null)
-import Lumi.Components.Color (colors)
+import Lumi.Components.Color (Color(..), colorNames, colors)
 import Lumi.Components.Column (column, column_)
 import Lumi.Components.Loader (loader)
 import Lumi.Components.Example (example)
@@ -16,7 +16,26 @@ docs =
   column_
     [ example $
         column {
-          children: [ loader { style: R.css {}, testId: null } ]
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.white
+                , bgColor: colorNames.primary
+                }
+            ]
           , style: R.css { backgroundColor: cssStringHSLA colors.primary }
         }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
     ]
diff --git a/src/Lumi/Components/Button.purs b/src/Lumi/Components/Button.purs
index 15d994b7..e8452a3f 100644
--- a/src/Lumi/Components/Button.purs
+++ b/src/Lumi/Components/Button.purs
@@ -218,20 +218,21 @@ styles = jss
                   , borderColor: cssStringHSLA colors.black3
                   }
               }
-          , "&[data-loading=\"true\"]":
-              { "&:after": spinnerMixin { radius: "16px", borderWidth: "2px" }
-              , "@media (min-width: $break-point-mobile)":
-                  { "&[data-size=\"small\"]":
-                      { "&:after": spinnerMixin { radius: "12px", borderWidth: "2px" }
-                      }
-                  , "&[data-size=\"large\"]":
-                      { "&:after": spinnerMixin { radius: "24px", borderWidth: "3px" }
-                      }
-                  , "&[data-size=\"extra-large\"]":
-                      { "&:after": spinnerMixin { radius: "34px", borderWidth: "4px" }
-                      }
-                  }
-              }
+          -- @TODO update spinnerMixin props
+          -- , "&[data-loading=\"true\"]":
+          --     { "&:after": spinnerMixin { radius: "16px", borderWidth: "2px" }
+          --     , "@media (min-width: $break-point-mobile)":
+          --         { "&[data-size=\"small\"]":
+          --             { "&:after": spinnerMixin { radius: "12px", borderWidth: "2px" }
+          --             }
+          --         , "&[data-size=\"large\"]":
+          --             { "&:after": spinnerMixin { radius: "24px", borderWidth: "3px" }
+          --             }
+          --         , "&[data-size=\"extra-large\"]":
+          --             { "&:after": spinnerMixin { radius: "34px", borderWidth: "4px" }
+          --             }
+          --         }
+          --     }
 
           , "&[data-color=\"black\"]": buttonColorHoverMixin colors.black
           , "&[data-color=\"black-1\"]": buttonColorHoverMixin colors.black1
diff --git a/src/Lumi/Components/Form.purs b/src/Lumi/Components/Form.purs
index c3f7e847..f5f9c2a2 100644
--- a/src/Lumi/Components/Form.purs
+++ b/src/Lumi/Components/Form.purs
@@ -487,10 +487,11 @@ asyncSelectByKey k l fromId toId toSelectOption optionRenderer =
               Nothing -> empty
               Just _  -> alignToInput
                 case data_ of
-                  Nothing     -> loader
-                    { style: css { width: "20px", height: "20px", borderWidth: "2px" }
-                    , testId: toNullable Nothing
-                    }
+                  Nothing     -> mempty
+                  -- loader
+                  --   { style: css { width: "20px", height: "20px", borderWidth: "2px" }
+                  --   , testId: toNullable Nothing
+                  --   }
                   Just data_' -> text body
                         { children = [ optionRenderer data_' ]
                         }
diff --git a/src/Lumi/Components/Loader.purs b/src/Lumi/Components/Loader.purs
index 4bf6bf5f..a526aff2 100644
--- a/src/Lumi/Components/Loader.purs
+++ b/src/Lumi/Components/Loader.purs
@@ -5,12 +5,14 @@ import Prelude
 import Color (cssStringHSLA)
 import Data.Nullable (Nullable)
 import JSS (JSS, jss)
-import Lumi.Components.Color (colors)
+import Lumi.Components.Color (ColorName(..), colors)
 import React.Basic (Component, JSX, createComponent, element, makeStateless)
 import React.Basic.DOM (CSS, unsafeCreateDOMComponent)
 
 type LoaderProps =
   { style :: CSS
+  , color :: ColorName
+  , bgColor :: ColorName
   , testId :: Nullable String
   }
 
@@ -24,14 +26,36 @@ loader = makeStateless component $ loaderElement <<< mapProps
     mapProps props =
       { style: props.style
       , "data-testid": props.testId
+      , "data-color": props.color
+      , "data-bg-color": props.bgColor
       }
 
 styles :: JSS
 styles = jss
   { "@global":
-      -- @TODO how to pass backgroundColor as prop down from LoaderProps?
-      -- we should also be passing the spinner color as we cannot assume it will be white (esp over a white background, such as a page)
-      { "lumi-loader": spinnerMixin { radius: "3.8rem", borderWidth: "0.5rem" }
+      { "lumi-loader":
+          -- @TODO add the rest of our possible colors
+          { "&[data-color=\"white\"]": spinnerMixin
+              { radius: "3.8rem"
+              , borderWidth: "0.5rem"
+              , color: cssStringHSLA colors.white
+              }
+          , "&[data-color=\"black\"]": spinnerMixin
+              { radius: "3.8rem"
+              , borderWidth: "0.5rem"
+              , color: cssStringHSLA colors.black
+              }
+          -- @TODO add the rest of our possible colors
+          , "&[data-bg-color=\"primary\"]::after":
+              { background: cssStringHSLA colors.primary
+              }
+          , "&[data-bg-color=\"white\"]::after":
+              { background: cssStringHSLA colors.white
+              }
+          , "&[data-bg-color=\"black\"]::after":
+              { background: cssStringHSLA colors.black
+              }
+          }
       , "@keyframes spin":
           { from: { transform: "rotate(0deg)" }
           , to: { transform: "rotate(360deg)" }
@@ -39,19 +63,19 @@ styles = jss
       }
   }
 
-spinnerMixin :: { radius :: String, borderWidth :: String } -> JSS
-spinnerMixin { radius, borderWidth } = jss
+spinnerMixin :: { radius :: String, borderWidth :: String, color :: String } -> JSS
+spinnerMixin { radius, borderWidth, color } = jss
   { width: radius
   , height: radius
   , borderRadius: "50%"
-  , background: "linear-gradient(to right, " <> cssStringHSLA colors.white <> " 10%, rgba(255, 255, 255, 0) 42%)"
+  , background: "linear-gradient(to right, " <> color <> " 10%, rgba(255, 255, 255, 0) 42%)"
   , position: "relative"
   , animation: "spin 1s infinite linear"
   , animationName: "spin"
   , "&::before":
       { width: "50%"
       , height: "50%"
-      , background: cssStringHSLA colors.white
+      , background: color
       , borderRadius: "100% 0 0 0"
       , position: "absolute"
       , top: "0"
@@ -59,11 +83,7 @@ spinnerMixin { radius, borderWidth } = jss
       , content: "\"\""
       }
   , "&::after":
-      -- @TODO this should be passed down from the loader
-      -- cannot use alpha/transparency because we need background in order to have the linear-gradient affect on the spinner
-      -- this solid background will cut the "hole" out of the center
-      { background: cssStringHSLA colors.accent1
-      , width: "75%"
+      { width: "75%"
       , height: "75%"
       , borderRadius: "50%"
       , content: "\"\""
diff --git a/src/Lumi/Components/Select.purs b/src/Lumi/Components/Select.purs
index e1ac75f0..fe918b6a 100644
--- a/src/Lumi/Components/Select.purs
+++ b/src/Lumi/Components/Select.purs
@@ -253,7 +253,7 @@ select = makeStateless component render
       where
         renderSelectedValues =
           if props.loading
-            then loader { style: css { width: "20px", height: "20px", borderWidth: "2px" }, testId: toNullable Nothing }
+            then mempty --loader { style: css { width: "20px", height: "20px", borderWidth: "2px" }, testId: toNullable Nothing }
             else lumiSelectInputSelectedValuesElement
               { children:
                   let renderedSelectedValues =
@@ -317,7 +317,7 @@ select = makeStateless component render
                         [ lumiSelectMenuLoaderElement
                             { key: "loading-text"
                             , children:
-                                loader { style: css { width: "20px", height: "20px", borderWidth: "2px" }, testId: toNullable Nothing }
+                                mempty --loader { style: css { width: "20px", height: "20px", borderWidth: "2px" }, testId: toNullable Nothing }
                             }
                         ]
                       Failed error ->

From 04256792ccfdf7efb1d18a74abb0b1f4e4680078 Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Tue, 25 Jun 2019 16:35:40 +0200
Subject: [PATCH 05/17] WIP get new loader to work with Button

---
 src/Lumi/Components/Button.purs | 49 +++++++++++++++++++--------------
 src/Lumi/Components/Loader.purs |  2 +-
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/Lumi/Components/Button.purs b/src/Lumi/Components/Button.purs
index e8452a3f..42ab9141 100644
--- a/src/Lumi/Components/Button.purs
+++ b/src/Lumi/Components/Button.purs
@@ -15,7 +15,7 @@ import Foreign (isNull, isUndefined, unsafeToForeign)
 import JSS (JSS, jss)
 import Lumi.Components.Color (ColorName, colorNames, colors)
 import Lumi.Components.Icon (IconType, icon)
-import Lumi.Components.Loader (spinnerMixin)
+import Lumi.Components.Loader (loader, spinnerMixin)
 import Lumi.Components.Size (Size(..))
 import React.Basic (Component, JSX, createComponent, element, makeStateless)
 import React.Basic.DOM (CSS, css, unsafeCreateDOMComponent)
@@ -74,9 +74,25 @@ button = makeStateless component render
             }
       where
         children =
-          if not null props.title && not (isNull || isUndefined) (unsafeToForeign props.title)
-            then props.title
-            else invisibleSpace -- preserves button size
+          if not props.loading
+            then
+              if not null props.title && not (isNull || isUndefined) (unsafeToForeign props.title)
+                then R.text props.title
+                else R.text invisibleSpace -- preserves button size
+            else
+              loader
+                  { style:
+                      case props.size of
+                        Small -> R.css { width: "12px", height: "12px" }
+                        Medium -> R.css { width: "18px", height: "18px" }
+                        Large -> R.css { width: "24px", height: "24px" }
+                        ExtraLarge -> R.css { width: "34px", height: "34px" }
+                  , testId: toNullable Nothing
+                  , color: colorNames.white
+                  -- @TODO get this to work with the lighten/darken HSLA rules
+                  , bgColor: colorNames.black
+                  }
+
 
 defaults :: ButtonProps
 defaults =
@@ -176,8 +192,7 @@ styles = jss
           , "&:hover": { backgroundColor: cssStringHSLA $ darken 0.1 colors.primary }
           , "&:active": { backgroundColor: cssStringHSLA $ darken 0.15 colors.primary }
           , "&:disabled, &[data-loading=\"true\"]":
-              { backgroundColor: cssStringHSLA colors.primary2
-              , cursor: "default"
+              { cursor: "default"
               }
           , "&:focus":
               { outline: 0
@@ -218,21 +233,12 @@ styles = jss
                   , borderColor: cssStringHSLA colors.black3
                   }
               }
-          -- @TODO update spinnerMixin props
-          -- , "&[data-loading=\"true\"]":
-          --     { "&:after": spinnerMixin { radius: "16px", borderWidth: "2px" }
-          --     , "@media (min-width: $break-point-mobile)":
-          --         { "&[data-size=\"small\"]":
-          --             { "&:after": spinnerMixin { radius: "12px", borderWidth: "2px" }
-          --             }
-          --         , "&[data-size=\"large\"]":
-          --             { "&:after": spinnerMixin { radius: "24px", borderWidth: "3px" }
-          --             }
-          --         , "&[data-size=\"extra-large\"]":
-          --             { "&:after": spinnerMixin { radius: "34px", borderWidth: "4px" }
-          --             }
-          --         }
-          --     }
+
+          , "&[data-loading=\"true\"]": {}
+              -- @TODO why isn't this working?
+              -- { "lumi-loader::after":
+              --     { background: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value }
+              -- }
 
           , "&[data-color=\"black\"]": buttonColorHoverMixin colors.black
           , "&[data-color=\"black-1\"]": buttonColorHoverMixin colors.black1
@@ -295,5 +301,6 @@ styles = jss
       , "&:active": { backgroundColor: cssStringHSLA $ darken 0.15 value }
       , "&:disabled, &[data-loading=\"true\"]":
           { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value
+          -- @TODO get lumi-loader to reflect hover color background
           }
       }
diff --git a/src/Lumi/Components/Loader.purs b/src/Lumi/Components/Loader.purs
index a526aff2..727dcbd3 100644
--- a/src/Lumi/Components/Loader.purs
+++ b/src/Lumi/Components/Loader.purs
@@ -5,7 +5,7 @@ import Prelude
 import Color (cssStringHSLA)
 import Data.Nullable (Nullable)
 import JSS (JSS, jss)
-import Lumi.Components.Color (ColorName(..), colors)
+import Lumi.Components.Color (ColorName, colors)
 import React.Basic (Component, JSX, createComponent, element, makeStateless)
 import React.Basic.DOM (CSS, unsafeCreateDOMComponent)
 

From adf581a8f0de09d88bd2399e7d191389837d20ee Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Tue, 25 Jun 2019 16:41:06 +0200
Subject: [PATCH 06/17] notes

---
 src/Lumi/Components/Button.purs | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/Lumi/Components/Button.purs b/src/Lumi/Components/Button.purs
index 42ab9141..844e5a92 100644
--- a/src/Lumi/Components/Button.purs
+++ b/src/Lumi/Components/Button.purs
@@ -234,11 +234,8 @@ styles = jss
                   }
               }
 
+          -- @TODO confirm we don't need anything here
           , "&[data-loading=\"true\"]": {}
-              -- @TODO why isn't this working?
-              -- { "lumi-loader::after":
-              --     { background: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value }
-              -- }
 
           , "&[data-color=\"black\"]": buttonColorHoverMixin colors.black
           , "&[data-color=\"black-1\"]": buttonColorHoverMixin colors.black1
@@ -302,5 +299,6 @@ styles = jss
       , "&:disabled, &[data-loading=\"true\"]":
           { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value
           -- @TODO get lumi-loader to reflect hover color background
+          , "lumi-loader::after": {}
           }
       }

From ba8f9de8816643c802e90a8ba14e2ab217a7ea63 Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Wed, 26 Jun 2019 12:22:46 +0200
Subject: [PATCH 07/17] example

---
 docs/Examples/Button.example.purs | 4 ++++
 src/Lumi/Components/Button.purs   | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/Examples/Button.example.purs b/docs/Examples/Button.example.purs
index f011d396..bf151a08 100644
--- a/docs/Examples/Button.example.purs
+++ b/docs/Examples/Button.example.purs
@@ -114,6 +114,10 @@ docs =
         , example
             $ button primary { loading = true, size = ExtraLarge }
         ]
+      , [ h4_ "Secondary + Loading"
+        , example
+            $ button secondary { loading = true }
+        ]
       ]
 
 sections :: Array (Array JSX) -> Array JSX
diff --git a/src/Lumi/Components/Button.purs b/src/Lumi/Components/Button.purs
index 844e5a92..51539a58 100644
--- a/src/Lumi/Components/Button.purs
+++ b/src/Lumi/Components/Button.purs
@@ -61,7 +61,7 @@ button = makeStateless component render
         else
           lumiButtonElement
             { "aria-label": props.accessibilityLabel
-            , children: children
+            , children: if props.loading then mempty else children
             , className: "lumi"
             , "data-color": props.color
             , "data-size": show props.size

From 842fd5df167d2dbc85c041aef9136713dfa25f97 Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Fri, 5 Jul 2019 11:42:25 -0700
Subject: [PATCH 08/17] button + loader

---
 bower.json                      |  1 +
 src/Lumi/Components/Button.purs | 24 +++++++++++++-----------
 src/Lumi/Components/Color.purs  |  4 +++-
 src/Lumi/Components/Loader.purs | 12 ++++++++----
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/bower.json b/bower.json
index bc1ddf69..effef342 100644
--- a/bower.json
+++ b/bower.json
@@ -18,6 +18,7 @@
     "purescript-coroutines": "^5.0.0",
     "purescript-fixed-precision": "^4.0.0",
     "purescript-foldable-traversable": "^4.0.0",
+    "purescript-foreign-generic": "^10.0.0",
     "purescript-foreign-object": ">= 1.0.0 < 3.0.0",
     "purescript-generics-rep": "^6.0.0",
     "purescript-foreign": "^5.0.0",
diff --git a/src/Lumi/Components/Button.purs b/src/Lumi/Components/Button.purs
index 51539a58..1a6d906e 100644
--- a/src/Lumi/Components/Button.purs
+++ b/src/Lumi/Components/Button.purs
@@ -5,15 +5,15 @@ import Prelude
 import Color (cssStringHSLA, darken, desaturate, lighten)
 import Data.Array as Array
 import Data.Char (fromCharCode)
-import Data.Foldable (fold)
+import Data.Foldable (fold, foldMap)
 import Data.Maybe (Maybe(..))
-import Data.Nullable (Nullable, toNullable)
+import Data.Nullable (Nullable, notNull, toMaybe, toNullable)
 import Data.String (null)
 import Data.String.CodeUnits (fromCharArray)
 import Effect.Uncurried (mkEffectFn1)
 import Foreign (isNull, isUndefined, unsafeToForeign)
 import JSS (JSS, jss)
-import Lumi.Components.Color (ColorName, colorNames, colors)
+import Lumi.Components.Color (ColorName(..), colorNames, colors)
 import Lumi.Components.Icon (IconType, icon)
 import Lumi.Components.Loader (loader, spinnerMixin)
 import Lumi.Components.Size (Size(..))
@@ -61,7 +61,7 @@ button = makeStateless component render
         else
           lumiButtonElement
             { "aria-label": props.accessibilityLabel
-            , children: if props.loading then mempty else children
+            , children: children
             , className: "lumi"
             , "data-color": props.color
             , "data-size": show props.size
@@ -89,8 +89,15 @@ button = makeStateless component render
                         ExtraLarge -> R.css { width: "34px", height: "34px" }
                   , testId: toNullable Nothing
                   , color: colorNames.white
-                  -- @TODO get this to work with the lighten/darken HSLA rules
-                  , bgColor: colorNames.black
+                      -- @TODO case of primary vs. secondary button
+                      -- case toMaybe props.color of
+                      --   Nothing -> colorNames.white
+                      --   ColorName "primary" -> colorNames.white
+                      --   ColorName "secondary" -> colorsNames.black
+                  , bgColor:
+                      case toMaybe props.color of
+                        Nothing -> colorNames.white
+                        Just c -> c
                   }
 
 
@@ -234,9 +241,6 @@ styles = jss
                   }
               }
 
-          -- @TODO confirm we don't need anything here
-          , "&[data-loading=\"true\"]": {}
-
           , "&[data-color=\"black\"]": buttonColorHoverMixin colors.black
           , "&[data-color=\"black-1\"]": buttonColorHoverMixin colors.black1
           , "&[data-color=\"black-2\"]": buttonColorHoverMixin colors.black2
@@ -298,7 +302,5 @@ styles = jss
       , "&:active": { backgroundColor: cssStringHSLA $ darken 0.15 value }
       , "&:disabled, &[data-loading=\"true\"]":
           { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value
-          -- @TODO get lumi-loader to reflect hover color background
-          , "lumi-loader::after": {}
           }
       }
diff --git a/src/Lumi/Components/Color.purs b/src/Lumi/Components/Color.purs
index fd120666..4cc0bd00 100644
--- a/src/Lumi/Components/Color.purs
+++ b/src/Lumi/Components/Color.purs
@@ -9,12 +9,15 @@ module Lumi.Components.Color
 import Color (rgb, rgba)
 import Color as C
 import Data.Newtype (class Newtype)
+import Foreign.Generic (class Decode, class Encode, Options, SumEncoding(..), genericDecode, genericEncode, decode, encode, defaultOptions)
 
 type Color = C.Color
 
 newtype ColorName = ColorName String
 
 derive instance newtypeColorName :: Newtype ColorName _
+derive newtype instance decodeColorName :: Decode ColorName
+derive newtype instance encodeColorName :: Encode ColorName
 
 type ColorMap a =
   { black :: a
@@ -89,4 +92,3 @@ colorNames =
   , white: ColorName "white"
   , transparent: ColorName "transparent"
   }
-
diff --git a/src/Lumi/Components/Loader.purs b/src/Lumi/Components/Loader.purs
index 727dcbd3..00af04f8 100644
--- a/src/Lumi/Components/Loader.purs
+++ b/src/Lumi/Components/Loader.purs
@@ -2,7 +2,7 @@ module Lumi.Components.Loader where
 
 import Prelude
 
-import Color (cssStringHSLA)
+import Color (cssStringHSLA, darken, desaturate, lighten)
 import Data.Nullable (Nullable)
 import JSS (JSS, jss)
 import Lumi.Components.Color (ColorName, colors)
@@ -46,9 +46,8 @@ styles = jss
               , color: cssStringHSLA colors.black
               }
           -- @TODO add the rest of our possible colors
-          , "&[data-bg-color=\"primary\"]::after":
-              { background: cssStringHSLA colors.primary
-              }
+          , "&[data-bg-color=\"primary\"]::after": buttonColorHoverMixin colors.primary
+          , "&[data-bg-color=\"secondary\"]::after": buttonColorHoverMixin colors.secondary
           , "&[data-bg-color=\"white\"]::after":
               { background: cssStringHSLA colors.white
               }
@@ -62,6 +61,11 @@ styles = jss
           }
       }
   }
+  where
+    -- @TODO should not be a duplicate, can I import from Lumi.Components.Button?
+    buttonColorHoverMixin value =
+      { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value
+      }
 
 spinnerMixin :: { radius :: String, borderWidth :: String, color :: String } -> JSS
 spinnerMixin { radius, borderWidth, color } = jss

From 4000e2ea8c44ea58547be6ff21c0fba6c419bdfb Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Mon, 8 Jul 2019 11:55:20 -0700
Subject: [PATCH 09/17] WIP select loader

---
 docs/Examples/Select.example.purs |  8 +++----
 src/Lumi/Components/Loader.purs   | 36 ++++++++++++++++---------------
 src/Lumi/Components/Select.purs   | 10 +++++++--
 3 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/docs/Examples/Select.example.purs b/docs/Examples/Select.example.purs
index 4d05c3c4..ccf48f88 100644
--- a/docs/Examples/Select.example.purs
+++ b/docs/Examples/Select.example.purs
@@ -99,7 +99,7 @@ docs = unit # make component { initialState, render }
                       , noResultsText: "No results"
                       , placeholder: "Select a value..."
                       , disabled
-                      , loading: false
+                      , loading: true --false
                       , optionRenderer: R.text <<< _.label
                       , toSelectOption: identity
                       }
@@ -124,7 +124,7 @@ docs = unit # make component { initialState, render }
                       , noResultsText: "No results"
                       , placeholder: "Select a value..."
                       , disabled
-                      , loading: false
+                      , loading: true --false
                       , optionRenderer: R.text <<< _.label
                       , toSelectOption: identity
                       }
@@ -154,7 +154,7 @@ docs = unit # make component { initialState, render }
                       , noResultsText: "No results"
                       , placeholder: "Select a value..."
                       , disabled
-                      , loading: false
+                      , loading: true --false
                       , optionRenderer: R.text <<< _.label
                       , toSelectOption: identity
                       }
@@ -184,7 +184,7 @@ docs = unit # make component { initialState, render }
                       , noResultsText: "No results"
                       , placeholder: "Select a value..."
                       , disabled
-                      , loading: false
+                      , loading: true --false
                       , optionRenderer: R.text <<< _.label
                       , toSelectOption: identity
                       }
diff --git a/src/Lumi/Components/Loader.purs b/src/Lumi/Components/Loader.purs
index 00af04f8..b9a9bf6c 100644
--- a/src/Lumi/Components/Loader.purs
+++ b/src/Lumi/Components/Loader.purs
@@ -2,7 +2,7 @@ module Lumi.Components.Loader where
 
 import Prelude
 
-import Color (cssStringHSLA, darken, desaturate, lighten)
+import Color (cssStringHSLA, desaturate, lighten)
 import Data.Nullable (Nullable)
 import JSS (JSS, jss)
 import Lumi.Components.Color (ColorName, colors)
@@ -35,25 +35,17 @@ styles = jss
   { "@global":
       { "lumi-loader":
           -- @TODO add the rest of our possible colors
-          { "&[data-color=\"white\"]": spinnerMixin
-              { radius: "3.8rem"
-              , borderWidth: "0.5rem"
-              , color: cssStringHSLA colors.white
-              }
-          , "&[data-color=\"black\"]": spinnerMixin
-              { radius: "3.8rem"
-              , borderWidth: "0.5rem"
-              , color: cssStringHSLA colors.black
-              }
+          { "&[data-color=\"white\"]": loaderColorMixin colors.white
+          , "&[data-color=\"black\"]": loaderColorMixin colors.black
+          , "&[data-color=\"black1\"]": loaderColorMixin colors.black1
+          , "&[data-color=\"black2\"]": loaderColorMixin colors.black2
           -- @TODO add the rest of our possible colors
           , "&[data-bg-color=\"primary\"]::after": buttonColorHoverMixin colors.primary
           , "&[data-bg-color=\"secondary\"]::after": buttonColorHoverMixin colors.secondary
-          , "&[data-bg-color=\"white\"]::after":
-              { background: cssStringHSLA colors.white
-              }
-          , "&[data-bg-color=\"black\"]::after":
-              { background: cssStringHSLA colors.black
-              }
+          , "&[data-bg-color=\"white\"]::after": loaderBgColorMixin colors.white
+          , "&[data-bg-color=\"black\"]::after": loaderBgColorMixin colors.black
+          , "&[data-bg-color=\"black1\"]::after": loaderBgColorMixin colors.black1
+          , "&[data-bg-color=\"black2\"]::after": loaderBgColorMixin colors.black2
           }
       , "@keyframes spin":
           { from: { transform: "rotate(0deg)" }
@@ -67,6 +59,16 @@ styles = jss
       { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value
       }
 
+    loaderColorMixin value = spinnerMixin
+      { radius: "3.8rem"
+      , borderWidth: "0.5rem"
+      , color: cssStringHSLA value
+      }
+
+    loaderBgColorMixin value =
+      { background: cssStringHSLA value
+      }
+
 spinnerMixin :: { radius :: String, borderWidth :: String, color :: String } -> JSS
 spinnerMixin { radius, borderWidth, color } = jss
   { width: radius
diff --git a/src/Lumi/Components/Select.purs b/src/Lumi/Components/Select.purs
index fe918b6a..e85aa37c 100644
--- a/src/Lumi/Components/Select.purs
+++ b/src/Lumi/Components/Select.purs
@@ -26,7 +26,7 @@ import Data.String as String
 import Effect (Effect)
 import Effect.Aff (Aff)
 import JSS (JSS, jss)
-import Lumi.Components.Color (colors)
+import Lumi.Components.Color (colorNames, colors)
 import Lumi.Components.Icon as Icon
 import Lumi.Components.Input (lumiInputDisabledStyles, lumiInputFocusStyles, lumiInputHoverStyles, lumiInputStyles)
 import Lumi.Components.Loader (loader)
@@ -253,7 +253,13 @@ select = makeStateless component render
       where
         renderSelectedValues =
           if props.loading
-            then mempty --loader { style: css { width: "20px", height: "20px", borderWidth: "2px" }, testId: toNullable Nothing }
+            then
+              loader
+                { style: css { width: "20px", height: "20px", borderWidth: "2px" }
+                , testId: toNullable Nothing
+                , color: colorNames.black2
+                , bgColor: colorNames.white
+                }
             else lumiSelectInputSelectedValuesElement
               { children:
                   let renderedSelectedValues =

From 131e341008e6f4f9932a88b61575499fc33daa5f Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Mon, 8 Jul 2019 12:02:29 -0700
Subject: [PATCH 10/17] Button loading prop

---
 docs/Examples/Button.example.purs |  2 +-
 src/Lumi/Components/Button.purs   | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/Examples/Button.example.purs b/docs/Examples/Button.example.purs
index cb1a7fa2..09a4fd8e 100644
--- a/docs/Examples/Button.example.purs
+++ b/docs/Examples/Button.example.purs
@@ -116,7 +116,7 @@ docs =
         ]
       , [ h4_ "Secondary + Loading"
         , example
-            $ button secondary { loading = true }
+            $ button secondary { buttonState = Loading }
         ]
       ]
 
diff --git a/src/Lumi/Components/Button.purs b/src/Lumi/Components/Button.purs
index 22e2e15d..e48c6bbe 100644
--- a/src/Lumi/Components/Button.purs
+++ b/src/Lumi/Components/Button.purs
@@ -5,17 +5,17 @@ import Prelude
 import Color (cssStringHSLA, darken, desaturate, lighten)
 import Data.Array as Array
 import Data.Char (fromCharCode)
-import Data.Foldable (fold, foldMap)
+import Data.Foldable (fold)
 import Data.Maybe (Maybe(..))
-import Data.Nullable (Nullable, notNull, toMaybe, toNullable)
+import Data.Nullable (Nullable, toMaybe, toNullable)
 import Data.String (null)
 import Data.String.CodeUnits (fromCharArray)
 import Effect.Uncurried (mkEffectFn1)
 import Foreign (isNull, isUndefined, unsafeToForeign)
 import JSS (JSS, jss)
-import Lumi.Components.Color (ColorName(..), colorNames, colors)
+import Lumi.Components.Color (ColorName, colorNames, colors)
 import Lumi.Components.Icon (IconType, icon)
-import Lumi.Components.Loader (loader, spinnerMixin)
+import Lumi.Components.Loader (loader)
 import Lumi.Components.Size (Size(..))
 import React.Basic (Component, JSX, createComponent, element, makeStateless)
 import React.Basic.DOM (CSS, css, unsafeCreateDOMComponent)
@@ -83,12 +83,8 @@ button = makeStateless component render
             }
       where
         children =
-          if not props.loading
-            then
-              if not null props.title && not (isNull || isUndefined) (unsafeToForeign props.title)
-                then R.text props.title
-                else R.text invisibleSpace -- preserves button size
-            else
+          case props.buttonState of
+            Loading ->
               loader
                   { style:
                       case props.size of
@@ -108,6 +104,10 @@ button = makeStateless component render
                         Nothing -> colorNames.white
                         Just c -> c
                   }
+            _ ->
+              if not null props.title && not (isNull || isUndefined) (unsafeToForeign props.title)
+                then R.text props.title
+                else R.text invisibleSpace -- preserves button size
 
 
 defaults :: ButtonProps

From 39f9d44734be16fa1a8b9c3e5571d3341c720b51 Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Mon, 8 Jul 2019 13:11:17 -0700
Subject: [PATCH 11/17] Loader colors

---
 docs/Examples/Loader.example.purs | 100 +++++++++++++++++++++++++++++-
 src/Lumi/Components/Loader.purs   |  40 ++++++++++--
 2 files changed, 133 insertions(+), 7 deletions(-)

diff --git a/docs/Examples/Loader.example.purs b/docs/Examples/Loader.example.purs
index f2ee57e1..1bb328bc 100644
--- a/docs/Examples/Loader.example.purs
+++ b/docs/Examples/Loader.example.purs
@@ -2,7 +2,7 @@ module Lumi.Components.Examples.Loader where
 
 import Prelude
 
-import Color (cssStringHSLA)
+import Color (cssStringHSLA, desaturate, lighten)
 import Data.Nullable (null)
 import Lumi.Components.Color (Color(..), colorNames, colors)
 import Lumi.Components.Column (column, column_)
@@ -24,7 +24,7 @@ docs =
                 , bgColor: colorNames.primary
                 }
             ]
-          , style: R.css { backgroundColor: cssStringHSLA colors.primary }
+          , style: R.css { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ colors.primary }
         }
     , example $
         column {
@@ -38,4 +38,100 @@ docs =
             ]
           , style: R.css { backgroundColor: cssStringHSLA colors.white }
         }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black1
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black2
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black3
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black4
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black5
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black6
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black7
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black8
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
     ]
diff --git a/src/Lumi/Components/Loader.purs b/src/Lumi/Components/Loader.purs
index b9a9bf6c..f8388a6f 100644
--- a/src/Lumi/Components/Loader.purs
+++ b/src/Lumi/Components/Loader.purs
@@ -35,17 +35,47 @@ styles = jss
   { "@global":
       { "lumi-loader":
           -- @TODO add the rest of our possible colors
-          { "&[data-color=\"white\"]": loaderColorMixin colors.white
+          { "&[data-color=\"primary\"]": loaderColorMixin colors.primary
+          , "&[data-color=\"primary-1\"]": loaderColorMixin colors.primary1
+          , "&[data-color=\"primary-2\"]": loaderColorMixin colors.primary2
+          , "&[data-color=\"primary-3\"]": loaderColorMixin colors.primary3
+          , "&[data-color=\"primary-4\"]": loaderColorMixin colors.primary4
+          , "&[data-color=\"secondary\"]": loaderColorMixin colors.secondary
+          , "&[data-color=\"white\"]": loaderColorMixin colors.white
           , "&[data-color=\"black\"]": loaderColorMixin colors.black
-          , "&[data-color=\"black1\"]": loaderColorMixin colors.black1
-          , "&[data-color=\"black2\"]": loaderColorMixin colors.black2
+          , "&[data-color=\"black-1\"]": loaderColorMixin colors.black1
+          , "&[data-color=\"black-2\"]": loaderColorMixin colors.black2
+          , "&[data-color=\"black-3\"]": loaderColorMixin colors.black3
+          , "&[data-color=\"black-4\"]": loaderColorMixin colors.black4
+          , "&[data-color=\"black-5\"]": loaderColorMixin colors.black5
+          , "&[data-color=\"black-6\"]": loaderColorMixin colors.black6
+          , "&[data-color=\"black-7\"]": loaderColorMixin colors.black7
+          , "&[data-color=\"black-8\"]": loaderColorMixin colors.black8
+          , "&[data-color=\"accent-1\"]": loaderColorMixin colors.accent1
+          , "&[data-color=\"accent-2\"]": loaderColorMixin colors.accent2
+          , "&[data-color=\"accent-3\"]": loaderColorMixin colors.accent3
+          , "&[data-color=\"accent-33\"]": loaderColorMixin colors.accent33
           -- @TODO add the rest of our possible colors
           , "&[data-bg-color=\"primary\"]::after": buttonColorHoverMixin colors.primary
+          , "&[data-bg-color=\"primary-1\"]::after": buttonColorHoverMixin colors.primary1
+          , "&[data-bg-color=\"primary-2\"]::after": buttonColorHoverMixin colors.primary2
+          , "&[data-bg-color=\"primary-3\"]::after": buttonColorHoverMixin colors.primary3
+          , "&[data-bg-color=\"primary-4\"]::after": buttonColorHoverMixin colors.primary4
           , "&[data-bg-color=\"secondary\"]::after": buttonColorHoverMixin colors.secondary
           , "&[data-bg-color=\"white\"]::after": loaderBgColorMixin colors.white
           , "&[data-bg-color=\"black\"]::after": loaderBgColorMixin colors.black
-          , "&[data-bg-color=\"black1\"]::after": loaderBgColorMixin colors.black1
-          , "&[data-bg-color=\"black2\"]::after": loaderBgColorMixin colors.black2
+          , "&[data-bg-color=\"black-1\"]::after": loaderBgColorMixin colors.black1
+          , "&[data-bg-color=\"black-2\"]::after": loaderBgColorMixin colors.black2
+          , "&[data-bg-color=\"black-3\"]::after": loaderBgColorMixin colors.black3
+          , "&[data-bg-color=\"black-4\"]::after": loaderBgColorMixin colors.black4
+          , "&[data-bg-color=\"black-5\"]::after": loaderBgColorMixin colors.black5
+          , "&[data-bg-color=\"black-6\"]::after": loaderBgColorMixin colors.black6
+          , "&[data-bg-color=\"black-7\"]::after": loaderBgColorMixin colors.black7
+          , "&[data-bg-color=\"black-8\"]::after": loaderBgColorMixin colors.black8
+          , "&[data-bg-color=\"accent-1\"]::after": loaderBgColorMixin colors.accent1
+          , "&[data-bg-color=\"accent-2\"]::after": loaderBgColorMixin colors.accent2
+          , "&[data-bg-color=\"accent-3\"]::after": loaderBgColorMixin colors.accent3
+          , "&[data-bg-color=\"accent-33\"]::after": loaderBgColorMixin colors.accent33
           }
       , "@keyframes spin":
           { from: { transform: "rotate(0deg)" }

From 987391828f85460ded6acf20a960c0e40589c04f Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Mon, 8 Jul 2019 13:15:06 -0700
Subject: [PATCH 12/17] Loader dependent components

---
 src/Lumi/Components/Form.purs   | 14 ++++++++------
 src/Lumi/Components/Loader.purs |  6 +++---
 src/Lumi/Components/Select.purs |  7 ++++++-
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/Lumi/Components/Form.purs b/src/Lumi/Components/Form.purs
index 39e58a5a..c05ed39a 100644
--- a/src/Lumi/Components/Form.purs
+++ b/src/Lumi/Components/Form.purs
@@ -62,7 +62,7 @@ import Effect (Effect)
 import Effect.Aff (Aff)
 import Effect.Class (liftEffect)
 import JSS (JSS, jss)
-import Lumi.Components.Color (colors)
+import Lumi.Components.Color (colorNames, colors)
 import Lumi.Components.Column (column)
 import Lumi.Components.FetchCache as FetchCache
 import Lumi.Components.Form.Defaults (formDefaults) as Defaults
@@ -448,11 +448,13 @@ asyncSelectByKey getData loadOptions fromId toId toSelectOption optionRenderer =
               Nothing -> empty
               Just _  -> alignToInput
                 case data_ of
-                  Nothing     -> mempty
-                  -- loader
-                  --   { style: css { width: "20px", height: "20px", borderWidth: "2px" }
-                  --   , testId: toNullable Nothing
-                  --   }
+                  Nothing     ->
+                    loader
+                      { style: R.css { width: "20px", height: "20px", borderWidth: "2px" }
+                      , testId: toNullable Nothing
+                      , color: colorNames.black2
+                      , bgColor: colorNames.white
+                      }
                   Just data_' -> text body
                         { children = [ optionRenderer data_' ]
                         }
diff --git a/src/Lumi/Components/Loader.purs b/src/Lumi/Components/Loader.purs
index f8388a6f..2150812b 100644
--- a/src/Lumi/Components/Loader.purs
+++ b/src/Lumi/Components/Loader.purs
@@ -34,7 +34,7 @@ styles :: JSS
 styles = jss
   { "@global":
       { "lumi-loader":
-          -- @TODO add the rest of our possible colors
+          -- fading loader color
           { "&[data-color=\"primary\"]": loaderColorMixin colors.primary
           , "&[data-color=\"primary-1\"]": loaderColorMixin colors.primary1
           , "&[data-color=\"primary-2\"]": loaderColorMixin colors.primary2
@@ -55,7 +55,7 @@ styles = jss
           , "&[data-color=\"accent-2\"]": loaderColorMixin colors.accent2
           , "&[data-color=\"accent-3\"]": loaderColorMixin colors.accent3
           , "&[data-color=\"accent-33\"]": loaderColorMixin colors.accent33
-          -- @TODO add the rest of our possible colors
+          -- bg color (needed for fading loader center)
           , "&[data-bg-color=\"primary\"]::after": buttonColorHoverMixin colors.primary
           , "&[data-bg-color=\"primary-1\"]::after": buttonColorHoverMixin colors.primary1
           , "&[data-bg-color=\"primary-2\"]::after": buttonColorHoverMixin colors.primary2
@@ -84,7 +84,7 @@ styles = jss
       }
   }
   where
-    -- @TODO should not be a duplicate, can I import from Lumi.Components.Button?
+    -- @TODO should not be a duplicate from Lumi.Components.Button
     buttonColorHoverMixin value =
       { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value
       }
diff --git a/src/Lumi/Components/Select.purs b/src/Lumi/Components/Select.purs
index e85aa37c..ca9c8b27 100644
--- a/src/Lumi/Components/Select.purs
+++ b/src/Lumi/Components/Select.purs
@@ -323,7 +323,12 @@ select = makeStateless component render
                         [ lumiSelectMenuLoaderElement
                             { key: "loading-text"
                             , children:
-                                mempty --loader { style: css { width: "20px", height: "20px", borderWidth: "2px" }, testId: toNullable Nothing }
+                                loader
+                                  { style: css { width: "20px", height: "20px", borderWidth: "2px" }
+                                  , testId: toNullable Nothing
+                                  , color: colorNames.black2
+                                  , bgColor: colorNames.white
+                                  }
                             }
                         ]
                       Failed error ->

From fec246fda08d6a39349aeef81689dc75b568be94 Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Mon, 8 Jul 2019 13:16:27 -0700
Subject: [PATCH 13/17] clean up debugging

---
 docs/Examples/Select.example.purs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/Examples/Select.example.purs b/docs/Examples/Select.example.purs
index ccf48f88..4d05c3c4 100644
--- a/docs/Examples/Select.example.purs
+++ b/docs/Examples/Select.example.purs
@@ -99,7 +99,7 @@ docs = unit # make component { initialState, render }
                       , noResultsText: "No results"
                       , placeholder: "Select a value..."
                       , disabled
-                      , loading: true --false
+                      , loading: false
                       , optionRenderer: R.text <<< _.label
                       , toSelectOption: identity
                       }
@@ -124,7 +124,7 @@ docs = unit # make component { initialState, render }
                       , noResultsText: "No results"
                       , placeholder: "Select a value..."
                       , disabled
-                      , loading: true --false
+                      , loading: false
                       , optionRenderer: R.text <<< _.label
                       , toSelectOption: identity
                       }
@@ -154,7 +154,7 @@ docs = unit # make component { initialState, render }
                       , noResultsText: "No results"
                       , placeholder: "Select a value..."
                       , disabled
-                      , loading: true --false
+                      , loading: false
                       , optionRenderer: R.text <<< _.label
                       , toSelectOption: identity
                       }
@@ -184,7 +184,7 @@ docs = unit # make component { initialState, render }
                       , noResultsText: "No results"
                       , placeholder: "Select a value..."
                       , disabled
-                      , loading: true --false
+                      , loading: false
                       , optionRenderer: R.text <<< _.label
                       , toSelectOption: identity
                       }

From aeeff2e1155440faa3a17a39adc05713377dbc59 Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Mon, 15 Jul 2019 12:08:39 -0700
Subject: [PATCH 14/17] loader + button

---
 docs/Examples/Loader.example.purs |  2 +-
 src/Lumi/Components/Button.purs   |  3 +++
 src/Lumi/Components/Loader.purs   | 17 ++++++-----------
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/docs/Examples/Loader.example.purs b/docs/Examples/Loader.example.purs
index 1bb328bc..d4592a51 100644
--- a/docs/Examples/Loader.example.purs
+++ b/docs/Examples/Loader.example.purs
@@ -24,7 +24,7 @@ docs =
                 , bgColor: colorNames.primary
                 }
             ]
-          , style: R.css { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ colors.primary }
+          , style: R.css { backgroundColor: cssStringHSLA $ colors.primary }
         }
     , example $
         column {
diff --git a/src/Lumi/Components/Button.purs b/src/Lumi/Components/Button.purs
index e48c6bbe..2f4fa1ce 100644
--- a/src/Lumi/Components/Button.purs
+++ b/src/Lumi/Components/Button.purs
@@ -317,5 +317,8 @@ styles = jss
       , "&:active": { backgroundColor: cssStringHSLA $ darken 0.15 value }
       , "&:disabled, &[data-loading=\"true\"]":
           { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value
+          , "& lumi-loader":
+              { "&::after": { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value }
+              }
           }
       }
diff --git a/src/Lumi/Components/Loader.purs b/src/Lumi/Components/Loader.purs
index 2150812b..0da1108b 100644
--- a/src/Lumi/Components/Loader.purs
+++ b/src/Lumi/Components/Loader.purs
@@ -56,12 +56,12 @@ styles = jss
           , "&[data-color=\"accent-3\"]": loaderColorMixin colors.accent3
           , "&[data-color=\"accent-33\"]": loaderColorMixin colors.accent33
           -- bg color (needed for fading loader center)
-          , "&[data-bg-color=\"primary\"]::after": buttonColorHoverMixin colors.primary
-          , "&[data-bg-color=\"primary-1\"]::after": buttonColorHoverMixin colors.primary1
-          , "&[data-bg-color=\"primary-2\"]::after": buttonColorHoverMixin colors.primary2
-          , "&[data-bg-color=\"primary-3\"]::after": buttonColorHoverMixin colors.primary3
-          , "&[data-bg-color=\"primary-4\"]::after": buttonColorHoverMixin colors.primary4
-          , "&[data-bg-color=\"secondary\"]::after": buttonColorHoverMixin colors.secondary
+          , "&[data-bg-color=\"primary\"]::after": loaderBgColorMixin colors.primary
+          , "&[data-bg-color=\"primary-1\"]::after": loaderBgColorMixin colors.primary1
+          , "&[data-bg-color=\"primary-2\"]::after": loaderBgColorMixin colors.primary2
+          , "&[data-bg-color=\"primary-3\"]::after": loaderBgColorMixin colors.primary3
+          , "&[data-bg-color=\"primary-4\"]::after": loaderBgColorMixin colors.primary4
+          , "&[data-bg-color=\"secondary\"]::after": loaderBgColorMixin colors.secondary
           , "&[data-bg-color=\"white\"]::after": loaderBgColorMixin colors.white
           , "&[data-bg-color=\"black\"]::after": loaderBgColorMixin colors.black
           , "&[data-bg-color=\"black-1\"]::after": loaderBgColorMixin colors.black1
@@ -84,11 +84,6 @@ styles = jss
       }
   }
   where
-    -- @TODO should not be a duplicate from Lumi.Components.Button
-    buttonColorHoverMixin value =
-      { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value
-      }
-
     loaderColorMixin value = spinnerMixin
       { radius: "3.8rem"
       , borderWidth: "0.5rem"

From 4b6a5682b1df64db8db8f8ab47c6711b966facd4 Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Mon, 15 Jul 2019 15:43:39 -0700
Subject: [PATCH 15/17] secondary button loader

---
 src/Lumi/Components/Button.purs | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Lumi/Components/Button.purs b/src/Lumi/Components/Button.purs
index 2f4fa1ce..4ea06599 100644
--- a/src/Lumi/Components/Button.purs
+++ b/src/Lumi/Components/Button.purs
@@ -98,7 +98,7 @@ button = makeStateless component render
                       -- case toMaybe props.color of
                       --   Nothing -> colorNames.white
                       --   ColorName "primary" -> colorNames.white
-                      --   ColorName "secondary" -> colorsNames.black
+                      --   ColorName "secondary" -> colorsNames.secondary
                   , bgColor:
                       case toMaybe props.color of
                         Nothing -> colorNames.white
@@ -253,6 +253,9 @@ styles = jss
               , "&:disabled, &[data-loading=\"true\"]":
                   { color: cssStringHSLA colors.black2
                   , borderColor: cssStringHSLA colors.black3
+                  , "& lumi-loader":
+                      { "&::after": { background: cssStringHSLA colors.white }
+                      }
                   }
               }
 
@@ -318,7 +321,7 @@ styles = jss
       , "&:disabled, &[data-loading=\"true\"]":
           { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value
           , "& lumi-loader":
-              { "&::after": { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value }
+              { "&::after": { background: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value }
               }
           }
       }

From 42a74623bbcead6f81694ae777fc24df19e72801 Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Tue, 16 Jul 2019 13:31:13 -0700
Subject: [PATCH 16/17] WIP case on ColorName

---
 src/Lumi/Components/Button.purs | 13 +++++++------
 src/Lumi/Components/Color.purs  |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/Lumi/Components/Button.purs b/src/Lumi/Components/Button.purs
index 4ea06599..245c5027 100644
--- a/src/Lumi/Components/Button.purs
+++ b/src/Lumi/Components/Button.purs
@@ -13,7 +13,7 @@ import Data.String.CodeUnits (fromCharArray)
 import Effect.Uncurried (mkEffectFn1)
 import Foreign (isNull, isUndefined, unsafeToForeign)
 import JSS (JSS, jss)
-import Lumi.Components.Color (ColorName, colorNames, colors)
+import Lumi.Components.Color (ColorName(..), colorNames, colors)
 import Lumi.Components.Icon (IconType, icon)
 import Lumi.Components.Loader (loader)
 import Lumi.Components.Size (Size(..))
@@ -93,12 +93,13 @@ button = makeStateless component render
                         Large -> R.css { width: "24px", height: "24px" }
                         ExtraLarge -> R.css { width: "34px", height: "34px" }
                   , testId: toNullable Nothing
-                  , color: colorNames.white
+                  , color: -- colorNames.secondary
                       -- @TODO case of primary vs. secondary button
-                      -- case toMaybe props.color of
-                      --   Nothing -> colorNames.white
-                      --   ColorName "primary" -> colorNames.white
-                      --   ColorName "secondary" -> colorsNames.secondary
+                      case toMaybe props.color of
+                        -- Just $ ColorName "primary"  -> colorNames.white
+                        -- Just $ ColorName "secondary" -> colorNames.secondary
+                        Just _ -> colorNames.secondary
+                        Nothing -> colorNames.secondary
                   , bgColor:
                       case toMaybe props.color of
                         Nothing -> colorNames.white
diff --git a/src/Lumi/Components/Color.purs b/src/Lumi/Components/Color.purs
index 4cc0bd00..41b8cc23 100644
--- a/src/Lumi/Components/Color.purs
+++ b/src/Lumi/Components/Color.purs
@@ -9,7 +9,7 @@ module Lumi.Components.Color
 import Color (rgb, rgba)
 import Color as C
 import Data.Newtype (class Newtype)
-import Foreign.Generic (class Decode, class Encode, Options, SumEncoding(..), genericDecode, genericEncode, decode, encode, defaultOptions)
+import Foreign.Generic (class Decode, class Encode)
 
 type Color = C.Color
 

From 48960a713906a4a6d2bc9513939e20f7b85204d7 Mon Sep 17 00:00:00 2001
From: kimi spencer <kimispencer@gmail.com>
Date: Tue, 16 Jul 2019 14:45:58 -0700
Subject: [PATCH 17/17] ColorName

---
 src/Lumi/Components/Button.purs | 12 ++++++------
 src/Lumi/Components/Form.purs   |  2 +-
 src/Lumi/Components/Select.purs |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/Lumi/Components/Button.purs b/src/Lumi/Components/Button.purs
index 245c5027..e6656b0c 100644
--- a/src/Lumi/Components/Button.purs
+++ b/src/Lumi/Components/Button.purs
@@ -7,13 +7,14 @@ import Data.Array as Array
 import Data.Char (fromCharCode)
 import Data.Foldable (fold)
 import Data.Maybe (Maybe(..))
+import Data.Newtype (unwrap)
 import Data.Nullable (Nullable, toMaybe, toNullable)
 import Data.String (null)
 import Data.String.CodeUnits (fromCharArray)
 import Effect.Uncurried (mkEffectFn1)
 import Foreign (isNull, isUndefined, unsafeToForeign)
 import JSS (JSS, jss)
-import Lumi.Components.Color (ColorName(..), colorNames, colors)
+import Lumi.Components.Color (ColorName, colorNames, colors)
 import Lumi.Components.Icon (IconType, icon)
 import Lumi.Components.Loader (loader)
 import Lumi.Components.Size (Size(..))
@@ -93,11 +94,10 @@ button = makeStateless component render
                         Large -> R.css { width: "24px", height: "24px" }
                         ExtraLarge -> R.css { width: "34px", height: "34px" }
                   , testId: toNullable Nothing
-                  , color: -- colorNames.secondary
-                      -- @TODO case of primary vs. secondary button
-                      case toMaybe props.color of
-                        -- Just $ ColorName "primary"  -> colorNames.white
-                        -- Just $ ColorName "secondary" -> colorNames.secondary
+                  , color:
+                      case map unwrap $ toMaybe props.color of
+                        Just "primary" -> colorNames.white
+                        Just "secondary" -> colorNames.secondary
                         Just _ -> colorNames.secondary
                         Nothing -> colorNames.secondary
                   , bgColor:
diff --git a/src/Lumi/Components/Form.purs b/src/Lumi/Components/Form.purs
index c05ed39a..d7c1a54e 100644
--- a/src/Lumi/Components/Form.purs
+++ b/src/Lumi/Components/Form.purs
@@ -452,7 +452,7 @@ asyncSelectByKey getData loadOptions fromId toId toSelectOption optionRenderer =
                     loader
                       { style: R.css { width: "20px", height: "20px", borderWidth: "2px" }
                       , testId: toNullable Nothing
-                      , color: colorNames.black2
+                      , color: colorNames.secondary
                       , bgColor: colorNames.white
                       }
                   Just data_' -> text body
diff --git a/src/Lumi/Components/Select.purs b/src/Lumi/Components/Select.purs
index ca9c8b27..c3eb9c33 100644
--- a/src/Lumi/Components/Select.purs
+++ b/src/Lumi/Components/Select.purs
@@ -257,7 +257,7 @@ select = makeStateless component render
               loader
                 { style: css { width: "20px", height: "20px", borderWidth: "2px" }
                 , testId: toNullable Nothing
-                , color: colorNames.black2
+                , color: colorNames.secondary
                 , bgColor: colorNames.white
                 }
             else lumiSelectInputSelectedValuesElement
@@ -326,7 +326,7 @@ select = makeStateless component render
                                 loader
                                   { style: css { width: "20px", height: "20px", borderWidth: "2px" }
                                   , testId: toNullable Nothing
-                                  , color: colorNames.black2
+                                  , color: colorNames.secondary
                                   , bgColor: colorNames.white
                                   }
                             }