Skip to content

10.0.0
Compare
Choose a tag to compare
@Jahnp Jahnp released this 16 Apr 05:22
10.0.0
918cbcf
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

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.

Breaking Changes

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.

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

Deprecated

  • The MDL2 styles are deprecated in the 10.x releases, but for backwards-compatibility will not be removed until a future date.
Assets 3