carbon-design-system · jnm2377 · Aug 16, 2019 · Aug 15, 2019 · Aug 16, 2019 · Aug 16, 2019
diff --git a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
@@ -1,7 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`_grid.scss should generate grid code when the grid feature flag is on 1`] = `
-"@keyframes skeleton {
+"h1 {
+  font-size: 2rem;
+  font-weight: 300;
+  line-height: 3.125rem;
+  letter-spacing: 0; }
+
+h2 {
+  font-size: 2rem;
+  font-weight: 400;
+  line-height: 2.5rem;
+  letter-spacing: 0; }
+
+h3 {
+  font-size: 1.75rem;
+  font-weight: 400;
+  line-height: 2.25rem;
+  letter-spacing: 0; }
+
+h4 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.625rem;
+  letter-spacing: 0; }
+
+h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.375rem;
+  letter-spacing: 0; }
+
+h6 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.125rem;
+  letter-spacing: 0.16px; }
+
+p {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  letter-spacing: 0; }
+
+a {
+  color: #0062ff; }
+
+em {
+  font-style: italic; }
+
+@keyframes skeleton {
   0% {
     width: 0%;
     left: 0;

diff --git a/packages/components/src/globals/scss/__tests__/__snapshots__/css--font-face-test.js.snap b/packages/components/src/globals/scss/__tests__/__snapshots__/css--font-face-test.js.snap
@@ -1,7 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`_css--font-face.scss experimental should output @font-face blocks from elements if components-x flag is enabled 1`] = `
-"@keyframes skeleton {
+"h1 {
+  font-size: 2rem;
+  font-weight: 300;
+  line-height: 3.125rem;
+  letter-spacing: 0; }
+
+h2 {
+  font-size: 2rem;
+  font-weight: 400;
+  line-height: 2.5rem;
+  letter-spacing: 0; }
+
+h3 {
+  font-size: 1.75rem;
+  font-weight: 400;
+  line-height: 2.25rem;
+  letter-spacing: 0; }
+
+h4 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.625rem;
+  letter-spacing: 0; }
+
+h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.375rem;
+  letter-spacing: 0; }
+
+h6 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.125rem;
+  letter-spacing: 0.16px; }
+
+p {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  letter-spacing: 0; }
+
+a {
+  color: #0062ff; }
+
+em {
+  font-style: italic; }
+
+@keyframes skeleton {
   0% {
     width: 0%;
     left: 0;
@@ -723,7 +771,55 @@ exports[`_css--font-face.scss experimental should output @font-face blocks from
 `;
 
 exports[`_css--font-face.scss should not output CSS if $css--font-face is false 1`] = `
-"@keyframes skeleton {
+"h1 {
+  font-size: 2rem;
+  font-weight: 300;
+  line-height: 3.125rem;
+  letter-spacing: 0; }
+
+h2 {
+  font-size: 2rem;
+  font-weight: 400;
+  line-height: 2.5rem;
+  letter-spacing: 0; }
+
+h3 {
+  font-size: 1.75rem;
+  font-weight: 400;
+  line-height: 2.25rem;
+  letter-spacing: 0; }
+
+h4 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.625rem;
+  letter-spacing: 0; }
+
+h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.375rem;
+  letter-spacing: 0; }
+
+h6 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.125rem;
+  letter-spacing: 0.16px; }
+
+p {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  letter-spacing: 0; }
+
+a {
+  color: #0062ff; }
+
+em {
+  font-style: italic; }
+
+@keyframes skeleton {
   0% {
     width: 0%;
     left: 0;

diff --git a/packages/components/src/globals/scss/_css--reset.scss b/packages/components/src/globals/scss/_css--reset.scss
@@ -31,7 +31,7 @@
 }
 
 @include exports('css--reset') {
-  @if variable-exists(css--reset) == false or $css--reset==true {
+  @if variable-exists(css--reset) == false or $css--reset == true {
     // http://cssreset.com/scripts/eric-meyer-reset-css/
     html,
     body,
@@ -199,3 +199,10 @@
     @include carbon--icons;
   }
 }
+
+@include exports('css--default-type') {
+  @if variable-exists(css--default-type) == false or $css--default-type == true
+  {
+    @include carbon--default-type;
+  }
+}
diff --git a/packages/components/src/globals/scss/styles.scss b/packages/components/src/globals/scss/styles.scss
@@ -39,6 +39,12 @@ $css--use-layer: true !default;
 /// @group feature-flags
 $css--reset: true !default;
 
+/// If true, include default type
+/// @access public
+/// @type Bool
+/// @group feature-flags
+$css--default-type: true !default;
+
 /// Used with `css--font-face` feature flag, if true, uses Plex font families instead of Helvetica
 /// @access public
 /// @type Bool

diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_reset.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_reset.scss
@@ -36,6 +36,15 @@
     font-family: $mono-font-family;
   }
 
+  strong {
+    @include carbon--font-weight('semibold');
+  }
+}
+
+/// Include default type styles
+/// @access public
+/// @group @carbon/type
+@mixin carbon--default-type {
   h1 {
     @include carbon--type-style('productive-heading-06');
   }
@@ -71,8 +80,4 @@
   em {
     font-style: italic;
   }
-
-  strong {
-    @include carbon--font-weight('semibold');
-  }
 }
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_reset.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_reset.scss
@@ -36,6 +36,15 @@
     font-family: $mono-font-family;
   }
 
+  strong {
+    @include carbon--font-weight('semibold');
+  }
+}
+
+/// Include default type styles
+/// @access public
+/// @group @carbon/type
+@mixin carbon--default-type {
   h1 {
     @include carbon--type-style('productive-heading-06');
   }
@@ -71,8 +80,4 @@
   em {
     font-style: italic;
   }
-
-  strong {
-    @include carbon--font-weight('semibold');
-  }
 }
diff --git a/packages/components/src/globals/scss/vendor/@carbon/type/scss/_inlined/_reset.scss b/packages/components/src/globals/scss/vendor/@carbon/type/scss/_inlined/_reset.scss
@@ -36,6 +36,15 @@
     font-family: $mono-font-family;
   }
 
+  strong {
+    @include carbon--font-weight('semibold');
+  }
+}
+
+/// Include default type styles
+/// @access public
+/// @group @carbon/type
+@mixin carbon--default-type {
   h1 {
     @include carbon--type-style('productive-heading-06');
   }
@@ -71,8 +80,4 @@
   em {
     font-style: italic;
   }
-
-  strong {
-    @include carbon--font-weight('semibold');
-  }
 }
diff --git a/packages/components/src/globals/scss/vendor/@carbon/type/scss/_reset.scss b/packages/components/src/globals/scss/vendor/@carbon/type/scss/_reset.scss
@@ -36,6 +36,15 @@
     font-family: $mono-font-family;
   }
 
+  strong {
+    @include carbon--font-weight('semibold');
+  }
+}
+
+/// Include default type styles
+/// @access public
+/// @group @carbon/type
+@mixin carbon--default-type {
   h1 {
     @include carbon--type-style('productive-heading-06');
   }
@@ -71,8 +80,4 @@
   em {
     font-style: italic;
   }
-
-  strong {
-    @include carbon--font-weight('semibold');
-  }
 }
diff --git a/packages/components/tests/styles-test.js b/packages/components/tests/styles-test.js
@@ -22,6 +22,7 @@ const files = glob.sync('**/*.scss', {
 const render = promisify(sass.render);
 
 describe('styles', () => {
+  jest.setTimeout(8000);
   it.each(files)('%s should compile', async relativeFilePath => {
     const filepath = path.join(cwd, relativeFilePath);
     try {

diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md
@@ -189,6 +189,7 @@
   - [✅carbon--font-face-mono [mixin]](#carbon--font-face-mono-mixin)
   - [✅prefix [variable]](#prefix-variable)
   - [✅carbon--type-reset [mixin]](#carbon--type-reset-mixin)
+  - [✅carbon--default-type [mixin]](#carbon--default-type-mixin)
   - [✅carbon--font-face-sans [mixin]](#carbon--font-face-sans-mixin)
   - [✅carbon--get-type-size [function]](#carbon--get-type-size-function)
   - [✅carbon--type-scale [variable]](#carbon--type-scale-variable)
@@ -5708,6 +5709,35 @@ Include a type reset for a given body and mono font family
     font-family: $mono-font-family;
   }
 
+  strong {
+    @include carbon--font-weight('semibold');
+  }
+}
+```
+
+</details>
+
+- **Parameters**:
+
+| Name                | Description                                                                         | Type     | Default value                 |
+| ------------------- | ----------------------------------------------------------------------------------- | -------- | ----------------------------- |
+| `$base-font-size`   | The base font size for your document                                                | `Number` | `$carbon--base-font-size`     |
+| `$body-font-family` | The font family used on the `<body>` element                                        | `String` | `carbon--font-family('sans')` |
+| `$mono-font-family` | The font family used on elements that require mono fonts, like the `<code>` element | `String` | `carbon--font-family('mono')` |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+  - [carbon--font-weight [mixin]](#carbon--font-weight-mixin)
+
+### ✅carbon--default-type [mixin]
+
+Include default type styles
+
+<details>
+<summary>Source code</summary>
+
+```scss
+@mixin carbon--default-type() {
   h1 {
     @include carbon--type-style('productive-heading-06');
   }
@@ -5743,26 +5773,13 @@ Include a type reset for a given body and mono font family
   em {
     font-style: italic;
   }
-
-  strong {
-    @include carbon--font-weight('semibold');
-  }
 }
 ```
 
 </details>
 
-- **Parameters**:
-
-| Name                | Description                                                                         | Type     | Default value                 |
-| ------------------- | ----------------------------------------------------------------------------------- | -------- | ----------------------------- |
-| `$base-font-size`   | The base font size for your document                                                | `Number` | `$carbon--base-font-size`     |
-| `$body-font-family` | The font family used on the `<body>` element                                        | `String` | `carbon--font-family('sans')` |
-| `$mono-font-family` | The font family used on elements that require mono fonts, like the `<code>` element | `String` | `carbon--font-family('mono')` |
-
 - **Group**: [@carbon/type](#carbontype)
 - **Requires**:
-  - [carbon--font-weight [mixin]](#carbon--font-weight-mixin)
   - [carbon--type-style [mixin]](#carbon--type-style-mixin)
 
 ### ✅carbon--font-face-sans [mixin]
@@ -7922,4 +7939,4 @@ fixed contexts.
   - [tokens [variable]](#tokens-variable)
 - **Used by**:
   - [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
-  - [carbon--type-reset [mixin]](#carbon--type-reset-mixin)
+  - [carbon--default-type [mixin]](#carbon--default-type-mixin)