@tacc/core-styles 0.11.0 → 2.0.0

package/src/lib/_imports/components/mui.tabs.css

@@ -0,0 +1,30 @@
+.MuiTab-root {
+  font-size: 19px;
+  text-align: center;
+  opacity: 1;
+  display: inline-block;
+  position: absolute;
+  width: 25%;
+  height: 60.5px;
+}
+
+.MuiTab-root.Mui-selected {
+  background: #ffffff 0% 0% no-repeat padding-box;
+  border: 1px solid #afafaf;
+  border-bottom: none;
+  opacity: 1;
+  text-transform: none;
+  outline: none;
+}
+.MuiTab-root:not(.Mui-selected) {
+  background: #f4f4f4 0% 0% no-repeat padding-box;
+  color: black;
+  border: none;
+  border-bottom: 1px solid #afafaf;
+  text-transform: none;
+  height: 58.5px;
+}
+.MuiTab-root:not(.Mui-selected):hover {
+  background: #dbdbdb 0% 0% no-repeat padding-box;
+  border: 1px solid #afafaf;
+}

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

@@ -0,0 +1,49 @@
+/*! core-styles.base.css */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* SETTINGS */
+@import url("./core-styles.settings.css");
+
+/* GENERICS */
+/* Mostly from Bootstrap */
+/* https://confluence.tacc.utexas.edu/x/b53tDg */
+
+/* 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");
+@import url("./elements/table.css");
+
+/* OBJECTS */
+@import url("./objects/o-fixed-header-table.css");
+@import url("./objects/o-grid.css");
+@import url("./objects/o-site.css");
+@import url("./objects/o-table-wrap.css");
+
+/* COMPONENTS */
+@import url("./components/bootstrap.container.css");
+@import url("./components/bootstrap.figure.css");
+@import url("./components/bootstrap.modal.css");
+@import url("./components/c-button.css");
+@import url("./components/c-callout.css");
+@import url("./components/c-data-list.css");
+@import url("./components/c-footer.css");
+@import url("./components/c-form.css");
+@import url("./components/c-nav.css");
+@import url("./components/c-page.css");
+@import url("./components/c-message.css");
+@import url("./components/c-recognition.css");
+@import url("./components/c-see-all-link.css");
+
+/* TRUMPS */
+@import url("./trumps/s-blockquote.css");
+@import url("./trumps/s-breadcrumbs.css");
+@import url("./trumps/s-footer.css");
+@import url("./trumps/u-empty.css");
+@import url("./trumps/s-irregular-links.css");
+@import url("./trumps/u-mailto-text-replace.css");

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

@@ -0,0 +1,46 @@
+/*! core-styles.cms.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--cms.css");
+
+/* GENERICS */
+/* Mostly from Bootstrap */
+/* https://confluence.tacc.utexas.edu/x/b53tDg */
+
+/* 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 */
+@import url("./objects/o-float-content.css");
+@import url("./objects/o-offset-content.css");
+@import url("./objects/o-section.css");
+
+/* COMPONENTS */
+@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 */
+/*
+@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.demo.css

@@ -0,0 +1,23 @@
+/*! core-styles.demo.css */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* SETTINGS */
+@import url("./settings/demo.css");
+
+/* GENERICS */
+/* (none) */
+
+/* ELEMENTS */
+@import url("./elements/demo.css");
+
+/* OBJECTS */
+/* (none) */
+
+/* COMPONENTS */
+@import url("./components/demo.css");
+
+/* TRUMPS */
+@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.header.css

@@ -0,0 +1,37 @@
+/*! core-styles.header.css */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* SETTINGS */
+/* To get these, client should load `./base.css` first */
+
+/* GENERICS */
+/* Mostly from Bootstrap */
+/* https://confluence.tacc.utexas.edu/x/b53tDg */
+
+/* ELEMENTS */
+/* To override Bootstrap */
+/* (none) */
+
+/* OBJECTS */
+/* (none) */
+
+/* COMPONENTS */
+/* (none) */
+
+/* TRUMPS */
+/* FAQ: Because of third-party code and a rush to style the Frontera header
+        (which meant maintaining existing markup), scope classes were used for
+        - the header
+        - the Portal nav
+        - the CMS nav
+*/
+@import url("./trumps/s-header.css");
+@import url("./trumps/s-portal-nav.css");
+@import url("./trumps/s-cms-nav.css");
+
+/* UNORGANIZED */
+/* TODO: Convert to a component */
+@import url("./branding_logos.css");

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

@@ -0,0 +1,28 @@
+/*! core-styles.portal.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--portal.css");
+
+/* GENERICS */
+/* Mostly from Bootstrap */
+/* https://confluence.tacc.utexas.edu/x/b53tDg */
+
+/* ELEMENTS */
+/* To override Bootstrap */
+@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/core-styles.settings.css

@@ -0,0 +1,9 @@
+/*! core-styles.settings.css → */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+@import url("./settings/border.css");
+@import url("./settings/color.css");
+@import url("./settings/font.css");
+@import url("./settings/max-width.css");
+@import url("./settings/space.css");
+/*! ← core-styles.settings.css */

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

@@ -0,0 +1,92 @@
+/* Set Foundation */
+
+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 */
+}
+
+main {
+  font-size: 1.6rem;
+}
+
+
+
+/* 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 */
+  }
+
+}
+
+
+
+/* Lay Out */
+
+body > main {
+  width: 80vw;
+  margin-inline: auto;
+  padding-block: 1em;
+}
+
+/* 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
+  );
+}
+
+/* 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/form.cms/readme.md

@@ -0,0 +1,16 @@
+[Form elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms) allow users to enter and submit data.
+
+```
+<form> <fieldset> <legend> <label> <input> <select> <optgroup> <option> <textarea> <button> <output> <progress> <meter> <datalist>
+```
+
+> **⚠️ WARNING**
+>
+> These overwrite, but may accidentally rely on, [Bootstrap Reboot: Forms](https://getbootstrap.com/docs/4.0/content/reboot/#forms).
+
+<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/form.cms.css

@@ -1,26 +1,3 @@
-/*
-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 */
@@ -37,6 +14,7 @@ textarea {
 
 label {
   font-size: var(--global-font-size--small);
+  font-weight: var(--medium);
 
   line-height: normal;
   margin-bottom: 0.75em;
@@ -72,6 +50,10 @@ textarea {
 ::placeholder {
   color: var(--global-color-primary--dark);
 }
+input, select {
+  height: 1.4em;
+  box-sizing: content-box;
+}
 
 input[type="time"],
 input[type="date"] {

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);
+}
+
+
+
+
+
+}

package/src/lib/_imports/elements/html-elements/config.yml

@@ -0,0 +1,12 @@
+variants:
+  - name: default
+    label: HTML Elements
+  - name: cms
+    label: (CMS) HTML Elements
+    context:
+      shouldLoadCMS: true
+      shouldLoadBootstrap: true
+  - name: docs
+    label: (Docs) HTML Elements
+    context:
+      shouldLoadDocs: true