@tacc/core-styles 0.10.0 → 0.11.0

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

@@ -26,19 +26,19 @@
     <dt><code>&lt;a&gt;</code></dt>
     <dd>
       <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary"
-        {{#if disabled}}disabled{{/if}}>
+        {{#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{{/if}}>
+        {{#if disabled}}disabled tabindex="-1"{{/if}}>
           <span class="c-button__text">--primary</span>
         </a>
       {{/if}}
       <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary"
-        {{#if disabled}}disabled{{/if}}>
+        {{#if disabled}}disabled tabindex="-1"{{/if}}>
         <span class="c-button__text">--tertiary</span>
       </a>
     </dd>
@@ -67,12 +67,12 @@
     <dd>
       <a href="#" class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/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>
+        disabled tabindex="-1">
         <span class="c-button__text">--is-busy</span>
       </a>
     </dd>
@@ -86,14 +86,12 @@
     <dt><code>&lt;button&gt;</code></dt>
     <dd>
       <button class="c-button c-button--{{this._self.name}}
-        {{#if supports.width}}c-button--width-long{{/if}}
         {{#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 supports.width}}c-button--width-long{{/if}}
         {{#if type}}{{type}}{{/if}}"
         {{#if disabled}}disabled{{/if}}>
         <span class="c-button__text">__icon--after</span>
@@ -104,16 +102,14 @@
     <dt><code>&lt;a&gt;</code></dt>
     <dd>
       <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if supports.width}}c-button--width-long{{/if}}
         {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/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 supports.width}}c-button--width-long{{/if}}
         {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/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>
@@ -127,8 +123,7 @@
   <dd><dl>
     <dt><code>&lt;button&gt;</code></dt>
     <dd>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
+      <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>
@@ -144,17 +139,16 @@
     {{#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{{/if}}>
+      <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{{/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{{/if}}>
+        {{#if disabled}}disabled tabindex="-1"{{/if}}>
         <span class="c-button__text">--width-long</span>
       </a>
     </dd>

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

@@ -21,12 +21,17 @@
   border-width: var(--global-border-width--normal);
   border-style: solid;
 
-  font-weight: 500;
-
   @extend %x-truncate--one-line;
 }
+.c-button:not(.c-button--as-link) {
+  font-weight: var(--medium);
+}
 a.c-button {
   text-decoration: none;
+  text-align: center;
+}
+a.c-button--is-busy {
+  cursor: default;
 }
 
 .c-button:not(:--disabled) {
@@ -79,7 +84,7 @@ a.c-button {
     var(--global-color-accent--dark);
 }
 
-.c-button--primary:focus:not(:active) {
+.c-button--primary:focus:not(:active, .c-button--is-busy) {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-accent--normal);
   border-color: var(--global-color-primary--xx-light);
@@ -118,7 +123,7 @@ a.c-button {
     var(--global-color-accent--dark);
 }
 
-.c-button--secondary:focus:not(:active) {
+.c-button--secondary:focus:not(:active, .c-button--is-busy) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-accent--weak);
   border-color: var(--global-color-primary--xx-dark);
@@ -156,7 +161,7 @@ a.c-button {
     var(--global-color-accent--dark);
 }
 
-.c-button--tertiary:focus:not(:active) {
+.c-button--tertiary:focus:not(:active, .c-button--is-busy) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-primary--light);
   border-color: var(--global-color-primary--xx-dark);
@@ -226,6 +231,7 @@ a.c-button {
   padding-inline: unset;
 
   font-size: inherit;
+  font-family: inherit;
 }
 .c-button--as-link:where(:not(:--disabled)):hover {
   @extend .x-link--hover;
@@ -255,7 +261,7 @@ a.c-button {
   .c-button--as-link
 ) {
   width: auto;
-  --max-width: 100%;
+  --max-width: auto;
 }
 .c-button--width-short {
   width: var(--min-width);

package/src/lib/_imports/elements/html-elements.cms.css

@@ -156,7 +156,7 @@ dt {
   font-weight: initial; /* overwrite Bootstrap */
 }
 
-li {
+li:not(td li) {
   line-height: 1.6;
 }
 
@@ -175,10 +175,10 @@ hr {
 /*
 Inline Text Semantics
 
-Elements that define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
+Elements that define the meaning, structure, or style of a word, line, or any arbitrary piece of text. (The [<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) is styled in `../links.css`.)
 
 ```
-<a> <abbr> <b> <bdi> <bdo> <br> <cite> <code> <data> <dfn> <em> <i> <kbd> <mark> <q> <rb> <rp> <rt> <rtc> <ruby> <s> <samp> <small> <span> <strong> <sub> <sup> <time> <u> <var> <wbr>
+<abbr> <b> <bdi> <bdo> <br> <cite> <code> <data> <dfn> <em> <i> <kbd> <mark> <q> <rb> <rp> <rt> <rtc> <ruby> <s> <samp> <small> <span> <strong> <sub> <sup> <time> <u> <var> <wbr>
 ```
 
 Reference:
@@ -188,21 +188,6 @@ Reference:
 Styleguide Elements.InlineTextSemantics
 */
 
-/* Links */
-
-a {
-  color: var(--global-color-link-on-light--normal);
-  text-decoration-thickness: var(--global-border-width--normal);
-}
-a:hover {
-  text-decoration-line: underline;
-  text-decoration-style: dashed;
-}
-a:focus {
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
-}
-
 /* Monospace */
 
 var,
@@ -347,37 +332,6 @@ Styleguide Elements.DemarcatingEdits
 
 
 
-/*
-Table Content
-
-Elements that create and handle tabular data.
-
-```
-<table> <thead> <tbody> <th> <td> <tfoot> <colgroup> <col> <caption>
-```
-
-Reference:
-
-- [HTML element reference: Table content | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content)
-
-Styleguide Elements.Tables
-*/
-
-table,
-td,
-th {
-  border: var(--global-border--normal);
-}
-
-caption {
-  font-size: var(--global-font-size--small);
-  text-align: unset; /* undo Bootstrap _reboot.css */
-}
-
-
-
-
-
 /*
 Interactive Elements
 

package/src/lib/_imports/elements/links/config.yml

@@ -0,0 +1,3 @@
+context:
+  supportStyles:
+    - /assets/trumps/s-irregular-links.css

package/src/lib/_imports/elements/links/links.hbs

@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="{{path '/trumps/s-irregular-links.css'}}" />
-
 <dl>
   <dt>Standard</dt>
   <dd>

package/src/lib/_imports/elements/table/config.yml

@@ -0,0 +1,149 @@
+preview: '@preview.cms'
+context:
+  supportStyles:
+    - /assets/elements/links.css
+    - /assets/components/c-button.css
+variants:
+  - name: default
+    label: Basic
+    context:
+      data:
+        cols:
+          - ID
+          - Name
+          - Size
+          - Time
+          - Actions
+        rows:
+          - id: n234as
+            name-link: apple-sauce
+            custom-1: 0.5 KB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 56l810
+            name-link: milk-shake-032
+            custom-1: 300.0 KB
+            time: 03/22/2021 05:23:01
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 3r56xc
+            name-link: white-candy-5
+            custom-1: 1.5 MB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+  - name: paragraph
+    context:
+      data:
+        cols:
+          - Name
+          - Summary
+          - Actions
+        rows:
+          - name: apple-sauce
+            paragraph: true
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - name: milk-shake-032
+            paragraph: true
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - name: white-candy-5
+            paragraph: true
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+  - name: nested
+    context:
+      data:
+        has-table: true
+        cols:
+          - Title
+          - Principal Investigator
+          - Team
+          - Usage
+        rows:
+          - id: Copper
+            name: Paul Bunyan
+            name-link: View Team
+            table:
+              cols:
+                - Systems
+                - Awarded
+                - Remaining
+                - Expires
+              rows:
+                - name: Corral
+                  custom-1: 50 GB
+                  custom-2: <span class="c-pill">13 GB</span>
+                  time: 12/01/2019 11:04:19
+                - name: Hikari
+                  custom-1: 21 SU
+                  custom-2: <span class="c-pill">1.5 SU</span>
+                  time: 03/22/2021 05:23:01
+                - name: Ranch
+                  custom-1: 1 TB
+                  custom-2: <span class="c-pill">932 GB</span>
+                  time: 12/01/2019 11:04:19
+          - id: Vermillion
+            name: Nathan Fillion
+            name-link: View Team
+            table:
+              cols:
+                - Systems
+                - Awarded
+                - Remaining
+                - Expires
+              rows:
+                - name: Corral
+                  custom-1: 50 GB
+                  custom-2: <span class="c-pill">13 GB</span>
+                  time: 12/01/2019 11:04:19
+                - name: Hikari
+                  custom-1: 21 SU
+                  custom-2: <span class="c-pill">1.5 SU</span>
+                  time: 03/22/2021 05:23:01
+                - name: Ranch
+                  custom-1: 1 TB
+                  custom-2: <span class="c-pill">932 GB</span>
+                  time: 12/01/2019 11:04:19
+          - id: Emerald
+            name: Wesley Snipes
+            name-link: View Team
+            table:
+              cols:
+                - Systems
+                - Awarded
+                - Remaining
+                - Expires
+              rows:
+                - name: Corral
+                  custom-1: 50 GB
+                  custom-2: <span class="c-pill">13 GB</span>
+                  time: 12/01/2019 11:04:19
+                - name: Hikari
+                  custom-1: 21 SU
+                  custom-2: <span class="c-pill">1.5 SU</span>
+                  time: 03/22/2021 05:23:01
+                - name: Ranch
+                  custom-1: 1 TB
+                  custom-2: <span class="c-pill">932 GB</span>
+                  time: 12/01/2019 11:04:19

package/src/lib/_imports/elements/table/readme.md

@@ -0,0 +1,12 @@
+[Table elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content) create and handle tabular data.
+
+```
+<table> <thead> <tbody> <th> <td> <tfoot> <colgroup> <col> <caption>
+```
+
+<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>

package/src/lib/_imports/elements/table/table--nested.readme.md

@@ -0,0 +1,12 @@
+A [table]({{path './table' }}) nested inside a [table]({{path './table' }}).
+
+> **⚠️ Workaround**
+>
+> Nested tables require `.has-table` class on **both** parent table **and** containing cell.
+>
+> <small>This is only **until** [`:has()` pseudo-class support](https://caniuse.com/css-has) exists on all major browsers.</small>
+
+| Class | Example | On
+| - | - | - |
+| `.has-table` | `<table class="has-table"> … </table>` | parent table
+| `.has-table` | `<td class="has-table"> … </td>`    | cell that contains nested table

package/src/lib/_imports/elements/table/table--paragraph.readme.md

@@ -0,0 +1,12 @@
+A [table]({{path './table' }}) with cells that have [paragraphs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p).
+
+> **ⓘ Notice**
+>
+> Text will truncate at N lines; see [truncate mixin]({{path './x-truncate' }}) to control line count.
+
+<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>

package/src/lib/_imports/elements/table/table.hbs

@@ -0,0 +1,44 @@
+<table {{#if data.has-table }}class="has-table"{{/if}}>
+  <thead>
+    <tr>
+      {{#each data.cols}}<th>{{ this }}</th>{{/each}}
+    </tr>
+  </thead>
+  <tbody>
+  {{#each data.rows}}
+    <tr>
+      {{#if id}}<th>{{ id }}</th>{{/if}}
+      {{#if name}}<th>{{ name }}</th>{{/if}}
+      {{#if name-link}}<th><a href="#">{{ name-link }}</a></th>{{/if}}
+      {{#if paragraph}}
+      <td title="{{> @text-of-one-paragraph }}">
+        <p>{{> @text-of-one-paragraph }}</p>
+      </td>
+      {{/if}}
+      {{#if custom-1}}<td>{{{ custom-1 }}}</td>{{/if}}
+      {{#if custom-2}}<td>{{{ custom-2 }}}</td>{{/if}}
+      {{#if custom-3}}<td>{{{ custom-3 }}}</td>{{/if}}
+      {{#if time}}<td><time>{{ time }}</time></td>{{/if}}
+      {{#if acts}}
+      <td>
+        <ul>
+        {{#each acts}}
+          {{#if is-link }}<li><a href="#">{{ text }}</a></li>{{/if}}
+          {{#if is-button}}<li>
+            <button class="c-button c-button--as-link">
+              {{ text }}
+            </button>
+          </li>{{/if}}
+        {{/each}}
+        </ul>
+      </td>
+      {{/if}}
+      {{#if table}}
+      <td class="has-table">
+        {{> @table data=table }}
+      </td>
+      {{/if}}
+    </tr>
+  {{/each}}
+  </tbody>
+</table>

package/src/lib/_imports/elements/table--basic.css

@@ -0,0 +1,102 @@
+@import url("../tools/x-truncate.css");
+
+table {
+  /* To prevent borders from being hidden */
+  /* NOTE: Specifically, the right border of pinned columns (narrow windows) */
+  border-collapse: separate; /* overwrite Bootstrap */
+  border-spacing: 0;
+
+  font-family: var(--global-font-family--sans--portal);
+  font-size: var(--global-font-size--small);
+}
+
+/* To add border to bottom of all rows */
+/* FAQ: Added to cell, not row, because `border-collapse: separate` */
+thead tr :is(td, th),
+tr:not(:last-of-type) > :is(td, th) {
+  border-bottom: var(--global-border--normal);
+}
+
+/* To alternate table row colors (by coloring cells, not rows) */
+/* FAQ: Colored cells hide sibling column cells scrolled underneath */
+/* NOTE: On narrow screens, first column is pinned and others scroll under it */
+tr:nth-child(odd) :is(th, td) {
+  background: var(--global-color-background--app);
+}
+tr:nth-child(even) :is(th, td) {
+  background: var(--global-color-primary--x-light);
+}
+
+:is(td, th) {
+  vertical-align: top;
+  padding-block: 8px;
+  padding-inline: 16px;
+
+  color: var(--global-color-primary--dark);
+}
+/* To ensure <thead> height matches between browsers */
+:is(td, th) {
+  /* FAQ: Line-height > font-size accomodates ascender & descender letters */
+  /* HACK: Units for line-height are discouraged */
+  /* NOTE: If line-height unitless, Firefox & Chrome give different height */
+  /* IMPORTANT: More than for consistency; `table--nested.css` requires this */
+  line-height: var(--global-font-size--medium);
+}
+/* To pin first column to left of table even during scroll */
+/* WARNING: Design has not reviewed this (but not designed responsive table) */
+:is(th, td):first-child {
+  position: sticky;
+  left: 0;
+
+  border-right: var(--global-border-width--normal) solid var(--global-color-primary--light);
+}
+
+th {
+  color: var(--global-color-primary--x-dark);
+
+  text-align: inherit; /* copied from Bootstrap 4.0.0 */
+}
+thead > tr > th {
+  font-weight: var(--bold);
+}
+tbody > tr > th {
+  font-weight: var(--normal);
+}
+
+caption {
+  font-size: var(--global-font-size--small);
+  text-align: unset; /* undo Bootstrap _reboot.css */
+}
+
+
+
+/* Cell Content */
+
+/* To override browser */
+td ul {
+  list-style: none;
+  padding-inline-start: 0;
+  margin-block: 0;
+}
+td li:not(:last-of-type) {
+  /* To match line-height of other cells, but still allow space between items */
+  margin-bottom: 0.5em;
+}
+
+/* To override browser */
+td button {
+  /* To match font-size of table cell text and links */
+  font-size: inherit;
+}
+
+/* To override `site.css` or browser */
+table p {
+  margin-top: 0;
+}
+table p:last-child {
+  margin-bottom: 0;
+}
+
+table p {
+  @extend %x-truncate--many-lines;
+}

package/src/lib/_imports/elements/table--nested.css

@@ -0,0 +1,61 @@
+@import url('../tools/x-truncate.css');
+
+@supports selector(:has(table)) {
+  /* To ensure matching row height of nested table and parent table */
+  table:has(table) :is(td, th) { white-space: nowrap; }
+
+  /* To move even row background to nested table only */
+  table:has(table) tr:nth-child(even) :is(th, td) {
+    background: var(--global-color-background--app);
+  }
+  td:has(table) tr:nth-child(even) :is(th, td) {
+    background: var(--global-color-primary--x-light);
+  }
+
+  /* To align nested table cells with parent table cells */
+  td:has(table) { padding: 0; }
+}
+@supports not selector(:has(table)) {
+  /* To ensure matching row height of nested table and parent table */
+  table.has-table :is(td, th) { white-space: nowrap; }
+
+  /* To move even row background to nested table only */
+  table.has-table tr:nth-child(even) :is(th, td) {
+    background: var(--global-color-background--app);
+  }
+  td.has-table tr:nth-child(even) :is(th, td) {
+    background: var(--global-color-primary--x-light);
+  }
+
+  /* To align nested table cells with parent table cells */
+  td.has-table { padding: 0; }
+}
+
+/* To replace parent table columns above with nested table columns */
+/* FAQ: Pulls nested table up by the height of the parent table head */
+tr table {
+  --offset: calc(-1 * 33px); /* WARNING: manually calculated */
+
+  transform: translateY(var(--offset));
+  margin-bottom: var(--offset);
+}
+/* FAQ: Hides any parent table head underneath nested table head */
+tr:first-of-type thead {
+  background: var(--global-color-background--app);
+}
+/* FAQ: Hides all successive (thus redundant) nested table heads */
+tr:not(:first-of-type) thead {
+  visibility: hidden;
+}
+
+/* To reduce inline padding
+   at start and end of nested table
+   unless at start or end of parent table */
+td:not(:first-child) th:first-child,
+td:not(:first-child) td:first-child {
+  padding-inline-start: 8px;
+}
+td:not(:last-child) th:last-child,
+td:not(:last-child) td:last-child {
+  padding-inline-end: 8px;
+}

package/src/lib/_imports/elements/table.css

@@ -0,0 +1,2 @@
+@import url('./table--basic.css');
+@import url('./table--nested.css');

package/src/lib/_imports/tools/x-link/x-link.hbs

@@ -1,3 +1,14 @@
-<link rel="stylesheet" href="{{path '/elements/links.css'}}" />
+{{!-- FAQ: The `class` var may be set by patterns including this template --}}
 
-{{> @links }}
+<dl>
+  <dt>Standard</dt>
+  <dd><span class="x-link">default</span></dd>
+  <dd><span class="x-link x-link--hover">:hover</span></dd>
+  <dd><span class="x-link x-link--active">:active</span></dd>
+  <dd><span class="x-link x-link--hover x-link--active">:hover and :active</span></dd>
+  <dt>Irregular</dt>
+  <dd><span class="x-link--irregular">default</span></dd>
+  <dd><span class="x-link x-link--irregular--hover">:hover</span></dd>
+  <dd><span class="x-link x-link--irregular--active">:active</span></dd>
+  <dd><span class="x-link x-link--irregular--hover x-link--irregular--active">:hover and :active</span></dd>
+</dl>