Skip to content

typographyStyles

Andrew Sutton edited this page Dec 27, 2024 · 5 revisions

NOTE: When using .fontSize, .fontWeight, or .lineHeight with Feliz.style, use .felizFontSize, .felizFontWeight, and .felizLineHeight instead. These parse the stringed values into something Feliz.style can use.

image

let newTokens = { Theme.tokens with colorBrandStroke1 = "#cbe82e" }
let typographyStyles = Fui.typographyStyles

Html.div [
    prop.style [ style.height 200; style.width 200; style.backgroundColor newTokens.colorBrandStroke1]
    prop.children [
        Fui.text [
            text.text "Typography Styles"
            text.style [
                style.fontSize typographyStyles.title1.fontSize
                style.fontFamily typographyStyles.title1.fontFamily
                style.color newTokens.colorBrandBackgroundHover
                style.lineHeight typographyStyles.title1.lineHeight
                style.fontWeight typographyStyles.title1.fontWeight
            ]
        ]
    ]
]
Clone this wiki locally