app/assets/stylesheets/sass-zero/utilities/text.scss in sass-zero-0.0.16 vs app/assets/stylesheets/sass-zero/utilities/text.scss in sass-zero-0.0.17

@@ -1,91 +1,107 @@
 @import "sass-zero/variables";
 @import "sass-zero/mixins";
 
-.txt--small {
-  font-size: $text-sm;
-}
+.txt {
+  &--xs {
+    font-size: $text-xs;
+  }
 
-.txt--medium {
-  font-size: $text-base;
-}
+  &--sm {
+    font-size: $text-sm;
+  }
 
-.txt--large {
-  font-size: $text-lg;
-}
+  &--md {
+    font-size: $text-base;
+  }
 
-.txt--truncate {
-  @include truncate;
-}
+  &--lg {
+    font-size: $text-lg;
+  }
 
-.txt--highlight {
-  background-color: #e2e8f0;
-  margin-left: 3px;
-  padding: 0 0.2em;
-  border-radius: 4rem 2rem 4.2rem 1.1rem;
-  box-shadow: 0.2em 0 0 #e2e8f0, -0.2em 0 0 #e2e8f0;
-}
+  &--truncate {
+    @include truncate;
+  }
 
-.txt--highlight-underline {
-  background-image: url('data:image/svg+xml,<svg height="11" viewBox="0 0 284 11" width="284" fill="%23e2e8f0" xmlns="http://www.w3.org/2000/svg"><path d="m31.803886 8.47027008c68.843749-9.56054688 255.210937-9.56054693 250.988281-9.56054688-4.222656.00000006-250.9882818 16.4023438-250.9882818 16.4023438s-68.8437485 2.71875.0000008-6.84179692z" fill-rule="evenodd" transform="matrix(.99862953 .05233596 -.05233596 .99862953 .57616 -7.423532)"/></svg>');
-  background-repeat: no-repeat;
-  background-position: center 103%;
-  background-size: 105%
-}
+  &--highlight {
+    background-color: $gray-300;
+    margin-left: 3px;
+    padding: 0 0.2em;
+    border-radius: 4rem 2rem 4.2rem 1.1rem;
+    box-shadow: 0.2em 0 0 $gray-300, -0.2em 0 0 $gray-300;
+  }
 
-.txt--highlight-bottom {
-  border-bottom: $border solid #e2e8f0;
-  box-shadow: inset 0 -6px 0 #e2e8f0;
-  font-style: normal;
-}
+  &--highlight-underline {
+    background-image: url('data:image/svg+xml,<svg viewBox="0 0 284 11" fill="%23e2e8f0" xmlns="http://www.w3.org/2000/svg"><path d="m31.803886 8.47027008c68.843749-9.56054688 255.210937-9.56054693 250.988281-9.56054688-4.222656.00000006-250.9882818 16.4023438-250.9882818 16.4023438s-68.8437485 2.71875.0000008-6.84179692z" fill-rule="evenodd" transform="matrix(.99862953 .05233596 -.05233596 .99862953 .57616 -7.423532)"/></svg>');
+    background-repeat: no-repeat;
+    background-position: center 103%;
+    background-size: 105%
+  }
 
-.align--top {
-  vertical-align: top;
-}
+  &--highlight-bottom {
+    border-bottom: $border solid $gray-300;
+    box-shadow: inset 0 -6px 0 $gray-300;
+    font-style: normal;
+  }
 
-.align--middle {
-  vertical-align: middle;
-}
+  &--normal {
+    font-weight: $font-normal;
+  }
 
-.align--bottom {
-  vertical-align: bottom;
-}
+  &--bold {
+    font-weight: $font-bold;
+  }
 
-.align--left {
-  text-align: left;
-}
+  &--underline {
+    text-decoration: underline;
+  }
 
-.align--center {
-  text-align: center;
-}
+  &--subtle {
+    color: $gray-600;
+  }
 
-.align--right {
-  text-align: right;
-}
+  &--very-subtle {
+    color: $gray-500;
+  }
 
-.txt--normal {
-  font-weight: $font-normal;
-}
+  &--capitalize {
+    text-transform: capitalize;
+  }
 
-.txt--bold {
-  font-weight: $font-bold;
-}
+  &--sentence-case::first-letter {
+    text-transform: uppercase;
+  }
 
-.txt--underline {
-  text-decoration: underline;
-}
+  &--strike {
+    text-decoration: line-through;
+  }
 
-.txt--capitalize {
-  text-transform: capitalize;
+  &--nowrap {
+    white-space: nowrap;
+  }
 }
 
-.txt--sentence-case::first-letter {
-  text-transform: uppercase;
-}
+.align {
+  &--top {
+    vertical-align: top;
+  }
 
-.txt--strike {
-  text-decoration: line-through;
-}
+  &--middle {
+    vertical-align: middle;
+  }
 
-.txt--nowrap {
-  white-space: nowrap;
+  &--bottom {
+    vertical-align: bottom;
+  }
+
+  &--left {
+    text-align: left;
+  }
+
+  &--center {
+    text-align: center;
+  }
+
+  &--right {
+    text-align: right;
+  }
 }