Grouping Style Properties by Category

[mdgriffith]

One way to make styles more navigable is to require that style properties are organized by category.

This provide a natural way to create a collection of style palettes focused around a specific group of properties.

Here's an example which has a Color.Palette, a Font, and a stylesheet showing how styles are actually constructed. Properties in a style are required to be grouped.

{-| Color palettes are both literal colors and in what capacity they're used.
This is much more useful than just capturing the colors by themselves.
-}
primay : Style.Color.Palette
primary =
    Style.Color.palette
        { border = Color.blue
        , text = Color.red
        , background = Color.white
        }

{-| We define a font we want to use in a similar way.
-}
roboto : Style.Font
roboto = 
    Style.Font.importGoogle
        { family = "Roboto"
        , size = 20  --always given as px
        , lineHeight = 1 
        }

--
stylesheet =
    Style.stylesheet
        [ class MyStyleClass
            [ Font.current
                |> Font.bold
                |> Font.size 20
                |> Font.lineHeight 1
            , Color.paletteFrom
                primary
            ]
        , class LargerStyle
            [ Font.named roboto
                |> Font.size 18
                |> Font.letterSpacing 20
                |> Font.light
                |> Font.align center
                |> Font.uppercase
            , Color.transparent -- Here we start with a transparent color 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.solid
            , shadows
                |> Shadow.text
                    { offset = ( 0, 0 )
                    , blur = 5
                    , color = shadows.grey
                    }
             ]
        ]

Note requiring grouping doesn't mean you can't have mixins that deal with multiple properties. Such as in the following:

myButtonMixin =
    [ Font.current
        |> Font.bold
    , Color.paletteFrom
        buttonPrimary
    ]

stylesheet =
    Style.stylesheet
        [ class MyButton
            [ Style.mixin myButton
            , Font.named roboto
                |> Font.size 18
            ]
        ]

The Actual Groupings

There may be some discussion on what the actual property groupings are. The guiding thought is that properties should be grouped together if they can negatively interfere with each other.

A good example is that borderColor is a part of the color group instead of the border group because keeping a coherent sense of how color is used is harder and more subtle than keeping track of borders. When setting border color, we really care what other colors are being used in that same style. When setting a border width, the literal border color doesn't actually guide our decision as to what the border width value should be.

Here are the current groupings:

• Font
  • size, weight, italic, bold, line-height, family, alignment, text-transform
• Color
  • background
  • text
  • border
• Box
  • width, height, padding
• Position
  • position, left, right, top, bottom, float
  • tranforms: translate, rotate, etc.
  • z-index
• Layout
  • display, flexbox, grid, table, spacing(sets margin on children)
• Border
  • width, radius, style
• Shadow
  • text, inset, box-shadow, drop-shadow
• Visibility
  • opacity, visibility, (display:none)
• Background
  • image, offset, repeat, etc. (not background color)
• Filter
  • All css filters

[mdgriffith]

So, after some discussion with Dremora, I believe the color category is going to be nixed.

Specifically because:

• It'd be hard to capture all colors in one model (shadow, border, highlight, bunch of others that are not common)
• A color palette is rarely rendered on a single element.
• It's reasonable that a font model would have control over the text color.

So the color model doesn't realistically bring us an advantage. Here's the example with no color model.

{-| We define a font we want to use in a similar way.
-}
roboto : Style.Font
roboto = 
    Style.Font.importGoogle
        { family = "Roboto"
        , size = 20  --always given as px
        , lineHeight = 1 
        }

--
stylesheet =
    Style.stylesheet
        [ class MyStyleClass
            [ Font.current
                |> Font.bold
                |> Font.size 20
                |> Font.lineHeight 1
                |> Font.color Color.red
            ]
        , class LargerStyle
            [ Font.named roboto
                |> Font.size 18
                |> Font.letterSpacing 20
                |> Font.light
                |> Font.align center
                |> Font.uppercase
                |> Font.color Color.blue
            , box
                |> width (px 100)
                |> height (px 100)
                |> padding (all 5)
            , border
                |> Border.width (all 5)
                |> Border.radius (all 5)
                |> Border.solid
                |> Border.color Color.darkBlue
            , shadows
                |> Shadow.text
                    { offset = ( 0, 0 )
                    , blur = 5
                    , color = shadows.grey
                    }
             ]
        ]

[mdgriffith]

This idea never landed. The only thing that was kept is that properties are organized into categorical modules.