The front-end CSS framework for building experiences for Office and Office 365.
Developed by Organization:OfficeDev
|Written||Sass Less JS|
Apr 16, 2019
Created at May 20, 2015
Apr 5, 2019
Release Notes on April 16, 2019 for 10.0.0
This release updates Fabric to include a new set of styles that support the Fluent Design System.
What this release includes
The Fluent style updates include new colors, type styles, depths (shadows), and motion helpers. Here are details on some of the style updates:
- Colors are updated to include neutrals that are warmer and more approachable. There are also new color palettes for different types of use cases, like Personas, Communication, and a shared set for common components like personas, sites, and more.
- Typography has been updated to a new common type ramp that is or will be in use across core Microsoft apps, leveraging the latest type weights from Fluent.
- Depth styles now include a common set of shadow levels from Fluent, which can be applied to context menus, dialogs, panels, and other surfaces.
- Motion styles have been updated to match the latest Fluent styles.
Note: this release is also backwards-compatible with 9.x classes, meaning it does not remove any existing class names. We recognize that most Fabric Core users are likely using these classes, so we've retained them in
.MDL2.scss files. We will monitor their usage to see if it makes sense to remove them in the future.
What this release does not include
We aren't including the new Office App Icons in this release (#1162). We're still working on some details to release these soon, but in the meantime, we want to get the base Fluent styles out the door.
What is Fluent?
Fluent is Microsoft's Design System, which includes the following principles:
- Adaptive: Experiences feel natural on each device
- Empathetic: Experiences are intuitive and powerful
- Beautiful: Experiences are engaging and immersive
You can read more about these principles on the Fluent Design System website.
To cleanly support the new Fluent styles, the contents of some .scss files no longer include their MDL2 styles, e.g.
_Animation.scss. Those have been moved to
*.MDL2.scss files, e.g.
_Animation.MDL2.scss. While this is not technically a breaking change if you're using Fabric.css, it will be breaking if you are using any of the MDL2 variables & mixins from the below files in
9.x filename | 10.x filename --- | --- _Color.Variables.scss | _Color.Variables.MDL2.scss _Font.Variables.scss | _Font.Variables.MDL2.scss _Color.Mixins.scss | _Color.Mixins.MDL2.scss _Font.Mixins.scss | _Font.Mixins.MDL2.scss _Animation.scss | _Animation.MDL2.scss _Font.scss | _Font.MDL2.scss
If you are consuming these .scss files directly downstream, you may need to switch to the MDL2 variants to include those classes in your compiled SCSS. To use the MDL2 variables and mixins, consider importing
dist/_References.scss, which imports all Fluent and MDL2 .scss files.
What else is new
- #1144: Adds variable CDN path for icons and fonts (thanks @thornyweb!)
- The MDL2 styles are deprecated in the 10.x releases, but for backwards-compatibility will not be removed until a future date.