@department-of-veterans-affairs/css-library 0.12.2 → 0.13.1-rc1

package/dist/stylesheets/formation-overrides/core/base.css

@@ -44,21 +44,21 @@ input:not([disabled]):focus,
 select:not([disabled]):focus,
 textarea:not([disabled]):focus,
 button:not([disabled]):focus {
-  outline: 2px dotted #aeb0b5;
-  outline-offset: 3px;
+  outline: 2px solid #face00;
+  outline-offset: 2px;
 }
 
 iframe:focus,
 [href]:focus,
 [tabindex]:focus,
 [contentEditable=true]:focus {
-  outline: 2px dotted #aeb0b5;
-  outline-offset: 3px;
+  outline: 2px solid #face00;
+  outline-offset: 2px;
 }
 
 .usa-focus {
-  outline: 2px dotted #aeb0b5;
-  outline-offset: 3px;
+  outline: 2px solid #face00;
+  outline-offset: 2px;
 }
 
 /*# sourceMappingURL=base.css.map */

package/dist/stylesheets/formation-overrides/elements/buttons.css

@@ -47,7 +47,7 @@ button,
   color: #ffffff;
   cursor: pointer;
   display: inline-block;
-  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 16px;
   font-weight: 700;
   line-height: 1;

package/dist/stylesheets/formation-overrides/elements/inputs.css

@@ -160,7 +160,7 @@ legend {
 
 .usa-form-hint {
   color: #757575;
-  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   margin-bottom: 0;
 }
 
@@ -233,8 +233,8 @@ legend {
 }
 
 [type=radio]:focus + label::before {
-  outline: 2px dotted #aeb0b5;
-  outline-offset: 6px;
+  outline: 2px solid #face00;
+  outline-offset: 4px;
 }
 
 [type=checkbox]:disabled + label {
@@ -242,8 +242,8 @@ legend {
 }
 
 [type=checkbox]:focus + label::before {
-  outline: 2px dotted #aeb0b5;
-  outline-offset: 3px;
+  outline: 2px solid #face00;
+  outline-offset: 2px;
 }
 
 [type=checkbox]:disabled + label::before,

package/dist/stylesheets/formation-overrides/elements/typography.css

@@ -30,7 +30,7 @@
 }
 
 html {
-  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 16px;
 }
 
@@ -52,8 +52,8 @@ a:hover, a:active {
   color: #1a4480;
 }
 a:focus {
-  outline: 2px dotted #aeb0b5;
-  outline-offset: 3px;
+  outline: 2px solid #face00;
+  outline-offset: 2px;
 }
 a:visited {
   color: #54278f;
@@ -190,7 +190,7 @@ dfn {
 .usa-sans a,
 .usa-sans li,
 .usa-sans span {
-  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
 }
 .usa-sans a {
   border-bottom: none;

package/dist/stylesheets/modules/m-action-link.css

@@ -1398,29 +1398,36 @@ a.vads-c-action-link--blue, a.vads-c-action-link--green, a.vads-c-action-link--w
   display: inline-block;
 }
 a.vads-c-action-link--blue:before, a.vads-c-action-link--green:before, a.vads-c-action-link--white:before {
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  font-size: 175%;
-  content: "\f138";
-  content: "\f138"/"";
+  background-image: url("/img/arrow-right-white.svg");
+  background-size: 18px 18px;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 50%;
+  content: "";
+  height: 30px;
+  width: 30px;
   position: absolute;
-  left: 0px;
-  top: -4px;
+  top: 2px;
+  left: 0;
+  font-family: unset;
+  font-weight: unset;
+  font-size: unset;
 }
 
 a.vads-c-action-link--blue:before {
-  color: #005ea2;
+  background-color: #005ea2;
 }
 
 a.vads-c-action-link--green:before {
-  color: #008817;
+  background-color: #008817;
 }
 
 a.vads-c-action-link--white {
   color: #ffffff;
 }
 a.vads-c-action-link--white:before {
-  color: #ffffff;
+  background-image: url("/img/arrow-right.svg");
+  background-color: #ffffff;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-timing-function: ease-in-out;
@@ -1434,7 +1441,7 @@ a.vads-c-action-link--white:hover {
   background-color: transparent;
 }
 a.vads-c-action-link--white:hover:before {
-  color: #face00;
+  background-color: #face00;
 }
 
 /*# sourceMappingURL=m-action-link.css.map */

package/dist/stylesheets/modules/m-alert.css

@@ -22,14 +22,23 @@
   width: 100%;
 }
 .usa-alert::before {
-  display: block;
-  width: auto;
-  background: none;
-  font-family: "Font Awesome 5 Free";
-  font-size: 1.25rem;
-  margin-right: units(2);
+  background-image: url("/img/info.svg");
+  background-size: 35px 35px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: unset;
+  border-radius: 50%;
+  content: "";
+  height: 31px;
+  width: 31px;
+  top: 2px;
+  left: 0;
+  font-family: unset;
+  font-weight: unset;
+  font-size: unset;
+  margin-right: 1rem;
   position: static;
-  font-weight: 900;
+  display: block;
 }
 .usa-alert .usa-alert-body {
   display: table-cell;
@@ -66,7 +75,7 @@
   border-left-color: #00a6d2;
 }
 .usa-alert-info::before {
-  content: "\f05a";
+  background-image: url("/img/info.svg");
 }
 .usa-alert-info.background-color-only {
   background-color: #e1f3f8;
@@ -75,8 +84,7 @@
   border-left-color: #cd2026;
 }
 .usa-alert-error::before {
-  color: #cd2026;
-  content: "\f06a";
+  background-image: url("/img/error.svg");
 }
 .usa-alert-error.background-color-only {
   background-color: #f9dede;
@@ -85,8 +93,7 @@
   border-left-color: #008817;
 }
 .usa-alert-success::before {
-  color: #008817;
-  content: "\f00c";
+  background-image: url("/img/success.svg");
 }
 .usa-alert-success.background-color-only {
   background-color: #e7f4e4;
@@ -95,7 +102,7 @@
   border-left-color: #fdb81e;
 }
 .usa-alert-warning::before {
-  content: "\f071";
+  background-image: url("/img/warning.svg");
 }
 .usa-alert-warning.background-color-only {
   background-color: #fff1d2;
@@ -103,10 +110,6 @@
 .usa-alert-continue {
   border-left-color: #008817;
 }
-.usa-alert-continue::before {
-  color: #008817;
-  content: "\f023";
-}
 .usa-alert.background-color-only {
   border-left: none;
   padding: 1.25rem;
@@ -243,12 +246,7 @@ p.usa-alert-heading {
   border-top: 0.625rem solid #00a6d2;
 }
 .usa-alert-full-width-info .usa-alert:before, .usa-alert-full-width-information .usa-alert:before {
-  content: "\f05a";
   background: none;
-  font-size: 1.25rem;
-  margin-right: 0.9375rem;
-  position: static;
-  font-weight: 900;
 }
 
 /*# sourceMappingURL=m-alert.css.map */

package/dist/stylesheets/modules/m-emergency-banner.css

@@ -14,7 +14,7 @@
   margin-right: -22.5px;
 }
 .vads-c-emergency-banner .usa-alert .usa-alert-heading {
-  font-family: "Source Sans Pro";
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 1rem;
   margin-top: 4px;
   margin-left: 30.5px;

package/dist/stylesheets/modules/m-form-process.css

@@ -207,7 +207,7 @@
 }
 
 .schemaform-array-row-title:focus {
-  outline: 2px dotted #aeb0b5;
+  outline: 2px solid #face00;
   outline-offset: 2px;
   display: inline-block;
 }

package/dist/stylesheets/modules/m-maintenance-banner.css

@@ -14,7 +14,7 @@
   margin-right: -22.5px;
 }
 .vads-c-maintenance-banner .usa-alert .usa-alert-heading {
-  font-family: "Source Sans Pro";
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 1rem;
   margin-top: 4px;
   margin-left: 30.5px;

package/dist/stylesheets/modules/m-megamenu.css

@@ -108,7 +108,7 @@
   .mega-menu .vetnav-panel--submenu:not([hidden]) h3 {
     display: block;
     color: #000000;
-    font-family: Source Sans Pro, sans serif;
+    font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
     font-size: 16px;
     font-weight: bold;
     margin-top: 4px;
@@ -263,7 +263,7 @@
   }
   #mega-menu .vetnav-panel--submenu:not([hidden]) h3,
   .mega-menu .vetnav-panel--submenu:not([hidden]) h3 {
-    font-family: Source Sans Pro, sans serif;
+    font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
     font-size: 16px;
   }
 }

package/dist/stylesheets/modules/m-nav-sidebar.css

@@ -233,7 +233,7 @@
   font-size: 15px;
 }
 .va-sidebarnav .usa-sidenav-sub_list a:focus {
-  outline: 2px dotted #aeb0b5;
+  outline: 2px solid #face00;
   outline-offset: 0px;
 }
 .va-sidebarnav .usa-sidenav-sub_list a:hover, .va-sidebarnav .usa-sidenav-sub_list a:focus {

package/dist/stylesheets/shame.css

@@ -18,7 +18,7 @@
 **/
 @media screen and (min-width: 768px), print and (min-width: 768px) {
   [type=submit] {
-    margin-top: calc(3rem - 0.2em);
+    margin-top: calc(1.875rem - 0.2em);
   }
 }
 
@@ -48,7 +48,7 @@ fieldset {
 
 .usa-form-note {
   float: right;
-  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 0.9375rem;
   margin: 0 0 scale(1.5rem);
 }
@@ -152,6 +152,7 @@ fieldset {
 **/
 body .row {
   max-width: 62.5em;
+  margin: 0 auto;
 }
 body .row-padded {
   max-width: 62.5rem;

package/dist/stylesheets/utilities.css

@@ -5305,7 +5305,7 @@ through all possible variants
 }
 
 .vads-u-font-family--sans {
-  font-family: Source Sans Pro, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif !important;
+  font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif !important;
 }
 
 .vads-u-font-family--serif {
@@ -14342,7 +14342,7 @@ through all possible variants
     order: 0 !important;
   }
   .medium-screen\:vads-u-font-family--sans {
-    font-family: Source Sans Pro, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif !important;
+    font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif !important;
   }
   .medium-screen\:vads-u-font-family--serif {
     font-family: Bitter, Georgia, Cambria, Times New Roman, Times, serif !important;

package/dist/tokens/css/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 07 Oct 2024 15:37:16 GMT
+ * Generated on Fri, 01 Nov 2024 16:45:08 GMT
  */
 
 :root {
@@ -111,10 +111,10 @@
   --vads-color-background-default-on-dark: #171716;
   --vads-color-forms-surface-active-on-light: #ecf1f7;
   --vads-color-forms-surface-active-on-dark: #252f3e;
-  --font-family-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+  --font-family-sans: 'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
   --font-family-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
   --font-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
-  --font-source-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+  --font-source-sans: 'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
   --font-weight-normal: 400;
   --font-weight-bold: 700;
   --font-style-normal: normal;

package/dist/tokens/json/variables.json

@@ -1993,11 +1993,11 @@
   "font": {
     "family": {
       "sans": {
-        "value": "'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif",
+        "value": "'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif",
         "filePath": "tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif"
+          "value": "'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif"
         },
         "name": "font-family-sans",
         "attributes": {
@@ -2050,11 +2050,11 @@
     },
     "source": {
       "sans": {
-        "value": "'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif",
+        "value": "'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif",
         "filePath": "tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif"
+          "value": "'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif"
         },
         "name": "font-source-sans",
         "attributes": {

package/dist/tokens/scss/variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 07 Oct 2024 15:37:16 GMT
+// Generated on Fri, 01 Nov 2024 16:45:08 GMT
 
 $xsmall-screen: 320px;
 $small-screen: 481px;
@@ -109,10 +109,10 @@ $vads-color-feedback-border-warning-on-dark: #face00;
 $vads-color-background-default-on-dark: #171716;
 $vads-color-forms-surface-active-on-light: #ecf1f7;
 $vads-color-forms-surface-active-on-dark: #252f3e;
-$font-family-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$font-family-sans: 'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 $font-family-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
 $font-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
-$font-source-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$font-source-sans: 'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 $font-weight-normal: 400;
 $font-weight-bold: 700;
 $font-style-normal: normal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/css-library",
-  "version": "0.12.2",
+  "version": "0.13.1-rc1",
   "description": "Department of Veterans Affairs stylesheets, tokens, and utilities",
   "packageManager": "yarn@3.2.0",
   "files": [
@@ -29,4 +29,4 @@
     "@uswds/uswds": "^3.8.1",
     "rimraf": "^5.0.5"
   }
-}
+}