Version 0.7.0 of hTWOo got released today.
In short, here are the changes.
- Theme Switcher added – To demonstrate different variants for SharePoint, Microsoft Teams and event High Contrast theme. More on that later in this blog post.
- Breadcrumb updates – supports now both hyperlinks as well as buttons for the breadcrumb
- iFrame Modal Dialog – these support html lazy loading as well as different content formats such as 16:9 (default), 4:3 and squared iframe content
- Buttons with icons on the left and right
These are some small updates. For now, the major update in the documentation is the support for multiple themes.
SharePoint and Teams support
hTWOo is the unified Fluent UI framework that allows you to use your application in Teams, SharePoint, or any other website by using a bunch of CSS variables.
The first thing is that you can now choose between different themes, which you will find directly on the documentation in the left lower corner.
It allows you, for example, to switch between a SharePoint or a Teams theme.
In addition to the difference from the default teal theme, you can also select the other out of the box themes:
- Red
- Purple
- Orange
- Green
- Gray
- Blue
- Dark Yellow (inverted theme)
- Dark Blue (inverted theme)
In the case of the team, it supports at the moment:
- Teams – light
- Teams – High Contrast
- Teams – dark
It allows you to see how the controls look on those themes, but they will also match your SharePoint or Teams theme when used in your development.
Update of theme slots
The themed slot got now harmonised with other frameworks such as Material Design, Tailwind or Bootstrap.
Special SASS variables now follow this common convention ranging from 0 to 900. If you like to know more about the origin of this colour scale, feel free to read “the numeric colour palettes in modern web framework explained”
It enables you to grad theme colour up and down following a numeric scale and not some strangely named theme slot variables without any real logic.
To give you one example with the following style definition.
.myContainer{
background-color: $theme-600 // returns the themePrimary
color: $neutral-000 // returns white
}
The definition defines for your container the primary theme colour as the background colour and the lightest neutral colour as the colour of the text.
Through hTWOo, you can now use this numeric scale in SASS, which will get transferred in the following output code.
.myContainer{
background-color: var(--themePrimary) // returns the themePrimary
color: var(--white) // returns white
}
So your compiled code will still use the Microsoft Fluent UI theme slots, but your development will improve, and you will gain speed while still being compliant with Fluent UI.
That’s all for now
Just some links to share:
- hTWOo Core v0.7.0 on npmjs
- hTWOo Documentations
- hTWOo Core Style Guide
- hTWOo on Github – Good play to like, share, raising issues or sponsor.
PS: hTWOo ReactJS will become update soon.