@tacc/core-styles 1.0.0 → 2.0.0

package/src/lib/_imports/components/cortal.icon.css

@@ -21,6 +21,33 @@ Styleguide Components.Cortal.Icon
 
 /* CAVEAT: Urgent use only; always prefer official icon names */
 
+.icon-collapse::before {
+  content: "\ea15"; /* from `.icon-contract::before` */
+}
+
+
+
+/* Extensions */
+.icon {
+  /* To hide text within icon */
+  overflow: hidden;
+  /* To mirror cortal.icon.font.css font-size */
+  width: 1em;
+  height: 1em;
+}
+
+
+
+/* Cross-Pattern */
+
+/* To tweak action icon appearance and layout */
+:--c-card > :is(:--action) > .icon:first-child,
+p > :is(:--action):only-child > .icon:first-child {
+    vertical-align: middle;
+    margin-right: 10px;
+    font-size: 1.2em;
+}
+
 
 
 /* Overrides */
@@ -31,22 +58,34 @@ Styleguide Components.Cortal.Icon
 /* relative units */
 .icon-sm {
   font-size: 1.8rem;
+  width: 1.8rem;
+  height: 1.8rem;
 }
 .icon-md {
   font-size: 2.4rem;
+  width: 2.4rem;
+  height: 2.4rem;
 }
 .icon-lg {
   font-size: 6.4rem;
+  width: 6.4rem;
+  height: 6.4rem;
 }
 /* absolute units */
 .icon-18 {
   font-size: 18px;
+  width: 18px;
+  height: 18px;
 }
 .icon-24 {
   font-size: 24px;
+  width: 24px;
+  height: 24px;
 }
 .icon-64 {
   font-size: 64px;
+  width: 64px;
+  height: 64px;
 }
 .icon-16,
 .icon-32 { font-size: unset /* to disallow unsupported font sizes */ }

package/src/lib/_imports/components/demo.css

@@ -0,0 +1,40 @@
+/* Grid */
+
+.demo-grid {
+  display: grid;
+  gap: 10px;
+}
+.demo-grid > figure {
+  margin: unset; /* undo browser & Bootstrap */
+}
+
+/* Grid: Boxes */
+
+.demo-grid--boxes > * {
+  border: var(--global-border--normal);
+  padding: 10px;
+  text-align: center;
+}
+
+/* Grid: Square */
+/* https://medium.com/cloudaper/ea48baf038f3 */
+/* https://codepen.io/krystof-k/pen/vdNQGB */
+
+.demo-grid--square {
+  --size: 115px;
+
+  grid-template-columns: repeat(auto-fill, var(--size));
+}
+/* To force height to match width */
+.demo-grid--square::before {
+  content: '';
+  width: 0; /* to obscure this item from grid visualization for developers */
+  padding-bottom: 100%;
+  grid-row: 1 / 1;
+  grid-column: 1 / 1;
+}
+/* To hide the ::before grid item */
+.demo-grid--square > *:first-child {
+  grid-row: 1 / 1;
+  grid-column: 1 / 1;
+}

package/src/lib/_imports/components/django-cms-forms/config.yml

@@ -1,5 +1,6 @@
 context:
-  # only for temp demo instance of this pattern (which should be in CMS)
-  shouldLoadCMS: true # because this is demo but this is CMS pattern
-  shouldSkipPattern: false # because …base.css does not load this CMS pattern
+  shouldLoadCMS: true
+  📝 shouldLoadCMS: because this is demo but this is CMS pattern
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this
 label: Django CMS Forms

package/src/lib/_imports/components/django-cms-forms/django-cms-forms.hbs

@@ -1,3 +1,6 @@
+<p class="c-message c-message--scope-global">
+  This component is maintained simuiltaneously with <a href="{{path '../detail/c-form' }}" target="_parent">C Form</code></a> and should look identical. Eventually, the two should have a single source of truth. To learn more, read <a href="https://confluence.tacc.utexas.edu/x/vJd9E" target="_blank">(Confluence) APCD - Form Markup &amp; Styles</a>.
+</p>
 <div class="forms">
 
   <h3 class="title">Title of Form</h3>

package/src/lib/_imports/components/django-cms-forms.css

@@ -136,7 +136,7 @@ ul.checkboxselectmultiple li:last-child label {
   @extend .c-message;
   @extend .c-message--type-error;
   @extend .c-message--scope-section;
-  @extend .c-message--scope-section.c-message--type-error;
+  @extend .c-message--type-error.c-message--scope-section;
 }
 .field-errors li {
   @extend .c-message;

package/src/lib/_imports/components/tacc-docs/config.yml

@@ -0,0 +1,3 @@
+label: TACC Docs
+context:
+  shouldLoadDocs: true

package/src/lib/_imports/components/tacc-docs/readme.md

@@ -0,0 +1,23 @@
+Components used on [TACC-Docs].
+
+> **ⓘ Notice**
+>
+> These components will likely **not** be used outside https://docs.tacc.utexas.edu, but are in Core-Styles because they benefit from the Core-Styles build process.*
+
+<small>
+
+\* It is likely not worth the overhead [Node] to add Core-Styles build process to TACC Docs.†
+<br />
+† Core-CMS has the Core-Styles build process, because it is heavily used there.
+
+</small>
+
+[TACC-Docs]: https://github.com/TACC/TACC-Docs/
+[Node]: https://nodejs.org/en/
+
+<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/components/tacc-docs/tacc-docs.hbs

@@ -0,0 +1,43 @@
+<dl>
+  <dt>Job Script</dt>
+  <dd>
+    <pre class="job-script">
+#!/bin/bash
+#SBATCH -J myjob              # job name
+#SBATCH -e myjob.%j.err       # error file name
+#SBATCH -o myjob.%j.out       # output file name
+#SBATCH -N 2                  # request 2 nodes
+#SBATCH -n 96                 # request 2x48=96 MPI tasks
+#SBATCH -p skx-normal         # designate queue
+#SBATCH -t 24:00:00           # designate max run time
+#SBATCH -A myproject          # charge job to myproject
+module load gromacs/2022.1
+
+ibrun gmx_mpi mdrun -s topol.tpr -o traj.trr -c confout.gro -e ener.edr -g md.log</pre>
+  </dd>
+
+  <dt>CMD Line</dt>
+  <dd>
+    <pre class="cmd-line">login1$ <b>module load kitten</b></pre>
+  </dd>
+
+  <dt>Syntax</dt>
+  <dd>
+    <dl>
+      <dt>via &lt;pre&gt;</dt>
+      <dd>
+        <pre class="syntax">
+|------- Socket 0 ------------|-------- Socket 1 -------------|
+#   0   1   2,..., 61, 62, 63 |  0   1   2,...,  61,  62,  63 |
+0   0   1   2,..., 61, 62, 63 | 64  65  66,..., 125, 126, 127 |</pre>
+      </dd>
+      <dt>via &lt;p&gt;</dt>
+      <dd>
+        <p class="syntax">
+|------- Socket 0 ------------|-------- Socket 1 -------------|
+#   0   1   2,..., 61, 62, 63 |  0   1   2,...,  61,  62,  63 |
+0   0   1   2,..., 61, 62, 63 | 64  65  66,..., 125, 126, 127 |</p>
+      </dd>
+    </dl>
+  </dd>
+</dl>

package/src/lib/_imports/components/tacc-docs.css

@@ -0,0 +1,11 @@
+@import url("../trumps/s-breadcrumbs.css");
+
+.cmd-line,
+.job-script {
+  /* SEE: ../tools/selectors.monospace.css */
+  /* FAQ: The element-based code styling is much richer than these classes */
+}
+
+.rst-content > [role="navigation"] {
+  @extend .s-breadcrumbs-via-ul;
+}

package/src/lib/_imports/core-styles.base.css

@@ -13,6 +13,7 @@
 
 /* ELEMENTS */
 /* To override Bootstrap */
+@import url("./elements/root.css");
 /* NOTE: Load generic html-elements.css before specific elements/….css */
 @import url("./elements/html-elements.css");
 @import url("./elements/links.css");
@@ -20,10 +21,7 @@
 
 /* OBJECTS */
 @import url("./objects/o-fixed-header-table.css");
-@import url("./objects/o-float-content.css");
 @import url("./objects/o-grid.css");
-@import url("./objects/o-offset-content.css");
-@import url("./objects/o-section.css");
 @import url("./objects/o-site.css");
 @import url("./objects/o-table-wrap.css");
 
@@ -32,7 +30,6 @@
 @import url("./components/bootstrap.figure.css");
 @import url("./components/bootstrap.modal.css");
 @import url("./components/c-button.css");
-@import url("./components/c-card.css");
 @import url("./components/c-callout.css");
 @import url("./components/c-data-list.css");
 @import url("./components/c-footer.css");
@@ -42,10 +39,8 @@
 @import url("./components/c-message.css");
 @import url("./components/c-recognition.css");
 @import url("./components/c-see-all-link.css");
-@import url("./components/cortal.icon.css");
 
 /* TRUMPS */
-@import url("./trumps/s-affixed-input-wrapper.css");
 @import url("./trumps/s-blockquote.css");
 @import url("./trumps/s-breadcrumbs.css");
 @import url("./trumps/s-footer.css");

package/src/lib/_imports/core-styles.cms.css

@@ -5,7 +5,8 @@
 /* https://confluence.tacc.utexas.edu/x/IAA9Cw */
 
 /* SETTINGS */
-/* To get these, client should load `./base.css` first */
+/* To get most settings, client should load `./base.css` first */
+@import url("./settings/font--cms.css");
 
 /* GENERICS */
 /* Mostly from Bootstrap */
@@ -13,16 +14,27 @@
 
 /* ELEMENTS */
 /* To override Bootstrap */
+@import url("./elements/sticky-footer.css");
 @import url("./elements/html-elements.cms.css");
+@import url("./elements/headings--cms.css");
+@import url("./elements/monospace.css");
 @import url("./elements/form.cms.css");
+@import url("./elements/table.cms.css");
 
 /* OBJECTS */
-/* (none) */
+@import url("./objects/o-float-content.css");
+@import url("./objects/o-offset-content.css");
+@import url("./objects/o-section.css");
 
 /* COMPONENTS */
-/* (none) */
+@import url("./components/cortal.icon.css");
+@import url("./components/c-card.css");
+/* TODO: Move to TACC/Core-CMS-Resources:/frontera-cms
+        or — alternatively — TACC/Core-CMS */
+@import url("./components/c-card--frontera-about-page.css");
 
 /* TRUMPS */
+@import url("./trumps/s-affixed-input-wrapper.css");
 /* To explain the in-limbo Core-CMS doc page styles */
 /* FAQ: Commented out because Core-CMS doc pages load these directly */
 /* IMPORTANT: If CMS docs are moved to TACC-Docs, then kill these stylesheets */

package/src/lib/_imports/core-styles.demo.css

@@ -5,7 +5,7 @@
 /* https://confluence.tacc.utexas.edu/x/IAA9Cw */
 
 /* SETTINGS */
-/* (none) */
+@import url("./settings/demo.css");
 
 /* GENERICS */
 /* (none) */
@@ -17,7 +17,7 @@
 /* (none) */
 
 /* COMPONENTS */
-/* (none) */
+@import url("./components/demo.css");
 
 /* TRUMPS */
-/* (none) */
+@import url("./trumps/demo.css");

package/src/lib/_imports/core-styles.docs.css

@@ -0,0 +1,36 @@
+/*! core-styles.docs.css */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* SETTINGS */
+/* To get most settings, client should load `./base.css` first */
+@import url("./settings/font--docs.css");
+
+/* GENERICS */
+/* (none) */
+
+/* ELEMENTS */
+@import url("./elements/form.cms.css");
+@import url("./elements/html-elements.cms.css");
+@import url("./elements/html-elements.docs.css");
+@import url("./elements/headings--cms.css");
+@import url("./elements/monospace.css");
+
+/* OBJECTS */
+/* (none) */
+
+/* COMPONENTS */
+@import url("./components/admonition.css");
+@import url("./components/align.css");
+@import url("./components/tacc-docs.css");
+
+/* TRUMPS */
+/* These styles from Core-CMS doc pages might be useful */
+/*
+@import url("_imports/trumps/s-document.css");
+@import url("_imports/trumps/s-guide-doc.css");
+@import url("_imports/trumps/s-inline-dl.css");
+@import url("_imports/trumps/u-nested-text-content.css");
+*/

package/src/lib/_imports/core-styles.portal.css

@@ -5,7 +5,8 @@
 /* https://confluence.tacc.utexas.edu/x/IAA9Cw */
 
 /* SETTINGS */
-/* To get these, client should load `./base.css` first */
+/* To get most settings, client should load `./base.css` first */
+@import url("./settings/font--portal.css");
 
 /* GENERICS */
 /* Mostly from Bootstrap */
@@ -13,13 +14,15 @@
 
 /* ELEMENTS */
 /* To override Bootstrap */
-/* (none) */
+@import url("./elements/sticky-footer.css");
 
 /* OBJECTS */
 @import url("./objects/o-flex-item-table-wrap.css");
 
 /* COMPONENTS */
+@import url("./components/cortal.icon.css");
 @import url("./components/mui.tabs.css");
+@import url("./components/c-message.portal.css");
 
 /* TRUMPS */
 /* (none) */

package/src/lib/_imports/elements/demo.css

@@ -1,59 +1,92 @@
-/* Organize */
+/* Set Foundation */
 
-body > dl dl {
-  margin-block: 0;
+html {
+  /* Set base font but support user-defined browser font size */
+  /* SEE: https://snook.ca/archives/html_and_css/font-size-with-rem */
+  font-size: 62.5%; /* 16px */
 }
-body > dl dt,
-body > dl dd {
-  font-family: Arial, sans;
-  color: #484848;
-  line-height: normal;
-}
-body > dl dt {
-  font-weight: normal;
-  margin-bottom: 10px;
-}
-body > dl dt:not(:first-of-type) {
-  margin-top: 20px;
-}
-body > dl dd {
-  margin-bottom: 10px;
-  margin-left: 25px;
-}
-body > dl dd > * {
-  margin-right: 5px;
-  vertical-align: middle;
+
+main {
+  font-size: 1.6rem;
 }
 
 
 
-/* Debug */
+/* Organize Content */
+
+main > dl {
+
+  &:is(dt, dd):not(.no-demo-styles > *) {
+    font-family: var(--global-font-family--sans);
+    color: #484848;
+    line-height: normal;
+  }
+  & dt:not(.no-demo-styles > *) {
+    font-size: 1.6rem;
+    font-weight: var(--medium);
+    margin-bottom: 10px;
+  }
+  & > dt:not(.no-demo-styles > *) {
+    font-weight: var(--bold);
+  }
+  & dt:not(:first-of-type):not(.no-demo-styles > *) {
+    margin-top: 20px;
+  }
+  & dd:not(.no-demo-styles > *) {
+    margin-bottom: 10px;
+    margin-left: 25px;
+  }
+
+  & dl:not(.no-demo-styles) {
+    margin-block: 0;
+    padding-left: unset; /* undo html-elements.cms.css */
+  }
+
+}
 
-body > details:last-of-type {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 1;
 
-  padding: 1em;
-  background-color: #222;
-  color: lime;
 
-  text-align: right;
-  direction: rtl;
+/* Lay Out */
 
-  font-family: var(--global-font-family--mono);
+body > main {
+  width: 80vw;
+  margin-inline: auto;
+  padding-block: 1em;
 }
-body > details[open]:last-of-type { opacity: 1; }
-body > details:not([open]):last-of-type { opacity: 0.5; }
 
-body > details:last-of-type summary {
-  font-weight: bold;
+/* To show when body is covered by a full-width background */
+body:has(main > section) {
+  --color-light: var(--global-color-primary--xx-light);
+  --color-dark: var(--global-color-primary--x-light);
+
+  background-color: var(--color-dark);
+  background: repeating-linear-gradient( 90deg,
+    var(--color-dark),
+    var(--color-dark) 1px,
+    var(--color-light) 1px,
+    var(--color-light) 20px
+  );
 }
-body > details:last-of-type dt { font-weight: normal; }
-body > details:last-of-type dd { font-weight: bold; }
-body > details:last-of-type dd {
-  line-height: 1.4;
-  min-height: 1.4em;
-  width: 4ch;
+
+/* To give equal block spacing to rulers */
+section + hr {
+  --global-space--hr-buffer-above: var(--global-space--hr-buffer-below);
+}
+
+
+
+/* Background */
+
+/* To show when body is covered by a full-width background */
+body:has(body > .o-section) {
+  --color-light: var(--global-color-primary--xx-light);
+  --color-dark: var(--global-color-primary--x-light);
+
+  background-color: var(--color-dark);
+  background: repeating-linear-gradient( -45deg,
+    var(--color-dark),
+    var(--color-dark) 1px,
+    var(--color-light) 1px,
+    var(--color-light) 20px
+  );
 }

package/src/lib/_imports/elements/dl/dl.hbs

@@ -0,0 +1,6 @@
+<dl {{#if class }}class="{{ class }}"{{/if}}>
+  {{#each data.key-value-pairs}}
+    {{#if key}}<dt class="c-data-list__key">{{ key }}</dt>{{/if}}
+    {{#if value}}<dd class="c-data-list__value">{{ value }}</dd>{{/if}}
+  {{/each}}
+</dl>

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

@@ -0,0 +1,15 @@
+variants:
+  - name: default
+    hidden: true
+  - name: cms
+    status: ready
+    label: (CMS) Headings
+    context:
+      shouldLoadCMS: true
+      shouldLoadBootstrap: true
+  - name: portal
+    status: prototype
+    label: (Portal) Headings
+    context:
+      shouldLoadPortal: true
+      shouldLoadBootstrap: true

package/src/lib/_imports/elements/headings/demo.css

@@ -0,0 +1,10 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+dt {
+  margin-top: 3em;
+  border-top: var(--global-border-width--thick) solid var(--global-color-primary--normal);
+  padding-top: 1em;
+  padding-bottom: 1em;
+  border-bottom: var(--global-border--normal);
+  margin-bottom: 3em;
+}

package/src/lib/_imports/elements/headings/headings--cms.hbs

@@ -0,0 +1,18 @@
+<strong>Table of Contents</strong>
+<nav class="c-nav">
+  <ul>
+    <li><a href="#headings--no-section"><strong>not</strong> in an "O Section"</a></li>
+    <li><a href="#headings--in-section"><strong>inside</strong> an "O Section"</a></li>
+  </ul>
+</nav>
+<dl>
+  <dt id="headings--no-section"><strong>not</strong> in an <a href="{{path '../detail/o-section' }}" target="_parent"><code>O Section</code></a></dt>
+  <dd>
+    {{> @headings }}
+  </dd>
+
+  <dt id="headings--in-section"><strong>inside</strong> an <a href="{{path '../detail/o-section' }}" target="_parent"><code>O Section</code></a></dt>
+  <dd class="o-section o-section--style-muted">
+    {{> @headings }}
+  </dd>
+</dl>

package/src/lib/_imports/elements/headings/headings.hbs

@@ -0,0 +1,12 @@
+<h1>Heading 1</h1>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<h2>Heading 2</h2>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<h3>Heading 3</h3>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<h4>Heading 4</h4>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<h5>Heading 5</h5>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<h6>Heading 6</h6>
+<p>{{> @text-of-one-paragraph-medium }}</p>

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

@@ -0,0 +1,12 @@
+[Heading elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) represent six levels of section headings.
+
+```
+<h1> <h2> <h3> <h4> <h5> <h6>
+```
+
+<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/headings--cms.css

@@ -0,0 +1,70 @@
+@import url("../tools/selectors.css");
+
+/* To scope these styles to main content (i.e. not header, not navbar) */
+/* To prevent these styles on portal content (i.e. within a React app) */
+/* TODO: Delete `:not(…)` after tup-ui does not load `core-styles.cms.css` */
+:where(:--main-content, :not(:--portal-content)) {
+
+
+
+
+
+/*
+Content Sectioning: Headings
+*/
+
+/* Structure */
+
+& h1 {
+    margin-bottom: 40px; /* rounded from design 42px */
+    text-transform: uppercase;
+}
+& h2 {
+    margin-top: 0px; /* depends on interpretation of design */
+    margin-bottom: 30px; /* rounded from design 31px */
+}
+& h3 {
+    margin-top: 0; /* designs suggest component padding can give top spacing */
+    margin-bottom: 20px; /* rounded from design 17px */
+}
+/* WARNING: No design available; these are just developer guesswork */
+& h5 {
+    text-transform: uppercase;
+}
+
+
+
+/* Skin */
+
+& h1 {
+    font-size: var(--global-font-size--xx-large);
+    font-weight: var(--black);
+}
+& h2 {
+    color: var(--global-color-accent--secondary);
+    font-size: var(--global-font-size--x-large);
+    font-weight: var(--black);
+}
+& h3 {
+    font-size: var(--global-font-size--large);
+    font-weight: var(--black);
+}
+/* WARNING: No design available; these are just developer guesswork */
+& h4 {
+    font-size: var(--global-font-size--medium);
+    font-weight: var(--bold);
+}
+& h5 {
+    font-size: var(--global-font-size--small);
+    font-weight: var(--black);
+}
+& h6 {
+    font-size: var(--global-font-size--small);
+    font-weight: var(--bold);
+}
+
+
+
+
+
+}