npm - @tacc/core-styles - Versions diffs - 0.11.0 → 2.0.0 - Mend

@tacc/core-styles 0.11.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (427) hide show

package/src/lib/_imports/elements/root.css ADDED Viewed

@@ -0,0 +1,41 @@
+/*
+Main Root & Sectioning Root
+Elements that represent the root of a document or document content.
+```
+<html> <body>
+```
+Reference:
+- [MDN: HTML element reference: Main root](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Main_root)
+- [MDN: HTML element reference: Sectioning root](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Sectioning_root)
+Styleguide Elements.MainSectioningRoots
+*/
+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 */
+}
+/* The webpage must be at least as tall as the viewport */
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  /* To avoid negative whitespace at right on horz scroll on tiny screen */
+  min-width: 290px; /* developer-decided value */
+  /* To overwrite Bootstrap */
+  color: var(--global-color-primary--x-dark);
+  font-family: var(--global-font-family--sans);
+  font-size: var(--global-font-size--small);
+  line-height: 1.4;
+}

package/src/lib/_imports/elements/sticky-footer.css ADDED Viewed

@@ -0,0 +1,6 @@
+/* To make a footer stick to bottom of page */
+/* https://css-tricks.com/a-clever-sticky-footer-technique/ */
+body > main + footer {
+  position: sticky;
+  top: 100vh;
+}

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

@@ -1,8 +1,3 @@
-preview: '@preview.cms'
-context:
-  supportStyles:
-    - /assets/elements/links.css
-    - /assets/components/c-button.css
 variants:
   - name: default
     label: Basic
@@ -42,7 +37,129 @@ variants:
                 text: View Details
               - is-button: true
                 text: Delete
-  - name: paragraph
+  - name: cms
+    label: Basic (CMS)
+    context:
+      shouldLoadCMS: true
+      data:
+        cols:
+          - ID
+          - Name
+          - Size
+          - Time
+          - Actions
+        rows:
+          - id: n234as
+            name-link: apple-sauce
+            custom-1: 0.5 KB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 56l810
+            name-link: milk-shake-032
+            custom-1: 300.0 KB
+            time: 03/22/2021 05:23:01
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 3r56xc
+            name-link: white-candy-5
+            custom-1: 1.5 MB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+  - name: no-header
+    context:
+      data:
+        rows:
+          - id: n234as
+            name-link: apple-sauce
+            custom-1: 0.5 KB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 56l810
+            name-link: milk-shake-032
+            custom-1: 300.0 KB
+            time: 03/22/2021 05:23:01
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 3r56xc
+            name-link: white-candy-5
+            custom-1: 1.5 MB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+  - name: no-header-cms
+    label: No Header (CMS)
+    context:
+      shouldLoadCMS: true
+      data:
+        rows:
+          - id: n234as
+            name-link: apple-sauce
+            custom-1: 0.5 KB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 56l810
+            name-link: milk-shake-032
+            custom-1: 300.0 KB
+            time: 03/22/2021 05:23:01
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 3r56xc
+            name-link: white-candy-5
+            custom-1: 1.5 MB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+  - name: via-paragraphs
+    context:
+      data:
+        rows:
+          - paragraph: true
+          - paragraph: true
+          - paragraph: true
+          - paragraph: true
+  - name: via-paragraphs-cms
+    view: 'table--via-paragraphs.hbs'
+    label: Via Paragraphs (CMS)
+    context:
+      shouldLoadCMS: true
+      data:
+        rows:
+          - paragraph: true
+          - paragraph: true
+          - paragraph: true
+          - paragraph: true
+  - name: with-paragraphs
     context:
       data:
         cols:

package/src/lib/_imports/elements/table/table--via-paragraphs.hbs ADDED Viewed

@@ -0,0 +1,22 @@
+<h2>Fake Table</h2>
+{{> @s-paragraph-table class="s-paragraph-table" data=data }}
+<br />
+<br />
+<h2>Real Table</h2>
+<table class="{{#if class }}{{ class }}{{/if}}">
+  <tbody>
+  {{#each data.rows}}
+    <tr>
+      {{#if paragraph}}
+      <td title="{{> @text-of-one-paragraph-short }}">
+        <p>{{> @text-of-one-paragraph-short }}</p>
+      </td>
+      {{/if}}
+    </tr>
+  {{/each}}
+  </tbody>
+</table>

package/src/lib/_imports/elements/table/table--via-paragraphs.readme.md ADDED Viewed

@@ -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/elements/table/table.hbs CHANGED Viewed

@@ -1,18 +1,34 @@
-<table {{#if data.has-table }}class="has-table"{{/if}}>
+<table class="{{#if table }}has-table{{/if}} {{#if class }}{{ class }}{{/if}}">
+  {{#if caption }}
+  <caption>{{{ caption }}}</catpion>
+  {{/if}}
+  {{#if data.cols }}
   <thead>
     <tr>
       {{#each data.cols}}<th>{{ this }}</th>{{/each}}
     </tr>
   </thead>
+  {{/if}}
   <tbody>
+  {{#each data.key-value-pairs}}
+    <tr>
+      {{#if key}}<th class="c-data-list__key">{{ key }}</th>{{/if}}
+      {{#if value}}<td class="c-data-list__value">{{ value }}</td>{{/if}}
+    </tr>
+  {{/each}}
   {{#each data.rows}}
     <tr>
       {{#if id}}<th>{{ id }}</th>{{/if}}
       {{#if name}}<th>{{ name }}</th>{{/if}}
       {{#if name-link}}<th><a href="#">{{ name-link }}</a></th>{{/if}}
       {{#if paragraph}}
-      <td title="{{> @text-of-one-paragraph }}">
-        <p>{{> @text-of-one-paragraph }}</p>
+      <td title="{{> @text-of-one-paragraph-short }}">
+        <p>{{> @text-of-one-paragraph-short }}</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}}

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

@@ -1,20 +1,39 @@
 @import url("../tools/x-truncate.css");
-table {
+@import url("./table.selectors.css");
+table,
+:--s-paragraph-table {
+  --font-size: var(--global-font-size--small, 12px);
+  --cell-pad-vert: 0.6667em; /* 8px if font-size is 12px */
+  --cell-pad-horz: 1.3333em; /* 16px if font-size is 12px */
+  --cell-line-height: 1.1;
   /* To prevent borders from being hidden */
   /* NOTE: Specifically, the right border of pinned columns (narrow windows) */
   border-collapse: separate; /* overwrite Bootstrap */
   border-spacing: 0;
   font-family: var(--global-font-family--sans--portal);
-  font-size: var(--global-font-size--small);
+  font-size: var(--font-size);
+}
+:--s-paragraph-table {
+  display: table; /* to mimic shrink-wrap width of real table */
 }
-/* To add border to bottom of all rows */
+/* To add top border to tbody (unless nested) */
 /* FAQ: Added to cell, not row, because `border-collapse: separate` */
-thead tr :is(td, th),
-tr:not(:last-of-type) > :is(td, th) {
-  border-bottom: var(--global-border--normal);
+tbody > tr:first-child > :is(td, th),
+:--s-paragraph-table {
+  border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+}
+/* To add bottom border to rows */
+tr:not(:last-of-type) > :is(td, th),
+:--s-paragraph-table p:not(:last-of-type) {
+  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) */
@@ -23,32 +42,30 @@ tr:not(:last-of-type) > :is(td, th) {
 tr:nth-child(odd) :is(th, td) {
   background: var(--global-color-background--app);
 }
-tr:nth-child(even) :is(th, td) {
+tr:nth-child(even) :is(th, td),
+:--s-paragraph-table p:nth-child(even) {
   background: var(--global-color-primary--x-light);
 }
-:is(td, th) {
+:is(td, th),
+:--s-paragraph-table p {
   vertical-align: top;
-  padding-block: 8px;
-  padding-inline: 16px;
+  padding-block: var(--cell-pad-vert);
+  padding-inline: var(--cell-pad-horz);
   color: var(--global-color-primary--dark);
 }
 /* To ensure <thead> height matches between browsers */
-:is(td, th) {
-  /* FAQ: Line-height > font-size accomodates ascender & descender letters */
-  /* HACK: Units for line-height are discouraged */
-  /* NOTE: If line-height unitless, Firefox & Chrome give different height */
-  /* IMPORTANT: More than for consistency; `table--nested.css` requires this */
-  line-height: var(--global-font-size--medium);
+/* IMPORTANT: More than for consistency; `table--nested.css` requires this */
+:is(td, th),
+:--s-paragraph-table p {
+  line-height: var(--cell-line-height);
 }
 /* To pin first column to left of table even during scroll */
 /* WARNING: Design has not reviewed this (but not designed responsive table) */
 :is(th, td):first-child {
   position: sticky;
   left: 0;
-  border-right: var(--global-border-width--normal) solid var(--global-color-primary--light);
 }
 th {
@@ -64,8 +81,13 @@ tbody > tr > th {
 }
 caption {
-  font-size: var(--global-font-size--small);
+  font-size: var(--font-size);
   text-align: unset; /* undo Bootstrap _reboot.css */
+  caption-side: top; /* override Bootstrap */
+  /* To mimic table cell */
+  padding-block: var(--cell-pad-vert);
+  padding-inline: var(--cell-pad-horz);
 }
@@ -84,19 +106,24 @@ td li:not(:last-of-type) {
 }
 /* To override browser */
-td button {
+td button,
+:--s-paragraph-table p button {
   /* To match font-size of table cell text and links */
   font-size: inherit;
 }
 /* To override `site.css` or browser */
-table p {
+table p,
+:--s-paragraph-table p {
   margin-top: 0;
 }
-table p:last-child {
+table p:last-child,
+:--s-paragraph-table p {
   margin-bottom: 0;
 }
+/* To truncate paragraphs */
+/* FAQ: Except for :--s-paragraph-table's whose <p> tags we permit to wrap */
 table p {
   @extend %x-truncate--many-lines;
 }

package/src/lib/_imports/elements/table--nested.css CHANGED Viewed

@@ -31,22 +31,33 @@
   td.has-table { padding: 0; }
 }
-/* To replace parent table columns above with nested table columns */
+/* To replace any parent table columns above with nested table columns */
 /* FAQ: Pulls nested table up by the height of the parent table head */
-tr table {
-  --offset: calc(-1 * 33px); /* WARNING: manually calculated */
+thead + tbody tr table {
+  --offset-distance: calc(
+    var(--cell-pad-vert) * 2
+    +
+    var(--cell-line-height) * var(--font-size)
+    +
+    var(--global-border-width--normal)
+  );
+  --offset: calc( var(--offset-distance) * -1 );
   transform: translateY(var(--offset));
   margin-bottom: var(--offset);
 }
 /* FAQ: Hides any parent table head underneath nested table head */
-tr:first-of-type thead {
+thead + tbody tr:first-of-type thead {
   background: var(--global-color-background--app);
 }
 /* FAQ: Hides all successive (thus redundant) nested table heads */
-tr:not(:first-of-type) thead {
+thead + tbody tr:not(:first-of-type) thead {
   visibility: hidden;
 }
+/* FAQ: Re-colors border of all successive nested rows (to match parent row) */
+thead + tbody tr:not(:first-of-type) tbody :is(td,th) {
+  border-color: var(--global-color-primary--light);
+}
 /* To reduce inline padding
    at start and end of nested table

package/src/lib/_imports/elements/table.cms.css ADDED Viewed

@@ -0,0 +1,22 @@
+@import url("./table.selectors.css");
+/* To add bottom border to table */
+table,
+:--s-paragraph-table {
+    border-bottom: var(--global-border-width--thick) solid var(--global-color-primary--dark);
+    font-size: var(--global-font-size--medium);
+    line-height: 1.4;
+}
+/* To thicken top border of headless table */
+tbody:not(thead + tbody) > tr:first-child > :is(td,th),
+:--s-paragraph-table {
+  border-top-width: var(--global-border-width--thick);
+}
+/* To match row height in design (~40px) */
+:is(td, th),
+:--s-paragraph-table p {
+    padding-block: 10px;
+    line-height: unset;
+}

package/src/lib/_imports/elements/table.selectors.css ADDED Viewed

@@ -0,0 +1,3 @@
+@custom-selector :--s-paragraph-table
+    .s-paragraph-table,
+    .paragraph-table;

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

@@ -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 ADDED Viewed

@@ -0,0 +1,62 @@
+status: prototype
+order: 1
+context:
+  shouldLoadBootstrap: true
+  📝 shouldLoadBootstrap: >-
+    not yet tested without Bootstrap
+    (known dependencies: <caption> font color)
+  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 ADDED Viewed

@@ -0,0 +1,17 @@
+/* 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: flex;
+  flex-wrap: wrap;
+}

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

@@ -0,0 +1,16 @@
+<dl>
+  <dt>Class Directly on Table</dt>
+  <dd>
+    <div>
+      {{> @table data=data caption="Header stays pinned top top of container on scroll." class="o-fixed-header-table" }}
+    </div>
+  </dd>
+</dl>
+<dl>
+  <dt>Class on Table Wrapper</dt>
+  <dd>
+    <div class="o-fixed-header-table">
+      {{> @table data=data caption="Header stays pinned top top of container on scroll." }}
+    </div>
+  </dd>
+</dl>

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

@@ -0,0 +1,22 @@
+A [table]({{path './table' }}) with its header pinned during vertical scroll.
+> **⚠️ Important**
+>
+> The `<div>` wrapper is **not** required. Do not add unless your use case demands one.
+> **?&#x20DD; 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 CHANGED Viewed

@@ -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;