@tacc/core-styles 2.56.0 → 2.57.0-rc1

package/src/lib/_imports/bootstrap4/content/typography-headings/typography-headings.hbs

@@ -0,0 +1,12 @@
+<p class="h1">Heading 1</p>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<p class="h2">Heading 2</p>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<p class="h3">Heading 3</p>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<p class="h4">Heading 4</p>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<p class="h5">Heading 5</p>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<p class="h6">Heading 6</p>
+<p>{{> @text-of-one-paragraph-medium }}</p>

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

@@ -3,18 +3,26 @@ variants:
     hidden: true
   - name: cms
     status: ready
-    label: (CMS) Headings
+    label: CMS
+    context:
+      shouldLoadCMS: true
+      shouldLoadBootstrap: true
+  - name: cms-vs-bootstrap
+    status: wip
+    label: CMS vs. Bootstrap
+    view: 'headings--bootstrap.hbs'
     context:
       shouldLoadCMS: true
       shouldLoadBootstrap: true
   - name: docs
     status: wip
-    label: (Docs) Headings
+    label: Docs
     context:
       shouldLoadDocs: true
-  - name: portal
-    status: prototype
-    label: (Portal) Headings
+  - name: docs-vs-bootstrap
+    status: wip
+    label: Docs vs. Bootstrap
+    view: 'headings--bootstrap.hbs'
     context:
-      shouldLoadPortal: true
+      shouldLoadDocs: true
       shouldLoadBootstrap: true

package/src/lib/_imports/elements/headings/headings--bootstrap.hbs

@@ -0,0 +1,50 @@
+<p class="small text-muted mb-4">Each row: semantic tag (left) vs <code>.hN</code> on <code>&lt;p&gt;</code> (right).</p>
+
+<article class="row">
+    <div class="col-md-6">
+        <h1>Heading 1</h1>
+    </div>
+    <div class="col-md-6">
+        <p class="h1">Heading 1</p>
+    </div>
+</article>
+<article class="row">
+    <div class="col-md-6">
+        <h2>Heading 2</h2>
+    </div>
+    <div class="col-md-6">
+        <p class="h2">Heading 2</p>
+    </div>
+</article>
+<article class="row">
+    <div class="col-md-6">
+        <h3>Heading 3</h3>
+    </div>
+    <div class="col-md-6">
+        <p class="h3">Heading 3</p>
+    </div>
+</article>
+<article class="row">
+    <div class="col-md-6">
+        <h4>Heading 4</h4>
+    </div>
+    <div class="col-md-6">
+        <p class="h4">Heading 4</p>
+    </div>
+</article>
+<article class="row">
+    <div class="col-md-6">
+        <h5>Heading 5</h5>
+    </div>
+    <div class="col-md-6">
+        <p class="h5">Heading 5</p>
+    </div>
+</article>
+<article class="row mb-3 align-items-start">
+    <div class="col-md-6">
+        <h6>Heading 6</h6>
+    </div>
+    <div class="col-md-6">
+        <p class="h6">Heading 6</p>
+    </div>
+</article>

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

@@ -1,12 +1,32 @@
-<h1>Heading 1</h1>
-<p>{{> @text-of-one-paragraph-medium }}</p>
-<h2>Heading 2</h2>
-<p>{{> @text-of-one-paragraph-medium }}</p>
-<h3>Heading 3</h3>
-<p>{{> @text-of-one-paragraph-medium }}</p>
-<h4>Heading 4</h4>
-<p>{{> @text-of-one-paragraph-medium }}</p>
-<h5>Heading 5</h5>
-<p>{{> @text-of-one-paragraph-medium }}</p>
-<h6>Heading 6</h6>
-<p>{{> @text-of-one-paragraph-medium }}</p>
+<nav class="c-nav">
+  <ul>
+    <li><a href="#headings--light-section"><strong>light</strong> section</a></li>
+    <li><a href="#headings--muted-section"><strong>muted</strong> section</a></li>
+    <li><a href="#headings--dark-section"><strong>dark</strong> section</a></li>
+    <li><a href="#headings--unstyled-section"><strong>unstyled</strong> section</a></li>
+  </ul>
+</nav>
+
+<section>
+
+  <dl id="headings--light-section" class="o-section o-section--style-light">
+    <dt><strong>light</strong> <a href="{{path '../detail/o-section' }}" target="_parent">section</a></dt>
+    <dd>{{> @headings-and-paragraphs }}</dd>
+  </dl>
+
+  <dl id="headings--muted-section" class="o-section o-section--style-muted">
+    <dt><strong>muted</strong> <a href="{{path '../detail/o-section' }}" target="_parent">section</a></dt>
+    <dd>{{> @headings-and-paragraphs }}</dd>
+  </dl>
+
+  <dl id="headings--dark-section" class="o-section o-section--style-dark">
+    <dt><strong>dark</strong> <a href="{{path '../detail/o-section' }}" target="_parent">section</a></dt>
+    <dd>{{> @headings-and-paragraphs }}</dd>
+  </dl>
+
+  <dl id="headings--unstyled-section" class="o-section o-section--style-unstyled">
+    <dt><strong>unstyled</strong> <a href="{{path '../detail/o-section' }}" target="_parent">section</a></dt>
+    <dd>{{> @headings-and-paragraphs }}</dd>
+  </dl>
+
+</section>

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

@@ -1,4 +1,6 @@
 @import url("../tools/selectors.css");
+@import url("../tools/x-headings.css");
+@import url("../tools/x-headings--cms.css");
 
 /* To scope these styles to main content (i.e. not header, not navbar) */
 /* To prevent these styles on portal content (i.e. within a React app) */
@@ -7,53 +9,27 @@
 
 
 
-/* Structure */
-
 &:is( h1, h2, h3, h4, h5, h6 ) {
-    line-height: unset;
-}
-& h1 {
-    margin-bottom: 40px; /* rounded from design 42px */
-    text-transform: uppercase;
-}
-& h2 {
-    margin-top: 0px; /* depends on interpretation of design */
-    margin-bottom: 30px; /* rounded from design 31px */
+    @mixin heading;
 }
-& h3 {
-    margin-top: 0; /* designs suggest component padding can give top spacing */
-    margin-bottom: 20px; /* rounded from design 17px */
-}
-
+& h1 { @mixin heading-1; }
+& h2 { @mixin heading-2; }
+& h3 { @mixin heading-3; }
+& h4 { @mixin heading-4; }
+& h5 { @mixin heading-5; }
+& h6 { @mixin heading-6; }
 
 
-/* Skin */
 
-& h1 {
-    font-size: var(--global-font-size--xx-large);
-    font-weight: var(--black);
-}
-& h2 {
-    color: var(--global-color-accent--secondary);
-    font-size: var(--global-font-size--x-large);
-    font-weight: var(--black);
 }
-& h3 {
-    font-size: var(--global-font-size--large);
-    font-weight: var(--black);
-}
-/* WARNING: No design available; these are just developer guesswork */
-& h4 {
-    font-size: var(--global-font-size--medium);
-    font-weight: var(--bold);
-}
-/* To  deter use of "smaller" headings by making them match body font */
-& h5,
-& h6 {
-    font-size: inherit;
-    font-weight: var(--normal);
-}
-
-
 
+/* Must load after regular elements so classes take precedence */
+:is( .h1, .h2, .h3, .h4, .h5, .h6 ) {
+    @mixin heading;
 }
+.h1 { @mixin heading-1; }
+.h2 { @mixin heading-2; }
+.h3 { @mixin heading-3; }
+.h4 { @mixin heading-4; }
+.h5 { @mixin heading-5; }
+.h6 { @mixin heading-6; }

package/src/lib/_imports/elements/headings--docs.css

@@ -1,4 +1,6 @@
 @import url("../tools/selectors.css");
+@import url("../tools/x-headings.css");
+@import url("../tools/x-headings--docs.css");
 
 /* To scope these styles to main content (i.e. not header, not navbar) */
 /* To prevent these styles on portal content (i.e. within a React app) */
@@ -7,43 +9,27 @@
 
 
 
-/* Structure */
-
 &:is( h1, h2, h3, h4, h5, h6 ) {
-    line-height: unset; /* mimics headings--cms.css */
-}
-& h1 {
-    text-transform: uppercase; /* mimics headings--cms.css */
+    @mixin heading;
 }
+& h1 { @mixin heading-1; }
+& h2 { @mixin heading-2; }
+& h3 { @mixin heading-3; }
+& h4 { @mixin heading-4; }
+& h5 { @mixin heading-5; }
+& h6 { @mixin heading-6; }
 
 
 
-/* Skin */
-
-& h1 {
-    font-size: var(--global-font-size--xxx-large);
-    font-weight: var(--black);
-}
-& h2 {
-    font-size: var(--global-font-size--xx-large);
-    font-weight: var(--bold);
-}
-& h3 {
-    font-size: var(--global-font-size--x-large);
-    font-weight: var(--bold);
 }
-/* WARNING: No design available; these are just developer guesswork */
-& h4 {
-    font-size: var(--global-font-size--large);
-    font-weight: var(--bold);
-}
-/* To  deter use of "smaller" headings by making them match body font */
-& h5,
-& h6 {
-    font-size: inherit;
-    font-weight: var(--normal);
-}
-
-
 
+/* Must load after regular elements so classes take precedence */
+:is( .h1, .h2, .h3, .h4, .h5, .h6 ) {
+    @mixin heading;
 }
+.h1 { @mixin heading-1; }
+.h2 { @mixin heading-2; }
+.h3 { @mixin heading-3; }
+.h4 { @mixin heading-4; }
+.h5 { @mixin heading-5; }
+.h6 { @mixin heading-6; }

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

@@ -80,7 +80,8 @@
   --color--bkgd: var(--global-color-accent--xxx-light);
   --color--line: var(--global-color-accent--light);
 
-  & h2 {
+  & h2,
+  & .h2 {
     color: currentColor;
   }
 }
@@ -94,7 +95,8 @@
   --color--bkgd: var(--global-color-primary--xx-dark);
   --color--line: var(--global-color-primary--normal);
 
-  & h2 {
+  & h2,
+  & .h2 {
     color: var(--global-color-secondary--light);
   }
 }

package/src/lib/_imports/tools/x-headings--cms.css

@@ -0,0 +1,40 @@
+@define-mixin heading-1 {
+    font-size: var(--global-font-size--xx-large);
+    font-weight: var(--black);
+
+    margin-bottom: 40px; /* rounded from design 42px */
+    text-transform: uppercase;
+}
+
+@define-mixin heading-2 {
+    color: var(--global-color-accent--secondary);
+    font-size: var(--global-font-size--x-large);
+    font-weight: var(--black);
+
+    margin-top: 0px; /* depends on interpretation of design */
+    margin-bottom: 30px; /* rounded from design 31px */
+}
+
+@define-mixin heading-3 {
+    font-size: var(--global-font-size--large);
+    font-weight: var(--black);
+
+    margin-top: 0; /* designs suggest component padding can give top spacing */
+    margin-bottom: 20px; /* rounded from design 17px */
+}
+
+/* WARNING: No design available; these are just developer guesswork */
+@define-mixin heading-4 {
+    font-size: var(--global-font-size--medium);
+    font-weight: var(--bold);
+}
+
+/* To deter use of "smaller" headings by making them match body font */
+@define-mixin heading-5 {
+    font-size: inherit;
+    font-weight: var(--normal);
+}
+@define-mixin heading-6 {
+    font-size: inherit;
+    font-weight: var(--normal);
+}

package/src/lib/_imports/tools/x-headings--docs.css

@@ -0,0 +1,32 @@
+@define-mixin heading-1 {
+    font-size: var(--global-font-size--xxx-large);
+    font-weight: var(--black);
+
+    text-transform: uppercase; /* mimics headings--cms.css */
+}
+
+@define-mixin heading-2 {
+    font-size: var(--global-font-size--xx-large);
+    font-weight: var(--bold);
+}
+
+@define-mixin heading-3 {
+    font-size: var(--global-font-size--x-large);
+    font-weight: var(--bold);
+}
+
+/* WARNING: No design available; these are just developer guesswork */
+@define-mixin heading-4 {
+    font-size: var(--global-font-size--large);
+    font-weight: var(--bold);
+}
+
+/* To deter use of "smaller" headings by making them match body font */
+@define-mixin heading-5 {
+    font-size: inherit;
+    font-weight: var(--normal);
+}
+@define-mixin heading-6 {
+    font-size: inherit;
+    font-weight: var(--normal);
+}

package/src/lib/_imports/tools/x-headings.css

@@ -0,0 +1,3 @@
+@define-mixin heading {
+    line-height: unset;
+}

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

@@ -10,7 +10,7 @@
   color: inherit;
 
   text-decoration-line: underline;
-  text-decoration-color: color-mix(currentColor 50%, transparent);
+  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
 
   &:hover {
     text-decoration-color: inherit;
@@ -20,7 +20,7 @@
 /* BASE */
 
 .s-footer {
-  color: var(--global-color-primary--x-light);
+  color: var(--global-color-primary--light);
   background-color: var(--global-color-primary--xx-dark);
 
   font-size: var(--global-font-size--small);

package/dist/_utils/js/auto-make-link-text-selectable.js

@@ -1,15 +0,0 @@
-import makeLinkContentSelectable from './make-link-text-selectable.js';
-
-const params = Object.values({
-  linkAttribute: 'data-text-selectable',
-  linkTextSelector: '*',
-  cssLayer: 'base.allow-override'
-});
-
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', () => {
-    makeLinkContentSelectable(...params)
-  });
-} else {
-  makeLinkContentSelectable(...params);
-}

package/dist/_utils/js/make-link-text-selectable.js

@@ -1,85 +0,0 @@
-/**
- * Makes text selectable within specified anchor links
- * (applies to existing links and new links)
- * @param {string} [linkAttribute="data-text-selectable"] - The linkAttribute on links with selectable text
- * @param {string|string[]} [linkTextSelector='*'] - Query to find link text elements to make selectable
- * @param {string} [cssLayer] - The CSS layer for the required styles
- * @returns {Object} An object with a `disable` method to remove the functionality
- */
-export default function makeLinkContentSelectable(
-  linkAttribute = 'data-text-selectable',
-  linkTextSelector = '*',
-  cssLayer
-) {
-  const linkQuery = `a[${linkAttribute}]:has(${linkTextSelector})`;
-
-  const style = document.createElement('style');
-        style.textContent = `
-          a[${linkAttribute}] {
-            display: inline-block;
-          }
-          a[${linkAttribute}] :is(${linkTextSelector}) {
-            cursor: text;
-            -webkit-user-select: text;
-            user-select: text;
-          }
-      `;
-      if (cssLayer) {
-        style.textContent = `
-        @layer ${cssLayer} {` + '\n'
-          + style.textContent + `
-        }`;
-      }
-  document.head.appendChild(style);
-
-  function handleClick(e) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  function processLink(link) {
-    link.draggable = false;
-    link.querySelectorAll(linkTextSelector).forEach(element => {
-      element.addEventListener('click', handleClick);
-    });
-  }
-  function unProcessLink(link) {
-    link.draggable = true;
-    link.querySelectorAll(linkTextSelector).forEach(element => {
-      element.addEventListener('click', handleClick);
-    });
-  }
-
-  // For present links
-  document.querySelectorAll(linkQuery).forEach(link => {
-    processLink(link);
-  });
-
-  // For future links
-  const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      mutation.addedNodes.forEach((node) => {
-        const isElement = node.nodeType === Node.ELEMENT_NODE;
-        const isLinkToProcess = isElement && node.matches(linkQuery);
-        if (isLinkToProcess) {
-          processLink(node);
-        }
-      });
-    });
-  });
-  observer.observe(document.body, { childList: true, subtree: true });
-
-  console.log('Activated selectable text in links');
-
-  return {
-    /** To disable selectable text in links */
-    disable: () => {
-      observer.disconnect();
-      style.remove();
-      document.querySelectorAll(linkQuery).forEach(link => {
-        unProcessLink(link);
-      });
-      console.log('Disabled selectable text in links');
-    }
-  };
-}

package/dist/_utils/js/open-ext-links-in-new-window.js

@@ -1,4 +0,0 @@
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');

package/src/lib/_imports/elements/headings/headings--cms.hbs

@@ -1,22 +0,0 @@
-{{> @headings }}
-<hr />
-<nav class="c-nav">
-  <ul>
-    <li><a href="#headings--dark-section"><strong>dark</strong> section</a></li>
-    <li><a href="#headings--muted-section"><strong>muted</strong> section</a></li>
-    <li><a href="#headings--light-section"><strong>light</strong> section</a></li>
-    <li><a href="#headings--unstyled-section"><strong>unstyled</strong> section</a></li>
-  </ul>
-</nav>
-<section id="headings--dark-section" class="o-section o-section--style-dark"><strong>dark</strong> <a href="{{path '../detail/o-section' }}" target="_parent">section</a></dt>
-  {{> @headings }}
-</section>
-<section id="headings--muted-section" class="o-section o-section--style-muted"><strong>muted</strong> <a href="{{path '../detail/o-section' }}" target="_parent">section</a></dt>
-  {{> @headings }}
-</section>
-<section id="headings--light-section" class="o-section o-section--style-light"><strong>light</strong> <a href="{{path '../detail/o-section' }}" target="_parent">section</a></dt>
-  {{> @headings }}
-</section>
-<section id="headings--unstyled-section" class="o-section o-section--style-unstyled"><strong>unstyled</strong> <a href="{{path '../detail/o-section' }}" target="_parent">section</a></dt>
-  {{> @headings }}
-</section>