@tacc/core-styles 0.11.0 → 1.0.0

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

@@ -0,0 +1,54 @@
+/*! 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 */
+/* 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-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");
+
+/* 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-card.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");
+@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");
+@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,34 @@
+/*! 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 these, client should load `./base.css` first */
+
+/* GENERICS */
+/* Mostly from Bootstrap */
+/* https://confluence.tacc.utexas.edu/x/b53tDg */
+
+/* ELEMENTS */
+/* To override Bootstrap */
+@import url("./elements/html-elements.cms.css");
+@import url("./elements/form.cms.css");
+
+/* OBJECTS */
+/* (none) */
+
+/* COMPONENTS */
+/* (none) */
+
+/* TRUMPS */
+/* 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 */
+/* (none) */
+
+/* GENERICS */
+/* (none) */
+
+/* ELEMENTS */
+@import url("./elements/demo.css");
+
+/* OBJECTS */
+/* (none) */
+
+/* COMPONENTS */
+/* (none) */
+
+/* TRUMPS */
+/* (none) */

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,25 @@
+/*! 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 these, client should load `./base.css` first */
+
+/* GENERICS */
+/* Mostly from Bootstrap */
+/* https://confluence.tacc.utexas.edu/x/b53tDg */
+
+/* ELEMENTS */
+/* To override Bootstrap */
+/* (none) */
+
+/* OBJECTS */
+@import url("./objects/o-flex-item-table-wrap.css");
+
+/* COMPONENTS */
+@import url("./components/mui.tabs.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,59 @@
+/* Organize */
+
+body > dl dl {
+  margin-block: 0;
+}
+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;
+}
+
+
+
+/* Debug */
+
+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;
+
+  font-family: var(--global-font-family--mono);
+}
+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;
+}
+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;
+}

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/html-elements.cms.css

@@ -14,9 +14,6 @@ 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 */
@@ -31,6 +28,8 @@ body {
 }
 
 body {
+  margin: 0;
+
   /* To avoid negative whitespace at right on horz scroll on tiny screen */
   min-width: 290px; /* developer-decided value */
 
@@ -206,7 +205,7 @@ code kbd {
 
 /* Code (<code>, <samp>, <pre>) */
 
-/* Code: any content or context) */ code,
+/* Code: any content or context */ code,
 /* Code: content has only output */ pre > samp {
   /* Undo Bootstrap */
   color: unset;

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

@@ -0,0 +1,67 @@
+/*
+Text Content
+
+Elements that create forms which allow users to enter and submit data.
+
+```
+<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
+*/
+
+/* To mimic Bootstrap */
+button, input, optgroup, select, textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/*
+Text Content
+
+Elements that organize blocks or sections of content placed (includes lists).
+
+```
+<blockquote> <dd> <div> <dl> <dt> <figcaption> <figure> <hr> <li> <ol> <p> <pre> <ul>
+```
+
+Reference:
+
+- [HTML element reference: Text content | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content)
+
+Styleguide Elements.TextContent
+*/
+
+/* To mimic Bootstrap */
+dl, ol, ul {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+/*
+Interactive Elements
+
+Elements that help to create interactive user interface objects.
+
+```
+<details> <summary> <dialog> <menu>
+```
+
+Reference:
+
+- [HTML element reference: Interactive elements | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Interactive_elements)
+
+Styleguide Elements.Interactive
+*/
+
+/* To mimic Bootstrap's <p> and <ul> margins */
+details {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}

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

@@ -1,3 +1,3 @@
 context:
   supportStyles:
-    - /assets/trumps/s-irregular-links.css
+    - /assets/tools/x-link/demo.css

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

@@ -1,11 +1,11 @@
 @import url('../tools/x-link.css');
 
-a {
+a:not(.c-button) {
   @extend .x-link;
 }
-a:hover {
+a:not(.c-button):hover {
   @extend .x-link--hover;
 }
-a:active {
+a:not(.c-button):active {
   @extend .x-link--active;
 }

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

@@ -1,8 +1,5 @@
-preview: '@preview.cms'
 context:
-  supportStyles:
-    - /assets/elements/links.css
-    - /assets/components/c-button.css
+  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
 variants:
   - name: default
     label: Basic

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

@@ -1,4 +1,7 @@
 <table {{#if data.has-table }}class="has-table"{{/if}}>
+  {{#if caption }}
+  <caption>{{{ caption }}}</catpion>
+  {{/if}}
   <thead>
     <tr>
       {{#each data.cols}}<th>{{ this }}</th>{{/each}}
@@ -15,6 +18,11 @@
         <p>{{> @text-of-one-paragraph }}</p>
       </td>
       {{/if}}
+      {{#if sentence}}
+      <td title="{{> @text-of-one-sentence }}">
+        <span>{{> @text-of-one-sentence }}</span>
+      </td>
+      {{/if}}
       {{#if custom-1}}<td>{{{ custom-1 }}}</td>{{/if}}
       {{#if custom-2}}<td>{{{ custom-2 }}}</td>{{/if}}
       {{#if custom-3}}<td>{{{ custom-3 }}}</td>{{/if}}

package/src/lib/_imports/elements/table--basic.css

@@ -12,9 +12,15 @@ table {
 
 /* To add border to bottom of all rows */
 /* FAQ: Added to cell, not row, because `border-collapse: separate` */
-thead tr :is(td, th),
+thead tr :is(td, th) {
+  border-bottom-width: var(--global-border-width--normal);
+  border-bottom-style: solid;
+  border-bottom-color: var(--global-color-primary--x-dark);
+}
 tr:not(:last-of-type) > :is(td, th) {
-  border-bottom: var(--global-border--normal);
+  border-bottom-width: var(--global-border-width--normal);
+  border-bottom-style: solid;
+  border-bottom-color: var(--global-color-primary--light);
 }
 
 /* To alternate table row colors (by coloring cells, not rows) */
@@ -66,6 +72,11 @@ tbody > tr > th {
 caption {
   font-size: var(--global-font-size--small);
   text-align: unset; /* undo Bootstrap _reboot.css */
+  caption-side: top; /* override Bootstrap */
+
+  /* To mimic table cell */
+  padding-block: 8px;
+  padding-inline: 16px;
 }
 
 

package/src/lib/_imports/generics/fonts.css

@@ -6,9 +6,9 @@ Load standard fonts for a TACC website.
 Usage:
   ```
   .something {
-    // BentonSans-MediumItalic
+    // BentonSans-RegularItalic
     font-family: 'Benton Sans';
-    font-weight: 500;
+    font-weight: 400;
     font-style: italic;
   }
   ```
@@ -28,12 +28,11 @@ Styleguide Generics.Fonts
   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;
+  src: url("../../fonts/BentonSans-RegularItalic.otf") format("opentype");
+  font-weight: 400;
+  font-style: italic;
   font-display: swap;
 }
 
@@ -44,7 +43,6 @@ Styleguide Generics.Fonts
   font-style: normal;
   font-display: swap;
 }
-
 @font-face {
   font-family: 'Benton Sans';
   src: url("../../fonts/BentonSans-MediumItalic.otf") format("opentype");
@@ -52,3 +50,19 @@ Styleguide Generics.Fonts
   font-style: italic;
   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-Black.otf") format("opentype");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}

package/src/lib/_imports/objects/o-fixed-header-table/config.yml

@@ -0,0 +1,60 @@
+status: ready
+order: 1
+context:
+  shouldLoadBootstrap: true # not yet tested without Bootstrap
+  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
+  data:
+    cols:
+      - ID
+      - Name
+      - Size
+      - Time
+    rows:
+      - id: n234as
+        name: apple-sauce
+        custom-1: 0.5 KB
+        time: 12/01/2019 11:04:19
+      - id: 56l810
+        name: milk-shake-032
+        custom-1: 300.0 KB
+        time: 03/22/2021 05:23:01
+      - id: 3r56xc
+        name: white-candy-5
+        custom-1: 1.5 MB
+        time: 12/01/2019 11:04:19
+      - id: 7ysnw3
+        name: butter-balls
+        custom-1: 0.5 KB
+        time: 09/11/2010 10:54:09
+      - id: 20ksdf
+        name: lemon-cookies-30
+        custom-1: 250.0 MB
+        time: 04/20/2020 15:03:10
+      - id: 7uys9e
+        name: purple-turnips-6
+        custom-1: 10.5 GB
+        time: 10/31/2017 19:59:41
+      - id: 98eeui
+        name: nightmare-treats
+        custom-1: 0.5 KB
+        time: 12/01/2019 11:04:19
+      - id: 54rr0s
+        name: toffe-pimples-12
+        custom-1: 300.0 KB
+        time: 03/22/2021 05:23:01
+      - id: 12dsds
+        name: cartesian-dumpling
+        custom-1: 1.5 MB
+        time: 12/01/2019 11:04:19
+      - id: 2gesee
+        name: crunchy-noodles
+        custom-1: 0.5 KB
+        time: 09/11/2010 10:54:09
+      - id: wr435e
+        name: ripe-mango-220
+        custom-1: 250.0 MB
+        time: 04/20/2020 15:03:10
+      - id: 76rgd3
+        name: purple-turnips-6
+        custom-1: 10.5 GB
+        time: 10/31/2017 19:59:41

package/src/lib/_imports/objects/o-fixed-header-table/demo.css

@@ -0,0 +1,18 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+/* To manage scrollbars to illustrate feature */
+div {
+  /* To force render of vertical scrollbar */
+  max-height: 300px;
+  overflow-y: scroll;
+
+  /* To avoid duplicate vertical scrollbars */
+  height: 100%;
+}
+
+/* To illustrate that scrollbar is for the table (not the window) */
+body {
+  display: grid;
+  align-items: center;
+  justify-items: center;
+}

package/src/lib/_imports/objects/o-fixed-header-table/o-fixed-header-table.hbs

@@ -0,0 +1,3 @@
+<div class="o-fixed-header-table">
+  {{> @table data=data caption="Header stays pinned top top of container on scroll." }}
+</div>

package/src/lib/_imports/objects/o-fixed-header-table/readme.md

@@ -0,0 +1,18 @@
+A [table]({{path './table' }}) with its header pinned during vertical scroll.
+
+> **?⃝ Explanation**
+>
+> [You can’t position: sticky; a `<thead>`. Nor a `<tr>`. But you can sticky a `<th>`…][source]
+
+> **ⓘ Notice**
+>
+> This class can be used on a table **or** a table wrapper.
+
+[source]: https://css-tricks.com/position-sticky-and-table-headers/ "CSS Tricks: Position Sticky & Table Headers"
+
+<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/objects/o-fixed-header-table.css

@@ -1,30 +1,4 @@
-/*
-Fixed Header Table
-
-A table with a header that does not move, and a body that scrolls.
-
-Markup:
-<table class="o-fixed-header-table">
-    <thead>
-      <tr>
-        <th>A</th>
-        <th>B</th>
-        <th>C</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>A</td>
-        <td>B</td>
-        <td>C</td>
-      </tr>
-    </thead>
-</table>
-
-Styleguide Objects.FixedHeaderTable
-*/
-/* SEE: https://css-tricks.com/position-sticky-and-table-headers/ */
-.o-fixed-header-table th {
+.o-fixed-header-table thead :is(td, th) {
   position: sticky;
   top: 0;