text.scss in sass-zero-0.0.15

- old
+ new

@@ -1,12 +1,8 @@
 @import "sass-zero/variables";
 @import "sass-zero/mixins";
 
-.txt--x-small {
-  font-size: $text-xs;
-}
-
 .txt--small {
   font-size: $text-sm;
 }
 
 .txt--medium {
@@ -15,15 +11,32 @@
 
 .txt--large {
   font-size: $text-lg;
 }
 
-.txt--x-large {
-  font-size: $text-xl;
-}
-
 .txt--truncate {
   @include truncate;
+}
+
+.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;
+}
+
+.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%
+}
+
+.txt--highlight-bottom {
+  border-bottom: $border solid #e2e8f0;
+  box-shadow: inset 0 -6px 0 #e2e8f0;
+  font-style: normal;
 }
 
 .align--top {
   vertical-align: top;
 }