Merge pull request #2053 from cfpb/ans_color_adjustment

More color contrast adjustments | Formatting fixes

docs/assets/css/code.scss

@@ -18,24 +18,11 @@ pre[class*='language-'] {
   word-wrap: normal;
   line-height: 1.5;
 
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
   tab-size: 4;
 
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
   hyphens: none;
 }
 
-pre[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection,
-code[class*='language-']::-moz-selection,
-code[class*='language-'] ::-moz-selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
 pre[class*='language-']::selection,
 pre[class*='language-'] ::selection,
 code[class*='language-']::selection,
@@ -110,8 +97,9 @@ pre[class*='language-'] {
 .language-css .token.string,
 .style .token.string {
   color: #9a6e3a;
+
   /* This background color was intended by the author of this theme. */
-  background: hsla(0, 0%, 100%, 0.5);
+  background: hsla(0deg, 0%, 100%, 50%);
 }
 
 .token.atrule,
@@ -135,6 +123,7 @@ pre[class*='language-'] {
 .token.bold {
   font-weight: bold;
 }
+
 .token.italic {
   font-style: italic;
 }
@@ -156,7 +145,7 @@ pre[class*='language-'] {
 
 /* Error */
 .highlight .err {
-  color: #a00;
+  color: #a10000;
   background-color: #faa;
 }
 
@@ -273,7 +262,7 @@ pre[class*='language-'] {
 
 /* Literal.Number */
 .highlight .m {
-  color: #f60;
+  color: #c04d00;
 }
 
 /* Literal.String */
@@ -293,7 +282,7 @@ pre[class*='language-'] {
 
 /* Name.Class */
 .highlight .nc {
-  color: #0a8;
+  color: #008067;
 }
 
 /* Name.Constant */
@@ -323,7 +312,7 @@ pre[class*='language-'] {
 
 /* Name.Label */
 .highlight .nl {
-  color: #99f;
+  color: #6a6ab0;
 }
 
 /* Name.Namespace */
@@ -353,17 +342,17 @@ pre[class*='language-'] {
 
 /* Literal.Number.Float */
 .highlight .mf {
-  color: #f60;
+  color: #c04d00;
 }
 
 /* Literal.Number.Hex */
 .highlight .mh {
-  color: #f60;
+  color: #c04d00;
 }
 
 /* Literal.Number.Integer */
 .highlight .mi {
-  color: #f60;
+  color: #c04d00;
 }
 
 /* Literal.Number.Oct */
@@ -414,7 +403,7 @@ pre[class*='language-'] {
 
 /* Literal.String.Regex */
 .highlight .sr {
-  color: #3aa;
+  color: #257d7d;
 }
 
 /* Literal.String.Single */

docs/pages/grid.md

@@ -137,18 +137,12 @@ variation_groups:
 
           ```scss
 
-          .u-grid-column( @columns: 1; @total: @grid_total-columns; @prefix: 0; @suffix: 0 )
+          @include u-grid-column( $columns: 1, $total: $grid-total-columns )
 
           ```
 
 
-          Create a grid column that is `@columns` wide given `@total` total grid columns.
-
-
-          Optionally give the column left or right padding with the
-
-          `@prefix` and `@suffix` parameters.
-
+          Create a grid column that is `$columns` wide given `$total` total grid columns.
 
           Grid columns use transparent borders to create the gutters of the grid,
 
@@ -383,16 +377,6 @@ variation_groups:
 
       Read on for more details on the variables and mixins this component provides.
 
-
-      > NOTE: If you use `cf-grid.scss` directly,
-
-      >   be sure to run the file through
-
-      >   [Autoprefixer](https://github.com/postcss/autoprefixer),
-
-      >   or your compiled Capital Framework CSS will
-
-      >   not work perfectly in older browsers.
 guidelines: ''
 eyebrow: Basics
 title: Grid

docs/pages/helper-classes-mixins.md

@@ -2,9 +2,6 @@
 title: Helper classes and mixins
 layout: variation
 section: development
-status: Released
-description: 'Helper classes and mixins are utilities to help front-end web
-  development meet our design standards. '
 variation_groups:
   - variations:
       - variation_code_snippet: >-
@@ -23,7 +20,7 @@ variation_groups:
           `.no-js` class.
 
 
-          1. Add a `no-js` class to the html
+          * Add a `no-js` class to the html
 
 
 
@@ -34,20 +31,21 @@ variation_groups:
           ```
 
 
-          2. Add a script to remove the no-js class after confirming JavaScript is available
+          * Add a script to remove the no-js class after confirming JavaScript is available
 
 
           ```html
 
           <script>
-                // Confirm availability of JavaScript and remove no-js class from html
-                var docElement = document.documentElement;
-                docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2');
-            </script>
+              // Confirm availability of JavaScript and remove no-js class from html
+              var docElement = document.documentElement;
+              docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2');
+          </script>
+
           ```
 
 
-          3. Add the utility class to the element you want to hide
+          * Add the utility class to the element you want to hide
 
 
           ```html
@@ -263,7 +261,13 @@ variation_groups:
 
           <h4>16:9 flexible video player</h4>
 
-          <p>To create a 16:9 flexible video player, wrap the video element in an element with <code>u-flexible-container</code> and add the <code>u-flexible-container__inner</code> to the video element.</p>
+          <p>
+              To create a 16:9 flexible video player,
+              wrap the video element in an element with
+              <code>u-flexible-container</code>
+              and add the <code>u-flexible-container__inner</code>
+              to the video element.
+          </p>
 
           <div class="u-flexible-container">
               <video class="u-flexible-container__inner"
@@ -278,7 +282,10 @@ variation_groups:
 
           <h4>Flexible container with background</h4>
 
-          <p>To create a flexible container with only a background (no inner video or object element), omit the inner container.</p>
+          <p>
+              To create a flexible container with only a background
+              (no inner video or object element), omit the inner container.
+          </p>
 
           <div class="u-flexible-container"
               style="background-image: url(https://dummyimage.com/700x394/addc91/101820);
@@ -290,7 +297,10 @@ variation_groups:
 
           <h4>4:3 flexible video player</h4>
 
-          <p>To create a 4:3 flexible video player, add the <code>__4_3 modifier</code> to the container.</p>
+          <p>
+              To create a 4:3 flexible video player,
+              add the <code>__4_3 modifier</code> to the container.
+          </p>
 
           <div class="u-flexible-container u-flexible-container--4-3">
               <video class="u-flexible-container__inner"
@@ -416,11 +426,14 @@ variation_groups:
           }
 
           ```
-use_cases: ''
 guidelines: ''
+eyebrow: Utilities
+status: Released
+description: 'Helper classes and mixins are utilities to help front-end web
+  development meet our design standards. '
+use_cases: ''
 behavior: ''
 accessibility: ''
 last_updated: 2019-09-13T18:46:32.716Z
-eyebrow: Utilities
 research: ''
 ---

docs/pages/media-queries.md

@@ -25,20 +25,23 @@ variation_groups:
 
       ```
 
-      Ex.
+      For example…
 
       ```scss
 
       // Tablet and above.
+
       @include respond-to-min(vars-breakpoints.@bp-sm-min) {
           .title {
               font-size: 2em;
           }
       }
 
+      ```
 
-      // Compiles to
+      …compiles to…
 
+      ```css
 
       @media only all and (min-width: 37.5625em) {
           .title {
@@ -52,6 +55,7 @@ variation_groups:
       This mixin takes both min and max px values and a set of style rules and
       converts them to the corresponding min and max media query.
 
+
       ```scss
 
       @include respond-to-range(@bp1, @bp2) {
@@ -60,19 +64,27 @@ variation_groups:
 
       ```
 
-      Ex.
+
+      For example…
+
 
       ```scss
+
       // Tablet only.
+
       @include respond-to-range(@bp-sm-min, @bp-sm-max) {
           .title {
               font-size: 2em;
           }
       }
 
+      ```
 
-      // Compiles to
 
+      …compiles to…
+
+
+      ```css
 
       @media only all and (min-width: 37.5625em) and (max-width: 56.25em) {
           .title {
@@ -87,9 +99,10 @@ variation_groups:
 
       This mixin allows us to easily write styles that target both `@media print` and `.print`.
 
-      ```scss
 
-      // The following LESS...
+      The following SCSS…
+
+      ```scss
 
       .example {
           color: var(--gray);
@@ -98,8 +111,11 @@ variation_groups:
           }
       }
 
+      ```
+
+      …compiles to…
 
-      // ...Exports to
+      ```css
 
       .example {
           color: #75787B;