@tacc/core-styles 0.11.0 → 1.0.0

package/src/lib/_imports/objects/o-flex-item-table-wrap/config.yml

@@ -0,0 +1,27 @@
+label: (Portal) O Flex Item Table Wrap
+order: 2
+status: deprecated
+context:
+  data:
+    cols:
+      - ID
+      - Name
+      - Description
+      - Size
+      - Time
+    rows:
+      - id: n234as
+        name: apple-sauce
+        sentence: true
+        custom-1: 0.5 KB
+        time: 12/01/2019 11:04:19
+      - id: 56l810
+        name: milk-shake-032
+        sentence: true
+        custom-1: 300.0 KB
+        time: 03/22/2021 05:23:01
+      - id: 3r56xc
+        name: white-candy-5
+        sentence: true
+        custom-1: 1.5 MB
+        time: 12/01/2019 11:04:19

package/src/lib/_imports/objects/o-flex-item-table-wrap/demo.css

@@ -0,0 +1,7 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+/* Example */
+section {
+  display: flex;
+  flex-direction: column;
+}

package/src/lib/_imports/objects/o-flex-item-table-wrap/o-flex-item-table-wrap.hbs

@@ -0,0 +1,7 @@
+<section>
+  <header>Section Title</header>
+  <p>Section/Table Description</p>
+  <div class="o-flex-item-table-wrap">
+    {{> @table data=data }}
+  </div>
+</section>

package/src/lib/_imports/objects/o-flex-item-table-wrap/readme.md

@@ -0,0 +1,22 @@
+Make [table]({{path './table' }}) behave like a flex item, for a specific CEPv2 Portal use case.
+
+> **?⃝ Explanation**
+>
+> A `<table>` can **not** be a flex item. The trick is to [wrap the table in a `<div>`][source].
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper.
+
+> **⚠️ Important**
+>
+> This class was used by CEPv2 Portal for a specific use case. It is not generic. Use or reference [`.o-flexible-table-wrap`]({{path './o-flexible-table-wrap' }}) for generic use cases.
+
+[source]: https://stackoverflow.com/a/41421700/11817077 "Stack Overflow: Why does flex-box work with a div, but not a table?"
+
+<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-flex-item-table-wrap.css

@@ -1,37 +1,3 @@
-/*
-Flex-Item Table-Wrap
-
-A wrapper to allow a table to behave like a flex item (because a `<table>` can __not__ be a flex item).
-
-Reference:
-- [Why does flex-box work with a div, but not a table?](https://stackoverflow.com/q/41421512/11817077))
-
-Markup:
-<section style="display: flex; flex-direction: column">
-  <header>Section Title</header>
-  <p>Section/Table Description</p>
-  <div class="o-flex-item-table-wrap">
-    <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>
-  </div>
-</section>
-
-Styleguide Objects.FlexItemTableWrap
-*/
 /* Constrain stretched <table>'s position and dimension */
 .o-flex-item-table-wrap {
   /* Ensure wrapper has dimensions (which will be remaining space in parent) */

package/src/lib/_imports/objects/o-float-content.css

@@ -8,7 +8,6 @@ Content that should be:
 Styleguide Objects.FloatContent
 */
 @import url("../tools/media-queries.css");
-@import url("../settings/space.css");
 
 
 

package/src/lib/_imports/objects/o-section.css

@@ -32,7 +32,6 @@ Markup: o-section.html
 
 Styleguide Objects.Section
 */
-@import url("../tools/media-queries.css");
 @import url("../tools/x-layout.css");
 @import url("../tools/x-fake-border.css");
 

package/src/lib/_imports/objects/o-site.css

@@ -13,6 +13,7 @@ Styleguide Objects.Site
 /* IDEA: Use or add grid solution */
 /* https://github.com/DesignSafe-CI/portal/blob/215915c/designsafe/static/styles/main.css#L935 */
 
+/* WARNING: Some clients have their own implementation of this pattern */
 /*
 .o-site {
   display: grid;

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

@@ -0,0 +1,82 @@
+order: 1
+variants:
+  - name: flexible-horz
+    label: Flexible, Horz.
+  - name: flexible-vert
+    label: Flexible, Vert.
+  - name: overflow-hidden
+    label: Overflow Hidden
+  - name: overflow-scroll
+    label: Overflow Scroll
+  - name: overflow-scroll-extra
+    label: Overflow Scroll (Extra)
+    context:
+      data:
+        cols:
+          - ID
+          - Name
+          # - Description
+          - Size
+          - Time
+        rows:
+          - id: n234as
+            name: apple-sauce
+            # sentence: true
+            custom-1: 0.5 KB
+            time: 12/01/2019 11:04:19
+          - id: 56l810
+            name: milk-shake-032
+            # sentence: true
+            custom-1: 300.0 KB
+            time: 03/22/2021 05:23:01
+          - id: 3r56xc
+            name: white-candy-5
+            # sentence: true
+            custom-1: 1.5 MB
+            time: 12/01/2019 11:04:19
+          - id: 7ysnw3
+            name: butter-balls
+            # sentence: true
+            custom-1: 0.5 KB
+            time: 09/11/2010 10:54:09
+          - id: 20ksdf
+            name: lemon-cookies-30
+            # sentence: true
+            custom-1: 250.0 MB
+            time: 04/20/2020 15:03:10
+context:
+  shouldLoadBootstrap: true # not yet tested without Bootstrap
+  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
+  data:
+    cols:
+      - ID
+      - Name
+      - Description
+      - Size
+      - Time
+    rows:
+      - id: n234as
+        name: apple-sauce
+        sentence: true
+        custom-1: 0.5 KB
+        time: 12/01/2019 11:04:19
+      - id: 56l810
+        name: milk-shake-032
+        sentence: true
+        custom-1: 300.0 KB
+        time: 03/22/2021 05:23:01
+      - id: 3r56xc
+        name: white-candy-5
+        sentence: true
+        custom-1: 1.5 MB
+        time: 12/01/2019 11:04:19
+      - id: 7ysnw3
+        name: butter-balls
+        sentence: true
+        custom-1: 0.5 KB
+        time: 09/11/2010 10:54:09
+      - id: 20ksdf
+        name: lemon-cookies-30
+        sentence: true
+        custom-1: 250.0 MB
+        time: 04/20/2020 15:03:10

package/src/lib/_imports/objects/o-table-wrap/demo.basic.css

@@ -0,0 +1,18 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+/* IMPORTANT: See `example.….css` code to learn how to adapt this pattern. */
+
+/* To force overflow */
+.o-table-wrap--overflow-hidden:not(.demo-advanced *),
+.o-table-wrap--overflow-scroll:not(.demo-advanced *) {
+  width: 400px;
+  height: 175px;
+}
+
+/* To illustrate table behavior is because of flex item wrapper (not window) */
+body {
+  display: flex;
+  gap: 25px;
+  padding-inline: 25px;
+}
+body > * { flex-basis: 33%; }

package/src/lib/_imports/objects/o-table-wrap/demo.extra.css

@@ -0,0 +1,31 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+/* To force horizontal scrollbar */
+dl.demo-advanced.demo-horz dd { max-width: 400px; }
+dl.demo-advanced.demo-horz table { white-space: nowrap; }
+
+/* To force vertical scrollbar */
+dl.demo-advanced.demo-vert dd { max-height: 175px; }
+
+/* To overwrite "extra" styles */
+dl.demo-advanced.demo-vert:not(.demo-horz) table {
+  white-space: normal; /* overwrite `extra.overflow-scroll.css` */
+}
+
+/* To lay out examples */
+body:has(.demo-advanced) {
+  display: grid;
+  column-gap: 25px;
+  padding-inline: 25px;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  justify-items: center;
+}
+dl.demo-advanced {
+  display: grid;
+  grid-auto-rows: minmax(min-content, max-content);
+}
+dl.demo-advanced dd {
+  /* To overwrite _preview.hbs */
+  margin-bottom: unset !important;
+  margin-left: unset !important;
+}

package/src/lib/_imports/objects/o-table-wrap/extra.flexible-horz.css

@@ -0,0 +1,23 @@
+/* This CSS is EXAMPLE code for a client. It is NOT part of the pattern. */
+
+/* Truncate Cell Text: - Verbose i.e. Custom */
+.o-table-wrap--flexible-horz > table :is(td, th) /* plain text cell */,
+.o-table-wrap--flexible-horz > table :is(td, th) > :is(a, span) /* element in cell */ {
+  /* NOTE: If multiple lines are okay, omit rule */
+  white-space: nowrap;
+
+  /* NOTE: To clip: either use 'clip' value or omit rule */
+  text-overflow: ellipsis;
+
+  /* NOTE: If overlap is okay, omit rule */
+  overflow: hidden;
+}
+
+/* Truncate Cell Text - Mixin i.e. Standard */
+/* (only works on TACC clients using PostCSS) */
+/*
+@import url('@tacc/core-styles/src/lib/_imports/tools/x-truncate.css');
+... {
+  @extend .x-truncate--one-line;
+}
+*/

package/src/lib/_imports/objects/o-table-wrap/extra.overflow-hidden.css

@@ -0,0 +1,7 @@
+/* This CSS is EXAMPLE code for a client. It is NOT part of the pattern. */
+
+/* Prevent Text Wrap */
+/* NOTE: If multiple lines are okay, do not use ruleset */
+.o-table-wrap--overflow-hidden table {
+  white-space: nowrap;
+}

package/src/lib/_imports/objects/o-table-wrap/extra.overflow-scroll.css

@@ -0,0 +1,7 @@
+/* This CSS is EXAMPLE code for a client. It is NOT part of the pattern. */
+
+/* Prevent Text Wrap */
+/* NOTE: If multiple lines are okay, do not use ruleset */
+.o-table-wrap--overflow-scroll table {
+  white-space: nowrap;
+}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--flexible-horz.css

@@ -0,0 +1,4 @@
+.o-table-wrap--flexible-horz > table {
+  width: 100%;
+  table-layout: fixed; /* to allow `width` to have effect */
+}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--flexible-horz.hbs

@@ -0,0 +1,5 @@
+{{#> @o-table-wrap desc=desc }}
+<div class="o-table-wrap  o-table-wrap--flexible-horz">
+  {{> @table data=data }}
+</div>
+{{/@o-table-wrap}}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--flexible-horz.readme.md

@@ -0,0 +1,20 @@
+Make [table]({{path './table' }}) width able to <strong>stretch</strong> <em>and</em> <strong>shrink</strong>.
+
+For extra customization, see relevant <code>extra…</code> "File" from "Assets" tab.
+
+> **?&#x20DD; Explanation**
+>
+> A `<table>` can **not** be a flex item. The trick is to [wrap it in a `<div>`][source-flex].
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper. It has **no** affect when used on table directly.
+
+[source-flex]: https://stackoverflow.com/a/41421700/11817077 "Stack Overflow: Why does flex-box work with a div, but not a table?"
+
+<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-table-wrap/o-table-wrap--flexible-vert.css

@@ -0,0 +1,3 @@
+.o-table-wrap--flexible-vert > table {
+  height: 100%;
+}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--flexible-vert.hbs

@@ -0,0 +1,5 @@
+{{#> @o-table-wrap}}
+<div class="o-table-wrap  o-table-wrap--flexible-vert">
+  {{> @table data=data }}
+</div>
+{{/@o-table-wrap}}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--flexible-vert.readme.md

@@ -0,0 +1,18 @@
+Make [table]({{path './table' }}) width able to <strong>stretch</strong> <em>but <strong>not</strong> shrink</em>.
+
+> **?&#x20DD; Explanation**
+>
+> A `<table>` can **not** be a flex item. The trick is to [wrap it in a `<div>`][source-flex].
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper. It has **no** affect when used on table directly.
+
+[source-flex]: https://stackoverflow.com/a/41421700/11817077 "Stack Overflow: Why does flex-box work with a div, but not a table?"
+
+<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-table-wrap/o-table-wrap--overflow-hidden.css

@@ -0,0 +1,3 @@
+.o-table-wrap--overflow-hidden {
+  overflow: hidden;
+}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-hidden.hbs

@@ -0,0 +1,5 @@
+{{#> @o-table-wrap}}
+<div class="o-table-wrap  o-table-wrap--overflow-hidden">
+  {{> @table data=data }}
+</div>
+{{/@o-table-wrap}}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-hidden.readme.md

@@ -0,0 +1,14 @@
+Make [table]({{path './table' }}) <strong>hidden</strong>.
+
+For extra customization, see relevant <code>extra…</code> "File" from "Assets" tab.
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper. It has **no** affect when used on table directly.
+
+<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-table-wrap/o-table-wrap--overflow-scroll-extra.css

@@ -0,0 +1,2 @@
+/* This file exists solely so UI demo loads a `.html` page for it */
+/* FAQ: Without this file, the page only works via `fractal start` */

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-scroll-extra.hbs

@@ -0,0 +1,18 @@
+<dl class="demo-advanced demo-vert">
+  <dt>Vertical</dt>
+  <dd class="o-table-wrap--overflow-scroll">
+    {{> @table data=data caption="Constrained to height smaller than its minimum content height." }}
+  </dd>
+</dl>
+<dl class="demo-advanced demo-horz">
+  <dt>Horizontal</dt>
+  <dd class="o-table-wrap--overflow-scroll">
+    {{> @table data=data caption="Constrained to width smaller than its minimum content width." }}
+  </dd>
+</dl>
+<dl class="demo-advanced demo-horz demo-vert">
+  <dt>Horizontal &amp; Vertical</dt>
+  <dd class="o-table-wrap--overflow-scroll">
+    {{> @table data=data caption="Constrained to width and height smaller than its minimum content width and height." }}
+  </dd>
+</dl>

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-scroll-extra.readme.md

@@ -0,0 +1,18 @@
+Make [table]({{path './table' }}) overflow <strong>scrollable</strong> (advanced demo).
+
+> **?&#x20DD; Explanation**
+>
+> A `<table>` can **not** scroll its content. The trick is to [wrap it in a `<div>` and scroll the `<div>`][source-scroll].
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper. It has **no** affect when used on table directly.
+
+[source-scroll]: https://stackoverflow.com/a/19794391/11817077 "Stack Overflow: Horizontal scroll on overflow of table (answer)"
+
+<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-table-wrap/o-table-wrap--overflow-scroll.css

@@ -0,0 +1,5 @@
+.o-table-wrap--overflow-scroll {
+  /* NOTE: Setting `auto` for `overflow-x` or `…-y` will invisibly set both */
+  /* SEE: https://stackoverflow.com/a/6433475/11817077 */
+  overflow: auto;
+}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-scroll.hbs

@@ -0,0 +1,5 @@
+{{#> @o-table-wrap}}
+<div class="o-table-wrap  o-table-wrap--overflow-scroll">
+  {{> @table data=data }}
+</div>
+{{/@o-table-wrap}}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-scroll.readme.md

@@ -0,0 +1,20 @@
+Make [table]({{path './table' }}) overflow <strong>scrollable</strong>.
+
+For extra customization, see relevant <code>extra…</code> "File" from "Assets" tab.
+
+> **?&#x20DD; Explanation**
+>
+> A `<table>` can **not** scroll its content. The trick is to [wrap it in a `<div>` and scroll the `<div>`][source-scroll].
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper. It has **no** affect when used on table directly.
+
+[source-scroll]: https://stackoverflow.com/a/19794391/11817077 "Stack Overflow: Horizontal scroll on overflow of table (answer)"
+
+<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-table-wrap/o-table-wrap.hbs

@@ -0,0 +1,11 @@
+<div>
+  <p>{{> @text-of-one-paragraph }}</p>
+</div>
+{{#> @partial-block}}
+<div>
+  <p class="c-message c-message--type-info c-message--scope-section">To render a table, choose a modifier class from the navigation panel.</p>
+</div>
+{{/@partial-block}}
+<div>
+  <p>{{> @text-of-one-paragraph }}</p>
+</div>

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

@@ -0,0 +1,24 @@
+Make [table]({{path './table' }}) fit inside a flexible item.
+
+For client customization examples, see relevant <code>example.…-….css</code> "File" from "Assets" tab.
+
+> **?&#x20DD; Explanation**
+>
+> A `<table>` can **not** be a flex item. The trick is to [wrap it in a `<div>`][source-flex].
+>
+>
+> A `<table>` can **not** scroll its content. The trick is to [wrap it in a `<div>` and scroll the `<div>`][source-scroll].
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper. It has **no** affect when used on table directly.
+
+[source-flex]: https://stackoverflow.com/a/41421700/11817077 "Stack Overflow: Why does flex-box work with a div, but not a table?"
+[source-scroll]: https://stackoverflow.com/a/19794391/11817077 "Stack Overflow: Horizontal scroll on overflow of table (answer)"
+
+<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-table-wrap.css

@@ -0,0 +1,5 @@
+@import url('./o-table-wrap/o-table-wrap--flexible-horz.css');
+@import url('./o-table-wrap/o-table-wrap--flexible-vert.css');
+@import url('./o-table-wrap/o-table-wrap--overflow-hidden.css');
+@import url('./o-table-wrap/o-table-wrap--overflow-scroll.css');
+@import url('./o-table-wrap/o-table-wrap--overflow-scroll-extra.css');

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

@@ -20,9 +20,12 @@
     --global-color-primary--xx-light-rgb: 255, 255, 255;
   --global-color-primary--x-light: #F4F4F4;
     --global-color-primary--x-light-rgb: 244, 244, 244;
-  --global-color-primary--light: #C6C6C6;
+  --global-color-primary--light: #D7D7D7;
+    --global-color-primary--light-rgb: 198, 198, 198;
   --global-color-primary--normal: #AFAFAF;
+    --global-color-primary--normal-rgb: 175, 175, 175;
   --global-color-primary--dark: #707070;
+    --global-color-primary--dark-rgb: 112, 112, 112;
   --global-color-primary--x-dark: #484848;
     --global-color-primary--x-dark-rgb: 72, 72, 72;
   --global-color-primary--xx-dark: #222222;
@@ -39,21 +42,36 @@
   --global-color-accent--weak: #6039cc40; /* similar to #E3D7FD on #f4f4f4 */
 
   /* State */
+  --global-color-info--x-dark: var(--global-color-primary--xx-dark);
   --global-color-info--dark: var(--global-color-primary--x-dark);
   --global-color-info--normal: var(--global-color-primary--normal);
-  --global-color-info--light: var(--global-color-primary--x-light);
-  --global-color-success--dark: #237119;
+  --global-color-info--light: var(--global-color-primary--light);
+  --global-color-info--x-light: var(--global-color-primary--x-light);
+
+  --global-color-info--weak: rgba( var(--global-color-primary--normal), 0.125 );
+
+  --global-color-success--x-light: #E7F9E5;
+  --global-color-success--light: #AFECA7;
   --global-color-success--normal: #43d130;
+  --global-color-success--dark: #237119;
+  --global-color-success--x-dark: #263824;
+
   --global-color-success--weak: #43d13020;
-  --global-color-success--alt: var(--global-color-warning--normal);
-  --global-color-success--alt-weak: var(--global-color-warning--weak);
-  --global-color-warning--dark: #717411;
-  --global-color-warning--normal: #c7ce1d;
-  --global-color-warning--weak: #c7ce1d20;
-  --global-color-warning--alt: var(--global-color-accent--dark);
-  --global-color-warning--alt-weak: var(--global-color-accent--weak);
-  --global-color-danger--dark: #AF1818;
+
+  --global-color-warning--x-light: #FBF4E1;
+  --global-color-warning--light: #FAE19E;
+  --global-color-warning--normal: #DFA70C;
+  --global-color-warning--dark: #735911;
+  --global-color-warning--x-dark: #3A3320;
+
+  --global-color-warning--weak: #DFA70C20;
+
+  --global-color-danger--x-light: #FDF1F1;
+  --global-color-danger--light: #F8C9C9;
   --global-color-danger--normal: #F09393;
+  --global-color-danger--dark: #AF1818;
+  --global-color-danger--x-dark: #3C3030;
+
   --global-color-danger--weak: #F0939320;
 
   /* Generic */

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

@@ -49,9 +49,11 @@ Styleguide Settings.CustomProperties.Font
   --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;
+  --black: 800;
 }

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

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

@@ -1,5 +1,3 @@
-# The form elements used rely on Bootstrap and CMS
-preview: '@preview.bootstrap-cms'
 context:
-  supportStyles:
-    - /assets/elements/form.cms.css
+  shouldLoadBootstrap: true # not yet tested without Bootstrap
+  shouldLoadCMS: true # temporary dependence, until proven to work on Portal