@tacc/core-styles 0.9.0 → 0.11.0

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

@@ -22,25 +22,27 @@
       </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{{/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>
+    {{/if}}
   </dl><dd>
   {{/if}}
 
@@ -60,19 +62,21 @@
         <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{{/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>
+    {{/if}}
   </dl><dd>
   {{/if}}
 
@@ -82,37 +86,35 @@
     <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>
         <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 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>
     </dd>
+    {{/if}}
   </dl><dd>
   {{/if}}
 
@@ -121,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>
@@ -135,22 +136,23 @@
         <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}}
-        {{#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>
+    {{/if}}
   </dl><dd>
   {{/if}}
 
@@ -168,6 +170,7 @@
         </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--size-small
@@ -176,6 +179,7 @@
           <span class="c-button__text">--size-small</span>
         </a>
       </dd>
+      {{/if}}
     </dl>
     {{else}}
     <small>(no small size allowed)</small>

package/src/lib/_imports/components/c-button/{c-button.config.yml → config.yml}

@@ -5,6 +5,7 @@ context:
     width: true
     size: true
     size-small: true
+    link-tag: true
 variants:
   # type
   - name: default
@@ -30,6 +31,7 @@ variants:
       supports:
         width: false
         size: false
+        link-tag: false
   # state
   - name: is-busy
     notes: For a button whose being clicked started an incomplete process (should have `disabled` attribute)

package/src/lib/_imports/components/c-button/{c-button_docs.css → docs.css}

@@ -1,3 +1,5 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
 dd > * {
   margin-right: 0.5em;
   vertical-align: middle;

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

@@ -1,4 +1,5 @@
 @import url("../tools/x-truncate.css");
+@import url('../tools/x-link.css');
 
 @custom-selector :--disabled
   :disabled,
@@ -7,6 +8,7 @@
 
 
 
+
 /* Base */
 
 .c-button {
@@ -19,13 +21,17 @@
   border-width: var(--global-border-width--normal);
   border-style: solid;
 
-  font-weight: 500;
-  font-size: 0.75rem; /* 12px (10px design * 1.2 design-to-app ratio) */
-
   @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) {
@@ -78,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);
@@ -117,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);
@@ -155,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);
@@ -218,14 +224,20 @@ a.c-button {
 /* Modifiers: Types: As Link */
 
 .c-button--as-link {
-  color: var(--global-color-accent--normal);
+  @extend .x-link;
 
   background: unset;
   border: unset;
   padding-inline: unset;
+
+  font-size: inherit;
+  font-family: inherit;
+}
+.c-button--as-link:where(:not(:--disabled)):hover {
+  @extend .x-link--hover;
 }
-.c-button--as-link:not(:--disabled):hover {
-  text-decoration: underline;
+.c-button--as-link:active {
+  @extend .x-link--active;
 }
 
 /* Modifiers: Types: Is Busy */
@@ -247,7 +259,10 @@ a.c-button {
   .c-button--width-long,
   .c-button--size-small,
   .c-button--as-link
-),
+) {
+  width: auto;
+  --max-width: auto;
+}
 .c-button--width-short {
   width: var(--min-width);
 }

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

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

package/src/lib/_imports/elements/form.cms.css

@@ -7,13 +7,22 @@ Elements that create forms which the user can fill out and submit to the Web sit
 <form> <fieldset> <legend> <label> <input> <select> <optgroup> <option> <textarea> <button> <output> <progress> <meter> <datalist>
 ```
 
+> **⚠️ Warning**
+>
+> Relies on Bootstrap.
+
 Reference:
 
 - [HTML element reference: Forms | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms)
+- [Bootstrap Reboot: Forms](https://getbootstrap.com/docs/4.0/content/reboot/#forms)
 
 Styleguide Elements.Forms
 */
 
+
+
+/* Fonts */
+
 /* FAQ: Setting font on form would erroneously apply to links and buttons */
 label,
 input,
@@ -22,19 +31,39 @@ textarea {
   font-family: var(--global-font-family--sans--portal);
 }
 
+
+
+/* Labels */
+
 label {
   font-size: var(--global-font-size--small);
 
   line-height: normal;
   margin-bottom: 0.75em;
 }
+/* To avoid extra space between field wrappers */
+/* FAQ: The known use case is a django.cms.forms `.checkboxselectmultiple` */
+li > label:only-child {
+  margin-bottom: unset;
+}
+/* To avoid inline labels for raw form elements */
+/* FAQ: Any specific form styling (e.g. django.cms.forms) manages this */
 :not(input[type="checkbox"]) + label {
   display: block;
 }
+
+
+
+/* Fieldsets */
+
 fieldset:not(:last-child) {
   margin-bottom: 3.5rem;
 }
 
+
+
+/* Fields */
+
 input,
 select,
 textarea {
@@ -49,6 +78,27 @@ input[type="date"] {
   font-family: var(--global-font-family--mono);
 }
 
+/* To prevent super-long fields */
+input:not(
+  /* FAQ: These types of fields should not grow to a max */
+  [type=time],
+  [type=date],
+  [type=checkbox],
+  [type=radio]
+),
+select,
+textarea {
+  max-width: 50ch;
+}
+input:where( /* Use `:where` so rules are easier to override */
+  [type=time],
+  [type=date],
+  [type=checkbox],
+  [type=radio]
+) {
+  width: min-content;
+}
+
 @media (pointer: coarse) {
   input,
   select,

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,54 +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);
-}
-
-
-
-
-
-/*
-Forms
-
-Elements that create forms which the user can fill out and submit to the Web site or application.
-
-```
-<form> <fieldset> <legend> <label> <input> <select> <optgroup> <option> <textarea> <button> <output> <progress> <meter> <datalist>
-```
-
-Reference:
-
-- [HTML element reference: Forms | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms)
-
-Styleguide Elements.Forms
-*/
-
-/* … */
-
-
-
-
-
 /*
 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/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/elements/links/links.hbs

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

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

@@ -0,0 +1,8 @@
+The [`<a>` anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
+
+<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/links.css

@@ -0,0 +1,11 @@
+@import url('../tools/x-link.css');
+
+a {
+  @extend .x-link;
+}
+a:hover {
+  @extend .x-link--hover;
+}
+a:active {
+  @extend .x-link--active;
+}

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