Article
0 comment

NPM Package for Office UI Fabric colours released – Ok a while back

A while back I wrote about on how to use the theme slots in the SPFx projects through SASS. It allows you to write web parts that reflect the default theme colours of a site. Instead, using fixed colour values, you can use variables in the CSS code of your artefacts.


To make the overall process faster I recently released and NPM packages including all the SASS colours plus some extras.

How to install

Whenever you start a new SPFx project, you can add additional NPM packages afterwards. You can include libraries such as jQuery UI easily. The same approach can be used to add SASS variable to your program code.
To add my SPFx Office UI Fabric theme slot package merely execute the following command.

npm install --save-dev spfx-uifabric-themes

Through this command, my theme package gets added to the node_modules folder, and a reference gets saved in the package.json file.
After the installation, you are ready to use it in your code.

Import UI Fabric SASS variables

To make use of the colour variables in your SASS file just import the data stored in the installed node module.

// import spfx-uifabric-themes
@import './node_modules/spfx-uifabric-themes/office.theme';

// make use of theme primary color
.container {
  background-color: $ms-themePrimary; // background will be set to theme Primary
}

The import statement on top acts like a references in other programming languages. In this case a file referenced out of the ‘./node_modules’ folder ist referenced. In SPFx the root folder of your project is the base folder of the build chain. In other words, this is much easier than navigating the folder structure up from the path where your SASS files are located.
The resulting CSS compiles then to the following code and is ready to get picked up by theming engine in SPFx.

.container_742604fa {
  background-color: "[theme:themePrimary, default:#0078d7]"
}

This small step allows you to create additional styles and designs that reflects the theme of any website the web part will be embedded.

The result

Let us take a look at some results and how the default SPFx web part behaves when we only change the web part background. The web part on the default SPFX looks like as shown in the following screenshot.

Default Workbench Colours in local debugging

 

The same web part embedded on the Office 365 workbench inside an red themed website. The overall design changes according to the primary theme colour.

Workbench on a red themed site

Let us try another yellow themed web site. There the web part will be shown accordingly as a yellow box.

Workbench on a yellow themed site

SPFx – SPFabricCore

It is a while back I release my npm project. Meanwhile, SPFx included the same method in special versions of Office UI Fabric. When a new project provisions the default web part code, a reference on top of the web parts SASS module file exists.

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

The style sheet code of the default web part even reuses variable such as theme colour tokens and font variables.

.button {
  // Our button
  text-decoration: none;
  height: 32px;

  // Primary Button
  min-width: 80px;
  background-color: $ms-color-themePrimary;
  border-color: $ms-color-themePrimary;
  color: $ms-color-white;

  // Basic Button
  outline: transparent;
  position: relative;
  font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: $ms-font-size-m;
  font-weight: $ms-font-weight-regular;
  border-width: 0;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  padding: 0 16px;

  .label {
    font-weight: $ms-font-weight-semibold;
    font-size: $ms-font-size-m;
    height: 32px;
    line-height: 32px;
    margin: 0 4px;
    vertical-align: top;
    display: inline-block;
  }
}

It uses variables for example font sizes and font weight and is a good starting point at all.
In my NPM package, I also have included additional help for example to create message boxes.

spfx-ui-themes includes SASS Function

If you have some additional useful ideas to include, please open a new GitHub issue on my Repo. You will also find there more information on how to use.
More to come soon.

 

Leave a Reply

Required fields are marked *.


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