Merge branch 'master' into mkt/color-modes-whee

docs/content/components/forms.md

@@ -62,8 +62,8 @@ Form controls in Primer CSS currently have no basic layout specified (this is by
 
   <label> <input type="checkbox" /> Remember me </label>
 
-  <label> <input type="radio" id="herp" name="herpderp" checked /> Herp </label>
-  <label> <input type="radio" id="derp" name="herpderp" /> Derp </label>
+  <label> <input type="radio" id="potato" name="radio-group-example" checked /> Potato </label>
+  <label> <input type="radio" id="tomato" name="radio-group-example" /> Tomato </label>
 
   <button class="btn" type="submit">Submit</button>
 </form>

docs/content/utilities/margin.md

@@ -85,7 +85,7 @@ Reset margins built into typography elements or other components with `m-0`, `mt
 
 ## Responsive margins
 
-All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
+All margin utilities can be adjusted per [breakpoint](/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
 
 ```html live
 <div class="bg-yellow d-inline-block">

docs/package.json

@@ -12,9 +12,9 @@
     "@babel/preset-react": "^7.10.4",
     "@loadable/component": "^5.10.2",
     "@primer/components": "^17.1.0",
-    "@primer/gatsby-theme-doctocat": "^0.25.2",
-    "@primer/octicons": "^11.0.0",
-    "@primer/octicons-react": "^11.0.0",
+    "@primer/gatsby-theme-doctocat": "^1.2.0",
+    "@primer/octicons": "^9.1.1",
+    "@primer/octicons-react": "^9.1.1",
     "@svgr/webpack": "^4.3.2",
     "autoprefixer": "^9.6.1",
     "babel-preset-gatsby": "^0.5.10",

docs/src/color-variables.js

@@ -26,17 +26,16 @@ export {colors, gradientHues, palettes, getPaletteByName}
 
 export const allColors = palettes.reduce((all, {values}) => all.concat(values), [])
 
-// TODO: fix the borders code
-//
-// export const borders = Object.keys(variables)
-//   .filter(key => key.startsWith('border-') && !variables[key].includes('$'))
-//   .sort()
-//   .map(key => ({
-//     variable: key,
-//     value: variables[key],
-//     slug: key,
-//     aliases: {border: key}
-//   }))
+export const borders = Object.keys(variables)
+  // Re: border-gray-darker, see https://github.com/primer/css/pull/1192
+  .filter(key => key.startsWith('border-') && !variables[key].includes('$') && key !== 'border-gray-darker')
+  .sort()
+  .map(key => ({
+    variable: key,
+    value: variables[key],
+    slug: key,
+    aliases: {border: key}
+  }))
 
 function getPaletteByName(name) {
   return palettes.find(palette => palette.name === name)