@tacc/core-styles 0.11.0 → 2.0.0

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/example.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/example.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/example.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-short }}</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-short }}</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/_settings.config.yml

@@ -0,0 +1,2 @@
+context:
+  subdir: "settings"

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

@@ -20,13 +20,18 @@
     --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;
     --global-color-primary--xx-dark-rgb: 34, 34, 34;
+  --global-color-primary--xxx-dark: #000000;
+    --global-color-primary--xxx-dark-rgb: 0, 0, 0;
 
   /* Accent */
   --global-color-accent--x-light: #e3d7fd;
@@ -34,26 +39,61 @@
   --global-color-accent--normal: #784fe8;
   --global-color-accent--dark: #6039cc;
   --global-color-accent--x-dark: #3d189b;
+  --global-color-accent--xx-dark: #281066;
+  --global-color-accent--xxx-dark: #1E0C4C;
 
   --global-color-accent--alt: #d2cce7;
   --global-color-accent--weak: #6039cc40; /* similar to #E3D7FD on #f4f4f4 */
+  --global-color-accent--secondary: var(--global-color-secondary--normal);
+  --global-color-accent--tertiary: var(--global-color-tertiary--normal);
+
+  --global-color-secondary--x-light: #e5d7c0;
+  --global-color-secondary--light: #d5b57c; /* from designer */
+  --global-color-secondary--normal: #877453; /* from designer */
+  --global-color-secondary--dark: #514328;
+  --global-color-secondary--x-dark: #332C1F; /* from designer */
+  /* HELP: Where is this used? Not Core-Styles nor TACC CMS global snippets… */
+  --global-color-secondary--xxx-dark: var(--global-color-secondary--x-dark);
+
+  --global-color-tertiary--x-light: #b8f2eb;
+  --global-color-tertiary--light: #7bd1c8;
+  --global-color-tertiary--normal: #61A39C; /* from designer */
+  --global-color-tertiary--dark: #406d68;
+  --global-color-tertiary--x-dark: #1E3331; /* from designer */
+  /* HELP: Where is this used? Not Core-Styles nor TACC CMS global snippets… */
+  --global-color-tertiary--xxx-dark: var(--global-color-tertiary--x-dark);
 
   /* 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/demo.css

@@ -0,0 +1,5 @@
+:root {
+  /* To mirror Fractal (Mandlebrot) default.css */
+  --global-font-family--sans: "-apple-system","BlinkMacSystemFont","Segoe UI","Helvetica","Arial",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  --sans: var(--global-font-family--sans);
+}

package/src/lib/_imports/settings/font/_font--family.hbs

@@ -0,0 +1,13 @@
+<dt>{{ name }}</dt>
+<dd class="demo-family--{{ modifier }}">
+  <p>
+    <kbd>var(--{{modifier}})</kbd> or
+    <kbd>var(--global-font-family--{{modifier}})</kbd>
+  </p>
+  <p>The quick brown fox jumps over the lazy dog.</p>
+  <address>
+    ABCDEFGHIJKLMNOPQRSTUVWXYZ</br>
+    abcdefghijklmnopqrstuvwxyz</br>
+    0123456789</br>
+  </address>
+</dd>

package/src/lib/_imports/settings/font/_font--size.hbs

@@ -0,0 +1,5 @@
+<dt>{{ name }}</dt>
+<dd>
+  <p><kbd>var(--global-font-size--{{ modifier }})</kbd></p>
+  <p class="demo-size--{{ modifier }}">{{> @text-of-one-sentence }}</p>
+</dd>

package/src/lib/_imports/settings/font/_font--weight.hbs

@@ -0,0 +1,33 @@
+<dt>{{ name }}</dt>
+<dd>
+  <p>
+    <kbd>var(--{{ modifier }})</kbd> or
+    <kbd>var(--global-font-weight--{{ modifier }})</kbd>
+  </p>
+  <article class="demo-weight--{{ modifier }}  demo-grid demo-grid--square demo-grid--boxes">
+    <figure class="demo-family--sans">
+      <p>Aa</p>
+      <figcaption>{{ name }}<br />Sans</figcaption>
+    </figure>
+    <figure class="demo-family--sans demo-style--italic">
+      <p>Aa</p>
+      <figcaption>{{ name }}<br />Sans</figcaption>
+    </figure>
+    <figure class="demo-family--serif">
+      <p>Aa</p>
+      <figcaption>{{ name }}<br />Serif</figcaption>
+    </figure>
+    <figure class="demo-family--serif demo-style--italic">
+      <p>Aa</p>
+      <figcaption>{{ name }}<br />Serif</figcaption>
+    </figure>
+    <figure class="demo-family--mono">
+      <p>Aa</p>
+      <figcaption>{{ name }}<br />Mono</figcaption>
+    </figure>
+    <figure class="demo-family--mono demo-style--italic">
+      <p>Aa</p>
+      <figcaption>{{ name }}<br />Mono</figcaption>
+    </figure>
+  </article>
+</dd>

package/src/lib/_imports/settings/font/config.yml

@@ -0,0 +1,16 @@
+variants:
+  - name: default
+    context:
+      shouldShowSizeMessage: true
+  - name: cms
+    status: ready
+    label: (CMS) Font
+    context:
+      shouldLoadCMS: true
+      shouldLoadBootstrap: true
+  - name: portal
+    status: ready
+    label: (Portal) Font
+    context:
+      shouldLoadPortal: true
+      shouldLoadBootstrap: true

package/src/lib/_imports/settings/font/demo-family.css

@@ -0,0 +1,10 @@
+/* To use settings */
+.demo-family--mono  { font-family: var(--mono); }
+.demo-family--serif { font-family: var(--serif); }
+.demo-family--sans  { font-family: var(--sans); }
+
+/* To style samples */
+[class*="demo-family-"] address {
+  line-height: 1.4;
+  letter-spacing: 0.5em;
+}

package/src/lib/_imports/settings/font/demo-size.css

@@ -0,0 +1,11 @@
+/* To use settings */
+.demo-size--xxx-large { font-size: var(--global-font-size--xxx-large); }
+.demo-size--xx-large { font-size: var(--global-font-size--xx-large); }
+.demo-size--x-large { font-size: var(--global-font-size--x-large); }
+.demo-size--large { font-size: var(--global-font-size--large); }
+.demo-size--medium { font-size: var(--global-font-size--medium); }
+.demo-size--small { font-size: var(--global-font-size--small); }
+.demo-size--x-small { font-size: var(--global-font-size--x-small); }
+
+/* To style samples */
+[class*="demo-family-"] div { letter-spacing: 0.5em; }

package/src/lib/_imports/settings/font/demo-style.css

@@ -0,0 +1,2 @@
+/* To style samples */
+.demo-style--italic { font-style: italic; }

package/src/lib/_imports/settings/font/demo-weight.css

@@ -0,0 +1,20 @@
+/* To use settings */
+.demo-weight--regular { font-weight: var(--regular); }
+.demo-weight--medium { font-weight: var(--medium); }
+.demo-weight--bold { font-weight: var(--bold); }
+.demo-weight--black { font-weight: var(--black); }
+
+/* To style samples */
+.demo-grid p {
+  font-size: var(--global-font-size--xxx-large);
+}
+.demo-grid figure {
+  display: flex;
+  flex-direction: column;
+}
+.demo-grid figure p {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,39 @@
+{{#if shouldShowSizeMessage}}
+<p class="c-message c-message--scope-global">
+  There are currently <em><strong>no</strong> default font sizes <strong>nor</strong> default font families</em>. A client must load <strong>CMS</strong> styles or <strong>Portal</strong> styles or their own custom font sizes.
+</p>
+{{/if}}
+<dl>
+  <dt>Family</dt>
+  <dd>
+    <dl>
+      {{> @font--family modifier="sans" name="Sans" }}
+      {{> @font--family modifier="serif" name="Serif" }}
+      {{> @font--family modifier="mono" name="Mono" }}
+    </dl>
+  </dd>
+</dl>
+<dl>
+  <dt>Size</dt>
+  <dd>
+    <dl>
+      {{> @font--size modifier="x-small" name="X Small" }}
+      {{> @font--size modifier="small" name="Small" }}
+      {{> @font--size modifier="medium" name="Medium" }}
+      {{> @font--size modifier="large" name="Large" }}
+      {{> @font--size modifier="x-large" name="X Large" }}
+      {{> @font--size modifier="xx-large" name="XX Large" }}
+      {{> @font--size modifier="xxx-large" name="XXX Large" }}
+    </dl>
+</dl>
+<dl>
+  <dt>Font Weights</dt>
+  <dd>
+    <dl>
+      {{> @font--weight modifier="regular" name="Regular"}}
+      {{> @font--weight modifier="medium" name="Medium"}}
+      {{> @font--weight modifier="bold" name="Bold"}}
+      {{> @font--weight modifier="black" name="Black"}}
+    </dl>
+  </dd>
+</dl>

package/src/lib/_imports/settings/font/readme.md

@@ -0,0 +1,8 @@
+[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables) for [font](https://developer.mozilla.org/en-US/docs/Web/CSS/font) properties.
+
+<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/settings/font--cms.css

@@ -0,0 +1,17 @@
+:root {
+  /* Family */
+  --global-font-family--sans: var(--global-font-family--sans--cms);
+  --sans: var(--global-font-family--sans);
+
+  /* Size */
+  /* https://confluence.tacc.utexas.edu/x/nh4FDg */
+  /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */
+  /* WARNING: These are only for CMS sites using Core-Styles v1+ */
+  --global-font-size--x-small: 1.0rem;
+  --global-font-size--small: 1.2rem;
+  --global-font-size--medium: 1.4rem;
+  --global-font-size--large: 1.8rem;
+  --global-font-size--x-large: 2.1rem;
+  --global-font-size--xx-large: 2.8rem;
+  --global-font-size--xxx-large: var(--global-font-size--xx-large);
+}

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

@@ -0,0 +1,18 @@
+
+:root {
+  /* Family */
+  --global-font-family--sans: var(--global-font-family--sans--cms);
+  --sans: var(--global-font-family--sans);
+
+  /* Size */
+  /* https://confluence.tacc.utexas.edu/x/nh4FDg */
+  /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */
+  /* WARNING: Used in new TACC-Docs; the values are subject to change */
+  --global-font-size--x-small: 1.0rem;
+  --global-font-size--small: 1.2rem;
+  --global-font-size--medium: 1.4rem;
+  --global-font-size--large: 1.6rem;
+  --global-font-size--x-large: 2.1rem;
+  --global-font-size--xx-large: 2.8rem;
+  --global-font-size--xxx-large: var(--global-font-size--xx-large);
+}

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

@@ -0,0 +1,17 @@
+:root {
+  /* Family */
+  --global-font-family--sans: var(--global-font-family--sans--portal);
+  --sans: var(--global-font-family--sans);
+
+  /* Size */
+  /* https://confluence.tacc.utexas.edu/x/nh4FDg */
+  /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */
+  /* WARNING: Never used yet in any Portal; the values are subject to change */
+  --global-font-size--x-small: 1.0rem;
+  --global-font-size--small: 1.2rem;
+  --global-font-size--medium: 1.4rem;
+  --global-font-size--large: 1.6rem;
+  --global-font-size--x-large: 2.0rem;
+  --global-font-size--xx-large: var(--global-font-size--x-large);
+  --global-font-size--xxx-large: var(--global-font-size--x-large);
+}