feat(type): add experimental support for sass modules (#7702)

* fix(cli): ignore module directories when inlining

* feat(type): add experimental support for sass modules

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

docs/migration/11.x-type.md

@@ -0,0 +1,24 @@
+# @carbon/type
+
+**Note: everything in this file is a work-in-progress and will be changed.**
+
+## Changes
+
+| Filename                 | v10                               | v11                               |
+| ------------------------ | --------------------------------- | --------------------------------- |
+| `scss/_scale.scss`       | `@function carbon--get-type-size` | Removed, use `type-scale` instead |
+|                          | `$carbon--type-scale`             | `$type-scale`                     |
+|                          | `@function carbon--type-scale`    | `@function type-scale`            |
+|                          | `@mixin carbon--type-scale`       | `@mixin type-scale`               |
+|                          | `@mixin carbon--font-size`        | `@mixin font-size`                |
+| `scss/_font-family.scss` | `$carbon--font-families`          | `$font-families`                  |
+|                          | `@function carbon--font-family`   | `font-family`                     |
+|                          | `@mixin carbon--font-family`      | `font-family`                     |
+|                          | `$carbon--font-weights`           | `$font-weights`                   |
+|                          | `@function carbon--font-weight`   | `font-weight`                     |
+|                          | `@mixin carbon--font-weight`      | `font-weight`                     |
+| `scss/_prefix.scss`      |                                   | No Changes                        |
+| `scss/_styles.scss`      | `@mixin carbon--type-style`       | `@mixin type-style`               |
+| `scss/_reset.scss`       | `@mixin carbon--default-type`     | `@mixin default-type`             |
+|                          | `@mixin carbon--type-reset`       | `@mixin type-reset`               |
+| `scss/_classes.scss`     | `@mixin carbon--type-classes`     | `@mixin type-classes`             |

packages/cli/src/commands/inline.js

@@ -96,6 +96,10 @@ async function inlineSassDependencies(
         return false;
       }
 
+      if (path.relative(sourceFolder, src).includes('modules')) {
+        return false;
+      }
+
       return path.basename(src) !== 'index.scss';
     },
   });

packages/type/index.scss

@@ -0,0 +1,13 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'scss/modules/classes';
+@forward 'scss/modules/font-family';
+@forward 'scss/modules/prefix';
+@forward 'scss/modules/reset';
+@forward 'scss/modules/scale';
+@forward 'scss/modules/styles';

packages/type/scss/modules/_classes.scss

@@ -0,0 +1,42 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+@use 'font-family' as *;
+@use 'prefix' as *;
+@use 'styles' as *;
+
+/// Create type classes for font families, weights, styles
+/// @access public
+/// @group @carbon/type
+@mixin type-classes {
+  // Font families
+  @each $name, $value in $font-families {
+    .#{$prefix}--type-#{$name} {
+      font-family: $value;
+    }
+  }
+
+  // Font weights
+  @each $name, $value in $font-weights {
+    .#{$prefix}--type-#{$name} {
+      font-weight: $value;
+    }
+  }
+
+  // Font styles
+  .#{$prefix}--type-italic {
+    font-style: italic;
+  }
+
+  // Type styles
+  @each $name, $value in $tokens {
+    .#{$prefix}--type-#{$name} {
+      @include type-style($name, map.has-key($value, breakpoints));
+    }
+  }
+}

packages/type/scss/modules/_font-family.scss

@@ -0,0 +1,70 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
+/// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$font-families: (
+  'mono':
+    unquote(
+      "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"
+    ),
+  'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
+  'sans-condensed':
+    unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
+  'sans-hebrew':
+    unquote(
+      "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"
+    ),
+  'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
+) !default;
+
+/// Get the font-family for an IBM Plex font
+/// @param {String} $name
+/// @return {String}
+/// @access public
+/// @group @carbon/type
+@function font-family($name) {
+  @return map-get($font-families, $name);
+}
+
+/// Include the `font-family` definition for the given name in your selector
+/// @param {String} $name
+/// @access public
+/// @group @carbon/type
+@mixin font-family($name) {
+  font-family: font-family($name);
+}
+
+/// Suggested font weights to be used in product
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$font-weights: (
+  'light': 300,
+  'regular': 400,
+  'semibold': 600,
+) !default;
+
+/// Retrieve the font-weight value for a given name
+/// @param {String} $weight
+/// @return {Number}
+/// @access public
+/// @group @carbon/type
+@function font-weight($weight) {
+  @return map-get($font-weights, $weight);
+}
+
+/// Set the `font-weight` property with the value for a given name
+/// @param {String} $weight
+/// @access public
+/// @group @carbon/type
+@mixin font-weight($weight) {
+  font-weight: font-weight($weight);
+}

packages/type/scss/modules/_prefix.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type String
+/// @access public
+/// @group @carbon/type
+$prefix: 'bx' !default;

packages/type/scss/modules/_reset.scss

@@ -0,0 +1,92 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+@use 'sass:meta';
+@use '@carbon/layout';
+@use 'font-family' as *;
+@use 'styles' as *;
+
+/// Include a type reset for a given body and mono font family
+/// @param {String} $body-font-family [font-family('sans')] - The font family used on the `<body>` element
+/// @param {String} $mono-font-family [font-family('mono')] - The font family used on elements that require mono fonts, like the `<code>` element
+/// @access public
+/// @group @carbon/type
+@mixin type-reset(
+  // TODO: remove in next major release. This has been replaced with 100%
+  $base-font-size: layout.$base-font-size,
+  $body-font-family: font-family('sans'),
+  $mono-font-family: font-family('mono')
+) {
+  html {
+    font-size: 100%;
+  }
+
+  body {
+    @include font-weight('regular');
+
+    font-family: $body-font-family;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: $mono-font-family;
+  }
+
+  strong {
+    @include font-weight('semibold');
+  }
+}
+
+/// Include default type styles
+/// @access public
+/// @group @carbon/type
+@mixin default-type {
+  h1 {
+    @include type-style('productive-heading-06');
+  }
+
+  h2 {
+    @include type-style('productive-heading-05');
+  }
+
+  h3 {
+    @include type-style('productive-heading-04');
+  }
+
+  h4 {
+    @include type-style('productive-heading-03');
+  }
+
+  h5 {
+    @include type-style('productive-heading-02');
+  }
+
+  h6 {
+    @include type-style('productive-heading-01');
+  }
+
+  p {
+    @include type-style('body-long-02');
+  }
+
+  a {
+    @if meta.global-variable-exists('carbon--theme') and
+      map.has-key($carbon--theme, 'link-01')
+    {
+      color: map.get($carbon--theme, 'link-01');
+    } @else {
+      color: #0062fe;
+    }
+  }
+
+  em {
+    font-style: italic;
+  }
+}

packages/type/scss/modules/_scale.scss

@@ -0,0 +1,56 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/layout';
+
+/// Compute the type size for the given type scale step
+/// @param {Number} $step
+/// @return {Number} In px
+/// @access public
+/// @group @carbon/type
+@function get-type-size($step) {
+  @if $step == 1 {
+    @return 12px;
+  }
+  // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
+  @return get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
+}
+
+/// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$type-scale: ();
+@for $i from 1 through 23 {
+  $type-scale: append($type-scale, layout.rem(get-type-size($i)));
+}
+
+/// Get the value of a specific step in the type scale
+/// @param {Number} $step
+/// @return {Number} In rem
+/// @access public
+/// @group @carbon/type
+@function type-scale($step) {
+  @return nth($type-scale, $step);
+}
+
+/// Set the font-size value of a selector with the value at the given `$step`
+/// @param {Number} $step
+/// @access public
+/// @group @carbon/type
+@mixin type-scale($step) {
+  font-size: type-scale($step);
+}
+
+/// Alias of `type-scale` mixin.
+/// @param {Number} $step
+/// @alias type-scale
+/// @access public
+/// @group @carbon/type
+@mixin font-size($step) {
+  font-size: type-scale($step);
+}