EREGCSC-2892 -- Upgrade CMS Design System to latest version (11.x) (#…

…1468)

* chore: upgrade to 5.0.2 to start

* feat: upgrade to cms design system v6

* feat: get fonts working

* feat: upgrade to v11

* chore: msw updates

* fix: update prinary site font family

* chore: remove normalize; rearrange path declarations

* chore: add bitter fonts from cms design system

* chore: move SCSS in JS to SCSS stylesheet

and remove vestigial components

* chore: rename woff2 fonts part 1

* feat: rename fonts part 2

* chore: fix header styles

* chore: jump to style tweaks

* chore: fix header styles

* chore: spacing audit; footer styles

* chore: homepage styles

* chore: statute citations style tweaks

* chore: search page styles

* chore: subject page styles

* chore: reader view left sidebar tweaks

* chore: get spacing right

* chore: further reg text style/space tweaks

* chore: focus style tweak

* chore: use CMS spacers and gutters

* chore: address SCSS deprecation warnings

* chore: upgrade font awesome icons to latest ver

* chore: update reader view print styles

* chore: override select/input border css vars

* chore: remove sass from eregs-vite

since we're no longer doing any scss preprocessing in vite bundling process

* chore: css linting; about and footer tweaks

* chore: fix login page styles

* chore: subjects page mobile doc type tweaks

* chore: fix pagination list etc

* chore: reader view TOC style tweaks

* chore: override dark focus color to match existing site

* chore: remove explicit react dependencies

* chore: remove vue component compiler

* chore: use new --radius-default var for border radius

* chore: remove vue-template-compiler

* chore: only show outline on focus-visible psuedo class

which means it will only show when using keyboard navigation

solution/backend/regulations/templates/regulations/homepage.html

@@ -100,7 +100,7 @@
                         />
                     </div>
                     <div>
-                        <h4>Contact</h4>
+                        <h4 class="ds-text-heading--lg">Contact</h4>
                         <p>
                             Send questions and suggestions about this website
                             (including bug reports), or schedule a presentation or
@@ -123,7 +123,7 @@ <h4>Contact</h4>
                         />
                     </div>
                     <div>
-                        <h4>Sign Up For Testing</h4>
+                        <h4 class="ds-text-heading--lg">Sign Up For Testing</h4>
                         <p>Try new features and help make them better.</p>
                         <a
                             class="contact external"

solution/backend/regulations/templates/regulations/partials/footer.html

@@ -7,23 +7,23 @@
 {% load string_formatters %}
 
 
-<div class="flexbox site-footer">
+<div class="ds-u-display--flex site-footer">
     <div class="footer-left match-sides">
         <a href="https://www.medicaid.gov/" target="_blank" rel="noopener noreferrer"><img src="{% static 'images/medicaid.png' %}" alt="Medicaid.gov logo with subtitle Keeping America Healthy" /></a>
-        <h5>Centers for Medicare &amp; Medicaid Services</h5>
+        <h5 class="ds-text-heading--sm">Centers for Medicare &amp; Medicaid Services</h5>
         <div class="address">7500 Security Boulevard, Baltimore MD 21244</div>
         <div class="social">
             <a href="https://twitter.com/cmsgov" target="_blank" rel="noopener noreferrer" aria-label="CMSgov Twitter page"><i class="fab fa-twitter fa-2x"></i></a>
             <a href="http://www.youtube.com/user/CMSHHSgov" target="_blank" rel="noopener noreferrer" aria-label="CMSgov YouTube page"><i class="fab fa-youtube fa-2x"></i></a>
         </div>
     </div>
     <div class="footer-middle match-middle">
-        <h4>Legal Limitations of This Tool</h4>
+        <h4 class="ds-text-heading--md">Legal Limitations of This Tool</h4>
         <p>This tool is a compilation of materials published elsewhere that is made available for convenience. Although we have made efforts to ensure that the material presented is accurate, the rulemaking and regulation information presented on this tool is not an official edition of the <a href="https://www.govinfo.gov/app/collection/cfr" target="_blank" rel="noopener noreferrer" class="external">Code of Federal Regulations</a> or the <a href="https://federalregister.gov" target="_blank" rel="noopener noreferrer" class="external" aria-label="link to the Federal Register website">Federal Register</a>, which fully state their own contents. Additional relevant guidance or other interpretive materials may exist.</p><br/>
         <p>Unless authorized by law to be binding, the guidance linked on this tool does not have the force and effect of law and is not meant to bind CMS or the public in any way, unless specifically incorporated into a contract. The guidance is intended only to provide clarity to the public regarding existing requirements under the law. This tool does not bind CMS or the public and creates no rights, obligations, or defenses, substantive or procedural, that are enforceable by any party in any manner.</p>
     </div>
     <div class="footer-right match-sides">
-        <h4 class="last-update-footer">
+        <h4 class="ds-text-heading--md last-update-footer">
             Regulations up to date from <a href="https://www.ecfr.gov" target="_blank" rel="noopener noreferrer" class="external">
                 eCFR
             </a> as of

solution/ui/regulations/css/scss/_application_settings.scss

@@ -18,6 +18,18 @@ select {
     box-sizing: border-box !important;
 }
 
+label {
+    margin-block-start: 0 !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-weight: 700;
+}
+
 h2,
 h5,
 h6,
@@ -30,12 +42,24 @@ h2 {
     margin: 0.83em 0 0.83em 0 !important;
 }
 
+h3 {
+    font-size: 1.17rem;
+}
+
 h5 {
     margin: 1.67em 0 1.67em 0 !important;
 }
 
+ul,
+ol {
+    gap: 0;
+}
+
 .v-application {
-    font-family: Open Sans, Helvetica, sans-serif;
+    font-family:
+        Open Sans,
+        Helvetica,
+        sans-serif;
 
     .v-application__wrap {
         min-height: unset;
@@ -212,7 +236,7 @@ $policy_subject_close_background_hover: $mid_gray_3;
         format("truetype");
 }
 
-$primary_site_font: $font-sans; // Open Sans
+$primary_site_font: var(--font-family-body); // Open Sans
 $secondary_site_font: "Merriweather", Georgia, serif;
 $font_size_xxs: 10px;
 $font_size_xs: 12px;
@@ -222,10 +246,14 @@ $font_size_hero_h1: 26px;
 $font_size_hero_h1_tablet: 20px;
 
 @mixin font-bold-keep-width {
-    text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor;
+    text-shadow:
+        -0.06ex 0 0 currentColor,
+        0.06ex 0 0 currentColor;
 
     @supports (-webkit-text-stroke-width: 0.04ex) {
-        text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor;
+        text-shadow:
+            -0.03ex 0 0 currentColor,
+            0.03ex 0 0 currentColor;
         -webkit-text-stroke-width: 0.1ex;
     }
 }
@@ -240,19 +268,22 @@ $font_size_hero_h1_tablet: 20px;
 
 // Uses CMS Design System + a larger screen size
 
-// Custom maxes
-$iphoneSE-max: $width-xs - 1; // 374px
-$mobile-max: $width-md - 1; // 767px
-$tablet-max: $width-lg - 1; // 1023px
-
 $hero-tablet-max: 1080px;
 
 $width-xxs: 320px;
 $width-xs: 375px;
-
+$width-sm: 544px;
+$width-md: 768px;
+$width-lg: 1024px;
+$width-xl: 1280px;
 $width-xxl: 1440px;
 $width-3xl: 1920px; // The largest the site container will get
 
+// Custom maxes
+$iphoneSE-max: $width-xs - 1; // 374px
+$mobile-max: $width-md - 1; // 767px
+$tablet-max: $width-lg - 1; // 1023px
+
 // 320px, or iPhone 5/iPhone SE (1st gen)
 @mixin screen-xxs {
     @media (min-width: #{$width-xxs}) {
@@ -375,7 +406,7 @@ $width-3xl: 1920px; // The largest the site container will get
     color: $primary_indicator_text;
     font-size: 11px;
     padding: 2px 0;
-    border-radius: $border-radius;
+    border-radius: var(--radius-default);
     margin-right: 7px !important;
     display: inline-block;
     width: 42px;
@@ -485,7 +516,7 @@ a {
 // General Settings
 // -------------------------
 
-// For margins and padding: From the CMS Design System, default to $spacer-* where * is a number between 1–7 (i.e. $spacer-2)
+// For margins and padding: From the CMS Design System, default to $spacer-* where * is a number between 1–7 (i.e. var(--spacer-2))
 
 $header_height: 104px; // Update if header height changes
 $header_height_mobile: 104px;
@@ -511,13 +542,25 @@ a,
 html,
 body {
     scroll-behavior: smooth !important;
+
+    :focus {
+        outline: none;
+        background-color: transparent;
+    }
+
+    :focus-visible {
+        outline: 3px solid var(--color-focus-dark);
+        outline-offset: 0px;
+    }
 }
 
 select {
     cursor: pointer;
 
     &:focus-visible {
-        box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;
+        box-shadow:
+            0 0 3px #3e94cf,
+            0 0 7px #3e94cf;
     }
 }
 

solution/ui/regulations/css/scss/_eregs_design_system.scss

@@ -14,6 +14,8 @@ $eds-width-header-links: 1240px;
 
 // CSS custom properties
 :root {
+    font-size: 16px;
+
     // Breakpoints
     --eds-width-xs: 320px;
     --eds-width-sm: 780px;
@@ -22,23 +24,25 @@ $eds-width-header-links: 1240px;
 
     --cms-ds-width-sm: 544px;
 
-    // Margins
-    --grid-margin-sm: 1rem;
-    --grid-margin-lg: 2rem;
-
-    // Spacing
-    --spacer-1: 0.25rem; // 4px
-    --spacer-2: 0.5rem; // 8px
-    --spacer-3: 0.75rem; // 12px
-    --spacer-4: 1rem; // 16px
-    --spacer-5: 1.5rem; // 24px
-    --spacer-6: 2rem; // 32px
+    // Custom Spacing
+    --spacer-1-5: 0.75rem; // 12px
+
+    // From CMS Design System v2
+    --text-max-width: 53rem;
+
+    // ---- CMS Design System Overrides ----
+    // Border overrides
+    --text-input__border-width: 1px;
+    --text-input__border-width--disabled: 1px;
+
+    // Color overrides
+    --color-focus-dark: #005fcc;
 }
 
 @mixin eds-gutters {
-    padding: 0 var(--grid-margin-sm);
+    padding: 0 var(--grid-form-gutter-width);
 
     @media (min-width: $eds-width-md) {
-        padding: 0 var(--grid-margin-lg);
+        padding: 0 var(--grid-gutter-width);
     }
 }

solution/ui/regulations/css/scss/_layout.scss

@@ -8,6 +8,7 @@ $collapsed-sidebar-width: 32px; // Update here if the left sidebar collapsed wid
 
 html {
     height: 100%;
+    font-size: 16px;
 }
 
 body {
@@ -21,11 +22,11 @@ body {
     display: block;
     margin: 0 auto;
     position: relative;
-    padding: $spacer-3 $spacer-5;
+    padding: var(--spacer-3) var(--spacer-5);
 
     @include screen-xl {
-        max-width: $width-xl;
-        padding: $spacer-4;
+        max-width: var(--media-width-xl);
+        padding: var(--spacer-4);
     }
 
     @include screen-xxl {
@@ -34,7 +35,7 @@ body {
 }
 
 .container {
-    max-width: $text-max-width;
+    max-width: var(--text-max-width);
     display: block;
     margin: 0 auto;
 }
@@ -82,38 +83,38 @@ aside {
     }
 
     &.right-sidebar {
-        padding: $spacer-2;
+        padding: var(--spacer-2);
         border-left: 1px solid $border_color;
 
         @include screen-xl {
-            padding: $spacer-2 $spacer-4;
+            padding: var(--spacer-2) var(--spacer-4);
         }
 
-        @include custom-max($mobile-max / 1px) {
+        @include custom-max(calc($mobile-max / 1px)) {
             display: none;
         }
     }
 
     & + .match-middle {
-        padding: 0 $spacer-2;
+        padding: 0 var(--spacer-2);
         flex: 1;
 
         @include screen-lg {
-            padding: 0 $spacer-4;
+            padding: 0 var(--spacer-4);
         }
     }
 
     &[data-state="expanded"] {
-        @include custom-max($mobile-max / 1px) {
+        @include custom-max(calc($mobile-max / 1px)) {
             flex: 0 0 100%;
         }
 
-        @include custom-range($width-md / 1px, $tablet-max / 1px) {
+        @include custom-range(calc(var(--media-width-md) / 1px), calc($tablet-max / 1px)) {
             flex: 0 0 400px;
         }
 
         & + .match-middle {
-            @include custom-max($tablet-max / 1px) {
+            @include custom-max(calc($tablet-max / 1px)) {
                 margin-left: calc((308px + #{$collapsed-sidebar-width}) * (-1));
             }
         }
@@ -133,7 +134,7 @@ aside {
 
             @include screen-xl {
                 width: calc(100% - 400px - #{$collapsed-sidebar-width});
-                padding: 0 $spacer-6;
+                padding: 0 var(--spacer-6);
             }
 
             @include screen-3xl {