@tacc/core-styles 2.44.0 → 2.45.0

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

@@ -19,7 +19,7 @@
 /* (none) */
 
 /* COMPONENTS */
-/* (none) */
+@import url("./components/bootstrap.dropdown.css");
 
 /* TRUMPS */
 /* FAQ: Because of third-party code and a rush to style the Frontera header

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

@@ -14,25 +14,25 @@ body {
 
 /* Organize Content */
 
-main > dl:not(.no-demo-styles) {
+main > dl {
 
-  &:is(dt, dd) {
+  & :is(dt, dd):not(.no-demo-styles > *) {
     font-family: var(--global-font-family--sans);
     color: #484848;
     line-height: normal;
   }
-  & dt {
+  & dt:not(.no-demo-styles > *) {
     font-size: 1.6rem;
     margin-bottom: 10px;
   }
-  & dt { font-weight: var(--bold); }
-  & dl dt { font-weight: var(--medium); }
-  & dl dl dt { font-weight: var(--regular); }
+  & dt:not(.no-demo-styles > *) { font-weight: var(--bold); }
+  & dl dt:not(.no-demo-styles > *) { font-weight: var(--medium); }
+  & dl dl dt:not(.no-demo-styles > *) { font-weight: var(--regular); }
 
-  & dt:not(:first-of-type) {
+  & dt:not(:first-of-type):not(.no-demo-styles > *) {
     margin-top: 20px;
   }
-  & dd {
+  & dd:not(.no-demo-styles > *) {
     margin-bottom: 10px;
     margin-left: 25px;
   }

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

@@ -1,6 +1,14 @@
 <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}}
+    {{#if key}}
+    <dt {{#if key-class}}class="{{ key-class }}"{{/if}}>
+      {{ key }}
+    </dt>
+    {{/if}}
+    {{#if value}}
+    <dd {{#if value-class}}class="{{ value-class }}"{{/if}}>
+      {{ value }}
+    </dd>
+    {{/if}}
   {{/each}}
 </dl>

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

@@ -39,6 +39,26 @@
         <p>{{> @text-of-one-paragraph-with-tags }}</p>
       </dd>
 
+      <dt>Paragraph then List <small>(reduced spacing)</small></dt>
+      <dd>
+        <p>This paragraph is immediately followed by a list with reduced spacing:</p>
+        <ul>
+          <li>First item in the list</li>
+          <li>Second item in the list</li>
+          <li>Third item in the list</li>
+        </ul>
+        <p>Another paragraph followed by an ordered list:</p>
+        <ol>
+          <li>First ordered item</li>
+          <li>Second ordered item</li>
+        </ol>
+        <p>And a paragraph followed by a definition list:</p>
+        <dl class="no-demo-styles">
+          <dt>Term</dt>
+          <dd>Definition of the term</dd>
+        </dl>
+      </dd>
+
       <dt>Lists</dt>
       <dd>
         <dl>
@@ -79,5 +99,25 @@
       <dt>Blockquote</dt>
       <dd>{{> @blockquote }}</dd>
     </dl>
+
+    <dl>
+      <dt>Demarcating Edits</dt>
+      <dd>
+        <dl>
+          <dt>Inline Inserted Text</dt>
+          <dd>
+            <p>This paragraph contains <ins>some inserted text</ins> to demonstrate the styling.</p>
+          </dd>
+          <dt>Block Inserted Content</dt>
+          <dd>
+            <div class="ins-block">
+              <p>This is a block of inserted content that demonstrates the .ins-block class styling.</p>
+              <p>It can contain multiple paragraphs and other content.</p>
+              <p>The final paragraph should not have extra bottom margin.</p>
+            </div>
+          </dd>
+        </dl>
+      </dd>
+    </dl>
   </dd>
 </dl>

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

@@ -51,6 +51,9 @@ Styleguide Elements.TextContent
 & p {
   margin-bottom: 2rem; /* overwrite Bootstrap */
 }
+p + :is(ul, ol, dl) {
+    margin-top: -1rem;
+}
 
 /* Lists */
 
@@ -160,7 +163,32 @@ Reference:
 Styleguide Elements.DemarcatingEdits
 */
 
-/* … */
+/* To improve default underline style for inserted text */
+ins {
+    text-underline-position: under;
+    text-decoration-style: dotted;
+}
+
+/* To highlight blocks of inserted content */
+.ins-block {
+    /* To keep outline within a .container */
+    --offset: calc( var(--global-space--bootstrap-gap) * 0.375 );
+
+    border: 0.125em dotted currentcolor;
+    padding: var(--offset);
+
+    /* To keep outline within a .container */
+    margin-inline: calc( -1 * var(--offset));
+    /* To prevent outline from touching sibling content */
+    margin-block: 1em;
+
+    /* To create color that is between `x-light` and `xx-light` */
+    background: rgb( from var(--global-color-primary--x-light) r g b / 50% );
+}
+/* To remove likely extra space from final p */
+.ins-block > p:last-child {
+    margin-bottom: unset;
+}
 
 
 

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

@@ -379,3 +379,5 @@ variants:
                   custom-1: 1 TB
                   custom-2: <span class="c-pill c-pill--is-success">932 GB</span>
                   time: 12/01/2019 11:04:19
+  - name: content-after
+    hidden: true

package/src/lib/_imports/elements/table/table--content-after.hbs

@@ -0,0 +1 @@
+<div>Content (not a paragraph) after a table.</div>

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

@@ -2,6 +2,8 @@
 
 {{> @s-paragraph-table class="s-paragraph-table" data=data }}
 
+{{> @table--content-after }}
+
 <br />
 <br />
 
@@ -20,3 +22,5 @@
   {{/each}}
   </tbody>
 </table>
+
+{{> @table--content-after }}

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

@@ -12,8 +12,16 @@
   <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}}
+      {{#if key}}
+      <th {{#if key-class}}class="{{ key-class }}"{{/if}}>
+        {{ key }}
+      </th>
+      {{/if}}
+      {{#if value}}
+      <td {{#if value-class}}class="{{ value-class }}"{{/if}}>
+        {{ value }}
+      </td>
+      {{/if}}
     </tr>
   {{/each}}
   {{#each data.rows}}
@@ -51,10 +59,12 @@
       {{/if}}
       {{#if table}}
       <td class="has-table">
-        {{> @table data=table }}
+        {{> @table data=table has-content-after=false }}
       </td>
       {{/if}}
     </tr>
   {{/each}}
   </tbody>
 </table>
+
+{{#unless (eq has-content-after false)}}{{> @table--content-after }}{{/unless}}

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

@@ -7,6 +7,8 @@ table,
   --cell-line-height: 1.4; /* to match body */
 
   border-bottom: var(--global-border-width--thick) solid var(--global-color-primary--dark);
+
+  margin-bottom: 2rem; /* overwrites Bootstrap */
 }
 
 /* TABLE WITH NO <thead> */

package/src/lib/_imports/elements/table.docs.css

@@ -3,4 +3,6 @@
 table,
 :--s-paragraph-table {
   --font-size: var(--global-font-size--medium);
+
+  margin-bottom: 2rem; /* overwrites Bootstrap */
 }

package/src/lib/_imports/trumps/s-header.css

@@ -16,7 +16,6 @@ Markup: s-header.html
 Styleguide Trumps.Scopes.Header
 */
 @import url("../tools/media-queries.css");
-@import url("./s-header.bootstrap.css");
 
 /* WARNING: NO-R/EM: CMS uses 1rem = 10px, but Portal uses 1rem = 16px */
 
@@ -181,14 +180,6 @@ Styleguide Trumps.Scopes.Header
 .s-header .dropdown-menu {
   font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */
 }
-/* - to match portal nav size */
-.s-header .dropdown-menu {
-  padding-block: 5px;
-}
-.s-header .dropdown-item {
-  padding-block: 2.5px;
-  padding-inline: 15px;
-}
 
 /* Icons */
 

package/src/lib/_imports/trumps/s-references/config.yml

@@ -0,0 +1,3 @@
+status: prototype
+context:
+  shouldSkipPattern: false

package/src/lib/_imports/trumps/s-references/readme.md

@@ -0,0 +1,8 @@
+A section for displaying academic references and publications.
+
+**Use Cases:**
+- Bibliography lists
+- Academic citations
+- Publication listings
+
+Includes spacing adjustments for ordered lists within reference sections.

package/src/lib/_imports/trumps/s-references/s-references.hbs

@@ -0,0 +1,15 @@
+<div class="s-references">
+  <p>A truncated list of the publications related to the projects on <a href="https://digitalporousmedia.org/related-publication-list/" target="_blank" aria-label="Opens in new window.">Digital Rocks Portal</a> (as of 2025-05).</p>
+
+  <ol>
+    <li>A.M. Alhammadi, A. AlRatrout, K. Singh, B. Bijeljic, M.J. Blunt, In situ characterization of mixed-wettability in a reservoir rock at subsurface conditions, Sci Rep. 7 (2017) 1-9. <a href="https://doi.org/10.1038/s41598-017-10992-w" target="_blank" aria-label="Opens in new window.">https://doi.org/10.1038/s41598-017-10992-w</a>.</li>
+
+    <li>F.O. Alpak, S. Berg, I. Zacharoudiou, Prediction of fluid topology and relative permeability in imbibition in sandstone rock by direct numerical simulation, Advances in Water Resources. 122 (2018) 49-59. <a href="https://doi.org/10.1016/j.advwatres.2018.09.001" target="_blank" aria-label="Opens in new window.">https://doi.org/10.1016/j.advwatres.2018.09.001</a>.</li>
+
+    <li>M. Andrew, Comparing organic-hosted and intergranular pore networks: topography and topology in grains, gaps and bubbles, Geological Society, London, Special Publications. 484 (2018) SP484.4. <a href="https://doi.org/10.1144/SP484.4" target="_blank" aria-label="Opens in new window.">https://doi.org/10.1144/SP484.4</a>.</li>
+
+    <li>M. Andrew, A quantified study of segmentation techniques on synthetic geological XRM and FIB-SEM images, Comput Geosci. 22 (2018) 1503-1512. <a href="https://doi.org/10.1007/s10596-018-9768-y" target="_blank" aria-label="Opens in new window.">https://doi.org/10.1007/s10596-018-9768-y</a>.</li>
+
+    <li>M. Andrew, B. Bijeljic, M.J. Blunt, Pore-scale imaging of geological carbon dioxide storage under in situ conditions, Geophysical Research Letters. 40 (2013) 3915-3918. <a href="https://doi.org/10.1002/grl.50771" target="_blank" aria-label="Opens in new window.">https://doi.org/10.1002/grl.50771</a>.</li>
+  </ol>
+</div>

package/src/lib/_imports/trumps/s-references.css

@@ -0,0 +1,6 @@
+.s-references p + ol {
+    margin-top: unset; /* to undo negative margin from html-elements.cms.css */
+}
+.s-references ol li {
+    margin-block: 1em;
+}

package/src/lib/_imports/trumps/u-summary/config.yml

@@ -0,0 +1,9 @@
+status: prototype
+variants:
+  - name: default
+    hidden: true
+  - name: plain
+  - name: custom-example
+    label: Example Customization
+    context:
+      shouldLoadCMS: true

package/src/lib/_imports/trumps/u-summary/readme.md

@@ -0,0 +1,8 @@
+Utility classes for styling HTML `<summary>` elements.
+
+| Class                     | Description
+| - | - |
+| `.u-summary-with-a-link`  | For summary element with a link inside
+| `.u-summary-fake-marker`  | For summary element with custom pseudo-element markers (▸/▾)
+
+Used on [Digital Porous Media "Browse Datasets"](https://pprd.digitalrocks.tacc.utexas.edu/datasets/317/#project-files) circa 2025-06.

package/src/lib/_imports/trumps/u-summary/u-summary--custom-example.hbs

@@ -0,0 +1 @@
+{{> @u-summary wrapper-class="data-tree" example-class="data-tree__item" }}

package/src/lib/_imports/trumps/u-summary/u-summary--plain.hbs

@@ -0,0 +1 @@
+{{> @u-summary }}

package/src/lib/_imports/trumps/u-summary/u-summary.demo.css

@@ -0,0 +1,15 @@
+/* https://github.com/TACC/Core-Styles/issues/458 */
+.data-tree {
+    --indent: 1.5rem;
+}
+.data-tree__item details {
+    margin-left: var(--indent);
+}
+.data-tree__item summary {
+    margin-left: calc( -1 * var(--indent) );
+}
+.data-tree__item summary.u-summary-with-a-link::before,
+.data-tree__item summary.u-summary-fake-marker::before {
+    width: var(--indent);
+    display: inline-block;
+}

package/src/lib/_imports/trumps/u-summary/u-summary.hbs

@@ -0,0 +1,47 @@
+<dl {{#if wrapper-class}}class="{{ wrapper-class }}"{{/if}}>
+  <dt><code>.u-summary-with-a-link</code></dt>
+  <dd {{#if example-class}}class="{{ example-class }}"{{/if}}>
+    <p>Summary element containing a link:</p>
+
+    <details>
+      <summary class="u-summary-with-a-link">
+        <a href="https://example.com" target="_blank">
+          a link with a functional <code>href</code>
+        </a>
+        <small>(to toggle details, click the triangle or this small text)</small>
+      </summary>
+      <p>This is content that shows when the summary is expanded. The summary contains a navigation link to leave this page.</p>
+    </details>
+
+    <details>
+      <summary class="u-summary-with-a-link">
+        <a>
+          a link with <strong>no</strong> <code>href</code>
+        </a>
+        <small>(to toggle details, click the triangle, the link, or this small text)</small>
+      </summary>
+      <p>This demonstrates that links without href attributes are properly restored to appear as links within a summary.</p>
+    </details>
+  </dd>
+
+  <dt><code>.u-summary-fake-marker</code></dt>
+  <dd {{#if example-class}}class="{{ example-class }}"{{/if}}>
+    <p>Summary element with custom pseudo-element markers:</p>
+
+    <details>
+      <summary class="u-summary-fake-marker">
+        closed by default
+        <small>(to toggle details, click the triangle or text)</small>
+      </summary>
+      <p>This content uses custom marker styling with pseudo-elements instead of the default list markers. Notice the ▸ marker when closed and ▾ when open.</p>
+    </details>
+
+    <details open>
+      <summary class="u-summary-fake-marker">
+        open by default
+        <small>(to toggle details, click the triangle or text)</small>
+      </summary>
+      <p>This content uses custom marker styling with pseudo-elements instead of the default list markers. Notice the ▸ marker when closed and ▾ when open.</p>
+    </details>
+  </dd>
+</dl>

package/src/lib/_imports/trumps/u-summary.css

@@ -0,0 +1,19 @@
+/* To undo core-styles, which assumes href-less <a> is disabled */
+summary.u-summary-with-a-link > a:not([href]) {
+    pointer-events: auto;
+    opacity: 1;
+}
+
+/* To use text content instead of a ::marker */
+summary.u-summary-with-a-link,
+summary.u-summary-fake-marker {
+   list-style: none;
+}
+summary.u-summary-with-a-link::before,
+summary.u-summary-fake-marker::before {
+    content: '▸';
+}
+details[open] > summary.u-summary-with-a-link::before,
+details[open] > summary.u-summary-fake-marker::before {
+    content: '▾';
+}

package/dist/trumps/s-header.bootstrap.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 2.44.0+ | MIT | github.com/TACC/Core-Styles */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:hsla(0,0%,84%,.3);color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:var(--global-color-accent--normal);color:#fff;text-decoration:none}.s-header input{font-family:inherit}

package/src/lib/_imports/trumps/s-header.bootstrap.css

@@ -1,31 +0,0 @@
-/*
-Header
-
-Bootstrap styles that `s-header.css` expects exist in the same layer
-(i.e. desinger may expect to not change until a new header design):
-
-Markup: s-header.html
-
-Styleguide Trumps.Scopes.Header.Bootstrap
-*/
-@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
-
-.s-header .dropdown-item {
-  color: #212529;
-}
-.s-header .dropdown-item:focus,
-.s-header .dropdown-item:hover {
-  color: #16181b;
-  text-decoration: none;
-  background-color: rgb( from design-token('color.gray.light') r g b / 0.3 );
-}
-.s-header .dropdown-item.active,
-.s-header .dropdown-item:active {
-  color: #fff;
-  text-decoration: none;
-  background-color: var(--global-color-accent--normal);
-}
-
-.s-header input {
-  font-family: inherit;
-}