@tacc/core-styles 0.11.0 → 2.0.0

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

@@ -23,35 +23,26 @@ Styleguide Settings.CustomProperties.Font
 
 :root {
   /* Family */
+  /* https://confluence.tacc.utexas.edu/x/nB4FDg */
   --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 */
-  /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */
-
-  --global-font-size--x-small: 1.1rem;
-  --global-font-size--small: 1.4rem;
-  --global-font-size--medium: 1.6rem;
-  --global-font-size--large: 2.0rem;
-  --global-font-size--x-large: 2.6rem;
-  --global-font-size--xx-large: 3.2rem;
-  --global-font-size--xxx-large: 4.1rem;
-
-
+  --sans--cms: var(--global-font-family--sans--cms);
+  --sans--portal: var(--global-font-family--sans--portal);
+  --serif: var(--global-font-family--serif);
+  --mono: var(--global-font-family--mono);
 
   /* Weight */
-  /* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
-
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
   /* NOTE: Long names to be consistent (opinions welcome) */
   --global-font-weight--regular: 400;
   --global-font-weight--medium: 500;
   --global-font-weight--bold: 700;
-
+  --global-font-weight--black: 800;
   /* NOTE: Short names to increase adoption (opinions welcome) */
-  --regular: 400;
-  --medium: 500;
-  --bold: 700;
+  --regular: var(--global-font-weight--regular);
+  --medium: var(--global-font-weight--medium);
+  --bold: var(--global-font-weight--bold);
+  --black: var(--global-font-weight--black);
 }

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

@@ -34,8 +34,10 @@ Styleguide Settings.CustomProperties.Space
 
   /* Miscellaneous */
   --global-space--list-indent: 40px;   /* browser default (Firefox, Edge) */
-  --global-space--section-gap: 45px;   /* recurring design doc spacing */
-  --global-space--grid-gap: 15px;      /* Bootstrap `.container` & `.row` */
+  --global-space--section-gap: 60px;   /* recurring design doc spacing */
+  --global-space--grid-gap: 30px;      /* Bootstrap `.container` & `.row` */
+  --global-space--above-breadcrumbs: 45px;
+  --global-space--under-breadcrumbs: 40px;
 
   /* Applications */
   --global-space--section-top: 12px;
@@ -51,4 +53,6 @@ Styleguide Settings.CustomProperties.Space
   /* CMS Pages */
   --global-space--hr-buffer-above: 10px;
   --global-space--hr-buffer-below: 30px;
+  --global-space--p-buffer-above: 0; /* origin: Bootstrap _reboot.css */
+  --global-space--p-buffer-below: 2rem; /* origin: html-elements.cms.css */
 }

package/src/lib/_imports/tools/selectors.common.css

@@ -0,0 +1,13 @@
+/* DO NOT ADD STYLES HERE; ADD CUSTOM SELECTORS TO USE IN OTHER STYLESHEETS */
+
+/*
+Multiple Elements
+
+These are global selectors to target common elements.
+
+Styleguide Tools.CustomSelectors.MultipleElements
+*/
+@custom-selector :--action   button, a;
+@custom-selector :--main-content   [role="main"], main;
+@custom-selector :--portal-content   #root;
+@custom-selector :--modal   .modal;

package/src/lib/_imports/tools/selectors.css

@@ -0,0 +1,20 @@
+/* DO NOT ADD STYLES HERE; ADD CUSTOM SELECTORS TO USE IN OTHER STYLESHEETS */
+
+/* NOTE: These must be Tools (imported as needed) until native browser support, at which time they can become Settings (imported globally). */
+
+/*
+Custom Selectors
+
+These are global selectors to target specific elements.
+
+Usage: `:is(:--action) { … }`
+Usage: `:--main-content .some-class { … }`
+Usage: `:--monospace--block { … }`
+
+Reference:
+- https://drafts.csswg.org/css-extensions/#custom-selectors
+
+Styleguide Tools.CustomSelectors
+*/
+@import url("../tools/selectors.common.css");
+@import url("../tools/selectors.monospace.css");

package/src/lib/_imports/tools/selectors.monospace.css

@@ -0,0 +1,64 @@
+/* DO NOT ADD STYLES HERE; ADD CUSTOM SELECTORS TO USE IN OTHER STYLESHEETS */
+
+/*
+Monospace Elements & Components
+
+These are global selectors to target markup for monospace patterns.
+
+Styleguide Tools.CustomSelectors.Monospace
+*/
+
+
+
+/* Base */
+
+@custom-selector :--monospace
+  :--monospace-elements,
+  :--monospace-components;
+
+@custom-selector :--monospace-elements
+  /* elements used in a specific manner */
+  code, kbd, pre, samp, var;
+
+@custom-selector :--monospace-components
+  /* tacc-docs components */
+  .cmd-line,
+  .job-script;
+
+
+
+/* Modifiers */
+
+@custom-selector :--monospace--inline
+  code:not(pre > *) /* inline code */,
+  kbd;
+
+@custom-selector :--monospace--block
+  pre > code /* code block with mostly input data */,
+  pre > samp /* code block with only output data */;
+
+
+
+@custom-selector :--monospace--boxed
+  code /* any code */,
+  pre > samp /* code block with only output data */;
+
+/* For output data e.g. command output in CLI demo */
+@custom-selector :--monospace--output
+  samp /* code block with only output data */;
+
+
+
+@custom-selector :--monospace--kbd
+  kbd;
+
+
+
+/* Elements */
+
+@custom-selector :--monospace__kbd
+  code kbd;
+
+/* For data that is neither input nor output e.g. command prompt in CLI demo */
+@custom-selector :--monospace__prompt
+  pre code u /* command prompts */;

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

@@ -3,6 +3,7 @@ UI states of [`<a>` anchor element](https://developer.mozilla.org/en-US/docs/Web
 | Mixin | Description
 | - | -
 | `.x-link`         | default state
+| `.x-link--disabled`| "disabled" state (e.g. no `href` attribute)
 | `.x-link--hover`  | `:hover` state
 | `.x-link--active` | `:active` (click) state
 

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

@@ -3,11 +3,13 @@
 <dl>
   <dt>Standard</dt>
   <dd><span class="x-link">default</span></dd>
+  <dd><span class="x-link x-link--disabled">"disabled"</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--disabled">"disabled"</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>

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

@@ -1,6 +1,3 @@
-@import url('../settings/color.css');
-@import url('../settings/border.css');
-
 .x-link {
   color: var(--global-color-link-on-light--normal);
 
@@ -8,6 +5,10 @@
   text-underline-offset: 0.2em;
   text-decoration-thickness: var(--global-border-width--normal);
 }
+.x-link--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
 .x-link--hover {
   text-decoration-line: underline;
   text-decoration-style: solid;
@@ -26,6 +27,9 @@
 
   text-decoration-line: underline;
 }
+.x-link--irregular--disabled {
+  @extend .x-link--disabled;
+}
 .x-link--irregular--hover {
   @extend .x-link--hover;
 

package/src/lib/_imports/{elements/links/docs.css → trumps/demo.css}

@@ -1,6 +1,7 @@
-/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+/* Scopes */
 
-p {
+/* To make all paragraph children narrow */
+.demo-narrow-paragraphs p {
   margin: 10px;
   max-width: 40ch; /* to wrap text so link is in middle of middle sentence */
 }

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

@@ -1,5 +1,4 @@
-# The form elements used rely on Bootstrap and CMS
-preview: '@preview.bootstrap-cms'
+label: (CMS) S Affixed Input Wrapper
 context:
-  supportStyles:
-    - /assets/elements/form.cms.css
+  shouldLoadCMS: true
+  📝 shouldLoadBootstrap: temporary dependence, until proven to work on Portal

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

@@ -1,30 +1,32 @@
 <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>
+    <div 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"
+      />
+    </div>
   </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>
+    <div 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>
+    </div>
   </dd>
 </dl>

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

@@ -1,15 +1,11 @@
-@import url("../settings/border.css");
-
-
-
 /* Layout */
 
 .s-affixed-input-wrapper:not(
-  .checkboxinput,
-  .radio,
-  .select,
-  .checkboxselectmultiple,
-  .textarea
+  .checkboxinput, .has-type-check
+  .radio, .has-type-radio
+  .select, .has-type-select
+  .checkboxselectmultiple, .has-select
+  .textarea, .has-textarea
 ) {
   display: grid;
   align-items: start;
@@ -40,8 +36,10 @@
 .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; }
+.s-affixed-input-wrapper .help-text,
+.s-affixed-input-wrapper .c-form__help { grid-area: help; }
+.s-affixed-input-wrapper .field-errors,
+.s-affixed-input-wrapper .c-form__errors { grid-area: error; }
 
 
 

package/src/lib/_imports/trumps/s-blockquote/readme.md

@@ -0,0 +1,12 @@
+A [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) within a [`<figure>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure).
+
+> **☝ Idea**
+>
+> Should this be implemented as `figure.has-blockquote` (fallback) `figure:has(blockquote)` (actual)? We can retain legacy support for `figure.s-blockquote` as an alternate class name.
+
+<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-blockquote/s-blockquote.hbs

@@ -0,0 +1,4 @@
+<figure class="s-blockquote {{#if class}}{{ class }}{{/if}}">
+  {{> @blockquote noCite=true class=false}}
+  <figcaption>Aldous Huxley, <cite>Brave New World</cite></figcaption>
+</figure>

package/src/lib/_imports/trumps/s-blockquote.css

@@ -1,29 +1,9 @@
-/*
-Blockquote
-
-A [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote).
-
-Markup:
-<figure class="s-blockquote">
-  <blockquote cite="https://www.huxley.net/bnw/four.html">
-    <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
-  </blockquote>
-  <figcaption>Aldous Huxley, <cite>Brave New World</cite></figcaption>
-</figure>
-
-Styleguide Trumps.Scopes.Blockquote
-*/
-
-.s-blockquote {
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-}
 .s-blockquote blockquote {
-  margin-bottom: 0; /* overwrite Bootstrap */
+  margin: unset; /* undo browser */
 
-  font-size: 1.125em;
   font-style: italic;
 }
+
 .s-blockquote blockquote p {
   margin: 0;
   white-space: pre-wrap;
@@ -33,13 +13,11 @@ Styleguide Trumps.Scopes.Blockquote
 
 .s-blockquote figcaption {
   margin-top: 0.3em;
-
-  font-size: 1em;
 }
 .s-blockquote figcaption::before {
   content: "— ";
 }
 
 .s-blockquote cite {
-  font-style: normal; /* overwrite browser */
+  font-style: unset; /* undo browser */
 }

package/src/lib/_imports/trumps/s-breadcrumbs.css

@@ -3,6 +3,9 @@ Breadcrumbs
 
 A list of links to ancestor navigation (pages or sections that are a parent, grandparent, et cetera of the current page or section) and the current page or section itself.
 
+- `.s-breadcrumbs`: root class for <nav>, <... [role="nav"]>, or <ol>
+- `.s-breadcrumbs-via-ul`: alternate root class for <ul> (not recommended)
+
 Notice: A scope class is used to enforce appropriate semantic HTML.
 
 Markup:
@@ -25,6 +28,7 @@ Markup:
 
 Styleguide Trumps.Scopes.Breadcrumbs
 */
+@import url("../tools/selectors.css");
 @import url("../tools/x-truncate.css");
 
 
@@ -33,12 +37,12 @@ Styleguide Trumps.Scopes.Breadcrumbs
 
 /* Base i.e. Container */
 
-nav.s-breadcrumbs {
-  padding-top: 15px;
+.s-breadcrumbs:is(nav),
+.s-breadcrumbs-via-ul {
+  padding-top: var(--global-space--above-breadcrumbs);
+  margin-bottom: var(--global-space--under-breadcrumbs);
 
   font-size: var(--global-font-size--x-small);
-
-  text-transform: uppercase;
 }
 
 
@@ -46,7 +50,8 @@ nav.s-breadcrumbs {
 /* Elements i.e. Content */
 
 /* To undo default list styles */
-nav.s-breadcrumbs ol {
+.s-breadcrumbs:is(nav) ol,
+.s-breadcrumbs-via-ul ul {
   list-style: none; /* overwrite browser styles */
   padding-left: unset; /* undo html-elements.css */
   margin-bottom: unset; /* undo html-elements.css */
@@ -54,16 +59,19 @@ nav.s-breadcrumbs ol {
   font-weight: var(--global-font-weight--medium);
 }
 
-ol.s-breadcrumbs li,
-nav.s-breadcrumbs ol li {
+.s-breadcrumbs:is(ol) li,
+.s-breadcrumbs:is(nav) ol li,
+.s-breadcrumbs-via-ul ul li {
   display: inline-block;
 }
 
-ol.s-breadcrumbs li + li::before,
-nav.s-breadcrumbs ol li + li::before {
+.s-breadcrumbs:is(ol) li + li::before,
+.s-breadcrumbs:is(nav) ol li + li::before,
+.s-breadcrumbs-via-ul ul li + li::before {
   content: ' > ';
 }
 
-nav.s-breadcrumbs ol li:last-child span {
+.s-breadcrumbs:is(nav) ol li:last-child,
+.s-breadcrumbs-via-ul ul li:last-child {
   font-weight: var(--bold);
 }

package/src/lib/_imports/trumps/s-cms-nav.css

@@ -9,3 +9,14 @@ Markup: s-cms-nav.html
 
 Styleguide Trumps.Scopes.CMSNav
 */
+
+ul.s-cms-nav {
+  /* To overwrite @tacc/core-styles */
+  padding-left: 0; /* copied from Bootstrap */
+  margin-bottom: 0; /* overwrite html-elements.css */
+}
+
+.s-cms-nav a:hover {
+  /* To overwrite @tacc/core-styles */
+  text-decoration: none; /* copied from Bootstrap */
+}

package/src/lib/_imports/trumps/s-guide-doc.css

@@ -12,45 +12,6 @@ Styleguide Trumps.Scopes.GuideDoc
 
 /* ELEMENTS */
 
-
-/* ELEMENTS: Content Sectioning */
-
-/* Fake <hr> above <h2> */
-.s-guide-doc h2:not(hr + h2)::before {
-  display: block;
-  content: '';
-
-  /* To mirror hr (site.css) */
-  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);
-}
-
-
-/* ELEMENTS: Text Content */
-
-.s-guide-doc blockquote {
-  opacity: 0.75;
-  border: var(--global-border--normal);
-
-  padding: 1em;
-}
-.s-guide-doc blockquote > *:last-child { margin-bottom: 0; }
-
-@media only screen and (min-width: 768px) {
-  blockquote { width: 600px; }
-}
-
-.s-guide-doc figure {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.s-guide-doc figcaption {
-  font-weight: bold;
-}
-
-
 /* ELEMENTS: Table Content */
 
 .s-guide-doc table {

package/src/lib/_imports/trumps/s-header.bootstrap.css

@@ -0,0 +1,30 @@
+/*
+Header
+
+Bootstrap styles that `s-header.css` expects exist in the same layer
+(i.e. desinger may expect to not change until a new header design):
+
+Markup: s-header.html
+
+Styleguide Trumps.Scopes.Header.Bootstrap
+*/
+
+.s-header .dropdown-item {
+  color: #212529;
+}
+.s-header .dropdown-item:focus,
+.s-header .dropdown-item:hover {
+  color: #16181b;
+  text-decoration: none;
+  background-color: #f8f9fa;
+}
+.s-header .dropdown-item.active,
+.s-header .dropdown-item:active {
+  color: #fff;
+  text-decoration: none;
+  background-color: #007bff
+}
+
+.s-header input {
+  font-family: inherit;
+}

package/src/lib/_imports/trumps/s-header.css

@@ -15,6 +15,7 @@ Markup: s-header.html
 
 Styleguide Trumps.Scopes.Header
 */
+@import url("./s-header.bootstrap.css");
 
 /* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)…
             `em` nor `rem` was not allowed because results were not consistent.
@@ -83,7 +84,7 @@ Styleguide Trumps.Scopes.Header
   --line-height: 24px;
   --border-width: 4px;
   --border-offset: calc(var(--nav-padding-vert) - var(--border-width));
-  --border-color: rgb(213, 181, 124);
+  --border-color: var(--global-color-secondary--light);
 
   /* The nav vertical padding does not match the link border, so the alignment
      of the link border with the bottom of the header is off by small amount */

package/src/lib/_imports/trumps/s-inline-dl.css

@@ -12,6 +12,7 @@ Markup:
 
 Styleguide Trumps.Scopes.InlineDescriptionList
 */
+
 dl.s-inline-dl dt {
   display: block;
   float: left;

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

@@ -1,8 +1 @@
-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/s-irregular-links.hbs

@@ -1,10 +1,22 @@
-<dl>
+<dl class="demo-narrow-paragraphs s-irregular-links">
   <dt>Links</dt>
-  <dd class="s-irregular-links">
+  <dd>
     {{> @text-and-link }}
   </dd>
+  <dd>
+    {{> @text-and-link-no-href }}
+  </dd>
+  <dd>
+    {{> @text-and-button-as-link }}
+  </dd>
   <dt>Buttons as Links</dt>
-  <dd class="s-irregular-links">
+  <dd>
+    {{> @text-and-link }}
+  </dd>
+  <dd>
+    {{> @text-and-link-no-href }}
+  </dd>
+  <dd>
     {{> @text-and-button-as-link }}
   </dd>
 </dl>

package/src/lib/_imports/trumps/s-paragraph-table/config.yml

@@ -0,0 +1,7 @@
+context:
+  data:
+    rows:
+      - paragraph: true
+      - paragraph: true
+      - paragraph: true
+      - paragraph: true

package/src/lib/_imports/trumps/s-paragraph-table/readme.md

@@ -0,0 +1,17 @@
+A [table]({{path './table' }}) that uses [paragraphs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) instead of cells.
+
+> **ⓘ Notice**
+>
+> - Text will not truncate. It will wrap.
+> - Only a single column is supported.
+
+> **⁉ Help**
+>
+> Should text truncate? Ask designers.
+
+<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-paragraph-table/s-paragraph-table.hbs

@@ -0,0 +1,7 @@
+<div class="{{#if class }}{{ class }}{{else}}s-paragraph-table{{/if}}">
+{{#each data.rows}}
+  {{#if paragraph}}
+  <p>{{> @text-of-one-paragraph-short }}</p>
+  {{/if}}
+{{/each}}
+</div>

package/src/lib/_imports/trumps/s-paragraph-table.css

@@ -0,0 +1,3 @@
+/* FAQ: Using @custom-selector within elements/table */
+/* SEE: src/lib/_imports/elements/table--basic.css */
+/* SEE: src/lib/_imports/elements/table.selectors.css */