@tacc/core-styles 0.9.0 → 0.11.0

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/generics/_generics.config.yml

@@ -1 +1,2 @@
-preview: "@generics.preview"
+context:
+  subdir: "generics"

package/src/lib/_imports/objects/_objects.config.yml

@@ -1 +1,2 @@
-preview: "@objects.preview"
+context:
+  subdir: "objects"

package/src/lib/_imports/tools/_tools.config.yml

@@ -0,0 +1,2 @@
+context:
+  subdir: "tools"

package/src/lib/_imports/tools/x-link/docs.css

@@ -0,0 +1,6 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+p {
+  margin: 10px;
+  max-width: 40ch; /* to wrap text so link is in middle of middle sentence */
+}

package/src/lib/_imports/tools/x-link/readme.md

@@ -0,0 +1,14 @@
+UI states of [`<a>` anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) as mixins.
+
+| Mixin | Description
+| - | -
+| `.x-link`         | default state
+| `.x-link--hover`  | `:hover` state
+| `.x-link--active` | `:active` (click) state
+
+<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/tools/x-link/x-link.hbs

@@ -0,0 +1,14 @@
+{{!-- FAQ: The `class` var may be set by patterns including this template --}}
+
+<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>

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

@@ -0,0 +1,38 @@
+@import url('../settings/color.css');
+@import url('../settings/border.css');
+
+.x-link {
+  color: var(--global-color-link-on-light--normal);
+
+  text-decoration: none;
+  text-underline-offset: 0.2em;
+  text-decoration-thickness: var(--global-border-width--normal);
+}
+.x-link--hover {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+
+  /* To overwrite Bootstrap (on Client) */
+  color: var(--global-color-link-on-light--normal);
+  text-decoration-thickness: var(--global-border-width--normal);
+}
+.x-link--active {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+}
+
+.x-link--irregular {
+  @extend .x-link;
+
+  text-decoration-line: underline;
+}
+.x-link--irregular--hover {
+  @extend .x-link--hover;
+
+  text-decoration-style: dashed;
+}
+.x-link--irregular--active {
+  @extend .x-link--active;
+
+  text-decoration-style: dotted;
+}

package/src/lib/_imports/tools/x-mailto-text-replace.css

@@ -6,13 +6,15 @@ Replace mailto link rendered text with virtual text from data-attributes
 Styleguide Tools.ExtendsAndMixins.MailtoTextReplace
 */
 
+/* To replace actual link text with generated link text */
 %x-mailto-text-replace {
-    visibility: hidden;
-    font-size: 0;
+    /* FAQ: Using `display: none` would hide pseudo element text */
+    visibility: hidden; /* to hide actual link text */
+    font-size: 0; /* to remove space of hidden text */
 }
 %x-mailto-text-replace::before {
     display: inline;
     content: attr(data-user) "@" attr(data-domain);
-    font-size: initial;
-    visibility: visible;
+    font-size: initial; /* to restore font size */
+    visibility: visible; /* to restore visibility */
 }

package/src/lib/_imports/trumps/_trumps.config.yml

@@ -1 +1,3 @@
-preview: "@trumps.preview"
+label: Trumps (Utilities & Scopes)
+context:
+  subdir: "trumps"

package/src/lib/_imports/trumps/s-affixed-input-wrapper/config.yml

@@ -0,0 +1,5 @@
+# The form elements used rely on Bootstrap and CMS
+preview: '@preview.bootstrap-cms'
+context:
+  supportStyles:
+    - /assets/elements/form.cms.css

package/src/lib/_imports/trumps/s-affixed-input-wrapper/readme.md

@@ -0,0 +1,22 @@
+To affix a symbol before or after a field.
+
+_This is an isolated feature from [Bootstrap Input Group](https://getbootstrap.com/docs/4.0/components/input-group/#basic-example)._
+
+**Use Cases**
+
+- [APCD](https://apcd-qa.tacc.utexas.edu/register/request-to-submit) "Total Claims Value"
+
+**Known Bugs**
+
+1. Using `s-affixed-input-wrapper__suffix` shrinks field width.
+2. A `s-affixed-input-wrapper__suffix` overlaps with browser controls e.g.
+   - `<input type="number">` arrows
+   - `<input type="date">` calendar
+   - `<input type="time">` clock
+
+<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/trumps/s-affixed-input-wrapper/s-affixed-input-wrapper.hbs

@@ -0,0 +1,30 @@
+<dl>
+  <dt>Prefix</dt>
+  <dd class="s-affixed-input-wrapper s-affixed-input-wrapper--prefix">
+    <label for="field-dollars">How many dollars to you have?</label>
+
+    <span class="s-affixed-input-wrapper__prefix">$</span>
+    <input
+      type="number"
+      name="dollars"
+      id="field-dollars"
+      inputmode="numeric"
+      step="0.01"
+      min="0.01"
+    />
+  </dd>
+  <dt>Suffix</dt>
+  <dd class="s-affixed-input-wrapper s-affixed-input-wrapper--suffix">
+    <label for="field-usd">How many US Dollars to you have?</label>
+
+    <input
+      type="number"
+      name="usd"
+      id="field-usd"
+      inputmode="numeric"
+      step="0.01"
+      min="0.01"
+    />
+    <span class="s-affixed-input-wrapper__suffix">$</span>
+  </dd>
+</dl>

package/src/lib/_imports/trumps/s-affixed-input-wrapper.css

@@ -0,0 +1,94 @@
+@import url("../settings/border.css");
+
+
+
+/* Layout */
+
+.s-affixed-input-wrapper:not(
+  .checkboxinput,
+  .radio,
+  .select,
+  .checkboxselectmultiple,
+  .textarea
+) {
+  display: grid;
+  align-items: start;
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    "label label"
+    var(--input-row, "input input")
+    "help help"
+    "error error";
+}
+@supports selector(:has(*)) {
+  .s-affixed-input-wrapper:has(.s-affixed-input-wrapper__prefix) {
+    --input-row: "prefix input";
+  }
+  .s-affixed-input-wrapper:has(.s-affixed-input-wrapper__suffix) {
+    --input-row: "input suffix";
+  }
+}
+@supports not selector(:has(*)) {
+  .s-affixed-input-wrapper--prefix {
+    --input-row: "prefix input";
+  }
+  .s-affixed-input-wrapper--suffix {
+    --input-row: "input suffix";
+  }
+}
+.s-affixed-input-wrapper label { grid-area: label; }
+.s-affixed-input-wrapper input { grid-area: input; }
+.s-affixed-input-wrapper__prefix { grid-area: prefix; }
+.s-affixed-input-wrapper__suffix { grid-area: suffix; }
+.s-affixed-input-wrapper .help-text { grid-area: help; }
+.s-affixed-input-wrapper .field-errors { grid-area: error; }
+
+
+
+/* Variables */
+
+.s-affixed-input-wrapper {
+  --width: 1em;
+  --padding-vert: 5px; /* mimic input */
+  --padding-horz: 10px; /* mimic input */
+}
+
+
+
+/* Prefix & Suffix */
+
+.s-affixed-input-wrapper__prefix,
+.s-affixed-input-wrapper__suffix {
+  /* To mimic shape of an input */
+  display: inline-block;
+  padding: var(--padding-vert) var(--padding-horz);
+
+  /* To have consistent size */
+  width: var(--width);
+  text-align: center;
+  box-sizing: content-box;
+
+  /* To limit interaction */
+  user-select: none;
+  pointer-events: none;
+
+  /* To mimic input font */
+  font-family: var(--global-font-family--sans--portal);
+}
+
+/* To render <span> atop and (as if) within input */
+.s-affixed-input-wrapper__prefix {
+  position: relative;
+  top: var(--global-border-width--normal);
+  left: var(--global-border-width--normal);
+  margin-right: calc(-1 * var(--width) - var(--padding-horz) * 2);
+}
+.s-affixed-input-wrapper__suffix {
+  position: relative;
+  top: var(--global-border-width--normal);
+  right: var(--global-border-width--normal);
+  margin-left: calc(-1 * var(--width) - var(--padding-horz) * 2);
+}
+.s-affixed-input-wrapper__prefix + input {
+  text-indent: calc(var(--width) + var(--padding-horz));
+}

package/src/lib/_imports/trumps/s-irregular-links/config.yml

@@ -0,0 +1,8 @@
+context:
+  supportStyles:
+    - /assets/elements/links.css
+    - /assets/elements/links/docs.css
+    - /assets/components/c-button.css
+label: Links (Irregular)
+variants:
+  - name: default

package/src/lib/_imports/trumps/s-irregular-links/readme.md

@@ -0,0 +1,29 @@
+This allows us to satisfy clients who strongly prefer [standard CMS links]¹ are underlined.
+
+> **⚠️ Warning**
+>
+> Do **not** add to `<body>` tag, otherwise header may adversely inherit styles.
+
+**Instructions**
+
+1. Add `s-irregular-links` class to an ancestor element.
+
+**Examples**
+
+```
+<main class="s-irregular-links">
+    ... <a href="...">Click me</a> ...
+</main>
+```
+
+```
+<section class="some-unique-content s-irregular-links">
+    ... <a href="...">Click me</a> ...
+</section>
+```
+
+---
+
+<small>¹ The [standard CMS links] do meet “WCAG 2.0 Level AA” link contrast.</small>
+
+[standard CMS links]: /components/detail/links.cms

package/src/lib/_imports/trumps/s-irregular-links/s-irregular-links.hbs

@@ -0,0 +1,10 @@
+<dl>
+  <dt>Links</dt>
+  <dd class="s-irregular-links">
+    {{> @text-and-link }}
+  </dd>
+  <dt>Buttons as Links</dt>
+  <dd class="s-irregular-links">
+    {{> @text-and-button-as-link }}
+  </dd>
+</dl>

package/src/lib/_imports/trumps/s-irregular-links.css

@@ -0,0 +1,14 @@
+@import url('../tools/x-link.css');
+
+.s-irregular-links a,
+.s-irregular-links .c-button--as-link {
+  @extend .x-link--irregular;
+}
+.s-irregular-links a:hover,
+.s-irregular-links .c-button--as-link:hover {
+  @extend .x-link--irregular--hover;
+}
+.s-irregular-links a:active,
+.s-irregular-links .c-button--as-link:active {
+  @extend .x-link--irregular--active;
+}

package/src/lib/_imports/trumps/u-mailto-text-replace/config.yml

@@ -0,0 +1,4 @@
+label: Mailto Link Text Replacement
+context:
+  supportStyles:
+    - /assets/elements/links.css

package/src/lib/_imports/trumps/u-mailto-text-replace/readme.md

@@ -0,0 +1,15 @@
+To render an accurate e-mail that is unlikely to read by read by a robot thus recieve spam.
+
+Replaces the display text of an `<a href="mailto:…" data-user="bob" data-domain="">` link with the e-mail address constructed from the `data-user` and `data-domain` attributes.
+
+> **☞ Remember**
+>
+> The default display text should be an _**in**accurate_ e-mail address.
+
+> **⚠️ Important**
+>
+> To make sure link is discernable if CSS does not load, make it obvious to users what part of an e-mail is inaccurate, e.g. `__REMOVE_THIS__`.
+
+**Known Bugs**
+
+1. The underline (on hover) is not offset from generated text (because the font-size of actual text is zero).

package/src/lib/_imports/trumps/u-mailto-text-replace.css

@@ -1,4 +1,4 @@
-/* Create utility class from `x-mailto-text-replace` */
+/* A utility class of `x-mailto-text-replace` */
 
 @import url("../tools/x-mailto-text-replace.css");
 

package/dist/components/c-button/c-button_docs.css

@@ -1,2 +0,0 @@
-/*! @tacc/core-styles 0.9.0+ | MIT | github.com/TACC/Core-Styles */
-dd>*{margin-right:.5em;vertical-align:middle}.c-button>i{font-style:normal}

package/dist/elements/html-elements.css

@@ -1,2 +0,0 @@
-/*! @tacc/core-styles 0.8.6+ | MIT | github.com/TACC/Core-Styles */
-html{font-size:62.5%}body,html{height:100%}body{min-width:290px;color:var(--global-color-primary--x-dark);font-family:var(--global-font-family);font-size:var(--global-font-size--medium);line-height:1.4}body>main{margin-bottom:var(--global-space--section-gap)}body>main+footer{position:-webkit-sticky;position:sticky;top:100vh}h1,h2,h3,h4,h5,h6{color:var(--global-color-primary--xx-dark)}h1,h2,h4,h5,h6{font-weight:var(--bold)}h1{margin-top:27px;margin-bottom:27px}h2{margin-top:30px;margin-bottom:var(--global-space--normal)}h1+h2,h1+hr{margin-top:-12px}h1{font-size:var(--global-font-size--xxx-large)}h2{font-size:var(--global-font-size--x-large)}h3,h4,h5,h6{margin-top:var(--global-space--normal);margin-bottom:var(--global-space--normal)}h3{font-size:var(--global-font-size--x-large)}h4{font-size:var(--global-font-size--large)}h5{text-transform:uppercase}h5,h6{font-size:var(--global-font-size--medium)}p{margin-bottom:2rem}dl dl,ol,ul{padding-left:var(--global-space--list-indent)}ol ol,ol ul,ul ol,ul ul{margin:revert}dt{margin-bottom:.5rem;font-weight:400}li{line-height:1.6}hr{margin-top:var(--global-space--hr-buffer-above);border-top:1px solid var(--global-color-primary--light);margin-bottom:var(--global-space--hr-buffer-below)}a,a:hover{color:var(--global-color-link-on-light--normal)}a:focus{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}code,kbd,pre,samp,var{font-family:var(--global-font-family--mono)}code kbd{display:inline-block;padding:.1rem .2rem;margin-left:.2rem;margin-right:.2rem;font-size:inherit}code,pre>samp{color:unset}:not(pre)>code{display:inline-block;padding:var(--global-space--xx-small) var(--global-space--x-small)}pre>code,pre>samp{display:inline-block;padding:var(--global-space--x-small) var(--global-space--small)}pre[style]>code,pre[style]>samp{min-width:100%}pre samp{opacity:.75;text-decoration:none}pre code u{opacity:.5;text-decoration:none}table,td,th{border:var(--global-border--normal)}details{margin-top:0;margin-bottom:1rem}

package/src/lib/_imports/components/_components.preview.hbs

@@ -1 +0,0 @@
-{{> @preview subdir="components" }}

package/src/lib/_imports/elements/_elements.preview.hbs

@@ -1 +0,0 @@
-{{> @preview subdir="elements" }}

package/src/lib/_imports/generics/_generics.preview.hbs

@@ -1 +0,0 @@
-{{> @preview subdir="generics" }}

package/src/lib/_imports/objects/_objects.preview.hbs

@@ -1 +0,0 @@
-{{> @preview subdir="objects" }}

package/src/lib/_imports/trumps/_trumps.preview.hbs

@@ -1 +0,0 @@
-{{> @preview subdir="trumps" }}

package/src/lib/_imports/trumps/u-mailto-text-replace/u-mailto-text-replace.config.yml

@@ -1,7 +0,0 @@
-label: Mailto Link Text Replacement
-notes: |-
-  Replaces the display text of an `<a href="mailto:…" data-user="bob" data-domain="">` link with the e-mail address constructed from the `data-user` and `data-domain` attributes.
-
-  This can be used to render an accurate e-mail that will not be recognized by a generic web scraper. The default display text should be an inaccurate e-mail address.
-
-  _To make sure link is accessible if CSS does not load, make it obvious to humans what part of an e-mail is inaccurate, e.g. `__REMOVE_THIS__`._