Add kuiSubduedText override. (#10988) (#10989)

ui_framework/components/typography/_typography.scss

@@ -28,3 +28,7 @@
   line-height: $lineHeight;
   font-size: $fontSize;
 }
+
+.kuiSubduedText {
+  color: $subduedFontColor !important;
+}

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; }
 

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>

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>

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>

ui_framework/doc_site/src/views/typography/title.html

@@ -1,3 +1,3 @@
 <h1 class="kuiTitle">
-  The Great American Novel
+  Title
 </h1>

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>
 );