18.0.0

What's Changed

• css: Replace get-theme, type-scale functions and theme and type-scale maps with CSS Custom Properties. Sass variables added for legacy support
• css: Migrates the sass @import with @use and @forward (#755).

Migration Tips

• This version updates how we internally import SCSS files, from the @import syntax to @use and @forward
• When importing lib at the head of your project you will use the with keyword instead of
  stating variables explicitly, like this:

@use '/assets/sass/protocol/includes/lib' with ($font-path: '/protocol/fonts');

• To use the global namespace for protocol variables you will need to use the as keyword and assign to *:

@use '../includes/lib' as *;

• if you don't use as you would access variables and mixins from the file using the filename as a namespace:

@use '../includes/lib';

.mzp-c-item {
    @include lib.text-title-md;
    color: lib.$color-ink-80;
    margin: lib.$spacing-lg 0;
}

• For more information on the @use and @forward you can visit the offical SCSS documentation or the usage page on the Protocol documentation website

• This version also moves from using the get-theme function to using css custom properties. A future version of protocol will depreciate both the get-theme and type-scale functions.

• To migrate from get-theme or type-scale to CSS custom properties, follow this pattern:

• From this:

.mzp-t-dark {
  background-color: get-theme('background-color-inverse');
  color: get-theme('body-text-color-inverse');
  line-height: type-scale('body-line-height');
}

• to this:
• (Note: if you need to support legacy browsers, place the CSS custom properties in a @supports flag and use sass variables as a fall back. Legacy browsers will always be served the default theme.)

.mzp-t-dark {
  background-color: $background-color-inverse;
  color: $body-text-color-inverse;
  line-height: $body-line-height;

  @supports (--css: variables) {
    background-color: var(--background-color-inverse);
    color: var(--body-text-color-inverse);
    line-height: var(--body-line-height);
  }
}

• For more information on CSS custom properties you can visit MDN's documentation or the framework page Protocol's documentation website.