Fix secondary button loading state

Author: Madeline Trotter

docs/Examples2/Button.example.purs

@@ -158,27 +158,50 @@ docs =
               $ button
               $ submit Loading
               $$$ [ R.text "Save" ]
+          , example
+              $ button
+              $ secondary
+              $ submit Loading
+              $$$ [ R.text "Save" ]
           ]
         , [ h4_ "Loading (Small) "
           , example
               $ button
               $ resize Small
               $ submit Loading
               $$$ [ R.text "Save" ]
+          , example
+              $ button
+              $ secondary
+              $ resize Small
+              $ submit Loading
+              $$$ [ R.text "Save" ]
           ]
         , [ h4_ "Loading (Large) "
           , example
               $ button
               $ resize Large
               $ submit Loading
               $$$ [ R.text "Save" ]
+          , example
+              $ button
+              $ secondary
+              $ resize Large
+              $ submit Loading
+              $$$ [ R.text "Save" ]
           ]
         , [ h4_ "Loading (ExtraLarge) "
           , example
               $ button
               $ resize ExtraLarge
               $ submit Loading
               $$$ [ R.text "Save" ]
+          , example
+              $ button
+              $ secondary
+              $ resize ExtraLarge
+              $ submit Loading
+              $$$ [ R.text "Save" ]
           ]
         ]
   where

src/Lumi/Components/Color.purs

@@ -134,6 +134,6 @@ shade { hue, white, black } =
     hueDarkest = darken 0.15 hue
     hueDisabled = lighten 0.4137 $ desaturate 0.1972 hue
     grey1 = lighten 0.7 black
-    grey2 = lighten 0.82 black
+    grey2 = lighten 0.78 black
   in
     { hue, hueDarker, hueDarkest, hueDisabled, grey1, grey2, white, black }

src/Lumi/Components2/Button.purs

@@ -179,8 +179,7 @@ button = primary >>>
                                 $ merge
                                     [ css { position: absolute }
                                     , mkLoader
-                                        { color: colors.white
-                                        , highlightColor: colors.transparent
+                                        { color: var "--button-hue-loader"
                                         , radius: px 16
                                         , borderWidth: px 2
                                         }
@@ -211,6 +210,7 @@ primary =
             { color: varButtonWhite
             , borderColor: varButtonHue
             , backgroundColor: varButtonHue
+            , "--button-hue-loader": varButtonWhite
             , "&:hover":
                 nested
                   $ css
@@ -244,6 +244,7 @@ secondary =
             { color: varButtonBlack
             , borderColor: varButtonGrey1
             , backgroundColor: varButtonWhite
+            , "--button-hue-loader": varButtonGrey1
             , "&:hover":
                 nested
                   $ css
@@ -261,8 +262,8 @@ secondary =
             , "&:disabled":
                 nested
                   $ css
-                      { borderColor: varButtonGrey2
-                      , color: varButtonGrey1
+                      { color: varButtonGrey1
+                      , borderColor: varButtonGrey2
                       , backgroundColor: varButtonWhite
                       }
             }
@@ -282,7 +283,7 @@ resize size =
                         , padding: px2 6 16
                         , height: px 28
                         , "&[data-loading]":
-                            loadingStyles colors { radius: px 12, borderWidth: px 2 }
+                            loadingStyles { radius: px 12, borderWidth: px 2 }
                         }
                     Medium ->
                       mempty
@@ -292,35 +293,34 @@ resize size =
                         , padding: px2 12 24
                         , height: px 48
                         , "&[data-loading]":
-                            loadingStyles colors { radius: px 24, borderWidth: px 3 }
+                            loadingStyles { radius: px 24, borderWidth: px 3 }
                         }
                     ExtraLarge ->
                       css
                         { fontSize: px fontSizes.sectionHeader
                         , padding: px2 16 32
                         , height: px 64
                         , "&[data-loading]":
-                            loadingStyles colors { radius: px 34, borderWidth: px 4 }
+                            loadingStyles { radius: px 34, borderWidth: px 4 }
                         }
                     ExtraExtraLarge ->
                       css
                         { fontSize: px fontSizes.sectionHeader
                         , padding: px2 16 32
                         , height: px 64
                         , "&[data-loading]":
-                            loadingStyles colors { radius: px 34, borderWidth: px 4 }
+                            loadingStyles { radius: px 34, borderWidth: px 4 }
                         }
                 ]
       }
     where
-    loadingStyles colors { radius, borderWidth } =
+    loadingStyles { radius, borderWidth } =
       nested
         $ css
             { "&:after":
                 nested
                   $ mkLoader
-                      { color: colors.white
-                      , highlightColor: colors.transparent
+                      { color: var "--button-hue-loader"
                       , radius
                       , borderWidth
                       }

src/Lumi/Styles/Loader.purs

@@ -1,16 +1,14 @@
 module Lumi.Styles.Loader where
 
 
-import Lumi.Components.Color (Color)
 import Lumi.Styles (Style, StyleModifier, StyleProperty, borderBox, color, css, inlineBlock, keyframes, percent, px, solid, str, style)
 import Lumi.Styles.Theme (LumiTheme(..))
 
 loader :: StyleModifier
 loader =
   style \(LumiTheme { colors }) ->
     ( mkLoader
-        { color: colors.black1
-        , highlightColor: colors.black4
+        { color: color colors.black1
         , radius: px 38
         , borderWidth: px 5
         }
@@ -24,13 +22,12 @@ spin =
     }
 
 mkLoader ::
-  { color :: Color
-  , highlightColor :: Color
+  { color :: StyleProperty
   , radius :: StyleProperty
   , borderWidth :: StyleProperty
   } ->
   Style
-mkLoader { color: c, highlightColor, radius, borderWidth } =
+mkLoader { color: c, radius, borderWidth } =
   css
     { boxSizing: borderBox
     , content: str "\"\""
@@ -39,8 +36,8 @@ mkLoader { color: c, highlightColor, radius, borderWidth } =
     , width: radius
     , borderWidth: borderWidth
     , borderStyle: solid
-    , borderColor: color c
-    , borderTopColor: color highlightColor
+    , borderColor: c
+    , borderTopColor: str "transparent"
     , borderRadius: percent 50.0
     , animation: str "1s infinite linear"
     , animationName: spin