[NO-TICKET] Undo semibold deprecation (#3266)

* Revert "BREAKING: Deprecate semibold utility class and remove semibold Open Sans from includes"

This reverts commit a3586ed.

* Remove deprecation warning

Author: pwolfert

packages/design-system/src/styles/_font.scss

@@ -43,6 +43,14 @@ $font-path: '../fonts' !default;
   src: url('#{$font-path}/opensans-italic-webfont.woff2') format('woff2');
 }
 
+@font-face {
+  font-display: swap;
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('#{$font-path}/opensans-semibold-webfont.woff2') format('woff2');
+}
+
 @font-face {
   font-display: swap;
   font-family: 'Open Sans';

packages/design-system/src/styles/_set-for-deprecation.scss

@@ -24,10 +24,6 @@
 
 @container style(--debugger: true) {
   // Remove in v12
-  .ds-u-font-weight--semibold {
-    @include deprecate;
-  }
-
   .ds-u-sans {
     @include deprecate;
   }

packages/design-system/src/styles/utilities/_font-weight.scss

@@ -2,6 +2,10 @@
   font-weight: var(--font-weight-normal) !important;
 }
 
+.ds-u-font-weight--semibold {
+  font-weight: 600 !important;
+}
+
 .ds-u-font-weight--bold {
   font-weight: var(--font-weight-bold) !important;
 }

packages/docs/content/foundation/typography/body.mdx

@@ -27,7 +27,9 @@ import loremIpsumGenerator from '../../../src/helpers/loremIpsumGenerator';
 
 <ThemeContent onlyThemes={['healthcare']}>
 
-Open Sans serves as the base font for the site. Sans-serifs have been proven to be easier to read on-screen and are incredibly adaptable when resized and displayed across different platforms and browsers. Accordingly, Open Sans is used for body type, secondary and tertiary headlines, and instructional text.
+Open Sans serves as the base font for the site. The full Open Sans type family consists of a variety of weights including light, regular, semibold, bold, and extrabold which allows for a wide range of type treatments and hierarchies within a page while still maintaining a unified look and feel.
+
+Sans-serifs have been proven to be easier to read on-screen and are incredibly adaptable when resized and displayed across different platforms and browsers. Accordingly, Open Sans is used for body type, secondary and tertiary headlines, and instructional text.
 
 **Web font stack:** Open Sans > Helvetica > Arial > Verdana > Sans-Serif
 

packages/docs/content/foundation/typography/headings.mdx

@@ -27,7 +27,9 @@ import loremIpsumGenerator from '../../../src/helpers/loremIpsumGenerator';
 
 <ThemeContent onlyThemes={['healthcare']}>
 
-Open Sans serves as the base font for the site. Sans-serifs have been proven to be easier to read on-screen and are incredibly adaptable when resized and displayed across different platforms and browsers. Accordingly, Open Sans is used for body type, secondary and tertiary headlines, and instructional text.
+Open Sans serves as the base font for the site. The full Open Sans type family consists of a variety of weights including light, regular, semibold, bold, and extrabold which allows for a wide range of type treatments and hierarchies within a page while still maintaining a unified look and feel.
+
+Sans-serifs have been proven to be easier to read on-screen and are incredibly adaptable when resized and displayed across different platforms and browsers. Accordingly, Open Sans is used for body type, secondary and tertiary headlines, and instructional text.
 
 **Web font stack:** Open Sans > Helvetica > Arial > Verdana > Sans-Serif
 

packages/docs/content/utilities/font/font-weight.mdx

@@ -6,14 +6,18 @@ import loremIpsumGenerator from '../../../src/helpers/loremIpsumGenerator';
 
 Change an element's `font-weight` property using the font weight utility.
 
-**Format**: `.ds-u-font-weight--[normal|bold]`
+**Format**: `.ds-u-font-weight--[normal|semibold|bold]`
 
 <EmbeddedExample>
   <section class="example-list">
     <article>
       <code class="ds-u-margin-bottom--1">.ds-u-font-weight--normal</code>
       <div class="ds-u-font-weight--normal">{loremIpsumGenerator('m')}</div>
     </article>
+    <article>
+      <code class="ds-u-margin-bottom--1">.ds-u-font-weight--semibold</code>
+      <div class="ds-u-font-weight--semibold">{loremIpsumGenerator('m')}</div>
+    </article>
     <article>
       <code class="ds-u-margin-bottom--1">.ds-u-font-weight--bold</code>
       <div class="ds-u-font-weight--bold">{loremIpsumGenerator('m')}</div>