Merge pull request #2097 from cfpb/ans_small_subtle

Add `u-small-text--subtle`
cfpb · Nov 6, 2024 · 037a18c · 037a18c
2 parents a2c2925 + fdda4b9
commit 037a18c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/docs/pages/helper-classes-mixins.md b/docs/pages/helper-classes-mixins.md
@@ -379,19 +379,24 @@ variation_groups:
           `.u-link__hover-child(@c)`
         variation_code_snippet: ''
       - variation_name: '"Small text utility" mixin'
+        variation_code_snippet: ''
         variation_description: >-
           #### **Class**
 
 
           Sets the element to `14px` (in `em`s).
 
 
-          *To be used on default `16px` text only. To use on text set to another size, use the mixin below.*
+          *To be used on default `16px` text only.
+          To use on text set to another size, use the mixin below.*
 
 
           `.u-small-text`
 
 
+          There is also a modifier, `u-small-text--subtle`, which sets the color
+          to be gray.
+
           #### **Mixin**
 
 
@@ -401,7 +406,7 @@ variation_groups:
           `.u-small-text(@context)`
 
 
-          ```js
+          ```scss
 
           // Ex.
 
@@ -413,14 +418,12 @@ variation_groups:
             }
           }
 
-
           // Compiles to
 
           .example {
             font-size: 1.25em;
           }
 
-
           .example small {
             font-size: 0.7em;
           }

diff --git a/packages/cfpb-design-system/src/utilities/utilities.scss b/packages/cfpb-design-system/src/utilities/utilities.scss
@@ -425,4 +425,8 @@
 small,
 .u-small-text {
   @include u-small-text;
+
+  &--subtle {
+    color: var(--gray);
+  }
 }