bring over colors section

1 files changed, 77 insertions, 1 deletions

diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md
index d52f6e260..144282e57 100644
--- a/docs/4.0/getting-started/theming.md
+++ b/docs/4.0/getting-started/theming.md
@@ -117,7 +117,7 @@ You can find and customize these variables for key global options in our `_varia
 | `$enable-grid-classes`      | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.).     |
 | `$enable-print-styles`      | `true` (default) or `false`        | Enables styles for optimizing printing.                                |
 
-## Colors
+## Color
 
 **TODO:**
 - pull in the `options.md` section here
@@ -125,6 +125,82 @@ You can find and customize these variables for key global options in our `_varia
 - fallback variables
 - mentino component modifiers get changed
 
+Many of Bootstrap's various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets.
+
+### All colors
+
+All colors available in Bootstrap 4, available as Sass variables and a Sass map in our `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include.
+
+<div class="row">
+  {% for color in site.data.colors %}
+    {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %}
+    <div class="col-md-4">
+        <div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
+    </div>
+    {% endunless %}
+  {% endfor %}
+</div>
+
+Here's how you can use these in your Sass:
+
+{% highlight scss %}
+// With variable
+.alpha { color: $purple; }
+
+// From the Sass map with our `color()` function
+.beta { color: color("purple"); }
+{% endhighlight %}
+
+[Color utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) are also available for setting `color` and `background-color`.
+
+{% callout info %}
+In the future, we'll aim to provide Sass maps and variables for shades of each color as we've done with the grayscale colors below.
+{% endcallout %}
+
+### Theme colors
+
+We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our `scss/_variables.scss` file.
+
+<div class="row">
+  {% for color in site.data.theme-colors %}
+    <div class="col-md-4">
+      <div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
+    </div>
+  {% endfor %}
+</div>
+
+### Grays
+
+An expansive set of gray variables and a Sass map in `scss/_variables.scss` for consistent shades of gray across your project.
+
+<div class="row mb-3">
+  <div class="col-md-4">
+    {% for color in site.data.grays %}
+      <div class="p-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
+    {% endfor %}
+  </div>
+</div>
+
+Within `_variables.scss`, you'll find our color variables and Sass map. Here's an example of the `$colors` Sass map:
+
+{% highlight scss %}
+$colors: (
+  red: $red,
+  orange: $orange,
+  yellow: $yellow,
+  green: $green,
+  teal: $teal,
+  blue: $blue,
+  pink: $pink,
+  purple: $purple,
+  white: $white,
+  gray: $gray-600,
+  gray-dark: $gray-900
+) !default;
+{% endhighlight %}
+
+Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
+
 ## Components
 
 **TODO:**