Merge pull request #1198 from uswds/je-docs-incorrect-grid-width-var

thisisdano · web-flow · commit db370b4b41cd · 2021-04-22T15:35:50.000-07:00
USWDS - Docs: Replace deprecated `$theme-site-max-width` variable.
diff --git a/_data/migration.yml b/_data/migration.yml
@@ -1157,7 +1157,7 @@ variables:
     notes:
   - v1: '$site-max-width'
     v1_value: '1040px'
-    v2: '$theme-site-max-width'
+    v2: '$theme-grid-container-max-width'
     v2_value: 'desktop'
     kind: 'units'
     location: 'spacing'
@@ -1462,4 +1462,4 @@ units:
     mixin: u-margin-top(5)
     utility: .margin-top-5
     setting: 5
-    value: 40px
+    value: 40px
diff --git a/_data/settings.yml b/_data/settings.yml
@@ -989,12 +989,6 @@
       default: "'desktop'"
       kind: units
 
-    - name: Site max width
-      section: true
-      usage: Used to set a consistent `max-width` across components.
-      var: $theme-site-max-width
-      default: "'desktop'"
-      kind: units
     - name: Site outer margins breakpoint
       usage: At what breakpoint should the site's outer margin change.
       var: $theme-site-margins-breakpoint
diff --git a/_data/settings/spacing.yml b/_data/settings/spacing.yml
@@ -54,12 +54,6 @@ contents:
     default: '"desktop"'
     type: units
 
-  - name: Site max width
-    section: true
-    description: Used to set a consistent `max-width` across components
-    var: $theme-site-max-width
-    default: '"desktop"'
-    type: units
   - name: Site outer margins breakpoint
     description: The breakpoint at which the site's outer margin changes
     var: $theme-site-margins-breakpoint
diff --git a/_utilities/layout-grid.md b/_utilities/layout-grid.md
@@ -65,7 +65,7 @@ Breaking it down, here's how it works:
 
 {:.usa-content-list}
 - **Containers:** `grid-container` centers the container and gives it a maximum width of `desktop` (1024px). If you would like the grid to span the full width of the page, do not use `grid-container`.
-  - `grid-container` can also accept any breakpoint width like `grid-container-tablet-lg` or `grid-container-widescreen`. Set the default max width with `$theme-site-max-width` in `uswds-theme-spacing.scss`.
+  - `grid-container` can also accept any breakpoint width like `grid-container-tablet-lg` or `grid-container-widescreen`. Set the default max width with `$theme-grid-container-max-width` in `uswds-theme-spacing.scss`.
   - By default, `grid-container`s have padding-x of [2 units]({{ site.baseurl }}/design-tokens/spacing-units/){:.token}, with a padding-x of [4 units]({{ site.baseurl }}/design-tokens/spacing-units/){:.token} at `desktop` and wider. Control these values with the values of `$theme-site-margins-mobile-width`, `$theme-site-margins-width` and `$theme-site-margins-beakpoint` in `uswds-theme-spacing.scss`.
 - **Rows:** Columns must have a `grid-row` as a parent.
 - **Columns:** `grid-col-[1-12]` indicates the number of columns the item spans out of a possible 12 per row. So, if you want three equal-width columns across, use `grid-col-4` for each item.
@@ -515,7 +515,6 @@ $theme-column-gap-lg:               3;
 $theme-column-gap-mobile:           2;
 $theme-column-gap-desktop:          4;
 $theme-grid-container-max-width:    'desktop';
-$theme-site-max-width:              'desktop';
 $theme-site-margins-breakpoint:     'desktop';
 $theme-site-margins-width:          4;
 $theme-site-margins-mobile-width:   2;
diff --git a/css/_uswds-theme-custom-styles.scss b/css/_uswds-theme-custom-styles.scss
@@ -510,7 +510,7 @@ body {
 .styleguide-content {
   @include add-responsive-site-margins;
   margin-bottom: units(6);
-  max-width: units($theme-site-max-width);
+  max-width: units($theme-grid-container-max-width);
   position: relative;
 
   header {
diff --git a/css/settings/_uswds-theme-spacing.scss b/css/settings/_uswds-theme-spacing.scss
@@ -87,7 +87,6 @@ Site
 ----------------------------------------
 */
 
-$theme-site-max-width:              'widescreen';
 $theme-site-margins-breakpoint:     'desktop';
 $theme-site-margins-width:          4;
 $theme-site-margins-mobile-width:   2;
diff --git a/pages/design-tokens/overview.md b/pages/design-tokens/overview.md
@@ -56,7 +56,7 @@ We can't include tokens directly in our Sass, like `max-width: 1`, rather we use
 Tokens can, themselves, be expressed as variables. And this is how most USWDS theme settings work. For instance, the following is an example of theme settings from `_uswds-theme-spacing.scss` showing settings variables assigned spacing unit tokens:
 
 ```
-$theme-site-max-width:              'desktop';
+$theme-grid-container-max-width:    'desktop';
 $theme-site-margins-breakpoint:     'desktop';
 $theme-site-margins-width:          4;
 $theme-site-margins-mobile-width:   2;
@@ -67,7 +67,7 @@ USWDS component Sass uses those variableized tokens to build component styles:
 ```
 .usa-example {
   @include u-padding-x($theme-site-margins-mobile-width);
-  max-width: units($theme-site-max-width);
+  max-width: units($theme-grid-container-max-width);
 
   @include at-media($theme-site-margins-breakpoint) {
     @include u-padding-x($theme-site-margins-width);
@@ -109,7 +109,7 @@ In general, USWDS sets variables with tokens, and passes those variables into fu
 
 ## Using design tokens
 
-Use design tokens directly to set the value of settings variables in USWDS theme settings files, like `$theme-site-max-width: 'desktop'`. Otherwise, use functions, mixins, or utility classes as in the examples below. See individual design token section for more details.
+Use design tokens directly to set the value of settings variables in USWDS theme settings files, like `$theme-grid-container-max-width: 'desktop'`. Otherwise, use functions, mixins, or utility classes as in the examples below. See individual design token section for more details.
 
 ### Color
 <div class="site-table-wrapper">
diff --git a/pages/documentation/getting-started/migration.md b/pages/documentation/getting-started/migration.md
@@ -62,7 +62,7 @@ The [design tokens]({{ site.baseurl }}/design-tokens/) section of the documentat
 Settings variables are assigned design tokens.
 
 ```sass
-$theme-site-max-width:              'desktop';
+$theme-grid-container-max-width:    'desktop';
 $theme-site-margins-breakpoint:     'desktop';
 $theme-site-margins-width:          4;
 $theme-site-margins-mobile-width:   2;
@@ -75,7 +75,7 @@ We use tokens (or tokens expressed as variables) in mixins and functions.
 ```sass
 .usa-example {
   @include u-padding-x($theme-site-margins-mobile-width);
-  max-width: units($theme-site-max-width);
+  max-width: units($theme-grid-container-max-width);
 
   @include at-media($theme-site-margins-breakpoint) {
     @include u-padding-x($theme-site-margins-width);
