ColorName

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:

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

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
                                   }
                             }