FluentProvider BrandVariants

Place a Fui.fluentProvider at the root of your app and pass the theme in as a prop. You can use pre-determined themes, or create your own BrandVariants or Tokens to use for your theme. BrandVariants can be generated and copied over from Microsoft's Theme Designer. Simply pick your "Key color value", choose your theme, click Export, and convert the TS BrandVariants into something more F#.

let brandVariants = {
    ``10``= "#050205"
    ``20``= "#231120"
    ``30``= "#3C1838"
    ``40``= "#511C4B"
    ``50``= "#67205F"
    ``60``= "#7D2374"
    ``70``= "#94258A"
    ``80``= "#AC26A0"
    ``90``= "#B83FAB"
    ``100``= "#C156B4"
    ``110``= "#CA6CBD"
    ``120``= "#D280C6"
    ``130``= "#DA94CF"
    ``140``= "#E1A7D7"
    ``150``= "#E9BAE0"
    ``160``= "#EFCEE9"
}

let tokens = Theme.tokens

type Styles = { example: string; text: string }
let useStyles = Fui.makeStyles<Styles> [
    "example", [
        style.backgroundColor tokens.colorBrandBackground2
        style.color tokens.colorBrandForeground2
        style.border(length.px 5, borderStyle.solid, tokens.colorBrandStroke1)
        style.borderRadius(length.px 5)
        style.margin(length.px 5)
        style.width (length.px 350)
        style.margin(length.auto)
    ]
    "text", [
        style.padding (length.px 5)
        style.fontSize (length.px 18)
    ]
]

[<ReactComponent>]
let FluentProvider () =
    let styles = useStyles ()
    let customTokens = { tokens with colorBrandStroke1 = "#780510"; colorBrandBackground2 = "#fa8072"; colorBrandForeground2 = "#780510" }

    Fui.fluentProvider [
        fluentProvider.theme.customDarkTheme brandVariants
        fluentProvider.children [
            Fui.fluentProvider [
                fluentProvider.theme customTokens
                fluentProvider.children [
                    Html.div [
                        prop.className styles.example
                        prop.children [
                            Fui.text [
                                text.className styles.text
                                text.text "Nested FluentProvider with partial theme"
                            ]
                        ]
                    ]
                ]
            ]
            MainView ()
        ]
    ]

fluentProvider.theme.webLight

fluentProvider.theme.createDarkTheme brandVariants