SemanticGroupedStyleProps.elm

   
 -- A Color Palette is a record that tracks 
 -- border, text and background color
 primary =
    Style.Color.palette
        { border = Color.blue
        , text = Color.red
        , background = Color.white
        }


roboto = 
    Style.Font.importGoogle
        { family = "Roboto"
        , size = 20
        , lineHeight = 1
        }
        

stylesheet =
    Style.stylesheet
        [ style Test
            [ Font.current
                |> Font.bold
                |> Font.size 20
                |> Font.lineHeight 1
            , Color.paletteFrom -- use the palette from above
                primary
            ]
        , style ExampleButton
            [ Font.named roboto
                |> Font.size 18
                |> Font.letterSpacing 20
                |> Font.light
                |> Font.align center
                |> Font.uppercase
            , Color.transparent -- Start with a transparent palette
                |> Color.text primary -- And replace the text color 
                                      -- with the text color 
                                      -- from the primary color palette
            , box
                |> width (px 100)
                |> height (px 100)
                |> padding (all 5)
            , border
                |> Border.width (all 5)
                |> Border.radius (all 5)
                |> Border.style solid

            ]
        ]