@tacc/core-styles 2.17.5 → 2.19.0

package/src/lib/_imports/components/c-button/c-button.hbs

@@ -1,162 +1,159 @@
 <dl>
   {{#if supports.type}}
   <dt>Type</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}} c-button--secondary"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--secondary</span>
-      </button>
-      {{#if small}}
-        <small>(no small primary allowed)</small>
-      {{else}}
-        <button class="c-button c-button--{{this._self.name}} c-button--primary"
-        {{#if disabled}}disabled{{/if}}>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}} c-button--secondary" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--secondary</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--primary" {{#if disabled}}disabled{{/if}}>
           <span class="c-button__text">--primary</span>
         </button>
-      {{/if}}
-      <button class="c-button c-button--{{this._self.name}} c-button--tertiary"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--tertiary</span>
-      </button>
-    </dd>
+        <button class="c-button c-button--{{this._self.name}} c-button--tertiary" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--tertiary</span>
+        </button>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--secondary</span>
-      </a>
-      {{#if small}}
-        <small>(no small primary allowed)</small>
-      {{else}}
-        <a href="#" class="c-button c-button--{{this._self.name}} c-button--primary"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary" {{#if disabled}}disabled
+          tabindex="-1" {{/if}}>
+          <span class="c-button__text">--secondary</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--primary" {{#if disabled}}disabled
+          tabindex="-1" {{/if}}>
           <span class="c-button__text">--primary</span>
         </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary" {{#if disabled}}disabled
+          tabindex="-1" {{/if}}>
+          <span class="c-button__text">--tertiary</span>
+        </a>
+      </dd>
       {{/if}}
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--tertiary</span>
-      </a>
-    </dd>
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.states}}
+    {{#if supports.states}}
   <dt>States</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">default</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--is-busy
-        {{#if type}}{{type}}{{/if}}"
-        disabled>
-        <span class="c-button__text">--is-busy</span>
-    </dd>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">default</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} 
+        {{#if type}}{{type}}{{/if}}" disabled>
+          <span class="c-button__text">disabled-attr</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--is-busy
+        {{#if type}}{{type}}{{/if}}" disabled>
+          <span class="c-button__text">--is-busy</span>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">default</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--is-busy
-        {{#if type}}{{type}}{{/if}}"
-        disabled tabindex="-1">
-        <span class="c-button__text">--is-busy</span>
-      </a>
-    </dd>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">default</span>
+        </a>
+        <a disabled href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}">
+          <span class="c-button__text">disabled-attr</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--is-busy
+        {{#if type}}{{type}}{{/if}}" disabled tabindex="-1">
+          <span class="c-button__text">--is-busy</span>
+        </a>
+      </dd>
+      {{/if}}
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.icons}}
+    {{#if supports.icons}}
   <dt>Icons</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <i class="c-button__icon--before" aria-description="validate input">…</i>
-        <span class="c-button__text">__icon--before</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">__icon--after</span>
-        <i class="c-button__icon--after" aria-description="exit page">X</i>
-    </dd>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
+          <i class="c-button__icon--before" aria-description="validate input">…</i>
+          <span class="c-button__text">__icon--before</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">__icon--after</span>
+          <i class="c-button__icon--after" aria-description="exit page">X</i>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <i class="c-button__icon--before" aria-description="validate input">…</i>
-        <span class="c-button__text">__icon--before</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">__icon--after</span>
-        <i class="c-button__icon--after" aria-description="exit page">X</i>
-      </a>
-    </dd>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <i class="c-button__icon--before" aria-description="validate input">…</i>
+          <span class="c-button__text">__icon--before</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">__icon--after</span>
+          <i class="c-button__icon--after" aria-description="exit page">X</i>
+        </a>
+      </dd>
+      {{/if}}
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.width}}
+    {{#if supports.width}}
   <dt>Width</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--width-short</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--width-medium</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--width-long</span>
-    </dd>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}" {{#if
+          disabled}}disabled{{/if}}>
+          <span class="c-button__text">--width-short</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}" {{#if
+          disabled}}disabled{{/if}}>
+          <span class="c-button__text">--width-medium</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}" {{#if
+          disabled}}disabled{{/if}}>
+          <span class="c-button__text">--width-long</span>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--width-short</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--width-medium</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--width-long</span>
-      </a>
-    </dd>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">--width-short</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">--width-medium</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">--width-long</span>
+        </a>
+      </dd>
+      {{/if}}
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.size}}
+    {{#if supports.size}}
   <dt>Size</dt>
   <dd>
     {{#if supports.size-small}}
@@ -164,8 +161,7 @@
       <dt><code>&lt;button&gt;</code></dt>
       <dd>
         <button class="c-button c-button--{{this._self.name}} c-button--size-small
-          {{#if type}}{{type}}{{/if}}"
-          {{#if disabled}}disabled{{/if}}>
+          {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
           <span class="c-button__text">--size-small</span>
         </button>
       </dd>
@@ -174,8 +170,7 @@
       <dt><code>&lt;a&gt;</code></dt>
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--size-small
-          {{#if type}}{{type}}{{/if}}"
-          {{#if disabled}}disabled{{/if}}>
+          {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
           <span class="c-button__text">--size-small</span>
         </a>
       </dd>
@@ -185,5 +180,5 @@
     <small>(no small size allowed)</small>
     {{/if}}
   <dd>
-  {{/if}}
-</dl>
+    {{/if}}
+</dl>

package/src/lib/_imports/components/c-button.css

@@ -32,9 +32,6 @@
 :--c-button:where(:not(:--disabled)) {
   cursor: pointer; /* WARNING: Opinionated */
 }
-:--c-button:where(:not(:--c-button--as-link)) {
-  font-weight: var(--medium);
-}
 
 a:--c-button {
   text-decoration: none;
@@ -53,8 +50,6 @@ a:--c-button--is-busy {
 ) {
   color: var(--global-color-primary--dark);
   border-color: var(--global-color-primary--dark);
-
-  pointer-events: none;
 }
 :--c-button:--disabled:not(
   :--c-button--is-busy,

package/src/lib/_imports/components/c-card/c-card--frontera.hbs

@@ -1,3 +1,5 @@
+<section class="o-section">
+
 <!-- FAQ: Not using {{this._self.name}} because class is frontera-about-page -->
 <div class="o-grid o-grid--col-min-width">
   <a href="#" class="c-card c-card--frontera-about-page">
@@ -46,3 +48,5 @@
     <h3>Style ▸ Image + Text</h3>
   </div>
 </div>
+
+</section>

package/src/lib/_imports/components/c-card/config.yml

@@ -24,6 +24,3 @@ variants:
     status: deprecated
     📝 name: using "frontera-about-page" breaks the demo
     label: Frontera About Page
-    context:
-      supportStyles:
-        - ../../assets/components/c-card--frontera-about-page.css

package/src/lib/_imports/components/c-card--frontera-about-page.css

@@ -5,6 +5,8 @@
 
   border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
   margin-bottom: 4.6rem;
+
+  padding: unset; /* overwrite .c-card */
 }
 
 

package/src/lib/_imports/components/c-card.css

@@ -169,12 +169,6 @@
     margin-top: unset;
 }
 
-/* To make buttons bold */
-/* TODO: Determine whether this should apply to all CMS buttons */
-:--c-card a:--c-button {
-    font-weight: var(--bold);
-}
-
 /* To reduce font size of mailto link */
 :--c-card a[data-user][data-domain]::before {
     font-size: var(--global-font-size--medium);
@@ -186,3 +180,9 @@
     line-height: 1.7;
     margin-bottom: 2rem; /* to mimic <p> */
 }
+
+/* FAQ: Used on image cards for staff like on /education/k-12-students/ */
+/* SEE: https://www.tacc.utexas.edu/education/k-12-students/high-school-camps/gencyber/ */
+:is(.card, :--c-card) h4 {
+    margin-bottom: 0.375em;
+}

package/src/lib/_imports/components/c-content-block/c-content-block.hbs

@@ -0,0 +1,33 @@
+<dl>
+    <dt>Staff Profile</dt>
+    <dd>
+        <div class="content-block">
+            <img class="img-fluid" />
+            <img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Exampleavatar.png"
+                title="University of Texas at Austin" class="img-fluid" />
+        </div>
+
+        <div class="content-block">
+            <h3>Education</h3>
+
+            <p><strong>Ph.D., Computer Engineering</strong><br>
+                Clemson University, 2000</p>
+
+            <p><strong>M.S., Computer Engineering</strong><br>
+                Clemson University, 1993</p>
+
+            <p><strong>B.S., Electrical Engineering</strong><br>
+                Clemson University, B.S. (Electrical Engineering), 1991</p>
+        </div>
+    </dd>
+
+    <dt>Newsletters</dt>
+    <dd>
+        <article class="content-block">
+            <h3>EPIC + WeTeach_CS Newsletter</h3>
+
+            <p>Stay connected with our biweekly <a href="#">newsletter</a>.</p>
+            <a class="c-button c-button--primary" href="#">Newsletter Signup</a>
+        </article>
+    </dd>
+</dl>

package/src/lib/_imports/components/c-content-block.css

@@ -0,0 +1,9 @@
+:is(.c-content-block, .content-block) {
+    margin-bottom: var(--global-space--bootstrap-gap);
+    padding: var(--global-space--pattern-pad);
+}
+
+:is(.c-content-block, .content-block) :is(h1, h2, h3, h4, h5, h6) {
+    border-left: var(--global-border-width--xx-thick) solid var(--global-color-accent--tertiary);
+    padding-left: 10px;
+}

package/src/lib/_imports/components/c-data-list/description-list/readme.md

@@ -1,8 +1,3 @@
 Use [a Description List](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl).
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/components/c-data-list/readme.md

@@ -1,8 +1,3 @@
 Suitable markup is [Table elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content) and [Description Lists](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl).
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/components/c-data-list/table/readme.md

@@ -4,9 +4,4 @@ Use [Table elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#t
 >
 > Narrow the viewport to see truncation of values.
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/components/c-form/readme.md

@@ -1,8 +1,3 @@
 To style when raw [Form elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content) alone are **not** sufficient.
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/components/c-island/readme.md

@@ -4,9 +4,4 @@ A portion of a document whose content is only indirectly related to the document
 >
 > The [`<aside>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) is usually the appropriate element for this pattern.
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/components/c-pill/01-c-pill--types.hbs

@@ -0,0 +1,10 @@
+<dl>
+  <dt>Standard</dt>
+  <dd class="demo-list">
+    {{#each types}}{{> @c-pill type=this name=this }}{{/each}}
+  </dd>
+  <dt>Custom</dt>
+  <dd>
+    Avoid custom pills. Interfaces ideally have a limited number of statuses.
+  </dd>
+</dl>

package/src/lib/_imports/components/c-pill/02-c-pill--features.hbs

@@ -0,0 +1,6 @@
+<dl class="demo-truncate">
+  <dt>Truncate</dt>
+  <dd>
+    {{> @c-pill type="normal" name="very long tag name" should-truncate=true }}
+  </dd>
+</dl>

package/src/lib/_imports/components/c-pill/03-c-pill--html-elements.hbs

@@ -0,0 +1 @@
+{{> @inline-element-samples class="c-pill" name="pill" }}

package/src/lib/_imports/components/c-pill/c-pill.hbs

@@ -0,0 +1 @@
+<span class="c-pill c-pill--is-{{ type }}{{#should-truncate}} c-pill--should-truncate{{/should-truncate}}">{{ name }}</span>

package/src/lib/_imports/components/c-pill/config.yml

@@ -0,0 +1,14 @@
+status: ready
+context:
+  types:
+    - danger
+    - success
+    - warning
+    - normal
+    - fixed
+    - updated
+variants:
+  - name: default
+    hidden: true
+  - name: html-elements
+    label: HTML Elements

package/src/lib/_imports/components/c-pill/demo.css

@@ -0,0 +1,18 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.demo-truncate .c-pill {
+  white-space: nowrap;
+  max-width: 10em;
+}
+
+.demo-list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style-type: none;
+  padding-left: 0;
+  gap: 1em;
+}
+
+.c-pill:not([class*="c-pill--"]) {
+  background-color: var(--global-color-primary--x-light);
+}

package/src/lib/_imports/components/c-pill/readme.md

@@ -0,0 +1,13 @@
+To label the status of something.
+
+| Class (Std.)               | Class (Alt.)             | Description
+| - | - | - |
+| `.c-pill`                  | `.pill`                  | space, shape, and size
+| `.c-pill--should-truncate` | `.pill--truncate`        | truncate text*
+| `.c-pill--is-danger`       | `.pill--danger`          | for a "danger" status
+| `.c-pill--is-success`      | `.pill--success`         | for a "success" status
+| `.c-pill--is-...`          | `.pill--...`             | for a "..." status
+
+<small>* Requires client styles, because [truncation can be context-dependent](https://confluence.tacc.utexas.edu/x/sAoFDg).</small>
+
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/components/c-pill.css

@@ -0,0 +1,64 @@
+@import url("./c-pill.selectors.css");
+
+/* Base */
+
+:--c-pill {
+  font-weight: var(--medium);
+  font-size: var(--global-font-size--x-small);
+
+  display: inline-block; /* FAQ: Supports `min/max-width` */
+  box-sizing: border-box; /* override browser */
+  padding-inline: 0.75em;
+  min-width: 6.5em;
+
+  line-height: 1.4;
+  text-align: center;
+  text-transform: none; /* avoid inheritance form context e.g. <h1> */
+  border-radius: 0.5em;
+  color: var(--global-color-primary--xx-dark);
+}
+
+
+
+/* Modifiers */
+
+/* Modifiers - Structure */
+
+/* CAVEAT: This alone may not trigger truncation */
+/* SEE: https://confluence.tacc.utexas.edu/x/sAoFDg */
+:--c-pill--should-truncate {
+  max-width: 100%;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* white-space: nowrap; */ /* FAQ: Let client decide */
+
+  /* Keep alignment that is changed by `overflow: hidden;` */
+  /* SEE: https://stackoverflow.com/q/25818199 */
+  vertical-align: bottom;
+}
+
+
+
+/* Modifiers */
+
+/* Modifiers - Skin */
+
+:--c-pill--is-danger {
+  background-color: var(--global-color-danger--light);
+}
+:--c-pill--is-success {
+  background-color: var(--global-color-success--normal);
+}
+:--c-pill--is-warning {
+  background-color: var(--global-color-warning--normal);
+}
+:--c-pill--is-normal {
+  background-color: var(--global-color-extra--light);
+}
+:--c-pill--is-fixed {
+  background-color: var(--global-color-primary--light);
+}
+:--c-pill--is-updated {
+  background-color: #FFF500;
+}