@tacc/core-styles 2.26.1 → 2.27.0

package/docs/bootstrap.md

@@ -1,16 +1,29 @@
 # Bootstrap Compatibility
 
-Core Styles styles:
+## Core Styles v2
 
-- are independent of Bootstrap[^1]
-- alters some Bootstrap styles (to fit Core Styles)
-- replaces some Bootstrap classes (to deprecate use of Boostrap)
+Because [several TACC projects load Bootstrap (internal document)](https://tacc-main.atlassian.net/wiki/x/khJv).
 
-TACC projects should prefer Core Styles to Bootstrap.[^2]
+- independent of Bootstrap\
+    <sup>(to the best of its authors' knowledge and efforts)</sup>
+- alters some Bootstrap styles\
+    <sup>(to look like Core Styles)</sup>
+- replaces some Bootstrap classes\
+    <sup>(to deprecate use of Boostrap)</sup>
+
+## [Core Styles v3](https://github.com/TACC/Core-Styles/milestone/1)
+
+Because external projects, that request TACC assistance, often use Bootstrap.
+
+Core-Styles v3 will support Bootstrap differently, but will retain existing compatibility.
+
+## Support
+
+Any support is for [Bootstrap v4](https://getbootstrap.com/docs/4.0) unless otherwise noted.
 
 | regular CSS <u>replaces</u> | Bootstrap
 | - | -
-| [Grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grid) (on [Core Portal])* | [Grid](https://getbootstrap.com/docs/4.0/layout/grid/)
+| [Grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grid) (on [Core Portal])\* | [Grid](https://getbootstrap.com/docs/4.0/layout/grid/)
 | [elements](https://github.com/TACC/Core-Styles/tree/v2.14.0/src/lib/_imports/elements) & [generics](https://github.com/TACC/Core-Styles/tree/v2.14.0/src/lib/_imports/elements) | [Reboot](https://getbootstrap.com/docs/4.0/getting-started/introduction/#reboot)
 | write styles instead | [Utilities](https://getbootstrap.com/docs/4.0/utilities/borders/)
 
@@ -27,11 +40,12 @@ TACC projects should prefer Core Styles to Bootstrap.[^2]
 
 | Core Styles <u>extends</u> | Bootstrap
 | - | -
-| [Row](https://github.com/TACC/Core-Styles/blob/v2.14.0/src/lib/_imports/components/bootstrap.row.css) | Grid: Row
+| [Row](https://github.com/TACC/Core-Styles/blob/v2.14.0/src/lib/_imports/components/bootstrap.row.css) | [Grid](https://getbootstrap.com/docs/4.0/layout/grid/): Row
 
 | Core Styles <u>changes</u> | Bootstrap
 | - | -
 | [Container](https://tacc.utexas.edu/static/ui/components/detail/bootstrap--container.html) | [Grid](https://getbootstrap.com/docs/4.0/layout/grid/): Container
+| [Breadcrumb](https://tacc.utexas.edu/static/ui/components/detail/bootstrap3--breadcrumb) | [Breadcrumb (**v3**)](https://getbootstrap.com/docs/4.0/components/breadcrumb/)
 | [Modal](https://tacc.utexas.edu/static/ui/components/detail/bootstrap--modal.html) | [Modal](https://getbootstrap.com/docs/4.0/components/modal/)
 | [Nav Tabs](https://tacc.utexas.edu/static/ui/components/detail/bootstrap--nav-tabs.html) | Navs: [Tabs](https://getbootstrap.com/docs/4.0/components/navs/#tabs)
 | [Pagination](https://github.com/TACC/Core-Styles/blob/v2.14.0/src/lib/_imports/components/bootstrap.pagination.css) | [Pagination](https://getbootstrap.com/docs/4.0/components/pagination/)
@@ -39,13 +53,10 @@ TACC projects should prefer Core Styles to Bootstrap.[^2]
 | Where Core Styles <u>yields</u> to | Bootstrap
 | - | -
 | Modal | [Modal](https://getbootstrap.com/docs/4.0/components/modal/)
-| Grid (on [Core CMS])* | [Grid](https://getbootstrap.com/docs/4.0/layout/grid/)
-
-<small>\* On [Core Portal], use regular CSS Grid, because it is more flexible. On [Core CMS], use Bootstrap Grid, because we use a Django CMS Bootstrap plugin.</small>
-<small>† On [TACC Docs] and Admonitions plugin is available. Core Styles redesigns them to extend its own "Messages" design.</small>
+| Grid (on [Core CMS])\* | [Grid](https://getbootstrap.com/docs/4.0/layout/grid/)
 
-[^1]: To the best of its authors' knowledge and efforts.
-[^2]: [Some TACC projects stll load Bootstrap.](https://confluence.tacc.utexas.edu/x/OAACBw)
+<sup>\* On [Core Portal], use regular CSS Grid, because it is more flexible. On [Core CMS], use Bootstrap Grid, because we use a Django CMS Bootstrap plugin.</sup>\
+<sup>† On [TACC Docs] and Admonitions plugin is available. Core Styles redesigns them to extend its own "Messages" design.</sup>
 
 [Core CMS]: https://github.com/TACC/Core-CMS
 [Core Portal]: https://github.com/TACC/Core-Portal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacc/core-styles",
-  "version": "2.26.1",
+  "version": "2.27.0",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",
@@ -41,11 +41,12 @@
     "js-yaml": "^4.1.0",
     "merge-lite": "^1.0.2",
     "node-cmd": "^5.0.0",
-    "postcss": "^8.4.18",
+    "postcss": "^8.4.38",
     "postcss-banner": "^4.0.1",
     "postcss-cli": "^10.0.0",
     "postcss-extend": "^1.0.5",
     "postcss-import": "^15.0.0",
+    "postcss-mixins": "^10.0.1",
     "postcss-preset-env": "^7.8.3",
     "postcss-replace": "^2.0.1"
   },
@@ -59,7 +60,7 @@
     "postcss-banner": "To prepend preserved comment to built stylesheets",
     "postcss-cli": "To process CSS (the simplest and cheapest PostCSS runner)",
     "postcss-import": "To import CSS files at build-time",
-    "postcss-extend": "To extend CSS rule sets at build-time",
+    "postcss-extend": "(DEPRECATED) To extend CSS rule sets at build-time",
     "postcss-preset-env": "To use future CSS features now",
     "// postcss-preset-env": "Using bleeding edge because https://github.com/csstools/postcss-plugins/issues/481#issuecomment-1334903391",
     "postcss-replace": "To edit relative paths to fonts"

package/src/.postcssrc.base.yml

@@ -3,7 +3,9 @@ plugins:
     path:
       - 'src/lib'
 
-  postcss-extend: {}
+  postcss-extend: {} # DEPRECATED
+
+  postcss-mixins: {}
 
   postcss-preset-env:
     # https://github.com/csstools/postcss-preset-env#features

package/src/lib/_imports/_preview.hbs

@@ -10,11 +10,19 @@
 @layer foundation, base, project;
 </style>
 
-{{#if _target.context.shouldLoadBootstrap}}
+{{#if _target.context.shouldLoadBootstrap }}
 {{#unless _target.context.shouldSkipBootstrap }}
 <!-- Styles: Global (for current pattern): Bootstrap -->
 <style>
-  @import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') layer(foundation);
+  @import url('https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css') layer(foundation);
+</style>
+{{/unless}}
+{{/if}}
+{{#if _target.context.shouldLoadBootstrap3 }}
+{{#unless _target.context.shouldSkipBootstrap3 }}
+<!-- Styles: Global (for current pattern): Bootstrap -->
+<style>
+  @import url('https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css') layer(foundation);
 </style>
 {{/unless}}
 {{/if}}
@@ -80,6 +88,11 @@
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 {{/if}}
+{{#if _target.context.shouldLoadBootstrap3}}
+<!-- Scripts: Global (for current pattern): Bootstrap -->
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" crossorigin="anonymous"></script>
+{{/if}}
 
 <!-- Scripts: Local (for current pattern) -->
 {{#each _target.resources.assets}}

package/src/lib/_imports/components/bootstrap/bootstrap.hbs

@@ -1,6 +1 @@
-<dl>
-    <dt>TACC Usage</dt>
-    <dd>TACC Core minimizes its legacy dependency on Bootstrap.</dd>
-    <dt>More Information</dt>
-    <dd>See "Notes" tab.<dd>
-</dl>
+<a href="https://tacc-main.atlassian.net/wiki/x/khJv" target="_blank">Bootstrap v4 is used by TACC several projects.</a>

package/src/lib/_imports/components/bootstrap/config.yml

@@ -1,8 +1,9 @@
+label: Bootstrap 4
 context:
   shouldLoadBootstrap: true
 variants:
   - name: default
-    hidden: true
+    label: README
   - name: container
     status: ready
   - name: col

package/src/lib/_imports/components/bootstrap3/bootstrap3--breadcrumb.hbs

@@ -0,0 +1,22 @@
+<dl>
+  <dt>Major Navigation</dt>
+  <dd>
+    <ol class="breadcrumb breadcrumb-major">
+      <li><a href="#">Home</a></li>
+      <li><a>Fruit</a></li>
+      <li><a href="#">Tropical</a></li>
+      <li><a href="#">Yellow</a></li>
+      <li class="active">Bananas</li>
+    </ol>
+  </dd>
+  <dt>Plain</dt>
+  <dd>
+    <ol class="breadcrumb">
+      <li><a href="#">Home</a></li>
+      <li><a>Fruit</a></li>
+      <li><a href="#">Tropical</a></li>
+      <li><a href="#">Yellow</a></li>
+      <li class="active">Bananas</li>
+    </ol>
+  </dd>
+</dl>

package/src/lib/_imports/components/bootstrap3/bootstrap3--breadcrumb.readme.md

@@ -0,0 +1,8 @@
+To skin [Bootstrap 3 Breadcrumbs](https://getbootstrap.com/docs/3.3/components/#breadcrumbs).
+
+| Class & Markup | Description | Notes |
+| - | - | - |
+| `.breadcrumb .breadcrumb-major` | Major navigation |
+| `.breadcrumb` | No font styling nor extra spacing |
+
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/components/bootstrap3/bootstrap3.hbs

@@ -0,0 +1 @@
+<a href="https://tacc-main.atlassian.net/wiki/x/khJv" target="_blank">Bootstrap v3 is used by one TACC project.</a>

package/src/lib/_imports/components/bootstrap3/config.yml

@@ -0,0 +1,10 @@
+context:
+  shouldLoadBootstrap3: true
+variants:
+  - name: default
+    label: README
+  - name: breadcrumb
+    status: prototype
+    context:
+      supportStyles:
+        - ../../assets/components/bootstrap3.breadcrumb.css

package/src/lib/_imports/components/bootstrap3.breadcrumb.css

@@ -0,0 +1,39 @@
+@import url("../tools/x-breadcrumbs.css");
+
+.breadcrumb {
+  @mixin x-breadcrumbs;
+
+  background-color: unset;
+  padding-bottom: unset;
+  padding-right: unset;
+}
+.breadcrumb:where(.breadcrumb-major) {
+  @mixin x-breadcrumbs-major;
+}
+.breadcrumb:where(:not(.breadcrumb-major)) {
+  padding-top: unset;
+}
+
+.breadcrumb:where(ol, ul) {
+  @mixin x-breadcrumbs--list;
+}
+.breadcrumb:where(ol, ul):where(.breadcrumb-major) {
+  @mixin x-breadcrumbs-major--list;
+}
+
+.breadcrumb li {
+  @mixin x-breadcrumbs__list-item;
+}
+.breadcrumb:where(.breadcrumb-major) li {
+  @mixin x-breadcrumbs-major__list-item;
+}
+
+.breadcrumb > .active {
+  color: inherit;
+}
+.breadcrumb li + li {
+  @mixin x-breadcrumbs__list-item--prefix-separator;
+}
+.breadcrumb li + li::before {
+  color: inherit;
+}

package/src/lib/_imports/components/bootstrap3.css

@@ -0,0 +1,3 @@
+/* EMPTY ON PURPOSE! */
+/* FAQ: Created to avoid 404 in pattern library. */
+/* WARNING: This file should never have styles. */

package/src/lib/_imports/components/django-cms-forms.hacks.css

@@ -11,7 +11,7 @@ Styleguide Components.DjangoCMS.Forms.Hacks
 */
 @custom-selector :--django-cms-logged-in   .cms-ready;
 @custom-selector :--django-cms-edit-mode   [class*="cms-structure-mode-"];
-/* IDEA: import and extend `.c-message(...)` */
+/* IDEA: @import and @mixin `.c-message(...)` */
 /* IDEA: WP-280 use postcss mixin for message styles */
 /* @tacc/core-styles/src/lib/_imports/components/c-message.css */
 
@@ -20,7 +20,6 @@ Styleguide Components.DjangoCMS.Forms.Hacks
 
 /* To inform user or admin about unsupported required multi-checkbox field */
 /* HACK: This does not solve the problem; it just announces it */
-/* NOTE: Were we to @extend :--c-message, generated selectors become messy */
 :--problem-field > label::after {
   display: block;
   margin-top: 0.5em;

package/src/lib/_imports/components/tacc-docs/tacc-docs.hbs

@@ -41,3 +41,18 @@ ibrun gmx_mpi mdrun -s topol.tpr -o traj.trr -c confout.gro -e ener.edr -g md.lo
     </dl>
   </dd>
 </dl>
+<dl>
+  <dt>Breadcrumbs</dt>
+  <dd class="rst-content">
+    <div role="navigation" aria-label="breadcrumbs navigation">
+      <ul class="wy-breadcrumbs">
+        <li><a href="../.." class="icon icon-home" aria-label="Docs">⌂</a> »</li>
+        <li>HPC User Guides »</li>
+        <li>Corral</li>
+        <!--<li class="wy-breadcrumbs-aside">
+        </li>-->
+      </ul>
+      <hr>
+    </div>
+  </dd>
+</dl>

package/src/lib/_imports/components/tacc-docs.css

@@ -1,4 +1,4 @@
-@import url("../trumps/s-breadcrumbs.css");
+@import url("../tools/x-breadcrumbs.css");
 
 .cmd-line,
 .job-script {
@@ -7,5 +7,17 @@
 }
 
 .rst-content > [role="navigation"] {
-  @extend .s-breadcrumbs-via-ul;
+  @mixin x-breadcrumbs;
+  @mixin x-breadcrumbs-major;
+}
+.rst-content > [role="navigation"] ul {
+  @mixin x-breadcrumbs__list;
+  @mixin x-breadcrumbs-major__list;
+}
+.rst-content > [role="navigation"] li {
+  @mixin x-breadcrumbs__list-item;
+  @mixin x-breadcrumbs-major__list-item;
+}
+.rst-content > [role="navigation"] li + li {
+  @mixin x-breadcrumbs__list-item--prefix-separator;
 }

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

@@ -0,0 +1,82 @@
+/*
+Breadcrumbs
+
+A list of links to ancestor navigation (pages or sections that are a parent, grandparent, et cetera of the current page or section) and the current page or section itself.
+
+.x-breadcrumbs                              - The breadcrumbs container
+.x-breadcrumbs-major                          (for major navigation)
+.x-breadcrumbs--list                        - The list element as the container
+.x-breadcrumbs-major--list                    (for major navigation)
+.x-breadcrumbs__list                        - The list element as a child of the container
+.x-breadcrumbs-major__list                    (for major navigation)
+.x-breadcrumbs__list-item                   - All list items
+.x-breadcrumbs-major__list-item               (for major navigation)
+.x-breadcrumbs__list-item--suffix-separator - Add spearator after list items
+.x-breadcrumbs__list-item--prefix-separator - Add spearator before list items
+
+Styleguide Tools.Mixins.Breadcrumbs
+*/
+
+
+
+/* Container */
+
+@define-mixin x-breadcrumbs {}
+@define-mixin x-breadcrumbs-major {
+  padding-top: var(--global-space--above-breadcrumbs, 45px);
+  margin-bottom: var(--global-space--under-breadcrumbs, 40px);
+  font-size: var(--global-font-size--x-small, 1.4rem);
+}
+
+/* Content */
+
+@define-mixin x-breadcrumbs--list {
+  /* To remove whitespace between items (but still allow text wrap) */
+  display: flex;
+  flex-wrap: wrap;
+
+  /* To undo default browser list (`<ol>`, `<ul>`) styles */
+  list-style: none;
+  padding-left: unset;
+  margin-top: unset;
+}
+@define-mixin x-breadcrumbs-major--list {
+  font-weight: var(--global-font-weight--medium, 500);
+}
+
+@define-mixin x-breadcrumbs__list {
+  @mixin x-breadcrumbs--list;
+
+  /* To undo default browser list (`<ol>`, `<ul>`) styles */
+  margin-bottom: unset;
+}
+@define-mixin x-breadcrumbs-major__list {
+  @mixin x-breadcrumbs-major--list;
+}
+
+@define-mixin x-breadcrumbs__list-item {
+  /* To remove whitespace around text */
+  display: inline-flex;
+}
+@define-mixin x-breadcrumbs-major__list-item {
+  &:last-child {
+    font-weight: var(--global-font-weight--bold, 700);
+  }
+}
+
+@define-mixin x-breadcrumbs__list-item--separator {
+  &::after,
+  &::before {
+    padding-inline: 0.5ch;
+  }
+}
+@define-mixin x-breadcrumbs__list-item--suffix-separator {
+  @mixin x-breadcrumbs__list-item--separator;
+
+  &::after { content: ">"; }
+}
+@define-mixin x-breadcrumbs__list-item--prefix-separator {
+  @mixin x-breadcrumbs__list-item--separator;
+
+  &::before { content: ">"; }
+}

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

@@ -0,0 +1,73 @@
+<dl>
+
+  <dt>Major Navigation</dt>
+  <dd>
+    <nav class="s-breadcrumbs">
+      <ol>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a href="#">Home</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a>Fruit</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a href="#">Tropical</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a href="#">Yellow</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          Bananas
+        </li>
+      </ol>
+    </nav>
+  </dd>
+
+  <dt>Other Navigation</dt>
+  <dd>
+    <ol class="s-breadcrumbs">
+      <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+        <a href="#">Home</a>
+      </li>
+      <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+        <a>Fruit</a>
+      </li>
+      <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+        <a href="#">Tropical</a>
+      </li>
+      <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+        <a href="#">Yellow</a>
+      </li>
+      <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+        Bananas
+      </li>
+    </ol>
+  </dd>
+</dl>
+
+<hr />
+
+<dl>
+  <dt><em>Deprecated</em> Major Navigation</dt>
+  <dd>
+    <div class="s-breadcrumbs-via-ul">
+      <ul>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a href="#">Home</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a>Fruit</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a href="#">Tropical</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          <a href="#">Yellow</a>
+        </li>
+        <li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+          Bananas
+        </li>
+      </ul>
+    </div>
+  </dd>
+</dl>

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

@@ -0,0 +1,20 @@
+A list of links to ancestor navigation (pages or sections that are a parent, grandparent, et cetera of the current page or section) and the current page or section itself.
+
+- `.s-breadcrumbs`: root class for `<nav>` (major nav) or `<ol>` (other nav)
+- `.s-breadcrumbs-via-ul`: alternate root class for `<ul>` (not recommended)
+
+> **ⓘ Notice**
+>
+> A scope class is used to enforce appropriate semantic HTML.
+
+> **ⓘ Notice**
+>
+> The markup uses embedded [Breadcrumb microdata](https://schema.org/ListItem).
+
+| Class & Markup | Description | Notes |
+| - | - | - |
+| `nav.s-breadcrumb ol` | Major navigation |
+| `ol.s-breadcrumb` | Other navigation |
+| `div.s-breadcrumb ul` | Major navigation (Inaccurate markup) | Use when markup cannot be changed. |
+
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

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

@@ -1,77 +1,37 @@
-/*
-Breadcrumbs
+@import url("../tools/x-breadcrumbs.css");
 
-A list of links to ancestor navigation (pages or sections that are a parent, grandparent, et cetera of the current page or section) and the current page or section itself.
-
-- `.s-breadcrumbs`: root class for <nav>, <... [role="nav"]>, or <ol>
-- `.s-breadcrumbs-via-ul`: alternate root class for <ul> (not recommended)
-
-Notice: A scope class is used to enforce appropriate semantic HTML.
-
-Markup:
-<!-- Major Navigation -->
-<!-- FAQ: Use this major navigation markup for global breadcrumbs -->
-<!-- SEE: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#usage_notes -->
-<nav class="s-breadcrumbs">
-  <ol>
-      <li><a href="/"><span>Home</span></a></li>
-      <li><a href="/"><span>Science</span></a></li>
-      <li><span>Publications</span></li>
-  </ol>
-</nav>
-<!-- Minor Navigation -->
-<ol class="s-breadcrumbs">
-    <li><a href="/"><span>Home</span></a></li>
-    <li><a href="/"><span>Science</span></a></li>
-    <li><span>Publications</span></li>
-</ol>
-
-Styleguide Trumps.Scopes.Breadcrumbs
-*/
-@import url("../tools/selectors.css");
-@import url("../tools/x-truncate.css");
-
-
-
-
-
-/* Base i.e. Container */
-
-.s-breadcrumbs:is(nav),
+.s-breadcrumbs:where(nav),
+.s-breadcrumbs:where(ol),
 .s-breadcrumbs-via-ul {
-  padding-top: var(--global-space--above-breadcrumbs);
-  margin-bottom: var(--global-space--under-breadcrumbs);
-
-  font-size: var(--global-font-size--x-small);
+  @mixin x-breadcrumbs;
+}
+.s-breadcrumbs:where(nav),
+.s-breadcrumbs-via-ul {
+  @mixin x-breadcrumbs-major;
 }
 
-
-
-/* Elements i.e. Content */
-
-/* To undo default list styles */
-.s-breadcrumbs:is(nav) ol,
+.s-breadcrumbs:where(nav) ol,
+.s-breadcrumbs:where(ol),
 .s-breadcrumbs-via-ul ul {
-  list-style: none; /* overwrite browser styles */
-  padding-left: unset; /* undo html-elements.css */
-  margin-bottom: unset; /* undo html-elements.css */
-
-  font-weight: var(--global-font-weight--medium);
+  @mixin x-breadcrumbs__list;
+}
+.s-breadcrumbs:where(nav) ol,
+.s-breadcrumbs-via-ul ul {
+  @mixin x-breadcrumbs-major__list;
 }
 
-.s-breadcrumbs:is(ol) li,
-.s-breadcrumbs:is(nav) ol li,
+.s-breadcrumbs:where(nav) ol li,
+.s-breadcrumbs:where(ol) li,
 .s-breadcrumbs-via-ul ul li {
-  display: inline-block;
+  @mixin x-breadcrumbs__list-item;
 }
-
-.s-breadcrumbs:is(ol) li + li::before,
-.s-breadcrumbs:is(nav) ol li + li::before,
-.s-breadcrumbs-via-ul ul li + li::before {
-  content: ' > ';
+.s-breadcrumbs:where(nav) ol li,
+.s-breadcrumbs-via-ul ul li {
+  @mixin x-breadcrumbs-major__list-item;
 }
 
-.s-breadcrumbs:is(nav) ol li:last-child,
-.s-breadcrumbs-via-ul ul li:last-child {
-  font-weight: var(--bold);
+.s-breadcrumbs:where(nav) ol li + li,
+.s-breadcrumbs:where(ol) li + li,
+.s-breadcrumbs-via-ul ul li + li {
+  @mixin x-breadcrumbs__list-item--prefix-separator;
 }

package/src/lib/_imports/components/bootstrap/bootstrap.readme.md

@@ -1,9 +0,0 @@
-> **ⓘ Notice**
->
-> [Despite high usage and awareness of Bootstrap, it has low and decreasing satisfaction and interest.](https://2021.stateofcss.com/en-US/technologies/css-frameworks) TACC Core use its components only when building our own would be more work than overwriting Bootstrap.
-
-> **ⓘ Notice**
->
-> Overwriting Bootstrap is cumbersome and **not** the [appropriate way to theme Bootstrap](https://getbootstrap.com/docs/4.0/getting-started/theming/), but TACC Core is **not** using SASS; it uses PostCSS.
-
-<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />