@tacc/core-styles 0.11.0 → 2.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-grid.css

@@ -47,6 +47,13 @@ Styleguide Objects.Grid
   max-width: 100%;
 }
 
+/* Avoid figure size shrinking */
+/* HELP: Why does this happen to figure only inside a gid? */
+/* SEE: components/c-card--frontera/c-card--frontera.hbs */
+.o-grid figure {
+  width: unset; /* undo html-elements.css */
+}
+
 /* Hide content that does exceed cell size */
 .o-grid > * {
   overflow: hidden;

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

@@ -9,19 +9,15 @@ Styleguide Objects.OffsetContent
 */
 @import url("../tools/media-queries.css");
 
-
-
-@custom-selector :--o-offset-content
-  .o-offset-content--left,
-  .o-offset-content--right;
-
-
-
-:--o-offset-content {
+.o-offset-content--left,
+.o-offset-content--right {
   	--offset-distance: min(15vw, 410px);
 	--buffer: calc( 2 * var(--global-space--grid-gap) );
+
+    max-width: 85%;
 }
 
+/* To merely float content on narrow screens */
 @media only screen and (--medium-and-above) {
 	.o-offset-content--right {
 		float: right;
@@ -35,15 +31,18 @@ Styleguide Objects.OffsetContent
 	}
 	.o-offset-content--left + .o-offset-content--left { clear: left; }
 
-  .figure:is(:--o-offset-content) .figure-caption {
-    padding-right: 125px;
-  }
+    .figure:is(
+	  .o-offset-content--left,
+	  .o-offset-content--right
+	) .figure-caption {
+        padding-right: 125px;
+    }
 }
-@media only screen and (--medium-and-above) and (--max-wide-and-below) {
-  :--o-offset-content {
-    max-width: 560px;
-  }
-  /* Apply negative margin only when using offset value */
+
+/* To offset content only on wide screens */
+/* HELP: Do designers want to prevent offset on mega-wide screens */
+/* FAQ: M.S. did on texascale.org but that may have been only for that site */
+@media only screen and (--medium-and-above)/* and (--max-wide-and-below) */{
 	.o-offset-content--right {
 		margin-right: calc( var(--offset-distance) * -1);
 	}

package/src/lib/_imports/objects/o-section/_o-section--usage.hbs

@@ -0,0 +1 @@
+To highlight a row of content with extra spacing.

package/src/lib/_imports/objects/o-section/config.yml

@@ -0,0 +1,18 @@
+context:
+  shouldLoadCMS: true
+  📝 shouldLoadCMS: this pattern is not intended nor expected for use beyond CMS
+  shouldLoadBootstrap: true
+  📝 shouldLoadBootstrap: so we can test .container.o-section combo
+variants:
+  - name: style-light
+    label: (Style) Light
+    context:
+      modifier: style-light
+  - name: style-muted
+    label: (Style) Muted
+    context:
+      modifier: style-muted
+  - name: style-dark
+    label: (Style) Dark
+    context:
+      modifier: style-dark

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

@@ -0,0 +1,8 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+/* To add bottom space that will actually show up demo */
+/* https://github.com/TACC/Core-Styles/blob/823b7b9/src/lib/_imports/elements/html-elements.css#L61-L63 */
+body > main {
+  margin-bottom: unset;
+  padding-bottom: var(--global-space--section-gap);
+}

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

@@ -0,0 +1,57 @@
+
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section</h2>
+    {{render '@o-section--usage'}}
+</section>
+
+<hr />
+
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section (First of a Pair)</h2>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+</section>
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section (Second of a Pair)</h2>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+</section>
+
+<hr />
+
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section (before Muted Section)</h2>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+</section>
+<section class="o-section o-section--style-muted">
+    <h2>Muted Section</h2>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+</section>
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section (after Muted Section)</h2>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+</section>
+
+<hr />
+
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section (with Nested Sections)</h2>
+    <p>⚠️ These are not used in any design. They are minimally supported only to prevent layouts from breaking if accidentally used.</p>
+    <div class="o-section o-section--style-dark">
+        <h3>(Nested) Dark Section</h3>
+        <p>{{> @text-of-one-paragraph-short }}</p>
+    </div>
+    <div class="o-section o-section--style-muted">
+        <h3>(Nested) Muted Section</h3>
+        <p>{{> @text-of-one-paragraph-short }}</p>
+    </div>
+    <div class="o-section o-section--style-light">
+        <h3>(Nested) Light Section</h3>
+        <p>{{> @text-of-one-paragraph-short }}</p>
+    </div>
+</section>
+
+<hr />
+
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section (at Bottom of Page)</h2>
+    <p>At the bottom of a CMS page: a <strong>light</strong> Section will stand out above the Footer, a <strong>muted</strong> Section will stand out above the Footer, a <strong>dark</strong> Section will visually merge with the Footer.</p>
+</section>

package/src/lib/_imports/objects/o-section/readme.md

@@ -0,0 +1,32 @@
+Add space between major blocks of content. {{render '@o-section--usage'}} A [`<section>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) is suitable for these wrappers.
+
+> **ⓘ Notice**
+>
+> Default sections use margin. Styled sections use padding.
+
+| Class (Std.)              | Class (Alt.)     | Description
+| - | - | - |
+| `.o-section`              | `.section`       | give extra space to content
+| `.o-section--style-...`   | `.section--...`   | add full-width background
+| `.o-section--style-light` | `.section--light` | __gently__ highlight content
+| `.o-section--style-muted` | `.section--muted` | __clearly__ highlight content
+| `.o-section--style-dark`  | `.section--dark`  | __strongly__ highlight content
+
+Older features are not illustrated in the demo:
+
+| Class (Old) | Description
+| - | - |
+| `.o-section--banner`      | has a banner image
+| `.o-section--intro`       | utility to hide empty (was only used on Frontera)
+| `.o-section--layout-...`  | lays out child elements (is only used on Frontera)
+| `.o-section--layout-a`    | (on wider screens) 2 even columns
+| `.o-section--layout-b`    | (on wider screens) 1 wide column & 1 narrow column
+| `.o-section--layout-c`    | (on wider screens) 1 narrow column & 1 wide column
+| `.o-section--layout-d`    | (on wider screens) 3 even columns
+
+<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-section.css

@@ -1,40 +1,7 @@
-/*
-Section
-
-A group of related content.
-
-_Nested sections are an afterthought. No official design uses them._
-
-To Do:
-<details><summary>FP-1463: Extract layout pattern</summary>
-
-```
-.o-section--layout-a - lay out children as two even columns
-.o-section--layout-b - lay out children as one wide column & one narrow column
-.o-section--layout-c - lay out children as one narrow column & one wide column
-.o-section--layout-d - lay out children as three even
-```
-
-</details>
-<details><summary>FP-1462: Extract banner pattern</summary>
-
-```
-.o-section--banner - add banner with background image, overlay, then content
-```
-
-</details>
-
-.o-section--style-light - light background, dark text
-.o-section--style-muted - dull light background, dark text
-.o-section--style-dark  - dark background, light text
-
-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");
+@import url("../components/c-card.selectors.css");
+
+@import url("./o-section.selectors.css");
 
 
 
@@ -42,19 +9,30 @@ Styleguide Objects.Section
 
 /* Block */
 
-.o-section {
-  /* GH-99: Use standard spacing value */
-  --padding-block: var(--global-space--section-gap);
+:--o-section {
+  /* Estimates from varying spacing in design specs:
+    - TACC Site Mockups
+    - CMS-Common-Components
+  */
+  --margin-block: var(--global-space--section-gap); /* 60px */
+  --padding-top: 50px;
+  --padding-bottom: 50px;
+}
 
-  padding-block: var(--padding-block); /* ~avg. from design docs */
+/* Basic blocks use margin, for intuitive usage */
+:--o-section:not(:--o-section--style) {
+  margin-block: var(--margin-block);
 }
-/* To distinguish nested sections */
-.o-section .o-section {
-  padding-block: 1em;
 
-  --hoz-space: 1em;
-  padding-inline: var(--hoz-space);
-  margin-inline: calc(-1 * var(--hoz-space));
+/* Modified blocks use padding, to support backgrounds */
+:--o-section--style {
+  padding-block: var(--padding-top) var(--padding-bottom);
+}
+
+/* To distinguish nested sections */
+:--o-section :--o-section {
+  padding: var(--padding-top);
+  margin-inline: calc(-1 * var(--padding-top));
 }
 
 
@@ -70,7 +48,7 @@ Styleguide Objects.Section
 .o-section--banner { overflow: hidden; }
 .o-section--banner [class*="o-section--layout"] { gap: 0; }
 .o-section--banner .container { padding-inline: 0; }
-.o-section--banner.o-section { padding-block: 0; }
+.o-section--banner:--o-section { padding-block: 0; }
 
 
 
@@ -91,22 +69,22 @@ Styleguide Objects.Section
 
 /* Modifers: Style: Options */
 
-.o-section--style-light {
-  --color--text: var(--global-color-primary--dark);
+:--o-section--light {
+  --color--text: var(--global-color-primary--x-dark);
   --color--text-strong: var(--global-color-primary--xx-dark);
   --color--bkgd: var(--global-color-primary--xx-light);
   --color--line: var(--global-color-primary--normal);
   --color--link: var(--global-color-link-on-light--normal);
 }
-.o-section--style-muted {
+:--o-section--muted {
   --color--text: var(--global-color-primary--x-dark);
   --color--text-strong: var(--global-color-primary--xx-dark);
   --color--bkgd: var(--global-color-primary--x-light);
   --color--line: var(--global-color-primary--dark);
   --color--link: var(--global-color-link-on-light--normal);
 }
-.o-section--style-dark {
-  --color--text: var(--global-color-primary--x-light);
+:--o-section--dark {
+  --color--text: var(--global-color-primary--xx-light);
   --color--text-strong: var(--global-color-primary--xx-light);
   --color--bkgd: var(--global-color-primary--xx-dark);
   --color--line: var(--global-color-primary--xx-light);
@@ -115,8 +93,7 @@ Styleguide Objects.Section
 
 /* Modifers: Style: Text & Background */
 
-[class*="o-section--style"] {
-  --line-width: var(--global-border-width--normal);
+:--o-section--style {
   --box-shadow--fake-bkgd: 50vw 0 var(--color--bkgd),
                           -50vw 0 var(--color--bkgd);
 
@@ -125,55 +102,25 @@ Styleguide Objects.Section
   box-shadow: var(--box-shadow--fake-bkgd);
 }
 /* Nested sections must not stretch to page edge */
-[class*="o-section--style"] [class*="o-section--style"] {
+:--o-section--style :--o-section--style {
   box-shadow: none;
 }
 
-/* Modifers: Style: Line Between Matching Sections */
-
-/* Pure sections can use just a border */
-.o-section--style-light + .o-section--style-light:not(.container),
-.o-section--style-dark + .o-section--style-dark:not(.container) {
-  border-top: var(--line-width) solid var(--color--line);
-}
-/* any muted section */ .o-section--style-muted {
-  border-top: var(--line-width) solid var(--color--line);
-  border-bottom: var(--line-width) solid var(--color--line);
-}
-
-/* Muted sections have border that extends to page edges (like background) */
-.o-section--style-muted {
-  --box-shadow--fake-bkgd:
-    /* re-build fake background but shorter by two lines' widths */
-    50vw 0 0 calc(-1 * var(--line-width)) var(--color--bkgd),
-    -50vw 0 0 calc(-1 * var(--line-width)) var(--color--bkgd),
-    /* fake top border to page edges using mostly-hidden fake background */
-    33vw 0 var(--color--line),
-    -33vw 0 var(--color--line),
-    /* fake bottom border to page edges using mostly-hidden fake background */
-    33vw 0px var(--color--line),
-    -33vw 0px var(--color--line);
-}
-
-/* Container-based light and dark sections need a border that ignores padding */
-.o-section--style-light + .o-section--style-light.container,
-.o-section--style-dark + .o-section--style-dark.container {
-  @extend %x-fake-border--inset-horz-top;
-
-  --fb--line-width: var(--global-border-width--normal);
-  --fb--line-color: var(--color--line);
-  --fb--inset-width: var(--global-space--grid-gap);
-  --fb--inset-color: var(--color--bkgd);
-
-  --fb--shadow-below: var(--box-shadow--fake-bkgd);
-}
-
 /* Modifers: Style: Child Text */
 
-[class*="o-section--style"] a {
+/* To color links, but not those within a nested pattern */
+:--o-section--style a:not(
+  :--c-card--plain *,
+  :--c-card--standard *,
+  :--c-card--standard-N *
+) {
   color: var(--color--link);
 }
-[class*="o-section--style"] :is(h1, h2, h3, h4, h5, h6) {
+:--o-section--style :is(h1, h2, h3, h4, h5, h6):not(
+  :--c-card--plain *,
+  :--c-card--standard *,
+  :--c-card--standard-N *
+) {
   color: var(--color--text-strong);
 }
 
@@ -201,7 +148,7 @@ Styleguide Objects.Section
 /* Modifers: Banner */
 /* FP-1462: Extract to new banner component(s) */
 
-[class*="o-section--style"].o-section--banner + [class*="o-section--style"] {
+:--o-section--style.o-section--banner + :--o-section--style {
   box-shadow: var(--box-shadow--fake-bkgd);
 }
 
@@ -217,7 +164,7 @@ Styleguide Objects.Section
 /* FP-1462: Extract to new banner component(s) */
 
 /* Added `.o-section--banner` to require parent modifier class in markup */
-.o-section--banner .o-section__banner-image {
+.o-section--banner :--o-section__banner-image {
 
   /* To size image to cover section dimensions but maintain ratio */
   /* CAVEAT: This causes image to overflow beyond section */
@@ -241,7 +188,7 @@ Styleguide Objects.Section
 /* FP-1462: Extract to new banner component(s) */
 
 /* Added `.o-section--banner` to require parent modifier class in markup */
-.o-section--banner .o-section__banner-overlay {
+.o-section--banner :--o-section__banner-overlay {
   position: relative;
   z-index: 2;
 }
@@ -259,9 +206,17 @@ Styleguide Objects.Section
 /* To prevent visibly extra space beneath certain sections and footer */
 /* FAQ: "extra space" is margin (from <main>) between section and <footer> */
 /* FAQ: 'last-of-type' not 'last-child' cuz hidden elements */
-main > .container.o-section--style-light:last-of-type,
-main > .container > .o-section--style-light:last-of-type,
-main > .container.o-section--style-dark:last-of-type,
-main > .container > .o-section--style-dark:last-of-type {
-  margin-bottom: calc( -1 * var(--padding-block) );
+main > .container:--o-section--light:last-of-type,
+main > .container > :--o-section--light:last-of-type,
+main > .container:--o-section--dark:last-of-type,
+main > .container > :--o-section--dark:last-of-type {
+  margin-bottom: calc( -1 * var(--global-space--section-gap) );
+}
+
+/* Tricks: Children */
+
+/* To hide margin that is likely undesirable */
+/* WARNING: This "feature" was not reviewed by design */
+:--o-section > *:last-child {
+  margin-bottom: 0;
 }

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

@@ -0,0 +1,20 @@
+@custom-selector :--o-section
+    .o-section,
+    .section,
+    [class*="section--"];
+@custom-selector :--o-section--root
+    .o-section:not([class*="o-section--"]),
+    .section;
+@custom-selector :--o-section--style
+    :--o-section--light,
+    :--o-section--muted,
+    :--o-section--dark;
+@custom-selector :--o-section--light
+    .o-section--style-light,
+    .section--dark;
+@custom-selector :--o-section--muted
+    .o-section--style-muted,
+    .section--muted;
+@custom-selector :--o-section--dark
+    .o-section--style-dark,
+    .section--dark;

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,84 @@
+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
+  📝 shouldLoadBootstrap: >-
+    not yet tested without Bootstrap
+    (known dependencies: <caption> font color)
+  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