From 9a6b3a3c103b9f1f6ba4dbb8c533e5c642590922 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 31 Mar 2017 15:16:58 -0700
Subject: [PATCH] Add kuiSubduedText override. (#10988) (#10989)

---
 .../components/typography/_typography.scss      |  4 ++++
 ui_framework/dist/ui_framework.css              |  3 +++
 .../src/views/typography/sub_title.html         |  2 +-
 .../src/views/typography/subdued_type.html      | 11 +++++++++++
 .../doc_site/src/views/typography/text.html     |  2 +-
 .../doc_site/src/views/typography/title.html    |  2 +-
 .../src/views/typography/typography_example.jsx | 17 +++++++++++++++++
 7 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 ui_framework/doc_site/src/views/typography/subdued_type.html

diff --git a/ui_framework/components/typography/_typography.scss b/ui_framework/components/typography/_typography.scss
index dbc740116b3a..bacc06e90c7e 100644
--- a/ui_framework/components/typography/_typography.scss
+++ b/ui_framework/components/typography/_typography.scss
@@ -28,3 +28,7 @@
   line-height: $lineHeight;
   font-size: $fontSize;
 }
+
+.kuiSubduedText {
+  color: $subduedFontColor !important;
+}
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index d0d2a0dbf410..0fc10e638291 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -2308,6 +2308,9 @@ body {
   line-height: 1.5;
   font-size: 14px; }
 
+.kuiSubduedText {
+  color: #9fa3a7 !important; }
+
 .kuiVerticalRhythm + .kuiVerticalRhythm {
   margin-top: 10px; }
 
diff --git a/ui_framework/doc_site/src/views/typography/sub_title.html b/ui_framework/doc_site/src/views/typography/sub_title.html
index 0aeb8941676b..920c7cc85fb8 100644
--- a/ui_framework/doc_site/src/views/typography/sub_title.html
+++ b/ui_framework/doc_site/src/views/typography/sub_title.html
@@ -1,3 +1,3 @@
 <h2 class="kuiSubTitle">
-  Chapter 1: The River on a Cold Morning
+  SubTitle
 </h2>
diff --git a/ui_framework/doc_site/src/views/typography/subdued_type.html b/ui_framework/doc_site/src/views/typography/subdued_type.html
new file mode 100644
index 000000000000..e714232a1c9c
--- /dev/null
+++ b/ui_framework/doc_site/src/views/typography/subdued_type.html
@@ -0,0 +1,11 @@
+<h1 class="kuiTitle kuiSubduedText">
+  Subdued Title
+</h1>
+
+<h2 class="kuiSubTitle kuiSubduedText">
+  Subdued SubTitle
+</h2>
+
+<p class="kuiText kuiSubduedText">
+  Subdued Text
+</p>
diff --git a/ui_framework/doc_site/src/views/typography/text.html b/ui_framework/doc_site/src/views/typography/text.html
index 1ce4f0ae8dd0..5ad9f523b7c2 100644
--- a/ui_framework/doc_site/src/views/typography/text.html
+++ b/ui_framework/doc_site/src/views/typography/text.html
@@ -1,3 +1,3 @@
 <p class="kuiText">
-  That was the winter the Sager froze over.
+  Text
 </p>
diff --git a/ui_framework/doc_site/src/views/typography/title.html b/ui_framework/doc_site/src/views/typography/title.html
index b7d1ac4b382d..545a76a66acc 100644
--- a/ui_framework/doc_site/src/views/typography/title.html
+++ b/ui_framework/doc_site/src/views/typography/title.html
@@ -1,3 +1,3 @@
 <h1 class="kuiTitle">
-  The Great American Novel
+  Title
 </h1>
diff --git a/ui_framework/doc_site/src/views/typography/typography_example.jsx b/ui_framework/doc_site/src/views/typography/typography_example.jsx
index 292e02676c0e..2e869b362367 100644
--- a/ui_framework/doc_site/src/views/typography/typography_example.jsx
+++ b/ui_framework/doc_site/src/views/typography/typography_example.jsx
@@ -16,6 +16,7 @@ import {
 const titleHtml = require('./title.html');
 const subTitleHtml = require('./sub_title.html');
 const textHtml = require('./text.html');
+const subduedHtml = require('./subdued_type.html');
 
 export default props => (
   <GuidePage title={props.route.name}>
@@ -66,5 +67,21 @@ export default props => (
         html={textHtml}
       />
     </GuideSection>
+
+    <GuideSection
+      title="Subdued type"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: subduedHtml,
+      }]}
+    >
+      <GuideText>
+        You can drop type a half-step down in the type hierarchy.
+      </GuideText>
+
+      <GuideDemo
+        html={subduedHtml}
+      />
+    </GuideSection>
   </GuidePage>
 );