feat/tup-648 Migrate u-header from tup-ui to core-stlyes (#261)

* Added demo and style for u-highlight.

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

Co-authored-by: Wesley B <62723358+wesleyboar@users.noreply.github.com>

* Adjusting demo to only showcase highlight

* adjusted to comments

added u-highlight container max-width, and u-highlight padding-inline.

---------

Co-authored-by: Wesley B <62723358+wesleyboar@users.noreply.github.com>

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,11 @@
+.u-highlight-container {
+    max-width: 800px;
+}
+
+.u-highlight {
+    padding-inline: 10px;
+    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,4 @@
+<div class="u-highlight-container">
+  <h2 class="u-highlight">Going Strong: Computational researchers present
+    findings at third Frontera User Meeting</h2>
+</div>