Overwriting Variables for lucamug/style-framework 1.1.0

Learn
1

Within the package there is a section for Overwriting Variables that is used ‘mainly for colors’.
The section then describes a customization file you can use to change the colors using a Dict, however it doesn’t explain how to connect that function to the framework.

Has anyone here successfully customized colors using this packages’ configuration Dict as explained in the docs? If so, what were your steps after the description within the docs? Do you happen to have a public repo I could reference? Was the configuration intended to be passed to the Framework.init function?

Any help would be greatly appreciated!

Regards!

2

Hi!

Customization is done with https://github.com/lucamug/style-framework/blob/1.1.0/examples/exampleCustomized/src/myStyle.elm

Other examples here: https://lucamug.github.io/style-framework/

1 Like
3

Thank you for the reply and for creating the package!

So I saw the examples but I’m trying to understand exactly where the configuration is being applied.
I started a project with the simple usage example and added the MyStyle.elm file but the primary color is not changing.I started it this way since (instead of the customization example) since I was having issues with passing the FrameworkFlags and other flags necessary for my project while using elm-typescript-interop.

Is the configuration being processed and passed in with the Framework.Flags into the Framework.init? If not, then where is it being read from? If so, is it required to use the flags and init or is there a way to use it within a simple example?

Also to add more clarity. My intention is to use this framework to build an SPA. It would be helpful if you explained or showed the steps to convert the SPA example to a customized color scheme using the configuration file, or if you could edit this ellie that was based on your simple-usage
https://ellie-app.com/9NNkb89vqnBa1

Thank you again for the reply!

4

I believe that is not possible to change colors in Ellie because you cannot load MyStyle.elm.

This was one of the first attempt to have a framework based on elm-ui. It was made at the time of Elm 0.18 and probably it does not have one of the best interfaces.

The idea was to mimic “modifiers” as they are used in Bulma or other frameworks but at the moment I don’t maintain this library so I don’t know if I can support you much.

Unfortunately I don’t think that there are analogue attempt to create a similar framework around elm-ui.

I went through several iteration of the concept and now I am using a simpler concept where I just build simple reusable function only for items that I need.

Using elm-ui is simple enough that create new styles is straightforward.

Just to give you a glimpse, this is the primary button:

primary : List (Attribute msg) -> Data msg -> Element msg
primary attrsExtra data =
    let
        attrs =
            if data.libu == UI.Libu.Bu Nothing then
                attrsPrimaryDisabled

            else
                attrsPrimary
    in
    UI.Libu.libu
        (attrs data.theme ++ attrsExtra)
        { label = data.label
        , type_ = data.libu
        }

Here I keep the list of attributes as first argument, the same as elm-ui, so that you can always overwrite attributes.

Other helpers

type alias Data msg =
    { label : Element msg
    , libu : UI.Libu.Type msg
    , theme : UI.Theme.Theme
    }

libu :
    List (Attribute msg)
    -> { type_ : Type msg, label : Element msg }
    -> Element msg
libu attrs args =
    case args.type_ of
        Li url ->
            Element.link
                attrs
                { label = args.label
                , url = url
                }

        NewTabLi url ->
            Element.newTabLink
                attrs
                { label = args.label
                , url = url
                }

        Bu onPress ->
            Input.button
                attrs
                { label = args.label
                , onPress = onPress
                }

type Type msg
    = NewTabLi String
    | Li String
    | Bu (Maybe msg)

“Libu” is half LInk and half BUtton that I use both to create links or buttons

attrsInCommon : List (Attribute msg)
attrsInCommon =
    [ padding numberPadding
    , width fill
    , transition
    , Border.rounded 5
    , Font.center
    ]


attrsPrimary : UI.Theme.Theme -> List (Attribute msg)
attrsPrimary theme =
    attrsInCommon
        ++ [ UI.Color.Background.backgroundButtonPrimary theme
           , UI.Color.Font.fontButtonPrimary theme
           , mouseOver [ UI.Color.Background.backgroundButtonPrimaryOver theme ]
           , focused [ UI.Color.Background.backgroundButtonPrimaryOver theme ]
           ]

Theme store info about both the primary color and the dark/light mode.

1 Like
5

Thanks for the update and some examples to start thinking about this further!

6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.