feat/tup-648 Migrate u-highlight from tup-ui to core-stlyes

src/lib/_imports/core-styles.base.css

@@ -53,3 +53,4 @@
 @import url("./trumps/u-empty.css");
 @import url("./trumps/s-irregular-links.css");
 @import url("./trumps/u-mailto-text-replace.css");
+@import url("./trumps/u-highlight.css")

src/lib/_imports/trumps/u-highlight.css

@@ -0,0 +1,8 @@
+.u-highlight {
+  /* So wrapped inline text has consistent padding */
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+:is(h1, h2, h3, h4).u-highlight {
+	display: inline;
+}

src/lib/_imports/trumps/u-highlight/readme.md

@@ -0,0 +1,5 @@
+To style the highlighting behind text.
+**Use Cases:**
+- The hero image text on the [TACC homepage](https://www.tacc.utexas.edu/)
+
+`display: inline` is required to keep highlight behind text only, instead of filling the container the text is within. 

src/lib/_imports/trumps/u-highlight/u-highlight.demo.css

@@ -0,0 +1,15 @@
+[class*="tag--"] {
+    display: block;
+    margin-bottom: 2.0rem;
+    color: var(--global-color-primary--xx-light);
+    font-size: var(--global-font-size--small);
+    background: var(--global-color-accent--normal);
+}
+
+.u-highlight {
+    padding-inline: var(--tag-padding);
+    color: var(--global-color-primary--xx-light);
+    background-color: var(--global-color-primary--xxx-dark);
+    line-height: 1;
+    text-transform: uppercase;
+}

src/lib/_imports/trumps/u-highlight/u-highlight.hbs

@@ -0,0 +1,7 @@
+<figcaption>
+  <div class="container">
+    <span class="tag--feature">Feature Story</span>
+    <h2 class="u-highlight">Going Strong: Computational researchers present
+      findings at third Frontera User Meeting</h2>
+  </div>
+</figcaption>