#3190: Heading refactor and other CSS fixes - [no sandbox]

src/registrar/assets/src/js/getgov/table-edit-member-domains.js

@@ -259,7 +259,7 @@ export class EditMemberDomainsTable extends BaseTable {
     // Append unassigned domains section
     if (this.removedDomains.length) {
       const unassignedHeader = document.createElement('h3');
-      unassignedHeader.classList.add('header--body', 'text-primary', 'margin-bottom-1');
+      unassignedHeader.classList.add('margin-bottom-1');
       unassignedHeader.textContent = 'Unassigned domains';
       domainAssignmentSummary.appendChild(unassignedHeader);
       domainAssignmentSummary.appendChild(unassignedDomainsList);
@@ -268,15 +268,15 @@ export class EditMemberDomainsTable extends BaseTable {
     // Append assigned domains section
     if (this.addedDomains.length) {
       const assignedHeader = document.createElement('h3');
-      assignedHeader.classList.add('header--body', 'text-primary', 'margin-bottom-1');
+      assignedHeader.classList.add('margin-bottom-1');
       assignedHeader.textContent = 'Assigned domains';
       domainAssignmentSummary.appendChild(assignedHeader);
       domainAssignmentSummary.appendChild(assignedDomainsList);
     }
 
     // Append total assigned domains section
     const totalHeader = document.createElement('h3');
-    totalHeader.classList.add('header--body', 'text-primary', 'margin-bottom-1');
+    totalHeader.classList.add('margin-bottom-1');
     totalHeader.textContent = 'Total assigned domains';
     domainAssignmentSummary.appendChild(totalHeader);
     const totalCount = document.createElement('p');

src/registrar/assets/src/js/getgov/table-members.js

@@ -245,7 +245,7 @@ export class MembersTable extends BaseTable {
     // Only generate HTML if the member has one or more assigned domains
     if (num_domains > 0) {
       domainsHTML += "<div class='desktop:grid-col-5 margin-bottom-2 desktop:margin-bottom-0'>";
-      domainsHTML += "<h4 class='margin-y-0 text-primary'>Domains assigned</h4>";
+      domainsHTML += "<h4 class='margin-y-0'>Domains assigned</h4>";
       domainsHTML += `<p class='margin-y-0'>This member is assigned to ${num_domains} domains:</p>`;
       domainsHTML += "<ul class='usa-list usa-list--unstyled margin-y-0'>";
 
@@ -405,7 +405,7 @@ export class MembersTable extends BaseTable {
     }
 
     // Add a permissions header and wrap the entire output in a container
-    permissionsHTML = "<div class='desktop:grid-col-7'><h4 class='margin-y-0 text-primary'>Additional permissions for this member</h4>" + permissionsHTML + "</div>";
+    permissionsHTML = "<div class='desktop:grid-col-7'><h4 class='margin-y-0'>Additional permissions for this member</h4>" + permissionsHTML + "</div>";
 
     return permissionsHTML;
   }

src/registrar/assets/src/sass/_theme/_admin.scss

@@ -188,7 +188,7 @@ html[data-theme="dark"] {
 }
 
 #branding h1,
-h1, h2, h3,
+.dashboard h1, .dashboard h2, .dashboard h3,
 .module h2 {
     font-weight: font-weight('bold');
 }
@@ -516,10 +516,6 @@ input[type=submit].button--dja-toolbar:focus, input[type=submit].button--dja-too
     max-width: 68ex;
 }
 
-.usa-summary-box__dhs-color {
-    color: $dhs-blue-70;
-}
-
 details.dja-detail-table {
     display: inline-table;
     background-color: var(--body-bg);
@@ -812,18 +808,6 @@ div.dja__model-description{
     text-decoration: underline !important;
 }
 
-//-- Override some styling for the USWDS summary box (per design quidance for ticket #2055
-.usa-summary-box {
-    background: #{$dhs-blue-10};
-    border-color: #{$dhs-blue-30};
-    max-width: 72ex;
-    word-wrap: break-word;
-}
-
-.usa-summary-box h3 {
-    color: #{$dhs-blue-60};
-}
-
 .module caption, .inline-group h2 {
     text-transform: capitalize;
 }
@@ -929,14 +913,6 @@ ul.add-list-reset {
     font-size: 14px;
 }
 
-.domain-name-wrap {
-    white-space: normal;
-    word-wrap: break-word;
-    overflow: visible; 
-    word-break: break-all;
-    max-width: 100%; 
-}
-
 .organization-admin-label {
     font-weight: 600;
     font-size: .8125rem;

src/registrar/assets/src/sass/_theme/_base.scss

@@ -59,7 +59,6 @@ body {
   }
 
   h2 {
-    color: color('primary-dark');
     margin-top: units(2);
     margin-bottom: units(2);
   }
@@ -130,16 +129,6 @@ grid column to the max-width of the searchbar, which was calculated to be 33rem.
   word-break: break-word;
 }
 
-.dotgov-status-box {
-  background-color: color('primary-lightest'); 
-  border-color: color('accent-cool-lighter');
-}
-
-.dotgov-status-box--action-need {
-  background-color: color('warning-lighter'); 
-  border-color: color('warning');
-}
-
 footer {
   border-top: 1px solid color('primary-darker');
 }
@@ -228,14 +217,6 @@ abbr[title] {
   max-width: 23ch;
 }
 
-.ellipsis--30 {
-  max-width: 30ch;
-}
-
-.ellipsis--50 {
-  max-width: 50ch;
-}
-
 .vertical-align-middle {
   vertical-align: middle;
 }
@@ -272,6 +253,14 @@ abbr[title] {
   word-break: break-word;
 }
 
+.string-wrap {
+  white-space: normal;
+  word-wrap: break-word;
+  overflow: visible; 
+  word-break: break-all;
+  max-width: 100%; 
+}
+
 //Icon size adjustment used by buttons and form errors
 .usa-icon.usa-icon--large {
   margin: 0;
@@ -285,4 +274,4 @@ abbr[title] {
 
 .width-quarter {
   width: 25%;
-}
+}

src/registrar/assets/src/sass/_theme/_buttons.scss

@@ -236,13 +236,6 @@ a.withdraw_outline:active {
     align-items: center;
 }
 
-.dotgov-table a
-a .usa-icon,
-.usa-button--with-icon .usa-icon {
-  height: 1.3em;
-  width: 1.3em;
-}
-
 // Red, for delete buttons
 // Used on: All delete buttons
 // Note: Can be simplified by adding text-secondary to delete anchors in tables

src/registrar/assets/src/sass/_theme/_forms.scss

@@ -1,7 +1,14 @@
 @use "uswds-core" as *;
 @use "cisa_colors" as *;
-@use "typography" as *;
 
+// Normalize typography in forms
+.usa-form,
+.usa-form fieldset {
+  font-size: 1rem;
+  .usa-legend {
+    font-size: 1rem;
+  }
+}
 .usa-form .usa-button {
   margin-top: units(3);
 }
@@ -69,16 +76,6 @@ legend.float-left-tablet + button.float-right-tablet {
   }
 }
 
-.read-only-label {
-  @extend .h4--sm-05;
-  font-weight: bold;
-  color: color('primary-dark');
-}
-
-.read-only-value {
-  margin-top: units(0);
-}
-
 .bg-gray-1 .usa-radio {
   background: color('gray-1');
 }

src/registrar/assets/src/sass/_theme/_register-form.scss

@@ -1,5 +1,4 @@
 @use "uswds-core" as *;
-@use "typography" as *;
 
 .register-form-step > h1 {
   //align to top of sidebar on first page of the form
@@ -12,11 +11,7 @@
   margin-top: units(1);
 }
 
-// header--body is used on the summary page and
-// should not be styled like the register form headers
-.register-form-step h3 {
-  color: color('primary-dark');
-  letter-spacing: $letter-space--xs;
+.register-form-step h3:not(.margin-top-05) {
   margin-top: units(3);
   margin-bottom: 0;
 
@@ -64,26 +59,10 @@
   margin-top: units(3);
 }
 
-  .summary-item hr,
+.summary-item hr,
 .review__step hr {
   border: none; //reset
   border-top: 1px solid color('primary-dark');
   margin-top: 0;
   margin-bottom: units(0.5);
 }
-
-.review__step__title a:visited {
-  color: color('primary');
-}
-
-.review__step__name {
-  color: color('primary-dark');
-  font-weight: font-weight('semibold');
-  margin-bottom: units(0.5);
-}
-
-.review__step__subheading {
-  color: color('primary-dark');
-  font-weight: font-weight('semibold');
-  margin-bottom: units(0.5);
-}

src/registrar/assets/src/sass/_theme/_summary-box.scss

@@ -0,0 +1,15 @@
+@use "uswds-core" as *;
+
+.usa-summary-box {
+    background-color: color('primary-lightest'); 
+    border-color: color('accent-cool-lighter');
+}
+
+.usa-summary-box--action-needed {
+    background-color: color('warning-lighter'); 
+    border-color: color('warning');
+}
+
+.usa-summary-box__heading {
+    font-weight: bold;
+}

src/registrar/assets/src/sass/_theme/_tooltips.scss

@@ -71,4 +71,4 @@
       width: 70vw;
     }
   }
-}
+}

src/registrar/assets/src/sass/_theme/_typography.scss

@@ -10,41 +10,35 @@ address,
   max-width: measure(5);
 }
 
-h1 {
+h1:not(.usa-alert__heading),
+h2:not(.usa-alert__heading),
+h3:not(.usa-alert__heading),
+h4:not(.usa-alert__heading),
+h5:not(.usa-alert__heading),
+h6:not(.usa-alert__heading) {
+  color: color('primary-darker');
+}
+
+h1, .h1 {
+  font-size: 2.125rem;
   @include typeset('sans', '2xl', 2);
   margin: 0 0 units(2);
-  color: color('primary-darker');
 }
 
-h2 {
-  font-weight: font-weight('semibold');
-  line-height: line-height('heading', 3);
+h2, .h2 {
+  line-height: 1.3;
   margin: units(4) 0 units(1);
-  color: color('primary-darker');
 }
 
-.header--body {
-  margin-top: units(2);
+h3, .h3 {
+  font-size: 1.25rem;
   font-weight: font-weight('semibold');
-  // The units mixin can only get us close, so it's between 
-  // hardcoding the value and using in markup
-  font-size: 16.96px;
-}
-
-.h4--sm-05 {
-  font-size: size('body', 'sm');
-  font-weight: normal;
-  color: color('primary');
-  margin-bottom: units(0.5);
 }
 
-// Normalize typography in forms
-.usa-form,
-.usa-form fieldset {
-  font-size: 1rem;
-  .usa-legend {
-    font-size: 1rem;
-  }
+h4, .h4 {
+  font-size: 1.125rem;
+  line-height: 1.25;
+  font-weight: font-weight('semibold');
 }
 
 .p--blockquote {

src/registrar/assets/src/sass/_theme/styles.scss

@@ -17,6 +17,7 @@
 @forward "forms";
 @forward "search";
 @forward "tooltips";
+@forward "summary-box";
 @forward "fieldsets";
 @forward "alerts";
 @forward "tables";

src/registrar/templates/admin/transfer_user.html

@@ -154,7 +154,7 @@ <h2>User to receive data</h2>
                         <dd>{{ current_user.email }}</dd>
                         <dt>Phone:</dt>
                         <dd>{{ current_user.phone }}</dd>
-                        <h3 class="font-heading-md" aria-label="Data that will added to:">&nbsp;</h3>
+                        <h3 class="font-heading-md" aria-label="Data that will be added to:">&nbsp;</h3>
                         <dt>Domains:</dt>
                         <dd>
                             {% if current_user_domains %}

src/registrar/templates/django/admin/domain_delete_confirmation.html

@@ -8,7 +8,7 @@
     aria-labelledby="summary-box-description"
     >
         <div class="usa-summary-box__body">
-            <h3 class="usa-summary-box__heading usa-summary-box__dhs-color" id="summary-box-description">
+            <h3 class="usa-summary-box__heading" id="summary-box-description">
             When a domain is deleted:
             </h3>
             <div class="usa-summary-box__text">

src/registrar/templates/django/admin/domain_delete_selected_confirmation.html

@@ -9,7 +9,7 @@
     aria-labelledby="summary-box-description"
     >
         <div class="usa-summary-box__body">
-            <h3 class="usa-summary-box__heading usa-summary-box__dhs-color" id="summary-box-description">
+            <h3 class="usa-summary-box__heading">
             When a domain is deleted:
             </h3>
             <div class="usa-summary-box__text">