module Config.Theme exposing (..)

import Element exposing (..)
import Element.Background as B
import Element.Font as F


type alias Theme =
    { nonHighlightedText : Color
    , nonHighlightedDarkText : Color
    , highlightText : Color
    , backgroundColour : Color
    , debugColour : Color
    }


topLevelContainer : Element msg -> Element msg
topLevelContainer =
    el
        [ width fill
        , height fill
        , B.color colourTheme.backgroundColour
        ]


colourTheme : Theme
colourTheme =
    { nonHighlightedText = rgb255 212 212 212
    , nonHighlightedDarkText = rgb255 126 126 126
    , highlightText = rgb255 204 102 0
    , backgroundColour = rgb255 40 40 40
    , debugColour = rgb255 227 28 121
    }


spartanFont : F.Font
spartanFont =
    F.typeface "League Spartan"


imageSpacer : Attribute msg
imageSpacer =
    spacing 20


titleFormat : List (Attr () msg)
titleFormat =
    [ F.size 23
    , F.bold
    , F.color colourTheme.highlightText
    ]


paragraphFontSize : Attr decorative msg
paragraphFontSize =
    F.size 17


paragraphLinkFormat : { url : String, label : Element msg } -> Element msg
paragraphLinkFormat =
    newTabLink
        [ paragraphFontSize
        , F.color colourTheme.highlightText
        ]


paragraphFormat : List (Attr () msg)
paragraphFormat =
    [ spacing 8
    , paragraphFontSize
    , F.color colourTheme.nonHighlightedText
    ]


paragraphColumnFormat : List (Attribute msg)
paragraphColumnFormat =
    [ spacing 20
    , width <| px 700
    ]