[assets] font weights as variables (#1054)

* switch to use variables * revert paths * fix * add changelog * fix var * add lightest var * add lightest var
massgov · May 12, 2020 · 8283814 · 8283814
1 parent bcd5f02
commit 8283814
Show file tree

Hide file tree

Showing 123 changed files with 251 additions and 281 deletions.
diff --git a/assets/scss/00-base/_pikaday.scss b/assets/scss/00-base/_pikaday.scss
@@ -25,12 +25,12 @@
   background-color: $c-bg-section;
   color: $c-font-base;
   font-size: 13px;
-  font-weight: 500;
+  font-weight: $fonts-normal;
   text-align: center;
 
   .is-today & {
     color: $c-primary;
-    font-weight: 800;
+    font-weight: $fonts-bolder;
 
     &:hover {
       color: $c-font-inverse;

diff --git a/assets/scss/00-base/_variables.scss b/assets/scss/00-base/_variables.scss
@@ -38,3 +38,12 @@ $close-icon: '\00d7';
 $fonts:      "Texta", "Helvetica", "Arial", sans-serif;
 $fonts-mono: "Source Code Pro", "Monaco", monospace;
 $fonts-khmer: "Hanuman";
+
+
+// font weights
+$fonts-lightest: 100; // use only to style non text font weights, e.g. separator |
+$fonts-lighter:  300;
+$fonts-light:    400;
+$fonts-normal:   500;
+$fonts-bold:     700;
+$fonts-bolder:   800;
diff --git a/assets/scss/00-base/mixins/_ma-button.scss b/assets/scss/00-base/mixins/_ma-button.scss
@@ -33,7 +33,7 @@
   }
   // theme
   @else {
-    font-weight: 700;
+    font-weight: $fonts-bold;
 
     @if ($type == "solid") {
       background-color: $color;

diff --git a/assets/scss/00-base/mixins/_ma-truncated-body-text.scss b/assets/scss/00-base/mixins/_ma-truncated-body-text.scss
@@ -53,7 +53,7 @@
     height: 60px;
     background: transparent;
     border: 0;
-    font-weight: 700;
+    font-weight: $fonts-bold;
     color: $c-primary;
 
     &::after {

diff --git a/assets/scss/00-base/mixins/_ma-typography.scss b/assets/scss/00-base/mixins/_ma-typography.scss
@@ -90,39 +90,39 @@
 @mixin ma-texta-style($weight: 'Light', $italic: false) {
 
   @if ($weight == 'Light') {
-    font-weight: 300;
+    font-weight: $fonts-lighter;
 
     @if ($italic == true) {
       font-style: italic;
     }
   }
 
   @if ($weight == 'Book') {
-    font-weight: 400;
+    font-weight: $fonts-light;
 
     @if ($italic == true) {
       font-style: italic;
     }
   }
 
   @if ($weight == 'Medium') {
-    font-weight: 500;
+    font-weight: $fonts-normal;
 
     @if ($italic == true) {
       font-style: italic;
     }
   }
 
   @if ($weight == 'Bold') {
-    font-weight: 700;
+    font-weight: $fonts-bold;
 
     @if ($italic == true) {
       font-style: italic;
     }
   }
 
   @if ($weight == 'Black') {
-    font-weight: 800;
+    font-weight: $fonts-bolder;
 
     @if ($italic == true) {
       font-style: italic;

diff --git a/assets/scss/01-atoms/_address.scss b/assets/scss/01-atoms/_address.scss
@@ -1,7 +1,7 @@
 .ma__address {
 
   &__address {
-    font-weight: 700;
+    font-weight: $fonts-bold;
   }
 }
 

diff --git a/assets/scss/01-atoms/_button-search.scss b/assets/scss/01-atoms/_button-search.scss
@@ -30,7 +30,7 @@
   }
   color: $color;
   font-size: 14px;
-  font-weight: 700;
+  font-weight: $fonts-bold;
 
   &:hover,
   &:focus {

diff --git a/assets/scss/01-atoms/_button-sort.scss b/assets/scss/01-atoms/_button-sort.scss
@@ -35,7 +35,7 @@
 
 .ma__button-sort {
   color: $c-font-link;
-  font-weight: 700;
+  font-weight: $fonts-bold;
 
   &--asc,
   &--dsc {

diff --git a/assets/scss/01-atoms/_button-tag.scss b/assets/scss/01-atoms/_button-tag.scss
@@ -9,7 +9,7 @@
   white-space: nowrap;
   background-color: tint($c-font-link,90%);
   color: $c-font-link;
-  font-weight: 700;
+  font-weight: $fonts-bold;
 
   &:after {
     content: "+";

diff --git a/assets/scss/01-atoms/_button-toggle.scss b/assets/scss/01-atoms/_button-toggle.scss
@@ -16,7 +16,7 @@
 
   &--selected {
     color: $c-font-base;
-    font-weight: 700;
+    font-weight: $fonts-bold;
     pointer-events: none;
   }
 }
diff --git a/assets/scss/01-atoms/_button-with-icon.scss b/assets/scss/01-atoms/_button-with-icon.scss
@@ -17,7 +17,7 @@ $quaternary-colors: (
   background-color: $c-white;
   border: 2px solid $c-gray-light;
   display: inline-block;
-  font-weight: 700;
+  font-weight: $fonts-bold;
   letter-spacing: $letter-spacing-large;
   padding: 10px 14px;
   text-transform: uppercase;
@@ -200,7 +200,7 @@ $quaternary-colors: (
 
   &--alert {
     font-size: 16px;
-    font-weight: 700;
+    font-weight: $fonts-bold;
     letter-spacing: $letter-spacing-large;
     line-height: 1;
     padding: .4em;

diff --git a/assets/scss/01-atoms/_buttons.scss b/assets/scss/01-atoms/_buttons.scss
@@ -9,7 +9,7 @@ $primarycolors: (
 button {
   cursor: pointer;
   font-family: $fonts;
-  font-weight: 400;
+  font-weight: $fonts-light;
 }
 
 .ma__button {

diff --git a/assets/scss/01-atoms/_decorative-link.scss b/assets/scss/01-atoms/_decorative-link.scss
@@ -40,7 +40,7 @@
   }
 
   &__details {
-    font-weight: 400;
+    font-weight: $fonts-light;
   }
 
   a {

diff --git a/assets/scss/01-atoms/_email.scss b/assets/scss/01-atoms/_email.scss
@@ -1,7 +1,7 @@
 .ma__email {
 
   &__email {
-    font-weight: 700;
+    font-weight: $fonts-bold;
     color: $c-font-detail;
   }
 

diff --git a/assets/scss/01-atoms/_error-msg.scss b/assets/scss/01-atoms/_error-msg.scss
@@ -6,7 +6,7 @@
   font-size: 1.125rem;
   line-height: 1.2rem;
   margin: .3em 0;
-  font-weight: 500;
+  font-weight: $fonts-normal;
 
  svg {
    flex: 0 0 1.2rem;

diff --git a/assets/scss/01-atoms/_event-time.scss b/assets/scss/01-atoms/_event-time.scss
@@ -1,7 +1,7 @@
 .ma__event-time {
 
   &__calendar, {
-    font-weight: 700;
+    font-weight: $fonts-bold;
     line-height: 1.3;
   }
 

diff --git a/assets/scss/01-atoms/_figure.scss b/assets/scss/01-atoms/_figure.scss
@@ -262,6 +262,6 @@
 .ma__figure {
 
   &__caption {
-    font-weight: 300;
+    font-weight: $fonts-lighter;
   }
 }
diff --git a/assets/scss/01-atoms/_fixed-feedback-button.scss b/assets/scss/01-atoms/_fixed-feedback-button.scss
@@ -17,7 +17,7 @@
     color: $c-primary-alt;
     display: block;
     font-size: 1.5rem;
-    font-weight: 500;
+    font-weight: $fonts-normal;
     left: -40px;
     letter-spacing: 0.15rem;
     padding: 0 10px;

diff --git a/assets/scss/01-atoms/_footnote-link.scss b/assets/scss/01-atoms/_footnote-link.scss
@@ -6,6 +6,6 @@
   display: inline-flex;
   color: $c-font-link;
   font-size: 1.25rem;
-  font-weight: 700;
+  font-weight: $fonts-bold;
   line-height: 1; 
 }
diff --git a/assets/scss/01-atoms/_footnote.scss b/assets/scss/01-atoms/_footnote.scss
@@ -13,12 +13,12 @@
   span {
     margin-bottom: 0px;
     cursor: pointer;
-    font-weight: 400;
+    font-weight: $fonts-light;
     font-size: 1.25rem;
     color: $c-font-link;
 
     a {
-      font-weight: 500;
+      font-weight: $fonts-normal;
       border-bottom: 1px solid;
     }
 

diff --git a/assets/scss/01-atoms/_forms.scss b/assets/scss/01-atoms/_forms.scss
@@ -21,7 +21,7 @@ input {
   border: 2px solid $c-bd-input;
   color: $c-font-base;
   font-size: 1.375rem;
-  font-weight: 400;
+  font-weight: $fonts-light;
   max-width: 100%;
   min-height: 40px;
   padding: 0 18px;
@@ -38,7 +38,7 @@ optgroup,
 select,
 textarea {
   font-family: $fonts;
-  font-weight: 400;
+  font-weight: $fonts-light;
   font-size: 1.375rem;
 }
 
@@ -68,7 +68,7 @@ textarea {
   background-color: $c-white;
   border: 2px solid $c-bd-input;
   font-size: 1.375rem;
-  font-weight: 400;
+  font-weight: $fonts-light;
   max-width: 100%;
   min-height: 135px;
   padding: 18px;
@@ -93,7 +93,7 @@ label {
   display: block;
   margin-bottom: .25em;
   padding: 0;
-  font-weight: 500;
+  font-weight: $fonts-normal;
 }
 
 
@@ -105,7 +105,7 @@ fieldset {
 
 optgroup,
 select {
-  font-weight: 400;
+  font-weight: $fonts-light;
   font-size: 1.375rem;
   max-width: 100%;
 }

diff --git a/assets/scss/01-atoms/_input-checkbox.scss b/assets/scss/01-atoms/_input-checkbox.scss
@@ -79,7 +79,7 @@
   }
 
   label {
-    font-weight: 400;
+    font-weight: $fonts-light;
 
     &:before {
       background-color: $c-white;

diff --git a/assets/scss/01-atoms/_input-fuzzy.scss b/assets/scss/01-atoms/_input-fuzzy.scss
@@ -5,7 +5,7 @@
 .react-autowhatever__input {
   height: 30px;
   padding: 10px 20px;
-  font-weight: 400;
+  font-weight: $fonts-light;
   font-size: 1.375rem;
   border: 2px solid $c-gray-light;
   -webkit-appearance: none;

diff --git a/assets/scss/01-atoms/_input-group.scss b/assets/scss/01-atoms/_input-group.scss
@@ -32,6 +32,6 @@
 .ma__input-group {
 
   &__title {
-    font-weight: 500;
+    font-weight: $fonts-normal;
   }
 }
diff --git a/assets/scss/01-atoms/_input-radio.scss b/assets/scss/01-atoms/_input-radio.scss
@@ -13,7 +13,7 @@
     font-size: 1.375rem;
     line-height: 1rem;
     padding-left: 1.5em;
-    font-weight: 400;
+    font-weight: $fonts-light;
 
     &:before {
       border: 2px solid;
@@ -144,7 +144,7 @@ $control-height: 1.2rem;
       height: 100%;
       border-radius: $border-radius * 8;
       z-index: -1; // so that background is behind everything
-      font-weight: 700; //fixed
+      font-weight: $fonts-bold; //fixed
       transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
       border: 1px solid
     }

diff --git a/assets/scss/01-atoms/_phone-number.scss b/assets/scss/01-atoms/_phone-number.scss
@@ -1,7 +1,7 @@
 .ma__phone-number {
 
   &__number {
-    font-weight: 700;
+    font-weight: $fonts-bold;
     color: $c-font-detail;
   }
 }
diff --git a/assets/scss/01-atoms/_publish-state.scss b/assets/scss/01-atoms/_publish-state.scss
@@ -29,5 +29,5 @@
 
 .ma__publish-state {
   color: $c-font-medium;
-  font-weight: 700;
+  font-weight: $fonts-bold;
 }
diff --git a/assets/scss/01-atoms/_select-box.scss b/assets/scss/01-atoms/_select-box.scss
@@ -83,12 +83,12 @@
 .ma__select-box {
 
   &__label {
-    font-weight: 500;
+    font-weight: $fonts-normal;
   }
 
   &__select {
     color: $c-font-base;
-    font-weight: 300;
+    font-weight: $fonts-lighter;
   }
 
   &__link {

diff --git a/assets/scss/01-atoms/_site-logo.scss b/assets/scss/01-atoms/_site-logo.scss
@@ -46,7 +46,7 @@
   a {
 
     span {
-      font-weight: 400;
+      font-weight: $fonts-light;
       color: $c-primary-alt;
 
       -webkit-text-stroke-width: 1px;

diff --git a/assets/scss/01-atoms/_table.scss b/assets/scss/01-atoms/_table.scss
@@ -69,7 +69,7 @@
 
       &:before {
         color: $c-font-heading;
-        font-weight: 500;
+        font-weight: $fonts-normal;
       }
     }
 
@@ -125,7 +125,7 @@
 
       &:before {
         color: $c-font-heading;
-        font-weight: 500;
+        font-weight: $fonts-normal;
       }
     }
 

diff --git a/assets/scss/01-atoms/_textarea.scss b/assets/scss/01-atoms/_textarea.scss
@@ -24,7 +24,7 @@
 .ma__textarea {
 
   &__wrapper {
-    font-weight: 500;
+    font-weight: $fonts-normal;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,7 +40,7 @@ @@
       }
       &__details {
-        font-weight: 400;
+        font-weight: $fonts-light;
       }
       a {
@@ Expand Down @@