[core] feat(typography): muted text modifier for headings (#6304)

palantir · Jul 25, 2023 · 38504a6 · 38504a6 · adidahiya · Jul 25, 2023
1 parent b383527
commit 38504a6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss
@@ -13,14 +13,16 @@ Headings
 
 Markup:
 <div>
-  <h1 class="@ns-heading">H1 heading</h1>
-  <h2 class="@ns-heading">H2 heading</h2>
-  <h3 class="@ns-heading">H3 heading</h3>
-  <h4 class="@ns-heading">H4 heading</h4>
-  <h5 class="@ns-heading">H5 heading</h5>
-  <h6 class="@ns-heading">H6 heading</h6>
+  <h1 class="@ns-heading {{.modifier}}">H1 heading</h1>
+  <h2 class="@ns-heading {{.modifier}}">H2 heading</h2>
+  <h3 class="@ns-heading {{.modifier}}">H3 heading</h3>
+  <h4 class="@ns-heading {{.modifier}}">H4 heading</h4>
+  <h5 class="@ns-heading {{.modifier}}">H5 heading</h5>
+  <h6 class="@ns-heading {{.modifier}}">H6 heading</h6>
 </div>
 
+.#{$ns}-text-muted - Change text color to a gentler gray.
+
 Styleguide headings
 */
 

diff --git a/packages/core/src/common/_mixins.scss b/packages/core/src/common/_mixins.scss
@@ -65,6 +65,14 @@ $pt-dark-intent-text-colors: (
   .#{$ns}-dark & {
     color: $pt-dark-heading-color;
   }
+
+  &.#{$ns}-text-muted {
+    color: $pt-text-color-muted;
+
+    .#{$ns}-dark & {
+      color: $pt-dark-text-color-muted;
+    }
+  }
 }
 
 @mixin monospace-typography() {