@department-of-veterans-affairs/css-library 0.6.0 → 0.7.3

package/dist/{elements.css → base/headings.css}

@@ -1,4 +1,3 @@
-/*! This is intentionally left empty for now */
 /*
 * * * * * ==============================
 * * * * * ==============================
@@ -1383,62 +1382,6 @@ Sets:
 Easing
 ----------------------------------------
 */
-html,
-body {
-  padding: 0;
-  margin: 0;
-}
-
-html {
-  font-weight: 500;
-}
-
-body {
-  background: #ffffff;
-  color: #1b1b1b;
-}
-
-article > h1 {
-  margin-top: 0;
-}
-
-hr {
-  margin: 2.5em 0;
-  margin: 48px 0 40px;
-  border: 1px solid #a9aeb1;
-}
-
-#content abbr {
-  border-bottom: 0px;
-  text-decoration: none;
-  font-weight: inherit;
-  font-style: inherit;
-  color: inherit;
-  cursor: pointer;
-}
-
-a {
-  color: #005ea2;
-  text-decoration: underline;
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-timing-function: ease-in-out;
-  transition-timing-function: ease-in-out;
-  -webkit-transition-property: color, background-color, border-color;
-  transition-property: color, background-color, border-color;
-}
-a:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: inherit;
-  text-decoration: underline;
-}
-a:active {
-  background: rgba(0, 0, 0, 0.05);
-}
-a:visited, a:visited abbr {
-  color: #54278f;
-}
-
 h1 {
   margin-top: 0;
 }
@@ -1526,27 +1469,27 @@ h6 {
 
 h1 {
   margin-top: 0;
-  font-size: 4rem;
+  font-size: 2.5rem;
 }
 
 h2 {
-  font-size: 3rem;
+  font-size: 1.875rem;
 }
 
 h3 {
-  font-size: 2rem;
+  font-size: 1.25rem;
 }
 
 h4 {
-  font-size: 1.7rem;
+  font-size: 1.0625rem;
 }
 
 h5 {
-  font-size: 1.5rem;
+  font-size: 0.9375rem;
 }
 
 h6 {
-  font-size: 1.5rem;
+  font-size: 0.9375rem;
 }
 
 @media (max-width: 481px) {
@@ -1563,78 +1506,18 @@ h6 {
   font-weight: 700;
 }
 
-ul {
-  padding: 0 0 0 1.5em;
-  list-style: square;
-}
-
-ol {
-  margin: 0 0 0 1.25em;
-  list-style-position: outside;
-}
-
-ul > ul,
-ul ol,
-ol > ul,
-ol ol {
-  margin: 0.5em 0 0.5em 1.2em;
-}
-
-dd {
-  margin-left: 0;
-}
-
-dd + dt {
-  margin-top: 1.5em;
-}
-
-figure {
-  font-size: 0.85em;
-  margin-left: -15px;
-  margin-right: -15px;
-}
-@media screen and (min-width: 1201px), print and (min-width: 1201px) {
-  figure {
-    margin-left: -16.66667%;
-    margin-right: -16.66667%;
+@media (max-width: 481px) {
+  h1 {
+    font-size: 30px;
+  }
+  h2 {
+    font-size: 24px;
   }
 }
-
-figcaption {
-  color: #162e51;
-}
-
-input::-webkit-input-placeholder {
-  color: #565c65;
-}
-
-input::-moz-placeholder {
-  color: #565c65;
-}
-
-input:-ms-input-placeholder {
-  color: #565c65;
-}
-
-input:focus::-webkit-input-placeholder {
-  color: transparent;
-}
-
-input:focus::-moz-placeholder {
-  color: transparent;
-}
-
-input:focus:-ms-input-placeholder {
-  color: transparent;
-}
-
-.va-notice--banner p {
-  margin: 0;
-}
-.va-notice--banner a {
-  background-image: none;
-  color: inherit;
-  padding: 0;
+h6 {
+  margin: 0.5em 0 0;
+  text-transform: none;
+  font-weight: 700;
 }
 
-/*# sourceMappingURL=elements.css.map */
+/*# sourceMappingURL=headings.css.map */

package/dist/full.css

@@ -3319,126 +3319,126 @@ through all possible variants
   font-style: normal;
   font-weight: 300;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2");
 }
 @font-face {
   font-family: "Roboto Mono Web";
   font-style: normal;
   font-weight: 400;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2");
 }
 @font-face {
   font-family: "Roboto Mono Web";
   font-style: normal;
   font-weight: 700;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2");
 }
 @font-face {
   font-family: "Roboto Mono Web";
   font-style: italic;
   font-weight: 300;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2");
 }
 @font-face {
   font-family: "Roboto Mono Web";
   font-style: italic;
   font-weight: 400;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2");
 }
 @font-face {
   font-family: "Roboto Mono Web";
   font-style: italic;
   font-weight: 700;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2");
 }
 @font-face {
   font-family: "Source Sans Pro Web";
   font-style: normal;
   font-weight: 300;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2");
 }
 @font-face {
   font-family: "Source Sans Pro Web";
   font-style: normal;
   font-weight: 400;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2");
 }
 @font-face {
   font-family: "Source Sans Pro Web";
   font-style: normal;
   font-weight: 700;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2");
 }
 @font-face {
   font-family: "Source Sans Pro Web";
   font-style: italic;
   font-weight: 300;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2");
 }
 @font-face {
   font-family: "Source Sans Pro Web";
   font-style: italic;
   font-weight: 400;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2");
 }
 @font-face {
   font-family: "Source Sans Pro Web";
   font-style: italic;
   font-weight: 700;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2");
 }
 @font-face {
   font-family: "Merriweather Web";
   font-style: normal;
   font-weight: 300;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2");
 }
 @font-face {
   font-family: "Merriweather Web";
   font-style: normal;
   font-weight: 400;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2");
 }
 @font-face {
   font-family: "Merriweather Web";
   font-style: normal;
   font-weight: 700;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2");
 }
 @font-face {
   font-family: "Merriweather Web";
   font-style: italic;
   font-weight: 300;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2");
 }
 @font-face {
   font-family: "Merriweather Web";
   font-style: italic;
   font-weight: 400;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2");
 }
 @font-face {
   font-family: "Merriweather Web";
   font-style: italic;
   font-weight: 700;
   font-display: fallback;
-  src: url(../node_modules/@uswds/uswds/dist/fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2");
+  src: url(~@uswds/uswds/dist/fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2");
 }
 /* stylelint-enable */
 /* latin */
@@ -4465,12 +4465,6 @@ body {
   font-size: 16px;
 }
 
-p {
-  line-height: 1.5;
-  margin-bottom: 1em;
-  margin-top: 1em;
-}
-
 a {
   color: #005ea2;
   text-decoration: underline;
@@ -5564,6 +5558,96 @@ fieldset {
   }
 }
 
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 10px;
+  font-weight: 500;
+}
+
+body {
+  background: #ffffff;
+  color: #1b1b1b;
+  font-size: 16px;
+  font-family: inherit;
+}
+body.modal-open {
+  overflow: hidden;
+}
+
+.show-on-focus {
+  position: absolute;
+  top: -10em;
+  background: #ffffff;
+  padding: 1em;
+  margin: 1em;
+  color: #162e51;
+  display: block;
+  font-weight: 600;
+}
+.show-on-focus:focus {
+  position: inherit;
+  top: auto;
+  outline: 2px solid #ffbe2e;
+}
+
+body .row.full {
+  width: 100%;
+  max-width: 100%;
+}
+
+.sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute !important;
+  width: 1px;
+  word-wrap: normal !important;
+}
+
+.no-print-no-sr {
+  display: none !important;
+}
+
+#content abbr {
+  border-bottom: 0px;
+  text-decoration: none;
+  font-weight: inherit;
+  font-style: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+a {
+  color: #005ea2;
+  text-decoration: underline;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  -webkit-transition-property: color, background-color, border-color;
+  transition-property: color, background-color, border-color;
+}
+a:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: inherit;
+  text-decoration: underline;
+}
+a:active {
+  background: rgba(0, 0, 0, 0.05);
+}
+a:visited, a:visited abbr {
+  color: #54278f;
+}
+
 /*
 * * * * * ==============================
 * * * * * ==============================
@@ -6936,96 +7020,6 @@ Sets:
 Easing
 ----------------------------------------
 */
-html,
-body {
-  padding: 0;
-  margin: 0;
-}
-
-html {
-  font-size: 10px;
-  font-weight: 500;
-}
-
-body {
-  background: #ffffff;
-  color: #1b1b1b;
-  font-size: 16px;
-  font-family: inherit;
-}
-body.modal-open {
-  overflow: hidden;
-}
-
-.show-on-focus {
-  position: absolute;
-  top: -10em;
-  background: #ffffff;
-  padding: 1em;
-  margin: 1em;
-  color: #162e51;
-  display: block;
-  font-weight: 600;
-}
-.show-on-focus:focus {
-  position: inherit;
-  top: auto;
-  outline: 2px solid #ffbe2e;
-}
-
-body .row.full {
-  width: 100%;
-  max-width: 100%;
-}
-
-.sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute !important;
-  width: 1px;
-  word-wrap: normal !important;
-}
-
-.no-print-no-sr {
-  display: none !important;
-}
-
-#content abbr {
-  border-bottom: 0px;
-  text-decoration: none;
-  font-weight: inherit;
-  font-style: inherit;
-  color: inherit;
-  cursor: pointer;
-}
-
-a {
-  color: #005ea2;
-  text-decoration: underline;
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-timing-function: ease-in-out;
-  transition-timing-function: ease-in-out;
-  -webkit-transition-property: color, background-color, border-color;
-  transition-property: color, background-color, border-color;
-}
-a:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: inherit;
-  text-decoration: underline;
-}
-a:active {
-  background: rgba(0, 0, 0, 0.05);
-}
-a:visited, a:visited abbr {
-  color: #54278f;
-}
-
 h1 {
   margin-top: 0;
 }
@@ -7101,27 +7095,41 @@ h6 {
 
 h1 {
   margin-top: 0;
-  font-size: 4rem;
+  font-size: 2.5rem;
 }
 
 h2 {
-  font-size: 3rem;
+  font-size: 1.875rem;
 }
 
 h3 {
-  font-size: 2rem;
+  font-size: 1.25rem;
 }
 
 h4 {
-  font-size: 1.7rem;
+  font-size: 1.0625rem;
 }
 
 h5 {
-  font-size: 1.5rem;
+  font-size: 0.9375rem;
 }
 
 h6 {
-  font-size: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+@media (max-width: 481px) {
+  h1 {
+    font-size: 30px;
+  }
+  h2 {
+    font-size: 24px;
+  }
+}
+h6 {
+  margin: 0.5em 0 0;
+  text-transform: none;
+  font-weight: 700;
 }
 
 @media (max-width: 481px) {
@@ -7314,6 +7322,7 @@ table {
 }
 
 .va-notice--banner p {
+  font-size: 16px;
   margin: 0;
 }
 .va-notice--banner a {
@@ -7352,6 +7361,8 @@ article > h1 {
   max-width: 48.125rem;
 }
 .va-introtext p {
+  font-size: 1.25rem;
+  font-weight: 400;
   line-height: 1.7;
 }
 
@@ -7650,6 +7661,7 @@ p.usa-alert-heading {
 }
 
 .va-nav-breadcrumbs-list {
+  font-size: 16px;
   float: none !important;
   position: relative;
 }

package/dist/tokens/css/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 May 2024 17:23:46 GMT
+ * Generated on Thu, 30 May 2024 19:16:32 GMT
  */
 
 :root {
@@ -95,6 +95,16 @@
   --vads-color-blue-cool: #345d96;
   --vads-color-blue-cool-light: #4a77b4;
   --vads-color-blue-cool-lightest: #98afd2;
+  --vads-color-action-surface-default-on-dark: #58b4ff;
+  --vads-color-action-surface-destructive-on-dark: #fb5a47;
+  --vads-color-action-border-base-active-on-light: #2e2e2e;
+  --vads-color-action-border-base-active-on-dark: #adadad;
+  --vads-color-feedback-surface-info-on-dark: #112f4e;
+  --vads-color-feedback-surface-success-on-dark: #19311e;
+  --vads-color-feedback-surface-warning-on-dark: #422d19;
+  --vads-color-feedback-surface-error-on-dark: #5c1111;
+  --vads-color-feedback-border-warning-on-dark: #face00;
+  --vads-color-bg-default-on-dark: #171716;
   --font-family-sans: 'Source Sans Pro', '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;
@@ -159,9 +169,11 @@
   --uswds-system-color-blue-70: #274863;
   --uswds-system-color-blue-80: #1f303e;
   --uswds-system-color-blue-90: #11181d;
+  --uswds-system-color-blue-vivid-30: #58b4ff;
   --uswds-system-color-blue-vivid-50: #0076d6;
   --uswds-system-color-blue-vivid-60: #005ea2;
   --uswds-system-color-blue-vivid-70: #0b4778;
+  --uswds-system-color-blue-vivid-80: #112f4e;
   --uswds-system-color-blue-cool-60: #2e6276;
   --uswds-system-color-blue-cool-vivid-5: #e1f3f8;
   --uswds-system-color-blue-cool-vivid-20: #97d4ea;
@@ -215,6 +227,7 @@
   --uswds-system-color-gray-cool-90: #1c1d1f;
   --uswds-system-color-gray-warm-10: #e6e6e2;
   --uswds-system-color-gray-warm-70: #454540;
+  --uswds-system-color-gray-warm-90: #171716;
   --uswds-system-color-green-warm-50: #6f7a41;
   --uswds-system-color-green-cool-5: #ecf3ec;
   --uswds-system-color-green-cool-20: #b4d0b9;
@@ -225,14 +238,17 @@
   --uswds-system-color-green-cool-vivid-50: #008817;
   --uswds-system-color-green-cool-vivid-60: #216e1f;
   --uswds-system-color-green-cool-vivid-70: #154c21;
+  --uswds-system-color-green-cool-vivid-80: #19311e;
   --uswds-system-color-orange-40: #dd7533;
   --uswds-system-color-orange-warm-50: #bd5727;
   --uswds-system-color-red-30: #f2938c;
   --uswds-system-color-red-50: #d83933;
   --uswds-system-color-red-60: #a23737;
   --uswds-system-color-red-70: #6f3331;
+  --uswds-system-color-red-vivid-40: #fb5a47;
   --uswds-system-color-red-vivid-60: #b50909;
   --uswds-system-color-red-vivid-70: #8b0a03;
+  --uswds-system-color-red-vivid-80: #5c1111;
   --uswds-system-color-red-cool-vivid-10: #f8dfe2;
   --uswds-system-color-red-cool-vivid-50: #e41d3d;
   --uswds-system-color-red-cool-vivid-60: #b21d38;
@@ -248,6 +264,7 @@
   --uswds-system-color-yellow-50: #8a7237;
   --uswds-system-color-yellow-vivid-10: #fee685;
   --uswds-system-color-yellow-vivid-20: #face00;
+  --uswds-system-color-yellow-vivid-80: #422d19;
   --uswds-system-color-indigo-cool-60: #3f57a6;
   --uswds-system-color-mint-cool-50: #40807e;
 }