Add u-small-text--subtle

cfpb · Nov 5, 2024 · 3108763 · 3108763
1 parent a2c2925
commit 3108763
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/docs/pages/helper-classes-mixins.md b/docs/pages/helper-classes-mixins.md
@@ -401,7 +401,7 @@ variation_groups:
           `.u-small-text(@context)`
 
 
-          ```js
+          ```scss
 
           // Ex.
 
@@ -413,19 +413,20 @@ variation_groups:
             }
           }
 
-
           // Compiles to
 
           .example {
             font-size: 1.25em;
           }
 
-
           .example small {
             font-size: 0.7em;
           }
 
           ```
+
+          There is also a modifier, `u-small-text--subtle`, which sets the color
+          to be gray.
 guidelines: ''
 eyebrow: Utilities
 status: Released

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