Rewrite Theming docs as Customize section

- Broke up existing theming page into separate pages
- Audited and updated each new docs page (some pages include some TBD sections)
- Update sidenav to reflect changes
- Fix links that pointed to the old Theming page
- Update docs styles to reflect recent changes
- Rewrite some bits in the Migration page

2 files changed, 14 insertions, 0 deletions

diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
index fe0bf6c5b..911c44c73 100644
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -117,3 +117,16 @@
 .bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
 .bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
 .bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
+
+.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; }
+.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; }
+.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; }
+.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; }
+.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; }
+.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; }
+.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
+.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
+.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
+
+.bd-white { color: color-yiq($white); background-color: $white; }
+.bd-black { color: color-yiq($black); background-color: $black; }
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 8368f9eb2..4ba926c90 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -29,6 +29,7 @@
   > .table {
     max-width: 100%;
     margin-bottom: 1.5rem;
+    @include font-size(.875rem);
 
     @include media-breakpoint-down(md) {
       display: block;