18F · aduth · May 5, 2023 · Mar 29, 2023 · Apr 14, 2023 · Apr 14, 2023
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -5,4 +5,4 @@ updates:
     schedule:
       interval: 'daily'
     allow:
-      - dependency-name: 'identity-style-guide'
+      - dependency-name: '@18f/identity-design-system'
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -5,6 +5,6 @@
 //= link intl-tel-input/build/img/flags.png
 //= link intl-tel-input/build/img/flags@2x.png
 
-//= link_tree ../../../node_modules/identity-style-guide/dist/assets/img
-//= link_tree ../../../node_modules/identity-style-guide/dist/assets/fonts
+//= link_tree ../../../node_modules/@18f/identity-design-system/dist/assets/img
+//= link_tree ../../../node_modules/@18f/identity-design-system/dist/assets/fonts
 //= link_tree ../builds
diff --git a/app/assets/stylesheets/_required.scss b/app/assets/stylesheets/_required.scss
@@ -1 +1,50 @@
-@import 'variables/vendor';
+@use 'uswds-core' with (
+  $theme-body-font-size: 'sm',
+  $theme-font-path: '.',
+  $theme-image-path: '@18f/identity-design-system/dist/assets/img',
+  $theme-global-border-box-sizing: true,
+  $theme-global-link-styles: true,
+  $theme-grid-container-max-width: 'tablet-lg',
+  $theme-header-min-width: 'tablet',
+  $theme-link-visited-color: 'primary',
+  $theme-style-body-element: true,
+  $output-these-utilities: (
+    'add-list-reset',
+    'align-items',
+    'align-self',
+    'background-color',
+    'border',
+    'border-color',
+    'border-style',
+    'border-width',
+    'bottom',
+    'clearfix',
+    'color',
+    'display',
+    'flex',
+    'flex-direction',
+    'flex-wrap',
+    'float',
+    'font',
+    'font-family',
+    'font-feature',
+    'font-style',
+    'font-weight',
+    'height',
+    'justify-content',
+    'left',
+    'margin',
+    'margin-horizontal',
+    'margin-vertical',
+    'maxw',
+    'padding',
+    'position',
+    'right',
+    'text-align',
+    'text-transform',
+    'top',
+    'vertical-align',
+    'whitespace',
+    'width',
+  )
+);
diff --git a/app/assets/stylesheets/_uswds.scss b/app/assets/stylesheets/_uswds.scss
@@ -0,0 +1,28 @@
+@use 'uswds-core' as *;
+
+@forward 'uswds-global';
+@forward 'uswds-helpers';
+@forward 'usa-accordion';
+@forward 'usa-alert';
+@forward 'usa-banner';
+@forward 'usa-button';
+@forward 'usa-collection';
+@forward 'usa-form';
+@forward 'usa-header';
+@forward 'usa-icon-list';
+@forward 'usa-icon';
+@forward 'usa-layout-grid';
+@forward 'usa-link';
+@forward 'usa-list';
+@forward 'usa-media-block';
+@forward 'usa-modal';
+@forward 'usa-nav';
+@forward 'usa-process-list';
+@forward 'usa-prose';
+@forward 'usa-sidenav';
+@forward 'usa-skipnav';
+@forward 'usa-step-indicator';
+@forward 'usa-tag';
+@forward 'usa-verification-badge';
+@forward 'uswds-form-controls';
+@forward 'uswds-utilities';
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -1,10 +1,6 @@
-@import 'variables/app';
-@import 'required';
-@import 'identity-style-guide/dist/assets/scss/packages/required';
-@import 'design-system-waiting-room';
-@import 'identity-style-guide/dist/assets/scss/packages/global';
-@import 'identity-style-guide/dist/assets/scss/packages/components';
-@import 'components/all';
-@import 'identity-style-guide/dist/assets/scss/packages/utilities';
-@import 'utilities/all';
-@import 'print';
+@forward 'required';
+@forward 'uswds';
+@forward 'design-system-waiting-room';
+@forward 'components/all';
+@forward 'utilities/all';
+@forward 'print';
diff --git a/app/assets/stylesheets/components/_account-header.scss b/app/assets/stylesheets/components/_account-header.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .account-header__badges {
   @include at-media-max('tablet') {
     @include u-pin-x;

diff --git a/app/assets/stylesheets/components/_alert.scss b/app/assets/stylesheets/components/_alert.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .usa-alert--info-important {
   @include u-bg('accent-cool-darker');
   color: color('white');
@@ -27,3 +29,8 @@
 .usa-alert__text > p:last-child {
   margin-bottom: 0;
 }
+
+// Upstream fix: https://github.com/uswds/uswds/pull/5187
+.usa-alert .usa-alert__body::before {
+  height: units(2);
+}
diff --git a/app/assets/stylesheets/components/_banner.scss b/app/assets/stylesheets/components/_banner.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .usa-banner__inner {
   @include at-media('tablet') {
     justify-content: center;

diff --git a/app/assets/stylesheets/components/_block-link.scss b/app/assets/stylesheets/components/_block-link.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .block-link {
   @include u-position('relative');
   @include u-display('block');

diff --git a/app/assets/stylesheets/components/_btn.scss b/app/assets/stylesheets/components/_btn.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .usa-button {
   // Temporary: To be backported to design system. Margins should be applied at the button element,
   // or at the very least (a) we don't want the margins to offset full-width buttons on mobile, and

diff --git a/app/assets/stylesheets/components/_card.scss b/app/assets/stylesheets/components/_card.scss
@@ -1,3 +1,6 @@
+@use 'uswds-core' as *;
+@use '../variables/app' as *;
+
 .card {
   background-color: color('white');
   max-width: $container-skinny-width;

diff --git a/app/assets/stylesheets/components/_code.scss b/app/assets/stylesheets/components/_code.scss
@@ -0,0 +1,7 @@
+@use 'uswds-core' as *;
+
+code {
+  font-size: 0.875rem;
+  background-color: #fafafa;
+  border-radius: border-radius('sm');
+}
diff --git a/app/assets/stylesheets/components/_file-input.scss b/app/assets/stylesheets/components/_file-input.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 // ===============================================
 // Pending upstream Login Design System revisions:
 // ===============================================

diff --git a/app/assets/stylesheets/components/_footer.scss b/app/assets/stylesheets/components/_footer.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 html,
 body {
   height: 100%;

diff --git a/app/assets/stylesheets/components/_form-steps.scss b/app/assets/stylesheets/components/_form-steps.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .form-steps__focus-anchor[tabindex='-1']:focus {
   outline: none;
 

diff --git a/app/assets/stylesheets/components/_form.scss b/app/assets/stylesheets/components/_form.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   /* stylelint-disable-next-line property-no-vendor-prefix */
@@ -11,7 +13,6 @@ input::-webkit-inner-spin-button {
 
 .usa-form-group--error {
   border-left-style: none;
-  margin-top: units(3); // Remove after: https://github.com/uswds/uswds/issues/4189
   padding-left: 0;
 
   @include at-media('desktop') {

diff --git a/app/assets/stylesheets/components/_full-screen.scss b/app/assets/stylesheets/components/_full-screen.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .has-full-screen-overlay {
   overflow: hidden;
 }

diff --git a/app/assets/stylesheets/components/_hr.scss b/app/assets/stylesheets/components/_hr.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 hr {
   border: 0;
   border-bottom: 1px solid color('primary-light');

diff --git a/app/assets/stylesheets/components/_icon.scss b/app/assets/stylesheets/components/_icon.scss
@@ -1,3 +1,6 @@
+@use 'uswds-core' as *;
+@use '../variables/app' as *;
+
 $icon-min-padding: 2px;
 
 // Upstream: https://github.com/uswds/uswds/pull/4493

diff --git a/app/assets/stylesheets/components/_language-picker.scss b/app/assets/stylesheets/components/_language-picker.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .language-picker {
   position: relative;
   width: auto;
@@ -64,10 +66,10 @@
     }
 
     &::after {
-      background-image: url(identity-style-guide/dist/assets/img/angle-arrow-up.svg);
+      background-image: url(@18f/identity-design-system/dist/assets/img/angle-arrow-up.svg);
 
       @include at-media('tablet') {
-        background-image: url(identity-style-guide/dist/assets/img/angle-arrow-up-white.svg);
+        background-image: url(@18f/identity-design-system/dist/assets/img/angle-arrow-up-white.svg);
       }
     }
   }
@@ -77,7 +79,7 @@
     color: color('white');
 
     &::after {
-      background-image: url(identity-style-guide/dist/assets/img/angle-arrow-down-white.svg);
+      background-image: url(@18f/identity-design-system/dist/assets/img/angle-arrow-down-white.svg);
     }
   }
 }

diff --git a/app/assets/stylesheets/components/_memorable-date.scss b/app/assets/stylesheets/components/_memorable-date.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .usa-memorable-date input[type='text'] {
   @include u-padding-x(1);
 }
diff --git a/app/assets/stylesheets/components/_modal.scss b/app/assets/stylesheets/components/_modal.scss
@@ -1,3 +1,6 @@
+@use 'uswds-core' as *;
+@use '../variables/app' as *;
+
 .usa-modal-overlay {
   // Temporary styles to avoid inheriting too much of the USWDS opinionated modal styling until
   // modal styles are settled in the Login.gov Design System.
@@ -6,9 +9,6 @@
   align-items: start;
   justify-content: center;
 
-  // Pending upstream Login Design System revision:
-  background: rgba(color('base-darker'), 50%);
-
   @include at-media('tablet') {
     align-items: center;
   }

diff --git a/app/assets/stylesheets/components/_nav.scss b/app/assets/stylesheets/components/_nav.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .page-header--basic {
   @include u-flex('align-center', 'justify-center');
   @include u-display('flex');
@@ -10,8 +12,19 @@
 }
 
 .sidenav-mobile .usa-nav__close {
-  @include add-background-svg('close-blue-60v-alt');
+  @include add-background-svg('close-primary');
   @include u-square(6);
   background-position: center center;
   background-repeat: no-repeat;
 }
+
+@media (prefers-reduced-motion) {
+  // The design system should be responsible for disabling inessential animations when user prefers
+  // reduced motion. This is not currently implemented, but the style is implemented ad hoc here
+  // for use in feature specs (see BrowserEmulationHelper#emulate_reduced_motion).
+  //
+  // Upstream issue: https://github.com/uswds/uswds/issues/5256
+  .usa-nav.is-visible {
+    animation: none;
+  }
+}
diff --git a/app/assets/stylesheets/components/_one-time-code-input.scss b/app/assets/stylesheets/components/_one-time-code-input.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 lg-one-time-code-input {
   display: block;
 

diff --git a/app/assets/stylesheets/components/_page-heading.scss b/app/assets/stylesheets/components/_page-heading.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .page-heading {
   @include u-margin-top(0);
   @include u-margin-bottom(2);

diff --git a/app/assets/stylesheets/components/_password-toggle.scss b/app/assets/stylesheets/components/_password-toggle.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 lg-password-toggle {
   display: block;
 

diff --git a/app/assets/stylesheets/components/_password.scss b/app/assets/stylesheets/components/_password.scss
@@ -1,4 +1,4 @@
-// password strength module
+@use 'uswds-core' as *;
 
 $weak: #e80e0e;
 $average: #ffac00;

diff --git a/app/assets/stylesheets/components/_personal-key.scss b/app/assets/stylesheets/components/_personal-key.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .personal-key-block {
   @include u-padding-y(2);
   background-image: url('personal-key/pkey-block.svg');

diff --git a/app/assets/stylesheets/components/_phone-input.scss b/app/assets/stylesheets/components/_phone-input.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 lg-phone-input {
   display: block;
 

diff --git a/app/assets/stylesheets/components/_profile-section.scss b/app/assets/stylesheets/components/_profile-section.scss
@@ -1,3 +1,6 @@
+@use 'uswds-core' as *;
+@use '../variables/app' as *;
+
 .profile-info-box {
   border: 0;
   border-radius: 0;

diff --git a/app/assets/stylesheets/components/_spinner-button.scss b/app/assets/stylesheets/components/_spinner-button.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 lg-spinner-button {
   display: block;
 

diff --git a/app/assets/stylesheets/components/_step-indicator.scss b/app/assets/stylesheets/components/_step-indicator.scss
@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 $step-indicator-current-step-border-width: 3px;
 $step-indicator-line-height: 4px;
 

diff --git a/app/assets/stylesheets/components/_tag.scss b/app/assets/stylesheets/components/_tag.scss
diff --git a/app/assets/stylesheets/components/_troubleshooting-options.scss b/app/assets/stylesheets/components/_troubleshooting-options.scss
@@ -1,3 +1,6 @@
+@use 'uswds-core' as *;
+@use '../utilities/typography' as *;
+
 .troubleshooting-options {
   @include u-margin-y(4);
 

diff --git a/app/assets/stylesheets/components/all.scss b/app/assets/stylesheets/components/all.scss
@@ -5,6 +5,7 @@
 @import 'block-link';
 @import 'btn';
 @import 'card';
+@import 'code';
 @import 'click-observer';
 @import 'file-input';
 @import 'form-steps';
@@ -28,6 +29,5 @@
 @import 'spinner-button';
 @import 'spinner-dots';
 @import 'step-indicator';
-@import 'tag';
 @import 'troubleshooting-options';
 @import 'memorable-date';
diff --git a/app/assets/stylesheets/document-capture.css.scss b/app/assets/stylesheets/document-capture.css.scss
@@ -1,2 +1,2 @@
-@import 'required';
-@import '../../javascript/packages/document-capture/styles';
+@forward 'required';
+@forward '../../javascript/packages/document-capture/styles';