From 597e9f861807868d8d13bac93e8a328493fe6d54 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 18 Jun 2017 02:57:16 -0700
Subject: remove - vars, update docs to generate from data yml files, update
 mixins, and generate card, button, bg, and color classes from the sass map

---
 docs/4.0/components/card.md  | 14 +++++++-------
 docs/4.0/utilities/colors.md | 27 ++++++---------------------
 2 files changed, 13 insertions(+), 28 deletions(-)

(limited to 'docs')

diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md
index bc20da88f..1c8117a9a 100644
--- a/docs/4.0/components/card.md
+++ b/docs/4.0/components/card.md
@@ -134,7 +134,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
 
 {% example html %}
 <div class="card">
-  <h3 class="card-header">Featured</h3>
+  <h4 class="card-header">Featured</h4>
   <div class="card-body">
     <h4 class="card-title">Special title treatment</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@@ -186,7 +186,7 @@ Using the grid, wrap cards in columns and rows as needed.
   <div class="col-sm-6">
     <div class="card">
       <div class="card-body">
-        <h3 class="card-title">Special title treatment</h3>
+        <h4 class="card-title">Special title treatment</h4>
         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
         <a href="#" class="btn btn-primary">Go somewhere</a>
       </div>
@@ -195,7 +195,7 @@ Using the grid, wrap cards in columns and rows as needed.
   <div class="col-sm-6">
     <div class="card">
       <div class="card-body">
-        <h3 class="card-title">Special title treatment</h3>
+        <h4 class="card-title">Special title treatment</h4>
         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
         <a href="#" class="btn btn-primary">Go somewhere</a>
       </div>
@@ -211,7 +211,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
 {% example html %}
 <div class="card w-75">
   <div class="card-body">
-    <h3 class="card-title">Card title</h3>
+    <h4 class="card-title">Card title</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Button</a>
   </div>
@@ -219,7 +219,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
 
 <div class="card w-50">
   <div class="card-body">
-    <h3 class="card-title">Card title</h3>
+    <h4 class="card-title">Card title</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Button</a>
   </div>
@@ -233,7 +233,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
 {% example html %}
 <div class="card" style="width: 20rem;">
   <div class="card-body">
-    <h3 class="card-title">Special title treatment</h3>
+    <h4 class="card-title">Special title treatment</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -376,7 +376,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
 <div class="card card-inverse" style="background-color: #333; border-color: #333;">
   <div class="card-header">Header</div>
   <div class="card-body">
-    <h3 class="card-title">Special title treatment</h3>
+    <h4 class="card-title">Special title treatment</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
diff --git a/docs/4.0/utilities/colors.md b/docs/4.0/utilities/colors.md
index 80e096cf9..3d06b3e4e 100644
--- a/docs/4.0/utilities/colors.md
+++ b/docs/4.0/utilities/colors.md
@@ -7,37 +7,22 @@ toc: true
 ---
 
 {% example html %}
-<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
-<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
-<p class="text-gray-dark">Eget risus varius blandit sit ultricies vehicula amet non magna.</p>
-<p class="text-white">Etiam porta sem malesuada ultricies vehicula.</p>
+{% for color in site.data.theme-colors %}
+<p class="text-{{ color.name }}">.text-{{ color.name }}</p>{% endfor %}
 {% endexample %}
 
 Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` class has no link styling.**
 
 {% example html %}
-<a href="#" class="text-muted">Muted link</a>
-<a href="#" class="text-primary">Primary link</a>
-<a href="#" class="text-success">Success link</a>
-<a href="#" class="text-info">Info link</a>
-<a href="#" class="text-warning">Warning link</a>
-<a href="#" class="text-danger">Danger link</a>
+{% for color in site.data.theme-colors %}
+<p><a href="#" class="text-{{ color.name }}{% if color.name == "white" %} bg-gray{% endif %}">{{ color.name | capitalize }} link</a></p>{% endfor %}
 {% endexample %}
 
 Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.
 
 {% example html %}
-<div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
-<div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
-<div class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
-<div class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</div>
-<div class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</div>
-<div class="bg-inverse text-white">Cras mattis consectetur purus sit amet fermentum.</div>
-<div class="bg-faded">Cras mattis consectetur purus sit amet fermentum.</div>
+{% for color in site.data.theme-colors %}
+<div class="p-3 bg-{{ color.name }} {% if color.name == "white" %}text-gray-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %}
 {% endexample %}
 
 {% callout info %}
-- 
cgit v1.2.3