module Framework.Typography exposing (h1, h2, h3, h4, h5, h6, introspection, textExtraSmall, textLead, textSmall)
{-| [Demo](https://lucamug.github.io/elm-style-framework/framework.html)
# Functions
@docs h1, h2, h3, h4, h5, h6, introspection, textExtraSmall, textLead, textSmall
-}
import Element exposing (Element, alignLeft, paddingEach, text)
import Element.Font as Font
import Element.Region as Region
{-| -}
introspection :
{ name : String
, description : String
, signature : String
, variations : List ( String, List ( Element msg1, String ) )
}
introspection =
{ name = "Typography"
, description = ""
, signature = "List (Element.Attribute msg) -> Element.Element msg -> Element.Element msg"
, variations =
[ ( "Heading"
, [ ( h1 [] <| text "h1. Heading", """h1 [] <| text "h1. Heading\"""" )
, ( h2 [] <| text "h2. Heading", """h2 [] <| text "h2. Heading\"""" )
, ( h3 [] <| text "h3. Heading", """h3 [] <| text "h3. Heading\"""" )
, ( h4 [] <| text "h4. Heading", """h4 [] <| text "h4. Heading\"""" )
, ( h5 [] <| text "h5. Heading", """h5 [] <| text "h5. Heading\"""" )
, ( h6 [] <| text "h6. Heading", """h6 [] <| text "h6. Heading\"""" )
, ( textLead [] <| text "textLead", """textLead [] <| text "textLead\"""" )
, ( textSmall [] <| text "textSmall", """textSmall [] <| text "textSmall\"""" )
, ( textExtraSmall [] <| text "textExtraSmall", """textExtraSmall [] <| text "textExtraSmall\"""" )
]
)
]
}
{-| -}
h1 : List (Element.Attribute msg) -> Element.Element msg -> Element.Element msg
h1 listAttr element =
heading SizeH1 listAttr element
{-| -}
h2 : List (Element.Attribute msg) -> Element.Element msg -> Element.Element msg
h2 =
heading SizeH2
{-| -}
h3 : List (Element.Attribute msg) -> Element.Element msg -> Element.Element msg
h3 =
heading SizeH3
{-| -}
h4 : List (Element.Attribute msg) -> Element.Element msg -> Element.Element msg
h4 =
heading SizeH4
{-| -}
h5 : List (Element.Attribute msg) -> Element.Element msg -> Element.Element msg
h5 =
heading SizeH5
{-| -}
h6 : List (Element.Attribute msg) -> Element.Element msg -> Element.Element msg
h6 =
heading SizeH6
{-| -}
textLead : List (Element.Attribute msg) -> Element.Element msg -> Element.Element msg
textLead =
textSection SizeLead
{-| -}
textSmall : List (Element.Attribute msg) -> Element.Element msg -> Element.Element msg
textSmall =
textSection SizeSmall
{-| -}
textExtraSmall : List (Element.Attribute msg) -> Element.Element msg -> Element.Element msg
textExtraSmall =
textSection SizeExtraSmall
textSection :
FontLevel
-> List (Element.Attr () msg)
-> Element msg
-> Element msg
textSection level attributes child =
Element.el
((Font.size <| fontSize level)
:: attributes
)
child
heading :
FontLevel
-> List (Element.Attribute msg)
-> Element.Element msg
-> Element.Element msg
heading level attributes child =
Element.el
([ Region.heading <| headingLevel level
, Font.size <| fontSize level
, paddingEach { top = 0, right = 0, bottom = 0, left = 0 }
, alignLeft
, Font.bold
]
++ attributes
)
child
type FontLevel
= SizeH1
| SizeH2
| SizeH3
| SizeH4
| SizeH5
| SizeH6
| SizeLead
| SizeSmall
| SizeExtraSmall
headingLevel : FontLevel -> Int
headingLevel level =
case level of
SizeH1 ->
1
SizeH2 ->
2
SizeH3 ->
3
SizeH4 ->
4
SizeH5 ->
5
SizeH6 ->
6
_ ->
5
fontSize : FontLevel -> Int
fontSize level =
case level of
SizeH1 ->
32
SizeH2 ->
28
SizeH3 ->
24
SizeH4 ->
20
SizeH5 ->
16
SizeH6 ->
14
SizeLead ->
24
SizeSmall ->
14
SizeExtraSmall ->
12