@tacc/core-styles 0.9.0 → 0.10.0

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

@@ -369,27 +369,10 @@ 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
-*/
-
-/* … */
+caption {
+  font-size: var(--global-font-size--small);
+  text-align: unset; /* undo Bootstrap _reboot.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,12 @@
+<link rel="stylesheet" href="{{path '/trumps/s-irregular-links.css'}}" />
+
+<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/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,3 @@
+<link rel="stylesheet" href="{{path '/elements/links.css'}}" />
+
+{{> @links }}

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

@@ -0,0 +1,18 @@
+@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;
+}
+.x-link--active {
+  text-decoration-line: underline;
+  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,2 @@
+# The form elements used rely on Bootstrap and CMS
+preview: '@preview.bootstrap-cms'

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,32 @@
+<link rel="stylesheet" href="{{path '/elements/form.cms.css'}}" />
+
+<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:
+    - /elements/links.css
+    - /elements/links/docs.css
+    - /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,19 @@
+.s-irregular-links a {
+  text-decoration-line: underline;
+}
+.s-irregular-links a:hover {
+  text-decoration-style: dashed;
+}
+.s-irregular-links a:active {
+  text-decoration-style: dotted;
+}
+
+.s-irregular-links .c-button--as-link {
+  text-decoration-line: underline;
+}
+.s-irregular-links .c-button--as-link:hover {
+  text-decoration-style: dashed;
+}
+.s-irregular-links .c-button--as-link:active {
+  text-decoration-style: dotted;
+}

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

@@ -0,0 +1,4 @@
+label: Mailto Link Text Replacement
+context:
+  supportStyles:
+    - /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__`._