@tacc/core-styles 0.8.7 → 0.10.0

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

@@ -0,0 +1,115 @@
+/*
+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>
+```
+
+> **⚠️ 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,
+select,
+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 {
+  border: var(--global-border--normal);
+}
+::placeholder {
+  color: var(--global-color-primary--dark);
+}
+
+input[type="time"],
+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,
+  textarea {
+    padding: 12px 12px;
+  }
+}
+@media (pointer: fine), (pointer: none) {
+  input,
+  select,
+  textarea {
+    padding: 5px 10px;
+  }
+}

package/src/lib/_imports/elements/{html-elements.css → html-elements.cms.css}

@@ -14,6 +14,9 @@ Reference:
 
 Styleguide Elements.MainSectioningRoots
 */
+@import url('../settings/color.css');
+@import url('../settings/font.css');
+@import url('../settings/space.css');
 
 html {
   /* Set base font but support user-defined browser font size */
@@ -33,7 +36,7 @@ body {
 
   /* To overwrite Bootstrap */
   color: var(--global-color-primary--x-dark);
-  font-family: var(--global-font-family);
+  font-family: var(--global-font-family--sans--cms);
   font-size: var(--global-font-size--medium);
   line-height: 1.4;
 }
@@ -187,15 +190,18 @@ Styleguide Elements.InlineTextSemantics
 
 /* Links */
 
-a,
-a:hover { color: var(--global-color-link-on-light--normal); /* overwrite Bootstrap */ }
-a:focus { text-decoration: underline dotted; }
-
-/* FAQ: Bootstrap already provides basic text-decoration */
-/*
-a { text-decoration: none; }
-a:hover { text-decoration: underline; }
-*/
+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 */
 
@@ -363,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/generics/fonts.css

@@ -0,0 +1,54 @@
+/*
+Fonts
+
+Load standard fonts for a TACC website.
+
+Usage:
+  ```
+  .something {
+    // BentonSans-MediumItalic
+    font-family: 'Benton Sans';
+    font-weight: 500;
+    font-style: italic;
+  }
+  ```
+
+Reference:
+- [Keep Font CSS Simple](https://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/)
+- [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
+- [Shared UI - Constants - Font](https://confluence.tacc.utexas.edu/x/cYAZCg)
+
+Styleguide Generics.Fonts
+*/
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("../../fonts/BentonSans-Regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("../../fonts/BentonSans-Bold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("../../fonts/BentonSans-Medium.otf") format("opentype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("../../fonts/BentonSans-MediumItalic.otf") format("opentype");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}

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

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

package/src/lib/_imports/settings/color.css

@@ -42,18 +42,24 @@
   --global-color-info--dark: var(--global-color-primary--x-dark);
   --global-color-info--normal: var(--global-color-primary--normal);
   --global-color-info--light: var(--global-color-primary--x-light);
+  --global-color-success--dark: #237119;
   --global-color-success--normal: #43d130;
   --global-color-success--weak: #43d13020;
   --global-color-success--alt: var(--global-color-warning--normal);
   --global-color-success--alt-weak: var(--global-color-warning--weak);
+  --global-color-warning--dark: #717411;
   --global-color-warning--normal: #c7ce1d;
   --global-color-warning--weak: #c7ce1d20;
   --global-color-warning--alt: var(--global-color-accent--dark);
   --global-color-warning--alt-weak: var(--global-color-accent--weak);
-  --global-color-danger--dark: #ab1717;
-  --global-color-danger--normal: #eb6e6e;
-  --global-color-danger--weak: #eb6e6e20;
+  --global-color-danger--dark: #AF1818;
+  --global-color-danger--normal: #F09393;
+  --global-color-danger--weak: #F0939320;
 
   /* Generic */
   --global-color-background--app: var(--global-color-primary--xx-light);
+
+  /* Link */
+  --global-color-link-on-light--normal: var(--global-color-accent--normal);
+  --global-color-link-on-dark--normal: var(--global-color-accent--light);
 }

package/src/lib/_imports/settings/font.css

@@ -18,14 +18,15 @@ Reference:
 
 Styleguide Settings.CustomProperties.Font
 */
+@import url('../generics/fonts.css');
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
 
 :root {
   /* Family */
-  /* NOTE: Clients are expected to overwrite these values via their CSS */
-  --global-font-family--sans: sans-serif;
-  --global-font-family--serif: serif;
-  --global-font-family--mono: monospace;
-
+  --global-font-family--sans--cms: "Benton Sans", "Roboto", sans-serif;
+  --global-font-family--sans--portal: "Roboto", sans-serif;
+  --global-font-family--serif: Times, sans-serif;
+  --global-font-family--mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 
   /* Size */
   /* SEE: https://confluence.tacc.utexas.edu/x/nh4FDg */

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