Article
0 comment

hTWOo Core v0.7.0 – released

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.

Example of all the design tokens

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:

PS: hTWOo ReactJS will become update soon.

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.