Fix color utilities for margin documentation

Author: tobiasahlin

docs/content/utilities/margin.md

@@ -43,13 +43,13 @@ Use uniform spacing utilities to apply equal margin to all sides of an element.
 
 ```html live
 <div class="d-flex flex-items-baseline flex-justify-around">
-  <div class="bg-yellow"><div class="m-0 p-1 bg-gray">.m-0</div></div>
-  <div class="bg-yellow"><div class="m-1 p-1 bg-gray">.m-1</div></div>
-  <div class="bg-yellow"><div class="m-2 p-1 bg-gray">.m-2</div></div>
-  <div class="bg-yellow"><div class="m-3 p-1 bg-gray">.m-3</div></div>
-  <div class="bg-yellow"><div class="m-4 p-1 bg-gray">.m-4</div></div>
-  <div class="bg-yellow"><div class="m-5 p-1 bg-gray">.m-5</div></div>
-  <div class="bg-yellow"><div class="m-6 p-1 bg-gray">.m-6</div></div>
+  <div class="bg-yellow"><div class="m-0 p-1 color-bg-secondary">.m-0</div></div>
+  <div class="bg-yellow"><div class="m-1 p-1 color-bg-secondary">.m-1</div></div>
+  <div class="bg-yellow"><div class="m-2 p-1 color-bg-secondary">.m-2</div></div>
+  <div class="bg-yellow"><div class="m-3 p-1 color-bg-secondary">.m-3</div></div>
+  <div class="bg-yellow"><div class="m-4 p-1 color-bg-secondary">.m-4</div></div>
+  <div class="bg-yellow"><div class="m-5 p-1 color-bg-secondary">.m-5</div></div>
+  <div class="bg-yellow"><div class="m-6 p-1 color-bg-secondary">.m-6</div></div>
 </div>
 ```
 
@@ -59,12 +59,12 @@ Use directional utilities to apply margin to an individual side, or the X and Y
 
 ```html live
 <div class="d-flex flex-items-baseline flex-justify-around">
-  <div class="bg-yellow"><div class="mt-3 p-1 bg-gray">.mt-3</div></div>
-  <div class="bg-yellow"><div class="mr-3 p-1 bg-gray">.mr-3</div></div>
-  <div class="bg-yellow"><div class="mb-3 p-1 bg-gray">.mb-3</div></div>
-  <div class="bg-yellow"><div class="ml-3 p-1 bg-gray">.ml-3</div></div>
-  <div class="bg-yellow"><div class="mx-3 p-1 bg-gray">.mx-3</div></div>
-  <div class="bg-yellow"><div class="my-3 p-1 bg-gray">.my-3</div></div>
+  <div class="bg-yellow"><div class="mt-3 p-1 color-bg-secondary">.mt-3</div></div>
+  <div class="bg-yellow"><div class="mr-3 p-1 color-bg-secondary">.mr-3</div></div>
+  <div class="bg-yellow"><div class="mb-3 p-1 color-bg-secondary">.mb-3</div></div>
+  <div class="bg-yellow"><div class="ml-3 p-1 color-bg-secondary">.ml-3</div></div>
+  <div class="bg-yellow"><div class="mx-3 p-1 color-bg-secondary">.mx-3</div></div>
+  <div class="bg-yellow"><div class="my-3 p-1 color-bg-secondary">.my-3</div></div>
 </div>
 ```
 
@@ -73,12 +73,12 @@ Use directional utilities to apply margin to an individual side, or the X and Y
 The extended scale starts from spacer `7` up to `12`. **Note**: Only the y-axis (`mt`, `mb` and `my`) and its responsive variants are supported.
 
 ```html live
-  <div class="bg-yellow d-inline-block"><div class="mt-7  p-1 bg-gray">.mb-7</div></div>
-  <div class="bg-yellow d-inline-block"><div class="mt-8  p-1 bg-gray">.mb-8</div></div>
-  <div class="bg-yellow d-inline-block"><div class="mt-9  p-1 bg-gray">.mb-9</div></div>
-  <div class="bg-yellow d-inline-block"><div class="mt-10 p-1 bg-gray">.mb-10</div></div>
-  <div class="bg-yellow d-inline-block"><div class="mt-11 p-1 bg-gray">.mb-11</div></div>
-  <div class="bg-yellow d-inline-block"><div class="mt-12 p-1 bg-gray">.mb-12</div></div>
+<div class="bg-yellow d-inline-block"><div class="mt-7  p-1 color-bg-secondary">.mb-7</div></div>
+<div class="bg-yellow d-inline-block"><div class="mt-8  p-1 color-bg-secondary">.mb-8</div></div>
+<div class="bg-yellow d-inline-block"><div class="mt-9  p-1 color-bg-secondary">.mb-9</div></div>
+<div class="bg-yellow d-inline-block"><div class="mt-10 p-1 color-bg-secondary">.mb-10</div></div>
+<div class="bg-yellow d-inline-block"><div class="mt-11 p-1 color-bg-secondary">.mb-11</div></div>
+<div class="bg-yellow d-inline-block"><div class="mt-12 p-1 color-bg-secondary">.mb-12</div></div>
 ```
 
 ## Center elements
@@ -87,16 +87,16 @@ Use `mx-auto`to center block elements with a set width.
 
 ```html live
 <div class="bg-yellow">
-  <div class="mx-auto bg-gray text-center" style="max-width: 500px;">.mx-auto</div>
+  <div class="mx-auto color-bg-secondary text-center" style="max-width: 500px;">.mx-auto</div>
 </div>
 ```
 
 ## Reset margins
 Reset margins built into typography elements or other components with `m-0`, `mt-0`, `mr-0`, `mb-0`, `ml-0`, `mx-0`, and `my-0`.
 
 ```html live
-<div class="bg-yellow border">
-  <p class="mb-0 bg-gray p-1">No bottom margin on this paragraph.</p>
+<div class="color-bg-warning border">
+  <p class="mb-0 color-bg-secondary p-1">No bottom margin on this paragraph.</p>
 </div>
 ```
 
@@ -105,21 +105,21 @@ Reset margins built into typography elements or other components with `m-0`, `mt
 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">
-  <div class="mx-sm-2 mx-md-4 bg-gray p-1">
+<div class="color-bg-warning d-inline-block">
+  <div class="mx-sm-2 mx-md-4 color-bg-secondary p-1">
     .mx-sm-2 .mx-md-4
   </div>
 </div>
 ```
 
 ## Negative margins
 
-You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
+You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`, where `spacer` runs from `1` to `6`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
 
 ```html live
 <div class="d-flex flex-justify-center">
-  <div class="bg-yellow">
-    <div class="m-3 ml-n4 ml-md-n6 border-left border-red bg-gray p-2">
+  <div class="color-bg-warning">
+    <div class="m-3 ml-n4 ml-md-n6 border-left border-red color-bg-secondary p-2">
       .m-3 .ml-n4 .ml-md-n6
     </div>
   </div>