@tacc/core-styles 0.5.1

package/source/_imports/objects/o-grid.html

@@ -0,0 +1,64 @@
+<details>
+  <summary>Just Images</summary>
+
+  {# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
+  <div class="o-grid {{modifier_class}} {{ html }}">
+    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png__240x240_q85_subject_location-120%2C120_subsampling-2.png" />
+    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg" />
+    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png__600x300_q85_subject_location-289%2C146_subsampling-2.png" />
+    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" />
+  </div>
+</details>
+<details>
+  <summary>Just Text</summary>
+
+  {# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
+  <div class="o-grid {{modifier_class}} {{ html }}">
+    <p>Lorem</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus justo vel pulvinar sagittis. Nulla sed bibendum mauris, vitae faucibus erat. Ut vehicula, tellus eget sagittis vehicula, orci leo placerat est, feugiat iaculis tortor ipsum quis risus.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus justo vel pulvinar sagittis. Nulla sed bibendum mauris, vitae faucibus erat. Ut vehicula, tellus eget sagittis vehicula, orci leo placerat est, feugiat iaculis tortor ipsum quis risus. Pellentesque quis faucibus nisl. Integer dapibus, nunc nec eleifend rhoncus, nibh est finibus purus, gravida elementum ipsum purus eu metus. Donec tincidunt metus ut pretium auctor. Nulla dignissim euismod tempor. Fusce pharetra arcu nisl, eu varius est fermentum eget. Vivamus dictum aliquet turpis.</p>
+  </div>
+</details>
+<details>
+  <summary>Linked Images</summary>
+
+  {# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
+  <div class="o-grid {{modifier_class}} {{ html }}">
+    <a href="https://cep.tacc.utexas.eduhttps://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png" target="_blank">
+        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png__240x240_q85_subject_location-120%2C120_subsampling-2.png" />
+    </a>
+    <a href="https://cep.tacc.utexas.eduhttps://cep.tacc.utexas.edu/media/filer_public/0d/04/0d048909-c09c-4d87-93af-cc1afa81f762/spectrum-tall-320px.png" target="_blank">
+        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg" />
+    </a>
+    <a href="https://cep.tacc.utexas.eduhttps://cep.tacc.utexas.edu/media/filer_public/93/8c/938c12d4-1784-4061-b701-d81d975ce04c/spectrum-wide-600px.png" target="_blank">
+        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png__600x300_q85_subject_location-289%2C146_subsampling-2.png" />
+    </a>
+    <a href="https://cep.tacc.utexas.eduhttps://cep.tacc.utexas.edu/media/filer_public/bd/fb/bdfbab1f-5275-42c1-8c3d-03e2a0385027/spectrum-wide-320px.png" target="_blank">
+        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" />
+    </a>
+  </div>
+</details>
+<details>
+  <summary>Captioned Images</summary>
+
+  {# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
+  <div class="o-grid {{modifier_class}} {{ html }}">
+    <figure>
+        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png__240x240_q85_subject_location-120%2C120_subsampling-2.png" />
+        <figcaption>Spectrum Square 240px</figcaption>
+    </figure>
+    <figure>
+        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg" />
+        <figcaption>Spectrum Tall 320px</figcaption>
+    </figure>
+    <figure>
+        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png__600x300_q85_subject_location-289%2C146_subsampling-2.png" />
+        <figcaption>Spectrum Wide 600px</figcaption>
+    </figure>
+    <figure>
+        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" />
+        <figcaption>Spectrum Wide 320px</figcaption>
+    </figure>
+  </div>
+</details>

package/source/_imports/objects/o-offset-content.css

@@ -0,0 +1,51 @@
+/*
+Offset Content
+
+Content that should be offset from the flow of text within which it is placed.
+
+Styleguide Objects.OffsetContent
+*/
+@import url("_imports/tools/media-queries.css");
+
+
+
+@custom-selector :--o-offset-content
+  .o-offset-content--left,
+  .o-offset-content--right;
+
+
+
+:--o-offset-content {
+  --offset-distance: min(15vw, 410px);
+	--buffer: calc( 2 * var(--global-space--grid-gap) );
+}
+
+@media only screen and (--medium-and-above) {
+	.o-offset-content--right {
+		float: right;
+		margin-left: var(--buffer);
+	}
+	.o-offset-content--right + .o-offset-content--right { clear: right; }
+
+	.o-offset-content--left {
+		float: left;
+		margin-right: var(--buffer);
+	}
+	.o-offset-content--left + .o-offset-content--left { clear: left; }
+
+  .figure:is(:--o-offset-content) .figure-caption {
+    padding-right: 125px;
+  }
+}
+@media only screen and (--medium-and-above) and (--max-wide-and-below) {
+  :--o-offset-content {
+    max-width: 560px;
+  }
+  /* Apply negative margin only when using offset value */
+	.o-offset-content--right {
+		margin-right: calc( var(--offset-distance) * -1);
+	}
+	.o-offset-content--left {
+		margin-left: calc( var(--offset-distance) * -1);
+	}
+}

package/source/_imports/objects/o-section.css

@@ -0,0 +1,270 @@
+/*
+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("_imports/tools/media-queries.css");
+@import url("_imports/tools/x-layout.css");
+@import url("_imports/tools/x-fake-border.css");
+
+
+
+
+
+/* Block */
+
+.o-section {
+  /* GH-99: Use standard spacing value */
+  padding-block: var(--global-space--section-gap); /* ~avg. from design docs */
+}
+/* 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));
+}
+
+
+
+
+
+
+/* Modifers */
+
+
+
+/* Modifers: Banner */
+
+.o-section--banner[class*="o-section--layout"] { gap: 0; }
+.o-section--banner.container { padding-inline: 0; }
+.o-section--banner.o-section { padding-block: 0; }
+
+
+
+/* Modifers: Intro */
+/* FP-1463: Extract to new layout object */
+
+/* To hide empty an column of an intro */
+/* HACK: This assumes an intro has columns */
+/* FAQ: Only Frontera's temporary homepage uses `.o-section--intro` */
+.o-section--intro > :empty:not(img),
+.o-section--intro .u-empty {
+  display: none;
+}
+
+
+
+/* Modifers: Style */
+
+/* Modifers: Style: Options */
+
+.o-section--style-light {
+  --color--text: var(--global-color-primary--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 {
+  --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);
+  --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);
+  --color--link: var(--global-color-link-on-dark--normal);
+}
+
+/* Modifers: Style: Text & Background */
+
+[class*="o-section--style"] {
+  --line-width: var(--global-border-width--normal);
+  --box-shadow--fake-bkgd: 50vw 0 var(--color--bkgd),
+                          -50vw 0 var(--color--bkgd);
+
+  color: var(--color--text);
+  background-color: var(--color--bkgd);
+  box-shadow: var(--box-shadow--fake-bkgd);
+}
+/* Nested sections must not stretch to page edge */
+[class*="o-section--style"] [class*="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 {
+  color: var(--color--link);
+}
+[class*="o-section--style"] :is(h1, h2, h3, h4, h5, h6) {
+  color: var(--color--text-strong);
+}
+
+
+
+/* Modifers: Layout */
+/* FP-1463: Extract to new layout object */
+
+.o-section--layout-a,
+.o-section--layout-b,
+.o-section--layout-c,
+.o-section--layout-d {
+  /* GH-99: Use standard spacing value */
+  --gap: 3.0rem; /* to allow instances to re-use the gap value */
+
+  gap: var(--gap);
+}
+.o-section--layout-a { @extend .x-layout--a; }
+.o-section--layout-b { @extend .x-layout--b; }
+.o-section--layout-c { @extend .x-layout--c; }
+.o-section--layout-d { @extend .x-layout--d; }
+
+
+
+/* Modifers: Banner */
+/* FP-1462: Extract to new banner component(s) */
+
+[class*="o-section--style"].o-section--banner + [class*="o-section--style"] {
+  box-shadow: var(--box-shadow--fake-bkgd);
+}
+
+
+
+
+
+/* Children */
+
+
+
+/* Children: Banner Image */
+/* 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 {
+
+  /* To size image to cover section dimensions but maintain ratio */
+  /* CAVEAT: This causes image to overflow beyond section */
+  /* CAVEAT: The `vw` causes shrinkage on screen narrower than body min-width */
+  /* SEE: "Tricks" section */
+  width: 100vw;
+  min-height: 100%;
+  object-fit: cover;
+
+  /* To center image within section */
+  position: absolute;
+  z-index: 1;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+
+
+/* Children: Banner Overlay */
+/* 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 {
+  position: relative;
+  z-index: 2;
+}
+
+
+
+
+
+/* Tricks */
+
+
+
+/* Tricks: /* Children: Banner Image */
+/* FP-1462: Extract to new banner component(s) */
+
+/* HACK: To hide vertical overflow by placing sibling sections atop */
+[class*="o-section--style"] { position: relative; }
+/* NOTE: This selector assumes only a banner section has vertical overflow */
+/* CAVEAT: Any banner pop-out el's can NOT overflow atop sibling sections */
+[class*="o-section--style"].o-section--banner { z-index: 0; }
+/* NOTE: A `z-index` > 0 is only necessary for sections before banner */
+/* CAVEAT: Any section pop-out el's can NOT overflow atop section after it */
+[class*="o-section--style"] { z-index: 1; }
+
+/* HACK: To hide `.o-section__banner-image` overflow */
+main {
+  overflow-x: clip; /* support position sticky on element in section */
+}

package/source/_imports/objects/o-section.html

@@ -0,0 +1,73 @@
+{# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
+<section class="o-section {{modifier_class}} {{ html }}">
+  <p><strong>Section</strong></p>
+  <p>I am a Section. <small>Use light Sections to wrap most content. Use muted Sections to gently highlight some content. Use dark Sections to strongly highlight some content.</small></p>
+</section>
+
+<br />
+
+{# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
+<section class="o-section {{modifier_class}} {{ html }}">
+  <p><strong>Section (First of a Pair)</strong></p>
+  <p>A Section of the same style directly after me will create a border between both. <small>Muted sections should <strong>not</strong> appear consectuively.</small></p>
+</section>
+<section class="o-section {{modifier_class}} {{ html }}">
+  <p><strong>Section (Second of a Pair)</strong></p>
+  <p>A Section of the same style directly after me will create a border between both. <small>Muted sections should <strong>not</strong> appear consectuively.</small></p>
+</section>
+
+<br />
+
+{# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
+<section class="container  o-section {{modifier_class}} {{ html }}">
+  <p><strong>Container Section (First of a Pair)</strong></p>
+  <p>A <code>.container</code> Section has Container padding and a fake border.<small>Muted sections should <strong>not</strong> appear consectuively.</small></p>
+</section>
+<section class="container  o-section {{modifier_class}} {{ html }}">
+  <p><strong>Container Section (First of a Pair)</strong></p>
+  <p>A <code>.container</code> Section has Container padding and a fake border.<small>Muted sections should <strong>not</strong> appear consectuively.</small></p>
+</section>
+
+<br />
+
+{# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
+<section class="o-section {{modifier_class}} {{ html }}">
+  <p><strong>Section (before Muted Section)</strong></p>
+  <p>A pair of <strong>light</strong> or <strong>dark</strong> Sections may have a <strong>muted</strong> Section between them. <small>Muted sections should <strong>not</strong> appear consectuively.</small></p>
+</section>
+<section class="o-section o-section--style-muted">
+  <p><strong>(Muted) Section</strong></p>
+  <p>A <strong>muted</strong> Section would appear between two <strong>light</strong> or <strong>dark</strong> Sections. <small>It would probably not appear between two <strong>muted</strong> Sections.</small></p>
+</section>
+<section class="o-section {{modifier_class}} {{ html }}">
+  <p><strong>Section (before Muted Section)</strong></p>
+  <p>A pair of <strong>light</strong> or <strong>dark</strong> Sections may have a <strong>muted</strong> Section between them. <small>Muted sections should <strong>not</strong> appear consectuively.</small></p>
+</section>
+
+<br />
+
+{# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
+<section class="o-section {{modifier_class}} {{ html }}">
+  <p><strong>Section (with Nested Sections)</strong></p>
+  <p>Sections can be nested within me. <small>A nested Section removes the standard Section spacing.</small> <small>⚠️ It is not used in any design, so its implementation is incomplete (no borders).</small></p>
+  <div class="o-section o-section--style-dark">
+    <p><strong>(Nested) Dark Section</strong></p>
+    <p>I am nested.</p>
+  </div>
+  <div class="o-section o-section--style-muted">
+    <p><strong>(Nested) Muted Section</strong></p>
+    <p>I am nested.<!-- <small>No use case for this is expected, but it is available.<small>--></p>
+  </div>
+  <div class="o-section o-section--style-light">
+    <p><strong>(Nested) Light Section</strong></p>
+    <p>I am nested.</p>
+  </div>
+</section>
+
+<br />
+
+{# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
+<section class="o-section {{modifier_class}} {{ html }}">
+  <p><strong>Section (at Bottom of Page)</strong></p>
+  <p>At the bottom of a page: a light Section will stand out above the Footer, a muted Section will stand out above the Footer, a dark Section will visually merge with the Footer.</p>
+</section>

package/source/_imports/objects/o-site.css

@@ -0,0 +1,26 @@
+/*
+Site
+
+Layout and class names that are applicable to most websites:
+
+- ["sticky footer"](https://css-tricks.com/couple-takes-sticky-footer/)
+
+Markup: o-site.html
+
+Styleguide Objects.Site
+*/
+
+/* SEE: https://css-tricks.com/couple-takes-sticky-footer/#article-header-id-3 */
+.o-site {
+  display: flex;
+  flex-direction: column;
+}
+.o-site__body {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: auto;
+}
+.o-site__head,
+.o-site__foot {
+  flex-shrink: 0;
+}

package/source/_imports/objects/o-site.html

@@ -0,0 +1,11 @@
+<body class="o-site">
+  <header class="o-site__head">
+    Header
+  </header>
+  <main class="o-site__body">
+    Content
+  </main>
+  <footer class="o-site__foot">
+    Footer
+  </footer>
+</body>

package/source/_imports/settings/README.css

@@ -0,0 +1,65 @@
+/* DO NOT ADD STYLES HERE; ADD GLOBAL SETTINGS INSIDE STYLESHEETS IN THIS DIRECTORY */
+
+/* FAQ: To use global settings, import them into any one global stylesheet */
+
+/* FAQ: Documenting colors, typography, and variables in KSS-Node is not standard, yet.
+        If you want to support this in a custom manner, go for it. Here are some ideas:
+
+        - https://github.com/kss-node/kss-node/issues/388
+        - https://github.com/kss-node/kss/blob/spec/SPEC.md#preprocessor-helper-documentation
+        - https://github.com/kss-node/kss-node/issues/50#issuecomment-248027896
+        - https://handlebarsjs.com/
+*/
+
+/*
+Settings
+
+These settings are for global variables e.g. custom properties and custom media queries. They are meant to be used by **many** other stylesheets. Examples include, but are not limited to, sizes and colors.
+
+Reference:
+
+- [Creative Bloq: Manage Large CSS Projects With ITCSS](https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528) (find "Settings")
+
+Rules:
+
+- Custom media queries used by any files **must** be here.
+- Custom properties, i.e. variables, used by many files **must** be here.
+- Custom properties, i.e. variables, specific to one file should **not** be here.
+
+Weight: 1
+
+Styleguide Settings
+*/
+
+/*
+Custom Properties
+
+Custom properties are native CSS property value variables.
+
+Reference:
+- [Custom Properties](https://preset-env.cssdb.org/features#custom-properties)
+
+Styleguide Settings.CustomProperties
+*/
+
+/*
+Custom Media Queries
+
+Custom media queries are native CSS media query variables.
+
+Reference:
+- [Custom Media Queries](https://preset-env.cssdb.org/features#custom-media-queries)
+
+Styleguide Settings.CustomMediaQueries
+*/
+
+/*
+Custom Selectors
+
+Custom selectors are native CSS selector variables.
+
+Reference:
+- [Custom Selectors](https://preset-env.cssdb.org/features#custom-selectors)
+
+Styleguide Settings.CustomSelectors
+*/

package/source/_imports/settings/border.css

@@ -0,0 +1,15 @@
+/* SETTINGS: Border */
+
+/* Usage: `var(--global-border-width--normal)` */
+/* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */
+
+:root {
+    --global-border-width--normal: 1px;
+    --global-border--normal: var(--global-border-width--normal) solid var(--global-color-primary--normal);
+
+    --global-border-width--thick: 2px;
+    --global-border--thick: var(--global-border-width--thick) solid var(--global-color-primary--normal);
+
+    --global-border-width--x-thick: 3px;
+    --global-border--x-thick: var(--global-border-width--x-thick) solid var(--global-color-primary--normal);
+}

package/source/_imports/settings/color.css

@@ -0,0 +1,30 @@
+/* SETTINGS: Color */
+
+/* Usage: `var(--global-color-primary--normal)` */
+/* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */
+
+/* Modifers
+    --normal:   standard color
+    --alt:      alternate color
+    --weak:     transparent instance
+    --(…)light: lighter value
+    --(…)dark:  darker value
+    --(…)rgb:   "R, G, B" value partial (ex. usage: `rgba(var(--...-rgb), 0.5)`)
+*/
+
+:root {
+  /* The primary colors of any app (for neutral text, borders, backgrounds) */
+  /* IDEA: Rename these from `primary` to `neutral` */
+
+  --global-color-primary--xx-light: #FFFFFF;
+    --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--normal: #AFAFAF;
+  --global-color-primary--dark: #707070;
+  --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;
+}

package/source/_imports/settings/font.css

@@ -0,0 +1,49 @@
+/*
+Font
+
+Define standard fonts for a TACC website.
+
+Usage:
+  ```
+  .something {
+    font-family: var(--global-font-family--serif);
+    font-size: var(--global-font-size--normal);
+    font-weight: var(--global-font-weight--bold); /* or `var(--bold)` *\/
+  }
+  ```
+
+Reference:
+- https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
+- [Shared UI - Constants - Font](https://confluence.tacc.utexas.edu/x/cYAZCg)
+
+Styleguide Settings.CustomProperties.Font
+*/
+
+:root {
+  /* 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;
+
+
+
+  /* Weight */
+  /* SEE: 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;
+
+  /* NOTE: Short names to increase adoption (opinions welcome) */
+  --regular: 400;
+  --medium: 500;
+  --bold: 700;
+}