Make site-level overflow properties variables (#2410)

* Make site-level overflow properties variables

* Add new variables to generic.json

docs/_data/variables/base/generic.json

@@ -43,6 +43,16 @@
       "value": "1.5",
       "type": "unitless"
     },
+    "$body-overflow-x": {
+      "name": "$body-overflow-x",
+      "value": "hidden",
+      "type": "keyword"
+    },
+    "$body-overflow-y": {
+      "name": "$body-overflow-y",
+      "value": "scroll",
+      "type": "keyword",
+    },
     "$code-family": {
       "name": "$code-family",
       "value": "$family-code",
@@ -116,4 +126,4 @@
     "$strong-weight"
   ],
   "file_path": "base/generic.sass"
-}
+}

sass/base/generic.sass

@@ -5,6 +5,8 @@ $body-family: $family-primary !default
 $body-color: $text !default
 $body-weight: $weight-normal !default
 $body-line-height: 1.5 !default
+$body-overflow-x: hidden !default
+$body-overflow-y: scroll !default
 
 $code-family: $family-code !default
 $code-padding: 0.25em 0.5em 0.25em !default
@@ -24,8 +26,8 @@ html
   -moz-osx-font-smoothing: grayscale
   -webkit-font-smoothing: antialiased
   min-width: 300px
-  overflow-x: hidden
-  overflow-y: scroll
+  overflow-x: $body-overflow-x
+  overflow-y: $body-overflow-y
   text-rendering: $body-rendering
   text-size-adjust: 100%