@tacc/core-styles 1.0.0 → 2.0.0

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,39 +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/x-layout.css");
-@import url("../tools/x-fake-border.css");
+@import url("../components/c-card.selectors.css");
+
+@import url("./o-section.selectors.css");
 
 
 
@@ -41,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));
 }
 
 
@@ -69,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; }
 
 
 
@@ -90,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);
@@ -114,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);
 
@@ -124,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);
 }
 
@@ -200,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);
 }
 
@@ -216,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 */
@@ -240,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;
 }
@@ -258,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-table-wrap/config.yml

@@ -45,8 +45,10 @@ variants:
             custom-1: 250.0 MB
             time: 04/20/2020 15:03:10
 context:
-  shouldLoadBootstrap: true # not yet tested without Bootstrap
-  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
+  shouldLoadBootstrap: true
+  📝 shouldLoadBootstrap: >-
+    not yet tested without Bootstrap
+    (known dependencies: <caption> font color)
   data:
     cols:
       - ID

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap.hbs

@@ -1,5 +1,5 @@
 <div>
-  <p>{{> @text-of-one-paragraph }}</p>
+  <p>{{> @text-of-one-paragraph-short }}</p>
 </div>
 {{#> @partial-block}}
 <div>
@@ -7,5 +7,5 @@
 </div>
 {{/@partial-block}}
 <div>
-  <p>{{> @text-of-one-paragraph }}</p>
+  <p>{{> @text-of-one-paragraph-short }}</p>
 </div>

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

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

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

@@ -30,6 +30,8 @@
     --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;
@@ -37,9 +39,29 @@
   --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);

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);
+}

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

@@ -23,37 +23,26 @@ Styleguide Settings.CustomProperties.Font
 
 :root {
   /* Family */
+  /* https://confluence.tacc.utexas.edu/x/nB4FDg */
   --global-font-family--sans--cms: "Benton Sans", "Roboto", sans-serif;
   --global-font-family--sans--portal: "Roboto", sans-serif;
   --global-font-family--serif: Times, sans-serif;
   --global-font-family--mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-
-  /* Size */
-  /* SEE: https://confluence.tacc.utexas.edu/x/nh4FDg */
-  /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */
-
-  --global-font-size--x-small: 1.1rem;
-  --global-font-size--small: 1.4rem;
-  --global-font-size--medium: 1.6rem;
-  --global-font-size--large: 2.0rem;
-  --global-font-size--x-large: 2.6rem;
-  --global-font-size--xx-large: 3.2rem;
-  --global-font-size--xxx-large: 4.1rem;
-
-
+  --sans--cms: var(--global-font-family--sans--cms);
+  --sans--portal: var(--global-font-family--sans--portal);
+  --serif: var(--global-font-family--serif);
+  --mono: var(--global-font-family--mono);
 
   /* Weight */
-  /* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
-
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
   /* NOTE: Long names to be consistent (opinions welcome) */
   --global-font-weight--regular: 400;
   --global-font-weight--medium: 500;
   --global-font-weight--bold: 700;
   --global-font-weight--black: 800;
-
   /* NOTE: Short names to increase adoption (opinions welcome) */
-  --regular: 400;
-  --medium: 500;
-  --bold: 700;
-  --black: 800;
+  --regular: var(--global-font-weight--regular);
+  --medium: var(--global-font-weight--medium);
+  --bold: var(--global-font-weight--bold);
+  --black: var(--global-font-weight--black);
 }