Formation Global Updates: Update base font size and convert rem val…

…ue (#987) * initial base conversions * add utilities stylesheet and claryifing notes * us gov banner text fix Signed-off-by: Micah Chiang <micahkchiang@gmail.com> * fix search, contact us, profile dropdown links Signed-off-by: Micah Chiang <micahkchiang@gmail.com> * update modules Signed-off-by: Micah Chiang <micahkchiang@gmail.com> * finish modules Signed-off-by: Micah Chiang <micahkchiang@gmail.com> * overrides for uswds input element * overrides for uswds label element * overrides for uswds list elements (no change) * overrides for uswds list element table * overrides for uswds list component accordion (no change) * overrides for uswds list component alerts * overrides for uswds component forms * overrides for uswds component sidenav * overrides for uswds component media-block * overrides for uswds component banner * corrects error: applied overrides directly to sidenav in uswds * stragler files on sass, sass/base, sass/style * fix: imports and null check for split value unit * Set base font to correct value, fix input sizing * fix: corrected the return joint value * fix: scale rem with in calc * Make changes related to typography update * 11.0.0 * revert changes to prepublish.js * Fix errors based on PR review --------- Signed-off-by: Micah Chiang <micahkchiang@gmail.com> Co-authored-by: Micah Chiang <micahkchiang@gmail.com> Co-authored-by: Ray Messina <rmessina10@gmail.com> Co-authored-by: harshil1793 <harshil1793@gmail.com> Co-authored-by: Kerry Powell <kerry.powell@adhocteam.us> Co-authored-by: nickgaydosh <nickgaydosh@gmail.com> Co-authored-by: Kerry Powell <kerry.powell@va.gov>
department-of-veterans-affairs · Mar 27, 2024 · 9fd9ed3 · 9fd9ed3
1 parent 9f28d6c
commit 9fd9ed3
Show file tree

Hide file tree

Showing 51 changed files with 2,591 additions and 562 deletions.
diff --git a/packages/formation/package.json b/packages/formation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/formation",
-  "version": "10.1.3",
+  "version": "11.0.0",
   "description": "The VA design system",
   "keywords": [
     "va",

diff --git a/packages/formation/sass/_shame.scss b/packages/formation/sass/_shame.scss
@@ -3,6 +3,8 @@
 // is for this file to be empty, but some times you just have to throw that
 // hack in there to get it working.
 
+@import './override-function.scss';
+
 body {
   // used a lot in vets-website
   .row {
@@ -14,8 +16,8 @@ body {
   // unused in content-build
   // Used in vets-website, used in src/platform/monitoring/DowntimeNotification/components/DowntimeApproaching.jsx 
   .row-padded {
-    max-width: 100rem;
-    padding: 0 1rem;
+    max-width: scale-rem(100rem);
+    padding: scale-rule(0 1rem);
     margin: 0 auto;
   }
 }
@@ -40,8 +42,8 @@ body {
 
 .progress-box {
   border: 1px solid $color-gray-lightest;
-  margin: 1.5rem 0;
-  padding: 1rem 2rem;
+  margin: scale-rule(1.5rem 0);
+  padding: scale-rule(1rem 2rem);
 }
 
 
@@ -50,7 +52,7 @@ body {
 // src/applications/enrollment-verification/components/VerifyEnrollments.jsx, src/applications/financial-status-report/components/shared/ButtonGroup.jsx
 // src/platform/forms-system/src/js/components/ProgressButton.jsx
 .button-icon {
-  font-size: 1.7rem;
+  font-size: scale-rem(1.7rem);
 }
 
 // unused in content-build
@@ -119,7 +121,7 @@ body {
 // e2e test cases, because Nightwatch can't find the elements on screen.
 input[type="checkbox"],
 input[type="radio"] {
-  margin-left: -2rem;
+  margin-left: scale-rem(-2rem);
   opacity: 0;
   position: absolute;
   left: auto;
@@ -138,8 +140,8 @@ input[type="radio"] {
 form {
   [type="submit"] {
     @include media($medium-screen) {
-      padding-left: 2rem;
-      padding-right: 2rem;
+      padding-left: scale-rem(2rem);
+      padding-right: scale-rem(2rem);
       width: 100%;
     }
   }
@@ -161,7 +163,7 @@ form {
     left: 0;
     position: absolute;
     top: 0;
-    width: 1rem;
+    width: scale-rem(1rem);
   }
 }
 

diff --git a/packages/formation/sass/base/_b-mixins.scss b/packages/formation/sass/base/_b-mixins.scss
@@ -1,3 +1,5 @@
+@import '../override-function';
+
 //=======================================
 // Media query helper. Use to set max-width queries.
 // Use this sparingly. Please use @include media instead.
@@ -165,7 +167,7 @@
 @mixin modal-close-button {
   background-color: transparent;
   color: $color-primary;
-  font-size: 2.25rem;
+  font-size: scale-rem(2.25rem);
   padding: 0;
   position: absolute;
   margin: units(2);

diff --git a/packages/formation/sass/base/_b-variables.scss b/packages/formation/sass/base/_b-variables.scss
@@ -1,3 +1,5 @@
+@import '../override-function';
+
 //++++++++++++++++++++++++++++++++++++
 // NOTE:
 //
@@ -17,19 +19,20 @@ $helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
 $font-sans: 'Source Sans Pro', $helvetica !default;
 $font-serif:          "Bitter", $georgia;
 
-$base-font-size:      rem(16px);
+$em-base: 100%;
+$base-font-size: 1rem;
 
 $font-normal:   400 !default;
 $font-bold:     700 !default;
 
-$h6-font-size:        1.5rem;
+$h6-font-size:        scale-rem(1.5rem);
 
 //===================================
 // Magic Numbers
 //===================================
 
-$text-max-width:      70rem; // Note: USWDS value is 53rem;
-$site-max-width:      100rem; // Worksout to about 1000px. USWDS value is 1040px
+$text-max-width:      scale-rem(70rem); // Note: USWDS value is 53rem;
+$site-max-width:      scale-rem(100rem); // Worksout to about 1000px. USWDS value is 1040px
 
 
 //================

diff --git a/packages/formation/sass/base/_va.scss b/packages/formation/sass/base/_va.scss
@@ -1,3 +1,5 @@
+@import '../override-function';
+
 /* 
 ADDED TO CSS-LIBRARY
 file: stylesheets/elements.scss
@@ -28,7 +30,8 @@ body {
   background: $color-white;
   color: $color-base;
   // font-family: $font-sans;
-  font-size: $base-font-size; // ** TODO:  update base font for USWDS v3
+  // font-size: $base-font-size;
+  font-size: 16px;
   font-family: inherit;
 
   &.modal-open {
@@ -277,7 +280,7 @@ input:focus:-ms-input-placeholder {
 }
 
 input.va-input-medium-large {
-  max-width: 18rem;
+  max-width: scale-rem(18rem);
 }
 
 /* 
@@ -287,7 +290,7 @@ issue: vets-design-system-documentation#2042
 */
 hr {
   margin: 2.5em 0;
-  margin: 3rem 0 2.5rem;
+  margin: scale-rule(3rem 0 2.5rem);
   border: 1px solid $color-gray-light;
 }
 
@@ -351,7 +354,7 @@ table {
   flex: 1 0 164px;
 
   @include media($medium-large-screen) {
-    flex-basis: 6rem;
+    flex-basis: scale-rem(6rem);
   }
 }
 
@@ -361,7 +364,7 @@ table {
   border-bottom: none;
   display: block;
   height: 40px;
-  //padding-left: .5rem;
+  //padding-left: scale-rem(.5rem);
   margin: 0;
   width: 164px;
 
@@ -465,18 +468,18 @@ article > h1 {
 // Quick Links
 .va-quicklinks {
   ul {
-    margin-top: 0.8rem;
+    margin-top: scale-rem(0.8rem);
   }
   li {
-    padding: 0.56rem 0;
+    padding: scale-rule(0.56rem 0);
   }
   h3 {
     line-height: 1.2em;
     // TODO: Drop the !important when .home #content h3 and
     // body.fourohfour #content h3 are straightened out.
     font-size: 1.65em;
     color: $color-primary-darkest;
-    margin: 0 0 1rem 0;
+    margin: scale-rem(0 0 1rem 0);
     padding: 0 0 0.2em 0;
   }
 }
@@ -576,7 +579,7 @@ li {
 
 // Cards
 [class*="block-grid-"] > li {
-  padding: 0 0.625rem 1.25rem 0.625rem;
+  padding: scale-rule(0 0.625rem 1.25rem 0.625rem);
 }
 
 // Telephone numbers
@@ -596,7 +599,7 @@ li {
   @include media($medium-large-screen) {
     background: $color-gray-lightest;
     .usa-banner-inner {
-      padding-left: 1.5rem;
+      padding-left: scale-rem(1.5rem);
     }
 
     .usa-banner-content {
@@ -607,13 +610,13 @@ li {
 
   @include media($small-desktop-screen) {
     .usa-banner-inner {
-      padding-left: 0rem;
+      padding-left: 0;
     }
   }
 
   &-inner {
     margin: auto;
-    max-width: 97.5rem;
+    max-width: scale-rem(97.5rem);
     position: relative;
   }
 }
@@ -626,6 +629,7 @@ issue: vets-design-system-documentation#2043
 .va-notice--banner {
   p {
     margin: 0;
+    font-size: scale-rem(1.2rem); //fixes official website of US Gov banner text
   }
 
   a {
@@ -784,21 +788,21 @@ issue: vets-design-system-documentation#2043
   // Flexbox magic means that setting a margin on ::before
   // applies the same margin to ::after
   &::before {
-    margin-right: 12rem;
+    margin-right: scale-rem(12rem);
   }
 
   &::before,
   &::after {
     border-top: 1px solid $color-gray-light;
     content: " ";
     flex: 1 1 50%;
-    padding: 1rem 0;
+    padding: scale-rule(1rem 0);
   }
 
   background: url('#{$formation-image-path}/stars.png') no-repeat center;
-  background-size: 11rem auto;
-  margin: 1.6rem auto auto;
-  padding: 2rem 0 0;
+  background-size: scale-rule(11rem auto);
+  margin: scale-rule(1.6rem auto auto);
+  padding: scale-rule(2rem 0 0);
   text-align: center;
 
   @include media($medium-screen) {
@@ -818,9 +822,9 @@ issue: vets-design-system-documentation#2043
 
   svg {
     display: inline-block;
-    height: 1.2rem;
-    margin-left: 0.5rem;
-    width: 1.2rem;
+    height: scale-rem(1.2rem);
+    margin-left: scale-rem(0.5rem);
+    width: scale-rem(1.2rem);
     vertical-align: -1px;
   }
 }
@@ -832,9 +836,9 @@ issue: vets-design-system-documentation#2043
 }
 
 .va-address-block {
-  margin-left: 5rem;
+  margin-left: scale-rem(5rem);
   border-left: 3px solid $color-primary;
-  padding-left: 1rem;
+  padding-left: scale-rem(1rem);
 }
 
 //====== Flexbox related utility classes
@@ -929,5 +933,5 @@ issue: vets-design-system-documentation#2043
 }
 
 .fieldset-input {
-  margin-top: 3rem;
+  margin-top: scale-rem(3rem);
 }
diff --git a/packages/formation/sass/core.scss b/packages/formation/sass/core.scss
@@ -2,51 +2,65 @@
 // Note: if you add variable files in here, make sure you updated shared-variables.scss
 
 //============ VENDOR PARTIALS ==============//
-@import '~uswds/src/stylesheets/lib/bourbon';
-@import '~uswds/src/stylesheets/lib/neat';
-@import '~uswds/src/stylesheets/lib/normalize'; // Currently 3.0.3
+@import '~uswds/src/stylesheets/lib/bourbon'; // [x]
+@import '~uswds/src/stylesheets/lib/neat'; // [x]
+@import '~uswds/src/stylesheets/lib/normalize'; // Currently 3.0.3 // [x]
 
-@import '~foundation-sites/scss/foundation/components/grid';
-@import '~foundation-sites/scss/foundation/components/block-grid';
+@import '~foundation-sites/scss/foundation/components/grid';  // [x]
+@import '~foundation-sites/scss/foundation/components/block-grid';  // [x]
 
-@import '~@fortawesome/fontawesome-free/scss/fontawesome';
-@import '~@fortawesome/fontawesome-free/scss/solid';
-@import '~@fortawesome/fontawesome-free/scss/brands';
-@import '~@fortawesome/fontawesome-free/scss/regular';
+@import '~@fortawesome/fontawesome-free/scss/fontawesome'; // [x]
+@import '~@fortawesome/fontawesome-free/scss/solid'; // [x]
+@import '~@fortawesome/fontawesome-free/scss/brands'; // [x]
+@import '~@fortawesome/fontawesome-free/scss/regular'; // [x]
 
 // ============ SETTINGS ============//
 // Order matters here! Please don't change it.
-@import '~uswds/src/stylesheets/core/variables';
+// @import '~uswds/src/stylesheets/core/variables'; // [x]
+@import 'formation-overrides/variables'; // [x]
 
 // A VA partial. Here so that we can override the
 // USWDS breakpoint and grid variables from above before
 // the grid, alerts, etc are loaded.
-@import 'base/b-variables';
-@import 'base/b-breakpoints';
+@import 'base/b-variables'; // [x]
+@import 'base/b-breakpoints'; // [x]
 
-@import '~uswds/src/stylesheets/core/fonts';
-@import '~uswds/src/stylesheets/core/grid';
-@import '~uswds/src/stylesheets/core/utilities';
+@import '~uswds/src/stylesheets/core/fonts'; // [x]
+@import '~uswds/src/stylesheets/core/grid'; // [x]
+// @import '~uswds/src/stylesheets/core/utilities'; // [x]
+@import 'formation-overrides/core/utilities'; // [x]
 
 // VA mixins. Here so that we can override USWDS mixins.
 // Specifically, the "focus" mixin.
-@import 'base/b-mixins';
+@import 'base/b-mixins'; // [x]
 
-@import '~uswds/src/stylesheets/core/base';
+@import '~uswds/src/stylesheets/core/base'; // [x]
 
 // ---- U.S. WEB DESIGN STANDARDS ELEMENTS/COMPONENTS --- //
-@import '~uswds/src/stylesheets/elements/buttons';
-@import '~uswds/src/stylesheets/elements/inputs';
-@import '~uswds/src/stylesheets/elements/labels';
-@import '~uswds/src/stylesheets/elements/list';
-@import '~uswds/src/stylesheets/elements/table';
-@import '~uswds/src/stylesheets/elements/typography';
-@import '~uswds/src/stylesheets/components/accordions';
-@import '~uswds/src/stylesheets/components/alerts';
-@import '~uswds/src/stylesheets/components/forms';
-@import '~uswds/src/stylesheets/components/sidenav';
-@import '~uswds/src/stylesheets/components/media-block';
-@import '~uswds/src/stylesheets/components/banner';
+// @import '~uswds/src/stylesheets/elements/buttons'; // [x]
+@import 'formation-overrides/elements/buttons'; // [x]
+// @import '~uswds/src/stylesheets/elements/inputs';
+@import 'formation-overrides/elements/inputs'; // [x]
+// @import '~uswds/src/stylesheets/elements/labels';
+@import 'formation-overrides/elements/labels'; // [x]
+// @import '~uswds/src/stylesheets/elements/lists';
+@import 'formation-overrides/elements/lists'; // [x]
+// @import '~uswds/src/stylesheets/elements/table';
+@import 'formation-overrides/elements/table'; // [x]
+// @import '~uswds/src/stylesheets/elements/typography'; // [x]
+@import 'formation-overrides/elements/typography'; // [x]
+// @import '~uswds/src/stylesheets/components/accordions';
+@import 'formation-overrides/components/accordions'; // [x]
+// @import '~uswds/src/stylesheets/components/alerts';
+@import 'formation-overrides/components/alerts'; // [x]
+// @import '~uswds/src/stylesheets/components/forms';
+@import 'formation-overrides/components/forms'; // [x]
+// @import '~uswds/src/stylesheets/components/sidenav';
+@import 'formation-overrides/components/sidenav'; // [x]
+// @import '~uswds/src/stylesheets/components/media-block';
+@import 'formation-overrides/components/media-block'; // [x]
+// @import '~uswds/src/stylesheets/components/banner';
+@import 'formation-overrides/components/banner'; // [x]
 
 // ----- VA BASE (VARIABLES/HELPERS) ---- //
 @import 'base/b-element-overrides';