[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
CMSgov · Oct 9, 2024 · 1803e18 · 1803e18
1 parent 61996d1
commit 1803e18
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 7 deletions.
diff --git a/packages/design-system/src/styles/_font.scss b/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';

diff --git a/packages/design-system/src/styles/_set-for-deprecation.scss b/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;
   }

diff --git a/packages/design-system/src/styles/utilities/_font-weight.scss b/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;
 }
diff --git a/packages/docs/content/foundation/typography/body.mdx b/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
 

diff --git a/packages/docs/content/foundation/typography/headings.mdx b/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
 

diff --git a/packages/docs/content/utilities/font/font-weight.mdx b/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>